@font-face{font-family:"Space Grotesk";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/space-grotesk-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/space-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/inter-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --cream:#FBF5E8; --cream-ink:#3A2C21; --cream-accent:#C45C3A;
  --espresso:#2E2118; --espresso-ink:#F4EBDA; --espresso-accent:#C16A38;
  --gray:#F2F2F2; --gray-ink:#3A2C21; --gray-accent:#C45C3A;
  --head:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:64px; --max:1240px; --hb:52px;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-weight:300;font-size:19px;line-height:1.6;background:var(--cream);color:var(--cream-ink)}
h1,h2,h3,b,strong{font-weight:inherit}
em,i,cite{font-style:normal}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.g-cream{background:var(--cream);color:var(--cream-ink);--ink:var(--cream-ink);--ground:var(--cream);--accent:var(--cream-accent)}
.g-espresso{background:var(--espresso);color:var(--espresso-ink);--ink:var(--espresso-ink);--ground:var(--espresso);--accent:var(--espresso-accent)}
.g-gray{background:var(--gray);color:var(--gray-ink);--ink:var(--gray-ink);--ground:var(--gray);--accent:var(--gray-accent)}
.rule{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:16px;top:-80px;background:var(--cream-ink);color:var(--cream);font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;z-index:100}
.skip:focus{top:16px}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.label{font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.h1{font-family:var(--head);font-weight:300;font-size:100px;line-height:1.0;letter-spacing:-.025em;text-wrap:balance}
.h2{font-family:var(--head);font-weight:300;font-size:54px;line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.h3{font-family:var(--head);font-weight:300;font-size:30px;line-height:1.22;letter-spacing:-.01em;text-wrap:balance}
.lead{font-weight:300;font-size:24px;line-height:1.45;text-wrap:pretty}
.statement{font-family:var(--head);font-weight:300;font-size:38px;line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.accent{color:var(--accent)}
p+p{margin-top:1em}
.measure{max-width:660px}

/* actions */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--hb);font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:0 28px;background:var(--ink);color:var(--ground);border:1px solid var(--ink);transition:background .2s,color .2s}
.btn:hover{background:var(--ground);color:var(--ink)}
.link{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px}
.link:hover{border-bottom-width:2px}
.ctas{display:flex;gap:40px;align-items:center;flex-wrap:wrap;margin-top:52px}

/* header */
.top{position:relative;z-index:30;border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:92px;gap:32px}
.logo img{height:52px;width:auto}
.nav{display:flex;align-items:center;gap:36px;margin-left:auto}
.nav>ul{display:flex;gap:36px;list-style:none;align-items:center}
.navlink{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:8px 0;display:inline-flex;gap:8px;align-items:center}
.navlink[aria-current="page"]{border-bottom:1px solid currentColor}
.navlink:hover{border-bottom:1px solid currentColor}
.dd{position:relative}
.dd ul{position:absolute;left:-20px;top:44px;min-width:300px;list-style:none;background:var(--ground);border:1px solid var(--ink);padding:8px 0;display:none}
.dd.open ul{display:block}
.dd ul a{display:block;padding:14px 20px;font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.dd ul a:hover{background:var(--ink);color:var(--ground)}
.caret{width:9px;height:9px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.hbtns{display:flex;align-items:stretch}
.hbtns>*{height:var(--hb);border:1px solid var(--ink)}
.hbtns>*+*{margin-left:-1px}
.hb-out{display:inline-flex;align-items:center;padding:0 24px;font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
.hb-out:hover{background:var(--ink);color:var(--ground)}
.hb-sq{width:var(--hb);display:inline-flex;align-items:center;justify-content:center}
.hb-search:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.hb-menu{background:var(--ink);color:var(--ground)}
.hb-menu span{display:block;width:22px;height:1px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}

/* menu panel */
.panel{position:fixed;inset:0;z-index:60;background:var(--espresso);color:var(--espresso-ink);--ink:var(--espresso-ink);--ground:var(--espresso);overflow:auto;display:none;opacity:0;transition:opacity .2s ease-out}
.panel.open{display:block}
.panel.shown{opacity:1}
.panel .bar{display:flex;justify-content:space-between;align-items:center;height:92px}
.panel .close{width:var(--hb);height:var(--hb);border:1px solid var(--ink);font-family:var(--mono);font-size:22px;display:inline-flex;align-items:center;justify-content:center}
.panel .cols{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding:64px 0 96px}
.panel .big{list-style:none}
.panel .big li{border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.panel .big a{display:block;padding:18px 0;font-family:var(--head);font-weight:300;font-size:40px;line-height:1.1}
.panel .big a:hover{color:var(--espresso-accent)}
.panel .sub a{font-size:28px;padding-left:28px}
.panel ol{list-style:none}
.panel ol li{border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.panel ol a{display:grid;grid-template-columns:72px 1fr;padding:14px 0;font-size:19px}
.panel .meta{margin-top:48px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}

/* search panel */
.search{background:var(--cream);color:var(--cream-ink);--ink:var(--cream-ink);--ground:var(--cream)}
.search input{width:100%;font:300 44px/1.2 var(--head);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:16px 0;margin-top:48px}
.search input:focus-visible{outline:0;border-bottom-width:2px}
.results{list-style:none;margin-top:32px;max-width:860px}
.results li{border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.results a{display:block;padding:18px 0}
.results .t{font-family:var(--head);font-size:24px;display:block}
.results .u{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:6px}

/* hero */
.hero{padding:150px 0 140px}
.hero .sub{margin-top:36px;max-width:680px}
.hero .statement{margin-top:48px}
.hero-split{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}

/* app screens */
.shot{background:var(--gray);padding:44px;display:flex;justify-content:center;align-items:center}
section.g-gray .shot{background:var(--cream)}
.shot picture,.shot img{display:block}
.shot.tall img{width:300px}
.shot.card img{width:100%;max-width:420px}
.shot.pair{gap:28px;align-items:center}
.shot.pair>picture{flex:1 1 0}
.shot.pair img{width:100%}

/* sections */
.sec{padding:128px 0}
.sec+.sec{border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.row{display:grid;grid-template-columns:3fr 9fr;gap:48px}
.row>.label{padding-top:14px}
.split{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
.stack>*+*{margin-top:28px}

/* products */
.products{list-style:none;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.products li{border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.products>li>a,.products .static{display:grid;grid-template-columns:4fr 6fr 1fr;gap:32px;align-items:baseline;padding:36px 0}
.products>li>a:hover .h3{color:var(--accent)}
.products .arrow{justify-self:end;font-family:var(--mono);font-size:20px}

/* proof */
.proof{padding:88px 0}
.proof .figure{font-family:var(--head);font-weight:300;font-size:64px;line-height:1.05;letter-spacing:-.02em;margin-top:20px}

/* hear score act panels */
.hsa{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.hsa>li{padding:40px;display:flex;flex-direction:column;gap:24px}
.hsa>li+li{border-left:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.hsa .thumb{background:var(--gray);height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:auto}
.hsa .thumb img{height:300px;width:auto}
.hsa .thumb.wide img{height:auto;width:78%}
.hsa .thumb.none{background:transparent}
.fact{margin-top:40px;font-family:var(--head);font-weight:300;font-size:26px;line-height:1.3;max-width:900px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);list-style:none;border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-left:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.cards>li{padding:40px;border-right:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.cards .h3{margin:14px 0 14px}
.cards.three{grid-template-columns:repeat(3,1fr)}

/* principles */
.plist{list-style:none;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.plist li{display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.plist .h3{font-size:32px}

/* explained list */
.xlist{list-style:none;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.xlist a{display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.xlist a:hover .h3{color:var(--accent)}

/* quote */
blockquote{font-family:var(--head);font-weight:300;font-size:34px;line-height:1.25;letter-spacing:-.01em;max-width:900px}
blockquote+p{margin-top:28px}

/* team */
.team{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.team li{padding:32px 32px 32px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.team .h3{margin-bottom:8px}

/* doc pages */
.doc{padding:120px 0 136px}
.doc .body{max-width:740px}
.doc .body h2{font-family:var(--head);font-weight:300;font-size:32px;line-height:1.2;margin:56px 0 18px}
.doc .body p{margin-top:1em}
.toc{list-style:none;columns:2;column-gap:48px;margin-top:40px;max-width:760px}
.toc li{padding:10px 0;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);break-inside:avoid}

/* footer */
.foot{padding:96px 0 64px}
.foot .cols{display:grid;grid-template-columns:4fr 3fr 3fr;gap:48px}
.foot ul{list-style:none}
.foot li{padding:6px 0}
.foot a:hover{text-decoration:underline;text-underline-offset:5px}
.foot .wellness{margin-top:80px;padding-top:32px;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);font-size:18px;line-height:1.6;max-width:860px}
.foot .legal{margin-top:20px;font-size:16px}

/* motion: content is visible without script; the script opts in */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .4s ease-out,transform .4s ease-out;transition-delay:var(--d,0ms)}
html.js .rv.in{opacity:1;transform:none}
@keyframes breathe{0%{transform:scale(1)}50%{transform:scale(1.025)}100%{transform:scale(1)}}
html.js .breathe.in img{animation:breathe 7s ease-in-out 1}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  html.js .breathe.in img{animation:none}
  .panel,.btn,.hb-out{transition:none}
}

@media (max-width:900px){
  :root{--pad:20px;--hb:46px}
  body{font-size:18px}
  .label{font-size:13px}
  .top .wrap{height:76px;gap:12px}
  .logo img{height:36px}
  .nav>ul{display:none}
  .hb-out{padding:0 12px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
  .h1{font-size:48px;line-height:1.04}
  .h2{font-size:36px}
  .h3{font-size:25px}
  .lead{font-size:20px}
  .statement{font-size:27px}
  .hero{padding:72px 0 88px}
  .hero-split,.split{grid-template-columns:1fr;gap:44px}
  .shot{padding:28px}
  .shot.tall img{width:230px}
  .shot.pair{flex-direction:column}
  .sec{padding:84px 0}
  .row{grid-template-columns:1fr;gap:18px}
  .products>li>a,.products .static{grid-template-columns:1fr auto;gap:8px 16px;padding:28px 0}
  .products .what{grid-column:1/2}
  .products .arrow{grid-row:1/3;grid-column:2;align-self:center}
  .proof{padding:60px 0}
  .proof .figure{font-size:36px}
  .hsa{grid-template-columns:1fr}
  .hsa>li{padding:28px}
  .hsa>li+li{border-left:0;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
  .hsa .thumb{height:300px}
  .hsa .thumb img{height:260px}
  .fact{font-size:21px}
  .cards,.cards.three,.team{grid-template-columns:1fr}
  .cards>li{padding:28px}
  .plist li,.xlist a{grid-template-columns:44px 1fr;gap:12px}
  .plist .more,.xlist .arrow{grid-column:2}
  .plist .h3{font-size:24px}
  blockquote{font-size:25px}
  .panel .bar{height:76px}
  .panel .cols{grid-template-columns:1fr;gap:48px;padding:32px 0 64px}
  .panel .big a{font-size:32px}
  .search input{font-size:30px}
  .doc{padding:72px 0 96px}
  .toc{columns:1}
  .foot{padding:72px 0 56px}
  .foot .cols{grid-template-columns:1fr}
  .foot .wellness{font-size:17px}
}

/* ===== Round 3 ===== */
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.num{font-variant-numeric:tabular-nums}


/* Bright line flags */

/* Logo swap by ground */
.logo .on-dark{display:none}
.g-espresso .logo .on-light,.top.g-espresso .logo .on-light{display:none}
.g-espresso .logo .on-dark,.top.g-espresso .logo .on-dark{display:block}

/* iPhone frame: action, volume up and down on the left, side button on the right, Dynamic Island */
.phone{--w:300px;width:var(--w);max-width:100%;position:relative;margin:0 auto;flex:none}
.ph-body{position:relative;border-radius:calc(var(--w)*.165);padding:calc(var(--w)*.034);background:linear-gradient(150deg,#6d6a64 0%,#3a3835 18%,#232220 50%,#3a3835 82%,#5d5a55 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 calc(var(--w)*.011) #0d0d0d,0 40px 70px -40px rgba(20,12,6,.55)}
.ph-screen{position:relative;border-radius:calc(var(--w)*.135);overflow:hidden;background:#0b0a09;aspect-ratio:960/2079}
.ph-screen picture,.ph-screen img{display:block;width:100%;height:100%;object-fit:cover}
.ph-island{position:absolute;top:1.25%;left:50%;width:32.5%;aspect-ratio:126/37;transform:translateX(-50%);background:#000;border-radius:999px;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.ph-btn{position:absolute;width:calc(var(--w)*.013);background:linear-gradient(90deg,#1e1d1b,#5a5650 60%,#2a2826);border-radius:2px}
.ph-btn.l{left:calc(var(--w)*-.011)}
.ph-btn.r{right:calc(var(--w)*-.011);background:linear-gradient(270deg,#1e1d1b,#5a5650 60%,#2a2826)}
.ph-btn.act{top:17.5%;height:4.6%}
.ph-btn.vu{top:25%;height:8.4%}
.ph-btn.vd{top:35%;height:8.4%}
.ph-btn.side{top:28%;height:13%}
.ph-panel{background:var(--gray);padding:56px 44px;display:flex;justify-content:center;align-items:center}
section.g-gray .ph-panel{background:transparent}
.g-espresso .ph-panel{background:color-mix(in srgb,#000 22%,var(--espresso))}

/* Square card image (share card, not a phone) */
.cardimg{background:var(--gray);padding:44px;display:flex;justify-content:center}
.cardimg img{width:100%;max-width:400px}

/* Home hero, three directions */
.home .hero{position:relative;overflow:hidden;padding:120px 0 120px}
.hero .eyebrow{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:40px}
.hero[data-dir] .h1{font-size:88px}
.hero .ph-wrap{display:flex;justify-content:center;perspective:1400px}
.hero .ph-tilt{transform-style:preserve-3d;will-change:transform}
.hero .ph-in{will-change:transform,opacity}
html.js .hero .ph-in{opacity:0;transform:translate3d(0,48px,0) rotate(2deg);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
html.js .hero .ph-in.in{opacity:1;transform:none}
.hero.stars::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 18%,rgba(244,235,218,.45),transparent 60%),radial-gradient(1px 1px at 33% 72%,rgba(244,235,218,.35),transparent 60%),radial-gradient(1px 1px at 58% 12%,rgba(244,235,218,.35),transparent 60%),radial-gradient(1px 1px at 72% 44%,rgba(244,235,218,.4),transparent 60%),radial-gradient(1px 1px at 88% 80%,rgba(244,235,218,.3),transparent 60%),radial-gradient(1px 1px at 22% 52%,rgba(244,235,218,.3),transparent 60%),radial-gradient(1px 1px at 47% 88%,rgba(244,235,218,.35),transparent 60%),radial-gradient(1px 1px at 93% 22%,rgba(244,235,218,.4),transparent 60%);background-size:420px 420px}
.hero.stars::after{content:"";position:absolute;inset:-20% -10%;pointer-events:none;background:linear-gradient(118deg,transparent 38%,rgba(244,235,218,.045) 47%,rgba(244,235,218,.06) 50%,rgba(244,235,218,.045) 53%,transparent 62%)}
.hero .wrap{position:relative;z-index:1}

/* Chapter rail */
.rail{position:sticky;top:0;z-index:40;background:var(--ground);color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent);transition:background-color .35s ease,color .35s ease}
.rail .wrap{display:flex;align-items:center;gap:24px;height:56px}
.rail ol{display:flex;gap:4px;list-style:none;overflow-x:auto;scrollbar-width:none;flex:1}
.rail ol::-webkit-scrollbar{display:none}
.rail a{display:flex;gap:8px;align-items:baseline;white-space:nowrap;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:8px 10px}
.rail a:hover .t{border-bottom:1px solid currentColor}
.rail a[aria-current="true"] .t{border-bottom:2px solid var(--accent)}
.rail .n{font-size:11px}
.rail .bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.rail.g-espresso{--accent:var(--espresso-accent)}

/* Stacked chapters (Hear, Score, Act) */
.stage{position:sticky;top:56px;min-height:calc(100vh - 56px);display:flex;align-items:center;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.stage>.wrap{width:100%;will-change:transform,opacity;transform-origin:50% 0}
.stage .grid{display:grid;grid-template-columns:6fr 6fr;gap:72px;align-items:center;padding:64px 0}
.stage .chapno{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.stage .h2{margin-top:28px}
.stage .phone{--w:min(300px,calc((100vh - 230px) * .44))}
.stage .fact{font-size:22px}
.wave{width:100%;height:120px;margin-top:44px;overflow:visible}
.wave path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wave line{stroke:color-mix(in srgb,var(--ink) 25%,transparent);stroke-width:1}
.idx{display:flex;align-items:flex-end;gap:22px;margin-top:40px}
.idx .count{font-family:var(--head);font-weight:300;font-size:168px;line-height:.82;letter-spacing:-.04em;min-width:2ch;display:inline-block}
.idx .band{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:10px}
.score-vis{display:flex;flex-direction:column;align-items:center;gap:0}
.score-vis .cardimg{width:100%;padding:40px}
.score-vis .cardimg img{max-width:340px}
.act-vis{display:flex;align-items:center;justify-content:center}
.act-vis .statement{font-size:64px;line-height:1.02}

/* Night band: cream to espresso with scroll */
.nightband{position:relative;height:230vh;--p:0}
.nb-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.nb-cream,.nb-esp{position:absolute;inset:0}
.nb-cream{background:var(--cream)}
.nb-esp{background:var(--espresso);opacity:var(--p);will-change:opacity}
.nb-stars{position:absolute;inset:0;opacity:calc((var(--p) - .5) * 2);background-image:radial-gradient(1px 1px at 12% 18%,rgba(244,235,218,.5),transparent 60%),radial-gradient(1px 1px at 33% 72%,rgba(244,235,218,.4),transparent 60%),radial-gradient(1px 1px at 58% 12%,rgba(244,235,218,.4),transparent 60%),radial-gradient(1px 1px at 72% 44%,rgba(244,235,218,.45),transparent 60%),radial-gradient(1px 1px at 88% 80%,rgba(244,235,218,.35),transparent 60%),radial-gradient(1px 1px at 22% 52%,rgba(244,235,218,.35),transparent 60%);background-size:380px 380px;will-change:opacity}
.nb-content{position:relative;z-index:1;color:var(--cream-ink);--accent:var(--cream-accent);transition:color .5s ease}
.nightband.dark .nb-content,.nightband.settled .nb-content{color:var(--espresso-ink);--accent:var(--espresso-accent)}
.nb-content .l2,.nb-content .l3,.nb-content .l4{opacity:calc((var(--p) - .45) * 3)}
.nightband.settled{height:auto;--p:1}
.nightband.settled .nb-sticky{position:relative;height:auto;padding:150px 0}

/* Privacy chapter */
.priv{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center}
.priv .cards>li{padding:28px}
.priv .cards .h3{font-size:23px}

/* Doors */
.doors .products>li>a,.doors .products .static{grid-template-columns:3fr 4fr 4fr 1fr}
.doors .kind{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase}

/* Night Grid mark */
.ngmark{width:132px;height:132px;margin-bottom:48px}
.ngmark circle{fill:var(--ink);opacity:1;transition:opacity .45s ease-out,transform .45s ease-out;transform-box:fill-box;transform-origin:center}
.ngmark circle.lit-dot{fill:var(--accent)}
html.js .ngmark.armed circle{opacity:.13;transform:scale(.7)}
html.js .ngmark.armed circle.on{opacity:1;transform:none}

/* Ship questions with answers */
.qa>li .ans{margin-top:4px;font-size:19px;line-height:1.5}

/* Live text pages (essays, learn articles, platform) */
.live{padding:110px 0 136px}
.live .body{max-width:760px}
.live h1{font-family:var(--head);font-weight:300;font-size:76px;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.live h2{font-family:var(--head);font-weight:300;font-size:36px;line-height:1.15;letter-spacing:-.015em;margin:64px 0 18px}
.live h3{font-family:var(--head);font-weight:300;font-size:26px;line-height:1.25;margin:36px 0 10px}
.live p,.live ul,.live ol,.live table,.live figure,.live blockquote{margin-top:1em}
.live ul,.live ol{padding-left:1.2em}
.live li{margin:.45em 0}
.live a{border-bottom:1px solid currentColor}
.live a:hover{border-bottom-width:2px}
.live figure img{width:100%;height:auto;background:var(--gray)}
.live figcaption{font-size:15px;margin-top:10px}
.live table{border-collapse:collapse;width:100%;font-size:16px}
.live th,.live td{border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
.live blockquote{font-size:28px}
.live .hero-eyebrow,.live .eyebrow,.live .hero-footer,.live .series-back,.live .series-next-label,.live .series-next-n,.live .exp-n,.live .exp-read{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.live .hero-card{padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.live .hero-eyebrow-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.live .hero-body{margin:48px 0 40px}
.live .hero-standfirst{font-size:26px;line-height:1.4;margin-top:32px;max-width:720px}
.live .editor-note{font-size:17px;padding:20px 0;border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.live .lead-block p{font-size:24px;line-height:1.45}
.live .soft-close{margin-top:64px}
.live .series-next{margin-top:72px;padding-top:32px;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.live .series-next-link{display:flex;gap:20px;align-items:baseline;margin-top:14px;border:0;font-family:var(--head);font-size:34px}
.live .loop-art,.live svg{max-width:280px}
.live section+section{margin-top:8px}

@media (max-width:900px){
  .home .hero{padding:56px 0 80px}
  .hero[data-dir] .h1{font-size:50px}
  .hero .eyebrow{font-size:12px;margin-bottom:28px}
  .phone{--w:230px}
  .hero .phone{--w:210px}
  .ph-panel{padding:40px 20px}
  .rail .wrap{height:48px;gap:0;padding-right:0}
  .rail a{font-size:11px;padding:8px 8px}
  .rail .n{display:none}
  .stage{position:relative;top:auto;min-height:0}
  .stage .grid{grid-template-columns:1fr;gap:40px;padding:72px 0}
  .stage .phone{--w:230px}
  .wave{height:80px}
  .idx .count{font-size:112px}
  .act-vis .statement{font-size:40px}
  .nightband{height:200vh}
  .priv{grid-template-columns:1fr;gap:40px}
  .doors .products>li>a,.doors .products .static{grid-template-columns:1fr auto;gap:6px 16px}
  .doors .products .kind{grid-column:1/2}
  .doors .products .what{grid-column:1/2}
  .doors .products .arrow{grid-row:1/4}
  .live{padding:64px 0 96px}
  .live h1{font-size:44px}
  .live h2{font-size:28px;margin-top:48px}
  .live .hero-standfirst,.live .lead-block p{font-size:21px}
  .live .series-next-link{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  html.js .hero .ph-in{opacity:1;transform:none;transition:none}
  .hero .ph-tilt{transform:none!important}
  .stage{position:relative;top:auto}
  .stage>.wrap{transform:none!important;opacity:1!important}
  .nightband{height:auto;--p:1!important}
  .nightband .nb-content{color:var(--espresso-ink);--accent:var(--espresso-accent);transition:none}
  .nightband .nb-sticky{position:relative;height:auto;padding:150px 0}
  html.js .ngmark.armed circle{opacity:1;transform:none;transition:none}
  .rail,.rail a{transition:none}
}
/* Static render for the PDF pages: final states, no sticky stacking */
html.render .stage{position:relative;top:auto;min-height:0}
html.render .rail{position:relative}
html.render .nightband{height:auto;--p:1}
html.render .nightband .nb-content{color:var(--espresso-ink);--accent:var(--espresso-accent)}
html.render .nightband .nb-sticky{position:relative;height:auto;padding:150px 0}

.live .editor-note{border-top:0}
.live .learn-h1{margin-top:24px}
.hww-priv{gap:28px;align-items:center}
.hww-priv .phone{--w:220px}
.hww-priv .cardwrap{flex:0 1 240px}
@media (max-width:900px){.hww-priv{flex-direction:column}.hww-priv .phone{--w:220px}.hww-priv .cardwrap{flex:none;width:240px}}

/* Platform: the orbit. The burst leaves the sun and lights Nightsong on the ring */
.platform{padding:110px 0 120px;overflow:hidden;background-image:linear-gradient(color-mix(in srgb,var(--ink) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 4%,transparent) 1px,transparent 1px);background-size:72px 72px}
.pf-grid{display:grid;grid-template-columns:6fr 6fr;gap:48px;align-items:center}
.platform .h1{font-size:84px}
.pf-copy .h1{margin:32px 0 36px}
.pf-vis{position:relative}
.orbit{display:block;width:100%;max-width:640px;margin:0 auto;overflow:visible}
.orbit circle{transform-box:fill-box;transform-origin:center}
.ob-outer{fill:none;stroke:color-mix(in srgb,var(--espresso-ink) 12%,transparent);stroke-width:1.5}
.ob-track{fill:none;stroke:color-mix(in srgb,var(--espresso-accent) 42%,transparent);stroke-width:2}
.ob-sun{fill:#8A4A2A}
.ob-node{fill:var(--espresso);stroke:color-mix(in srgb,var(--espresso-accent) 70%,transparent);stroke-width:4}
.ob-halo{fill:color-mix(in srgb,var(--espresso-accent) 22%,transparent)}
.ob-core{fill:#B87A55}
.ob-burst{fill:none;stroke:var(--espresso-accent);stroke-width:2;opacity:0;vector-effect:non-scaling-stroke}
.pf-tag{position:absolute;left:58%;top:4%;display:flex;flex-direction:column;gap:4px;color:var(--espresso-ink)}
.pf-tag .label{font-size:12px}
.pf-tag:hover .h3{color:var(--espresso-accent)}
/* motion: one soft light ring leaves the ball, travels about an inch and fades. Nothing else moves */
.ob-burst{stroke:#E8B48E;stroke-width:3}
html.js .orbit.go .ob-burst{animation:obGlow 4.2s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes obGlow{0%{transform:scale(1);opacity:0}8%{opacity:.7}70%{transform:scale(2.3);opacity:0}100%{transform:scale(2.3);opacity:0}}
@media (max-width:900px){.platform .h1{font-size:48px}.platform{padding:56px 0 72px}.pf-grid{grid-template-columns:1fr;gap:28px}.pf-tag{left:57%;top:2%}.pf-tag .h3{font-size:20px}}
@media (prefers-reduced-motion:reduce){html.js .orbit *{animation:none!important}}

/* Gray chapters: the phone sits straight on the gray, Apple style */
section.g-gray .ph-panel{background:transparent}

/* Closing tiles: two squared gray doors between hairlines */
.tiles-sec{padding:96px 0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:40px 0;border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:250px;padding:26px 28px 24px;transition:background-color .25s ease}
.tile.light{background:#DADADA;color:#1E1C1A}
.tile.dark{background:#77746F;color:#FFFFFF}
.tile.light:hover{background:#CFCFCF}
.tile.dark:hover{background:#6A6762}
.tile-t{font-family:var(--head);font-weight:300;font-size:64px;line-height:1;letter-spacing:-.03em;padding-right:72px}
.tile-arrow{position:absolute;top:34px;right:28px;width:44px;height:30px;fill:none;stroke:currentColor;stroke-width:2}
.tile:hover .tile-arrow{transform:translateX(4px)}
.tile-arrow{transition:transform .25s ease}
.tile-s{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:900px){.tiles{grid-template-columns:1fr;gap:16px;padding:24px 0}.tile{min-height:170px}.tile-t{font-size:40px}.tile-arrow{top:28px;width:34px}}
@media (prefers-reduced-motion:reduce){.tile,.tile-arrow{transition:none}.tile:hover .tile-arrow{transform:none}}

/* Header: Get Started stands apart from search and menu */
.hbtns .hb-get{min-width:220px;justify-content:center;margin-right:24px;background:transparent;font:inherit;font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:inherit;cursor:pointer}
.hbtns .hb-get+.hb-sq{margin-left:0}
button.btn{cursor:pointer;font-family:var(--mono)}
button.tile{text-align:left;border:0;font:inherit;cursor:pointer;width:100%}
@media (max-width:900px){.hbtns .hb-get{min-width:0;margin-right:8px}}

/* Contact panel: opens from Get Started */
.panel.contact{background:#FFFFFF;color:#1E1C1A;--ink:#1E1C1A;--ground:#FFFFFF}
.ct-bar{height:64px;display:flex;align-items:center}
.ct-close{width:44px;height:44px;margin-left:-10px;display:inline-flex;align-items:center;justify-content:center}
.ct-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.ct-top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-top:24px}
.ct-crumb{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.ct-mail{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid currentColor;padding-top:4px}
.ct-h{font-family:var(--head);font-weight:300;font-size:64px;line-height:1.08;letter-spacing:-.02em;margin:120px 0 64px;max-width:820px}
.ct-form{display:flex;flex-direction:column;gap:44px;padding-bottom:120px}
.ct-row{display:flex;flex-direction:column;gap:10px}
.ct-row label{font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.ct-row .req{color:#C45C3A;margin-left:6px}
.ct-row input,.ct-row select{font:300 24px/1.4 var(--body);color:inherit;background:transparent;border:0;border-bottom:1px solid currentColor;padding:8px 0;appearance:none;border-radius:0}
.ct-row textarea{font:300 20px/1.5 var(--body);color:inherit;background:transparent;border:1px solid currentColor;padding:12px;resize:vertical;border-radius:0}
.ct-row input:focus-visible,.ct-row select:focus-visible{outline:0;border-bottom-width:2px}
.ct-row textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ct-row [aria-invalid="true"]{border-color:#B0432A}
.ct-submit{align-self:flex-start;min-width:300px;height:72px;border:1px solid currentColor;font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
.ct-submit:hover{background:#1E1C1A;color:#FFFFFF}
.ct-status{font-size:18px;min-height:1.5em}
.ct-note{font-size:20px}
.ct-note a{border-bottom:1px solid currentColor}
@media (max-width:900px){.ct-h{font-size:40px;margin:56px 0 40px}.ct-submit{min-width:0;width:100%}.ct-row input,.ct-row select{font-size:20px}}

/* Conveyor: gray cards drift slowly left to right; pauses on hover */
.belt-sec{padding:120px 0 128px;overflow:hidden}
.belt-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:56px}
.belt{overflow:hidden}
.belt-track{display:flex;gap:24px;list-style:none;width:max-content}
.belt-dup>ul{display:flex;gap:24px;list-style:none}
.belt-card{width:380px;min-height:300px;background:#EDEDED;color:#1E1C1A;padding:32px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.belt-card .h3{font-size:28px}
.belt-card .ans{font-size:18px;line-height:1.5;color:#3A2C21}
html.js .belt-track{animation:belt 90s linear infinite}
.belt:hover .belt-track{animation-play-state:paused}
@keyframes belt{from{transform:translateX(calc(-50% - 12px))}to{transform:translateX(0)}}
@media (max-width:900px){.belt-card{width:300px;min-height:260px;padding:24px}.belt-card .h3{font-size:23px}}
@media (prefers-reduced-motion:reduce){html.js .belt-track{animation:none}.belt{overflow-x:auto}.belt-dup{display:none}}
html.render .belt-track{animation:none}
.panel{z-index:80}

.team.counsel{grid-template-columns:repeat(3,1fr)}
.team.counsel li{padding-right:28px}
.team .label{margin-top:12px;font-size:12px}
@media (max-width:900px){.team.counsel{grid-template-columns:1fr}}

.doc-close{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-top:44px}
.doc-close .statement{font-size:28px}
.ready{text-align:center;max-width:820px;margin:0 auto 72px}
.ready .lead{margin-top:24px}
.ready .ctas{justify-content:center}
.ptoc{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:72px;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.ptoc a{display:flex;gap:16px;align-items:baseline;padding:20px 16px 20px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.ptoc .h3{font-size:22px}
.ptoc a:hover .h3{color:var(--accent)}
.pr{display:grid;grid-template-columns:3fr 9fr;gap:48px;padding:80px 0;border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.pr:first-child{border-top:0;padding-top:0}
.pr-n{font-family:var(--head);font-weight:300;font-size:96px;line-height:.9;color:var(--accent)}
.pr-b .lead{margin-top:24px;max-width:760px}
.pr-how{list-style:none;margin-top:12px;max-width:760px}
.pr-how li{padding:10px 0 10px 28px;position:relative}
.pr-how li::before{content:"";position:absolute;left:0;top:22px;width:14px;height:1px;background:var(--accent)}
@media (max-width:900px){.ptoc{grid-template-columns:1fr}.pr{grid-template-columns:1fr;gap:12px;padding:56px 0}.pr-n{font-size:56px}.doc-close .statement{font-size:22px}}

/* Products: huge names on the right, a faint line and /0.x on the left */
.pbig{list-style:none}
.pbig li{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.pbig a{display:grid;grid-template-columns:260px 1fr;grid-template-rows:auto 1fr;column-gap:48px;padding:28px 0 56px;min-height:300px}
.pb-desc{grid-column:1;grid-row:1;font-size:18px;line-height:1.35;max-width:240px;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.pb-n{grid-column:1;grid-row:2;align-self:end;font-family:var(--body);font-size:15px;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.pb-name{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:center;font-family:var(--head);font-weight:300;font-size:clamp(56px,10.2vw,150px);line-height:.95;letter-spacing:-.045em;white-space:nowrap;transition:color .25s ease}
.pbig a:hover .pb-name{color:var(--accent)}
.pb-foot{margin-top:24px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
@media (max-width:900px){.pbig a{grid-template-columns:1fr;min-height:0;padding:24px 0 36px;row-gap:12px}.pb-name{grid-column:1;grid-row:1;justify-self:start;font-size:64px}.pb-desc{grid-row:2}.pb-n{grid-row:3}}

.social{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px}
.social a{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent)}

/* R3f: bylines (named author, visible dates) */
.byline{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-top:20px;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.learn-article .byline{margin:16px 0 28px}
/* R3f: privacy chapter, five cards */
.priv .cards>li.wide{grid-column:1 / -1}
/* R3f: type-on headlines. Real text stays in the page; letters sweep in left to right, then settle. */
html.js [data-typeon] .wd{display:inline-block;white-space:nowrap}
html.js [data-typeon] .ch{display:inline-block;opacity:0;transform:translate3d(0,.12em,0);transition:opacity .16s ease-out,transform .26s cubic-bezier(.2,.7,.2,1)}
html.js [data-typeon].on .ch{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js [data-typeon] .ch{opacity:1;transform:none;transition:none}}
html.render [data-typeon] .ch{opacity:1;transform:none;transition:none}
/* R3f: product showcase boxes, first version, Home only */
.showcase{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sc a{position:relative;display:flex;flex-direction:column;min-height:460px;padding:40px;overflow:hidden}
.sc .label{color:color-mix(in srgb,var(--ink) 70%,transparent)}
.sc-name{font-family:var(--head);font-weight:300;font-size:clamp(44px,5.6vw,84px);line-height:.95;letter-spacing:-.04em;margin-top:auto;transition:color .25s ease}
.sc-desc{font-size:18px;line-height:1.4;max-width:300px;margin-top:18px;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.sc .sil{position:absolute;right:36px;top:36px;width:200px;height:200px;fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:square;opacity:.9}
.sc .sil .dot{fill:var(--accent);stroke:none}
.sc a:hover .sc-name{color:var(--accent)}
.sc.g-espresso a:hover .sc-name{color:var(--espresso-accent)}
@media (max-width:900px){.showcase{grid-template-columns:1fr;gap:16px}.sc a{min-height:360px;padding:28px}.sc .sil{width:132px;height:132px;right:24px;top:24px}.sc-name{font-size:52px}}

.ct-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ct-turnstile{margin:8px 0 18px}
.faq h3{margin-top:28px}
.footnotes{max-width:72ch;margin-top:48px;font-size:14px;line-height:1.5}
.footnotes p{margin-top:0.75em}
.doc .body h1{font-family:var(--head);font-weight:300;font-size:clamp(40px,6vw,64px);line-height:1.05;margin:0 0 18px}
.doc .body h3{font-family:var(--head);font-weight:400;font-size:22px;line-height:1.3;margin:32px 0 8px}
.doc .body ul,.doc .body ol{margin:1em 0 1em 1.25em}
.doc .body li{margin:0.35em 0}
.doc .body a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.doc .body strong{font-weight:600}