/* =============================================================================
   Kind Global Clinic Myeongdong — international patient site
   -----------------------------------------------------------------------------
   The look rests on three devices, in order of how much work they do:

   1. Alternating surfaces. Dark, light, photograph, dark, light. There is not a
      single section divider in this stylesheet — the change of ground is the
      chapter break. Enforced at build time in components.mjs.
   2. One section-header formula, repeated without exception: eyebrow, bold
      sans headline, short lede — ranged left, like the heading of a document
      section.
   3. Hierarchy by structure, not by scale. Weight, numbering and hairlines
      carry the order; the headline sits at roughly 2.4:1 over body copy, the
      ratio of a reference document. (The old 3.5:1 thin-serif display was the
      brochure's grammar, and it left with the brochure.)

   Palette of a working document: white paper, cool neutral ink, and one
   pharmacopeia green for emphasis. The copy on this site claims
   verifiability — published prices, cited limitations, "check it yourself" —
   so the surface reads as a reference document, not a mood brochure.
   (Token NAMES --cream/--ink are historical; renaming them would swell the
   diff with zero visual effect, so the names stay and the values moved.)
   Boundary contrast between the two grounds was reviewed at the end of the
   redesign (2026-09-08) and kept as is: with the serif display, the motif and
   the mood photography gone, the alternation reads as a document's inverse
   chapters, and softening --cream would only blur paper against cards.
   ========================================================================== */

/* ------------------------------------------------------------------- tokens */

:root {
  /* surfaces */
  --ink: #16181d;
  --ink-soft: #1d2026;
  --ink-line: #32363e;
  --cream: #f8f9fa;
  --cream-deep: #eef0f3;
  --white: #fff;
  --black: #0d0e11;

  /* type */
  /* The light-ground palette, named so a light card inside a dark section can ask
     for it back. --text/--muted/--faint/--accent point here by default and are
     rebound in dark contexts. */
  --text-lg: #1f2328;
  --text: var(--text-lg);
  --muted-lg: #5b636d;
  --muted: var(--muted-lg);
  --faint-lg: #6a7280;
  --faint: var(--faint-lg);
  --on-ink: #eef0f2;
  --on-ink-muted: #9aa0a8;
  /* One step below --on-ink-muted, and the darkest cool grey that still clears
     4.5:1 on the lightest dark ground the site paints (the dark flagship row,
     #222a2b — see the .sec--dark .is-flagship alpha below). */
  --on-ink-faint: #8d939c;

  /* accent — the only one. numerals, ticks, rules under headings.
     Deep clinical green, not gold: the pharmacopeia register, and the farthest
     usable distance from the luxury-brochure convention this site left behind. */
  --accent-lg: #1e6b53;
  --accent: var(--accent-lg);
  --accent-bright: #8fc7ad;
  --accent-wash: #e9f2ed;

  --line: #e4e7ea;
  --line-strong: #cfd4da;
  /* The underline is the input's only boundary, so WCAG 1.4.11 asks 3:1 of it.
     --line-strong stays where it is: it draws decorative dividers, which are exempt,
     and darkening it would thicken every hairline on the site. */
  --field-line: #8a919b;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* CJK stays on system faces on purpose: Noto Sans JP/TC would add hundreds
     of KB per locale at runtime, against this repo's zero-weight habit, and the
     platform gothics (Hiragino, Yu Gothic, PingFang, JhengHei) match Inter's
     modern-grotesque weight. Two separate stacks, not one merged list — a
     merged list lets a zh-Hant page pick up Japanese-variant Han glyphs. */

  /* Type scale. Every font-size in this file reads from here, so the whole page
     rescales from one block. Body sits at 17px: the generous section rhythm below
     signals "read slowly", and a 15-16px body fights that signal — the text ends up
     looking squashed by its own whitespace. */
  --fs-micro:   0.75rem;    /* 12 — uppercase micro labels */
  --fs-label:   0.8125rem;  /* 13 — eyebrows, table headers, meta */
  --fs-caption: 0.875rem;   /* 14 — captions, footnotes, footer */
  --fs-small:   0.9375rem;  /* 15 — buttons, dense table cells */
  --fs-sm:      1rem;       /* 16 — secondary body */
  --fs-body:    1.0625rem;  /* 17 — running text */
  --fs-lead:    1.1875rem;  /* 19 — ledes, quick answers, form inputs */
  --fs-h4:      1.25rem;    /* 20 */
  --fs-h3:      1.3125rem;  /* 21 */
  --fs-h3-lg:   1.375rem;   /* 22 */
  --fs-num:     1.625rem;   /* 26 — key numerals (sans, tabular) */
  --fs-h2-sm:   1.875rem;   /* 30 — sub-headings */
  --fs-display: 2.125rem;   /* 34 */

  --lh-body: 1.75;
  --lh-tight: 1.6;

  /* Measure. Wide columns make type look smaller at the same size, so the fix for
     "the text feels small" is partly to narrow the column, not only to enlarge. */
  --measure: 68ch;
  --measure-narrow: 58ch;

  --wrap: 1200px;
  /* Was 80-140px. Trimmed about 25%: the dark/light alternation already marks the
     chapter breaks, so the padding does not have to carry that job alone. */
  --pad-y: clamp(3.75rem, 7vw, 6.5rem);   /* 60 → 104px */
  --pad-y-hero: clamp(1.75rem, 2.8vw, 2.5rem); /* 28 → 40px, was 40 → 56 */
  --radius-card: 20px;
  --radius-img: 10px;
}

:lang(ja) { --sans: 'Inter', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif; }
/* CJK h1 line breaking: prefer breaks at punctuation (keep-all treats a CJK
   run as one word), with an emergency mid-run break only when a segment
   exceeds the line (overflow-wrap) — a 375px screen must never overflow.
   Scoped by :lang so English headings keep their default behavior. */
h1:lang(ja), h1:lang(zh-Hant) { word-break: keep-all; overflow-wrap: anywhere; }
:lang(zh-Hant) { --sans: 'Inter', 'PingFang TC', 'Microsoft JhengHei', sans-serif; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: 0.75rem 1.25rem;
  font-size: var(--fs-caption); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ headings */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }         /* 26 → 40 */
