/* Design tokens — swap values here to re-theme the whole site.
   Palette goal (2026-08-08 direction change): light, airy, "health site"
   trust palette — blue + aqua/teal accents on a light ground, minimal
   visual noise. See Docs/06-design-guidelines.md for the reasoning. */

:root {
  /* Ink (text) — soft blue-slate, never pure black */
  --color-ink-900: #16324a;
  --color-ink-700: #45607a;
  --color-ink-500: #718ba0;
  --color-ink-300: #b9cbd8;
  --color-ink-100: #e4edf2;

  /* Surfaces */
  --color-paper: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f2f8fb;
  --color-line: #dfe9ee;

  /* Accent — blue (primary CTA, links, focus) */
  --color-accent-100: #e3f1fb;
  --color-accent-600: #1a71b8;
  --color-accent-700: #135a92;

  /* Secondary accent — aqua/teal (secondary highlights, "available" state) */
  --color-teal-100: #dff6f2;
  --color-teal-600: #0f9e93;
  --color-teal-700: #0c7d75;

  /* Reserved status colors — used sparingly and always with a label */
  --color-success-600: #0c7d75;
  --color-success-100: #dff6f2;

  /* Reserved emphasis colors — richText's {{red}}/{{blue}} spans only,
     for calling out individual sentences within otherwise plain prose */
  --color-emphasis-red: #b3261e;
  --color-emphasis-blue: var(--color-accent-700);

  /* Reserved rating color — star ratings only, never a substitute accent */
  --color-rating: #e0a634;

  /* Reserved gold color — #1 ranking winner badge only */
  --color-gold-100: #fef3c7;
  --color-gold-700: #92620a;

  --color-focus-ring: #135a92;

  /* Typography — one clean sans family for everything, weight carries
     hierarchy instead of a display/body pairing */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius & shadow — soft, minimal */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(22, 50, 74, 0.05);
  --shadow-md: 0 10px 26px rgba(22, 50, 74, 0.08);

  /* Layout */
  --content-max: 74rem;
  --content-narrow: 44rem;

  color-scheme: light;
}

/* Deliberately no @media (prefers-color-scheme: dark) override: the client
   asked explicitly for the site to always render on a light background,
   regardless of the visitor's OS/browser theme — consistent brand
   presentation over automatic theme-matching. See feedback in this
   project's session history (2026-08-08). */


/* Minimal reset + base element styles */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Slightly larger base size on mobile (~17px vs. the 16px default) — every
   rem-based size in the site (body copy, buttons, spacing) scales off this
   root value, so this one nudge is enough without touching individual
   rules. Kept modest and percentage-based (not a fixed px) so it still
   respects the visitor's own browser zoom/font-size preference. */
@media (max-width: 639px) {
  html { font-size: 106.25%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-ink-900);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  color: var(--color-ink-900);
}

h1 { font-size: clamp(2rem, 3.4vw + 1rem, 3.1rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.05rem); }
h3 { font-size: 1.1rem; font-weight: 600; }

p { margin: 0 0 var(--space-4); color: var(--color-ink-700); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Focus visibility — never suppressed */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
details > summary:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -3rem;
  background: var(--color-ink-900);
  color: var(--color-paper);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--space-3);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal-700);
  margin: 0 0 var(--space-2);
}

/* "← Torna alle guide" leading a guide article's eyebrow line (before the
   "· <category>" that follows) — same font/color as the eyebrow around it,
   underlined instead of plain, with a left arrow inline before the text. */
.article-header__back {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-header__back:hover {
  color: var(--color-teal-600);
}

.article-header__back-icon {
  flex: none;
}


/* Page chrome: header, footer, nav, generic section/container rules */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0000aa; /* classic BIOS-setup navy blue */
  border-bottom: 1px solid #00007a;
}

.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.08rem;
  color: #fff;
  flex-shrink: 0;
}

.site-header__logo-img {
  height: 2.25rem;
  width: auto;
  display: block;
}

.site-header__nav-group {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-header__mark {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #fff;
  color: #0000aa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
}

.site-nav--desktop,
.site-header__actions--desktop {
  display: none;
}

.site-nav--desktop ul {
  display: flex;
  gap: var(--space-1);
}

/* The dropdown panel is itself a nested <ul> inside .site-nav--desktop, so
   without this it would inherit the flex-row layout above and lay its
   specialty links out side by side instead of stacked. */
.site-nav--desktop .site-nav__dropdown-panel {
  display: block;
}

.site-nav--desktop a {
  display: inline-block;
  font-size: 0.93rem;
  font-weight: 600;
  color: #eef1ff;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav--desktop a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.site-nav--desktop a[aria-current='page'] {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 600;
}

/* Guides nav menu — hover flyout, pure CSS (no JS): "Guide" reveals its
   specialty categories on hover/focus; clicking a category navigates to
   its section on the guides index page. visibility (not display) is what's
   toggled, so a focused link stays reachable by keyboard even before the
   mouse enters. */

.site-nav__dropdown-item {
  position: relative;
}

.site-nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.93rem;
  font-weight: 600;
  color: #eef1ff;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav__dropdown-item:hover .site-nav__dropdown-trigger,
.site-nav__dropdown-item:focus-within .site-nav__dropdown-trigger {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.site-nav__dropdown-panel {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 60;
  left: 0;
  top: 100%;
  min-width: 14rem;
  padding: var(--space-2);
  transform: translateY(4px);
}

.site-nav__dropdown-item:hover > .site-nav__dropdown-panel,
.site-nav__dropdown-item:focus-within > .site-nav__dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.site-nav__dropdown-panel li a {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-ink-900);
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  white-space: normal;
}

.site-nav__dropdown-panel li a:hover {
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}

/* Mobile has no hover: the whole menu renders fully expanded, in normal
   flow, on the same white surface as the rest of the mobile panel — so the
   light-on-navy trigger colors reset to dark ink. */

.site-nav--mobile__panel .site-nav__dropdown-panel {
  position: static;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  box-shadow: none;
  border: 0;
  padding: 0 0 0 var(--space-4);
  background: transparent;
}

.site-nav--mobile__panel .site-nav__dropdown-trigger {
  color: var(--color-ink-900);
}

.site-nav--mobile__panel .site-nav__dropdown-item:hover .site-nav__dropdown-trigger,
.site-nav--mobile__panel .site-nav__dropdown-item:focus-within .site-nav__dropdown-trigger {
  color: var(--color-accent-700);
  background: var(--color-accent-100);
}

.site-nav--mobile {
  position: relative;
}

.site-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
}

