/* build 2026-09-27T12:35:36Z */
/* =========================================================
   FinOps Robotics — dark, Apple-informed product site
   Single visual world: committed dark. Every colour painted.
   ========================================================= */
:root{
  --black:#000000;
  --surface:#0D0D12;
  --card:#15151C;
  --card-2:#1E1E27;
  --hair:#2C2C38;
  --hair-soft:#1F1F28;

  --text:#F5F5F7;
  --text-2:#ACACB9;
  --text-3:#83838F;

  --accent:#4F7CFF;
  --accent-deep:#1B3AC2;
  --accent-ink:#04211F;
  --accent-glow:rgba(79,124,255,.16);

  --ok:#4CD97B;
  --review:#E7B93F;
  --exception:#FF6B5A;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Karla","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;


  /* ---------------------------------------------------------------
     PALETTE - "boardroom": true black, cool platinum type, one cobalt
     accent. Netflix-style structure (pure black, big type, a single
     saturated colour used sparingly) with a hue that cannot be
     confused with the status colours below.

     Why the accent is not red: green = posted, amber = held, red =
     exception is the whole logic of the conveyor and the demo. A
     crimson brand colour sitting beside a crimson error chip makes
     that unreadable. If you want the Netflix red anyway, swap these
     three and accept the trade:
         --accent:#E50914  --accent-deep:#8B0610  --accent-ink:#FFFFFF
     ...and change --exception to a clearly separate hue, e.g. #FF8A3D.
     --------------------------------------------------------------- */
  --gutter:clamp(20px,5vw,60px);
  --maxw:1120px;
  --r-lg:22px;
  --r-md:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;   /* digits share one width everywhere */
}
h1,h2,h3,h4{
  margin:0;font-family:var(--display);font-weight:600;
  letter-spacing:-.018em;line-height:1.08;text-wrap:balance;
  font-variation-settings:"opsz" 48,"SOFT" 26,"WONK" 0;
}
h1{font-size:clamp(38px,6.4vw,74px);font-weight:700;letter-spacing:-.026em;line-height:1.02;
   font-variation-settings:"opsz" 120,"SOFT" 34,"WONK" 1}
/* a page whose lead title was drawn at section scale keeps that scale
   while still being the one <h1> that page needs */
h1.t2{font-size:clamp(29px,4.4vw,50px);letter-spacing:-.022em;line-height:1.05}
h2{font-size:clamp(29px,4.4vw,50px);font-weight:700;letter-spacing:-.022em;line-height:1.05;
   font-variation-settings:"opsz" 96,"SOFT" 32,"WONK" 1}
h3{font-size:clamp(19px,2.1vw,24px);font-weight:600;letter-spacing:-.012em;line-height:1.22;
   font-variation-settings:"opsz" 28,"SOFT" 24,"WONK" 0}
h4{font-size:16px;font-weight:600;letter-spacing:-.008em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:860px}
section{padding-block:clamp(64px,9vw,128px)}
.center{text-align:center}
.center .lede{margin-inline:auto}

.eyebrow{
  display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.lede{font-size:clamp(18px,2.1vw,23px);line-height:1.42;color:var(--text-2);max-width:60ch;letter-spacing:-.018em}
.small{font-size:14px;color:var(--text-3);line-height:1.5}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* gradient headline accent */
.grad{
  background:linear-gradient(94deg,var(--accent) 0%,#8FA9FF 38%,#D9E2FF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--accent);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.008em;
  padding:12px 22px;border-radius:980px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),background .2s ease,border-color .2s ease,opacity .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);font-weight:600}
.btn-primary:hover{background:#7194FF}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:8px 16px;font-size:13.5px}
.btn-lg{padding:15px 30px;font-size:17px}
.btnrow{display:flex;flex-wrap:wrap;gap:12px}
.center .btnrow{justify-content:center}

.tlink{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-size:15.5px;font-weight:500}
.tlink svg{width:14px;height:14px;transition:transform .2s ease}
.tlink:hover svg{transform:translateX(3px)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* keyboard users get out of the navigation in one keystroke */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--accent-ink);
  font-family:var(--sans);font-size:14px;font-weight:700;padding:11px 18px;border-radius:10px;
  text-decoration:none;transition:top .18s ease}
.skip:focus{top:12px}
.icn{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icn-sm{width:16px;height:16px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:90;
  background:rgba(8,8,9,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair-soft);
}
.nav-in{display:flex;align-items:center;gap:8px;height:52px}
.logo{display:flex;align-items:center;gap:9px;margin-right:auto;padding-right:10px}
.logo-mark{
  width:26px;height:26px;border-radius:7px;flex:none;
  background:linear-gradient(145deg,var(--accent),var(--accent-deep));
  color:var(--accent-ink);display:grid;place-items:center;
}
.logo-mark svg{width:16px;height:16px;stroke-width:1.8}
.logo-name{font-family:var(--display);font-size:16.5px;font-weight:700;letter-spacing:-.015em;font-variation-settings:"opsz" 20,"SOFT" 30,"WONK" 1}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{
  font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:-.004em;color:var(--text-2);
  padding:7px 12px;border-radius:8px;transition:color .18s ease,background .18s ease;
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-links a.on{color:var(--text);font-weight:500}
.nav-cta{display:flex;gap:8px;align-items:center;margin-left:10px}
.burger{
  display:none;background:transparent;border:0;color:var(--text);
  padding:7px;border-radius:8px;cursor:pointer;
}
.mobile-menu{display:none;border-bottom:1px solid var(--hair-soft);background:rgba(8,8,9,.96);backdrop-filter:blur(20px)}
.mobile-menu.open{display:block}
.mobile-menu nav{display:flex;flex-direction:column;padding-block:8px}
.mobile-menu a{padding:13px 0;font-size:17px;border-bottom:1px solid var(--hair-soft);color:var(--text-2)}
.mobile-menu a:last-child{border-bottom:0}
@media (max-width:820px){
  .nav-links{display:none}
  .burger{display:grid;place-items:center}
  .nav-cta .btn{display:none}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(56px,10vw,120px) clamp(48px,7vw,88px);position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:-30% -10% auto;height:560px;z-index:-1;
  background:radial-gradient(60% 50% at 50% 0%,var(--accent-glow) 0%,transparent 70%);
  pointer-events:none;
}
.hero h1{margin-block:18px 20px}
.hero .lede{margin-bottom:28px}

/* ---------- shared signals ---------- */
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 0 rgba(76,217,123,.6);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(76,217,123,0)}100%{box-shadow:0 0 0 0 rgba(76,217,123,0)}}
.status{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:5px;white-space:nowrap;border:1px solid}
.s-ok{color:var(--ok);border-color:rgba(76,217,123,.3);background:rgba(76,217,123,.08)}
.s-rev{color:var(--review);border-color:rgba(231,185,63,.3);background:rgba(231,185,63,.08)}
.s-exc{color:var(--exception);border-color:rgba(255,107,90,.3);background:rgba(255,107,90,.08)}

/* ---------- hero deck ---------- */
.deck{margin-top:clamp(44px,6vw,76px);perspective:1500px;perspective-origin:50% 46%}
.deck-inner{transform-style:preserve-3d;will-change:transform}
.deck-grid{
  display:grid;grid-template-columns:1fr minmax(230px,290px) 1fr;
  gap:clamp(12px,1.7vw,22px);align-items:center;transform-style:preserve-3d;
}
.deck-col{display:grid;gap:clamp(12px,1.7vw,20px);transform-style:preserve-3d}
@media (max-width:880px){
  .deck{perspective:none}
  .deck-grid{grid-template-columns:repeat(2,1fr)}
  .wheelbox{grid-column:1/-1;order:-1}
}
@media (max-width:520px){.deck-grid{grid-template-columns:1fr}}

.tile{
  position:relative;background:linear-gradient(165deg,var(--card-2) 0%,var(--card) 100%);
  border:1px solid var(--hair-soft);border-radius:20px;padding:17px 19px;
  display:flex;flex-direction:column;gap:9px;overflow:hidden;will-change:transform;
  box-shadow:0 22px 44px -28px rgba(0,0,0,.95);
}
.tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(150px circle at var(--tx,50%) var(--ty,0%),rgba(79,124,255,.14),transparent 70%);
  transition:opacity .45s ease;
}
.tile.lit::after{opacity:1}
.tile-top{display:flex;align-items:center;gap:8px}
.tile-dot{width:6px;height:6px;border-radius:50%;flex:none}
.tile-id{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;color:var(--accent)}
.tile-h{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.008em;color:var(--text);line-height:1.2}
.tile-sub{font-size:12.5px;color:var(--text-3);line-height:1.42}
.tile-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:3px}
.tile-num{font-family:var(--mono);font-size:20px;color:var(--text);letter-spacing:-.03em;line-height:1}
.tile-num span{font-size:11px;color:var(--text-3);margin-left:3px;letter-spacing:0}

.sig{display:flex;align-items:flex-end;gap:2.5px;height:22px}
.sig i{width:3px;height:6px;border-radius:2px;background:var(--accent);opacity:.7;animation:sig 1.7s ease-in-out infinite}
.sig.warn i{background:var(--review)}
.sig.bad i{background:var(--exception)}
@keyframes sig{0%,100%{height:5px;opacity:.4}50%{height:21px;opacity:1}}

