/* Self-hosted Satoshi. No third-party font CDN, so no visitor IP leaves this site.
   Run ./fetch-assets.sh once to populate assets/fonts/. Until then the page falls
   back to the system sans stack below, which degrades cleanly. */
@font-face{font-family:'Satoshi';src:url('/assets/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/assets/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/assets/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
:root{
  --blue:#0133E0; --deep:#090097; --lilac:#A88DFF; --lav:#C2C0FB; --yellow:#FFCC37;
  --orange:#FF7813; --sky:#85CCFF; --cream:#FFFBF3; --ink:#0B0B0F;
  --muted:#5B5B6B; --line:rgba(11,11,15,.10);
  --max:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
section[id],div[id]{scroll-margin-top:84px} /* clear the sticky header on anchor jumps */
body{
  font-family:'Satoshi','Helvetica Neue',Arial,sans-serif;
  font-weight:500; background:var(--cream); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:92px 0}
h1,h2,h3{line-height:1.08;letter-spacing:-.03em;font-weight:700}
h1{font-size:clamp(2.6rem,6.2vw,4.4rem)}
h2{font-size:clamp(2rem,4.2vw,3rem)}
h3{font-size:1.25rem;letter-spacing:-.02em}
p{font-size:1.0625rem;color:var(--muted)}
.lead{font-size:clamp(1.125rem,2vw,1.375rem);color:var(--ink);opacity:.78;max-width:36ch}
.eyebrow{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--blue)}
.grad{background:linear-gradient(90deg,var(--blue) 0%,var(--lilac) 52%,var(--yellow) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
h1 .grad{background:linear-gradient(105deg,var(--blue) 0%,var(--deep) 22%,var(--lilac) 62%,var(--orange) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
header{position:sticky;top:0;z-index:50;background:rgba(255,251,243,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.mark{font-size:1.375rem;font-weight:700;letter-spacing:-.04em;text-decoration:none}
.navlinks{display:flex;align-items:center;gap:28px}
.navlinks a{color:var(--ink);text-decoration:none;font-size:.9375rem;opacity:.7}
.navlinks a:hover{opacity:1}
/* Hamburger. Hidden on desktop; under 880px it becomes the only nav control. */
.navtoggle{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer;
  color:var(--ink);line-height:0;border-radius:10px}
.navtoggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.navtoggle svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.navtoggle .ic-close{display:none}
.navtoggle[aria-expanded="true"] .ic-open{display:none}
.navtoggle[aria-expanded="true"] .ic-close{display:block}
.btn{display:inline-block;background:var(--blue);color:#fff!important;text-decoration:none;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:.9375rem;opacity:1!important;
  transition:transform .15s ease,background .15s ease}
.btn:hover{background:var(--deep);transform:translateY(-1px)}
.btn.lg{padding:17px 34px;font-size:1.0625rem}
.btn.ghost{background:transparent;color:var(--ink)!important;border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cream)!important}
.btn.onblue{background:var(--yellow);color:var(--ink)!important}
.btn.onblue:hover{background:#fff}

/* hero */
.hero{padding:100px 0 84px}
.hero h1{max-width:17ch;margin-bottom:24px}
.hero .lead{margin-bottom:22px}
.moments{font-size:clamp(1.05rem,1.8vw,1.2rem);color:var(--ink);font-weight:700;letter-spacing:-.01em;
  max-width:44ch;margin-bottom:34px}
.moments span{color:var(--blue)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.microcopy{font-size:.875rem;color:var(--muted);margin-top:18px}
.pull{max-width:52ch;color:var(--ink);font-size:1.0625rem;line-height:1.5;margin:0 0 26px}
.pull::before{content:"“";color:var(--lilac);font-size:1.5rem;font-weight:700;line-height:0;margin-right:2px}
.pull .who{display:block;margin-top:7px;font-size:.8125rem;color:var(--muted)}
.agent .aq{margin-top:auto;padding-top:14px;font-size:.85rem;color:var(--ink);line-height:1.45}
.agent .aq::before{content:"“";color:var(--lilac);font-weight:700;margin-right:1px}
.agent .aq .who{display:block;margin-top:4px;font-size:.75rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.hero .chips{margin-top:24px}
.chip.c1{background:color-mix(in srgb,var(--orange) 12%,#fff);border-color:color-mix(in srgb,var(--orange) 40%,#fff);opacity:1}
.chip.c2{background:color-mix(in srgb,var(--blue) 9%,#fff);border-color:color-mix(in srgb,var(--blue) 35%,#fff);opacity:1}
.chip.c3{background:color-mix(in srgb,var(--lilac) 14%,#fff);border-color:color-mix(in srgb,var(--lilac) 45%,#fff);opacity:1}
.awarditem .chip{align-self:flex-start}
.chip{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.8125rem;
  background:#fff;color:var(--ink);opacity:.8}

/* icons */
.icon{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.agent:nth-child(1) .icon{stroke:var(--orange)}
.agent:nth-child(2) .icon{stroke:var(--blue)}
.agent:nth-child(3) .icon{stroke:var(--lilac)}
.agent:nth-child(4) .icon{stroke:var(--deep)}
.icon.sm{width:19px;height:19px;vertical-align:-4px;margin:0 10px 0 0;display:inline-block}

/* photos */
.photo{width:100%;border-radius:24px;display:block;object-fit:cover;aspect-ratio:16/8;margin-top:44px}
.credit{font-size:.75rem;color:var(--muted);margin-top:10px}
.credit a{color:var(--muted)}

/* agents */
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.agent .big{font-size:1.0625rem;color:var(--ink);font-weight:700;margin-bottom:10px;line-height:1.4}
.agent .num{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:12px 0 8px}
.agent .num b{color:var(--ink)}
.agent{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:28px;
  position:relative;overflow:hidden;display:flex;flex-direction:column}
.agent::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.agent:nth-child(1)::before{background:linear-gradient(90deg,var(--yellow),var(--orange))}
.agent:nth-child(2)::before{background:linear-gradient(90deg,var(--sky),var(--blue))}
.agent:nth-child(3)::before{background:linear-gradient(90deg,var(--lilac),var(--lav))}
.agent:nth-child(4)::before{background:linear-gradient(90deg,var(--deep),var(--blue))}
.agent h3{margin-bottom:12px;font-size:1.125rem}
.agent .moment{font-size:.9375rem;color:var(--ink);font-weight:700;margin-bottom:10px;line-height:1.4}
.agent p{font-size:.9rem}
.bridge{margin-top:44px;border-radius:22px;padding:36px 38px;
  background:linear-gradient(135deg,var(--blue),var(--deep));color:#fff}
.bridge h3{color:#fff;font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:-.025em;max-width:30ch;margin-bottom:12px}
.bridge p{color:rgba(255,255,255,.82);font-size:1rem;max-width:64ch}

/* timeline */
.tlwrap{margin-top:48px}
.tlband{display:grid;grid-template-columns:3fr 1fr;margin-bottom:28px}
.tlband .seg{padding:12px 20px;font-size:.8125rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;display:flex;align-items:center;line-height:1.35}
.tlband .open{background:linear-gradient(90deg,var(--blue),var(--deep));border-radius:999px 0 0 999px}
.tlband .shut{background:var(--orange);border-radius:0 999px 999px 0;justify-content:flex-end;text-align:right}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;padding-top:28px}
.tl::before{content:"";position:absolute;top:8px;left:12px;right:12px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--sky),var(--blue) 38%,var(--deep) 66%,var(--orange))}
.tl .stage{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 20px}
.dot{position:absolute;top:-28px;left:20px;width:18px;height:18px;border-radius:50%;background:var(--blue);
  border:4px solid var(--cream)}
.tl .yr{font-weight:700;font-size:1.125rem;color:var(--blue);letter-spacing:-.01em;display:block}
.tl p{font-size:.9rem;margin-top:8px}
.tlband.roles{margin:28px 0 0;gap:8px;margin-bottom:0}
.tlband.roles .seg{border-radius:999px;text-transform:none;letter-spacing:0;font-size:.9375rem}
/* GoodSpot runs under the whole journey, before and after diagnosis; the doctor
   sits under the treatment end only. */
.tlband.roles .seg.gs{grid-column:1/-1}
.tlband.roles .seg.gp{grid-column:2}
/* GoodSpot is the point of the timeline: solid brand gradient, larger type, a soft
   glow. The GP bar below stays pale so it reads as secondary. */
.seg.gs{background:linear-gradient(90deg,var(--blue),var(--deep));color:#fff;border:0;
  box-shadow:0 10px 28px rgba(1,51,224,.28)}
.tlband.roles .seg.gs{padding:18px 26px;font-size:1.125rem;font-weight:500}
.tlband.roles .seg.gs b{font-weight:700;margin-right:.35em}
.seg.gp{background:rgba(255,120,19,.10);color:#B54F00;border:1.5px solid var(--orange);justify-content:flex-start;text-align:left}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px}
.stats.lg{grid-template-columns:repeat(2,1fr);gap:48px;margin-top:44px}
.stats.lg .n{font-size:clamp(3.4rem,7.5vw,5.5rem)}
/* The lead statistic in Why now: full width, bigger, in the brand gradient. */
.stat.feature{grid-column:1/-1}
.stats.lg .stat.feature .n{font-size:clamp(4.5rem,12vw,8.5rem);display:inline-block}
.stat.feature p{max-width:48ch;font-size:1.125rem}
.stats.lg p{font-size:1rem;max-width:26ch;margin-top:14px}
/* the standalone statement section */
.statement-band{background:#fff}
.bigstatement{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.1;letter-spacing:-.03em;
  font-weight:700;color:var(--ink);max-width:20ch;
  padding-left:28px;border-left:5px solid var(--orange)}
.statement-band .pull{margin:36px 0 0;padding-left:33px}
.statement-band.sovereign{background:transparent;border-top:0;border-bottom:0}
.statement-band.sovereign .bigstatement{max-width:24ch;border-left-color:var(--blue)}
.fineprint{font-size:.9375rem;color:var(--muted);max-width:54ch;margin-top:44px}
.fineprint .src{display:block;margin-top:12px;font-size:.8125rem}
.stat .n{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.stat:nth-child(1) .n{color:var(--blue)}
.stat:nth-child(2) .n{color:var(--orange)}
.stat:nth-child(3) .n{color:var(--lilac)}
.stat:nth-child(4) .n{color:var(--deep)}
.stats.lg{row-gap:44px}
.stat p{margin-top:10px;font-size:.9375rem}
.ssrc{font-size:.75rem!important;color:var(--muted);opacity:.7;margin-top:10px!important;line-height:1.4}
.ssrc a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.ssrc a:hover{color:var(--ink)}

/* today vs goodspot */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.vs .col{border-radius:20px;padding:32px}
.vs .old{background:rgba(11,11,15,.04);border:1px solid var(--line)}
.vs .new{background:var(--blue);color:#fff}
.vs .new h3,.vs .new li{color:#fff}
.vs h3{margin-bottom:18px}
.vs ul{list-style:none}
.vs li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--muted)}
.vs .new li{border-bottom:1px solid rgba(255,255,255,.18);opacity:.92}
.vs li:last-child{border-bottom:none}

/* privacy */
.privacy{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:40px}
.plist{list-style:none}
.plist li{padding:16px 0;border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--muted)}
.plist li:last-child{border-bottom:none}
.plist b{color:var(--ink);font-weight:700}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px}
.card h3{margin-bottom:10px}
.card p{font-size:.9375rem}
.card.tinted{background:linear-gradient(160deg,rgba(168,141,255,.12),rgba(255,204,55,.10))}

/* women */
.women{background:linear-gradient(160deg,#F1EDFF,#EDE9FF 55%,#FFF6E6)}
.women .eyebrow{color:#6B4FD8}
.wsplit{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center;margin-top:8px}
.wsplit .photo{margin-top:0;aspect-ratio:4/5}
/* Photo served from Unsplash's CDN (disclosed in the privacy notice). The brand
   gradient underneath still paints if the image fails, so nothing renders broken. */
.wphoto{width:100%;aspect-ratio:4/5;border-radius:24px;
  background-image:url('https://images.unsplash.com/photo-1758273239676-ccfb81f6101e?q=80&w=1400&auto=format&fit=crop'),
    linear-gradient(155deg,var(--lav),var(--lilac) 45%,var(--yellow));
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat}
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.promise div{background:rgba(255,255,255,.72);border:1px solid rgba(107,79,216,.18);border-radius:18px;padding:24px}
.promise h3{color:#3C2A8C;margin-bottom:8px}
.promise p{font-size:.9375rem;color:#4A4166}
.anthem{margin-top:34px;font-size:1.05rem;color:#3C2A8C;font-weight:700;letter-spacing:-.01em}

/* investor */
#investors{background:var(--ink);color:var(--cream)}
#investors h2,#investors h3{color:var(--cream)}
#investors p{color:rgba(255,251,243,.66)}
#investors .eyebrow{color:var(--yellow)}
#investors .card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
#investors .lead{color:var(--cream);opacity:.85}
.market{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.market > div{border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:26px}
.market .n{font-size:2.4rem;font-weight:700;letter-spacing:-.04em;color:var(--yellow);line-height:1}
.market .k{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,251,243,.55);margin-bottom:12px}
.market p{font-size:.875rem;margin-top:8px}
.built{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.built div{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;
  border:1px solid rgba(255,255,255,.12);border-radius:14px}
.built .tick{color:var(--yellow);font-weight:700;flex:0 0 auto}
.built p{font-size:.9375rem;margin:0}
.built b{color:var(--cream);font-weight:700}
#investors .ssrc{color:rgba(255,251,243,.42)!important;opacity:1;margin-top:14px!important}
#investors .ssrc a{color:rgba(255,251,243,.55);text-decoration:underline;text-underline-offset:2px}
#investors .ssrc a:hover{color:var(--yellow)}

/* my story */
.story p{max-width:60ch}
.storyquote{font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.2;letter-spacing:-.02em;
  font-weight:700;color:var(--ink);max-width:22ch;margin:36px 0 40px;
  padding-left:28px;border-left:5px solid var(--orange)}
/* The turn in the founder story: set apart like the quote above it, in blue so the
   two read as a pair (his words, then what they meant) rather than as repeats. */
.storyturn{font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.3;letter-spacing:-.015em;
  font-weight:700;color:var(--ink);max-width:30ch;margin:40px 0 28px;
  padding-left:28px;border-left:5px solid var(--blue)}
.storyquote .who{display:block;margin-top:14px;font-size:.9375rem;font-weight:500;color:var(--muted);
  letter-spacing:0;line-height:1.4}
.fstats{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px;max-width:60ch;
  padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fstats .n{font-size:2.4rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--blue);display:block}
.fstats div:nth-child(2) .n{color:var(--lilac)}
.fstats p{font-size:.875rem;margin-top:8px}

/* credentials strip. Swap each <span> for <img class="lmark" src="assets/img/logos/x.svg" alt="X">
   once the logo files are in assets/img/logos/ — the row styling already handles both. */
.logostrip{margin-top:38px}
.logostrip .lk{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--muted);opacity:.75;margin-bottom:14px}
.logostrip .lk + .lrow{margin-bottom:28px}
.lrow{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center}
.lrow span{font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);opacity:.55}
/* Logo files are pre-flattened to a single dark tone at asset level, so they sit
   evenly on the cream. grayscale() here only guards against a future colour file. */
.lmark{height:28px;width:auto;display:block;filter:grayscale(1);opacity:.68;
  transition:opacity .15s ease}
.logostrip:hover .lmark{opacity:.9}
.awarditem{display:flex;flex-direction:column;gap:10px;max-width:30ch}
.awarditem .lmark{height:24px}
.lmark.capheight{height:19px}
.lmark.lockup{height:38px} /* wordmarks with no ascenders/descenders, optically matched */
.awarditem .cap{font-size:.8125rem;color:var(--muted);line-height:1.4}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.qcard .q{color:var(--ink);font-size:1rem;line-height:1.5}
.qcard .q::before{content:"“";color:var(--lilac);font-size:1.6rem;font-weight:700;line-height:0;margin-right:2px}
.qcard .who{margin-top:14px;font-size:.8125rem;color:var(--muted)}

/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.tcard h3{font-size:1.05rem;margin-bottom:4px}
.tcard .role{font-size:.875rem;color:var(--muted);margin-bottom:12px}
.tcard a{font-size:.8125rem;font-weight:700;color:var(--blue);text-decoration:none}
.tcard a:hover{text-decoration:underline}
.advisor{margin-top:26px;font-size:.9375rem}
.advisor b{color:var(--ink)}

/* final */
.final{background:linear-gradient(135deg,var(--blue),var(--deep));color:#fff;text-align:center;border-radius:32px;
  padding:76px 32px;margin:0 24px 96px}
.final h2{color:#fff;margin-bottom:18px}
.final p{color:rgba(255,255,255,.8);max-width:46ch;margin:0 auto 32px}

/* waitlist form */
.wform{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:540px;margin:0 auto}
.wform input[type=email]{flex:1 1 260px;font-family:inherit;font-size:1.0625rem;font-weight:500;
  padding:16px 22px;border-radius:999px;border:1.5px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.12);color:#fff;outline:none;transition:border-color .15s ease,background .15s ease}
.wform input[type=email]::placeholder{color:rgba(255,255,255,.58)}
.wform input[type=email]:focus{border-color:var(--yellow);background:rgba(255,255,255,.18)}
.wform button{font-family:inherit;cursor:pointer;border:0;background:var(--yellow);color:var(--ink);
  padding:17px 34px;border-radius:999px;font-weight:700;font-size:1.0625rem;
  transition:transform .15s ease,background .15s ease}
.wform button:hover{background:#fff;transform:translateY(-1px)}
.hp{position:absolute!important;left:-9999px!important}
.formnote{color:rgba(255,255,255,.72)!important;font-size:.8125rem!important;
  margin:20px auto 0!important;max-width:48ch}

/* contact form */
.contact-split{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:start;margin-top:40px}
.contact-split .plist{margin-top:26px}
.contact-solo{max-width:560px;margin-top:40px}
.cform{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.02em;
  color:var(--ink);margin-bottom:8px}
.field .opt{font-weight:500;color:var(--muted);letter-spacing:0}
.cform input,.cform select,.cform textarea{
  width:100%;font-family:inherit;font-size:1rem;font-weight:500;color:var(--ink);
  padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--cream);
  outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.cform textarea{min-height:132px;resize:vertical;line-height:1.5}
.cform input::placeholder,.cform textarea::placeholder{color:var(--muted);opacity:.7}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,51,224,.14)}
.cform select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5B6B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.cform button{font-family:inherit;cursor:pointer;border:0;background:var(--blue);color:#fff;
  padding:16px 32px;border-radius:999px;font-weight:700;font-size:1rem;width:100%;
  transition:transform .15s ease,background .15s ease}
.cform button:hover{background:var(--deep);transform:translateY(-1px)}
.cform .cnote{font-size:.8125rem;margin-top:14px;text-align:center}

footer{border-top:1px solid var(--line);padding:36px 0 56px}
.frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
footer p,footer a{font-size:.875rem;color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}

@media(max-width:880px){
  section{padding:70px 0}
  /* Mobile: the proportional top bar makes no sense stacked — hide it
     (its fact lives in the intro paragraph). Stages go single-column in
     chronological order; the roles pills stay as the summary. */
  .tlband:not(.roles){display:none}
  .tlband{grid-template-columns:1fr;gap:8px}
  .tlband.roles .seg.gp{grid-column:auto}
  .tlband .seg{border-radius:999px;justify-content:flex-start;text-align:left}
  .grid4,.grid3,.promise,.market,.stats,.team,.quotes{grid-template-columns:1fr 1fr}
  .tl{grid-template-columns:1fr;gap:12px}
  .grid2,.vs,.built,.privacy,.wsplit,.contact-split{grid-template-columns:1fr}
  .contact-split{gap:34px}
  .wsplit .photo,.wphoto{aspect-ratio:16/9}
  .tl::before{display:none}
  .tl{padding-top:0}
  .tl .dot{display:none}

  /* Mobile nav: links collapse into a drawer under the header instead of vanishing.
     Everything is scoped to .js (set by the head script) so that with scripting off
     the links simply wrap onto their own row rather than becoming unreachable. */
  .navlinks{flex-wrap:wrap;gap:14px 20px;justify-content:flex-end;padding:12px 0}
  .js .navtoggle{display:block}
  .js .navlinks{
    position:absolute;top:100%;left:0;right:0;
    flex-wrap:nowrap;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px -24px rgba(11,11,15,.45);
    padding:8px 24px 22px;
    max-height:calc(100dvh - 68px);overflow-y:auto;
    /* closed state: collapsed and inert */
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s
  }
  .js .navlinks.open{opacity:1;visibility:visible;transform:translateY(0)}
  .js .navlinks a{font-size:1.0625rem;opacity:.85;padding:16px 0;border-bottom:1px solid var(--line)}
  .js .navlinks a:last-child{border-bottom:0}
  .js .navlinks a.btn{text-align:center;margin-top:16px;padding:15px 24px;border-bottom:0}
}
@media(min-width:881px){
  /* Never leave the drawer state stuck open after a resize back to desktop. */
  .navlinks{opacity:1!important;visibility:visible!important;transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .navlinks{transition:none}
}
@media(max-width:560px){
  .grid4,.grid3,.promise,.market,.stats,.tl,.team,.quotes{grid-template-columns:1fr}
  .stats.lg{grid-template-columns:1fr;gap:36px}
  .bigstatement{padding-left:20px}
  .statement-band .pull{padding-left:25px}
  .storyquote,.storyturn{padding-left:20px}
  .final{padding:56px 22px;margin:0 16px 72px}
  .bridge{padding:28px 24px}
  .photo{aspect-ratio:16/10}
  .cform{padding:24px 20px;border-radius:20px}
}

/* footer link row (was an inline style when the site was a single page) */
.flinks{display:flex;gap:22px;flex-wrap:wrap}

/* Server-side rejection, surfaced on the waitlist page. Hidden until the function
   redirects back with ?error=, so the page is quiet in the normal case. */
.formerr{background:color-mix(in srgb,var(--orange) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--orange) 45%,#fff);
  border-radius:14px;padding:14px 18px;margin-top:18px;max-width:52ch;
  color:var(--ink);font-size:.9375rem}