/* Crossing marketing site.
   Tokens are the Crossing design system's (polyphrase-design tokens.css),
   inlined so the site makes no third-party requests. Dark mode follows the
   visitor's system setting. No inline styles anywhere, so the Content
   Security Policy can forbid them. */

/* ------------------------------------------------------------ fonts */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-400.cb384cd03f.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-500.fea3e25234.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-600.3c292d21ca.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-700.5df044f888.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/nunito-600.b179ceee93.woff2") format("woff2"); }

/* ------------------------------------------------------------ tokens */
:root {
  --indigo-50: #F2F2FB; --indigo-100: #E4E4F6; --indigo-300: #A6A4DF; --indigo-400: #7E7BCE;
  --indigo-500: #5F5CBE; --indigo-600: #4A46B5; --indigo-700: #3A3897; --indigo-950: #15142F;
  --ocean-50: #EDF6FB; --ocean-300: #74B5DB; --ocean-500: #2E7BAE; --ocean-600: #266A98; --ocean-900: #143648;
  --coral-50: #FEF4F1; --coral-400: #EB8368; --coral-500: #E56B4D; --coral-600: #CE5A3E; --coral-900: #602A1D;
  --green-50: #EEF7F1; --green-400: #5DA97B; --green-500: #4E9C6B; --green-600: #3B7D57;
  --amber-50: #FDF6E9; --amber-400: #DDA23E; --amber-500: #C98A2E; --amber-700: #855819;
  --stone-0: #FFFFFF; --stone-25: #FBFAF7; --stone-50: #F6F4EF; --stone-100: #EEEBE3;
  --stone-200: #E0DCD1; --stone-300: #CBC6B8; --stone-400: #ACA695; --stone-500: #8A8474;
  --stone-600: #6B6657; --stone-700: #4F4B3F; --stone-900: #262319; --stone-950: #1B1912;
  --char-canvas: #1A1815; --char-raised: #221F1B; --char-elevated: #2B2823; --char-border: #3A362F; --char-border-2: #302D27;

  color-scheme: light dark;
  --color-primary: var(--indigo-600);
  --color-primary-pressed: var(--indigo-700);
  --color-primary-subtle: var(--indigo-50);
  --color-primary-border: var(--indigo-100);
  --color-on-primary: #FFFFFF;
  --color-accent: var(--coral-500);
  --color-accent-strong: var(--coral-600);
  --color-accent-subtle: var(--coral-50);
  --color-on-accent: #FFFFFF;
  --color-canvas: var(--stone-25);
  --color-surface: var(--stone-0);
  --color-surface-subtle: var(--stone-50);
  --color-surface-sunken: var(--stone-50);
  --color-text: var(--stone-900);
  --color-text-secondary: var(--stone-600);
  --color-text-tertiary: var(--stone-500);
  --color-text-link: var(--ocean-600);
  --color-pron: var(--stone-700);
  --color-border: var(--stone-200);
  --color-divider: var(--stone-100);
  --color-focus-ring: var(--indigo-400);
  --color-success: var(--green-600);
  --color-success-subtle: var(--green-50);
  --color-warning: var(--amber-700);
  --color-warning-subtle: var(--amber-50);
  --color-info: var(--ocean-600);
  --color-info-subtle: var(--ocean-50);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  /* Latin-script languages; :lang() below swaps in a stack per script. */
  --font-native: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", system-ui, sans-serif;
  --font-pron: "Nunito", "Inter", system-ui, sans-serif;

  --text-display: 34px; --text-heading: 26px; --text-title: 20px; --text-body-large: 17px;
  --text-body: 16px; --text-caption: 13px; --text-metadata: 11px; --text-pron: 15px;
  --leading-display: 1.12; --leading-heading: 1.2; --leading-title: 1.3; --leading-body: 1.6;
  --leading-caption: 1.4; --tracking-display: -0.02em; --tracking-heading: -0.015em;
  --tracking-title: -0.01em; --tracking-eyebrow: 0.10em;

  --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --inset-screen: 20px;

  --radius-xs: 8px; --radius-sm: 12px; --radius-button: 16px; --radius-card: 20px;
  --radius-dialog: 24px; --radius-sheet: 28px; --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(38,35,25,0.04), 0 1px 3px rgba(38,35,25,0.06);
  --shadow-2: 0 2px 4px rgba(38,35,25,0.04), 0 6px 16px rgba(38,35,25,0.07);
  --shadow-3: 0 4px 12px rgba(38,35,25,0.06), 0 20px 44px rgba(38,35,25,0.14);

  --duration-fast: 160ms; --duration-base: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-scale-press: 0.98;
  --focus-ring: 0 0 0 3px var(--color-canvas), 0 0 0 5px var(--color-focus-ring);

  --page-width: 1120px;
  --prose-width: 72ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--indigo-400);
    --color-primary-pressed: var(--indigo-300);
    --color-primary-subtle: rgba(126, 123, 206, 0.16);
    --color-primary-border: rgba(126, 123, 206, 0.32);
    --color-on-primary: var(--indigo-950);
    --color-accent: var(--coral-400);
    --color-accent-strong: var(--coral-500);
    --color-accent-subtle: rgba(235, 131, 104, 0.16);
    --color-on-accent: var(--coral-900);
    --color-canvas: var(--char-canvas);
    --color-surface: var(--char-raised);
    --color-surface-subtle: var(--char-elevated);
    --color-surface-sunken: var(--stone-950);
    --color-text: var(--stone-25);
    --color-text-secondary: var(--stone-300);
    --color-text-tertiary: var(--stone-400);
    --color-text-link: var(--ocean-300);
    --color-pron: var(--stone-300);
    --color-border: var(--char-border);
    --color-divider: var(--char-border-2);
    --color-focus-ring: var(--indigo-300);
    --color-success: var(--green-400);
    --color-success-subtle: rgba(93, 169, 123, 0.16);
    --color-warning: var(--amber-400);
    --color-warning-subtle: rgba(221, 162, 62, 0.16);
    --color-info: var(--ocean-300);
    --color-info-subtle: rgba(116, 181, 219, 0.16);
    --shadow-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40);
    --shadow-2: 0 2px 6px rgba(0,0,0,0.40), 0 8px 20px rgba(0,0,0,0.45);
    --shadow-3: 0 6px 16px rgba(0,0,0,0.45), 0 24px 52px rgba(0,0,0,0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-text-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
::selection { background: var(--color-primary-subtle); }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
/* Native scripts use the system fonts that cover them (nothing is loaded from
   another host). The lang attribute picks the stack, so Han characters take
   Chinese or Japanese shapes as the text requires. */
:lang(el), :lang(ru) { --font-native: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }
:lang(ja) { --font-native: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif; }
:lang(zh) { --font-native: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; }
:lang(ko) { --font-native: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; }
:lang(ar) { --font-native: system-ui, "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
:lang(he) { --font-native: system-ui, "Arial Hebrew", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif; }
:lang(hi) { --font-native: "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Nirmala UI", Mangal, sans-serif; }
:lang(bn) { --font-native: "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Nirmala UI", Vrinda, sans-serif; }
:lang(gu) { --font-native: "Kohinoor Gujarati", "Gujarati Sangam MN", "Noto Sans Gujarati", "Nirmala UI", Shruti, sans-serif; }
:lang(el), :lang(ru), :lang(ja), :lang(zh), :lang(ko), :lang(ar), :lang(he), :lang(hi), :lang(bn), :lang(gu) { font-family: var(--font-native); }
/* Korean wraps between words, not inside them. */
:lang(ko) { word-break: keep-all; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-md); top: -100px; z-index: 10; background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--space-md); }