.wheelbox{display:grid;place-items:center;transform-style:preserve-3d;will-change:transform}
.wheel{position:relative;width:min(290px,70vw);aspect-ratio:1}
.wheel svg{width:100%;height:100%;display:block}
#wheelArc{transition:stroke-dashoffset 1.7s cubic-bezier(.2,.7,.3,1)}
.wheel-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.wheel-v{font-family:var(--mono);font-size:clamp(28px,4.8vw,38px);color:var(--text);letter-spacing:-.04em;line-height:1}
.wheel-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--text-3);margin-top:7px}
.wheel-sub{font-size:11.5px;color:var(--accent);margin-top:5px}

.deck-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin-top:clamp(14px,2vw,22px);padding:14px 18px;
  background:var(--card);border:1px solid var(--hair-soft);border-radius:16px;
}
.deck-title{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.deck-note{margin-left:auto;font-size:12.5px;color:var(--text-3);line-height:1.45}
@media (max-width:760px){.deck-note{margin-left:0;flex-basis:100%}}

/* ---------- proximity cards ---------- */
.grid{display:grid;gap:clamp(14px,1.8vw,20px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.card{
  position:relative;background:var(--card);border:1px solid var(--hair-soft);
  border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;gap:12px;overflow:hidden;
  transition:border-color .3s ease,box-shadow .35s cubic-bezier(.2,.7,.3,1),background .3s ease;
  will-change:transform;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(79,124,255,.10),transparent 65%);
  transition:opacity .3s ease;
}
.card.near{border-color:var(--hair);background:var(--card-2);box-shadow:0 26px 50px -28px rgba(0,0,0,.9)}
.card.near::before{opacity:1}
.card.hot{
  border-color:rgba(79,124,255,.5);
  box-shadow:0 48px 80px -30px rgba(0,0,0,.98),0 0 0 1px rgba(79,124,255,.16),0 0 60px -20px rgba(79,124,255,.28);
}
.card-ico{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:rgba(79,124,255,.10);color:var(--accent);border:1px solid rgba(79,124,255,.18);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s ease;
}
.card.hot .card-ico{transform:scale(1.08) rotate(-3deg);background:rgba(79,124,255,.17)}
.card h3{margin-top:2px}
.card p{font-size:15px;color:var(--text-2);line-height:1.55}
/* the reveal that pops out on approach */
.card-more{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .34s cubic-bezier(.2,.7,.3,1),opacity .26s ease,margin-top .34s ease;
  font-size:14px;color:var(--accent);font-weight:500;
  display:flex;align-items:center;gap:6px;
}
.card.hot .card-more{max-height:60px;opacity:1;margin-top:4px}
@media (hover:none){
  .card-more{max-height:60px;opacity:1;margin-top:4px}
}

.layer-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:2px}
.layer-list{display:grid;gap:8px;margin-top:6px;padding-top:16px;border-top:1px solid var(--hair-soft)}
.layer-list li{display:flex;gap:10px;align-items:baseline;font-size:13.5px;color:var(--text-2);line-height:1.35}
.layer-list .lc{font-family:var(--mono);font-size:10.5px;color:var(--text-3);flex:none;width:40px;letter-spacing:.04em}

/* ---------- family switcher ---------- */
.families{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:36px;padding:5px;background:var(--card);border:1px solid var(--hair-soft);border-radius:980px;width:fit-content;margin-inline:auto}
.fam{
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.006em;
  padding:10px 22px;border-radius:980px;border:1px solid transparent;background:transparent;
  color:var(--text-2);cursor:pointer;transition:background .22s ease,color .22s ease;white-space:nowrap;
}
.fam:hover{color:var(--text)}
.fam[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.fam-blurb{text-align:center;margin-top:22px;color:var(--text-2);font-size:16.5px;max-width:60ch;margin-inline:auto;line-height:1.5}
@media (max-width:520px){.families{width:100%;border-radius:18px;justify-content:stretch}.fam{flex:1;padding:10px 12px;font-size:13px}}

/* ---------- roster ---------- */
.roster{display:grid;grid-template-columns:300px 1fr;gap:clamp(16px,2.2vw,26px);align-items:start;margin-top:44px}
@media (max-width:900px){.roster{grid-template-columns:1fr}}
.roster-list{display:flex;flex-direction:column;gap:5px}
@media (max-width:900px){.roster-list{flex-direction:column;overflow:visible;gap:6px}}
.unit{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:inherit;
  padding:13px 14px;border-radius:14px;cursor:pointer;background:transparent;border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,transform .2s cubic-bezier(.2,.7,.3,1);
}
.unit:hover{background:var(--card);transform:translateX(2px)}
.unit[aria-selected="true"]{background:var(--card-2);border-color:var(--hair)}
.unit-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.04);color:var(--text-2);transition:background .2s,color .2s}
.unit[aria-selected="true"] .unit-ico{background:rgba(79,124,255,.14);color:var(--accent)}
.unit-name{font-size:15px;font-weight:500;letter-spacing:-.015em;white-space:nowrap}
.unit-sub{font-size:12px;color:var(--text-3);white-space:nowrap}
.unit-code{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--text-3)}
@media (max-width:900px){
  .unit{width:100%;padding:14px}
  .unit-name{white-space:normal;line-height:1.25}
  .unit-sub{white-space:normal}
}

.detail{background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px)}
.detail-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--hair-soft)}
.detail-id{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.1em}
.detail-cad{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.detail-lede{margin-top:18px;color:var(--text-2);font-size:16.5px;line-height:1.5;max-width:62ch}
.does{margin-top:22px;display:grid;gap:11px}
.does-row{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:15px;color:var(--text-2);line-height:1.5}
.does-row svg{width:15px;height:15px;margin-top:4px;color:var(--accent);flex:none;stroke-width:2}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
@media (max-width:700px){.meta{grid-template-columns:1fr}}
.meta-cell{background:var(--surface);border:1px solid var(--hair-soft);border-radius:14px;padding:15px 16px;display:flex;flex-direction:column;gap:6px}
.meta-cell.gate{background:rgba(79,124,255,.06);border-color:rgba(79,124,255,.2)}
.meta-k{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.meta-cell.gate .meta-k{color:var(--accent)}
.meta-v{font-size:14px;color:var(--text);line-height:1.45}

/* ---------- steps / list rows ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,18px);margin-top:48px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--r-md);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.step-n{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--accent);font-variation-settings:"opsz" 36,"SOFT" 30,"WONK" 0;opacity:.9;line-height:1}
.step p{font-size:14.5px;color:var(--text-2);line-height:1.52}
.step-when{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair-soft);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}

.syscols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,32px);margin-top:44px}
@media (max-width:900px){.syscols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.syscols{grid-template-columns:1fr}}
.syscol h3{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.syscol li{font-size:14.5px;color:var(--text-2);padding:8px 0;border-bottom:1px solid var(--hair-soft)}
.syscol li:last-child{border-bottom:0}

/* ---------- plans ---------- */
.plan{background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;will-change:transform;transition:border-color .3s,box-shadow .35s cubic-bezier(.2,.7,.3,1)}
.plan.hot{border-color:rgba(79,124,255,.5);box-shadow:0 48px 80px -30px rgba(0,0,0,.98),0 0 60px -20px rgba(79,124,255,.26)}
.plan.featured{background:linear-gradient(170deg,rgba(79,124,255,.09),var(--card) 55%);border-color:rgba(79,124,255,.26)}
.plan-price{font-family:var(--mono);font-size:12.5px;color:var(--accent)}
.plan p{font-size:14.5px;color:var(--text-2);line-height:1.5}
.plan ul{display:grid;gap:8px;margin-top:4px}
.plan li{font-size:14px;color:var(--text-2);padding-left:20px;position:relative;line-height:1.45}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.8}
.plan-foot{margin-top:auto;padding-top:8px}

/* ---------- team ---------- */
.person{background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;gap:12px;will-change:transform;transition:border-color .3s,box-shadow .35s cubic-bezier(.2,.7,.3,1)}
.person.hot{border-color:rgba(79,124,255,.45);box-shadow:0 48px 80px -30px rgba(0,0,0,.98),0 0 60px -20px rgba(79,124,255,.24)}
.avatar{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em;
  font-variation-settings:"opsz" 30,"SOFT" 30,"WONK" 0;
  background:linear-gradient(145deg,rgba(79,124,255,.22),rgba(14,122,114,.28));
  color:var(--accent);border:1px solid rgba(79,124,255,.25);
}
.person-role{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}

/* ---------- how to reach a human ---------- */
.reach{margin-top:30px;padding-top:24px;border-top:1px solid var(--hair-soft)}
.reach-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.reach-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.reach-row:empty{display:none}
.reach-link{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text);
  background:var(--card);border:1px solid var(--hair);border-radius:999px;padding:9px 16px;
  transition:border-color .25s,background .25s,transform .25s cubic-bezier(.2,.7,.3,1)}
