/* Palette and type from src/theme.ts: near-white ground, black ink and buttons, grey secondary
   text. Colour only where it means something: the streak flame, likes, the olive night. */
:root {
  --ground: #F6F6F8;
  --card: #FFFFFF;
  --ink: #111111;
  --ink-soft: #3A3A3C;
  --muted: #8E8E93;
  --faint: #C7C7CC;
  --line: #E8E8EC;
  --chip: #EFEFF2;
  --flame: #F0612A;
  --heart: #E5484D;
  --gold: #D8B66A;
  --night-1: #36442B;
  --night-2: #222C1B;
  --night-3: #141A10;
  --paper-ink: #F4F1E6;
  --serif: 'Lora', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --out: cubic-bezier(0.33, 1, 0.68, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 10px 22px rgba(0, 0, 0, 0.12);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); }

/* ---------- type ---------- */
.eyebrow { font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.display { font: 400 clamp(46px, 7vw, 88px)/1.04 var(--serif); letter-spacing: -0.02em; margin-top: 18px; }
.display em { font-style: italic; font-weight: 700; }
.lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 30em; margin-top: 22px; }
.h2 { font: 400 clamp(34px, 4.4vw, 54px)/1.12 var(--serif); letter-spacing: -0.015em; margin-top: 14px; }
.h3 { font: 400 clamp(30px, 3.2vw, 40px)/1.18 var(--serif); letter-spacing: -0.01em; }
.sub { font-size: 17px; line-height: 1.55; color: var(--muted); margin-top: 14px; max-width: 34em; }
.micro { font-size: 13px; color: var(--muted); margin-top: 18px; }
.section-head { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* ---------- Rise (src/motion/kit.tsx): fade and lift 14px over 420ms, cubic out ---------- */
.rise { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--out) var(--d, 0ms), transform 420ms var(--out) var(--d, 0ms); }
.rise.in { opacity: 1; transform: none; }

/* ---------- buttons (PressScale: dips to 0.97 while held, springs back) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 26px; border-radius: 16px; font: 600 16px/1 var(--sans); white-space: nowrap; }
.btn-sm { height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.btn-dark { background: #0B0B0C; color: #fff; }
.btn-dark:hover { background: #26262a; }
.btn-ghost { background: var(--card); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--faint); }
.btn-store { gap: 10px; padding: 0 22px 0 18px; text-align: left; }
.btn-store-text { display: flex; flex-direction: column; font: 600 18px/1.05 var(--sans); }
.btn-store-text small { font: 500 11px/1.2 var(--sans); opacity: 0.75; }
.press { transition: transform 300ms var(--spring), background-color 160ms; }
.press:active { transform: scale(0.97); transition-duration: 90ms; transition-timing-function: ease-out; }
.arrow-down { display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; padding: 0 max(16px, calc((100% - 1180px) / 2)); background: rgba(246, 246, 248, 0.78); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms, box-shadow 200ms; }
.nav.scrolled { border-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { display: grid; place-items: center; }
.brand-name { font: 500 17px/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-links { display: flex; gap: 28px; font-size: 14.5px; color: var(--ink-soft); }
.nav-links a { position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--out); }
.nav-links a:hover::after { transform: scaleX(1); }
@media (max-width: 860px) { .nav-links { display: none; } }
@media (max-width: 420px) { .brand-name { font-size: 15px; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(32px, 6vw, 72px) 0 clamp(56px, 8vw, 110px); }
.hero-glow { position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, rgba(233, 162, 59, 0.13), rgba(233, 162, 59, 0) 62%); pointer-events: none; }
.hero-watermark { position: absolute; right: -14vw; top: 50%; width: 62vw; max-width: 820px; aspect-ratio: 1; transform: translateY(-50%); opacity: 0.028; pointer-events: none; animation: turn 160s linear infinite; }
.hero-watermark svg { width: 100%; height: 100%; }
@keyframes turn { to { transform: translateY(-50%) rotate(360deg); } }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.hero-mark { height: 56px; margin-bottom: 18px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-stage { position: relative; display: grid; place-items: center; padding: 20px 0; }
.hero-phone { width: min(320px, 74vw); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-mark { display: flex; justify-content: center; }
  .lead { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
}

/* floating cards bob gently around the hero phone */
.float-card { position: absolute; z-index: 3; background: var(--card); border-radius: 18px; box-shadow: var(--shadow-lift); animation: bob 6s ease-in-out infinite; }
.fc-streak { left: max(0px, calc(50% - 260px)); top: 18%; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; animation-delay: -1s; }
.fc-streak b { display: block; font: 700 20px/1 var(--sans); }
.fc-streak small { display: block; font: 500 9.5px/1.4 var(--sans); letter-spacing: 0.1em; color: var(--ink-soft); margin-top: 3px; }
.fc-flame { width: 34px; height: 34px; border-radius: 50%; background: var(--flame); display: grid; place-items: center; }
.fc-verse { right: max(0px, calc(50% - 300px)); bottom: 4%; width: 210px; padding: 14px 16px; animation-duration: 7s; animation-delay: -3s; }
.fc-verse small { display: block; font: 600 9.5px/1 var(--sans); letter-spacing: 0.12em; color: var(--muted); margin-bottom: 8px; }
.fc-verse span { font: italic 400 14px/1.45 var(--serif); color: #3A3022; }
.fc-heart { right: max(10px, calc(50% - 215px)); top: 9%; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; animation-duration: 5s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-10px) rotate(1.2deg); } }
@media (max-width: 560px) {
  .fc-verse { width: 170px; right: 0; bottom: 6%; }
  .fc-streak { left: 0; top: 10%; }
  .fc-heart { right: 4px; top: 4%; }
}