.wrap { width: 100%; max-width: var(--page-width); margin-inline: auto; padding-inline: var(--inset-screen); }
@media (min-width: 720px) { .wrap { padding-inline: var(--space-xl); } }

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 18px; height: 18px; }

/* ------------------------------------------------------------ type */
/* Secondary, not the design system's tertiary: 11 px labels need AA's 4.5:1. */
.eyebrow { font-size: var(--text-metadata); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.display { font-size: clamp(var(--text-display), 5.2vw, 58px); line-height: 1.06; letter-spacing: var(--tracking-display); font-weight: 700; }
.heading { font-size: clamp(var(--text-heading), 3.4vw, 38px); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: 700; }
.title { font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-title); font-weight: 600; }
.lede { font-size: clamp(var(--text-body-large), 1.8vw, 20px); line-height: var(--leading-body); color: var(--color-text-secondary); }
.body-secondary { color: var(--color-text-secondary); }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-secondary); }
.pron { font-family: var(--font-pron); font-size: var(--text-pron); font-weight: 600; letter-spacing: 0.005em; color: var(--color-pron); }

/* ------------------------------------------------------------ buttons + tags */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-button); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.btn:active { transform: scale(var(--motion-scale-press)); }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-pressed); }
.btn-quiet { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-small { min-height: 44px; padding: 0 var(--space-md); font-size: 15px; border-radius: var(--radius-sm); }

.store-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.store-badge { display: inline-flex; border-radius: var(--radius-sm); }
.store-badge img { height: 52px; width: auto; }
.store-soon { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-button); border: 1px dashed var(--color-border); color: var(--color-text-secondary); font-weight: 600; }
.store-note, .hero-copy .caption.store-note { margin-top: var(--space-sm); }

