/* Public site, design B (Navy contrast, Claude Design 2026-10-31: suite docs/design/site-redesign/export).
   Values come from web-kit / DESIGN.md tokens; the marketing scale below is the only addition. Page parts that
   belong to one page live in why.css, growth.css, docs.css and codex.css. */
:root {
  --font-size-mkt-hero: clamp(40px, 5.4vw, 76px);
  --font-size-mkt-close: clamp(32px, 4.2vw, 60px);
  --font-size-mkt-stat: clamp(44px, 4.6vw, 68px);
  --font-size-mkt-h2: clamp(30px, 3.4vw, 48px);
  --font-size-mkt-h3: clamp(22px, 1.8vw, 26px);
  --font-size-mkt-lead: clamp(17px, 1.4vw, 20px);
  --space-mkt-section: clamp(96px, 11vw, 160px);
  --space-mkt-band: clamp(72px, 9vw, 128px);
  --space-mkt-gutter: clamp(20px, 5.5vw, 80px);
  --layout-mkt-max: 1440px;
  --size-mkt-gnb: 72px;
  --size-mkt-cta: 52px;
  --shadow-mkt-shot: 0 32px 80px -32px rgba(19, 26, 46, 0.45);
  --shadow-mkt-card: 0 24px 64px -32px rgba(19, 26, 46, 0.35);
}
/* The public site keeps design B until it is redesigned in its turn: the app screens took design C first
   (2026-11-04), and these web-kit tokens changed with it, so the site pins their design B values here. */
