/* ============ fonts (self-hosted — no third-party request on page load) ============ */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/fraunces.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter.woff2') format('woff2');
}

/* ============ tokens ============ */
:root{
  --cream: #F6F1E7;
  --cream-deep: #EEE6D6;
  --ink: #211D17;
  --ink-soft: #57503F;
  --ink-faint: #6E6656; /* darkened from #8A8171 — original failed WCAG AA (3.4:1) on cream at small sizes */
  --accent: #C1512A;
  --accent-dim: #A8461F;
  --accent-tint: #F0DCCB;
  --line: rgba(33,29,23,0.12);
  --line-soft: rgba(33,29,23,0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 18px;
  --radius-sm: 10px;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}

::selection{background:var(--accent); color:var(--cream);}

/* ============ loader ============ */
.loader{
  position:fixed; inset:0; z-index:999;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px;
}
.loader-mark{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:2.2rem;
  color:var(--cream);
  letter-spacing:-0.02em;
}
.loader-count{
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  color:var(--accent-tint);
  letter-spacing:0.08em;
}

#page{opacity:0;}

/* ============ layout helpers ============ */
.section-head{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
}
.eyebrow{
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent-dim); /* accent-dim, not accent — accent alone fails WCAG AA (4.17:1) at this size */
  margin-bottom:14px;
}
.section-title{
  font-size:clamp(1.7rem, 3.2vw, 2.6rem);
  line-height:1.15;
  max-width:26ch;
}

/* ============ nav ============ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(246,241,231,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:-0.01em;
}
.nav-links{display:flex; align-items:center; gap:32px;}
.nav-links a{
  font-size:0.92rem;
  font-weight:500;
  color:var(--ink-soft);
  transition:color 0.25s var(--ease);
}
.nav-links a:hover{color:var(--ink);}
.nav-cta{
  color:var(--accent-dim) !important; /* accent-dim, not accent — accent alone fails WCAG AA at this size */
  display:inline-flex; align-items:center; gap:6px;
}
.nav-cta span{transition:transform 0.25s var(--ease);}
.nav-cta:hover span{transform:translateX(3px);}

/* ============ hero (dark, video) ============ */
.hero{
  position:relative;
  height:100vh; height:100svh; min-height:560px;
  overflow:hidden;
  color:var(--cream);
  /* Fallback shown until (or if) the video loads */
  background:
    radial-gradient(1100px 640px at 78% 18%, rgba(193,81,42,0.38), transparent 62%),
    radial-gradient(900px 560px at 8% 92%, rgba(124,138,92,0.2), transparent 60%),
    var(--ink);
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.hero-noise{
  position:absolute; inset:0; pointer-events:none;
  opacity:0.55; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
/* Ends on solid ink so the hero melts into the (also dark) quiz deck below. */
.hero-shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(33,29,23,0.35) 0%, rgba(33,29,23,0) 34%, rgba(33,29,23,0.5) 72%, var(--ink) 100%);
}

/* Fixed pill nav: ink on top of the hero, still readable on cream further down. */
.hero-nav{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  z-index:100;
  display:flex; align-items:center; gap:clamp(12px, 2.8vw, 48px);
  padding:10px clamp(14px, 3vw, 34px);
  background:rgba(33,29,23,0.92);
  backdrop-filter:blur(10px);
  border-radius:0 0 22px 22px;
  box-shadow:0 10px 30px -12px rgba(33,29,23,0.5);
}
.hero-nav a{
  font-size:clamp(0.66rem, 1.15vw, 0.9rem);
  font-weight:500;
  white-space:nowrap;
  color:rgba(246,241,231,0.8);
  transition:color 0.25s var(--ease);
}
.hero-nav a:hover{color:var(--cream);}
.hero-nav a:focus-visible{color:var(--cream); outline:2px solid var(--cream); outline-offset:4px; border-radius:4px;}
.hero-nav .hero-nav-cta{color:var(--accent-tint);}