h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); }           /* 22 → 32 */
h3 { font-size: var(--fs-h3); font-family: var(--sans); font-weight: 600; letter-spacing: 0.005em; line-height: 1.4; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
em { font-style: italic; }

/* --------------------------------------------------------- layout & surfaces */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.wrap--narrow { max-width: 760px; }
.wrap--mid { max-width: 940px; }

.sec { padding-block: var(--pad-y); }

.sec--light { background: var(--cream); color: var(--text); }

/* Light-ground tokens, remapped for every dark context.
   Overriding one selector at a time does not converge: five were fixed by hand and
   a render-wide sweep then found sixteen more. Rebinding the tokens themselves
   covers the elements that exist now and the ones added later. */
.sec--dark,
.sec--black,
.site-foot {
  --text: var(--on-ink);
  --muted: var(--on-ink-muted);
  --faint: var(--on-ink-faint);
  --accent: var(--accent-bright);
}

/* Components that paint their own light surface. They can sit inside a dark
   section, where the rebinding above would otherwise hand them light-on-white
   text — which is exactly what happened to the first-visit cards on /prices/. */
/* .qa, .tcard and .book__aside are not on this list: they flip to --ink-soft in a
   dark section, so they must keep the dark bindings, not undo them. */
.card,
.qlink,
.dev,
.prose .callout,
.review-strip {
  --text: var(--text-lg);
  --muted: var(--muted-lg);
  --faint: var(--faint-lg);
  --accent: var(--accent-lg);
}
.sec--dark  { background: var(--ink); color: var(--on-ink); }
.sec--black { background: var(--black); color: var(--on-ink); }

.sec--dark a, .sec--black a { text-decoration-color: var(--ink-line); }
.sec--dark a:hover, .sec--black a:hover { text-decoration-color: var(--accent-bright); }

/* full-bleed photograph band, the breather between chapters */
.band {
  --band-ratio: 21 / 9;
  max-width: min(1100px, calc(100% - 2 * clamp(1.25rem, 5vw, 2.5rem)));
  margin: 0 auto;
}
.band img {
  width: 100%;
  aspect-ratio: var(--band-ratio);
  object-fit: cover;
  object-position: center 40%;
  display: block;
  border-radius: var(--radius-img);
  /* Same hairline family as the section rules (--line-strong / --ink-line):
     a photograph here is a plate in the document, and it gets the document's
     own frame, not a mood treatment. */
  border: 1px solid var(--line-strong);
}
@media (max-width: 640px) {
  .band img { aspect-ratio: 4 / 3; }
}

/* ----------------------------------------------------------- section headers */

.sec-head {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  /* The four-petal motif used to open every header; a hairline rule took its
     place (2026-09, motif retired with the redesign). Full column width, one
     hairline — a document's section divider, not an ornament. */
  border-top: 1px solid var(--line-strong);
  padding-top: 1.4rem;
}
.sec--dark .sec-head, .sec--black .sec-head { border-top-color: var(--ink-line); }
.sec-head--left { text-align: left; margin-inline: 0; max-width: 46ch; }

.eyebrow {
  margin: 0.65rem 0 0.9rem;
  font-size: var(--fs-label);         /* 11px */
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.sec--dark .eyebrow, .sec--black .eyebrow { color: var(--accent-bright); }

.lede {
  margin: 1.5rem auto 0;
  max-width: var(--measure-narrow);
  color: var(--muted);
  font-size: var(--fs-lead);
}
.sec--dark .lede, .sec--black .lede { color: var(--on-ink-muted); }
.sec-head--left .lede { margin-inline: 0; }

/* ------------------------------------------------------------------ controls */

.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border-radius: 999px;
  padding: 0.95rem 2rem;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  text-align: center;
}
.btn--sm { padding: 0.6rem 1.35rem; font-size: var(--fs-caption); }
.btn__sub { font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.02em; opacity: .7; }

.btn--solid { background: var(--white); color: var(--ink); }
.btn--solid:hover { background: var(--accent-bright); color: var(--black); }
.sec--light .btn--solid { background: var(--ink); color: var(--on-ink); }
.sec--light .btn--solid:hover { background: var(--accent); color: var(--white); }

.btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn--ghost:hover { background: rgb(255 255 255 / .1); }
.sec--light .btn--ghost:hover { background: var(--cream-deep); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
  margin-top: 2.25rem;
}
.sec-head--left + .btn-row, .book__form .btn-row { justify-content: flex-start; }

/* --------------------------------------------------------------- site header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(22 24 29 / .92);
  backdrop-filter: blur(10px);
  color: var(--on-ink);
  border-bottom: 1px solid var(--ink-line);
}
.site-head__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; margin-right: auto; min-height: 44px; }
.brand__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-h3-lg);
  letter-spacing: 0.01em;
}
.site-nav { margin-left: 0; }
.site-nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
/* Five items, not four. Uppercase plus 0.12em tracking cost roughly a third of the
   row's width for no gain in legibility at this size. */
.site-nav a {
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  color: var(--on-ink-muted);
}
.site-nav a {
  position: relative;
  padding-bottom: 4px;
  transition: color .2s ease;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current='page'] { color: var(--on-ink); }
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left center; }
@media (prefers-reduced-motion: reduce) {
  .site-nav a::after { transition: none; }
}

@media (max-width: 900px) {
  .site-head__cta { display: none; }
  .site-nav ul { gap: 1.1rem; flex-wrap: wrap; justify-content: flex-end; }
  .site-nav a { font-size: var(--fs-caption); letter-spacing: 0.01em; }
}

/* Language switcher. Rendered on every build, single live locale included.
   Ships as a plain inline link list (the no-JS state); .lang--ready, added by
   the script, collapses it behind the globe trigger. */
.lang { position: relative; }
.lang__list { display: flex; gap: 0.9rem; list-style: none; margin: 0; padding: 0; }
.lang__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--on-ink-muted);
  transition: color .2s ease;
}
.lang__list a:hover, .lang__list a:focus-visible, .lang__list a[aria-current='true'] { color: var(--on-ink); }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--on-ink-muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color .2s ease;
}
.lang__btn:hover, .lang__btn:focus-visible, .lang--open .lang__btn { color: var(--on-ink); }
.lang--open .lang__caret { transform: rotate(180deg); }
.lang__caret { transition: transform .18s ease; }
.lang--ready .lang__list {
  display: none;
  position: absolute;
  right: 0; /* the panel grows leftward, so a wide row never leaves the viewport */
  top: calc(100% + 6px);
  /* Wide enough for the longest row (繁體中文 + ZH-HANT + check) on one line,
     with slack rather than a measured fit — the panel is absolute, so width
     costs the header layout nothing. */
  min-width: 15rem;
  padding: 0.35rem;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  z-index: 30;
}
.lang--open .lang__list { display: block; }
.lang--ready .lang__list a { display: flex; padding: 0.6rem 0.75rem; border-radius: 5px; white-space: nowrap; }
.lang--ready .lang__list a:hover, .lang--ready .lang__list a:focus-visible { background: var(--ink); }
/* The current locale sits on top of the list with a lifted row: one step
   lighter than the panel's --ink-soft on the existing ink ramp (--ink-line —
   no new color), plus weight. Never the only signal: aria-current and the
   check icon carry the state for assistive tech and color-blind readers. */
.lang--ready .lang__list a[aria-current='true'] {
  background: var(--ink-line);
  font-weight: 600;
}
.lang__tag {
  /* The code LEADS the row in a fixed-width column, so the names behind it
     share one left baseline no matter how long each name is. 3em fits the
     widest code (繁中, two CJK glyphs at this size) without wobble. A step
     smaller and dimmer than the name — the tag is a reference code, not a
     second label. */
  flex: none;
  min-width: 3em;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--on-ink-faint);
}

/* The drawer's copy: hidden on desktop, a plain row inside the nav drawer on
   narrow viewports (see the has-navtoggle block below). */
.site-nav__lang { display: none; }

/* The talk-directly block under the booking form — rendered only for a live
   desk channel that cannot prefill a composed message (see bookingSection). */
.book__direct { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line, #d8d2c8); }
.book__direct p { margin: 0 0 0.9rem; font-size: var(--fs-sm); color: var(--muted, inherit); }
@media (prefers-reduced-motion: reduce) {
  .lang__caret { transition: none; }
}

/* ------------------------------------------------------------- nav drawer */

/* The hamburger only exists once the script has revealed it. Everything below is
   scoped to .has-navtoggle so that with JavaScript off the nav stays the plain
   wrapping list it is today — usable, if tall — rather than a hidden menu with
   no way to open it. */
.navtoggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.navtoggle__bars, .navtoggle__bars::before, .navtoggle__bars::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.navtoggle__bars { margin: 0 auto; position: relative; }
.navtoggle__bars::before, .navtoggle__bars::after { content: ''; position: absolute; left: 0; }
.navtoggle__bars::before { top: -6px; }
.navtoggle__bars::after { top: 6px; }
.navtoggle[aria-expanded='true'] .navtoggle__bars { background: transparent; }
.navtoggle[aria-expanded='true'] .navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded='true'] .navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav__cta { display: none; }

