@font-face{font-family:"Bricolage Grotesque";
  src:url("../fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";
  src:url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";
  src:url("../fonts/instrument-sans-latin-wght-italic.woff2") format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap}
/* ===========================================================================
   PUBLISHOS: BLACK / WHITE / ORANGE VISUAL RESET
   Near-black #0B0B0D · White #FFFFFF · Orange-red #FF4B2B · neutral greys.
   Data blue #3B7BFF appears only inside a genuine data demonstration.
   Sans-serif only. No cream, beige, brown or sepia anywhere.
   =========================================================================== */
:root{
  --k:#0B0B0D;
  --k-lift:#141417;          /* one step up from the ground, for product surfaces */
  --w:#FFFFFF;
  --o:#FF4B2B;
  --o-ink:#C43C1D;           /* orange for small text on white: 4.8:1 */
  --g-1:#3C3C40;             /* body copy on white */
  --g-2:#6E6E74;             /* labels on white */
  --gw-1:#C6C6CB;            /* body copy on black */
  --gw-2:#8E8E96;            /* labels on black */
  --line:rgba(11,11,13,.16);
  --line-i:rgba(255,255,255,.16);
  --blue:#3B7BFF;            /* DATA ONLY */
  --gut:clamp(20px,4.4vw,72px);
  --dis:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--w);color:var(--g-1);
  font-family:var(--sans);font-size:17px;line-height:1.58;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1340px;margin:0 auto;padding:0 var(--gut)}

h1,h2,h3,h4{margin:0;font-family:var(--dis);font-weight:800;color:var(--k);
  letter-spacing:-.042em;line-height:.98;text-wrap:balance}
h1{font-size:clamp(2.5rem,4.6vw,4.15rem)}
h2{font-size:clamp(2.2rem,4.6vw,3.9rem)}
p{margin:0 0 1em}
.o{color:var(--o)}

.eyebrow{font-family:var(--sans);font-size:.84rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--o-ink);margin:0 0 20px}

.btn{display:inline-block;font-family:var(--sans);font-size:.8rem;font-weight:700;
  letter-spacing:.035em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  padding:13px 20px;border-radius:100px;border:1.5px solid var(--o);
  background:var(--o);color:var(--k);transition:background .16s,color .16s,border-color .16s}
.btn:hover{background:var(--k);border-color:var(--k);color:var(--w)}
.btn-2{background:transparent;color:var(--k);border-color:var(--k)}
.btn-2:hover{background:var(--k);color:var(--w)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--o);outline-offset:3px}

/* ------------------------------ header ---------------------------------- */
.nav{position:relative;z-index:5}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:22px;padding-bottom:22px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:26px;height:26px;display:block}
.brand b{font-family:var(--dis);font-size:1.1rem;font-weight:800;
  letter-spacing:-.045em;color:var(--k)}
.nav-r{display:flex;align-items:center;gap:26px}
.nav-r a{font-size:.88rem;font-weight:600;color:var(--g-1);text-decoration:none}
.nav-r a:hover{color:var(--k)}
.nav-r a.btn{color:var(--k)}
.nav-r a.btn:hover{color:var(--w)}
.nav-r .btn{padding:11px 20px;font-size:.82rem}

/* =============================== HERO ==================================== */
.hero{padding:clamp(18px,2vw,30px) 0 clamp(34px,4vw,54px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1.22fr);
  gap:clamp(28px,3.4vw,54px);align-items:center}
.hero h1{margin-bottom:20px;max-width:13ch}
.hero .sup{font-size:clamp(1rem,1.15vw,1.16rem);line-height:1.55;color:var(--g-1);
  max-width:34em;margin-bottom:26px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px}
.hero .fine{font-size:.82rem;color:var(--g-2);margin:18px 0 0}

/* ------- the workspace: a web-native reconstruction, not a screenshot ---- */
.ws{background:var(--k);border-radius:18px;padding:clamp(18px,1.8vw,28px);
  box-shadow:0 50px 90px -50px rgba(11,11,13,.6);color:var(--gw-1)}
.ws-bar{display:flex;align-items:center;gap:10px;padding-bottom:14px;
  border-bottom:1px solid var(--line-i);margin-bottom:16px}
.ws-bar .dot{width:9px;height:9px;border-radius:50%;background:#2E2E34;flex:none}
.ws-bar .dot.on{background:var(--o)}
.ws-bar .t{font-size:.8rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gw-2);margin-left:6px}
.ws-bar .r{margin-left:auto;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gw-2)}

/* input */
.ws-in{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-i);
  border-radius:9px;padding:10px 13px;font-size:.8rem;color:var(--w);background:#17171B}
.chip i{width:15px;height:19px;border-radius:2px;background:var(--w);flex:none;
  position:relative}
.chip i::after{content:"";position:absolute;inset:4px 3px auto 3px;height:1px;
  background:#0B0B0D;box-shadow:0 3px 0 #0B0B0D,0 6px 0 #0B0B0D}
.ws-in .flow{flex:1;height:1px;background:linear-gradient(90deg,var(--o),rgba(255,75,43,.15))}
.ws-in .n{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gw-2)}

/* four stages, thirteen modules */
.ws-stages{display:grid;grid-template-columns:1fr .86fr .95fr 1.29fr;gap:10px;align-items:start}
.st{background:var(--k-lift);border:1px solid var(--line-i);border-radius:11px;
  padding:14px 13px 13px;min-width:0;position:relative;overflow:hidden}
.st::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--o);transform:scaleX(0);transform-origin:left;
  transition:transform .5s ease}
.st.lit::before{transform:scaleX(1)}
.st .num{font-family:var(--dis);font-size:.82rem;font-weight:800;color:var(--o);
  letter-spacing:.02em}
.st h3,.st h4{font-size:1.02rem;color:var(--w);letter-spacing:-.03em;margin:5px 0 10px;
  line-height:1.1}
.st ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.st li{font-size:.86rem;line-height:1.32;color:var(--gw-1);
  padding-left:11px;position:relative}
