/* ==========================================================================
   Article components for the en-cg guide pages.

   style.css dresses the Congo landing page; it has no vocabulary for a long
   read — the AI blocks, the PDF's own charts, data tables, the author card.
   Those rules are lifted from the published guide template so an en-cg guide
   reads exactly like one.

   Three tokens are written out as literals rather than inherited, because the
   landing page's :root reads them very differently from the guide template's
   and the boxes and tables came out the wrong colour:

     --accent-yellow   guide #ffaf02   landing #f8fafc  (near-white: no accent
                                                         edge on any box at all)
     --text-muted      guide #64748b   landing #22968e  (teal captions)
     --bg-light        guide #f8fafc   landing #f1f5f9

   Everything else - secondary, border, text-main, bg-card, the fonts - is
   identical in both, so those stay as variables and follow the Congo page.
   ========================================================================== */

/* --- the page's own two headings ---------------------------------------- */
.welcome-block h1,
#article-headline {
  color: #0369a1;
}

.welcome-block h1,
h2.article-standfirst {
  text-align: center;
}

h2.article-standfirst {
  display: block;
  margin: 10px auto 18px;
  max-width: 60ch;
  line-height: 1.45;
  color: #0369a1 !important;
  font-size: 20px !important;
}

/* The headings the article itself writes — section heads, the closing word,
   the sources. On the class rather than inline, so the phone type scale can
   find them. Most take the amber the closing word carries; the few that open a
   decision rather than describe one take the navy. */
h3.article-heading {
  color: #fb9a40;
  margin: 24px 0 0px 0;
}

h3.article-heading.heading-navy {
  color: #003366;
}

/* "Part One: Choosing the Surgeon" - the label stays the heading's amber and
   only the title after the colon turns navy. */
h3.article-heading .head-rest {
  color: #003366;
}

/* --- the body of the article -------------------------------------------- */
.testimonials-section {
  margin: 20px 0 60px 0;
}

.testimonials-section h2 {
  color: var(--secondary);
  margin-bottom: 0px;
  font-size: clamp(20px, 3vw, 24px);
}

.testimonials-list-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin-top: 20px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  padding: clamp(20px, 4vw, 40px);
}

.testimonial-body-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* A flex item will not shrink below its content's intrinsic width unless told
   to. Without this a wide table inside .data-table-wrap stretches the whole
   card instead of scrolling inside its own wrapper, and the article overflows
   the phone viewport sideways. */
.testimonials-list-layout,
.testimonials-list-layout-author,
.testimonial-body-paragraphs,
.testimonials-list-layout > *,
.testimonials-list-layout-author > *,
.testimonial-body-paragraphs > * {
  min-width: 0;
}

.newtestiXClass {
  font-size: 16px;
  color: var(--text-main);
  line-height: 1.75;
  text-align: justify;
}

.newtestiXClass strong a {
  color: var(--primary-dark);
  font-weight: 600;
}

.newtestiXClass strong a:hover {
  color: var(--secondary);
  text-decoration: underline;
}

li.newul {
  font-size: 16px;
}

/* The address at the end of a source line is the link; the description before
   it stays body copy so the line still reads as a sentence. */
li.newul a {
  color: #0ea5e9;
  text-decoration: none;
  word-break: break-word;
}

li.newul a:hover {
  color: #003366;
  text-decoration: underline;
}

/* The byline: author and date are two separate facts and need air between
   them, not the single word-space the markup leaves. */
.testimonial-body-paragraphs span.author-name {
  margin-right: 36px;
}

.testimonial-body-paragraphs span.author-date {
  white-space: nowrap;
}

/* --- the article's own charts -------------------------------------------
   Lifted whole from the PDF, so they carry their own titles and axis labels
   and simply need to scale to the column. */