/* ---------- drawn phone (src/mock/PhoneMock.tsx) ---------- */
.phone-slot { container-type: inline-size; }
.phone { position: relative; width: 100%; }
.phone-body { background: #121214; border: 1.5px solid #5E5C58; border-radius: 15cqw; padding: 3.4cqw; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.12); }
.phone-screen { position: relative; width: 100%; aspect-ratio: 360 / 760; border-radius: 11.6cqw; overflow: hidden; background: var(--ground); isolation: isolate; }
.phone-btn { position: absolute; width: 3px; border-radius: 2px; background: #5E5C58; }
.phone-btn.l1 { left: -2px; top: 20%; height: 7%; }
.phone-btn.l2 { left: -2px; top: 30%; height: 7%; }
.phone-btn.r1 { right: -2px; top: 25%; height: 11%; }

/* ---------- the 360×760 demo canvas ---------- */
.canvas { position: absolute; left: 0; top: 0; width: 360px; height: 760px; transform-origin: top left; overflow: hidden; font-family: var(--sans); color: #111; line-height: 1.3; }
.canvas p { margin: 0; }
.canvas .ic { flex: none; }
.abs { position: absolute; inset: 0; }
.abs-top { position: absolute; inset: 0; pointer-events: none; }
.layer { position: absolute; inset: 0; transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 560ms; transform: translateX(100%); }
.layer.is-before { transform: translateX(-28%); opacity: 0; }
.layer.is-active { transform: none; opacity: 1; }
.m-status { position: absolute; z-index: 70; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0; pointer-events: none; }
.m-time { font: 600 14px/1 var(--sans); width: 58px; }
.m-island { width: 96px; height: 28px; border-radius: 14px; background: #000; margin-top: -2px; }
.m-row { display: flex; align-items: center; }
.m-topbar { position: absolute; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; }
.m-pill { height: 30px; padding: 0 10px; border-radius: 15px; background: #fff; border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 3px; }
.m-pilltext { font: 600 12px/1 var(--sans); }
.m-circle { width: 30px; height: 30px; border-radius: 15px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
/* the app's tab bar: a bar along the bottom edge, Scriptures as a raised olive button in the middle */
.m-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; padding: 0 8px 16px; display: flex; align-items: flex-end; }
.m-tabbar-bg { position: absolute; left: 0; right: 0; bottom: 0; height: 66px; background: rgba(255, 255, 255, 0.97); border-top: 1px solid #E7E7E2; }
.m-tab { position: relative; flex: 1; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.m-tablabel { font: 500 10.5px/1 var(--sans); color: #85857F; }
.m-tab.on .m-tablabel { font-weight: 600; color: #3F4A33; }
.m-tab-center { height: 76px; justify-content: space-between; padding-bottom: 5px; }
.m-tab-circle { width: 56px; height: 56px; border-radius: 28px; background: #3F4A33; border: 4px solid #fff; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); }
.m-tab-center.on .m-tab-circle { transform: scale(1.06); }
.m-emblemcard { background: #fff; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); }
.m-versepage { position: relative; width: 360px; }
.m-versewrap { position: absolute; left: 34px; right: 34px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.m-verse { font: 400 18px/27px var(--serif); text-align: center; }
.m-verse.long { font-size: 15.5px; line-height: 23px; }
.m-ref { font: 500 11px/1 var(--sans); letter-spacing: 1.2px; color: var(--muted); margin-top: 14px !important; }
.m-actions { position: absolute; right: 14px; bottom: 150px; display: flex; flex-direction: column; gap: 22px; align-items: center; }
.m-heart { position: relative; display: block; width: 25px; height: 25px; transform-origin: center; }
.m-heart .h-on { display: none; }
.m-heart.liked .h-on { display: block; }
.m-heart.liked .h-off { display: none; }
.m-scrub { position: absolute; left: 6px; width: 14px; pointer-events: none; }
.m-scrub-line { position: absolute; left: 1px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: #E1E1E6; }
.m-scrub-mark { position: absolute; left: 0; top: 0; width: 4px; height: 22px; border-radius: 2px; background: #111; }
.m-auto { position: absolute; left: 50%; transform: translateX(-50%); height: 32px; padding: 0 12px 2px; border-radius: 16px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font: 600 11.5px/1 var(--sans); white-space: nowrap; overflow: hidden; }
.m-auto-track { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--line); }
.m-auto-fill { display: block; height: 100%; width: 0; border-radius: 1px; background: #111; }
/* left-aligned like the app, even inside the centered step text on phones */
.m-study { padding: 0 16px; text-align: left; }
.m-studyverse { font: italic 400 15px/24px var(--serif); color: #26251F; margin-top: 4px !important; }
.m-studychips { display: flex; gap: 5px; margin-top: 10px; }
/* four equal-width buttons on one line, as on the study page */
.m-studychip { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 24px; padding: 0 4px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font: 500 9.5px/1 var(--sans); color: #3A3A37; }
.m-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.m-trycard { margin-top: 16px; padding: 12px; border-radius: 14px; background: #E6E9DF; }
.m-studiedbtn { display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; margin-top: 10px; border-radius: 15px; border: 1.2px solid #3F4A33; font: 600 10.5px/1 var(--sans); color: #3F4A33; }
.m-related { margin-top: 16px; }
.m-seclabel { font: 500 9.5px/1.2 var(--sans); letter-spacing: 1.7px; color: var(--muted); margin-bottom: 5px !important; }
.m-seclabel.m-olive { color: #3F4A33; }
.m-sectext { font: 400 13px/20.5px var(--serif); color: #1C1C1E; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.m-chip { padding: 5px 9px; border-radius: 8px; background: #F1F1F4; font: 500 10.5px/1.2 var(--sans); color: #3A3A3C; }
.m-studyhead { position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); background: #fff; }
.m-back { position: absolute; left: 10px; display: flex; align-items: center; }
.m-studykind { font: 500 9px/1.2 var(--sans); letter-spacing: 1.6px; color: var(--muted); margin-top: 22px !important; }
.m-studyref { font: 500 15px/1.2 var(--serif); margin-top: 2px; }
.m-tap { position: absolute; z-index: 45; width: 44px; height: 44px; border-radius: 22px; background: #8E8E93; opacity: 0; pointer-events: none; }
.m-wash { position: absolute; inset: 0; z-index: 50; background: var(--ground); pointer-events: none; }
.m-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 24px 24px 0 0; padding: 10px 14px 0; transform: translateY(460px); }
.m-grabber { display: block; margin: 0 auto; width: 36px; height: 4px; border-radius: 2px; background: #D9D9DE; }
.m-cancel { position: absolute; left: 14px; top: 18px; padding: 5px 10px; border-radius: 12px; background: #F1F1F4; font: 500 11px/1 var(--sans); }
.m-sheetref { text-align: center; font: 600 15px/1 var(--sans); margin-top: 30px !important; }
.m-sheetex { text-align: center; font: 400 11.5px/16px var(--serif); color: var(--muted); margin-top: 6px !important; padding: 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-sheetrow { position: relative; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 8px; border-bottom: 1px solid #F2F2F4; }
.m-sheetrow > * { position: relative; }
.m-sheetrow > .m-rowhi { position: absolute; background: #EFEFF2; border-radius: 10px; opacity: 0; }
.m-sheetrowtext { flex: 1; font: 400 13.5px/1 var(--sans); }
.m-sheetval { font: 400 12px/1 var(--sans); color: var(--muted); }
.m-endpage { position: relative; width: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.m-endtitle { font: 400 26px/1.2 var(--serif); }
.m-endsub { font: 400 12px/1 var(--sans); color: var(--muted); margin-top: 6px !important; }
.m-blackpill { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; height: 38px; border-radius: 12px; background: #111; color: #fff; font: 600 12.5px/1 var(--sans); }
.m-blackpill.center { display: flex; justify-content: center; }
.m-blackpill.light { background: #F1F1F4; color: #111; }
.m-rail { position: absolute; left: 8px; width: 4px; height: 560px; border-radius: 2px; background: #E6E6EA; }
.m-rail span { display: block; width: 4px; height: 40px; border-radius: 2px; background: #111; }
.m-done { background: #fff; display: flex; flex-direction: column; align-items: center; }
.m-stretch { align-self: stretch; }
.m-donetitle { text-align: center; margin-top: 14px; }
.m-donetitle .t1 { font: 700 26px/1.2 var(--sans); }
.m-donetitle .t2 { font: 600 13px/1.2 var(--sans); margin-top: 4px; }
.m-donetitle .t3 { font: 400 11px/1.2 var(--sans); color: var(--muted); margin-top: 2px; }
.m-donequote { font: 400 12px/17px var(--sans); margin: 6px 0 4px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-donebtns { padding: 0 14px; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.m-greet { font: 700 22px/1.2 var(--sans); margin: 0 0 2px 16px !important; }
.m-band { position: absolute; left: 0; right: 0; top: 0; background: #fff; }
.m-closebubble { position: absolute; right: 14px; width: 28px; height: 28px; border-radius: 14px; background: #F1F1F4; display: grid; place-items: center; }
.clamp3, .clamp4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp3 { -webkit-line-clamp: 3; }
.clamp4 { -webkit-line-clamp: 4; }

/* home cards */
.h-card { margin: 12px 14px 0; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); }
.h-art { border-radius: 12px; overflow: hidden; line-height: 0; flex: none; }
.h-title { font: 700 17px/1.2 var(--sans); }
.h-titlesm { font: 600 14px/1.2 var(--sans); }
.h-sub { font: 600 12px/1.2 var(--sans); margin-top: 4px !important; }
.h-meta { font: 400 11.5px/1.3 var(--sans); color: var(--ink-soft); margin-top: 3px !important; }
.h-faint { font: 400 11px/1.35 var(--sans); color: var(--muted); margin-top: 3px !important; }
.h-track { height: 8px; border-radius: 4px; background: #EEEEF1; margin-top: 12px; overflow: hidden; }
.h-fill { height: 8px; border-radius: 4px; background: #111; }
.h-flame { width: 36px; height: 36px; border-radius: 18px; background: var(--flame); display: grid; place-items: center; flex: none; }
.h-flame.sm { width: 28px; height: 28px; }
.h-big { font: 700 20px/22px var(--sans); display: inline-block; }
.h-caps { font: 500 9.5px/1.3 var(--sans); letter-spacing: 1px; color: var(--ink-soft); }
.h-week { display: flex; justify-content: space-between; margin-top: 10px; }
.h-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.h-day > span:first-child { font: 400 9px/1 var(--sans); color: var(--muted); }
.h-dot { position: relative; width: 22px; height: 22px; border-radius: 11px; background: #EEEEF1; display: grid; place-items: center; }
.h-dot.on { background: var(--flame); }
.h-dot.today { border: 2px solid #fff; box-shadow: 0 0 4px rgba(240, 97, 42, 0.6); }
.h-dot > .h-dot.pop { position: absolute; inset: 0; opacity: 0; }
.h-saved { width: 30px; height: 30px; border-radius: 15px; background: #F1F1F4; display: grid; place-items: center; }

/* discover + search */
.d-card { position: relative; margin: 0 14px; border-radius: 20px; background: #fff; padding: 18px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); text-align: left; }
/* the Study tab's card: topic tag, reference and studied circle on one line, then the verse */
.d-top { display: flex; align-items: center; gap: 7px; }
.d-tag { padding: 3px 7px; border-radius: 6px; background: #E6E9DF; font: 500 10px/1.2 var(--sans); color: #3F4A33; }
.d-ref { flex: 1; font: 500 14px/1.2 var(--serif); color: #111; }
.d-check { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1.2px solid #C8C8C2; }
.d-verse { text-align: center; font: italic 400 14px/22px var(--serif); color: #26251F; margin-top: 12px !important; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.d-note { display: flex; gap: 8px; margin-top: 12px; }
.d-note > svg { flex: none; }
.d-deep { font: 500 11.5px/1 var(--sans); color: #3F4A33; }
.d-actions { position: absolute; left: 18px; right: 18px; bottom: 14px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.d-icons { display: flex; gap: 22px; }
.d-openkind { text-align: center; font: 500 9px/1.2 var(--sans); letter-spacing: 1.6px; color: var(--muted); }
.d-openref { text-align: center; font: 500 17px/1.2 var(--serif); color: #111; margin-top: 2px !important; }
.d-header { position: absolute; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.d-title { font: 500 20px/1 var(--serif); }
.s-card { padding-top: 16px; }
.s-title { font: 400 20px/1.2 var(--serif); }
.s-sub { font: 400 11.5px/1.2 var(--sans); color: var(--muted); margin-top: 4px !important; }
.s-field { display: flex; align-items: center; gap: 8px; height: 36px; margin-top: 10px; padding: 0 10px; border-radius: 10px; background: #F2F2F0; border: 1px solid #E7E7E2; }
.s-typed { font: 400 13.5px/1 var(--sans); }
.s-caret { width: 1.5px; height: 16px; margin-left: -7px; background: #3F4A33; }
.s-caps { font: 600 9px/1 var(--sans); letter-spacing: 1.1px; color: var(--muted); margin: 12px 0 2px !important; }
.s-hit { padding: 7px 0; border-bottom: 1px solid #F2F2F4; transform-origin: left center; }
.s-hit:last-child { border-bottom: 0; }
.s-hitref { font: 600 12px/1.3 var(--sans); }
.s-hittext { font: 400 11px/15px var(--serif); color: var(--muted); margin-top: 1px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-mark { font-weight: 600; color: #111; text-decoration: underline; text-decoration-color: #3F4A33; }

/* ---------- statement ---------- */
.statement { padding: clamp(72px, 12vw, 150px) 0; text-align: center; background: var(--card); border-block: 1px solid var(--line); }
.statement-text { font: 400 clamp(32px, 4.6vw, 56px)/1.3 var(--serif); letter-spacing: -0.01em; }
.statement-text em, .ink-demo em { font-style: italic; font-weight: 700; }
.statement-sub { font-size: clamp(17px, 1.8vw, 21px); color: var(--muted); margin-top: 26px; }
.source { font-size: 12px; color: var(--faint); margin-top: 36px; }
.closing { border-bottom: 0; }
.closing-ctas { justify-content: center; }
.ink-wrap { position: relative; display: inline-block; white-space: nowrap; }
.ink { position: absolute; left: -2%; width: 104%; bottom: -0.16em; height: 0.3em; overflow: visible; }
.ink path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--ink-len, 260); stroke-dashoffset: var(--ink-len, 260); }
.ink.drawn path { transition: stroke-dashoffset 650ms cubic-bezier(0.65, 0, 0.35, 1) var(--ink-delay, 0ms); stroke-dashoffset: 0; }

/* ---------- how it works ---------- */
.how { padding: clamp(80px, 11vw, 140px) 0 clamp(40px, 6vw, 80px); }
.how .h2 { font-size: clamp(32px, 4.4vw, 54px); text-wrap: balance; }
.how-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.how-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: #E1E1E6; }
.how-rail-mark { display: block; width: 4px; height: 56px; border-radius: 2px; background: var(--ink); will-change: transform; }
.steps { list-style: none; margin: 0; padding: 0 0 0 44px; }
.step { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.28; transition: opacity 420ms var(--out); }
.step.active { opacity: 1; }
.step-num { font: 600 12px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.step-sub { font-size: 19px; line-height: 1.5; color: var(--ink-soft); margin-top: 18px; max-width: 26em; }
.step-detail { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-top: 12px; max-width: 30em; }
.step-phone { display: none; }
.how-stage { position: relative; }
.how-sticky { position: sticky; top: max(84px, calc(50vh - 340px)); display: flex; flex-direction: column; align-items: center; gap: 22px; padding-bottom: 40px; }
.stage-phone { width: min(300px, 100%); }
.stage-dots { display: flex; gap: 8px; }
.stage-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--faint); transition: width 320ms var(--out), background 320ms; }
.stage-dots span.on { width: 22px; background: var(--ink); }
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; }
  .how-stage, .how-rail { display: none; }
  .steps { padding: 0; }
  .step { min-height: 0; opacity: 1; align-items: center; text-align: center; padding: 48px 0; }
  .step .step-sub, .step .step-detail { margin-inline: auto; }
  .step-phone { display: block; width: min(270px, 72vw); margin-top: 36px; }
}

/* ---------- motion gallery ---------- */
.motion { padding: clamp(80px, 10vw, 130px) 0; background: var(--card); border-block: 1px solid var(--line); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
@media (max-width: 980px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .gallery { grid-template-columns: 1fr; } }
.tile { position: relative; display: flex; flex-direction: column; padding: 18px 18px 22px; border-radius: 24px; background: var(--ground); border: 1px solid var(--line); transition: transform 400ms var(--out), box-shadow 400ms var(--out); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tile-stage { position: relative; height: 230px; border-radius: 18px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--shadow-card); }
.tile-title { font: 600 17px/1.3 var(--sans); margin-top: 18px; }
.tile-text { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-top: 6px; }
.replay { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--card); border: 1px solid var(--line); font: 500 13px/1 var(--sans); transition: transform 300ms var(--spring), border-color 160ms; }
.replay:hover { border-color: var(--faint); }
.replay:active { transform: scale(0.96); transition-duration: 90ms; }

.like-btn { position: relative; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; transform-origin: center; }
.like-btn > span { grid-area: 1 / 1; }
.like-btn .h-on { opacity: 0; }
.like-btn.liked .h-on { opacity: 1; }
.like-btn.liked .h-off { opacity: 0; }
.like-hint { position: absolute; bottom: 22px; font-size: 12.5px; color: var(--muted); transition: opacity 400ms; animation: breathe 2.2s ease-in-out infinite; }
.like-hint.gone { opacity: 0; animation: none; }
@keyframes breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.seal-pop { opacity: 0; }
.seal-title { font: 700 22px/1.2 var(--sans); margin-top: 14px; }
.seal-streak { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 14px 8px 8px; border-radius: 22px; background: var(--ground); }
.seal-num { position: relative; display: inline-block; width: 14px; font: 700 18px/1 var(--sans); }
.seal-num span { display: inline-block; }
.seal-num span + span { position: absolute; left: 0; top: 0; opacity: 0; }
.seal-caps { font: 500 9.5px/1 var(--sans); letter-spacing: 1px; color: var(--ink-soft); }

.auto-stage { justify-content: flex-start; padding-top: 18px; }
.auto-pill { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 2px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font: 600 12px/1 var(--sans); overflow: hidden; }
.auto-track { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--line); }
.auto-fill { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 1px; }
.auto-window { position: relative; width: 100%; height: 160px; margin-top: 6px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.auto-list { will-change: transform; }
.auto-item { height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 22px; text-align: center; }
.auto-item p { font: 400 15.5px/1.5 var(--serif); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.auto-item small { font: 500 10px/1 var(--sans); letter-spacing: 1.2px; color: var(--muted); margin-top: 10px; }

.find-stage { justify-content: flex-start; padding: 22px 18px 0; }
.find-field { display: flex; align-items: center; gap: 9px; align-self: stretch; height: 44px; padding: 0 14px; border-radius: 12px; background: #F2F2F0; border: 1px solid var(--line); }
.find-typed { font: 400 16px/1 var(--sans); white-space: pre; }
.find-caret { width: 1.5px; height: 19px; margin-left: -8px; background: #3F4A33; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.find-result { align-self: stretch; display: flex; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 12px; background: #F7F7F4; opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--out), transform 420ms var(--out); }
.find-result.in { opacity: 1; transform: none; }
.find-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #E6E9DF; display: grid; place-items: center; }
.find-ref { font: 600 13.5px/1.3 var(--sans); }
.find-verse { font: 400 13px/1.45 var(--serif); color: var(--ink-soft); margin-top: 3px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.ink-stage { padding: 0 26px; }
.ink-demo { font: 400 24px/1.4 var(--serif); text-align: center; }

/* ---------- why this app: the feed, not the library ---------- */
.different { padding: clamp(80px, 11vw, 140px) 0; }
.different-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.compare-card { padding: 22px 22px 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.compare-card.ours { background: #0B0B0C; border-color: #0B0B0C; color: var(--paper-ink); box-shadow: var(--shadow-lift); }
.compare-kicker { font: 600 11px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ours .compare-kicker { color: var(--gold); }
.compare-title { display: flex; align-items: center; gap: 8px; font: 500 21px/1.25 var(--serif); margin-top: 10px; }
.compare-mark { flex: none; }
.compare-text { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-top: 10px; }
.ours .compare-text { color: rgba(244, 241, 230, 0.78); }
.different-close { font: italic 400 clamp(19px, 2vw, 22px)/1.45 var(--serif); margin-top: 26px; max-width: 28em; }
.different-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.swap-phone { width: min(290px, 70vw); }
.swap-caption { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); color: var(--muted); }
.swap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--heart); animation: breathe 2.2s ease-in-out infinite; }
@media (max-width: 900px) {
  .different-grid { grid-template-columns: 1fr; }
  .different-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .different-copy .sub { margin-inline: auto; }
  .compare { text-align: left; width: 100%; }
}
@media (max-width: 560px) { .compare { grid-template-columns: 1fr; } }

/* the feed you know (website-only demo, built from the app's verse-page parts) */
.m-post { position: relative; width: 360px; }
.m-post-media { position: absolute; left: 12px; right: 58px; height: 470px; border-radius: 22px; overflow: hidden; }
.m-post-sun { position: absolute; right: 54px; top: 70px; width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 246, 220, 0.85); }
.m-post-hill { position: absolute; left: -40px; right: -40px; border-radius: 50% 50% 0 0; }
.m-post-hill.a { bottom: -120px; height: 300px; background: rgba(0, 0, 0, 0.12); }
.m-post-hill.b { bottom: -170px; left: 120px; height: 300px; background: rgba(0, 0, 0, 0.18); }
.m-post-meta { position: absolute; left: 18px; top: 600px; display: flex; gap: 10px; }
.m-post-avatar { width: 34px; height: 34px; border-radius: 50%; background: #D9D9DE; flex: none; }
.m-bar { display: block; height: 10px; border-radius: 5px; background: #CFCFD4; margin-bottom: 7px; }
.m-bar.thin { height: 7px; background: #E1E1E6; }
.m-act { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.m-act small { font: 600 9.5px/1 var(--sans); color: var(--ink-soft); }
.m-actions:has(.m-act) { gap: 16px; }
.m-swap-pill { position: absolute; left: 50%; transform: translateX(-50%); height: 30px; min-width: 148px; border-radius: 15px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.m-swap-pill > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--sans); white-space: nowrap; }

/* ---------- what you can count on ---------- */
/* What you can count on: the olive night of the Supporter card, with gold light from above, a
   hairline rule, a faint wreath, and two promises set like an editorial spread around big serif figures */
.promise { position: relative; overflow: hidden; isolation: isolate; padding: clamp(96px, 13vw, 168px) 0; color: var(--paper-ink); background: linear-gradient(170deg, var(--night-1) 0%, var(--night-2) 55%, var(--night-3) 100%); }
.promise-light { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(243, 213, 140, 0.22), rgba(243, 213, 140, 0) 70%), radial-gradient(ellipse 40% 40% at 85% 100%, rgba(216, 182, 106, 0.1), rgba(216, 182, 106, 0) 70%); pointer-events: none; }
.promise-watermark { position: absolute; z-index: -1; right: -140px; bottom: -180px; opacity: 0.07; pointer-events: none; }
.promise .eyebrow { color: var(--gold); letter-spacing: 0.22em; }
.promise .h2 { color: var(--paper-ink); }
.promise-rule { display: block; width: 120px; height: 1px; margin-top: 30px; background: linear-gradient(90deg, rgba(216, 182, 106, 0), var(--gold), rgba(216, 182, 106, 0)); transform: scaleX(0); transition: transform 1100ms var(--out) 350ms; }
.rise.in .promise-rule { transform: none; }
.promise-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(32px, 6vw, 88px); max-width: 980px; margin: clamp(56px, 7vw, 88px) auto 0; }
.promise-divider { width: 1px; background: linear-gradient(180deg, rgba(216, 182, 106, 0), rgba(216, 182, 106, 0.5) 30%, rgba(216, 182, 106, 0.5) 70%, rgba(216, 182, 106, 0)); }
.promise-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 8px 0; }
.promise-figure { font: 400 clamp(64px, 8vw, 104px)/1 var(--serif); letter-spacing: -0.02em; color: var(--gold); font-variant-numeric: tabular-nums lining-nums; }
.promise-label { margin-top: 14px; font: 600 11px/1.2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 241, 230, 0.6); }
.promise-card h3 { margin-top: 30px; font: 400 clamp(24px, 2.4vw, 30px)/1.2 var(--serif); color: var(--paper-ink); }
.promise-card p:not(.promise-figure):not(.promise-label) { max-width: 26em; margin-top: 12px; font-size: 16px; line-height: 1.7; color: rgba(244, 241, 230, 0.72); }
/* PopIn (src/motion/kit.tsx): springs up from nothing once the card has risen in */
@keyframes popIn { from { opacity: 0; transform: scale(0.2); } 40% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@media (max-width: 900px) {
  .promise-grid { grid-template-columns: 1fr; max-width: 520px; }
  .promise-divider { width: 120px; height: 1px; justify-self: center; background: linear-gradient(90deg, rgba(216, 182, 106, 0), rgba(216, 182, 106, 0.5), rgba(216, 182, 106, 0)); }
  .promise-watermark { right: -220px; bottom: -260px; }
}

/* ---------- support the app ---------- */
.support { padding: clamp(80px, 11vw, 140px) 0; background: var(--card); border-block: 1px solid var(--line); }
.support .section-head .premium-mark { display: flex; justify-content: center; }
.support-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; margin-top: 48px; }
.support-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px 28px; border-radius: 24px; background: var(--ground); border: 1px solid var(--line); overflow: hidden; transition: transform 400ms var(--out), box-shadow 400ms var(--out); }
.support-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.support-card.featured { color: var(--paper-ink); border: 0; background: radial-gradient(ellipse 80% 60% at 70% 0%, rgba(243, 213, 140, 0.25), rgba(243, 213, 140, 0) 70%), linear-gradient(160deg, var(--night-1), var(--night-3)); }
.support-tag { font: 600 11px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.featured .support-tag { color: var(--gold); }
.support-card h3 { font: 500 25px/1.2 var(--serif); margin-top: 12px; }
.support-card p:not(.support-tag) { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-top: 10px; }
.featured p:not(.support-tag) { color: rgba(244, 241, 230, 0.78); }
.support-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; font: 600 15px/1 var(--sans); }
.support-link span { transition: transform 300ms var(--spring); }
.support-link:hover span { transform: translateX(4px); }
.support-stars { display: flex; gap: 6px; margin-top: auto; padding-top: 22px; }
.support-gift { align-self: flex-start; display: grid; place-items: center; width: 48px; height: 48px; margin-top: auto; border-radius: 14px; background: #E6E9DF; }
.support-card .support-gift { margin-top: auto; }
.support-card:has(.support-gift) p:not(.support-tag) { margin-bottom: 22px; }
.support-card:hover .support-gift > span { animation: giftNudge 520ms var(--spring); }
@keyframes giftNudge { 40% { transform: translateY(-4px) rotate(-6deg); } }
.rise.in .support-gift, .rise.in .support-stars > span { animation: popIn 560ms var(--spring) both; }
.rise.in .support-gift { animation-delay: 380ms; }
.rise.in .support-stars > span:nth-child(1) { animation-delay: 380ms; }
.rise.in .support-stars > span:nth-child(2) { animation-delay: 460ms; }
.rise.in .support-stars > span:nth-child(3) { animation-delay: 540ms; }
.rise.in .support-stars > span:nth-child(4) { animation-delay: 620ms; }
.rise.in .support-stars > span:nth-child(5) { animation-delay: 700ms; }
.groups.two { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
@media (max-width: 980px) { .support-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ---------- premium (Supporter extras + reading themes) ---------- */
.premium { padding: clamp(80px, 11vw, 140px) 0; }
.premium-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.premium-mark { height: 56px; margin-bottom: 18px; }
.groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.group h3 { font: 600 13px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.group ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.group li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.4; }
.group li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.perks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.perks span { padding: 8px 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); font: 500 13px/1 var(--sans); }
@media (max-width: 980px) {
  .premium-grid { grid-template-columns: 1fr; }
  .premium-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .premium-mark { display: flex; justify-content: center; }
  .groups { text-align: left; }
  .perks { justify-content: center; }
}
@media (max-width: 620px) { .groups { grid-template-columns: 1fr; width: 100%; max-width: 340px; } }

.theme-demo { display: flex; flex-direction: column; align-items: center; }
.theme-card { width: min(380px, 100%); aspect-ratio: 4 / 4.6; border-radius: 30px; padding: 34px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: var(--shadow-lift); border: 1px solid var(--tc-line); background: var(--tc-bg); color: var(--tc-ink); transition: background-color 520ms var(--out), color 520ms var(--out), border-color 520ms var(--out); }
.theme-card[data-theme='light'] { --tc-bg: #F6F6F8; --tc-ink: #111111; --tc-muted: #8E8E93; --tc-line: #E8E8EC; --tc-chip: #FFFFFF; }
.theme-card[data-theme='sepia'] { --tc-bg: #F3EAD7; --tc-ink: #3A2E1E; --tc-muted: #8C7B60; --tc-line: #E3D6BA; --tc-chip: #FBF6EA; }
.theme-card[data-theme='dark'] { --tc-bg: #0F1012; --tc-ink: #ECEAE4; --tc-muted: #8C8A85; --tc-line: #2A2B2F; --tc-chip: #1C1D20; }
.theme-card[data-theme='sage'] { --tc-bg: #E9EDE1; --tc-ink: #1F2619; --tc-muted: #56604B; --tc-line: #D5DCC9; --tc-chip: #F4F6EF; }
.theme-card[data-theme='winter'] { --tc-bg: #F8FAFC; --tc-ink: #18212B; --tc-muted: #536070; --tc-line: #E2E7EC; --tc-chip: #FFFFFF; }
.theme-card[data-theme='linen'] { --tc-bg: #EFEDE7; --tc-ink: #24231E; --tc-muted: #67635A; --tc-line: #DEDAD0; --tc-chip: #F8F7F3; }
.theme-card[data-theme='charcoal'] { --tc-bg: #252522; --tc-ink: #E8E5DC; --tc-muted: #A6A298; --tc-line: #3A3A36; --tc-chip: #31312D; }
.theme-card[data-theme='olive'] { --tc-bg: #1B1F17; --tc-ink: #E5E8DA; --tc-muted: #9EA58E; --tc-line: #30362A; --tc-chip: #262B21; }
.theme-card { --tc-font: var(--serif); --tc-scale: 1; }
.theme-card[data-font='newsreader'] { --tc-font: 'Newsreader', Georgia, serif; --tc-scale: 1.04; }
.theme-card[data-font='fraunces'] { --tc-font: 'Fraunces', Georgia, serif; --tc-scale: 0.98; }
.theme-card[data-font='instrument'] { --tc-font: 'Instrument Serif', Georgia, serif; --tc-scale: 1.14; }
.theme-card[data-font='bricolage'] { --tc-font: 'Bricolage Grotesque', system-ui, sans-serif; --tc-scale: 0.96; }
.theme-card[data-font='outfit'] { --tc-font: 'Outfit', system-ui, sans-serif; --tc-scale: 0.98; }
.theme-emblem { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--tc-chip); transition: background-color 520ms var(--out); }
.theme-verse { font-family: var(--tc-font); font-weight: 400; font-size: calc(clamp(19px, 2vw, 22px) * var(--tc-scale)); line-height: 1.5; margin-top: 28px; }
.theme-ref { font: 500 11px/1 var(--sans); letter-spacing: 1.3px; color: var(--tc-muted); margin-top: 18px; transition: color 520ms var(--out); }
.theme-switch { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 4px; margin-top: 22px; padding: 5px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.theme-switch button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 9px; border-radius: 12px; font: 500 14px/1 var(--sans); color: var(--ink-soft); transition: background-color 200ms; }
.theme-switch button[aria-checked='true'] { background: #EEEEF1; color: var(--ink); }
.sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); }
.sw-light { background: #F6F6F8; }
.sw-sepia { background: #F3EAD7; }
.sw-dark { background: #0F1012; }
.sw-sage { background: #E9EDE1; }
.sw-winter { background: #F8FAFC; }
.theme-note { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: center; }
@media (max-width: 480px) { .theme-switch button { padding: 0 10px; gap: 6px; font-size: 13.5px; } }


/* ---------- faq ---------- */
.faq { padding: clamp(80px, 10vw, 130px) 0; }
.faq .section-head { margin-bottom: 36px; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font: 500 19px/1.35 var(--serif); cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform 300ms var(--spring); }
.qa[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.qa p { padding: 0 0 22px; color: var(--ink-soft); line-height: 1.65; max-width: 40em; animation: qa-in 360ms var(--out); }
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- footer ---------- */
.footer { padding: 44px 0 56px; border-top: 1px solid var(--line); background: var(--card); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.footer-line { font: italic 400 16px/1.4 var(--serif); color: var(--ink-soft); }
.footer-fine { font-size: 13px; color: var(--muted); }

/* ---------- supporter extras ---------- */
.extras { padding: clamp(80px, 11vw, 140px) 0; }
.studio, .looks { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; margin-top: clamp(48px, 7vw, 80px); }
.looks { grid-template-columns: 1fr 1fr; }
.looks .theme-demo { order: 2; }
.studio-stage { display: grid; place-items: center; min-height: 520px; padding: 28px; border-radius: 30px; background: var(--card); border: 1px solid var(--line); }
.ctl-label { font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); font: 500 13.5px/1 var(--sans); color: var(--ink-soft); transition: border-color 160ms, background-color 160ms; }
.chip:hover { border-color: var(--faint); }
.chip[aria-checked='true'] { border: 1.5px solid #3F4A33; color: var(--ink); padding: 0 11.5px; }
.chip .sw { flex: none; }
.chip .ic { flex: none; opacity: 0.55; }
.chip[data-key='photo'] .ic:first-child { opacity: 1; }
.chip-divider { align-self: center; width: 1px; height: 22px; margin: 0 4px; background: var(--line); }
.sw-photo { width: 18px; height: 18px; border-radius: 6px; background-size: cover; background-position: center; }
.sample-link { margin-top: 10px; font: 500 13.5px/1.4 var(--sans); color: #3F4A33; text-decoration: underline; text-decoration-color: rgba(63, 74, 51, 0.35); text-underline-offset: 3px; }
.sample-link:hover { text-decoration-color: currentColor; }
.studio-note { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 18px; max-width: 34em; }
.studio-note b { color: var(--ink); font-weight: 600; }

/* the card itself, after src/verse/cards.tsx */
.vcard { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(400px, 100%); min-height: 330px; padding: 34px 30px; border-radius: 22px; text-align: center; background: var(--vc-bg); color: var(--vc-ink); box-shadow: var(--shadow-lift); transition: background-color 420ms var(--out), color 420ms var(--out), width 420ms var(--out), min-height 420ms var(--out); }
.vcard[data-size='story'] { width: 252px; min-height: 448px; height: 448px; padding: 30px 22px; border-radius: 16px; }
.vc-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.vcard[data-size='story'] .vc-body { flex: 1; justify-content: center; }
.vc-verse { font: 400 var(--vc-size)/1.5 var(--serif); margin-top: 16px; }
.vc-ref { font: 600 12px/1 var(--sans); letter-spacing: 1.8px; color: var(--vc-accent); margin-top: 16px; }
.vcard[data-size='story'] .vc-ref { font-size: 10px; }
.vc-quote { align-items: flex-start; text-align: left; }
.vc-quote .vc-mark { font: 400 60px/66px var(--serif); color: var(--vc-accent); margin: 0 0 -26px -3px; }
.vc-heading { font: 400 24px/1.25 var(--serif); }
.vcard[data-size='story'] .vc-heading { font-size: 19px; }
.vc-rule { width: 28px; height: 1.5px; margin: 14px 0; background: var(--vc-accent); opacity: 0.8; }
.vc-frame { position: absolute; inset: 10px; border: 1px solid var(--vc-accent); border-radius: 14px; opacity: 0.55; pointer-events: none; }
.vc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fadeIn 500ms var(--out); }
.vc-wash { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); }
.vcard.on-photo .vc-verse, .vcard.on-photo .vc-heading { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
@keyframes fadeIn { from { opacity: 0; } }
.vc-decor { position: absolute; inset: 0; pointer-events: none; }
.vc-decor > span { position: absolute; }
.vc-sunrise { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; }
.vc-watermark { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin-top: 20px; opacity: 0.6; font: 600 11.5px/1 var(--sans); letter-spacing: 0.4px; white-space: nowrap; }
.vcard[data-size='story'] .vc-watermark { margin-top: 12px; font-size: 9.5px; }

/* the other extras */
.extra-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(56px, 8vw, 96px); }
/* Each tile comes up out of a soft blur with a little spring, one after another, then its art acts
   the feature out (js/extras.js). With a mouse, the tile tilts toward the pointer and an olive light
   follows it round the edge; the art sits a little above the card, so it moves with depth. */
.extra-tile { position: relative; display: flex; flex-direction: column; padding: 18px 18px 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); transform-style: preserve-3d; transition: transform 700ms var(--out), box-shadow 400ms var(--out), opacity 700ms var(--out) var(--d, 0ms), translate 1000ms var(--spring) var(--d, 0ms), scale 1000ms var(--spring) var(--d, 0ms), filter 700ms var(--out) var(--d, 0ms); }
.extra-tile.xt { opacity: 0; translate: 0 36px; scale: 0.94; filter: blur(8px); }
.extra-tile.xt.in { opacity: 1; translate: none; scale: none; filter: none; }
.extra-tile.tilting { transform: perspective(1000px) rotateX(calc(var(--ty, 0) * -9deg)) rotateY(calc(var(--tx, 0) * 9deg)); transition: transform 140ms linear, box-shadow 400ms var(--out), opacity 700ms var(--out), translate 1000ms var(--spring), scale 1000ms var(--spring), filter 700ms var(--out); }
.extra-tile:hover { box-shadow: 0 24px 48px -18px rgba(34, 44, 27, 0.28); }
.extra-tile::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(86, 99, 63, 0.75), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity 400ms var(--out); pointer-events: none; }
.extra-tile.tilting::before { opacity: 1; }
.extra-tile h3 { font: 600 17px/1.3 var(--sans); margin-top: 18px; }
.extra-tile p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 8px; }
.extra-art { position: relative; height: 180px; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 16px; background: var(--ground); transition: transform 700ms var(--out); }
.extra-tile.tilting .extra-art { transform: translateZ(24px); }
.extra-art small { font: 600 9.5px/1 var(--sans); letter-spacing: 1px; color: var(--muted); }
.swap { animation: swapIn 420ms var(--out); }
@keyframes swapIn { from { opacity: 0; transform: translateY(6px); } }

/* Year in Scripture: story bars, a half year of days filling in, then the longest run */
.heat { background: #1B1F17; }
.yr-bars { display: flex; gap: 3px; margin-bottom: 14px; }
.yr-bars span { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(229, 232, 218, 0.18); overflow: hidden; }
.yr-bars i { display: block; height: 100%; background: #E5E8DA; transform: scaleX(0); transform-origin: left; }
.heat-grid { display: grid; grid-template-columns: repeat(26, 1fr); grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 2px; height: 72px; }
.heat-grid span { border-radius: 2px; background: #2C3325; transform: scale(0.4); opacity: 0.5; transition: background-color 380ms var(--out), opacity 380ms var(--out), box-shadow 380ms var(--out), transform 480ms var(--spring); }
.heat-grid span.on { transform: none; opacity: 1; }
.heat-grid span.on[data-l='1'] { background: #56633F; }
.heat-grid span.on[data-l='2'] { background: #8A9B62; }
.heat-grid span.on[data-l='3'] { background: #C9D59E; }
.heat-grid[data-page='1'] span.on:not(.hot) { opacity: 0.22; }
.heat-grid span.on.hot { opacity: 1; background: #E9F0C8; box-shadow: 0 0 8px rgba(201, 213, 158, 0.85); transform: scale(1.15); }
.heat-grid[data-page='2'] span.on { opacity: 0.16; }
.yr-stat { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; min-height: 26px; }
.yr-stat b { font: 500 26px/1 var(--serif); color: #F4F1E6; font-variant-numeric: tabular-nums; }
.yr-stat span { font: 500 11.5px/1.3 var(--sans); color: #9EA58E; }

/* Memorize: the round bars, then words fold into gaps, first letters, nothing, and back */
.mm-dots { display: flex; gap: 4px; margin-bottom: 14px; }
.mm-dots span { flex: 1; height: 3px; border-radius: 2px; background: #E1E4D9; transition: background-color 360ms var(--out); }
.mm-dots span.on { background: #3F4A33; }
.mm-verse { font: 400 15px/1.75 var(--serif); }
.mw { display: inline-block; padding: 0 2px; margin: 0 -1px; line-height: 1.3; border-radius: 5px; transition: background-color 320ms var(--out) var(--k, 0ms), box-shadow 320ms var(--out) var(--k, 0ms); }
.mw > span { transition: color 280ms var(--out) var(--k, 0ms); }
.mw[data-s='letter'], .mw[data-s='gap'] { background: #E6E9DF; box-shadow: inset 0 -2px #CDD2C3; }
.mw[data-s='letter'] .mr, .mw[data-s='gap'] > span { color: transparent; }
.mm-foot { position: relative; height: 18px; margin-top: 12px; }
.mm-foot small { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 3px; white-space: nowrap; transition: opacity 360ms var(--out), transform 360ms var(--out); }
.mm-sched { opacity: 0; transform: translateY(6px); }
.mm-sched .ic { margin-right: 2px; }
.learned .mm-round { opacity: 0; transform: translateY(-6px); }
.learned .mm-sched { opacity: 1; transform: none; }
.mm-sched span { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 5px; background: #E6E9DF; color: var(--muted); letter-spacing: 0; transition: background-color 240ms var(--out), color 240ms var(--out), transform 420ms var(--spring); }
.mm-sched span.on { background: #3F4A33; color: #F4F1E6; transform: scale(1.1); }
.learned .mm-dots span { background: #8A9B62; }

/* Collections: verses drop in, one is dragged to the top, then the outline is printed */
.coll { justify-content: flex-start; }
.cl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cl-head b { font: 600 13px/1.2 var(--sans); }
.cl-count { font: 500 11px/1 var(--sans); color: var(--muted); white-space: nowrap; }
.cl-count.bump { animation: bump 380ms var(--spring); }
@keyframes bump { 40% { transform: scale(1.18); color: #3F4A33; } }
.cl-list { position: relative; height: 87px; margin-top: 9px; }
.cl-row { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; height: 25px; padding: 0 6px 0 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); font: 500 12px/1 var(--sans); color: var(--ink-soft); opacity: 0; transition: box-shadow 220ms var(--out), border-color 220ms; }
.cl-row.held { z-index: 2; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14); border-color: #C9CEC0; }
.cl-print { position: relative; align-self: flex-start; height: 26px; margin-top: 8px; padding: 0 11px; border-radius: 9px; background: #111; color: #F4F1E6; font: 600 11px/26px var(--sans); white-space: nowrap; opacity: 0; transition: background-color 260ms var(--out); }
.cl-print > span { display: inline-flex; align-items: center; gap: 6px; transition: opacity 260ms var(--out), transform 260ms var(--out); }
.cl-print .cl-b { position: absolute; left: 11px; top: 0; height: 26px; opacity: 0; transform: translateY(6px); }
.cl-print.done { background: #3F4A33; }
.cl-print.done .cl-a { opacity: 0; transform: translateY(-6px); }
.cl-print.done .cl-b { opacity: 1; transform: none; }

/* Widget styles: the widget turns through each look on a soft home-screen wallpaper */
.widgets { align-items: center; padding: 12px 0 14px; background: linear-gradient(160deg, #E8EBE2 0%, #D3D9CA 100%); }
.wg-track { position: relative; width: 100%; height: 110px; perspective: 520px; }
.wg { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; justify-content: space-between; width: 96px; height: 96px; margin: -48px 0 0 -48px; padding: 10px; border-radius: 18px; font: 400 11px/1.35 var(--serif); box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25); will-change: transform; }
.wg small { font: 600 7px/1 var(--sans); letter-spacing: 0.6px; opacity: 0.7; color: inherit; }
.wg-name { display: flex; align-items: center; gap: 6px; height: 16px; margin-top: 8px; font: 600 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #3F4A33; }
.wg-name em { font-style: normal; font-size: 9px; letter-spacing: 0.06em; padding: 3px 5px; border-radius: 5px; background: rgba(63, 74, 51, 0.12); }
.extras-summary { margin-top: clamp(56px, 8vw, 96px); display: flex; flex-direction: column; align-items: center; }
.extras-summary .groups { width: min(820px, 100%); }
@media (max-width: 1080px) { .extra-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .studio, .looks { grid-template-columns: 1fr; }
  .looks .theme-demo { order: 0; }
  .studio-stage { min-height: 0; }
}
@media (max-width: 620px) { .extra-grid { grid-template-columns: 1fr; } .extras-summary .groups { max-width: 340px; } }

/* ---------- olive-branch dividers (js/sprig.js) ----------
   At four section edges the hairline curves, in the middle, into the foot of the olive wreath. The
   ornament is drawn at 400 wide with the line 12 down, then scaled by --sw. */
.statement, .motion, .extras { position: relative; }
.statement:not(.closing), .motion, .closing { border-top: 0; }
.support { border-bottom: 0; }
.sprig { --sw: min(400px, 78vw); position: absolute; left: 0; right: 0; top: calc(var(--sw) * -12 / 400); z-index: 2; display: flex; align-items: flex-start; pointer-events: none; }
.sprig-art { flex: none; display: block; width: var(--sw); height: auto; overflow: visible; }
.sprig-line { flex: 1; height: 1px; margin-top: calc(var(--sw) * 12 / 400 - 0.5px); background: var(--line); transform: scaleX(0); transition: transform 1200ms var(--out) 300ms; }
.sprig-line-l { transform-origin: right center; }
.sprig-line-r { transform-origin: left center; }
.sprig-stem { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1000ms var(--out) 60ms; }
.sprig-cross { fill: none; stroke: #9AA487; stroke-width: 1.4; stroke-linecap: round; opacity: 0; transition: opacity 400ms var(--out); }
.sprig-leaf { fill: #8C9775; transform-box: fill-box; transform-origin: 0% 50%; transform: scale(0); opacity: 0; transition: transform 640ms var(--spring) var(--k), opacity 320ms var(--out) var(--k); }
.sprig-olive { fill: #6C7756; opacity: 0; transition: opacity 500ms var(--out) var(--k); }
.sprig.in .sprig-line, .sprig.in .sprig-leaf { transform: none; }
.sprig.in .sprig-stem { stroke-dashoffset: 0; }
.sprig.in .sprig-cross, .sprig.in .sprig-leaf, .sprig.in .sprig-olive { opacity: 1; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
  .float-card, .hero-watermark, .arrow-down, .like-hint, .swap-dot, .find-caret,
  .promise-rule { transform: none; transition: none; }
  .rise.in .support-gift, .rise.in .support-stars > span, .support-card:hover .support-gift > span { animation: none; }
  .layer, .step, .theme-card { transition: none; }
  .ink path { stroke-dashoffset: 0; }
  .extra-tile.xt { opacity: 1; translate: none; scale: none; filter: none; transition: none; }
  .heat-grid span, .mw, .mw > span, .mm-foot small, .cl-print > span { transition: none; }
  .swap, .cl-count.bump, .vc-photo { animation: none; }
  .sprig-line, .sprig-stem, .sprig-cross, .sprig-leaf, .sprig-olive { transition: none; }
}

/* ---------- footer links (all pages) ---------- */
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--ink-soft); }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-inner .footer-fine { flex-basis: 100%; }
@media (min-width: 900px) { .footer-inner .footer-fine:last-child { flex-basis: auto; } }

/* ---------- legal + support pages ---------- */
.nav-links a[aria-current='page'] { color: var(--ink); }
.nav-links a[aria-current='page']::after { transform: scaleX(1); }
.doc { padding-bottom: clamp(64px, 9vw, 110px); }
.doc-hero { padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 44px); text-align: center; }
.doc-hero .wrap { display: flex; flex-direction: column; align-items: center; }
.doc-mark { height: 52px; margin-bottom: 18px; }
.doc-title { font: 400 clamp(40px, 6vw, 68px)/1.08 var(--serif); letter-spacing: -0.02em; margin-top: 14px; }
.doc-updated { font-size: 13px; color: var(--muted); margin-top: 14px; }
.doc-lead { font-size: clamp(17px, 1.7vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 34em; margin-top: 18px; }

.doc-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: clamp(40px, 6vw, 72px); }
.sum-card { padding: 20px 20px 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.sum-card h2 { font: 600 16px/1.3 var(--sans); margin-top: 14px; }
.sum-card p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 6px; }
.sum-card a { text-decoration: underline; text-underline-offset: 3px; }
.sum-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--chip); display: grid; place-items: center; }
.rise.in .sum-icon { animation: popIn 620ms var(--spring) both; animation-delay: calc(var(--d, 0ms) + 160ms); }
@media (max-width: 760px) { .doc-summary { grid-template-columns: 1fr; } }

.doc-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: 92px; }
.toc-label { font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.toc-inner { position: relative; padding-left: 18px; }
/* the rail and marker are the feed's scrubber */
.toc-rail { position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 1px; background: #E1E1E6; }
.toc-rail span { position: absolute; left: -1px; top: 0; width: 4px; height: 28px; border-radius: 2px; background: var(--ink); will-change: transform; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 5px 0; font-size: 14px; line-height: 1.35; color: var(--muted); transition: color 200ms; }
.toc a:hover, .toc a.on { color: var(--ink); }
.toc a.on { font-weight: 500; }
@media (max-width: 900px) {
  .doc-grid { grid-template-columns: 1fr; }
  .toc { display: none; }
}

.doc-body { max-width: 680px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.doc-body h2 { font: 500 clamp(24px, 2.6vw, 30px)/1.25 var(--serif); color: var(--ink); margin: 52px 0 14px; scroll-margin-top: 96px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font: 600 16px/1.4 var(--sans); color: var(--ink); margin: 26px 0 8px; }
.doc-body p { margin: 0 0 14px; }
.doc-body ul, .doc-body ol { margin: 0 0 16px; padding-left: 22px; }
.doc-body li { margin-bottom: 8px; padding-left: 4px; }
.doc-body li::marker { color: var(--muted); }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; transition: text-decoration-color 200ms; }
.doc-body a:hover { text-decoration-color: var(--ink); }

/* details still to fill in (js/site.js); styled like the app's SAMPLE tag */
.todo { display: inline; padding: 1px 7px; border-radius: 6px; background: #FFF3D6; color: #8A6410; font: 600 0.82em/1.6 var(--sans); }

/* support */
.contact-card { display: flex; align-items: center; gap: 18px; padding: 24px 26px; border-radius: 26px; color: var(--paper-ink); background: radial-gradient(ellipse 70% 80% at 85% 0%, rgba(243, 213, 140, 0.25), rgba(243, 213, 140, 0) 70%), linear-gradient(160deg, var(--night-1), var(--night-3)); box-shadow: var(--shadow-lift); }
.contact-card.is-todo { cursor: default; }
.contact-icon { flex: none; width: 52px; height: 52px; border-radius: 16px; background: rgba(244, 241, 230, 0.12); display: grid; place-items: center; }
.contact-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact-label { font: 600 12px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.contact-value { font: 500 clamp(20px, 2.4vw, 26px)/1.3 var(--serif); overflow-wrap: anywhere; }
.contact-hint { font-size: 14px; line-height: 1.5; color: rgba(244, 241, 230, 0.72); }
.contact-arrow { flex: none; transition: transform 300ms var(--spring); }
.contact-card:hover .contact-arrow { transform: translateX(4px); }
.contact-meta { font-size: 14px; color: var(--muted); text-align: center; margin-top: 16px; }
.support-faq { padding-top: clamp(56px, 8vw, 90px); }
.support-faq .section-head { margin-bottom: 28px; }
.qa p a { text-decoration: underline; text-underline-offset: 3px; }
.doc-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 48px; }
.doc-links a { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); font: 500 15px/1.2 var(--sans); transition: transform 400ms var(--out), box-shadow 400ms var(--out); }
.doc-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
@media (max-width: 560px) {
  .doc-links { grid-template-columns: 1fr; }
  .contact-card { flex-wrap: wrap; padding: 22px; }
  .contact-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rise.in .sum-icon { animation: none; } }