.st li::before{content:"";position:absolute;left:0;top:.5em;width:4px;height:4px;
  border-radius:50%;background:#3A3A42}
.st.lit li::before{background:var(--o)}

/* outputs */
.ws-out{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-i)}
.ws-out .n{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gw-2);margin-bottom:10px}
.outs{display:flex;flex-wrap:wrap;gap:8px}
.out{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,75,43,.42);
  background:rgba(255,75,43,.09);border-radius:8px;padding:10px 13px;
  font-size:.82rem;color:var(--w);opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease}
.out.on{opacity:1;transform:none}
.out b{color:var(--o);font-weight:700}
.out .tick{width:14px;height:14px;flex:none;border-radius:50%;background:var(--o);
  position:relative}
.out .tick::after{content:"";position:absolute;left:4px;top:2.5px;width:4px;height:7px;
  border:solid #0B0B0D;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}

/* ======================= MID-PAGE SALES SECTION ========================== */
.sec-k{background:var(--k);color:var(--gw-1);padding:clamp(64px,8vw,120px) 0}
.sec-k h2{color:var(--w)}
.sec-k .eyebrow{color:var(--o)}
.num-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.num-grid p{color:var(--gw-1);max-width:32em;font-size:1.04rem}
.num-grid h2{margin-bottom:18px;max-width:12ch}

/* the data scene, the one place data blue is allowed */
.scene{background:var(--k-lift);border:1px solid var(--line-i);border-radius:16px;
  padding:clamp(20px,2.2vw,30px)}
.scene-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:16px;border-bottom:1px solid var(--line-i);margin-bottom:20px}
.scene-top .t{font-size:.82rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gw-2)}
.scene-top .m{font-size:.84rem;color:var(--gw-2)}
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.fig{background:#0E0E12;border:1px solid var(--line-i);border-radius:10px;
  padding:14px 15px}
.fig .l{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gw-2);margin-bottom:7px}
.fig .v{font-family:var(--dis);font-size:1.72rem;font-weight:800;color:var(--w);
  letter-spacing:-.04em;line-height:1}
.fig.hero-fig{background:var(--blue);border-color:var(--blue)}
.fig.hero-fig .l{color:var(--k)}
.fig.hero-fig .v{color:var(--k)}
.bars{display:grid;gap:11px}
.bar-row{display:grid;grid-template-columns:78px minmax(0,1fr) 74px;gap:12px;
  align-items:center;font-size:.82rem}
.bar-row .mk{color:var(--gw-1);letter-spacing:.04em}
.bar-track{height:9px;border-radius:5px;background:#1D1D22;overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:5px;background:var(--blue)}
.bar-row .amt{text-align:right;color:var(--w);font-weight:700;
  font-variant-numeric:tabular-nums}
.scene-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-i);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.scene-foot .k{font-size:.86rem;color:var(--gw-2)}
.scene-foot .k b{color:var(--o);font-weight:700}
.scene-note{font-size:.82rem;color:var(--gw-2);margin:14px 0 0}

/* ------------------------------ responsive ------------------------------- */
@media (max-width:1080px){
  /* Below this width the call to action comes BEFORE the workspace, so a phone
     reaches the orange button without scrolling past every module name. */
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .h-left{display:contents}
  .h-top{order:1}
  .h-cta{order:2}
  .ws{order:3}
  .hero h1{max-width:16ch}
  .hero .sup{margin-bottom:0}
  .hero .cta{margin-top:0}
  .num-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:720px){
  .ws-stages{grid-template-columns:1fr 1fr;gap:9px}
  .figs{grid-template-columns:1fr}
  .nav-r a:not(.btn){display:none}
}
@media (max-width:430px){
  body{font-size:16px}
  .hero{padding-top:6px}
  .hero h1{font-size:2.15rem;max-width:none;margin-bottom:16px}
  .eyebrow{margin-bottom:14px;letter-spacing:.15em}
  .hero .sup{font-size:1rem}
  .cta{flex-direction:column}
  .cta .btn{width:100%;text-align:center}
  .ws-stages{grid-template-columns:1fr}
  .st ul{grid-template-columns:1fr 1fr}
  .bar-row{grid-template-columns:64px minmax(0,1fr) 70px;gap:9px;font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){
  .st::before{transition:none;transform:scaleX(1)}
  .out{transition:none;opacity:1;transform:none}
}
html:not(.js) .st::before{transform:scaleX(1)}
html:not(.js) .out{opacity:1;transform:none}


/* ===========================================================================
   SITE-WIDE STRUCTURE
   =========================================================================== */
.skip{position:absolute;left:-9999px;top:0;background:var(--k);color:var(--w);
  padding:12px 18px;border-radius:0 0 8px 0;z-index:99;font-weight:700}
.skip:focus{left:0}

.sec{padding:clamp(64px,7.5vw,116px) 0}
.sec-w{background:var(--w);color:var(--g-1)}
.sec-k{background:var(--k);color:var(--gw-1)}
.sec-k h1,.sec-k h2,.sec-k h3,.sec-k h4{color:var(--w)}
.sec-k .eyebrow{color:var(--o)}
.sec-w .eyebrow{color:var(--o-ink)}
.sec-k a{color:var(--w)}

.lede{font-size:clamp(1.04rem,1.25vw,1.22rem);line-height:1.55;max-width:44ch;
  margin:22px 0 0}
.sec-k .lede{color:var(--gw-1)}
.head{max-width:34ch}
.head h2{margin-bottom:0}

/* two-column section: words left, one dominant visual right */
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.28fr);
  gap:clamp(30px,4vw,68px);align-items:center}
.split.rev .sp-words{order:2}
.split.rev .sp-vis{order:1}

/* ===========================================================================
   PRODUCT SURFACES: web-native recompositions of the PublishOS interface
   =========================================================================== */
.panel{border-radius:16px;padding:clamp(16px,1.7vw,26px);min-width:0}
.sec-w .panel{background:var(--k);color:var(--gw-1);
  box-shadow:0 46px 84px -50px rgba(11,11,13,.55)}
.sec-k .panel{background:var(--k-lift);color:var(--gw-1);border:1px solid var(--line-i)}
.panel h3,.panel h4{color:var(--w)}

.p-top{display:flex;align-items:center;gap:10px;padding-bottom:13px;
  border-bottom:1px solid var(--line-i);margin-bottom:16px;flex-wrap:wrap}
