@font-face{font-family:'General Sans';src:url('/assets/fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'General Sans';src:url('/assets/fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'General Sans';src:url('/assets/fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}
:root{
  --canvas:#FFFAF0;
  --ink:#1F1F24;
  --accent:#5A34E6;
  --accent-press:#4F2ECA;
  --accent-light:#9C85F0;
  --lilac:#EFE9FC;
  --font:"General Sans",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --cream-rgb:255,250,240;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
/* paint the html element too: the macOS overscroll bounce reveals it above
   the page, and unpainted it flashes white against the cream canvas */
html{background:var(--canvas)}
body{background:var(--canvas);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent-light);outline-offset:3px}
.mono{font-family:var(--mono)}
.skip-link{position:fixed;left:16px;top:8px;z-index:100;background:var(--ink);color:var(--canvas);padding:10px 14px;transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0);color:var(--canvas)}

@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-140px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes bobflip{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-6px)}}
@keyframes steppulse{0%,55%,100%{fill:#5A34E6}12%,30%{fill:#9C85F0}}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rowbg{0%,100%{background:#fff}10%,26%{background:#EFE9FC}}
@keyframes dotlit{0%,100%{background:rgba(31,31,36,.2)}10%,26%{background:#5A34E6}}
@keyframes checkfill{0%,18%{background:#fff}32%,100%{background:#5A34E6}}
@keyframes fillbar{0%{width:6%}55%,84%{width:72%}100%{width:6%}}
@keyframes drawfos{0%{stroke-dashoffset:1500}45%,100%{stroke-dashoffset:0}}
@keyframes nodepop{0%,8%{opacity:0}20%,100%{opacity:1}}
@keyframes growbar{0%{transform:scaleX(.08)}58%,88%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
@keyframes shimmer{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- kickers, buttons ---------- */
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.btn-dark{background:var(--ink);color:var(--canvas);font-weight:600;font-size:15px;padding:12px 24px;white-space:nowrap;transition:background .2s,color .2s}
.btn-dark:hover{background:var(--accent);color:#fff}
.btn-outline{border:1px solid var(--ink);color:var(--ink);font-weight:600;font-size:15px;padding:14px 26px;transition:background .2s}
.btn-outline:hover{background:var(--lilac);color:var(--ink)}
.btn-cream{background:var(--canvas);color:var(--ink);font-weight:600;font-size:15px;padding:13px 24px;transition:background .2s,color .2s}
.btn-cream:hover{background:var(--accent);color:#fff}
.btn-ghost{border:1px solid rgba(var(--cream-rgb),.5);color:var(--canvas);font-weight:600;font-size:15px;padding:13px 24px;transition:background .2s}
.btn-ghost:hover{background:rgba(var(--cream-rgb),.1);color:var(--canvas)}
.try-link{display:inline-block;margin-top:2px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.try-link:hover{color:var(--accent-press)}
.badges{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 0}
.badges a{display:block}
.badges img{display:block}

/* ---------- header ---------- */
header.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 32px;background:rgba(var(--cream-rgb),.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--ink);overflow:hidden}
.nav-logo{display:block;flex:none}
.nav-logo img{display:block;width:150px;height:auto}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px;color:rgba(31,31,36,.7);white-space:nowrap;min-width:0;overflow:hidden}
.nav-links a{color:rgba(31,31,36,.7)}
.nav-links a:hover{color:var(--accent)}
.nav .btn-dark{flex:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:120px 24px 50px;text-align:center;min-height:86vh}
.hero-clip{position:absolute;inset:0;overflow:hidden;z-index:0}
/* The violet floor is ONE full-bleed, pixel-anchored strip; the scene's SVG
   no longer carries its own floor and the art box ends exactly on the strip's
   top edge, so the two can never drift apart on large screens. */
.hero-clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52px;background:var(--accent)}
/* flush to the header: any top offset here leaves a band of untinted canvas
   ending in a visible gradient edge, the "white line" on large screens */
.hero-art{position:absolute;top:0;bottom:52px;left:50%;transform:translateX(-50%);width:100%;max-width:1500px}
.veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--cream-rgb),.72),rgba(var(--cream-rgb),.34) 50%,transparent 82%);pointer-events:none}
.dawn{position:absolute;top:0;right:0;width:60%;height:68%;background:radial-gradient(ellipse at 75% 22%,rgba(255,196,130,.55),rgba(156,133,240,.32) 45%,transparent 72%);animation:breathe 7s ease-in-out infinite}
.cloud{position:absolute;background:#F4EFE5;border-radius:999px;animation:drift linear infinite}
.steps{position:absolute;inset:0;width:100%;height:100%}
.pfig{position:absolute;animation:bob 2.3s ease-in-out infinite}
.pfig img{display:block;width:auto}
.pfig.near img{height:clamp(130px,14vw,200px)}
.pfig.mid img{height:clamp(105px,11vw,160px)}
.pfig.far img{height:clamp(85px,8.5vw,120px);opacity:.85}
.pfig.flip{animation:bobflip 2.3s ease-in-out infinite}
.p-baker{left:3.5%;bottom:45.3%}
.p-mechanic{left:23%;bottom:26.6%;animation-delay:.7s}
.p-florist{left:37%;bottom:60.2%;animation-delay:1.1s}
.p-barista{left:51.5%;bottom:34.4%;animation-delay:1.6s}
.p-founder{left:65%;bottom:62.5%;animation-delay:.4s}
.p-plumber{right:11.5%;bottom:71.9%;animation-delay:1.3s}
.p-hairdresser{right:.5%;bottom:48.4%;animation-delay:2s}
.hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
/* The founders walk behind the words. A soft cream pool under the copy keeps
   the headline and paragraph readable without hiding the scene. */
.hero-inner::before{content:"";position:absolute;left:50%;top:-46px;transform:translateX(-50%);width:min(1060px,96vw);height:calc(100% + 96px);z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,rgba(var(--cream-rgb),.9),rgba(var(--cream-rgb),.58) 52%,transparent 74%)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.hero-eyebrow span{width:34px;height:18px;background:url('/assets/brand/adaptive-path-motif.svg') center/cover no-repeat}
.hero h1{font-size:clamp(38px,5.2vw,76px);line-height:.98;letter-spacing:-.045em;font-weight:600;margin:10px 0 22px}
.hero h1 .accent{color:var(--accent)}
.hero-sub{max-width:640px;margin:0 auto 34px;font-size:18px;line-height:1.55;color:rgba(31,31,36,.72);text-wrap:pretty}
.video-wrap{position:relative;z-index:3;margin:76px auto 30px;max-width:760px}
.video-card{position:relative;overflow:hidden;background:var(--ink);border:1px solid var(--ink);box-shadow:16px 16px 0 var(--accent)}
.video-bar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid rgba(var(--cream-rgb),.15)}
.video-bar i{width:9px;height:9px;background:rgba(var(--cream-rgb),.3);display:block}
.video-bar i.lit{background:var(--accent-light)}
.video-bar span{margin-left:10px;font-family:var(--mono);font-size:12px;color:rgba(var(--cream-rgb),.62)}
.video-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--lilac);padding:18px 0}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marq 46s linear infinite}
.tile{position:relative;flex:none;width:158px;height:196px;background:var(--accent);border:1px solid var(--ink);overflow:hidden}
.tile img{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);height:118px;width:auto;animation:bob 2.6s ease-in-out infinite}
.tile span{position:absolute;left:11px;bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--canvas)}