.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-xs); border-radius: var(--radius-xs); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.tag-you { background: var(--color-primary-subtle); color: var(--color-primary); }
.tag-hear { background: var(--color-info-subtle); color: var(--color-info); }
.tag-show { background: var(--color-accent-subtle); color: var(--color-accent-strong); }
.tag-free { background: var(--color-success-subtle); color: var(--color-success); }

/* ------------------------------------------------------------ header + footer */
.site-header { padding-block: var(--space-md); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-text); text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.brand img { width: 34px; height: 34px; }
.site-nav { display: flex; align-items: center; gap: var(--space-lg); }
.site-nav a:not(.btn) { color: var(--color-text-secondary); text-decoration: none; font-weight: 500; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current] { color: var(--color-text); }
@media (max-width: 719px) { .site-nav .nav-link { display: none; } }

.site-footer { margin-top: var(--space-3xl); padding-block: var(--space-2xl) var(--space-xl); border-top: 1px solid var(--color-divider); }
.footer-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-grid h2 { font-size: var(--text-caption); font-weight: 600; margin-bottom: var(--space-sm); color: var(--color-text); }
.footer-links { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.footer-links a { color: var(--color-text-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--color-text); text-decoration: underline; }
.footer-small { margin-top: var(--space-xl); display: grid; gap: var(--space-xs); }

/* ------------------------------------------------------------ sections */
.section { padding-block: var(--space-3xl); }
.section-tight { padding-block: var(--space-2xl); }
.section-intro { max-width: 640px; display: grid; gap: var(--space-sm); margin-bottom: var(--space-2xl); }
.band { background: var(--color-surface-subtle); }

.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero-grid { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-3xl); } }
.hero-copy { display: grid; gap: var(--space-lg); justify-items: start; }
.hero-copy .caption { margin-top: calc(var(--space-xs) * -1); }

.split { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } .split-reverse > :first-child { order: 2; } }
.split-copy { display: grid; gap: var(--space-md); }
.check-list { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.check-list li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.check-list .icon { color: var(--color-success); margin-top: 2px; }

.language-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; }
.language-list li { display: inline-flex; align-items: baseline; gap: var(--space-xs); min-height: 40px; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); }
.language-list .native { color: var(--color-text-secondary); font-size: 14px; }
.language-list li:has(a) { padding: 0; min-height: 44px; }
.language-list a { display: inline-flex; align-items: baseline; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); color: var(--color-text); text-decoration: none; }
.language-list a:hover { color: var(--color-primary); }
.language-list li:has(a:hover) { border-color: var(--color-primary-border); }

.illustration { width: 120px; height: 120px; color: var(--color-primary); }