.hero-content{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 clamp(16px, 4vw, 40px) 8px;
  display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; align-items:end;
}
.hero-word{
  grid-column:1 / -1;
  margin:0;
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  color:var(--cream);
  line-height:0.85;
  letter-spacing:-0.055em;
  font-size:26vw;
}
.hero-word .w{display:inline-block; position:relative;}
.hero-word .ast{position:absolute; top:0.12em; right:-0.17em; font-family:'Inter', sans-serif; font-weight:600; font-size:0.3em; letter-spacing:0; line-height:1; color:var(--accent);}
.hero-side{
  grid-column:1 / -1;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  padding-bottom:24px;
}
.hero-eyebrow{
  font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent-tint);
}
.hero-sub{
  font-size:clamp(0.8rem, 1.1vw, 1rem);
  line-height:1.4;
  color:rgba(246,241,231,0.78);
  max-width:46ch;
}
.hero-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:4px 4px 4px 22px;
  border-radius:999px;
  background:var(--cream); color:var(--ink);
  font-weight:600; font-size:0.98rem;
  transition:gap 0.35s var(--ease);
}
.hero-cta:hover{gap:16px;}
.hero-cta:focus-visible{outline:2px solid var(--cream); outline-offset:4px;}
.hero-cta-icon{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-dim); color:var(--cream);
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.hero-cta:hover .hero-cta-icon{transform:scale(1.12);}

@media (min-width: 640px){ .hero-word{font-size:24vw;} }
@media (min-width: 768px){ .hero-word{font-size:22vw;} }
@media (min-width: 1024px){
  .hero-word{grid-column:span 8; font-size:20vw;}
  .hero-side{grid-column:span 4; padding-bottom:40px;}
}

.btn{
  display:inline-flex; align-items:center;
  font-weight:600;
  font-size:0.98rem;
  padding:15px 26px;
  border-radius:999px;
  cursor:default;
  user-select:none;
}
.btn-primary{
  background:var(--ink);
  color:var(--cream);
}
/* No hover state: these pills are not clickable controls (invite-only — no real
   sign-up action exists), so no interactive affordance is implied. */
.btn-large{padding:18px 34px; font-size:1.05rem;}

/* ============ quiz card parts (used by the deck) ============ */
.quiz-header{
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.78rem; font-weight:600; color:var(--ink-faint);
  letter-spacing:0.02em;
  margin-bottom:16px;
}
.quiz-timer{
  color:var(--accent);
  background:var(--accent-tint);
  padding:3px 9px;
  border-radius:999px;
}
.quiz-q{
  font-family:'Fraunces', serif;
  font-size:1.18rem;
  line-height:1.35;
  font-weight:500;
  margin-bottom:18px;
}
.quiz-options{display:flex; flex-direction:column; gap:9px; margin-bottom:20px;}
.quiz-opt{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px;
  border-radius:12px;
  border:1px solid var(--line);
  font-size:0.92rem;
  color:var(--ink-soft);
}
.quiz-opt span{
  width:22px; height:22px; border-radius:50%;
  background:var(--cream-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; font-weight:700; color:var(--ink-faint);
  flex-shrink:0;
}
.quiz-opt.is-correct{
  border-color:var(--accent);
  background:var(--accent-tint);
  color:var(--ink);
}
.quiz-opt.is-correct span{background:var(--accent); color:var(--cream);}

.quiz-players{
  display:flex; justify-content:space-between;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
}
.player{
  display:flex; align-items:center; gap:7px;
  font-size:0.78rem; font-weight:600; color:var(--ink-soft);
}
.player b{color:var(--accent); font-weight:700;}
.avatar{
  width:22px; height:22px; border-radius:50%;
  background:var(--c, var(--accent));
  color:#fff;
  font-size:0.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.avatar-ghost{background:var(--cream-deep); color:var(--ink-faint);}

/* ============ marquee strip ============ */
.strip{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:20px 0;
  overflow:hidden;
  margin-top:60px;
}
.strip-track{
  display:flex; gap:14px; white-space:nowrap; width:max-content;
  font-family:'Fraunces', serif;
  font-size:1.3rem;
  color:var(--ink-faint);
  animation:marquee 32s linear infinite;
}
.strip-track span:nth-child(odd){color:var(--ink);}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ============ features ============ */
.features{padding:120px 0 40px;}
.features .section-head{margin-bottom:76px;}

.feature-row{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:0.85fr 1fr;
  gap:64px;
  align-items:center;
  margin-bottom:110px;
}
.feature-row-rev{grid-template-columns:1fr 0.85fr;}
.feature-row-rev .feature-copy{order:2;}
.feature-row-rev .feature-visual{order:1;}

.feature-num{
  font-family:'Fraunces', serif;
  font-size:0.95rem;
  color:var(--accent-dim);
  font-weight:600;
}
.feature-copy h3{
  font-size:1.9rem;
  margin-top:12px;
  margin-bottom:14px;
}
.feature-copy p{
  color:var(--ink-soft);
  font-size:1.04rem;
  line-height:1.65;
  max-width:42ch;
}

.mock{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:0 24px 48px -24px rgba(33,29,23,0.18);
}

.mock-score .mock-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 0;
  border-bottom:1px solid var(--line-soft);
  font-weight:600;
  font-size:0.95rem;
  position:relative;
}
.mock-score .mock-row:last-child{border-bottom:none;}
.mock-score .mock-row::before{
  content:'';
  position:absolute; left:0; bottom:0;
  height:3px; width:var(--w);
  background:var(--accent-tint);
}
.mock-score .mock-row em{font-style:normal; color:var(--accent);}

.mock-bank{display:flex; flex-direction:column; gap:10px;}
.bank-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:0.92rem; font-weight:600;
}
.bank-item span{font-weight:500; color:var(--ink-faint); font-size:0.82rem;}
.bank-item-add{
  color:var(--accent);
  border-style:dashed;
  justify-content:center;
}