.article-figure {
  margin: 22px 0 26px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-left: 4px solid #ffaf02;
  border-radius: 8px;
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.article-figure figcaption {
  margin-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: #64748b;
  text-align: center;
}

/* --- highlighted advisory callout ---------------------------------------- */
.advisory-callout {
  background: linear-gradient(180deg, #fffdf6 0%, #fff7e6 100%);
  border: 1px solid var(--border);
  border-left: 5px solid #ffaf02;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 10px 0;
}

.advisory-callout p {
  font-size: 15px;
  color: var(--text-main);
  line-height: 1.75;
  text-align: justify;
  margin: 0;
}

.advisory-callout strong {
  color: var(--secondary);
}

/* --- article data tables -------------------------------------------------- */
.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 8px 0 6px 0;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: 15px;
  background: #ffffff;
}

.data-table thead th {
  background-color: var(--secondary);
  color: #ffffff;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  padding: 14px 16px;
  letter-spacing: 0.3px;
}

.data-table tbody td {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  color: var(--text-main);
  vertical-align: top;
  line-height: 1.6;
}

.data-table tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

.data-table tbody td:first-child {
  font-weight: 600;
  color: #0369a1;
}

.table-note {
  font-size: 13px;
  color: #64748b;
  font-style: italic;
  margin-bottom: 10px;
}

/* ==========================================================================
   AI / LLM CONTENT BLOCKS
   Takeaways, quick facts, snippet, page summary and citation table.
   ========================================================================== */
.ai-block {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-left: 4px solid #ffaf02;
  border-radius: 8px;
  padding: 24px;
  margin: 18px 0;
}

.ai-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-header);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fb9a40;
  margin-bottom: 14px;
}

.ai-block-title i {
  color: #0ea5e9;
  font-size: 16px;
}

.ai-takeaways {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.ai-takeaways li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--text-main);
  line-height: 1.65;
}

.ai-takeaways li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #10b981;
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 15px;
}

/* The eight things to weigh come to the page numbered, and the numbers are
   part of the advice — they are the order to do them in. */
.article-steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0;
  margin: 10px 0 5px 0;
}

.article-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 44px;
  font-size: 15px;
  color: var(--text-main);
  line-height: 1.7;
  text-align: justify;
}

.article-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0ea5e9;
  color: #ffffff;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The four signals are the article's warnings, so they take the same shape as
   the takeaways but not the takeaways' approving green tick. */
.warning-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
  margin: 10px 0 5px 0;
}

.warning-list li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  color: var(--text-main);
  line-height: 1.65;
}

.warning-list li::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #0ea5e9;
  position: absolute;
  left: 4px;
  top: 6px;
  font-size: 7px;
}

.ai-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}

.ai-fact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
  line-height: 1.6;
}

.ai-fact dt {
  flex: 0 0 220px;
  font-weight: 700;
  color: var(--secondary);
  font-family: var(--font-header);
}

.ai-fact dd {
  flex: 1;
  min-width: 200px;
  margin: 0;
  color: var(--text-main);
}

.ai-snippet {
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  border-left-color: #0ea5e9;
}

.ai-snippet p {
  font-size: 16px;
  line-height: 1.75;
  color: #0c4a6e;
  text-align: justify;
  margin: 0;
}

.ai-summary {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-left-color: var(--secondary);
}

.ai-summary p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-main);
  text-align: justify;
  margin: 0;
}

.citation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.citation-table th,
.citation-table td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
}

.citation-table thead th {
  background-color: var(--secondary);
  color: #ffffff;
  font-family: var(--font-header);
  font-size: 13.5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.citation-table tbody th {
  width: 34%;
  font-weight: 700;
  color: #0369a1;
  font-family: var(--font-header);
  background: #f8fafc;
}

.citation-table tbody tr:last-child th,
.citation-table tbody tr:last-child td {
  border-bottom: none;
}

/* --- the article's Q&A ---------------------------------------------------
   A guide's FAQ is a plain list of questions and answers, not the landing
   page's accordion, so these rules deliberately restate .faq-item. */
.faq-section h3 {
  color: #fb9a40;
  margin: 24px 0 6px 0;
}

.faq-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 10px 0 5px 0;
}

.faq-block .faq-item {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-left: 4px solid #0ea5e9;
  border-radius: 8px;
  padding: 18px 20px;
}

.faq-block .faq-item h4 {
  font-size: 16px;
  color: var(--secondary);
  margin-bottom: 6px;
}

.faq-block .faq-item p {
  font-size: 15px;
  color: var(--text-main);
  line-height: 1.7;
  margin: 0;
  text-align: justify;
}

