/* home.css — the apex home page (index.html), 2026-10-08.
   The platform page moved to platform.html; this page is the buyer's front door.
   Palette is P2A "Warm paper, cool signals" (site-pairing-p2a.css), light only. */
/* Layout: an editorial buyer's page on warm paper. Thesis headline, then one large
   interactive stage (eleven tools collapsing onto one record), then four proofs,
   the one-meter price, measured coverage, the trial path. Light only, by owner call. */
:root{
  /* P2A "Warm paper, cool signals" (hearth-tokens / site-pairing-p2a.css) */
  --canvas:#FAF8F4; --surface:#FFFFFF; --sunken:#F1EEE8;
  --border:#E7E3DB; --border-strong:#DAD8D4;
  --ink:#191713; --ink-2:#5A554D; --muted:#6D6355;
  --signal:#27506B;               /* emphasis / link: the record */
  --signal-wash:rgba(39,80,107,.08);
  --clay:#A94E2E;                 /* failure only */
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4.5vw,64px); --max:1240px;
  color-scheme:light;
}
.home *{box-sizing:border-box}
html{scroll-behavior:smooth}
body.home{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.home a{color:inherit}
.home :focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.home .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.home .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.home h1,.home h2,.home h3{font-family:var(--display);font-weight:400;letter-spacing:-.015em;text-wrap:balance;margin:0}
.home h1{font-size:clamp(42px,4.8vw,68px);line-height:1.02;font-weight:350}
.home h2{font-size:clamp(36px,4.6vw,64px);line-height:1.02}
.home h3{font-size:clamp(22px,2vw,27px);line-height:1.15}
.home h1 em,.home h2 em{font-style:italic;color:var(--signal)}
.home p{margin:0}
.home .lede{color:var(--ink-2);font-size:clamp(17px,1.35vw,19px);max-width:36em;text-wrap:pretty}
.home .small{font-size:14px;color:var(--muted)}
.home .mono{font-family:var(--mono)}
.home .btn{display:inline-flex;align-items:center;gap:10px;font:500 15px/1 var(--sans);text-decoration:none;border-radius:999px;padding:14px 22px;border:1px solid transparent;cursor:pointer;transition:transform var(--duration-base),background var(--duration-base),border-color var(--duration-base)}
.home .btn.ink{background:var(--ink);color:#fff}
.home .btn.ink:hover{background:#000;transform:translateY(-1px)}
.home .btn.line{border-color:var(--border-strong);color:var(--ink);background:var(--surface)}
.home .btn.line:hover{border-color:var(--ink)}
.home .link{color:var(--signal);text-decoration:none;font-weight:500;border-bottom:1px solid rgba(39,80,107,.3)}
.home .link:hover{border-color:var(--signal)}


/* hero */
.home .hero{padding-block:clamp(40px,6vw,80px) 0}
.home .hero-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:end}
.home .hero-top .side{display:grid;gap:26px}
.home .ctas{display:flex;flex-wrap:wrap;gap:12px}
.home .facts{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.home .facts span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-right:8px;vertical-align:1px}
@media (max-width:900px){.home .hero-top{grid-template-columns:1fr;align-items:start}}

/* the stage */
.home .stage-wrap{margin-top:clamp(40px,6vw,72px);background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.home .stage-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border)}
.home .seg{display:inline-flex;background:var(--sunken);border-radius:999px;padding:4px;gap:2px}
.home .seg button{all:unset;cursor:pointer;font:500 14px/1 var(--sans);padding:10px 16px;border-radius:999px;color:var(--ink-2);transition:background calc(var(--duration-base) * 1.5),color calc(var(--duration-base) * 1.5)}
.home .seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(25,23,19,.12)}
.home .seg button:focus-visible{outline:2px solid var(--signal)}
.home .pause{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--sans);color:var(--ink-2);padding:9px 12px;border-radius:8px}
.home .pause:hover{background:var(--sunken)}
.home .pause:focus-visible{outline:2px solid var(--signal)}
.home .pause svg{width:12px;height:12px}
.home .stage{position:relative;width:100%;aspect-ratio:2.15;min-height:440px;
  background-image:radial-gradient(circle at 1px 1px,rgba(25,23,19,.07) 1px,transparent 0);background-size:22px 22px}