.mock-room{text-align:left;}
.room-title{font-weight:700; font-size:1.02rem; margin-bottom:18px;}
.room-avatars{display:flex; gap:-8px; margin-bottom:16px;}
.room-avatars .avatar{
  width:38px; height:38px; font-size:0.9rem;
  margin-right:-10px; border:2px solid #fff;
}
.room-status{
  font-size:0.85rem; color:var(--ink-soft);
  background:var(--cream-deep);
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
}

.mock-progress{display:flex; flex-direction:column; gap:18px;}
.prog-item span{display:block; font-weight:600; font-size:0.9rem; margin-bottom:8px;}
.prog-item .bar{height:8px; background:var(--cream-deep); border-radius:999px; overflow:hidden;}
.prog-item .bar i{
  display:block; height:100%; width:var(--w);
  background:var(--accent);
  border-radius:999px;
}

/* ============ interactive network ============ */
.network{padding:120px 0 40px;}
.network .section-head{margin-bottom:56px;}
.network-stage{
  max-width:880px;
  margin:0 auto;
  padding:0 32px;
}
.network-frame{position:relative;}
.network-frame > svg{
  width:100%;
  height:clamp(400px, 64vh, 560px);
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 30px 60px -30px rgba(33,29,23,0.2);
  cursor:grab;
  touch-action:pan-x pan-y;
  -webkit-user-select:none; user-select:none;
}
.network-frame > svg:active{cursor:grabbing;}
.network-stage.is-unavailable .network-frame{display:none;}
.network-stage.is-unavailable .network-actions{display:none;}