/* --- the author card ------------------------------------------------------ */
.testimonials-section-author {
  margin: 20px 0 60px 0;
}

.testimonials-section-author h2 {
  color: var(--secondary);
  margin-bottom: 0px;
  font-size: clamp(20px, 3vw, 24px);
}

.testimonials-list-layout-author {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin-top: 20px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  padding: clamp(20px, 4vw, 40px);
}

.author-card {
  background: #fffdf6;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: clamp(16px, 3vw, 24px);
  margin-bottom: 20px;
  width: 100%;
}

.author-label {
  font-family: var(--font-header);
  font-size: 14px;
  text-transform: uppercase;
  color: #fb9a40;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.author-layout-wrapper {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.author-image-container {
  flex: 0 0 11%;
  max-width: 280px;
  display: flex;
  justify-content: center;
}

/* The verified mark sits on the name's line, so it is sized to that line and
   not to its own artwork — the source file is a 360px tick. */
.author-verified {
  display: inline-block;
  height: 18px;
  width: auto;
}

.author-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.author-content-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.author-header-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.author-card .author-name {
  margin: 0 30px 0px 0px;
  font-size: 16px;
}

.author-card .author-name a {
  color: #0369a1;
  font-size: 22px;
}

.author-card .author-name a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.author-designation {
  font-size: 16px;
  color: #0369a1;
  line-height: 1.4;
  font-weight: 500;
}

.author-quote-box {
  font-size: 15px;
  position: relative;
  margin: 15px 0px;
}

.author-description {
  font-size: 15px;
  color: #0369a1;
  line-height: 1.6;
  text-align: justify;
  font-weight: bold;
}

.contact-info-box {
  margin-top: 0px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 13px;
  border-left: 4px solid #ffaf02;
  text-align: left;
}

.contact-info-title {
  display: block;
  font-weight: bold;
  margin-bottom: 12px;
  font-size: 14px;
  color: #0369a1;
}

.contact-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: #0369a1;
}

.contact-info-col {
  flex: 1;
  min-width: 200px;
}

.contact-info-box p {
  margin-bottom: 8px;
}

/* --- areas we serve ------------------------------------------------------
   The country list ran as ragged rows of different widths; an even grid keeps
   the names aligned at every breakpoint. */
.feature-sheet .ui-styled-list-new {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 24px;
  align-items: start;
}

.feature-sheet .ui-styled-list-new li {
  break-inside: avoid;
  text-align: left;
}

/* ==========================================================================
   PAGE-LEVEL OVERFLOW AND SCROLLABLE REGIONS
   A single element wider than the viewport puts a scrollbar under the whole
   document and lets the reader drag the page sideways. Wide content is allowed
   to scroll, but only inside its own box.
   ========================================================================== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.main-grid, .container, main, section {
  min-width: 0;
}

img, table, pre, iframe {
  max-width: 100%;
}

/* A table wider than a phone can be scrolled, but a touch browser hides its
   scrollbar until the moment it is dragged - so the content looks cut off
   rather than scrollable and readers never try.

   The answer is the always-drawn .scroll-rail below, not the browser's own
   bar. Styling both put *two* bars under every table on a phone, so the native
   one is hidden here and the rail is the only one shown. */
.data-table-wrap,
.table-responsive,
[class*="table-wrap"],
.vts-track-viewport,
.scroll-x {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                      /* Firefox */
  -ms-overflow-style: none;                   /* old Edge */
}

.data-table-wrap::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
[class*="table-wrap"]::-webkit-scrollbar,
.vts-track-viewport::-webkit-scrollbar,
.scroll-x::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Touch browsers draw their scrollbars as a temporary overlay: the bar appears
   on drag and fades a second later, so a table that scrolls looks identical to
   one that is simply cut off. Native styling cannot override that on iOS, so a
   scrollable region gets a real element underneath it that is always drawn and
   tracks the scroll position. */
.scroll-rail {
  position: relative;
  height: 8px;
  margin: 6px 0 2px;
  border-radius: 50px;
  background: #e2e8f0;
  display: none;
}

.is-scrollable + .scroll-rail {
  display: block;
}

.scroll-rail-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 32px;
  border-radius: 50px;
  background: var(--secondary);
  transition: left 0.08s linear;
}