:root {
  --color-action-soft: #e8edfc;
  --color-action-line: #d6defa;
  --color-bg: #f6f7fb;
  --color-surface-sunk: #eef1f6;
  --color-line: #e1e5ee;
  --color-line-soft: #eef1f6;
  --color-line-field: #8b92a5;
  --color-ink: #131a2e;
  --color-ink-secondary: #384057;
  --color-ink-muted: #5c6478;
  --color-pri-line: #b7c3f3;
  --color-nav-bg: var(--color-brand-navy);
  --color-nav-badge-ink: #131a2e;
  --color-nav-ink: #e3e4f7;
  --color-nav-muted: #c9cbf0;
  --color-nav-version: #a9abdc;
  --color-nav-line: rgba(255, 255, 255, 0.14);
  --color-nav-hover: rgba(255, 255, 255, 0.1);
  --color-nav-current: rgba(255, 255, 255, 0.12);
  --color-partner-soft: #e2f3f3;
  --color-partner-line: #8ccfd2;
  --color-scrim: rgba(19, 26, 46, 0.48);
  --color-scrim-light: rgba(19, 26, 46, 0.32);
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(19, 26, 46, 0.06);
  --shadow-2: 0 8px 24px -8px rgba(19, 26, 46, 0.16), 0 1px 3px rgba(19, 26, 46, 0.08);
  --shadow-3: 0 24px 64px -16px rgba(19, 26, 46, 0.4);
  --shadow-toast: 0 12px 32px -12px rgba(19, 26, 46, 0.28), 0 1px 3px rgba(19, 26, 46, 0.1);
  --shadow-tip: 0 8px 24px -8px rgba(19, 26, 46, 0.35), 0 1px 3px rgba(19, 26, 46, 0.2);
  --shadow-panel: -16px 0 48px -16px rgba(19, 26, 46, 0.35);
  --shadow-drawer: 16px 0 40px -12px rgba(19, 26, 46, 0.45);
}
html { scroll-padding-top: calc(var(--site-gnb-height, var(--size-mkt-gnb)) + var(--space-6)); }
body { margin: 0; overflow-x: clip; background: var(--color-surface); color: var(--color-ink); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
figure, blockquote, dl, dd { margin: 0; }
a { color: var(--color-action-text); }
a:hover { color: var(--color-action-hover); }
button, summary, input { font: inherit; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: var(--font-weight-semibold); text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: var(--font-size-mkt-hero); line-height: 1.12; letter-spacing: -0.03em; }
h2 { font-size: var(--font-size-mkt-h2); line-height: 1.2; letter-spacing: -0.025em; }
h3 { font-size: var(--font-size-mkt-h3); line-height: 1.35; letter-spacing: -0.015em; }
/* The copy's line breaks (\n) are for wide screens; phones let text-wrap: balance place them, so no word is left
   alone on a line of its own (slop audit 2026-11-03: a Russian title ran to five lines at 320px). */
@media (min-width: 600px) { h1, h2, h3 { white-space: pre-line; } }
/* Chinese, Japanese and Thai put no spaces between words, so a dropped break would show as a stray space on phones;
   their titles keep the copy's breaks at every width (code review 2026-11-03). */
:is(h1, h2, h3):is(:lang(ja), :lang(zh), :lang(th)) { white-space: pre-line; }
p { line-height: 1.65; text-wrap: pretty; }
/* Long Russian, Kazakh and Mongolian words in big headings break with a hyphen on phones (pages carry lang). */
@media (max-width: 479px) { h1, h2 { hyphens: auto; } }
:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.navy :focus-visible { outline-color: var(--color-ink-inverse); }
.navy .language ul :focus-visible { outline-color: var(--color-focus); }
.wrap { width: 100%; max-width: var(--layout-mkt-max); margin-inline: auto; padding-inline: var(--space-mkt-gutter); }
.skip { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 50; padding: var(--space-3); background: var(--color-surface); color: var(--color-ink); transform: translateY(-150%); }
.skip:focus { transform: none; }
.meta { font-size: var(--font-size-caption); line-height: 1.6; color: var(--color-ink-muted); }
.icon { flex: none; width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Navy surfaces: the header, page heads, the numbers band and the closing band. */
.navy { background: var(--color-brand-navy); color: var(--color-ink-inverse); }
.navy :where(a:not(.btn)), .navy :where(a:not(.btn)):hover { color: var(--color-ink-inverse); }
.eyebrow { font-size: var(--font-size-body); font-weight: var(--font-weight-medium); line-height: 1.5; color: var(--color-action-text); }
.navy .eyebrow { color: var(--color-nav-muted); }
.lead { font-size: var(--font-size-mkt-lead); line-height: 1.65; color: var(--color-ink-secondary); }
.navy .lead { color: var(--color-nav-ink); }

/* Buttons: one filled action per surface, the other outlined. On Navy the fill is white. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--size-mkt-cta); padding: var(--space-3) var(--space-7, 28px); border: 1px solid var(--color-action); border-radius: var(--radius-md); background: var(--color-action); color: var(--color-action-ink); font-size: var(--font-size-body-lg); font-weight: var(--font-weight-medium); line-height: 1.3; text-align: center; text-decoration: none; transition: background var(--motion-duration-fast) var(--motion-easing-standard); }
.btn:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); color: var(--color-action-ink); }
.btn-outline { background: transparent; border-color: var(--color-line-strong); color: var(--color-ink); }
.btn-outline:hover { background: var(--color-bg); border-color: var(--color-line-strong); color: var(--color-ink); }
.btn-sm { min-height: 44px; padding: 0 var(--space-5); font-size: var(--font-size-body); }
.navy .btn { background: var(--color-surface); border-color: var(--color-surface); color: var(--color-action-text); }
.navy .btn:hover { background: var(--color-action-soft); border-color: var(--color-action-soft); color: var(--color-action-text); }
.navy .btn-outline { background: transparent; border-color: var(--color-nav-muted); color: var(--color-ink-inverse); }
.navy .btn-outline:hover { background: var(--color-nav-hover); border-color: var(--color-nav-muted); color: var(--color-ink-inverse); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); max-width: 480px; }
.actions .btn { flex: 1 1 180px; }
.actions .btn-outline { flex-basis: 140px; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--font-size-body); font-weight: var(--font-weight-medium); text-underline-offset: 4px; }

/* Header: Navy, 72px. Wide screens show the menu inline; narrow ones fold it into ≡. */
.gnb { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--color-nav-line); container-type: inline-size; }
.gnb-inner { min-height: var(--size-mkt-gnb); display: flex; align-items: center; gap: var(--space-10); }
.brand { flex: none; display: flex; padding-block: var(--space-3); }
.brand img { width: auto; height: 26px; }
.nav-links { display: flex; align-items: stretch; align-self: stretch; gap: var(--space-8); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); }
.gnb .nav-links a { display: flex; align-items: center; color: var(--color-nav-ink); text-decoration: none; }
.gnb .nav-links a:hover { color: var(--color-ink-inverse); }
.gnb .nav-links a[aria-current] { color: var(--color-ink-inverse); box-shadow: inset 0 -3px 0 var(--color-brand-green); }
.auth { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.gnb .login, .gnb .signup { min-height: var(--size-control-md); padding: 0 var(--space-4); display: inline-flex; align-items: center; border-radius: var(--radius-md); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); text-decoration: none; white-space: nowrap; }
.gnb .login { border: 1px solid var(--color-nav-muted); color: var(--color-ink-inverse); }
.gnb .login:hover { background: var(--color-nav-hover); color: var(--color-ink-inverse); }
.gnb .signup { background: var(--color-surface); color: var(--color-action-text); }
.gnb .signup:hover { background: var(--color-action-soft); color: var(--color-action-text); }
.language { position: relative; }
.language summary { min-height: var(--size-control-md); padding: 0 var(--space-3); display: flex; align-items: center; gap: 6px; border-radius: var(--radius-md); color: var(--color-nav-ink); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); white-space: nowrap; }
.language summary:hover, .language[open] summary { background: var(--color-nav-hover); color: var(--color-ink-inverse); }
.language ul { position: absolute; top: calc(100% + var(--space-2)); right: 0; width: 360px; max-width: calc(100vw - var(--space-8)); max-height: calc(100dvh - 96px); overflow: auto; margin: 0; padding: var(--space-2); list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.lang-list a { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); min-height: var(--size-control-md); padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-body); color: var(--color-ink); text-decoration: none; }
.lang-check { flex: none; width: 18px; height: 18px; }
.language .lang-list a:hover { background: var(--color-surface-sunk); color: var(--color-ink); }
.lang-list a[aria-current] { font-weight: var(--font-weight-semibold); }
.lang-list a[aria-current] .icon { color: var(--color-action-text); }
.menu { display: none; }
.menu summary { width: var(--size-control-md); height: var(--size-control-md); display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-ink-inverse); }
.menu summary:hover, .menu[open] summary { background: var(--color-nav-hover); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - var(--size-mkt-gnb)); overflow: auto; padding: var(--space-2) var(--space-mkt-gutter) var(--space-5); background: var(--color-brand-navy); border-top: 1px solid var(--color-nav-line); border-bottom: 1px solid var(--color-nav-line); }
.menu-panel nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--color-nav-line); font-size: var(--font-size-body-lg); font-weight: var(--font-weight-medium); color: var(--color-ink-inverse); text-decoration: none; }
.menu-panel nav a[aria-current] { box-shadow: inset 3px 0 0 var(--color-brand-green); padding-left: var(--space-3); }
.menu-auth { display: none; gap: var(--space-2); padding-top: var(--space-4); }
.menu-auth a { flex: 1; }
.menu-panel .label { padding: var(--space-4) 0 var(--space-2); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); color: var(--color-nav-muted); }
.menu-panel .lang-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
/* Reserve a leading check slot so language names stay aligned in both menus. */
.menu-panel .lang-list a { justify-content: flex-start; padding: 0 var(--space-3) 0 0; color: var(--color-nav-ink); }
.menu-panel .lang-list a[aria-current], .menu-panel .lang-list a[aria-current] .icon { color: var(--color-ink-inverse); }
/* Five menu items (2026-11-02): below 1280px the gaps narrow and the language button keeps its globe only (its name
   stays in aria-label); below 1080px the menu folds into ≡. Measured so no label wraps in any of the 12 languages. */