.reach-link:hover{border-color:rgba(79,124,255,.5);background:var(--card-2);transform:translateY(-1px)}
.reach-link svg{width:15px;height:15px;color:var(--accent);flex:none;stroke-width:2}
footer .reach-row{margin-top:4px}
footer .reach-link{font-size:13px;padding:7px 13px;background:transparent}

/* ---------- founder ---------- */
.founder{background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,40px)}
/* the identity reads as a header across the top; the story runs full width beneath it,
   so the prose never ends up in a 370px gutter next to an avatar */
.founder-id{display:flex;align-items:center;gap:clamp(16px,2.2vw,24px)}
.avatar-lg{width:92px;height:92px;font-size:32px;flex:none}
.founder-name{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;
  color:var(--text);font-size:clamp(24px,3vw,32px);margin:7px 0 3px}
.founder-cred{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--text-3)}
.founder-bio{display:grid;gap:15px;margin-top:clamp(22px,2.6vw,28px);
  padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--hair-soft)}
.founder-bio p{font-size:16px;line-height:1.68;color:var(--text-2);max-width:68ch}
.founder-bio b{color:var(--text);font-weight:700}
/* the closing line is the ambition — it should not read as one more paragraph */
.founder-amb{color:var(--text)!important;font-size:17px!important;
  padding-top:16px;border-top:1px solid var(--hair-soft)}
/* the sign-off — it is a message, so it is signed */
.sign{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.sign-name{font-family:var(--display);font-size:20px;color:var(--text);letter-spacing:-.01em;
  font-variation-settings:"opsz" 28,"SOFT" 40,"WONK" 1}
.sign-role{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--text-3)}
@media (max-width:560px){.avatar-lg{width:72px;height:72px;font-size:26px}}

/* vision and mission read as statements, not as cards */
.stmt{padding-left:clamp(18px,2.4vw,28px);border-left:2px solid rgba(79,124,255,.4)}
.stmt + .stmt{margin-top:clamp(40px,5vw,62px)}
.stmt-tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.stmt-line{font-family:var(--display);font-size:clamp(23px,3.2vw,36px);line-height:1.24;
  letter-spacing:-.015em;color:var(--text);margin:14px 0 0;
  font-variation-settings:"opsz" 40,"SOFT" 26,"WONK" 1}
.stmt-body{font-size:16px;line-height:1.68;color:var(--text-2);margin-top:16px;max-width:64ch}
.person p{font-size:14.5px;color:var(--text-2);line-height:1.55}
.person.open{border-style:dashed;border-color:var(--hair);background:transparent}
.person.open .avatar{background:transparent;border-style:dashed;color:var(--text-3);border-color:var(--hair)}
.person.open .person-role{color:var(--text-3)}

/* ---------- forms ---------- */
.formcard{background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:15.5px;color:var(--text);
  background:var(--surface);border:1px solid var(--hair);border-radius:12px;
  padding:12px 14px;width:100%;transition:border-color .2s ease,background .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;background:var(--surface)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field textarea{resize:vertical;min-height:84px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236E6E76' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:36px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{font-family:var(--sans);font-size:13.5px;padding:8px 14px;border-radius:980px;border:1px solid var(--hair);background:var(--surface);color:var(--text-2);cursor:pointer;transition:all .18s ease}
.pick:hover{border-color:var(--text-3);color:var(--text)}
.pick[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.form-note{font-size:13px;color:var(--text-3);margin-top:14px;line-height:1.5}
.form-done{display:grid;gap:14px;padding:clamp(24px,3vw,34px);background:var(--card);border:1px solid rgba(79,124,255,.3);border-radius:var(--r-lg)}
.brief{font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--text-2);background:var(--surface);border:1px solid var(--hair-soft);border-radius:12px;padding:16px;white-space:pre-wrap;word-break:break-word;overflow-x:auto}

/* ---------- login ---------- */
.login-wrap{min-height:64vh;display:grid;place-items:center;padding-block:clamp(48px,8vw,90px)}
.login-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--hair-soft);border-radius:26px;padding:clamp(26px,4vw,38px);text-align:center}
.login-mark{width:52px;height:52px;border-radius:15px;margin:0 auto 18px;background:linear-gradient(145deg,var(--accent),var(--accent-deep));color:var(--accent-ink);display:grid;place-items:center}
.login-mark svg{width:26px;height:26px;stroke-width:1.6}
.login-card .field{text-align:left}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--review);border:1px solid rgba(231,185,63,.3);background:rgba(231,185,63,.07);padding:5px 10px;border-radius:980px;margin-bottom:16px}
.notice{margin-top:16px;padding:14px 16px;border-radius:14px;background:rgba(79,124,255,.07);border:1px solid rgba(79,124,255,.22);font-size:14px;color:var(--text-2);line-height:1.5;text-align:left}

/* ---------- faq ---------- */
.faq{margin-top:44px;border-top:1px solid var(--hair-soft)}
.faq details{border-bottom:1px solid var(--hair-soft)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-size:17.5px;font-weight:500;letter-spacing:-.018em;display:flex;gap:16px;align-items:center;transition:color .2s}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{margin-left:auto;color:var(--accent);flex:none;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq details p{padding-bottom:22px;color:var(--text-2);font-size:15.5px;max-width:74ch;line-height:1.6}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:44px}
.stat.wide{grid-column:1/-1}
@media (max-width:680px){.stats{grid-template-columns:1fr}}
.stat{background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:6px}
.stat-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.stat-v{font-size:17px;color:var(--text);font-weight:500;letter-spacing:-.018em;line-height:1.35}

/* ---------- cta band ---------- */
.ctaband{background:linear-gradient(180deg,var(--surface),var(--black));border-top:1px solid var(--hair-soft)}

