/* =====================================================================
   AfterCall public site — student-first home + shared public shell (v2, 2026-10-06)
   Used by templates/site/*, auth.html, legal.html and error.html only.
   The signed-in app keeps app.css; nothing here touches it.
   Light by default; dark when the visitor picks it (html[data-theme="dark"],
   same 'aftercall-theme' key the app reads).
   ===================================================================== */

:root {
  /* Light (2026-10-13): white and black. A pure white page, near-black
     ink, cool neutral greys, and no warm tint. The highlighter stays for
     marked text only; glows and tinted shapes use --tint / --glow, which
     are silver here and gold in dark. Dark is the default (base.html). */
  --paper: #ffffff; --paper-2: #f4f4f5; --sheet: #ffffff; --sheet-2: #fafafa;
  --ink: #0a0a0b; --ink-2: #36363b; --ink-3: #6b6b73; --ink-4: #a3a3ab;
  --rule: #e8e8ea; --rule-2: #d6d6da;
  --mark: #f1d65f; --mark-soft: rgba(241, 214, 95, .38);
  --tint: #c4c4cb; --glow: rgba(10, 10, 12, .08);
  --rec: #d92d20; --ok: #23824a;
  --shadow-sheet: 0 1px 2px rgba(10, 10, 12, .05), 0 28px 56px -32px rgba(10, 10, 12, .25), 0 0 0 1px rgba(10, 10, 12, .07);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --brand: "Space Grotesk", Inter, sans-serif;
  --max: 1200px; --wide: 1320px; --gut: 24px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0b0b0c; --paper-2: #131315; --sheet: #161618; --sheet-2: #1c1c1f;
  --ink: #f4f4f5; --ink-2: #c7c7cc; --ink-3: #93939b; --ink-4: #5e5e66;
  --rule: #26262a; --rule-2: #34343a;
  --mark: #e6cc55; --mark-soft: rgba(230, 204, 85, .24);
  --tint: #e6cc55; --glow: rgba(230, 204, 85, .24);
  --shadow-sheet: 0 0 0 1px rgba(255, 255, 255, .07), 0 28px 56px -32px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- type ---------- */
.display { font: 400 clamp(46px, 6.2vw, 88px)/.98 var(--serif); letter-spacing: -.015em; margin: 0; }
.display em, .h2 em, .h1 em { font-style: italic; }
.display, .h1, .h2, .h3 { text-wrap: balance; }
.h1 { font: 400 clamp(42px, 6vw, 76px)/1 var(--serif); letter-spacing: -.01em; margin: 0; }
.h2 { font: 400 clamp(36px, 4.6vw, 60px)/1.04 var(--serif); letter-spacing: -.01em; margin: 0; }
.h3 { font: 400 clamp(26px, 2.6vw, 34px)/1.12 var(--serif); margin: 0; }
.h4 { font: 600 17px/1.35 var(--sans); margin: 0; letter-spacing: -.005em; }
.lede { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 600px; margin: 0; }
.body-2 { color: var(--ink-2); }
.label { font: 500 12px/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.numeral { font: italic 400 22px/1 var(--serif); color: var(--ink-3); }
.mark { background-image: linear-gradient(transparent 12%, var(--mark-soft) 12%, var(--mark-soft) 88%, transparent 88%); background-repeat: no-repeat; background-size: 100% 100%; padding: 0 .08em; border-radius: 2px; }
.marking { background-image: linear-gradient(transparent 12%, var(--mark-soft) 12%, var(--mark-soft) 88%, transparent 88%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .7s var(--ease); padding: 0 .08em; border-radius: 2px; }
.marking.on { background-size: 100% 100%; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font: 500 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.btn-line { border-color: var(--rule-2); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--ink); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn svg, .link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.btn:hover svg, .link:hover svg { transform: translateX(3px); }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-color: var(--ink); }
.micro { font-size: 14px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.micro li::before { content: "—"; margin-right: 8px; color: var(--ink-4); }
.micro li:first-child::before { content: none; }

/* ---------- header ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-in { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 18px/1 var(--brand); letter-spacing: -.02em; }
.logo i { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 700 15px/1 var(--brand); font-style: normal; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { padding: 8px 12px; font-size: 15px; color: var(--ink-2); text-decoration: none; border-radius: 999px; transition: color .2s, background .2s; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); background: var(--paper-2); }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.nav-right .nav-login { font-size: 15px; color: var(--ink-2); text-decoration: none; padding: 8px 12px; }
.nav-right .nav-login:hover { color: var(--ink); }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; cursor: pointer; place-items: center; }
.nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; }
.nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.nav-burger span::before { top: -5px; } .nav-burger span::after { top: 5px; }
.menu-open .nav-burger span { background: transparent; }
.menu-open .nav-burger span::before { transform: translateY(5px) rotate(45deg); }
.menu-open .nav-burger span::after { transform: translateY(-5px) rotate(-45deg); }
/* chapter indicator (home only) */
.chapters { display: none; gap: 18px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.chapters a { text-decoration: none; display: inline-flex; gap: 8px; align-items: center; transition: color .3s; }
.chapters a b { font: 400 17px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.chapters a.on { color: var(--ink); }
.chapters a.on::after { content: ""; width: 18px; height: 1px; background: var(--ink); }
.nav.in-chapters .nav-links { display: none; }
.nav.in-chapters .chapters { display: flex; }
.mobile-menu { display: none; }

/* ---------- context switch ---------- */
.ctx { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); }
.ctx .label { padding: 0 10px 0 12px; }
.ctx button { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--ink-3); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; display: inline-flex; gap: 8px; align-items: center; }
.ctx button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(40,30,10,.12), 0 0 0 1px var(--rule); }
.ctx button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
body[data-ctx="lecture"] [data-ctx-show="client"], body[data-ctx="client"] [data-ctx-show="lecture"] { display: none !important; }

/* ---------- sections ---------- */
.sec { padding: clamp(88px, 12vw, 168px) 0; position: relative; }
.sec-tight { padding: clamp(64px, 8vw, 104px) 0; }
.sec-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; margin-bottom: clamp(48px, 6vw, 80px); }
.sec-head .numeral { font-size: 64px; color: var(--ink-4); line-height: .8; }
.sec-head .h2 { max-width: 820px; }
.sec-head .lede { margin-top: 20px; }
.sec-head .label { display: block; margin-bottom: 18px; }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.paper-2 { background: var(--paper-2); }
.ink-sec { background: var(--ink); color: var(--paper); }
.ink-sec .lede, .ink-sec .body-2 { color: color-mix(in srgb, var(--paper) 72%, var(--ink)); }
.ink-sec .label { color: color-mix(in srgb, var(--paper) 55%, var(--ink)); }

/* ---------- reveal ---------- */
/* Scroll motion (2026-10-16, site.js "scroll motion"): things rise in with
   a soft blur, section headings arrive word by word, and the big showpieces
   (the tutor's screen, the phone, the Exam Coach card, cards in a row) lift
   and settle as you scroll to them. */
[data-reveal] { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(6px); transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }
.fx-words .fxw { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px); transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.fx-words.in .fxw { opacity: 1; transform: none; filter: none; }
[data-fx-lift] { will-change: translate, scale, opacity; }
[data-reveal-delay="1"] { transition-delay: .08s; } [data-reveal-delay="2"] { transition-delay: .16s; } [data-reveal-delay="3"] { transition-delay: .24s; }

/* ---------- the sheet (product UI on paper) ---------- */
.sheet { background: var(--sheet); border-radius: 14px; box-shadow: var(--shadow-sheet); overflow: hidden; position: relative; font-size: 15px; }
.sheet-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font: 500 12px/1 var(--mono); color: var(--ink-3); letter-spacing: .03em; }
.sheet-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); }
.sheet-bar .grow { flex: 1; }
.sheet-bar .chip { font-size: 11px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); }
.sheet-body { padding: 22px 22px 24px; }
.sheet-title { font: 600 19px/1.25 var(--sans); letter-spacing: -.01em; margin: 0 0 4px; }
.type-pill { display: inline-block; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); vertical-align: middle; }
.field { padding: 14px 0; border-top: 1px solid var(--rule); }
.field:first-of-type { border-top: 0; }
.field > .label { display: flex; justify-content: space-between; margin-bottom: 8px; }
.field p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.field ul { margin: 0; padding: 0; list-style: none; }
.field li { position: relative; padding: 3px 0 3px 18px; color: var(--ink-2); line-height: 1.5; }
.field li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 6px; height: 1px; background: var(--ink-3); }
.field li b { color: var(--ink); font-weight: 600; }
.kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: 10px; margin: 14px 0 6px; }
.kv div { padding: 10px 12px; border-left: 1px solid var(--rule); }
.kv div:first-child { border-left: 0; }
.kv span { display: block; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.kv b { font-weight: 600; font-size: 14px; }
.ui-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 500 13.5px/1 var(--sans); border: 0; }
.ui-btn.quiet { background: transparent; color: var(--ink); border: 1px solid var(--rule-2); }
.ui-btn kbd { font: 500 11px/1 var(--mono); opacity: .6; }
.ui-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fade-line { color: var(--ink-4); }
.caret { display: inline-block; width: 1.5px; height: 1.05em; background: var(--ink); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.status { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--mono); color: var(--ink-3); }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--rule-2); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.recdot { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 0 rgba(217,45,32,.5); animation: pulse 1.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(217,45,32,0); } 100% { box-shadow: 0 0 0 0 rgba(217,45,32,0); } }
.levels { display: flex; align-items: center; gap: 3px; height: 28px; }
.levels i { display: block; width: 3px; border-radius: 2px; background: var(--ink); height: 20%; transition: height .12s; }
.mono { font-family: var(--mono); }
.ui-btn svg, .pill svg, .lang svg, .status svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.glance.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono); letter-spacing: .04em; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--rule-2); color: var(--ink-2); white-space: nowrap; }
.pill.overdue { border-color: color-mix(in srgb, var(--rec) 45%, transparent); color: var(--rec); }
.pill.today { border-color: var(--ink); color: var(--ink); }
.pill.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.ex-tag { position: absolute; top: 12px; right: 14px; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.replay { position: absolute; right: 12px; bottom: 12px; display: inline-flex; gap: 6px; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--rule); font: 500 12px/1 var(--mono); color: var(--ink-3); cursor: pointer; opacity: 0; transition: opacity .3s; }
.replay svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.played .replay { opacity: 1; }
.replay:hover { color: var(--ink); border-color: var(--ink); }