.site-nav__toggle::-webkit-details-marker {
  display: none;
}

.site-nav__toggle-icon,
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  width: 1.15rem;
  height: 2px;
  background: #fff;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav__toggle-icon {
  position: relative;
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.site-nav__toggle-icon::before { top: -6px; }
.site-nav__toggle-icon::after { top: 6px; }

.site-nav--mobile[open] .site-nav__toggle-icon { background: transparent; }
.site-nav--mobile[open] .site-nav__toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.site-nav--mobile[open] .site-nav__toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav--mobile__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-nav--mobile__panel ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-nav--mobile__panel .site-header__actions {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

@media (min-width: 880px) {
  .site-nav--desktop,
  .site-header__actions--desktop {
    display: flex;
  }
  .site-nav--mobile {
    display: none;
  }
}

/* The desktop lang switcher sits directly on the navy header bar, unlike
   its light-background siblings in the footer and the mobile dropdown
   panel, so it needs its own light-on-dark colors here. */
.site-header__actions--desktop .lang-switcher,
.site-header__actions--desktop .lang-switcher__icon {
  color: #c6cfff;
}

.site-header__actions--desktop .lang-switcher__item {
  color: #fff;
}

.site-header__actions--desktop .lang-switcher__item.is-current {
  color: #0000aa;
  background: #fff;
}

.site-header__actions--desktop .lang-switcher__item.is-unavailable {
  color: #7c86c9;
}

/* Footer sits on black, same treatment as the navbar's lang switcher. */
.site-footer .lang-switcher,
.site-footer .lang-switcher__icon {
  color: rgba(255, 255, 255, 0.55);
}

.site-footer .lang-switcher__item {
  color: rgba(255, 255, 255, 0.8);
}

.site-footer .lang-switcher__item.is-current {
  color: #000;
  background: #fff;
}

.site-footer .lang-switcher__item.is-unavailable {
  color: rgba(255, 255, 255, 0.3);
}

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-500);
}

.lang-switcher__icon { color: var(--color-ink-500); }

.lang-switcher__item {
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink-700);
}

.lang-switcher__item.is-current {
  color: var(--color-ink-900);
  background: var(--color-accent-100);
}

.lang-switcher__item.is-unavailable {
  color: var(--color-ink-300);
  cursor: not-allowed;
}

/* Footer */

.site-footer {
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--space-9);
}

.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-6);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.site-footer__payoff {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin: 0;
}

.site-footer__column h3 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 var(--space-3);
}

.site-footer__column ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__column a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
}

