:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found]){display:none!important}

:root{
  --purple:#864EA8; --dpurple:#6E3E8C; --navy:#3C4981; --lav:#F3EEF7; --slav:#EDE3F5;
  --grey:#6B6577; --ink:#1E1B26; --line:#E6E3EC; --amber:#8A6D00; --amberbg:#FFF3D6;
  --onnavy:#D8BFF0;   /* lavender accent that passes AA on --navy (5.13:1) */
  --ground:#0F1330;   /* deep ground: hero, technology section, animation panels */

  /* type scale - every size on the site comes from this ramp */
  --fs-3xl:3.4rem;    /* hero headline            */
  --fs-2xl:2.6rem;    /* secondary page headline, data figures */
  --fs-xl:2.1rem;     /* section headline         */
  --fs-lg:1.26rem;    /* lead paragraph, pull quote */
  --fs-md:1.125rem;   /* sub-headings, names      */
  --fs-base:1rem;     /* body                     */
  --fs-sm:.9375rem;   /* secondary body, bios     */
  --fs-xs:.8125rem;   /* captions, small controls */
  --fs-label:.72rem;  /* uppercase eyebrows       */
  --fs-micro:.66rem;  /* step numbers             */

  /* radii - by role, not by whim */
  --r-sm:6px;         /* controls: buttons, tags  */
  --r-md:12px;        /* media and panels         */
  --r-pill:999px;     /* fully round controls     */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--purple);text-decoration:none}

/* ---- keyboard focus ----------------------------------------------------
   Every control gets a visible ring. The ring colour flips on dark grounds
   so it stays legible on the hero, the technology section and the footer. */
:where(a,button,summary,input,select,textarea,[tabindex],[role="button"]):focus-visible{
  outline:2px solid var(--dpurple); outline-offset:3px; border-radius:2px}
.hero :focus-visible, .flowSec :focus-visible, section.dark :focus-visible,
footer :focus-visible, nav.onhero :focus-visible{outline-color:var(--onnavy)}
.btn:focus-visible{outline-offset:4px}
.container{max-width:1140px;margin:0 auto;padding:0 40px;position:relative;z-index:2}
.narrow{max-width:760px}

/* draft notes */
#tools{position:fixed;bottom:18px;right:18px;z-index:300;display:flex;gap:8px}
#tools button{background:var(--navy);color:#fff;border:0;padding:10px 16px;border-radius:var(--r-pill);
  font:600 11px/1 inherit;letter-spacing:.05em;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.25)}
#tools button:hover{background:var(--purple)}
#tools button.act{background:var(--purple)}
body.editing .hero .container{pointer-events:auto}
body.editing canvas.heroField{pointer-events:none}
body.editing .heroveil{pointer-events:none}
[contenteditable="true"]{outline:1px dashed rgba(134,78,168,.5);outline-offset:4px;border-radius:var(--r-sm)}
[contenteditable="true"]:hover{outline-color:rgba(134,78,168,.85)}
[contenteditable="true"]:focus{outline:2px solid var(--purple);background:rgba(134,78,168,.07)}
.hero [contenteditable="true"]:focus{background:rgba(255,255,255,.10)}
#exportPane{position:fixed;inset:0;z-index:400;background:rgba(18,16,26,.72);display:none;
  align-items:center;justify-content:center;padding:40px}
#exportPane.on{display:flex}
#exportPane .bx{background:#fff;border-radius:var(--r-md);max-width:820px;width:100%;height:78vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
#exportPane h4{margin:0;padding:20px 24px 14px;color:var(--navy);font-size:var(--fs-base);
  border-bottom:1px solid var(--line);text-transform:none;letter-spacing:0}
#exportPane h4 small{display:block;font-weight:400;color:var(--grey);font-size:var(--fs-xs);margin-top:5px}
#exportPane textarea{flex:1;border:0;padding:20px 24px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  resize:none;outline:0;color:var(--ink)}
#exportPane .ft{padding:14px 24px;border-top:1px solid var(--line);display:flex;gap:10px;
  justify-content:space-between;align-items:center}
#exportPane .ft .lhs{font-size:var(--fs-xs);color:var(--grey)}
#savedTag{position:fixed;bottom:62px;right:18px;z-index:300;background:var(--green,#1E7A46);color:#fff;
  padding:7px 14px;border-radius:var(--r-pill);font:600 11px/1 inherit;letter-spacing:.05em;opacity:0;
  transition:opacity .3s;pointer-events:none}
