/*
 * Oafer landing page styles — ported from the design reference
 * (frontend/design_reference/landing_page.html) into the deployable bundle.
 *
 * Fonts are SELF-HOSTED (assets/fonts/*.woff2), not pulled from Google Fonts:
 * the deployable page's whole point is zero external requests so it stays fast
 * on low-spec hardware (Chromebooks). Fraunces + Inter are variable latin
 * subsets; font-display:swap keeps text visible during the (local) load.
 *
 * Everything below the "PORTED DESIGN SYSTEM" banner is the reference design
 * verbatim. Everything below "DEPLOYABLE-BUNDLE ADDITIONS" is what the live
 * site needs on top of the mock: accessibility helpers, the demoted waitlist
 * form, footer link row, and the shared legal-page (privacy/terms) styles.
 */

/* ---------- self-hosted fonts (was: fonts.googleapis.com) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/fraunces-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}

/* ============================================================
   PORTED DESIGN SYSTEM  (from design_reference/landing_page.html)
   ============================================================ */
/* ============================================================
   OAFER LANDING — v3 (section-snapped)
   ============================================================ */
:root{
  --ember:#9f332c;
  --ember-2:#B4453C;
  --ember-dark:#7c2620;
  --charcoal:#222222;
  --ink:#2a231d;
  --parchment:#f2e9d8;
  --parchment-2:#e9dcc2;
  --parchment-line:#d8c8a4;
  --gold:#b08d57;
  --gold-soft:#c9ac78;
  --cream:#f7f1e3;
  --muted:#6f6753;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  background:var(--parchment);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:rgba(159,51,44,.16);}

/* ============================================================
   SECTION SNAPPING
   Each .snap is a full-viewport stop; the scroller pauses on it.
   ============================================================ */
html{
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
}
.snap{
  min-height:100vh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:104px 24px 72px;
}
/* sections that must not force-center their own content */
.snap.flush{padding:0;}

/* ---------- reveal machinery ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.1s;}
.reveal.d2{transition-delay:.2s;}
.reveal.d3{transition-delay:.3s;}

/* ---------- living contour background ---------- */
.contours{position:fixed;inset:-4% 0;z-index:0;opacity:.5;pointer-events:none;}
.contours path{
  fill:none;stroke:#c9b78c;stroke-width:1.1;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:contourLive 18s linear infinite;
}
.contours path:nth-child(2){animation-delay:-3.5s;}
.contours path:nth-child(3){animation-delay:-7s;}
.contours path:nth-child(4){animation-delay:-10.5s;}
.contours path:nth-child(5){animation-delay:-14s;}
@keyframes contourLive{
  0%{stroke-dashoffset:1;opacity:0;}
  12%{opacity:.9;}
  42%{stroke-dashoffset:0;opacity:.9;}
  62%{stroke-dashoffset:0;opacity:.9;}
  88%{stroke-dashoffset:-1;opacity:.25;}
  100%{stroke-dashoffset:-1;opacity:0;}
}

/* ---------- nav ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 40px;
  transition:background .3s ease,border-color .3s ease,padding .3s ease;
  border-bottom:1px solid transparent;
}
.site-nav.scrolled{
  background:rgba(242,233,216,.9);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--parchment-line);
  padding:10px 40px;
}
.nav-brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.brand-logo{width:36px;height:36px;flex-shrink:0;}
.nav-brand .nb-word{font-family:'Fraunces',serif;font-weight:500;font-size:21px;color:var(--charcoal);}
.nav-brand .nb-tag{
  font-size:12.5px;color:var(--muted);
  border-left:1px solid var(--parchment-line);
  padding-left:11px;
}
.nav-links{display:flex;align-items:center;gap:19px;}
.nav-links a{
  font-size:13px;color:var(--muted);text-decoration:none;
  position:relative;transition:color .15s ease;white-space:nowrap;
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;
  background:var(--ember);transition:right .25s var(--ease);
}
.nav-links a:hover{color:var(--charcoal);}
.nav-links a:hover::after{right:0;}
.nav-sep{width:1px;height:15px;background:var(--parchment-line);flex-shrink:0;}
.nav-links a.secondary{color:#948a6f;}
.nav-links a.secondary:hover{color:var(--charcoal);}

/* section progress rail */
.rail{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);
  z-index:50;display:flex;flex-direction:column;gap:11px;
}
.rail i{
  width:6px;height:6px;border-radius:50%;
  background:var(--parchment-line);
  transition:background .3s ease,height .3s var(--ease);
}
.rail i.on{background:var(--ember);height:20px;border-radius:3px;}