.home .stage svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.home .host,.home .rec,.home .tool{position:absolute;left:0;top:0;will-change:transform}
.home .host{width:132px;padding:12px 14px;border-radius:12px;background:var(--ink);color:#fff;font-size:13px;line-height:1.3}
.home .host b{display:block;font-family:var(--mono);font-weight:500;font-size:13px}
.home .host span{opacity:.7;font-size:12px}
.home .tool{width:var(--cw,176px);padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--border-strong);font-size:13.5px;line-height:1.25;transition:border-color calc(var(--duration-base) * 2.5),background calc(var(--duration-base) * 2.5)}
.home .tool b{display:block;font-weight:600;font-size:13.5px}
.home .tool .sub{position:relative;display:block;height:16px;margin-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.home .tool .sub i{position:absolute;inset:0;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity calc(var(--duration-base) * 3)}
.home .tool .sub .b{opacity:0;color:var(--signal)}
.home .tool .cnt{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--sunken);border:1px solid var(--border-strong);font:500 11px/20px var(--mono);text-align:center;color:var(--ink-2);transition:opacity calc(var(--duration-base) * 2.5),transform calc(var(--duration-base) * 1.5)}
.home .tool.hit .cnt{transform:scale(1.18);background:#fff}
.home .stage.b .tool{border-color:rgba(39,80,107,.35)}
.home .stage.b .tool .sub .a{opacity:0}
.home .stage.b .tool .sub .b{opacity:1}
.home .stage.b .tool .cnt{opacity:0}
.home .tool.lit{background:#F4F7F9}
.home .rec{width:212px;padding:16px 18px;border-radius:14px;background:var(--surface);border:1.5px solid var(--signal);box-shadow:0 0 0 6px var(--signal-wash);opacity:0;transition:opacity calc(var(--duration-base) * 3);font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink-2);pointer-events:none}
.home .rec .t{font-family:var(--display);font-size:21px;color:var(--ink);font-family:var(--display);line-height:1.1;margin-bottom:6px}
.home .rec .seal{color:var(--signal);font-weight:500}
.home .stage.b .rec{opacity:1}
.home .rec.pulse{animation:recpulse calc(var(--duration-base) * 3.5) ease-out}
@keyframes recpulse{0%{box-shadow:0 0 0 6px var(--signal-wash)}40%{box-shadow:0 0 0 14px rgba(39,80,107,.16)}100%{box-shadow:0 0 0 6px var(--signal-wash)}}
.home .stage-cap{margin:0;padding:12px 18px;border-top:1px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--muted)}
.home .meters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border)}
.home .meter{padding:18px 20px;border-left:1px solid var(--border);display:grid;gap:2px;min-width:0}
.home .meter:first-child{border-left:0}
.home .meter .v{font-family:var(--display);font-size:clamp(34px,3.6vw,48px);line-height:1;font-variant-numeric:lining-nums tabular-nums;transition:color calc(var(--duration-base) * 2.5)}
.home .stage-wrap.b .meter .v{color:var(--signal)}
.home .meter .l{font-size:13.5px;color:var(--ink-2)}
@media (max-width:760px){
  .home .stage{aspect-ratio:.6;min-height:0}
  .home .host{width:auto;padding:9px 12px}
  .home .tool{padding:7px 8px;font-size:11.5px}
  .home .tool b{font-size:11.5px}
  .home .tool .sub{display:none}
  .home .tool .cnt{top:-8px;right:-6px;min-width:20px;height:20px;font-size:10px;line-height:18px}
  .home .rec{width:116px;padding:9px 10px;font-size:10px}
  .home .rec .t{font-size:18px}
  .home .meters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home .meter:nth-child(3){border-left:0}
  .home .meter:nth-child(n+3){border-top:1px solid var(--border)}
}

.home section{padding-block:clamp(88px,11vw,152px)}
.home .head{display:grid;gap:20px;max-width:46em}

/* proofs */
.home .proofs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:56px}
.home .pf{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:clamp(22px,3vw,34px);display:grid;gap:14px;align-content:start;min-width:0}
.home .pf .n{font-family:var(--mono);font-size:12px;color:var(--muted)}
.home .pf p{color:var(--ink-2);font-size:15.5px;max-width:34em}
.home .viz{margin-top:10px;background:var(--canvas);border:1px solid var(--border);border-radius:12px;padding:18px;min-height:170px;display:grid;align-content:center;min-width:0;overflow:hidden}
@media (max-width:860px){.home .proofs{grid-template-columns:1fr}}