.scroll-rail[data-dragging="1"] .scroll-rail-thumb {
  background: var(--primary, #cc3366);
}

/* --- the country-wide guide index (two-column link list) -----------------
   Matches the published en-et index page's .guide-index classes exactly. */
.guide-index {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin-bottom: 40px;
}

.guide-index-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
}

.guide-index-heading {
  color: #0369a1;
  font-size: 19px;
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #fb9a40;
  text-align: center;
}

.guide-index-list {
  list-style: disc outside;
  padding-left: 20px;
  margin: 0;
}

.guide-index-list li {
  margin-bottom: 12px;
  line-height: 1.5;
}

.guide-index-list a {
  color: #0ea5e9;
  font-weight: 600;
  text-decoration: none;
}

.guide-index-list a:hover {
  color: #003366;
  text-decoration: underline;
}

/* The last line of the intro, called out above the two columns. Both classes
   are named: style.css sets .newtestiXClass to 16px further down, and one
   class alone loses to it. */
.newtestiXClass.guide-intro-lead {
  font-size: 18px;
  font-weight: 700;
  margin-top: 34px;
}

@media (max-width: 767px) {
  .guide-index { padding: 20px 18px; }
  .guide-index-grid { grid-template-columns: 1fr; gap: 26px; }
  .guide-index-heading { font-size: 18px; }
  .guide-index-list li { font-size: 17px !important; margin-bottom: 14px; font-weight: 400 !important; letter-spacing: normal !important; }
  .newtestiXClass.guide-intro-lead { font-size: 18px !important; }
}

/* --- the "Read More" that closes the foot-of-page guide list -------------- */
.guide-read-more {
  text-align: right;
  margin: 26px 0 0 0;
}

.guide-read-more a {
  color: #fb9a40;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.guide-read-more a:hover {
  text-decoration: none;
}

.guide-read-more-arrow {
  color: #003366;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.2s ease;
}

.guide-read-more a:hover .guide-read-more-arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (max-width: 991px) {
  .author-layout-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  .author-image-container {
    flex: 0 0 180px;
    max-width: 180px;
    margin: 0 auto;
  }
  .author-header-inline {
    justify-content: center;
  }
  .author-quote-box {
    padding-left: 0;
  }
  .author-description {
    text-align: center;
  }
  .contact-info-box {
    text-align: center;
  }
  .contact-info-grid {
    justify-content: center;
  }
}

/* ==========================================================================
   PHONE — the published guide type scale, measured off the en-et guide and
   matched declaration for declaration.

   Almost everything here carries !important, and not for tidiness. The Congo
   style.css sets, inside its own max-width:767px block:

       p, ul, ol, blockquote { font-size: 14px !important;
                               letter-spacing: -0.01em; font-weight: 500; }
       .welcome-block h1     { font-size: 34px !important; }

   A blanket !important on every paragraph beats an ordinary class rule however
   specific it is, so the guide's body copy came out at 14px in a 500 weight
   with the letters pulled together - small and cramped against the reference's
   16-17px at 400. Matching !important with the higher specificity these
   selectors already have is what wins it back. Nothing here applies above
   767px, so the desktop page is untouched.
   ========================================================================== */