/* ---------- hero ---------- */
.hero{text-align:center;}
.hero-mark{width:132px;height:132px;margin-bottom:36px;animation:markSettle 1.5s var(--ease) both;}
@keyframes markSettle{
  from{opacity:0;transform:scale(.82) rotate(-18deg);}
  to{opacity:1;transform:scale(1) rotate(0);}
}
.hero-eyebrow{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:24px;
  animation:fadeUp 1s var(--ease) .3s both;
}
.hero h1{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(36px,5.4vw,66px);
  line-height:1.16;color:var(--charcoal);
  max-width:21ch;margin:0 auto 22px;
}
.hero h1 .l1{display:block;animation:fadeUp 1s var(--ease) .45s both;}
.hero h1 .l2{display:block;animation:fadeUp 1s var(--ease) .65s both;}
.hero h1 em{font-style:italic;color:var(--ember);}
.hero-sub{
  font-size:clamp(15px,1.7vw,19px);color:var(--muted);
  max-width:42ch;margin:0 auto;
  animation:fadeUp 1s var(--ease) .85s both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
/* ---------- shared ---------- */
.eyebrow{
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:16px;
}

/* ---------- why ---------- */
.why-inner{max-width:900px;margin:0 auto;width:100%;}
.founder-note{max-width:640px;margin:0 auto 54px;text-align:center;}
.founder-note .note-body{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(19px,2.4vw,26px);
  line-height:1.55;color:var(--charcoal);
}
.founder-note .note-body em{font-style:italic;color:var(--ember);}
.founder-note .note-sig{
  margin-top:22px;font-family:'Fraunces',serif;font-style:italic;
  font-size:15px;color:var(--muted);
}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.stat-card{
  background:var(--cream);border:1px solid var(--parchment-line);
  border-radius:18px;padding:30px 26px 24px;text-align:center;
  transition:transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease;
}
.stat-card:hover{
  transform:translateY(-5px);border-color:var(--gold-soft);
  box-shadow:0 18px 40px rgba(34,28,18,.1);
}
.stat-big{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(30px,3.6vw,46px);
  color:var(--ember);line-height:1.05;margin-bottom:11px;
}
.stat-card p{font-size:15px;color:var(--ink);line-height:1.55;}
.stat-src{display:block;margin-top:13px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a3987c;}

/* ============================================================
   DEMO — sticky viewport + 3 snap stops
   ============================================================ */
.demo{position:relative;z-index:1;}
.demo-sticky{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;padding:88px 24px 40px;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.demo-stop{height:100vh;scroll-snap-align:start;scroll-snap-stop:always;}
.caption-rail{height:66px;width:100%;max-width:600px;position:relative;margin-bottom:24px;text-align:center;}
.dcap{
  position:absolute;inset:auto 0 0;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.dcap.active{opacity:1;transform:none;}
.dcap .k{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:7px;}
.dcap .t{font-family:'Fraunces',serif;font-size:clamp(19px,2.5vw,26px);color:var(--charcoal);line-height:1.3;}

.app-frame{
  width:min(880px,92vw);aspect-ratio:16/9.4;
  background:var(--cream);border:1px solid var(--parchment-line);
  border-radius:18px;overflow:hidden;position:relative;
  box-shadow:0 40px 90px rgba(34,28,18,.18),0 0 0 1px rgba(176,141,87,.08),0 0 90px rgba(176,141,87,.16);
  transform:perspective(1400px) rotateX(7deg) scale(.93);
  will-change:transform;
}
.frame-chrome{
  height:36px;display:flex;align-items:center;gap:7px;
  padding:0 16px;border-bottom:1px solid var(--parchment-line);
  background:var(--parchment);position:relative;
}
.frame-chrome i{width:9px;height:9px;border-radius:50%;background:var(--parchment-line);}
.frame-chrome i:first-child{background:var(--ember);opacity:.7;}
.frame-title{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:11.5px;color:#988e73;display:flex;align-items:center;gap:7px;
}
.tiny-mark{width:16px;height:16px;}

.scenes{position:absolute;inset:36px 0 0;}
.scene{
  position:absolute;inset:0;
  opacity:0;transform:translateY(16px) scale(.99);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.scene.active{opacity:1;transform:none;}

.demo-cursor{
  position:absolute;z-index:20;width:22px;height:22px;left:52%;top:70%;opacity:0;
  transition:left 1s var(--ease),top 1s var(--ease),opacity .4s ease,transform .18s ease;
  filter:drop-shadow(0 2px 4px rgba(34,28,18,.3));pointer-events:none;
}
.demo-cursor.on{opacity:1;}
.demo-cursor.clicking{transform:scale(.82);}
.click-ring{
  position:absolute;z-index:19;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--ember);opacity:0;pointer-events:none;transform:translate(-50%,-50%);
}
.click-ring.play{animation:ringOut .55s var(--ease) both;}
@keyframes ringOut{
  from{opacity:.8;transform:translate(-50%,-50%) scale(.4);}
  to{opacity:0;transform:translate(-50%,-50%) scale(2.4);}
}

/* scene 0 */
.s-atlas{background:var(--parchment);}
.mini-trails{position:absolute;inset:0;width:100%;height:100%;}
.mini-trails path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:1 8;stroke-linecap:round;opacity:.7;}
.mini-trails .hot{stroke:var(--ember);}
.mini-node{
  position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--cream);border:1.5px solid var(--parchment-line);border-radius:20px;text-align:center;
  font-family:'Fraunces',serif;color:var(--charcoal);
  opacity:0;transform:scale(.8);
  transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .3s ease,border-color .3s ease;
}
.scene.active .mini-node{opacity:1;transform:scale(1);}
.scene.active .mini-node:nth-of-type(2){transition-delay:.12s;}
.scene.active .mini-node:nth-of-type(3){transition-delay:.24s;}
.scene.active .mini-node:nth-of-type(4){transition-delay:.36s;}
.scene.active .mini-node:nth-of-type(5){transition-delay:.48s;}
.mini-node .mn-meta{font-family:'Inter',sans-serif;font-size:10px;color:#988e73;margin-top:3px;}
.mini-node.hub{
  width:23%;aspect-ratio:1;left:39%;top:24%;
  background:var(--ember);border-color:var(--ember-dark);color:var(--cream);
  font-size:clamp(13px,1.7vw,17px);border-radius:24px;
}
.mini-node.hub .mn-meta{color:rgba(247,241,227,.75);}
.mini-node.hub.hovered{box-shadow:0 12px 30px rgba(159,51,44,.35);transform:scale(1.05) !important;}
.mini-node.m1{width:16%;aspect-ratio:1;left:13%;top:14%;font-size:clamp(11px,1.3vw,14px);}
.mini-node.m2{width:15%;aspect-ratio:1;left:72%;top:17%;font-size:clamp(10px,1.2vw,13px);}
.mini-node.m3{width:15%;aspect-ratio:1;left:19%;top:60%;font-size:clamp(10px,1.2vw,13px);}
.mini-node.m4{width:14%;aspect-ratio:1;left:67%;top:62%;font-size:clamp(10px,1.2vw,13px);}

/* scene 1 */
.s-chat{display:flex;flex-direction:column;background:var(--cream);}
.mini-terrain{
  height:34%;position:relative;flex-shrink:0;overflow:hidden;
  background:var(--parchment-2);border-bottom:1px solid var(--parchment-line);
}
.mini-terrain svg{position:absolute;bottom:0;left:0;width:100%;height:100%;}
.mini-peak{
  position:absolute;transform:translateX(-50%);
  font-family:'Fraunces',serif;font-size:clamp(9px,1.1vw,12px);
  background:var(--cream);border:1px solid var(--parchment-line);
  border-radius:999px;padding:3px 10px;color:var(--charcoal);white-space:nowrap;
}
.mini-peak.hot{background:var(--ember);color:var(--cream);border-color:var(--ember-dark);}
.mini-msgs{flex:1;padding:3% 6% 2%;display:flex;flex-direction:column;gap:9px;justify-content:flex-end;}
.mini-msg{
  max-width:66%;font-size:clamp(11px,1.3vw,14px);line-height:1.5;
  padding:8px 13px;border-radius:12px;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.mini-msg.shown{opacity:1;transform:none;}
.mini-msg.guide{
  align-self:flex-start;background:var(--parchment);border:1px solid var(--parchment-line);
  border-bottom-left-radius:3px;font-family:'Fraunces',serif;
}
.mini-msg.user{align-self:flex-end;background:var(--ember);color:var(--cream);border-bottom-right-radius:3px;}
.mini-composer{
  margin:1.5% 6% 3.5%;flex-shrink:0;display:flex;align-items:center;gap:9px;
  background:var(--parchment);border:1px solid var(--parchment-line);
  border-radius:999px;padding:8px 8px 8px 16px;
}
.mini-composer .mc-text{flex:1;font-size:clamp(11px,1.3vw,14px);color:var(--ink);min-height:1.4em;text-align:left;}
.mini-composer .mc-text .ph{color:#a89c7d;font-style:italic;}
.mc-caret{
  display:inline-block;width:2px;height:1.05em;background:var(--ember);
  vertical-align:text-bottom;margin-left:1px;animation:caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink{50%{opacity:0;}}
.mini-composer .mc-send{
  width:30px;height:30px;border-radius:50%;background:var(--ember);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s ease;
}
.mini-composer .mc-send.sent{transform:scale(.85);}

/* scene 2 */
.s-archive{background:var(--parchment);padding:4.5% 6%;display:flex;flex-direction:column;}
.arc-title{font-family:'Fraunces',serif;font-size:clamp(13px,1.7vw,17px);color:var(--charcoal);margin-bottom:3.5%;}
.arc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.2%;flex:1;}
.arc-card{
  background:var(--cream);border:1px solid var(--parchment-line);border-radius:12px;
  padding:4.5% 5.5%;display:flex;flex-direction:column;gap:6px;position:relative;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .3s ease,box-shadow .3s ease;
}
.scene.active .arc-card{opacity:1;transform:none;}
.scene.active .arc-card:nth-child(2){transition-delay:.12s;}
.scene.active .arc-card:nth-child(3){transition-delay:.24s;}
.scene.active .arc-card:nth-child(4){transition-delay:.36s;}
.scene.active .arc-card:nth-child(5){transition-delay:.48s;}
.scene.active .arc-card:nth-child(6){transition-delay:.6s;}
.arc-card.hovered{border-color:var(--gold-soft);box-shadow:0 10px 24px rgba(34,28,18,.12);}
.arc-tag{
  align-self:flex-start;font-size:clamp(8px,.95vw,10px);font-weight:600;
  color:var(--ember-dark);background:rgba(159,51,44,.1);padding:2px 8px;border-radius:999px;
}
.arc-name{font-family:'Fraunces',serif;font-size:clamp(10.5px,1.3vw,13.5px);color:var(--charcoal);line-height:1.3;}
.arc-meta{font-size:clamp(8.5px,1vw,10.5px);color:#988e73;}
.arc-toast{
  position:absolute;right:8px;bottom:8px;
  font-size:clamp(8.5px,1vw,10.5px);font-weight:600;color:var(--cream);
  background:var(--gold);padding:3px 9px;border-radius:999px;
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;
}
.arc-toast.show{opacity:1;transform:none;}

/* ---------- socratic ---------- */
.socratic{justify-content:flex-start;padding-top:96px;padding-bottom:40px;}
.contrast-head{max-width:700px;margin:0 auto;text-align:center;flex-shrink:0;}
.contrast-head h2{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(27px,3.6vw,42px);color:var(--charcoal);line-height:1.16;
}
.contrast-head h2 em{font-style:italic;color:var(--ember);}
.anticheat-plaque{
  max-width:620px;margin:26px auto 0;
  display:flex;align-items:center;gap:14px;
  background:var(--cream);border:1px solid var(--gold-soft);
  border-radius:14px;padding:15px 20px;
  font-size:15px;color:var(--ink);text-align:left;
}
.anticheat-plaque svg{flex-shrink:0;width:26px;height:26px;}
.anticheat-plaque b{color:var(--ember-dark);}

/* horizontal prompt track ------------------------------------- */
.track-wrap{
  width:100%;flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  margin-top:30px;position:relative;
}
.track{
  display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.track::-webkit-scrollbar{display:none;}
.slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  padding:6px 4px 10px;
}
.exchange{max-width:920px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:22px;}

/* track controls */
.track-nav{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin-top:18px;flex-shrink:0;
}
.track-dots{display:flex;gap:9px;align-items:center;}
.track-dots button{
  width:7px;height:7px;padding:0;border-radius:50%;border:none;cursor:pointer;
  background:var(--parchment-line);
  transition:background .3s ease,width .3s var(--ease);
}
.track-dots button.on{background:var(--ember);width:24px;border-radius:4px;}
.arrow{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--parchment-line);background:var(--cream);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--charcoal);
  transition:border-color .2s ease,background .2s ease,transform .2s var(--ease),opacity .2s ease;
}
.arrow:hover:not(:disabled){border-color:var(--gold-soft);transform:scale(1.08);}
.arrow:disabled{opacity:.3;cursor:default;}
.track-hint{
  display:flex;align-items:center;gap:8px;justify-content:center;
  margin-top:14px;flex-shrink:0;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#a3987c;
  transition:opacity .4s ease;
}
.track-hint.hide{opacity:0;}
.track-hint .glide{
  width:20px;height:1.5px;background:var(--gold);transform-origin:left;
  animation:glideRight 1.9s var(--ease) infinite;
}
@keyframes glideRight{
  0%{transform:scaleX(0) translateX(0);opacity:0;}
  30%{transform:scaleX(1) translateX(0);opacity:1;}
  70%{transform:scaleX(1) translateX(10px);opacity:1;}
  100%{transform:scaleX(0) translateX(20px);opacity:0;}
}
.exchange-prompt{
  grid-column:1/-1;justify-self:center;
  background:var(--charcoal);color:var(--cream);
  font-size:17px;padding:14px 28px;border-radius:999px;margin-bottom:10px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 10px 26px rgba(34,34,34,.16);
}
.exchange-prompt .ep-label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,241,227,.55);}
.reply-card{border-radius:18px;padding:26px 28px 24px;transition:transform .25s var(--ease),box-shadow .25s ease;}
.reply-card:hover{transform:translateY(-4px);}
.reply-card .rc-head{
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:14px;
}
.reply-card p{font-size:17px;line-height:1.62;}
.reply-generic{background:var(--parchment-2);border:1px solid var(--parchment-line);}
.reply-generic .rc-head{color:#988e73;}
.reply-generic p{color:var(--muted);}
.reply-generic:hover{box-shadow:0 14px 30px rgba(34,28,18,.08);}
.reply-oafer{background:var(--cream);border:1px solid var(--gold-soft);box-shadow:0 14px 34px rgba(176,141,87,.14);}
.reply-oafer:hover{box-shadow:0 22px 46px rgba(176,141,87,.22);}
.reply-oafer .rc-head{color:var(--ember);}
.reply-mark{width:17px;height:17px;}
.reply-oafer p{color:var(--ink);}
.typed-caret{
  display:inline-block;width:2px;height:1em;background:var(--ember);
  vertical-align:text-bottom;margin-left:1px;animation:caretBlink 1s steps(1) infinite;
}
.thinking-dots{display:inline-flex;gap:4px;align-items:center;}
.thinking-dots i{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:dotPulse 1.2s ease infinite;}
.thinking-dots i:nth-child(2){animation-delay:.18s;}
.thinking-dots i:nth-child(3){animation-delay:.36s;}
@keyframes dotPulse{
  0%,100%{opacity:.25;transform:translateY(0);}
  40%{opacity:1;transform:translateY(-2px);}
}

/* ---------- promise ---------- */
.trust{background:var(--charcoal);color:var(--cream);overflow:hidden;}
.trust .contour-dark{position:absolute;inset:0;opacity:.14;pointer-events:none;}
.trust .contour-dark path{
  fill:none;stroke:#f7f1e3;stroke-width:1;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:contourLive 22s linear infinite;
}
.trust .contour-dark path:nth-child(2){animation-delay:-7s;}
.trust .contour-dark path:nth-child(3){animation-delay:-14s;}
.trust-inner{max-width:790px;margin:0 auto;position:relative;text-align:center;}
.trust .eyebrow{color:var(--gold-soft);}
.trust h2{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(32px,4.6vw,52px);line-height:1.18;margin-bottom:24px;
}
.trust h2 em{font-style:italic;color:var(--gold-soft);}
.trust .lead{
  font-size:clamp(17px,2vw,20px);color:rgba(247,241,227,.82);
  max-width:44ch;margin:0 auto;line-height:1.65;
}
.trust-vows{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:58px;text-align:left;}
.vow{border-top:1px solid rgba(247,241,227,.2);padding-top:20px;transition:border-color .3s ease;}
.vow:hover{border-top-color:var(--gold-soft);}
.vow .v-title{font-family:'Fraunces',serif;font-size:20px;margin-bottom:8px;color:var(--cream);}
.vow p{font-size:15.5px;color:rgba(247,241,227,.68);line-height:1.6;}

/* ---------- CTA + footer ---------- */
.closing{justify-content:space-between;padding:104px 24px 0;}
.cta-block{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding-bottom:76px;
}
.cta-mark{
  width:clamp(120px,13vw,158px);
  height:clamp(120px,13vw,158px);
  margin-bottom:34px;
}
.cta h2{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(34px,5vw,58px);color:var(--charcoal);line-height:1.14;margin-bottom:16px;
}
.cta p{font-size:17px;color:var(--muted);max-width:40ch;margin:0 auto 42px;}
.btn-try{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  font-family:'Inter',sans-serif;font-size:17px;font-weight:600;
  color:var(--cream);background:var(--ember);
  padding:18px 42px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;
  box-shadow:0 14px 34px rgba(159,51,44,.28);
  transition:background .2s ease,box-shadow .3s ease,transform .15s ease;overflow:hidden;
}
.btn-try::before{
  content:'';position:absolute;inset:0;border-radius:999px;
  background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%),rgba(247,241,227,.22),transparent 70%);
  opacity:0;transition:opacity .25s ease;
}
.btn-try:hover{background:var(--ember-dark);box-shadow:0 20px 48px rgba(159,51,44,.38);}
.btn-try:hover::before{opacity:1;}
.btn-try svg{transition:transform .25s ease;}
.btn-try:hover svg{transform:translateX(4px);}

