/* Owntrance landing. Brand: dusk palette, Fraunces + Inter (public/brand/index.html).
   Motion: slow and sparse. One signature (the hero spiral); everything else stays quiet. */

:root {
  --dusk: #110E26;
  --deep: #0B0919;
  --night: #1A1638;
  --plum: #2E2563;
  --lavender: #B9A7FF;
  --orchid: #E3A6DA;
  --ember: #FFB88A;
  --moonmilk: #F2EEFF;
  --text: #D9D4F5;
  --mist: #A7A3C9;
  --faint: #7D78A8;
  --sage: #8FD6B5;
  --ink: #14112B;
  --line: rgba(185, 167, 255, .14);
  --line-strong: rgba(185, 167, 255, .26);
  --glass: rgba(26, 22, 56, .55);

  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --dur-ui: .4s;
  --dur-enter: .9s;

  --gutter: clamp(16px, 4vw, 32px);
  --wrap: 1120px;
  --radius: 22px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--dusk);
  color: var(--text);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Grain hides gradient banding on the dark background. */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: overlay;
}

a { color: var(--lavender); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--moonmilk); }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; border-radius: 8px; }
img, svg, canvas { display: block; }
p { margin: 0 0 14px; }
h1, h2, h3 { margin: 0; color: var(--moonmilk); font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
h2 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.03em; }
h2 em, .display em { font-style: italic; }
h3 { font-size: 1.22rem; line-height: 1.3; letter-spacing: -.01em; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { max-width: 760px; }
.center { text-align: center; margin-inline: auto; }
.muted { color: var(--mist); }
.small { font-size: .88rem; }
.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; }
[hidden] { display: none !important; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(185, 167, 255, .05);
  font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mist);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px rgba(143, 214, 181, .14); }
.kicker { display: block; margin-bottom: 16px; font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lavender); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text); max-width: 600px; }
.section { position: relative; padding-block: clamp(88px, 12vw, 148px); }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 { margin-bottom: 18px; }

/* Ambient glows: huge, blurred, slow. If you can watch them move, they are too strong. */
.glow { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(90px); opacity: .5; }
.glow.lav { background: radial-gradient(circle, rgba(124, 99, 230, .75), transparent 65%); }
.glow.orc { background: radial-gradient(circle, rgba(227, 166, 218, .45), transparent 65%); }
.glow.emb { background: radial-gradient(circle, rgba(255, 184, 138, .35), transparent 65%); }
.drift { animation: drift 34s ease-in-out infinite alternate; }
.drift.b { animation-duration: 41s; animation-delay: -12s; }
@keyframes drift { to { transform: translate3d(6%, -5%, 0) scale(1.08); } }

/* Glass. Always over a glow, never over flat colour. */
.glass {
  position: relative; background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px -40px rgba(0, 0, 0, .6);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(242, 238, 255, .26), rgba(185, 167, 255, .08) 30%, rgba(185, 167, 255, .04) 70%, rgba(242, 238, 255, .14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Pointer spotlight on cards (mouse only). */
@media (hover: hover) {
  .spot::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(185, 167, 255, .10), transparent 45%);
    transition: opacity var(--dur-ui) var(--ease-ui);
  }
  .spot:hover::after { opacity: 1; }
}

/* Buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 1rem/1 var(--sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  color: var(--ink); background: var(--lavender);
  box-shadow: 0 10px 34px -12px rgba(185, 167, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .25s var(--ease-out), box-shadow var(--dur-ui) var(--ease-ui), background-color var(--dur-ui) var(--ease-ui);
}
.btn:hover { color: var(--ink); background: #C8B9FF; transform: translateY(-1px); box-shadow: 0 16px 40px -12px rgba(185, 167, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.warm { background: var(--ember); box-shadow: 0 10px 34px -12px rgba(255, 184, 138, .6), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn.warm:hover { background: #FFC6A1; }
.btn.ghost { color: var(--moonmilk); background: rgba(185, 167, 255, .06); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.ghost:hover { background: rgba(185, 167, 255, .12); color: var(--moonmilk); }
.btn[aria-disabled="true"] { color: var(--mist); background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: default; transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* Nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding: 14px 0; transition: padding var(--dur-ui) var(--ease-ui); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 10px 0 16px; border-radius: 999px; transition: background-color var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui), backdrop-filter var(--dur-ui); }
.nav.scrolled .nav-inner { background: rgba(17, 14, 38, .62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 0 0 1px var(--line), 0 18px 50px -30px rgba(0, 0, 0, .8); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--moonmilk); font-family: var(--serif); font-size: 1.4rem; letter-spacing: -.02em; }
.brand img { width: 34px; height: 34px; }
.brand em { font-style: italic; color: var(--lavender); }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: block; padding: 8px 14px; border-radius: 999px; color: var(--mist); text-decoration: none; font-size: .93rem; font-weight: 500; transition: color .2s, background-color .2s; }
.nav-links a:hover { color: var(--moonmilk); background: rgba(185, 167, 255, .08); }
.nav .btn { min-height: 42px; padding: 0 18px; font-size: .92rem; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* Hero */
.hero { position: relative; padding: clamp(112px, 14vw, 150px) 0 clamp(40px, 6vw, 72px); overflow: clip; }
.hero .glow.lav { width: 900px; height: 900px; right: -260px; top: -320px; }
.hero .glow.orc { width: 560px; height: 560px; right: 8%; top: 38%; opacity: .32; }
.hero .glow.emb { width: 520px; height: 520px; left: -220px; top: 10%; opacity: .35; }
.hero-grid {
  position: relative; z-index: 1; display: grid; align-items: center; column-gap: clamp(24px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-areas: "top visual" "bottom visual";
}
.hero-top { grid-area: top; align-self: end; }
.hero-bottom { grid-area: bottom; align-self: start; }
.hero-visual { grid-area: visual; }
.display { font-size: clamp(2.7rem, 12.4vw, 6.6rem); line-height: .96; letter-spacing: -.035em; margin-bottom: 26px; }
.display .line { display: block; }
.display em, .display em.split .word { background: linear-gradient(95deg, var(--orchid) 10%, var(--lavender) 70%); -webkit-background-clip: text; background-clip: text; color: var(--lavender); -webkit-text-fill-color: transparent; padding-right: .08em; }
.display em.split { background: none; padding-right: 0; }
.hero .lead { margin-bottom: 30px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 30px 0 0; padding: 0; font-size: .88rem; color: var(--mist); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 16px; height: 16px; color: var(--sage); flex: none; }

.hero-visual { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 600px; justify-self: end; }
.hero-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb {
  position: absolute; left: 58%; top: 54%; width: 96px; height: 96px; translate: -50% -50%;
  display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: none; color: var(--ink);
}
.orb .core {
  width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFD3B4, var(--ember) 55%, #F49D72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 12px 40px -6px rgba(255, 184, 138, .65);
  transition: transform .35s var(--ease-out);
}
.orb:hover .core { transform: scale(1.05); }
.orb:active .core { transform: scale(.96); }
.orb .core svg { width: 26px; height: 26px; }
.orb .i-pause { display: none; }
.orb[aria-pressed="true"] .i-play { display: none; }
.orb[aria-pressed="true"] .i-pause { display: block; }
.orb .ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.orb .ring circle { fill: none; stroke-width: 2.5; }
.orb .ring .track { stroke: rgba(255, 184, 138, .18); }
.orb .ring .prog { stroke: var(--ember); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset .25s linear; }
.orb .halo { position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255, 184, 138, .35); animation: halo 10s var(--ease-soft) infinite; pointer-events: none; }
.orb[aria-pressed="true"] .halo { animation: none; opacity: 0; }
@keyframes halo { 0%, 100% { transform: scale(.92); opacity: 0; } 40% { transform: scale(1.12); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.caption {
  position: absolute; left: 6%; right: 6%; bottom: 2%; min-height: 3.4em; margin: 0;
  display: flex; align-items: flex-end; justify-content: center; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.02rem, 1.7vw, 1.22rem); line-height: 1.4; color: var(--moonmilk);
  transition: opacity .5s var(--ease-ui), transform .5s var(--ease-out);
}
.caption.idle { color: var(--mist); font-size: .95rem; }
.caption.swap { opacity: 0; transform: translateY(6px); }
.caption .time { font-style: normal; font-family: var(--sans); font-size: .8rem; color: var(--mist); }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "visual" "bottom"; text-align: center; }
  .hero-top, .hero-bottom { align-self: auto; }
  .hero .lead { margin-inline: auto; margin-bottom: 4px; }
  .hero-visual { justify-self: center; max-width: 440px; margin: 0 auto 8px; }
  .actions, .trust { justify-content: center; }
  .hero .glow.lav { width: 620px; height: 620px; right: -280px; top: 20%; }
}

