/* self-hosted fonts — no third-party requests */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/fraunces-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/fraunces-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/fraunces-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/fraunces-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/fraunces-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/fraunces-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/hanken-grotesk-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/hanken-grotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/hanken-grotesk-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/hanken-grotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/hanken-grotesk-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/hanken-grotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/hanken-grotesk-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/hanken-grotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}



  :root{
    --navy:#021039; --navy-2:#0b1d52; --navy-3:#13245f; --rose:#e24b8e; --rose-deep:#c43d7c;
    --rose-soft:#fbe6f0; --paper:#f7f4ed; --cream:#f3efe4; --cream-2:#efe9da;
    --ink:#14161f; --muted:#5f6470; --faint:#9aa0ad; --line:#e6ddcb; --card:#fffdf8;
    --dline:#1e336f; --dmuted:#aab2cf;
    --ontrack:#1f7a4d; --watch:#b8801f; --attention:#c8632a;
    --sand:#ece1c9;
    --display:"Fraunces",Georgia,serif; --body:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}
  section{padding:78px 0}
  .band{padding:62px 0 64px}
  .eyebrow{font-family:var(--mono);font-size:11.7px;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);font-weight:600;margin:0 0 14px}
  h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.5px;margin:0}
  h2{font-size:33.9px;line-height:1.12}
  h2 em,h1 em{font-style:italic;color:var(--rose)}
  .lead{font-size:18px;color:var(--muted);max-width:62ch;margin:16px 0 0}
  .dark .lead{color:var(--dmuted)}
  .small{font-size:13.8px;color:var(--faint)}
  /* hero */
  .hero{background:radial-gradient(1150px 720px at 50% 24%, #0d225c 0%, var(--navy) 58%);color:#f3efe4;text-align:center;padding:84px 0 48px}
  .hero h1{font-size:48.8px;line-height:1.05;color:#fbf7ef}
  .hero .lead{margin:18px auto 0;font-size:19.1px;color:var(--dmuted)}
  .hero .eyebrow{color:#f3a9ce}
  .badge{display:inline-flex;align-items:center;margin-top:26px;padding:8px 17px;border:1px solid rgba(243,239,228,.30);border-radius:999px;font-family:var(--mono);font-size:11.7px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#f3efe4;background:transparent}
  .brandpill{display:inline-block;margin-bottom:16px;padding:6px 15px;border:1px solid rgba(243,239,228,.30);border-radius:999px;font-family:var(--mono);font-size:11.7px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#f3efe4}
  .badge .spark{color:var(--rose);font-size:13.8px;vertical-align:-1px}
  /* section bg variants */
  .cream{background:var(--sand)}
  .dark{background:var(--navy);color:#f3efe4}
  .dark .small{color:#aab2cf}
  .dark h2{color:#fbf7ef}
  .dark .eyebrow{color:#f3a9ce}
  /* layout helpers */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
  .grid{display:grid;gap:16px;margin-top:34px}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g2{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:880px){.split{grid-template-columns:1fr;gap:34px}.g3,.g4{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:36px}h2{font-size:27.6px}}
  /* module cards */
  .mod{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 19px;box-shadow:0 5px 16px rgba(2,16,57,.05)}
  .mod h4{font-size:17.5px;margin-bottom:7px}
  .mod p{font-size:13.8px;color:var(--muted);margin:0 0 11px;line-height:1.5}
  .mod .ben{font-family:var(--mono);font-size:10.1px;letter-spacing:.05em;text-transform:uppercase;color:var(--rose-deep);font-weight:600;display:flex;gap:6px;line-height:1.45}
  .mod .ben::before{content:"\2192";color:var(--rose)}
  .dark .mod{background:var(--navy-2);border-color:var(--dline);box-shadow:none}
  .dark .mod h4{color:#fbf7ef}
  .dark .mod p{color:var(--dmuted)}
  .dark .mod .ben{color:#f3a9ce}
  .tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--cream-2);border-radius:6px;padding:3px 8px;margin-bottom:10px}
  .dark .tag{color:#cfd6ea;background:#0a1947}
  /* steps */
  .step{position:relative;padding-left:0}
  .step .n{font-family:var(--display);font-size:31.8px;color:var(--rose);line-height:1}
  .step h4{font-size:19.1px;margin:10px 0 6px}
  .step p{font-size:14.8px;color:var(--muted);margin:0}
  /* benefit ticks */
  .ticks{list-style:none;padding:0;margin:18px 0 0}
  .ticks li{position:relative;padding-left:26px;margin:0 0 11px;font-size:15.4px}
  .ticks li::before{content:"\2726";position:absolute;left:0;top:1px;color:var(--rose);font-size:12.7px}
  .dark .ticks li{color:#e6e9f4}
  /* mock surfaces */
  .surface{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 14px 40px rgba(2,16,57,.10)}
  .surface .bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
  .surface .bar .t{font-family:var(--display);font-size:17px}
  .surface .bar .d{font-family:var(--mono);font-size:10.1px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .row{display:flex;align-items:center;gap:12px;margin:11px 0}
  .row .lbl{font-size:12.7px;color:var(--muted);width:118px;flex:none}
  .track{flex:1;height:9px;background:var(--cream-2);border-radius:6px;overflow:hidden}
  .fill{height:100%;background:linear-gradient(90deg,var(--navy-2),var(--rose));border-radius:6px}
  .row .val{font-family:var(--mono);font-size:11.1px;color:var(--navy);width:74px;text-align:right;flex:none}
  .move{margin-top:16px;background:var(--navy);color:#f3efe4;border-radius:12px;padding:14px 16px}
  .move .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#f3a9ce}
  .move .m{font-family:var(--display);font-size:16.4px;margin-top:3px;color:#fff}
  .move .s{font-size:12.7px;color:#c4c8da;margin-top:3px}
  .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
  .chip{font-family:var(--mono);font-size:10.1px;letter-spacing:.04em;background:var(--cream-2);color:var(--navy);border-radius:6px;padding:4px 9px}
  .cgrp{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600}
  /* orbit move cards */
  .omove{background:var(--navy-2);border:1px solid var(--dline);border-radius:12px;padding:14px 15px;margin-bottom:11px}
  .omove .who{font-family:var(--display);font-size:15.9px;color:#fbf7ef}
  .omove .co{font-size:12.7px;color:#aab2cf;margin-bottom:7px}
  .omove .why{font-size:13.2px;color:#dfe3f0}
  .omove .why b{color:#f3a9ce;font-weight:600}
  .omove .ready{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#0b1d52;background:#f3a9ce;border-radius:6px;padding:3px 9px}
  .ohold{font-size:13.2px;color:#aab2cf;font-style:italic;padding:9px 4px 0}
  .ohold b{color:#cfd6ea;font-style:normal}
  /* pulse + ambient */
  .pulse{opacity:.5;animation:pls 2.4s ease-in-out infinite} /* was declared but never attached on the live site */
  @keyframes pls{0%,100%{opacity:.5}50%{opacity:.14}}
  .flow{stroke-dasharray:5 12;animation:flw 1.6s linear infinite}
  @keyframes flw{to{stroke-dashoffset:-34}}
  @media(prefers-reduced-motion:reduce){.pulse,.flow{animation:none}}
  .foot{border-top:1px solid var(--dline);margin-top:0;padding-top:26px;text-align:center}
  .rule{height:1px;background:var(--line);border:0;margin:0}
  .kicker{font-family:var(--mono);font-size:10.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);font-weight:600}

  /* embedded money-engine (scoped) */
  .engine-panel{background:var(--paper);color:var(--ink);border-radius:22px;padding:32px 28px 26px}
  .engine-embed svg{width:100%;height:auto;display:block}
  .engine-embed .ti{font-family:var(--display);font-weight:500}
  .engine-embed .eb{font-family:var(--mono);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
  .engine-embed .flow{stroke-dasharray:5 13;animation:eflow 1.5s linear infinite}
  .engine-embed .flow.slow{animation-duration:2.4s}
  .engine-embed .corepulse{opacity:.5;animation:ecp 2.6s ease-in-out infinite} /* was declared but never attached on the live site */
  @keyframes eflow{to{stroke-dashoffset:-36}}
  @keyframes ecp{0%,100%{opacity:.5}50%{opacity:.16}}
  @media(prefers-reduced-motion:reduce){.engine-embed .flow,.engine-embed .corepulse{animation:none}}
  .connbar{margin-top:14px;background:var(--navy);border-radius:22px;padding:36px 30px;text-align:center}
  .claude-lockup{display:inline-flex;align-items:center;gap:9px;font-family:'Fraunces',Georgia,serif;font-size:25.4px;font-weight:600;color:#f3efe4}
  .claude-lockup .clk-spark{color:var(--rose);font-size:23.3px;line-height:1}
  .connbar .eyebrow{color:#f3a9ce}
  .conn-wrap{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:1000px;margin:20px auto 0}
  .conn{display:inline-block;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:12.7px;color:var(--navy-2);background:#fffdf8;border:1px solid #fffdf8;border-radius:999px;padding:6px 13px;white-space:nowrap}
  .connbar .small{color:#c4c8da}
  .claude-mark{display:inline-block;background:url(assets/claude-mark.png) center/contain no-repeat;vertical-align:middle}
  /* embedded dashboard preview (scoped) */
  .dash{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 14px 40px rgba(2,16,57,.10);margin-top:30px}
  .dash .dbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:18px}
  .dash .dbar .t{font-family:var(--display);font-size:17px;color:var(--ink)}
  .dash .dbar .d{font-family:var(--mono);font-size:10.1px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .dash .hn{font-family:var(--display);font-size:44.5px;font-weight:600;line-height:1;color:var(--navy)}
  .dash .hn .of{font-size:22.3px;color:var(--faint);font-weight:500}
  .dash .hl{color:var(--muted);font-size:14.8px;margin-top:7px}
  .dash .pbar{height:8px;border-radius:5px;background:var(--cream-2);overflow:hidden;margin-top:13px}
  .dash .pbar i{display:block;height:100%;background:var(--navy);border-radius:5px}
  .dash .ht{font-size:13.8px;margin-top:9px;font-weight:600}
  .dash .ht.ontrack{color:var(--ontrack)}
  .dash .srow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
  .dash .metric{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:15px 16px}
  .dash .metric .n{font-family:var(--display);font-size:27.6px;font-weight:600;line-height:1;color:var(--navy)}
  .dash .metric .l{color:var(--muted);font-size:13.2px;margin-top:6px}
  .dash .metric .mt{font-size:12.7px;margin-top:8px;font-weight:600;color:var(--ontrack)}
  .dash .dmove{background:linear-gradient(180deg,var(--navy),var(--navy-2));color:var(--cream);border-radius:14px;padding:20px 22px;margin-top:18px;box-shadow:0 8px 26px rgba(2,16,57,.16)}
  .dash .dmove .k{font-family:var(--mono);font-size:10.1px;letter-spacing:.14em;text-transform:uppercase;color:#c4c8da}
  .dash .dmove .ml{font-family:var(--display);font-weight:500;font-size:20.1px;line-height:1.32;margin-top:7px;color:#fff}
  .dash .dmove .mw{color:#c4c8da;font-size:14.3px;margin-top:10px;line-height:1.5}
  @media(max-width:880px){.dash .srow{grid-template-columns:1fr}}
  /* embedded orbit "distance to fire" (scoped, dark) */
  .climb{border:1px solid var(--dline);border-radius:14px;background:var(--navy-2);padding:20px 0 6px;margin-top:18px}
  .climb .crow{display:grid;grid-template-columns:132px 1fr 236px;gap:18px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--dline)}
  .climb .crow:last-of-type{border-bottom:0}
  .climb .co{font-weight:600;font-size:15.4px;color:#fbf7ef}
  .climb .trk{position:relative;height:13px;background:#0a1947;border-radius:7px}
  .climb .trk i{position:absolute;left:0;top:0;height:100%;border-radius:7px;background:linear-gradient(90deg,#3b56b0,#c98a2e 72%,#e24b8e)}
  .climb .trk.fired i{background:linear-gradient(90deg,#7a2b73,#e24b8e)}
  .climb .trk .fl{position:absolute;left:86%;top:-5px;bottom:-5px;width:2px;background:#f3a9ce;opacity:.65}
  .climb .trk .flb{position:absolute;left:86%;top:-19px;transform:translateX(-50%);font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:#8b93b3;text-transform:uppercase}
  .climb .trk .ck{position:absolute;left:86%;top:50%;transform:translate(-50%,-50%);font-size:11.7px;color:#fff;font-weight:700}
  .climb .st{font-size:13.2px;display:flex;align-items:center;gap:10px;justify-content:flex-end;text-align:right}
  .climb .st .rsn{color:#aab2cf}
  .climb .cp{font-family:var(--mono);font-size:9px;letter-spacing:.06em;font-weight:600;padding:4px 9px;border-radius:999px;white-space:nowrap;text-transform:uppercase}
  .climb .cp.fire{color:#0b1d52;background:#f3a9ce}
  .climb .cp.near{color:#23150c;background:#e0a23a}
  .climb .cp.hold{color:#cfd6ea;background:#13245f}
  .climb .cp.queued{color:#9aa0ad;background:#0a1947}
  .climb .ovr{color:#f3a9ce;font-size:12.2px;font-weight:600;white-space:nowrap}
  .climb .parked{padding:14px 22px;color:#8b93b3;font-size:13.2px;border-top:1px dashed var(--dline)}
  .climb .parked b{color:#cfd6ea;font-weight:600}
  .climb-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.7px;color:#aab2cf;margin:12px 0 0}
  .climb-legend b{font-weight:700;font-style:normal}
  @media(max-width:880px){.climb .crow{grid-template-columns:1fr;gap:9px}.climb .st{justify-content:flex-start}}
  .tagline{font-family:var(--display);font-weight:500;font-size:36px;line-height:1.2;margin:0;color:#fbf7ef}
  .tagline em{color:var(--rose);font-style:italic}
  .plugins{display:flex;gap:18px;margin-top:18px;align-items:stretch}
  .plug{background:var(--navy);border-radius:16px;padding:22px 22px 24px;box-shadow:0 18px 40px -24px rgba(2,16,57,.5)}
  .plug.p-studio{flex:1.7}.plug.p-outbound{flex:1.05}.plug.p-orbit{flex:.62}
  .plug h4{font-family:var(--display);font-weight:500;font-size:23.3px;color:#f3efe4;margin:0;line-height:1}
  .plug .psub{font-family:var(--mono);font-size:10.6px;letter-spacing:.12em;text-transform:uppercase;color:#e8a9c9;margin:7px 0 16px}
  .plug .chips{display:flex;flex-wrap:wrap;gap:8px}
  .plug .chips span{background:#fffdf8;color:var(--ink);border-radius:8px;padding:6px 12px;font-size:13.8px;font-weight:600;white-space:nowrap}
  .plugfoot{text-align:center;font-family:var(--mono);font-size:11.7px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:22px}
  @media(max-width:880px){.tagline{font-size:26.5px}.plugins{flex-direction:column}.plug.p-studio,.plug.p-outbound,.plug.p-orbit{flex:1}}
  /* mobile diagram fallbacks (desktop SVGs hidden < 760px) */
  .mflow{display:none;margin:30px 0}
  .mstep{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 16px}
  .mstep .mt{font-family:var(--display);font-weight:500;font-size:19.1px;color:var(--ink);line-height:1.15}
  .mstep .ms{font-size:14.3px;color:var(--muted);margin-top:3px;line-height:1.35}
  .mstep-ai{background:var(--navy-2);border-color:var(--rose)}
  .mstep-ai .mt{color:#f3efe4}
  .mstep-ai .ms{color:#aab2cf}
  .marrow{text-align:center;color:var(--rose);font-size:14.8px;line-height:1;margin:13px 0;font-family:var(--mono);letter-spacing:.04em}
  .meyebrow{font-family:var(--mono);font-size:11.7px;letter-spacing:.13em;text-transform:uppercase;color:var(--rose);text-align:center;margin-bottom:17px}
  .mcap{font-size:13.8px;color:var(--muted);text-align:center;margin-top:19px;line-height:1.4}
  .mcore{background:var(--navy);border-radius:14px;padding:18px;text-align:center}
  .mcore .mn{font-family:var(--mono);font-size:11.1px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#f3a9ce}
  .mcore .mt{font-family:var(--display);font-weight:500;font-size:24.4px;color:#f3efe4;margin-top:4px;line-height:1.1}
  .mcore .ms{font-size:13.8px;color:#aab2cf;margin-top:5px;line-height:1.35}
  .mloop{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .mli{display:flex;align-items:flex-start;gap:11px;padding:10px 16px}
  .mlt{font-family:var(--display);font-size:16.4px;color:var(--ink);line-height:1.18}
  .mls{font-size:13.2px;color:var(--muted);margin-top:2px;line-height:1.25}
  .mli + .mli{border-top:1px solid var(--line)}
  .mli b{font-family:var(--mono);font-size:11.7px;font-weight:600;color:var(--rose);min-width:18px;margin-top:3px}
  .mfeed{margin-top:22px}
  .mfeedlabel{font-family:var(--mono);font-size:10.1px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);text-align:center;margin-bottom:9px}
  .mfeedchips{display:flex;gap:9px}
  .mfchip{flex:1;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 10px;text-align:center;font-size:13.8px;color:var(--muted);line-height:1.3}
  .mfchip b{display:block;font-family:var(--mono);font-size:11.1px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--rose);margin-bottom:3px}
  .mpay{margin-top:24px;text-align:center}
  .mpayeb{font-family:var(--mono);font-size:10.1px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-bottom:10px}
  .mpaylead{font-family:var(--display);font-size:16.4px;color:var(--muted);line-height:1.25}
  .mpaybig{font-family:var(--display);font-weight:500;font-style:italic;font-size:35px;color:var(--rose);line-height:1.02;margin-top:4px}
  .mpaycur{font-family:var(--mono);font-size:12.7px;letter-spacing:.16em;color:var(--faint);margin-top:11px}
  .meng{margin:2px auto 0;max-width:344px}
  .meng svg{width:100%;height:auto;display:block}
  @keyframes mcp{0%,100%{opacity:.6}50%{opacity:.13}}
  .meng .cp{animation:mcp 2.6s ease-in-out infinite}
  .mengcap{text-align:center;font-size:13.2px;color:var(--muted);max-width:34ch;margin:8px auto 0;line-height:1.42}
  @media(prefers-reduced-motion:reduce){.meng .cp{animation:none}}
  .mpay2{margin-top:32px;text-align:center}
  .mpay2eb{font-family:var(--mono);font-size:10.1px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-bottom:7px}
  .mpay2big{font-family:var(--display);font-weight:500;font-style:italic;font-size:37.1px;color:var(--rose);line-height:1;margin-bottom:2px}
  .mbars{max-width:332px;margin:10px auto 0}
  .mbars svg{width:100%;height:auto;display:block}
  .mpay2cap{font-family:var(--display);font-size:14.8px;color:var(--muted);max-width:30ch;margin:13px auto 0;line-height:1.35}
  .setup-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:34px 0 0}
  .scard{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:18px 17px 19px;box-shadow:0 10px 26px -18px rgba(2,16,57,.28)}
  .scard svg{width:26px;height:26px;display:block;margin-bottom:13px}
  .scard h4{font-family:var(--display);font-weight:500;font-size:19.1px;color:var(--ink);margin:0 0 6px;line-height:1.12}
  .scard p{font-size:13.8px;line-height:1.46;color:var(--muted);margin:0}
  .mbr{display:none}
  @media(max-width:760px){ section{padding:50px 0} .hero{padding:54px 0 32px} .band{padding:32px 0 44px} .dsvg{display:none!important} .mflow{display:block} .dbr{display:none} .mbr{display:inline} .hero h1{font-size:31.8px;line-height:1.12} .halves{flex-direction:column;align-items:stretch;gap:14px;margin-top:26px;max-width:none} .hx{font-size:27.6px} .setup-cards{grid-template-columns:1fr;gap:12px} .engine-panel{padding:16px 12px;border-radius:16px} }
  .halves{display:flex;align-items:stretch;justify-content:center;gap:18px;max-width:820px;margin:34px auto 0}
  .half{flex:1;text-align:left;background:var(--navy-2);border:1px solid #284078;border-radius:16px;padding:22px 24px;box-shadow:0 14px 34px rgba(0,0,0,.34)}
  .hlabel{font-family:var(--mono);font-size:11.7px;letter-spacing:.15em;text-transform:uppercase;color:#f3a9ce;font-weight:600;margin-bottom:9px}
  .htext{font-size:15.4px;line-height:1.55;color:var(--dmuted);margin:0}
  .hx{flex:0 0 auto;align-self:center;font-family:var(--display);font-size:29.7px;color:var(--rose);line-height:1}
  /* --- tasteful motion layer (progressive enhancement; reduced-motion safe) --- */
  html.js [data-rv="up"]{opacity:0;transform:translateY(16px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  html.js [data-rv="up"].in{opacity:1;transform:none}
  html.js [data-rv="bars"] .gb{transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  html.js [data-rv="bars"].in .gb{transform:scaleY(1)}
  /* hand-drawn accents */
  .ringmark{display:inline-block;white-space:nowrap;padding:.5em .8em;margin:-.5em -.8em}
  html.ringed .ringmark{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 108' preserveAspectRatio='none'%3E%3Cpath d='M28,62 C30,24 104,8 152,11 C210,15 236,36 229,62 C221,92 132,100 74,93 C28,88 2,72 26,44' pathLength='1' stroke-dasharray='1' stroke-dashoffset='1' fill='none' stroke='%23e24b8e' stroke-width='6' stroke-opacity='.55' stroke-linecap='round'%3E%3Canimate attributeName='stroke-dashoffset' values='1;0' dur='1.35s' begin='0s' fill='freeze' calcMode='spline' keySplines='.3 0 .2 1' keyTimes='0;1'/%3E%3C/path%3E%3C/svg%3E") no-repeat center/100% 100%}
  @media(prefers-reduced-motion:reduce){html.ringed .ringmark{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 108' preserveAspectRatio='none'%3E%3Cpath d='M28,62 C30,24 104,8 152,11 C210,15 236,36 229,62 C221,92 132,100 74,93 C28,88 2,72 26,44' fill='none' stroke='%23e24b8e' stroke-width='6' stroke-opacity='.55' stroke-linecap='round'/%3E%3C/svg%3E")}}
  html.js [data-rv="draw"] .hdraw{opacity:0}
  html.js [data-rv="draw"].drawgo .hdraw{opacity:1}
  @media(prefers-reduced-motion:reduce){html.js [data-rv="draw"] .hdraw{opacity:1!important;transition:none}}
  @media(max-width:760px){
    .mhide{display:none!important}
    .dash .dmove .mw{display:none}
  }
  /* model panel — the engagement, start to handoff */
  .model-panel{background:linear-gradient(160deg,#0b1d52,#021039);border:1px solid #1e336f;border-radius:20px;padding:30px 24px 20px;margin-top:36px;box-shadow:0 18px 50px rgba(2,16,57,.28)}
  .model-panel .mp-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#f3a9ce;text-align:center;margin-bottom:6px}
  .model-panel .mp-foot{border-top:1px solid #1e336f;margin-top:24px;padding:22px 14px 8px;text-align:center}
  .model-panel .mp-foot .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#8b93b3;margin-bottom:12px}
  .model-panel .mp-foot .t{font-family:var(--display);font-weight:500;font-size:23px;line-height:1.4;color:#f3efe4;max-width:74ch;margin:0 auto}
  html.js [data-rv="model"] .mc{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);transform-box:fill-box}
  html.js [data-rv="model"].in .mc{opacity:1;transform:none}
  html.js [data-rv="model"] .mc2{transition-delay:.12s}
  html.js [data-rv="model"] .mc3{transition-delay:.24s}
  html.js [data-rv="model"] .mc4{transition-delay:.36s}
  html.js [data-rv="model"] .mc5{transition-delay:.48s}
  html.js [data-rv="model"] .mcore{transition-delay:.66s}
  html.js [data-rv="model"] .maxis{opacity:0;transition:opacity .8s ease .9s}
  html.js [data-rv="model"].in .maxis{opacity:1}
  .model-panel .mring{transform-box:fill-box;transform-origin:center;animation:mpulse 3.2s ease-out infinite}
  @keyframes mpulse{0%{transform:scale(.92);opacity:.5}75%{transform:scale(1.22);opacity:0}100%{transform:scale(1.22);opacity:0}}
  @media(prefers-reduced-motion:reduce){html.js [data-rv="model"] .mc,html.js [data-rv="model"] .maxis{opacity:1!important;transform:none!important;transition:none}.model-panel .mring{animation:none}}
  .mcap{display:none}
  @media(max-width:760px){.mcap{display:block}}
  /* gmail staged-draft mock */
  .gmail{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(2,16,57,.10);overflow:hidden}
  .gmail .gbar{display:flex;justify-content:space-between;align-items:baseline;padding:14px 20px;border-bottom:1px solid var(--line)}
  .gmail .gbar .gt{font-family:var(--display);font-size:16.5px;color:var(--ink)}
  .gmail .gbar .gd{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose-deep)}
  .gmail .gdraft{padding:16px 22px 18px}
  .gmail .grow{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
  .gmail .gl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);min-width:56px}
  .gmail .gv{font-size:14.5px;color:var(--ink)}
  .gmail .gs{font-weight:600}
  .gmail .gbody{margin:15px 0 16px;font-size:14.5px;line-height:1.66;color:var(--muted)}
  .gmail .gchips{display:flex;gap:8px;flex-wrap:wrap}
  .gmail .gchip{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
  .gmail .gchip.rose{background:var(--rose-soft);border-color:#f3a9ce;color:var(--rose-deep);font-weight:600}
  .gmail .gnext{padding:13px 22px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--muted)}
  .gmail .gfoot{padding:11px 22px;background:var(--cream);font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--rose-deep)}
  .stage .fan{line-height:0;margin:-2px 0}
  .stage .dests{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
  .stage .dest{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:12.3px;font-weight:600;color:var(--ink);box-shadow:0 3px 10px rgba(2,16,57,.06);white-space:nowrap}
  .stage .dest .dot{width:8px;height:8px;border-radius:50%;flex:none}
  .stage .dest.more{border-style:dashed;color:var(--muted);font-weight:500}
  .stage .sfoot{margin-top:14px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--rose-deep)}
  @media(max-width:880px){.stage .fan{display:none}.stage .dests{margin-top:14px}}
  html.js [data-rv="climb"] .trk i{transform:scaleX(0);transform-origin:left;transition:transform .95s cubic-bezier(.25,.7,.2,1)}
  html.js [data-rv="climb"].in .trk i{transform:scaleX(1)}
  html.js [data-rv="climb"] .crow:nth-child(1) .trk i{transition-delay:.05s}
  html.js [data-rv="climb"] .crow:nth-child(2) .trk i{transition-delay:.15s}
  html.js [data-rv="climb"] .crow:nth-child(3) .trk i{transition-delay:.25s}
  html.js [data-rv="climb"] .crow:nth-child(4) .trk i{transition-delay:.35s}
  html.js [data-rv="climb"] .crow:nth-child(5) .trk i{transition-delay:.45s}
  html.js [data-rv="climb"] .crow:nth-child(6) .trk i{transition-delay:.55s}
  html.js [data-rv="climb"] .crow:nth-child(7) .trk i{transition-delay:.65s}
  html.js [data-rv="climb"] .crow:nth-child(8) .trk i{transition-delay:.75s}
  html.js [data-rv="climb"] .crow:nth-child(9) .trk i{transition-delay:.85s}
  html.js [data-rv="climb"] .trk .ck,html.js [data-rv="climb"] .st .cp,html.js [data-rv="climb"] .st .rsn,html.js [data-rv="climb"] .st .ovr{opacity:0;transition:opacity .5s ease 1.15s}
  html.js [data-rv="climb"].in .trk .ck,html.js [data-rv="climb"].in .st .cp,html.js [data-rv="climb"].in .st .rsn,html.js [data-rv="climb"].in .st .ovr{opacity:1}
  html.js [data-rv="bars"].in .gb:nth-of-type(2){transition-delay:.05s}
  html.js [data-rv="bars"].in .gb:nth-of-type(3){transition-delay:.1s}
  html.js [data-rv="bars"].in .gb:nth-of-type(4){transition-delay:.15s}
  html.js [data-rv="bars"].in .gb:nth-of-type(5){transition-delay:.2s}
  html.js [data-rv="bars"].in .gb:nth-of-type(6){transition-delay:.25s}
  html.js [data-rv="dash"] .pbar i{transform:scaleX(0);transform-origin:left;transition:transform 1.05s cubic-bezier(.2,.7,.2,1) .15s}
  html.js [data-rv="dash"].in .pbar i{transform:scaleX(1)}
  @media(prefers-reduced-motion:reduce){html.js [data-rv="up"]{opacity:1!important;transform:none!important;transition:none} html.js [data-rv="bars"] .gb,html.js [data-rv="dash"] .pbar i{transform:none!important;transition:none} html.js [data-rv="climb"] .trk i{transform:none!important;transition:none} html.js [data-rv="climb"] .trk .ck,html.js [data-rv="climb"] .st .cp,html.js [data-rv="climb"] .st .rsn,html.js [data-rv="climb"] .st .ovr{opacity:1!important;transition:none}}

  /* ============================================================
     STAGE 2 SCALE — additions to the base Studio design system
     nav · footer · lang toggle · quote carousel · re-skinned
     components for inner pages (numbers, cases, timeline,
     services, ICP, process). Same navy/rose/cream palette.
     ============================================================ */

  /* --- top navigation --- */
  .s2nav{position:sticky;top:0;z-index:100;background:rgba(2,16,57,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #1e336f}
  .s2nav .nwrap{max-width:1180px;margin:0 auto;padding:0 28px;height:62px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
  .s2logo{display:flex;flex-direction:column;gap:1px;text-decoration:none;line-height:1}
  .s2logo .ln{font-family:var(--mono);font-weight:500;font-size:20.1px;color:#fbf7ef;letter-spacing:1px}
  .s2logo .ln em{font-style:normal;color:var(--rose);font-weight:500}
  .s2logo .ls{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#8b93b3}
  .s2links{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0;justify-self:center}
  .s2links a{font-family:var(--body);font-size:14.3px;font-weight:500;color:#c4c8da;text-decoration:none;transition:color .2s}
  .s2links a:hover,.s2links a.active{color:#fbf7ef}
  .s2right{display:flex;align-items:center;gap:14px;flex:none;justify-self:end}
  .langtog{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.6px;font-weight:600;letter-spacing:.08em}
  .langtog button{appearance:none;border:1px solid transparent;background:transparent;color:#6b76a0;padding:3px 8px;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s;text-transform:uppercase}
  .langtog button:hover{color:#c4c8da}
  .langtog button.on{color:var(--rose);border-color:var(--rose)}
  .navcta{font-family:var(--body);font-size:13.8px;font-weight:600;color:#021039;background:var(--rose);border-radius:999px;padding:8px 16px;text-decoration:none;white-space:nowrap;transition:background .2s,transform .15s;min-width:150px;text-align:center;box-sizing:border-box}
  .navcta:hover{background:#f3a9ce;transform:translateY(-1px)}
  .navtoggle{display:none;background:transparent;border:0;color:#fbf7ef;font-size:23.3px;cursor:pointer;line-height:1}
  @media(max-width:860px){
    .s2nav .nwrap{display:flex;align-items:center;justify-content:space-between}
    .s2links{position:fixed;inset:62px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#021039;border-bottom:1px solid #1e336f;padding:8px 0;transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .28s ease,opacity .2s ease,visibility .28s;box-shadow:0 20px 40px rgba(0,0,0,.4);justify-self:auto}
    .s2links.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
    .s2links li{display:block;width:100%}
    .s2links a{display:block;width:100%;font-size:18px;padding:18px 28px;border-top:0;border-bottom:1px solid #13245f;box-sizing:border-box}
    .s2links li:last-child a{border-bottom:0}
    .navtoggle{display:block}
    .navcta{display:none}
  }

  /* --- site footer --- */
  .s2foot{background:var(--navy);color:#aab2cf;border-top:1px solid #1e336f;padding:46px 0 34px}
  .s2foot .fwrap{max-width:1180px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
  .s2foot .ln{font-family:var(--mono);font-weight:500;font-size:21.2px;color:#fbf7ef;letter-spacing:1px}
  .s2foot .ln em{font-style:normal;color:var(--rose);font-weight:500}
  .s2foot .blurb{font-size:13.8px;color:#8b93b3;margin:10px 0 0;max-width:34ch;line-height:1.55}
  .s2foot h5{font-family:var(--mono);font-size:10.6px;letter-spacing:.16em;text-transform:uppercase;color:#f3a9ce;font-weight:600;margin:0 0 13px}
  .s2foot ul{list-style:none;margin:0;padding:0}
  .s2foot ul li{margin:0 0 9px}
  .s2foot a{color:#c4c8da;text-decoration:none;font-size:14.3px;transition:color .2s}
  .s2foot a:hover{color:#fbf7ef}
  .s2foot .fbot{max-width:1180px;margin:30px auto 0;padding:22px 28px 0;border-top:1px solid #13245f;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.7px;color:#727a96}
  @media(max-width:860px){.s2foot .fwrap{grid-template-columns:1fr;gap:26px}.s2foot .fbot{flex-direction:column;text-align:left}}

  /* --- testimonial / quote carousel --- */
  .qcar{position:relative;max-width:880px;margin:36px auto 0}
  .qtrack{position:relative;min-height:230px}
  .qslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease;display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 8px}
  .qslide.on{opacity:1;visibility:visible;position:relative}
  .qmark{font-family:var(--display);font-size:50.9px;line-height:.4;color:var(--rose);height:26px}
  .qtext{font-family:var(--display);font-weight:500;font-size:22.3px;line-height:1.5;color:#fbf7ef;max-width:60ch;margin:14px 0 0;font-style:italic}
  .dark .qtext{color:#fbf7ef}
  .qwho{margin-top:20px}
  .qname{font-family:var(--body);font-weight:700;font-size:15.4px;color:#fbf7ef}
  .qrole{font-size:13.2px;color:#aab2cf;margin-top:2px}
  .qco{font-family:var(--mono);font-size:10.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--rose);margin-top:5px;font-weight:600}
  .qnav{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:26px}
  .qdot{width:8px;height:8px;border-radius:50%;border:0;background:#36487e;cursor:pointer;padding:0;transition:background .2s,transform .2s}
  .qdot.on{background:var(--rose);transform:scale(1.25)}
  .qarrow{position:absolute;top:78px;background:transparent;border:1px solid #2a3f78;color:#c4c8da;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:17px;line-height:1;transition:border-color .2s,color .2s,background .2s;display:flex;align-items:center;justify-content:center}
  .qarrow:hover{border-color:var(--rose);color:#fbf7ef;background:rgba(226,75,142,.12)}
  .qarrow.prev{left:-6px}.qarrow.next{right:-6px}
  @media(max-width:760px){.qtext{font-size:18px}.qarrow{display:none}.qslide{position:relative;opacity:1;visibility:visible}.qslide:not(.on){display:none}}

  /* --- numbers / proof strip (re-skinned) --- */
  .numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
  .dark .numbers{background:var(--navy-2);border-color:var(--dline)}
  .nitem{padding:28px 26px;border-right:1px solid var(--line)}
  .dark .nitem{border-right-color:var(--dline)}
  .nitem:last-child{border-right:0}
  .nval{font-family:var(--display);font-weight:600;font-size:36px;line-height:1;color:var(--navy);letter-spacing:-.5px}
  .dark .nval{color:#fbf7ef}
  .nval em{font-style:italic;color:var(--rose)}
  .nlbl{margin-top:9px;font-size:13.2px;color:var(--muted);line-height:1.4}
  .dark .nlbl{color:#aab2cf}
  @media(max-width:760px){.numbers{grid-template-columns:1fr 1fr}.nitem{border-bottom:1px solid var(--line)}.nitem:nth-child(2){border-right:0}}

  /* --- case study cards --- */
  .case{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 24px 22px;box-shadow:0 8px 24px rgba(2,16,57,.06);position:relative;overflow:hidden}
  .case::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy-2),var(--rose))}
  .dark .case{background:var(--navy-2);border-color:var(--dline);box-shadow:none}
  .caseco{font-family:var(--mono);font-size:10.6px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);font-weight:600;margin-bottom:6px}
  .dark .caseco{color:#f3a9ce}
  .caserole{font-size:12.7px;color:var(--faint);margin-bottom:14px;line-height:1.4}
  .caseres{font-family:var(--display);font-weight:600;font-size:27.6px;line-height:1.05;color:var(--navy);margin-bottom:9px;letter-spacing:-.5px}
  .dark .caseres{color:#fbf7ef}
  .caseres em{font-style:italic;color:var(--rose)}
  .casedesc{font-size:14.3px;color:var(--muted);line-height:1.55;margin:0}
  .dark .casedesc{color:#c4c8da}

  /* --- timeline (re-skinned) --- */
  .tl{display:flex;flex-direction:column;gap:0;margin-top:8px}
  .tli{display:flex;gap:16px;padding:0 0 26px;position:relative}
  .tli:not(:last-child)::after{content:"";position:absolute;left:17px;top:36px;bottom:0;width:1px;background:var(--line)}
  .dark .tli:not(:last-child)::after{background:var(--dline)}
  .tldot{width:36px;height:36px;border-radius:50%;flex:none;background:var(--card);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:15.9px;position:relative;z-index:1}
  .dark .tldot{background:var(--navy-2);border-color:var(--dline)}
  .tldot.on{border-color:var(--rose);background:var(--rose-soft)}
  .dark .tldot.on{background:#2a1330}
  .tlc{padding-top:3px}
  .tlper{font-family:var(--mono);font-size:10.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:4px}
  .tlrole{font-family:var(--display);font-size:18px;color:var(--ink);line-height:1.15}
  .dark .tlrole{color:#fbf7ef}
  .tlco{font-size:13.8px;color:var(--rose-deep);font-weight:600;margin:2px 0 5px}
  .dark .tlco{color:#f3a9ce}
  .tldet{font-size:13.8px;color:var(--muted);line-height:1.5}
  .dark .tldet{color:#aab2cf}

  /* --- process steps (numbered) --- */
  .pstep{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:22px 22px 20px;box-shadow:0 8px 22px -16px rgba(2,16,57,.3)}
  .dark .pstep{background:var(--navy-2);border-color:var(--dline);box-shadow:none}
  .pstep .pn{font-family:var(--mono);font-size:10.6px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:12px}
  .dark .pstep .pn{color:#f3a9ce}
  .pstep h4{font-family:var(--display);font-weight:500;font-size:19.1px;color:var(--ink);margin:0 0 7px;line-height:1.12}
  .dark .pstep h4{color:#fbf7ef}
  .pstep p{font-size:14.3px;color:var(--muted);line-height:1.5;margin:0}
  .dark .pstep p{color:#c4c8da}

  /* --- icp / "who it's for" check items --- */
  .icp{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:20px 20px}
  .dark .icp{background:var(--navy-2);border-color:var(--dline)}
  .icp .ck{color:var(--rose);font-size:15.9px;font-weight:700;margin-bottom:9px}
  .icp h4{font-family:var(--display);font-weight:500;font-size:17px;color:var(--ink);margin:0 0 5px;line-height:1.15}
  .dark .icp h4{color:#fbf7ef}
  .icp p{font-size:13.8px;color:var(--muted);line-height:1.5;margin:0}
  .dark .icp p{color:#aab2cf}

  /* --- service cards with icon chip --- */
  .svc{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:24px 22px;box-shadow:0 8px 22px -16px rgba(2,16,57,.3)}
  .dark .svc{background:var(--navy-2);border-color:var(--dline);box-shadow:none}
  .svcic{width:42px;height:42px;border-radius:11px;background:var(--rose-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .svcic svg{width:22px;height:22px;display:block}
  .dark .svcic{background:#2a1330}
  .svc h4{font-family:var(--display);font-weight:500;font-size:19.1px;color:var(--ink);margin:0 0 7px;line-height:1.15}
  .dark .svc h4{color:#fbf7ef}
  .svc p{font-size:14.3px;color:var(--muted);line-height:1.55;margin:0}
  .dark .svc p{color:#c4c8da}
  .svctag{display:inline-block;margin-top:13px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rose-deep);background:var(--cream-2);border-radius:6px;padding:3px 9px}
  .dark .svctag{color:#f3a9ce;background:#0a1947}

  /* --- tech pills strip --- */
  .techstrip{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:30px}
  .techlbl{font-family:var(--mono);font-size:10.6px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-right:6px}
  .techpill{font-family:var(--body);font-weight:600;font-size:13.2px;color:var(--navy-2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
  .dark .techpill{color:#dfe3f0;background:var(--navy-2);border-color:var(--dline)}
  .techpill.primary{border-color:var(--rose);color:var(--rose-deep);background:var(--rose-soft)}
  .dark .techpill.primary{color:#f3a9ce;background:#2a1330}

  /* --- generic page hero (inner pages) --- */
  .phero{background:radial-gradient(1150px 620px at 50% 12%, #0d225c 0%, var(--navy) 60%);color:#f3efe4;text-align:center;padding:74px 0 52px}
  .phero .eyebrow{color:#f3a9ce}
  .phero h1{font-size:44.5px;line-height:1.06;color:#fbf7ef;max-width:18ch;margin:0 auto}
  .phero h1 em{font-style:italic;color:var(--rose)}
  .phero .lead{margin:18px auto 0;color:var(--dmuted);max-width:60ch}
  @media(max-width:760px){.phero{padding:48px 0 36px}.phero h1{font-size:31.8px}}

  /* --- CTA band --- */
  .ctaband{text-align:center}
  .ctabox{max-width:680px;margin:0 auto;background:var(--navy-2);border:1px solid var(--dline);border-radius:22px;padding:52px 40px;position:relative;overflow:hidden}
  .ctabox::before{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:420px;height:420px;background:radial-gradient(circle,rgba(226,75,142,.16) 0%,transparent 70%);pointer-events:none}
  .ctabox h2{color:#fbf7ef;position:relative}
  .ctabox h2 em{color:var(--rose)}
  .ctabox p{color:var(--dmuted);max-width:48ch;margin:16px auto 28px;font-size:16.4px;position:relative}
  .btnrose{display:inline-block;background:var(--rose);color:#021039;font-family:var(--body);font-weight:600;font-size:15.9px;padding:14px 28px;border-radius:12px;text-decoration:none;position:relative;transition:background .2s,transform .15s}
  .btnrose:hover{background:#f3a9ce;transform:translateY(-1px)}
  .btnghost{display:inline-block;background:transparent;color:#f3efe4;font-family:var(--body);font-weight:500;font-size:15.9px;padding:14px 26px;border-radius:12px;text-decoration:none;border:1px solid #2a3f78;transition:border-color .2s,background .2s}
  .btnghost:hover{border-color:var(--rose);background:rgba(226,75,142,.08)}
  .ctalinks{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px;position:relative}

  /* --- hero action buttons (homepage) --- */
  .heroactions{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:30px}

  /* --- testimonial grid card (inner pages) --- */
  .tcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 26px;box-shadow:0 8px 24px rgba(2,16,57,.06);display:flex;flex-direction:column;gap:18px}
  .dark .tcard{background:var(--navy-2);border-color:var(--dline);box-shadow:none}
  .tcard .tq{font-family:var(--display);font-style:italic;font-weight:500;font-size:17.5px;line-height:1.55;color:var(--ink);margin:0;flex:1}
  .dark .tcard .tq{color:#fbf7ef}
  .tcard .tq::before{content:"\201C";color:var(--rose);font-size:25.4px;line-height:0;vertical-align:-.35em;margin-right:3px}
  .tcard .ta{display:flex;flex-direction:column;gap:2px}
  .tcard .tn{font-weight:700;font-size:14.8px;color:var(--ink)} .dark .tcard .tn{color:#fbf7ef}
  .tcard .tt{font-size:13.2px;color:var(--muted)} .dark .tcard .tt{color:#aab2cf}
  .tcard .tco{font-family:var(--mono);font-size:10.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-deep);font-weight:600;margin-top:3px} .dark .tcard .tco{color:#f3a9ce}

  /* --- carousel reconcile: contain quotes in their own proof panel --- */
  .qcar{position:relative;max-width:900px;margin:32px auto 0}
  .qpanel{position:relative;background:linear-gradient(180deg,#0c2160,#0b1d52);border:1px solid #28407a;border-radius:22px;padding:42px 64px 30px;box-shadow:0 28px 64px rgba(0,0,0,.38)}
  .qpanel .qtrack{min-height:210px}
  .qpanel .qmark{font-size:42.4px;height:18px;color:var(--rose)}
  .qpanel .qtext{font-size:21.2px;max-width:54ch}
  .qpanel .qarrow{top:50%;transform:translateY(-50%);border-color:#3c528f;color:#dfe3f0;background:rgba(2,16,57,.4)}
  .qpanel .qarrow:hover{border-color:var(--rose);color:#fff;background:rgba(226,75,142,.18)}
  .qpanel .qarrow.prev{left:-18px}
  .qpanel .qarrow.next{right:-18px}
  @media(max-width:760px){.qpanel{padding:30px 22px 24px}.qpanel .qtrack{min-height:0}.qpanel .qtext{font-size:18px}}

  /* --- application / eligibility form --- */
  .s2form{max-width:600px;margin:0;text-align:left;display:grid;gap:17px;background:var(--navy-2);border:1px solid var(--dline);border-radius:22px;padding:32px 32px 28px;box-shadow:0 24px 60px rgba(0,0,0,.34)}
  .s2form .fld{display:flex;flex-direction:column;gap:7px}
  .s2form .row2{display:grid;grid-template-columns:1fr 1fr;gap:17px}
  .s2form label{font-family:var(--mono);font-size:10.6px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#f3a9ce}
  .s2form label .opt{color:#6b76a0;font-weight:500}
  .s2form input,.s2form select,.s2form textarea{font-family:var(--body);font-size:15.4px;color:#f3efe4;background:#0a1947;border:1px solid #28407a;border-radius:10px;padding:11px 13px;outline:none;transition:border-color .2s;width:100%}
  .s2form input::placeholder,.s2form textarea::placeholder{color:#6b76a0}
  .s2form input:focus,.s2form select:focus,.s2form textarea:focus{border-color:var(--rose)}
  .s2form textarea{resize:vertical;min-height:76px}
  .s2form select{appearance:none;-webkit-appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M2 4 L6 8 L10 4" fill="none" stroke="%23f3a9ce" stroke-width="1.6"/></svg>');background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
  .s2form .full{grid-column:1/-1}
  .s2form .submitrow{margin-top:4px}
  .s2form button{appearance:none;border:0;cursor:pointer;width:100%;background:var(--rose);color:#021039;font-family:var(--body);font-weight:600;font-size:15.9px;padding:14px 22px;border-radius:12px;transition:background .2s,transform .15s}
  .s2form button:hover{background:#f3a9ce;transform:translateY(-1px)}
  .s2form .fineprint{font-size:12.7px;color:#8b93b3;margin:2px 0 0;text-align:center}
  .formdone{display:none;background:var(--navy-2);border:1px solid var(--dline);border-radius:22px;padding:40px 34px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.34)}
  .formdone .tick{width:52px;height:52px;border-radius:50%;background:#16351f;border:1px solid #1f7a4d;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#4fd089;font-size:25.4px}
  .formdone h3{font-family:var(--display);font-weight:500;font-size:24.4px;color:#fbf7ef;margin:0 0 8px}
  .formdone p{color:#aab2cf;font-size:15.4px;max-width:40ch;margin:0 auto;line-height:1.55}
  @media(max-width:760px){.s2form .row2{grid-template-columns:1fr}.s2form{padding:24px 20px}}

  /* timeline dots: clean brand dot instead of emoji */
  .tldot{font-size:8.5px;color:var(--faint)}
  .tldot.on{color:var(--rose)}

  /* --- bare quotes (sit directly under the hero, no panel/title) --- */
  .qcar-bare{max-width:760px;margin:0 auto}
  .qcar-bare .qtrack{min-height:158px}
  .qcar-bare .qmark{font-size:36px;height:12px;color:var(--rose)}
  .qcar-bare .qtext{font-size:20.1px;max-width:52ch}
  .qcar-bare .qarrow{top:50%;transform:translateY(-50%);background:transparent;border-color:#34487f}
  .qcar-bare .qarrow:hover{border-color:var(--rose);background:rgba(226,75,142,.12)}
  .qcar-bare .qarrow.prev{left:0}
  .qcar-bare .qarrow.next{right:0}

  /* --- manifesto/Claude line now sits on the cream band (header of "how it works") --- */
  .cream .tagline{color:var(--ink)}
  .cream .badge{background:var(--navy);color:#f3efe4;border-color:var(--navy);padding:9px 18px;box-shadow:0 10px 24px -10px rgba(2,16,57,.55)}

  /* --- numbers grid: 3-up variant (6 stats) --- */
  .numbers.grid3{grid-template-columns:repeat(3,1fr)}
  .numbers.grid3 .nitem:nth-child(3n){border-right:0}
  .numbers.grid3 .nitem:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .dark .numbers.grid3 .nitem:nth-child(-n+3){border-bottom-color:var(--dline)}
  @media(max-width:760px){
    .numbers.grid3{grid-template-columns:1fr 1fr}
    .numbers.grid3 .nitem:nth-child(3n){border-right:1px solid var(--line)}
    .numbers.grid3 .nitem:nth-child(2n){border-right:0}
    .numbers.grid3 .nitem:nth-child(5),.numbers.grid3 .nitem:nth-child(6){border-bottom:0}
  }

  /* --- phone: stack all card grids to one column (numbers grid keeps its own 2-up) --- */
  @media(max-width:600px){
    .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  }

  /* --- hand-drawn arrow (transition into next section) --- */
  .pillwrap{position:relative;display:inline-block}
  .hdraw{position:absolute;left:calc(100% + 44px);bottom:calc(100% - 6px);width:98px;transform:rotate(8deg);filter:drop-shadow(0 6px 14px rgba(2,16,57,.20));pointer-events:none;z-index:3}
  .taglinesec{padding:100px 0 52px}
  @media(max-width:760px){.taglinesec{padding:64px 0 70px}}
  .hdraw svg{display:block;width:100%;height:auto;overflow:visible}
  @media(max-width:820px){.hdraw{display:none}}

  /* --- staggered reveal for card grids --- */
  html.js [data-rv="stagger"] > *{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
  html.js [data-rv="stagger"].in > *{opacity:1;transform:none}
  html.js [data-rv="stagger"].in > *:nth-child(2){transition-delay:.07s}
  html.js [data-rv="stagger"].in > *:nth-child(3){transition-delay:.14s}
  html.js [data-rv="stagger"].in > *:nth-child(4){transition-delay:.21s}
  html.js [data-rv="stagger"].in > *:nth-child(5){transition-delay:.28s}
  html.js [data-rv="stagger"].in > *:nth-child(6){transition-delay:.35s}
  html.js [data-rv="stagger"].in > *:nth-child(7){transition-delay:.42s}
  html.js [data-rv="stagger"].in > *:nth-child(8){transition-delay:.49s}
  @media(prefers-reduced-motion:reduce){html.js [data-rv="stagger"] > *{opacity:1!important;transform:none!important;transition:none}}

  /* --- subtle card hover-lift --- */
  .mod,.svc,.case,.tcard{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease}
  .mod:hover,.svc:hover,.case:hover,.tcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px -14px rgba(2,16,57,.30)}
  .dark .mod:hover,.dark .svc:hover,.dark .case:hover,.dark .tcard:hover{box-shadow:none;border-color:rgba(226,75,142,.5)}
  @media(prefers-reduced-motion:reduce){.mod,.svc,.case,.tcard{transition:none}.mod:hover,.svc:hover,.case:hover,.tcard:hover{transform:none}}


  /* --- fixed-height quote carousel (no page jump as quotes change) --- */
  .qcar-bare .qslide{justify-content:center}
  .qcar-bare .qslide.on{position:absolute}
  .qcar-bare .qtrack{min-height:258px}
  @media(max-width:760px){
    .qcar-bare .qslide{position:absolute;display:flex;opacity:0;visibility:hidden}
    .qcar-bare .qslide.on{opacity:1;visibility:visible;position:absolute}
    .qcar-bare .qtrack{min-height:348px}
  }
  /* human-layer switcher */
  .hswitch{display:grid;grid-template-columns:300px 1fr;gap:0 44px;margin-top:34px;align-items:stretch}
  .hsw-list{display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--line)}
  .hsw-btn{appearance:none;background:none;border:0;border-left:2px solid transparent;margin-left:-1.5px;text-align:left;padding:12px 18px;cursor:pointer;display:flex;gap:12px;align-items:baseline;font-family:var(--body);font-size:15.5px;font-weight:600;color:var(--muted);transition:color .2s,border-color .2s,background .2s;border-radius:0 10px 10px 0}
  .hsw-btn .n{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
  .hsw-btn:hover{color:var(--ink)}
  .hsw-group{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--rose-deep);padding:16px 18px 6px}
  .hsw-group:first-child{padding-top:4px}
  .hsw-btn.active{color:var(--ink);border-left-color:var(--rose);background:var(--card)}
  .hsw-btn.active .n{color:var(--rose)}
  .hsw-panes{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 34px 24px;box-shadow:0 5px 16px rgba(2,16,57,.05);display:flex;flex-direction:column;overflow:hidden}
  .hsw-pane{display:none}
  .hsw-pane.active{display:flex;flex-direction:column;flex:1;animation:hswfade .35s ease}
  @keyframes hswfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .hsw-panes .num{position:absolute;top:-26px;right:18px;font-family:var(--display);font-weight:500;font-size:150px;line-height:1;color:var(--cream-2);user-select:none;pointer-events:none}
  .hsw-pane h3{position:relative;font-family:var(--display);font-weight:500;font-size:26px;margin:0 0 12px;color:var(--ink)}
  .hsw-pane p{position:relative;margin:0;color:var(--muted);font-size:16px;line-height:1.7;max-width:52ch}
  .hsw-pane .ben{position:relative;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.1px;letter-spacing:.05em;text-transform:uppercase;color:var(--rose-deep);font-weight:600}
  .hsw-pane p+.ben{margin-top:auto}
  @media(max-width:860px){
    .hswitch{grid-template-columns:1fr;gap:14px}
    .hsw-list{flex-direction:row;flex-wrap:wrap;border-left:0;gap:8px;justify-content:flex-start}
    .hsw-btn{border:1px solid var(--line);border-radius:999px;padding:8px 14px;margin:0;font-size:13px;background:var(--card)}
    .hsw-btn .n{display:none}
    .hsw-btn.active{border-color:var(--rose);background:var(--rose-soft)}
    .hsw-group{width:100%;padding:10px 4px 2px}
    .hsw-panes{min-height:0;padding:22px 20px 18px}
    .hsw-panes .num{display:none}
    .hsw-pane .ben{margin-top:16px;padding-top:14px}
  }
  /* chip-mode switcher (many small items) */
  .hswitch--chips{grid-template-columns:1fr;gap:18px;align-items:start}
  .hswitch--chips .hsw-list{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;border-left:0;gap:8px}
  .hswitch--chips .hsw-btn{border:1px solid var(--line);border-radius:999px;padding:8px 15px;margin:0;font-size:13.5px;background:var(--card);border-left:1px solid var(--line)}
  .hswitch--chips .hsw-btn .n{display:none}
  .hswitch--chips .hsw-btn:hover{border-color:var(--rose)}
  .hswitch--chips .hsw-btn.active{border-color:var(--rose);background:var(--rose-soft);color:var(--ink)}
  .hswitch--chips .hsw-group{flex-basis:100%;padding:10px 2px 2px}
  .hswitch--chips .hsw-group:first-child{padding-top:0}
  .hswitch--chips .hsw-panes{min-height:150px;padding:26px 30px 22px}
  .hswitch--chips .hsw-panes .num{font-size:112px;top:-16px}
  @media(prefers-reduced-motion:reduce){.hsw-pane.active{animation:none}}

  /* button hovers: press-worthy */
  .btnrose,.navcta{display:inline-block;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease}
  .btnrose::after,.navcta::after{content:'';position:absolute;top:0;left:-85%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
  .btnrose:hover,.navcta:hover{background:var(--rose-deep);color:#fbf7ef!important;transform:translateY(-2px);box-shadow:0 10px 26px rgba(226,75,142,.42)}
  .btnrose:hover::after,.navcta:hover::after{left:135%}
  .btnghost{transition:transform .18s ease,border-color .25s ease,background-color .25s ease}
  .btnghost:hover{transform:translateY(-2px);border-color:var(--rose);background:rgba(226,75,142,.08)}
  @media(prefers-reduced-motion:reduce){.btnrose,.navcta,.btnghost{transition:none}.btnrose::after,.navcta::after{display:none}}

  /* the studio moment: its colours appear where it's named */
  .grad{display:inline-block;background-image:linear-gradient(90deg,var(--rose),#3fd6bd,var(--rose));background-size:220% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradFlow 4.5s ease-in-out infinite;font-weight:600}
  @keyframes gradFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  .navcta.btnstudio{background-image:linear-gradient(90deg,#d8407f,#18a98c,#d8407f);background-size:220% 100%;background-position:0% 50%;color:#fbf7ef!important;font-weight:600;text-shadow:0 1px 2px rgba(2,16,57,.25);transition:background-position .6s ease,transform .18s ease,box-shadow .25s ease}
  .navcta.btnstudio:hover{background-image:linear-gradient(90deg,#d8407f,#18a98c,#d8407f);background-position:100% 50%;color:#fbf7ef!important;box-shadow:0 10px 26px rgba(63,214,189,.38)}
  @media(prefers-reduced-motion:reduce){.grad{animation:none}}

  /* the arrow points, the pill glints */
  .pillwrap .badge{position:relative;overflow:hidden}
  .pillwrap .badge::after{content:'';position:absolute;top:0;left:-85%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);pointer-events:none}
  html.js [data-rv="draw"].drawgo .badge::after{animation:badgeShine .75s ease .7s 1 both}
  @keyframes badgeShine{from{left:-85%}to{left:135%}}
  @media(prefers-reduced-motion:reduce){html.js [data-rv="draw"].drawgo .badge::after{animation:none;opacity:0}}

  /* hero settles, the brand pill glints */
  .brandpill{position:relative;overflow:hidden}
  .brandpill::after{content:'';position:absolute;top:0;left:-85%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);pointer-events:none}
  html.js .brandpill.in::after{animation:badgeShine .75s ease 1.25s 1 both}
  @media(prefers-reduced-motion:reduce){html.js .brandpill.in::after{animation:none;opacity:0}}
  @media(prefers-reduced-motion:reduce){.orbdot{display:none}}

  .fbot .flegal a{color:#727a96;text-decoration:none;transition:color .2s}
  .fbot .flegal{font-size:13px;color:#727a96}
  .fbot .flegal a:hover{color:#fbf7ef}

  @media(max-width:760px){
    .eyebrow{font-size:10.5px;letter-spacing:.11em;line-height:1.9}
    .eyebrow .ebx{display:none}
  }

  @media(max-width:760px){
    .plug .chips{display:flex;flex-wrap:wrap;gap:5px}
    .plug .chips span{font-size:11px;padding:4px 9px}
    .plugfoot{font-size:12.5px;letter-spacing:.04em;text-transform:none;line-height:1.75}
    .hsw-pane .ben{margin-top:22px;padding-top:16px}
  }


  @media(max-width:860px){
    .s2logo .ls{display:none}
    .s2logo .ln{font-size:23px}
    .s2nav .navtoggle{font-size:29px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transform:translateY(-2px)}
    .s2nav .navcta{display:inline-block;font-size:12.8px;padding:7px 13px;min-width:0}
    .s2nav .nwrap{gap:10px}
    /* the menu becomes a light panel, unmistakably above the page */
    .s2links{background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 24px 50px rgba(2,16,57,.35)}
    .s2links a{color:var(--ink);border-bottom:1px solid var(--line)}
    .s2links a:hover,.s2links a.active{color:var(--rose-deep)}
  }
  .pgdim{position:fixed;inset:0;background:rgba(2,16,57,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;z-index:99}
  html.menuopen .pgdim{opacity:1;visibility:visible}

  @media(max-width:760px){
    .heroactions{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;box-sizing:border-box}
    .hero > .heroactions{padding-left:20px;padding-right:20px}
    .heroactions a{text-align:center;min-width:0;box-sizing:border-box;padding-left:12px;padding-right:12px;font-size:15px;white-space:nowrap}
  }


  /* ============================================================
     MERGED DESIGN SYSTEM — rules that live on other pages and
     were not in index.html. Added so this shell carries the whole
     system, not one page of it.
     ============================================================ */

  /* ---- from studio.html (absent from index.html) ---- */
  /* setup panel: the pipeline builds left to right */
  html.js [data-rv="setup"] .sg{opacity:0;transform:translateX(-16px);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  html.js [data-rv="setup"].in .sg{opacity:1;transform:none}
  html.js [data-rv="setup"].in .s1{transition-delay:.05s}
  html.js [data-rv="setup"].in .s2{transition-delay:.42s}
  html.js [data-rv="setup"].in .s3{transition-delay:.58s}
  html.js [data-rv="setup"].in .s4{transition-delay:.95s}
  html.js [data-rv="setup"].in .s5{transition-delay:1.1s}
  html.js [data-rv="setup"].in .s6{transition-delay:1.5s}
  html.js [data-rv="setup"].in .s7{transition-delay:1.65s}
  @media(prefers-reduced-motion:reduce){
  html.js [data-rv="setup"] .sg{opacity:1!important;transform:none!important;transition:none}
}
  /* hero: aurora blooms in, wordmark shimmers */
  .aur .a{opacity:0;animation:aurBloomA 1.9s ease-out .2s forwards,aurA 16s ease-in-out 2.2s infinite alternate}
  .aur .b{opacity:0;animation:aurBloomB 2.2s ease-out .45s forwards,aurB 20s ease-in-out 2.7s infinite alternate}
  @keyframes aurBloomA{from{opacity:0;filter:blur(120px)}to{opacity:.22;filter:blur(90px)}}
  @keyframes aurBloomB{from{opacity:0;filter:blur(130px)}to{opacity:.17;filter:blur(90px)}}
  @keyframes gradPop{from{opacity:0}to{opacity:1}}
  /* setup panel: the cores breathe */
  .pulseChg,.pulseCore{transform-box:fill-box;transform-origin:center;animation:svgPulse 3.2s ease-out infinite}
  .pulseCore{animation-delay:1.6s}
  @keyframes svgPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.1);opacity:0}100%{transform:scale(1.1);opacity:0}}
  /* dashboard: panels assemble after the headline */
  html.js .sdash .sd-card,html.js .sdash .sd-move{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  html.js .sdash.in .sd-card,html.js .sdash.in .sd-move{opacity:1;transform:none}
  html.js .sdash.in .sd-cols .sd-card:nth-child(1){transition-delay:.55s}
  html.js .sdash.in .sd-cols .sd-card:nth-child(2){transition-delay:.72s}
  html.js .sdash.in .sd-cols .sd-card:nth-child(3){transition-delay:.89s}
  html.js .sdash.in .sd-move{transition-delay:1.1s}
  /* connector wall: the switchboard lights up */
  html.js .connwall .cgrp{opacity:0;transition:opacity .45s ease}
  html.js .connwall.in .cgrp{opacity:1}
  html.js .connwall .chip{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
  html.js .connwall.in .chip{opacity:1;transform:none}
  html.js .connwall.in > div:nth-child(1) .cgrp{transition-delay:0.00s}
  html.js .connwall.in > div:nth-child(1) .chip:nth-of-type(1){transition-delay:0.12s}
  html.js .connwall.in > div:nth-child(1) .chip:nth-of-type(2){transition-delay:0.16s}
  html.js .connwall.in > div:nth-child(1) .chip:nth-of-type(3){transition-delay:0.20s}
  html.js .connwall.in > div:nth-child(1) .chip:nth-of-type(4){transition-delay:0.24s}
  html.js .connwall.in > div:nth-child(1) .chip:nth-of-type(5){transition-delay:0.28s}
  html.js .connwall.in > div:nth-child(1) .chip:nth-of-type(6){transition-delay:0.32s}
  html.js .connwall.in > div:nth-child(1) .chip:nth-of-type(7){transition-delay:0.36s}
  html.js .connwall.in > div:nth-child(1) .chip:nth-of-type(8){transition-delay:0.40s}
  html.js .connwall.in > div:nth-child(2) .cgrp{transition-delay:0.12s}
  html.js .connwall.in > div:nth-child(2) .chip:nth-of-type(1){transition-delay:0.24s}
  html.js .connwall.in > div:nth-child(2) .chip:nth-of-type(2){transition-delay:0.28s}
  html.js .connwall.in > div:nth-child(2) .chip:nth-of-type(3){transition-delay:0.32s}
  html.js .connwall.in > div:nth-child(2) .chip:nth-of-type(4){transition-delay:0.36s}
  html.js .connwall.in > div:nth-child(2) .chip:nth-of-type(5){transition-delay:0.40s}
  html.js .connwall.in > div:nth-child(2) .chip:nth-of-type(6){transition-delay:0.44s}
  html.js .connwall.in > div:nth-child(2) .chip:nth-of-type(7){transition-delay:0.48s}
  html.js .connwall.in > div:nth-child(2) .chip:nth-of-type(8){transition-delay:0.52s}
  html.js .connwall.in > div:nth-child(3) .cgrp{transition-delay:0.24s}
  html.js .connwall.in > div:nth-child(3) .chip:nth-of-type(1){transition-delay:0.36s}
  html.js .connwall.in > div:nth-child(3) .chip:nth-of-type(2){transition-delay:0.40s}
  html.js .connwall.in > div:nth-child(3) .chip:nth-of-type(3){transition-delay:0.44s}
  html.js .connwall.in > div:nth-child(3) .chip:nth-of-type(4){transition-delay:0.48s}
  html.js .connwall.in > div:nth-child(3) .chip:nth-of-type(5){transition-delay:0.52s}
  html.js .connwall.in > div:nth-child(3) .chip:nth-of-type(6){transition-delay:0.56s}
  html.js .connwall.in > div:nth-child(3) .chip:nth-of-type(7){transition-delay:0.60s}
  html.js .connwall.in > div:nth-child(3) .chip:nth-of-type(8){transition-delay:0.64s}
  html.js .connwall.in > div:nth-child(4) .cgrp{transition-delay:0.36s}
  html.js .connwall.in > div:nth-child(4) .chip:nth-of-type(1){transition-delay:0.48s}
  html.js .connwall.in > div:nth-child(4) .chip:nth-of-type(2){transition-delay:0.52s}
  html.js .connwall.in > div:nth-child(4) .chip:nth-of-type(3){transition-delay:0.56s}
  html.js .connwall.in > div:nth-child(4) .chip:nth-of-type(4){transition-delay:0.60s}
  html.js .connwall.in > div:nth-child(4) .chip:nth-of-type(5){transition-delay:0.64s}
  html.js .connwall.in > div:nth-child(4) .chip:nth-of-type(6){transition-delay:0.68s}
  html.js .connwall.in > div:nth-child(4) .chip:nth-of-type(7){transition-delay:0.72s}
  html.js .connwall.in > div:nth-child(4) .chip:nth-of-type(8){transition-delay:0.76s}
  html.js .connwall.in > div:nth-child(5) .cgrp{transition-delay:0.48s}
  html.js .connwall.in > div:nth-child(5) .chip:nth-of-type(1){transition-delay:0.60s}
  html.js .connwall.in > div:nth-child(5) .chip:nth-of-type(2){transition-delay:0.64s}
  html.js .connwall.in > div:nth-child(5) .chip:nth-of-type(3){transition-delay:0.68s}
  html.js .connwall.in > div:nth-child(5) .chip:nth-of-type(4){transition-delay:0.72s}
  html.js .connwall.in > div:nth-child(5) .chip:nth-of-type(5){transition-delay:0.76s}
  html.js .connwall.in > div:nth-child(5) .chip:nth-of-type(6){transition-delay:0.80s}
  html.js .connwall.in > div:nth-child(5) .chip:nth-of-type(7){transition-delay:0.84s}
  html.js .connwall.in > div:nth-child(5) .chip:nth-of-type(8){transition-delay:0.88s}
  html.js .connwall.in > div:nth-child(6) .cgrp{transition-delay:0.60s}
  html.js .connwall.in > div:nth-child(6) .chip:nth-of-type(1){transition-delay:0.72s}
  html.js .connwall.in > div:nth-child(6) .chip:nth-of-type(2){transition-delay:0.76s}
  html.js .connwall.in > div:nth-child(6) .chip:nth-of-type(3){transition-delay:0.80s}
  html.js .connwall.in > div:nth-child(6) .chip:nth-of-type(4){transition-delay:0.84s}
  html.js .connwall.in > div:nth-child(6) .chip:nth-of-type(5){transition-delay:0.88s}
  html.js .connwall.in > div:nth-child(6) .chip:nth-of-type(6){transition-delay:0.92s}
  html.js .connwall.in > div:nth-child(6) .chip:nth-of-type(7){transition-delay:0.96s}
  html.js .connwall.in > div:nth-child(6) .chip:nth-of-type(8){transition-delay:1.00s}
  @media(prefers-reduced-motion:reduce){
  .aur .a,.aur .b{animation:none;opacity:.18}
  .pulseChg,.pulseCore{animation:none;opacity:0}
  html.js .plugins .plug .chips span,html.js .sdash .sd-card,html.js .sdash .sd-move,html.js .hswitch .hsw-list > *,html.js .stage .dest,html.js .stage .sfoot,html.js [data-rv="feed"] .omove,html.js [data-rv="feed"] .ohold,html.js .connwall .cgrp,html.js .connwall .chip{opacity:1!important;transform:none!important;transition:none!important}
}
  .ctaglow{position:relative;overflow:hidden}
  .ctaglow .wrap{position:relative;z-index:2}
  .ctaglow .aur .a{opacity:.13}
  .ctaglow .aur .b{opacity:.11}
  .aur{position:absolute;inset:0;pointer-events:none;z-index:1}
  .aur i{position:absolute;border-radius:50%;filter:blur(90px)}
  .aur .a{width:560px;height:560px;background:#2fd0b5;opacity:.20;top:-200px;left:-140px;animation:aurA 16s ease-in-out infinite alternate}
  .aur .b{width:640px;height:640px;background:#e24b8e;opacity:.16;top:-120px;right:-200px;animation:aurB 20s ease-in-out infinite alternate}
  @keyframes aurA{to{transform:translate(70px,40px) scale(1.08)}}
  @keyframes aurB{to{transform:translate(-60px,30px) scale(.94)}}
  @media(prefers-reduced-motion:reduce){
  .aur .a,.aur .b{animation:none}
}
  /* studio dashboard — dark glass */
  .sdash{background:linear-gradient(168deg,#0e2260,#08173f 60%,#071137);border:1px solid #26437f;border-radius:20px;padding:24px 26px 22px;box-shadow:0 22px 60px rgba(0,0,0,.35);text-align:left}
  .sdash .sd-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #1e336f;padding-bottom:14px}
  .sdash .sd-t{font-family:var(--display);font-size:18px;color:#fbf7ef}
  .sdash .sd-live{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#57e3c8;display:flex;align-items:center;gap:7px}
  .sdash .sd-live i{width:7px;height:7px;border-radius:50%;background:#3fd6bd;box-shadow:0 0 0 0 rgba(63,214,189,.5);animation:sdping 2.2s ease-out infinite}
  @keyframes sdping{0%{box-shadow:0 0 0 0 rgba(63,214,189,.45)}70%{box-shadow:0 0 0 9px rgba(63,214,189,0)}100%{box-shadow:0 0 0 0 rgba(63,214,189,0)}}
  .sdash .sd-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;padding:20px 0 4px}
  .sdash .sd-k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#8b93b3;margin-bottom:8px}
  .sdash .sd-big{font-family:var(--display);font-weight:500;font-size:44px;color:#fbf7ef;line-height:1}
  .sdash .sd-big .of{font-size:23px;color:#5a6aa0}
  .sdash .sd-bar{height:9px;border-radius:5px;background:#0a1947;margin:14px 0 8px;overflow:hidden}
  .sdash .sd-bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#3fd6bd,#57e3c8);transition:width 1.2s cubic-bezier(.2,.7,.2,1) .2s}
  .sdash.in .sd-bar i{width:61%}
  .sdash .sd-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#57e3c8}
  .sdash .spark{display:block;width:100%;height:56px;margin-top:16px}
  .sdash .spark .ln{fill:none;stroke:#3fd6bd;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
  .sdash.in .spark .ln{transition:stroke-dashoffset 1.6s ease .4s;stroke-dashoffset:0}
  .sdash .spark .ar{fill:url(#sdgrad);opacity:0}
  .sdash.in .spark .ar{transition:opacity .8s ease 1.6s;opacity:.35}
  .sdash .met{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid #16295f}
  .sdash .met:last-child{border-bottom:0}
  .sdash .met .l{font-size:13.5px;color:#aab2cf}
  .sdash .met .n{font-family:var(--display);font-size:22px;color:#fbf7ef}
  .sdash .met .d{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:#57e3c8;margin-left:8px}
  .sdash .sd-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:14px 0}
  .sdash .sd-card{background:rgba(10,25,71,.55);border:1px solid #1e336f;border-radius:13px;padding:14px 16px}
  .sdash .sd-card .row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:6px 0;font-size:12.8px;color:#dfe4f2;line-height:1.4}
  .sdash .sd-card .row .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
  .sdash .st.teal{color:#57e3c8}
  .sdash .st.rose{color:#f3a9ce}
  .sdash .st.dim{color:#5a6aa0}
  .sdash .sd-move{background:linear-gradient(90deg,rgba(226,75,142,.16),rgba(63,214,189,.12));border:1px solid rgba(226,75,142,.35);border-radius:13px;padding:14px 18px;display:flex;gap:14px;align-items:baseline}
  .sdash .sd-move .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#f3a9ce;white-space:nowrap}
  .sdash .sd-move .t{font-family:var(--display);font-size:17.5px;color:#fbf7ef;line-height:1.35}
  @media(max-width:880px){
  .sdash .sd-grid{grid-template-columns:1fr}
  .sdash .sd-cols{grid-template-columns:1fr}
  .sdash .sd-big{font-size:36px}
}
  @media(prefers-reduced-motion:reduce){
  .sdash .sd-live i{animation:none}
  .sdash .sd-bar i,.sdash .spark .ln,.sdash .spark .ar{transition:none}
  .sdash.in .spark .ln{stroke-dashoffset:0}
  .sdash.in .spark .ar{opacity:.35}
}
  .gmail .typing::after{content:'▋';color:var(--rose);margin-left:1px;animation:gsblink .75s step-end infinite}
  @keyframes gsblink{50%{opacity:0}}
  @media(max-width:760px){
  .sec-outbound .grid{display:none}
  .connwall{display:none!important}
}
  .sdash{margin-top:28px}
  @media(max-width:760px){
  .aur .a{animation:none;opacity:.10}
  .aur .b{animation:none;opacity:.08}
  .sdash .sd-top{flex-wrap:wrap;gap:6px 12px;align-items:center}
  .sdash .sd-t{white-space:nowrap;font-size:16.5px}
  .sdash .sd-live{white-space:nowrap;font-size:9px;letter-spacing:.09em}
}
  @media(max-width:760px){
  .sdash{padding:18px 16px 16px}
  .sdash .sd-grid{gap:18px;padding:16px 0 2px}
  .sdash .sd-big{font-size:33px}
  .sdash .spark{height:42px;margin-top:12px}
  .sdash .met{padding:9px 0}
  .sdash .sd-card{padding:11px 13px}
  .sdash .sd-cols{gap:10px;margin:12px 0}
  .sdash .sd-move{padding:12px 14px;flex-direction:column;gap:6px}
}

  /* ---- from services.html (absent from index.html) ---- */
  /* fit checklist */
  .fitcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 32px;box-shadow:0 5px 16px rgba(2,16,57,.05);display:grid;grid-template-columns:1fr 1fr;gap:22px 40px;margin-top:34px}
  .fitrow{display:flex;gap:14px;align-items:flex-start;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
  .fitrow h4{font-family:var(--display);font-weight:500;font-size:18.5px;margin:0 0 4px;color:var(--ink)}
  .fitrow p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
  .fck{flex:none;width:26px;height:26px;margin-top:2px}
  .fck circle{fill:var(--rose-soft);stroke:#f3a9ce;stroke-width:1.4}
  .fck path{fill:none;stroke:var(--rose-deep);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
  html.js [data-rv="fitlist"].in .fitrow{opacity:1;transform:none}
  html.js [data-rv="fitlist"].in .fck path{transition:stroke-dashoffset .45s ease}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(1){transition-delay:0.00s}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(1) .fck path{stroke-dashoffset:0;transition-delay:0.25s}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(2){transition-delay:0.12s}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(2) .fck path{stroke-dashoffset:0;transition-delay:0.37s}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(3){transition-delay:0.24s}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(3) .fck path{stroke-dashoffset:0;transition-delay:0.49s}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(4){transition-delay:0.36s}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(4) .fck path{stroke-dashoffset:0;transition-delay:0.61s}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(5){transition-delay:0.48s}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(5) .fck path{stroke-dashoffset:0;transition-delay:0.73s}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(6){transition-delay:0.60s}
  html.js [data-rv="fitlist"].in .fitrow:nth-child(6) .fck path{stroke-dashoffset:0;transition-delay:0.85s}
  @media(max-width:760px){
  .fitcard{grid-template-columns:1fr;padding:22px 20px}
}
  @media(prefers-reduced-motion:reduce){
  .fitrow{opacity:1!important;transform:none!important;transition:none}
  .fck path{stroke-dashoffset:0!important;transition:none}
}

  /* ---- legal-page styles (from privacy.html) ---- */
  .legal{max-width:780px}
  .legal .upd{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:26px}
  .legal h2{font-family:var(--display);font-weight:500;font-size:26px;color:var(--ink);margin:44px 0 12px}
  .legal h3{font-family:var(--display);font-weight:500;font-size:19px;color:var(--ink);margin:26px 0 8px}
  .legal p,.legal li{color:var(--muted);font-size:15.5px;line-height:1.75;margin:0 0 12px}
  .legal ul{padding-left:22px;margin:0 0 14px}
  .legal .tbd{background:var(--rose-soft);color:var(--rose-deep);padding:1px 7px;border-radius:6px;font-family:var(--mono);font-size:12px}
  .legal .note{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:14px;color:var(--muted)}
  .legal{overflow-wrap:anywhere}

  /* ---- richer .grad from studio.html: adds the intro fade (gradPop) ---- */
  .grad{display:inline-block;background-image:linear-gradient(90deg,var(--rose),#3fd6bd,var(--rose));background-size:220% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradPop 1.2s ease .4s both,gradFlow 4.5s ease-in-out 1.6s infinite;will-change:background-position}

  /* ============================================================
     NAV DROPDOWNS — lifted verbatim from _components.html.
     Not present in _shell.html; the shell carries the flat nav.
     ============================================================ */
  .s2links li.hasdrop{position:relative}
  .droptog{appearance:none;background:none;border:0;cursor:pointer;font-family:var(--body);font-size:15.4px;font-weight:500;color:#c9d0e8;padding:0;display:inline-flex;align-items:center;gap:7px;transition:color .2s;line-height:inherit}
  .droptog:hover,.droptog[aria-expanded="true"]{color:#fff}
  .caret{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid currentColor;opacity:.75;transition:transform .22s ease}
  .droptog[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .dropmenu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:214px;background:#152246;border:1px solid #26356b;border-radius:16px;padding:14px 0 10px;box-shadow:0 26px 60px -18px rgba(0,0,0,.65);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:60}
  .hasdrop.open .dropmenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .dropmenu::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:16px}
  .dropgroup{font-family:var(--mono);font-size:10.4px;letter-spacing:.16em;text-transform:uppercase;color:#7f8bb5;padding:0 22px 11px}
  .dropmenu a{display:flex;align-items:center;gap:8px;padding:9px 22px;font-size:15.6px;color:#dfe3f0;text-decoration:none;transition:background .16s,color .16s}
  .dropmenu a:hover{background:#1d2c58;color:#fff}
  .dstar{color:var(--rose);font-size:11px;line-height:1}
  @media(max-width:860px){
    .droptog{width:100%;justify-content:space-between;font-size:17px;color:#f3efe4;padding:13px 0}
    .dropmenu{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;min-width:0;background:transparent;border:0;box-shadow:none;padding:0 0 8px;display:none}
    .hasdrop.open .dropmenu{display:block;transform:none}
    .dropmenu a{padding:9px 0 9px 16px;border-left:1px solid #26356b;margin-left:2px}
    .dropmenu a:hover{background:transparent}
    .dropgroup{padding:2px 0 8px 16px}
  }

  /* ============================================================
     HOMEPAGE ADDITIONS
     New components the copy needs that the shell had no rules for,
     plus overrides where an existing component's shape did not
     match the copy (3-up .numbers, 4-up .setup-cards, 8-row
     .fitlist, per-instance .ringmark).
     Every new animation has a prefers-reduced-motion branch at the
     foot of this block.
     ============================================================ */

  /* --- shared type helpers --- */
  .subhead{font-family:var(--display);font-weight:500;font-size:22.3px;line-height:1.3;color:var(--ink);margin:14px 0 0;letter-spacing:-.2px}
  .dark .subhead{color:#fbf7ef}
  .narrowwrap{max-width:820px}
  .herofoot{margin:26px auto 0;font-size:14.8px;color:var(--muted);line-height:1.6;max-width:60ch;text-wrap:balance}

  /* --- the pill, with the arrow removed ---------------------------
     .claude-mark carries the logo as a background image but ships
     with no width or height in any of the four reference files, so
     it has never rendered anywhere. Sized here.
     The shine used to hang off the arrow driver's .drawgo. With no
     arrow it fires on the standard reveal instead, reusing the
     existing .pillwrap .badge::after and the badgeShine keyframe. */
  .pillwrap .badge .claude-mark{width:15px;height:15px;margin-right:9px;flex:none}
  html.js .pillwrap[data-rv="up"].in .badge::after{animation:badgeShine .75s ease .9s 1 both}
  @media(prefers-reduced-motion:reduce){
    html.js .pillwrap[data-rv="up"].in .badge::after{animation:none;opacity:0}
  }

  /* --- hero rhythm ------------------------------------------------
     .badge carries margin-top:26px for the context it was lifted
     from. Inside the inline-block .pillwrap that pushed the pill
     down and left nothing beneath it, so the pill and the kicker
     touched. The margin moves below the pill.

     The gaps are then grouped rather than uniform, so the eye can
     tell what belongs together: kicker + headline + lead read as one
     block, with wider air separating the pill above it, the action
     below it, and the proof below that. */
  .hero{padding-top:72px;padding-bottom:72px}
  .hero .pillwrap{display:block;margin:0 0 36px}
  .hero .pillwrap .badge{margin-top:0}
  .hero .eyebrow{margin-bottom:10px}
  .hero .lead{margin-top:22px}
  .hero .heroactions{margin-top:40px}
  .hero .numbers.n3{margin-top:48px}
  .hero .herofoot{margin-top:20px}

  /* --- single-button hero actions ---------------------------------
     Below 760px the base rules put .heroactions into a 1fr 1fr grid,
     built for the scaffold's two-button hero. Every CTA on this page
     is a single button, so it was landing in column one: left
     aligned at half width. One centred column instead, which also
     stacks cleanly if a second button is ever added. */
  @media(max-width:760px){
    .hero h1{font-size:35px;line-height:1.1}
    .heroactions{grid-template-columns:1fr;justify-items:center}
    .heroactions a{width:auto;max-width:100%}
  }

  /* --- 3-up hero numbers (base grid is 4-up) --- */
  .numbers.n3{grid-template-columns:repeat(3,1fr)}
  .numbers.n3 .nlbl{text-wrap:balance}
  .nval,.caseres{text-wrap:balance}
  .numbers.n3 .nval{white-space:nowrap}
  @media(max-width:980px){.numbers.n3 .nval{white-space:normal}}
  @media(max-width:760px){.numbers.n3{grid-template-columns:1fr}.numbers.n3 .nitem{border-right:0;border-bottom:1px solid var(--line);padding:20px 22px}.numbers.n3 .nitem:last-child{border-bottom:0}.numbers.n3 .nval{font-size:29px}}

  /* --- plain lists (problems, guarantees, rules) --- */
  .plainlist{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
  .plainlist li{position:relative;padding-left:22px;font-size:15.4px;line-height:1.6;color:var(--muted)}
  .dark .plainlist li{color:#c4c8da}
  .plainlist li::before{content:'';position:absolute;left:1px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--rose-deep)}
  .plainlist.wide li{font-size:16.4px;padding-left:26px}
  .plainlist b{color:var(--ink);font-weight:600}
  .dark .plainlist b{color:#fbf7ef}

  /* --- 2 · scattered fragments / 5 · assembled fragments --- */

  /* Prose and the symptom list stack on the left, the scatter sits
     beside them. On a phone the scatter moves between the two, which
     breaks a thirteen-line run of body copy and puts the picture where
     the prose stops being abstract. */
  .psplit{display:grid;grid-template-columns:1fr 1fr;gap:0 52px;align-items:start;margin-top:0}
  .psplit .pcol > .ptext{margin-top:26px}
  /* the scatter starts level with the kicker, which sits it a touch
     high against the headline block — dropped so the two columns
     also finish level. The stacked layout overrides this below. */
  .psplit .pfield{margin-top:40px}
  .psplit .ptext > :first-child{margin-top:0}
  /* the second paragraph is the turn, so it darkens rather than recedes */
  .psplit .ptext p:last-child{color:var(--ink);margin-top:18px}

  /* --- the fragments, as torn scraps -------------------------------
     They were tidy rounded cards with a hairline border and a uniform
     shadow: UI furniture illustrating the absence of a system, which
     is a contradiction. Now torn paper — no radius, no border, a
     ragged edge, varied stock, and a shadow that sits rather than
     glows. Four tears cycle so no two neighbours match.

     No handwritten face is used. The three self-hosted families are
     Fraunces, Hanken Grotesk and IBM Plex Mono; a script face would
     mean a new binary or the Google Fonts request the package avoids
     on purpose. The material carries the character, not the letters.

     The tear lives on an inner element because clip-path is applied
     after filters, so a drop-shadow on the same element is clipped
     away with it. */
  .frag{--r:0deg;--fs:13.6px;
        --tear:0% 9%,5% 1%,26% 6%,49% 0%,72% 5%,91% 1%,100% 8%,98% 38%,100% 66%,97% 91%,75% 100%,51% 94%,27% 100%,6% 93%,2% 58%,1% 28%;
        --paper:#fffdf8;
        display:inline-block;transform:rotate(var(--r));
        filter:drop-shadow(0 4px 6px rgba(2,16,57,.14)) drop-shadow(0 1px 0 rgba(2,16,57,.05))}
  .fragp{display:block;background:var(--paper);
         font-family:var(--body);font-weight:500;font-size:var(--fs);
         color:var(--navy-2);padding:10px 17px 11px;white-space:nowrap;
         clip-path:polygon(var(--tear))}

  .fragfield{position:relative;height:292px;margin-top:0}
  .fragfield .frag{position:absolute}
  /* Uneven on purpose. The brief asks for loose, uneven and slightly
     overlapping — an even left/right zigzag reads as a pattern, which
     is the opposite of the point. Intervals and offsets vary, and two
     pairs are close enough to overlap. */
  .fragfield .f1{top:0;left:16.5%;--drop:-26px;--r:-6deg;--fs:14.4px;--paper:#fffdf8}
  .fragfield .f2{top:11%;left:60%;--drop:-46px;--r:3deg;--fs:12.8px;--paper:#fdfaf1;--tear:1% 6%,8% 0%,30% 5%,55% 1%,78% 6%,95% 0%,99% 10%,100% 42%,98% 72%,100% 94%,71% 99%,46% 93%,22% 100%,4% 92%,0% 55%,2% 25%}
  .fragfield .f3{top:25%;left:23.5%;--drop:-64px;--r:1.5deg;--fs:13.6px;--paper:#fffef9;--tear:0% 7%,6% 2%,21% 5%,44% 0%,68% 6%,88% 2%,100% 10%,97% 36%,99% 68%,96% 93%,79% 98%,54% 100%,30% 94%,8% 100%,1% 62%,3% 30%}
  .fragfield .f4{top:32%;left:52.5%;--drop:-76px;--r:-4deg;--fs:14.2px;--paper:#fbf8ef;--tear:2% 8%,10% 0%,33% 6%,58% 1%,80% 5%,97% 1%,100% 12%,98% 44%,100% 70%,97% 92%,73% 100%,48% 95%,24% 99%,3% 94%,0% 52%,1% 22%}
  .fragfield .f5{top:51%;left:13.5%;--drop:-98px;--r:5deg;--fs:13px;--paper:#fffdf6}
  .fragfield .f6{top:58%;left:49%;--drop:-108px;--r:-2deg;--fs:13.8px;--paper:#fcf9f2;--tear:0% 7%,6% 2%,21% 5%,44% 0%,68% 6%,88% 2%,100% 10%,97% 36%,99% 68%,96% 93%,79% 98%,54% 100%,30% 94%,8% 100%,1% 62%,3% 30%}
  .fragfield .f7{top:79%;left:31.5%;--drop:-130px;--r:3.5deg;--fs:12.9px;--paper:#fffef8;--tear:1% 6%,8% 0%,30% 5%,55% 1%,78% 6%,95% 0%,99% 10%,100% 42%,98% 72%,100% 94%,71% 99%,46% 93%,22% 100%,4% 92%,0% 55%,2% 25%}
  .mcap-always{font-size:13.4px;color:var(--faint);text-align:center;margin-top:12px;font-style:italic}
  .mfragfield{height:332px;max-width:360px;margin-left:auto;margin-right:auto}
  .mfragfield .fragp{padding:8px 13px 9px}
  .mfragfield .f1{--fs:13.2px} .mfragfield .f2{--fs:11.8px}
  .mfragfield .f3{--fs:12.4px} .mfragfield .f4{--fs:13px}
  .mfragfield .f5{--fs:12px}   .mfragfield .f6{--fs:12.6px}
  .mfragfield .f7{--fs:11.9px}
  /* Section 2's headline turns on its second sentence, so the emphasis
     takes its own line and a heavier cut as well as the rose. Set as a
     block rather than a <br> so it holds in both languages. */
  /* brand rose scores 2.87 on cream; large text needs 3.0. The deeper
     cut clears it at 3.76 and still reads as the same pink. */
  section:not(.dark):not(.hero) h2 em{color:#c43d7c}
  #problem h2 em{display:block;font-weight:600;margin-top:.12em}
  /* The hero turns on the same phrase, so it breaks the same way — but
     only where both halves fit a line. On a phone the forced break just
     buys a fourth ragged line and pushes the stats below the fold, so
     there it wraps naturally (see the 640px block). */
  .hero h1 em{display:block;margin-top:.06em}

  /* last sliver of a neighbour's text on the narrowest phones */
  .mfragfield .f4{--fs:12.4px}

  .mfragfield .f1{top:0;left:10%}     .mfragfield .f2{top:12%;left:49%}
  .mfragfield .f3{top:26%;left:9%}   .mfragfield .f4{top:36%;left:50%}
  .mfragfield .f5{top:52%;left:8%}    .mfragfield .f6{top:59%;left:53%}
  .mfragfield .f7{top:80%;left:21%}


  /* --- 5 · the 31-cell grid --- */

  /* --- 6 · the growth loop --- */
  .loopwrap{margin-top:34px}
  .loopwrap svg{width:100%;height:auto;display:block}
  .mloopwrap{max-width:360px;margin-left:auto;margin-right:auto}
  .loopcap{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#f3a9ce;text-align:center;margin-top:18px}

  /* --- 4 · the staged card (extends .gmail) --- */
  .gmail.staged{max-width:720px;margin:34px auto 0}
  .gmail .gbar .gt{font-family:var(--mono);font-size:10.4px;letter-spacing:.15em;text-transform:uppercase;color:var(--rose-deep);font-weight:600}
  .gobs{padding:20px 22px 16px}
  .gobsk{display:block;font-family:var(--mono);font-size:9.6px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
  .gobst{display:block;font-family:var(--display);font-weight:500;font-size:20.4px;line-height:1.35;color:var(--ink)}
  .gdraftbox{margin:0 22px;background:var(--rose-soft);border:1px solid #f3d3e4;border-radius:12px;padding:15px 17px}
  .gdk{font-family:var(--mono);font-size:9.6px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:7px}
  .gdraftbox .gbody{margin:0;font-size:14.6px;line-height:1.62;color:var(--ink)}
  .gnext.doubt{margin-top:16px;font-style:italic;color:var(--faint)}

  /* --- 7 · the three tool frames --- */
  .toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
  .surface.tool{padding:18px 18px 16px;display:flex;flex-direction:column}
  .toolline{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:13.4px}
  .tl-k{font-family:var(--mono);font-size:9.4px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);min-width:52px;flex:none}
  .tl-v{color:var(--muted);word-break:break-word}
  .tl-v.strong{color:var(--ink);font-weight:600}
  .toolbody{font-size:13.8px;line-height:1.6;color:var(--muted);margin:10px 0 0}
  .toolstate{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:9.6px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-deep)}
  .seqrow{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--line)}
  .seqrow:last-of-type{border-bottom:0}
  .sq{font-family:var(--mono);font-size:10px;width:20px;height:20px;border-radius:6px;background:var(--cream-2);color:var(--navy-2);display:flex;align-items:center;justify-content:center;flex:none}
  .sqt{font-size:13.8px;color:var(--ink);flex:1}
  .sqd{font-family:var(--mono);font-size:10px;color:var(--faint)}

  /* --- 9 · connectors + the plain-text file --- */
  .stackhalves{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-top:34px}
  .stackhalves .connbar{margin-top:0}
  .dnafile{background:#0b1d52;border:1px solid #26356b;border-radius:22px;overflow:hidden}
  .dfbar{display:flex;justify-content:space-between;align-items:baseline;padding:13px 18px;border-bottom:1px solid #26356b}
  .dfname{font-family:var(--mono);font-size:12px;color:#dfe3f0}
  .dfstate{font-family:var(--mono);font-size:9.4px;letter-spacing:.11em;text-transform:uppercase;color:#f3a9ce}
  .dfbody{margin:0;padding:16px 18px 20px;font-family:var(--mono);font-size:12.2px;line-height:1.85;color:#c4c8da;white-space:pre-wrap;overflow-x:auto}
  .dfl{display:block}
  .dfh{color:#7f8bb5}
  .dfe{color:#fff;background:rgba(226,75,142,.22);border-left:2px solid var(--rose);padding-left:8px;margin-left:-10px}
  .dfmuted{color:#5c6690;font-style:italic}

  /* --- 10 · before / after --- */
  .bagrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
  .baline{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.8px}
  .baline:last-of-type{border-bottom:0}
  .bak{font-family:var(--mono);font-size:9.4px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:3px}
  .bav{color:var(--ink);line-height:1.5}

  /* --- 11 · one voice, two formats --- */
  .anglehead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:34px}
  .anglehead .hlabel{color:var(--rose-deep);margin-bottom:0}
  .anglesrc{font-family:var(--mono);font-size:11px;color:var(--faint)}
  .vpair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:14px}
  .vpbody{font-size:14.6px;line-height:1.66;color:var(--muted);margin:0}

  /* --- 12 · fit, two equal columns --- */
  .fitcol{display:flex;flex-direction:column;gap:16px}
  .fithead{font-family:var(--mono);font-size:10.6px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .fithead.yes{color:var(--rose-deep)}
  .fithead.no{color:var(--faint)}
  .fitcard .fitrow p{font-size:15.4px}
  .fck{flex:none;width:20px;height:20px;color:var(--rose);display:block}
  .fck svg{width:20px;height:20px;display:block}
  .fck.fx{color:#a8adba}
  .fitnote{margin-top:18px;font-size:14.4px;color:var(--faint);font-style:italic}

  /* --- 13 · unnamed line, the hinge, Douglas --- */
  .unnamed{margin-top:24px;font-size:14.8px;color:#aab2cf;line-height:1.6;max-width:74ch}
  .hinge{text-align:center;margin-top:56px;padding-top:44px;border-top:1px solid var(--dline)}
  .hingeline{font-size:16.4px;color:#c4c8da;margin:0}
  .hingebridge{font-family:var(--display);font-weight:500;font-size:26px;line-height:1.3;color:#fbf7ef;margin:20px auto 0;max-width:26ch;letter-spacing:-.3px}

  /* --- 15 · four setup steps (base grid is 5-up) --- */
  .setup-cards.s4{grid-template-columns:repeat(4,1fr)}
  .pdur{margin-top:12px;display:inline-block;font-family:var(--mono);font-size:9.6px;letter-spacing:.11em;text-transform:uppercase;color:var(--rose-deep);background:var(--rose-soft);border-radius:999px;padding:4px 10px}
  .based{margin-top:26px;font-size:14.4px;color:var(--muted)}

  /* --- 16 · questions --- */
  .faq{margin-top:28px;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;position:relative;font-family:var(--display);font-weight:500;font-size:18.4px;line-height:1.35;color:var(--ink)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'';position:absolute;right:6px;top:26px;width:9px;height:9px;border-right:1.6px solid var(--rose);border-bottom:1.6px solid var(--rose);transform:rotate(45deg);transition:transform .22s ease}
  .faq details[open] summary::after{transform:rotate(-135deg)}
  .faq summary:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}
  .faq .fa{padding:0 46px 20px 0;font-size:15.4px;line-height:1.68;color:var(--muted)}
  .faq .fa a{color:var(--rose-deep);text-decoration:underline;text-underline-offset:2px}

  /* --- 17 · the loop, as a bookend --- */
  .loopmark{max-width:180px;margin:0 auto 22px}
  .loopmark svg{width:100%;height:auto;display:block}

  /* ============================================================
     MOTION — new sequences
     ============================================================ */

  /* scatter: fragments arrive loose and unconnected */
  /* The scraps fall from above the field and settle. Each starts higher
     the lower it lands, so they read as dropping from one height rather
     than each nudging into place. Slightly over-rotated on the way down,
     unwinding to its resting angle. */
  html.js [data-rv="scatter"] .frag{opacity:0;transform:translateY(var(--drop,-40px)) rotate(calc(var(--r) * 1.8))}
  html.js [data-rv="scatter"].in .frag{opacity:1;transform:translateY(0) rotate(var(--r));transition:opacity .5s ease,transform .95s cubic-bezier(.22,.61,.36,1)}
  html.js [data-rv="scatter"].in .f1{transition-delay:.00s}
  html.js [data-rv="scatter"].in .f2{transition-delay:.09s}
  html.js [data-rv="scatter"].in .f3{transition-delay:.18s}
  html.js [data-rv="scatter"].in .f4{transition-delay:.27s}
  html.js [data-rv="scatter"].in .f5{transition-delay:.36s}
  html.js [data-rv="scatter"].in .f6{transition-delay:.45s}
  html.js [data-rv="scatter"].in .f7{transition-delay:.54s}

  /* assemble: the same pieces land in order */
  html.js [data-rv="assemble"] .frag{opacity:0;transform:translateX(-14px)}
  html.js [data-rv="assemble"].in .frag{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  html.js [data-rv="assemble"].in .frag:nth-of-type(1){transition-delay:.05s}
  html.js [data-rv="assemble"].in .frag:nth-of-type(2){transition-delay:.12s}
  html.js [data-rv="assemble"].in .frag:nth-of-type(3){transition-delay:.19s}
  html.js [data-rv="assemble"].in .frag:nth-of-type(4){transition-delay:.26s}
  html.js [data-rv="assemble"].in .frag:nth-of-type(5){transition-delay:.33s}
  html.js [data-rv="assemble"].in .frag:nth-of-type(6){transition-delay:.40s}
  html.js [data-rv="assemble"].in .frag:nth-of-type(7){transition-delay:.47s}

  /* cells: 24 of 31 fill in */

  /* loop: the circuit turns once, then settles */
  html.js [data-rv="loop"] .lpring{stroke-dasharray:1;stroke-dashoffset:1}
  html.js [data-rv="loop"].in .lpring{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.35,.15,.2,1)}
  html.js [data-rv="loop"] .lparm,html.js [data-rv="loop"] .lpspoke{opacity:0}
  html.js [data-rv="loop"].in .lparm,html.js [data-rv="loop"].in .lpspoke{opacity:1;transition:opacity .55s ease}
  html.js [data-rv="loop"].in .lpspoke{transition-delay:.5s}
  html.js [data-rv="loop"].in .a1{transition-delay:.55s}
  html.js [data-rv="loop"].in .a2{transition-delay:.75s}
  html.js [data-rv="loop"].in .a3{transition-delay:.95s}
  html.js [data-rv="loop"] .lpreturn{stroke-dasharray:1;stroke-dashoffset:1}
  html.js [data-rv="loop"].in .lpreturn{stroke-dashoffset:0;transition:stroke-dashoffset .8s ease 1.15s}
  html.js [data-rv="loop"] .lpgate,html.js [data-rv="loop"] .lptarget{opacity:0}
  html.js [data-rv="loop"].in .lpgate{opacity:1;transition:opacity .5s ease 1.7s}
  html.js [data-rv="loop"].in .lptarget{opacity:1;transition:opacity .5s ease 2s}
  html.js [data-rv="loop"] .lpaim{stroke-dasharray:1;stroke-dashoffset:1}
  html.js [data-rv="loop"].in .lpaim{stroke-dashoffset:0;transition:stroke-dashoffset .7s ease 1.95s}

  /* fitlist: eight rows, nested two-column (base rules stop at six and
     count from the column head, so they are restated here) */
  html.js [data-rv="fitlist"] .fitrow{opacity:0;transform:translateY(8px)}
  html.js [data-rv="fitlist"].in .fitcol .fitrow{opacity:1;transform:none}
  html.js [data-rv="fitlist"].in .fitcol .fitrow:nth-child(2){transition-delay:.00s}
  html.js [data-rv="fitlist"].in .fitcol .fitrow:nth-child(3){transition-delay:.10s}
  html.js [data-rv="fitlist"].in .fitcol .fitrow:nth-child(4){transition-delay:.20s}
  html.js [data-rv="fitlist"].in .fitcol .fitrow:nth-child(5){transition-delay:.30s}
  html.js [data-rv="fitlist"].in .fitcol .fitrow .fck path{transition:stroke-dashoffset .45s ease}
  html.js [data-rv="fitlist"].in .fitcol .fitrow:nth-child(2) .fck path{stroke-dashoffset:0;transition-delay:.22s}
  html.js [data-rv="fitlist"].in .fitcol .fitrow:nth-child(3) .fck path{stroke-dashoffset:0;transition-delay:.32s}
  html.js [data-rv="fitlist"].in .fitcol .fitrow:nth-child(4) .fck path{stroke-dashoffset:0;transition-delay:.42s}
  html.js [data-rv="fitlist"].in .fitcol .fitrow:nth-child(5) .fck path{stroke-dashoffset:0;transition-delay:.52s}

  /* ringmark: the base driver flags <html> once, which would draw all
     three at the same moment. Each is held until it is reached. */
  .ringmark.pending{background-image:none!important}

  /* ============================================================
     REDUCED MOTION — every new sequence lands in its final state
     ============================================================ */
  @media(prefers-reduced-motion:reduce){
    html.js [data-rv="scatter"] .frag,html.js [data-rv="assemble"] .frag{opacity:1!important;transition:none!important}
    html.js .fragfield .frag{transform:rotate(var(--r))!important}
    html.js [data-rv="assemble"] .frag{transform:none!important}
    html.js [data-rv="loop"] .lpring,html.js [data-rv="loop"] .lpreturn,html.js [data-rv="loop"] .lpaim{stroke-dashoffset:0!important;transition:none!important}
    html.js [data-rv="loop"] .lparm,html.js [data-rv="loop"] .lpspoke,html.js [data-rv="loop"] .lpgate,html.js [data-rv="loop"] .lptarget{opacity:1!important;transition:none!important}
    html.js [data-rv="fitlist"] .fitrow{opacity:1!important;transform:none!important;transition:none!important}
    html.js [data-rv="fitlist"] .fck path{stroke-dashoffset:0!important;transition:none!important}
    .faq summary::after{transition:none}
  }

  /* ============================================================
     RESPONSIVE — new components only
     ============================================================ */
  @media(max-width:1040px){
    .psplit{grid-template-columns:1fr;gap:0}
    .psplit .pcol{display:contents}
    .psplit .pcol > .eyebrow{order:-2}
    .psplit .pcol > h2{order:-1}
    .psplit .ptext{order:1}
    .psplit .pfield{order:2}
    /* stacked but still showing the desktop scatter: the field would
       run the full column width and the cluster would lean left. */
    .psplit .pfield{margin-top:30px}
    .psplit .pfield .fragfield{max-width:486px;margin-left:auto;margin-right:auto}
    .psplit .pfield .mfragfield{max-width:360px}
    /* the three symptoms recede against the prose rather than matching it */
    .psplit .plainlist{gap:10px}
    .toolgrid{grid-template-columns:1fr}
    .setup-cards.s4{grid-template-columns:repeat(2,1fr)}
    .dnawrap{grid-template-columns:1fr;gap:26px}
    .stackhalves{grid-template-columns:1fr}
    .fragfield{height:320px}
  }
  @media(max-width:860px){
    .bagrid,.vpair{grid-template-columns:1fr}
    .hingebridge{font-size:23px}
  }
  @media(max-width:760px){
    .fragfield.dsvg{display:none!important}
    .subhead{font-size:19.6px}
    .gmail.staged{margin-top:26px}
    .gobst{font-size:17.6px}
    .gdraftbox{margin:0 16px}
    .gobs{padding:16px 16px 14px}
    .cellgrid{grid-template-columns:repeat(8,1fr)}
    .baline{grid-template-columns:1fr;gap:2px}
    .bak{padding-top:0}
  }
  @media(max-width:640px){
    /* The copy brief requires all three hero stats visible at 380px
       without scrolling, so the hero is compressed rather than merely
       reflowed. German runs longer, so this is budgeted for DE. */
    .hero{padding-top:28px;padding-bottom:34px}
    .hero .pillwrap{margin-bottom:20px}
    .hero .eyebrow{margin-bottom:8px}
    /* 34px, not the 29px this was: the shell's own scale floors at
       31.8px and anything under that reads undersized on a phone.
       The space it costs is taken back from the stats panel below,
       so the three figures still clear the fold.
       German runs ~13% longer and tips to a fourth line at 34px, so
       it is set two steps down — the language script puts the choice
       on <html lang>, which makes this addressable in CSS. */
    .hero h1{font-size:34px;line-height:1.08;margin-top:0}
    .hero h1 em{display:inline;margin-top:0}
    html[lang="de"] .hero h1{font-size:32px}
    .hero .lead{font-size:15.6px;line-height:1.5;margin-top:16px}
    .hero .heroactions{margin-top:24px}
    .hero .numbers.n3{margin-top:26px}
    .numbers.n3 .nitem{padding:9px 15px}
    .numbers.n3 .nval{font-size:22.4px}
    .numbers.n3 .nlbl{font-size:11.8px;margin-top:3px;line-height:1.3}
    .hero .herofoot{margin:18px auto 0;font-size:13.6px}
    /* two-part card header stops colliding with itself */
    .gmail .gbar{flex-direction:column;align-items:flex-start;gap:5px}
  }
  @media(max-width:600px){
    .setup-cards.s4{grid-template-columns:1fr}
    .faq summary{font-size:16.8px;padding-right:30px}
    .faq .fa{padding-right:0;font-size:14.8px}
    .mfragfield .frag{font-size:11.6px;padding:5px 9px}
    .hingebridge{font-size:20.4px}
    .plainlist.wide li{font-size:15.4px}
  }

  /* ============================================================
     CONTRAST — WCAG AA on light backgrounds
     Measured from rendered pixels, not from the stylesheet.
     --faint  #9aa0ad scored 2.02 on cream, 2.28 on the page ground
              and 2.58 on card white. It is used for captions, meta
              lines and small labels, all at 9–14px, where AA needs
              4.5. It failed everywhere it carried text.
     --rose-deep #c43d7c scored 3.76 on cream.
     --rose   #e24b8e scored 2.87 behind the section kickers.
     Dark sections already override these and all pass, so only the
     light-ground values move.
     ============================================================ */
  :root{
    --faint:#585d68;      /* was #9aa0ad — 2.02 on cream, now 5.09 */
    --rose-deep:#a12d66;  /* was #c43d7c — 3.76 on cream, now 5.25 */
    --muted:#585d68;      /* was #5f6470 — 4.57 was a bare pass     */
  }
  /* The kicker takes the deeper cut on light grounds only. The hero
     and the connector panel are navy despite not carrying .dark, so
     they keep the light pink they already had. */
  section:not(.dark) .eyebrow{color:var(--rose-deep)}
  /* the connbar used to sit on navy and needed the light pink; it is a
     quiet outlined panel on the section ground now, so only the hero
     keeps the exemption */
  section.hero .eyebrow{color:#f3a9ce}

  /* .btnghost carries near-white text for the dark hero it was built
     for. On a light section that is white on cream — the advisory CTA
     was effectively invisible. */
  section:not(.dark):not(.hero) .btnghost{color:var(--navy);border-color:var(--navy-2)}
  section:not(.dark):not(.hero) .btnghost:hover{background:var(--navy);color:#fbf7ef}

  /* light-on-dark near-misses */
  .hero .herofoot{color:#aab2cf}
  .dfmuted{color:#8b93b3}
  .qco{color:#aab2cf}
  .s2foot .fbot span,.s2foot .fbot a,.s2foot .flegal a,.s2foot .fwrap span{color:#8b93b3}

  /* ============================================================
     SECTION 2 TYPE — hierarchy, not one-pixel differences
     The opener was 18px and the body 17px, so the only thing
     separating them was colour, and it ran backwards: the premise
     set lighter than the elaboration beneath it. Both carried
     line-height 1.6 across a 35-character measure, which is loose
     for that width and made the block read as one grey field.

     Now a real scale — 27.6 / 20 / 16.4 / 14.6 / 13.4 — with the
     leading tightening as the size grows, and weight rather than
     colour marking the standfirst.
     ============================================================ */
  .psplit .ptext .lead{font-size:20px;line-height:1.38;font-weight:500;color:var(--ink);margin:0;text-wrap:pretty}
  .psplit .ptext p:last-child{font-size:16.4px;line-height:1.55;color:var(--muted);margin-top:16px;text-wrap:pretty}
  .mcap-always{line-height:1.5}

  /* headings stop breaking to a one-word last line */
  h1,h2,.subhead{text-wrap:balance}

  @media(max-width:640px){
    .psplit .ptext .lead{font-size:19px;line-height:1.35}
    .psplit .ptext p:last-child{font-size:16px;margin-top:14px}
    /* 28-character measure on a phone takes tighter leading */
    /* body leading across the page: 1.6 is loose at phone measures */
    section .lead{line-height:1.5}
  }

  /* ============================================================
     SECTION 3 · the studio dashboard
     All 59 .sdash rules already existed in _shell.html with no
     markup anywhere in the package. The markup comes from the
     previous build; only these adjustments are new.
     ============================================================ */
  /* the bar width is hard-coded to the old 61%; ours is 40% */
  .sdash.in .sd-bar i{width:40%}
  /* the one move keeps its reasoning — the brief protects that line as
     the only place a reader watches the system think */
  .sdash .sd-move .sd-mv{display:block}
  .sdash .sd-move .w{display:block;margin-top:8px;font-family:var(--body);font-size:13.8px;line-height:1.55;color:#c4c8da}
  /* two inherited colours miss AA on this ground: 2.83 and 3.32 */
  .sdash .st.dim{color:#8b93b3}
  .sdash .sd-big .of{color:#8b93b3}

  /* The shell's reduced-motion branch for the sparkline is written as
     `.sdash .spark .ln` (three classes) but has to override
     `.sdash.in .spark .ln` (four), so it loses on specificity and never
     applied — the line sat frozen mid-draw. Re-asserted at matching
     specificity. Latent until now because .sdash had no markup. */
  @media(prefers-reduced-motion:reduce){
    .sdash.in .spark .ln{transition:none;stroke-dashoffset:0}
    .sdash.in .spark .ar{transition:none;opacity:.35}
  }

  /* ============================================================
     RINGMARK — uniform ink weight
     The ring is a 256x108 viewBox with preserveAspectRatio='none',
     so it stretches to whatever box the emphasised phrase makes.
     Measured stretch: 'one thing' 1.17x, 'every week' 1.36x,
     'just happened' 1.61x. Non-uniform scaling thins the stroke at
     top and bottom while thickening the ends, so the three rings
     read as three different pens.
     Same path, with vector-effect='non-scaling-stroke' so the ink
     weight is identical whatever the phrase length, and stroke-width
     eased from 6 to 4.4 to keep the same visual weight once it is no
     longer being squashed.
     ============================================================ */
  html.ringed .ringmark{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 108' preserveAspectRatio='none'><path d='M28,62 C30,24 104,8 152,11 C210,15 236,36 229,62 C221,92 132,100 74,93 C28,88 2,72 26,44' pathLength='1' stroke-dasharray='1' stroke-dashoffset='1' fill='none' stroke='%2523e24b8e' stroke-width='4.4' stroke-opacity='.55' stroke-linecap='round' vector-effect='non-scaling-stroke'><animate attributeName='stroke-dashoffset' values='1;0' dur='1.35s' begin='0s' fill='freeze' calcMode='spline' keySplines='.3 0 .2 1' keyTimes='0;1'/></path></svg>") no-repeat center/100% 100%}
  @media(prefers-reduced-motion:reduce){
    html.ringed .ringmark{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 108' preserveAspectRatio='none'><path d='M28,62 C30,24 104,8 152,11 C210,15 236,36 229,62 C221,92 132,100 74,93 C28,88 2,72 26,44' fill='none' stroke='%2523e24b8e' stroke-width='4.4' stroke-opacity='.55' stroke-linecap='round' vector-effect='non-scaling-stroke'></path></svg>")}
  }

  /* Padding tuned so all three rings sit nearer the drawing's own 2.37
     aspect, which narrows the spread between them. Perfect matching is
     not reachable — a longer phrase needs a longer ellipse, and forcing
     equal shape would mean a ring tall enough to cross the line above
     on any wrapped headline. */
  .ringmark{padding:.58em .62em;margin:-.58em -.62em}

  /* ============================================================
     SECTION 4 · the routing fan
     The static rules for .stage / .fan / .dests / .dest / .sfoot are
     all in _shell.html. Its thirteen animation rules are not, so they
     are ported here: the fan strokes itself on, the destinations arrive
     staggered with a slight overshoot, the footer fades in last.
     ============================================================ */
  .outstage{max-width:720px;margin:34px auto 0}
  html.js .stage .fan path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease .35s}
  html.js .stage.in .fan path{stroke-dashoffset:0}
  html.js .stage .dest{opacity:0;transform:translateY(9px) scale(.93);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1.25)}
  html.js .stage.in .dest{opacity:1;transform:none}
  html.js .stage.in .dests .dest:nth-child(1){transition-delay:1.09s}
  html.js .stage.in .dests .dest:nth-child(2){transition-delay:1.18s}
  html.js .stage.in .dests .dest:nth-child(3){transition-delay:1.27s}
  html.js .stage.in .dests .dest:nth-child(4){transition-delay:1.36s}
  html.js .stage.in .dests .dest:nth-child(5){transition-delay:1.45s}
  html.js .stage.in .dests .dest:nth-child(6){transition-delay:1.54s}
  html.js .stage .sfoot{opacity:0;transition:opacity .6s ease 1.7s}
  html.js .stage.in .sfoot{opacity:1}
  @media(prefers-reduced-motion:reduce){
    html.js .stage .fan path{stroke-dashoffset:0;transition:none}
  }
  /* .sfoot uses var(--rose-deep), which I darkened to #a12d66 for light
     grounds. On navy that is 2.71 — it needs the light pink instead. */
  .dark .sfoot{color:#f3a9ce}
  /* the draft chips sit inside the tinted block */
  .gdraftbox .gchips{margin-top:13px}
  .gchip.rose{background:var(--rose-soft);border-color:#f3a9ce;color:var(--rose-deep);font-weight:600}

  /* --- section 4 as a split: copy left, the staged card right --------
     The card is taller than the copy, so the copy centres against it
     rather than leaving a hole under the heading. */
  .outsplit{display:grid;grid-template-columns:1fr 1.08fr;gap:52px;align-items:center}
  .outsplit .outstage{max-width:none;margin:0}
  .outsplit .lead{max-width:52ch}
  @media(max-width:1040px){
    .outsplit{grid-template-columns:1fr;gap:34px}
    .outsplit .outstage{max-width:640px;margin:0 auto}
  }

  /* the kicker's gradient rule — in the previous build, not in the shell.
     It is where the teal meets the rose, so it ties the two accents. */
  .eyebrow::after{content:'';display:block;width:36px;height:2.5px;border-radius:2px;margin-top:9px;background:linear-gradient(90deg,var(--rose),#3fd6bd)}

  /* the draft types itself in; the chips and the doubt land after */
  html.js .outstage .gmail .gchips,html.js .outstage .gmail .gnext.doubt{opacity:0;transition:opacity .55s ease}
  html.js .outstage .gmail.composed .gchips,html.js .outstage .gmail.composed .gnext.doubt{opacity:1}
  @media(prefers-reduced-motion:reduce){
    html.js .outstage .gmail .gchips,html.js .outstage .gmail .gnext.doubt{opacity:1;transition:none}
  }

  /* Section 4's support was one paragraph of three sentences — five
     unbroken lines once it moved into a half-width column, against a
     brief that asks for two. Same words, same order, now with the
     hierarchy section 2 uses. Two clauses came out because the card and
     the fan now show them: the date sits in the card header, and the
     routing line was word-for-word what the fan's own footer says. */
  .outsplit .subhead{margin-top:12px}
  /* --muted is tuned for light grounds; on this navy it scores 2.8 */
  .outsplit .obody{font-size:16.4px;line-height:1.55;color:#c4c8da;margin-top:18px;text-wrap:pretty}
  @media(max-width:640px){
    .outsplit .obody{font-size:16px}
  }


  /* ============================================================
     SECTION 5 · one source, and everything that reads it
     Two materials, two origins: torn paper for what you wrote, and
     mono + teal + dated for what it gathered — the same teal the
     dashboard uses for live data, so "gathered" reads consistently
     across the page. Six readers, taken from the FAQ's own list of
     what the context drives, so outbound is visibly one of six.

     One responsive block, not a desktop/mobile pair: the 760px
     duplication rule is for SVG diagrams with fixed labels. The old
     pair also carried a bug — a .fragset display rule overrode
     .mflow{display:none}, so both panels showed on every desktop.
     ============================================================ */
  .dnawrap{display:grid;grid-template-columns:minmax(0,1fr) 108px minmax(0,.86fr);align-items:center;margin-top:26px}
  .dnasrc{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 40px rgba(2,16,57,.08);overflow:hidden}
  .dnazone{padding:15px 18px}
  .dnazone.gathered{border-top:1px dashed var(--line);background:linear-gradient(180deg,rgba(63,214,189,.05),rgba(63,214,189,0))}
  .fragsetk{font-family:var(--mono);font-size:9.8px;letter-spacing:.15em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:9px}
  .fragsetk.teal{color:#1d7d6c}

  /* what you wrote — torn paper */
  /* two columns so the card stops driving the section's height */
  .fragset{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}
  .fragset .frag{width:100%;filter:drop-shadow(0 3px 4px rgba(2,16,57,.10));position:relative}
  .fragset .fragp{white-space:normal;--fs:12.6px;padding:6px 13px 7px}
  .fragset .frag:nth-of-type(2){--tear:1% 6%,8% 0%,30% 5%,55% 1%,78% 6%,95% 0%,99% 10%,100% 42%,98% 72%,100% 94%,71% 99%,46% 93%,22% 100%,4% 92%,0% 55%,2% 25%}
  .fragset .frag:nth-of-type(3){--tear:0% 7%,6% 2%,21% 5%,44% 0%,68% 6%,88% 2%,100% 10%,97% 36%,99% 68%,96% 93%,79% 98%,54% 100%,30% 94%,8% 100%,1% 62%,3% 30%;--paper:#fffef9}
  .fragset .frag:nth-of-type(4){--tear:2% 8%,10% 0%,33% 6%,58% 1%,80% 5%,97% 1%,100% 12%,98% 44%,100% 70%,97% 92%,73% 100%,48% 95%,24% 99%,3% 94%,0% 52%,1% 22%;--paper:#fdfaf1}
  .fragset .frag:nth-of-type(6){--tear:0% 7%,6% 2%,21% 5%,44% 0%,68% 6%,88% 2%,100% 10%,97% 36%,99% 68%,96% 93%,79% 98%,54% 100%,30% 94%,8% 100%,1% 62%,3% 30%;--paper:#fcf9f2}
  .fragset .frag.edited .fragp{background:var(--rose-soft);color:var(--navy)}
  .editmark{position:absolute;right:2px;top:-9px;font-family:var(--mono);font-size:8.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-deep);background:var(--card);padding:0 5px;border-radius:3px}

  /* what it gathered — machine-read, dated, teal */
  .gat{display:flex;align-items:baseline;gap:9px;padding:5px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.4px;color:var(--navy-2)}
  .gat:last-child{border-bottom:0}
  .gat i{width:6px;height:6px;border-radius:50%;background:#1d9c86;flex:none;transform:translateY(-1px)}
  .gat .gt{flex:1;line-height:1.45}
  .gat .gwhen{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#1d7d6c;white-space:nowrap}

  .dnawire{line-height:0;height:360px}
  .dnawire svg{width:100%;height:100%;display:block}
  .dnawire path{fill:none;stroke:#c9c2ae;stroke-width:1.4;vector-effect:non-scaling-stroke}

  .dnareads{display:flex;flex-direction:column;justify-content:space-between;height:360px;position:relative}
  .dnak{font-family:var(--mono);font-size:10.4px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);position:absolute;top:-34px;left:0}
  .reader{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 13px 7px;box-shadow:0 3px 10px rgba(2,16,57,.06);align-self:flex-start;max-width:100%}
  .reader .rt{display:block;font-size:13px;font-weight:600;color:var(--navy-2);line-height:1.25}
  .reader .rs{display:block;font-size:11.2px;color:var(--muted);line-height:1.3;margin-top:1px}


  /* --- the sequence: you wrote it, it gathered more, everything reads it --- */
  html.js [data-rv="wire"] .frag{opacity:0;transform:translateX(-10px)}
  html.js [data-rv="wire"].in .frag{opacity:1;transform:none;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
  html.js [data-rv="wire"].in .frag:nth-of-type(1){transition-delay:.05s}
  html.js [data-rv="wire"].in .frag:nth-of-type(2){transition-delay:.11s}
  html.js [data-rv="wire"].in .frag:nth-of-type(3){transition-delay:.17s}
  html.js [data-rv="wire"].in .frag:nth-of-type(4){transition-delay:.23s}
  html.js [data-rv="wire"].in .frag:nth-of-type(5){transition-delay:.29s}
  html.js [data-rv="wire"].in .frag:nth-of-type(6){transition-delay:.35s}
  html.js [data-rv="wire"].in .frag:nth-of-type(7){transition-delay:.41s}
  html.js [data-rv="wire"].in .frag.edited{animation:dnaedit 1.1s ease .6s both}
  @keyframes dnaedit{0%,100%{box-shadow:0 3px 4px rgba(2,16,57,.10)}40%{box-shadow:0 0 0 3px rgba(226,75,142,.3)}}

  /* gathered items tick in like a feed. Counted by nth-child, not
     nth-of-type: the zone labels are divs too, which shifted every
     delay by one and let the first item appear with no delay. */
  html.js [data-rv="wire"] .gat{opacity:0;transform:translateY(6px)}
  html.js [data-rv="wire"].in .gat{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
  html.js [data-rv="wire"].in .gat:nth-child(2){transition-delay:.85s}
  html.js [data-rv="wire"].in .gat:nth-child(3){transition-delay:1.00s}
  html.js [data-rv="wire"].in .gat:nth-child(4){transition-delay:1.15s}
  html.js [data-rv="wire"].in .gat i{animation:gatping 1.4s ease both}
  html.js [data-rv="wire"].in .gat:nth-child(2) i{animation-delay:.85s}
  html.js [data-rv="wire"].in .gat:nth-child(3) i{animation-delay:1.00s}
  html.js [data-rv="wire"].in .gat:nth-child(4) i{animation-delay:1.15s}
  @keyframes gatping{0%{box-shadow:0 0 0 0 rgba(29,156,134,.55)}60%{box-shadow:0 0 0 7px rgba(29,156,134,0)}100%{box-shadow:0 0 0 0 rgba(29,156,134,0)}}

  html.js [data-rv="wire"] .dnawire path{stroke-dasharray:1;stroke-dashoffset:1}
  html.js [data-rv="wire"].in .dnawire path{stroke-dashoffset:0;transition:stroke-dashoffset .85s ease}
  html.js [data-rv="wire"].in .dnawire path:nth-child(4){transition-delay:1.40s}
  html.js [data-rv="wire"].in .dnawire path:nth-child(3),html.js [data-rv="wire"].in .dnawire path:nth-child(5){transition-delay:1.50s}
  html.js [data-rv="wire"].in .dnawire path:nth-child(2),html.js [data-rv="wire"].in .dnawire path:nth-child(6){transition-delay:1.60s}
  html.js [data-rv="wire"].in .dnawire path:nth-child(1),html.js [data-rv="wire"].in .dnawire path:nth-child(7){transition-delay:1.70s}

  html.js [data-rv="wire"] .reader{opacity:0;transform:translateX(-8px)}
  html.js [data-rv="wire"].in .reader{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
  html.js [data-rv="wire"].in .reader:nth-child(2){transition-delay:2.10s;animation:dnaping 1s ease 2.10s both}
  html.js [data-rv="wire"].in .reader:nth-child(3){transition-delay:2.21s;animation:dnaping 1s ease 2.21s both}
  html.js [data-rv="wire"].in .reader:nth-child(4){transition-delay:2.32s;animation:dnaping 1s ease 2.32s both}
  html.js [data-rv="wire"].in .reader:nth-child(5){transition-delay:2.43s;animation:dnaping 1s ease 2.43s both}
  html.js [data-rv="wire"].in .reader:nth-child(6){transition-delay:2.54s;animation:dnaping 1s ease 2.54s both}
  html.js [data-rv="wire"].in .reader:nth-child(7){transition-delay:2.65s;animation:dnaping 1s ease 2.65s both}
  html.js [data-rv="wire"].in .reader:nth-child(8){transition-delay:2.76s;animation:dnaping 1s ease 2.76s both}
  @keyframes dnaping{0%{background:var(--card);border-color:var(--line)}35%{background:var(--rose-soft);border-color:#f3a9ce}100%{background:var(--card);border-color:var(--line)}}


  @media(prefers-reduced-motion:reduce){
    html.js [data-rv="wire"] .frag,html.js [data-rv="wire"] .gat,html.js [data-rv="wire"] .reader{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
    html.js [data-rv="wire"] .gat i{animation:none!important}
    html.js [data-rv="wire"] .dnawire path{stroke-dashoffset:0!important;transition:none!important}
  }

  @media(max-width:1040px){
    .dnawrap{grid-template-columns:1fr;gap:26px}
    .dnawire{display:none}
    /* one per row rather than wrapping: seven cards of different widths
       broke into a ragged three-then-pairs shape */
    /* one per row, full width. Seven cards of different natural widths
       wrapped into a ragged three-then-pairs shape; putting the title and
       sub side by side to save height just made both wrap instead. */
    .dnareads{height:auto;flex-direction:column;gap:7px;padding-top:28px}
    .dnareads .reader{align-self:stretch;padding:7px 14px 8px}
    .dnak{top:0}
    html.js [data-rv="wire"] .reader{transform:translateY(8px)}
  }
  @media(max-width:600px){
    .dnazone{padding:16px 16px}
    .reader{font-size:12.4px;padding:7px 12px}
    .gat{font-size:11.2px}
  }

  /* the section is meant to land in one laptop view */
  #dna{padding-top:54px;padding-bottom:54px}
  #dna .subhead{margin-bottom:0}
  .fragset .frag.edited{grid-column:1 / -1}
  @media(max-width:600px){.fragset{grid-template-columns:1fr}}

  /* the mobile loop's second return leg animates with the first */
  html.js [data-rv="loop"] .lpreturn2{stroke-dasharray:1;stroke-dashoffset:1}
  html.js [data-rv="loop"].in .lpreturn2{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease 1.95s}
  @media(prefers-reduced-motion:reduce){
    html.js [data-rv="loop"] .lpreturn2{stroke-dashoffset:0!important;transition:none!important}
  }

  /* --- section 3 · the claim that answers section 2 ------------------
     This was a .subhead: 22.3px in the same colour and weight class as
     the 33.9px headline above it, so it read as headline runoff and the
     eye skipped to the picture. On a phone it was 19.6px against an
     18px lead — no hierarchy step at all.
     It is the sentence that answers the scattered scraps two sections
     earlier, so it gets isolation, its own size, and the rose on the
     phrase that does the answering. */
  .claimline{font-family:var(--display);font-weight:500;font-size:26.5px;line-height:1.32;
             color:#fbf7ef;margin:30px 0 0;max-width:30ch;letter-spacing:-.2px;text-wrap:balance}
  .claimline em{font-style:italic;color:var(--rose)}
  #studio .sdash{margin-top:34px}
  @media(max-width:880px){.claimline{font-size:23px;max-width:34ch}}
  @media(max-width:640px){.claimline{font-size:20.5px;margin-top:22px;max-width:none}}

  /* --- section 2 · the claim that sets up section 3 ------------------
     "Scattered. Nothing reads any of it." was mine, and it said the same
     thing as the document's own "None of it is where the work happens" —
     so the reader met the idea twice, the second time in 13px grey
     italic. The document's line takes the weight instead, in the same
     treatment as section 3's answer, so the two read as a pair.
     The third symptom is gone: arbitrary numbers, and the only one that
     broke the "Your X is Y" shape the other two share. */
  .pclaim{margin:34px 0 0;max-width:26ch}
  .cream .claimline{color:var(--ink)}
  /* #c43d7c passes as large text at 26.5px but the claim drops to 20.5px
     on a phone at weight 500, where AA wants 4.5 — the deeper rose gives 5.25 */
  .cream .claimline em{color:var(--rose-deep)}
  /* two symptoms, set to be scanned rather than read */
  @media(max-width:1040px){
    .pclaim{margin-top:28px;max-width:none;order:4}
  }

  /* --- hero divider and primary button ------------------------------
     The kicker's gradient rule is a block element with no margins, so
     under centred text it sat flush left. Centred where the text is. */
  .hero .eyebrow::after,.ctabox .eyebrow::after{margin-left:auto;margin-right:auto}

  /* the primary action gets an arrow; it nudges on hover */
  /* Drawn, not typed — and on ::before, not ::after.
     The shell already uses .btnrose::after for the hover shine sweep,
     which is position:absolute; overriding it took the arrow out of
     flow (it sat 79px off to the left) and killed the shine. ::before
     with order:2 puts the arrow after the label instead.
     Drawn rather than a → character because the self-hosted latin
     subset carries U+2191 and U+2193 but not U+2192, so the glyph
     rendered at zero width. A background image also survives the
     language toggle, which rewrites textContent. */
  .btnrose{display:inline-flex;align-items:center;gap:10px}
  .btnrose::before{content:'';order:2;width:16px;height:12px;flex:none;
    background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><path d='M1 6h11.5M9 2l4 4-4 4' fill='none' stroke='%23021039' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;transition:transform .18s ease}
  .btnrose:hover::before{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><path d='M1 6h11.5M9 2l4 4-4 4' fill='none' stroke='%23fbf7ef' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");transform:translateX(3px)}
  @media(prefers-reduced-motion:reduce){
    .btnrose::before,.btnrose:hover::before{transition:none;transform:none}
  }
  @media(prefers-reduced-motion:reduce){
    .btnrose::after,.btnrose:hover::after{transition:none;transform:none}
  }

  /* section 2 lost its symptom list, so the order rules for it go too */
  .psplit .pclaim{order:4}

  /* --- hero stats, arriving one at a time ---------------------------
     The generic stagger runs 70ms apart, so three items span 140ms and
     read as one fade. They also fired at load, competing with the
     headline and the button. Slowed to 220ms apart and held back until
     the button has landed, so they count in: one, two, three.
     Each item owns its divider, so the panel fills as they arrive. */
  html.js .hero .numbers.n3.in > .nitem{transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  html.js .hero .numbers.n3.in > .nitem:nth-child(1){transition-delay:.60s}
  html.js .hero .numbers.n3.in > .nitem:nth-child(2){transition-delay:.82s}
  html.js .hero .numbers.n3.in > .nitem:nth-child(3){transition-delay:1.04s}
  html.js .hero .herofoot{transition-delay:1.32s}

  /* The draft's chips name what it combined — the rose one is what you
     told it, the teal one is what it found, matching the two zones in
     section 5 so the colours mean the same thing in both places. */
    /* 10px label, so AA wants 4.5; #1d7d6c measured 4.21 on this ground */
  .gchip.teal{background:rgba(63,214,189,.10);border-color:#9fd9cd;color:#166254;font-weight:600}

  /* --- section 6 ------------------------------------------------------
     SVG markers paint at a path's endpoints whatever the stroke dash
     offset is, so every arrowhead was sitting there fully drawn before
     its line existed. Held back until the strokes have finished. */
  html.js [data-rv="loop"] .lpmk{opacity:0}
  html.js [data-rv="loop"].in .lpmk{opacity:1;transition:opacity .35s ease 2.75s}
  @media(prefers-reduced-motion:reduce){
    html.js [data-rv="loop"] .lpmk{opacity:1!important;transition:none!important}
  }
  .loopclaim{margin-top:18px}
  .dark .claimline em{color:var(--rose)}

  /* ============================================================
     SECTION 6 · MOBILE — compounding, not mechanism
     The circuit diagram explains how the loop works; it does not show
     what the headline claims, which is that the file is richer six
     months in. Three moments of the same file, filling up. Rose cells
     are what you told it, teal cells are what came back — the same
     two colours sections 4 and 5 use for those two things.
     HTML rather than SVG: the type is real CSS type, so it cannot be
     squashed by a viewBox, and the cells animate with plain delays.
     ============================================================ */
  .mtime{display:none}
  .mtime .tsteps{display:flex;flex-direction:column}
  .mtime .tstep{background:rgba(255,253,248,.045);border:1px solid rgba(243,169,206,.22);
                border-radius:14px;padding:14px 16px 15px}
  .mtime .tk{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
             color:#f3a9ce;margin-bottom:11px}
  .mtime .tcells{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;margin-bottom:11px}
  .mtime .tcells i{display:block;aspect-ratio:1;border-radius:2px;background:var(--rose)}
  .mtime .tcells i.g{background:#3fd6bd}
  .mtime .tc{font-size:14px;line-height:1.45;color:#c4c8da;display:flex;gap:7px}
  .mtime .tplus{color:#3fd6bd;font-weight:700;flex:none}
  .mtime .tlink{position:relative;height:58px;display:flex;align-items:center;justify-content:center}
  .mtime .tlink::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
    background:linear-gradient(180deg,var(--rose),#3fd6bd)}
  .mtime .tgate{position:relative;background:#0b1d52;border:1px solid #e24b8e;border-radius:999px;
    padding:5px 13px;font-family:var(--mono);font-size:11px;letter-spacing:.01em;color:#f3a9ce;
    text-align:center;max-width:96%}
  .mtime .tfoot{margin:20px 0 0;font-size:14.5px;line-height:1.5;color:#aab2cf;text-align:center}
  @media(max-width:760px){ .mtime{display:block} }

  /* the file fills up, card by card */
  html.js [data-rv="grow"] .tstep{opacity:0;transform:translateY(12px)}
  html.js [data-rv="grow"].in .tstep{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  html.js [data-rv="grow"].in .tstep:nth-child(1){transition-delay:.05s}
  html.js [data-rv="grow"].in .tstep:nth-child(3){transition-delay:.85s}
  html.js [data-rv="grow"].in .tstep:nth-child(5){transition-delay:1.75s}
  html.js [data-rv="grow"] .tlink{opacity:0}
  html.js [data-rv="grow"].in .tlink{opacity:1;transition:opacity .4s ease}
  html.js [data-rv="grow"].in .tlink:nth-child(2){transition-delay:.6s}
  html.js [data-rv="grow"].in .tlink:nth-child(4){transition-delay:1.5s}
  html.js [data-rv="grow"] .tcells i{opacity:0;transform:scale(.4)}
  html.js [data-rv="grow"].in .tcells i{opacity:1;transform:none;
    transition:opacity .3s ease,transform .3s ease;
    transition-delay:calc(var(--base,0s) + var(--i,0) * 13ms)}
  html.js [data-rv="grow"].in .tstep:nth-child(1) .tcells{--base:.30s}
  html.js [data-rv="grow"].in .tstep:nth-child(3) .tcells{--base:1.10s}
  html.js [data-rv="grow"].in .tstep:nth-child(5) .tcells{--base:2.00s}
  html.js [data-rv="grow"] .tfoot{opacity:0}
  html.js [data-rv="grow"].in .tfoot{opacity:1;transition:opacity .6s ease 2.9s}
  @media(prefers-reduced-motion:reduce){
    html.js [data-rv="grow"] .tstep,html.js [data-rv="grow"] .tlink,
    html.js [data-rv="grow"] .tcells i,html.js [data-rv="grow"] .tfoot{
      opacity:1!important;transform:none!important;transition:none!important}
  }

  /* --- section 6 · one diagram, both sizes ---------------------------
     The circuit explained the mechanism; the compounding view shows what
     the headline claims. Keeping both meant maintaining a hand-authored
     SVG twin with its own type-scaling and collision problems, so the
     circuit is retired and this is responsive HTML at both sizes. */
  .mtime{display:block}
  .looplabel{font-family:var(--mono);font-size:15px;letter-spacing:.2em;text-transform:uppercase;
             color:#f3a9ce;margin:30px 0 0}
  .looplabel::after{content:'';display:block;width:52px;height:3px;border-radius:2px;margin-top:11px;
             background:linear-gradient(90deg,var(--rose),#3fd6bd)}
  .mtime{margin-top:20px}
  @media(min-width:761px){
    /* three moments read left to right on a wide screen */
    .mtime .tsteps{flex-direction:row;align-items:stretch}
    .mtime .tstep{flex:1;min-width:0}
    .mtime .tlink{height:auto;width:92px;flex:none}
    .mtime .tlink::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;margin:-1px 0 0;
      background:linear-gradient(90deg,var(--rose),#3fd6bd)}
    .mtime .tgate{font-size:10.4px;padding:5px 10px;line-height:1.35}
    .mtime .tcells{grid-template-columns:repeat(13,1fr)}
    .mtime .tfoot{margin-top:26px;font-size:15.5px}
    .looplabel{font-size:16px}
  }
  @media(max-width:900px) and (min-width:761px){
    .mtime .tlink{width:74px}
    .mtime .tgate{font-size:9.6px}
  }

  /* --- section 8 · quiet typography, generous air --------------------
     The document asks for no visual here and lets the specificity of the
     rules be the proof. Bulleted bold-then-grey made a speckled wall of
     it, so the rules are separate statements now: the rule in ink, the
     gloss beneath, a hairline and real space between each. */
  .trules{margin-top:38px;border-top:1px solid var(--line)}
  .trule{padding:22px 0;border-bottom:1px solid var(--line)}
  .rrule{margin:0;font-family:var(--display);font-size:20.5px;line-height:1.34;
         font-weight:500;color:var(--ink);max-width:30ch;letter-spacing:-.1px}
  .rgloss{margin:9px 0 0;font-size:15.6px;line-height:1.55;color:var(--muted);max-width:46ch}
  .trustclaim{margin-top:20px}
  #trust .lead{margin-top:34px;max-width:44ch}
  @media(max-width:640px){
    .trules{margin-top:30px}
    .trule{padding:18px 0}
    .rrule{font-size:18.5px}
    .rgloss{font-size:15px}
  }

  /* Characters are present from the first frame and revealed with
     visibility, so the paragraph never re-wraps mid-type. The cursor
     rides the current character rather than sitting at the end. */
  .gbody .tch{visibility:hidden}
  .gbody .tch.on{visibility:visible}
  .gbody .tch.cur{position:relative}
  .gbody .tch.cur::after{content:'';position:absolute;left:100%;top:.08em;width:2px;height:1.05em;
    background:var(--rose);animation:gsblink .7s step-end infinite}
  .gbody.typing::after{content:none}

  /* The To / Subject labels sat in a 52px column with a 10px gap, so the
     value started 62px in while everything else in the card started at
     the padding edge — and "To" being short left it visibly stranded.
     Stacked instead: label above, value flush left with the body, so the
     card has one left edge rather than three. */
  .toolline{display:block;padding:7px 0}
  .tl-k{display:block;min-width:0;width:auto;margin-bottom:3px}
  .toolline > *:not(.tl-k){display:block}

  /* ============================================================
     DASHBOARD SUB-CARDS · more definition, and they populate
     They were flat boxes on navy that faded in whole. Now each card
     has a lit top edge and a coloured spine keyed to what it holds,
     the status labels are pills rather than loose mono text, and the
     rows arrive one at a time so the surface fills rather than appears.
     ============================================================ */
  .sdash .sd-card{
    position:relative;overflow:hidden;
    background:linear-gradient(180deg,rgba(30,51,111,.55),rgba(10,25,71,.55));
    border-color:#26407f;
    box-shadow:0 1px 0 rgba(120,150,230,.13) inset, 0 8px 22px rgba(2,16,57,.30)}
  .sdash .sd-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
    background:linear-gradient(180deg,var(--rose),rgba(226,75,142,0))}
  .sdash .sd-cols > .sd-card:nth-child(2)::before{background:linear-gradient(180deg,#3fd6bd,rgba(63,214,189,0))}
  .sdash .sd-cols > .sd-card:nth-child(3)::before{background:linear-gradient(180deg,#8b93b3,rgba(139,147,179,0))}
  .sdash .sd-k{color:#a6b0d0}

  /* status labels become pills */
  .sdash .sd-card .row .st{padding:3px 8px;border-radius:999px;border:1px solid transparent;line-height:1.25}
  .sdash .st.teal{color:#7defd6;background:rgba(63,214,189,.12);border-color:rgba(63,214,189,.34)}
  .sdash .st.rose{color:#f9c2dc;background:rgba(226,75,142,.14);border-color:rgba(226,75,142,.40)}
  .sdash .st.dim{color:#9aa6cc;background:rgba(140,155,205,.10);border-color:rgba(140,155,205,.26)}

  /* the rows fill in, card by card and row by row */
  html.js .sdash .sd-card .row{opacity:0;transform:translateY(6px)}
  html.js .sdash.in .sd-card .row{opacity:1;transform:none;
    transition:opacity .38s ease,transform .42s cubic-bezier(.2,.7,.2,1);
    transition-delay:calc(var(--cd,0s) + var(--rd,0s))}
  html.js .sdash.in .sd-cols > .sd-card:nth-child(1){--cd:.70s}
  html.js .sdash.in .sd-cols > .sd-card:nth-child(2){--cd:1.00s}
  html.js .sdash.in .sd-cols > .sd-card:nth-child(3){--cd:1.30s}
  html.js .sdash.in .sd-card .row:nth-of-type(1){--rd:0s}
  html.js .sdash.in .sd-card .row:nth-of-type(2){--rd:.16s}
  @media(prefers-reduced-motion:reduce){
    html.js .sdash .sd-card .row{opacity:1!important;transform:none!important;transition:none!important}
  }

  /* the one move lands after the cards have filled, not during */
  html.js .sdash.in .sd-move{transition-delay:1.80s}

  /* --- hero rhythm ---------------------------------------------------
     Three faults, all measurable. The pill and the kicker were the same
     treatment (11.7px mono uppercase, both centred), so the reader met
     the same signal twice before the headline. The gaps were nearly even
     — 20px above the kicker against 17px below it — so nothing grouped.
     And the gradient rule sat between the kicker and the headline, which
     is the one join that should be tight: a kicker belongs to its
     headline. Space does that job more quietly than a rule.
     ============================================================ */
  .hero .eyebrow::after{display:none}
  .hero .badge{margin-bottom:0}
  .hero .eyebrow{margin-top:46px;font-size:10.6px;letter-spacing:.19em;color:#f0a2c9}
  .hero h1{margin-top:12px}
  .hero .lead{margin-top:24px}
  @media(max-width:640px){
    /* trimmed to protect the document's above-fold budget: all three
       stats stay visible at 380px. 30 against 10 still groups the kicker
       with its headline at 3:1. */
    .hero .eyebrow{margin-top:30px;font-size:10.2px}
    .hero h1{margin-top:10px}
    .hero .lead{margin-top:18px}
  }

  /* The provenance line was body text floating after the last rule. It is
     the section's signature — the document's note says this section stands
     in for a testimonial — so it gets its own rule and the same two tiers
     the rules above it use. */
  .tprov{margin-top:34px}
  .tprov::before{content:'';display:block;width:52px;height:3px;border-radius:2px;margin-bottom:18px;
    background:linear-gradient(90deg,var(--rose),#3fd6bd)}
  .tprov-a{margin:0;font-family:var(--display);font-size:20.5px;line-height:1.34;font-weight:500;
    color:var(--ink);letter-spacing:-.1px}
  .tprov-b{margin:9px 0 0;font-size:15.6px;line-height:1.55;color:var(--muted);max-width:48ch}
  @media(max-width:640px){
    .tprov{margin-top:28px}
    .tprov-a{font-size:18.5px}
    .tprov-b{font-size:15px}
  }

  /* --- the hero CTA ---------------------------------------------------
     Same label, same colour and same action as the nav button, but a
     12px rectangle against the nav's pill — two costumes for one thing,
     both on screen at once. The pill is the shape the brand already uses
     for the badge and the nav, so the hero follows it.
     It also sat exactly equidistant between the lead and the stats (25px
     each side on mobile), so it grouped with neither. Pulled up towards
     the promise it belongs to, with the difference given back below so
     the above-fold budget is unchanged. */
  .hero .btnrose{border-radius:999px}
  .hero .heroactions{margin-top:34px;margin-bottom:53px}
  @media(max-width:640px){
    .hero .heroactions{margin-top:18px;margin-bottom:32px}
  }

  /* --- the connector wall --------------------------------------------
     The document asks for the connectors "grey and unranked, with nothing
     implying partnership or endorsement". They were white chips on navy —
     maximum contrast, which reads as a featured logo wall, so a
     disclaimer had to apologise for the impression the design created.
     Quiet outlined panel on the section's own ground instead: the names
     are a list of things you already use, not a badge of honour.

     The rule under the label was flush left beneath centred text — the
     same fault as the hero. Any centred kicker needs auto margins. */
  .connbar{background:transparent;border:1px solid var(--line);box-shadow:none}
  .connbar .eyebrow{color:var(--faint)}
  .connbar .eyebrow::after{margin-left:auto;margin-right:auto;opacity:.65}
  .conn{background:transparent;border:1px solid var(--line);color:var(--muted);
        font-weight:500;box-shadow:none}
  .connbar .connfoot,.connbar .cfoot,.connbar p:last-child{color:var(--faint);font-size:13.2px}

  /* The two we cannot name are cards like the rest, with the descriptor
     standing in for the company name. Marked quietly rather than dressed
     to look like the named four. */
  .case.withheld .caseco{font-style:italic}
  .case.withheld{border-style:dashed}

  /* Six cards in a four-column grid leaves a ragged half-empty row.
     Three divides evenly into two full rows, and gives each card more
     width than the 244px it had. */
  @media(min-width:861px){
    #track-record .grid.g4{grid-template-columns:repeat(3,1fr)}
  }

  /* ============================================================
     QUOTE CAROUSEL
     The track sized to whichever slide was active, so the page jumped
     54px as the quotes rotated (269 / 215 / 242 / 242). All slides now
     share one grid cell, so the track is always as tall as the longest
     quote and nothing below it moves.
     Visually it was an outline with a floating glyph; now a card with
     the mark set behind the text as a watermark.
     ============================================================ */
  /* No box: the quote sits in the open like the rest of the section.
     Only the height lock and the type work are kept. */
  .qpanel{background:transparent;border:0;border-radius:0;padding:8px 0 0;box-shadow:none}
  .qtrack{display:grid;min-height:0}
  .qslide{grid-area:1/1;position:relative;inset:auto}
  .qslide:not(.on){opacity:0;visibility:hidden;pointer-events:none}
  .qslide.on{opacity:1;visibility:visible}

  /* the mark sits behind the words instead of pushing them down */
  .qmark{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    font-size:96px;line-height:1;height:auto;color:var(--rose);opacity:.16;pointer-events:none;z-index:0}
  .qtext{position:relative;z-index:1;margin-top:8px}
  .qwho{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:2px}
  .qwho .qname{font-family:var(--display);font-size:16px;font-weight:600;color:#fbf7ef}
  .qwho .qrole,.qwho .qco{font-family:var(--mono);font-size:11.4px;letter-spacing:.08em;
    text-transform:uppercase;color:#aab2cf}
  .qwho .qco{color:#f3a9ce}

  @media(max-width:760px){
    /* one at a time here too — the arrows are hidden and the dots are the
       control, so the grid stack stays and the height stays locked */
    /* the shell sets display:none on inactive slides here, which drops
       them out of the grid so the track sizes to the active one again */
    .qslide:not(.on){display:flex}
    .qmark{font-size:66px;top:-8px}
    .qpanel{padding:4px 0 0}
    .qwho .qrole,.qwho .qco{font-size:10.8px}
  }

  /* --- close band ----------------------------------------------------
     The loopmark was a miniature of the circuit diagram, which the page
     no longer has. Replaced with the compounding view's own language:
     the seven you gave it, then what it has added since. */
  .loopmark{line-height:0;margin-bottom:26px}
  .loopmark .lmcells{display:grid;grid-template-columns:repeat(21,1fr);gap:3px;
    width:min(268px,74%);margin:0 auto}
  .loopmark .lmcells i{display:block;aspect-ratio:1;border-radius:2px;background:var(--rose)}
  .loopmark .lmcells i.g{background:#3fd6bd}
  html.js [data-rv="up"] .lmcells i{opacity:0;transform:scale(.4)}
  html.js [data-rv="up"].in .lmcells i{opacity:1;transform:none;
    transition:opacity .3s ease,transform .3s ease;transition-delay:calc(.25s + var(--i,0) * 26ms)}
  @media(prefers-reduced-motion:reduce){
    html.js [data-rv="up"] .lmcells i{opacity:1!important;transform:none!important;transition:none!important}
  }

  /* every CTA is the same pill — primary, ghost and nav */
  .btnrose,.btnghost{border-radius:999px}

  /* --- dashboard: one cascade, top to bottom -------------------------
     Measured against vertical position, twelve elements arrived out of
     order. Two causes. The rows used nth-of-type, but .sd-k is a div too,
     so row 1 was being given row 2's delay and every card filled bottom
     up. And the sparkline took 1.6s from a .4s delay, finishing at 2s —
     after the three cards below it had already arrived.
     Retimed as a single cascade in the order the eye travels. */

  /* the metrics join the sequence instead of being there from the start */
  html.js .sdash .met{opacity:0;transform:translateY(6px)}
  html.js .sdash.in .met{opacity:1;transform:none;transition:opacity .4s ease,transform .44s cubic-bezier(.2,.7,.2,1)}
  /* .sd-k is a div here too, so the metrics are children 2, 3 and 4 */
  html.js .sdash.in .met:nth-child(2){transition-delay:.36s}
  html.js .sdash.in .met:nth-child(3){transition-delay:.46s}
  html.js .sdash.in .met:nth-child(4){transition-delay:.56s}

  /* the line finishes before the cards start */
  html.js .sdash.in .sd-bar i{transition-delay:.08s}
  html.js .sdash.in .spark .ln{transition:stroke-dashoffset .8s ease .2s}
  html.js .sdash.in .spark .ar{transition:opacity .45s ease .45s}

  /* card boxes, then their rows, in reading order */
  html.js .sdash.in .sd-cols > .sd-card:nth-child(1){transition-delay:.74s}
  html.js .sdash.in .sd-cols > .sd-card:nth-child(2){transition-delay:1.04s}
  html.js .sdash.in .sd-cols > .sd-card:nth-child(3){transition-delay:1.34s}
  html.js .sdash.in .sd-cols > .sd-card:nth-child(1) .row{--cd:.84s}
  html.js .sdash.in .sd-cols > .sd-card:nth-child(2) .row{--cd:1.14s}
  html.js .sdash.in .sd-cols > .sd-card:nth-child(3) .row{--cd:1.44s}
  /* .sd-k is a div as well, so the rows are children 2 and 3, not
     types 1 and 2 — the fault that reversed every card */
  html.js .sdash.in .sd-card .row:nth-of-type(1),
  html.js .sdash.in .sd-card .row:nth-of-type(2){--rd:0s}
  html.js .sdash.in .sd-card .row:nth-child(2){--rd:0s}
  html.js .sdash.in .sd-card .row:nth-child(3){--rd:.11s}
  html.js .sdash.in .sd-move{transition-delay:1.76s}

  /* the metrics fade is new, so it needs its own reduced-motion escape —
     the shell's block only covers the cards and the move band */
  @media(prefers-reduced-motion:reduce){
    html.js .sdash .met{opacity:1!important;transform:none!important;transition:none!important}
  }

  /* ============================================================
     DARK-GROUND TEXT TOKENS
     Four times this session a class written for the cream sections has
     been used on navy and failed contrast: .sfoot, .st.dim, .obody, and
     now .rgloss / .tprov-b / .dnak on the Orbit page. Patching each one
     as it appears does not scale. Every shared text class gets its dark
     counterpart here, once.
     ============================================================ */
  .dark .rrule,.dark .tprov-a{color:#fbf7ef}
  .dark .rgloss,.dark .tprov-b,.dark .obody,.dark .cellcap{color:#c4c8da}
  .dark .cellcap b{color:#fbf7ef}
  .dark .dnak{color:#aab2cf}
  .dark .fragsetk{color:#f3a9ce}
  .dark .fragsetk.teal{color:#57e3c8}
  .dark .trules{border-top-color:rgba(120,150,230,.22)}
  .dark .trule{border-bottom-color:rgba(120,150,230,.22)}
  .dark .dnasrc{background:rgba(10,25,71,.55);border-color:#26407f;
    box-shadow:0 1px 0 rgba(120,150,230,.13) inset,0 12px 30px rgba(2,16,57,.3)}
  .dark .dnazone.gathered{border-top-color:rgba(120,150,230,.22);
    background:linear-gradient(180deg,rgba(63,214,189,.07),rgba(63,214,189,0))}
  .dark .dnawire path{stroke:#3b56b0}

  /* ...and the same in reverse: .mtime was built for a dark section, so it
     needs a light counterpart wherever it is reused on cream. */
  .cream .mtime .tstep{background:var(--card);border-color:var(--line);
    box-shadow:0 6px 18px rgba(2,16,57,.06)}
  .cream .mtime .tk{color:var(--rose-deep)}
  .cream .mtime .tc{color:var(--muted)}
  .cream .mtime .tplus{color:#166254}
  .cream .mtime .tfoot{color:var(--muted)}
  .cream .mtime .tgate{background:var(--card);border-color:#e6b9d0;color:var(--rose-deep)}
  .cream .mtime .tlink::before{background:linear-gradient(180deg,var(--rose),#3fd6bd)}
  @media(min-width:761px){
    .cream .mtime .tlink::before{background:linear-gradient(90deg,var(--rose),#3fd6bd)}
  }
  .cream .outsplit .obody,.cream .outsplit .oclose{color:var(--muted)}

  /* --- Orbit page ----------------------------------------------------
     The distance-to-fire and move-feed components are lifted verbatim
     from the reference build; the shell already carries 22 of their 23
     rules. Only the mobile row cap and the page's own pieces are new. */
  @media(max-width:760px){ .climb .crow:nth-child(n+6){display:none} }
  .climbkey{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;
    font-size:13.4px;color:#c4c8da}
  .climbkey .ck-i{display:inline-flex;align-items:center;gap:8px}
  .climbkey i{width:11px;height:11px;border-radius:3px;flex:none}
  .climbkey .k-fire{background:#e24b8e}
  .climbkey .k-near{background:#c98a2e}
  .climbkey .k-hold{background:#3b56b0}
  .tiergrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
  .tiercard{background:rgba(10,25,71,.55);border:1px solid #26407f;border-radius:16px;
    padding:18px 18px 20px;box-shadow:0 1px 0 rgba(120,150,230,.13) inset,0 10px 26px rgba(2,16,57,.28)}
  .tiercard .tk{font-family:var(--mono);font-size:10.4px;letter-spacing:.15em;
    text-transform:uppercase;color:#f3a9ce}
  .tiercard .tk.teal{color:#57e3c8}
  .tiercard .tnum{font-family:var(--display);font-size:38px;line-height:1;color:#fbf7ef;margin:10px 0 12px}
  .tiercard .rgloss{color:#c4c8da;margin:0}
  @media(max-width:600px){ .tiergrid{grid-template-columns:1fr} .tiercard .tnum{font-size:32px} }
  /* the move feed is a .surface on navy, so its meta label needs the
     dark-ground grey rather than the light one */
  .surface[data-rv="feed"] .bar .d{color:#8b93b3}
  .surface[data-rv="feed"] .bar{border-color:var(--dline)}

  /* The shell's reduced-motion rule for .grad is written at the same
     specificity as the enhanced one but earlier in the file, so it loses
     on source order — leaving gradPop's opacity fill stuck at 0 and the
     text invisible. Same fault as the ringmark had. The gradient itself
     is static without the animation, which is fine. */
  @media(prefers-reduced-motion:reduce){
    html .grad{animation:none!important;opacity:1!important}
  }

  /* --- sub-page headline ---------------------------------------------
     .pagehead was picking up no h1 rule at all — 34px at line-height 1.6,
     which is h2 size with body leading. The package's own .phero h1 sets
     44.5px / 1.06, but .phero is a centred single-column header with its
     own background, so it does not fit a two-column hero. Its scale is
     borrowed here and left-aligned instead. */
  .pagehead{font-size:44.5px;line-height:1.06;letter-spacing:-.5px;
            color:#fbf7ef;max-width:none;margin:12px 0 0}
  .pagehead em{font-style:italic}
  @media(max-width:1040px){ .pagehead{font-size:39px} }
  @media(max-width:640px){ .pagehead{font-size:31.8px;line-height:1.1} }
  html[lang="de"] .pagehead{font-size:41px}
  @media(max-width:1040px){ html[lang="de"] .pagehead{font-size:36px} }
  @media(max-width:640px){ html[lang="de"] .pagehead{font-size:30px} }

  /* --- the standing picture ------------------------------------------
     Built on the shell's own .gat dated-observation row and .fragsetk
     zone label, so the accumulation reads the same as the homepage's
     "what it has found since". Only the frame and the rose tipping
     variant are new. */
  .dossier{background:var(--card);border:1px solid var(--line);border-radius:18px;
    padding:20px 20px 6px;box-shadow:0 14px 34px rgba(2,16,57,.09)}
  .dosh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding-bottom:13px;border-bottom:1px solid var(--line)}
  .dosname{font-family:var(--display);font-size:21px;color:var(--ink)}
  .dosmeta{font-family:var(--mono);font-size:10.4px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted)}
  .doszone{padding:15px 0 4px;border-bottom:1px solid var(--line)}
  .doszone .fragsetk{margin-bottom:9px}
  .doszone.tip{background:linear-gradient(180deg,rgba(226,75,142,.07),rgba(226,75,142,0));
    margin:0 -20px;padding-left:20px;padding-right:20px}
  .dossier .gat .gt{color:var(--ink)}
  .dossier .gat.rose i{background:var(--rose)}
  .dossier .gat.rose .gt{color:var(--ink);font-weight:600}
  .dosread{padding:15px 0 18px}
  .dosread p{margin:9px 0 0;font-size:15.6px;line-height:1.55;color:var(--muted)}
  @media(max-width:760px){ .dossier{padding:17px 17px 4px} .dosname{font-size:19px} }
  /* brand rose is 4.07 on the close band's gradient — the band needs the
     lighter tint the other dark grounds use */
  .band .ctabox .claimline em{color:#f3a9ce}

  /* --- homepage: what the draft rests on ------------------------------
     Section 4 showed one observation and admitted "one data point". The
     admission was honest but it undersold what actually happens, so the
     three earlier observations are shown and the footer states the truer,
     stronger fact. Laid out horizontally here; the Orbit page runs the
     same idea as a vertical dossier, so the two do not read as a repeat. */
  /* .gmail carries no padding of its own — every child supplies it, so this
     needs the same 16px its .gobs neighbour uses or it runs edge to edge */
  /* .gmail carries no padding of its own — every child supplies it, so this
     needs the same 16px its .gobs neighbour uses or it runs edge to edge.
     One observation per row: two sharing a line read as one fact, not two. */
  .gprior{padding:13px 16px 12px;margin:0;border-bottom:1px dashed var(--line)}
  .gprior .gpk{display:block;font-family:var(--mono);font-size:9.6px;letter-spacing:.15em;
    text-transform:uppercase;color:#166254;margin-bottom:8px}
  .gprior .gpi{display:flex;align-items:baseline;gap:7px;
    font-size:12.6px;line-height:1.5;color:var(--muted);padding:2.5px 0}
  .gprior .gpi i{width:5px;height:5px;border-radius:50%;background:#1d7d6c;
    flex:none;position:relative;top:-2px}
  .gprior .gpi b{font-family:var(--mono);font-size:10.6px;font-weight:500;
    color:var(--muted);letter-spacing:.04em;margin-left:auto;padding-left:10px;
    white-space:nowrap}
  @media(max-width:520px){ .gprior .gpi{font-size:12px} }

  /* --- Outbound page --------------------------------------------------
     Composed from primitives the package already has (.trules, .tprov,
     .cgrp, .claimline). Only the two-column draft comparison, the three
     ways-in grid and the lost-deal card are new. */
  .cmp{display:grid;gap:13px}
  .cmpcol{border-radius:16px;padding:17px 18px 15px}
  .cmpcol .cgrp{display:block;margin-bottom:10px}
  .cmpcol p{margin:0;font-size:14.6px;line-height:1.62}
  .cmpcol.bad{background:rgba(10,25,71,.5);border:1px solid #26407f}
  .cmpcol.bad .cgrp{color:#8b93b3}
  .cmpcol.bad p{color:#8b93b3}
  .cmpcol.good{background:rgba(63,214,189,.07);border:1px solid rgba(63,214,189,.34)}
  .cmpcol.good .cgrp{color:#57e3c8}
  .cmpcol.good p{color:#f3efe4}
  .cmptags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
  .ctag{font-family:var(--mono);font-size:9.8px;letter-spacing:.09em;text-transform:uppercase;
    padding:4px 8px;border-radius:999px;background:rgba(226,75,142,.16);color:#f3a9ce;
    border:1px solid rgba(226,75,142,.3)}
  .ctag.ok{background:rgba(63,214,189,.14);color:#57e3c8;border-color:rgba(63,214,189,.3)}

  .waysgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
  .way{background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:18px 18px 16px;box-shadow:0 8px 22px rgba(2,16,57,.06)}
  .way .cgrp{display:block;color:var(--rose-deep);margin-bottom:9px}
  .way p{margin:0;font-size:14.4px;line-height:1.6;color:var(--muted)}
  @media(max-width:860px){ .waysgrid{grid-template-columns:1fr} }

  .lostcard{background:rgba(10,25,71,.55);border:1px solid #26407f;border-radius:18px;
    padding:6px 20px 18px;box-shadow:0 1px 0 rgba(120,150,230,.13) inset,0 14px 32px rgba(2,16,57,.3)}
  .lrow{display:flex;flex-direction:column;gap:5px;padding:14px 0;
    border-bottom:1px solid rgba(120,150,230,.2)}
  .lrow .lk{font-family:var(--mono);font-size:9.8px;letter-spacing:.15em;
    text-transform:uppercase;color:#8b93b3}
  .lrow .lv{font-size:15.4px;line-height:1.5;color:#f3efe4}
  .lrow .lv.rose{color:#f3a9ce}
  .lfoot{padding-top:14px;font-size:13.2px;line-height:1.55;color:#aab2cf}

  /* what feeds the sequence writer — a source tag and what it supplies */
  .feeds{display:grid;gap:0;margin-top:8px;border-top:1px solid var(--line)}
  .feed{display:grid;grid-template-columns:200px 1fr;gap:18px;
    padding:16px 0;border-bottom:1px solid var(--line)}
  .feed .fsrc{font-family:var(--mono);font-size:10.4px;letter-spacing:.14em;
    text-transform:uppercase;color:#166254;padding-top:3px}
  .feed p{margin:0;font-size:15.4px;line-height:1.62;color:var(--ink)}
  .dark .feed .fsrc{color:#57e3c8}
  .dark .feed p{color:#dfe3f0}
  .dark .feeds,.dark .feed{border-color:rgba(120,150,230,.22)}
  @media(max-width:760px){
    .feed{grid-template-columns:1fr;gap:7px;padding:14px 0}
    .feed p{font-size:14.8px}
  }
  /* the lost-deal card was built for a dark ground; the section alternates
     to cream, so it needs the light counterpart — same pattern as the rest */
  .cream .lostcard{background:var(--card);border-color:var(--line);
    box-shadow:0 14px 32px rgba(2,16,57,.08)}
  .cream .lostcard .lrow{border-bottom-color:var(--line)}
  .cream .lostcard .lk{color:var(--muted)}
  .cream .lostcard .lv{color:var(--ink)}
  .cream .lostcard .lv.rose{color:var(--rose-deep)}
  .cream .lostcard .lfoot{color:var(--muted)}

  /* the banned openings, as a scannable list rather than prose */
  .tellgrid{display:grid;gap:0;margin-top:10px;border-top:1px solid var(--line)}
  .tellrow{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:baseline;
    padding:15px 0;border-bottom:1px solid var(--line)}
  .tellrow .tbad{font-family:var(--mono);font-size:13px;line-height:1.5;
    color:var(--rose-deep);text-decoration:line-through;
    text-decoration-color:rgba(161,45,102,.45);text-decoration-thickness:1.5px}
  .tellrow .twhy{font-size:14.6px;line-height:1.55;color:var(--muted)}
  .dark .tellgrid,.dark .tellrow{border-color:rgba(120,150,230,.22)}
  .dark .tellrow .tbad{color:#f3a9ce;text-decoration-color:rgba(243,169,206,.4)}
  .dark .tellrow .twhy{color:#c4c8da}
  @media(max-width:700px){
    .tellrow{grid-template-columns:1fr;gap:6px;padding:13px 0}
    .tellrow .tbad{font-size:12.4px}
    .tellrow .twhy{font-size:14px}
  }

  /* twenty arrive, one gets read — the archive rate, made visible */
  .inbox{margin-top:26px}
  .ibcells{display:flex;flex-wrap:wrap;gap:7px}
  .ibcells i{width:26px;height:34px;border-radius:5px;background:rgba(88,93,104,.16);
    border:1px solid rgba(88,93,104,.2);display:block}
  html.js .ibcells i{opacity:0;transform:translateY(7px)}
  .ibcells i.hit{background:linear-gradient(180deg,rgba(226,75,142,.9),rgba(226,75,142,.6));
    border-color:var(--rose-deep);box-shadow:0 5px 14px rgba(226,75,142,.3)}
  .inbox.in .ibcells i,[data-rv].in .ibcells i{opacity:1;transform:none;
    transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1);
    transition-delay:calc(var(--i) * 42ms)}
  .ibcap{margin:13px 0 0;font-family:var(--mono);font-size:11.4px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted)}
  @media(max-width:520px){ .ibcells i{width:22px;height:29px;gap:6px} }
  @media(prefers-reduced-motion:reduce){
    .ibcells i{opacity:1!important;transform:none!important;transition:none!important}
  }

  /* the five delivery checks */
  .checks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;
    border-top:1px solid rgba(120,150,230,.22)}
  .checks li{position:relative;padding:13px 0 13px 30px;font-size:15.4px;
    line-height:1.5;color:#dfe3f0;border-bottom:1px solid rgba(120,150,230,.22)}
  .checks li::before{content:"";position:absolute;left:4px;top:19px;width:11px;height:6px;
    border-left:2px solid #3fd6bd;border-bottom:2px solid #3fd6bd;transform:rotate(-45deg)}
  .cream .checks{border-top-color:var(--line)}
  .cream .checks li{color:var(--ink);border-bottom-color:var(--line)}
  .cream .checks li::before{border-color:#166254}

  /* the comparison read as two neutral examples, so the wrong one was being
     read as the product. Marks and a blunt label, before any prose. */
  .cmphd{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:12px}
  .cmpmark{width:19px;height:19px;border-radius:50%;flex:none;position:relative}
  .cmpmark.x{background:rgba(226,75,142,.2);border:1px solid rgba(226,75,142,.55)}
  .cmpmark.x::before,.cmpmark.x::after{content:"";position:absolute;left:4px;top:8.5px;
    width:9px;height:1.7px;background:#f3a9ce;border-radius:2px}
  .cmpmark.x::before{transform:rotate(45deg)}
  .cmpmark.x::after{transform:rotate(-45deg)}
  .cmpmark.tick{background:rgba(63,214,189,.18);border:1px solid rgba(63,214,189,.5)}
  .cmpmark.tick::before{content:"";position:absolute;left:5px;top:6px;width:8px;height:4px;
    border-left:1.8px solid #57e3c8;border-bottom:1.8px solid #57e3c8;transform:rotate(-45deg)}
  .cmplab{font-family:var(--mono);font-size:11.4px;letter-spacing:.15em;text-transform:uppercase}
  .cmpcol.bad .cmplab{color:#f3a9ce}
  .cmpcol.good .cmplab{color:#57e3c8}
  .cmpsub{font-size:12.6px;color:#8b93b3;flex:1 1 auto;min-width:0}
  .cmpcol.good .cmpsub{color:#aab2cf}
  /* the wrong one sits back via its frame, not via opacity — a blanket
     fade took the body text to 4.28 against the card, under the 4.5 bar,
     and a declared-colour check cannot see that. Measured by pixel. */
  .cmpcol.bad{background:rgba(10,25,71,.34);border-color:rgba(38,64,127,.7)}
  .cmpcol.good{box-shadow:0 12px 30px rgba(2,16,57,.32)}

  /* channels the persona actually answers on, and the ones it will not write */
  .changrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
  .chan{border:1px solid rgba(63,214,189,.4);background:rgba(63,214,189,.09);
    border-radius:12px;padding:14px 14px;text-align:center}
  .chan .chn{font-family:var(--mono);font-size:11.4px;letter-spacing:.1em;
    text-transform:uppercase;color:#57e3c8}
  .chan.skip{border-color:rgba(120,150,230,.24);background:rgba(10,25,71,.4)}
  .chan.skip .chn{color:#8b93b3;text-decoration:line-through;
    text-decoration-color:rgba(139,147,179,.6)}
  .chcap{margin:12px 0 0;font-size:13.2px;color:#aab2cf}
  .cream .chan{border-color:rgba(22,98,84,.34);background:rgba(22,98,84,.07)}
  .cream .chan .chn{color:#166254}
  .cream .chan.skip{border-color:var(--line);background:transparent}
  .cream .chan.skip .chn{color:var(--muted)}
  .cream .chcap{color:var(--muted)}
  @media(max-width:620px){
    /* minmax(0,1fr) rather than 1fr: a long German label ("Gesprächsleitfaden")
       sets the track's min-content width and pushes the grid 6px past the
       viewport at 360. */
    .changrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
    .chan{padding:13px 8px}
    .chan .chn{font-size:10.6px;letter-spacing:.06em;word-break:break-word}
  }

  /* brand rose is 4.29 on navy — every dark ground needs the lighter tint,
     not just the close band. Generalised from the band-only fix. */
  .dark .claimline em,.band .claimline em{color:#f3a9ce}

  /* --- Marketing page -------------------------------------------------
     Reuses .tellgrid, .tprov, .lostcard and .chcap from the other pages.
     New: the radar card and the topic-plan grid. */
  .radar{background:rgba(10,25,71,.55);border:1px solid #26407f;border-radius:18px;
    padding:6px 20px 18px;box-shadow:0 1px 0 rgba(120,150,230,.13) inset,0 14px 32px rgba(2,16,57,.3)}
  .radhd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:14px 0 12px;border-bottom:1px solid rgba(120,150,230,.22)}
  .radk{font-family:var(--mono);font-size:10.4px;letter-spacing:.15em;
    text-transform:uppercase;color:#57e3c8}
  .radn{font-family:var(--display);font-size:19px;color:#fbf7ef}
  .angle{padding:15px 0;border-bottom:1px solid rgba(120,150,230,.22)}
  .angle .ah{margin:0;font-family:var(--display);font-size:17.4px;line-height:1.34;color:#fbf7ef}
  .angle .aw{margin:7px 0 0;font-size:14px;line-height:1.58;color:#c4c8da}
  .angle .asrc{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:9.8px;
    letter-spacing:.13em;text-transform:uppercase;color:#8b93b3}
  .radfoot{padding-top:14px;font-size:13.2px;line-height:1.55;color:#aab2cf}
  .cream .radar{background:var(--card);border-color:var(--line);box-shadow:0 14px 32px rgba(2,16,57,.08)}
  .cream .radk{color:#166254}
  .cream .radn,.cream .angle .ah{color:var(--ink)}
  .cream .angle .aw,.cream .radfoot,.cream .angle .asrc{color:var(--muted)}
  .cream .radhd,.cream .angle{border-bottom-color:var(--line)}

  .planwrap{margin-top:20px;border-top:1px solid rgba(120,150,230,.22)}
  .planrow{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,84px);
    gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(120,150,230,.22)}
  .planrow.planhead{padding:10px 0}
  .planrow .pang{font-size:15px;line-height:1.45;color:#f3efe4}
  .planhead .pang,.planhead .psurf{font-family:var(--mono);font-size:9.8px;letter-spacing:.13em;
    text-transform:uppercase;color:#8b93b3;text-align:center}
  .planhead .pang{text-align:left}
  .pcell{font-family:var(--mono);font-size:9.6px;letter-spacing:.1em;text-transform:uppercase;
    text-align:center;padding:5px 6px;border-radius:999px;border:1px solid transparent}
  .pcell.used{background:rgba(63,214,189,.15);color:#57e3c8;border-color:rgba(63,214,189,.32)}
  .pcell.open{background:rgba(120,150,230,.1);color:#aab2cf;border-color:rgba(120,150,230,.26)}
  .pcell.retired{background:rgba(226,75,142,.14);color:#f3a9ce;border-color:rgba(226,75,142,.3)}
  .cream .planwrap,.cream .planrow{border-color:var(--line)}
  .cream .planrow .pang{color:var(--ink)}
  .cream .planhead .pang,.cream .planhead .psurf{color:var(--muted)}
  .cream .pcell.used{background:rgba(22,98,84,.12);color:#166254;border-color:rgba(22,98,84,.3)}
  .cream .pcell.open{background:transparent;color:var(--muted);border-color:var(--line)}
  .cream .pcell.retired{background:rgba(161,45,102,.1);color:var(--rose-deep);border-color:rgba(161,45,102,.28)}
  @media(max-width:700px){
    .planrow{grid-template-columns:minmax(0,1fr) repeat(3,58px);gap:6px}
    .planrow .pang{font-size:13.6px}
    .pcell{font-size:8.6px;letter-spacing:.05em;padding:5px 3px}
    .planhead .psurf{font-size:8.4px;letter-spacing:.05em}
  }

  /* The filter. First attempt drew a funnel, which was the wrong metaphor —
     nothing flows through and nothing is lost in transit. Twelve things are
     moving; two of them are yours. So: one row, two lit. The highlight
     arrives after all twelve have landed, so the eye sees the field first
     and the selection second. */
  .filterviz{margin-top:26px}
  .fvhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding-bottom:11px;border-bottom:1px solid var(--line)}
  .fvk{font-family:var(--mono);font-size:10.2px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted)}
  .fvn{font-family:var(--display);font-size:26px;line-height:1;color:var(--muted)}
  .fvtiles{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .fvtiles i{width:34px;height:44px;border-radius:6px;display:block;
    background:rgba(88,93,104,.14);border:1px solid rgba(88,93,104,.24)}
  html.js .fvtiles i{opacity:0;transform:translateY(6px)}
  [data-rv].in .fvtiles i{opacity:1;transform:none;
    transition:opacity .32s ease,transform .38s cubic-bezier(.2,.7,.2,1),
               background .45s ease .62s,border-color .45s ease .62s,box-shadow .45s ease .62s;
    transition-delay:calc(var(--i) * 40ms)}
  [data-rv].in .fvtiles i.on{background:linear-gradient(180deg,var(--rose),#c33a79);
    border-color:var(--rose-deep);box-shadow:0 6px 18px rgba(226,75,142,.32)}
  .fvcap{margin:15px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:52ch}
  .fvcap b{font-weight:400;color:var(--ink)}
  .dark .fvhead{border-bottom-color:rgba(120,150,230,.24)}
  .dark .fvk,.dark .fvn,.dark .fvcap{color:#aab2cf}
  .dark .fvcap b{color:#f3efe4}
  .dark .fvtiles i{background:rgba(120,150,230,.1);border-color:rgba(120,150,230,.24)}
  @media(max-width:520px){
    .fvtiles{gap:7px}
    .fvtiles i{width:28px;height:37px}
    .fvn{font-size:23px}
  }
  @media(prefers-reduced-motion:reduce){
    .fvtiles i{opacity:1!important;transform:none!important;transition:none!important}
    .fvtiles i.on{background:linear-gradient(180deg,var(--rose),#c33a79)!important;
      border-color:var(--rose-deep)!important}
  }

  /* the week, as a calendar rather than a folder of drafts */
  .cal{background:var(--card);border:1px solid var(--line);border-radius:18px;
    padding:6px 20px 18px;box-shadow:0 14px 32px rgba(2,16,57,.08)}
  .calhd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:14px 0 12px;border-bottom:1px solid var(--line)}
  .calk{font-family:var(--display);font-size:19px;color:var(--ink)}
  .caln{font-family:var(--mono);font-size:10.2px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted)}
  .calrow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;
    align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
  .cday{font-family:var(--mono);font-size:10.2px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted)}
  .cwhat{font-size:14.6px;line-height:1.45;color:var(--ink)}
  .cwhat.empty{color:var(--muted);font-style:italic}
  .cstate{font-family:var(--mono);font-size:9.4px;letter-spacing:.1em;text-transform:uppercase;
    padding:4px 9px;border-radius:999px;white-space:nowrap}
  .cstate.st{background:rgba(22,98,84,.12);color:#166254;border:1px solid rgba(22,98,84,.3)}
  .cstate.op{background:transparent;color:var(--muted);border:1px solid var(--line)}
  .calfoot{padding-top:14px;font-size:13.2px;color:var(--muted)}
  .dark .cal{background:rgba(10,25,71,.55);border-color:#26407f;
    box-shadow:0 1px 0 rgba(120,150,230,.13) inset,0 14px 32px rgba(2,16,57,.3)}
  .dark .calhd,.dark .calrow{border-bottom-color:rgba(120,150,230,.22)}
  .dark .calk{color:#fbf7ef}
  .dark .caln,.dark .cday,.dark .calfoot,.dark .cwhat.empty{color:#aab2cf}
  .dark .cwhat{color:#f3efe4}
  .dark .cstate.st{background:rgba(63,214,189,.15);color:#57e3c8;border-color:rgba(63,214,189,.32)}
  .dark .cstate.op{color:#aab2cf;border-color:rgba(120,150,230,.26)}
  @media(max-width:520px){
    .calrow{grid-template-columns:34px minmax(0,1fr) auto;gap:9px}
    .cwhat{font-size:13.6px}
  }

  /* one angle, two formats, side by side — the document's own ask */
  .pairk{font-family:var(--mono);font-size:10.2px;letter-spacing:.14em;
    text-transform:uppercase;color:#57e3c8;margin-top:24px}
  .cream .pairk{color:#166254}
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
  .pcol{background:rgba(10,25,71,.5);border:1px solid #26407f;border-radius:16px;
    padding:17px 18px 16px}
  .pcol .cgrp{display:block;color:#f3a9ce;margin-bottom:10px}
  .pcol p{margin:0;font-size:14.6px;line-height:1.62;color:#dfe3f0}
  .cream .pcol{background:var(--card);border-color:var(--line);box-shadow:0 8px 22px rgba(2,16,57,.06)}
  .cream .pcol .cgrp{color:var(--rose-deep)}
  .cream .pcol p{color:var(--ink)}
  @media(max-width:760px){ .pair{grid-template-columns:1fr} }

  /* --- Getting started -------------------------------------------------
     The nine-step panel, plus a good/bad pair reusing .tellgrid. */
  .steps{background:rgba(10,25,71,.55);border:1px solid #26407f;border-radius:18px;
    padding:6px 20px 10px;box-shadow:0 1px 0 rgba(120,150,230,.13) inset,0 14px 32px rgba(2,16,57,.3)}
  .stephd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:14px 0 12px;border-bottom:1px solid rgba(120,150,230,.22)}
  .stk{font-family:var(--display);font-size:19px;color:#fbf7ef}
  .stn{font-family:var(--mono);font-size:10.2px;letter-spacing:.13em;
    text-transform:uppercase;color:#57e3c8}
  .steplist{list-style:none;margin:6px 0 0;padding:0}
  .steplist li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:13px;
    padding:13px 0;align-items:start;border-bottom:1px solid rgba(120,150,230,.16)}
  .sbody{min-width:0}
  .sdd{margin:4px 0 0;font-size:14.2px;line-height:1.55;color:#8b93b3}
  .cream .sdd{color:var(--muted)}
  .steplist li.now .sdd{color:#c4c8da}
  .cream .steplist li.now .sdd{color:var(--muted)}
  @media(min-width:960px){
    .steplist{display:grid;grid-template-columns:1fr 1fr;column-gap:34px}
  }
  .steplist li:last-child{border-bottom:0}
  .sno{width:26px;height:26px;margin-top:1px;border-radius:50%;flex:none;display:flex;
    align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;
    color:#8b93b3;border:1px solid rgba(120,150,230,.3)}
  .stx{display:block;font-size:15.6px;line-height:1.35;color:#fbf7ef}
  .steplist li.done .sno{background:rgba(63,214,189,.16);border-color:rgba(63,214,189,.45);
    color:transparent;position:relative}
  .steplist li.done .sno::before{content:"";position:absolute;left:8px;top:9px;width:8px;height:4px;
    border-left:1.8px solid #57e3c8;border-bottom:1.8px solid #57e3c8;transform:rotate(-45deg)}
  .steplist li.done .stx{color:#aab2cf}
  .steplist li.now .sno{background:rgba(226,75,142,.2);border-color:var(--rose);color:#f3a9ce}
  .steplist li.now .stx{color:#fbf7ef}
  .stepfoot{padding-top:14px;margin-top:8px;border-top:1px solid rgba(120,150,230,.22);
    font-size:13.2px;line-height:1.55;color:#aab2cf}
  .cream .steps{background:var(--card);border-color:var(--line);box-shadow:0 14px 32px rgba(2,16,57,.08)}
  .cream .stk{color:var(--ink)} .cream .stn{color:#166254}
  .cream .stx{color:var(--muted)} .cream .stepfoot{color:var(--muted)}
  .cream .steplist li,.cream .stephd,.cream .stepfoot{border-color:var(--line)}

  /* the good half of a good/bad pair — same grid, not struck through */
  .tellrow .tgood{font-family:var(--mono);font-size:13px;line-height:1.5;color:#166254}
  .dark .tellrow .tgood{color:#57e3c8}
  .waysgrid.two{grid-template-columns:1fr 1fr}
  @media(max-width:860px){ .waysgrid.two{grid-template-columns:1fr} }

  /* what you hand it, and what comes back */
  .harvest{display:grid;grid-template-columns:1fr 54px 1fr;gap:0;align-items:center;margin-top:22px}
  .hin,.hout{display:flex;flex-direction:column;gap:9px;
    background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 17px;
    box-shadow:0 8px 22px rgba(2,16,57,.06)}
  .hk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);margin-bottom:2px}
  .hk.teal{color:#166254}
  .hitem{font-size:14.4px;line-height:1.4;color:var(--muted);
    padding-left:16px;position:relative}
  .hitem::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
    border-radius:2px;background:rgba(88,93,104,.4)}
  .hrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .hlab{font-size:14.4px;color:var(--ink)}
  .hst{font-family:var(--mono);font-size:9.2px;letter-spacing:.09em;text-transform:uppercase;
    padding:4px 8px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
  .hst.got{background:rgba(22,98,84,.12);color:#166254;border-color:rgba(22,98,84,.3)}
  .hst.part{background:rgba(201,138,46,.14);color:#7a5312;border-color:rgba(201,138,46,.34)}
  .hst.gap{background:transparent;color:var(--rose-deep);border-color:rgba(161,45,102,.3)}
  .harrow{height:2px;background:linear-gradient(90deg,rgba(88,93,104,.3),var(--rose));
    position:relative}
  .harrow::after{content:"";position:absolute;right:-1px;top:-4px;width:0;height:0;
    border-left:8px solid var(--rose);border-top:5px solid transparent;border-bottom:5px solid transparent}
  .dark .hin,.dark .hout{background:rgba(10,25,71,.5);border-color:#26407f;box-shadow:none}
  .dark .hk{color:#aab2cf} .dark .hk.teal{color:#57e3c8}
  .dark .hitem{color:#aab2cf} .dark .hlab{color:#f3efe4}
  @media(max-width:760px){
    .harvest{grid-template-columns:1fr;gap:0}
    .harrow{width:2px;height:34px;margin:12px 0 12px 20px;
      background:linear-gradient(180deg,rgba(88,93,104,.3),var(--rose))}
    .harrow::after{right:auto;left:-4px;bottom:-1px;top:auto;
      border-left:5px solid transparent;border-right:5px solid transparent;
      border-top:8px solid var(--rose);border-bottom:0}
  }

  /* the hand-off into the dashboard */
  .handoff{background:rgba(10,25,71,.55);border:1px solid #26407f;border-radius:18px;
    padding:22px 21px 20px;box-shadow:0 1px 0 rgba(120,150,230,.13) inset,0 14px 32px rgba(2,16,57,.3)}
  .hoq{font-family:var(--display);font-size:18.4px;line-height:1.44;color:#fbf7ef}
  .hoattr{margin-top:12px;font-family:var(--mono);font-size:9.8px;letter-spacing:.14em;
    text-transform:uppercase;color:#8b93b3}
  .homove{margin-top:20px;padding-top:17px;border-top:1px solid rgba(120,150,230,.24);
    display:flex;flex-direction:column;gap:8px}
  .homk{font-family:var(--mono);font-size:9.8px;letter-spacing:.15em;
    text-transform:uppercase;color:#f3a9ce}
  .homt{font-family:var(--display);font-size:17.6px;line-height:1.4;color:#fbf7ef}
  .cream .handoff{background:var(--card);border-color:var(--line);box-shadow:0 14px 32px rgba(2,16,57,.08)}
  .cream .hoq,.cream .homt{color:var(--ink)}
  .cream .hoattr{color:var(--muted)} .cream .homk{color:var(--rose-deep)}
  .cream .homove{border-top-color:var(--line)}


  /* the harvest pills were written for cream and the section alternates to
     navy — dark counterparts, same as every other component here */
  .dark .hst.got{background:rgba(63,214,189,.15);color:#57e3c8;border-color:rgba(63,214,189,.34)}
  .dark .hst.part{background:rgba(201,138,46,.2);color:#e8b455;border-color:rgba(201,138,46,.42)}
  .dark .hst.gap{background:transparent;color:#f3a9ce;border-color:rgba(226,75,142,.36)}

  /* why the exercise is worth doing, before how it works */
  .whyrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0 32px;
    padding-top:26px;border-top:1px solid rgba(120,150,230,.22)}
  .whyc .whyk{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:#57e3c8;margin-bottom:8px}
  .whyc p{margin:0;font-size:14.8px;line-height:1.6;color:#c4c8da}
  .cream .whyrow{border-top-color:var(--line)}
  .cream .whyc .whyk{color:#166254}
  .cream .whyc p{color:var(--muted)}
  @media(max-width:820px){ .whyrow{grid-template-columns:1fr;gap:18px} }

  /* --- Studio Core -----------------------------------------------------
     A day as a timeline, the talking-point unit, the seven outputs and
     the three claim tiers. Everything else is reused. */
  .daycard{background:rgba(10,25,71,.55);border:1px solid #26407f;border-radius:18px;
    padding:6px 20px 16px;box-shadow:0 1px 0 rgba(120,150,230,.13) inset,0 14px 32px rgba(2,16,57,.3)}
  .dayhd{padding:14px 0 12px;border-bottom:1px solid rgba(120,150,230,.22)}
  .dayk{font-family:var(--display);font-size:19px;color:#fbf7ef}
  .dayrow{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;
    padding:12px 0;border-bottom:1px solid rgba(120,150,230,.14);align-items:baseline}
  .dayrow:last-child{border-bottom:0}
  .dayt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#57e3c8}
  .dayw{font-size:14.8px;line-height:1.5;color:#dfe3f0}
  .cream .daycard{background:var(--card);border-color:var(--line);box-shadow:0 14px 32px rgba(2,16,57,.08)}
  .cream .dayk{color:var(--ink)} .cream .dayt{color:#166254} .cream .dayw{color:var(--ink)}
  .cream .dayhd,.cream .dayrow{border-color:var(--line)}

  .tpu{background:rgba(10,25,71,.55);border:1px solid #26407f;border-radius:18px;
    padding:18px 20px 16px;box-shadow:0 1px 0 rgba(120,150,230,.13) inset,0 14px 32px rgba(2,16,57,.3)}
  .tpuk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:#57e3c8;padding-bottom:12px;border-bottom:1px solid rgba(120,150,230,.22)}
  .tpurow{display:flex;flex-direction:column;gap:5px;padding:13px 0;
    border-bottom:1px solid rgba(120,150,230,.16)}
  .tpul{font-family:var(--mono);font-size:9.6px;letter-spacing:.14em;
    text-transform:uppercase;color:#8b93b3}
  .tpul.teal{color:#57e3c8} .tpul.rose{color:#f3a9ce}
  .tpuv{font-size:15px;line-height:1.45;color:#f3efe4}
  .tpufoot{padding-top:14px;font-size:13.2px;line-height:1.55;color:#aab2cf}
  .cream .tpu{background:var(--card);border-color:var(--line);box-shadow:0 14px 32px rgba(2,16,57,.08)}
  .cream .tpuk{color:#166254} .cream .tpul{color:var(--muted)}
  .cream .tpul.teal{color:#166254} .cream .tpul.rose{color:var(--rose-deep)}
  .cream .tpuv{color:var(--ink)} .cream .tpufoot{color:var(--muted)}
  .cream .tpuk,.cream .tpurow{border-color:var(--line)}

  .sevens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
  .sv{background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:17px 18px 16px;box-shadow:0 8px 22px rgba(2,16,57,.06)}
  .svk{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--rose-deep);margin-bottom:9px}
  .sv p{margin:0;font-size:14.4px;line-height:1.6;color:var(--muted)}
  .dark .sv{background:rgba(10,25,71,.5);border-color:#26407f;box-shadow:none}
  .dark .svk{color:#f3a9ce} .dark .sv p{color:#c4c8da}
  @media(max-width:760px){ .sevens{grid-template-columns:1fr} }

  .tiers3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
  .t3{border:1px solid rgba(120,150,230,.28);border-radius:14px;padding:15px 15px 14px;
    background:rgba(10,25,71,.4)}
  .t3k{display:block;font-family:var(--display);font-size:17px;color:#fbf7ef;margin-bottom:6px}
  .t3 p{margin:0;font-size:13.8px;line-height:1.55;color:#aab2cf}
  .cream .t3{border-color:var(--line);background:var(--card)}
  .cream .t3k{color:var(--ink)} .cream .t3 p{color:var(--muted)}
  @media(max-width:640px){ .tiers3{grid-template-columns:1fr} }
  .dayfoot{padding-top:14px;margin-top:6px;border-top:1px solid rgba(120,150,230,.22);
    font-size:13.2px;line-height:1.55;color:#aab2cf}
  .cream .dayfoot{border-top-color:var(--line);color:var(--muted)}

  /* --- Contact ---------------------------------------------------------
     The form is a real form: labels tied to inputs, a fieldset round the
     radio group, visible focus, and no placeholder standing in for a label. */
  .cwhat{display:grid;gap:0;margin-top:26px;border-top:1px solid rgba(120,150,230,.22)}
  .cw{padding:15px 0;border-bottom:1px solid rgba(120,150,230,.22)}
  .cwk{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:#57e3c8;margin-bottom:6px}
  .cw p{margin:0;font-size:14.8px;line-height:1.6;color:#c4c8da}
  .cream .cwhat,.cream .cw{border-color:var(--line)}
  .cream .cwk{color:#166254} .cream .cw p{color:var(--muted)}

  /* The package already ships .s2form as a dark application form, and this
     page reuses it rather than wrapping it in a cream card — which is what
     made the labels render on navy. Only the bits it does not cover are new. */
  .formwrap{background:rgba(10,25,71,.55);border:1px solid #26407f;border-radius:18px;
    padding:24px 22px 22px;box-shadow:0 1px 0 rgba(120,150,230,.13) inset,0 14px 34px rgba(2,16,57,.3)}
  .formwrap .s2form{max-width:none}
  .fset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
  .fset legend{font-family:var(--mono);font-size:10.6px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;color:#aab2cf;padding:0}
  .fopts{display:flex;flex-direction:column;gap:9px;margin-top:3px}
  .fopt{display:flex;align-items:flex-start;gap:9px;font-size:15px;line-height:1.45;
    color:#f3efe4;cursor:pointer}
  .fopt input{margin:3px 0 0;accent-color:var(--rose);width:16px;height:16px;flex:none}
  .fhint{margin-top:1px}
  .cream .formwrap{background:var(--card);border-color:var(--line);
    box-shadow:0 14px 34px rgba(2,16,57,.1)}
  .cream .fset legend{color:var(--muted)}
  .cream .fopt{color:var(--ink)}

  .directline{margin:22px 0 0}
  .dmail{font-family:var(--display);font-size:26px;color:#fbf7ef;
    border-bottom:2px solid rgba(243,169,206,.5);padding-bottom:2px;text-decoration:none}
  .dmail:hover{border-bottom-color:var(--rose)}
  .cream .dmail{color:var(--ink);border-bottom-color:rgba(161,45,102,.4)}
  @media(max-width:520px){ .dmail{font-size:21px} }

  /* --- Advisory --------------------------------------------------------
     Reuses the numbered .walk rows for the six services, plus a two-column
     split for the division of labour. */
  .walk.svc .wno{font-size:22px;letter-spacing:-.02em}
  @media(min-width:900px){ .walk.svc{column-gap:38px} }
  .split2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
  .sp{background:rgba(10,25,71,.5);border:1px solid #26407f;border-radius:16px;
    padding:18px 18px 17px}
  .spk{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;margin-bottom:9px}
  .spk.teal{color:#57e3c8} .spk.rose{color:#f3a9ce}
  .sp p{margin:0;font-size:14.8px;line-height:1.62;color:#dfe3f0}
  .cream .sp{background:var(--card);border-color:var(--line);box-shadow:0 8px 22px rgba(2,16,57,.06)}
  .cream .spk.teal{color:#166254} .cream .spk.rose{color:var(--rose-deep)}
  .cream .sp p{color:var(--ink)}
  @media(max-width:700px){ .split2{grid-template-columns:1fr} }

  /* --- numbered rows ---------------------------------------------------
     Deleted during the getting-started merge without checking that the
     advisory page reuses the same markup, which left it unstyled.
     Restored here, and the top margin is explicit so the first row never
     sits against the claim line above it. */
  .walk{margin-top:30px;border-top:1px solid var(--line)}
  .wstep{display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;
    padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
  .wno{font-family:var(--display);font-size:26px;line-height:1;color:var(--rose-deep);
    padding-top:3px}
  .wbody{min-width:0}
  .wt{display:block;font-size:17.4px;line-height:1.35;color:var(--ink);margin-bottom:6px}
  .wd{margin:0;font-size:15px;line-height:1.62;color:var(--muted)}
  .dark .walk,.dark .wstep{border-color:rgba(120,150,230,.22)}
  .dark .wno{color:#f3a9ce}
  .dark .wt{color:#fbf7ef}
  .dark .wd{color:#c4c8da}
  @media(min-width:900px){
    .walk{display:grid;grid-template-columns:1fr 1fr;column-gap:38px;border-top:0}
    .wstep:nth-child(-n+2){border-top:1px solid var(--line)}
    .dark .wstep:nth-child(-n+2){border-top-color:rgba(120,150,230,.22)}
  }
  @media(max-width:520px){
    .wstep{grid-template-columns:40px minmax(0,1fr);gap:13px;padding:16px 0}
    .wno{font-size:22px}
    .wt{font-size:16.4px}
    .wd{font-size:14.6px}
  }

  /* the honeypot: off-screen rather than display:none, so a bot that skips
     hidden fields still fills it, and never reachable by keyboard or reader */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  /* the shell ships .formdone hidden; these are just its contents */
  .formdone{padding:22px 21px;border-radius:16px;margin-top:4px}
  .formdone .fdh{margin:0;font-family:var(--display);font-size:19px;line-height:1.4;color:#fbf7ef}
  .formdone .fdb{margin:9px 0 0;font-size:14.6px;line-height:1.6;color:#aab2cf}
  .cream .formdone .fdh{color:var(--ink)}
  .cream .formdone .fdb{color:var(--muted)}
  .ferr{margin:12px 0 0;font-size:13.6px;line-height:1.55;color:#f3a9ce;
    padding:11px 13px;border-radius:10px;background:rgba(226,75,142,.12);
    border:1px solid rgba(226,75,142,.34)}
  .cream .ferr{color:var(--rose-deep);background:rgba(161,45,102,.08);
    border-color:rgba(161,45,102,.3)}

  /* --- narrow-viewport nav fit (item 7) ------------------------------
     The nav's right-hand group (language toggle + CTA + hamburger) does
     not fit German below ~375px. Tighten the furniture first, then stand
     the CTA down below 360px. Measured on index and the legal pages, EN
     and DE, at 320/360/375/390/412. */
  @media(max-width:400px){
    .s2nav .nwrap{padding-left:16px;padding-right:16px;gap:8px}
    .s2nav .s2right{gap:9px}
    .s2nav .langtog{gap:3px;font-size:10px}
    .s2nav .langtog button{padding:3px 6px}
    .s2nav .navcta{font-size:12.2px;padding:6px 11px}
  }
  @media(max-width:359px){
    .s2nav .navcta{display:none}
  }

  /* --- narrow-viewport content fits (item 7) -------------------------
     Two overflows that survived the nav fix. Both measured at 320px,
     EN and DE, with reveals forced and animations settled. */

  /* .climb: a 1fr track cannot shrink below min-content, and .ovr is
     nowrap, so the single mobile column resolved wider than its own row.
     Only visible in DE, where the strings are longer. */
  @media(max-width:880px){
    .climb .crow{grid-template-columns:minmax(0,1fr)}
  }
  @media(max-width:420px){
    .climb .ovr{white-space:normal}
  }

  /* .mfragfield: absolutely-positioned scraps right of centre ran past
     the container edge on the longest English label. */
  @media(max-width:400px){
    .mfragfield .f2{left:42%}
    .mfragfield .f4{left:40%}
    .mfragfield .f6{left:44%}
    .mfragfield .frag{max-width:58%}
  }

  /* --- homepage desktop corrections ---------------------------------- */

  /* .dnak is absolutely positioned 34px above .dnareads; the grid only
     reserved 26px, so the label cut through the subhead. Measured. */
  .dnawrap{margin-top:54px}

  /* The gate capsule is correct stacked (w/h 9.6) and wrong in the row
     layout (w/h 1.30 at 1440, 0.79 at 900), where it wraps to five lines
     and reads as a blob. Rounded tag above the stacking breakpoint only. */
  @media(min-width:761px){
    .mtime .tlink{width:124px}
    .mtime .tgate{border-radius:13px;padding:7px 11px;line-height:1.5;
                  font-size:10.2px;letter-spacing:.02em;max-width:100%}
  }

  /* --- 'Where you are now' panel, desktop composition ----------------- */
  @media(min-width:1041px){
    /* .pcol is a card component borrowed for a text column; its cream fill
       is the same value as the paper scraps beside it. No card below
       1041px either, so this makes desktop consistent. */
    .psplit .pcol{background:none;border:0;box-shadow:none;padding:0}

    /* the section's turn — a verdict on both columns, so centre it
       rather than leaving it hanging under one */
    .pclaim{margin:46px auto 0;max-width:32ch;text-align:center}
  }

  /* --- #trust: rule and the instance that proves it ------------------- */
  /* every neighbouring section runs the full 1080 measure; this one
     stepped in to 820 and broke the page rhythm. Outside the breakpoint
     so 821-860px aligns too; below 820 the wrap is narrower anyway. */

  @media(min-width:861px){
    /* claim left, receipt right — first baselines aligned so the pairing
       reads across rather than down */
    #trust .trule{display:grid;
      grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
      column-gap:56px;align-items:baseline;padding:27px 0}
    #trust .rrule{font-size:21px;line-height:1.34;max-width:24ch}
    #trust .rgloss{margin:0;max-width:52ch}
  }

  /* --- #stack connector panel: alignment only -------------------------
     The brief requires this panel stay grey and unranked, so nothing here
     touches colour, weight or order. The fault is that it centres its
     label, chips and caption while the whole page — including the .dfbar
     row on the panel beside it — is left aligned. */
  /* 1041px, not 861: that is where .stackhalves actually becomes two
     columns. Below it the halves stack and the centred treatment is
     left exactly as it was. */
  @media(min-width:1041px){
    #stack .connbar{text-align:left;padding:26px 26px 24px}
    #stack .connbar .eyebrow::after{margin-left:0;margin-right:0}
    #stack .conn-wrap{justify-content:flex-start;margin-left:0;margin-right:0;
                      margin-top:16px}
    #stack .connbar p:last-child{margin-top:20px;max-width:44ch}

    /* the halves were 335 vs 468 — the left read as unfinished next to a
       panel half again its height. Stretch it and anchor the caption to
       the bottom edge so it fills the row deliberately rather than
       trailing off. Still no colour, weight or order change. */
    #stack .stackhalves{align-items:stretch}
    #stack .connbar{display:flex;flex-direction:column}
    #stack .connbar p:last-child{margin-top:auto;padding-top:22px}
  }

  /* --- marketing calendar: class-name collision -----------------------
     .cwhat names two unrelated things: the title span inside .calrow
     here, and a <div> container of .cw blocks on the contact page. The
     contact rule (display:grid, margin-top:26px, border-top) was landing
     on these spans, which is the stray hairline floating above each
     title and the 13px offset that left the title sitting below the day
     label and the state pill instead of centred with them. Scoped
     revert; the contact component is untouched. */
  #calendar .calrow .cwhat{display:block;margin-top:0;border-top:0}


  /* --- the month, as an actual calendar --------------------------------
     The hero says "Two things worth saying this month. Not twelve." and
     the artefact under it showed a week. This is the view that headline
     describes. Deliberately sparse: two angles, five pieces, sixteen
     empty weekdays and a completely empty final week — because a packed
     month would contradict the sentence directly above it.

     Grid above 1041px; below that it collapses to a list of the days
     that actually carry something, which is the readable shape on a
     phone and keeps the empty days from becoming thirty-one blank rows. */
  #calendar .calintro{max-width:64ch}
  #calendar .cal.calmonth{margin-top:36px;padding:6px 22px 20px}

  .mlegend{display:flex;flex-wrap:wrap;gap:18px;padding:14px 0 4px}
  .mkey{position:relative;padding-left:15px;font-family:var(--mono);
    font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .mkey::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;
    border-radius:2px;background:currentColor}
  .mkey.ang-a{color:var(--rose-deep)}
  .mkey.ang-b{color:#166254}

  .mdows{display:none}
  .mgrid{display:grid;grid-template-columns:1fr;gap:0}
  .mcell{padding:12px 0;border-bottom:1px solid var(--line)}
  .mcell.pad,.mcell.wknd:not(:has(.mpiece)):not(:has(.msrc)){display:none}
  /* on the list fallback an empty day would be a blank row, so drop it */
  .mcell:not(:has(.mpiece)):not(:has(.msrc)){display:none}
  .mdate{font-family:var(--mono);font-size:10.2px;letter-spacing:.12em;
    color:var(--muted);display:block;margin-bottom:7px}
  .msrc{display:inline-block;font-family:var(--mono);font-size:9.6px;
    letter-spacing:.11em;text-transform:uppercase;margin-bottom:6px}
  .msrc.ang-a{color:var(--rose-deep)}
  .msrc.ang-b{color:#166254}
  .mpiece{padding-left:11px;border-left:2px solid transparent}
  .mpiece.ang-a{border-left-color:var(--rose)}
  .mpiece.ang-b{border-left-color:#3fd6bd}
  .msurf{display:block;font-family:var(--mono);font-size:9.4px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  .mtitle{margin:0;font-size:14.2px;line-height:1.4;color:var(--ink)}
  .mstate{display:inline-block;margin-top:7px;font-family:var(--mono);font-size:9.2px;
    letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
  .mstate.st{background:rgba(22,98,84,.12);color:#166254;border:1px solid rgba(22,98,84,.3)}
  .mstate.op{background:transparent;color:var(--muted);border:1px solid var(--line)}

  @media(min-width:1041px){
    .mdows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
      border-top:1px solid var(--line);margin-top:10px}
    .mdow{font-family:var(--mono);font-size:9.6px;letter-spacing:.13em;
      text-transform:uppercase;color:var(--muted);padding:11px 12px 9px}
    .mdow:nth-child(n+6){color:var(--faint)}

    .mgrid{grid-template-columns:repeat(7,minmax(0,1fr));
      border-top:1px solid var(--line)}
    .mcell,.mcell.pad,.mcell.wknd:not(:has(.mpiece)):not(:has(.msrc)),
    .mcell:not(:has(.mpiece)):not(:has(.msrc)){display:block}
    .mcell{padding:11px 12px 14px;border-bottom:1px solid var(--line);
      border-right:1px solid var(--line);min-height:116px}
    .mcell:nth-child(7n){border-right:0}
    .mgrid>.mcell:nth-last-child(-n+7){border-bottom:0}
    .mcell.pad{background:transparent}
    .mcell.wknd .mdate{color:var(--faint)}
    .mdate{margin-bottom:9px}
    .mtitle{font-size:12.4px;line-height:1.35}
    .msurf{font-size:8.8px;margin-bottom:3px}
    .mstate{margin-top:8px;font-size:8.6px;padding:2px 7px}
    .mpiece{padding-left:9px}
  }

  .dark .mgrid,.dark .mdows,.dark .mcell{border-color:rgba(120,150,230,.22)}
  .dark .mtitle{color:#f3efe4}

  /* footer column labels moved h5 -> h3: the document jumped h2 to h5
     with nothing between. Same styling, correct outline. */
  .s2foot h3{font-family:var(--mono);font-size:10.6px;letter-spacing:.16em;
    text-transform:uppercase;color:#f3a9ce;font-weight:600;margin:0 0 13px}

  /* on contact the provocation is the section's only statement, so it is
     the h2 rather than a paragraph. Same look, correct outline. */
  #next h2.tprov-a{margin:0;font-family:var(--display);font-weight:500}

  /* --- track-record cards: no false affordance -------------------------
     .case and .tcard carried transform:translateY(-4px) plus a shadow
     bloom on hover, which is a clickable promise. Neither is ever wrapped
     in an anchor (.tcard is not used in the built pages at all), and
     there are no case-study pages to point at. Two of the six cards are
     deliberately withheld, so linking the named four would also be
     inconsistent — and the site is explicit elsewhere that naming a
     company is "not partners, not endorsements", which linking outward
     would erode. So they stay unlinked and stop pretending otherwise. */
  .case:hover,.tcard:hover{transform:none;box-shadow:0 8px 24px rgba(2,16,57,.06)}
  .dark .case:hover,.dark .tcard:hover{box-shadow:none;border-color:var(--dline)}

  /* --- mobile hero: two lines, breaking at the italic -------------------
     At 34px the italic half "from a learning system" measures 363px against
     a 334px box at 390px wide, so it wrapped to three lines and split the
     em across two of them — orphaning "from a" onto the line above. Break
     at the em instead, which is the natural clause boundary, and scale the
     type so both halves fit on one line each at every phone width.

     Measured: the italic needs ~10.7px of width per 1px of font-size, so
     dividing the available box by 11.1 leaves a safety margin. Floor 24px
     so a 320px screen stays legible, cap 34px so nothing above ~480px
     changes. */
  @media(max-width:640px){
    .hero h1{font-size:clamp(24px, calc((100vw - 56px) / 11.1), 34px)}
    .hero h1 em{display:block}

    /* German runs wider: the italic half is "aus einem lernenden System"
       at 13.2px per font-px against English's 10.7, so it needs its own
       divisor or it wraps to three lines again. The language toggle sets
       html[lang], so this keys off it directly. */
    html[lang="de"] .hero h1{font-size:clamp(19px, calc((100vw - 56px) / 13.8), 34px)}

  }

  /* The closing line under the scattered fragments reads as a centred beat
     rather than a left-aligned paragraph. Unconditional: it was centred
     below 640 and above 1041 but left-aligned in between, where the layout
     is still single-column, which made no sense. */
  .pclaim{text-align:center;margin-left:auto;margin-right:auto}
  @media(max-width:1040px){ .pclaim{max-width:26ch} }

  /* .cwk had no rose variant — .spk has had one all along, and the advisory
     hero rows alternate the two accents to separate the facets, same as the
     boxes they replaced. Mirrors .spk.rose / .cream .spk.rose exactly. */
  .cwk.rose{color:#f3a9ce}
  .cream .cwk.rose{color:var(--rose-deep)}

  /* --- advisory hero: the two facets as panels -------------------------
     These ran on from the header as hairline rows with mono micro-labels,
     which read as a continuation of the claimline rather than as two
     distinct answers. Panels with display-font headings and an accent
     rule above each, separated from the claimline, so they land as their
     own beat.

     Deliberately not .split2/.sp: that component still carries the
     Studio-does / People-do division further down, and these two are
     additive rather than contrastive. The accent rule above the heading
     inverts the eyebrow's rule-below-label, which gives them their own
     identity inside the same language. */
  .advpair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:46px}
  .advcard{padding:24px 24px 26px;border:1px solid rgba(120,150,230,.28);
    border-radius:16px;background:rgba(10,25,71,.42)}
  .advcard::before{content:"";display:block;width:46px;height:3px;border-radius:2px;
    background:var(--rose);margin-bottom:17px}
  .advcard.teal::before{background:#3fd6bd}
  .advh{display:block;font-family:var(--display);font-weight:500;font-size:21px;
    line-height:1.28;color:#fbf7ef;margin-bottom:11px}
  .advcard p{margin:0;font-size:15px;line-height:1.62;color:#c4c8da}

  /* both grounds, per the shared-component rule */
  .cream .advcard{background:var(--card);border-color:var(--line);
    box-shadow:0 8px 22px rgba(2,16,57,.06)}
  .cream .advh{color:var(--ink)}
  .cream .advcard p{color:var(--muted)}

  @media(max-width:860px){
    .advpair{grid-template-columns:1fr;gap:16px;margin-top:34px}
    .advcard{padding:20px 20px 22px}
    .advh{font-size:19px}
  }

  /* --- prose orphans ---------------------------------------------------
     Body copy was on the browser default, so short paragraphs ended on a
     stranded word: "to win.", "them.", "anyway.", "homepage." — some at
     6% of the measure.

     `pretty` is the obvious reach here and it is the wrong tool: measured
     directly on the element, Chromium accepts it (computed value really
     is "pretty") and the line breaks do not move at all. It only helps
     blocks long enough to have slack. Every orphan on this site is a
     two-line block, where there is nowhere to move a word to.

     `balance` does work — the same element goes from a 10% last line to
     57%. It is what the headings already use, and browsers cap it at a
     handful of lines, which suits these short leads exactly. Unsupported
     values are ignored, so it degrades cleanly. */
  .lead,.obody,.wd,.rgloss,.cw p,.advcard p,.sp p,.tprov-b,.chcap{text-wrap:balance}

  /* --- #byapplication: fewer elements, so give them room ---------------
     With the claimline gone this section is eyebrow, headline and one
     paragraph. That is a classic editorial opening, so the paragraph
     steps up from small print to a considered second voice: larger, a
     wider measure, and more air under the headline. */
  @media(min-width:861px){
    /* no max-width on the headline: text-wrap:balance already sets its
       own break, and constraining it forced a third line */
    #byapplication .lead{margin-top:26px;font-size:20.5px;line-height:1.62;
      max-width:56ch;color:var(--muted)}
  }

  /* --- hero lead: balance, not pretty ----------------------------------
     One line above 768px, but between 641 and 767px the 19.1px size is
     still in force while the measure has dropped to 644px, so it broke to
     two lines with "to win." alone at 9%. That band is easy to hit with
     browser zoom — 1280px at 175% lands in it.

     `pretty` cannot fix a two-line block: there is nowhere to move a word
     to. `balance` is the right tool for short centred text, and is what
     the headings already use. It is a no-op where the line already fits. */
  .hero .lead{text-wrap:balance}

  /* --- growth loop: arrows, not repeated text --------------------------
     "nothing goes in until you confirm it" sat between all three panels,
     twice, while "Nothing goes out until you say so." is a whole section
     of its own further down the page. Inside one diagram it is noise.

     On the row layout the connector becomes a plain arrow. The sentence
     stays in the DOM and in the accessibility tree — clipped, not
     display:none — so a screen reader still gets the meaning at every
     width, and the arrow is a pseudo-element, which is decorative. The
     stacked layout keeps the words, where the vertical flow needs them
     and the capsule reads correctly. */
  @media(min-width:761px){
    .mtime .tlink{width:74px}
    .mtime .tgate{position:absolute;width:1px;height:1px;overflow:hidden;
      clip-path:inset(50%);white-space:nowrap;padding:0;border:0}
    .mtime .tlink::after{content:"\2192";display:block;
      font-family:var(--body);font-size:26px;line-height:1;
      color:rgba(196,200,218,.62)}
    .cream .mtime .tlink::after{color:rgba(88,93,104,.6)}
  }

  /* --- DEEPER links ----------------------------------------------------
     Studio-Homepage.md defines these on line 3 — "a link to an inner page
     where the detail lives" — and names six. None existed, so the
     homepage body linked to no content page at all and every toolkit page
     was reachable only through the nav dropdown.

     Quiet by design: this is an offer to go further, not a call to
     action, so it must not compete with the section's artefact or with
     the page's one rose button. Accent text, hairline on hover, and the
     arrow nudges. */
  /* width:fit-content and the self alignments matter: dropped into a grid
     or flex parent an inline-flex link is blockified and stretches, which
     is how the hover underline once ran 467px against 196px of text. */
  .deeper{display:inline-flex;width:fit-content;
    align-self:start;justify-self:start;
    align-items:center;gap:9px;margin-top:26px;
    font-family:var(--body);font-size:15.4px;font-weight:500;
    color:var(--rose-deep);text-decoration:none;
    border-bottom:1px solid transparent;padding-bottom:2px;
    transition:border-color .2s ease}
  .deeper::after{content:"\2192";font-size:16px;line-height:1;
    transition:transform .2s ease}
  .deeper:hover{border-bottom-color:currentColor}
  .deeper:hover::after{transform:translateX(4px)}
  .deeper:focus-visible{outline:2px solid currentColor;outline-offset:4px;
    border-radius:2px}
  .dark .deeper{color:#f3a9ce}
  @media(prefers-reduced-motion:reduce){
    .deeper::after{transition:none}
    .deeper:hover::after{transform:none}
  }
  @media(max-width:640px){ .deeper{margin-top:26px;font-size:14.6px} }

  /* --- orbit climb: the status column was one line too narrow ----------
     Third column was 236px. The longest reason, "open thread, you spoke
     4 days ago", measures 205px and sits beside a 40px badge with a 10px
     gap — 255px needed against 186px available. It wrapped, and that one
     row ran 71px against 54px for every other, breaking the rhythm of
     the whole climb.

     272px clears the widest case with room. The width comes off the bar
     column, which is a 1fr track and has it to spare. Above the stacking
     breakpoint only; below 880px the rows are single-column already. */
  @media(min-width:881px){
    .climb .crow{grid-template-columns:132px 1fr 272px}
    .climb .rsn{white-space:nowrap}
  }

  /* --- orbit hero: flatten the box-in-box -------------------------------
     Measured against its siblings, this hero was the only one with two
     levels of card nesting, and it paired the shortest text column
     (238px) with the tallest artefact (461px) — a 223px gap against 65 on
     outbound and ~150 elsewhere. That is the visual battle: the right
     side carried more mass and more structure than the headline it sits
     beside.

     The outer .surface used the same --navy-2 background and --dline
     border as the .omove cards inside it, so it added weight without
     adding any distinction, plus a 0 18px 50px shadow that made it
     assert itself. Removing it leaves the two move cards as the only
     boxes, which is what the reader is meant to look at. */
  #orbit-top .surface{background:none;border:0;box-shadow:none;padding:0}
  #orbit-top .surface .bar{border-bottom-color:rgba(120,150,230,.22)}


  /* --- .checks on dark -------------------------------------------------
     Removing a section from this page left #lists and #delivery both cream
     and adjacent, so the alternating rhythm broke and the two merged
     into one long block. #lists cannot flip because #channels before it
     is already dark, so #delivery does — and .checks existed only on a
     cream ground, so it needs its dark half. Same tokens the rest of the
     system uses on navy. */
  .dark .checks{border-top-color:rgba(120,150,230,.22)}
  .dark .checks li{color:#f3efe4;border-bottom-color:rgba(120,150,230,.22)}
  .dark .checks li::before{border-color:#57e3c8}

  /* --- DNA connectors: six, not seven -----------------------------------
     One destination was removed, so the fan lost a line. The original
     stagger radiated outward from a centre path — 4 first, then 3&5,
     2&6, 1&7 — which only works with an odd count. With six there is no
     centre, so path 1 would have fired alone after its pair vanished.
     Restaggered to open from the middle pair outward. */
  html.js [data-rv="wire"].in .dnawire path:nth-child(3),
  html.js [data-rv="wire"].in .dnawire path:nth-child(4){transition-delay:1.40s}
  html.js [data-rv="wire"].in .dnawire path:nth-child(2),
  html.js [data-rv="wire"].in .dnawire path:nth-child(5){transition-delay:1.52s}
  html.js [data-rv="wire"].in .dnawire path:nth-child(1),
  html.js [data-rv="wire"].in .dnawire path:nth-child(6){transition-delay:1.64s}

  /* --- #trust: the measure is the whole problem ------------------------
     The markup asks for .narrowwrap (820px) and an earlier edit of mine
     overrode it back to the full 1080. At that width the claim ended at
     364px and its receipt began at 537 — a 173px void between a rule and
     the evidence for it, so the eye never paired them and four short
     rules occupied 1015px of page.

     The brief asks for "quiet typography, generous air" and no artefact.
     Air belongs around the block, not inside it: at 820px the pair reads
     across in one movement, and the space sits in the margins where it
     reads as composure rather than as a gap. */
  @media(min-width:861px){
    #trust .trule{column-gap:44px;padding:23px 0}
    #trust .rrule{font-size:20px;max-width:22ch}
    #trust .rgloss{max-width:44ch}
    #trust .claimline{max-width:30ch}
  }


  /* --- orbit #profile: three stages, read across ------------------------
     Same fault as #trust had: claim and receipt split by a 173px void on
     a 1080px measure, so the pair never read as a pair.

     But these three are not a list, they are a sequence — the problem is
     about to exist, exists now, is top of mind today. Three columns say
     that in the layout itself, left to right, which a stack of rows
     cannot. Receipt sits under its stage, so the gap disappears, and the
     three top rules line up as one horizontal beat. */
  @media(min-width:861px){
    #profile .trules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
      column-gap:44px;border-top:0;margin-top:34px}
    #profile .trule{display:block;padding:22px 0 24px;
      border-top:1px solid var(--line);border-bottom:0}
    #profile .rrule{font-size:19px;line-height:1.34;max-width:none}
    #profile .rgloss{margin:10px 0 0;max-width:none}
    #profile .claimline{max-width:32ch}
    #profile .tprov-b{max-width:76ch}
  }

  /* --- orbit #profile: stage label above the sentence --------------------
     Each column led with "Word — clause.", the same construction three
     times, and in every column it stranded a single word on line two:
     "exist." / "now." / "today.". The first word is really a label, so
     it becomes one. Three tiers now: the stage, what it means, what it
     looks like in the world.

     Mono uppercase with a tracked setting, matching the eyebrow and .cwk
     grammar the rest of the site uses for labels. */
  /* at the narrowest three-column width the cells are 239px and the
     longest sentence wrapped with a 19% last line; balance splits it
     evenly instead */
  #profile .rrule{text-wrap:balance}
  .rstage{display:block;font-family:var(--mono);font-size:11.4px;font-weight:600;
    letter-spacing:.15em;text-transform:uppercase;color:var(--rose-deep);
    margin-bottom:9px}
  .dark .rstage{color:#f3a9ce}

  /* --- #trust: a numbered ruleset, not a page of text -------------------
     The brief asks for no artefact here, and that stays true — but "no
     artefact" is not the same as "no design", and rearranging the same
     prose into different grids was not solving it.

     Three changes. The ground goes dark: this was one of only two
     text-only sections on the page and it sat in a run of them, so it
     had nothing to distinguish it. Its neighbours are both transparent,
     so the alternation still holds and this becomes the one dark beat in
     that stretch.

     The rules get numbered. The section's own closing line says these
     are "written down as rules the system has to follow" — so setting
     them as a numbered specification is the content describing itself,
     not decoration bolted on. Numerals come from a CSS counter, so they
     need no markup and stay out of the accessibility tree, which is
     right for a device rather than content.

     And the receipt gets a rail, so evidence reads as attached to its
     claim rather than as more prose underneath it. */
  #trust .trules{border-top:0;margin-top:32px;counter-reset:trule}
  #trust .trule{counter-increment:trule;
    display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;
    padding:22px 0 24px;border-bottom:0;border-top:1px solid rgba(120,150,230,.22)}
  /* two columns only where there is room; single column below */
  @media(min-width:861px){
    #trust .trules{display:grid;grid-template-columns:1fr 1fr;
      column-gap:56px;row-gap:0;margin-top:38px}
    #trust .trule{column-gap:20px;padding:26px 0 30px}
  }
  #trust .trule::before{content:counter(trule,decimal-leading-zero);
    grid-column:1;grid-row:1 / span 2;
    font-family:var(--mono);font-size:12.4px;font-weight:600;letter-spacing:.08em;
    color:#f3a9ce;padding-top:5px}
  #trust .rrule{grid-column:2;font-size:19.4px;line-height:1.36;max-width:26ch;
    color:#fbf7ef}
  #trust .rgloss{grid-column:2;margin:11px 0 0;max-width:34ch;
    color:#aab2cf;padding-left:14px;border-left:2px solid rgba(243,169,206,.32)}
  #trust .claimline{max-width:30ch}

  /* --- a section that already states a count does not number examples ---
     Orbit's #trust says "Nine checks", then "Seven ask... Two ask...",
     and then showed four boxes numbered 01-04. Three counts on one
     screen, and the numerals made the four read as an enumeration of the
     nine rather than as four examples of them.

     .counted marks a section whose copy already carries the number, so
     the device is suppressed there. Index's #trust states no count, so
     it keeps the numerals — they are its only visual anchor. */
  #trust.counted .trule::before{content:none}
  #trust.counted .trule{grid-template-columns:minmax(0,1fr);column-gap:0}
  #trust.counted .rrule,#trust.counted .rgloss{grid-column:1}

  /* --- .phero eyebrow rule: centre it -----------------------------------
     .eyebrow::after is a 36px display:block bar, so it sits left unless
     told otherwise. .hero, .ctabox and .connbar each got a centring
     override; .phero never did, and .phero is text-align:center — so on
     the three legal pages the label and headline centred while the rule
     stayed hard left. */
  .phero .eyebrow::after{margin-left:auto;margin-right:auto}

  /* --- the growth loop gets its diagram --------------------------------
     The brief called this "the signature image of the site" and asked for
     a centre, arms, a return path and a target marker outside the circuit
     — "without the target it reads as circulation, with it, progress."
     What was here instead was a three-panel timeline, which is neither a
     loop nor a target.

     .dsvg already hides below 760px, so the diagram is desktop-only and
     the timeline becomes its mobile fallback. .msvg is the counterpart:
     hidden above that width, so exactly one of the two shows at any
     size. */
  /* No panel: the diagram is recoloured for navy and sits in the
     section. Boxing the signature image would repeat the floating-card
     problem being removed elsewhere, and the hub reads as a light source
     on navy rather than a dark blob on cream.

     It breaks out of the 1080 wrap to its natural 1300 width. Inside the
     wrap it scaled to 0.79, which put the smallest labels at 10.2px and
     under 8px on a narrow laptop. At full width the scale is 1.0 and
     every label clears 13px.

     Shown from 1150px up. The smallest label is 13 units, so it needs
     a scale of 0.85 to clear 11px, which needs 1100px of diagram and so
     1150px of viewport. Below that the timeline serves instead. */
  /* It sits inside the wrap like every other artefact on the page. It
     was breaking out to 1300px, which made it physically larger than
     anything else on the site and was half of why it read as oversized;
     the other half was type running ~40% above the site's own artefact
     scale. Both corrected. */
  #loop .engine-embed{margin-top:30px}
  #loop .engine-embed svg{width:100%;height:auto;display:block}
  @media(max-width:1009px){ #loop .engine-embed{display:none} }
  @media(min-width:1010px){ .msvg{display:none} }

  /* --- growth loop: pacing and spacing ---------------------------------
     5 · the bars rose in 0.8s with a 0.05s stagger, which is over before
         the section has finished scrolling into view. Slowed to 1.5s with
         a 0.14s stagger so the left-to-right rise is actually seen.
     6 · "your growth loop" sat tight under the claimline; it is the
         diagram's title and wants air above it to read as one. */
  #loop .gb{transition-duration:1.5s}
  #loop .gb:nth-of-type(2){transition-delay:.14s}
  #loop .gb:nth-of-type(3){transition-delay:.28s}
  #loop .gb:nth-of-type(4){transition-delay:.42s}
  #loop .gb:nth-of-type(5){transition-delay:.56s}
  #loop .gb:nth-of-type(6){transition-delay:.70s}
  #loop .looplabel{margin-top:54px}

  /* --- growth loop timeline: arrows on the stack too -------------------
     The row layout already replaced the repeated "nothing goes in until
     you confirm it" with an arrow; the stacked layout still carried the
     sentence twice. Same treatment, arrow pointing down.

     As before the sentence stays in the DOM and in the accessibility
     tree — clipped, not display:none — so a screen reader still gets the
     consent claim at every width, and the arrow is a pseudo-element,
     which is decorative. */
  .mtime .tgate{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;padding:0;border:0}
  .mtime .tlink::after{content:"\2193";display:block;position:relative;
    font-family:var(--body);font-size:24px;line-height:1;
    color:rgba(196,200,218,.62)}
  .cream .mtime .tlink::after{color:rgba(88,93,104,.6)}
  /* the rail would run through the glyph on the stack, so it stops */
  @media(max-width:760px){
    .mtime .tlink::before{display:none}
    .mtime .tlink{height:52px}
  }
  @media(min-width:761px){ .mtime .tlink::after{content:"\2192";font-size:26px} }

  /* --- mobile dropdown items: stop the 2px overhang -------------------
     `.dropmenu a` carries margin-left:2px for the rail indent, but the
     items are full-width, so the margin pushed their right edge 2px past
     the viewport and the document scrolled horizontally whenever the
     menu was expanded. Pre-existing; surfaced when the Studio menu grew.
     Box-sizing keeps the indent without the overflow. */
  @media(max-width:860px){
    .dropmenu a{margin-left:0;padding-left:18px;
      border-left:1px solid #26356b;margin-inline-start:2px;
      width:calc(100% - 2px);box-sizing:border-box}
  }

  /* --- the Orbit marker ------------------------------------------------
     It was a <span class="dstar"> inside the link. The link carries
     data-en / data-de but not data-html, so the language switcher set
     textContent on load and destroyed the span every time — the star has
     never rendered. As a pseudo-element it survives the swap, and stays
     decorative rather than announced. */
  .dropmenu a.dmark{position:relative}
  .dropmenu a.dmark::after{content:"\2605";margin-left:7px;
    color:var(--rose);font-size:10.5px;line-height:1;
    position:relative;top:-1px}

  /* the mobile menu sits on paper while the desktop dropdown sits on navy,
     so the marker follows the same two-ground treatment the links use */
  .dropmenu a.dmark::after{color:#f3a9ce}
  @media(max-width:860px){ .dropmenu a.dmark::after{color:var(--rose-deep)} }

  /* --- mobile: the Studio toggle was invisible -------------------------
     Three faults in one button.

     1 · `@media(max-width:860px){.droptog{color:#f3efe4}}` was written for
         a dark menu, but the mobile menu sits on paper — measured 1.05:1
         against its own background. Cream on cream. It has been unreadable
         at every mobile width.
     2 · padding:13px 0 left it flush at x=0 while every sibling link sits
         at 28px, so even when visible it did not line up.
     3 · the caret never rendered: the button carries data-en/data-de but
         no data-html, so the language switcher sets textContent on load
         and destroys the <i class="caret"> child — the same fault that
         had been hiding the Orbit star. A pseudo-element survives it. */
  /* the caret is replaced at every width, not just mobile — the <i> child
     is destroyed on desktop too, so the dropdown has had no affordance
     anywhere */
  .s2links .droptog .caret{display:none}
  .s2links .droptog::after{content:"";width:0;height:0;
    border-left:4.5px solid transparent;border-right:4.5px solid transparent;
    border-top:5px solid currentColor;opacity:.6;margin-left:7px;
    transition:transform .22s ease}
  .s2links .droptog[aria-expanded="true"]::after,
  .hasdrop.open .droptog::after{transform:rotate(180deg)}
  @media(max-width:860px){
    .s2links .droptog{color:var(--ink);padding:18px 28px;font-size:18px}
    .s2links .droptog::after{border-left-width:5px;border-right-width:5px;
      border-top-width:6px;margin-left:0}
  }

  /* --- the fan-out graphic on Studio Core ------------------------------
     The page had seven text-only sections and no device anywhere, which
     is why it read as a wall. This section claims "one document, every
     Skill reads it" and then argued it in prose; the facts file already
     holds the proof as counted data, so it is drawn instead.

     Bars reuse the .gb scroll-reveal mechanism from the growth ramp. */
  .fanout{margin-top:34px;max-width:640px}
  .fantop{display:grid;grid-template-columns:1fr auto;margin-bottom:14px}
  .fanlab{font-family:var(--mono);font-size:10.4px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--rose-deep)}
  .fanlab.fanr{text-align:right}
  .fanrow{display:grid;grid-template-columns:132px minmax(0,1fr) 62px;
    align-items:center;column-gap:14px;padding:7px 0}
  .fank{font-family:var(--mono);font-size:11.6px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fantrack{height:9px;border-radius:5px;background:rgba(20,22,31,.07);overflow:hidden}
  .fanbar{display:block;height:100%;width:var(--w);border-radius:5px;
    background:linear-gradient(90deg,var(--rose),#7a2b73);
    transform:scaleX(0);transform-origin:left;
    transition:transform .9s cubic-bezier(.2,.7,.2,1);
    transition-delay:calc(var(--i) * .07s)}
  html.js [data-rv="grow"].in .fanbar{transform:scaleX(1)}
  .fanv{font-family:var(--mono);font-size:11.2px;color:var(--ink);text-align:right}
  .fanfoot{margin:18px 0 0;font-size:14px;line-height:1.6;color:var(--muted);max-width:52ch}
  .dark .fank,.dark .fanfoot{color:var(--dmuted)}
  .dark .fanv{color:#fbf7ef}
  .dark .fantrack{background:rgba(120,150,230,.14)}
  .dark .fanlab{color:#f3a9ce}
  /* "## Goals & Metrics" is the longest key and needed 8px more than the
     118px column gave it, so it was the one row showing an ellipsis.
     The column now sizes to the widest key rather than a guessed number,
     which also survives the German. */
  @media(max-width:620px){
    .fanrow{grid-template-columns:max-content minmax(0,1fr) 52px;column-gap:10px}
    .fank{font-size:10.6px}
    .fanv{font-size:10.6px}
  }
  @media(prefers-reduced-motion:reduce){ .fanbar{transition:none;transform:scaleX(1)} }

  /* --- the crm-map artefact --------------------------------------------
     The section described a cached map in prose; the facts file describes
     the object precisely enough to draw it, so it is drawn. Reuses
     .dnafile so it reads as the same kind of thing as company-dna.md. */
  .crmmap{margin-top:34px;max-width:560px}
  .crmmap .dfbody{padding-bottom:6px}
  .crmrow{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:16px;align-items:baseline}
  .crmk{color:#c9d0e8}
  .crmv{color:#f3a9ce;text-align:right;white-space:nowrap}
  .crmmap .dfe{color:#8f9ab8;padding-left:14px;position:relative}
  .crmmap .dfe::before{content:"\2014";position:absolute;left:0;opacity:.6}
  .dffoot{border-top:1px solid #26356b;padding:13px 20px 15px;
    font-size:13.2px;line-height:1.55;color:#aab2cf}
  @media(max-width:560px){
    .crmv{font-size:.94em}
    .crmmap .dfe{font-size:.94em}
  }

  /* --- mobile submenu: readable, and sized like its siblings -----------
     `.dropmenu a{color:#dfe3f0}` is right on the navy desktop dropdown
     and measured 1.17:1 on the paper mobile menu — the five Studio items
     have been invisible at every mobile width, the same fault that hid
     the toggle. They were also 15.6px against their siblings' 18px, and
     indented 20px where the top-level items sit at 28px, so the children
     were shallower than their parent.

     The group label goes on mobile: with five items under one toggle it
     labels nothing the toggle has not already said. */
  @media(max-width:860px){
    .dropmenu .dropgroup{display:none}
    .dropmenu a{color:var(--ink);font-size:18px;
      padding:16px 28px 16px 44px;
      width:100%;box-sizing:border-box;
      margin-inline-start:0;border-left:0;position:relative}
    /* one rail for the group rather than a fragment per row.
       position:relative alone re-enables the desktop rule's left:50%
       and translateX, which only apply once the element is positioned —
       that threw the whole submenu 200px to the right. Both are reset. */
    .dropmenu{position:relative;left:auto;right:auto;transform:none}
    .dropmenu::after{content:"";position:absolute;left:28px;top:4px;bottom:4px;
      width:1px;background:rgba(20,22,31,.16)}
  }

  /* --- nav: a steady CTA and a bigger hamburger ------------------------
     The base .navcta carries a min-width so the button holds its size
     across languages; the mobile rule reset it to 0, so "Get set up"
     (79px) and "Setup starten" (97px) were different widths and the
     EN/DE toggle jumped 18px sideways on every switch.

     Measured: at 12.8px the German text is 78px and needs 104px with
     padding; at 12.2px it is 75px and needs 97px. Set to those, so
     neither language moves anything.
     The existing rules are .s2nav .navcta and .s2nav .navtoggle, so these
     have to match that specificity — at .navcta alone they lost on
     specificity no matter how late they came in the cascade. */
  @media(max-width:860px){
    .s2nav .navcta{min-width:104px;text-align:center}
    /* Bigger tap target, and seated 1px above the bar's centre line.
       The inherited rule carried translateY(-2px), which measured 2.5px
       high; without it the glyph sits 0.5px high, so -0.5px lands it on
       exactly -1. */
    .s2nav .navtoggle{font-size:36px;width:52px;height:52px;
      transform:translateY(-0.5px)}
  }
  @media(max-width:400px){
    .s2nav .navcta{min-width:97px}
    .s2nav .navtoggle{font-size:34px;width:50px;height:50px}
  }

  /* --- contact: form first on the phone --------------------------------
     The first field sat 40px below the fold on a 390x844 device, behind
     663px of heading and supporting copy. Someone arriving ready to type
     had to scroll past the pitch to reach it.

     Desktop keeps the two-column split. Below the breakpoint the order
     is heading, form, then the supporting detail. */
  @media(min-width:861px){
    #contact-top .outsplit{grid-template-columns:1fr 1.08fr;
      grid-template-areas:"head form" "detail form";align-items:start}
    #contact-top .outsplit > :nth-child(1){grid-area:head}
    #contact-top .outsplit > .cwhat{grid-area:detail}
    #contact-top .outsplit > .formwrap{grid-area:form}
  }
  @media(max-width:860px){
    #contact-top .outsplit{display:flex;flex-direction:column;gap:30px}
    #contact-top .outsplit > :nth-child(1){order:1}
    #contact-top .outsplit > .formwrap{order:2}
    #contact-top .outsplit > .cwhat{order:3}
  }
  /* the thank-you panel replaces the form in place. Hidden via CSS rather
     than the hidden attribute, which the handler was overriding with an
     inline display — contrary to spec, and it left the panel flagged
     hidden to assistive tech even while visible. */
  .formdone{display:none;padding:6px 0 4px;outline:none}
  .formdone h2{margin:6px 0 12px}
  .formdone p{color:var(--dmuted);max-width:46ch;margin:0 0 22px}
  .formdone .btnghost{display:inline-block}

  /* --- the sent-confirmation panel -------------------------------------
     The block was bordered and rounded but carried padding 6px 0 4px, so
     its content sat 1px from the edge on both sides — the text touched
     the border. */
  .formdone{padding:32px 26px 34px;text-align:center;max-width:520px;margin:0 auto}
  .formdone .eyebrow{margin-bottom:12px}
  .formdone h2{margin:0 0 14px;max-width:22ch;margin-left:auto;margin-right:auto}
  .formdone p{margin:0 auto 24px;max-width:42ch;color:var(--dmuted);line-height:1.62}
  .formdone .btnghost{display:inline-block}
  .formdone:focus{outline:none}
  .formdone:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
  @media(max-width:480px){ .formdone{padding:28px 20px 30px} }

  /* --- the hamburger, drawn rather than typed ---------------------------
     It was the character ☰ (U+2630), which is not in Hanken Grotesk, so
     every platform fell back to a different system font — different
     metrics, different weight, different vertical placement. Measured in
     Chromium its ink centre sat 2.5px above the bar's centre line while
     the logo and language toggle sat within 0.4px of it; on iOS it reads
     low. Neither is fixable by nudging, because the glyph is not the same
     shape on both.

     Drawn bars render identically everywhere and can be centred exactly. */
  .s2nav .navtoggle{font-size:0;line-height:0}
  .s2nav .navtoggle .nti,
  .s2nav .navtoggle .nti::before,
  .s2nav .navtoggle .nti::after{
    display:block;width:24px;height:2.4px;border-radius:2px;
    background:#fbf7ef;transition:transform .22s ease,opacity .18s ease}
  .s2nav .navtoggle .nti{position:relative}
  .s2nav .navtoggle .nti::before,
  .s2nav .navtoggle .nti::after{content:"";position:absolute;left:0}
  .s2nav .navtoggle .nti::before{top:-7.5px}
  .s2nav .navtoggle .nti::after{top:7.5px}
  /* the bars are symmetric about the middle one, so centring the box
     centres the ink — no optical correction needed */
  @media(max-width:860px){
    .s2nav .navtoggle{transform:none}
    .s2nav .navtoggle .nti,
    .s2nav .navtoggle .nti::before,
    .s2nav .navtoggle .nti::after{width:26px;height:2.6px}
    .s2nav .navtoggle .nti::before{top:-8px}
    .s2nav .navtoggle .nti::after{top:8px}
  }

  /* --- mobile menu: flat, no dropdown ---------------------------------
     Everything is one list. "Studio" is a link to the homepage rather
     than a toggle, so nothing has to be expanded to reach anything. */
  .mobtop{display:none}
  @media(max-width:860px){
    .s2links .mobtop{display:block;color:var(--ink);font-size:18px;
      font-weight:500;padding:18px 28px;text-decoration:none;width:100%;
      box-sizing:border-box}
    .s2links .droptog{display:none}
    /* visibility:visible here was a real bug. `.s2links` is
       visibility:hidden while the menu is closed, and a CHILD can
       override an inherited hidden — so these five nav links stayed
       hit-testable, invisible only because the parent's opacity is 0.
       They sat over the top of every page and swallowed taps meant for
       the hero CTA and the form fields beneath them.
       `inherit` follows the parent: hidden when closed, visible when
       open, which is what was wanted all along. */
    .s2links .dropmenu{display:block;opacity:1;visibility:inherit;
      pointer-events:auto;position:static;transform:none;
      left:auto;right:auto;max-height:none;overflow:visible}
    .s2links .dropmenu::after{top:0;bottom:0}
  }

  /* --- mobile menu: three sections, and what sits inside them ----------
     Every row was 18px weight 500 and only the indent told a section
     apart from an item inside it, so the list read as eight equal things.
     Two rails compounded it: a full-height vertical line beside the
     Studio group, plus a bottom border on every single row.

     Now the type does the work. Sections are larger and heavier with a
     hairline above each, so the menu reads as three blocks. Items inside
     are smaller, lighter and indented, with no rules between them. The
     vertical rail goes — the indent already says what it was saying. */
  @media(max-width:860px){
    /* clear the old treatment */
    .s2links .dropmenu::after{display:none}
    .s2links .dropmenu a{border-bottom:0}
    .s2links .mobtop{border-bottom:0}
    .s2links > li > a,.s2links .mobtop{border-bottom:0}

    /* the three sections */
    .s2links .mobtop,
    .s2links > li > a{font-size:19.5px;font-weight:600;color:var(--ink);
      padding:19px 28px 15px;border-top:1px solid rgba(20,22,31,.13)}
    .s2links > li:first-child .mobtop{border-top:0}

    /* what sits inside a section */
    .s2links .dropmenu a{font-size:16.4px;font-weight:450;
      color:#4a4f5c;padding:12px 28px 12px 44px}
    .s2links .dropmenu{padding-bottom:8px}
  }

  /* --- Orbit, marked properly -----------------------------------------
     A 10px star was the only thing setting it apart, and at that size on
     a busy list it read as a speck. Now the whole row is marked: a rose
     rail at the indent line, a soft wash fading to the right, the label
     in a deeper rose and a half-step heavier.

     The colour is #a8306a rather than --rose-deep: at 16.4px this is
     body text, so it needs 4.5:1, and --rose-deep measures 4.44 on paper
     and 4.09 over the wash. #a8306a gives 5.80 and 5.34. */
  @media(max-width:860px){
    .s2links .dropmenu a.dmark{position:relative;color:#a8306a;font-weight:550;
      background:linear-gradient(90deg,rgba(226,75,142,.10),rgba(226,75,142,0) 72%)}
    .s2links .dropmenu a.dmark::before{content:"";position:absolute;
      left:28px;top:6px;bottom:6px;width:3px;border-radius:2px;
      background:linear-gradient(180deg,var(--rose),#7a2b73)}
    .s2links .dropmenu a.dmark::after{content:"\2605";margin-left:8px;
      font-size:11px;color:#a8306a;position:relative;top:-1px}
  }

  /* --- balance is for short blocks, not four-line body copy -------------
     `.sp p` sits in the orphan-prevention rule that applies text-wrap:
     balance. That is right for a two-line block, where balance stops a
     stranded last word. On the four-line paragraphs inside the advisory
     panels it does the opposite of what is wanted: balance equalises the
     lines, so every one came out at 72-83% of the available width and the
     text visibly failed to reach the edge of its card.

     `pretty` keeps the lines full and only protects the last one, which
     is the behaviour these paragraphs actually need. Where the engine
     ignores `pretty` it falls back to normal wrapping, which is still
     fuller than balance. */
  .sp p,.advcard p{text-wrap:pretty}

  /* --- Orbit is new, not selected --------------------------------------
     The previous treatment — a left rail plus a filled row — is the
     universal signal for "you are here". On orbit.html it collided with
     the actual aria-current state and the two were indistinguishable.

     A badge says the thing that is true. It is real text rather than a
     pseudo-element so it translates (New / Neu) and is read aloud, which
     means the link needs data-html or the language switcher wipes it.

     #a8306a on paper is 5.80:1 and white on #a8306a is 6.37:1, both
     clear of the 4.5 this size needs. */
  .nbadge{display:none}
  @media(max-width:860px){
    /* the selection treatment goes */
    .s2links .dropmenu a.dmark{background:none;font-weight:450;color:#4a4f5c}
    .s2links .dropmenu a.dmark::before{display:none}
    .s2links .dropmenu a.dmark::after{display:none}
    /* the badge arrives */
    /* The parent link is display:flex, which blockifies its children — so
       inline-block was silently becoming block and the badge sat as a
       flex item on its own. Aligning it as a flex item is the correct
       fix; the text node beside it stays inline within the flex line.
       Margin is trimmed because the space before it (there so a screen
       reader says "Orbit New") already contributes width. */
    .s2links .dropmenu a.dmark{align-items:center}
    .s2links .dropmenu a.dmark .nbadge{display:block;flex:none;align-self:center;margin-left:4px;
      font-family:var(--mono);font-size:9.6px;font-weight:600;
      letter-spacing:.1em;text-transform:uppercase;
      color:#fff;background:#a8306a;border-radius:999px;
      padding:3px 7px 2px;position:relative;top:-1px;vertical-align:middle}
    /* and the current page keeps the marker to itself */
    .s2links .dropmenu a[aria-current="page"]{color:var(--ink);font-weight:550}
  }

  /* --- submenu items a touch bigger ------------------------------------
     16.4px against the sections' 19.5px was 84% — a clear enough step but
     small for a phone. 17.6px is 90%: still visibly subordinate, easier to
     read and to hit. Row height goes 50 -> 54px, comfortably above the
     44px tap-target floor. */
  @media(max-width:860px){
    .s2links .dropmenu a{font-size:17.6px;padding-top:14px;padding-bottom:14px}
  }

  /* --- contact form: make the fields obvious ---------------------------
     The inputs were rgb(10,25,71) on a rgb(11,29,82) panel — 1.06:1. The
     boxes were invisible and a faint border was the only cue that anything
     was typeable. Darkening cannot fix it: the deepest usable navy still
     only reaches 1.23:1 against the panel.

     So the fields go light, which is the standard treatment on a dark
     form and measures 15.75:1 — you cannot miss where to type. Typed text
     is 17.74:1 on that fill, placeholders 5.83:1. */
  .s2form input,.s2form select,.s2form textarea{
    background:#fffdf8;color:#14161f;
    border:1px solid rgba(2,16,57,.16);border-radius:11px;
    font-size:16px;                     /* 16px stops iOS zooming on focus */
    padding:13px 15px;min-height:50px;
    transition:border-color .16s ease,box-shadow .16s ease}
  .s2form textarea{min-height:118px;line-height:1.55}
  .s2form ::placeholder{color:#5f6470;opacity:1}

  /* focus has to be unmistakable, and visible on both the field and the
     panel around it */
  .s2form input:focus,.s2form select:focus,.s2form textarea:focus{
    outline:none;border-color:#e24b8e;
    box-shadow:0 0 0 3px rgba(226,75,142,.34)}

  /* labels: 10.6px was too small to scan */
  .s2form label{display:flex;align-items:baseline;gap:8px;
    font-family:var(--body);font-size:14.2px;font-weight:600;
    letter-spacing:0;text-transform:none;color:#fbf7ef;margin-bottom:7px}

  /* required and optional both said plainly, so nobody meets a validation
     error for a rule that was never shown */
  .fmark{font-family:var(--mono);font-size:9.4px;font-weight:600;
    letter-spacing:.11em;text-transform:uppercase;line-height:1}
  .freq{color:#f3a9ce}
  .fopt{color:#8f9ab8}

  /* the select needs its own arrow once the fill is light */
  .s2form select{appearance:none;-webkit-appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,#5f6470 50%),
      linear-gradient(135deg,#5f6470 50%,transparent 50%);
    background-position:calc(100% - 19px) 55%,calc(100% - 13px) 55%;
    background-size:6px 6px,6px 6px;background-repeat:no-repeat;
    padding-right:40px}

  /* and the button should look like the end of a path, not a footnote */
  .s2form button[type=submit]{min-height:52px;font-size:16px;padding:0 30px}

  /* --- contact form: one box, not two, on the phone ---------------------
     .formwrap and .s2form each carried a border, a radius and their own
     padding — two nested cards. On a 390px screen that was 84px of chrome
     around the fields, and the fields themselves are now light enough to
     define their own edges without a frame around them.

     Below the breakpoint the outer wrapper keeps its panel colour (it is
     what the light fields read against) but drops its border and inner
     padding, and the inner form loses its box entirely. Desktop keeps the
     card, where the width is not under pressure. */
  @media(max-width:860px){
    #contact-top .formwrap{border:0;border-radius:0;padding:26px 0 0;
      background:none;box-shadow:none}
    #contact-top .s2form{border:0;border-radius:0;padding:0;
      background:none;box-shadow:none}
  }

  /* --- thank-you panel: centre the eyebrow rule ------------------------
     .eyebrow::after is a 36px display:block bar, so it sits hard left
     unless told otherwise. The panel's text is centred, so the rule was
     floating off to the left of "SENT" — the same fault the legal-page
     heroes had. */
  .formdone{text-align:center}
  .formdone .eyebrow::after{margin-left:auto;margin-right:auto}
  .formdone p{margin-left:auto;margin-right:auto}

  /* --- after submitting, the confirmation comes first -------------------
     Scrolling to the top is right, but on a 556px viewport the thank-you
     heading landed at y=557 — one pixel below the fold, so the reader saw
     the hero and had to scroll to learn it had worked.

     Once .sent is set, the claimline and the supporting detail go on
     small screens. Both exist to persuade someone to fill the form in;
     they have no job once it is done. */
  @media(max-width:860px){
    #contact-top.sent .claimline{display:none}
    #contact-top.sent .cwhat{display:none}
    #contact-top.sent .formwrap{margin-top:8px}
  }

  /* --- every reveal container fades in, not just "up" -------------------
     Fourteen of the fifteen data-rv variants animated only their inner
     parts — .gb, .pbar i, > * — so the container and any child that was
     not part of that inner animation painted at full opacity the instant
     the page loaded. Measured on every inner page: the h1 sat at opacity
     0.00 while content 200px BELOW it was already at 1.00. The title
     arrived last, which is the opposite of the intended reveal.

     One base rule gives every container the same fade-and-rise as "up".
     The inner animations still run on top, so the richer variants keep
     their character — they just no longer jump the queue. The observer
     already orders each batch top-to-bottom and left-to-right, so the
     whole page now resolves in reading order. */
  html.js [data-rv]{opacity:0;transform:translateY(14px);
    transition:opacity .6s ease var(--d,0s),
               transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  html.js [data-rv].in{opacity:1;transform:none}
  /* a nested container must not fade twice */
  html.js [data-rv] [data-rv]{transition-delay:0s}
  @media(prefers-reduced-motion:reduce){
    html.js [data-rv]{opacity:1!important;transform:none!important;transition:none}
  }

  /* --- two more panels earn inner motion --------------------------------
     Most devices already animate their contents. Two did not, and both
     had an obvious story in their own structure.

     "file" — the .dnafile cards on the homepage (company-dna.md) and on
     Studio Core (crm-map.md). Lines land top to bottom, the way a file
     is read. 55ms apart is quick enough not to hold anyone up and slow
     enough to register as a cascade rather than a fade. */
  html.js [data-rv="file"] .dfl{opacity:0;transform:translateY(5px)}
  html.js [data-rv="file"].in .dfl{opacity:1;transform:none;
    transition:opacity .34s ease,transform .34s cubic-bezier(.2,.7,.2,1)}
  html.js [data-rv="file"].in .dfl:nth-child(1){transition-delay:0.275s}
  html.js [data-rv="file"].in .dfl:nth-child(2){transition-delay:0.330s}
  html.js [data-rv="file"].in .dfl:nth-child(3){transition-delay:0.385s}
  html.js [data-rv="file"].in .dfl:nth-child(4){transition-delay:0.440s}
  html.js [data-rv="file"].in .dfl:nth-child(5){transition-delay:0.495s}
  html.js [data-rv="file"].in .dfl:nth-child(6){transition-delay:0.550s}
  html.js [data-rv="file"].in .dfl:nth-child(7){transition-delay:0.605s}
  html.js [data-rv="file"].in .dfl:nth-child(8){transition-delay:0.660s}
  html.js [data-rv="file"].in .dfl:nth-child(9){transition-delay:0.715s}
  html.js [data-rv="file"].in .dfl:nth-child(10){transition-delay:0.770s}
  html.js [data-rv="file"].in .dfl:nth-child(11){transition-delay:0.825s}
  html.js [data-rv="file"].in .dfl:nth-child(12){transition-delay:0.880s}
  html.js [data-rv="file"] .dfbar{opacity:0}
  html.js [data-rv="file"].in .dfbar{opacity:1;transition:opacity .3s ease .1s}
  html.js [data-rv="file"] .dffoot{opacity:0}
  html.js [data-rv="file"].in .dffoot{opacity:1;transition:opacity .4s ease 1s}

  /* "watch" — the staged email. The signal history is a chronology, so it
     accumulates one entry at a time before the draft and the destinations
     arrive. It reads as evidence being gathered rather than a panel
     appearing. */
  html.js [data-rv="watch"] .gpi{opacity:0;transform:translateX(-8px)}
  html.js [data-rv="watch"].in .gpi{opacity:1;transform:none;
    transition:opacity .38s ease,transform .42s cubic-bezier(.2,.7,.2,1)}
  html.js [data-rv="watch"].in .gpi:nth-of-type(1){transition-delay:0.430s}
  html.js [data-rv="watch"].in .gpi:nth-of-type(2){transition-delay:0.560s}
  html.js [data-rv="watch"].in .gpi:nth-of-type(3){transition-delay:0.690s}
  html.js [data-rv="watch"].in .gpi:nth-of-type(4){transition-delay:0.820s}
  html.js [data-rv="watch"].in .gpi:nth-of-type(5){transition-delay:0.950s}
  html.js [data-rv="watch"].in .gpi:nth-of-type(6){transition-delay:1.080s}
  html.js [data-rv="watch"].in .gpi:nth-of-type(7){transition-delay:1.210s}
  html.js [data-rv="watch"] .gbody,html.js [data-rv="watch"] .gfoot{opacity:0}
  html.js [data-rv="watch"].in .gbody{opacity:1;transition:opacity .5s ease 1.05s}
  html.js [data-rv="watch"].in .gfoot{opacity:1;transition:opacity .5s ease 1.2s}
  html.js [data-rv="watch"] .dest{opacity:0;transform:translateY(6px)}
  html.js [data-rv="watch"].in .dest{opacity:1;transform:none;
    transition:opacity .34s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
  html.js [data-rv="watch"].in .dest:nth-of-type(1){transition-delay:1.430s}
  html.js [data-rv="watch"].in .dest:nth-of-type(2){transition-delay:1.510s}
  html.js [data-rv="watch"].in .dest:nth-of-type(3){transition-delay:1.590s}
  html.js [data-rv="watch"].in .dest:nth-of-type(4){transition-delay:1.670s}
  html.js [data-rv="watch"].in .dest:nth-of-type(5){transition-delay:1.750s}
  html.js [data-rv="watch"].in .dest:nth-of-type(6){transition-delay:1.830s}
  html.js [data-rv="watch"] .fan path{stroke-dasharray:1;stroke-dashoffset:1}
  html.js [data-rv="watch"].in .fan path{stroke-dashoffset:0;
    transition:stroke-dashoffset .8s ease 1.25s}

  @media(prefers-reduced-motion:reduce){
    html.js [data-rv="file"] .dfl,html.js [data-rv="file"] .dfbar,
    html.js [data-rv="file"] .dffoot,html.js [data-rv="watch"] .gpi,
    html.js [data-rv="watch"] .gbody,html.js [data-rv="watch"] .gfoot,
    html.js [data-rv="watch"] .dest{
      opacity:1!important;transform:none!important;transition:none!important}
    html.js [data-rv="watch"] .fan path{stroke-dashoffset:0!important;transition:none!important}
  }

  /* --- every multi-part group gets its own entrance ---------------------
     29 groups of sibling components shared one transition-delay, so they
     arrived together: one big fade rather than a sequence of distinct
     things. The site already did this well in places — the trust rules
     land 70ms apart — so this extends the same treatment to the rest.

     Step size is tuned by component size: a full panel needs longer to
     register than a chip. Carousel slides are excluded, since only one is
     ever visible and staggering would animate what nobody can see.

     Generated, so the arithmetic is consistent rather than hand-typed. */
  html.js #studio [data-rv].in .sd-k{transition-property:opacity,transform}
  html.js #studio [data-rv].in .sd-k:nth-of-type(1){transition-delay:0.100s}
  html.js #studio [data-rv].in .sd-k:nth-of-type(2){transition-delay:0.200s}
  html.js #outreach [data-rv].in .gchip{transition-property:opacity,transform}
  html.js #outreach [data-rv].in .gchip:nth-of-type(1){transition-delay:1.300s}
  html.js #outreach [data-rv].in .gchip:nth-of-type(2){transition-delay:1.400s}
  html.js #dna [data-rv].in .dnazone{transition-property:opacity,transform}
  html.js #dna [data-rv].in .dnazone:nth-of-type(1){transition-delay:0.100s}
  html.js #dna [data-rv].in .dnazone:nth-of-type(2){transition-delay:0.260s}
  html.js #control [data-rv].in .seqrow{transition-property:opacity,transform}
  html.js #control [data-rv].in .seqrow:nth-of-type(1){transition-delay:0.100s}
  html.js #control [data-rv].in .seqrow:nth-of-type(2){transition-delay:0.210s}
  html.js #control [data-rv].in .seqrow:nth-of-type(3){transition-delay:0.320s}
  html.js #control [data-rv].in .toolline{transition-property:opacity,transform}
  html.js #control [data-rv].in .toolline:nth-of-type(1){transition-delay:0.400s}
  html.js #control [data-rv].in .toolline:nth-of-type(2){transition-delay:0.500s}
  html.js #fit [data-rv].in .fitcol{transition-property:opacity,transform}
  html.js #fit [data-rv].in .fitcol:nth-of-type(1){transition-delay:0.080s}
  html.js #fit [data-rv].in .fitcol:nth-of-type(2){transition-delay:0.220s}
  html.js #team [data-rv].in .baline{transition-property:opacity,transform}
  html.js #team [data-rv].in .baline:nth-of-type(1){transition-delay:0.080s}
  html.js #team [data-rv].in .baline:nth-of-type(2){transition-delay:0.170s}
  html.js #team [data-rv].in .baline:nth-of-type(3){transition-delay:0.260s}
  html.js #team [data-rv].in .baline:nth-of-type(4){transition-delay:0.350s}
  html.js #team [data-rv].in .baline:nth-of-type(5){transition-delay:0.440s}
  html.js #stack [data-rv].in .conn{transition-property:opacity,transform}
  html.js #stack [data-rv].in .conn:nth-of-type(1){transition-delay:0.100s}
  html.js #stack [data-rv].in .conn:nth-of-type(2){transition-delay:0.132s}
  html.js #stack [data-rv].in .conn:nth-of-type(3){transition-delay:0.164s}
  html.js #stack [data-rv].in .conn:nth-of-type(4){transition-delay:0.196s}
  html.js #stack [data-rv].in .conn:nth-of-type(5){transition-delay:0.228s}
  html.js #stack [data-rv].in .conn:nth-of-type(6){transition-delay:0.260s}
  html.js #stack [data-rv].in .conn:nth-of-type(7){transition-delay:0.292s}
  html.js #stack [data-rv].in .conn:nth-of-type(8){transition-delay:0.324s}
  html.js #stack [data-rv].in .conn:nth-of-type(9){transition-delay:0.356s}
  html.js #stack [data-rv].in .conn:nth-of-type(10){transition-delay:0.388s}
  html.js #stack [data-rv].in .conn:nth-of-type(11){transition-delay:0.420s}
  html.js #stack [data-rv].in .conn:nth-of-type(12){transition-delay:0.452s}
  html.js #stack [data-rv].in .conn:nth-of-type(13){transition-delay:0.484s}
  html.js #stack [data-rv].in .conn:nth-of-type(14){transition-delay:0.516s}
  html.js #stack [data-rv].in .conn:nth-of-type(15){transition-delay:0.548s}
  html.js #stack [data-rv].in .conn:nth-of-type(16){transition-delay:0.580s}
  html.js #stack [data-rv].in .conn:nth-of-type(17){transition-delay:0.612s}
  html.js #track-record [data-rv].in .qdot{transition-property:opacity,transform}
  html.js #track-record [data-rv].in .qdot:nth-of-type(1){transition-delay:0.300s}
  html.js #track-record [data-rv].in .qdot:nth-of-type(2){transition-delay:0.350s}
  html.js #track-record [data-rv].in .qdot:nth-of-type(3){transition-delay:0.400s}
  html.js #track-record [data-rv].in .qdot:nth-of-type(4){transition-delay:0.450s}
  html.js #core-top [data-rv].in .dayrow{transition-property:opacity,transform}
  html.js #core-top [data-rv].in .dayrow:nth-of-type(1){transition-delay:0.100s}
  html.js #core-top [data-rv].in .dayrow:nth-of-type(2){transition-delay:0.200s}
  html.js #core-top [data-rv].in .dayrow:nth-of-type(3){transition-delay:0.300s}
  html.js #core-top [data-rv].in .dayrow:nth-of-type(4){transition-delay:0.400s}
  html.js #core-top [data-rv].in .dayrow:nth-of-type(5){transition-delay:0.500s}
  html.js #onefile [data-rv].in .fanlab{transition-property:opacity,transform}
  html.js #onefile [data-rv].in .fanlab:nth-of-type(1){transition-delay:0.060s}
  html.js #onefile [data-rv].in .fanlab:nth-of-type(2){transition-delay:0.160s}
  html.js #onefile [data-rv].in .fanrow{transition-property:opacity,transform}
  html.js #onefile [data-rv].in .fanrow:nth-of-type(1){transition-delay:0.100s}
  html.js #onefile [data-rv].in .fanrow:nth-of-type(2){transition-delay:0.155s}
  html.js #onefile [data-rv].in .fanrow:nth-of-type(3){transition-delay:0.210s}
  html.js #onefile [data-rv].in .fanrow:nth-of-type(4){transition-delay:0.265s}
  html.js #onefile [data-rv].in .fanrow:nth-of-type(5){transition-delay:0.320s}
  html.js #onefile [data-rv].in .fanrow:nth-of-type(6){transition-delay:0.375s}
  html.js #onefile [data-rv].in .fanrow:nth-of-type(7){transition-delay:0.430s}
  html.js #onefile [data-rv].in .fanrow:nth-of-type(8){transition-delay:0.485s}
  html.js #onefile [data-rv].in .fanrow:nth-of-type(9){transition-delay:0.540s}
  html.js #orbit-top [data-rv].in .omove{transition-property:opacity,transform}
  html.js #orbit-top [data-rv].in .omove:nth-of-type(1){transition-delay:0.100s}
  html.js #orbit-top [data-rv].in .omove:nth-of-type(2){transition-delay:0.280s}
  html.js #timing [data-rv].in .doszone{transition-property:opacity,transform}
  html.js #timing [data-rv].in .doszone:nth-of-type(1){transition-delay:0.080s}
  html.js #timing [data-rv].in .doszone:nth-of-type(2){transition-delay:0.240s}
  html.js #timing [data-rv].in .gat{transition-property:opacity,transform}
  html.js #timing [data-rv].in .gat:nth-of-type(1){transition-delay:0.200s}
  html.js #timing [data-rv].in .gat:nth-of-type(2){transition-delay:0.310s}
  html.js #timing [data-rv].in .gat:nth-of-type(3){transition-delay:0.420s}
  html.js #timing [data-rv].in .gat:nth-of-type(4){transition-delay:0.530s}
  html.js #bar [data-rv].in .crow{transition-property:opacity,transform}
  html.js #bar [data-rv].in .crow:nth-of-type(1){transition-delay:0.080s}
  html.js #bar [data-rv].in .crow:nth-of-type(2){transition-delay:0.140s}
  html.js #bar [data-rv].in .crow:nth-of-type(3){transition-delay:0.200s}
  html.js #bar [data-rv].in .crow:nth-of-type(4){transition-delay:0.260s}
  html.js #bar [data-rv].in .crow:nth-of-type(5){transition-delay:0.320s}
  html.js #bar [data-rv].in .crow:nth-of-type(6){transition-delay:0.380s}
  html.js #bar [data-rv].in .crow:nth-of-type(7){transition-delay:0.440s}
  html.js #bar [data-rv].in .crow:nth-of-type(8){transition-delay:0.500s}
  html.js #bar [data-rv].in .crow:nth-of-type(9){transition-delay:0.560s}
  html.js #bar [data-rv].in .ck-i{transition-property:opacity,transform}
  html.js #bar [data-rv].in .ck-i:nth-of-type(1){transition-delay:0.300s}
  html.js #bar [data-rv].in .ck-i:nth-of-type(2){transition-delay:0.390s}
  html.js #bar [data-rv].in .ck-i:nth-of-type(3){transition-delay:0.480s}
  html.js #outbound-top [data-rv].in .cmpcol{transition-property:opacity,transform}
  html.js #outbound-top [data-rv].in .cmpcol:nth-of-type(1){transition-delay:0.080s}
  html.js #outbound-top [data-rv].in .cmpcol:nth-of-type(2){transition-delay:0.300s}
  html.js #outbound-top [data-rv].in .ctag{transition-property:opacity,transform}
  html.js #outbound-top [data-rv].in .ctag:nth-of-type(1){transition-delay:0.550s}
  html.js #outbound-top [data-rv].in .ctag:nth-of-type(2){transition-delay:0.620s}
  html.js #outbound-top [data-rv].in .ctag:nth-of-type(3){transition-delay:0.690s}
  html.js #outbound-top [data-rv].in .ctag:nth-of-type(4){transition-delay:0.760s}
  html.js #marketing-top [data-rv].in .angle{transition-property:opacity,transform}
  html.js #marketing-top [data-rv].in .angle:nth-of-type(1){transition-delay:0.080s}
  html.js #marketing-top [data-rv].in .angle:nth-of-type(2){transition-delay:0.260s}
  html.js #calendar [data-rv].in .mkey{transition-property:opacity,transform}
  html.js #calendar [data-rv].in .mkey:nth-of-type(1){transition-delay:0.100s}
  html.js #calendar [data-rv].in .mkey:nth-of-type(2){transition-delay:0.220s}
  html.js #plan [data-rv].in .psurf{transition-property:opacity,transform}
  html.js #plan [data-rv].in .psurf:nth-of-type(1){transition-delay:0.100s}
  html.js #plan [data-rv].in .psurf:nth-of-type(2){transition-delay:0.200s}
  html.js #plan [data-rv].in .psurf:nth-of-type(3){transition-delay:0.300s}
  html.js #plan [data-rv].in .pcell{transition-property:opacity,transform}
  html.js #plan [data-rv].in .pcell:nth-of-type(1){transition-delay:0.160s}
  html.js #plan [data-rv].in .pcell:nth-of-type(2){transition-delay:0.260s}
  html.js #plan [data-rv].in .pcell:nth-of-type(3){transition-delay:0.360s}
  html.js #landed [data-rv].in .lrow{transition-property:opacity,transform}
  html.js #landed [data-rv].in .lrow:nth-of-type(1){transition-delay:0.080s}
  html.js #landed [data-rv].in .lrow:nth-of-type(2){transition-delay:0.210s}
  html.js #landed [data-rv].in .lrow:nth-of-type(3){transition-delay:0.340s}
  html.js #start-top [data-rv].in .done{transition-property:opacity,transform}
  html.js #start-top [data-rv].in .done:nth-of-type(1){transition-delay:0.100s}
  html.js #start-top [data-rv].in .done:nth-of-type(2){transition-delay:0.260s}
  html.js #bring [data-rv].in .hrow{transition-property:opacity,transform}
  html.js #bring [data-rv].in .hrow:nth-of-type(1){transition-delay:0.080s}
  html.js #bring [data-rv].in .hrow:nth-of-type(2){transition-delay:0.190s}
  html.js #bring [data-rv].in .hrow:nth-of-type(3){transition-delay:0.300s}
  html.js #bring [data-rv].in .hrow:nth-of-type(4){transition-delay:0.410s}
  html.js #bring [data-rv].in .hitem{transition-property:opacity,transform}
  html.js #bring [data-rv].in .hitem:nth-of-type(1){transition-delay:0.240s}
  html.js #bring [data-rv].in .hitem:nth-of-type(2){transition-delay:0.310s}
  html.js #bring [data-rv].in .hitem:nth-of-type(3){transition-delay:0.380s}
  html.js #bring [data-rv].in .hitem:nth-of-type(4){transition-delay:0.450s}
  html.js #contact-top [data-rv].in .s2form > *{transition-property:opacity,transform}
  html.js #contact-top [data-rv].in .s2form > *:nth-of-type(1){transition-delay:0.100s}
  html.js #contact-top [data-rv].in .s2form > *:nth-of-type(2){transition-delay:0.185s}
  html.js #contact-top [data-rv].in .s2form > *:nth-of-type(3){transition-delay:0.270s}
  html.js #contact-top [data-rv].in .s2form > *:nth-of-type(4){transition-delay:0.355s}
  html.js #contact-top [data-rv].in .s2form > *:nth-of-type(5){transition-delay:0.440s}
  html.js #contact-top [data-rv].in .s2form > *:nth-of-type(6){transition-delay:0.525s}
  html.js #contact-top [data-rv].in .s2form > *:nth-of-type(7){transition-delay:0.610s}
  @media(prefers-reduced-motion:reduce){
    html.js #studio [data-rv].in .sd-k,html.js #outreach [data-rv].in .gchip,html.js #dna [data-rv].in .dnazone,html.js #control [data-rv].in .seqrow,html.js #control [data-rv].in .toolline,html.js #fit [data-rv].in .fitcol,html.js #team [data-rv].in .baline,html.js #stack [data-rv].in .conn,html.js #track-record [data-rv].in .qdot,html.js #core-top [data-rv].in .dayrow,html.js #onefile [data-rv].in .fanlab,html.js #onefile [data-rv].in .fanrow,html.js #orbit-top [data-rv].in .omove,html.js #timing [data-rv].in .doszone,html.js #timing [data-rv].in .gat,html.js #bar [data-rv].in .crow,html.js #bar [data-rv].in .ck-i,html.js #outbound-top [data-rv].in .cmpcol,html.js #outbound-top [data-rv].in .ctag,html.js #marketing-top [data-rv].in .angle,html.js #calendar [data-rv].in .mkey,html.js #plan [data-rv].in .psurf,html.js #plan [data-rv].in .pcell,html.js #landed [data-rv].in .lrow,html.js #start-top [data-rv].in .done,html.js #bring [data-rv].in .hrow,html.js #bring [data-rv].in .hitem,html.js #contact-top [data-rv].in .s2form > *
      {transition-delay:0s!important;transition:none!important}
  }

  /* .vpair IS the reveal container, so it cannot be reached as a
     descendant of itself. Its own stagger runs at 70ms, which is tight
     for two full cards — widened here. */
  html.js .vpair.in > .vp:nth-of-type(1){transition-delay:0.06s}
  html.js .vpair.in > .vp:nth-of-type(2){transition-delay:0.24s}
  /* the two fields inside .row2 are side by side on desktop and stacked
     on mobile, so they get a small offset of their own rather than
     sharing the row's delay */
  html.js #contact-top [data-rv].in .row2 .fld:nth-of-type(2){transition-delay:0.15s}


  /* The two comparison panels each hold their own chip set, so nth-of-type
     restarts and both sets ran on the same clock. The second panel enters
     0.22s after the first, so its chips follow by the same amount. */
  html.js #outbound-top [data-rv].in .cmpcol:nth-of-type(2) .ctag:nth-of-type(1){transition-delay:0.77s}
  html.js #outbound-top [data-rv].in .cmpcol:nth-of-type(2) .ctag:nth-of-type(2){transition-delay:0.84s}
  html.js #outbound-top [data-rv].in .cmpcol:nth-of-type(2) .ctag:nth-of-type(3){transition-delay:0.91s}
  html.js #outbound-top [data-rv].in .cmpcol:nth-of-type(2) .ctag:nth-of-type(4){transition-delay:0.98s}

  /* --- carousel arrows: put them above the slides ----------------------
     .qarrow is position:absolute with no z-index, and it comes BEFORE
     .qtrack in the DOM — so the slides paint over it and swallowed the
     click entirely. Measured: a click on the prev arrow timed out because
     .qslide.on was the hit target.

     A stacking order fixes it without moving anything. */
  .qpanel{position:relative}
  .qpanel .qarrow{z-index:3}
  .qpanel .qtrack{z-index:1}
  .qpanel .qnav{position:relative;z-index:3}

  /* --- leave room for the sticky nav when anything scrolls into view ----
     The nav is position:sticky and 63px tall, and nothing told the browser
     about it. So when a required field failed validation, the browser
     scrolled it to y=0 — directly underneath the nav — taking the field
     AND its "please fill out this field" bubble with it. Clicking Send on
     an incomplete form looked like nothing happened at all.

     scroll-padding-top on the root fixes it for every scroll the browser
     performs: validation, in-page anchors, find-in-page, sequential focus.
     One declaration rather than a rule per case. */
  html{scroll-padding-top:84px}
  @media(max-width:860px){html{scroll-padding-top:78px}}

  /* form fields get a little extra, so the validation bubble — which is
     drawn below the field — has somewhere to sit */
  .s2form input,.s2form select,.s2form textarea{scroll-margin-top:96px}

  /* the technical reason, appended to the error. Small and quiet — it is
     there so a failure can be reported without opening developer tools. */
  .ferr-why{display:block;margin-top:6px;font-family:var(--mono);
    font-size:11.5px;letter-spacing:.02em;opacity:.72}

  /* the recovery link inside the error panel */
  .ferr-mail{display:inline-block;margin-top:10px;font-weight:600;
    color:#fbf7ef;text-decoration:underline;text-underline-offset:3px;
    text-decoration-color:rgba(251,247,239,.5)}
  .ferr-mail:hover{text-decoration-color:currentColor}



  /* --- the hero footnote was arriving last, after the section below it --
     `html.js .hero .herofoot{transition-delay:1.32s}` is hard-coded, and
     it outlives the sequence it was tuned for. Measured at both widths:
     the footnote lands at 1.32s while "Where you are now" — the whole
     section beneath it — is already in at 0.42s on mobile and 0s on
     desktop. So the last line of the hero appears after the page has
     moved on.

     Removing the fixed value lets the observer's own ordering apply. It
     already assigns 0.36s here, which puts the footnote directly after
     the numbers block at 0.30s and before the next section. */
  html.js .hero .herofoot{transition-delay:var(--d,0s)}

  /* --- the advisory button sat centred under left-aligned copy ---------
     #advisory's eyebrow, heading and paragraph all start at the wrap's
     left edge; the button was centred beneath them, 287px further in at
     1440. The section reads as a left-aligned block with one item adrift.

     .heroactions is centred because in the hero it sits under centred
     copy. Here the copy is left-aligned, so the button should be too. */
  @media(min-width:861px){
    #advisory .heroactions{justify-content:flex-start}
  }

  /* --- the hamburger becomes a cross when the menu is open -------------
     .nti is the middle bar, ::before the top and ::after the bottom, each
     26 x 2.6px with the outer two offset 8px (7.5px below 480). The JS
     already sets aria-expanded on the button, so no script change is
     needed — the attribute is the state.

     Open: the middle bar fades and shrinks to nothing from its centre,
     while the outer two travel to the middle and cross. Closed reverses
     it, because both states are plain transitions rather than one-way
     animations. The bars keep their own transform-origin at centre so
     they rotate about their midpoint rather than swinging from an end.

     The middle bar goes first and the arms rotate 40ms later, so the
     cross forms rather than everything moving at once. */
  @media(max-width:860px){
    .s2nav .navtoggle .nti{
      transition:background-color .18s ease .04s,transform .22s cubic-bezier(.2,.7,.2,1)}
    .s2nav .navtoggle .nti::before,
    .s2nav .navtoggle .nti::after{
      transform-origin:50% 50%;
      transition:transform .26s cubic-bezier(.2,.7,.2,1) .04s,top .26s cubic-bezier(.2,.7,.2,1) .04s}

    /* open.
       No transform on .nti. The two bars are its pseudo-element children,
       so anything applied here multiplies onto them — scaleX(.2) drew the
       whole cross at a fifth of its width and squeezed the strokes with
       it. Only the middle bar's colour changes; the arms are transformed
       individually, where nothing inherits from them. */
    .s2nav .navtoggle[aria-expanded="true"] .nti{
      background-color:transparent;transition-delay:0s}
    /* Rotating a 26px bar by 45 degrees leaves a cross only 19.6px across,
       against the hamburger's 26px, so the icon appeared to shrink on
       open. Lengthening the arms 12% brings the span to about 22px, close
       enough to read as the same size. Scale is applied to the arms
       themselves, never the parent, and it lengthens them along their own
       axis — the stroke stays 2.6px because scale runs before the
       rotation in the same transform. */
    .s2nav .navtoggle[aria-expanded="true"] .nti::before{top:0;transform:rotate(45deg) scaleX(1.12)}
    .s2nav .navtoggle[aria-expanded="true"] .nti::after{top:0;transform:rotate(-45deg) scaleX(1.12)}
  }
  @media(prefers-reduced-motion:reduce){
    .s2nav .navtoggle .nti,
    .s2nav .navtoggle .nti::before,
    .s2nav .navtoggle .nti::after{transition:none}
  }

  /* ======================================================================
     THE FOOTER
     The site already had a mark: a 36px hairline running rose to teal,
     under every eyebrow, fifty-six times across eight pages. It opens
     each section. Nothing closed the document — the footer began with a
     flat 1px line the same colour as every other border.

     So the mark is used at page scale here. Same two colours, same idea,
     one instance, three hundred times the width. It reads as the last
     line of a document rather than the top of a new box, and it costs
     nothing because it is the shape the reader has already learned.
     ================================================================== */
  .s2foot{position:relative;border-top:0;overflow:hidden}

  /* the mark, full width */
  .s2foot::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,
      rgba(226,75,142,0) 0%,
      var(--rose) 18%,
      #8f6fb8 42%,
      #3fd6bd 72%,
      rgba(63,214,189,0) 100%)}

  /* A single soft light behind the wordmark, well under the text. Flat
     navy over 300px reads as a slab; this gives the plane somewhere to
     start. Calibrated by differencing two renders: at 5% it lifted the
     navy by 1.7/255, which is nothing. 13% lifts it 11.5 at the centre
     and 4.5 near the top edge — felt as warmth, still well under the
     threshold where it reads as a gradient background. */
  .s2foot::after{content:"";position:absolute;left:-6%;top:-40%;
    width:52%;height:180%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(226,75,142,.13),rgba(226,75,142,0) 70%)}
  .s2foot .fwrap,.s2foot .fbot{position:relative;z-index:1}

  /* Links get the mark too, at the smallest scale: a gradient underline
     that grows from the left on hover. transform on a scaled pseudo
     rather than animating width, so it composites rather than reflows. */
  .s2foot a{position:relative;text-decoration:none}
  .s2foot .fwrap a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;
    height:1.5px;border-radius:1px;
    background:linear-gradient(90deg,var(--rose),#3fd6bd);
    transform:scaleX(0);transform-origin:left center;
    transition:transform .34s cubic-bezier(.2,.7,.2,1)}
  .s2foot .fwrap a:hover::after,
  .s2foot .fwrap a:focus-visible::after{transform:scaleX(1)}

  /* the wordmark's "2" already carries the rose; give the whole mark a
     little more presence now that it anchors a lit corner */
  .s2foot .ln{letter-spacing:.01em}

  @media(prefers-reduced-motion:reduce){
    .s2foot .fwrap a::after{transition:none}
  }

  /* ======================================================================
     THE THINGS YOU FEEL RATHER THAN NOTICE
     Four browser defaults were still showing through. None is decorative;
     each is something a reader meets dozens of times per visit.
     ================================================================== */

  /* 1 — Selecting text gave the browser's blue. On a navy and cream site
     that is the one colour in the palette that does not belong. A tint
     rather than a solid fill, so the text keeps its own colour and stays
     legible on either ground. */
  ::selection{background:rgba(226,75,142,.28);color:inherit}
  ::-moz-selection{background:rgba(226,75,142,.28);color:inherit}

  /* 2 — Tabbing to a nav link produced `1px auto rgb(16,16,16)`: a thin
     near-black outline on a navy bar, which is invisible. Only three
     components had a designed focus state; everything else fell through
     to that. One ring, offset so it never crowds the glyphs, and it
     works on both grounds because rose sits between them. */
  :focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:3px}
  .dark :focus-visible,.s2nav :focus-visible,.s2foot :focus-visible{outline-color:#f3a9ce}

  /* 3 — Anchor jumps were instant. The site links to #track-record and
     #faq from the footer and the nav, and landing with no travel makes a
     one-page site feel like several. scroll-padding-top is already set
     for the sticky nav, so the destination arrives correctly framed. */
  html{scroll-behavior:smooth}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  /* 4 — Tapping anything on mobile flashed the default grey box. */
  html{-webkit-tap-highlight-color:rgba(226,75,142,.18)}

  /* The mark's third home. At rest the nav sits flush against the hero
     with a plain hairline; once the reader has moved, it takes the same
     rose-to-teal rule the footer closes with, plus enough shadow to read
     as floating over the page rather than printed on it.

     Both transition, so the change is noticed without being announced. */
  .s2nav{position:sticky;transition:box-shadow .3s ease,border-color .3s ease}
  .s2nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:linear-gradient(90deg,
      rgba(226,75,142,0) 0%, var(--rose) 18%, #8f6fb8 42%,
      #3fd6bd 72%, rgba(63,214,189,0) 100%);
    opacity:0;transition:opacity .34s ease;pointer-events:none}
  html.moved .s2nav::after{opacity:1}
  html.moved .s2nav{box-shadow:0 10px 30px -14px rgba(2,16,57,.75);border-bottom-color:transparent}

  @media(prefers-reduced-motion:reduce){
    .s2nav,.s2nav::after{transition:none}
  }

  /* --- the "Runs inside Claude" pill glints every six seconds ----------
     It played once, 0.9s after the hero settled, and never again.

     One cycle is the 0.75s sweep plus a 6s wait, so 6.75s, and the sweep
     is the first 11.11% of it. The remaining 88.89% holds the highlight
     parked off the right-hand edge, which is why the pause costs nothing
     to draw.

     The sweep is a transform rather than `left`, so it composites instead
     of laying out on every frame — worth doing when something repeats for
     as long as the page is open. The shared badgeShine keyframe is left
     alone because .brandpill still uses it as a one-shot.

     translateX(400%): the highlight is 55% of the pill's width and starts
     at -85%, so clearing the far edge means travelling 220% of the pill,
     which is 400% of the highlight itself. */
  @keyframes badgeShineLoop{
    0%      {transform:translateX(0) skewX(-18deg)}
    11.11%  {transform:translateX(400%) skewX(-18deg)}
    100%    {transform:translateX(400%) skewX(-18deg)}
  }
  html.js .pillwrap[data-rv="up"].in .badge::after{
    animation:badgeShineLoop 6.75s linear .9s infinite}

  @media(prefers-reduced-motion:reduce){
    html.js .pillwrap[data-rv="up"].in .badge::after{animation:none;opacity:0}
  }

  /* --- the punchline under the fallen fragments, on mobile -------------
     "None of it is where the work happens" was sitting 73px below the
     last torn scrap and only 50px above the end of the section, so it
     floated in the middle of nothing and read as a stray sentence rather
     than the line the whole image is building to.

     The 73px was three things stacked: 15px of field height past the last
     scrap, the field's own 30px bottom margin, and the paragraph's 28px
     top margin. Closing two of them puts the line where it belongs —
     close enough under the pile to be read as its caption.

     The size is deliberately unchanged. It is 20.5px, exactly the same as
     the other three claimlines on this page; the problem was isolation,
     not scale, and enlarging this one alone would break the set. */
  @media(max-width:860px){
    #problem .mflow{margin-bottom:6px}
    #problem .pclaim{margin-top:22px}
  }

  /* the trademark line, running along the very bottom. Quiet by design:
     it is a disclaimer, not a message, so it sits below the legal row at
     the smallest size still comfortably readable. Contrast is checked
     rather than assumed — small text needs 4.5:1 the same as body copy. */
  .s2foot .ftm{max-width:none;margin-top:14px;padding-top:14px;
    border-top:1px solid rgba(255,255,255,.07);position:relative;z-index:1}
  .s2foot .ftm span{display:block;font-size:11.5px;line-height:1.6;
    color:#9aa4c4;max-width:76ch}
  @media(max-width:860px){
    .s2foot .ftm span{font-size:11px}
  }

  /* --- the legal pages carry both languages in the markup --------------
     Each one holds a full German block (#de) and a full English block
     (#en), separated by a rule. That made sense when both languages
     shared a single URL: German first, English underneath, and the note
     at the top explaining which one governs.

     Now each language has its own URL, so showing both means an English
     reader meets the whole German policy before reaching a word they
     asked for. Show the block that matches the document's language, and
     drop the separator, which has nothing left to separate.

     Keyed off html[lang], which buildde.py sets per tree, so this needs
     no JavaScript and cannot flash the wrong language before it loads. */
  html[lang="en"] .legal #de,
  html[lang="de"] .legal #en{display:none}
  .legal #de + hr.rule{display:none}

  /* the top note only makes sense on the English page, where it explains
     that the German text is the governing version */
  html[lang="de"] .legal > p.note{display:none}