@media (max-width: 1279px) {
  .gnb-inner, .nav-links { gap: var(--space-6); }
  .language summary > span { display: none; }
}
@media (max-width: 1079px) {
  .gnb-inner { position: relative; gap: var(--space-4); }
  .gnb .nav-links, .gnb .language { display: none; }
  .menu { display: block; }
}
/* Narrow phones keep the sign-up button; logging in moves into ≡ (Russian labels run long). */
@media (max-width: 479px) {
  .auth .login { display: none; }
  .menu-auth { display: flex; }
}
@media (max-width: 359px) {
  .gnb-inner { gap: var(--space-3); }
  .gnb .signup { padding: 0 var(--space-3); }
}
/* CSS zoom reduces the header's available width before viewport media queries change. Keep the same
   compact controls based on that width; the login link remains in the menu. */
@container (max-width: 479px) {
  .auth .login { display: none; }
  .menu-auth { display: flex; }
}
@container (max-width: 359px) {
  .gnb-inner { gap: var(--space-3); padding-inline: var(--space-5); }
  .gnb .signup { padding-inline: var(--space-3); }
}

/* Page head on Navy. --overlap leaves room for the card row that rises into it. */
.page-head { padding-block: clamp(56px, 8vw, 112px) clamp(48px, 6vw, 80px); }
.page-head .wrap { display: flex; flex-direction: column; gap: var(--space-6); }
.page-head.overlap { padding-bottom: clamp(150px, 15vw, 200px); }
.rise { position: relative; margin-top: calc(-1 * clamp(110px, 11vw, 150px)); }

/* Sections and their heads. */
.section { padding-top: var(--space-mkt-section); }
.section-end { padding-bottom: var(--space-mkt-section); }
.section-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-bottom: clamp(40px, 5vw, 64px); text-align: center; }
.section-head.start { align-items: flex-start; text-align: left; }