/* proof 1: agents collapse */
.home .agents{position:relative;height:132px;display:flex;align-items:center;justify-content:center;gap:28px}
.home .host-box{border:1px dashed var(--border-strong);border-radius:10px;padding:14px;display:grid;gap:6px;width:200px;position:relative}
.home .host-box .hl{position:absolute;top:-9px;left:12px;background:var(--canvas);padding:0 6px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.home .ag{font-family:var(--mono);font-size:11px;padding:4px 8px;border-radius:6px;border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);animation:fold calc(var(--duration-base) * 35) cubic-bezier(.6,0,.3,1) infinite}
.home .ag:nth-child(3){animation-delay:calc(var(--duration-base) * 0.4)}.home .ag:nth-child(4){animation-delay:calc(var(--duration-base) * 0.8)}.home .ag:nth-child(5){animation-delay:calc(var(--duration-base) * 1.2)}.home .ag:nth-child(6){animation-delay:calc(var(--duration-base) * 1.6)}
@keyframes fold{0%,30%{transform:none;opacity:1}48%,88%{transform:translateY(var(--up,0));opacity:0}100%{transform:none;opacity:1}}
.home .ag:nth-child(3){--up:-27px}.home .ag:nth-child(4){--up:-54px}.home .ag:nth-child(5){--up:-81px}.home .ag:nth-child(6){--up:-108px}
.home .ag.first{animation-name:becomes;color:var(--ink)}
@keyframes becomes{0%,30%{background:var(--surface);color:var(--muted);border-color:var(--border-strong)}48%,88%{background:var(--ink);color:#fff;border-color:var(--ink)}100%{background:var(--surface)}}
.home .ag.first{position:relative;z-index:1}
.home .ag.first .w2{position:absolute;left:8px;top:4px;opacity:0;animation:sw2 calc(var(--duration-base) * 35) cubic-bezier(.6,0,.3,1) infinite}
.home .ag.first .w1{animation:sw1 calc(var(--duration-base) * 35) cubic-bezier(.6,0,.3,1) infinite}
@keyframes sw1{0%,30%{opacity:1}44%,92%{opacity:0}100%{opacity:1}}
@keyframes sw2{0%,34%{opacity:0}48%,88%{opacity:1}100%{opacity:0}}
.home .agents-legend{font-family:var(--mono);font-size:11px;color:var(--muted);display:grid;gap:6px}
.home .agents-legend b{color:var(--ink);font-weight:500}

/* proof 2: lesson becomes the rule */
.home .loop{display:grid;gap:10px;font-family:var(--mono);font-size:12px}
.home .lrow{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;background:var(--surface);border:1px solid var(--border);animation:step calc(var(--duration-base) * 45) infinite;min-width:0}
.home .lrow span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.home .lrow:nth-child(2){animation-delay:calc(var(--duration-base) * 11)}.home .lrow:nth-child(3){animation-delay:calc(var(--duration-base) * 22)}
@keyframes step{0%,6%{border-color:var(--border);box-shadow:none}12%,30%{border-color:var(--signal);box-shadow:0 0 0 4px var(--signal-wash)}40%,100%{border-color:var(--border);box-shadow:none}}
.home .tag{font-size:10.5px;padding:3px 8px;border-radius:999px;white-space:nowrap}
.home .tag.s{background:var(--signal-wash);color:var(--signal)}
.home .tag.k{background:var(--ink);color:#fff}
.home .tag.m{background:var(--sunken);color:var(--ink-2)}

/* proof 3: actions are events */
.home .stream{display:grid;gap:0;font-family:var(--mono);font-size:12px}
.home .srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:8px 4px;border-bottom:1px dashed var(--border);align-items:center;min-width:0}
.home .srow:last-child{border-bottom:0}
.home .srow .w{color:var(--muted)}
.home .srow .x{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home .srow.act .x{color:var(--signal);font-weight:500}
.home .srow .ok{color:var(--signal)}

/* proof 4: tamper demo */
.home .seal-demo{font-family:var(--mono);font-size:12px;display:grid;gap:12px}
.home .seal-demo dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 18px;margin:0}
.home .seal-demo dt{color:var(--muted)}
.home .seal-demo dd{margin:0;overflow-wrap:anywhere}
.home .seal-demo mark{background:transparent;color:inherit;transition:background calc(var(--duration-base) * 1.5)}
.home .seal-demo.tampered mark{background:rgba(169,78,46,.14);color:var(--clay)}
.home .seal-line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--border)}
.home .verdict{font-weight:500;color:var(--signal)}
.home .seal-demo.tampered .verdict{color:var(--clay)}
.home .mini{all:unset;cursor:pointer;font:500 12.5px/1 var(--sans);padding:9px 14px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface)}
.home .mini:hover{border-color:var(--ink)}
.home .mini:focus-visible{outline:2px solid var(--signal)}