/* Sample details strip */
.sample { position: relative; padding: 0 0 clamp(40px, 6vw, 64px); }
.sample-card { padding: 22px 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.sample-card .tag { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 184, 138, .12); color: var(--ember); }
.sample-card .tag svg { width: 22px; height: 22px; }
.sample-card h3 { font-size: 1.12rem; margin-bottom: 2px; }
.sample-card p { margin: 0; font-size: .9rem; color: var(--mist); }
.sample-card summary { list-style: none; }
.toggle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; cursor: pointer; color: var(--moonmilk); font-size: .9rem; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .2s; white-space: nowrap; }
.toggle:hover { background: rgba(185, 167, 255, .08); }
.toggle svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
details[open] > summary .toggle svg, .toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.transcript { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; }
.transcript ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.transcript button {
  display: grid; grid-template-columns: 52px 1fr; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text);
  font: 1.02rem/1.55 var(--serif); transition: background-color .25s, color .25s;
}
.transcript button:hover { background: rgba(185, 167, 255, .07); }
.transcript button .t { font: 500 .78rem/1.9 var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; }
.transcript button.now { background: rgba(255, 184, 138, .09); color: var(--moonmilk); }
.transcript button.now .t { color: var(--ember); }
.transcript .src { margin: 14px 12px 0; font-size: .84rem; color: var(--mist); }
.note { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--mist); margin: 14px 4px 0; }
.note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--lavender); }
@media (max-width: 640px) {
  .sample-card { grid-template-columns: auto 1fr; }
  .sample-card .toggle { grid-column: 1 / -1; justify-content: center; }
}

/* Manifesto: words brighten as you scroll through it */
.manifesto { position: relative; }
.manifesto p {
  margin: 0; font-family: var(--serif); font-weight: 400; color: var(--moonmilk);
  font-size: clamp(1.75rem, 4.4vw, 3.1rem); line-height: 1.18; letter-spacing: -.025em;
}
.manifesto .w { opacity: .16; transition: opacity .35s var(--ease-ui); }
.manifesto .w.on { opacity: 1; }
.manifesto em { font-style: italic; color: var(--ember); }

/* Two-column sections: the heading stays put while the content scrolls past it. */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.split > .section-head { position: sticky; top: 130px; margin-bottom: 0; }
@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .split > .section-head { position: static; margin-bottom: clamp(36px, 5vw, 56px); }
}
.glowy { position: relative; overflow: clip; }
.glowy > .wrap { position: relative; z-index: 1; }
#evidence .glow.lav { width: 820px; height: 820px; right: -280px; top: 18%; opacity: .3; }
#evidence .glow.emb { width: 520px; height: 520px; left: -220px; bottom: 4%; opacity: .2; }
#trust .glow.orc { width: 680px; height: 680px; left: 30%; top: 30%; opacity: .22; }

