/* Cartesian home page, the showreel-led draft (27 September 2026).
   Loads after site.css, which still styles the bar, the tab strip, the buttons, both forms and the footer.
   The seven scrolls follow the 15-second showreel: one agent, monthly-performance-report, from the team
   that built it to every person, in every tool, when they need it.
   Tokens follow the Cartesian design system (stone ground, orange for Cartesian, cyan for the customer's
   side, hairline borders, no shadows). Where the system and the reel clash, the reel's look wins:
   host windows stay light, statements run large, tool and team names keep small caps, windows keep 12px corners. */

:root{
  --s950:#0C0A09; --s900:#1C1917; --s800:#292524; --s700:#44403B; --s600:#57534E; --s500:#78716C;
  --ink:#F5F5F4; --body:#D6D3D1; --mute:#A8A29E; --dim:#8A827C;
  --hair:rgba(245,255,255,.10);
  --o6:#FF7200; --o9:#4F2612;
  --c3:#A8D9F2; --c6:#31B2E8; --c8:#175E7C;
  --win:#FAFBF8; --winbar:#F1F0EE; --winline:#E7E5E4;
  --display:"Mona Sans","Helvetica Neue",Arial,sans-serif;
  --sans:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,4vw,40px);
  --st:clamp(32px,4.4vw,64px);
  color-scheme:dark;
}
html,body{background:var(--s950)}
body.hx{color:var(--ink)}
/* the bar and the phone strip sit on stone, not black */
.hx #bar{background:rgba(12,10,9,.84)}
.hx .tabwrap{background:rgba(12,10,9,.9)}

/* ---------- sections ---------- */
.rs{position:relative;padding-block:clamp(72px,11vh,128px);padding-inline:var(--gut);overflow:hidden}
@supports (overflow:clip){.rs{overflow:visible;overflow-x:clip}}
.rw{width:min(1200px,100%);margin:0 auto;position:relative}
.rs.tone{background:var(--s900)}

/* statements: the reel's size and its line-by-line rise */
.hx .st{font-family:var(--display);font-weight:300;font-size:var(--st);line-height:1.16;letter-spacing:-.025em;
  color:var(--ink);max-width:none;margin:0}
.hx h1.st{font-size:clamp(42px,6vw,88px);line-height:1.06;letter-spacing:-.04em}
.hx .st em{font-style:normal;color:var(--o6);white-space:normal}
.hx .st .ln{display:block;overflow:hidden;padding:.06em .04em .2em 0;margin:-.06em 0 -.2em 0}
.hx .st .li{display:block;text-wrap:balance}