.network-zoom{
  position:absolute; right:12px; bottom:12px;
  display:flex; gap:6px;
}
.network-zoom-btn{
  font-family:inherit;
  min-width:36px; height:36px;
  padding:0 10px;
  font-size:1.05rem; font-weight:600; line-height:1;
  color:var(--ink-soft);
  background:rgba(255,255,255,0.92);
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  transition:background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.network-zoom-fit{font-size:0.8rem;}
.network-zoom-btn:hover{border-color:var(--ink-faint); color:var(--ink);}
.network-zoom-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

.network-controls{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:18px;
}
.network-hint{font-size:0.85rem; color:var(--ink-faint); max-width:52ch;}
.network-actions{display:flex; gap:10px; flex-wrap:wrap;}
.network-btn{
  font-family:inherit;
  font-size:0.82rem; font-weight:600; color:var(--accent-dim);
  background:none; border:1px solid var(--accent); border-radius:999px;
  padding:8px 16px; cursor:pointer;
  transition:background 0.25s var(--ease), color 0.25s var(--ease);
}
/* accent-dim fill (not accent) so white text keeps WCAG AA contrast */
.network-btn:hover, .network-btn:focus-visible, .network-btn[aria-pressed="true"]{background:var(--accent-dim); border-color:var(--accent-dim); color:#fff;}
.network-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Edges */
.net-edge{ stroke:var(--ink); stroke-opacity:0.2; stroke-width:1.3; fill:none; transition:stroke 0.2s ease, stroke-opacity 0.2s ease, stroke-width 0.2s ease; }
.net-edge.is-lit{ stroke:var(--accent); stroke-opacity:0.9; stroke-width:2; stroke-dasharray:7 4; animation:net-flow 0.7s linear infinite; }
.net-edge.is-lit.is-reverse{ animation-direction:reverse; }
.net-edge.is-dim{ stroke-opacity:0.07; }
.net-edge.is-custom{ stroke:var(--accent); stroke-dasharray:4 4; stroke-opacity:0.8; stroke-width:1.6; }
.net-edge.is-custom.is-dim{ stroke-opacity:0.25; }
@keyframes net-flow{ from{stroke-dashoffset:11;} to{stroke-dashoffset:0;} }

/* Nodes */
.net-node{ cursor:pointer; transition:opacity 0.2s ease; }
.net-node circle.hit{ fill:transparent; }
.net-node circle.dot{ fill:var(--ink-faint); transition:fill 0.2s ease; }
.net-node.is-root circle.dot{ fill:var(--ink); }
.net-node.is-course circle.dot{ fill:var(--accent); }
.net-node.is-open.is-topic circle.dot{ fill:var(--ink-soft); }
.net-node circle.glow{ fill:var(--accent); opacity:0; transition:opacity 0.3s ease; pointer-events:none; }
.net-node.is-course circle.glow{ opacity:0.18; }
.net-node.is-lit circle.dot{ fill:var(--accent); }
.net-node.is-root.is-lit circle.dot{ fill:var(--ink); }
.net-node.is-lit circle.glow{ opacity:0.3; }
.net-node.is-dim{ opacity:0.35; }
/* dashed ring = "there's more inside" */
.net-node circle.more{ opacity:0; fill:none; stroke:var(--accent-dim); stroke-width:1.4; stroke-dasharray:2.5 2.5; transition:opacity 0.2s ease; pointer-events:none; }
.net-node.has-more circle.more{ opacity:1; }
.net-node circle.ring{ opacity:0; fill:none; stroke:var(--accent); stroke-width:2; transition:opacity 0.2s ease; pointer-events:none; }
.net-node.is-selected circle.dot{ fill:var(--ink); }
.net-node.is-selected circle.ring{ opacity:1; }
.net-node.is-selected circle.more{ opacity:0; }
/* Your own topics */
.net-node.is-mine circle.dot{ fill:#647344; }
.net-node.is-mine.is-lit circle.dot{ fill:var(--accent); }
.net-node.is-mine .net-label{ font-weight:600; fill:#4d5a33; }
.net-node.is-adding circle.ring{ opacity:1; stroke-dasharray:3 3; }
.net-particle{ fill:var(--accent); pointer-events:none; }

/* "+" handle: springs in when you hover, focus or select a topic */
.net-node .add{ opacity:0; pointer-events:none; transition:opacity 0.15s ease; cursor:pointer; }
.net-node .add-bg{ fill:var(--ink); stroke:var(--cream); stroke-width:1.5; }
.net-node .add-plus{ stroke:var(--cream); stroke-width:1.6; stroke-linecap:round; fill:none; }
.net-node:hover .add, .net-node:focus-visible .add, .net-node.is-selected .add, .net-node.is-adding .add{ opacity:1; pointer-events:auto; }
.net-node .add:hover .add-bg{ fill:var(--accent-dim); }
.network-stage.is-linking .net-node .add{ display:none; }

/* Inline name box */
.network-add{
  position:absolute; z-index:6;
  display:flex; align-items:center; gap:4px;
  padding:5px 5px 5px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 16px 32px -14px rgba(33,29,23,0.35);
  transform-origin:50% 0;
  animation:net-add-in 0.42s cubic-bezier(0.34,1.56,0.64,1);
}
.network-add[hidden]{ display:none; }
.network-add:focus-within{ border-color:var(--ink-faint); box-shadow:0 0 0 2px var(--accent-tint), 0 16px 32px -14px rgba(33,29,23,0.35); }
.network-add-input{
  width:9.5rem; border:0; outline:none; background:transparent;
  font:inherit; font-size:0.9rem; color:var(--ink);
}
.network-add-input::placeholder{ color:var(--ink-faint); }
.network-add-go, .network-add-x{
  font:inherit; font-size:0.82rem; font-weight:600; cursor:pointer;
  border:0; border-radius:999px; padding:7px 14px;
}
.network-add-go{ background:var(--ink); color:var(--cream); }
.network-add-go:hover{ background:var(--accent-dim); }
.network-add-x{ background:transparent; color:var(--ink-faint); padding:7px 10px; font-size:1.05rem; line-height:1; }
.network-add-x:hover{ color:var(--ink); }
.network-add-go:focus-visible, .network-add-x:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@keyframes net-add-in{ from{ opacity:0; transform:translateY(-6px) scale(0.82); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .network-add{ animation:none; } }

.net-node:focus{ outline:none; }
.net-node:focus-visible circle.ring{ opacity:1; stroke:var(--ink); stroke-dasharray:2 2; }
.net-node:focus-visible circle.more{ opacity:0; }

.network-stage.is-linking .network-frame > svg{ cursor:crosshair; }

/* Labels — font size is divided by zoom (--u, set in JS) so they stay readable */
.net-label{
  font-family:'Inter', sans-serif;
  font-size:calc(10.5px * var(--u, 1));
  font-weight:600;
  fill:var(--ink-soft);
  paint-order:stroke;
  stroke:#fff;
  stroke-width:calc(3px * var(--u, 1));
  stroke-linejoin:round;
  pointer-events:none;
}
.net-node.is-leaf .net-label{ font-weight:500; }
.net-node.is-course .net-label{ font-size:calc(12px * var(--u, 1)); font-weight:700; fill:var(--accent-dim); }
.net-node.is-root .net-label{ font-size:calc(12.5px * var(--u, 1)); font-weight:700; fill:var(--ink); }
.net-node.is-lit .net-label{ fill:var(--ink); }
.net-node.is-course.is-lit .net-label{ fill:var(--accent-dim); }

@media (prefers-reduced-motion: reduce){
  .net-edge.is-lit{ animation:none; }
}

/* ============ scroll-driven quiz deck ============ */
.deck{
  padding:140px 32px;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  background:var(--cream-deep);
  overflow:hidden;
}
.deck-head{max-width:620px; margin-bottom:64px;}
.deck-head .section-title{margin:0 auto;}
.deck-stack{
  position:relative;
  width:100%;
  max-width:900px;
  height:420px;
}
.deck-card{
  position:absolute;
  top:50%; left:50%;
  width:230px; height:300px;
  margin-left:-115px; margin-top:-150px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px 20px;
  text-align:left;
  box-shadow:0 24px 48px -20px rgba(33,29,23,0.25);
  transform: translate(calc(var(--i) * 6px), calc(var(--i) * -4px)) rotate(calc(var(--i) * -2deg));
}
.deck-card .quiz-q{ margin-bottom:16px; font-size:1.02rem; }
.deck-card-final{
  border-color:var(--accent);
  box-shadow:0 30px 60px -20px rgba(193,81,42,0.35);
}

/* ============ how it works ============ */
.how{padding:60px 0 130px;}
.how .section-head{margin-bottom:64px;}
.steps{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
}
.step-num{
  font-family:'Fraunces', serif;
  color:var(--accent-dim);
  font-size:1.1rem;
  font-weight:600;
}
.step h3{font-size:1.3rem; margin:16px 0 10px;}
.step p{color:var(--ink-soft); font-size:0.96rem; line-height:1.6;}

/* ============ access / cta ============ */
.access{
  background:var(--ink);
  padding:120px 32px;
}
.access-inner{
  max-width:680px;
  margin:0 auto;
  text-align:center;
}
.access .eyebrow{color:var(--accent-tint); justify-content:center;}
.access-title{
  color:var(--cream);
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  line-height:1.18;
  margin-bottom:20px;
}
.access-sub{
  color:rgba(246,241,231,0.7);
  font-size:1.05rem;
  line-height:1.65;
  margin-bottom:38px;
}
.access .btn-primary{background:var(--accent-dim); color:var(--cream);}

/* ============ footer ============ */
.footer{padding:56px 32px 40px; border-top:1px solid var(--line-soft);}
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;
}
.brand-footer{font-size:1.1rem;}
.footer-links{display:flex; gap:26px;}
.footer-links a{font-size:0.9rem; color:var(--ink-soft);}
.footer-links a:hover{color:var(--ink);}
.footer-note{
  width:100%;
  font-size:0.82rem;
  color:var(--ink-faint);
  margin-top:6px;
}
.footer-legal{
  width:100%;
  display:flex; gap:20px; flex-wrap:wrap;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
}
.footer-legal a{font-size:0.82rem; color:var(--ink-soft);}
.footer-legal a:hover{color:var(--ink);}
.footer-disclaimer{
  width:100%;
  font-size:0.78rem;
  line-height:1.6;
  color:var(--ink-faint);
  margin-top:10px;
  max-width:60ch;
}
.footer-disclaimer a{color:var(--accent-dim); text-decoration:underline;}

/* ============ legal pages ============ */
.legal-main{
  max-width:760px;
  margin:0 auto;
  padding:72px 32px 100px;
}
.legal-content h1{
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin-bottom:8px;
}
.legal-updated{
  font-size:0.85rem;
  color:var(--ink-faint);
  margin-bottom:32px;
}
.legal-callout{
  background:#fff;
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  padding:20px 22px;
  font-size:0.98rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin-bottom:40px;
}
.legal-content h2{
  font-size:1.35rem;
  margin-top:44px;
  margin-bottom:14px;
}
.legal-content p{
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-soft);
  margin-bottom:16px;
}
.legal-content ul{
  margin:0 0 16px;
  padding-left:22px;
}
.legal-content li{
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.legal-content a{
  color:var(--accent-dim);
  text-decoration:underline;
}
.legal-content a:hover{color:var(--accent);}

/* ============ reveal defaults (JS controls animation) ============ */
.reveal-up, .reveal-scale{will-change:transform, opacity;}

/* ============ responsive ============ */
@media (max-width: 900px){
  .feature-row, .feature-row-rev{grid-template-columns:1fr; gap:32px;}
  .feature-row-rev .feature-copy, .feature-row-rev .feature-visual{order:initial;}
  .steps{grid-template-columns:1fr;}
  .nav-links{gap:18px;}
  .nav-links a:not(.nav-cta){display:none;}
  .deck-card{width:190px; height:260px; margin-left:-95px; margin-top:-130px; padding:20px 16px;}
  .deck-stack{height:340px;}
}

@media (max-width: 560px){
  .section-head{padding:0 20px;}
  .feature-row{padding:0 20px;}
  .steps{padding:0 20px;}
  .access{padding:80px 20px;}
  .footer{padding:40px 20px 28px;}
  .network-stage{padding:0 20px;}
  .deck{padding:90px 20px;}
  .deck-card{width:160px; height:230px; margin-left:-80px; margin-top:-115px; padding:16px 14px;}
  .deck-card .quiz-q{font-size:0.88rem; margin-bottom:10px;}
  .deck-stack{height:290px;}
}

/* ============ installed-app safe areas ============ */
@supports (padding: max(0px)) {
  .hero-nav{padding-top:calc(10px + env(safe-area-inset-top, 0px));}
  .hero-content{padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));}
  .footer{padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));}
  .nav{padding-top:env(safe-area-inset-top, 0px);}
}