/* Tokens = app ui-design-spec 3-1 (Pink Office), landing in black and pink (10-21): dark ground, brand pink bands,
   light pink / white only on a few cards. Pink stays cool and light; on dark ground type is white or light pink. */
:root {
  --ink: #141414;
  --ink2: #1C1C1E;
  --ink-line: rgba(255, 255, 255, .12);
  --on-ink: #FFFFFF;
  --on-ink2: #D1D1D6;
  --on-ink3: #A1A1A6;

  --ground: #FFFFFF;
  --plan-ground: #F5F5F7;
  --card: #FFFFFF;
  --line: #ECE6E9;
  --fill: #F2F2F4;
  --text: #1C1C1E;
  --text2: #5E5E63;
  --muted: #6B6B70;
  --pink: #F2B8C9;
  --pink-soft: #FBE7EE;
  --pink-mid: #F6D3E0;
  --pink-deep: #E3A6B6;
  --rose: #96526B; /* dusty rose type on light pink (4.5:1 on #FBE7EE) */
  --charcoal-line: #3A3A3C;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .2), 0 18px 48px rgba(0, 0, 0, .35);

  --display: "Playfair Display", "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
  --sans: "Pretendard Variable", Pretendard, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --wordmark: "Playfair Display", Georgia, serif; /* Latin wordmark text only, every language */
  --h-weight: 600;
  --h-track: -0.01em;
  --h-lead: 1.12;
  --r-hero: 28px;
  --r-card: 22px;
  --r-row: 18px;
  --std: 240ms cubic-bezier(.2, .8, .2, 1);
  color-scheme: light only;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Non-English first paint: hidden until app.js swaps the text in (head script removes it after 2s regardless). */
html.i18n-wait body { visibility: hidden; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--display); font-weight: var(--h-weight); margin: 0; line-height: var(--h-lead); letter-spacing: var(--h-track); font-variant-numeric: lining-nums; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
/* Light surfaces (white / pink): charcoal type and focus ring. */
.thanks, .disc-card, .end-card, .section-pink { color: var(--text); }
.thanks :focus-visible, .disc-card :focus-visible, .end-card :focus-visible, .section-pink :focus-visible { outline-color: var(--text); }

.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--pink); color: var(--text); padding: 10px 14px; border-radius: 10px; z-index: 50; text-decoration: none; font-weight: 700; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 24px; } }

.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.section-pink .eyebrow { color: var(--text2); }
/* Hero slogan keeps its lowercase (decision 178); same size, weight and color as every eyebrow. */
.eyebrow-slogan { text-transform: none; }
.eyebrow-center { text-align: center; }

/* Top bar (dark) */
.top { position: relative; z-index: 1; padding: 18px 0 0; }
.top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.top-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; min-width: 0; }
.brand { font-family: var(--wordmark); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; line-height: 0; }
/* K3 wordmark, white copy of the charcoal PNG for the dark top bar. Width stays well under 220px. */
.brand-link { display: block; border-radius: 8px; }
.brand-logo { display: block; height: 52px; width: auto; max-width: 220px; }
.launch-pill { unicode-bidi: plaintext; font-size: 12px; font-weight: 600; color: var(--on-ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--ink-line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }

/* Language chip: native select stretched over a short label (EN, KO...). */
.lang-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ink-line); background: rgba(255, 255, 255, .06); color: var(--on-ink); font-size: 12px; font-weight: 700; letter-spacing: .02em; cursor: pointer; white-space: nowrap; }
.lang-chip .globe { flex: none; }
.lang-chip select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; color: var(--text); }
.lang-chip:focus-within { outline: 2px solid var(--pink); outline-offset: 2px; }
/* Narrow phones: tighter top bar so brand, launch line and chip stay on one row in every language. */
@media (max-width: 419px) {
  .top-row { gap: 8px 6px; }
  .top-end { gap: 6px; }
  .brand { font-size: 20px; }
  .brand-logo { height: 44px; }
  .launch-pill { font-size: 11px; padding: 5px 10px; color: var(--on-ink2); }
  .lang-chip { padding: 0 9px; }
  .lang-chip .globe { display: none; }
}