/* steps that appear inside demos */
[data-step] { transition: opacity .5s var(--ease), transform .5s var(--ease), max-height .6s var(--ease); }
.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.collapsed { max-height: 0 !important; overflow: hidden; opacity: 0; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-width: 0 !important; }

/* ---------- HERO ---------- */
.hero { padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 6vw, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.hero-copy { padding-top: 64px; }
.hero .display { margin-bottom: clamp(36px, 4vw, 56px); max-width: 1100px; }
.hero-kicker { display: block; margin-bottom: 26px; }
.ghost .field i { display: block; height: 9px; border-radius: 5px; background: var(--paper-2); margin: 4px 0 8px; }
.ghost .field i.s { width: 62%; }
.ghost .label { color: var(--ink-4); }
.hero-copy > .label { margin-bottom: 28px; display: block; }
.hero .lede { margin-bottom: 36px; }
.lede-short { display: none; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 26px; }
.hero-stage { position: relative; }
.hero-stage .ctx { margin-bottom: 18px; }
.hero-sheet { min-height: 470px; }
.hero-sheet .sheet-body { min-height: 420px; }
.transcript { font-size: 14.5px; line-height: 1.6; }
.transcript p { margin: 0 0 10px; color: var(--ink-2); }
.transcript p b { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 3px; }
.rawnote { font: 400 14px/1.7 var(--mono); color: var(--ink-2); white-space: pre-wrap; margin: 0; }
.hero-rec { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 18px; }
.hero-rec .t { font: 500 20px/1 var(--mono); letter-spacing: .02em; }
.hero-rec .grow { flex: 1; }
.fly { position: fixed; z-index: 70; pointer-events: none; font-size: 13px; padding: 2px 6px; border-radius: 4px; background: var(--mark); color: #16140f; box-shadow: 0 8px 20px rgba(40,30,10,.2); transition: transform .7s var(--ease), opacity .7s var(--ease); white-space: nowrap; }

/* ---------- PLATE (editorial photo) ---------- */
.plate { position: relative; margin: 0; }
.plate img { width: 100%; height: clamp(380px, 62vw, 760px); object-fit: cover; filter: saturate(.82) contrast(1.02) sepia(.06); }
.plate-cap { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0 0; }
.plate-cap .label { color: var(--ink-4); }
.moment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.moment-text .h2 { margin-bottom: 26px; }
.moment-text p.big { font: 400 clamp(24px, 2.3vw, 30px)/1.35 var(--serif); color: var(--ink-2); margin: 0 0 26px; }
.moment-text p.turn { font: italic 400 clamp(28px, 2.8vw, 38px)/1.2 var(--serif); margin: 0; }

/* ---------- CHAPTER I: ways in ---------- */
.ways { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ways-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ways-list li { border-bottom: 1px solid var(--rule); }
.ways-list button { width: 100%; text-align: left; background: none; border: 0; padding: 20px 0; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px 12px; align-items: baseline; color: var(--ink-3); transition: color .3s; }
.ways-list button .n { font: 500 12px/1 var(--mono); }
.ways-list button .t { font: 400 30px/1.1 var(--serif); color: inherit; }
.ways-list button .who { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ways-list button .d { grid-column: 2 / 4; font-size: 15px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s; color: var(--ink-2); }
.ways-list button[aria-selected="true"] { color: var(--ink); }
.ways-list button[aria-selected="true"] .d { max-height: 80px; opacity: 1; }
.ways-list .bar { grid-column: 1 / 4; height: 1px; background: var(--rule); position: relative; overflow: hidden; margin-top: 6px; opacity: 0; }
.ways-list button[aria-selected="true"] .bar { opacity: 1; }
.ways-list .bar i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.ways-stage { position: sticky; top: 110px; }
.ways-stage .sheet { min-height: 440px; }
.ways-foot { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.yt-input { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rule-2); border-radius: 10px; padding: 12px 14px; font: 400 14px/1 var(--mono); }
.yt-input svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; flex: none; }
.facts { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.cam { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: #222; }
.cam img { width: 100%; height: 100%; object-fit: cover; }
.cam .frame { position: absolute; inset: 14px; border: 1.5px solid rgba(255,255,255,.8); border-radius: 8px; }
.cam .scanline { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--mark); box-shadow: 0 0 18px var(--mark); top: 14px; opacity: 0; }
.cam.scanning .scanline { opacity: 1; animation: scan 1.6s var(--ease) infinite; }
@keyframes scan { 0% { top: 14px; } 100% { top: calc(100% - 16px); } }
.filechip { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--rule-2); border-radius: 12px; padding: 18px; }
.filechip .ic { width: 40px; height: 48px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--rule); display: grid; place-items: center; font: 600 10px/1 var(--mono); color: var(--ink-2); }
.tiles4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tiles4 div { border: 1px solid var(--rule); border-radius: 10px; padding: 12px; }
.tiles4 b { display: block; font-size: 14px; font-weight: 600; }
.tiles4 span { font-size: 12.5px; color: var(--ink-3); }

/* ---------- CHAPTER II: specimen ---------- */
.specimen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.specimen-notes { list-style: none; margin: 0; padding: 0; }
.specimen-notes li { padding: 26px 0 26px 0; border-top: 1px solid var(--rule); opacity: .38; transition: opacity .5s; }
.specimen-notes li.on { opacity: 1; }
.specimen-notes li .label { display: block; margin-bottom: 10px; }
.specimen-notes li p { margin: 0; font: 400 24px/1.3 var(--serif); }
.specimen-notes li small { display: block; margin-top: 8px; font-size: 14.5px; color: var(--ink-3); }
.specimen-sheet { position: sticky; top: 100px; }
.specimen-sheet .field { transition: background .5s, opacity .5s; border-radius: 6px; }
.specimen-sheet.focusing .field { opacity: .35; }
.specimen-sheet.focusing .field.focus { opacity: 1; }
.specimen-sheet .field.focus > .label { color: var(--ink); }
.before-after { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: clamp(56px, 7vw, 96px); }
.before-after > div { padding: 28px 28px 30px 0; }
.before-after > div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.before-after p { font: 400 clamp(22px, 2.2vw, 28px)/1.3 var(--serif); margin: 10px 0 0; }

/* ---------- CHAPTER III: thread ---------- */
.thread { position: relative; }
.thread::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--rule-2); }
.thread-fill { position: absolute; left: 0; top: 8px; width: 1px; background: var(--ink); height: 0; transition: height .2s linear; }
.beat { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); padding: 0 0 clamp(72px, 9vw, 128px) clamp(28px, 4vw, 56px); position: relative; align-items: start; }
.beat:last-child { padding-bottom: 0; }
.beat::before { content: ""; position: absolute; left: -5px; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink-3); transition: background .4s, border-color .4s; }
.beat.lit::before { background: var(--ink); border-color: var(--ink); }
.beat .label { display: block; margin-bottom: 14px; }
.beat .h3 { margin-bottom: 16px; }
.beat .flow { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.beat .flow li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); }
.beat .flow li span { font: 500 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.beat .after { margin-top: 18px; }
.msg { border: 1px solid var(--rule); border-radius: 12px 12px 12px 4px; padding: 12px 14px; background: var(--sheet-2); max-width: 88%; font-size: 15px; }
.msg small { display: block; font: 500 11px/1 var(--mono); color: var(--ink-3); margin-bottom: 6px; letter-spacing: .04em; }
.kb { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; font-size: 13.5px; color: var(--ink-2); margin: 14px 0; }
.kb svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.7; }
.select { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; border: 1px solid var(--rule); padding: 7px 10px; border-radius: 8px; color: var(--ink-2); }
.draft { border-left: 2px solid var(--ink); padding: 4px 0 4px 14px; margin: 14px 0; color: var(--ink); line-height: 1.6; min-height: 5em; }
.email { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.email-head { padding: 12px 14px; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); display: grid; gap: 4px; }
.email-head b { color: var(--ink); font-weight: 600; }
.email-body { padding: 14px; font-size: 14px; color: var(--ink-2); white-space: pre-line; line-height: 1.55; }
.list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.list-row b { display: block; font-weight: 600; font-size: 14.5px; }
.list-row span { font-size: 13px; color: var(--ink-3); }
.board { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.col { background: var(--sheet-2); border: 1px solid var(--rule); border-radius: 10px; padding: 10px; min-height: 150px; }
.col-h { display: flex; justify-content: space-between; font: 500 10.5px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 10px; font-size: 13px; box-shadow: 0 1px 2px rgba(40,30,10,.06); transition: transform .7s var(--ease), opacity .4s; }
.card b { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.card b i { width: 20px; height: 20px; border-radius: 6px; background: var(--ink); color: var(--paper); font: 600 11px/20px var(--brand); text-align: center; font-style: normal; }
.card span { display: block; color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.card + .card { margin-top: 6px; }
.col.target { border-color: var(--ink); }

/* ---------- by hand vs with AfterCall ---------- */
.byhand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule); }
.byhand-row { display: contents; }
.byhand-row > div { padding: 22px 0; border-bottom: 1px solid var(--rule); font: 400 clamp(21px, 2.2vw, 28px)/1.3 var(--serif); }
.byhand-row > div:first-child { color: var(--ink-3); padding-right: 32px; }
.byhand-row > div:last-child { padding-left: 32px; border-left: 1px solid var(--rule); }
.strike { background-image: linear-gradient(var(--ink-3), var(--ink-3)); background-size: 0% 1.5px; background-position: 0 58%; background-repeat: no-repeat; transition: background-size 1s var(--ease); }
.in .strike, .strike.on { background-size: 100% 1.5px; }
.byhand-head { display: contents; }
.byhand-head > div { padding: 0 0 14px; border-bottom: 1px solid var(--rule); }
.byhand-head > div:last-child { padding-left: 32px; border-left: 1px solid var(--rule); }

/* ---------- trust rows ---------- */
.trust-rows { border-top: 1px solid var(--rule); }
.trust-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.trust-row h3 { font: 400 26px/1.15 var(--serif); margin: 0; }
.trust-row p { margin: 0; color: var(--ink-2); }
.trust-row .label { display: block; margin-bottom: 8px; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.plan { padding: 28px 28px 32px 0; }
.plan + .plan { padding-left: 28px; border-left: 1px solid var(--rule); }
.plan .h3 { margin: 6px 0 14px; }
.plan .price { font: 400 54px/1 var(--serif); letter-spacing: -.01em; }
.plan .price small { font: 400 15px/1 var(--sans); color: var(--ink-3); margin-left: 6px; }
.plan p { color: var(--ink-2); margin: 14px 0 22px; min-height: 3.2em; }
.plan ul { list-style: none; padding: 0; margin: 0 0 26px; border-top: 1px solid var(--rule); }
.plan li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); display: flex; gap: 10px; }
.plan li::before { content: "✓"; color: var(--ink); font-size: 13px; }
.plan li.no { color: var(--ink-4); }
.plan li.no::before { content: "–"; color: var(--ink-4); }
.plan .tag { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.confirm { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .04em; color: var(--rec); border: 1px dashed color-mix(in srgb, var(--rec) 55%, transparent); padding: 3px 7px; border-radius: 999px; cursor: help; }
.cycle { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper-2); margin-bottom: 36px; }
.cycle button { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 14px; color: var(--ink-3); }
.cycle button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cmp th { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cmp td:not(:first-child) { color: var(--ink-2); }
.cmp tr.grp td { font: 400 22px/1.2 var(--serif); padding-top: 34px; color: var(--ink); }
.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.glance > div { padding: 26px 24px 26px 0; }
.glance > div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.glance .price { font: 400 44px/1 var(--serif); margin: 10px 0 12px; }
.glance p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; padding: 24px 0; font: 400 clamp(21px, 2vw, 25px)/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 28px; height: 28px; border: 1px solid var(--rule-2); border-radius: 50%; position: relative; transition: transform .3s var(--ease), background .3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 8px; top: 13px; width: 10px; height: 1.5px; background: var(--ink); }
.faq summary i::after { transform: rotate(90deg); transition: transform .3s; }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { margin: 0 0 26px; max-width: 700px; color: var(--ink-2); }