@media (max-width: 768px) {
  /* Nothing below 14px on a phone. Both of these are tokens, so raising them
     here lifts every declaration that reads from them rather than 30 rules. */
  :root { --fs-micro: 0.875rem; --fs-label: 0.875rem; }

  .site-head__inner { min-height: 56px; gap: 0.75rem; }
  .brand { white-space: nowrap; }
  .brand__name { font-size: var(--fs-sm); letter-spacing: 0.04em; }

  .has-navtoggle .navtoggle { display: block; }
  .has-navtoggle .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 56px);
    background: var(--ink);
    padding: 1.25rem 1.5rem 2.5rem;
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  .has-navtoggle.nav-open .site-nav { transform: none; opacity: 1; visibility: visible; }
  .has-navtoggle .site-nav ul { display: block; }
  .has-navtoggle .site-nav li { border-bottom: 1px solid var(--ink-line); }
  .has-navtoggle .site-nav a {
    display: block;
    padding: 0.95rem 0;
    font-size: var(--fs-h4);
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
  }
  .has-navtoggle .site-nav a::after { display: none; }
  /* The desktop dropdown leaves the bar; the drawer row below takes over. */
  .has-navtoggle .lang { display: none; }
  .has-navtoggle .site-nav__lang { display: block; border-bottom: 0; margin-top: 1.5rem; }
  .has-navtoggle .site-nav__lang .lang__row {
    display: flex;
    gap: 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .has-navtoggle .site-nav__lang a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0;
    font-family: var(--sans);
    font-size: var(--fs-sm);
    color: var(--on-ink-muted);
  }
  .has-navtoggle .site-nav__lang a[aria-current='true'] { color: var(--on-ink); }
  .has-navtoggle .site-nav__cta { display: block; border-bottom: 0; margin-top: 1.25rem; }
  .has-navtoggle .site-nav__cta a {
    background: var(--on-ink);
    color: var(--ink);
    border-radius: 999px;
    text-align: center;
    font-family: var(--sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 0.9rem 1.25rem;
  }
  .has-navtoggle.nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------------------- hero */

/* Hero with a photograph behind it. The gradient is doing real work — text over an
   untreated interior shot fails contrast at the light end of the image. */
.sec--hero {
  padding-block: var(--pad-y-hero) var(--pad-y);
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.sec--hero > .wrap { position: relative; z-index: 1; }

/* ------------------------------------------------------------- quick links */

.quicklinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.quicklinks > * { min-width: 0; }
.qlink {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.75rem 1.6rem 1.6rem;
  border-radius: var(--radius-card);
  background: var(--white);
  color: var(--text);
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease;
}
.qlink:hover, .qlink:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgb(0 0 0 / .18);
}
.qlink__eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.qlink__title { font-family: var(--sans); font-weight: 600; font-size: var(--fs-h2-sm); line-height: 1.15; }
.qlink__note { font-size: var(--fs-sm); color: var(--muted); }
.qlink__go {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
}
.qlink__go::after { content: ' \2192'; }

@media (max-width: 860px) { .quicklinks { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .qlink { transition: none; }
  .qlink:hover, .qlink:focus-visible { transform: none; }
}

.hero { text-align: left; }
.hero .eyebrow { margin-top: 0; }
.hero__sub {
  margin: 1.75rem 0 0;
  max-width: 60ch;
  font-size: var(--fs-h4);
  color: var(--on-ink-muted);
}
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 2.5rem;
  margin: 2.75rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--ink-line);
  list-style: none;
}
.hero__facts li { font-size: var(--fs-sm); color: var(--on-ink-muted); }
.hero__facts b { display: block; color: var(--on-ink); font-weight: 500; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- quick answer */

.qa {
  max-width: calc(var(--measure) + 8ch);
  margin: 0 0 clamp(2.5rem, 5vw, 3.75rem);
  padding: 1.75rem 2rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: var(--white);
  border-radius: 0 var(--radius-img) var(--radius-img) 0;
}
.sec--dark .qa, .sec--black .qa { background: var(--ink-soft); border-color: var(--ink-line); border-left-color: var(--accent-bright); }
.qa__label {
  margin: 0 0 0.6rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.sec--dark .qa__label { color: var(--accent-bright); }
.qa__text { margin: 0; font-size: var(--fs-h4); line-height: 1.7; color: var(--text); }
.sec--dark .qa__text { color: var(--on-ink); }

/* The quick answer is the densest block on the page; at 20px/1.7 it ran past the
   fold on a 390px screen before the reader reached the price sentence. */
@media (max-width: 768px) {
  .qa { padding: 1.25rem; }
  .qa__text { font-size: var(--fs-body); line-height: 1.65; }
}

/* --------------------------------------------------------------------- cards */
/* White cards appear on dark surfaces only. See cardGrid() in components.mjs. */

.cards { display: grid; gap: 1.25rem; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius-card);
  padding: 2rem 1.75rem;
}
.card__index {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--accent);
}
.card__eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.card__title { margin: 0 0 0.75rem; }
.card__body { margin: 0; color: var(--muted); }
.card__meta {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-num);
  line-height: 1.2;
  color: var(--text);
}
.card__foot { margin: 0.75rem 0 0; font-size: var(--fs-caption); color: var(--faint); }

/* --------------------------------------------------------------- rule lists */
/* The light-surface counterpart: hairlines and space, no boxes. */

.rules { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.rules--2 { grid-template-columns: repeat(2, 1fr); }
.rules--3 { grid-template-columns: repeat(3, 1fr); }
.rule {
  padding: 2.25rem 1.75rem 2.25rem 0;
  border-top: 1px solid var(--line);
}
.rules--3 .rule:nth-child(-n+3),
.rules--2 .rule:nth-child(-n+2) { border-top: 1px solid var(--line-strong); }
.rule__num {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h4);
  line-height: 1;
  color: var(--accent);
}
.rule__title { margin: 0 0 0.6rem; }
.rule__body { margin: 0; color: var(--muted); }
.rule__meta { margin: 0.8rem 0 0; font-size: var(--fs-caption); color: var(--faint); }

/* ---------------------------------------------------------------- split list */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.split > * { min-width: 0; }
.split__media { align-self: center; }
.split__media img { border-radius: var(--radius-img); aspect-ratio: 3 / 4; object-fit: cover; }
.split__body .sec-head { margin-bottom: 2.5rem; }

.numlist { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numlist li {
  counter-increment: n;
  padding: 1.75rem 0;
  border-top: 1px solid var(--ink-line);
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 1.25rem;
}
.sec--light .numlist li { border-top-color: var(--line); }
/* Place every child explicitly: with auto-placement the paragraph falls into the
   3rem numeral column and renders one word per line. */
.numlist li::before {
  content: counter(n, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h4);
  line-height: 1.5;
  color: var(--accent-bright);
}
.sec--light .numlist li::before { color: var(--accent); }
.numlist h3 { grid-column: 2; grid-row: 1; margin: 0 0 0.5rem; }
.numlist p { grid-column: 2; grid-row: 2; margin: 0; color: var(--on-ink-muted); }
.sec--light .numlist p { color: var(--muted); }

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split__media { align-self: start; }
  .split__media img { aspect-ratio: 16 / 10; }
}

/* -------------------------------------------------------------------- tables */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: 1.5rem; max-width: 100%; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Scrolling shadows: the two `local` layers ride with the content and cover the two
   `scroll` shadows at each end, so a shadow appears only on the side that still has
   columns hidden. It disappears by itself once you reach the edge. */