.p-top .t{font-size:.8rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gw-2)}
.p-top .r{margin-left:auto;font-size:.82rem;color:var(--gw-2)}
.p-top .dot{width:9px;height:9px;border-radius:50%;background:#2E2E34;flex:none}
.p-top .dot.on{background:var(--o)}

/* a labelled control row, as the product's own settings read */
.ctrls{display:grid;gap:1px;background:var(--line-i);border:1px solid var(--line-i);
  border-radius:10px;overflow:hidden}
.ctrl{display:flex;align-items:baseline;gap:14px;background:var(--k-lift);
  padding:11px 14px;font-size:.88rem;flex-wrap:wrap}
.sec-k .ctrl{background:#191920}
.ctrl .cl{color:var(--gw-2);min-width:9.5em;flex:none}
.ctrl .cv{color:var(--w);font-weight:600}
.ctrl .cn{margin-left:auto;color:var(--gw-2);font-size:.82rem}
.ctrl .on{color:var(--o);font-weight:700}

/* a report line: what the software says it did */
.rep{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.rep li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;
  line-height:1.4;color:var(--gw-1)}
.rep .tick{width:15px;height:15px;flex:none;border-radius:50%;background:var(--o);
  position:relative;margin-top:2px}
.rep .tick::after{content:"";position:absolute;left:4.4px;top:3px;width:4px;height:7px;
  border:solid #0B0B0D;border-width:0 1.7px 1.7px 0;transform:rotate(42deg)}
.rep .num{width:15px;height:15px;flex:none;border-radius:4px;
  border:1px solid rgba(255,255,255,.35);margin-top:2px}

.sub{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gw-2);margin:20px 0 11px}
.sub:first-child{margin-top:0}

/* file cards, the things the author actually receives */
.files{display:grid;gap:9px}
.file{display:flex;align-items:center;gap:13px;border:1px solid rgba(255,75,43,.42);
  background:rgba(255,75,43,.09);border-radius:9px;padding:12px 14px}
.file .ext{font-family:var(--dis);font-size:.82rem;font-weight:800;letter-spacing:.06em;
  color:var(--o);flex:none;width:3.4em}
.file .fn{color:var(--w);font-size:.9rem;font-weight:600;word-break:break-word}
.file .fd{color:var(--gw-2);font-size:.82rem;margin-top:2px}
.file .fc{margin-left:auto;flex:none;color:var(--gw-2);font-size:.8rem;
  text-align:right;padding-left:10px}

/* ===========================================================================
   SPELLING REVIEW
   =========================================================================== */
.doc{background:#17171B;border:1px solid var(--line-i);border-radius:10px;
  padding:18px 18px 16px;font-size:1rem;line-height:1.85;color:var(--gw-1)}
.doc mark{background:rgba(255,75,43,.18);color:var(--w);border-radius:3px;
  padding:1px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.doc .flag{background:transparent;color:var(--o);font-weight:700;
  border-bottom:2px solid var(--o);border-radius:0;padding:0}
.cmt{margin-top:14px;border:1px solid rgba(255,75,43,.42);border-radius:9px;
  background:rgba(255,75,43,.09);padding:12px 14px}
.cmt .who{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--o);font-weight:700;margin-bottom:5px}
.cmt .txt{font-size:.9rem;color:var(--w)}
.legend{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:16px;font-size:.86rem;
  color:var(--gw-2)}
.legend b{color:var(--w);font-weight:700}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:11px;height:11px;border-radius:3px;flex:none}
.legend .i-auto{background:rgba(255,75,43,.35)}
.legend .i-flag{background:transparent;border-bottom:2px solid var(--o);border-radius:0;
  height:8px}

/* ===========================================================================
   NUMBERS
   =========================================================================== */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.figs-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fig{background:#0E0E12;border:1px solid var(--line-i);border-radius:10px;
  padding:14px 15px}
.sec-k .fig{background:#0B0B0D}
.fig .l{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gw-2);margin-bottom:7px}
.fig .v{font-family:var(--dis);font-size:clamp(1.42rem,2vw,1.72rem);font-weight:800;
  color:var(--w);letter-spacing:-.04em;line-height:1}
.fig .n{font-size:.82rem;color:var(--gw-2);margin-top:6px}
.fig.hero-fig{background:var(--blue);border-color:var(--blue)}
.fig.hero-fig .l,.fig.hero-fig .v,.fig.hero-fig .n{color:var(--k)}

.bars{display:grid;gap:11px;margin-top:18px}
.bar-row{display:grid;grid-template-columns:110px minmax(0,1fr) 86px;gap:12px;
  align-items:center;font-size:.86rem}
.bar-row .mk{color:var(--gw-1)}
.bar-track{height:9px;border-radius:5px;background:#1D1D22;overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:5px;background:var(--blue)}
.bar-fill.neg{background:var(--o)}
.bar-row .amt{text-align:right;color:var(--w);font-weight:700;
  font-variant-numeric:tabular-nums}
.p-foot{margin-top:20px;padding-top:15px;border-top:1px solid var(--line-i);
  font-size:.86rem;color:var(--gw-2)}
.p-foot b{color:var(--o);font-weight:700}
.note{font-size:.84rem;color:var(--g-2);margin:16px 0 0;max-width:80ch}
.sec-k .note{color:var(--gw-2)}

/* ===========================================================================
   LAUNCH OUTPUTS
   =========================================================================== */
.outs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.card{background:var(--k-lift);border:1px solid var(--line-i);border-radius:11px;
  padding:15px 15px 14px;min-width:0}
.sec-k .card{background:#191920}
.card .ct{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--o);font-weight:700;margin-bottom:9px}
.card h3,.card h4{font-size:1rem;letter-spacing:-.025em;margin:0 0 8px;line-height:1.2}
.card p{font-size:.88rem;color:var(--gw-1);margin:0;line-height:1.45}
.card ul{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:5px}
.card li{font-size:.86rem;color:var(--gw-1);padding-left:11px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;
  border-radius:50%;background:var(--o)}
.card .q{font-size:.92rem;color:var(--w);line-height:1.45}
.card .meta{margin-top:9px;font-size:.8rem;color:var(--gw-2)}

.ill{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:7px 14px;
  font-size:.8rem;color:var(--gw-1)}
.ill b{color:var(--o);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:.8rem}
.ill-p{font-size:.84rem;color:var(--gw-2);margin:10px 0 0;max-width:70ch}

/* ===========================================================================
   TRUST
   =========================================================================== */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  margin-top:44px}
.tcard{border-radius:14px;padding:clamp(20px,2vw,30px)}
.t-local{background:var(--k-lift);border:1px solid var(--line-i)}
.t-ai{background:var(--k-lift);border:1px solid rgba(255,75,43,.42)}
.tcard .tt{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;margin-bottom:12px}
.t-local .tt{color:var(--gw-2)}
.t-ai .tt{color:var(--o)}
.tcard h3{font-size:clamp(1.24rem,1.7vw,1.5rem);letter-spacing:-.035em;margin:0 0 12px}
.tcard p{font-size:.96rem;color:var(--gw-1);margin:0 0 14px;line-height:1.55}
.tcard ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tcard li{font-size:.9rem;color:var(--gw-1);padding-left:15px;position:relative;
  line-height:1.45}
.tcard li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--gw-2)}
.t-ai li::before{background:var(--o)}

