/* ===== datavation.ai — the orange room. One token set, zero stray hex. ===== */
  :root{
    --navy:#152879; --navy-deep:#0E2841; --ink:#141518; --body:#3A3F4A; --grey:#6B6B70;
    --orange:#EC751A; --orange-display:#C95E0F; --orange-text:#AD500C;
    --cream:#FFF7EE; --cream-2:#FBEFE0; --card:#FFFFFF; --border:#F0E3D3; --border-2:#D9CBB8;
    --green:#2F9E54; --teal:#1F6F78; --good:#1F4F37; --good-bg:#EAF2ED; --good-br:#CFE2D8;
    --on-navy:#C7D0E0; --on-navy-mute:#9FB2CC; --on-navy-lead:#F0A163;
    --on-orange:var(--ink); --on-orange-mute:#3A1C04; --on-dark:#FFFFFF;
    --hair:rgba(255,255,255,.12); --veil:rgba(255,255,255,.05);
    --grot:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
    --sans:'IBM Plex Sans',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
    --r:22px; --r-sm:14px;
    --shadow:0 12px 34px rgba(180,110,40,.16);
    --shadow-sm:0 6px 18px rgba(180,110,40,.10);
    --ease:cubic-bezier(.22,.8,.36,1);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{max-width:1060px;margin:0 auto;padding:0 5vw}
  h1,h2,h3,h4{margin:0;font-family:var(--grot);font-weight:800;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
  p{margin:0}
  a{color:inherit;text-decoration:none}
  b,strong{font-weight:600;color:var(--ink)}
  button{font:inherit}
  :focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-text)}
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  @keyframes fadein{to{opacity:1}}
  @keyframes spin{to{transform:rotate(360deg)}}

  header.site{position:sticky;top:0;z-index:50;background:rgba(255,247,238,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
  .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;max-width:1240px}
  .wm{display:flex;align-items:center;gap:10px;font-family:var(--grot);font-weight:800;font-size:22px;letter-spacing:-.03em;cursor:pointer}
  .wm svg{width:29px;height:29px;color:var(--orange);flex:none}
  .wm .w1{color:var(--navy)} .wm .w2,.wm .suf{color:var(--orange-text)}
  nav.nv{display:flex;gap:19px;align-items:center;font-family:var(--grot);font-weight:600;font-size:14px;color:var(--body)}
  nav.nv a{position:relative;cursor:pointer;padding:3px 0;white-space:nowrap}
  nav.nv a.on{color:var(--orange-text)}
  nav.nv a:not(.cta)::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--orange);transition:width .3s var(--ease)}
  nav.nv a:not(.cta):hover::after{width:100%}
  nav.nv .cta{background:var(--orange);color:var(--on-orange);padding:9px 17px;border-radius:999px;font-weight:800;transition:transform .25s var(--ease)}
  nav.nv .cta:hover{transform:translateY(-2px)}
  @media(max-width:1180px){nav.nv .lnk{display:none}}
  /* ===== v4 · burger menu (phones and small tablets) ===== */
  .burger{display:none;flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--border-2);background:var(--card);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
  .burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media(max-width:1180px){.burger{display:inline-flex}nav.nv{gap:10px}}
  @media(max-width:480px){.bar{gap:10px}nav.nv .cta{padding:8px 12px;font-size:12.5px}.wm{font-size:19px;gap:7px}.wm svg{width:24px;height:24px}}
  @media(max-width:350px){nav.nv .cta{display:none}}
  .mnav{border-top:1px solid var(--border);background:var(--cream);max-height:calc(100vh - 80px);overflow-y:auto}
  .mnav a{display:flex;justify-content:space-between;align-items:center;padding:15px 5vw;font-family:var(--grot);font-weight:700;font-size:17px;color:var(--ink);border-bottom:1px solid var(--border);cursor:pointer}
  .mnav a::after{content:"\2192";color:var(--orange-text)}
  .mnav a.on{color:var(--orange-text)}
  @media(min-width:1181px){.mnav{display:none!important}}
  @media(max-width:1300px){nav.nv{gap:15px}nav.nv .lnk[data-route="contact"]{display:none}}

  .view{display:none} .view.active{display:block;animation:fadein .4s ease}

  .hero{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;padding:54px 0 40px}
  .hero h1{font-size:clamp(42px,6.6vw,72px);margin:18px 0 0;color:var(--ink)}
  .hero h1 em{font-style:normal;color:var(--orange-display)}
  .hero .lede{font-family:var(--grot);font-weight:500;font-size:18.5px;color:var(--body);margin:22px 0 0;max-width:48ch;line-height:1.5}
  .acts{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
  .btn{font-family:var(--grot);font-weight:800;font-size:15px;padding:13px 24px;border-radius:999px;background:var(--orange);color:var(--on-orange);cursor:pointer;border:none;display:inline-block;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--border);font-weight:700}
  .btn.navy{background:var(--navy-deep);color:var(--on-dark)}
  @media(max-width:860px){.hero{grid-template-columns:1fr}}

  /* ===== the desk widget ===== */
  .ivy{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
  .ivy .top{background:var(--navy-deep);color:var(--on-dark);padding:14px 18px;display:flex;align-items:center;gap:10px}
  .ivy .top .dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
  .ivy .top b{font-family:var(--grot);font-size:15px;color:var(--on-dark)}
  .ivy .top span{font-family:var(--mono);font-size:10.5px;color:var(--on-navy-mute);margin-left:auto}
  .ivy .body{padding:20px;min-height:268px}
  .ivy .say{font-family:var(--grot);font-weight:600;font-size:15.5px;color:var(--ink);margin:0 0 14px}
  .ivy .opts{display:flex;flex-wrap:wrap;gap:8px}
  .ivy .opts button{font-family:var(--grot);font-weight:600;font-size:13px;padding:8px 13px;border-radius:999px;background:var(--cream);border:1px solid var(--border);color:var(--ink);cursor:pointer;transition:.2s;text-align:left}
  .ivy .opts button:hover{border-color:var(--orange);color:var(--orange-text)}
  .ivy .opts button.q{font-size:13.5px;border-radius:12px;line-height:1.35;padding:10px 14px;width:100%}
  .ivy .back{font-family:var(--mono);font-size:11px;color:var(--grey);cursor:pointer;margin-bottom:12px;display:inline-block}
  .ivy .back:hover{color:var(--orange-text)}
  .crew{display:flex;flex-direction:column;gap:8px;margin:2px 0 14px}
  .crewman{display:flex;align-items:center;gap:11px;background:var(--cream);border-radius:12px;padding:11px 13px}
  .crewman .av{width:36px;height:36px;border-radius:50%;background:var(--navy-deep);color:var(--on-dark);display:flex;align-items:center;justify-content:center;font-family:var(--grot);font-weight:800;font-size:15px;flex:none}
  .crewman .nm{font-family:var(--grot);font-weight:800;font-size:15.5px}
  .crewman .rl{font-family:var(--mono);font-size:10.5px;color:var(--grey)}
  .ivy .verdict{font-size:14px;color:var(--body);margin:0 0 14px;line-height:1.55}
  .ivy .verdict b{color:var(--ink)}
  .ivy .plain{font-family:var(--mono);font-size:11px;color:var(--grey);margin-top:10px;display:block}

  section.blk{padding:48px 0}
  .sec-h{font-size:clamp(26px,3.6vw,38px);color:var(--ink);margin:12px 0 0}
  .sec-h em{font-style:normal;color:var(--orange-display)}
  .sec-intro{color:var(--body);font-size:17.5px;max-width:64ch;margin:14px 0 0}

  .problem{background:var(--navy-deep);color:var(--on-dark);border-radius:var(--r);padding:38px;box-shadow:var(--shadow);margin-top:8px}
  .problem .eyebrow{color:var(--on-navy-lead)}
  .problem h2{color:var(--on-dark);font-size:clamp(24px,3.4vw,34px);margin:10px 0 0}
  .problem p{color:var(--on-navy);font-size:16px;margin:14px 0 0;max-width:70ch}
  .problem b{color:var(--on-dark)}

  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .card .k{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--orange-text)}
  .card h3{font-size:19px;margin:9px 0 8px}
  .card p{color:var(--body);font-size:14.5px;margin:0;line-height:1.55}
  @media(max-width:820px){.cards{grid-template-columns:1fr}}

  .states{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
  .state{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm);border-top:4px solid var(--grey)}
  .state.stretched{border-top-color:var(--orange)} .state.missing{border-top-color:var(--navy)}
  .state .k{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey)}
  .state.stretched .k{color:var(--orange-text)} .state.missing .k{color:var(--navy)}
  .state h3{font-size:20px;margin:8px 0 8px}
  .state p{color:var(--body);font-size:14.5px;margin:0;line-height:1.55}
  .state p + p{margin-top:10px}
  @media(max-width:820px){.states{grid-template-columns:1fr}}

  /* ===== the desk ===== */
  .desk{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
  .person{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm);display:flex;gap:18px;align-items:flex-start}
  .person .av{width:58px;height:58px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--grot);font-weight:800;font-size:22px;background:var(--navy-deep);color:var(--on-dark)}
  .person.human .av{background:var(--orange);color:var(--on-orange)}
  .person .nm{font-family:var(--grot);font-weight:800;font-size:20px}
  .person .rl{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--orange-text);margin-top:3px}
  .person p{color:var(--body);font-size:14.5px;margin-top:10px;line-height:1.55}
  @media(max-width:720px){.desk{grid-template-columns:1fr}}
  .firsts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
  .first{background:var(--cream-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:18px}
  .first .nm{font-family:var(--grot);font-weight:800;font-size:16.5px}
  .first .rl{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--grey);margin-top:2px}
  .first p{font-size:13.5px;color:var(--body);margin-top:8px;line-height:1.45}
  @media(max-width:720px){.firsts{grid-template-columns:1fr}}

  /* ===== the bench ===== */
  .bench{background:var(--navy-deep);border-radius:var(--r);padding:34px;box-shadow:var(--shadow);margin-top:24px}
  .bench .eyebrow{color:var(--on-navy-lead)}
  .bench h2{color:var(--on-dark);font-size:clamp(23px,3.2vw,32px);margin:8px 0 0}
  .bench .sub{color:var(--on-navy);font-size:15px;margin:12px 0 0;max-width:66ch}
  .bench .sub b{color:var(--on-dark)}
  .seats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
  .seat{background:var(--veil);border:1px solid var(--hair);border-radius:var(--r-sm);padding:15px}
  .seat .nm{font-family:var(--grot);font-weight:800;font-size:17px;color:var(--on-dark)}
  .seat .rl{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--on-navy-mute);margin-top:2px}
  .seat .ln{font-size:12.5px;color:var(--on-navy);margin-top:8px;line-height:1.4}
  .seat.you{background:var(--orange);border-color:var(--orange);grid-column:span 2;display:flex;flex-direction:column;justify-content:center}
  .seat.you .nm{color:var(--on-orange);font-size:20px} .seat.you .rl,.seat.you .ln{color:var(--on-orange-mute)}
  .seat.spec{background:transparent;border:1px dashed var(--on-navy-mute)}
  .seat.spec .nm{font-size:15px} .seat.spec a{color:var(--on-navy-lead);border-bottom:1px solid var(--on-navy-lead);cursor:pointer}
  @media(max-width:820px){.seats{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:480px){.seats{grid-template-columns:1fr}.seat.you{grid-column:span 1}}

  .proofband{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:32px;box-shadow:var(--shadow-sm);margin-top:24px}
  .proofband h2{font-size:clamp(22px,3vw,30px);margin:10px 0 0}
  .proofband p{color:var(--body);font-size:15.5px;margin:14px 0 0;max-width:72ch;line-height:1.6}
  .plch{font-family:var(--mono);font-size:10.5px;color:var(--grey);border:1px dashed var(--border-2);border-radius:6px;padding:3px 9px;display:inline-block;margin-top:14px}
  .bridge{margin-top:24px;background:var(--cream-2);border:1px solid var(--border);border-left:4px solid var(--navy);border-radius:var(--r);padding:28px 32px}
  .bridge h3{font-size:21px;margin:8px 0 0}
  .bridge p{color:var(--body);font-size:15.5px;margin:12px 0 0;max-width:70ch;line-height:1.6}
  .bridge .eyebrow{color:var(--navy)}
  .bridge a.go{display:inline-block;margin-top:14px;font-family:var(--grot);font-weight:700;font-size:14px;color:var(--navy);border-bottom:2px solid var(--navy)}

  /* ===== areas page ===== */
  .areagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
  .areacard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
  .areacard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--orange)}
  .areacard .n{font-family:var(--mono);font-size:10.5px;color:var(--orange-text);letter-spacing:.08em;text-transform:uppercase}
  .areacard h3{font-size:19px;margin:8px 0 8px}
  .areacard p{font-size:14px;color:var(--body);line-height:1.5}
  .areacard .go{display:block;margin-top:12px;font-family:var(--grot);font-weight:700;font-size:13px;color:var(--orange-text)}
  .areacard.other{background:var(--cream-2);border-style:dashed}
  @media(max-width:820px){.areagrid{grid-template-columns:1fr}}

  .qlist{margin-top:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
  .q{display:grid;grid-template-columns:1fr 1fr 132px;gap:18px;padding:16px 20px;border-bottom:1px solid var(--border);align-items:start}
  .q:last-child{border-bottom:0}
  .q .said{font-family:var(--grot);font-weight:600;font-size:15px;color:var(--ink);line-height:1.4}
  .q .means{font-size:14px;color:var(--body);line-height:1.5}
  .q .tags{display:flex;flex-wrap:wrap;gap:5px}
  .tg{font-family:var(--mono);font-size:10px;padding:3px 7px;border-radius:5px;white-space:nowrap;background:var(--cream-2);color:var(--on-orange-mute)}
  .tg.crew{background:var(--navy);color:var(--on-dark)}
  .tg.one{background:var(--good-bg);color:var(--good)}
  .tg.rex{background:var(--orange);color:var(--on-orange)}
  @media(max-width:760px){.q{grid-template-columns:1fr;gap:8px}}

  /* ===== ladder ===== */
  .ladder{display:grid;gap:12px;margin-top:24px}
  .rung{background:var(--card);border:1px solid var(--border);border-left:5px solid var(--orange);border-radius:var(--r);padding:22px 26px;display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:start}
  .rung .rec{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
  .rung h4{font-size:21px;margin-top:5px}
  .rung .price{font-family:var(--mono);font-size:11.5px;color:var(--orange-text);margin-top:5px}
  .rung p{font-size:15px;color:var(--body)}
  @media(max-width:680px){.rung{grid-template-columns:1fr;gap:10px}}

  .ctaband{margin-top:40px;background:var(--orange);color:var(--on-orange);border-radius:var(--r);padding:48px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .ctaband h2{font-size:clamp(26px,3.6vw,40px);color:var(--on-orange);position:relative;z-index:1}
  .ctaband p{color:var(--on-orange-mute);margin:14px auto 0;max-width:48ch;position:relative;z-index:1}
  .ctaband .acts{justify-content:center;position:relative;z-index:1}
  .ctaband .btn{background:var(--navy-deep);color:var(--on-dark)}
  .ctaband .btn.ghost{background:transparent;color:var(--on-orange);border:2px solid rgba(20,21,24,.28)}
  .ctaband .gm{position:absolute;left:-40px;top:50%;transform:translateY(-50%);width:200px;height:200px;color:var(--on-dark);opacity:.14;pointer-events:none}

  .sp-hero{padding:44px 0 12px}
  .sp-back{font-family:var(--mono);font-size:12px;color:var(--orange-text);cursor:pointer}
  .sp-hero h1{font-size:clamp(32px,4.6vw,50px);margin:16px 0 0}
  .sp-hero h1 em{font-style:normal;color:var(--orange-display)}
  .sp-hero .lede{font-size:18px;color:var(--body);max-width:58ch;margin:18px 0 0;font-family:var(--grot);font-weight:500}
  .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
  .st3{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm)}
  .st3 .n{font-family:var(--mono);font-size:11px;color:var(--orange-text)}
  .st3 h4{font-size:18px;margin:8px 0 8px}
  .st3 p{font-size:14px;color:var(--body);margin:0;line-height:1.55}
  @media(max-width:820px){.steps3{grid-template-columns:1fr}}
  .balance-line{font-family:var(--grot);font-weight:800;font-size:22px;color:var(--orange-display);margin-top:20px;max-width:30ch;line-height:1.2}

  .contact{margin-top:26px;max-width:560px}
  .cbox{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;border-top:4px solid var(--orange)}
  .cbox .k{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--orange-text)}
  .cbox h3{font-size:20px;margin:8px 0 8px}
  .cbox p{color:var(--body);font-size:14.5px;line-height:1.55;margin:0 0 16px}
  .cbox .act{margin-top:auto}
  .cbox .val{font-family:var(--mono);font-size:17px;color:var(--ink);word-break:break-word}
  .cbox a.val{border-bottom:2px solid var(--orange)}
  .noform{background:var(--cream-2);border:1px solid var(--border);border-left:4px solid var(--navy);border-radius:var(--r);padding:26px 30px;margin-top:24px}
  .noform h3{font-size:20px} .noform p{color:var(--body);font-size:15.5px;margin-top:12px;max-width:70ch;line-height:1.6}
  .legal{max-width:70ch;margin-top:26px}
  .legal h2{font-size:22px;margin:30px 0 0;color:var(--ink)}
  .legal h2:first-child{margin-top:0}
  .legal p{color:var(--body);font-size:16px;margin-top:12px;line-height:1.65}
  .legal ul{margin:12px 0 0;padding-left:20px;color:var(--body)}
  .legal li{font-size:16px;margin-bottom:8px;line-height:1.6}
  .legal .tbc{font-family:var(--mono);font-size:11px;color:var(--grey);border:1px dashed var(--border-2);border-radius:6px;padding:2px 8px;display:inline-block}
  .legal .updated{font-family:var(--mono);font-size:11.5px;color:var(--grey);margin-top:26px;padding-top:16px;border-top:1px solid var(--border)}
  footer.ft{padding:32px 0 60px;margin-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--grey);font-size:13px}
  footer.ft .wm{font-size:18px} footer.ft .wm svg{width:22px;height:22px}
  footer.ft a{color:var(--orange-text);border-bottom:1px solid var(--orange-text)}

  /* ===== v4 · how the work flows ===== */
  :root{ --g-win:var(--orange); --g-do:var(--navy); --g-paid:var(--good); --g-keep:var(--teal); --g-on:var(--grey); }
  .flowtop{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:34px;align-items:start;margin-top:8px}
  @media(max-width:900px){.flowtop{grid-template-columns:1fr}}
  .ringwrap{position:sticky;top:88px}
  @media(max-width:900px){.ringwrap{position:static;max-width:420px;margin:0 auto;width:100%}}
  svg.ring{width:100%;height:auto;display:block;overflow:visible}
  svg.ring .arc{fill:none;stroke-width:10;stroke-linecap:round;opacity:.9}
  svg.ring .arc.win{stroke:var(--g-win)} svg.ring .arc.do{stroke:var(--g-do)} svg.ring .arc.paid{stroke:var(--g-paid)} svg.ring .arc.keep{stroke:var(--g-keep)}
  svg.ring .outer{fill:none;stroke:var(--border-2);stroke-width:1.5;stroke-dasharray:4 6}
  svg.ring .chev{fill:var(--border-2)}
  svg.ring .node{cursor:pointer}
  svg.ring .node circle{fill:var(--card);stroke-width:3;transition:fill .25s var(--ease)}
  svg.ring .node.win circle{stroke:var(--g-win)} svg.ring .node.do circle{stroke:var(--g-do)} svg.ring .node.paid circle{stroke:var(--g-paid)} svg.ring .node.keep circle{stroke:var(--g-keep)}
  svg.ring .node text.num{font-family:var(--grot);font-weight:800;font-size:17px;fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}
  svg.ring .node.on.win circle{fill:var(--g-win)} svg.ring .node.on.do circle{fill:var(--g-do)} svg.ring .node.on.paid circle{fill:var(--g-paid)} svg.ring .node.on.keep circle{fill:var(--g-keep)}
  svg.ring .node.on text.num{fill:var(--on-dark)} svg.ring .node.on.win text.num{fill:var(--on-orange)}
  svg.ring .node:hover circle{stroke-width:5}
  svg.ring .node:focus-visible{outline:none} svg.ring .node:focus-visible circle{stroke:var(--ink);stroke-width:4}
  svg.ring text.lbl{font-family:var(--grot);font-weight:700;font-size:14px;fill:var(--body);pointer-events:none}
  svg.ring text.grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;text-anchor:middle}
  svg.ring text.grp.win{fill:var(--orange-text)} svg.ring text.grp.do{fill:var(--g-do)} svg.ring text.grp.paid{fill:var(--g-paid)} svg.ring text.grp.keep{fill:var(--g-keep)}
  svg.ring text.mid1{font-family:var(--grot);font-weight:800;font-size:26px;fill:var(--ink);text-anchor:middle;letter-spacing:-.02em}
  svg.ring text.mid2{font-family:var(--mono);font-size:11px;fill:var(--grey);text-anchor:middle}
  svg.ring text.onl{font-family:var(--mono);font-size:10.5px;fill:var(--grey);text-anchor:middle;letter-spacing:.08em}
  @media(max-width:560px){svg.ring text.lbl{display:none}}
  .chips{display:none;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px}
  @media(max-width:560px){.chips{display:grid}}
  .chip{font-family:var(--grot);font-weight:700;font-size:13px;text-align:left;padding:8px 10px;border-radius:10px;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--g-on);color:var(--ink);cursor:pointer}
  .chip.win{border-left-color:var(--g-win)} .chip.do{border-left-color:var(--g-do)} .chip.paid{border-left-color:var(--g-paid)} .chip.keep{border-left-color:var(--g-keep)}
  .chip.on{background:var(--cream-2);border-color:var(--ink)}
  a.chip{display:block} /* v5: chips and always-on cards are real links now */
  .ringnote{font-family:var(--mono);font-size:11px;color:var(--grey);text-align:center;margin-top:10px}

  .stage{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;scroll-margin-top:90px}
  .stage .hd{padding:22px 26px 18px;border-top:6px solid var(--g-on)}
  .stage.win .hd{border-top-color:var(--g-win)} .stage.do .hd{border-top-color:var(--g-do)} .stage.paid .hd{border-top-color:var(--g-paid)} .stage.keep .hd{border-top-color:var(--g-keep)}
  .stage .kk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
  .stage h2{font-size:clamp(24px,3vw,30px);margin-top:8px}
  .st-badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:none;padding:3px 9px;border-radius:999px;border:1px solid var(--border-2);color:var(--body);background:var(--cream)}
  .st-badge.rex{background:var(--good-bg);border-color:var(--good-br);color:var(--good)}
  .st-badge.build{background:var(--cream-2);border-color:var(--border-2);color:var(--on-orange-mute)}
  .stage .bd{padding:0 26px 24px}
  .stage .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);margin:20px 0 8px}
  .hurts{display:flex;flex-direction:column;gap:6px}
  .hurt{font-family:var(--grot);font-weight:600;font-size:16.5px;color:var(--ink);line-height:1.35;padding-left:14px;border-left:3px solid var(--border-2)}
  .stage .good{font-size:15.5px;color:var(--body);line-height:1.55}
  ol.how{margin:0;padding:0;list-style:none;counter-reset:hw;display:flex;flex-direction:column;gap:8px}
  ol.how li{counter-increment:hw;position:relative;padding-left:34px;font-size:15px;color:var(--body);line-height:1.5}
  ol.how li::before{content:counter(hw);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--cream-2);border:1px solid var(--border);font-family:var(--grot);font-weight:800;font-size:12px;color:var(--ink);display:flex;align-items:center;justify-content:center}
  .whos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .who{display:flex;align-items:center;gap:9px;background:var(--cream);border:1px solid var(--border);border-radius:12px;padding:8px 12px}
  .who .av{width:30px;height:30px;border-radius:50%;background:var(--navy-deep);color:var(--on-dark);display:flex;align-items:center;justify-content:center;font-family:var(--grot);font-weight:800;font-size:13px;flex:none}
  .who.spec .av{background:var(--orange);color:var(--on-orange)}
  .who .nm{font-family:var(--grot);font-weight:800;font-size:14.5px;line-height:1.2}
  .who .rl{font-family:var(--mono);font-size:10px;color:var(--grey)}
  .who a{cursor:pointer;border-bottom:1px solid var(--orange-text)}
  .handto{font-family:var(--mono);font-size:11.5px;color:var(--body);margin-top:10px}
  .handto b{font-family:var(--grot);font-size:13px}
  .money{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
  @media(max-width:520px){.money{grid-template-columns:1fr}}
  .tile{background:var(--cream);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px}
  .tile .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
  .tile .v{font-family:var(--grot);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--ink);margin-top:4px;line-height:1.1}
  .tile .v small{font-size:14px;font-weight:700;color:var(--body);white-space:nowrap}
  .tile p{font-size:13.5px;color:var(--body);margin-top:6px;line-height:1.45}
  .rate{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--body)}
  .rate input{width:72px;font:inherit;font-family:var(--mono);font-size:14px;padding:5px 8px;border:1px solid var(--border-2);border-radius:8px;background:var(--card);color:var(--ink)}
  .eg{font-family:var(--mono);font-size:10.5px;color:var(--grey);margin-top:10px;line-height:1.5}
  .stage .ft{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:16px 26px;background:var(--cream-2);border-top:1px solid var(--border)}
  .stage .ft .fn{font-size:13.5px;color:var(--body)}
  .stage .ft .fn a{color:var(--orange-text);border-bottom:1px solid var(--orange-text);cursor:pointer;font-weight:600}
  .stage .ft .btn{font-size:13.5px;padding:10px 18px}
  .nav2{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
  .nav2 button{font-family:var(--grot);font-weight:700;font-size:13px;background:none;border:none;color:var(--orange-text);cursor:pointer;padding:6px 0}
  .nav2 button[disabled]{visibility:hidden}

  .legend{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:18px;font-size:13.5px;color:var(--body)}
  .legend div{display:flex;gap:8px;align-items:flex-start;max-width:320px}
  .legend .st-badge{flex:none}

  .chain{display:flex;align-items:stretch;gap:0;margin-top:26px;flex-wrap:nowrap}
  .link{flex:1 1 0;min-width:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
  .link .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
  .link h4{font-size:16.5px;margin:6px 0 6px}
  .link p{font-size:13.5px;color:var(--body);line-height:1.45}
  .link.in{background:var(--navy-deep);border-color:var(--navy-deep)}
  .link.in .n{color:var(--on-navy-lead)} .link.in h4{color:var(--on-dark)} .link.in p{color:var(--on-navy)}
  .chans{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
  .chans span{font-family:var(--mono);font-size:10px;padding:3px 7px;border-radius:5px;background:var(--veil);border:1px solid var(--hair);color:var(--on-dark)}
  .baton{flex:none;width:34px;display:flex;align-items:center;justify-content:center;color:var(--orange-text);font-family:var(--grot);font-weight:800;font-size:20px}
  @media(max-width:860px){.chain{flex-direction:column}.baton{width:auto;height:30px;transform:rotate(90deg)}}
  .memory{margin-top:14px;background:var(--cream-2);border:1px dashed var(--border-2);border-radius:var(--r-sm);padding:14px 18px;font-size:14.5px;color:var(--body);text-align:center}
  .memory b{color:var(--ink)}

  .ongrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
  @media(max-width:820px){.ongrid{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.ongrid{grid-template-columns:1fr}}
  .oncard{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:transform .3s var(--ease),border-color .3s}
  .oncard.wide{grid-column:1/-1}
  .oncard:hover{transform:translateY(-3px);border-color:var(--orange)}
  .oncard.on{border-color:var(--ink);border-width:2px;padding:19px}
  .oncard .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
  .oncard h3{font-size:18px;margin:6px 0 8px}
  .oncard p{font-size:14px;color:var(--ink);font-family:var(--grot);font-weight:600;line-height:1.35}
  .oncard .go{display:block;margin-top:10px;font-family:var(--grot);font-weight:700;font-size:13px;color:var(--orange-text)}

  .stuck{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
  @media(max-width:900px){.stuck{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.stuck{grid-template-columns:1fr}}
  .stk{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm);border-top:5px solid var(--g-on)}
  .stk.win{border-top-color:var(--g-win)} .stk.do{border-top-color:var(--g-do)} .stk.paid{border-top-color:var(--g-paid)} .stk.keep{border-top-color:var(--g-keep)}
  .stk h3{font-size:19px}
  .stk ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
  .stk li a{font-size:14.5px;color:var(--body);cursor:pointer;display:flex;gap:8px}
  .stk li a:hover{color:var(--orange-text)}
  .stk li a span{font-family:var(--mono);font-size:11px;color:var(--grey);min-width:18px;padding-top:3px}


  /* ===== v4 · case study ===== */
  .rexcrew{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
  @media(max-width:900px){.rexcrew{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.rexcrew{grid-template-columns:1fr}}
  .rc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
  .rc .who{border:none;background:none;padding:0}
  .rc p{font-size:14px;color:var(--body);line-height:1.5;flex:1}
  .rexnote{margin-top:16px;font-size:14.5px;color:var(--body)}
  ol.rexchain{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;counter-reset:rc}
  ol.rexchain li{counter-increment:rc;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 12px;display:flex;flex-direction:column;gap:6px}
  ol.rexchain li::before{content:counter(rc);font-family:var(--mono);font-size:11px;color:var(--orange-text)}
  ol.rexchain b{font-family:var(--grot);font-size:14.5px;line-height:1.2}
  ol.rexchain span{font-size:13px;color:var(--body);line-height:1.4}
  @media(max-width:980px){ol.rexchain{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:620px){ol.rexchain{grid-template-columns:1fr 1fr}}
  .rexloop{margin-top:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
  .rl-row{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border);cursor:pointer;border-left:4px solid var(--g-on)}
  .rl-row:last-child{border-bottom:0}
  .rl-row.win{border-left-color:var(--g-win)} .rl-row.do{border-left-color:var(--g-do)} .rl-row.paid{border-left-color:var(--g-paid)} .rl-row.keep{border-left-color:var(--g-keep)}
  .rl-row:hover{background:var(--cream)}
  .rl-row .n{font-family:var(--mono);font-size:12px;color:var(--grey)}
  .rl-row .t{font-family:var(--grot);font-weight:700;font-size:15.5px}
  .rl-row .t small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;color:var(--grey);margin-top:2px}
  .rl-row.off .t{color:var(--grey)}

  /* ===== v4 · the bench, restructured ===== */
  .seat.you{grid-column:1/-1}
  .seat.relay{grid-column:1/-1;background:rgba(255,255,255,.09)}
  .specs{margin-top:22px;padding-top:20px;border-top:1px solid var(--hair)}
  .specs .eyebrow{color:var(--on-navy-lead)}
  .specs .sub{margin-top:6px}
  .specgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
  @media(max-width:720px){.specgrid{grid-template-columns:1fr}}
  .specgrid .seat{background:transparent;border:1px dashed var(--on-navy-mute)}
  .specgrid .seat a{color:var(--on-navy-lead);border-bottom:1px solid var(--on-navy-lead);cursor:pointer}

  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}