#savedTag.on{opacity:1}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
nav.stuck{border-bottom-color:var(--line);box-shadow:0 2px 20px rgba(60,73,129,.05)}
nav .inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:13px 40px;max-width:1140px;margin:0 auto}
nav .logo{display:flex;align-items:center}
nav .logo img{height:54px;display:block}
nav .logo .ld{display:none}
nav.onhero .logo .lc{display:none}
nav.onhero .logo .ld{display:block}
nav .links{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
nav .links a{color:var(--navy);font-size:var(--fs-sm);font-weight:600;padding:5px 0;border-bottom:2px solid transparent;cursor:pointer;transition:color .2s,border-color .2s}
nav .links a:hover{color:var(--purple)}
nav .links a.on{color:var(--purple);border-bottom-color:var(--purple)}
.btn{display:inline-block;background:var(--purple);color:#fff!important;padding:12px 24px;border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-sm);border:2px solid var(--purple);cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.btn:hover{background:var(--dpurple);border-color:var(--dpurple);transform:translateY(-2px);box-shadow:0 8px 22px rgba(134,78,168,.28)}
.btn.ghost{background:transparent;color:var(--purple)!important;box-shadow:none}
.btn.ghost:hover{background:var(--lav);color:var(--dpurple)!important}
.btn.light{background:#fff;color:var(--navy)!important;border-color:#fff}
.btn.sm{padding:8px 17px;font-size:var(--fs-xs)}

/* layout */
.page{display:none} .page.on{display:block}
section{padding:92px 0;position:relative}
section.tint{background:var(--lav)}
section.dark{background:var(--navy);color:#fff;overflow:hidden}
section.dark h2{color:#fff}
h1{font-size:var(--fs-3xl);line-height:1.08;letter-spacing:-.035em;color:var(--navy);margin:0 0 24px;font-weight:700}
h2{font-size:var(--fs-xl);line-height:1.22;letter-spacing:-.025em;color:var(--navy);margin:0 0 20px;font-weight:700;max-width:24ch}
h3{font-size:var(--fs-md);color:var(--dpurple);margin:0 0 10px;font-weight:700}
.eyebrow{font-size:var(--fs-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--purple);margin:0 0 18px}
section.dark .eyebrow{color:#C9B6DC}
.lead{font-size:var(--fs-lg);line-height:1.62;color:var(--grey);max-width:60ch}
section.dark .lead{color:#C3C8E2}
p{margin:0 0 20px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

/* hero - full-bleed dark, live well-field behind the type */
.hero{padding:212px 0 132px;overflow:hidden;background:var(--ground);position:relative}
.hero canvas.heroField{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.heroveil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(78% 88% at 10% 50%, rgba(15,19,48,.74) 0%, rgba(15,19,48,.58) 40%,
             rgba(15,19,48,.30) 72%, rgba(15,19,48,0) 100%),
             linear-gradient(to bottom, rgba(15,19,48,.60), rgba(15,19,48,0) 20%,
             rgba(15,19,48,0) 74%, rgba(15,19,48,.92))}
.hero h1{color:#fff;max-width:17ch;margin-bottom:11px}
.hero .lead{font-size:var(--fs-lg);line-height:1.45;color:#C3C8E2;max-width:52ch}
.hero .eyebrow{color:#C9A6E8}
.hero canvas.heroField{cursor:crosshair}
.hero .container{pointer-events:none}
.hero .container a,.hero .container .btn{pointer-events:auto}
.scanHint{position:absolute;left:0;right:0;bottom:34px;z-index:2;text-align:center;pointer-events:none;
  font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.34);
  transition:opacity .7s;display:flex;align-items:center;justify-content:center;gap:10px}
.scanHint.gone{opacity:0}
@media (hover:none),(max-width:940px){.scanHint{display:none}}
.scanHint i{display:block;width:26px;height:1px;background:rgba(255,255,255,.28)}
.hero .container.narrow{max-width:1140px}
.hero .btn.ghost{color:#fff!important;border-color:rgba(255,255,255,.42)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.10);color:#fff!important;border-color:rgba(255,255,255,.7)}
nav.onhero{background:transparent;border-bottom-color:transparent;box-shadow:none}
nav.onhero .links a{color:#fff}
nav.onhero .links a:hover,nav.onhero .links a.on{color:#C9A6E8;border-bottom-color:#C9A6E8}

nav.onhero .btn.sm{background:transparent;border-color:rgba(255,255,255,.5);color:#fff!important}
nav.onhero .btn.sm:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* scroll reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.22,.8,.3,1),transform .75s cubic-bezier(.22,.8,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* parallax */
.plx{position:absolute;pointer-events:none;z-index:0;will-change:transform}
.blob{border-radius:50%;filter:blur(56px);opacity:.5}

/* scale visual - zoom out from one conventional plate to one of ours */
.scaleWrap{position:relative;margin:38px 0 0;border-radius:var(--r-md);overflow:hidden;background:var(--ground)}
.scaleWrap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:62%;z-index:1;pointer-events:none;
  background:linear-gradient(to right, rgba(15,19,48,.96) 0%, rgba(15,19,48,.84) 28%, rgba(15,19,48,0) 100%)}
.scaleWrap::after{content:"";position:absolute;right:0;bottom:0;width:52%;height:44%;z-index:1;pointer-events:none;
  background:radial-gradient(105% 105% at 100% 100%, rgba(15,19,48,.94) 0%, rgba(15,19,48,.70) 40%, rgba(15,19,48,0) 78%)}
#scaleCanvas{width:100%;height:400px;display:block}
.scaleUI{position:absolute;inset:0;z-index:2;pointer-events:none;padding:30px 34px;
  display:flex;flex-direction:column;justify-content:center}
.scaleUI .cnt{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums}
.scaleUI .cntk{font-size:var(--fs-label);letter-spacing:.17em;text-transform:uppercase;color:#C9A6E8;margin-bottom:10px}
.scaleUI .cntsub{font-size:var(--fs-sm);color:rgba(255,255,255,.62);margin-top:9px;max-width:34ch;line-height:1.5}
.scaleUI .who{position:absolute;right:34px;bottom:28px;text-align:right;transition:opacity .4s}
.scaleUI .who .w1{font-size:var(--fs-label);letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:5px}
.scaleUI .who .w2{font-size:var(--fs-md);font-weight:700;color:#fff;letter-spacing:-.01em}

/* ---------- technology section: full-bleed field, copy inside it ----------
   The canvas is the section's background. The field thins slightly behind the
   copy (see __KO in the flow script) so the type stays legible without the
   plate ever stopping at the edge of the text. */
.flowSec{background:var(--ground);color:#fff;overflow:hidden;padding:104px 0}
.flowSec .container{width:100%}
.flowSec .bg{position:absolute;inset:0;z-index:0}
#flowCanvas{width:100%;height:100%;display:block}
.flowSec .veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(15,19,48,.55) 0%, rgba(15,19,48,0) 17%,
             rgba(15,19,48,0) 83%, rgba(15,19,48,.55) 100%)}
.flowSec .eyebrow{color:var(--onnavy)}
.flowSec h2{color:#fff}
.flowSec .lead{color:#B9B4CC}
.flow{display:grid;grid-template-columns:minmax(0,1fr)}
.flowCopy{max-width:50ch}
.flowSteps{margin-top:16px}
.flowSteps > div{position:relative;padding:12px 0 12px 22px;
  border-bottom:1px solid rgba(255,255,255,.10);opacity:.38;transition:opacity .45s}
.flowSteps > div.act{opacity:1}
.flowSteps > div:last-child{border-bottom:0}
/* the active step lights a hairline out into the field beside it */
.flowSteps > div:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;
  background:var(--onnavy);opacity:0;transform:scaleY(.3);transform-origin:center;
  transition:opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1)}
.flowSteps > div.act:before{opacity:.85;transform:scaleY(1)}
.flowSteps .n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.18em;color:var(--onnavy);margin-bottom:6px}
.flowSteps h3{font-size:var(--fs-md);color:#fff;margin:0 0 5px;letter-spacing:-.015em;max-width:none}
.flowSteps p{font-size:var(--fs-sm);line-height:1.45;color:#A9A4BC;margin:0;max-width:46ch}

/* blur-in reveal, for the dark section only */
.bi{opacity:0;filter:blur(9px);transform:translateY(10px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1),
               transform .9s cubic-bezier(.2,.7,.2,1)}
.bi.in{opacity:1;filter:blur(0);transform:none}
/* the filter must be removed outright once the reveal ends - a blur(0) filter
   keeps the element on its own composited layer and the text renders soft */
.bi.done{filter:none;will-change:auto}
.bi.b1{transition-delay:.09s}.bi.b2{transition-delay:.18s}.bi.b3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){.bi{opacity:1;filter:none;transform:none;transition:none}}

/* ---- columns, not cards. A border, a fill and a shadow each say "separate
   object"; three of them stamped on every block flattens the hierarchy. ---- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:52px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{padding:26px 0 0;border-top:2px solid var(--purple)}
.card p:last-child{margin-bottom:0}
.card .ico{display:block;color:var(--purple);margin-bottom:18px;overflow:visible}
.card h3{margin-bottom:8px}
.card p{color:var(--grey);font-size:var(--fs-sm);line-height:1.6}
/* --- animated card icons: flat capsules, two tones, slow motion --- */
.ico *{transform-box:fill-box;transform-origin:center}
@keyframes c-approach{0%{transform:translate(8px,-12px);opacity:0}14%{opacity:.9}
  40%,80%{transform:translate(0,0);opacity:1}94%,100%{transform:translate(8px,-12px);opacity:0}}
@keyframes c-ring{0%,38%{opacity:0;transform:scale(.74)}52%{opacity:.72;transform:scale(1)}
  84%,100%{opacity:0;transform:scale(1.2)}}
@keyframes c-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
.c-ab{animation:c-drift 9s ease-in-out infinite}
.c-anti{animation:c-approach 8s cubic-bezier(.33,0,.2,1) infinite}
.c-ring{animation:c-ring 8s ease-out infinite}
@keyframes c-fA{0%,22%{opacity:1}30%,92%{opacity:0}100%{opacity:1}}
@keyframes c-fB{0%,26%{opacity:0}34%,55%{opacity:1}63%,100%{opacity:0}}
@keyframes c-fC{0%,59%{opacity:0}67%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes c-mark{0%,100%{opacity:.2}50%{opacity:.85}}
.c-vA{animation:c-fA 9s ease-in-out infinite}
.c-vB{animation:c-fB 9s ease-in-out infinite}
.c-vC{animation:c-fC 9s ease-in-out infinite}
.c-m1{animation:c-mark 9s ease-in-out infinite}
.c-m2{animation:c-mark 9s ease-in-out infinite .5s}
.c-m3{animation:c-mark 9s ease-in-out infinite 1s}
@keyframes c-cross{0%{transform:translateX(0);opacity:0}14%{opacity:.95}
  56%{transform:translateX(9px);opacity:.95}70%{transform:translateX(9px);opacity:0}100%{opacity:0}}
@keyframes c-resp{0%,60%{opacity:0;transform:scale(.82)}74%{opacity:.72;transform:scale(1.02)}
  100%{opacity:0;transform:scale(1.18)}}
@keyframes c-nudge{0%,100%{transform:translateX(0)}48%,66%{transform:translateX(2.2px)}}
.c-cell{animation:c-nudge 8s ease-in-out infinite}
.c-g1{animation:c-cross 8s ease-in-out infinite}
.c-g2{animation:c-cross 8s ease-in-out infinite .34s}
.c-g3{animation:c-cross 8s ease-in-out infinite .68s}
.c-resp{animation:c-resp 8s ease-out infinite}
@media (prefers-reduced-motion:reduce){ .ico *{animation:none !important} }

/* ---- a section that continues the one above instead of restating the ground.
   Separation comes from a rule and space, not another colour band. ---- */
section.joined{padding-top:0}
section.joined > .container{padding-top:78px}
section.joined > .container::before{content:"";position:absolute;left:40px;right:40px;top:0;
  height:1px;background:var(--line)}
section.tint + section.joined > .container::before,
section.joined.onTint > .container::before{background:#DED2EA}

/* trust */
.creds{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:760px}
.cred{border-top:3px solid var(--purple);padding-top:18px}
.invBlock{margin-top:58px;padding-top:34px;border-top:1px solid var(--line)}
section.dark .invBlock{border-top-color:rgba(255,255,255,.15)}
.invH{font-size:var(--fs-label);letter-spacing:.17em;text-transform:uppercase;font-weight:700;
  color:var(--dpurple);margin:0 0 18px}
section.dark .invH{color:var(--onnavy)}
.cred .t{font-size:var(--fs-md);font-weight:700;letter-spacing:0;color:var(--dpurple);margin-bottom:10px;line-height:1.2}
.cred .d{font-size:var(--fs-sm);line-height:1.6;color:var(--ink)}
section.dark .cred .t{color:var(--onnavy)}
section.dark .cred .d{color:#fff}

/* ---- investors: the lead investor is not one of ten equal names ---- */
.logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;align-items:center}
.logos > span.lead{border:1px solid var(--purple);background:var(--purple);color:#fff;
  padding:10px 20px;font-weight:700;letter-spacing:.01em}
.logos > span.lead .rl{display:block;font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:2px}
section.dark .logos > span.lead{background:var(--onnavy);border-color:var(--onnavy);color:var(--ground)}
section:not(.dark) .logos > span.lead{background:var(--purple);border-color:var(--purple);color:#fff}
.logos > span{border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);padding:9px 17px;font-size:var(--fs-xs);font-weight:600;color:rgba(255,255,255,.85);transition:background .25s,border-color .25s}
.logos > span:not(.lead):hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.4)}
section:not(.dark) .logos > span{border-color:var(--line);color:var(--grey);background:#fff}
section:not(.dark) .logos > span:not(.lead):hover{background:var(--lav)}

/* people */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.person .av{width:80px;height:80px;border-radius:50%;background:linear-gradient(140deg,var(--slav),#D8C7EA);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-md);font-weight:700;color:var(--dpurple);margin-bottom:16px;transition:transform .35s}
.person:hover .av{transform:scale(1.07)}

/* ---- photo slots: drop an <img> inside and delete the .phL span ---- */
.ph{position:relative;overflow:hidden;background:#F1E9F4}
/* the ring is a portrait device - on a large landscape photo it just reads as
   a border nobody removed */
.ph.round{border:2px solid var(--dpurple);box-shadow:0 0 0 4px rgba(110,62,140,.10)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.round{border-radius:50%}
.phL{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:3px;color:var(--dpurple);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.35}
.phL b{font-size:var(--fs-micro);letter-spacing:.04em}
.person .ph{width:104px;height:104px;margin-bottom:16px}
.roster .r .ph{width:92px;height:92px;flex:0 0 92px}
.roster .r .phL b{font-size:var(--fs-sm);letter-spacing:.02em}
.teamShot{width:100%;aspect-ratio:16/7;border-radius:var(--r-md);margin:26px 0 4px}
.teamShot .phL{font-size:var(--fs-label)}
/* Turn this on once real photos are in and they don't match:
   it flattens every headshot to one navy-to-lavender duotone. */
.ph.duo img{filter:grayscale(1) contrast(1.06)}
.ph.duo::after{content:"";position:absolute;inset:0;background:var(--dpurple);
  mix-blend-mode:screen;opacity:.42;pointer-events:none}
.ph.duo::before{content:"";position:absolute;inset:0;z-index:1;background:#241A44;
  mix-blend-mode:multiply;opacity:.55;pointer-events:none}
.person .nm{font-weight:700;color:var(--navy);font-size:var(--fs-base)}
.person .ro{font-size:var(--fs-xs);color:var(--purple);font-weight:600;margin-bottom:10px}
.person .bio{font-size:var(--fs-sm);color:var(--grey);line-height:1.6}
.roster .r{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.roster .r .nm{font-weight:700;color:var(--navy);flex:0 0 190px;font-size:var(--fs-sm)}
.roster .r .de{font-size:var(--fs-sm);color:var(--grey);line-height:1.55;max-width:72ch}
section.tint .roster .r{border-bottom-color:#DED2EA}

.qbox{border-left:4px solid var(--purple);padding:6px 0 6px 26px;margin:34px 0}
.qbox p{font-size:var(--fs-lg);color:var(--navy);font-weight:600;line-height:1.5;margin:0;letter-spacing:-.01em}

footer{background:var(--navy);color:#B4BAD8;padding:60px 0 36px;font-size:var(--fs-sm)}
footer{position:relative}
footer canvas.dotStrip{position:absolute;left:0;right:0;top:0;width:100%;height:62px;display:block;pointer-events:none}
footer .container{position:relative}
footer .flogo{display:block;margin-bottom:22px}
footer .flogo img{height:54px;display:block}
footer a{color:#fff}
footer .fg{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:36px}
footer h5{color:#fff;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
footer ul{list-style:none;padding:0;margin:0} footer li{margin-bottom:9px}
footer .base{border-top:1px solid rgba(255,255,255,.15);padding-top:22px;font-size:var(--fs-xs);opacity:.75}

@media(max-width:940px){
 .container{padding:0 22px} nav .inner{padding:13px 22px}
 :root{--fs-3xl:2.2rem;--fs-2xl:1.95rem;--fs-xl:1.62rem;--fs-lg:1.12rem}
 section{padding:70px 0}
 .hero{padding:132px 0 74px}
 .hero h1{max-width:none}
 /* the field can't carry the story behind text on a phone, so it becomes a
    bounded plate below the copy instead */
 /* flex only here, so the art can be ordered below the copy */
 .flowSec{padding:70px 0;display:flex;flex-direction:column}
 .flowSec .bg{position:relative;inset:auto;order:2;height:auto;aspect-ratio:1/1;
   margin:26px 22px 0;border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.03)}
 .flowSec .container{order:1}
 .flowSec .veil{display:none}
 .flowCopy{max-width:none}
 .flowSteps > div{opacity:1;padding:20px 0 20px 22px}
 .flowSteps > div:before{opacity:.3;transform:scaleY(1)}
 .flowSteps > div.act:before{opacity:.9}

 .g2,.g3,.g4,.creds,.people,footer .fg{grid-template-columns:1fr}
 .roster .r{flex-direction:column;gap:4px} .roster .r .nm{flex:none}
 #scaleCanvas{height:280px}
 .scaleUI{padding:20px 22px}
 .scaleUI .who{right:22px;bottom:20px}
 nav .links{gap:15px}
}

/* =====================================================================
   v15 - DESIGN OPTIONS
   The home hero is untouched (it matches the pitch deck). Everything below
   is switched by body classes from the OPTIONS panel:
     hdr-v14 | hdr-light | hdr-dark   inner-page headers (Company, Early access)
     organic                          softer, hand-drawn details site-wide
   ===================================================================== */

/* ---- hummingbird line art: draws itself stroke by stroke ---- */
.birdArt,.heroWave{display:none}
.birdArt svg{display:block;width:100%;height:auto;overflow:visible}
.birdArt .advhb{--hb-weight:1.2}

/* ---- shared by both bird headers ---- */
body.hdr-light .hero.birdable, body.hdr-dark .hero.birdable{padding:220px 0 190px!important;min-height:660px}
body.hdr-light .hero.birdable canvas.heroField, body.hdr-light .hero.birdable .heroveil,
body.hdr-dark  .hero.birdable canvas.heroField, body.hdr-dark  .hero.birdable .heroveil{display:none}
body.hdr-light .hero.birdable .birdArt, body.hdr-dark .hero.birdable .birdArt,
body.hdr-light .hero.birdable .heroWave, body.hdr-dark .hero.birdable .heroWave{display:block}
.hero.birdable .birdArt{position:absolute;z-index:1;pointer-events:none;
  width:min(33vw,410px);right:max(40px, calc(50% - 510px));top:104px}
body.organic .heroWave .wf{fill:#FDFCFA}
/* Early access: the header runs straight into the footer, so the wave falls into navy, not a white band */
#p-partner .heroWave .wf, body.organic #p-partner .heroWave .wf{fill:var(--navy)}
/* ...and the straight dot strip would sit under that curve, so on this page the curve does the job alone */
body.hdr-light:has(#p-partner.on) footer canvas.dotStrip, body.hdr-dark:has(#p-partner.on) footer canvas.dotStrip{display:none}
body.hdr-light:has(#p-partner.on) footer, body.hdr-dark:has(#p-partner.on) footer{padding-top:34px}
.hero.birdable .heroWave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:96px;z-index:2;pointer-events:none}
body.hdr-light .hero.birdable h1, body.hdr-dark .hero.birdable h1{max-width:19ch!important}
body.hdr-light .hero.birdable .lead, body.hdr-dark .hero.birdable .lead{max-width:40ch}

/* option A - bird on a soft, light ground (like the image on the old site) */
body.hdr-light .hero.birdable{background:
  radial-gradient(60% 80% at 78% 40%, #F7F4FB 0%, rgba(247,244,251,0) 70%),
  linear-gradient(165deg,#F1EEF6 0%,#E6E6EF 100%)}
body.hdr-light .hero.birdable h1{color:var(--navy)}
body.hdr-light .hero.birdable .lead{color:var(--grey)}
body.hdr-light .hero.birdable .eyebrow{color:var(--purple)}
body.hdr-light .hero.birdable .btn.ghost{color:var(--purple)!important;border-color:var(--purple)}

/* option B - the same bird, lit up on the deep ground */
body.hdr-dark .hero.birdable .birdArt{filter:brightness(1.45) saturate(1.1)}
body.hdr-dark .hero.birdable{background:
  radial-gradient(55% 75% at 76% 42%, rgba(134,78,168,.26) 0%, rgba(15,19,48,0) 70%), var(--ground)}

@media(max-width:940px){
  body.hdr-light .hero.birdable, body.hdr-dark .hero.birdable{padding:470px 0 110px!important;min-height:0}
  .hero.birdable .birdArt{width:62vw;right:4vw;top:130px;opacity:.95}
  .hero.birdable .heroWave{height:54px}
}

/* ---- organic details ---------------------------------------------- */
/* warm the ground a touch and soften the corners */
body.organic{background:#FDFCFA;--r-md:22px}
body.organic section.tint{background:#F4EFF7}
/* column rules pick up the wing gradient instead of a flat purple line */
body.organic .card{border-top:0;position:relative}
body.organic .card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#864EA8,#4982CF 45%,#4CC1A1 80%,#E3C24E)}
body.organic .cred{border-top-color:transparent;position:relative}
body.organic .cred:before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#864EA8,#4982CF 55%,#4CC1A1)}

/* the straight hairline between joined sections becomes a spray of wing lines */
.wingRule{display:none}
body.organic section.joined > .container::before{display:none}
body.organic .wingRule{display:block;position:absolute;left:40px;right:40px;top:-18px;height:34px;pointer-events:none}
body.organic .wingRule svg{width:100%;height:100%;display:block;overflow:visible}
.wingRule path{fill:none;stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:.6}
.wingRule.in path{animation:bDraw 2.2s cubic-bezier(.45,.05,.25,1) forwards;animation-delay:calc(var(--i) * .14s)}
@media (prefers-reduced-motion:reduce){.wingRule path{stroke-dashoffset:0;animation:none!important}}
@media(max-width:940px){body.organic .wingRule{left:22px;right:22px}}

/* soft curved tops on the tinted bands and the footer */
body.organic section.tint::before{content:"";position:absolute;left:0;right:0;
  top:-47px;height:48px;pointer-events:none;background-size:100% 100%;background-repeat:no-repeat}
body.organic section.tint::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,48 L0,30 C420,-6 1000,-4 1440,26 L1440,48 Z' fill='%23F4EFF7'/%3E%3C/svg%3E")}
body.organic footer{margin-top:0}

/* a hand-drawn stroke under one idea per section */
.scrib{position:relative;white-space:nowrap}
.scrib > svg{display:none}
body.organic .scrib > svg{display:block;position:absolute;left:-3%;width:106%;bottom:-.34em;height:.5em;overflow:visible;pointer-events:none}
.scrib path{fill:none;stroke:url(#wingGrad);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1}
.in .scrib path, .scrib.in path{animation:bDraw 1.1s .55s cubic-bezier(.5,0,.2,1) forwards}
@media (prefers-reduced-motion:reduce){.scrib path{stroke-dashoffset:0;animation:none!important}}

/* a faint bird in the footer, drawn when you reach the bottom */
footer .birdArt{position:absolute;left:calc(50% - 220px);bottom:78px;width:140px;opacity:.55;z-index:0;pointer-events:none}
footer .birdArt{filter:brightness(1.5) saturate(.9)}
body.organic footer .birdArt{display:block}
footer .container{z-index:1}
@media(max-width:1180px){body.organic footer .birdArt{display:none}}

nav.onlight{background:transparent;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
nav.onlight.stuck{background:rgba(241,238,246,.86);backdrop-filter:blur(14px)}

/* ---- plate section: v14 panel, a compact two-number strip, or nothing ---- */
.scaleStrip{display:none}
body.plate-compact .scaleWrap, body.plate-off .scaleWrap{display:none}
body.plate-compact .scaleStrip{display:grid}
body.plate-off #p-home section:has(> .container .scaleWrap){padding-bottom:40px}
.scaleStrip{grid-template-columns:auto 1fr auto;align-items:center;gap:34px;margin-top:34px;
  padding:26px 34px;border-radius:var(--r-md);background:var(--lav)}
.scaleStrip .fig{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.scaleStrip .now .fig{color:#9A93A8}
.scaleStrip .ours .fig{background:linear-gradient(90deg,#864EA8,#4982CF 60%,#2FA58A);-webkit-background-clip:text;background-clip:text;color:transparent}
.scaleStrip .cap{font-size:var(--fs-sm);color:var(--grey);margin-top:8px;line-height:1.45;max-width:26ch}
.scaleStrip .ours{text-align:right}.scaleStrip .ours .cap{margin-left:auto}
.scaleStrip svg{width:100%;height:40px;display:block;overflow:visible}
.scaleStrip svg path{fill:none;stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.75}
@media(max-width:940px){.scaleStrip{grid-template-columns:1fr;gap:14px;padding:22px}
  .scaleStrip .ours{text-align:left}.scaleStrip .ours .cap{margin-left:0}.scaleStrip svg{height:26px}}

/* ---- plate section, option: side panel on a light ground ---- */
.probSlot{display:none}
body.plate-side .probGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:56px;align-items:center}
body.plate-side .probSlot{display:block}
body.plate-side .probCopy .lead{max-width:44ch}
body.plate-side #p-home .scaleWrap{margin:0}
body.plate-side #scaleHome{display:none}
body.plate-side .scaleWrap{background:#F1ECF7;border-radius:22px}
body.plate-side #scaleCanvas{height:430px}
body.plate-side .scaleWrap::before{width:auto;left:0;right:0;top:auto;bottom:0;height:46%;
  background:linear-gradient(to top, rgba(241,236,247,.97) 0%, rgba(241,236,247,.86) 45%, rgba(241,236,247,0) 100%)}
body.plate-side .scaleWrap::after{display:none}
body.plate-side .scaleUI{justify-content:flex-end;padding:24px 26px}
body.plate-side .scaleUI .cntk{color:var(--purple)}
body.plate-side .scaleUI .cnt{font-size:2.3rem}
body.plate-side .scaleUI .cntsub{color:var(--grey);font-size:var(--fs-xs);margin-top:6px}
@media(max-width:940px){
  body.plate-side .probGrid{grid-template-columns:1fr;gap:26px}
  body.plate-side #scaleCanvas{height:360px}
}
.ph.round, .ph.teamShot, .ph:has(img){cursor:auto}

/* ---- phone menu ---- */
.navToggle{display:none}
@media(max-width:720px){
  nav .inner{padding:10px 18px;gap:12px}
  nav .logo img{height:42px}
  .navToggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
    padding:0 11px;border:0;background:transparent;cursor:pointer;color:var(--navy)}
  .navToggle i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .25s}
  nav.onhero .navToggle{color:#fff}
  nav.open .navToggle i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.open .navToggle i:nth-child(2){opacity:0}
  nav.open .navToggle i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(30,27,38,.12);padding:6px 18px 18px}
  nav.open .links{display:flex}
  nav .links a{color:var(--navy)!important;padding:14px 2px;border-bottom:1px solid var(--line)}
  nav .links a.on{border-bottom-color:var(--line)}
  nav .links .btn.sm{margin-top:14px;text-align:center;padding:13px 17px;border:2px solid var(--purple)!important;
    background:var(--purple)!important;color:#fff!important}
  nav.open{background:#fff!important;backdrop-filter:none}
  nav.open .logo .lc{display:block!important} nav.open .logo .ld{display:none!important}
  nav.open .navToggle{color:var(--navy)}
  .people{grid-template-columns:1fr!important;gap:40px}
}
#tools,#optPane,#savedTag,#exportPane{display:none!important}
/* ---- the options panel ---- */
#optPane{position:fixed;right:18px;bottom:66px;z-index:320;background:#fff;border-radius:14px;
  box-shadow:0 18px 50px rgba(20,16,40,.28);padding:18px 20px 16px;width:320px;display:none;font-size:13px;line-height:1.45;color:var(--ink)}
#optPane.on{display:block}
#optPane h6{margin:0 0 4px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--grey)}
#optPane .grp{margin-bottom:14px}
#optPane .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#optPane .chips button{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;
  padding:6px 12px;font:600 12px/1 inherit;cursor:pointer}
#optPane .chips button.on{background:var(--purple);border-color:var(--purple);color:#fff}
#optPane .note{color:var(--grey);font-size:12px;margin:0;border-top:1px solid var(--line);padding-top:10px}
#optPane .go{color:var(--purple);font-weight:600;cursor:pointer}

/* short pages (404): the header stretches so the footer sits at the bottom of the screen */
#p-404 .hero{min-height:calc(100vh - 336px)}

/* privacy policy */
section.legal{padding:64px 0 88px}
.legal h2{font-size:var(--fs-md);max-width:none;margin:38px 0 10px;letter-spacing:-.01em}
.legal p,.legal li{color:var(--ink);font-size:var(--fs-base);line-height:1.7;max-width:68ch}
.legal ul{padding-left:20px;margin:0 0 20px} .legal li{margin-bottom:10px}
.legal a{text-decoration:underline;text-underline-offset:2px}