.site-footer__column a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (min-width: 640px) {
  .site-footer__inner {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

.site-footer__disclosure {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__disclosure p {
  margin: 0;
  line-height: 1.6;
  /* base.css's global `p { color: var(--color-ink-700) }` (a blue-slate
     tone) directly matches this element and wins over the color inherited
     from .site-footer__disclosure above — needs its own override here. */
  color: inherit;
}

/* Generic section/container rhythm */

.section {
  padding: var(--space-8) var(--space-4);
  max-width: var(--content-max);
  margin: 0 auto;
}

.section-heading {
  margin-bottom: var(--space-6);
  max-width: 38rem;
}

.section-heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-heading__intro {
  color: var(--color-ink-700);
  font-size: 1.02rem;
  /* A couple of callers (e.g. the ranking page intro) embed a blank-line
     paragraph break in the source string; pre-line renders that without
     needing to split intro into a paragraph array like narrative/verdict
     elsewhere do. */
  white-space: pre-line;
}

/* Deliberately understated inline link (e.g. the ranking page's closing
   disclosure sentence) — reads as part of the editorial prose rather than
   a call-to-action, so it inherits the surrounding text color/weight
   instead of the site's usual accent-blue link style, and is recognizable
   only by its underline. Scoped to this one class on purpose, not a
   general `a` rule, so it never affects other links on the site. */
.editorial-link {
  color: inherit;
  text-decoration: underline;
  font-weight: inherit;
}

.editorial-link:hover {
  opacity: 0.75;
}

.section__footer-cta {
  margin-top: var(--space-6);
  text-align: center;
}

.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Breadcrumb + stub pages */

.breadcrumb {
  display: flex;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-ink-500);
  margin-bottom: var(--space-5);
}

.breadcrumb a { color: var(--color-accent-600); }
.breadcrumb a:hover { text-decoration: underline; }

.stub-page {
  max-width: var(--content-narrow);
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

.stub-page__body {
  font-size: 1.02rem;
  margin-bottom: var(--space-6);
}


/* Rich text emphasis colors — richText()'s {{red}}/{{blue}} markup, for
   calling out specific sentences within prose (see build/lib/render.js) */
.rich-emphasis--red { color: var(--color-emphasis-red); }
.rich-emphasis--blue { color: var(--color-emphasis-blue); font-weight: 700; }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--color-accent-600);
  color: #fff;
}

.btn--primary:hover {
  background: var(--color-accent-700);
}

.btn--secondary {
  border-color: var(--color-ink-300);
  color: var(--color-ink-900);
}

.btn--secondary:hover {
  border-color: var(--color-accent-600);
  color: var(--color-accent-700);
  background: var(--color-accent-100);
}

.btn--ghost {
  color: var(--color-accent-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-left: 0;
  padding-right: 0;
}

.btn__arrow { transition: transform 0.15s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Hero — two-column split (text + photo card), generous whitespace,
   left-aligned like the rest of the site's editorial sections. */

.hero {
  /* Positioned + stacked above the (non-positioned) band that follows it,
     so the illustration below can overflow the hero's own box vertically
     (see .hero__media img's transform) without the next section's opaque
     background painting over that overflow. */
  position: relative;
  z-index: 1;
  padding: var(--space-6) var(--space-4);
  /* Pure white on the left (text side) easing into a light blue on the
     right (image side). */
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 62%, #bfdaff 100%);
  /* Plain white (tried before this) — swap back in if the gradient
     doesn't stick:
  background: #ffffff;
  */
  /* Navy-to-teal wash (original background): a visible glow of the
     navbar's navy behind the illustration, fading into the same
     blue/teal the image and the rest of the palette already use — keeps
     the site's "always light" background rule while giving the hero its
     own identity.
  background:
    radial-gradient(1300px 900px at 90% 30%, rgba(0, 0, 170, 0.36), transparent 62%),
    linear-gradient(135deg, #dfeaff 0%, #dcf6ef 55%, #ffffff 100%);
  */
}

@media (min-width: 640px) {
  .hero { padding: var(--space-7) var(--space-4); }
}

.hero__grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  gap: var(--space-7);
  /* The image sets the row's height; text is capped to it (below) instead
     of stretching the section to fill the viewport. */
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* The headline is authored with two explicit line breaks at its natural
   thirds (see hero.headline in content/pages/home) so it always reads as
   exactly three balanced lines — white-space here is what makes that \n
   render instead of collapsing like normal text. The font-size clamp is
   tuned (checked against the actual rendered width of each third, via the
   metric-compatible Liberation Sans, across the 960px–1920px viewport
   range) to stay narrower than the text column at every width, so no line
   wraps a second time on its own — no max-width needed on top of it. */
.hero__headline {
  white-space: pre-line;
  font-size: clamp(1.4rem, 1.15vw + 1rem, 2.1rem);
  /* Same treatment as the guide article title (.article-title). */
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero__subtext {
  /* Same treatment as the guide article subtitle (.article-lead). */
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-ink-700);
  max-width: 42ch;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* The illustration has a transparent background, so it floats directly on
   the page instead of sitting inside a bordered/shadowed photo card. A
   flattened ellipse behind it (not a drop-shadow tracing the whole jagged
   silhouette — that read as a diffuse glow, not a surface underneath)
   sits right under the illustration's base, like a contact shadow cast on
   a table. */
.hero__media {
  position: relative;
}

.hero__media::after {
  /* A single flat oval, vertically centered on itself (at 50% 50%, not
     pinned to an edge) so it has equal room to fade out on every side
     before the box's own boundary — that symmetry is what keeps the edge
     invisible. farthest-side sizes the ellipse to the box's own edges
     (rather than the default farthest-corner, which is oversized for a
     box this much wider than tall and leaves it still partly opaque at
     the left/right edges), so the fade reliably finishes right at the
     boundary in every direction, no hard line. */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 100%;
  height: 100px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse farthest-side at 50% 50%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 68%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
}

.hero__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Bigger than its own grid column, shifted left so it bleeds into the
   text column's space — the negative margin is sized so the image still
   ends flush with its column's right edge (no rightward overflow, so it
   can never trigger a horizontal scrollbar), only the left side spills
   over. Scoped to the two-column breakpoint: on a stacked mobile layout
   an oversized image would just misalign. */
@media (min-width: 960px) {
  .hero__media img {
    width: 118%;
    max-width: 118%;
    margin-left: -18%;
    /* Scaled up visually on top of the sizing above — transform doesn't
       participate in layout, so the grid row (and the hero section's
       height) stays exactly as tall as the untransformed box; the image
       simply spills a little past its own edges on every side. */
    transform: scale(1.069);
  }

  /* The bleed above shifts the image's visual center left of the
     container's own center (from -18% to 100%, midpoint ~41%, not 50%) —
     re-center the ground shadow to match so it stays under the image
     instead of drifting toward the container's untouched center. */
  .hero__media::after {
    left: 41%;
    width: 118%;
  }
}

/* Below the two-column breakpoint the illustration stays in the normal
   flow (full opacity, so it still reads clearly) but caps its own size
   and sits above the text — legible content first, image as a supporting
   visual rather than competing with it for space or contrast. */
@media (max-width: 959px) {
  .hero__media {
    order: -1;
    max-width: 20rem;
    margin: 0 auto;
  }
}

/* On true mobile widths, drop the illustration entirely and center the
   text column instead — the image adds scroll length without helping
   comprehension at this size, and a centered stack reads better than a
   left-aligned block once there's nothing beside it. */
@media (max-width: 639px) {
  .hero__media { display: none; }

  .hero__content { text-align: center; }

  .hero__subtext { margin-left: auto; margin-right: auto; }

  .hero__ctas { justify-content: center; }
}

/* Section bands — full-bleed tinted background wrapping a .section, used
   to alternate white/tinted stripes so sections read as distinct grouped
   blocks instead of one continuous, undifferentiated scroll. */

.band--tinted {
  background: var(--color-surface-alt);
}

/* Dark variant — deliberately breaks from the light palette for one band
   only, so it reads as a clean seam against the hero's light gradient
   above it instead of blending into it. Cards inside stay on their own
   white surface (unaffected), only the heading text needs light colors. */
.band--dark {
  background: linear-gradient(160deg, #000080 0%, #0000aa 100%);
}

.band--dark .eyebrow {
  color: #8fe0d3;
}

.band--dark .section-heading__title,
.band--dark .section-heading__intro {
  color: #fff;
}

.band--dark .btn--secondary {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.band--dark .btn--secondary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Reasons — real cards (border + shadow) sitting on the tinted band above,
   so "why SalusAdvisor" reads as a structured feature grid, not floating
   icons. */

.reasons__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .reasons__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .reasons__grid { grid-template-columns: repeat(4, 1fr); }
}

.reason-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-5);
}

.reason-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-teal-100);
  color: var(--color-teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.reason-card__title {
  margin-bottom: var(--space-2);
  font-size: 1.02rem;
}

.reason-card__text {
  font-size: 0.92rem;
  margin: 0;
}

/* Cards (treatment / destination / guide / specialty) — flat, minimal */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  border-color: var(--color-accent-600);
  box-shadow: var(--shadow-md);
}

.card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  gap: var(--space-2);
}