/* ---------- final ---------- */
.final { position: relative; overflow: hidden; color: #fffaf0; }
.final img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.55) sepia(.12); }
.final .wrap { position: relative; padding: clamp(120px, 16vw, 220px) var(--gut); text-align: center; }
.final .display { margin: 0 auto 32px; max-width: 900px; }
.final .btn-ink { background: #fffaf0; color: #16140f; }
.final p { color: rgba(255,250,240,.8); margin: 0 auto 36px; max-width: 520px; }

/* ---------- footer ---------- */
.foot { background: var(--paper-2); border-top: 1px solid var(--rule); padding: 88px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-grid h4 { font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 6px 0 18px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { text-decoration: none; color: var(--ink-2); font-size: 15px; }
.foot-grid a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot-grid a.btn-ink, .foot-grid a.btn-ink:hover { color: var(--paper); text-decoration: none; }
.foot-tag { font: 400 30px/1.15 var(--serif); margin: 22px 0 22px; max-width: 320px; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-3); }
.lang { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule-2); border-radius: 999px; padding: 7px 12px; background: transparent; color: var(--ink-2); font-size: 13.5px; }
.lang select { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.theme-btn { border: 1px solid var(--rule-2); background: transparent; border-radius: 999px; padding: 7px 12px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }

/* ---------- page heroes (inner pages) ---------- */
.page-hero { padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 7vw, 96px); }
.page-hero .label { display: block; margin-bottom: 24px; }
.page-hero .h1 { max-width: 980px; margin-bottom: 26px; }
.page-hero .lede { margin-bottom: 34px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.top { align-items: start; }
.week { border-top: 1px solid var(--ink); }
.day { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; padding: 34px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.day .when { font: italic 400 30px/1 var(--serif); }
.day .when small { display: block; font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; }
.day h3 { font: 400 26px/1.15 var(--serif); margin: 0 0 10px; }
.day p { margin: 0; color: var(--ink-2); }

/* legal */
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding-bottom: 120px; }
.legal-toc { position: sticky; top: 100px; align-self: start; display: grid; gap: 4px; }
.legal-toc a { font-size: 14px; color: var(--ink-3); text-decoration: none; padding: 5px 0 5px 14px; border-left: 1px solid var(--rule); }
.legal-toc a:hover { color: var(--ink); border-color: var(--ink); }
.legal-body { max-width: 720px; font-size: 17px; }
.legal-body h2 { font: 400 32px/1.15 var(--serif); margin: 56px 0 14px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--ink-2); }
.legal-body a { text-underline-offset: 3px; }

/* auth */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
.auth-main { padding: 40px clamp(24px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.auth-form { width: 100%; max-width: 400px; margin: 0 auto; }
.auth-form .h3 { margin-bottom: 8px; }
.auth-form > p { color: var(--ink-3); margin: 0 0 28px; }
.oauth { display: grid; gap: 10px; }
.oauth button { height: 50px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--sheet); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15.5px; cursor: pointer; }
.oauth button:hover { border-color: var(--ink); }
.oauth svg { width: 18px; height: 18px; }
.or { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--ink-4); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.inp { display: block; margin-bottom: 16px; }
.inp span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.inp input { width: 100%; height: 50px; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--sheet); padding: 0 14px; font: 400 16px var(--sans); color: var(--ink); }
.inp input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--mark-soft); }
.inp small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 6px; }
.auth-form .btn { width: 100%; justify-content: center; margin-top: 8px; }
.auth-alt { text-align: center; color: var(--ink-3); font-size: 15px; margin-top: 22px; }
.auth-note { font-size: 13px; color: var(--ink-3); margin-top: 28px; line-height: 1.55; }
.check { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--ink-2); margin: 4px 0 18px; }
.check label { display: flex; gap: 8px; align-items: center; }
.proto-note { font: 500 11.5px/1.4 var(--mono); color: var(--rec); margin-top: 14px; text-align: center; }