.table-scroll {
  --table-ground: var(--cream);
  background:
    linear-gradient(to right, var(--table-ground) 40%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--table-ground) 40%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .13), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .13), transparent) right center / 14px 100% no-repeat scroll;
}
.sec--light .table-scroll { --table-ground: var(--white); }
.sec--dark .table-scroll {
  --table-ground: var(--ink);
  background-image:
    linear-gradient(to right, var(--table-ground) 40%, transparent),
    linear-gradient(to left, var(--table-ground) 40%, transparent),
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .5), transparent),
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .5), transparent);
}
/* Only worth saying where the table actually overflows: the tables are 620px wide. */
.table-hint { display: none; }
@media (max-width: 700px) {
  .table-hint {
    display: block;
    margin: 1.5rem 0 -0.75rem;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
  }
}
.tbl {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.tbl caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.9rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.tbl thead th {
  text-align: left;
  padding: 0 0.9rem 0.75rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.tbl thead th.num, .tbl td.num { text-align: right; }
.tbl tbody th {
  text-align: left;
  font-weight: 600;
  font-family: var(--sans);
  font-size: var(--fs-sm);
}
.tbl tbody th, .tbl tbody td {
  padding: 1.15rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tbl tbody th:first-child, .tbl thead th:first-child { padding-left: 0; }
.tbl tbody td:last-child, .tbl thead th:last-child { padding-right: 0; }
.tbl--dense tbody th, .tbl--dense tbody td { padding-block: 0.7rem; }
.tbl--wide1 tbody th { min-width: 15ch; }
/* These tables are 620px wide and a phone shows 390px of them, so scrolling right
   takes the row label off screen and the numbers stop meaning anything. Pinning the
   first column keeps the question visible while you read the answer. The pinned
   cell needs an opaque ground of its own, so it does not carry the row stripe.
   Applies to EVERY table, not just .tbl--wide1: the recovery table ("what to
   avoid in week 2" is unreadable once the phase column scrolls away), the hours
   table and the price tables lose their row identity the same way the compare
   tables did. Phones only — the media query keeps desktop untouched. */
@media (max-width: 700px) {
  .tbl thead th:first-child,
  .tbl tbody th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--cream);
    box-shadow: 1px 0 0 var(--line);
  }
  .sec--light .tbl thead th:first-child,
  .sec--light .tbl tbody th:first-child { background: var(--white); }
  .sec--dark .tbl thead th:first-child,
  .sec--dark .tbl tbody th:first-child { background: var(--ink); box-shadow: 1px 0 0 var(--ink-line); }
}
/* The 5-column price tables and the 6-column platform table are far wider than
   the 620px minimum and keep overflowing well past the phone breakpoint, so
   they get their own tier. Measured fit points: the en price tables (widest
   headers) fit at ~1000px, the platform table at ~1050px in every locale, but
   the ja/zh-Hant price tables — CJK headers are half the width — already fit
   at ~763px. The tier is 900px, and the price rules are split by page
   language so the hint never sits over a table that does not scroll:
   en ≤900px, ja/zh-Hant ≤760px (their real overflow range). Between a tier's
   edge and the fit point the scrolling shadows still signal. Desktop is
   untouched. The hint is scoped to .price-group because only the price
   tables are guaranteed to overflow in their tier; .tbl--wide1 (overflowing
   in every locale until ~1000px+) gains the pinned column only. */
@media (max-width: 900px) {
  html[lang='en'] .price-group .table-hint {
    display: block;
    margin: 1.5rem 0 -0.75rem;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
  }
  html[lang='en'] .price-group .tbl thead th:first-child,
  html[lang='en'] .price-group .tbl tbody th:first-child,
  .tbl--wide1 thead th:first-child,
  .tbl--wide1 tbody th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--cream);
    box-shadow: 1px 0 0 var(--line);
  }
  html[lang='en'] .sec--light .price-group .tbl thead th:first-child,
  html[lang='en'] .sec--light .price-group .tbl tbody th:first-child,
  .sec--light .tbl--wide1 thead th:first-child,
  .sec--light .tbl--wide1 tbody th:first-child { background: var(--white); }
  html[lang='en'] .sec--dark .price-group .tbl thead th:first-child,
  html[lang='en'] .sec--dark .price-group .tbl tbody th:first-child,
  .sec--dark .tbl--wide1 thead th:first-child,
  .sec--dark .tbl--wide1 tbody th:first-child { background: var(--ink); box-shadow: 1px 0 0 var(--ink-line); }
}
@media (max-width: 760px) {
  .price-group .table-hint {
    display: block;
    margin: 1.5rem 0 -0.75rem;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .price-group .tbl thead th:first-child,
  .price-group .tbl tbody th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--cream);
    box-shadow: 1px 0 0 var(--line);
  }
  .sec--light .price-group .tbl thead th:first-child,
  .sec--light .price-group .tbl tbody th:first-child { background: var(--white); }
  .sec--dark .price-group .tbl thead th:first-child,
  .sec--dark .price-group .tbl tbody th:first-child { background: var(--ink); box-shadow: 1px 0 0 var(--ink-line); }
}
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:nth-child(even) { background: rgb(0 0 0 / .022); }
.sec--dark .tbl tbody tr:nth-child(even) { background: rgb(255 255 255 / .02); }
.tbl tbody tr.is-flagship { background: var(--accent-wash); }
.tbl tbody tr.is-flagship th { font-weight: 600; }

.sec--dark .tbl thead th { color: var(--on-ink-muted); border-bottom-color: var(--ink-line); }
.sec--dark .tbl tbody th, .sec--dark .tbl tbody td { border-bottom-color: var(--ink-line); }
.sec--dark .tbl caption { color: var(--accent-bright); }
.sec--dark .tbl tbody tr.is-flagship { background: rgb(143 199 173 / .1); } /* effective #222a2b on --ink */

.tbl__name { display: block; }
.tbl__unit { display: block; font-size: var(--fs-label); color: var(--faint); letter-spacing: 0.04em; }
.tbl__inc { display: block; margin-top: 0.35rem; font-size: var(--fs-label); color: var(--muted); font-weight: 400; }
/* The final column is the answer the table exists to give, and for a reader
   paying in dollars the guide figure is the one that decides. Both were set
   smaller than the columns nobody pays. */
.tbl td.num:last-child strong { font-size: var(--fs-lead); }
.tbl__fx { display: block; font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
.sec--dark .tbl__fx { color: var(--on-ink-muted); }

.tbl__meta { display: block; margin-top: 0.15rem; font-size: var(--fs-caption); color: var(--faint); font-weight: 400; }
.tbl__na { color: var(--faint); }
.tbl-note { margin: 0.5rem 0 0; font-size: var(--fs-caption); color: var(--faint); }

/* price grouping */
.price-group + .price-group { margin-top: clamp(4rem, 8vw, 6rem); }
.price-group__title { font-family: var(--sans); font-weight: 600; font-size: var(--fs-h2-sm); margin: 0 0 0.4rem; }
.price-group__meta { margin: 0; font-size: var(--fs-caption); color: var(--faint); letter-spacing: 0.02em; }
/* Labeled rows so a reader can jump to the contraindications without reading the
   mechanism first. Two columns on a wide screen, stacked on a phone. */
/* The page is long and the contraindications must stay findable by Ctrl+F, so it
   is not folded. A plain index does the same job without hiding anything. */
.toc {
  max-width: calc(var(--measure) + 8ch);
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ink-line);
  text-align: left;   /* the hero centers its children; a list of links reads left */
}
.sec--light .toc { border-top-color: var(--line); }
.toc__label {
  margin: 0 0 1rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.sec--dark .toc__label { color: var(--accent-bright); }
.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 3rem;
  font-size: var(--fs-sm);
}
.toc__list li { break-inside: avoid; padding: 0.35rem 0; }
.toc__list a { color: var(--on-ink-muted); text-decoration-color: var(--ink-line); }
.toc__list a:hover { color: var(--on-ink); }
@media (max-width: 620px) { .toc__list { columns: 1; } }

/* Sticky header is 68px on desktop, 56px on a phone. */
.price-group, [id='how-to-read'], [id='paying'], [id='questions'], [id='prices'] { scroll-margin-top: 88px; }
@media (max-width: 768px) {
  .price-group, [id='how-to-read'], [id='paying'], [id='questions'], [id='prices'] { scroll-margin-top: 72px; }
}

/* Treatment cards: one per product, text only. No images — there are seven photos
   on this site and none of them is of a treatment. */
.tcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 0;
}
.tcard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.4rem 1.4rem;
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sec--dark .tcard { background: var(--ink-soft); border-color: var(--ink-line); color: var(--on-ink); }
.tcard:hover, .tcard:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgb(0 0 0 / .16); }
.tcard__cat {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.sec--dark .tcard__cat { color: var(--accent-bright); }
.tcard__name { margin: 0; font-family: var(--sans); font-weight: 600; font-size: var(--fs-h4); }
.tcard__tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}
.sec--dark .tcard__tag { background: rgb(143 199 173 / .14); color: var(--accent-bright); }
.tcard__note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.sec--dark .tcard__note { color: var(--on-ink-muted); }
.tcard__price {
  margin: auto 0 0;
  padding-top: 0.9rem;
  font-size: var(--fs-lead);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tcard__fv {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  font-size: var(--fs-caption);
  color: var(--accent);
  font-weight: 600;
}
.sec--dark .tcard__fv { border-top-color: var(--ink-line); color: var(--accent-bright); }
.tcard__fx {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--faint);
}
@media (max-width: 980px) { .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tcards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .tcard { transition: none; }
  .tcard:hover, .tcard:focus-visible { transform: none; }
}

.pg__lead { margin: 0 0 1.25rem; }
.pg__dl {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.85rem 1.5rem;
  margin: 0;
  max-width: var(--measure);
}
.pg__dl dt {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.25em;
}
.sec--dark .pg__dl dt { color: var(--accent-bright); }
.pg__dl dd { margin: 0; }
@media (max-width: 620px) {
  .pg__dl { grid-template-columns: 1fr; gap: 0.3rem; }
  .pg__dl dd { margin-bottom: 1.1rem; }
  .pg__dl dd:last-child { margin-bottom: 0; }
}
.pg__tablenote {
  max-width: var(--measure);
  margin: 1.25rem 0 0;
  font-size: var(--fs-caption);
  color: var(--faint);
}

.price-group__intro {
  max-width: var(--measure);
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.sec--dark .price-group__intro { color: var(--on-ink-muted); }

.price-group__rx {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--accent-wash);
  border-radius: var(--radius-img);
  font-size: var(--fs-caption);
  color: var(--muted);
}
.sec--dark .price-group__rx { background: var(--ink-soft); color: var(--on-ink-muted); }

.price-note {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  color: var(--muted);
  columns: 2;
  column-gap: 3rem;
}
.price-note p { break-inside: avoid; }
/* The short form is two lines, so columns would look broken. */
.price-note--compact { columns: 1; max-width: 74ch; }
@media (max-width: 720px) { .price-note { columns: 1; } }

/* ------------------------------------------------------------- suitability */

.fit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.fit__col h3 { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.sec--dark .fit__col h3 { border-bottom-color: var(--ink-line); }
.fit__mark { font-size: var(--fs-body); color: var(--accent); }
.fit__col--no .fit__mark { color: var(--faint); }
.fit ul { margin: 0; padding: 0; list-style: none; }
.fit li { position: relative; padding: 0 0 0.9rem 1.1rem; color: var(--muted); }
.sec--dark .fit li { color: var(--on-ink-muted); }
.fit li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 4px; height: 1px; background: var(--line-strong); }
@media (max-width: 720px) { .fit { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- steps */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.step {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 1rem;
  padding: 2rem 1.75rem 2rem 0;
  border-top: 1px solid var(--line);
}
.steps .step:nth-child(-n+3) { border-top-color: var(--line-strong); }
.sec--dark .step { border-top-color: var(--ink-line); }
.step__num { margin: 0; font-family: var(--sans); font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; font-size: var(--fs-h4); line-height: 1.4; color: var(--accent); }
.sec--dark .step__num { color: var(--accent-bright); }
.step__body h3 { margin: 0 0 0.3rem; }
.step__time { margin: 0 0 0.6rem; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.step__body p { margin: 0; color: var(--muted); }
.sec--dark .step__body p { color: var(--on-ink-muted); }
.steps__total { margin: 2rem 0 0; font-size: var(--fs-sm); color: var(--text); }
.sec--dark .steps__total { color: var(--on-ink); }

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } .steps .step:nth-child(-n+3) { border-top-color: var(--line); } .steps .step:nth-child(-n+2) { border-top-color: var(--line-strong); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } .step { padding-right: 0; } }

/* ---------------------------------------------------------------------- faq */

.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line); }
.sec--dark .faq { border-top-color: var(--ink-line); }
.sec--dark .faq__item { border-bottom-color: var(--ink-line); }

.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--text);
}
.sec--dark .faq__item summary { color: var(--on-ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__sign { position: relative; flex: 0 0 12px; height: 12px; margin-top: 0.4em; }
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; background: var(--accent); transition: transform .2s ease;
}
.faq__sign::before { inset: 5px 0 auto; height: 1px; }
.faq__sign::after { inset: 0 5px auto; width: 1px; height: 11px; }
.faq__item[open] .faq__sign::after { transform: scaleY(0); }
.faq__a { padding: 0 0 1.75rem; max-width: 68ch; color: var(--muted); }
.sec--dark .faq__a { color: var(--on-ink-muted); }
.faq__a p { margin: 0 0 0.9em; }
.faq__a p:last-child { margin: 0; }

/* ------------------------------------------------------------------ doctors */

.docs { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }

/* Credentials read first, portraits sit alongside. */
.doc {
  display: grid;
  /* One portrait per physician: the media column narrowed from 0.92fr when
     the 2x2 gallery left (2026-09-09) — a single 3:4 portrait at gallery
     width dwarfed the credentials it sits beside. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
}
.doc > * { min-width: 0; }

.doc__media { display: block; }
.doc__media figure { margin: 0; }
.doc__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 12%;
  border-radius: var(--radius-img);
  background: var(--cream-deep);
}

.doc__role { margin: 0 0 0.6rem; font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.doc__name { font-family: var(--sans); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.15rem); margin: 0 0 0.6rem; }
.doc__name span[lang='ko'] { font-size: max(0.875rem, 0.44em); color: var(--faint); letter-spacing: 0.04em; }
.doc__spec { margin: 0 0 0.4rem; color: var(--muted); font-size: var(--fs-body); }
.doc__licence { margin: 0 0 0.4rem; font-size: var(--fs-caption); color: var(--faint); }
.doc__quote {
  margin: 1.5rem 0; padding-left: 1.25rem; border-left: 2px solid var(--accent);
  font-family: var(--sans); font-size: var(--fs-h3); line-height: 1.5; color: var(--text);
}

.doc__creds { list-style: none; margin: 2rem 0 0; padding: 0; }
.doc__creds li {
  position: relative;
  padding: 0 0 0 1.35rem;
  margin-bottom: 1.1rem;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.7;
}
.doc__creds li:last-child { margin-bottom: 0; }
.doc__creds li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.sec--dark .doc__creds li { color: var(--on-ink-muted); }
.sec--dark .doc__creds li::before { background: var(--accent-bright); }

.doc__more { margin-top: 1.75rem; font-size: var(--fs-sm); }

@media (max-width: 860px) {
  .doc { grid-template-columns: 1fr; }
  .doc__media { order: -1; }
}
@media (max-width: 460px) {
  .doc__media { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
}

/* ── physician briefs (light surfaces) ── */

.briefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.briefs > * { min-width: 0; }
.brief { border-top: 1px solid var(--line-strong); padding-top: 1.75rem; }
.brief__media { margin: 0 0 1.5rem; }
.brief__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 12%;
  border-radius: var(--radius-img);
  background: var(--cream-deep);
}
.brief__role { margin: 0 0 0.5rem; font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.brief__name { font-family: var(--sans); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.15rem); margin: 0 0 0.75rem; }
.brief__name span[lang='ko'] { font-size: max(0.875rem, 0.5em); color: var(--faint); letter-spacing: 0.04em; }
.brief__body { margin: 0; color: var(--muted); }
.brief__meta { margin: 0.9rem 0 0; font-size: var(--fs-caption); color: var(--faint); }
.brief__more { margin: 1.1rem 0 0; font-size: var(--fs-sm); }
/* Three cards, so the fallback is one column rather than two — a 2 + 1 row
   leaves the third physician stranded on a row of his own. The portrait crop
   flips with the column count: a 3/4 portrait at full container width is
   taller than the viewport. */
@media (max-width: 900px) {
  .briefs { grid-template-columns: 1fr; }
  .brief__media img { aspect-ratio: 3 / 2; object-position: center 18%; }
}

/* --------------------------------------------------------------- references */

.refs { list-style: none; counter-reset: r; margin: 0; padding: 0; max-width: 820px; margin-inline: auto; }
.ref { counter-increment: r; padding: 1.75rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 1rem; }
/* A citation carries DOIs and journal names that do not break: without this the
   column is sized by its longest unbreakable word and the page scrolls at 320px. */
.ref > * { overflow-wrap: anywhere; }
.ref:first-child { border-top-color: var(--line-strong); }
.ref::before { content: '[' counter(r) ']'; font-variant-numeric: lining-nums tabular-nums; font-size: var(--fs-caption); color: var(--accent); letter-spacing: 0.04em; }
.ref > * { grid-column: 2; }
.ref__cite { margin: 0 0 0.6rem; font-size: var(--fs-sm); color: var(--text); }
.ref__what { margin: 0 0 0.6rem; color: var(--muted); }
.ref__limit { margin: 0 0 0.6rem; font-size: var(--fs-caption); color: var(--faint); }
.ref__limit span { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--fs-micro); color: var(--accent); margin-right: 0.4rem; }
.ref__ids { margin: 0; font-size: var(--fs-caption); color: var(--faint); }