/* ------------------------------------------------------------ phone mockups */
.phone {
  width: min(100%, 340px); margin-inline: auto; background: var(--color-canvas);
  border: 1px solid var(--color-border); border-radius: 44px; box-shadow: var(--shadow-3);
  padding: var(--space-lg) var(--space-md) var(--space-xl); display: grid; gap: var(--space-sm);
}
.phone-bar { display: flex; justify-content: center; margin-bottom: var(--space-xs); }
.phone-bar span { width: 96px; height: 24px; border-radius: var(--radius-pill); background: var(--color-text); opacity: 0.9; }
.phone-source { padding: 0 var(--space-xxs) var(--space-xs); display: grid; gap: var(--space-xxs); }
.lang-card { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: var(--space-md); display: grid; grid-template-columns: 1fr auto; gap: var(--space-xxs) var(--space-sm); align-items: center; }
.lang-card .eyebrow { grid-column: 1 / -1; }
.lang-card .native-text { font-family: var(--font-native); font-size: 22px; font-weight: 600; line-height: 1.35; }
.lang-card .romanization { font-size: 14px; color: var(--color-text-secondary); }
.audio-dot { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-accent-strong); color: var(--color-on-accent); display: grid; place-items: center; grid-row: 2 / span 3; grid-column: 2; }
.audio-dot .icon { width: 20px; height: 20px; }

.step { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: var(--space-md); display: grid; gap: var(--space-xs); }
.step-hear { margin-inline-start: var(--space-lg); background: var(--color-surface-subtle); box-shadow: none; }
.step .native-text { font-family: var(--font-native); font-size: 17px; font-weight: 600; }

.show-card { background: var(--color-surface); border-radius: var(--radius-dialog); box-shadow: var(--shadow-2); padding: var(--space-lg); display: grid; gap: var(--space-md); }
.show-card .big { font-family: var(--font-native); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; line-height: 1.45; }
.reply-box { background: var(--color-surface-subtle); border-radius: var(--radius-card); padding: var(--space-md); display: grid; gap: var(--space-sm); }
.reply { display: grid; gap: 2px; }
.reply .native-text { font-family: var(--font-native); font-weight: 600; font-size: 17px; }
/* Until a card's variant is reviewed, the home page shows it in English. */
.card-language { border: 1px dashed var(--color-border); border-radius: var(--radius-card); padding: var(--space-md); display: grid; gap: var(--space-xxs); }
.card-language-name { font-family: var(--font-native); font-size: clamp(26px, 3vw, 32px); font-weight: 700; line-height: 1.3; color: var(--color-text); }
.card-english { font-size: var(--text-body-large); font-weight: 600; line-height: 1.5; }
.reply-prompt { font-size: var(--text-caption); font-weight: 600; color: var(--color-text-secondary); }
.reply-en { font-weight: 600; }

/* ------------------------------------------------------------ situations */
.situation-grid { list-style: none; padding: 0; display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.situation-grid li { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-md); display: grid; gap: var(--space-xxs); align-content: start; }
.situation-grid .row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); }
.situation-grid .name { font-weight: 600; }

/* ------------------------------------------------------------ privacy + plans */
.promise-grid { list-style: none; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.promise-grid li { display: grid; gap: var(--space-xs); align-content: start; }
.promise-grid .icon { width: 28px; height: 28px; color: var(--color-primary); }

.plans { display: grid; gap: var(--space-md); }
@media (min-width: 820px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-dialog); padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-md); align-content: start; }
.plan-premium { border-color: var(--color-primary-border); box-shadow: var(--shadow-2); }
.plan-head { display: grid; gap: var(--space-xxs); }
.plan .check-list .icon { color: var(--color-primary); }

/* ------------------------------------------------------------ faq */
.faq { max-width: 760px; display: grid; }
.faq details { border-top: 1px solid var(--color-divider); }
.faq details:last-child { border-bottom: 1px solid var(--color-divider); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; font-weight: 600; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--color-text-tertiary); transition: transform var(--duration-base) var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .answer { padding-bottom: var(--space-md); color: var(--color-text-secondary); display: grid; gap: var(--space-sm); }