/* ---------- footer ---------- */
footer{background:var(--surface);border-top:1px solid var(--hair-soft);padding-block:44px 34px}
.foot-grid{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.foot-nav{display:flex;flex-wrap:wrap;gap:26px}
.foot-nav a{font-size:14px;color:var(--text-3)}
.foot-nav a:hover{color:var(--accent)}
.foot-base{margin-top:30px;padding-top:22px;border-top:1px solid var(--hair-soft);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:var(--text-3)}

/* ---------- pages ---------- */
.page{display:none;animation:fade .45s cubic-bezier(.2,.7,.3,1)}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- AP demo player ---------- */
.player{margin-top:clamp(28px,4vw,44px);background:var(--surface);border:1px solid var(--hair);border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
.player-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--hair-soft);background:rgba(255,255,255,.02)}
.player-title{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.player-clock{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.player-body{display:grid;grid-template-columns:238px 1fr;min-height:440px}
@media (max-width:880px){.player-body{grid-template-columns:1fr;min-height:0}}
.rail{border-right:1px solid var(--hair-soft);padding:13px;display:flex;flex-direction:column;gap:3px}
@media (max-width:880px){
  /* the steps scroll sideways on a narrow screen. the bar itself is noise,
     and on Windows it renders as a bright white strip across the card */
  .rail{border-right:0;border-bottom:1px solid var(--hair-soft);flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none;-ms-overflow-style:none}
  .rail::-webkit-scrollbar{display:none}
}
.rstep{display:flex;gap:11px;align-items:center;width:100%;padding:10px 11px;border-radius:12px;background:transparent;border:1px solid transparent;color:var(--text-3);font:inherit;text-align:left;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.rstep:hover{background:var(--card);color:var(--text-2)}
.rstep[aria-current="true"]{background:var(--card-2);border-color:var(--hair);color:var(--text)}
.rstep.done{color:var(--text-2)}
.rnum{width:26px;height:26px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;flex:none;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:-.01em}
.rstep[aria-current="true"] .rnum{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.rstep.done .rnum{border-color:rgba(76,217,123,.45);color:var(--ok)}
.rlabel{font-size:13.5px;font-weight:600;letter-spacing:-.004em;line-height:1.2}
@media (max-width:880px){.rstep{flex:none;width:auto}.rlabel{white-space:nowrap}}
.stage{position:relative;padding:clamp(18px,2.6vw,28px);display:flex;flex-direction:column;gap:14px;overflow:hidden}
.stage.paused *{animation-play-state:paused !important}
.botline{display:flex;gap:11px;align-items:flex-start}
.botface{width:38px;height:38px;border-radius:12px;flex:none;background:linear-gradient(145deg,var(--accent),var(--accent-deep));color:var(--accent-ink);display:grid;place-items:center;animation:botpulse 1.8s ease-in-out infinite}
.botface svg{width:21px;height:21px;stroke-width:1.8}
@keyframes botpulse{0%,100%{box-shadow:0 0 0 0 rgba(79,124,255,.4)}50%{box-shadow:0 0 0 9px rgba(79,124,255,0)}}
.botsay{background:var(--card-2);border:1px solid var(--hair-soft);border-radius:15px;border-top-left-radius:4px;padding:10px 14px;font-size:14.5px;color:var(--text);line-height:1.45}
.botsay b{color:var(--accent);font-weight:600}
.scene{display:none}
.scene.on{display:flex;flex-direction:column;gap:13px}
.rise{opacity:0;transform:translateY(9px);animation:rise .55s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.mock{background:var(--card);border:1px solid var(--hair-soft);border-radius:16px;overflow:hidden}
.mock-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--hair-soft);font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.mock-h svg{width:14px;height:14px;color:var(--accent)}
.mock-b{padding:14px 16px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0}
.kv dt{color:var(--text-3);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;align-self:center}
.kv dd{margin:0;color:var(--text);font-family:var(--mono);font-size:13.5px}
.chk{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--hair-soft);font-size:14px;color:var(--text-2);line-height:1.35}
.chk:last-child{border-bottom:0}
.cbox{width:19px;height:19px;border-radius:6px;border:1px solid rgba(76,217,123,.4);background:rgba(76,217,123,.1);display:grid;place-items:center;flex:none;color:var(--ok)}
.cbox svg{width:11px;height:11px;stroke-width:2.8}
.cres{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ok);flex:none}
.jrow{display:grid;grid-template-columns:58px 1fr 88px 88px;gap:10px;font-family:var(--mono);font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--hair-soft);color:var(--text-2)}
.jrow.head{color:var(--text-3);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.jrow.total{border-bottom:0;border-top:1px solid var(--hair);color:var(--text);padding-top:9px}
.num{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:620px){.jrow{grid-template-columns:46px 1fr 70px 70px;gap:6px;font-size:10.5px}}
.hist{display:grid;gap:7px}
.hrow{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:12.5px;font-family:var(--mono);color:var(--text-3);padding:8px 11px;background:var(--surface);border:1px solid var(--hair-soft);border-radius:10px}
.hrow.match{color:var(--text);border-color:rgba(79,124,255,.3);background:rgba(79,124,255,.06)}
.toast{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;background:rgba(79,124,255,.07);border:1px solid rgba(79,124,255,.28);border-radius:16px}
.toast-t{font-size:14.5px;color:var(--text);font-weight:700;letter-spacing:-.006em}
.toast-s{font-size:13px;color:var(--text-2);margin-top:4px;line-height:1.5}
.refid{font-family:var(--mono);font-size:12px;color:var(--accent);background:rgba(79,124,255,.1);border:1px solid rgba(79,124,255,.25);padding:2px 7px;border-radius:5px;white-space:nowrap}
.trail{font-family:var(--mono);font-size:11px;color:var(--text-3);line-height:1.6}
.player-foot{display:flex;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--hair-soft);background:rgba(255,255,255,.02)}
.pbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--hair);background:var(--card);color:var(--text);display:grid;place-items:center;cursor:pointer;flex:none;transition:border-color .2s,color .2s}
.pbtn:hover{border-color:var(--accent);color:var(--accent)}
.pbtn.main{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.pbtn.main:hover{color:var(--accent-ink)}
.pbtn svg{width:16px;height:16px;stroke-width:2}
.track{flex:1;height:5px;border-radius:5px;background:var(--hair);overflow:hidden;cursor:pointer}
.track-fill{height:100%;background:var(--accent);width:0;border-radius:5px}

/* ---------- social ---------- */
.socials{display:flex;flex-wrap:wrap;gap:9px}
.soc{width:40px;height:40px;border-radius:12px;border:1px solid var(--hair);background:var(--card);color:var(--text-2);display:grid;place-items:center;transition:all .2s ease}
.soc:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.soc svg{width:19px;height:19px}
.soc[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.soc[aria-disabled="true"]:hover{border-color:var(--hair);color:var(--text-2);transform:none}

/* ---------- animated robot stage ---------- */
.stagewrap{display:flex;flex-direction:column;gap:14px;padding:clamp(16px,2.4vw,24px)}
.stagewrap.paused *{animation-play-state:paused !important}
.saywrap{display:flex;gap:12px;align-items:flex-start;min-height:62px}
.saytag{width:36px;height:36px;border-radius:11px;flex:none;background:linear-gradient(145deg,var(--accent),var(--accent-deep));color:var(--accent-ink);display:grid;place-items:center}
.saytag svg{width:20px;height:20px;stroke-width:1.8}
.botsay{position:relative;background:var(--card-2);border:1px solid var(--hair-soft);border-radius:16px;border-top-left-radius:4px;padding:11px 16px;font-size:15px;color:var(--text);line-height:1.45;animation:sayin .45s cubic-bezier(.2,.7,.3,1)}
.botsay b{color:var(--accent);font-weight:700}
@keyframes sayin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.svgwrap{background:radial-gradient(120% 90% at 50% 0%,rgba(79,124,255,.06),transparent 60%),var(--card);border:1px solid var(--hair-soft);border-radius:18px;overflow:hidden}
@media (max-width:880px){
  /* grid/flex children default to min-width:auto, which refuses to shrink
     below their content; without this the stage would be clipped */
  .player-body,.stagewrap,.saywrap,.svgwrap{min-width:0}
  /* nothing scrolls sideways any more: frameScene() sets the viewBox to
     the scene that is playing, so the whole scene is on screen */
  .svgwrap{max-width:100%;overflow:hidden}
  .stagewrap{padding:clamp(12px,3vw,20px)}
  /* one height for every scene, so the card never jumps as they advance */
  .svgwrap #stageSvg{height:clamp(300px,74vw,360px)}
  #stageSvg .b-line{display:none}
}
#stageSvg{display:block;width:100%;height:auto}

/* robot */
.b-shell{fill:url(#shellG);stroke:#FFFFFF;stroke-width:1.1;stroke-opacity:.55}
.b-shell2{fill:url(#shellG2);stroke:#FFFFFF;stroke-width:1;stroke-opacity:.4}
.b-gloss{fill:url(#glossG)}
.b-joint{fill:#8F95AA}
.b-seam{fill:none;stroke:#A9AEC0;stroke-width:1.1;stroke-linecap:round;opacity:.7}
.b-face{fill:#0A0C16;stroke:#9EA4B6;stroke-width:1.6}
.b-dim{fill:#15151C;stroke:#2C2C38;stroke-width:1.4}
.b-eye,.b-acc{fill:#4F7CFF}
.b-eye{filter:drop-shadow(0 0 5px rgba(79,124,255,.95))}
#bot{filter:drop-shadow(0 18px 26px rgba(0,0,0,.7))}
.b-eye-h{fill:none;stroke:#4F7CFF;stroke-width:3.4;stroke-linecap:round}
.b-line{fill:none;stroke:#34353F;stroke-width:1.6;stroke-linecap:round}
.b-acc-line{fill:none;stroke:#4F7CFF;stroke-width:1.8;stroke-linecap:round}
.b-sh{fill:#000;opacity:.72}
.b-paper{fill:#F3F5F5;stroke:#C9D0D0;stroke-width:1.2}
.b-ink{fill:#8A9698}
.b-ink-d{fill:#2A3335}
.t-s{fill:#ACACB9;font-family:var(--mono);font-size:11px}
.t-b{fill:#F5F5F7;font-family:var(--mono);font-size:12.5px}
.t-a{fill:#4F7CFF;font-family:var(--mono);font-size:11px}
.t-d{fill:#2A3335;font-family:var(--mono);font-size:10.5px}
.t-ok{fill:#4CD97B;font-family:var(--mono);font-size:10px}

#bot{animation:bob 3.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.eyes{transform-box:view-box;transform-origin:150px 188px;animation:blink 4.4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
.eyeset{transform-box:view-box;transform-origin:150px 188px}
.eye-happy{opacity:0}
.tip{animation:tipglow 2s ease-in-out infinite}
@keyframes tipglow{0%,100%{opacity:.45}50%{opacity:1}}
.chestlight{animation:tipglow 1.4s ease-in-out infinite}

.armL{transform-box:view-box;transform-origin:112px 252px}
.armR{transform-box:view-box;transform-origin:188px 252px}

/* per-scene robot poses */
#stageSvg[data-scene="0"] .armR{animation:reachOut 1.4s cubic-bezier(.3,.8,.4,1) forwards}
#stageSvg[data-scene="1"] .armR{transform:rotate(-38deg)}
#stageSvg[data-scene="1"] .eyeset{animation:squint 1.5s ease-in-out infinite}
#stageSvg[data-scene="2"] .armR{animation:point 2.2s ease-in-out infinite}
#stageSvg[data-scene="3"] .armR{transform:rotate(-46deg)}
#stageSvg[data-scene="3"] .armL{animation:tap 1.1s ease-in-out infinite}
#stageSvg[data-scene="4"] .armR{animation:offerUp 1.6s ease-in-out infinite alternate}
#stageSvg[data-scene="5"] .armR{animation:push 1.8s ease-in-out infinite}
#stageSvg[data-scene="6"] .armR{transform:rotate(-120deg)}
#stageSvg[data-scene="6"] .armL{animation:wave .7s ease-in-out infinite alternate}
#stageSvg[data-scene="6"] .eye-round{opacity:0}
#stageSvg[data-scene="6"] .eye-happy{opacity:1}
@keyframes reachOut{0%{transform:rotate(0)}55%{transform:rotate(-58deg)}100%{transform:rotate(-30deg)}}
@keyframes point{0%,100%{transform:rotate(-32deg)}50%{transform:rotate(-44deg)}}
@keyframes tap{0%,100%{transform:rotate(0)}50%{transform:rotate(16deg)}}
@keyframes offerUp{from{transform:rotate(-70deg)}to{transform:rotate(-86deg)}}
@keyframes push{0%,100%{transform:rotate(-28deg)}45%{transform:rotate(-46deg)}}
@keyframes wave{from{transform:rotate(106deg)}to{transform:rotate(132deg)}}
@keyframes squint{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}

/* scenes */
.sc{opacity:0;visibility:hidden;pointer-events:none}
.sc.on{opacity:1;visibility:visible}

.sc.on .fx-in{animation:fxIn .55s cubic-bezier(.2,.7,.3,1) backwards}
@keyframes fxIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sc.on .fx-pop{animation:fxPop .5s cubic-bezier(.3,1.5,.5,1) backwards;transform-box:fill-box;transform-origin:center}
@keyframes fxPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* s0 envelope flight */
.sc.on .env{animation:envFly 2.6s cubic-bezier(.35,.1,.3,1) forwards}
@keyframes envFly{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  12%{opacity:1}
  100%{transform:translate(-405px,132px) rotate(-12deg);opacity:1}
}
.sc.on .envflap{animation:flap .8s 2.2s ease-out forwards;transform-box:fill-box;transform-origin:center top}
@keyframes flap{to{transform:rotateX(150deg)}}

/* s1 scan */
.sc.on .beam{animation:beam 1.8s ease-in-out infinite}
@keyframes beam{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(196px);opacity:0}}
.sc.on .chip{animation:chipPop .5s cubic-bezier(.3,1.5,.5,1) backwards;transform-box:fill-box;transform-origin:left center}
@keyframes chipPop{from{opacity:0;transform:translateX(-26px) scale(.8)}to{opacity:1;transform:none}}

/* s2 connectors */
.sc.on .draw{stroke-dasharray:240;stroke-dashoffset:240;animation:draw .8s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sc.on .tag{animation:tagDrop .6s cubic-bezier(.3,1.4,.5,1) backwards;transform-box:fill-box;transform-origin:center}
@keyframes tagDrop{from{opacity:0;transform:translateY(-30px) scale(.7) rotate(-12deg)}to{opacity:1;transform:none}}

/* s3 checks */
.sc.on .badge{animation:fxPop .45s cubic-bezier(.3,1.6,.5,1) backwards;transform-box:fill-box;transform-origin:center}
.sc.on .tick{stroke-dasharray:22;stroke-dashoffset:22;animation:draw .35s ease-out forwards}
.sc.on .lens{animation:sweepLens 3.4s ease-in-out infinite}
@keyframes sweepLens{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,150px)}}

/* s4 stamp */
.sc.on .stamp{animation:slam .7s cubic-bezier(.3,1.4,.4,1) 1.1s backwards;transform-box:fill-box;transform-origin:center}
@keyframes slam{0%{opacity:0;transform:scale(3.4) rotate(-26deg)}70%{opacity:1;transform:scale(.94) rotate(-13deg)}100%{opacity:1;transform:scale(1) rotate(-13deg)}}
.sc.on .ping{animation:ping 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}

/* s5 post */
.sc.on .docgo{animation:docGo 1.9s cubic-bezier(.4,.1,.3,1) forwards}
@keyframes docGo{0%{transform:translate(0,0) scale(1);opacity:1}70%{opacity:1}100%{transform:translate(268px,40px) scale(.18);opacity:0}}
.sc.on .receipt{animation:print 1.1s 1.5s ease-out backwards;transform-box:fill-box;transform-origin:center top}
@keyframes print{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
.sc.on .dbglow{animation:dbglow 1.8s 1.2s ease-out}
@keyframes dbglow{0%{opacity:0}40%{opacity:.5}100%{opacity:0}}

/* s6 notify */
.sc.on .bell{animation:ring .9s ease-in-out 3;transform-box:fill-box;transform-origin:center top}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(15deg)}40%{transform:rotate(-13deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-6deg)}}
.sc.on .note{animation:noteFly 1.5s cubic-bezier(.3,.9,.4,1) backwards}
@keyframes noteFly{from{opacity:0;transform:translate(-150px,60px) scale(.7)}to{opacity:1;transform:none}}
.sc.on .spark{animation:spark 1.4s ease-out infinite backwards;transform-box:fill-box;transform-origin:center}
@keyframes spark{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

@media (prefers-reduced-motion: reduce){
  #bot,.eyes,.tip,.chestlight,.sc.on *{animation:none !important}
  .sc.on .fx-in,.sc.on .fx-pop,.sc.on .chip,.sc.on .badge,.sc.on .tag,.sc.on .note,.sc.on .stamp{opacity:1 !important;transform:none !important}
  .sc.on .draw,.sc.on .tick{stroke-dashoffset:0 !important}
  .sc.on .env{transform:translate(-405px,132px) rotate(-12deg);opacity:1}
}

/* ---------- permission ladder ---------- */
.ladder{margin-top:44px;border:1px solid var(--hair-soft);border-radius:18px;overflow:hidden}
.lrow{display:grid;grid-template-columns:200px 1fr 210px;gap:18px;padding:18px 20px;border-bottom:1px solid var(--hair-soft);align-items:center;font-size:15px;color:var(--text-2);line-height:1.55}
.lrow:last-child{border-bottom:0}
.lhead{background:rgba(255,255,255,.02);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.lstage{display:flex;flex-direction:column;gap:3px;color:var(--text);font-weight:700;font-size:15px;letter-spacing:-.008em}
.lstage em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:400}
.lno{font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--exception);opacity:.9}
.lnever{background:rgba(255,107,90,.05)}
.lnever .lstage{color:var(--exception)}
@media (max-width:820px){
  .lrow{grid-template-columns:1fr;gap:8px}
  .lhead{display:none}
  .lno::before{content:"Cannot: "}
}

/* ---------- ai split ---------- */
.splitcard{background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:14px}
.splitcard.alt{border-color:rgba(79,124,255,.24);background:linear-gradient(170deg,rgba(79,124,255,.06),var(--card) 60%)}
.splith{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.006em;color:var(--text)}
.splith svg{width:18px;height:18px;color:var(--accent);flex:none}
.splitlist{display:grid;gap:9px}
.splitlist li{position:relative;padding-left:18px;font-size:14.5px;color:var(--text-2);line-height:1.45}
.splitlist li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.7}
.splitfoot{font-size:13.5px;color:var(--text-3);line-height:1.55;padding-top:12px;border-top:1px solid var(--hair-soft);margin-top:auto}

/* ---------- honesty panel ---------- */
.honest{display:grid;grid-template-columns:auto 1fr;gap:20px;margin-top:clamp(28px,4vw,44px);padding:clamp(22px,3vw,32px);background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg)}
.honest-ico{width:46px;height:46px;border-radius:14px;background:rgba(231,185,63,.1);border:1px solid rgba(231,185,63,.28);color:var(--review);display:grid;place-items:center;flex:none}
.honest-ico svg{width:22px;height:22px}
.honest h3{margin-bottom:10px}
.honest p{font-size:15px;color:var(--text-2);line-height:1.6;margin-bottom:10px}
.honest p:last-child{margin-bottom:0}
@media (max-width:620px){.honest{grid-template-columns:1fr}}

/* ---------- testimonials ---------- */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px);margin-top:48px}
@media (max-width:980px){.voices{grid-template-columns:1fr}}
.voice{background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;gap:16px;will-change:transform;transition:border-color .3s,box-shadow .35s cubic-bezier(.2,.7,.3,1)}
.voice.hot{border-color:rgba(79,124,255,.45);box-shadow:0 48px 80px -30px rgba(0,0,0,.98),0 0 60px -20px rgba(79,124,255,.22)}
.voice-q{font-family:var(--display);font-size:17.5px;line-height:1.42;color:var(--text);letter-spacing:-.01em;font-variation-settings:"opsz" 24,"SOFT" 28,"WONK" 0}
.voice-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--hair-soft)}
.voice-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(79,124,255,.14);border:1px solid rgba(79,124,255,.25);color:var(--accent);font-family:var(--sans);font-weight:700;font-size:13px}
.voice-n{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.006em}
.voice-r{font-size:12.5px;color:var(--text-3);line-height:1.35}

/* ---------- hero conveyor ---------- */
.flow{
  position:relative;
  margin-top:clamp(34px,5vw,64px);
  /* wider than the text column: centred on the parent whatever its width.
     96vw rather than 100vw so a scrollbar can never push the page sideways. */
  width:min(1420px, 96vw);
  margin-left:50%;
  transform:translateX(-50%);
}
.flow svg{display:block;width:100%;height:auto;overflow:visible}
.flow::after{content:"";position:absolute;inset:auto 0 -10px;height:1px;background:linear-gradient(90deg,transparent,var(--hair),transparent)}
.lanecard{animation:lane 11s linear infinite}
.lanecard.held{animation:laneHold 11s cubic-bezier(.4,0,.5,1) infinite}
@keyframes lane{
  0%{transform:translateX(0);opacity:0}
  6%{opacity:1}
  33%{transform:translateX(128px)}
  45%{transform:translateX(160px)}      /* centred under the scan beam */
  94%{transform:translateX(564px);opacity:1}
  100%{transform:translateX(590px);opacity:0}
}
@keyframes laneHold{
  0%{transform:translate(0,0);opacity:0}
  6%{opacity:1}
  33%{transform:translate(128px,0)}
  45%{transform:translate(160px,0)}
  66%{transform:translate(340px,0)}
  84%{transform:translate(398px,262px)} /* lands exactly on the tray's card */
  95%{transform:translate(398px,262px);opacity:1}
  100%{transform:translate(398px,262px);opacity:0}
}
.lanetick{animation:tickOn 11s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes tickOn{0%,38%{opacity:0;transform:scale(.3)}46%{opacity:1;transform:scale(1.2)}52%,100%{opacity:1;transform:scale(1)}}
.beam{animation:beamPulse 3.4s ease-in-out infinite}
@keyframes beamPulse{0%,100%{opacity:.16}50%{opacity:.4}}
.railpip{animation:pip 3.4s linear infinite}
@keyframes pip{0%{transform:translateX(0);opacity:0}10%{opacity:.9}90%{opacity:.9}100%{transform:translateX(120px);opacity:0}}

/* ---------- the hero robot notices you ---------- */
#heroBot{cursor:pointer}
#heroBot .armL{transform:rotate(22deg)}
#heroBot .armR{transform:rotate(-56deg)}
#heroBot .hb-body{transform-box:view-box;transform-origin:150px 338px;transition:transform .55s cubic-bezier(.2,.8,.3,1)}
#heroBot .hb-head{transform-box:view-box;transform-origin:150px 228px;transition:transform .35s cubic-bezier(.2,.8,.3,1)}
#heroBot .eyeset{transition:transform .22s cubic-bezier(.2,.8,.3,1)}
#heroBot .hb-halo{opacity:.85;transition:opacity .45s ease}

/* close enough: it looks up, the eyes soften and the right hand waves */
#heroBot.greet .hb-halo{opacity:1}
#heroBot.greet .armR{animation:hbWave .52s ease-in-out infinite alternate}
#heroBot.greet .eye-round{opacity:0}
#heroBot.greet .eye-happy{opacity:1}
#heroBot.greet .chestlight{animation-duration:.62s}
#heroBot.greet .tip{animation-duration:.85s}
@keyframes hbWave{from{transform:rotate(-96deg)}to{transform:rotate(-126deg)}}

.hb-say{opacity:0;pointer-events:none;transform-box:view-box;transform-origin:390px 207px;
  transform:translateY(5px) scale(.9);
  transition:opacity .26s ease,transform .36s cubic-bezier(.3,1.5,.5,1)}
.hb-say.on{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  #heroBot.greet .armR{animation:none;transform:rotate(-112deg)}
  #heroBot .hb-body,#heroBot .hb-head,#heroBot .eyeset{transition:none}
  .hb-say{transform:none;transition:opacity .2s ease}
}

/* the cards only exist on a phone, where the panels drawn inside the
   conveyor would be a few pixels tall */
.flow-cards{display:none}
.fc{background:var(--card);border:1px solid var(--hair-soft);border-radius:16px;padding:14px 16px}
.fc-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.fc-in .fc-k{color:var(--accent)}
.fc-out .fc-k{color:var(--ok)}
.fc-held .fc-k{color:var(--review)}
.fc-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:5px 0;font-size:14.5px}
.fc-row b{font-weight:600;color:var(--text)}
.fc-row b.warn{color:var(--review)}
.fc-row em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
.fc-big{font-family:var(--mono);font-size:27px;font-weight:500;letter-spacing:-.03em;color:var(--text);line-height:1.1;margin-bottom:4px}
.fc-big span{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:0}

/* below ~720px the drawing crops to the robot and the belt, at close to
   the size it has on a desktop, and the panels move out to the cards */
@media (max-width:720px){
  .flow{width:min(1420px,100%);margin-left:0;transform:none;margin-top:30px}
  .flow svg{overflow:hidden;border-radius:18px;background:radial-gradient(120% 90% at 50% 30%,rgba(79,124,255,.07),transparent 62%)}
  .flow .fg-panel{display:none}
  .flow::after{display:none}
  .flow-cards{display:grid;gap:10px;margin-top:14px}
}

/* ---------- legal ---------- */
.legaldoc{animation:waysin .4s cubic-bezier(.2,.7,.3,1)}
.legaldoc h3{margin-top:34px;margin-bottom:10px;font-size:clamp(18px,2vw,21px)}
.legaldoc h3:first-of-type{margin-top:10px}
.legaldoc p{font-size:16px;line-height:1.68;color:var(--text-2);margin-bottom:12px}
.legaldoc p b{color:var(--text)}
.legal-updated{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text-3)}
.legal-list{display:grid;gap:11px;margin:14px 0 4px}
.legal-list li{position:relative;padding-left:20px;font-size:16px;line-height:1.62;color:var(--text-2)}
.legal-list li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.75}
.legal-list li b{color:var(--text)}
.fillme{background:rgba(231,185,63,.13);border:1px dashed rgba(231,185,63,.45);color:var(--review);
  padding:1px 7px;border-radius:5px;font-family:var(--mono);font-size:13px;white-space:nowrap}
.subtable{margin-top:16px;border:1px solid var(--hair-soft);border-radius:14px;overflow:hidden}
.subrow{display:grid;grid-template-columns:230px 1fr;gap:16px;padding:13px 16px;border-bottom:1px solid var(--hair-soft);font-size:15px;color:var(--text-2);line-height:1.5}
.subrow:last-child{border-bottom:0}
.subrow span:first-child{color:var(--text);font-weight:600}
.subhead{background:rgba(255,255,255,.02);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.subhead span:first-child{color:var(--text-3);font-weight:400}
@media (max-width:660px){.subrow{grid-template-columns:1fr;gap:5px}.subhead{display:none}}
.legal-note{display:grid;grid-template-columns:auto 1fr;gap:20px;margin-top:46px;padding:clamp(22px,3vw,30px);
  background:var(--card);border:1px solid rgba(231,185,63,.3);border-radius:var(--r-lg)}
.legal-note p{font-size:15px;color:var(--text-2);line-height:1.6;margin:0}
@media (max-width:620px){.legal-note{grid-template-columns:1fr}}

/* ---------- integrations ---------- */
.intlist{display:grid;gap:9px;margin-top:6px;padding-top:14px;border-top:1px solid var(--hair-soft)}
.intlist li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14.5px;color:var(--text)}
.intlist li em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.02em}

/* ---------- insights ---------- */
.postcard{text-decoration:none}
.posttag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.postmeta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text-3)}
.backlink{font-size:13.5px}
.post{margin-top:28px}
.post p{font-size:17px;line-height:1.72;color:var(--text-2);margin-bottom:18px}
.post p b{color:var(--text)}
.post h3{margin-top:38px;margin-bottom:12px;font-size:clamp(19px,2.2vw,23px)}
.postlede{font-size:19px !important;line-height:1.6 !important;color:var(--text) !important;
  padding-left:18px;border-left:2px solid var(--accent)}
.pullquote{font-family:var(--display);font-size:clamp(21px,2.8vw,28px) !important;font-weight:700;
  line-height:1.3 !important;letter-spacing:-.02em;color:var(--text) !important;text-align:center;
  margin:32px 0 !important;font-variation-settings:"opsz" 40,"SOFT" 30,"WONK" 1}
.postcta{margin-top:44px;padding-top:28px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;
  gap:18px;align-items:center;justify-content:space-between}
.postcta p{font-size:15px;color:var(--text-2);max-width:46ch;line-height:1.55}

/* ---------- client portal preview ---------- */
.pvwrap{margin-top:clamp(28px,4vw,44px);position:relative}
.pvapp{
  display:grid;grid-template-columns:212px 1fr;
  background:var(--surface);border:1px solid var(--hair);border-radius:20px;
  overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  font-family:var(--sans);
}
@media (max-width:860px){.pvapp{grid-template-columns:1fr}.pvside{display:none}}

.pvside{background:var(--black);border-right:1px solid var(--hair-soft);padding:14px 12px;display:flex;flex-direction:column;gap:4px}
.pvbrand{display:flex;align-items:center;gap:9px;padding:6px 8px 12px}
.pvbrand .logo-mark{width:22px;height:22px;border-radius:6px}
.pvbrand .logo-mark svg{width:13px;height:13px}
.pvbrand b{font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:-.03em}
.pvent{
  display:flex;align-items:center;gap:9px;padding:9px 10px;margin-bottom:10px;
  background:var(--card);border:1px solid var(--hair-soft);border-radius:10px;
}
.pvent i{width:24px;height:24px;border-radius:7px;flex:none;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:11px;font-style:normal}
.pvent span{display:block;font-size:11.5px;font-weight:700;color:var(--text);line-height:1.2}
.pvent em{display:block;font-style:normal;font-family:var(--mono);font-size:9px;color:var(--text-3);letter-spacing:.06em}
.pvsec{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:12px 10px 5px}
.pvnav{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:12.5px;color:var(--text-2);line-height:1}
.pvnav svg{width:14px;height:14px;flex:none;opacity:.8}
.pvnav.on{background:var(--card-2);color:var(--text);font-weight:600}
.pvnav.on svg{color:var(--accent);opacity:1}
.pvbadge{margin-left:auto;font-family:var(--mono);font-size:9px;background:rgba(231,185,63,.16);color:var(--review);
  border:1px solid rgba(231,185,63,.3);padding:1px 6px;border-radius:20px}

.pvmain{padding:clamp(14px,2vw,22px);display:flex;flex-direction:column;gap:14px;min-width:0}
.pvbar{display:flex;align-items:center;gap:10px}
.pvpill{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(79,124,255,.12);color:var(--accent);border:1px solid rgba(79,124,255,.28);
  padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:6px}
.pvpill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.pvhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pvhead h3{font-family:var(--display);font-size:clamp(19px,2.2vw,24px);font-weight:700;letter-spacing:-.025em;color:var(--text)}
.pvhead p{font-size:12.5px;color:var(--text-3);margin-top:5px;line-height:1.45;max-width:46ch}
.pvacts{display:flex;gap:8px;flex-wrap:wrap}
.pvbtn{font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:20px;border:1px solid var(--hair);
  color:var(--text-2);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.pvbtn svg{width:12px;height:12px}
.pvbtn.p{background:var(--accent);color:var(--accent-ink);border-color:transparent}

.pvtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:760px){.pvtiles{grid-template-columns:repeat(2,1fr)}}
.pvtile{background:var(--card);border:1px solid var(--hair-soft);border-radius:13px;padding:13px 14px;min-width:0}
.pvtile .k{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--text-3)}
.pvtile .v{display:block;font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,25px);letter-spacing:-.03em;color:var(--text);margin-top:7px;line-height:1}
.pvtile .s{display:block;font-size:10.5px;color:var(--text-3);margin-top:6px;font-family:var(--mono)}
.pvdot{width:6px;height:6px;border-radius:50%;flex:none}

.pvsplit{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
@media (max-width:860px){.pvsplit{grid-template-columns:1fr}}
.pvcard{background:var(--card);border:1px solid var(--hair-soft);border-radius:13px;padding:14px 16px;min-width:0}
.pvcard .ch{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--text-2);font-weight:600}
.pvcard .ch em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--text-3)}
.pvbig{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.03em;color:var(--text);margin:10px 0 2px}
.pvchart{display:flex;align-items:flex-end;gap:3px;height:96px;margin-top:12px}
.pvchart i{flex:1;background:linear-gradient(180deg,var(--accent),rgba(79,124,255,.35));border-radius:3px 3px 0 0;min-width:0}
.pvaxis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--text-3);margin-top:7px}

.pvcheck{display:grid;gap:9px;margin-top:12px}
.pvprog{height:4px;border-radius:4px;background:var(--hair);overflow:hidden;margin-top:10px}
.pvprog i{display:block;height:100%;width:60%;background:var(--accent);border-radius:4px}
.pvrow{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-2)}
.pvrow .tick{width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--hair);color:var(--text-3)}
.pvrow.done .tick{background:var(--ok);border-color:transparent;color:#04140A}
.pvrow.done{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--hair)}
.pvrow .tick svg{width:9px;height:9px;stroke-width:3}

.pvfade{position:relative}
.pvfade::after{content:"";position:absolute;inset:auto 0 0;height:90px;
  background:linear-gradient(180deg,transparent,var(--surface));pointer-events:none}
.pvactivity{display:grid;gap:8px;margin-top:2px}
.pvact{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;
  background:var(--card);border:1px solid var(--hair-soft);border-radius:11px;padding:10px 13px;font-size:12px;color:var(--text-2)}
.pvact .r{font-family:var(--mono);font-size:10.5px;color:var(--text-3);white-space:nowrap}
@media (max-width:620px){.pvact{grid-template-columns:auto 1fr;gap:8px}.pvact .r{display:none}}

.pvnote{margin-top:16px;font-size:13.5px;color:var(--text-3);line-height:1.6;max-width:70ch}

/* ---------- ways in ---------- */
.waysblurb{text-align:center;margin-top:20px;color:var(--text-3);font-size:14px}
.wayspanel{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,3.4vw,44px);
  margin-top:30px;padding:clamp(26px,3.4vw,40px);
  background:linear-gradient(165deg,var(--card-2),var(--card) 62%);
  border:1px solid var(--hair);border-radius:var(--r-lg);
  animation:waysin .45s cubic-bezier(.2,.7,.3,1);
}
@keyframes waysin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:820px){.wayspanel{grid-template-columns:1fr;gap:24px}}
.ways-line{
  font-family:var(--display);font-size:clamp(21px,2.7vw,31px);font-weight:700;
  line-height:1.24;letter-spacing:-.02em;color:var(--text);text-wrap:balance;
  font-variation-settings:"opsz" 48,"SOFT" 30,"WONK" 1;
}
.ways-body{margin-top:16px;font-size:16px;line-height:1.6;color:var(--text-2);max-width:52ch}
.ways-side{display:flex;flex-direction:column;gap:16px;border-left:1px solid var(--hair);padding-left:clamp(20px,2.4vw,30px)}
@media (max-width:820px){.ways-side{border-left:0;border-top:1px solid var(--hair);padding-left:0;padding-top:22px}}
.ways-k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.ways-v{font-size:15.5px;line-height:1.55;color:var(--text);margin-top:6px}
.ways-note{font-size:14px;line-height:1.55;color:var(--text-3)}