.card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.card__eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-teal-700);
  margin: 0;
}

.card__title { margin: 0; }

.card__text {
  color: var(--color-ink-700);
  font-size: 0.95rem;
  flex: 1;
  margin: 0;
}

.card__meta {
  font-size: 0.8rem;
  color: var(--color-ink-500);
}

.card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--color-accent-600);
  font-size: 0.9rem;
}

.specialty-card.is-coming-soon { opacity: 0.6; }
.specialty-card.is-coming-soon .card__link { cursor: default; }

/* Badges */

.status-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--color-success-100);
  color: var(--color-success-600);
}

.specialty-card.is-coming-soon .status-badge {
  background: var(--color-ink-100);
  color: var(--color-ink-500);
}

.demo-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--color-ink-100);
  color: var(--color-ink-500);
  margin-left: 0.5rem;
  vertical-align: middle;
  white-space: nowrap;
}

.disclosure-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  max-width: 100%;
}

.disclosure-badge.is-commercial {
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}

.disclosure-badge.is-editorial {
  background: var(--color-success-100);
  color: var(--color-success-600);
}

/* Competitor cards (positions #2 and below) — richer than a bare row
   (short description + why-ranked/what-to-verify call-outs) but far more
   compact than .clinic-detail: no photos, no criteria breakdown, no
   before/after gallery. Deliberately plain-surface, not gold/teal-accented
   like the featured clinic, so it never competes with it visually. */

.competitor-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

.competitor-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
}

@media (min-width: 640px) {
  .competitor-card { padding: var(--space-6) var(--space-7); }
}

.competitor-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .competitor-card__head { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--space-5); }
}

.competitor-card__name { margin: 0; font-size: 1.2rem; }

.competitor-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--color-ink-500);
}

.competitor-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Same flat ink-100/ink-300 treatment as .clinic-detail__score, at a
   smaller scale — visually "this is the same kind of rating", just less
   prominent than the featured clinic's. */
.competitor-card__score {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 7rem;
  padding: var(--space-2) var(--space-4);
  background: var(--color-ink-100);
  border: 1px solid var(--color-ink-300);
  border-radius: var(--radius-md);
}

.competitor-card__score .score-meter--labeled { align-items: center; }

.competitor-card__desc {
  margin: var(--space-4) 0 0;
  font-size: 0.95rem;
  color: var(--color-ink-700);
  max-width: 68ch;
}

/* Up to two short, verifiable strengths — a compact checklist, not a
   titled subsection, so a one-item list doesn't take up as much vertical
   space as the old "PERCHÉ È IN CLASSIFICA" header treatment did. */
.competitor-card__strengths {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.competitor-card__strengths li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--color-ink-700);
}

.competitor-card__strengths svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--color-teal-600);
}

.competitor-card__consider {
  margin: var(--space-3) 0 0;
  font-size: 0.88rem;
  color: var(--color-ink-700);
  max-width: 68ch;
}

.competitor-card__consider strong { color: var(--color-ink-900); }

.score-meter {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .score-meter { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 0.35rem; min-width: 5.5rem; }
}

/* The labeled variant (overall "Voto SalusAdvisor" score, not the bare
   per-criterion rows) always stacks label/value/bar in a column, even on
   mobile where the plain meter is a row — three inline pieces plus a label
   would crowd a narrow row, and this one reads better right-aligned as its
   own small block regardless of viewport. */
.score-meter--labeled {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.score-meter__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-ink-900);
  white-space: nowrap;
}

.score-meter__value {
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.score-meter__track {
  display: block;
  width: 100%;
  max-width: 12rem;
  height: 8px;
  border-radius: 999px;
  background: var(--color-ink-100);
  border: 1px solid var(--color-ink-300);
  overflow: hidden;
}

@media (min-width: 640px) {
  .score-meter__track { width: 5.5rem; }
}

.score-meter__fill {
  display: block;
  height: 100%;
  background: var(--color-teal-700);
  border-radius: 999px;
}

/* Featured clinic detail (ranking page top pick) */

.ranking-page__other-title {
  margin: var(--space-8) 0 var(--space-4);
  font-size: 1.15rem;
}

.clinic-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--color-teal-600);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}

@media (min-width: 640px) {
  .clinic-detail { padding: var(--space-7); }
}

.clinic-detail__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .clinic-detail__header { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}

.clinic-detail__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 var(--space-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-teal-700);
}

.clinic-detail__name { margin: 0; font-size: 1.5rem; }