/* Hero: black stage with a soft pink glow, white type */
.hero { position: relative; isolation: isolate; padding: 28px 0 40px; }
.hero::before {
  content: ""; position: absolute; inset: -80px 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 60% at 85% 0%, rgba(242, 184, 201, .22) 0%, rgba(242, 184, 201, 0) 65%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.hero-copy { padding-top: 4px; max-width: 760px; }
.hero h1 { font-size: 38px; line-height: 1.06; margin-top: 14px; max-width: 14ch; color: var(--on-ink); }
.sub { margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--on-ink2); max-width: 40ch; }
/* Plan recording beside the copy on wide screens only (10-21 UX audit F4). */
.hero-media { display: none; }
@media (min-width: 900px) {
  .hero { padding: 72px 0 72px; }
  .hero h1 { font-size: 64px; max-width: 16ch; }
  .sub { font-size: 19px; margin-top: 22px; }
  .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
  .hero-media { display: block; justify-self: center; width: 100%; max-width: 300px; }
  .hero-media .phone { padding: 7px; border-radius: 36px; }
  .hero-media .phone video { border-radius: 29px; }
}

/* Waitlist form, right in the first screen: bright field + pink button on black.
   Mobile (10-21): no heading or visible label (placeholder + sr-only label), small print folded, more air between blocks.
   Glow kept soft at rest and strong only on focus, so the empty field is not the brightest thing on screen (audit V8). */
.join { margin-top: 32px; max-width: 620px; }
@media (min-width: 900px) { .join { margin-top: 40px; } }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.join-row { display: grid; gap: 10px; }
@media (min-width: 600px) { .join-row { grid-template-columns: 1fr auto; } }
.field input {
  width: 100%; height: 58px; padding: 0 18px; font: inherit; font-size: 17px; font-weight: 500; color: var(--text);
  background: #fff; border: 2px solid var(--pink); border-radius: 16px; outline: none;
  box-shadow: 0 0 0 3px rgba(242, 184, 201, .18), 0 0 14px rgba(242, 184, 201, .16);
  transition: border-color var(--std), box-shadow var(--std);
}
.field input::placeholder { color: #8E8E93; }
.field input:focus { border-color: var(--pink-deep); box-shadow: 0 0 0 5px rgba(242, 184, 201, .45), 0 0 36px rgba(242, 184, 201, .5); }
.field input[aria-invalid="true"] { border-color: #fff; background: var(--pink-soft); }

.consent { margin-top: 16px; }
.consent-row { display: flex; align-items: flex-start; gap: 4px 10px; flex-wrap: wrap; }
.consent-row .check { flex: 0 1 auto; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; cursor: pointer; font-size: 13px; line-height: 1.5; color: var(--on-ink3); }
.check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.check .box { width: 20px; height: 20px; border: 1.5px solid var(--on-ink2); border-radius: 6px; background: transparent; display: grid; place-items: center; transition: background var(--std); }
.check .box::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--text); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input:checked + .box { background: var(--pink); border-color: var(--pink); }
.check input:checked + .box::after { opacity: 1; }
.check input:focus-visible + .box { outline: 2px solid var(--pink); outline-offset: 3px; }
.check input[aria-invalid="true"] + .box { border-color: var(--pink); background: rgba(242, 184, 201, .25); }
.privacy { margin-top: 10px; margin-inline-start: 30px; font-size: 13px; color: var(--on-ink3); }
/* Toggle for folded small print: quiet underlined text button, 32px tall tap area. */
.more-btn { flex: none; min-height: 20px; padding: 0; margin: 0; border: 0; background: none; font: inherit; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--on-ink2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; position: relative; }
.more-btn::before { content: ""; position: absolute; inset: -6px -8px; }
.more-btn[aria-expanded="true"] { color: var(--on-ink); }
.fine { margin-top: 6px; margin-inline-start: 30px; font-size: 13px; line-height: 1.5; color: var(--on-ink3); }
.privacy a { color: var(--on-ink2); font-weight: 600; }

.err { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--pink); }
.consent .err { margin-inline-start: 30px; }
.field input[dir="ltr"] { text-align: start; }
[dir="rtl"] .field input[dir="ltr"] { text-align: right; }

/* Buttons: charcoal pill, outline pill, pink join */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px;
  border-radius: 999px; border: 1.5px solid var(--text); background: var(--text); color: #fff;
  font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; text-align: center;
  transition: transform var(--std), opacity var(--std);
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.btn-outline { background: transparent; color: var(--text); }
/* Outline pill on the dark ground. */
.btn-ghost { background: transparent; color: var(--on-ink); border-color: rgba(255, 255, 255, .34); }
.btn-ghost:hover { border-color: var(--pink); }
.btn-block { width: 100%; }
.btn-join { min-height: 58px; border-radius: 16px; border: 2px solid var(--pink); background: var(--pink); color: var(--text); font-size: 17px; font-weight: 800; padding: 0 26px; white-space: nowrap; }
.btn-join:hover { background: #F6C6D4; }
.btn-join[aria-disabled="true"] { opacity: .7; }

.form-status { margin-top: 8px; font-size: 14px; color: var(--on-ink2); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--pink); font-weight: 600; }