/* Home hero: the Korean hospital's problem first — the question, two actions, then the five difficulties, each a link
   to its part of the challenges page (user request 2026-11-02). What ailix is comes after, under #core. */
.hero { padding-block: clamp(56px, 8vw, 112px) clamp(56px, 7vw, 96px); }
.hero-stack { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
/* Phones keep the filled action inside the first screen (320×640 in Russian, the longest title). */
@media (max-width: 599px) {
  .hero { padding-top: var(--space-10); }
  .hero-copy { gap: var(--space-5); }
}
/* The two actions take their words' width (long in most languages) and, on phones, stack at full width. */
.hero .actions { max-width: none; }
.hero .actions .btn { flex: 0 1 auto; min-width: 200px; }
@media (max-width: 599px) { .hero .actions .btn { flex-basis: 100%; } }
/* The five difficulties (Korean) or what gets easier (other languages), each a link to the international page. */
.hero-pains { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 600px) {
  .hero-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-pains li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .hero-pains { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero-pains li:last-child:nth-child(odd) { grid-column: auto; }
}
.hero-pains a { height: 100%; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-nav-line); border-radius: var(--radius-lg); background: var(--color-nav-hover); text-decoration: none; transition: background var(--motion-duration-fast) var(--motion-easing-standard); }
.hero-pains a:hover { background: var(--color-nav-current); }
.hero-pain-label { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-size-label); font-weight: var(--font-weight-medium); color: var(--color-nav-ink); }
.hero-pain-text { font-size: 16px; font-weight: var(--font-weight-medium); line-height: 1.55; overflow-wrap: anywhere; }
.shot { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
figcaption { margin-top: var(--space-3); font-size: var(--font-size-caption); line-height: 1.5; color: var(--color-ink-muted); }

/* What ailix is: the real consultation screen, then the three cards. Under 600px the whole screen would show at a
   quarter of its size, so the phone sees the consultation's detail column only (x 757–1400, from y 185). */
.service-shot { margin-bottom: clamp(40px, 5vw, 64px); }
.service-shot .shot { box-shadow: var(--shadow-mkt-shot); }
.service-shot .shot img { width: 100%; aspect-ratio: 1400 / 760; object-fit: cover; object-position: top left; }
.service-shot figcaption { text-align: center; }
@media (max-width: 599px) {
  .service-shot .shot { position: relative; aspect-ratio: 643 / 470; }
  .service-shot .shot img { position: absolute; max-width: none; width: 217.729%; left: -117.729%; top: -39.362%; aspect-ratio: auto; }
}

/* Three cards, side by side and in no order (no numbers): one place of a real screen at its own size, the
   difficulties it answers and one sentence each. The frame is at most 300px wide (build-site.mjs CARD_SHOTS). */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-6); }
.card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
.card-media { padding: var(--space-6) var(--space-6) 0; background: var(--color-bg); }
.crop { position: relative; width: min(100%, 300px); margin-inline: auto; aspect-ratio: var(--ar); overflow: hidden; border: 1px solid var(--color-line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--color-surface); }
.crop img { position: absolute; max-width: none; width: var(--w); left: var(--x); top: var(--y); }
@media (max-width: 599px) { .card-media { padding: var(--space-4) var(--space-4) 0; } }
@media (max-width: 359px) {
  .card-media { padding: var(--space-3) 0 0; }
  .crop { border-inline: 0; border-radius: 0; }
}
.card-body { padding: 28px; display: flex; flex-direction: column; gap: var(--space-3); }
.card-pains { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.card-body p { font-size: 16px; color: var(--color-ink-secondary); }
.cards + .meta { margin-top: var(--space-5); text-align: center; }

/* Flow: three numbered steps, each with who does it. */
.flow { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10) var(--space-6); }
.flow li { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.flow-mark { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: center; gap: var(--space-3); width: 100%; }
.flow-mark b { grid-column: 2; grid-row: 1; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--color-brand-navy); color: var(--color-ink-inverse); font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); }
.flow-mark::before, .flow-mark::after { content: ""; grid-row: 1; height: 2px; background: var(--color-line-strong); }
.flow-mark::before { grid-column: 1; }
.flow-mark::after { grid-column: 3; margin-right: calc(-1 * var(--space-6)); }
.flow li:last-child .flow-mark b { background: var(--color-brand-green); color: var(--color-brand-navy); }
.flow li:first-child .flow-mark::before, .flow li:last-child .flow-mark::after { display: none; }
.flow .role-chip { align-self: center; }
@media (max-width: 959px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-mark::before, .flow-mark::after { display: none; }
}
.role-chip { align-self: flex-start; padding: var(--space-1) 10px; border-radius: var(--radius-pill); background: var(--color-action-soft); color: var(--color-action-text); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); }
.flow h3 { font-size: var(--font-size-title-lg); }
.flow p { color: var(--color-ink-secondary); }