.clinic-detail__name-highlight {
  display: inline;
  background: var(--color-gold-100);
  color: var(--color-gold-700);
  padding: 0.15em 0.55em;
  border-radius: var(--radius-sm);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* entry.shortName responsive swap (see clinicName() in clinic-detail.js) —
   the short form only shows up to the same width where the rest of the
   site's layout still counts as "mobile" (see the hero media breakpoint),
   so the badge headline fits one line instead of wrapping. */
.clinic-detail__name-short { display: none; }

@media (max-width: 639px) {
  .clinic-detail__name-full { display: none; }
  .clinic-detail__name-short { display: inline; }
}

/* Gold, not the neutral surface-alt gray it used to be — ties to the same
   medal/"top pick" color already used on the #1 pill and the verdict box,
   so the rating reads as a deliberately branded stamp rather than a stat
   tile. Sits in normal flow beside the heading on desktop (below it on
   mobile, if compactLabel isn't in play — see the max-width override,
   which instead pins it into the corner). */
.clinic-detail__score {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 9rem;
  padding: var(--space-4) var(--space-5);
  /* Same neutral fill as the "Classifica aggiornata" pill up in the page
     header (.ranking-page__updated) — a quieter, more consistent choice
     than the gold/teal combinations tried before. */
  background: var(--color-ink-100);
  border: 1px solid var(--color-ink-300);
  border-radius: var(--radius-lg);
}

.clinic-detail__score .score-meter--labeled { align-items: center; }

/* score-meter__label-compact (see score-meter.js) only shows up inside this
   badge, only below 640px — everywhere else the full "Voto SalusAdvisor"
   wording stays. */
.clinic-detail__score .score-meter__label-compact { display: none; }

/* On mobile, pin the score into the corner beside the eyebrow/title instead
   of stacking it below the whole heading block — but reserve that width
   first (padding-right on just the eyebrow/title, not the whole heading),
   so the badge has its own guaranteed lane and can never land on top of the
   title no matter how it wraps. Scoped to only those two lines — the
   badge's height doesn't reach as far down as the doctor byline below, so
   that row doesn't need the same reservation and stays at full width. The
   title itself also drops a notch (1.5rem → 1.2rem): even with the shorter
   "Galenus Clinic" form and the compact "Voto" label, there isn't enough
   width left on narrow phones (~360–390px) to fit both the badge and the
   full-size title on one line — this isn't a guess, it's measured: the
   rendered pill needs ~235px unwrapped at 1.3rem, but a 375px phone (32px
   page gutter + 48px card padding + 72px badge lane) only leaves ~223px,
   and the gap only gets tighter on smaller phones. 1.2rem brings the
   unwrapped width down to fit that budget. */
@media (max-width: 639px) {
  .clinic-detail__header { position: relative; }

  .clinic-detail__eyebrow,
  .clinic-detail__name { padding-right: 5.25rem; }

  .clinic-detail__name { font-size: 1.12rem; }

  .clinic-detail__score {
    position: absolute;
    top: 0;
    right: 0;
    width: 4.75rem;
    min-width: 0;
    padding: 0.75rem 0.7rem;
  }

  .clinic-detail__score .score-meter__label {
    white-space: normal;
    text-align: center;
    font-size: 0.66rem;
  }

  .clinic-detail__score .score-meter__label-full { display: none; }
  .clinic-detail__score .score-meter__label-compact { display: inline; }

  .clinic-detail__score .score-meter__value { font-size: 0.88rem; }
}

.clinic-detail__summary {
  margin: var(--space-5) 0 0;
  font-size: 1rem;
  color: var(--color-ink-700);
  max-width: 68ch;
}

.clinic-detail__narrative-p {
  margin: var(--space-4) 0 0;
  font-size: 1rem;
  color: var(--color-ink-700);
  max-width: 68ch;
}

.clinic-detail__verdict {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  max-width: 68ch;
  background: var(--color-gold-100);
  border-radius: var(--radius-md);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-ink-900);
}

.clinic-detail__verdict-icon {
  flex: none;
  margin-top: 0.2rem;
  color: var(--color-gold-700);
}

.clinic-detail__verdict strong { color: var(--color-gold-700); }

.clinic-detail__grid {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-6);
}

.clinic-detail__criteria {
  margin: var(--space-6) 0 0;
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.clinic-detail__col-title { margin: 0 0 var(--space-2); font-size: 1rem; }

.clinic-detail__col-hint {
  margin: 0 0 var(--space-3);
  font-size: 0.82rem;
  color: var(--color-ink-500);
}

.clinic-detail__subtitle {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}

/* The doctor byline lives inside the header's heading column, right under
   the clinic name — a small photo + name/role pair, quiet enough to read
   as part of introducing the clinic rather than a competing module. */
.clinic-detail__doctor {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}

.clinic-detail__doctor-photo {
  flex: none;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-line);
}

.clinic-detail__doctor-photo--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}

.clinic-detail__doctor-text {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.clinic-detail__doctor-name {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-ink-900);
}

.clinic-detail__doctor-role {
  font-size: 0.8rem;
  color: var(--color-ink-700);
}

.clinic-detail__doctor-cta {
  margin-top: calc(var(--space-3) + 5px);
  margin-bottom: -10px;
}

.clinic-detail__doctor-cta .btn {
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  gap: 0.3rem;
}

/* Filled with the same teal used as the clinic-detail card's top accent
   border, so this CTA reads as the natural next step right where the
   reader's eye already is (next to the doctor byline) instead of blending
   into the outline-only .btn--secondary default. */
.clinic-detail__doctor-cta .btn--secondary {
  background: var(--color-teal-600);
  border-color: var(--color-teal-600);
  color: #fff;
}

.clinic-detail__doctor-cta .btn--secondary:hover {
  background: var(--color-teal-700);
  border-color: var(--color-teal-700);
  color: #fff;
}

.clinic-detail__doctor-cta .btn__arrow { width: 14px; height: 14px; }

/* Full width below the desktop breakpoint — a right-sized tap target
   instead of a narrow button squeezed under the doctor's name/role. */
@media (max-width: 639px) {
  .clinic-detail__doctor-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

.clinic-facility {
  margin: var(--space-6) 0 0;
}

.clinic-facility__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .clinic-facility__grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

.clinic-facility__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
}

/* Brand logos for the implant systems used — each in its own light tile so
   wildly different logo colors and aspect ratios (a red wordmark, a flat
   raster mark, an SVG monogram...) still read as one consistent row. */