/* ---------- two rooms ---------- */
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);margin-top:48px;position:relative}
@media (max-width:760px){.rooms{grid-template-columns:1fr}}
.room{background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--r-lg);padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column;gap:14px}
.room-who{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.room-who span{width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.room.a .room-who span{background:var(--accent)}
.room.b .room-who span{background:var(--review)}
.room-q{font-family:var(--display);font-size:clamp(17px,1.9vw,20px);line-height:1.4;color:var(--text);letter-spacing:-.012em;font-variation-settings:"opsz" 26,"SOFT" 28,"WONK" 0}
.room-p{font-size:14.5px;color:var(--text-3);line-height:1.55}
.join{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:0}
.joinline{width:1px;height:46px;background:linear-gradient(180deg,var(--hair),var(--accent))}
.resolve{background:linear-gradient(170deg,rgba(79,124,255,.1),var(--card) 62%);border:1px solid rgba(79,124,255,.3);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);text-align:center;max-width:720px;margin-inline:auto}
.resolve h3{margin-bottom:10px}
.resolve p{font-size:15.5px;color:var(--text-2);line-height:1.6;max-width:56ch;margin-inline:auto}

/* ---------- layer stack ---------- */
.stack{display:grid;gap:12px;margin-top:48px}
.band{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.4vw,32px);align-items:center;
  background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px) clamp(20px,2.8vw,32px);
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  will-change:transform;transition:border-color .3s,box-shadow .35s cubic-bezier(.2,.7,.3,1),background .3s;
}
.band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.35;transition:opacity .3s}
.band.hot{border-color:rgba(79,124,255,.45);background:var(--card-2);box-shadow:0 44px 76px -32px rgba(0,0,0,.98),0 0 60px -22px rgba(79,124,255,.22)}
.band.hot::before{opacity:1}
.band-n{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--accent);align-self:flex-start;padding-top:2px;font-variation-settings:"opsz" 40,"SOFT" 30,"WONK" 0;opacity:.9}
.band-t{display:flex;flex-direction:column;gap:9px}
.band-t h3{font-size:clamp(20px,2.3vw,26px)}
.band-t p{font-size:15px;color:var(--text-2);line-height:1.55;max-width:56ch}
.band-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.band-chips span{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;padding:5px 9px;border-radius:6px;background:var(--surface);border:1px solid var(--hair-soft);color:var(--text-3)}
.band-go{width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;color:var(--text-2);flex:none;transition:all .3s}
.band-go svg{width:16px;height:16px}
.band.hot .band-go{background:var(--accent);color:var(--accent-ink);border-color:transparent}
@media (max-width:760px){
  .band{grid-template-columns:auto 1fr;gap:14px}
  .band-go{display:none}
}