@media (max-width: 767px) {
  .main-grid { padding: 24px 16px !important; }

  .testimonials-list-layout,
  .testimonials-list-layout-author {
    padding: 20px;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  /* --- the page's two headings ------------------------------------------ */
  .welcome-block h1 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
  }

  h2.article-standfirst {
    font-size: 20px !important;
    line-height: 1.45 !important;
    margin: 10px auto 18px !important;
  }

  /* --- body copy --------------------------------------------------------- */
  .newtestiXClass {
    font-size: 16px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    margin: 0 !important;
  }

  .testimonial-body-paragraphs span,
  .testimonial-body-paragraphs span.author-name {
    display: block;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    margin-right: 30px;
  }

  li.newul {
    font-size: 17px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }

  /* --- the article's own headings ---------------------------------------- */
  h3.article-heading { font-size: 18px !important; }

  /* --- AI blocks --------------------------------------------------------- */
  .ai-block { padding: 16px !important; }

  .ai-block-title {
    font-size: 15px !important;
    margin-bottom: 20px !important;
  }
  .ai-block-title i { font-size: 18px !important; }

  .ai-takeaways li,
  .article-steps li,
  .warning-list li {
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }

  .ai-fact {
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }
  .ai-fact dt { flex: 0 0 100%; }

  .ai-snippet p {
    font-size: 17px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }

  .ai-summary p {
    font-size: 16px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }

  /* --- figures and tables ------------------------------------------------ */
  .article-figure figcaption {
    font-size: 17px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }

  .data-table { font-size: 16px !important; }
  .data-table thead th { font-size: 16px !important; }
  .table-note {
    font-size: 16px !important;
    font-weight: 400 !important;
  }

  .citation-table { font-size: 16px !important; }
  .citation-table thead th { font-size: 15.5px !important; }
  .citation-table th,
  .citation-table td { padding: 9px 12px !important; }
  .citation-table tbody th { width: 40%; }

  /* --- the article's Q&A -------------------------------------------------- */
  .faq-block .faq-item { padding: 14px 16px !important; }
  .faq-block .faq-item h4 { font-size: 18px !important; }
  .faq-block .faq-item p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }

  /* --- the author card ---------------------------------------------------- */
  .author-label {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center;
    margin: 0 0 16px !important;
  }

  .author-card .author-name { font-size: 18px !important; font-weight: 400 !important; }
  .author-card .author-name a { font-size: 24px !important; font-weight: 700 !important; }

  .author-designation {
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    margin: 0 !important;
  }

  .author-quote-box { font-size: 18px !important; }

  .author-description {
    font-size: 17px !important;
    line-height: 1.6 !important;
    text-align: justify;
    letter-spacing: normal !important;
    margin: 0 !important;
  }

  .contact-info-box { padding: 15px !important; font-size: 16px !important; }
  .contact-info-title { font-size: 16px !important; }
  .contact-info-box p {
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }

  /* --- the blocks the landing page supplies around the article ------------ */
  .bottom-cta-section h2 { font-size: 24px !important; margin-bottom: 16px !important; }
  .bottom-cta-section p {
    font-size: 17px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    margin: 0 0 20px !important;
  }
  .bottom-cta-btn { font-size: 16px !important; }

  .feature-sheet p {
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    margin: 0 0 24px !important;
  }
  .ui-styled-list li {
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }
  /* Country names are labels, not body copy, so they read a size down. */
  .feature-sheet .ui-styled-list-new li { font-size: 16px !important; }

  /* The Congo panel keeps 30px of side padding on a phone, which pushed the
     guide list in about 14px further than the reference. */
  .guide-segment { padding: 40px 16px !important; }

  .guide-segment h2 {
    font-size: 22px !important;
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  .guide-segment .guide-styled-list li {
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    padding-left: 28px !important;
  }
  .guide-segment .guide-styled-list a {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
    display: inline-block !important;
  }
  .guide-read-more a { font-size: 18px !important; }

  /* The keyword line reads as small print, not body copy, on a phone. */
  .footer-keyword,
  .footer-keyword p,
  .footer-keyword a {
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }
  .footer-keyword { margin-top: 25px !important; }

  .breadcrumb-item { font-size: 14px !important; }

  footer { font-size: 17px !important; }
  footer p,
  .footer-column .contact-row {
    font-size: 17px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }
  .footer-column h3 { font-size: 17px !important; }
  .trust-disclaimer { font-size: 16px !important; }

  .scroll-rail { height: 10px; }

  /* The header's phone line and email line are each a flex row, so the
     `text-align: center` style.css sets on their parent does nothing to them
     and both sat hard against the left edge. Centring the column and the rows
     themselves is what actually stacks them the way the reference does. */
  #top-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  /* The two telephone numbers are one piece of information and must not break
     across lines; they shrink with the viewport instead. */
  #top-right span {
    justify-content: center !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: clamp(12px, 3.9vw, 18px) !important;
  }
}

@media (max-width: 600px) {
  /* An auto-fit track needed 210px a column, so anything narrower than about
     450px dropped to a single stack. Two fixed columns keep the country names
     paired at every phone width. */
  .feature-sheet .ui-styled-list-new {
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
  }
}