/* Quiz, the second lead (10-21): label, then a pink outline button as wide as the join row (56px), then what she gets. */
.quiz-line { margin-top: 26px; }
.quiz-q { font-size: 14px; font-weight: 600; color: var(--on-ink2); }
.btn-quiz { margin-top: 8px; width: 100%; min-height: 56px; border-radius: 16px; border: 2px solid var(--pink); background: transparent; color: var(--pink); font-size: 17px; font-weight: 800; }
.btn-quiz:hover { background: rgba(242, 184, 201, .1); }
@media (min-width: 600px) { .btn-quiz { width: auto; min-width: 280px; padding: 0 28px; } }
.quiz-d { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--on-ink3); }
.quiz-btn { margin-top: 10px; min-height: 48px; padding: 0 22px; font-size: 15px; }

/* Thanks: a bright pink card in place of the form */
.thanks { background: var(--pink); color: var(--text); border-radius: var(--r-card); padding: 24px 22px; box-shadow: 0 0 40px rgba(242, 184, 201, .35); }
.thanks:focus { outline: none; }
.thanks-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.thanks-h { font-size: 30px; margin-top: 6px; }
.thanks-body { margin: 8px 0 18px; color: var(--text); }
.thanks-body b { color: var(--text); font-weight: 700; word-break: break-all; }
/* Topics step right after signup (10-21): chips on the pink card, fits one 375x812 screen. */
.topics { margin-top: 8px; }
.topics-h { font-size: 24px; line-height: 1.2; color: var(--text); }
.topics-sub { margin-top: 6px; font-size: 14px; color: #3A3A3C; }
.chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--text); background: rgba(255, 255, 255, .55); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--std), color var(--std); }
.chip[aria-pressed="true"] { background: var(--text); color: #fff; }
.note { margin-top: 14px; width: 100%; height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text); background: #fff; border: 1.5px solid rgba(28, 28, 30, .25); border-radius: 14px; outline: none; }
.note:focus { border-color: var(--text); }
.note::placeholder { color: #6B6B70; font-size: 14px; }
.topics-actions { margin-top: 14px; display: flex; align-items: center; gap: 16px; }
.topics-send { flex: 1; min-height: 50px; }
.topics-skip { padding: 10px 4px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fine p + p { margin-top: 4px; }


/* Sections (about a quarter tighter than before, 10-21) */
.section { padding: 72px 0 0; }
.section-last { padding-bottom: 72px; }
.section h2 { font-size: 32px; margin-top: 14px; max-width: 22ch; }
@media (min-width: 900px) { .section { padding-top: 120px; } .section h2 { font-size: 44px; margin-top: 16px; } .section-last { padding-bottom: 120px; } }

/* Pick where you start: three dark cards, one per way in (goal / him / peace). Static, not links. */
.section-paths { padding-top: 40px; }
.section-paths h2 { color: var(--on-ink); }
.paths { margin-top: 24px; display: grid; gap: 12px; }
.path { padding: 22px 22px 20px; border: 1px solid var(--ink-line); border-radius: var(--r-row); background: var(--ink2); }
.path-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.path-title { margin-top: 8px; font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--on-ink); font-variant-numeric: lining-nums; }
.path-plan { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--on-ink2); font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 900px) {
  .section-paths { padding-top: 96px; }
  .paths { margin-top: 40px; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .path { padding: 28px 26px 26px; }
  .path-title { font-size: 23px; }
}

/* Real app screens after the three ways in (frames from the 10-19 app recording, no mockups). */
.section-shots { padding-top: 56px; }
.shots { margin: 18px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; }
.phone { padding: 5px; border-radius: 26px; background: #000; border: 1px solid var(--ink-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(242, 184, 201, .08); }
.phone video { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1558; border-radius: 21px; background: #fff; object-fit: cover; }
.shot figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--on-ink2); text-align: center; text-wrap: balance; }
@media (min-width: 900px) {
  .section-shots { padding-top: 72px; }
  .shots { margin-top: 24px; gap: 48px; max-width: 620px; }
  .phone { padding: 7px; border-radius: 36px; }
  .phone video { border-radius: 29px; }
  .shot figcaption { margin-top: 16px; font-size: 15px; }
}

/* A Little Disclaimer: light pink card, charcoal type, thin charcoal border. */
.section-disc { padding-top: 56px; }
.disc-card { max-width: 720px; margin: 0 auto; padding: 32px 22px 30px; background: var(--pink-soft); border: 1px solid var(--charcoal-line); border-radius: var(--r-card); }
.disc-top { text-align: center; }
.disc-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.disc-spark { flex: none; color: var(--rose); }
.section h2.disc-h { margin: 14px auto 0; max-width: 20ch; font-size: 28px; line-height: 1.2; text-wrap: balance; }
.disc-p { margin: 12px auto 0; max-width: 42ch; font-size: 15.5px; line-height: 1.6; color: var(--text2); text-wrap: balance; }
.disc-list { margin: 24px 0 0; padding: 22px 0; border-top: 1px solid rgba(28, 28, 30, .16); border-bottom: 1px solid rgba(28, 28, 30, .16); display: grid; gap: 14px; }
.disc-list li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: baseline; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--text); }
.disc-num { font-family: var(--display); font-weight: 600; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.disc-foot { margin-top: 22px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--text); text-wrap: balance; }
@media (min-width: 900px) {
  .section-disc { padding-top: 96px; }
  .disc-card { padding: 48px 64px 44px; }
  .section h2.disc-h { font-size: 36px; }
  .disc-p { font-size: 17px; }
  .disc-list { margin-top: 32px; padding: 28px 0; gap: 16px; }
  .disc-list li { font-size: 18px; }
  .disc-foot { margin-top: 28px; font-size: 24px; }
}