.clinic-implants__logos {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.clinic-implants__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.clinic-implants__logo img {
  display: block;
  height: 1.35rem;
  width: auto;
  max-width: 6rem;
  object-fit: contain;
}

.clinic-detail__cta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.clinic-detail__cta--top {
  margin-top: var(--space-5);
}

/* Wider, chunkier than the site-wide .btn default — scoped here rather
   than changed globally, since the hero/nav/footer CTAs elsewhere on the
   site are sized to their own context. */
.clinic-detail__cta .btn {
  padding: 1.05rem 2.2rem;
  font-size: 1rem;
  justify-content: center;
  min-width: 16rem;
  max-width: 100%;
}

.clinic-detail__cta-note {
  font-size: 0.8rem;
  color: var(--color-ink-500);
}

/* Criteria list — reuses .score-meter, one row per methodology criterion */

.criteria-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.criteria-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.criteria-list__item:last-child { border-bottom: none; }

.criteria-list__label {
  flex: 0 0 auto;
  width: 11rem;
  font-size: 0.88rem;
  color: var(--color-ink-700);
}

@media (min-width: 640px) {
  .criteria-list__label { width: 14rem; }
}

.criteria-list .score-meter {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-3);
  grid-column: auto;
  min-width: 0;
}

.criteria-list .score-meter__track {
  flex: 1;
  width: auto;
  max-width: none;
}

.criteria-list .score-meter__value {
  flex: 0 0 auto;
}

/* Tag list — treatments / technologies chips */

.tag-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  font-size: 0.8rem;
  color: var(--color-accent-700);
  background: var(--color-accent-100);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

/* Reviews card — always a "declared by clinic" source, never styled as a
   SalusAdvisor verification (see Docs/03 four-level source rule). */

.reviews-card {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

/* Google-style treatment: white card, subtle border/shadow (Material-like),
   Google "G" logomark + brand label, so the source reads unmistakably as
   Google Reviews rather than a generic rating widget. */
.reviews-card.google-reviews {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
}

.google-reviews__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.google-reviews__brand-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-700);
}

.reviews-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.reviews-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.reviews-card__star { color: var(--color-rating); }

.reviews-card__rating {
  font-weight: 700;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-900);
}

.reviews-card__count {
  font-size: 0.85rem;
  color: var(--color-ink-500);
}

.reviews-card__link {
  display: block;
  margin-top: var(--space-4);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-600);
}

/* Individual review snippets — real quotes reproduced from the clinic's own
   reviews page (see reviews.highlights in content JSON), each with its own
   avatar-initials, name and star rating, Google-review-card style. */

.google-reviews__snippets {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.google-reviews__snippet {
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}

.google-reviews__snippet-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.google-reviews__avatar {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.google-reviews__snippet-name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-900);
}

.google-reviews__snippet-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--color-rating);
  margin-top: 0.15rem;
}

.google-reviews__snippet-text {
  margin: var(--space-2) 0 0;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--color-ink-700);
  /* Some quoted reviews carry their own paragraph breaks (blank lines in
     the source JSON string); pre-line renders those without needing to
     split the review into an array of paragraphs like narrative/verdict. */
  white-space: pre-line;
}

/* A result photo the reviewer shared alongside their words — a rectangular
   case photo, not another avatar, so it's sized and shaped nothing like
   the initials circle up in the snippet head. */
.google-reviews__snippet-photo {
  display: block;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-top: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
}

/* Before/after carousel — placeholder visuals only; real slides are all
   present in the HTML, JS in main.js only enhances prev/next/dot nav. */

.ba-carousel {
  margin: var(--space-6) 0 0;
}

.ba-carousel__label {
  margin: 0 0 var(--space-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}

.ba-carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ba-carousel__viewport::-webkit-scrollbar { display: none; }

.ba-carousel__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ba-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .ba-carousel__slide { flex-basis: 50%; }
}

.ba-carousel__media {
  aspect-ratio: 4 / 5;
  margin: 0 var(--space-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-alt);
}

.ba-carousel__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ba-carousel__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 100%;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-ink-300);
  border-radius: var(--radius-md);
  color: var(--color-ink-500);
  font-size: 0.8rem;
  text-align: center;
  padding: var(--space-3);
}

.ba-carousel__caption {
  margin: var(--space-2) var(--space-2) 0;
  font-size: 0.82rem;
  color: var(--color-ink-700);
}

.ba-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.ba-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-accent-700);
  cursor: pointer;
}

.ba-carousel__btn:hover { border-color: var(--color-accent-600); }
.ba-carousel__btn--prev svg { transform: rotate(180deg); }

.ba-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ba-carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: none;
  background: var(--color-ink-300);
  cursor: pointer;
  padding: 0;
}

.ba-carousel__dot.is-active {
  background: var(--color-teal-600);
  width: 1.25rem;
  border-radius: 999px;
}

/* Methodology — plain list, no boxed background */

.methodology {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 860px) {
  .methodology { grid-template-columns: 1.2fr 0.8fr; align-items: stretch; }
}

.methodology__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.methodology__criteria {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.methodology__criteria li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  color: var(--color-ink-900);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.methodology__criteria li:last-child { border-bottom: 0; padding-bottom: 0; }

.methodology__criteria svg { color: var(--color-teal-600); flex-shrink: 0; }

/* Quality first — same dark band as "why SalusAdvisor" (.band--dark),
   behind a real card, so the statement reads as a distinct callout
   instead of plain text on a tinted band. */

.quality-first__inner,
.contact-cta__inner {
  max-width: var(--content-narrow);
  margin: 0 auto;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-7) var(--space-6);
}

.quality-first__inner p:last-child { margin-bottom: 0; }

/* FAQ */

.faq-accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-line);
}

.faq-item { border-bottom: 1px solid var(--color-line); }

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.faq-item__question::-webkit-details-marker { display: none; }

.faq-item__chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--color-ink-500);
}