/* How it works: a voice line draws down through the steps */
.steps { position: relative; display: grid; gap: clamp(40px, 6vw, 64px); padding-left: 76px; max-width: 760px; }
.steps svg.thread { position: absolute; left: 0; top: 0; width: 56px; height: 100%; overflow: visible; }
.steps .thread path { fill: none; stroke-width: 2; stroke-linecap: round; }
.steps .thread .base { stroke: var(--line); }
.steps .thread .draw { stroke: url(#threadGrad); }
.step { position: relative; }
.step .num {
  position: absolute; left: -76px; top: -6px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font: italic 400 1.35rem/1 var(--serif); color: var(--faint); background: var(--dusk); box-shadow: inset 0 0 0 1px var(--line);
  transition: color .6s var(--ease-ui), box-shadow .6s var(--ease-ui), background-color .6s;
}
.step.on .num { color: var(--ink); background: var(--lavender); box-shadow: 0 0 0 6px rgba(185, 167, 255, .12), 0 0 40px rgba(185, 167, 255, .45); }
.step:nth-child(3).on .num { background: var(--ember); box-shadow: 0 0 0 6px rgba(255, 184, 138, .12), 0 0 40px rgba(255, 184, 138, .45); }
.step h3 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin-bottom: 10px; }
.step p { margin: 0; max-width: 560px; }

/* Evidence */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.stat { padding: 28px 26px; }
.stat .n { font: 400 clamp(2.6rem, 5vw, 3.6rem)/1 var(--serif); color: var(--moonmilk); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat .n span { color: var(--lavender); display: inline-block; min-width: 2ch; }
.stat p { margin: 12px 0 0; font-size: .92rem; color: var(--mist); }
.stat cite { display: block; margin-top: 10px; font-style: normal; font-size: .8rem; color: var(--faint); }
.stat cite a { color: var(--faint); }
.stats-note { font-size: .84rem; color: var(--faint); margin: 0 0 40px; }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ledger .col { padding: 30px 28px; }
.ledger h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ledger h3 .pip { width: 10px; height: 10px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 16px rgba(143, 214, 181, .6); }
.ledger .col.thin h3 .pip { background: var(--ember); box-shadow: 0 0 16px rgba(255, 184, 138, .6); }
.ledger ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ledger li { padding-top: 16px; border-top: 1px solid var(--line); }
.ledger li:first-child { padding-top: 0; border-top: 0; }
.ledger li strong { display: block; color: var(--moonmilk); font-weight: 600; margin-bottom: 3px; }
.ledger li span { display: block; font-size: .94rem; }
.ledger li cite { display: block; margin-top: 4px; font-style: normal; font-size: .8rem; color: var(--faint); }
.ledger li cite a { color: var(--faint); }
@media (max-width: 860px) { .stats, .ledger { grid-template-columns: minmax(0, 1fr); } }

/* Unscroll */
.unscroll { position: relative; overflow: clip; }
.unscroll .glow.lav { width: 760px; height: 760px; left: -300px; top: 10%; opacity: .32; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.socials a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; color: var(--moonmilk); text-decoration: none; font-size: .92rem; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .2s, box-shadow .2s; }
.socials a:hover { background: rgba(185, 167, 255, .08); box-shadow: inset 0 0 0 1px var(--lavender); }
.socials svg { width: 12px; height: 12px; }
.marquee { position: relative; margin: 8px 0 clamp(36px, 5vw, 52px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 90s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font: italic 400 clamp(1.5rem, 3vw, 2.2rem)/1.6 var(--serif); color: rgba(242, 238, 255, .5); white-space: nowrap; }
.marquee span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); opacity: .6; }
@keyframes marquee { to { transform: translateX(-50%); } }
.eps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: ep; }
.ep { counter-increment: ep; padding: 24px 24px 22px; display: grid; gap: 6px; align-content: start; }
.ep strong { font: 400 1.2rem/1.3 var(--serif); color: var(--moonmilk); letter-spacing: -.01em; }
.ep strong::before { content: counter(ep, decimal-leading-zero); display: block; margin-bottom: 10px; font: italic 400 1.05rem/1 var(--serif); color: var(--lavender); }
.ep span { font-size: .93rem; }
.ep cite { font-style: normal; font-size: .79rem; color: var(--faint); }
.ep cite a { color: var(--faint); }
.swipe-hint { display: none; }
@media (max-width: 760px) {
  .eps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scrollbar-width: none; }
  .eps::-webkit-scrollbar { display: none; }
  .ep { flex: 0 0 82%; scroll-snap-align: center; }
  .swipe-hint { display: block; text-align: center; font-size: .82rem; color: var(--faint); margin: 4px 0 0; }
}