/* ===========================================================================
   REGISTER
   =========================================================================== */
.reg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.form{display:flex;gap:11px;flex-wrap:wrap;margin:26px 0 0;max-width:34em}
.form label{display:block;font-size:.86rem;color:var(--gw-2);margin-bottom:7px;
  width:100%}
.sec-w .form label{color:var(--g-2)}
.form input[type=email]{flex:1 1 12em;box-sizing:border-box;min-width:0;font-family:var(--sans);
  font-size:1rem;padding:14px 16px;border-radius:100px;border:1.5px solid var(--line-i);
  background:#17171B;color:var(--w)}
.sec-w .form input[type=email]{background:var(--w);color:var(--k);
  border-color:rgba(11,11,13,.34)}
.form input[type=email]::placeholder{color:var(--gw-2)}
.sec-w .form input[type=email]::placeholder{color:var(--g-2)}
.form input:focus-visible{outline:2px solid var(--o);outline-offset:2px}
.form button{font-family:var(--sans);cursor:pointer}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.fine{font-size:.86rem;color:var(--gw-2);margin:16px 0 0;max-width:46em}
.sec-w .fine{color:var(--g-2)}
.fine a{color:inherit}

/* ===========================================================================
   MODULES PAGE: stage selector, then module selector, then one module
   =========================================================================== */
.stages-sel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  margin:36px 0 0}
.sbtn{display:block;width:100%;text-align:left;font-family:var(--sans);cursor:pointer;
  background:var(--k-lift);border:1px solid var(--line-i);border-radius:12px;
  padding:16px 16px 15px;color:var(--gw-1);transition:border-color .15s,background .15s}
.sbtn:hover{border-color:rgba(255,255,255,.4)}
.sbtn .sn{font-family:var(--dis);font-size:.86rem;font-weight:800;color:var(--o);
  display:block;margin-bottom:6px}
.sbtn .st-name{font-family:var(--dis);font-size:1.08rem;font-weight:800;color:var(--w);
  letter-spacing:-.03em;line-height:1.12;display:block}
.sbtn .sc{display:block;margin-top:8px;font-size:.84rem;color:var(--gw-2)}
.sbtn[aria-selected=true]{background:var(--o);border-color:var(--o)}
.sbtn[aria-selected=true] .sn,.sbtn[aria-selected=true] .st-name,
.sbtn[aria-selected=true] .sc{color:var(--k)}

.mods-sel{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;
  padding-top:22px;border-top:1px solid var(--line-i)}
.mbtn{font-family:var(--sans);font-size:.9rem;font-weight:600;cursor:pointer;
  background:transparent;border:1.5px solid var(--line-i);border-radius:100px;
  padding:10px 17px;color:var(--gw-1);transition:border-color .15s,color .15s}
.mbtn:hover{border-color:var(--w);color:var(--w)}
.mbtn .mn{color:var(--o);font-weight:700;margin-right:7px}
.mbtn[aria-selected=true]{background:var(--w);border-color:var(--w);color:var(--k)}
.mbtn[aria-selected=true] .mn{color:var(--o-ink)}
.sbtn:focus-visible,.mbtn:focus-visible{outline:2px solid var(--o);outline-offset:3px}

.theatre{margin-top:clamp(30px,3.6vw,52px)}
.m-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.m-head .mk{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gw-2)}
.tag{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-radius:100px;padding:5px 12px;border:1px solid}
.tag-local{color:var(--gw-1);border-color:rgba(255,255,255,.4)}
.tag-ai{color:var(--k);background:var(--o);border-color:var(--o)}
.m-title{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.045em;margin:0 0 14px}
.m-line{font-size:clamp(1.04rem,1.3vw,1.24rem);color:var(--gw-1);max-width:40ch;
  margin:0 0 30px;line-height:1.5}
.m-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr);
  gap:clamp(26px,3.4vw,54px);align-items:start}
.qa{display:grid;gap:22px}
.qa h3,.qa h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--o);
  margin:0 0 7px;font-family:var(--sans);font-weight:700}
.qa p{font-size:.96rem;line-height:1.55;color:var(--gw-1);margin:0}

/* ===========================================================================
   FOOTER
   =========================================================================== */
.foot{background:var(--k);color:var(--gw-1);padding:clamp(48px,5vw,76px) 0 40px;
  border-top:1px solid var(--line-i)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:32px}