/* price */
.home .price{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
.home .meterbox{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:clamp(20px,3vw,34px);display:grid;gap:26px;min-width:0}
.home .vol{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.home .vol .big{font-family:var(--display);font-size:clamp(44px,5vw,64px);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.home .vol .big small{font-family:var(--mono);font-size:14px;color:var(--muted);margin-left:8px}
.home .plan{font-family:var(--mono);font-size:12.5px;color:var(--signal);text-align:right}
.home input[type=range]{width:100%;accent-color:var(--ink);height:28px;margin:0}
.home .bands{position:relative;display:grid;grid-template-columns:var(--b1) var(--b2) var(--b3) var(--b4) var(--b5);height:10px;border-radius:5px;overflow:hidden;margin-top:-8px}
.home .bands i{display:block;background:var(--sunken);border-right:2px solid var(--surface)}
.home .bands i.on{background:var(--signal)}
.home .bandlabels{display:grid;grid-template-columns:var(--b1) var(--b2) var(--b3) var(--b4) var(--b5);font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:6px}
.home .bandlabels span{padding-right:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home .flat{display:grid;gap:10px}
.home .flat div{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:14px;align-items:center;font-size:14px}
.home .flat .line{height:1px;background:var(--border-strong)}
.home .flat .meterline{height:3px;background:var(--sunken);border-radius:2px;position:relative;overflow:hidden}
.home .flat .meterline i{position:absolute;inset:0 auto 0 0;background:var(--ink);border-radius:2px;transition:width calc(var(--duration-base) * 1.5)}
.home .flat em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.home .included{display:flex;flex-wrap:wrap;gap:8px}
.home .included span{font-size:13px;padding:6px 11px;border-radius:999px;border:1px solid var(--border);background:var(--canvas);display:inline-flex;gap:6px;align-items:center}
.home .included span::before{content:"✓";color:var(--signal);font-weight:600}
.home .included.ping span{animation:ping calc(var(--duration-base) * 3) ease-out both;animation-delay:calc(var(--i) * calc(var(--duration-base) * 0.125))}
@keyframes ping{40%{border-color:var(--signal);background:#F4F7F9}}
@media (max-width:900px){.home .price{grid-template-columns:1fr}}
/* BUG-01: the deployment model is chosen before the volume, so the unit is never misread */
.home .seg.deploy{justify-self:start;flex-wrap:wrap}
.home .seg.deploy button{font-size:13.5px;padding:9px 14px}

/* ── transformation spine: INGEST → SEAL → ACT (Phase 4) ── */
.home .xform{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home .xform li{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 24px;display:grid;gap:8px;align-content:start;min-width:0;position:relative}
.home .xform .xk{font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.home .xform b{font-family:var(--display);font-weight:400;font-size:clamp(21px,2vw,26px);line-height:1.15;color:var(--ink)}
.home .xform span:not(.xk){font-size:14px;line-height:1.55;color:var(--ink-2)}
.home .xform a{font-size:13.5px;font-weight:600;color:var(--signal);margin-top:4px}
.home .xform a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.home .xform{grid-template-columns:1fr}}

/* ── start where you sit: five stakeholder doors (2026-10-21, audit "something for every stakeholder").
   No-JS / print: the five cards stand in a grid — the whole content. With JS: a tablist over one card. ── */
.home .roles-sec{padding-bottom:0}
.home .roles{margin-top:48px}
.home .roles-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.home .roles-tabs[hidden]{display:none}
.home .roles-tabs button{all:unset;cursor:pointer;font:500 14.5px/1 var(--sans);padding:12px 18px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);transition:background var(--duration-base),color var(--duration-base),border-color var(--duration-base)}
.home .roles-tabs button:hover{border-color:var(--ink);color:var(--ink)}
.home .roles-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.home .roles-tabs button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.home .roles:not(.is-tabs){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.home .role{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:clamp(24px,3.4vw,44px);display:grid;gap:14px;align-content:start;min-width:0;
  background-image:linear-gradient(90deg,var(--signal) 0 56px,transparent 0);background-size:100% 3px;background-repeat:no-repeat}
.home .roles.is-tabs .role{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(24px,5vw,72px);align-items:start}
.home .roles.is-tabs .role>*:not(.role-path){grid-column:1}
.home .roles.is-tabs .role .role-path{grid-column:2;grid-row:1 / span 3}
.home .role[hidden]{display:none}
.home .role-k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.home .role h3{font-size:clamp(24px,2.4vw,34px)}
.home .role p:not(.role-k){color:var(--ink-2);font-size:16px;max-width:36em}
.home .role-path{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:rp}
.home .role-path li{counter-increment:rp}
.home .role-path a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--canvas);font-weight:500;transition:border-color var(--duration-base),background var(--duration-base)}
.home .role-path a::before{content:counter(rp,decimal-leading-zero);font:500 12px/1 var(--mono);color:var(--muted)}
.home .role-path a::after{content:"→";color:var(--signal)}
.home .role-path a:hover{border-color:var(--signal);background:var(--surface)}
@media (max-width:760px){.home .roles.is-tabs .role{grid-template-columns:1fr}.home .roles.is-tabs .role .role-path{grid-column:1;grid-row:auto}}

/* ── the path to a decision: the seven-chapter narrative the site is built around ── */
.home .journey{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;border-top:1px solid var(--border-strong)}
.home .journey li{min-width:0;border-left:1px solid var(--border)}
.home .journey li:first-child{border-left:0}
.home .journey a{display:grid;gap:8px;align-content:start;height:100%;padding:22px 16px 26px;position:relative;transition:background var(--duration-base)}
.home .journey a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-slow) var(--ease-standard)}
.home .journey a:hover{background:var(--surface)}
.home .journey a:hover::before,.home .journey a:focus-visible::before{transform:scaleX(1)}
.home .journey .jn{font:500 12px/1 var(--mono);color:var(--signal)}
.home .journey b{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.6vw,23px);line-height:1.15;color:var(--ink)}
.home .journey span:not(.jn){font-size:13.5px;line-height:1.45;color:var(--ink-2)}
@media (max-width:1080px){.home .journey{grid-template-columns:repeat(2,minmax(0,1fr))}.home .journey li{border-left:0;border-bottom:1px solid var(--border)}.home .journey li:nth-child(even){border-left:1px solid var(--border)}}
@media (max-width:560px){.home .journey{grid-template-columns:1fr}.home .journey li:nth-child(even){border-left:0}}


/* trial */
.home .steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:s}
.home .steps li{position:relative;padding:28px 22px 0 0;border-top:1px solid var(--border-strong);counter-increment:s;min-width:0}
.home .steps li::before{content:counter(s);position:absolute;top:-15px;left:0;width:30px;height:30px;border-radius:50%;background:var(--canvas);border:1px solid var(--ink);display:grid;place-items:center;font:500 12px/1 var(--mono)}
.home .steps li:last-child::before{background:var(--ink);color:#fff}
.home .steps b{display:block;font-family:var(--display);font-weight:400;font-size:22px;margin-bottom:6px}
.home .steps p{font-size:14.5px;color:var(--ink-2)}
.home .terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.home .terms div{padding-top:16px;border-top:2px solid var(--ink);display:grid;gap:6px}
.home .terms b{font-weight:600}
.home .terms p{color:var(--ink-2);font-size:15px}
@media (max-width:900px){.home .steps{grid-template-columns:1fr;gap:28px}.home .steps li{border-top:0;border-left:1px solid var(--border-strong);padding:0 0 0 30px}.home .steps li::before{left:-15px;top:0}.home .terms{grid-template-columns:1fr}}

/* close */
.home .close{background:var(--sunken);border-radius:28px;padding:clamp(40px,7vw,96px) clamp(22px,6vw,88px);display:grid;gap:28px;position:relative;overflow:hidden}
.home .close h2{font-size:clamp(42px,6vw,84px);max-width:13em}
.home .close .row .lede{max-width:30em}
.home .close .row{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.home .close .mesh{position:absolute;right:-150px;top:50%;width:min(620px,80%);height:auto;transform:translateY(-50%);opacity:.32;pointer-events:none;z-index:0}
.home .close .mesh .spin{transform-origin:200px 200px;animation:spin calc(var(--duration-base) * 700) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.home .close>*:not(.mesh){position:relative;z-index:1}
@media (max-width:760px){.home .close .mesh{right:-170px;width:420px;opacity:.16}}

.motion-off .home *,.motion-off .home *::before,.motion-off .home *::after{animation-play-state:paused!important}
/* home.js marks a section .offscreen while it is out of view, so its infinite loops stop compositing there */
.home .offscreen *,.home .offscreen *::before,.home .offscreen *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.home *,.home *::before,.home *::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* the canonical nav's buttons: site.css is not loaded on this page (its .hero/.btn/.wrap
   rules would collide with this page's own), so the two classes the nav markup uses live here */
.home .nav .btn{padding:9px 16px;font-size:14px}
.home .btn-primary{background:var(--ink);color:#fff}
.home .btn-primary:hover{background:#000}
.home .btn-ghost{color:var(--ink-2)}
.home .btn-ghost:hover{color:var(--ink)}
.home .closing{margin-bottom:0}

/* colors_and_type.css sets `.hearth a` (0,1,1); this page's links and buttons choose their own */
.home a{text-decoration:none}
.home .link{border-bottom:1px solid rgba(39,80,107,.3)}