/* error */
.err { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 80px 0; }
.err .numeral { font-size: 120px; color: var(--ink-4); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav-links a { padding: 8px 9px; font-size: 14.5px; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .trust-row { grid-template-columns: 180px 1fr; }
  .trust-row > div:last-child { grid-column: 2; }
}
@media (max-width: 900px) {
  :root { --gut: 16px; }
  body { font-size: 16.5px; }
  .nav-in { grid-template-columns: 1fr auto; height: 60px; }
  .nav-mid, .nav-links, .nav-right .nav-login, .chapters, .nav.in-chapters .chapters { display: none; }
  .nav-burger { display: grid; }
  .mobile-menu { display: block; position: fixed; inset: var(--mm-top, 94px) 0 0 0; background: var(--paper); z-index: 49; padding: 24px 16px 40px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); overflow: auto; }
  .menu-open .mobile-menu { opacity: 1; transform: none; pointer-events: auto; }
  .mobile-menu a.big { display: block; font: 400 36px/1.1 var(--serif); padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
  .mobile-menu .mm-cta { display: grid; gap: 10px; margin-top: 28px; }
  .mobile-menu .mm-cta .btn { justify-content: center; }
  .hero-grid, .moment, .ways, .specimen, .beat, .split { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-top: 0; }
  .lede-long { display: none; }
  .lede-short { display: block; margin-bottom: 24px !important; }
  .hero .micro { display: none; }
  .hero .hero-cta { margin-bottom: 28px; }
  .hero-sheet, .hero-sheet .sheet-body { min-height: 0; }
  .hero-sheet .sheet-body { min-height: 420px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sec-head .numeral { font-size: 44px; }
  .ways-stage, .specimen-sheet { position: relative; top: 0; }
  .ways-list button .t { font-size: 26px; }
  .ways-list button { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .specimen-notes { order: 2; }
  .specimen-notes li { opacity: 1; padding: 18px 0; }
  .specimen-notes li p { font-size: 21px; }
  .beat { padding-left: 24px; gap: 24px; }
  .before-after, .glance, .glance.g4, .plans { grid-template-columns: minmax(0, 1fr); }
  .before-after > div + div, .glance > div + div, .plan + .plan { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .before-after > div { padding: 22px 0; }
  .plan { padding: 26px 0 30px; }
  .byhand { grid-template-columns: minmax(0, 1fr); }
  .byhand-head > div:last-child { display: none; }
  .byhand-row > div:first-child { padding: 18px 0 4px; border-bottom: 0; font-size: 19px; }
  .byhand-row > div:last-child { padding: 0 0 18px; border-left: 0; }
  .byhand-row > div:last-child::before { content: "→ "; color: var(--ink-3); }
  .trust-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0; }
  .trust-row > div:last-child { grid-column: auto; }
  .kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kv div:nth-child(3) { border-left: 0; }
  .kv div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .day { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .legal { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .legal-toc { position: relative; top: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth-main { padding: calc(88px + env(safe-area-inset-top, 0px)) 16px 64px; }
  .plate img { height: 420px; }
  .cmp { font-size: 14px; }
  .cmp-wrap { overflow-x: auto; }
  .board { grid-template-columns: repeat(6, 132px); }
  .ctx .label { display: none; }
}
@media (max-width: 420px) {
  .display { font-size: 44px; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .fx-words .fxw { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---------- first-arrival reveal (ported from app.css, same behaviour) ---------- */
.ac-arrival { display: none; }
html[data-arrival] .ac-arrival { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; background: var(--paper); animation: ac-arrival-out .7s cubic-bezier(.65, 0, .35, 1) 1.15s forwards !important; }
html[data-arrival] .ac-arrival.is-skipping { animation: ac-arrival-out .26s ease forwards !important; }
.ac-arrival-lockup { display: flex; align-items: center; gap: 14px; }
html[data-arrival] .ac-arrival-lockup { animation: ac-arrival-in .8s cubic-bezier(.16, 1, .3, 1) .08s both, ac-arrival-lift .7s cubic-bezier(.65, 0, .35, 1) 1.15s forwards !important; }
.ac-arrival-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--ink); color: var(--paper); font: 700 24px/1 var(--brand); }
.ac-arrival-name { font: 600 34px/1 var(--brand); letter-spacing: -.03em; color: var(--ink); }
@keyframes ac-arrival-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ac-arrival-lift { from { transform: none; } to { transform: translateY(-14px) scale(.98); } }
@keyframes ac-arrival-out { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes ac-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ac-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-arrival] .nav { animation: ac-fade .8s ease 1.3s both !important; }
html[data-arrival] .hero-kicker { animation: ac-rise .85s cubic-bezier(.16, 1, .3, 1) 1.36s both !important; }
html[data-arrival] .hero .display { animation: ac-rise .85s cubic-bezier(.16, 1, .3, 1) 1.43s both !important; }
html[data-arrival] .hero-copy { animation: ac-rise .85s cubic-bezier(.16, 1, .3, 1) 1.52s both !important; }
html[data-arrival] .hero-stage { animation: ac-rise .95s cubic-bezier(.16, 1, .3, 1) 1.62s both !important; }
html[data-arrival] .auth-main { animation: ac-fade .8s ease 1.3s both !important; }
html[data-arrival-calm] .ac-arrival-lockup { animation: ac-fade .6s ease .08s both !important; }
html[data-arrival-calm] .hero-kicker, html[data-arrival-calm] .hero .display, html[data-arrival-calm] .hero-copy, html[data-arrival-calm] .hero-stage { animation-name: ac-fade !important; }

/* ---------- footer languages ---------- */
.foot-langs { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.foot-langs a { color: var(--ink-3); text-decoration: none; font-size: 13.5px; }
.foot-langs a:hover, .foot-langs a.on { color: var(--ink); }
.foot-langs svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-3); stroke-width: 1.7; }

/* ---------- auth pages (keeps the existing form markup / class names) ---------- */
.site-auth .auth-form-wrap { width: 100%; max-width: 400px; margin: 0 auto; }
.site-auth .auth-title { font: 400 clamp(34px, 3vw, 42px)/1.05 var(--serif); margin: 0 0 22px; }
.site-auth .auth-error, .site-auth .auth-success { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; font-size: 14.5px; margin-bottom: 18px; line-height: 1.5; }
.site-auth .auth-error { background: color-mix(in srgb, var(--rec) 9%, var(--sheet)); color: color-mix(in srgb, var(--rec) 80%, var(--ink)); border: 1px solid color-mix(in srgb, var(--rec) 30%, transparent); }
.site-auth .auth-success { background: color-mix(in srgb, var(--ok) 8%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ink); }
.site-auth .auth-error svg, .site-auth .auth-success svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; margin-top: 1px; }
.site-auth .oauth-btn-row { display: grid; gap: 10px; }
.site-auth .oauth-btn { height: 50px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--sheet); display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 15.5px/1 var(--sans); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.site-auth .oauth-btn:hover { border-color: var(--ink); }
.site-auth .oauth-icon { width: 18px; height: 18px; }
.site-auth .oauth-icon-apple { fill: currentColor; }
.site-auth .oauth-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--ink-4); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.site-auth .oauth-divider::before, .site-auth .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.site-auth .auth-sub { color: var(--ink-3); margin: 0 0 22px; }
.site-auth .auth-field { display: block; margin-bottom: 16px; }
.site-auth .auth-field > span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.site-auth .auth-field input { width: 100%; height: 50px; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--sheet); padding: 0 14px; font: 400 16px var(--sans); color: var(--ink); }
.site-auth .auth-field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--mark-soft); }
.site-auth .auth-field small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 6px; }
.site-auth .auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); margin: 4px 0 18px; }
.site-auth .auth-row a { color: var(--ink-2); }
.site-auth .auth-check { display: flex; gap: 8px; align-items: center; }
.site-auth .auth-submit { width: 100%; height: 50px; border-radius: 999px; border: 0; background: var(--ink); color: var(--paper); font: 500 16px/1 var(--sans); cursor: pointer; margin-top: 8px; transition: transform .2s var(--ease); }
.site-auth .auth-submit:active { transform: scale(.98); }
.site-auth .auth-alt { text-align: center; color: var(--ink-3); font-size: 15px; margin-top: 22px; }
.site-auth .auth-alt a { color: var(--ink); }
.site-auth .auth-privacy-note { font-size: 13px; color: var(--ink-3); margin-top: 28px; line-height: 1.55; }
.site-auth .auth-foot { font-size: 13px; color: var(--ink-3); margin: 34px 0 0; text-align: center; line-height: 1.7; }
.site-auth .auth-foot a { color: var(--ink-3); }
.site-auth .auth-theme { position: absolute; top: 20px; right: 20px; }
.site-auth .auth-logo { position: absolute; top: 20px; left: clamp(16px, 3vw, 32px); }
.site-auth .auth-main { position: relative; }