/* Quiz section after the app screens: black card, pink rim, pills + the 7 result types, one big button. Fits one phone screen. */
.section-quiz { padding-top: 56px; }
.qs-card { max-width: 720px; margin: 0 auto; padding: 28px 22px 26px; border: 1.5px solid var(--pink); border-radius: var(--r-card); background: var(--ink2); box-shadow: 0 0 40px rgba(242, 184, 201, .12); }
.section h2.qs-h { margin-top: 0; font-size: 30px; line-height: 1.15; color: var(--on-ink); max-width: 18ch; }
.qs-pills { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.qs-pills li { padding: 6px 12px; border-radius: 999px; background: var(--pink); color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.3; font-variant-numeric: lining-nums; }
.qs-types-label { margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.qs-types { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.qs-types li { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--ink-line); color: var(--on-ink2); font-size: 13px; font-weight: 600; line-height: 1.35; }
.qs-btn { margin-top: 24px; width: 100%; }
@media (min-width: 600px) { .qs-btn { width: auto; min-width: 280px; } }
@media (min-width: 900px) {
  .section-quiz { padding-top: 96px; }
  .qs-card { padding: 44px 48px 42px; }
  .section h2.qs-h { font-size: 40px; }
  .qs-pills li { font-size: 14px; }
  .qs-types li { font-size: 14px; }
}

/* What's inside: brand pink band, white cards. */
.section-pink { margin-top: 56px; padding: 56px 0; background: var(--pink-mid); }
.section-pink h2 { color: var(--text); }
@media (min-width: 900px) { .section-pink { margin-top: 96px; padding: 96px 0; } }
.rows { margin-top: 32px; display: grid; gap: 14px; }
@media (min-width: 900px) { .rows { margin-top: 48px; grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.rows li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 24px 22px; border: 1px solid rgba(28, 28, 30, .06); border-radius: var(--r-row); background: var(--card); }
@media (min-width: 900px) { .rows li { padding: 32px 30px; } }
.num { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.rows h3 { font-size: 20px; line-height: 1.3; }
.rows p { margin-top: 8px; color: var(--text2); font-size: 15px; line-height: 1.6; }

/* Bottom CTA: light pink card on black. */
.section-end { padding-top: 64px; }
.end-card { max-width: 820px; margin: 0 auto; padding: 40px 22px 34px; text-align: center; background: var(--pink); border-radius: var(--r-hero); box-shadow: 0 0 60px rgba(242, 184, 201, .18); }
.section h2.end-h { margin: 0 auto; max-width: 18ch; font-size: 30px; line-height: 1.18; text-wrap: balance; }
.end-p { margin: 12px auto 0; max-width: 36ch; font-size: 16px; color: var(--text); text-wrap: balance; }
/* Second form inside the pink card: charcoal on pink instead of pink on black. */
.join-end { margin: 24px auto 0; text-align: start; }
.join-end .consent-row { padding-inline-end: 8px; } /* room for the Details tap area */
.end-card .field input { border-color: var(--text); box-shadow: none; }
.end-card .field input:focus { border-color: var(--text); box-shadow: 0 0 0 4px rgba(28, 28, 30, .18); }
.end-card .field input[aria-invalid="true"] { border-color: var(--text); background: #fff; }
.end-card .btn-join { background: var(--text); border-color: var(--text); color: #fff; white-space: normal; line-height: 1.25; padding: 8px 22px; }
.end-card .btn-join:hover { background: #2C2C2E; }
.end-card .check { color: var(--text); }
.end-card .check .box { border-color: var(--text); }
.end-card .check input:checked + .box { background: var(--text); border-color: var(--text); }
.end-card .check .box::after { border-color: #fff; }
.end-card .check input:focus-visible + .box { outline-color: var(--text); }
.end-card .check input[aria-invalid="true"] + .box { border-color: var(--text); background: #fff; }
.end-card .more-btn, .end-card .privacy, .end-card .privacy a, .end-card .fine, .end-card .form-status { color: #3A3A3C; }
.end-card .err, .end-card .form-status.is-error { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.end-card .thanks { background: #fff; box-shadow: none; text-align: start; }
.end-quiz { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(28, 28, 30, .16); }
.end-quiz .quiz-q { color: var(--text); }
@media (min-width: 900px) {
  .section-end { padding-top: 104px; }
  .end-card { padding: 64px 48px 52px; }
  .section h2.end-h { font-size: 44px; }
  .end-p { font-size: 18px; }
}

/* Footer (charcoal) */
.footer { border-top: 1px solid var(--ink-line); background: var(--ink2); padding: 24px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 14px; color: var(--on-ink3); }
.footer-row { display: grid; gap: 10px; }
@media (min-width: 900px) { .footer-row { grid-template-columns: auto 1fr; align-items: center; gap: 24px; } .footer-links { justify-content: flex-end; } }
.footer-links a { display: inline-block; padding: 10px 0; }
.footer-brand { font-family: var(--display); font-weight: var(--h-weight); font-size: 16px; color: var(--on-ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.footer a { color: var(--on-ink2); }
.footer a:hover { color: var(--on-ink); }

/* ---------- Per-language type ---------- */
/* Korean: Pretendard 700 for headings, no serif or italic Hangul, Korean line breaking.
   Headings track slightly tighter (-0.025em), body -0.01em, eyebrow untracked. */
:root[lang="ko"] { --display: var(--sans); --h-weight: 700; --h-track: -0.025em; --h-lead: 1.25; }
:root[lang="ko"] body { word-break: keep-all; letter-spacing: -0.01em; line-height: 1.6; }
:root[lang="ko"] h1, :root[lang="ko"] h2, :root[lang="ko"] h3 { font-weight: 700; line-height: 1.25; }
:root[lang="ko"] .eyebrow, :root[lang="ko"] .disc-label, :root[lang="ko"] .path-label, :root[lang="ko"] .qs-types-label { letter-spacing: 0; }
:root[lang="ko"] .path-title, :root[lang="ko"] .disc-foot, :root[lang="ko"] .disc-num { font-weight: 700; letter-spacing: var(--h-track); }
:root[lang="ko"] .hero h1 { max-width: 13em; }
/* Korean line ends: no word left alone on the last line. */
:root[lang="ko"] h1, :root[lang="ko"] h2, :root[lang="ko"] h3 { text-wrap: balance; }
:root[lang="ko"] p { text-wrap: pretty; }

/* Chinese: Noto Sans SC (loaded on demand), sans headings. */
:root[lang="zh"] {
  --sans: "Pretendard Variable", Pretendard, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --display: var(--sans); --h-weight: 700; --h-track: 0; --h-lead: 1.3;
}
:root[lang="zh"] .eyebrow, :root[lang="zh"] .disc-label, :root[lang="zh"] .path-label { letter-spacing: .04em; }
:root[lang="zh"] .hero h1 { max-width: 12em; }

/* Arabic: Noto Naskh Arabic (loaded on demand), no letter spacing (it breaks joined letters), taller lines. */
:root[lang="ar"] {
  --sans: "Pretendard Variable", Pretendard, "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --display: var(--sans); --h-weight: 700; --h-track: 0; --h-lead: 1.45;
}
:root[lang="ar"] body { line-height: 1.75; }
:root[lang="ar"] .eyebrow, :root[lang="ar"] .lang-chip, :root[lang="ar"] .disc-label, :root[lang="ar"] .path-label, :root[lang="ar"] .qs-types-label { letter-spacing: 0; text-transform: none; }
:root[lang="ar"] .eyebrow, :root[lang="ar"] .disc-label, :root[lang="ar"] .path-label { font-size: 13px; }
:root[lang="ar"] .hero h1 { max-width: 16ch; line-height: 1.35; }