/* body copy */
.sub{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--body);max-width:46ch;text-wrap:pretty}
.lead{font-family:var(--display);font-weight:300;font-size:clamp(22px,2vw,28px);line-height:1.34;letter-spacing:-.012em;color:var(--ink);max-width:30ch;text-wrap:pretty}
.body{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--body);max-width:44ch;text-wrap:pretty}
.capline{font-family:var(--display);font-weight:300;font-size:clamp(19px,1.6vw,23px);line-height:1.4;letter-spacing:-.01em;color:var(--body);max-width:40ch;text-wrap:balance}
.tag{font-family:var(--mono);font-weight:500;font-size:12px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.tags{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px}
.tags.end{justify-content:flex-end}
.hx .btn.lg{padding:15px 22px;font-size:16px;border-radius:8px}
.hx .btn.lg i{width:26px;height:26px}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* stages: a fixed-size drawing, scaled to its column */
.stage-wrap{position:relative;width:100%}
.rstage{position:absolute;left:0;top:0;transform-origin:0 0}
.rstage *{box-sizing:border-box}
.rstage .abs{position:absolute;left:0;top:0}

/* ---------- 1. hero ---------- */
.rs-hero{padding-top:clamp(40px,7vh,88px)}
.hero-row{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(32px,5vh,56px)}
/* the hero is the product at work: its words stay still, and the Claude window beside them plays the offer */
html.rm .hx #surf .st .li{opacity:1}
.hero-row .tags{margin-bottom:10px}
.hero-row .copy{display:flex;flex-direction:column;gap:20px;margin-top:clamp(36px,5vh,56px)}
/* the teams: the grid, then the question beside it */
.teams-row{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(32px,5vw,88px);align-items:end;margin-top:clamp(32px,5vh,56px)}
.teams-row .capline{margin-bottom:12px}
.hero-fig{margin:0}
.hero-fig .capline{margin-top:28px}
/* works inside: production's tools-row label and chips, then a stone link that opens the waitlist form */
.works{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.works .toolrow{gap:8px}
.works .wlink{flex:1 0 100%;font-size:14px;line-height:1.5;color:var(--body);text-decoration:underline;text-decoration-color:rgba(214,211,209,.4);text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.works .wlink:hover,.works .wlink:focus-visible{color:var(--ink);text-decoration-color:currentColor}
/* laptops: the first screen ends on the top of the Claude window. The space comes from padding and gaps, never the headline,
   and home.js caps the grid's height only as far as it must for about 120px of the window to show */
@media (min-width:981px){
  .rs-hero{padding-top:clamp(20px,3vh,36px);padding-bottom:clamp(14px,2vh,24px)}
  .hero-row{margin-top:clamp(18px,2.6vh,28px)}
  .hero-fig .capline{margin-top:12px;max-width:none}
}
.person{position:absolute;left:0;top:0;border-radius:50%;background:#292524;border:1.5px solid #57534E}
.hubl{position:absolute;left:0;top:0;font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);white-space:nowrap;line-height:1}
.atile{position:absolute;left:0;top:0;border-radius:6px;background:#292524;border:1px solid #6E6863;white-space:nowrap}
.atile .nm{display:block;font-family:var(--mono);font-weight:500;color:var(--ink)}
.fan,.wires,.links{position:absolute;left:0;top:0;overflow:visible}
.w3{transform-style:preserve-3d}

/* ---------- 2. package ---------- */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,88px);align-items:start;margin-top:clamp(28px,4vh,48px)}
.split.mid{align-items:center}
.pkgframe{position:absolute;left:0;top:0;overflow:visible}
.pkgmeta{position:absolute;left:0;top:0;font-family:var(--mono);font-weight:400;font-size:21px;line-height:1;color:var(--mute);white-space:nowrap}
.pstep{position:absolute;left:0;top:0;width:408px;height:60px;border-radius:6px;background:#292524;border:1px solid var(--hair)}
.pstep .sn{position:absolute;left:18px;top:17px;font-family:var(--mono);font-size:20px;line-height:26px;color:var(--dim)}
.pstep .sl{position:absolute;left:50px;top:15px;font-family:var(--sans);font-weight:400;font-size:24px;line-height:30px;color:var(--body);white-space:nowrap}
.mk{position:absolute;left:0;top:0;display:block}

/* ---------- 3. the moment, inside Claude ---------- */
.moment{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(32px,5vw,80px);align-items:center}
.moment .copy{display:flex;flex-direction:column;gap:28px}
.claude{position:absolute;left:0;top:0;overflow:hidden;background:var(--win);border-radius:12px}
.claude img{position:absolute;display:block;max-width:none}
.claude .sp{position:absolute;overflow:hidden}
.claude .sp img{left:0;top:0;width:100%;height:100%}
.claude .wash{position:absolute;background:rgba(250,251,248,.74)}
.claude .wash.card{background:rgba(254,254,254,.62)}
.claude .rowmask{position:absolute;background:#FEFEFE}
.claude.phone{background:#FDFDFB}
.claude.phone .sl{position:absolute;left:0;width:100%;background-repeat:no-repeat}
.claude.phone .rowmask{background:#FDFDFB}

/* ---------- 4. every tool, every person ---------- */
.every-stage{margin-top:clamp(40px,6vh,64px)}
.starter{margin-top:28px}
.gw{position:absolute;left:0;top:0;background:var(--win);border-radius:12px;overflow:hidden}
.gw .bar{position:absolute;left:0;top:0;width:100%;background:var(--winbar);border-bottom:1px solid var(--winline)}
.gw .dot{position:absolute;border-radius:50%;background:#D6D3D1}
.gw .bub{position:absolute;background:#ECEAE7}
.gw .card{position:absolute;background:#FFFFFF;border:1px solid #E2E0DD;overflow:hidden;padding:0}
.gw .chd{position:absolute;left:0;top:0;width:100%;border-bottom:1px solid #EEEDEA}
.gw .skel{position:absolute;border-radius:5px;background:#EAE8E5}
.gw .av{position:absolute;background:#1C1917;color:#fff;font-family:var(--sans);font-weight:700;text-align:center}
.gw .gname{position:absolute;font-family:var(--sans);font-weight:500;color:#1C1917;white-space:nowrap}
.gw .comp{position:absolute;background:#fff;border:1px solid var(--winline)}
.gw .ring{position:absolute;border:2px solid var(--o6);pointer-events:none}
.pill{position:absolute;left:0;top:0;display:flex;align-items:center;white-space:nowrap;border:1.5px solid transparent;
  background:linear-gradient(#1C1917,#1C1917) padding-box,linear-gradient(45deg,#DF0089 0%,#FF7200 40%,#FF7200 100%) border-box}
.pill .pname{font-family:var(--mono);font-weight:500;color:var(--ink)}
.pill .ptag{font-family:var(--mono);font-weight:500;border-radius:6px;background:#292524;color:var(--body)}
.pip{position:absolute;left:0;top:0;border-radius:50%;background:var(--o6)}
.counter{position:absolute;left:0;top:0}
.counter .clab{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);white-space:nowrap;line-height:1}
.counter .clab .sep{color:#57534E}
.counter .clab .dimw{color:var(--dim)}
.counter .cnum{font-family:var(--display);font-weight:300;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}

/* ---------- 5. the return ---------- */
.ret{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:start}
.outs{display:flex;flex-direction:column;margin:0}
.outs > div{border-top:1px solid var(--hair);padding:20px 0 22px}
.outs > div:last-child{border-bottom:1px solid var(--hair)}
.outs dt{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.outs dd{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(20px,1.7vw,24px);line-height:1.32;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.report{margin:0;border-radius:6px;overflow:hidden;border:1px solid rgba(245,255,255,.18)}
.report img{display:block;width:100%;height:auto}

/* ---------- 6. where your tools stop, and security ---------- */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:start;margin-top:clamp(36px,5vh,56px)}
.grp .glab{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.grp.theirs .glab{color:var(--c3)}
.grp.ours .glab{color:var(--o6)}
.grp .trk{position:relative;height:18px;margin-top:18px}
.grp .trk .ln{position:absolute;left:0;right:0;top:8px;height:1px;transform-origin:0 50%}
.grp.theirs .trk .ln{background:var(--c8)}
.grp.ours .trk .ln{background:var(--o9)}
.grp .nds{display:grid;gap:12px}
.grp.theirs .nds{grid-template-columns:repeat(3,minmax(0,1fr))}
.grp.ours .nds{grid-template-columns:repeat(4,minmax(0,1fr))}
.nd{position:relative;padding-top:4px}
.nd::before{content:"";position:absolute;left:0;top:-15px;width:9px;height:9px;border-radius:50%;background:var(--s950);border:1.5px solid var(--s500)}
.grp.theirs .nd::before{border-color:var(--c6)}
.grp.ours .nd::before{border-color:var(--o6)}
.grp.ours .nd.hi::before{background:var(--o6)}
.nd b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.01em;color:var(--ink)}
.nd.hi b{color:var(--o6)}
/* Surface glows: --glow is set by the section's clock, then breathes while the reader is here */
.grp.ours .nd.hi b{display:inline-block;position:relative;isolation:isolate;
  text-shadow:0 0 calc(5px*var(--glow,1)) rgba(255,114,0,calc(.55*var(--glow,1))),0 0 calc(16px*var(--glow,1)) rgba(255,114,0,calc(.45*var(--glow,1))),0 0 calc(34px*var(--glow,1)) rgba(255,114,0,calc(.3*var(--glow,1)))}
.grp.ours .nd.hi b::after{content:"";position:absolute;left:-40%;right:-40%;top:-70%;bottom:-70%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,114,0,.22),rgba(255,114,0,.08) 55%,rgba(255,114,0,0));opacity:var(--glow,1)}
.grp.ours .nd.hi::before{box-shadow:0 0 0 calc(3px*var(--glow,1)) rgba(255,114,0,calc(.2*var(--glow,1))),0 0 calc(16px*var(--glow,1)) calc(4px*var(--glow,1)) rgba(255,114,0,calc(.6*var(--glow,1)))}
.nd small{display:block;margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--mute)}
.stopm{position:relative;height:100%;min-height:120px}
.stopm::before{content:"";position:absolute;left:50%;top:22px;bottom:0;width:1px;background:var(--s600)}
.stopm span{position:absolute;left:50%;top:32px;transform:translateX(-50%);font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--s900);padding:6px 0}
.refl{font-family:var(--mono);font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--dim);margin-top:32px;max-width:none;text-wrap:pretty}
.secure{margin-top:clamp(40px,6vh,64px);padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--hair)}
.secure h3{font-family:var(--display);font-weight:300;font-size:clamp(22px,2vw,28px);letter-spacing:-.015em;line-height:1.2;color:var(--ink);margin:0}
.facts4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:24px}
.facts4 > div + div{border-left:1px solid var(--hair);padding-left:24px}
.facts4 .k{display:block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.facts4 p{font-size:15px;line-height:1.55;color:var(--body);text-wrap:pretty}

/* ---------- 7. start with one team ---------- */
.closecard{border:1px solid var(--hair);border-radius:10px;background:var(--s900);padding:clamp(40px,6vw,80px) clamp(20px,4vw,56px);text-align:center}
.closecard .st{margin-left:auto;margin-right:auto}
.closecard .sub{margin:20px auto 0;max-width:52ch;text-wrap:balance}
.closecard .acts{justify-content:center;margin-top:36px}
.hx .wlrow{margin-top:clamp(40px,6vh,64px)}

/* ---------- motion: hidden only until the section's own clock takes over ---------- */
html.rm .hx .st .li,html.rm .hx [data-fx]{opacity:0}

/* ---------- narrow ---------- */
@media (max-width:980px){
  .hero-row,.teams-row,.split,.moment,.ret{grid-template-columns:minmax(0,1fr)}
  .teams-row .capline{margin-bottom:0}
  .moment .copy{order:2}
  .hero-fig{margin-top:8px}
}
@media (max-width:820px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .grp .trk{display:none}
  .grp .nds,.grp.theirs .nds,.grp.ours .nds{grid-template-columns:minmax(0,1fr);gap:0;margin-top:14px;border-left:1px solid var(--s700);margin-left:4px}
  .grp.theirs .nds{border-left-color:var(--c8)}
  .grp.ours .nds{border-left-color:var(--o9)}
  .nd{padding:8px 0 16px 22px}
  .nd::before{left:-5px;top:14px}
  .stopm{min-height:0;height:auto;padding:22px 0 26px}
  .stopm::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px}
  .stopm span{position:relative;left:auto;top:auto;transform:none;display:inline-block;padding:0 10px 0 0;background:var(--s900)}
  .facts4{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
  .facts4 > div + div{border-left:0;padding-left:0}
  .acts .btn.lg{width:100%;justify-content:space-between}
  .closecard .acts .btn{width:100%;justify-content:space-between}
}
@media (max-width:520px){
  .facts4{grid-template-columns:minmax(0,1fr)}
  .facts4 > div{border-top:1px solid var(--hair);padding-top:16px}
}
@media (prefers-reduced-motion:reduce){
  html.rm .hx .st .li,html.rm .hx [data-fx]{opacity:1}
}
@media print{
  html.rm .hx .st .li,html.rm .hx [data-fx]{opacity:1!important;transform:none!important}
}

/* 29 September: the distribution draft */
.atile .tv{display:block;font-family:var(--mono);font-weight:400;color:var(--mute);transition:none}
.pstep .sw{position:absolute;right:18px;top:19px;font-family:var(--mono);font-weight:400;font-size:16px;line-height:22px;color:var(--mute);white-space:nowrap}
.retsub{margin:0 0 clamp(22px,3vh,32px);max-width:40ch}
.retcol{min-width:0}
.extcopy .elink{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:6px}
.extcopy .elink i{font-style:normal;color:var(--orange)}
.extcopy .elink:hover{border-bottom-color:var(--orange)}
.gapfig{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:560px;justify-self:end}
.gcard{border-radius:8px;padding:22px 24px;border:1px solid}
.gcard.gap{background:var(--orange-fill);border-color:var(--orange-line)}
.gcard.fill{background:#0A1A10;border-color:#14532D}
.gk{display:block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.gcard.gap .gk{color:#FDBA74}
.gcard.fill .gk{color:#86EFAC}
.gq{margin:0 0 14px;font-family:var(--display);font-weight:300;font-size:clamp(19px,1.6vw,22px);line-height:1.38;letter-spacing:-.01em;color:var(--ink)}
.gm{display:block;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--mute)}
.gn{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.gav{flex:none;width:28px;height:28px;border-radius:5px;background:#F5F5F4;color:#1C1917;font:600 14px/28px var(--sans);text-align:center}
.gn b{font-family:var(--mono);font-weight:500;font-size:19px;color:var(--ink)}
.gx{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;border:1px solid var(--elev-4);color:var(--ink-body)}
.glink{height:44px;position:relative}
.glink i{position:absolute;left:37px;top:0;width:2px;height:100%;background:var(--orange);transform-origin:50% 0}
@media (max-width:820px){
  .gapfig{justify-self:stretch;max-width:none}
  .gq{font-size:19px}
  .pstep .sw{font-size:15px}
}
.nw{white-space:nowrap}
.outs > div{position:relative;border-top:none}
.outs .rl{position:absolute;left:0;top:0;width:100%;height:1px;background:var(--hair);transform-origin:0 50%}
.glink .gp{position:absolute;left:34px;top:0;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(255,114,0,.16);opacity:0}
.pstep .sn{transition:none}

/* 29 September, after the review call: hero split from the top, the problem, bigger report, security panel */
.hero-row{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);margin-top:0}
.hx .hero-copy h1.st{font-size:clamp(38px,4.1vw,60px);line-height:1.06;letter-spacing:-.035em}
.hero-copy .sub{margin-top:clamp(20px,3vh,28px)}
.hero-row .vis{padding-top:4px}
.plab{position:absolute;left:0;top:0;font-family:var(--mono);font-weight:400;font-size:13px;line-height:13px;color:var(--mute);white-space:nowrap}

.whyfig{width:100%;max-width:600px;justify-self:end}
.wpanel{background:var(--s900);border:1px solid var(--s700);border-radius:8px;overflow:hidden}
.wph{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 22px 14px;border-bottom:1px solid var(--hair)}
.wk{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.wn{font-family:var(--display);font-weight:300;font-size:30px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.wrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--hair)}
.wrow:last-child{border-bottom:0}
.wname{min-width:0;display:flex;flex-direction:column;gap:5px}
.wname b{font-family:var(--mono);font-weight:500;font-size:15px;line-height:1.3;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wname small{font-family:var(--mono);font-size:12px;line-height:1.3;color:var(--mute);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wuse{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.wuse small{font-family:var(--mono);font-size:11.5px;line-height:1;color:var(--dim)}
.meter{display:flex;gap:4px}
.meter i{width:14px;height:8px;border-radius:2px;background:var(--s800);border:1px solid var(--s700)}
.twice{display:inline-block;font-family:var(--mono);font-weight:500;font-size:10.5px;line-height:1;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:4px;background:#1B110B;border:1px solid var(--o9);color:#FDBA74;transform-origin:0 50%}

.ret{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr)}
.retsub{margin:0;max-width:24ch}
.outs4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;margin:clamp(36px,5vh,56px) 0 0}
.outs4 > div{padding:20px 0 0}
.outs4 > div:last-child{border-bottom:0}
.outs4 dd{font-size:clamp(17px,1.35vw,20px)}

.secure{margin-top:clamp(48px,7vh,72px);padding:clamp(26px,3.4vw,44px);border:1px solid var(--s700);border-radius:8px;background:var(--s950)}
.sechead{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.secure h3{font-size:clamp(26px,2.6vw,38px)}
.secure h3 em{font-style:normal;color:var(--o6)}
.soc{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border:1px solid var(--s700);border-radius:8px;background:var(--s900)}
.soc .shield{width:30px;height:30px;fill:none;stroke:var(--o6);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.soc span{display:flex;flex-direction:column;gap:4px}
.soc b{font-family:var(--mono);font-weight:500;font-size:15px;line-height:1;letter-spacing:.06em;color:var(--ink)}
.soc small{font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.04em;color:var(--mute)}
.facts4{margin-top:32px}
.facts4 .ico{display:block;width:26px;height:26px;margin-bottom:14px;fill:none;stroke:var(--body);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.facts4 p{font-size:16px}
.gav.vendor{background:var(--s700);color:var(--ink);font-family:var(--display);font-weight:500}

@media (max-width:980px){
  .hero-row,.ret{grid-template-columns:minmax(0,1fr)}
  .whyfig{justify-self:stretch;max-width:none}
  .retsub{max-width:40ch}
  .outs4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .outs4{grid-template-columns:minmax(0,1fr)}
  .wrow{padding:12px 16px}
  .wph{padding:14px 16px 12px}
  .wname b{font-size:13px}
  .meter i{width:10px}
  .secure{padding:22px 18px}
}
@media (min-width:981px) and (max-width:1359px){.hero-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

/* the silos as a version story: the agent's name, the rail of versions, and the version each team runs */
.vname{position:absolute;left:0;top:0;font-family:var(--mono);font-weight:500;color:var(--ink);white-space:nowrap;line-height:1.2}
.vnode{position:absolute;left:0;top:0;border-radius:50%;background:var(--s600);border:1.5px solid var(--s500)}
.vnode.on{background:var(--o6);border-color:var(--o6);box-shadow:0 0 0 4px var(--o9)}
.vlab{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;font-family:var(--mono);line-height:1}
.vlab b{font-weight:500;color:var(--body)}
.vlab span{font-weight:400;color:var(--dim)}
.vlab.on b{color:var(--o6)}
.vtag{position:absolute;left:0;top:0;font-family:var(--mono);font-weight:500;letter-spacing:.04em;color:var(--mute);white-space:nowrap;line-height:1}
.tring{position:absolute;left:0;top:0;border:1.5px solid var(--o6);box-sizing:border-box;pointer-events:none;transform-origin:50% 50%}
.gav.vendor{background:#FFFFFF;padding:3px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gav.vendor img{display:block;width:100%;height:100%;object-fit:contain}
.gav.vendor{width:32px;height:32px;border-radius:6px}
.secure h3 em{white-space:nowrap}

/* 30 September, Nikki's review: three nav items, the hero window fits the first screen, the problem as the promise */
.hx .barlinks a[href="/designpartnership"],.hx .barlinks a.wl{display:inline}
@media (max-width:820px){
  .hx .tabstrip a[href="/designpartnership"],.hx .tabstrip a.wl{display:inline-flex}
  .hx .tabstrip{justify-content:flex-start;gap:6px}
}
@media (min-width:981px){
  .rs-hero{padding-top:clamp(12px,2vh,24px)}
  .hero-row{margin-top:clamp(10px,1.6vh,18px)}
  /* the window scales down on short screens so all of it sits above the fold: its height is 1018/994 of its width */
  .hero-row .vis{width:100%;max-width:calc((100vh - var(--bar) - 96px) * 994 / 1018);justify-self:end}
  @supports (height:100svh){.hero-row .vis{max-width:calc((100svh - var(--bar) - 96px) * 994 / 1018)}}
}
.hx #why h2.st{font-size:clamp(26px,2.75vw,42px);line-height:1.2}
@media (min-width:981px){.hx #why h2.st .li{white-space:nowrap;text-wrap:nowrap}}
.whycopy{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,26px)}
.whyp2{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--body);max-width:44ch;text-wrap:pretty}
.wpanel.wflow{display:flex;flex-direction:column}
.wtask,.wmatch{padding:16px 22px;border-bottom:1px solid var(--hair)}
.wtop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.wwho{font-family:var(--mono);font-size:12px;color:var(--mute)}
.wq{margin:10px 0 0;font-family:var(--display);font-weight:300;font-size:clamp(18px,1.5vw,21px);line-height:1.35;color:var(--ink);letter-spacing:-.01em}
.wtools{display:flex;gap:6px;flex-wrap:wrap}
.wtool{font-family:var(--mono);font-size:11.5px;line-height:1;padding:5px 8px;border-radius:5px;background:#0C151A;border:1px solid #122630;color:#81CDF3}
.wtool.on{border-color:#2087B2}
.wagent{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;border-radius:6px;background:#1B110B;border:1px solid #FF7200}
.wagent .wmk{height:18px;width:auto;flex:none}
.wagent b{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--ink)}
.wagent small{font-family:var(--mono);font-size:12px;color:#F3B26A;margin-left:auto}
a.wlinkrow{color:inherit;text-decoration:none;transition:background .25s}
a.wlinkrow:hover,a.wlinkrow:focus-visible{background:#292524}
.wl1{font-size:16px;line-height:1.3;color:var(--ink)}
.wr{display:flex;align-items:center;gap:12px;flex:none}
.wr small{font-family:var(--mono);font-size:11.5px;line-height:1;color:var(--mute)}
.war{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--dim);transition:color .25s,transform .25s}
a.wlinkrow:hover .war,a.wlinkrow:focus-visible .war{color:var(--o6);transform:translateY(2px)}
.wok{display:inline-flex;align-items:center;gap:7px;color:#59E262!important}
.okdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#59E262;font-style:normal}
@media (max-width:520px){
  .wtask,.wmatch{padding:14px 16px}
  .wl1{font-size:14.5px}
  .wr{gap:8px}
  .wr .meter{display:none}
  .wagent small{margin-left:0}
}
/* 30 September, Nikki: the silos copy moves to the left, the drawing to the right, as in the other feature blocks */
.teams-row{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center}
.teams-row .teamcopy{margin:0}
@media (max-width:980px){.teams-row{grid-template-columns:minmax(0,1fr)}}
/* 30 September, Nikki's blocks 2 to 4 and the stack block */
.wfcol{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,26px);min-width:0}
.runs{border:1px solid var(--s700);border-radius:8px;background:var(--s900);overflow:hidden;max-width:567px}
.rhd{padding:12px 18px 10px;border-bottom:1px solid var(--hair);font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.rrow{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.2fr);align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid var(--hair)}
.rrow:last-child{border-bottom:0}
.rd{font-family:var(--mono);font-size:12px;color:var(--body);white-space:nowrap}
.rs3{display:flex;gap:6px}
.rs3 i{font-style:normal;font-family:var(--mono);font-size:11px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#0C170C;border:1px solid #132913;color:#59E262}
.rn{font-family:var(--mono);font-size:11.5px;color:var(--mute);text-align:right}
.rn.held{color:#F3B26A}
@media (max-width:520px){
  .rrow{grid-template-columns:minmax(0,1fr) auto;padding:10px 14px;gap:6px 10px}
  .rn{grid-column:1 / -1;text-align:left}
  .rhd{padding:10px 14px 8px}
}
.hx #s2 h2.st{font-size:clamp(26px,2.75vw,42px);line-height:1.2}
@media (min-width:981px){.hx #s2 h2.st .li{white-space:nowrap;text-wrap:nowrap}}
.stopm span{letter-spacing:.06em;font-size:10.5px;white-space:nowrap}
.runs{width:min(100%,525px);max-width:none;margin-inline:auto}
/* 30 September, Ben: the outcomes block matches the other feature blocks' balance, copy .8 to the visual's 1.2, the report no wider than the other visuals */
.ret{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
.retsub{max-width:30ch}
.ret .vis{width:100%;max-width:640px;justify-self:end}
@media (max-width:980px){.ret{grid-template-columns:minmax(0,1fr)}.ret .vis{max-width:none;justify-self:stretch}.retsub{max-width:40ch}}

/* 30 September, Speedrun's advice: what each leader gets, and how you start and how it's priced */
.vhead{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,88px);align-items:center;margin-top:clamp(28px,4vh,48px)}
.vstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vstat{border:1px solid var(--s700);border-radius:6px;background:var(--s900);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.vk{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.vstat b{font-family:var(--display);font-weight:300;font-size:clamp(36px,3.4vw,48px);line-height:1;letter-spacing:-.025em;color:var(--ink)}
.vstat small{font-size:14px;line-height:1.4;color:var(--mute)}
.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vh,44px)}
.role{border:1px solid var(--s700);border-radius:8px;background:var(--s900);padding:22px;display:flex;flex-direction:column;gap:10px}
.rico{width:24px;height:24px;fill:none;stroke:var(--body);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.rk{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.role h3{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(19px,1.5vw,22px);line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.role p{margin:0;font-size:15px;line-height:1.5;color:var(--body);flex:1}
.rmeas{margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#F3B26A}
#value .refl{margin-top:18px}
.sell{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vh,48px)}
.sellc{border:1px solid var(--s700);border-radius:8px;background:var(--s900);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:14px}
.sk{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--o6)}
.sellc h3{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.sellc p{margin:0;font-size:16px;line-height:1.55;color:var(--body);max-width:44ch}
.msteps{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:relative}
.msteps::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:1px;background:#8A3A13}
.msteps li{position:relative;padding-top:22px;display:flex;flex-direction:column;gap:4px}
.msteps li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--s900);border:1.5px solid var(--o6)}
.msteps li:first-child::before{background:var(--o6)}
.msteps b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#F3B26A}
.msteps span{font-size:14px;line-height:1.35;color:var(--body)}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.pchips span{font-family:var(--mono);font-size:11.5px;padding:6px 10px;border-radius:6px;border:1px solid var(--s700);background:var(--s800);color:var(--body)}
@media (max-width:1180px){.roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.vhead,.sell{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.roles{grid-template-columns:minmax(0,1fr)}.msteps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}.msteps::before{display:none}}
.sellc .elink{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;margin-top:6px;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:6px}
.sellc .elink i{font-style:normal;color:var(--orange)}
@media (max-width:600px){
  .roles{gap:10px}
  .role{padding:16px 18px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:6px;align-items:start}
  .rico{grid-row:1 / span 3;margin:2px 0 0}
  .role p{display:none}
  .rmeas{margin-top:2px}
  .vstats{gap:10px}
  .vstat{padding:14px 16px}
}

/* 30 September, Ben and Nikki: the investment checklist replaces the role cards */
.cpanel{border:1px solid var(--s700);border-radius:10px;background:var(--s900);overflow:hidden;min-width:0;width:100%;max-width:640px;justify-self:end}
.cph{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 22px 14px;border-bottom:1px solid var(--hair)}
.ck{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.cn{font-family:var(--mono);font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.cpanel ol{list-style:none;margin:0;padding:0}
.cpanel li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--hair)}
.cpanel li:last-child{border-bottom:0}
.ctick{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#0C170C;border:1px solid #132913}
.ctick svg{width:13px;height:13px;fill:none;stroke:#59E262;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ct{font-size:17px;line-height:1.35;color:var(--body)}
.cpanel li.clast{background:#1B110B;border-top:1px solid var(--o9)}
.clast .ct{color:var(--ink);font-family:var(--display);font-weight:300;font-size:clamp(19px,1.7vw,22px);letter-spacing:-.01em}
.clast .ctick{background:transparent;border:1.5px dashed var(--o6);transition:background .5s ease,border-color .5s ease}
.clast .ctick svg{stroke:var(--s950);opacity:0;transition:opacity .4s ease .15s}
.clast.done .ctick{background:var(--o6);border:1.5px solid var(--o6)}
.clast.done .ctick svg{opacity:1}
.ccart{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#F3B26A;white-space:nowrap}
.ccart img{height:14px;width:auto}
@media (max-width:980px){.cpanel{justify-self:stretch;max-width:none}}
@media (max-width:480px){.cpanel li{grid-template-columns:24px minmax(0,1fr);padding:14px 16px}.cpanel li .ccart{grid-column:2}.cph{padding:14px 16px 12px}}
@media (prefers-reduced-motion:reduce){.clast .ctick,.clast .ctick svg{transition:none}}

/* 30 Sep: the one-line definition that opens the section under the hero, above the larger line */
.whatp{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--ink);max-width:44ch;text-wrap:pretty}