/* Numbers band on Navy. */
.stats-band { margin-top: var(--space-mkt-section); padding-block: var(--space-mkt-band); }
.stats-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6) var(--space-16, 64px); margin-bottom: clamp(40px, 5vw, 72px); }
.stats-head > div:first-child { display: flex; flex-direction: column; gap: var(--space-4); }
.stats-links { display: flex; flex-wrap: wrap; gap: var(--space-3) 28px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-10) var(--space-8); }
.stats > div { display: flex; flex-direction: column; gap: var(--space-3); }
.stats > div::before { content: ""; width: 32px; height: 4px; border-radius: 2px; background: var(--color-brand-green); }
.stats dd { order: 1; font-size: var(--font-size-mkt-stat); font-weight: var(--font-weight-semibold); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.stats dt { order: 2; font-size: 16px; color: var(--color-nav-muted); }
/* Phones: two numbers a row, sized so 43,514 fits a 320px screen's column. */
@media (max-width: 599px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
  .stats dd { font-size: clamp(30px, 9.5vw, 44px); }
}

/* Rates: four tiles, two by two (phones too), then one row from 1180px (never three and one left over). */
.rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (min-width: 1180px) { .rates { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rates > div { padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-bg); display: flex; flex-direction: column; gap: var(--space-4); }
.rates dt { font-size: 16px; font-weight: var(--font-weight-medium); color: var(--color-ink-secondary); }
.rates dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.rates strong { font-size: clamp(40px, 3.8vw, 56px); font-weight: var(--font-weight-semibold); line-height: 1; letter-spacing: -0.03em; color: var(--color-action-text); font-variant-numeric: tabular-nums; }
.rates small { font-size: var(--font-size-body); color: var(--color-ink-muted); }
@media (max-width: 599px) {
  .rates { gap: var(--space-3); }
  .rates > div { padding: var(--space-5) var(--space-4); gap: var(--space-3); }
  .rates strong { font-size: clamp(28px, 9vw, 40px); }
}
.rates-foot { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); }
/* Outside Korea the home has no rate tiles: one line that readers pay no ailix fee, and the link to the rates. */
.rates-abroad { margin-bottom: 0; }
.rates-abroad .btn { margin-top: var(--space-2); }

/* Questions. */
.faq h2 { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.qa { display: flex; flex-direction: column; gap: var(--space-3); }
.qa details { padding: 0 var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: 22px 0; font-size: 18px; font-weight: var(--font-weight-medium); line-height: 1.45; }
.qa summary .icon { color: var(--color-ink-secondary); transition: transform var(--motion-duration-base) var(--motion-easing-standard); }
.qa details[open] summary .icon { transform: rotate(180deg); }
.qa details p { padding-bottom: var(--space-6); font-size: 16px; line-height: 1.7; color: var(--color-ink-secondary); }

/* Closing band on every page: sign up or ask. */
.closing .wrap { padding-block: var(--space-mkt-band); }
.closing-copy { display: flex; flex-direction: column; gap: var(--space-5); }
.closing h2 { font-size: var(--font-size-mkt-close); line-height: 1.18; letter-spacing: -0.03em; }
.closing .actions { margin-top: var(--space-3); max-width: none; }
/* Each button takes its words' width so neither breaks onto two lines; phones stack them at full width. */
.closing .actions .btn { flex: 0 1 auto; }
@media (max-width: 599px) { .closing .actions .btn { flex-basis: 100%; } }

/* Footer: the business details stay visible, small. */
.footer { border-top: 1px solid var(--color-line); background: var(--color-surface); }
.footer .wrap { padding-block: var(--space-12) var(--space-10); display: flex; flex-direction: column; gap: 28px; }
.footer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-10); }
.footer-head img { width: auto; height: 22px; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--font-size-label); font-weight: var(--font-weight-medium); }
.footer-links a { min-height: 32px; display: inline-flex; align-items: center; color: var(--color-ink-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--color-ink); text-decoration: underline; }
.footer-links a.privacy { color: var(--color-ink); }
.company-info { display: flex; flex-wrap: wrap; gap: 6px var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--color-line); font-size: var(--font-size-caption); line-height: 1.5; color: var(--color-ink-muted); }
.company-info > div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.company-info dd { color: var(--color-ink-secondary); }
.copyright { font-size: var(--font-size-caption); color: var(--color-ink-muted); }