/* --------------------------------------------------------------- devices */

/* Grouped by category, so the row count follows the clinic's own taxonomy instead
   of leaving one device stranded at the end of a four-column grid. */
.devcat + .devcat { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.devcat__title {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 1.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-h2-sm);
}
.sec--dark .devcat__title { border-bottom-color: var(--ink-line); }
.devcat__title span {
  font-family: var(--mono, var(--sans));
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.devgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
/* The device photographs are cut out on white, so the image panel is white and the
   description panel carries the warm ground. The reverse made every product look
   like it was sitting in a tinted box — which is what the light-section override
   used to do, against the intent stated right here. */
.dev {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--text);
}
/* The grid sits on a light section on /equipment, where a white card needs a
   hairline to read as a card at all. */
.sec--light .dev { box-shadow: 0 1px 0 var(--line), 0 0 0 1px var(--line); }
/* A device with no photograph keeps the card's proportions so the grid does not
   jump. Deliberately blank rather than a stock image we cannot vouch for. */
.dev__noimg {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--white);
  border-bottom: 1px dashed var(--line-strong);
}
.dev__noimg span {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.dev img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--white); padding: 1rem; width: 100%; }
.dev__body { flex: 1; padding: 1.25rem 1.25rem 1.5rem; border-top: 1px solid var(--line); background: var(--cream); }
.dev__cat { margin: 0 0 0.4rem; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.dev__name { margin: 0 0 0.15rem; font-size: var(--fs-h4); font-family: var(--sans); font-weight: 600; }
.dev__treats { margin: 0.7rem 0 0.6rem; font-size: var(--fs-caption); color: var(--text); }
.dev__treats span {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.dev__make { margin: 0 0 0.6rem; font-size: var(--fs-caption); color: var(--faint); }
.dev__desc { margin: 0; font-size: var(--fs-caption); color: var(--muted); line-height: 1.7; }
.dev__more { margin: 0.9rem 0 0; font-size: var(--fs-caption); font-weight: 600; }
.dev__more a { color: var(--accent); text-decoration-color: var(--accent-bright); }
@media (max-width: 1000px) { .devgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .devgrid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- figure */

.fig { margin: 2.5rem 0 0; }
.fig--center { margin-inline: auto; }
.fig img {
  width: 100%;
  max-width: var(--fig-max, 520px);
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-img);
  background: var(--white);
}
.sec--dark .fig img { background: var(--white); }
.fig figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--faint);
}

/* --------------------------------------------------------------- collage */

.collage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: start; }
.collage figure { margin: 0; }
/* No aspect-ratio: each photograph keeps its own proportions and nothing is cropped.
   The staggered top margins below supply the scatter the layout is after. */
.collage img { border-radius: var(--radius-img); width: 100%; height: auto; }
.collage figcaption { margin-top: 0.65rem; font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--faint); }
.collage--5 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .collage, .collage--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .collage, .collage--5 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- map / geo */

.map { border-radius: var(--radius-img); overflow: hidden; border: 1px solid var(--line); background: var(--cream-deep); }
.map iframe { display: block; width: 100%; height: clamp(320px, 45vw, 480px); border: 0; }

.geo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.75rem; }
/* Grid items default to min-width:auto, so a .table-scroll inside one is sized by
   the table's 620px min-width instead of scrolling. This is the fix. */
.geo > * { min-width: 0; }
.geo__wide { grid-column: span 2; }
@media (max-width: 760px) {
  .geo { grid-template-columns: 1fr; }
  /* Without this reset the span creates an implicit second column and the page
     scrolls sideways on a phone. */
  .geo__wide { grid-column: auto; }
}

/* ------------------------------------------------------------------ booking */