.site-footer{
  width:100%;border-top:1px solid var(--parchment-line);
  padding:26px 24px 30px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.footer-note{
  text-align:center;font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(12.9px,1.89vw,23px);
  line-height:1.25;color:var(--muted);
  white-space:nowrap;
}
.footer-note b{color:var(--ember);font-weight:500;}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .nav-brand .nb-tag{display:none;}
}
@media (max-width:1040px){
  .nav-links a.secondary,.nav-sep{display:none;}
}
@media (max-width:860px){
  .site-nav{padding:12px 18px;}
  .nav-links,.rail{display:none;}
  .stat-row{grid-template-columns:1fr;gap:14px;}
  .exchange{grid-template-columns:1fr;}
  .trust-vows{grid-template-columns:1fr;gap:22px;margin-top:36px;}
  .app-frame{aspect-ratio:16/12;}
  .snap{padding:88px 20px 56px;}
  .socratic{padding-top:84px;}
  .contrast-head h2{font-size:clamp(24px,6vw,32px);}
  .anticheat-plaque{font-size:14px;padding:13px 16px;margin-top:20px;}
  .arrow{width:38px;height:38px;}
  .cta-block{padding-bottom:48px;}
  .site-footer{padding:20px 16px 24px;}
}
/* snapping is a nicety, not a cage: drop it when the viewport is short */
@media (max-height:660px),(max-width:640px){
  html{scroll-snap-type:none;}
  .snap{min-height:auto;padding:76px 20px;}
  .demo-sticky{position:relative;height:auto;}
  .demo-stop{display:none;}
  .scene{position:relative;opacity:1;transform:none;margin-bottom:18px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .contours path,.trust .contour-dark path{stroke-dashoffset:0;opacity:.8;animation:none;}
  .reveal,.mini-node,.mini-msg,.arc-card{opacity:1 !important;transform:none !important;}
  .app-frame{transform:none !important;}
  .demo-cursor{display:none;}
}

/* ============================================================
   DEPLOYABLE-BUNDLE ADDITIONS  (not in the mock)
   Accessibility helpers, the demoted waitlist form, footer links,
   and the shared legal-page styles. Themed to the parchment palette.
   ============================================================ */

/* ---------- accessibility helpers ---------- */
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:fixed; left:12px; top:-64px; z-index:100;
  background:var(--ember); color:var(--cream);
  padding:10px 16px; border-radius:10px; text-decoration:none; font-size:14px;
  transition:top .15s ease;
}
.skip-link:focus { top:12px; }
:where(a, button, input, summary, .btn-try, .track):focus-visible {
  outline:3px solid var(--ember); outline-offset:3px; border-radius:6px;
}