.foot h2,.foot h3,.foot h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gw-2);margin:0 0 13px;font-family:var(--sans);font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot li{font-size:.9rem}
.foot a{color:var(--gw-1);text-decoration:none}
.foot a:hover{color:var(--w);text-decoration:underline}
.foot .blurb{font-size:.92rem;color:var(--gw-1);max-width:34em;margin:14px 0 0}
.foot .brand b{color:var(--w)}
.foot-base{margin-top:40px;padding-top:22px;border-top:1px solid var(--line-i);
  font-size:.84rem;color:var(--gw-2);display:flex;gap:18px;flex-wrap:wrap}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:1080px){
  .split,.m-grid,.reg{grid-template-columns:1fr;gap:30px}
  .split.rev .sp-words,.split.rev .sp-vis{order:0}
  .head,.lede{max-width:none}
  .stages-sel{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .outs-grid{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr}
  .figs,.figs-4{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .outs-grid,.figs,.figs-4{grid-template-columns:1fr}
  .stages-sel{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .ctrl .cl{min-width:0;flex:1 1 100%}
  .ctrl .cn{margin-left:0}
  .bar-row{grid-template-columns:78px minmax(0,1fr) 78px;gap:9px;font-size:.82rem}
  .form input[type=email]{flex:1 1 100%}
  .form button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ===========================================================================
   PROGRESSIVE ENHANCEMENT
   With scripting off, every stage heading and all thirteen module panels are
   visible in sequence. Script hides what is not selected.
   =========================================================================== */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}
html:not(.js) .stages-sel,html:not(.js) .mods-sel{display:none}
html:not(.js) .noscript-note{display:block}
.noscript-note{display:none;margin:26px 0 0;font-size:.9rem;color:var(--gw-2)}
html.mods-live .mod-panel[hidden]{display:none}
.mod-stage-head{margin:clamp(40px,5vw,72px) 0 0}
.mod-stage-head h3{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.04em}
.mod-panel{padding-top:clamp(26px,3vw,42px)}
html.mods-live .mod-panel{border-top:0;padding-top:0}
html:not(.mods-live) .mod-panel + .mod-panel{border-top:1px solid var(--line-i);
  margin-top:clamp(34px,4vw,58px)}

/* four-across output grid, and the outline button used on black */
.outs-grid.outs-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.outs-grid.outs-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.outs-grid.outs-4{grid-template-columns:1fr}}
.btn-k{background:transparent;color:var(--w);border-color:var(--w)}
.btn-k:hover{background:var(--w);border-color:var(--w);color:var(--k)}
.sp-words p:last-child{margin-bottom:0}
.sp-words .btn{margin-top:26px}

.file .fn,.file .fd{display:block}
.file > span:nth-child(2){min-width:0}

/* the confirmation and 404 pages sit on black outside a .sec-k wrapper */
.state .eyebrow{color:var(--o)}
.state .note{color:var(--gw-2)}
.state a:not(.btn){color:var(--w)}
.state .mod-stage-head{margin:0}
.mod-stage-head h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.04em}
.theatre h1{font-size:clamp(2.4rem,4.4vw,3.9rem)}

/* headings inside any dark product surface stay white */
.ws h3,.ws h4,.panel h3,.panel h4,.card h3,.card h4,.tcard h3,.doc h3{color:var(--w)}
.qa h3{font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--o);margin:0 0 7px}
.m-title{font-family:var(--dis)}

/* At the narrowest widths the header button has to shed its padding and its
   full label, or it pushes the page sideways. */
@media (max-width:430px){
  .nav .wrap{gap:12px}
  .nav-r .btn{padding:10px 13px;font-size:.8rem;letter-spacing:.01em}
  .nav-r .btn .long{display:none}
}

/* ===========================================================================
   SECTION LAYOUT
   Label full width. Heading in the left half, supporting paragraph in the right
   half aligned near the top of the heading. Demonstration underneath, full width.
   =========================================================================== */
.intro{margin:0}
.intro .eyebrow{margin-bottom:22px}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4.4vw,76px);align-items:start}
.intro-grid h2{margin:0;max-width:none;text-wrap:balance}
.intro-r{padding-top:.28em}
.intro-r .lede{margin:0;max-width:46ch}
.intro-btn{margin:26px 0 0}
.demo{margin-top:clamp(40px,4.6vw,66px)}
.demo > .panel + .panel{margin-top:14px}
.p-lead{margin:0 0 16px;font-size:.96rem;color:var(--gw-1);max-width:70ch}

/* inside a full-width panel, two columns keep the content from stretching thin */
.p-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,2.6vw,40px);align-items:start}
.p-cols > div > .sub:first-child{margin-top:0}
.p-cols .p-foot{margin-top:18px}

@media (max-width:900px){
  .p-cols{grid-template-columns:1fr;gap:26px}
}
@media (max-width:1080px){
  /* Stacked order on smaller screens: label, heading, supporting text, demo. */
  .intro-grid{grid-template-columns:1fr;gap:28px}
  .intro-r{padding-top:0}
  .intro-r .lede{max-width:none}
  .demo{margin-top:48px}
  .intro .eyebrow{margin-bottom:16px}
}

/* ===========================================================================
   MOBILE HERO
   The four stages read as a compact two by two grid. Module names stay in the
   markup but are set aside on a phone; they are listed in full in the
   proposition section below and on the modules page.
   =========================================================================== */
.st-count{display:none}
@media (max-width:720px){
  .hero{padding-bottom:26px}
  .ws-bar .dot{display:none}
  .ws-bar .t{margin-left:0;letter-spacing:.1em}
  .ws-bar .r{letter-spacing:.08em}
  .h-cta{margin-bottom:2px}
  .ws{padding:16px}
  .ws-stages{grid-template-columns:1fr 1fr;gap:8px}
  .st{padding:12px 12px 11px}
  .st h3{margin-bottom:6px}
  .st h3 br{display:none}
  .st ul{display:none}
  .st-count{display:block;font-size:.84rem;color:var(--gw-2)}
  .ws-out .outs{gap:6px}
  .out{padding:8px 11px;font-size:.8rem}
}
@media (max-width:430px){
  .hero .cta{gap:10px}
  .hero .fine{margin-top:14px}
  .ws-stages{gap:7px}
}

/* ===========================================================================
   FOOTER
   Three items, clearly spaced, nothing else.
   =========================================================================== */
.foot{background:var(--k);color:var(--gw-1);padding:38px 0 40px;
  border-top:1px solid var(--line-i)}
.foot-line{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;
  margin:0;font-size:.92rem;color:var(--gw-1)}