/* Voice & safety */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile { padding: 30px 28px; grid-column: span 3; }
.tile.wide { grid-column: span 4; }
.tile.slim { grid-column: span 2; }
.tile .ico { width: 46px; height: 46px; margin-bottom: 20px; border-radius: 14px; display: grid; place-items: center; background: rgba(185, 167, 255, .1); color: var(--lavender); }
.tile .ico.warm { background: rgba(255, 184, 138, .12); color: var(--ember); }
.tile .ico.sage { background: rgba(143, 214, 181, .12); color: var(--sage); }
.tile .ico svg { width: 22px; height: 22px; }
.tile h3 { margin-bottom: 10px; }
.tile p { margin: 0; font-size: .96rem; }
@media (max-width: 860px) { .bento { grid-template-columns: minmax(0, 1fr); } .tile, .tile.wide, .tile.slim { grid-column: auto; } }

/* Founder note */
.founder { position: relative; overflow: clip; }
.founder .glow.emb { width: 620px; height: 620px; right: -200px; top: -60px; opacity: .3; }
.letter { position: relative; z-index: 1; max-width: 820px; margin-inline: auto; padding: clamp(32px, 6vw, 60px); }
.letter .quote { font: 400 clamp(1.5rem, 3.2vw, 2.15rem)/1.3 var(--serif); color: var(--moonmilk); letter-spacing: -.02em; margin-bottom: 24px; }
.letter .quote em { font-style: italic; color: var(--ember); }
.letter p { color: var(--text); }
.sign { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.sign .mono { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--ember), var(--orchid) 50%, var(--lavender)); color: var(--ink); font: italic 400 1.6rem/1 var(--serif); }
.sign strong { display: block; font: italic 400 1.3rem/1.2 var(--serif); color: var(--moonmilk); }
.sign span { font-size: .88rem; color: var(--mist); }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { border-radius: 18px; padding: 0 24px; background: rgba(26, 22, 56, .45); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s; }
.faq details[open] { background: rgba(26, 22, 56, .75); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font: 400 1.15rem/1.35 var(--serif); color: var(--moonmilk); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--lavender); border-bottom: 1.5px solid var(--lavender); rotate: 45deg; translate: 0 -3px; transition: rotate .35s var(--ease-out), translate .35s var(--ease-out); }
.faq details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq .a { padding: 0 0 22px; color: var(--text); animation: open .5s var(--ease-out); }
.faq .a p:last-child { margin: 0; }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }

/* Waitlist */
.join { position: relative; overflow: clip; }
.join .glow.lav { width: 900px; height: 900px; left: 50%; top: 50%; translate: -50% -50%; opacity: .45; }
.join .glow.emb { width: 420px; height: 420px; left: 18%; top: 62%; opacity: .3; }
.join-card { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; padding: clamp(32px, 6vw, 60px); text-align: center; }
.join-card h2 { margin-bottom: 16px; }
.join-card > p { max-width: 560px; margin-inline: auto; }
.form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; margin-top: 30px; text-align: left; }
.field { position: relative; }
.field label { position: absolute; left: 20px; top: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); pointer-events: none; }
.field input, .field select {
  width: 100%; height: 60px; padding: 22px 20px 6px; border-radius: 16px; border: 0;
  background: rgba(11, 9, 25, .7); color: var(--moonmilk); font: 1rem var(--sans);
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .25s var(--ease-ui);
}
.field select { appearance: none; padding-right: 44px; cursor: pointer; }
.field.select::after { content: ""; position: absolute; right: 22px; top: 26px; width: 8px; height: 8px; border-right: 1.5px solid var(--mist); border-bottom: 1.5px solid var(--mist); rotate: 45deg; pointer-events: none; }
.field input::placeholder { color: #5F5A8A; }
.field input:focus, .field select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--lavender), 0 0 0 4px rgba(185, 167, 255, .16); }
.form .btn { height: 60px; border-radius: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 4px; font-size: .84rem; color: var(--mist); }
.msg { margin: 0; font-weight: 500; }
.msg.err { color: var(--ember); }
.done { padding: 10px 0 0; }
.done .tick { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(143, 214, 181, .12); color: var(--sage); box-shadow: 0 0 0 8px rgba(143, 214, 181, .06); }
.done .tick svg { width: 30px; height: 30px; }
.done .tick path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick .7s .15s var(--ease-out) forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
@media (max-width: 760px) { .form { grid-template-columns: minmax(0, 1fr); } }