/* ---------- demoted "stay updated" waitlist (secondary) ---------- */
.stay-updated {
  width:100%; max-width:560px; margin:0 auto; flex-shrink:0;
  text-align:center; padding:0 24px 40px;
}
.stay-updated .su-label {
  font-size:13px; color:var(--muted); margin-bottom:12px;
}
.signup-form {
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.signup-input {
  flex:1 1 15rem; min-width:0; font:inherit; font-size:15px;
  padding:12px 16px; border-radius:999px; color:var(--ink);
  background:var(--cream); border:1px solid var(--parchment-line);
}
.signup-input::placeholder { color:#a89c7d; }
.signup-form .btn-sub {
  flex:0 0 auto; font:inherit; font-weight:600; font-size:15px; cursor:pointer;
  color:var(--charcoal); background:transparent;
  border:1px solid var(--gold-soft); border-radius:999px; padding:12px 22px;
  transition:background .2s ease, border-color .2s ease, transform .12s ease;
}
.signup-form .btn-sub:hover { background:var(--cream); border-color:var(--gold); }
.signup-form .btn-sub:active { transform:translateY(1px); }
.signup-form .btn-sub[disabled] { opacity:.6; cursor:progress; }
.form-status {
  flex-basis:100%; margin:8px 0 0; min-height:1.2em; font-size:13px; color:var(--muted);
}
.form-status.is-ok { color:var(--ember); }
.form-status.is-error { color:#b3402f; }

/* ---------- footer link row (added to the mock footer) ---------- */
.footer-links {
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center;
  margin-top:14px;
}
.footer-links a {
  font-size:13px; color:var(--muted); text-decoration:none;
  transition:color .15s ease;
}
.footer-links a:hover { color:var(--ember); }
.site-footer { flex-direction:column; gap:2px; }

/* ---------- shared legal pages (privacy.html / terms.html) ---------- */
.legal {
  max-width:44rem; margin-inline:auto;
  padding:clamp(96px,12vw,140px) 24px clamp(48px,8vw,72px);
  position:relative; z-index:1;
}
.legal h1 {
  font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(28px,6vw,44px); color:var(--charcoal); margin-bottom:16px;
}
.legal h2 {
  font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(18px,3vw,22px); color:var(--charcoal);
  margin:34px 0 8px;
}
.legal p { color:var(--ink); margin-bottom:14px; }
.legal a.back {
  display:inline-block; margin-bottom:28px; font-size:14px;
  color:var(--muted); text-decoration:none;
}
.legal a.back:hover { color:var(--ember); }