.book { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.book > * { min-width: 0; }
.book__aside { padding: 2rem; background: var(--white); border-radius: var(--radius-card); border: 1px solid var(--line); }
.sec--dark .book__aside { background: var(--ink-soft); border-color: var(--ink-line); }
.book__lead { margin: 0; font-family: var(--sans); font-weight: 600; font-size: var(--fs-h2-sm); }
.book__role { margin: 0 0 1.5rem; font-size: var(--fs-caption); letter-spacing: 0.06em; color: var(--faint); }
.book__facts { margin: 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.book__facts dt { padding: 0.7rem 0; border-top: 1px solid var(--line); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.book__facts dd { margin: 0; padding: 0.7rem 0; border-top: 1px solid var(--line); color: var(--muted); }
.sec--dark .book__facts dt, .sec--dark .book__facts dd { border-top-color: var(--ink-line); }
.book__small { margin: 1.5rem 0 0; font-size: var(--fs-caption); color: var(--faint); }

.book__form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
.field { margin-bottom: 1.75rem; }
.field--full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 0.4rem; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.req { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); vertical-align: 0.35em; margin-left: 0.35rem; }

/* underline inputs — no boxes anywhere in this form */
/* 42px on a phone, and a finger is not 42px. The underline style stays; only the
   box the finger has to hit grows. */
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  background: transparent;
  padding: 0.55rem 0;
  font-family: var(--sans);
  font-size: var(--fs-lead);
  color: var(--text);
  border-radius: 0;
  appearance: none;
  transition: border-color .2s ease;
}
.field textarea { resize: vertical; line-height: 1.7; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 0.5rem center, right 0.25rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: #b23b2e; }
.field__error { margin: 0.4rem 0 0; font-size: var(--fs-label); color: #b23b2e; }

.book__form .btn-row { grid-column: 1 / -1; margin-top: 0.5rem; }
.book__consent { grid-column: 1 / -1; margin: 0 0 0.5rem; font-size: var(--fs-caption); color: var(--faint); }
.book__fallback { grid-column: 1 / -1; margin: 1.5rem 0 0; font-size: var(--fs-caption); color: var(--faint); }

@media (max-width: 860px) {
  .book { grid-template-columns: 1fr; }
  .book__form { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------------- related appendix */
/* The page's reference list: an appendix after the last chapter, not a
   section — no tone slot, no sectionHeader. It sits on the footer's surface
   with a hairline above, so the page closes into one quiet dark zone. */

.related-apx { background: var(--ink); color: var(--on-ink); border-top: 1px solid var(--ink-line); padding: 2.1rem 0 2.6rem; }
.related-apx__title { font-family: var(--sans); font-size: var(--fs-body); font-weight: 600; margin: 0 0 0.8rem; }
.related-apx__list { list-style: none; margin: 0; padding: 0; }
.related-apx__item { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.35rem 0; }
.related-apx__kicker { flex: 0 0 9em; font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright); }
.related-apx__link { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--ink-line); text-underline-offset: 3px; }
.related-apx__link:hover { color: var(--accent-bright); }
@media (max-width: 560px) {
  .related-apx__item { flex-wrap: wrap; gap: 0.1rem 0.7rem; }
  .related-apx__kicker { flex-basis: 100%; }
}

/* -------------------------------------------------------------- breadcrumbs */

.crumbs { margin-bottom: 2rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--line-strong); }
.crumbs a { text-decoration: none; color: var(--faint); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current='page'] { color: var(--muted); }
.sec--dark .crumbs a, .sec--dark .crumbs ol { color: var(--on-ink-muted); }

/* ------------------------------------------------------------------- prose */

.statline {
  max-width: var(--measure);
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  font-size: var(--fs-lead);
  line-height: var(--lh-tight);
  color: var(--muted);
}
.sec-head + .statline { margin-top: -0.75rem; }
.statline:last-child { margin-bottom: 0; margin-top: clamp(2rem, 4vw, 2.75rem); }
.statline strong { color: var(--text); font-weight: 500; }
.sec--dark .statline { color: var(--on-ink-muted); }
.sec--dark .statline strong { color: var(--on-ink); }

.nowrap { white-space: nowrap; }

.prose { max-width: var(--measure); }
.prose--center { margin-inline: auto; }
.prose h3 { margin: 2.5rem 0 0.9rem; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.2rem; color: var(--muted); }
.prose li { margin-bottom: 0.5em; }
.prose > p { color: var(--muted); }
.sec--dark .prose > p, .sec--dark .prose li { color: var(--on-ink-muted); }
.prose .callout {
  margin: 2rem 0;
  padding: 1.35rem 1.5rem;
  background: var(--accent-wash);
  border-radius: var(--radius-img);
  font-size: var(--fs-sm);
  color: var(--text);
}
.sec--dark .prose .callout { background: var(--ink-soft); color: var(--on-ink); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- floating contact */

.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.4rem 0.85rem 1.1rem;
  border-radius: 999px;
  background: #25d366;             /* WhatsApp brand green — deliberately not the
                                      site accent, because it identifies the app.
                                      Each channel keeps its own brand color via
                                      the .fab--* modifiers below. */
  color: #fff;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 6px 20px rgb(0 0 0 / .22);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.fab:hover,
.fab:focus-visible {
  background: #1fb757;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgb(0 0 0 / .3);
}
.fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fab__icon { flex: 0 0 auto; }
.fab--line { background: #06c755; } /* LINE brand green */
.fab--line:hover, .fab--line:focus-visible { background: #05b34c; }

@media (max-width: 560px) {
  /* Icon only on a phone: a pill with a label eats the corner of a small screen. */
  .fab { padding: 0.9rem; gap: 0; }
  .fab__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fab { transition: none; }
  .fab:hover, .fab:focus-visible { transform: none; }
}
@media print { .fab { display: none; } }

/* ------------------------------------------------------------------- footer */

.site-foot { background: var(--black); color: var(--on-ink-muted); padding-block: clamp(3.5rem, 7vw, 6rem) 5rem; font-size: var(--fs-sm); }
.foot__grid { display: grid; grid-template-columns: 1.15fr 1fr 1.5fr; gap: 2.5rem 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--ink-line); }
.foot__grid > * { min-width: 0; }
.foot__links--two { columns: 2; column-gap: 2rem; }
.foot__links--two li { break-inside: avoid; }
.foot__label { margin: 0 0 1rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-bright); }
.foot__col p { margin: 0 0 0.5rem; line-height: 1.7; }
.foot__strong { color: var(--on-ink); font-weight: 500; }
.foot__note { margin-top: 1rem; color: var(--faint); font-size: var(--fs-caption); }
.foot__links { list-style: none; margin: 0; padding: 0; }
.foot__links li { padding: 0.3rem 0; }
/* Footer links carried no affordance at all: undecorated, and sitting above a
   caption span they read as headings rather than links. */
.foot__links a {
  text-decoration: underline;
  text-decoration-color: #454b54;
  text-underline-offset: 3px;
}
.foot__links a:hover { color: var(--accent-bright); text-decoration-color: currentColor; }
.foot__links span { display: block; font-size: var(--fs-caption); color: var(--faint); }
.foot__links span.foot__chans {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-top: 0.35rem;
}
.foot__chans a { color: var(--muted); text-decoration-color: #454b54; }

.foot__disclosure { padding-block: 2.5rem 3rem; font-size: var(--fs-small); line-height: 1.8; color: var(--muted); max-width: 90ch; }
.foot__disclosure strong { color: var(--on-ink-muted); }
.foot__dates { margin-top: 1.5rem; color: var(--faint); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .foot__grid { grid-template-columns: repeat(2, 1fr); }
  .foot__col--wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot__grid { grid-template-columns: 1fr; }
  .foot__links--two { columns: 1; }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .rules--3 { grid-template-columns: repeat(2, 1fr); }
  .rules--3 .rule:nth-child(-n+3) { border-top-color: var(--line); }
  .rules--3 .rule:nth-child(-n+2) { border-top-color: var(--line-strong); }
}
@media (max-width: 620px) {
  .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; }
  .rules--2, .rules--3 { grid-template-columns: 1fr; }
  .rule { padding-right: 0; }
  .hero__facts { gap: 1.25rem 2rem; }
}

@media print {
  .site-head, .site-nav, .btn-row, .book__form { display: none; }
  .sec { padding-block: 1.5rem; break-inside: avoid; }
  .sec--dark, .sec--black, .site-foot { background: #fff !important; color: #000 !important; }
  .faq__item[open] .faq__a, .faq__a { display: block !important; }
}

/* The medical-review strip — one quiet line under the header on medical pages,
   rendered only once a physician has signed off (site.json → medicalReview). */
.review-strip { background: var(--accent-wash); border-bottom: 1px solid var(--line); }
.review-strip p { margin: 0 auto; padding: 0.55rem 1.25rem; font-size: var(--fs-micro, 0.875rem); color: var(--muted); }
.review-strip a { color: var(--accent); }

/* ------------------------------------------------------ fallback-link marks
   Injected by markFallbackLinks (lib/chrome.mjs) on non-default locales only:
   a body link whose target route is not translated yet points at the English
   page, and the EN badge says so before the click. Never appears in the
   default locale's output. */
.lang-fb {
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.55;
  margin-left: 0.3em;
  vertical-align: super;
}
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------- hero evidence plate */
/* The hero is a report cover: claim and abstract on the left, one uncropped
   photograph of the actual clinic on the right, framed with the same hairline
   family as the section rules. No overlay, no crop — the photograph is
   evidence, not mood. Below 900px the plate follows the text: the claim leads,
   the evidence follows, and the first mobile viewport stays light. */
.sec--hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sec--hero .hero { grid-column: 1; min-width: 0; }
.hero-fig { grid-column: 2; grid-row: 1; margin: 0; }
.hero-fig img { width: 100%; height: auto; display: block; border-radius: var(--radius-img); border: 1px solid var(--ink-line); }
@media (max-width: 900px) {
  .sec--hero .wrap { display: block; }
  .hero-fig { margin: 2.75rem 0 0; }
}

/* The LINE + email submits fit on ONE row in ja/zh-Hant (short labels), and
   that row's right edge ran ~10px under the floating button's column at
   375-390px. Reserve the fab's lane inside the form so the pair wraps —
   en already stacks (long labels) and is unaffected. */
@media (max-width: 560px) {
  .book__form .btn-row { max-width: calc(100% - 72px); }
}

/* ------------------------------------------------- mobile table modes */
/* table() picks one of three phone treatments (see lib/components.mjs):
   scroll (default machinery above), cards, natural. Both non-scroll modes
   also unpin the first column and drop the scroll shadows — there is
   nothing to scroll. Desktop render is identical for all three.
   768, not 700: the modes exist so that no phone or portrait tablet scrolls a
   table sideways — at 701-768 the en price tables overflowed by 326px. */
@media (max-width: 768px) {
  .table-scroll--natural,
  .table-scroll--cards { overflow: visible; background: none; }
  .table-scroll--natural .tbl,
  .table-scroll--cards .tbl { min-width: 0; }
  .table-scroll--natural .tbl thead th:first-child,
  .table-scroll--natural .tbl tbody th:first-child,
  .table-scroll--cards .tbl thead th:first-child,
  .table-scroll--cards .tbl tbody th:first-child { position: static; box-shadow: none; background: transparent; }

  .table-scroll--cards .tbl caption { display: block; width: 100%; }
  .table-scroll--cards .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-scroll--cards .tbl,
  .table-scroll--cards .tbl tbody,
  .table-scroll--cards .tbl tbody tr,
  .table-scroll--cards .tbl tbody th,
  .table-scroll--cards .tbl tbody td { display: block; }
  .table-scroll--cards .tbl tbody tr {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin: 0 0 0.9rem;
    background: var(--white);
  }
  .table-scroll--cards .tbl tbody tr:nth-child(even) { background: var(--white); }
  .sec--dark .table-scroll--cards .tbl tbody tr,
  .sec--dark .table-scroll--cards .tbl tbody tr:nth-child(even) { border-color: var(--ink-line); background: var(--ink-soft); }
  .table-scroll--cards .tbl tbody th:first-child { min-width: 0; max-width: none; padding: 0 0 0.5rem; font-size: var(--fs-body); }
  .table-scroll--cards .tbl tbody th,
  .table-scroll--cards .tbl tbody td { border-bottom: 0; }
  .table-scroll--cards .tbl tbody td { display: flex; gap: 0.9rem; padding: 0.3rem 0; }
  .table-scroll--cards .tbl td.num { text-align: left; }
  .table-scroll--cards .tbl tbody td::before {
    content: attr(data-l);
    flex: 0 0 6.5em;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
    padding-top: 0.3em;
  }
  .sec--dark .table-scroll--cards .tbl tbody td::before { color: var(--on-ink-faint); }
  .table-scroll--cards .tbl tbody tr:last-child { margin-bottom: 0; }
  .table-scroll--cards .tbl tbody tr.is-flagship { background: var(--accent-wash); }
  .sec--dark .table-scroll--cards .tbl tbody tr.is-flagship { background: rgb(143 199 173 / .1); }
}

/* ---------------------------------------------- mobile table densification */
/* Desktop cell metrics (17px, 1.15rem padding) made a phone row ~200px tall
   and pushed every natural width 20-25% wider than it needs to be. Up to
   768px every table drops to the 14px floor (the ≤768px token bump keeps
   micro/label at 14px too — nothing under 14px on a phone). */
@media (max-width: 768px) {
  .tbl tbody th, .tbl tbody td { padding: 0.6rem 0.5rem; font-size: var(--fs-caption); line-height: 1.5; }
  .tbl thead th { padding: 0 0.5rem 0.45rem; }
  .tbl tbody th { font-size: var(--fs-caption); }
  .tbl--wide1 tbody th { min-width: 0; }
  .tbl__fx, .tbl__meta { font-size: var(--fs-micro); }
  .tbl td.num:last-child strong { font-size: var(--fs-small); }
  .table-scroll--natural .tbl { width: 100%; }

  /* Compact price cards (.price-group scopes the override of the generic
     card look): row = flex — the treatment grows left, the payable sits
     right on the SAME line, and the three tier cells wrap onto an inline
     strip below. All five columns survive; the withheld dash (definition of
     listDisputed) stays visible in the strip. */
  .price-group .table-scroll--cards .tbl tbody tr,
  .sec--dark .price-group .table-scroll--cards .tbl tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0.75rem 0;
    margin: 0;
    background: none;
  }
  .sec--dark .price-group .table-scroll--cards .tbl tbody tr { border-bottom-color: var(--ink-line); }
  .price-group .table-scroll--cards .tbl tbody tr.is-flagship,
  .sec--dark .price-group .table-scroll--cards .tbl tbody tr.is-flagship { border-radius: 8px; padding-inline: 0.6rem; }
  .price-group .table-scroll--cards .tbl tbody tr.is-flagship { background: var(--accent-wash); }
  .sec--dark .price-group .table-scroll--cards .tbl tbody tr.is-flagship { background: rgb(143 199 173 / .1); }
  .price-group .table-scroll--cards .tbl tbody th:first-child,
  html[lang='en'] .sec--light .price-group .table-scroll--cards .tbl tbody th:first-child,
  html[lang='en'] .sec--dark .price-group .table-scroll--cards .tbl tbody th:first-child,
  .sec--light .price-group .table-scroll--cards .tbl tbody th:first-child,
  .sec--dark .price-group .table-scroll--cards .tbl tbody th:first-child {
    /* The v1 pinned-first-column tier (sticky + opaque backdrop, tone- and
       lang-prefixed) outranks the generic card neutralizer for price groups;
       re-neutralize at every one of its specificities or the flagship name
       renders on an opaque box. */
    position: static;
    background: transparent;
    box-shadow: none;
    order: 1;
    /* basis 0: the name contributes no intrinsic width to line 1, so the
       payable ALWAYS fits beside it (the name wraps inside its share instead
       of pushing the price down a line). */
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0.75rem 0.2rem 0;
    font-size: var(--fs-caption);
  }
  .price-group .table-scroll--cards .tbl tbody td:last-child {
    order: 2;
    flex: 0 1 auto;
    max-width: 48%;
    margin-left: auto;
    display: block;
    padding: 0;
    text-align: right;
    font-size: var(--fs-caption);
  }
  /* No label on the payable: "KRW" plus the strong figure already say what it
     is, and the generic card label ate half of line 1 (the name column was
     squeezed into overlapping the label). */
  .price-group .table-scroll--cards .tbl tbody td:last-child::before { content: none; }
  /* Full-width zero-height flex item ordered between the payable (2) and the
     tier strip (4): forces the strip onto its own line — without it the first
     tier cell climbs up beside the payable when line 1 has room. */
  .price-group .table-scroll--cards .tbl tbody tr::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  .price-group .table-scroll--cards .tbl tbody td:last-child strong { font-size: var(--fs-small); }
  .price-group .table-scroll--cards .tbl tbody td:nth-child(2),
  .price-group .table-scroll--cards .tbl tbody td:nth-child(3),
  .price-group .table-scroll--cards .tbl tbody td:nth-child(4) {
    order: 4;
    display: inline-block;
    flex: 0 0 auto;
    padding: 0.1rem 0 0;
    margin-right: 1.1rem;
    font-size: var(--fs-micro);
    color: var(--muted);
    text-align: left;
  }
  .sec--dark .price-group .table-scroll--cards .tbl tbody td:nth-child(2),
  .sec--dark .price-group .table-scroll--cards .tbl tbody td:nth-child(3),
  .sec--dark .price-group .table-scroll--cards .tbl tbody td:nth-child(4) { color: var(--on-ink-muted); }
  .price-group .table-scroll--cards .tbl tbody td:nth-child(2)::before,
  .price-group .table-scroll--cards .tbl tbody td:nth-child(3)::before,
  .price-group .table-scroll--cards .tbl tbody td:nth-child(4)::before {
    content: attr(data-l) ' ';
    font-size: var(--fs-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .sec--dark .price-group .table-scroll--cards .tbl tbody td:nth-child(2)::before,
  .sec--dark .price-group .table-scroll--cards .tbl tbody td:nth-child(3)::before,
  .sec--dark .price-group .table-scroll--cards .tbl tbody td:nth-child(4)::before { color: var(--on-ink-faint); }
  .price-group .table-scroll--cards .tbl tbody td:nth-child(2)::before { content: attr(data-l) ' '; }
}