.foot-line a{color:var(--w);text-decoration:underline;text-underline-offset:3px}
.foot-line a:hover{color:var(--o)}
@media (max-width:560px){
  .foot-line{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ===========================================================================
   STAGE PICKER
   Four stages listed down the left. Choosing one swaps the panel on the right.
   With scripting off, every stage renders in sequence and nothing is hidden.
   =========================================================================== */
.picker{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(26px,3.6vw,60px);align-items:start}
.picks{display:grid;gap:6px;position:sticky;top:26px}
.pick{display:block;width:100%;text-align:left;font-family:var(--sans);
  cursor:pointer;background:transparent;border:0;border-radius:14px;
  padding:20px 22px;color:var(--g-2);
  transition:background .22s ease,color .22s ease,padding .22s ease}
.pick .pk-n{display:block;font-family:var(--dis);font-size:.9rem;font-weight:800;
  letter-spacing:.04em;color:var(--o-ink);margin-bottom:6px}
.pick .pk-name{display:block;font-family:var(--dis);font-weight:800;
  font-size:clamp(1.5rem,2.5vw,2.05rem);letter-spacing:-.04em;line-height:1.05;
  color:currentColor}
.pick .pk-c{display:block;margin-top:8px;font-size:.88rem;color:var(--g-2)}
.pick:hover{color:var(--k)}
.pick[aria-selected=true]{background:var(--k);color:var(--w)}
.pick[aria-selected=true] .pk-n{color:var(--o)}
.pick[aria-selected=true] .pk-c{color:var(--gw-1)}
.pick:focus-visible{outline:2px solid var(--o);outline-offset:3px}

.pick-panels{min-width:0}
.pk-line{margin:0 0 16px;font-size:1.02rem;line-height:1.5;color:var(--gw-1);
  max-width:52ch}
.mchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.mchip{display:inline-block;border:1px solid rgba(255,255,255,.3);border-radius:100px;
  padding:8px 15px;font-size:.88rem;color:var(--w)}
html.picker-live .pick-panel[hidden]{display:none}
html.picker-live .pick-panel{animation:pk-in .34s ease both}
@keyframes pk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html:not(.js) .picks{display:none}
html:not(.js) .pick-panel + .pick-panel{margin-top:14px}

@media (max-width:1080px){
  .picker{grid-template-columns:1fr;gap:26px}
  .picks{position:static;grid-template-columns:1fr 1fr;display:grid;gap:8px}
  .pick{padding:15px 16px;border:1px solid rgba(11,11,13,.16)}
  .pick[aria-selected=true]{border-color:var(--k)}
}
@media (max-width:560px){
  .picks{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html.picker-live .pick-panel{animation:none}
}

/* ===========================================================================
   THE TRANSFORMING MANUSCRIPT
   One page of the sample book, which changes as the visitor picks a stage.
   Every state is a class on .ms; the transitions are plain CSS on properties
   the compositor handles cheaply. With motion switched off the states still
   change, they just do not animate.
   =========================================================================== */
.ms{margin-bottom:16px}
.ms-frame{position:relative;background:#17171B;border:1px solid var(--line-i);
  border-radius:14px;padding:clamp(20px,2.4vw,38px);overflow:hidden;
  height:clamp(390px,36vw,470px);display:flex;align-items:center;
  justify-content:center}

/* the page itself */
.pg{position:relative;background:var(--w);color:#15151A;width:min(100%,560px);
  border-radius:3px;box-shadow:0 26px 60px -30px rgba(0,0,0,.75);
  padding:26px 26px 34px;font-size:.9rem;line-height:1.62;text-align:left;
  max-height:100%;overflow:hidden;
  transition:width .55s cubic-bezier(.4,0,.2,1),padding .55s cubic-bezier(.4,0,.2,1),
    transform .55s cubic-bezier(.4,0,.2,1),filter .45s ease,opacity .45s ease}
.pg-run,.pg-folio{opacity:0;transition:opacity .4s ease .18s;
  font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;color:#7A7A82}
.pg-run{display:flex;justify-content:space-between;gap:16px;margin-bottom:22px}
.pg-folio{position:absolute;left:0;right:0;bottom:12px;text-align:center}
.pg-ch-n{margin:0 0 4px;font-size:.79rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--o-ink)}
p.pg-ch{font-family:var(--dis);font-size:1.42rem;letter-spacing:-.03em;color:#15151A;
  margin:0 0 14px}
.pg-p{margin:0 0 10px;transition:text-align .4s ease}
.pg .w{background:transparent;color:inherit;padding:0;border-radius:0;
  transition:background .35s ease,color .35s ease,box-shadow .35s ease}

/* margin guides: two rules in the gutter beside the page, never over it */
.ms-guides{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .4s ease}
.ms-guides .g{position:absolute;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:10px;
  font-size:.8rem;letter-spacing:.06em;color:var(--o);white-space:nowrap}
.ms-guides .g i{display:block;width:1px;height:170px;background:var(--o);flex:none}
.g-in{right:calc(50% + 210px);justify-content:flex-end}
.g-in b{order:-1;font-weight:600}
.g-out{left:calc(50% + 210px)}
.g-out b{font-weight:600}
.ms-guides .g-top{display:none}

/* the Word comment */
.ms-cmt{position:absolute;right:clamp(12px,2vw,26px);top:34%;width:min(40%,205px);
  background:#2A1712;border:1px solid rgba(255,75,43,.55);
  border-radius:9px;padding:11px 13px;opacity:0;transform:translateX(14px);
  transition:opacity .4s ease .12s,transform .4s ease .12s}
.ms-cmt .who{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--o);font-weight:700;margin-bottom:4px}
.ms-cmt .txt{display:block;font-size:.82rem;color:var(--w);line-height:1.4}

/* the money */
.ms-money{position:absolute;inset:auto 0 0 0;display:flex;gap:9px;
  justify-content:center;padding:0 clamp(16px,2vw,30px) clamp(16px,2vw,30px);
  opacity:0;transform:translateY(16px);
  transition:opacity .45s ease .1s,transform .45s ease .1s}
.mfig{background:#0B0B0D;border:1px solid var(--line-i);border-radius:9px;
  padding:11px 15px;min-width:118px}
.mfig .l{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gw-2);margin-bottom:4px}
.mfig .v{display:block;font-family:var(--dis);font-size:1.34rem;font-weight:800;
  letter-spacing:-.03em;color:var(--w)}
.mfig.hero{background:var(--blue);border-color:var(--blue)}
.mfig.hero .l,.mfig.hero .v{color:var(--k)}

/* the launch outputs */
.ms-launch{position:absolute;inset:0;pointer-events:none}
.lch{position:absolute;background:rgba(255,75,43,.12);
  border:1px solid rgba(255,75,43,.5);border-radius:100px;padding:8px 15px;
  font-size:.82rem;color:var(--w);white-space:nowrap;opacity:0;
  transform:scale(.9);transition:opacity .4s ease,transform .4s ease}
.l1{left:5%;top:15%} .l2{right:5%;top:12%} .l3{left:3%;top:47%}
.l4{right:3%;top:45%} .l5{left:9%;bottom:13%} .l6{right:7%;bottom:15%}

.ms-cap{margin:12px 0 0;font-size:.86rem;color:var(--gw-2);min-height:2.6em;
  transition:opacity .3s ease}
.sec-w .ms-cap{color:var(--g-2)}

/* ---------------------------------------------------------------- states -- */
/* 01 prepare: the page takes its geometry */
.ms[data-state="prepare"] .pg{width:min(100%,330px);
  padding:22px 20px 34px 38px;
  -webkit-mask-image:linear-gradient(#000 94%,transparent);
  mask-image:linear-gradient(#000 94%,transparent)}
.ms[data-state="prepare"] .pg-run,
.ms[data-state="prepare"] .pg-folio{opacity:1}
.ms[data-state="prepare"] .pg-p{text-align:justify}
.ms[data-state="prepare"] .ms-guides{opacity:1}

/* 02 check: the substitutions land and the comment arrives */
.ms[data-state="check"] .pg{width:min(100%,300px);padding:20px 20px 26px;
  transform:translateX(-72px);
  -webkit-mask-image:linear-gradient(#000 90%,transparent);
  mask-image:linear-gradient(#000 90%,transparent)}
.ms[data-state="check"] .pg-run,
.ms[data-state="check"] .pg-folio{opacity:1}
.ms[data-state="check"] .w-a{background:rgba(255,75,43,.2);
  box-shadow:0 0 0 2px rgba(255,75,43,.2)}
.ms[data-state="check"] .w-f{color:#C43C1D;font-weight:700;
  box-shadow:inset 0 -2px 0 #C43C1D}
.ms[data-state="check"] .ms-cmt{opacity:1;transform:none}

/* 03 numbers: the page steps back and the figures resolve over it */
.ms[data-state="numbers"] .pg{width:min(100%,300px);max-height:250px;
  transform:translateY(-42px);filter:saturate(.4);opacity:.5;
  -webkit-mask-image:linear-gradient(#000 72%,transparent);
  mask-image:linear-gradient(#000 72%,transparent)}
.ms[data-state="numbers"] .pg-run{opacity:1}
.ms[data-state="numbers"] .ms-money{opacity:1;transform:none}

/* 04 launch: the page becomes the source and the outputs fan out */
.ms[data-state="launch"] .pg{width:min(100%,215px);max-height:270px;
  filter:saturate(.35);opacity:.42;
  -webkit-mask-image:linear-gradient(#000 76%,transparent);
  mask-image:linear-gradient(#000 76%,transparent)}
.ms[data-state="launch"] .pg-run{opacity:1}
.ms[data-state="launch"] .lch{opacity:1;transform:none}
.ms[data-state="launch"] .l1{transition-delay:.05s}
.ms[data-state="launch"] .l2{transition-delay:.11s}
.ms[data-state="launch"] .l3{transition-delay:.17s}
.ms[data-state="launch"] .l4{transition-delay:.23s}
.ms[data-state="launch"] .l5{transition-delay:.29s}
.ms[data-state="launch"] .l6{transition-delay:.35s}

@media (max-width:820px){
  .ms-frame{min-height:300px;padding:18px}
  .pg{font-size:.86rem;padding:20px 20px 28px}
  .ms-guides{display:none}
  .ms-cmt{position:static;width:auto;margin-top:12px;transform:none;
    display:none}
  .ms[data-state="check"] .ms-cmt{display:block;opacity:1}
  .ms-frame{flex-direction:column}
  .ms-money{position:static;padding:14px 0 0;transform:none;width:100%;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
    opacity:0;height:0;overflow:hidden;transition:opacity .3s ease}
  .mfig{min-width:0;padding:9px 10px}
  .mfig .v{font-size:1.1rem}
  .mfig .l{font-size:.8rem;letter-spacing:.04em}
  .ms[data-state="numbers"] .ms-money{opacity:1;height:auto}
  .ms[data-state="numbers"] .pg{transform:none;width:min(100%,300px)}
  .lch{font-size:.82rem;padding:7px 12px}
  .l1{left:2%;top:8%} .l2{right:2%;top:6%} .l3{left:1%;top:45%}
  .l4{right:1%;top:43%} .l5{left:4%;bottom:8%} .l6{right:3%;bottom:10%}
}
@media (prefers-reduced-motion:reduce){
  .pg,.pg-run,.pg-folio,.ms-guides,.ms-cmt,.ms-money,.lch,.ms-cap,.pg .w{
    transition:none!important}
}
html:not(.js) .ms{display:none}

/* ===========================================================================
   POLISH
   Panels assemble rather than appear. Figures count. The header earns a hairline
   once you have left the top. Everything here is disabled under reduced motion.
   =========================================================================== */

/* the header stays, and gains a hairline once the page has moved */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,
  background .25s ease}
.nav.is-stuck{border-bottom-color:rgba(11,11,13,.14)}
@supports not (backdrop-filter:blur(2px)){.nav{background:var(--w)}}

/* over a black section the bar turns with it, rather than going grey */
.nav.on-dark{background:rgba(11,11,13,.82)}
.nav.on-dark .brand b{color:var(--w)}
.nav.on-dark .nav-r a:not(.btn){color:var(--gw-1)}
.nav.on-dark .nav-r a:not(.btn):hover{color:var(--w)}
.nav.on-dark.is-stuck{border-bottom-color:rgba(255,255,255,.16)}
@supports not (backdrop-filter:blur(2px)){.nav.on-dark{background:var(--k)}}
.nav .brand b,.nav-r a{transition:color .25s ease}

/* children of a revealed block arrive in order, not all at once */
.stag > *{opacity:0;transform:translateY(12px);
  transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.stag.in > *{opacity:1;transform:none}
html:not(.js) .stag > *{opacity:1;transform:none}

/* counted figures hold their width so nothing shifts while they run */
.fig .v,.mfig .v{font-variant-numeric:tabular-nums}

/* hover: things that can be acted on move slightly towards you */
.file,.card,.mchip{transition:transform .2s ease,border-color .2s ease,
  background .2s ease}
.file:hover{transform:translateY(-2px);border-color:rgba(255,75,43,.75)}
.card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.34)}
.mchip:hover{border-color:var(--o);color:var(--w)}
.pick{position:relative}
.pick::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:3px;background:var(--o);transform:scaleY(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.pick:hover::after{transform:scaleY(1)}
.pick[aria-selected=true]::after{transform:scaleY(0)}

/* a link that is really a link */
.note a,.fine a,.foot-line a{background-image:linear-gradient(var(--o),var(--o));
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .28s cubic-bezier(.4,0,.2,1);text-decoration:none;
  padding-bottom:2px}
.note a:hover,.fine a:hover,.foot-line a:hover{background-size:100% 1.5px}
.foot-line a{text-decoration:none}

/* the primary button leans forward */
.btn{position:relative;overflow:hidden}
.hero .cta .btn:not(.btn-2)::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120px 60px at var(--mx,50%) 50%,
  rgba(255,255,255,.28),transparent 70%);opacity:0;transition:opacity .3s ease;
  pointer-events:none}
.hero .cta .btn:not(.btn-2):hover::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .stag > *{opacity:1;transform:none;transition:none}
  .pick::after,.file,.card,.mchip,.note a,.fine a,.foot-line a{transition:none}
}

/* ===========================================================================
   INTEREST CONTROLS
   The email field, the optional select and the button. Nothing submits.
   =========================================================================== */
.form-opt{margin-top:16px}
.form-opt label{margin-bottom:7px}
.sel{position:relative;display:block;flex:1 1 100%;min-width:0}
.sel::after{content:"";position:absolute;right:22px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--gw-2);border-bottom:2px solid var(--gw-2);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sec-w .sel::after{border-color:var(--g-2)}
.form select{appearance:none;-webkit-appearance:none;width:100%;
  font-family:var(--sans);font-size:1rem;padding:14px 46px 14px 16px;
  border-radius:100px;border:1.5px solid var(--line-i);background:#17171B;
  color:var(--w);cursor:pointer;box-sizing:border-box}
.sec-w .form select{background:var(--w);color:var(--k);
  border-color:rgba(11,11,13,.34)}
.form select:focus-visible{outline:2px solid var(--o);outline-offset:2px}
.form-act{margin:20px 0 0}


/* ===========================================================================
   ADDITIONS FOR THE LIVE SITE
   Three jobs, none of which changes the approved design:
   1. Utility classes that reproduce the former inline style attributes exactly,
      so the content security policy needs no style exceptions.
   2. Page furniture for the confirmation and privacy pages.
   3. A message box for the privacy request form.
   Class selectors are doubled where an inline style previously won on
   specificity, so the rendered result is identical.
   =========================================================================== */
.u-mb16.u-mb16{margin-bottom:16px}
.u-mt14.u-mt14{margin-top:14px}
.u-mt16.u-mt16{margin-top:16px}
.u-mt22.u-mt22{margin-top:22px}
.u-note.u-note{margin:0 0 14px;font-size:.92rem;color:var(--gw-1)}
.w-16.w-16{width:16%}
.w-18.w-18{width:18%}
.w-68.w-68{width:68%}
.w-79.w-79{width:79%}
.w-100.w-100{width:100%}

/* a submitting button must match the control it replaces to the pixel */
button.btn{line-height:1.58;cursor:pointer;-webkit-appearance:none;appearance:none}

/* the optional message box on the privacy request form */
.form textarea{flex:1 1 100%;box-sizing:border-box;min-width:0;
  font-family:var(--sans);font-size:1rem;line-height:1.5;padding:14px 16px;
  border-radius:18px;border:1.5px solid var(--line-i);background:#17171B;
  color:var(--w);min-height:110px;resize:vertical}
.sec-w .form textarea{background:var(--w);color:var(--k);
  border-color:rgba(11,11,13,.34)}
.form textarea::placeholder{color:var(--gw-2)}
.sec-w .form textarea::placeholder{color:var(--g-2)}
.form textarea:focus-visible{outline:2px solid var(--o);outline-offset:2px}

/* confirmation page */
.done{max-width:34em}
.done .btn{margin-top:8px}

/* privacy notice page: one balanced reading column, centred */
.legal-page .legal-col{max-width:800px;margin:0 auto}
.legal-page .head{max-width:none}
.legal-page h1{font-size:clamp(1.85rem,3.1vw,2.5rem);line-height:1.06}
.legal-page .lede{max-width:none;font-size:1.05rem;margin-top:16px}
.legal{max-width:none}
.legal h2{font-size:clamp(1.2rem,1.7vw,1.45rem);letter-spacing:-.02em;
  margin:34px 0 10px}
.legal h2:first-of-type{margin-top:30px}
.legal p{margin:0 0 .85em;color:var(--g-1);font-size:17px;line-height:1.6}
.legal ul{margin:0 0 1em;padding-left:1.1em}
.legal li{margin:0 0 .4em;font-size:17px;line-height:1.6}
.legal a{color:var(--o-ink)}
.legal .upd{font-size:.9rem;color:var(--g-2);margin-top:28px}

/* the privacy request panel */
.pc-box{max-width:600px;margin:36px 0 4px;padding:26px 28px 22px;
  border:1px solid var(--line);border-radius:16px;background:#FAFAFA}
.pc-box h2{margin-top:0}
.pc-box .form{max-width:none}
.pc-box .form-act{margin-bottom:0}

/* preview-only banner. Present in the preview copy, never in the live site. */
.pv-bar{margin:0;background:var(--o);color:var(--k);font-family:var(--sans);
  font-size:13px;font-weight:700;letter-spacing:.04em;text-align:center;
  padding:11px 16px;line-height:20px}