.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }

.faq-item__answer { padding: 0 0 var(--space-4); max-width: 60ch; }
.faq-item__answer p { margin: 0; }

/* Article / long-form guide page */

.article-page { max-width: var(--content-narrow); padding-top: var(--space-7); }

/* A touch less top space on mobile between the navbar and the article —
   scoped away from .article-page--tail (the FAQ/sources/disclaimer block
   reused at the bottom of guide AND ranking pages), which isn't under the
   navbar and keeps its normal spacing. */
@media (max-width: 639px) {
  .article-page:not(.article-page--tail) { padding-top: calc(var(--space-7) - 30px); }
}

.article-header { margin-bottom: var(--space-7); }

.article-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.article-lead {
  margin-top: var(--space-3);
  max-width: 42ch;
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-ink-700);
}

.article-figure { margin: var(--space-6) 0; }

.article-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
}

.article-figure figcaption {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-ink-500);
}

.article-figure--hero { margin-top: var(--space-7); }

.article-toc {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  margin: var(--space-7) 0;
}

.article-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-ink-900);
  list-style: none;
}

.article-toc__summary::-webkit-details-marker { display: none; }

.article-toc__chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--color-ink-500);
}

.article-toc[open] .article-toc__chevron { transform: rotate(180deg); }

.article-toc nav {
  padding: 0 var(--space-6) var(--space-5);
}

.article-toc ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  counter-reset: toc;
}

.article-toc li { counter-increment: toc; }

/* Scoped to .article-toc nav specifically, not every <a> in an
   .article-toc-classed box — the counter(toc) pseudo-element only makes
   sense for the numbered TOC links inside nav > ol > li > a. A plain link
   placed directly in an .article-toc box (see ranking.js's methodology
   accordion, which reuses this box/summary/chevron styling for a
   non-TOC use) isn't inside a counted <li>, so counter(toc) would render
   as a stray "0" if this stayed unscoped. */
.article-toc nav a {
  display: flex;
  gap: var(--space-3);
  color: var(--color-accent-700);
  font-weight: 500;
  font-size: 0.95rem;
}

.article-toc nav a::before {
  content: counter(toc);
  color: var(--color-teal-700);
  font-weight: 700;
  min-width: 1.2rem;
}

.article-toc nav a:hover { text-decoration: underline; }

.article-body__intro { font-size: 1.02rem; }

.article-section {
  margin-top: var(--space-8);
  scroll-margin-top: var(--space-6);
}

.article-section h2 { margin-bottom: var(--space-4); }
.article-section h3 { margin-top: var(--space-5); }

.article-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding-left: 0;
}

.article-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-ink-700);
}

ul.article-list li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal-600);
}

ol.article-list { counter-reset: steps; }

ol.article-list li { padding-left: var(--space-6); }

ol.article-list li::before {
  counter-increment: steps;
  content: counter(steps);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-list strong { color: var(--color-ink-900); }

/* Brand logo strip — used inside guide articles to show the real logos of
   the manufacturers named in the text (e.g. implant brands guide). Cards
   share the site's flat card treatment so the strip reads as part of the
   article, not as a sponsor/partner bar. */

.article-logos { margin: 0 0 var(--space-6); }

.article-logos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding: 0;
}

@media (min-width: 640px) {
  .article-logos__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 860px) {
  .article-logos__grid { grid-template-columns: repeat(5, 1fr); }
}

.article-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.article-logos__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.article-logos figcaption {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-ink-500);
}

/* Tables */

.article-table { margin: 0 0 var(--space-6); }

.article-table__scroll {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.article-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.article-table caption {
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-ink-900);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-line);
}

.article-table th,
.article-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}

.article-table th {
  background: var(--color-surface-alt);
  font-weight: 600;
  color: var(--color-ink-900);
  white-space: nowrap;
}

.article-table tbody tr:last-child td { border-bottom: 0; }
.article-table tbody tr:nth-child(even) { background: var(--color-surface-alt); }
.article-table strong { color: var(--color-ink-900); }

/* Info boxes */

.infobox {
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: 0 0 var(--space-5);
  border-left: 4px solid var(--color-accent-600);
  background: var(--color-accent-100);
}

.infobox__title {
  font-weight: 700;
  color: var(--color-ink-900);
  margin: 0 0 var(--space-2);
}

.infobox__text { margin: 0; color: var(--color-ink-700); }
.infobox__text strong { color: var(--color-ink-900); }
/* Existing infobox callouts only ever had one paragraph, so this never
   came up before — the ranking page's alert box (see ranking.js's
   alertBox()) is the first to stack several, and with zero margin they ran
   together with no visual break between them. */
.infobox__text + .infobox__text { margin-top: var(--space-3); }

.infobox__link {
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent-700);
}

.infobox__link:hover { text-decoration: underline; }

.infobox--warning {
  border-left-color: #c8862a;
  background: #fdf3e4;
}

.infobox--tip {
  border-left-color: var(--color-teal-600);
  background: var(--color-teal-100);
}

/* FAQ / sources / disclaimer sit inside the same narrow article column */

.article-faq,
.article-sources { padding-left: 0; padding-right: 0; max-width: var(--content-narrow); }

.article-sources { margin-top: var(--space-6); }

.article-sources ul { display: flex; flex-direction: column; gap: var(--space-2); }

.article-sources li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.92rem;
  color: var(--color-ink-700);
}

.article-sources li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-ink-300);
}

.article-disclaimer {
  max-width: var(--content-narrow);
  margin: var(--space-7) 0 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.article-disclaimer__title {
  font-weight: 700;
  color: var(--color-ink-900);
  margin: 0 0 var(--space-2);
}

.article-disclaimer p:last-child {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-ink-500);
}

.article-related { border-top: 1px solid var(--color-line); margin-top: var(--space-8); }
.article-related h2 { margin-bottom: var(--space-5); }