/* ---------- statement ---------- */
.statement{background:var(--accent);color:var(--canvas);border-bottom:1px solid var(--ink);padding:clamp(110px,13vw,170px) 24px}
.statement-inner{max-width:1000px;margin:0 auto}
.statement .arrow{font-family:var(--mono);font-size:22px;font-weight:600;opacity:.85;margin-bottom:26px}
.statement p{margin:0;font-size:clamp(30px,4.4vw,58px);line-height:1.12;letter-spacing:-.035em;font-weight:600;text-wrap:pretty}
.statement mark{background:none;color:inherit;box-shadow:inset 0 -0.14em 0 rgba(var(--cream-rgb),.35)}
.statement svg{display:block;width:min(320px,60%);margin-top:34px;color:var(--canvas)}

/* ---------- operating loop ---------- */
.system{border-bottom:1px solid var(--ink);background:var(--canvas)}
.wrap{max-width:1180px;margin:0 auto}
.system-head{padding:104px 24px 0}
.system-head h2{margin:0;font-size:clamp(32px,4.2vw,54px);letter-spacing:-.042em;line-height:1.02;font-weight:600}
.system-head p{max-width:660px;margin:20px 0 0;font-size:17px;line-height:1.6;color:rgba(31,31,36,.65);text-wrap:pretty}
.system-body{padding:76px 24px 110px}
.loop-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:104px}
.loop-row:last-child{margin-bottom:0}
.loop-copy{display:flex;flex-direction:column;gap:18px}
.loop-copy h3{margin:0;font-size:clamp(25px,2.5vw,34px);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.step-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;padding:8px 13px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent)}
.step-tag.solid{background:var(--accent);color:var(--canvas);border-color:var(--accent)}
.bullets{display:flex;flex-direction:column;gap:12px}
.bullets div{display:flex;gap:12px;font-size:15.5px;line-height:1.5;color:rgba(31,31,36,.72)}
.bullets i{flex:none;width:8px;height:8px;margin-top:8px;background:var(--accent);display:block}
.loop-copy .btn-outline{align-self:flex-start;margin-top:8px}
.loop-art{display:flex;flex-direction:column;justify-content:center}
.loop-art.first{order:-1}
.panel{border:1px solid rgba(31,31,36,.22);background:#fff;box-shadow:0 22px 50px rgba(90,52,230,.16)}
.panel-bar{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--ink)}
.panel-bar i{width:8px;height:8px;background:var(--accent);display:block}
.panel-bar .name{font-family:var(--mono);font-size:11px;color:rgba(31,31,36,.65)}
.panel-bar .state{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.panel-foot{display:flex;align-items:center;gap:9px;padding:11px 15px;border-top:1px solid rgba(31,31,36,.25);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(31,31,36,.65)}
.panel-foot i{width:7px;height:7px;background:var(--accent-light);display:block}
.stage-row{display:flex;align-items:center;gap:11px;padding:13px;background:#fff;border:1px solid rgba(31,31,36,.22);animation:rowbg 6s ease-in-out infinite}
.stage-row+.stage-row{margin-top:8px}
.stage-row i{flex:none;width:10px;height:10px;background:rgba(31,31,36,.2);display:block;animation:dotlit 6s ease-in-out infinite}
.stage-row .t{font-size:14px;font-weight:600;letter-spacing:-.01em}
.stage-row .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:rgba(31,31,36,.65)}
.mission-title{font-size:15px;font-weight:600;letter-spacing:-.015em;margin-bottom:5px}
.mission-meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(31,31,36,.65)}
.checks{display:flex;flex-direction:column;gap:11px;margin:20px 0 22px}
.checks div{display:flex;align-items:center;gap:11px}
.checks i{flex:none;width:13px;height:13px;border:1px solid var(--ink);background:#fff;display:block;animation:checkfill 5.5s ease-in-out infinite}
.checks span{font-size:13.5px;color:rgba(31,31,36,.72)}
.progress{height:10px;background:rgba(31,31,36,.1);border:1px solid rgba(31,31,36,.2)}
.progress div{height:100%;background:var(--accent);animation:fillbar 5.5s ease-in-out infinite}
.progress-legend{margin-top:9px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:rgba(31,31,36,.65)}
.fos-path-bg{fill:none;stroke:#E6E2F7;stroke-width:14;stroke-linejoin:miter}
.fos-path{fill:none;stroke:url(#fosg3);stroke-width:6;stroke-linejoin:miter;stroke-dasharray:1500;animation:drawfos 6s ease-in-out infinite}
.fos-nodes circle{animation:nodepop 6s ease-in-out infinite}
.reflection{margin-top:18px;border:1px solid rgba(31,31,36,.25);padding:14px 15px;background:#fff}
.reflection .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.reflection b{display:block;height:9px;background:rgba(31,31,36,.14);animation:shimmer 3.4s ease-in-out infinite}
.reflection b+b{margin-top:7px}
.cap{margin-bottom:16px}
.cap .lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(31,31,36,.65);margin-bottom:7px}
.cap .bar{height:12px;background:rgba(31,31,36,.09);border:1px solid rgba(31,31,36,.18)}
.cap .bar div{height:100%;background:var(--accent);transform-origin:left;animation:growbar 5.5s ease-in-out infinite}

/* ---------- who it's for ---------- */
.dark{background:var(--ink);color:var(--canvas)}
.dark .wrap{padding:120px 24px 130px}
.dark .kicker{color:var(--accent-light)}
.dark h2{font-size:clamp(36px,5vw,66px);line-height:1.02;margin:0 0 24px;letter-spacing:-.04em;font-weight:600}
.dark h2 .accent{color:var(--accent-light)}
.dark .lede{max-width:600px;margin:0;font-size:18px;line-height:1.6;color:rgba(var(--cream-rgb),.7);text-wrap:pretty}
.routes-head{margin-top:74px;padding-top:56px;border-top:1px solid rgba(var(--cream-rgb),.28);display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.routes-head h3{margin:0;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1.1;font-weight:600}
.routes-head span{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-light)}
.routes{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(var(--cream-rgb),.3);margin-top:34px}
.route{padding:40px 36px;display:flex;flex-direction:column;gap:15px;transition:background .2s}
.route:first-child{border-right:1px solid rgba(var(--cream-rgb),.3)}
.route:hover{background:rgba(var(--cream-rgb),.05)}
.route .arrow{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--accent-light)}
.route h4{margin:0;font-size:25px;font-weight:600;letter-spacing:-.025em}
.route .who{font-size:14px;font-family:var(--mono);line-height:1.6;color:rgba(var(--cream-rgb),.62)}
.route p{margin:0;font-size:16px;line-height:1.6;color:rgba(var(--cream-rgb),.72);flex:1}
.route a{align-self:flex-start}

/* ---------- vision ---------- */
.vision{border-bottom:1px solid var(--ink);background:var(--canvas)}
.vision .wrap{padding:104px 24px 110px}
.vision h2{margin:0;max-width:800px;font-size:clamp(32px,4.2vw,54px);letter-spacing:-.042em;line-height:1.03;font-weight:600}
.vision .lede{max-width:640px;margin:20px 0 0;font-size:16.5px;line-height:1.6;color:rgba(31,31,36,.65)}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ink);margin-top:46px}
.pillar{background:#fff;padding:30px 26px;transition:background .2s}
.pillar:not(:last-child){border-right:1px solid var(--ink)}
.pillar:hover{background:var(--lilac)}
.pillar .arrow{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--accent);margin-bottom:16px}
.pillar h3{margin:0 0 10px;font-size:19px;font-weight:500;letter-spacing:-.01em}
.pillar p{margin:0;font-size:14px;line-height:1.6;color:rgba(31,31,36,.65)}

/* ---------- apps ---------- */
.apps{background:var(--lilac);border-bottom:1px solid var(--ink);padding:110px 24px;text-align:center}
.apps-inner{max-width:1000px;margin:0 auto}
.apps h2{margin:0 0 22px;font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.042em;font-weight:600}
.apps .lede{max-width:600px;margin:0 auto 36px;font-size:17px;line-height:1.6;color:rgba(31,31,36,.68);text-wrap:pretty}
.apps .badges{gap:20px;padding:14px 0}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:rgba(var(--cream-rgb),.62);padding:70px 32px 34px}
.foot-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
.foot-brand{display:flex;flex-direction:column;gap:18px}
.foot-brand img.logo{display:block;width:170px;height:auto}
.foot-brand p{margin:0;font-size:14.5px;line-height:1.6;max-width:280px}
.foot-brand .badges{justify-content:flex-start;gap:12px;padding:10px 0}
.foot-col{display:flex;flex-direction:column;gap:14px}
.foot-col .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-light)}
.foot-col a{font-size:14.5px;color:rgba(var(--cream-rgb),.62)}
.foot-col a:hover{color:var(--canvas)}
.foot-company{display:flex;flex-direction:column;gap:5px;font-size:12px;line-height:1.6;text-align:right}
.foot-mail{font-size:13px;color:var(--canvas);text-decoration:underline;text-underline-offset:3px}
.foot-legal{max-width:1180px;margin:44px auto 0;padding-top:26px;border-top:1px solid rgba(var(--cream-rgb),.15);display:flex;justify-content:space-between;align-items:flex-start;gap:16px 40px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.foot-copy{color:rgba(var(--cream-rgb),.72)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .loop-row{grid-template-columns:1fr;gap:34px;margin-bottom:76px}
  .loop-art.first{order:0}
  .pillars{grid-template-columns:1fr 1fr}
  .pillar:nth-child(2n){border-right:0}
  .pillar:nth-child(-n+2){border-bottom:1px solid var(--ink)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:820px){
  .nav-links{display:none}
  header.nav{padding:12px 18px}
  .routes{grid-template-columns:1fr}
  .route:first-child{border-right:0;border-bottom:1px solid rgba(var(--cream-rgb),.3)}
  .dark .wrap{padding:84px 22px 92px}
  .vision .wrap{padding:76px 22px 84px}
  .system-head{padding:76px 22px 0}
  .system-body{padding:52px 22px 80px}
  .apps{padding:80px 22px}
}
@media(max-width:700px){
  /* On phones the illustration cannot sit behind the words without eating them.
     Drop it below the copy as a full-bleed strip instead. */
  .hero{padding:56px 20px 0;min-height:0;display:flex;flex-direction:column}
  .hero-inner{order:1}
  .hero-clip{order:2;position:relative;inset:auto;height:250px;margin:28px -20px 0}
  .hero-art{top:0;bottom:24px;left:0;transform:none;max-width:none}
  .hero-clip::after{height:24px}
  .veil{background:linear-gradient(to bottom,rgba(var(--cream-rgb),.45),transparent 55%)}
  .pfig.far{display:none}
  .pfig.near img{height:96px}
  .pfig.mid img{height:80px}
  .video-wrap{order:3;margin:26px auto 10px}
  .video-card{box-shadow:10px 10px 0 var(--accent)}
  .badges{gap:12px}
  .pillars{grid-template-columns:1fr}
  .pillar{border-right:0!important}
  .pillar:not(:last-child){border-bottom:1px solid var(--ink)}
  .foot-grid{grid-template-columns:1fr}
  footer.site{padding:56px 22px 30px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================================================
   Shared page furniture (added for the multi-page build)
   ============================================================ */

/* ---------- generic section rhythm ---------- */
.section{padding:96px 24px}
.section.tight{padding:72px 24px}
.section .wrap{max-width:1180px;margin:0 auto}
.narrow{max-width:760px}
.measure{max-width:660px}
h2.big{margin:0;font-size:clamp(32px,4.2vw,54px);letter-spacing:-.042em;line-height:1.03;font-weight:600}
h3.mid{margin:0;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1.12;font-weight:600}
.lede-lg{margin:20px 0 0;font-size:18px;line-height:1.6;color:rgba(31,31,36,.68);text-wrap:pretty}
.body{margin:16px 0 0;font-size:17px;line-height:1.65;color:rgba(31,31,36,.72);text-wrap:pretty}
.body-sm{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:rgba(31,31,36,.68)}
.punch{margin:26px 0 0;font-size:clamp(21px,2.3vw,28px);line-height:1.25;letter-spacing:-.025em;font-weight:600;color:var(--ink);text-wrap:pretty}
.rule{border:0;border-top:1px solid var(--ink);margin:0}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px}
.btn-solid{background:var(--accent);color:#fff;font-weight:600;font-size:15px;padding:14px 26px;transition:background .2s}
.btn-solid:hover{background:var(--accent-press);color:#fff}
.dark .btn-outline{border-color:rgba(var(--cream-rgb),.5);color:var(--canvas)}
.dark .btn-outline:hover{background:rgba(var(--cream-rgb),.1);color:var(--canvas)}
.dark .body,.dark .body-sm,.dark .lede-lg{color:rgba(var(--cream-rgb),.72)}
.dark .punch{color:var(--canvas)}

/* ---------- subpage hero ---------- */
.page-hero{position:relative;background:var(--canvas);border-bottom:1px solid var(--ink);padding:96px 24px 84px;overflow:hidden}
.page-hero .wrap{max-width:1180px;margin:0 auto;position:relative;z-index:1}
.page-hero h1{margin:0;font-size:clamp(36px,5vw,68px);line-height:1.01;letter-spacing:-.045em;font-weight:600;max-width:15ch}
.page-hero h1 .accent{color:var(--accent)}
.page-hero .glow{position:absolute;top:0;right:0;width:52%;height:100%;background:radial-gradient(ellipse at 78% 30%,rgba(255,196,130,.4),rgba(156,133,240,.26) 46%,transparent 72%);animation:breathe 7s ease-in-out infinite;pointer-events:none}

/* ---------- numbered 1-2-3 ---------- */
.steps123{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);margin-top:44px;background:#fff}
.step123{padding:32px 28px;display:flex;flex-direction:column;gap:12px}
.step123:not(:last-child){border-right:1px solid var(--ink)}
.step123 .num{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.step123 h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em}
.step123 p{margin:0;font-size:15px;line-height:1.6;color:rgba(31,31,36,.68)}

/* ---------- alternating feature blocks ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:96px}
.feature:last-child{margin-bottom:0}
.feature .art{order:2}
.feature.flip .art{order:-1}
.term{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;padding:8px 13px;border:1px solid var(--accent);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.dark .term{border-color:var(--accent-light);color:var(--accent-light)}

/* ---------- comparison ---------- */
.cmp-scroll{overflow-x:auto;margin-top:40px;border:1px solid var(--ink)}
table.cmp{width:100%;border-collapse:collapse;background:#fff;min-width:720px}
table.cmp th,table.cmp td{text-align:left;padding:18px 20px;border-bottom:1px solid rgba(31,31,36,.18);font-size:15px;line-height:1.55;vertical-align:top}
table.cmp thead th{background:var(--lilac);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;border-bottom:1px solid var(--ink)}
table.cmp tbody th{font-weight:600;letter-spacing:-.01em;width:22%}
table.cmp td{color:rgba(31,31,36,.72)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
table.cmp tr.mine th,table.cmp tr.mine td{background:var(--lilac);color:var(--ink)}
table.cmp tr.mine th{color:var(--accent)}
.cmp-cards{display:none;margin-top:34px;border:1px solid var(--ink);background:#fff}
.cmp-card{padding:24px 22px}
.cmp-card:not(:last-child){border-bottom:1px solid var(--ink)}
.cmp-card.mine{background:var(--lilac)}
.cmp-card h3{margin:0 0 14px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.cmp-card.mine h3{color:var(--accent)}
.cmp-card dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(31,31,36,.6);margin-top:12px}
.cmp-card dd{margin:5px 0 0;font-size:15px;line-height:1.55;color:rgba(31,31,36,.75)}

/* ---------- fair questions ---------- */
.faq{margin-top:40px;border:1px solid var(--ink);background:#fff}
.faq details{border-bottom:1px solid rgba(31,31,36,.18)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:22px 56px 22px 24px;font-size:18px;font-weight:600;letter-spacing:-.02em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:24px;top:22px;font-family:var(--mono);font-size:20px;color:var(--accent);line-height:1.3}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:var(--lilac)}
.faq .answer{padding:0 24px 24px;font-size:16px;line-height:1.65;color:rgba(31,31,36,.72);max-width:70ch}

/* ---------- journeys ---------- */
.journeys{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);margin-top:44px;background:#fff}
.journey{padding:40px 36px;display:flex;flex-direction:column;gap:14px}
.journey:first-child{border-right:1px solid var(--ink)}
.journey .said{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.journey h3{margin:0;font-size:27px;font-weight:600;letter-spacing:-.028em}
.journey p{margin:0;font-size:16px;line-height:1.6;color:rgba(31,31,36,.72)}
.journey .price{margin-top:6px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.journey .price small{display:block;margin-top:4px;font-size:13px;font-weight:400;color:rgba(31,31,36,.6)}
.journey .soon{align-self:flex-start;margin-top:6px;padding:12px 22px;border:1px dashed rgba(31,31,36,.45);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(31,31,36,.6)}
.journey .badges{justify-content:flex-start;padding:6px 0}
.journey a.btn-dark,.journey a.btn-solid{align-self:flex-start}

/* ---------- non-linear journey stages ---------- */
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px;align-items:end}
.stage{border:1px solid var(--ink);background:#fff;padding:24px 20px;display:flex;flex-direction:column;gap:10px}
.stage .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.stage h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em}
.stage p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(31,31,36,.68)}
.stage:nth-child(1){margin-bottom:0}
.stage:nth-child(2){margin-bottom:22px}
.stage:nth-child(3){margin-bottom:8px}
.stage:nth-child(4){margin-bottom:34px}
.stage:nth-child(5){margin-bottom:14px}
.stage-note{margin:28px 0 0;font-size:16px;line-height:1.65;color:rgba(31,31,36,.72);max-width:70ch}

/* ---------- pricing tile ---------- */
.price-tile{border:1px solid var(--ink);background:#fff;box-shadow:16px 16px 0 var(--accent);padding:48px 40px;max-width:520px;margin-top:44px;display:flex;flex-direction:column;gap:14px}
.price-tile .name{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.price-tile .amount{font-size:clamp(44px,6vw,68px);line-height:1;letter-spacing:-.045em;font-weight:600}
.price-tile .amount span{font-size:16px;font-weight:400;letter-spacing:0;color:rgba(31,31,36,.6);display:block;margin-top:10px}
.price-tile p{margin:0;font-size:16.5px;line-height:1.6;color:rgba(31,31,36,.72)}
.price-tile a{align-self:flex-start;margin-top:8px}

/* ---------- Alex case study ---------- */
.case{border:1px solid var(--ink);background:#fff;margin-top:44px}
.case-head{padding:34px 32px;border-bottom:1px solid var(--ink);background:var(--lilac)}
.case-head h3{margin:0;font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.03em}
.case-head p{margin:12px 0 0;font-size:16.5px;line-height:1.6;color:rgba(31,31,36,.72);max-width:62ch}
.case-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.case-cell{padding:30px 26px;display:flex;flex-direction:column;gap:10px}
.case-cell:not(:last-child){border-right:1px solid rgba(31,31,36,.22)}
.case-cell .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.case-cell p{margin:0;font-size:15px;line-height:1.6;color:rgba(31,31,36,.72)}
.case-foot{border-top:1px solid var(--ink);padding:22px 32px}

/* ---------- beliefs ---------- */
.beliefs{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid rgba(var(--cream-rgb),.3);margin-top:44px}
.belief{padding:32px 30px;display:flex;flex-direction:column;gap:10px}
.belief:nth-child(odd){border-right:1px solid rgba(var(--cream-rgb),.3)}
.belief:not(:nth-last-child(-n+1)){border-bottom:1px solid rgba(var(--cream-rgb),.3)}
.belief h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em}
.belief p{margin:0;font-size:15.5px;line-height:1.6;color:rgba(var(--cream-rgb),.7)}

/* ---------- founder story ---------- */
.story{max-width:70ch;margin-top:38px}
.story p{margin:0 0 20px;font-size:17.5px;line-height:1.72;color:rgba(31,31,36,.8)}
.story p:last-of-type{margin-bottom:0}
.story .sig{margin-top:32px;padding-top:22px;border-top:1px solid var(--ink);font-size:16px}
.story .sig b{display:block;font-weight:600;letter-spacing:-.01em}
.story .sig span{color:rgba(31,31,36,.62);font-size:14.5px}

/* ---------- CREW ---------- */
.crew-letters{display:flex;gap:18px;font-family:var(--mono);font-size:clamp(40px,7vw,84px);font-weight:600;letter-spacing:.02em;color:var(--accent);margin-top:36px}
.crew{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);margin-top:26px;background:#fff}
.value{padding:34px 30px;display:flex;flex-direction:column;gap:12px}
.value:nth-child(odd){border-right:1px solid var(--ink)}
.value:nth-child(-n+2){border-bottom:1px solid var(--ink)}
.value h3{margin:0;font-size:24px;font-weight:600;letter-spacing:-.025em;color:var(--accent)}
.value .said{font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.value p{margin:0;font-size:15px;line-height:1.62;color:rgba(31,31,36,.7)}

/* ---------- founder lights ---------- */
.lights{position:relative;margin-top:40px;border:1px solid rgba(var(--cream-rgb),.3);background:#141418;height:280px;overflow:hidden}
/* One radial-gradient tile stands in for a whole grid of founders, so the
   field can scale toward 1,000,000 without a DOM element per founder. */
.lights .field{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(156,133,240,.9) 1.1px,transparent 1.2px);background-size:26px 26px;opacity:.4}
.lights .lit{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,235,190,1) 1.5px,transparent 1.7px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse at 22% 62%,#000 0%,transparent 42%);mask-image:radial-gradient(ellipse at 22% 62%,#000 0%,transparent 42%);animation:breathe 6s ease-in-out infinite}
.lights .caption{position:absolute;left:24px;bottom:20px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--cream-rgb),.72)}
.million{margin-top:26px;font-size:clamp(24px,3.2vw,40px);letter-spacing:-.03em;font-weight:600;color:var(--canvas)}

/* ---------- footer additions ---------- */
.foot-grid.five{grid-template-columns:1.4fr 1fr 1fr .9fr 1fr}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .feature{grid-template-columns:1fr;gap:32px;margin-bottom:64px}
  .feature .art,.feature.flip .art{order:0}
  .steps123{grid-template-columns:1fr}
  .step123:not(:last-child){border-right:0;border-bottom:1px solid var(--ink)}
  .stages{grid-template-columns:1fr 1fr}
  .stage{margin-bottom:0!important}
  .crew,.beliefs{grid-template-columns:1fr}
  .value:nth-child(odd),.belief:nth-child(odd){border-right:0}
  .value:not(:last-child),.belief:not(:last-child){border-bottom:1px solid var(--ink)}
  .belief:not(:last-child){border-bottom-color:rgba(var(--cream-rgb),.3)}
  .case-grid{grid-template-columns:1fr 1fr}
  .case-cell:nth-child(2n){border-right:0}
  .case-cell:nth-child(-n+2){border-bottom:1px solid rgba(31,31,36,.22)}
  .foot-grid.five{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .section{padding:72px 22px}
  .section.tight{padding:56px 22px}
  .page-hero{padding:64px 22px 56px}
  .journeys{grid-template-columns:1fr}
  .journey:first-child{border-right:0;border-bottom:1px solid var(--ink)}
  .cmp-scroll{display:none}
  .cmp-cards{display:block}
  .price-tile{box-shadow:10px 10px 0 var(--accent);padding:34px 26px}
}
@media(max-width:700px){
  .stages{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr}
  .case-cell{border-right:0!important}
  .case-cell:not(:last-child){border-bottom:1px solid rgba(31,31,36,.22)}
  .foot-grid.five{grid-template-columns:1fr}
  .crew-letters{gap:12px}
}

/* ---------- late additions ---------- */
.hero-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero .hero-sub+.hero-sub{margin-top:-16px}
.foot-legal .foot-company{color:rgba(var(--cream-rgb),.45)}
.foot-legal .foot-company .co-name{color:rgba(var(--cream-rgb),.68)}
.case-head strong,.journey p strong{font-weight:600;color:var(--ink)}
.apps .cta-row{justify-content:center}
.apps .punch{margin-left:auto;margin-right:auto;max-width:38ch}
[aria-current="page"]{color:var(--accent)!important;font-weight:600}
.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}
.step123 p strong{font-weight:600;color:var(--accent)}
.punch.narrow{margin-top:34px}
.dark .lights+.body-sm{max-width:60ch}
.z1{white-space:nowrap}

/* ---------- homepage restore ---------- */
.statement .ul{box-shadow:inset 0 -0.14em 0 rgba(var(--cream-rgb),.35)}
.soon-inline{align-self:flex-start;padding:13px 24px;border:1px dashed rgba(var(--cream-rgb),.45);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--cream-rgb),.62)}
.hero .badges{padding-top:22px}
.vision .cta-row{margin-top:40px}
.case .case-grid{border-top:0}
.bullets span{flex:1}

/* ---------- the questions a founder's brain will not stop asking ---------- */
.noise{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 30px}
.noise span{background:#fff;border:1px solid var(--ink);padding:13px 18px;font-size:16px;letter-spacing:-.01em;line-height:1.2}
.noise span:nth-child(2n){background:var(--canvas)}
.noise span:nth-child(3n){transform:rotate(-.6deg)}
.noise span:nth-child(4n){transform:rotate(.5deg)}
.statement-sub{margin:26px 0 0!important;font-size:17px;line-height:1.6;color:rgba(255,250,240,.82);max-width:52ch;font-weight:400!important;letter-spacing:0!important}
.statement-emph{margin:22px 0 0;font-size:clamp(19px,2.1vw,24px);line-height:1.3;letter-spacing:-.02em;font-weight:600;color:var(--canvas);box-shadow:inset 0 -0.14em 0 rgba(var(--cream-rgb),.35);display:inline}
@media(max-width:700px){.noise span{font-size:14.5px;padding:11px 14px}}
/* .accent was only wired up for hero and dark headings, so section headings on
   the cream background lost their second colour */
h2.big .accent,h3.mid .accent,.vision h2 .accent,.apps h2 .accent{color:var(--accent)}

/* ============================================================
   Mobile pass
   ============================================================ */

/* Stop iOS inflating type in landscape */
html{-webkit-text-size-adjust:100%}
/* Anchored sections must clear the sticky header */
[id]{scroll-margin-top:76px}

/* ---------- mobile menu (no JavaScript) ---------- */
.navmenu{display:none}
.navmenu summary{list-style:none;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;padding:0 8px;cursor:pointer}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu summary i{display:block;height:2px;background:var(--ink);transition:transform .18s,opacity .18s}
.navmenu[open] summary i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navmenu[open] summary i:nth-child(2){opacity:0}
.navmenu[open] summary i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navmenu-panel{position:absolute;top:100%;left:0;right:0;background:var(--canvas);border-bottom:1px solid var(--ink);padding:6px 18px 18px;display:flex;flex-direction:column;box-shadow:0 18px 30px rgba(31,31,36,.12)}
.navmenu-panel a{display:flex;align-items:center;min-height:52px;font-size:18px;letter-spacing:-.02em;border-bottom:1px solid rgba(31,31,36,.14);color:var(--ink)}
.navmenu-panel a:last-of-type{border-bottom:0}
/* the header CTA is visible alongside the menu, so the panel only needs its
   own button on the narrowest phones where the header one is dropped */
.navmenu-panel .btn-dark{display:none;justify-content:center;margin-top:14px;min-height:52px;font-size:16px;color:var(--canvas);border-bottom:0}
.navmenu-panel .btn-dark:hover{color:#fff}

@media(max-width:820px){
  header.nav{overflow:visible;gap:10px;padding:11px 16px}
  .nav-links{display:none}
  .navmenu{display:block;position:static}
  .nav-logo img{width:124px}
  .nav-cta{font-size:14px;padding:11px 16px}
}
/* the header CTA only gives up its place on the narrowest phones */
@media(max-width:360px){
  .nav-cta{display:none}
  .navmenu-panel .btn-dark{display:flex}
}

/* ---------- thumb-sized targets ---------- */
@media(max-width:820px){
  .nav-logo{display:flex;align-items:center;min-height:44px}
  .try-link{padding:13px 0;min-height:44px;display:inline-flex;align-items:center}
  .foot-col a{min-height:44px;display:flex;align-items:center}
  .faq summary{padding-top:20px;padding-bottom:20px}
  .cta-row{gap:12px}
  .cta-row .btn-dark,.cta-row .btn-outline,.cta-row .btn-solid,.cta-row .btn-cream,.cta-row .btn-ghost,
  .hero-cta .btn-dark,.price-tile a,.journey a.btn-dark,.route a.btn-cream{
    display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;text-align:center}
  .apps .cta-row{flex-direction:column;align-items:stretch}
}

/* ---------- readable minimum type on small screens ---------- */
@media(max-width:820px){
  .pillar p,.stage p,.belief p{font-size:15px}
  .journey .said,.step123 .num{font-size:13px}
  .panel-bar .name,.panel-bar .state,.panel-foot,.stage-row .n,.cap .lbl,
  .mission-meta,.progress-legend,.reflection .lbl,.tile span,.foot-col .lbl,
  .cmp-card dt,.value .said{font-size:12px}
  .foot-legal,.foot-company{font-size:12.5px;line-height:1.75}
  .foot-legal{flex-direction:column;gap:14px}
  .foot-company{text-align:left}
  .foot-legal .foot-company{color:rgba(var(--cream-rgb),.55)}
  .lights .caption{font-size:12px}
}

/* ---------- fit and rhythm ---------- */
@media(max-width:700px){
  .section{padding:60px 20px}
  .section.tight{padding:48px 20px}
  .page-hero{padding:52px 20px 48px}
  .dark .wrap{padding:64px 20px 68px}
  .vision .wrap{padding:60px 20px 64px}
  .system-head{padding:60px 20px 0}
  .system-body{padding:40px 20px 60px}
  .apps{padding:64px 20px}
  .statement{padding:72px 20px}
  .loop-row{margin-bottom:56px}
  .feature{margin-bottom:52px}
  /* a shorter marquee costs less scroll and still reads as a crowd */
  .marquee{padding:14px 0}
  .tile{width:122px;height:152px}
  .tile img{height:92px;bottom:24px}
  .lights{height:210px}
  .crew-letters{font-size:clamp(34px,13vw,52px)}
  .price-tile{margin-top:32px}
  .routes-head{margin-top:52px;padding-top:40px}
  .noise{margin:26px 0 24px}
}

/* ---------- last mobile pass: targets and minimum type ---------- */
@media(max-width:820px){
  .nav-cta{min-height:44px;display:inline-flex;align-items:center}
  .badges a{display:flex;align-items:center;min-height:44px}
  .step-tag,.stage .n{font-size:12px}
}

/* ---------- narrow phones (320px) ---------- */
/* A closed <details> still generated a box for the panel button, which pushed
   the header wider than the viewport. Take the closed panel out of layout. */
.navmenu:not([open]) .navmenu-panel{display:none}
@media(max-width:820px){
  .case-cell .lbl{font-size:12px}
}
/* These have to come last: the generic mobile rules above re-show .nav-cta */
@media(max-width:360px){
  header.nav .nav-cta{display:none}
  .nav-logo img{width:108px}
  header.nav{padding:10px 12px}
  .section,.apps{padding-left:16px;padding-right:16px}
  .page-hero{padding-left:16px;padding-right:16px}
  .dark .wrap,.vision .wrap,.system-head,.system-body{padding-left:16px;padding-right:16px}
  .statement{padding-left:16px;padding-right:16px}
}
@media(max-width:820px){
  .foot-brand>a{display:inline-flex;align-items:center;min-height:44px}
}

/* the App Store is not the only way to buy, so both purchase pages say so */
.alt-buy{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:rgba(31,31,36,.65)}
.alt-buy a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.journey .alt-buy{margin-top:10px}
@media(max-width:820px){
  .alt-buy{font-size:15px}
  .alt-buy a{display:inline-flex;align-items:center;min-height:44px}
}

/* ============================================================
   Polish pass (Creatify-inspired, kept in our design language)
   ============================================================ */

/* brand-coloured text selection */
::selection{background:var(--accent);color:#fff}

/* trust microcopy under the hero CTA */
.cta-note{margin:14px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(31,31,36,.55)}

/* buttons lift onto a hard offset shadow, same idiom as the video card */
.btn-dark,.btn-outline,.btn-solid,.btn-cream,.btn-ghost{transition:background .2s,color .2s,transform .15s,box-shadow .15s}
.btn-dark:hover,.btn-outline:hover,.btn-solid:hover,.btn-cream:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--accent)}
.btn-dark:active,.btn-outline:active,.btn-solid:active,.btn-cream:active{transform:none;box-shadow:none}
.dark .btn-cream:hover,.dark .btn-ghost:hover{box-shadow:4px 4px 0 var(--accent-light)}
.statement .btn-cream:hover{box-shadow:4px 4px 0 var(--ink)}

/* the dawn from the hero returns in the closing section, bookending the page */
.apps{background:radial-gradient(ellipse at 72% 0%,rgba(255,196,130,.4),rgba(156,133,240,.25) 42%,transparent 68%),var(--lilac)}

/* and a low violet glow rises into the footer */
footer.site{background:radial-gradient(ellipse at 50% 130%,rgba(90,52,230,.45),transparent 62%),var(--ink)}



/* ============================================================
   Animation pass. Everything below is CSS-only, and the global
   prefers-reduced-motion kill switch disables all of it.
   ============================================================ */

/* no grey flash on tap */
a,button,summary{-webkit-tap-highlight-color:transparent}

/* ---------- entrance: hero content rises in on load ---------- */
@keyframes enter-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-inner>*{animation:enter-up .65s cubic-bezier(.2,.7,.2,1) backwards}
.hero-inner>*:nth-child(1){animation-delay:.05s}
.hero-inner>*:nth-child(2){animation-delay:.12s}
.hero-inner>*:nth-child(3){animation-delay:.2s}
.hero-inner>*:nth-child(4){animation-delay:.28s}
.hero-inner>*:nth-child(5){animation-delay:.36s}
.hero-inner>*:nth-child(6){animation-delay:.42s}
.hero-inner>*:nth-child(7){animation-delay:.48s}
.hero .video-wrap{animation:enter-up .8s cubic-bezier(.2,.7,.2,1) .5s backwards}
.hero-clip{animation:z1-fade 1.1s ease both}
@keyframes z1-fade{from{opacity:0}to{opacity:1}}
.page-hero .narrow>*{animation:enter-up .6s cubic-bezier(.2,.7,.2,1) backwards}
.page-hero .narrow>*:nth-child(1){animation-delay:.05s}
.page-hero .narrow>*:nth-child(2){animation-delay:.13s}
.page-hero .narrow>*:nth-child(3){animation-delay:.21s}
.page-hero .narrow>*:nth-child(4){animation-delay:.29s}
.page-hero .narrow>*:nth-child(5){animation-delay:.37s}

/* the eyebrow's little path motif walks in place */
.hero-eyebrow span{animation:bob 2.6s ease-in-out infinite}

/* ---------- mobile menu drops in, links stagger ---------- */
@keyframes menu-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.navmenu[open] .navmenu-panel{animation:menu-drop .22s ease}
.navmenu[open] .navmenu-panel>*{animation:enter-up .3s cubic-bezier(.2,.7,.2,1) backwards}
.navmenu[open] .navmenu-panel>*:nth-child(1){animation-delay:.03s}
.navmenu[open] .navmenu-panel>*:nth-child(2){animation-delay:.06s}
.navmenu[open] .navmenu-panel>*:nth-child(3){animation-delay:.09s}
.navmenu[open] .navmenu-panel>*:nth-child(4){animation-delay:.12s}
.navmenu[open] .navmenu-panel>*:nth-child(5){animation-delay:.15s}
.navmenu[open] .navmenu-panel>*:nth-child(6){animation-delay:.18s}

/* ---------- touch: buttons press down instead of hover-lifting ---------- */
@media(hover:none){
  .btn-dark:active,.btn-outline:active,.btn-solid:active,.btn-cream:active,.btn-ghost:active{
    transform:scale(.97);transition-duration:.06s}
  .pillar:active,.route:active,.noise span:active{transform:scale(.985)}
}

/* ---------- statement band: highlighter sweeps, underline draws ---------- */
/* the underline becomes a background so its width can animate; without
   scroll-driven animation support it simply renders full width as before */
.statement .ul,.statement-emph{box-shadow:none;background-image:linear-gradient(rgba(var(--cream-rgb),.35),rgba(var(--cream-rgb),.35));background-repeat:no-repeat;background-size:100% .14em;background-position:0 94%}


/* ============================================================
   Typography pass
   ============================================================ */
h1,h2,h3,h4,.punch,.statement p{text-wrap:balance}
p{text-wrap:pretty}
/* the second hero paragraph is the thesis; it should not read like a footnote */
.hero-sub+.hero-sub{color:var(--ink);font-weight:500}
.cta-note{text-wrap:balance}
.price,.price-tile .amount,.journey .price,.routes-head span{font-variant-numeric:tabular-nums}

/* ============================================================
   Animations v2. CSS only; the reduced-motion kill switch
   covers every rule below.
   ============================================================ */

/* ---------- headline lines rise out of a mask ---------- */
h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
/* the hidden state lives in the keyframes, not the base style: with
   animations disabled (reduced motion, old browsers) the headline must
   simply be there */
h1 .line>span{display:block;animation:line-up .72s cubic-bezier(.2,.75,.2,1) both}
h1 .line:nth-child(2)>span{animation-delay:.14s}
h1 .line:nth-child(3)>span{animation-delay:.28s}
@keyframes line-up{from{transform:translateY(112%);opacity:0}55%{opacity:1}to{transform:none;opacity:1}}
/* the outer stagger would double-move the h1, so it only fades */
.hero-inner>h1,.page-hero .narrow>h1{animation-name:z1-fade}

/* ---------- the scene builds: steps rise, founders land on them ---------- */
.steps{animation:enter-up .8s cubic-bezier(.2,.7,.2,1) .1s backwards}
@keyframes figpop{from{opacity:0;transform:translateY(30px) scale(.85)}to{opacity:1;transform:none}}
.pfig img{animation:figpop .6s cubic-bezier(.34,1.56,.64,1) backwards}
.p-baker img{animation-delay:.5s}
.p-mechanic img{animation-delay:.62s}
.p-florist img{animation-delay:.74s}
.p-barista img{animation-delay:.86s}
.p-founder img{animation-delay:.98s}
.p-plumber img{animation-delay:1.1s}
.p-hairdresser img{animation-delay:1.22s}

/* ---------- hero parallax: the scene scrolls slower than the page ---------- */
@media(min-width:701px){
  @supports (animation-timeline: scroll()){
    .hero-art{animation:art-drift linear both;animation-timeline:scroll();animation-range:0 120vh}
    .dawn{animation:dawn-drift linear both,breathe 7s ease-in-out infinite;animation-timeline:scroll(),auto;animation-range:0 120vh,normal}
  }
}
@keyframes art-drift{from{transform:translateX(-50%)}to{transform:translateX(-50%) translateY(84px)}}
@keyframes dawn-drift{to{transform:translateY(50px)}}

/* ---------- loop panels slide in from their own side ---------- */

/* translated-in elements must never create sideways scroll */
html{overflow-x:clip}
.system{overflow-x:clip}

/* ============================================================
   Whole-page reveal: every content block outside the heroes
   fades and rises as it scrolls into view. Scoped away from
   .hero / .page-hero so it cannot fight the load-time stagger,
   and .statement-emph keeps its highlighter sweep.
   ============================================================ */


/* ============================================================
   Reveal system: trigger-then-play. reveal.js marks elements
   .rv and flips .in once; the transition runs on its own clock,
   so it is smooth regardless of how the page is scrolled.
   Nothing here hides content without JavaScript.
   ============================================================ */
html.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--rv-d,0s)}
html.js .rv-right{transform:translateY(10px) translateX(56px)}
html.js .rv-left{transform:translateY(10px) translateX(-56px)}
html.js .rv-pop{transform:translateY(20px) scale(.82) rotate(-1.5deg);
  transition-timing-function:cubic-bezier(.34,1.4,.5,1)}
html.js .rv.in{opacity:1;transform:none}
/* the highlighter sweep and the underline draw, on the same trigger */
html.js .rv-sweep{background-size:0% .14em;transition:background-size .9s cubic-bezier(.2,.7,.2,1) .2s}
html.js .rv-sweep.in{background-size:100% .14em}
html.js .rv-draw path{stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1) .25s}
html.js .rv-draw.in path{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){
  html.js .rv,html.js .rv-sweep{opacity:1;transform:none;background-size:100% .14em}
  html.js .rv-draw path{stroke-dashoffset:0}
}

/* ============================================================
   August 26 amendments
   ============================================================ */

/* ---------- Alex: a progressive trail, not four blocks ---------- */
.price-chip{display:inline-block;font-family:var(--mono);font-weight:600;font-size:.85em;background:var(--accent);color:#fff;padding:.1em .45em;white-space:nowrap;transform:rotate(-1deg)}
.trail{position:relative;max-width:720px;margin:64px 0 0;padding-left:44px}
.trail-line{position:absolute;left:10px;top:8px;bottom:8px;width:3px;background:var(--accent);opacity:.35}
.trail-stop{position:relative;padding-bottom:64px}
.trail-stop.last{padding-bottom:0}
.trail-node{position:absolute;left:-40px;top:2px;width:15px;height:15px;background:var(--canvas);border:3px solid var(--accent)}
.trail-node.end{background:var(--accent)}
.trail-tag{display:inline-flex;align-items:center;padding:7px 12px;background:var(--accent);color:var(--canvas);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.trail-stop h3{margin:0 0 12px;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.15;text-wrap:balance}
.trail-stop p{margin:0 0 12px;font-size:16.5px;line-height:1.62;color:rgba(31,31,36,.72);max-width:58ch;text-wrap:pretty}
.trail-stop p:last-of-type{margin-bottom:0}
.trail-stop .try-link{margin-top:14px}
.tubs{display:flex;align-items:flex-end;gap:18px;margin-top:22px;padding:22px 24px;background:#fff;border:1px solid var(--ink);box-shadow:8px 8px 0 var(--accent);max-width:420px}
.tub{display:flex;flex-direction:column;align-items:center;gap:8px}
.tub svg{display:block;width:104px;height:auto}
.tub.small svg{width:88px}
.tub-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(31,31,36,.65)}
.tub-lbl b{color:var(--accent)}
.tub-plus{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--accent);padding-bottom:34px}

/* Printing must not depend on having scrolled through the page first. */
@media print {
  html.js .rv,html.js .rv-sweep,html.js .rv-draw,html.js .rv-trail {
    opacity:1!important;transform:none!important;transition:none!important;animation:none!important;
  }
  html.js .rv-sweep{background-size:100% .14em}
  html.js .rv-draw path{stroke-dashoffset:0}
  .skip-link,#z1-cookie-bar{display:none!important}
}

/* ---------- journeys: availability as status, CTA per approved copy ---------- */
.status-chip{align-self:flex-start;padding:11px 20px;border:1px dashed rgba(var(--cream-rgb),.45);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--cream-rgb),.62)}
.status-chip.live{border:1px solid var(--accent-light);color:var(--accent-light)}
.dark .cta-row{margin-top:38px}

/* ---------- How It Works: one repeating section system ---------- */
.hiw{background:var(--canvas);padding:84px 24px}
.hiw .wrap{max-width:1180px;margin:0 auto}
.hiw .feature{margin-bottom:0}
.hiw .kicker{margin-bottom:14px}
.hiw h3.mid{margin-bottom:6px}
.hiw .body{max-width:58ch}
.key-line{margin:26px 0 0;font-size:clamp(19px,2.1vw,24px);line-height:1.42;letter-spacing:-.02em;font-weight:600;color:var(--ink);max-width:26ch}
/* highlight lives on an inline span so each wrapped line gets its own bar */
.key-line span{background-image:linear-gradient(rgba(90,52,230,.22),rgba(90,52,230,.22));background-repeat:no-repeat;background-size:100% .5em;background-position:0 82%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media(max-width:820px){
  .hiw{padding:60px 20px}
  .trail{padding-left:34px;margin-top:48px}
  .trail-node{left:-31px}
  .trail-line{left:8px}
  .trail-stop{padding-bottom:52px}
  .tubs{gap:12px;padding:18px 16px}
  .tub svg{width:86px}.tub.small svg{width:70px}
}

/* the sweep trigger needs the light-background variant too */
html.js .key-line span{transition:background-size .9s cubic-bezier(.2,.7,.2,1) .2s;background-size:0% .5em}
html.js .key-line.in span{background-size:100% .5em}
@media(prefers-reduced-motion:reduce){html.js .key-line span{background-size:100% .5em}}

/* ---------- About: four beliefs sit as a clean 2x2 ---------- */
.beliefs{grid-template-columns:1fr 1fr}
.belief:nth-child(odd){border-right:1px solid rgba(var(--cream-rgb),.3)}
.belief:nth-child(-n+2){border-bottom:1px solid rgba(var(--cream-rgb),.3)}
.belief{border-bottom:0}
.belief:nth-child(-n+2){border-bottom:1px solid rgba(var(--cream-rgb),.3)}
@media(max-width:1000px){
  .beliefs{grid-template-columns:1fr}
  .belief:nth-child(odd){border-right:0}
  .belief:not(:last-child){border-bottom:1px solid rgba(var(--cream-rgb),.3)}
}

/* ---------- One Million Founders: live canvas over the static field ---------- */
.lights-canvas{position:absolute;inset:0;width:100%;height:100%}
.lights.live .lit{display:none}
#founderCount b{font-variant-numeric:tabular-nums;color:#FFEBBE;font-weight:600}

/* ============================================================
   Fixes + polish round: header edge, wordmark, trail + HIW motion
   ============================================================ */

/* Chromium's backdrop-filter can lighten the top pixels of the translucent
   sticky header (the blur has nothing to sample above the viewport). A solid
   canvas-coloured top border paints over that zone. */
header.nav{border-top:3px solid var(--canvas)}

/* the trail draws itself: line grows, nodes pop, as the story is discovered */
html.js .trail .trail-line{transform:scaleY(0);transform-origin:top;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .1s}
html.js .trail.in .trail-line{transform:scaleY(1)}
html.js .trail-stop .trail-node{opacity:0;transform:scale(.3);transition:opacity .4s,transform .45s cubic-bezier(.34,1.4,.5,1);transition-delay:.25s}
html.js .trail-stop.in .trail-node{opacity:1;transform:none}
html.js .trail-stop .trail-tag{opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:.15s}
html.js .trail-stop.in .trail-tag{opacity:1;transform:none}
html.js .tubs{opacity:0;transform:translateY(18px) rotate(-1deg);transition:opacity .6s,transform .6s cubic-bezier(.34,1.4,.5,1) .2s}
html.js .trail-stop.in .tubs{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.js .trail .trail-line,html.js .trail-stop .trail-node,
  html.js .trail-stop .trail-tag,html.js .tubs{opacity:1;transform:none}
}

/* HIW art panels slide in from their own side, same as the homepage loop */
html.js .hiw .feature .art .panel{transform:translateY(10px) translateX(56px)}
html.js .hiw .feature.flip .art .panel{transform:translateY(10px) translateX(-56px)}
html.js .hiw .feature .art .panel.in{transform:none}

/* ============================================================
   Ricky's August 29 content round, set in our design language
   ============================================================ */

/* "Install the app or use our web version." under primary CTAs */
.install-copy{margin:14px 0 0;font-size:15px;line-height:1.5;color:rgba(31,31,36,.68)}
.install-copy a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.install-copy a:hover{color:var(--accent-press)}
.install-copy.dark{color:rgba(var(--cream-rgb),.72)}
.install-copy.dark a{color:var(--canvas)}
.install-copy.dark a:hover{color:var(--accent-light)}
.hero .install-copy{margin-top:16px}

/* the free-CTA group in subpage heroes */
.hero-actions{margin-top:36px;padding-top:30px;border-top:1px solid var(--ink);max-width:560px}
.hero-actions .punch{margin-top:0}
.hero-actions .badges{justify-content:flex-start;padding:16px 0 0;gap:16px}

/* homepage journeys: the free close under the two-journey pitch */
/* the free close reads as the section's conclusion, not a second headline
   competing with "So, what are you building?" */
.journeys-cta{margin-top:48px;padding-top:44px;border-top:1px solid rgba(var(--cream-rgb),.28)}
.journeys-cta h3{max-width:640px;margin:0;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1.12;font-weight:600;text-wrap:balance}
.journeys-cta .install-copy{margin:22px 0 0;font-size:17px}
.journeys-cta .badges{justify-content:flex-start;gap:20px;padding:18px 0 0}

/* seventh mobile-menu item (Home joined the nav) */
.navmenu[open] .navmenu-panel>*:nth-child(7){animation-delay:.21s}

/* the LinkedIn line sits on its own under the signature */
.story .sig .try-link{display:block;width:max-content;margin-top:12px}
@media(max-width:820px){
  .install-copy a{display:inline-flex;align-items:center;min-height:44px}
}

/* ============================================================
   How It Works: Evidence + Decision panels (the artboard never
   drew these two; same furniture as the extracted four). The
   global prefers-reduced-motion kill switch covers the loops.
   ============================================================ */
.evid{display:flex;align-items:center;gap:11px;padding:13px;background:#fff;border:1px solid rgba(31,31,36,.22)}
.evid+.evid{margin-top:8px}
.evid .t{font-size:14px;font-weight:600;letter-spacing:-.01em}
.evid .tag{margin-left:auto;flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--ink);animation:stampin 5.5s ease-in-out infinite}
.evid .tag.hold{background:var(--accent);color:var(--canvas);border-color:var(--accent)}
.evid .tag.surp{background:var(--lilac)}
.evid .tag.flop{background:var(--ink);color:var(--canvas)}
@keyframes stampin{0%,4%{opacity:0;transform:scale(1.4)}11%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1.4)}}
.dec{display:flex;align-items:center;gap:11px;padding:13px;background:#fff;border:1px solid rgba(31,31,36,.22);animation:rowbg 6s ease-in-out infinite}
.dec+.dec{margin-top:8px}
.dec i{flex:none;width:12px;height:12px;border:1px solid var(--ink);border-radius:50%;background:#fff;display:block;animation:decfill 6s ease-in-out infinite}
.dec .t{font-size:14px;font-weight:600;letter-spacing:-.01em}
.dec .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:rgba(31,31,36,.65)}
@keyframes decfill{0%,100%{box-shadow:inset 0 0 0 0 var(--accent)}10%,26%{box-shadow:inset 0 0 0 6px var(--accent)}36%{box-shadow:inset 0 0 0 0 var(--accent)}}
.evid-foot,.dec-foot{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(31,31,36,.65)}

/* Intelligence + system-loop panels: the last two named sections get art
   in the same furniture (Ricky's second pass on the missing graphics) */
.sugg{background:var(--lilac);border:1px solid rgba(31,31,36,.22);padding:15px 16px}
.sugg .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.sugg p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(31,31,36,.8)}
.sugg-act{display:flex;align-items:center;gap:10px;margin-top:14px}
.sugg-act .chip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border:1px solid var(--ink);background:#fff;animation:stampin 5.5s ease-in-out infinite}
.sugg-act .chip.take{background:var(--accent);color:var(--canvas);border-color:var(--accent)}
.sugg-act .who{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(31,31,36,.65)}
.loopline{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.loopline .node{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;border:1px solid var(--ink);background:#fff;animation:nodelit 7.5s ease-in-out infinite}
.loopline .arr{color:rgba(31,31,36,.45)}
.loopline .arr.again{color:var(--accent);font-size:15px}
@keyframes nodelit{0%,100%{background:#fff;color:var(--ink);border-color:var(--ink)}8%,18%{background:var(--accent);color:var(--canvas);border-color:var(--accent)}28%{background:#fff;color:var(--ink);border-color:var(--ink)}}

/* the tax line on the price tile: quieter than the pitch, still readable
   (CMA wording from the September 3 legal brief) */
.price-tile .tax-note{font-size:13.5px;color:rgba(31,31,36,.6)}

/* About: the brief's eight-section order. The hero line is longer than the
   other page heroes, the possibility statement carries a ripple of outcomes
   and the mission, and the fifth belief takes the full row */
.page-hero h1.about-h1{max-width:19ch}
.possibility .ripple{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;max-width:760px}
.possibility .ripple li{border:1px solid rgba(var(--cream-rgb),.45);padding:11px 16px;font-size:16px;line-height:1.25;letter-spacing:-.01em;color:var(--canvas)}
.possibility .ripple li:nth-child(2n){background:rgba(var(--cream-rgb),.1)}
.statement.possibility p.statement-sub{font-size:18px;line-height:1.6;max-width:56ch}
.statement.possibility p.statement-sub b{display:block;font-size:clamp(20px,2.3vw,26px);line-height:1.3;letter-spacing:-.02em;font-weight:600;color:var(--canvas)}
.statement p.mission{margin:44px 0 0;max-width:30ch;font-size:clamp(24px,3.2vw,40px);line-height:1.15;letter-spacing:-.03em}
.belief:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
@media(max-width:700px){.possibility .ripple li{font-size:14.5px;padding:10px 13px}}