/* ---------- demo band ---------- */
.demoband{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,34px);align-items:center;
  background:linear-gradient(120deg,rgba(79,124,255,.11),var(--card) 55%);
  border:1px solid rgba(79,124,255,.28);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);text-decoration:none;color:inherit;
  transition:border-color .3s,box-shadow .35s cubic-bezier(.2,.7,.3,1);
}
.demoband:hover{border-color:var(--accent);box-shadow:0 44px 76px -32px rgba(0,0,0,.98),0 0 70px -24px rgba(79,124,255,.3)}
.playbig{width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none;position:relative;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.demoband:hover .playbig{transform:scale(1.08)}
.playbig svg{width:24px;height:24px;margin-left:3px}
.playbig::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent);opacity:.4;animation:ringpulse 2.4s ease-out infinite}
@keyframes ringpulse{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.25);opacity:0}}
.demoband h3{font-size:clamp(20px,2.4vw,27px);margin-bottom:8px}
.demoband p{font-size:15px;color:var(--text-2);line-height:1.5}
.demosteps{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.demosteps span{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.demosteps span::after{content:"→";margin-left:6px;opacity:.5}
.demosteps span:last-child::after{content:""}
.demotime{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
@media (max-width:820px){.demoband{grid-template-columns:auto 1fr}.demotime{display:none}}

/* ---------- control list ---------- */
.ctrls{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:48px;background:var(--hair-soft);border:1px solid var(--hair-soft);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:760px){.ctrls{grid-template-columns:1fr}}
.ctrl.wide{grid-column:1/-1}
.ctrl{background:var(--surface);padding:22px clamp(18px,2.4vw,26px);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;transition:background .25s}
.ctrl:hover{background:var(--card)}
.ctrl svg{width:19px;height:19px;color:var(--accent);margin-top:3px;flex:none}
.ctrl h3{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.008em;margin-bottom:5px;color:var(--text)}
.ctrl p{font-size:14px;color:var(--text-3);line-height:1.5}

/* ---------- timeline ---------- */
.tline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);margin-top:56px}
.tline::before{content:"";position:absolute;left:6%;right:6%;top:13px;height:1px;background:linear-gradient(90deg,var(--accent),var(--hair) 70%)}
@media (max-width:820px){
  .tline{grid-template-columns:1fr;gap:26px}
  .tline::before{left:13px;right:auto;top:6px;bottom:6px;width:1px;height:auto;background:linear-gradient(180deg,var(--accent),var(--hair) 80%)}
}
.tnode{display:flex;flex-direction:column;gap:11px;position:relative}
@media (max-width:820px){.tnode{padding-left:40px}}
.tdot{width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--hair);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.01em;color:var(--text-2);position:relative;z-index:1}
.tnode:first-child .tdot{background:var(--accent);color:var(--accent-ink);border-color:transparent}
@media (max-width:820px){.tdot{position:absolute;left:0;top:0}}
.tnode h3{font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.tnode p{font-size:14px;color:var(--text-3);line-height:1.5}
.twhen{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:auto;padding-top:8px}

/* a job moving through the pipeline: the token travels stage to stage and
   lights each one as it lands. Positions are measured in JS, so it stays
   aligned at any width and flips to the vertical rail on phones. */
.ttoken{
  position:absolute;left:0;top:0;width:38px;height:38px;
  margin:-19px 0 0 -19px;z-index:3;pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.8));
  transition:transform .85s cubic-bezier(.5,0,.15,1),opacity .35s ease;
}
.ttoken svg{width:100%;height:100%;display:block}
/* while it is following the cursor it should feel responsive, not stately */
.ttoken.follow{transition-duration:.3s;transition-timing-function:cubic-bezier(.2,.8,.3,1)}
.ttoken .tb-eye{animation:tbBlink 4.2s infinite}
@keyframes tbBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.tdot{transition:background .45s ease,color .45s ease,border-color .45s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.tnode.lit .tdot{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.tnode.here .tdot{transform:scale(1.14)}
.tnode h3{transition:color .45s ease}
.tnode.here h4{color:var(--accent)}
@media (prefers-reduced-motion: reduce){
  .ttoken{display:none}
  .tnode .tdot{background:var(--accent);color:var(--accent-ink);border-color:transparent}
}

@media (prefers-reduced-motion: reduce){
  .lanecard,.lanecard.held,.lanetick,.beam,.railpip,.playbig::after{animation:none!important}
  .lanecard{transform:translateX(300px)}
  .lanetick{opacity:1;transform:none}
}

/* ---------- chat ---------- */
.chat-fab{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:100;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(145deg,var(--accent),var(--accent-deep));color:var(--accent-ink);
  display:grid;place-items:center;
  box-shadow:0 12px 34px -8px rgba(79,124,255,.5),0 4px 12px rgba(0,0,0,.6);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.chat-fab:hover{transform:scale(1.07)}
.chat-fab svg{width:25px;height:25px;stroke-width:1.7}
.chat-dot{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:var(--exception);border:2px solid #000;display:none}
.chat-fab.unread .chat-dot{display:block}

.nudge{
  position:fixed;right:20px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:100;
  max-width:290px;background:var(--card-2);border:1px solid var(--hair);
  border-radius:18px 18px 4px 18px;padding:15px 17px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.95);
  font-size:14.5px;color:var(--text);line-height:1.45;
  opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.3,1);
  cursor:pointer;
}
.nudge.show{opacity:1;transform:none;pointer-events:auto}
.nudge-x{position:absolute;top:6px;right:8px;background:transparent;border:0;color:var(--text-3);cursor:pointer;font-size:16px;line-height:1;padding:4px}

.chat{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:101;
  width:min(370px,calc(100vw - 40px));height:min(560px,calc(100vh - 110px));
  background:var(--surface);border:1px solid var(--hair);border-radius:22px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1);
}
.chat.open{opacity:1;transform:none;pointer-events:auto}
.chat-head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--hair-soft);background:rgba(255,255,255,.02)}
.chat-ava{width:36px;height:36px;border-radius:11px;flex:none;background:linear-gradient(145deg,var(--accent),var(--accent-deep));color:var(--accent-ink);display:grid;place-items:center}
.chat-ava svg{width:19px;height:19px;stroke-width:1.8}
.chat-who{font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.chat-status{font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:5px}
.chat-status .pulse{width:6px;height:6px}
.chat-x{margin-left:auto;background:transparent;border:0;color:var(--text-3);cursor:pointer;padding:6px;border-radius:8px}
.chat-x:hover{color:var(--text);background:rgba(255,255,255,.06)}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.msg{max-width:84%;padding:11px 14px;border-radius:17px;font-size:14.5px;line-height:1.45;animation:pop .32s cubic-bezier(.2,.7,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(7px) scale(.97)}to{opacity:1;transform:none}}
.msg.bot{align-self:flex-start;background:var(--card-2);color:var(--text);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:5px;font-weight:500}
.msg a{color:var(--accent);text-decoration:underline}
.msg.me a{color:var(--accent-ink)}
.typing{align-self:flex-start;background:var(--card-2);padding:13px 16px;border-radius:17px;border-bottom-left-radius:5px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.bk{align-self:stretch;max-width:100%;background:var(--card-2);border:1px solid var(--hair);border-radius:17px;border-bottom-left-radius:5px;padding:14px;animation:pop .32s cubic-bezier(.2,.7,.3,1)}
.bk-t{font-size:13.5px;font-weight:600;letter-spacing:-.015em;margin-bottom:3px}
.bk-s{font-size:11.5px;color:var(--text-3);line-height:1.5;margin:0 0 12px}
.bk-f{display:flex;flex-direction:column;gap:8px}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk input,.bk select,.bk textarea{width:100%;background:var(--surface);border:1px solid var(--hair);border-radius:11px;padding:9px 11px;color:var(--text);font-family:var(--sans);font-size:13.5px;line-height:1.4;color-scheme:dark}
.bk textarea{resize:vertical;min-height:56px}
.bk input:focus,.bk select:focus,.bk textarea:focus{outline:none;border-color:var(--accent)}
.bk input::placeholder,.bk textarea::placeholder{color:var(--text-3)}
.bk-go{margin-top:3px;width:100%;border:0;border-radius:11px;padding:11px;background:var(--accent);color:var(--accent-ink);font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:transform .18s ease}
.bk-go:hover{transform:translateY(-1px)}
.bk-go[disabled]{opacity:.55;cursor:default;transform:none}
.bk-note{font-size:11px;color:var(--text-3);line-height:1.5;margin:8px 0 0}
.bk-note.bad{color:var(--exception)}
.bk-sent{font-size:13px;line-height:1.5}
.bk-pre{font-family:var(--mono);font-size:11px;line-height:1.55;white-space:pre-wrap;color:var(--text-2);background:var(--surface);border:1px solid var(--hair);border-radius:11px;padding:10px;margin:10px 0 0;max-height:150px;overflow:auto}
/* the spam trap. Not display:none — plenty of bots skip hidden fields, but
   they do fill one that is merely parked off-screen. Out of the tab order
   and hidden from screen readers, so nobody real ever meets it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chat-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.chip-q{font-size:12.5px;padding:7px 12px;border-radius:980px;border:1px solid var(--hair);background:transparent;color:var(--accent);cursor:pointer;transition:all .18s ease}
.chip-q:hover{background:rgba(79,124,255,.1);border-color:var(--accent)}
.chat-foot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--hair-soft);background:rgba(255,255,255,.02)}
.chat-foot input{flex:1;background:var(--card-2);border:1px solid var(--hair);border-radius:980px;padding:11px 15px;color:var(--text);font-family:var(--sans);font-size:14.5px}
.chat-foot input:focus{outline:none;border-color:var(--accent)}
.chat-send{width:40px;height:40px;flex:none;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;display:grid;place-items:center;transition:transform .2s}
.chat-send:hover{transform:scale(1.07)}
.chat-send svg{width:18px;height:18px;stroke-width:2}
@media (max-width:480px){
  .chat{right:10px;left:10px;width:auto;height:min(540px,calc(100vh - 100px))}
  .nudge{right:14px;max-width:calc(100vw - 90px)}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .card.hot,.plan.hot,.person.hot{transform:none}
}