/* Guides index page */

.guides-index__header {
  padding-top: var(--space-7);
  padding-bottom: var(--space-5);
}

.guides-index__header .section-heading { margin-bottom: 0; max-width: 46rem; }

.guides-index__header-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 860px) {
  .guides-index__header-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-8);
  }
}

.guides-index__header-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-md);
}

@media (max-width: 859px) {
  .guides-index__header-media {
    order: -1;
    max-width: 26rem;
    margin: 0 auto;
  }
}

.guides-index__group {
  /* Anchor target for the nav dropdown's category links — offsets the
     jump so headings don't land underneath the sticky header. */
  scroll-margin-top: var(--space-6);
}

.guides-index__group-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.guides-index__group-heading h2 { margin: 0; }

.guides-index__count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-500);
}

/* Rankings index page — same header treatment as the guides index */

.rankings-index__header {
  padding-top: var(--space-7);
  padding-bottom: var(--space-5);
}

.rankings-index__header-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 860px) {
  .rankings-index__header-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-8);
  }
}

.rankings-index__header-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-md);
}

@media (max-width: 859px) {
  .rankings-index__header-media {
    order: -1;
    max-width: 26rem;
    margin: 0 auto;
  }
}

/* Ranking page — empty state, shown until real clinic entries are
   published for a given ranking. */

.ranking-page { max-width: var(--content-narrow); padding-top: var(--space-6); }

/* Scoped smaller than the site-wide h1 clamp (up to 3.1rem) — at that size
   a title this long plus the destination flag wraps to two lines on
   desktop. Still fluid, just capped lower, and only on ranking pages. */
.ranking-page h1 { font-size: clamp(1.7rem, 1.7vw + 1.1rem, 2.15rem); }

/* Scoped to the ranking page only — the shared .article-figure--hero rule
   (used on guide/contact/methodology heroes too) sets a much bigger
   margin-top than this intro-into-photo transition needs; overriding it
   only here keeps those other pages untouched. Left at the paragraph's own
   margin-bottom (var(--space-4), from the base p rule) rather than 0, so
   there's still a small breathing gap instead of the two touching. */
.ranking-page .article-figure--hero { margin-top: 0; }

/* This one ranking only (see ranking.js isWide) — 20% wider than the
   standard narrow content column, per user request. */
.ranking-page--wide { max-width: calc(var(--content-narrow) * 1.2); }

/* display:flex (a block box) rather than inline-flex — a block box's
   margins collapse with the adjoining h1/paragraph margins per the normal
   CSS rule, so equal top/bottom margin values here actually produce equal
   visual gaps. inline-flex is an inline-level box, so its margins would
   just add to the neighbors' instead of collapsing with them — same
   numbers, visibly unequal gaps, which is what happened before. width:
   fit-content keeps it pill-sized instead of stretching block-full-width. */
.ranking-page__updated {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.35rem;
  margin: var(--space-4) 0;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--color-ink-100);
  color: var(--color-ink-700);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Reuses .article-toc's box/summary/chevron (see components.css's FAQ
   section) — same shape, just prose + a criteria list instead of a link
   list. Only the content padding is new (.article-toc's own is scoped to
   its <nav>, which doesn't apply here). */
.ranking-page__methodology { margin: var(--space-7) 0; }

.ranking-page__methodology-body { padding: 0 var(--space-6) var(--space-5); }
.ranking-page__methodology-body p:first-child { margin-top: 0; }

/* Sits right after the (much larger) featured-clinic block, so it needs
   more separation above than .infobox's own default margin gives it. */
.ranking-page__alert { margin-top: var(--space-8); }

.infobox__title--icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.infobox__title--icon svg { flex: none; color: var(--color-accent-600); }

.ranking-empty {
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}

.ranking-empty__title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-ink-900);
  margin-bottom: var(--space-2);
}

.ranking-empty p:last-child { margin-bottom: 0; }

/* Article big CTA — full-bleed band, deliberately larger and louder than
   the standard .section__footer-cta ghost button (see bigCtaSection() in
   guide.js). Used sparingly, for the one call to action a guide really
   wants every reader to take. */

.article-big-cta__inner {
  max-width: var(--content-narrow);
  margin: 0 auto;
  text-align: center;
}

.article-big-cta__inner .eyebrow { color: #8fe0d3; }

.article-big-cta__inner h2 {
  color: #fff;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}

.article-big-cta__inner p {
  color: #dbe4ff;
  font-size: 1.08rem;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

.article-big-cta__inner .btn {
  margin-top: var(--space-3);
  padding: 1.1rem 2.2rem;
  font-size: 1.05rem;
}

/* Contact page */

.contact-reasons__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .contact-reasons__grid { grid-template-columns: repeat(3, 1fr); }
}

.contact-cta { padding-top: 0; }

.contact-cta__email {
  font-size: 1.02rem;
  color: var(--color-ink-900);
}

.contact-cta__email a { color: var(--color-accent-700); font-weight: 600; }
.contact-cta__email a:hover { text-decoration: underline; }

.contact-cta__inner .btn { margin-top: var(--space-2); }

/* Sober, secondary — operator identity (trade name, NIPT, location), not a
   call to action. Sits below the email CTA rather than in its own boxed
   section, deliberately small and muted so it doesn't compete visually
   with the actual contact prompt above it. */
.contact-cta__identity {
  margin-top: var(--space-5);
  font-size: 0.8rem;
  color: var(--color-ink-500);
  line-height: 1.5;
}

/* Evaluation outcome — closing band on the "Come valutiamo le cliniche"
   page, pairing a supporting image with the CTA out to rankings/clinics. */

.evaluation-outcome {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 860px) {
  .evaluation-outcome {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-8);
  }
}

.evaluation-outcome__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
}

.evaluation-outcome__text .section-heading { margin-bottom: var(--space-5); }

.evaluation-outcome__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}