.support { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; max-width: 760px; margin: 18px auto 0; padding: 24px 28px; position: relative; z-index: 1; }
.support h3 { font-size: 1.15rem; margin-bottom: 4px; }
.support p { margin: 0; font-size: .92rem; color: var(--mist); max-width: 440px; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 56px 0 44px; font-size: .88rem; color: var(--mist); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; }
.footer .brand { margin-bottom: 16px; }
.footer p { margin: 0 0 12px; }
.footer strong { color: var(--text); font-weight: 600; }
.footer .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: .82rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* Privacy and terms pages */
.legal { position: relative; overflow: clip; padding: clamp(120px, 14vw, 160px) 0 clamp(72px, 10vw, 120px); }
.legal .glow.lav { width: 860px; height: 860px; right: -320px; top: -300px; opacity: .4; }
.legal > .wrap { position: relative; z-index: 1; }
.legal-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.legal-head h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1; letter-spacing: -.035em; margin-bottom: 18px; }
.legal-head h1 em { font-style: italic; color: var(--lavender); }
.updated { margin: 0; font-size: .85rem; color: var(--faint); }
.legal-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.toc { position: sticky; top: 120px; }
.toc-title { margin: 0 0 12px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 5px 0 5px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--mist); text-decoration: none; font-size: .9rem; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--moonmilk); border-left-color: var(--lavender); }
.doc { max-width: 720px; }
.doc section { padding: 0 0 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.doc section:last-child { border-bottom: 0; margin-bottom: 0; }
.doc h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.15; margin-bottom: 14px; }
.doc h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--moonmilk); margin: 22px 0 8px; }
.doc ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; }
.doc li::marker { color: var(--lavender); }
.doc strong { color: var(--moonmilk); font-weight: 600; }
.doc .summary { padding: 26px 28px; border-bottom: 0; }
.doc .summary h2 { font-size: 1.35rem; }
.doc .summary p:last-child, .doc .summary ul { margin-bottom: 0; }
.ph { padding: 1px 6px; border-radius: 6px; border: 1px dashed var(--ember); color: var(--ember); background: rgba(255, 184, 138, .08); font-weight: 500; white-space: normal; }
.legal-page .footer { padding-top: 28px; }
.legal-page .footer .base { margin-top: 0; border-top: 0; padding-top: 0; }
.footer a { color: var(--mist); }
.footer a:hover { color: var(--moonmilk); }
.nav-links a[aria-current="page"] { color: var(--moonmilk); background: rgba(185, 167, 255, .08); }
@media (max-width: 860px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Entrances. Hidden only when JS is running, so the page never depends on it. */
.js .rise { opacity: 0; transform: translateY(18px); filter: blur(8px); }
.js .rise.in { opacity: 1; transform: none; filter: blur(0); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out), filter var(--dur-enter) var(--ease-out); transition-delay: var(--d, 0s); }
.js .hero-visual.rise { transform: scale(.96); }
.js .hero-visual.rise.in { transform: none; transition-duration: 1.4s; }
.js .display .word { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(10px); }
.js .display.in .word { opacity: 1; transform: none; filter: blur(0); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); transition-delay: calc(var(--i) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .display .word, .js .hero-visual.rise { transform: none !important; filter: none !important; }
  .js .rise.in, .js .display.in .word { transition: opacity .6s linear !important; transition-delay: 0s !important; }
  .drift, .marquee-track, .orb .halo { animation: none !important; }
  .manifesto .w { opacity: 1 !important; }
  .faq .a { animation: none; }
}