/* ---------- legal TOC built by site.js ---------- */
.legal-toc:empty { display: none; }

/* ---------- header: language menu + light/dark (2026-10-06) ---------- */
.nav-right { gap: 8px; }
.langdd { position: relative; }
.langdd > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule-2); font: 500 12.5px/1 var(--mono); letter-spacing: .04em; color: var(--ink-2); cursor: pointer; user-select: none; }
.langdd > summary::-webkit-details-marker { display: none; }
.langdd > summary:hover, .langdd[open] > summary { border-color: var(--ink); color: var(--ink); }
.langdd > summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.langdd-menu { position: absolute; right: 0; top: 46px; min-width: 190px; padding: 6px; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow-sheet); z-index: 70; }
.langdd-menu a { display: flex; justify-content: space-between; gap: 18px; padding: 9px 10px; border-radius: 9px; font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.langdd-menu a:hover, .langdd-menu a[aria-current] { background: var(--paper-2); color: var(--ink); }
.langdd-menu a i { font: 500 11px/1.6 var(--mono); font-style: normal; color: var(--ink-4); }
.theme-ico { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule-2); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.theme-ico:hover { border-color: var(--ink); color: var(--ink); }
.theme-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-ico .sun { display: none; }
:root[data-theme="dark"] .theme-ico .sun { display: block; }
:root[data-theme="dark"] .theme-ico .moon { display: none; }
.mm-prefs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.mobile-menu a.big[aria-current] { font-style: italic; }
@media (max-width: 1080px) { .nav-right .nav-login { display: none; } }
@media (max-width: 900px) { .nav-right .langdd, .nav-right .theme-ico { display: none; } }

/* ---------- iPhone status bar (2026-10-07) ----------
   The pages use viewport-fit=cover, so when AfterCall runs full screen
   (added to the Home Screen) or the browser draws the page under the
   status bar, the top of the page sat behind the clock, signal and
   battery. Push the header — and the login / sign-up pages' first panel —
   down by the status bar's height. env() is 0 everywhere else. */
html { scroll-padding-top: calc(90px + env(safe-area-inset-top, 0px)); }
.nav { padding-top: env(safe-area-inset-top, 0px); }
.site-auth .auth-theme, .site-auth .auth-logo { top: calc(20px + env(safe-area-inset-top, 0px)); }

/* ---------- floating header (2026-10-13) ----------
   The header is a slim pill that sits just off the top edge, centred, with
   no rule under it: a soft translucent surface, a hairline ring and a
   shadow. Everything inside is sized down to fit its 48px. On phones the
   open menu covers the whole screen behind it. */
.nav { top: calc(8px + env(safe-area-inset-top, 0px)); width: min(1040px, calc(100% - 24px)); margin: calc(8px + env(safe-area-inset-top, 0px)) auto 0; padding-top: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--sheet) 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 14px 30px -22px rgba(10, 10, 12, .5); transition: background-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease); }
.nav.scrolled { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 11%, transparent), 0 16px 34px -20px rgba(10, 10, 12, .6); }
.nav-in { max-width: none; height: 48px; padding-inline: 16px 7px; gap: 12px; }
.nav .logo { gap: 9px; font-size: 16.5px; }
.nav .logo i { width: 24px; height: 24px; border-radius: 7px; font-size: 13px; }
.nav .nav-links a { padding: 6px 11px; font-size: 14.5px; }
.nav .nav-right { gap: 6px; }
.nav .nav-right .nav-login { padding: 6px 10px; font-size: 14.5px; }
.nav .btn-sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.nav .langdd > summary { height: 32px; padding: 0 10px; font-size: 12px; }
.nav .theme-ico { width: 32px; height: 32px; }
.nav .theme-ico svg { width: 15px; height: 15px; }
.nav .nav-burger { width: 34px; height: 34px; }
@media (max-width: 900px) {
  .nav { width: calc(100% - 20px); }
  .nav-in { height: 46px; padding-inline: 14px 6px; }
  .mobile-menu { inset: 0; padding-top: calc(var(--mm-top, 94px) + 18px); }
}