.cta-band { text-align: center; display: grid; justify-items: center; gap: var(--space-md); }
.cta-band .store-row { justify-content: center; }

/* ------------------------------------------------------------ legal + support prose */
.page-head { padding-block: var(--space-2xl) var(--space-lg); display: grid; gap: var(--space-sm); max-width: var(--prose-width); }
.prose { max-width: var(--prose-width); }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { font-size: 24px; line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); margin-top: var(--space-2xl); scroll-margin-top: var(--space-lg); }
.prose h3 { font-size: 18px; line-height: var(--leading-title); margin-top: var(--space-xl); scroll-margin-top: var(--space-lg); }
.prose ul, .prose ol { padding-inline-start: 1.25em; display: grid; gap: var(--space-xs); }
.prose strong { font-weight: 600; }
.prose .summary { background: var(--color-surface-subtle); border-radius: var(--radius-card); padding: var(--space-lg); display: grid; gap: var(--space-sm); }
.prose .summary h2 { margin-top: 0; font-size: 18px; }
.prose .callout { border-inline-start: 3px solid var(--color-accent-strong); background: var(--color-accent-subtle); border-radius: var(--radius-xs); padding: var(--space-md) var(--space-lg); }
.prose .callout > * + * { margin-top: var(--space-xs); }
.toc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg); }
.toc ol { margin-top: var(--space-xs); columns: 2 220px; column-gap: var(--space-xl); display: block; }
.toc li { margin-bottom: var(--space-xxs); break-inside: avoid; }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.prose th, .prose td { text-align: start; vertical-align: top; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-divider); }
.prose th { background: var(--color-surface-subtle); font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }
.prose .meta-line { color: var(--color-text-tertiary); font-size: var(--text-caption); }
.card-links { list-style: none; padding: 0; display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: var(--page-width); }
.card-links a { display: grid; gap: var(--space-xxs); height: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-lg); color: var(--color-text); text-decoration: none; }
.card-links a:hover { border-color: var(--color-primary-border); box-shadow: var(--shadow-1); }
.card-links .body-secondary { font-size: 15px; }

/* ------------------------------------------------------------ phrase pages */
.breadcrumbs { padding-top: var(--space-lg); font-size: var(--text-caption); line-height: var(--leading-caption); }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-xs); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-text-secondary); }
.breadcrumbs li + li::before { content: "/"; color: var(--color-text-secondary); }
.breadcrumbs a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-text); text-decoration: underline; }
.breadcrumbs + .page-head { padding-top: var(--space-lg); }
.phrase-legend { max-width: 68ch; }

.section-title { font-size: clamp(22px, 2.4vw, 28px); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: 700; margin-bottom: var(--space-md); }
.section-note { max-width: 68ch; margin: calc(var(--space-xs) * -1) 0 var(--space-md); }
.phrase-section { padding-top: var(--space-2xl); scroll-margin-top: var(--space-md); }

.jump { margin-inline: calc(var(--inset-screen) * -1); overflow-x: auto; scrollbar-width: none; }
.jump::-webkit-scrollbar { display: none; }
.jump-links { list-style: none; margin: 0; padding: var(--space-xxs) var(--inset-screen); display: flex; gap: var(--space-xs); width: max-content; }
@media (min-width: 720px) {
  .jump { margin-inline: 0; overflow: visible; }
  .jump-links { padding-inline: 0; flex-wrap: wrap; width: auto; }
}
.jump-links a, .chip-links a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.jump-links a:hover, .chip-links a:hover { border-color: var(--color-primary-border); color: var(--color-primary); }
.chip-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip-links a { white-space: normal; }

.phrase-grid { list-style: none; padding: 0; display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.phrase { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-md) var(--space-md) var(--space-md); display: grid; gap: var(--space-xxs); align-content: start; min-width: 0; }
.phrase-hear { background: var(--color-surface-subtle); border-color: transparent; }
.phrase-en { font-weight: 600; color: var(--color-text); }
.phrase-native { font-family: var(--font-native); font-size: 22px; font-weight: 600; line-height: 1.5; color: var(--color-text); overflow-wrap: anywhere; }
.phrase-native-small { font-size: 18px; }
.phrase-rom { font-size: 14px; line-height: var(--leading-caption); color: var(--color-text-secondary); }
.phrase-tags { display: flex; flex-wrap: wrap; gap: var(--space-xxs); margin-top: var(--space-xxs); }
.phrase-note { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-secondary); margin-top: var(--space-xxs); }
.phrase-more { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-divider); display: grid; gap: var(--space-xs); }
.phrase-more-title { font-size: var(--text-caption); font-weight: 600; color: var(--color-text-secondary); }
.phrase-alternates { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.phrase-alternate { display: grid; gap: 2px; }
.phrase-link { font-size: 14px; font-weight: 500; margin-top: var(--space-xs); justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
.tag-formal { background: var(--color-info-subtle); color: var(--color-info); }
.tag-plain { background: var(--color-surface-subtle); color: var(--color-text-secondary); }
.phrase-hear .tag-plain { background: var(--color-surface); }

.withheld { margin-top: var(--space-2xl); max-width: 72ch; background: var(--color-surface-subtle); border-radius: var(--radius-card); padding: var(--space-lg); display: grid; gap: var(--space-xs); color: var(--color-text-secondary); }
.withheld .title { color: var(--color-text); }

.related { padding-top: var(--space-2xl); }
.related-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .related-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.related-title { font-size: var(--text-body); font-weight: 600; margin-bottom: var(--space-sm); }

.cta-copy { max-width: 56ch; }

/* /phrases/: one card per language */
.language-cards { list-style: none; padding: 0; display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.language-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg) var(--space-lg); display: grid; gap: var(--space-xs); align-content: start; }
.language-card h3 a { color: var(--color-text); text-decoration: none; }
.language-card h3 a:hover { color: var(--color-primary); text-decoration: underline; }
.language-native { color: var(--color-text-secondary); font-size: 15px; }
.language-sample { font-family: var(--font-native); font-size: 24px; font-weight: 600; line-height: 1.45; margin-block: var(--space-xs); }
.language-card .chip-links a { min-height: 40px; padding-block: var(--space-xxs); font-size: 15px; }

/* region hubs: the same phrase in each region */
.compare-list { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.compare { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg) var(--space-sm); }
.compare-title { font-size: var(--text-body-large); font-weight: 600; line-height: var(--leading-title); margin-bottom: var(--space-xs); }
.compare-rows, .say-variants { list-style: none; padding: 0; display: grid; }
.compare-rows .phrase, .say-variants .phrase { background: none; border: 0; border-top: 1px solid var(--color-divider); border-radius: 0; padding: var(--space-sm) 0; }
.compare-rows .phrase:first-child { border-top: 0; }

/* say pages: one card per language, regional variants together */
.say-source { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-xs); }
.say-english { font-weight: 600; font-size: var(--text-body-large); }
.say-also { color: var(--color-text-secondary); font-size: 15px; }
.say-grid { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
@media (min-width: 900px) { .say-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.say-language { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg) var(--space-xs); min-width: 0; }
.say-language-title { font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-title); font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); padding-bottom: var(--space-xs); }
.say-language-native { font-size: 16px; font-weight: 500; color: var(--color-text-secondary); }
.say-cards .title { font-size: var(--text-body-large); }
.say-preview { display: flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-sm); color: var(--color-text-secondary); font-size: 15px; line-height: 1.5; }

/* footer: every language */
.footer-languages { margin-top: var(--space-xl); }
.footer-languages h2 { font-size: var(--text-caption); font-weight: 600; margin-bottom: var(--space-sm); color: var(--color-text); }
.footer-langs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.footer-langs a { color: var(--color-text-secondary); text-decoration: none; font-size: 15px; }
.footer-langs a:hover { color: var(--color-text); text-decoration: underline; }