/* ==========================================================================
   True Auto Growth
   Instrument structure, cinematic imagery.

   The rules that keep this from drifting back to template:
   - Space Grotesk and JetBrains Mono only. Never Inter, never system-ui first.
   - Every section label is mono, uppercase, letterspaced. That is the spine.
   - Grain sits over the whole page. Without it a dark site reads as flat black.
   - Sections alternate: grid surface, then flat, then a full-bleed image band.
     Three sections of the same rhythm in a row is the failure mode.
   - Data goes in panels with label/value rows, not in bordered cards.
   ========================================================================== */

:root{
  --black:#08090C; --char:#0E1015; --char-2:#141821; --char-3:#1B202B;
  --line:#232A36; --line-2:#171B23;
  --bone:#F4F3F0; --bone-2:#AEB4BF; --mute:#868E9C;
  --blue:#0E47FE; --blue-lt:#6D95FF; --blue-dk:#0A34C4;
  --disp:'Archivo',system-ui,sans-serif;
  --ff:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1140px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.62,.05,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"kern" 1,"liga" 1,"tnum" 1;
  font-family:var(--ff);background:var(--black);color:var(--bone);
  font-size:17px;line-height:1.62;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;position:relative;
}

/* film grain. the cheapest thing that stops dark looking flat */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
.mast-logo img,.f-logo img{width:auto}

h1,h2{font-family:var(--disp);font-weight:900;letter-spacing:-.05em;
  line-height:.88;text-transform:uppercase}
h1{font-size:clamp(44px,8.2vw,116px)}
h2{font-size:clamp(30px,4.6vw,62px);line-height:.92}
h3,h4{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1.06;
  text-transform:none}
h3{font-size:20px}
a{color:inherit;text-decoration:none}
strong,b{font-weight:700}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(24px,4vw,52px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;
  padding:12px 20px;z-index:10000;font-family:var(--mono);font-size:12px}
.skip:focus{left:0}

/* ---- mono label. the spine of the whole system ---- */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue-lt);
  display:flex;align-items:center;gap:12px}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--blue);flex:0 0 26px}
.eyebrow.plain{color:var(--mute)}
.eyebrow.plain::before{background:var(--line)}
.head.wide .eyebrow,.center .eyebrow{justify-content:flex-start}

.lede{font-size:19px;color:var(--bone-2);line-height:1.68;margin-top:26px;max-width:58ch}
.fine{font-size:14px;color:var(--mute);line-height:1.6;font-family:var(--mono);
  letter-spacing:-.01em}

/* ---- buttons. squared, mono, no pill ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 24px;border:1px solid transparent;border-radius:2px;
  transition:background .42s var(--ease),border-color .42s var(--ease),color .42s var(--ease);
  cursor:pointer;position:relative}
.btn-p{background:var(--blue);color:#fff}
.btn-p:hover{background:var(--blue-dk)}
.btn-s{border-color:var(--line);color:var(--bone);background:transparent}
.btn-s:hover{border-color:var(--blue-lt);color:var(--blue-lt)}
.btn-sm{padding:11px 18px;font-size:11px}
.btn-lg{padding:17px 30px}
.btn .ar{transition:transform .42s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ==========================================================================
   NAV. Type as interface.

   No bar, no brackets, no floating index. A poster does not have a chrome
   layer, it has type. Logo left, one heavy word right, and a full-screen
   takeover behind it.

   The word is set at 22px Archivo 900 uppercase, which is far more visible
   than a hamburger icon. That is the discoverability answer.
   ========================================================================== */

.mast{position:fixed;top:0;left:0;right:0;z-index:950;
  display:flex;align-items:center;gap:26px;
  padding:clamp(22px,2.8vw,34px) clamp(20px,3vw,44px);pointer-events:none}
.mast>*{pointer-events:auto}
.mast-logo img{height:28px;transition:height .6s var(--ease),opacity .3s}
.mast-logo:hover img{opacity:.78}
body.scrolled .mast-logo img{height:23px}

.mast-status{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--mute);
  transition:opacity .6s var(--ease)}
.mast-status b{width:6px;height:6px;border-radius:50%;background:var(--blue-lt);flex:0 0 6px}
body.scrolled .mast-status{opacity:0;pointer-events:none}

.mast-menu{margin-left:auto;background:none;border:0;cursor:pointer;
  font-family:var(--disp);font-weight:900;font-size:clamp(18px,1.9vw,23px);
  letter-spacing:-.04em;text-transform:uppercase;color:var(--bone);
  padding:2px 0 5px;position:relative;transition:color .42s var(--ease)}
.mast-menu::after{content:'';position:absolute;left:0;bottom:0;width:100%;
  height:3px;background:var(--blue);transform:scaleX(0);transform-origin:right;
  transition:transform .62s var(--ease)}
.mast-menu:hover::after,body.menu-open .mast-menu::after{transform:scaleX(1);
  transform-origin:left}
.mast-menu:focus-visible{outline:2px solid var(--blue-lt);outline-offset:6px}
body.menu-open .mast-menu{color:var(--blue-lt)}
body.menu-open{overflow:hidden}

.overlay{position:fixed;inset:0;z-index:940;background-color:var(--black);
  visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);
  transition:opacity .42s var(--ease),clip-path .58s var(--ease),visibility 0s .6s}
body.menu-open .overlay{visibility:visible;opacity:1;clip-path:inset(0 0 0 0);
  transition:opacity .66s var(--ease),clip-path .62s var(--ease),visibility 0s}
.overlay::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 18% 30%,rgba(14,71,254,.10),transparent 66%)}
.ov-inner{position:relative;z-index:1;height:100%;max-width:1280px;margin:0 auto;
  padding:clamp(100px,14vh,170px) clamp(28px,4vw,48px) clamp(40px,6vh,70px);
  display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(30px,6vw,80px);
  align-content:center;overflow-y:auto}
.ov-nav{display:flex;flex-direction:column}
.ov-nav a{display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);
  padding:clamp(9px,1.4vh,16px) 0;border-bottom:1px solid var(--line-2);
  font-family:var(--disp);font-weight:900;letter-spacing:-.05em;
  text-transform:uppercase;
  font-size:clamp(30px,5.4vw,64px);line-height:.92;color:var(--bone-2);
  opacity:0;transform:translateY(22px);
  transition:color .44s var(--ease),opacity .5s var(--ease),transform .5s var(--ease)}
body.menu-open .ov-nav a{opacity:1;transform:none;
  transition-delay:calc(.2s + var(--i) * .085s)}
.ov-nav a i{font-style:normal;font-family:var(--mono);font-weight:700;
  font-size:clamp(10px,1vw,13px);letter-spacing:.1em;color:var(--line);flex:0 0 auto}
.ov-nav a:hover,.ov-nav a[aria-current]{color:var(--bone)}
.ov-nav a:hover i,.ov-nav a[aria-current] i{color:var(--blue-lt)}
.ov-side{align-self:center;opacity:0;transform:translateY(26px);
  transition:opacity .5s var(--ease) .34s,transform .5s var(--ease) .34s}
body.menu-open .ov-side{opacity:1;transform:none}

.ov-live{display:flex;align-items:center;gap:11px;font-family:var(--mono);
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone)}
.ov-live b{width:7px;height:7px;border-radius:50%;background:var(--blue-lt);flex:0 0 7px}

.ov-facts{list-style:none;margin-top:28px;border-top:1px solid var(--line)}
.ov-facts li{font-family:var(--disp);font-weight:800;
  font-size:clamp(15px,1.5vw,19px);letter-spacing:-.025em;line-height:1.2;
  color:var(--bone-2);padding:16px 0;border-bottom:1px solid var(--line-2);
  display:flex;align-items:baseline;gap:12px}
.ov-facts li::before{content:'';width:14px;height:2px;background:var(--blue);
  flex:0 0 14px;transform:translateY(-5px)}

.ov-contact{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.ov-lbl{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.ov-cta{margin-top:26px;width:100%;justify-content:center}
.big-mail{display:inline-block;margin-top:24px;font-family:var(--disp);
  font-weight:800;font-size:clamp(17px,2vw,24px);letter-spacing:-.03em;
  color:var(--blue-lt);border-bottom:2px solid var(--line);padding-bottom:5px;
  transition:border-color .42s var(--ease);word-break:break-word}
.big-mail:hover{border-bottom-color:var(--blue-lt)}
.ov-mail{display:inline-block;font-family:var(--mono);
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--blue-lt);
  border-bottom:2px solid var(--line);padding-bottom:4px;
  transition:border-color .42s var(--ease);word-break:break-word}
.ov-mail:hover{border-bottom-color:var(--blue-lt)}

@media(prefers-reduced-motion:reduce){
  .overlay,.ov-nav a,.ov-side{transition-duration:.01ms!important;
    transition-delay:0s!important}
  .ov-nav a,.ov-side{opacity:1;transform:none}
  }

/* body copy must clear the index */
@media(max-width:680px){
  .mast-status{display:none}
}

/* ---- breadcrumbs ---- */
.crumbs{padding:16px 0;border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute);
  text-transform:uppercase}
.crumbs .wrap{display:flex;gap:10px;align-items:center}
.crumbs a:hover{color:var(--blue-lt)}

/* ==========================================================================
   SECTIONS. Alternating surfaces are what stop the page reading as one long
   template. .gridbg is the instrument surface, .band is the cinematic one.
   ========================================================================== */

.sec{padding:clamp(88px,11vw,172px) 0;border-bottom:1px solid var(--line-2);
  position:relative}
.sec.tight{padding:clamp(60px,7vw,110px) 0}
.sec.char{background:var(--char)}
.sec.gridbg{background-color:var(--char)}
.sec.gridbg>.wrap{position:relative;z-index:1}

.head{max-width:56ch}
.head.wide{max-width:none}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,74px);align-items:start}
.split.center{align-items:center}
.grid{display:grid;gap:14px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}

/* ==========================================================================
   HERO. Editorial split: type left, one real photograph right.

   Sentence case here and only here. Every section heading below is uppercase
   Archivo 900, so a lowercase hero reads as the masthead of the page rather
   than the loudest thing on it. That contrast is the whole point.
   ========================================================================== */

.hero{padding:clamp(150px,20vh,232px) 0 0;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 8% 18%,rgba(14,71,254,.13),transparent 66%)}
.hero>*{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,66px);align-items:center;
  padding-bottom:clamp(52px,7vw,92px)}

.hero-h1{font-family:var(--disp);font-weight:800;text-transform:none;
  font-size:clamp(32px,4.6vw,61px);line-height:1.04;letter-spacing:-.036em;
  margin-top:26px;max-width:19ch;text-wrap:balance}
.hero-h1 em{font-style:normal;color:var(--blue-lt)}
.hero .lede{margin-top:26px;max-width:52ch}
.hero .cta-row{margin-top:32px}
.hero-trust{margin-top:24px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.04em;color:var(--mute);line-height:1.75;max-width:60ch}

.hero-media{position:relative}
.hero-media picture{display:block;position:relative}
.hero-media img{width:100%;aspect-ratio:1/1;object-fit:cover;
  filter:saturate(.88) contrast(1.04);border:1px solid var(--line)}
.hero-cap{margin-top:16px;padding-left:16px;border-left:2px solid var(--blue);
  font-size:14.5px;color:var(--bone-2);line-height:1.6;max-width:44ch}
.hero-cap b{display:block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}

/* ---- proof strip. four typographic facts, qualifier attached ---- */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);
  background:var(--char)}
.proof-row{display:grid;grid-template-columns:repeat(4,1fr)}
.pf{padding:32px 26px 30px 0;border-right:1px solid var(--line-2)}
.pf:last-child{border-right:0}
.pf-v{display:block;font-family:var(--disp);font-weight:900;letter-spacing:-.045em;
  font-size:clamp(21px,2.5vw,34px);line-height:1}
.pf-hl .pf-v{color:var(--blue-lt)}
.pf-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-top:12px;line-height:1.55;
  max-width:24ch}
.proof-note{font-family:var(--mono);font-size:11.5px;color:var(--mute);
  line-height:1.7;padding:20px 0 26px;border-top:1px solid var(--line-2);
  max-width:80ch;letter-spacing:-.01em}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;align-items:start;gap:34px}
  .hero-media{order:-1}
  .hero-media img{aspect-ratio:16/10}
  .proof-row{grid-template-columns:repeat(2,1fr)}
  .pf{padding:24px 20px 22px 0}
  .pf:nth-child(2){border-right:0}
  .pf:nth-child(1),.pf:nth-child(2){border-bottom:1px solid var(--line-2)}
}
@media(max-width:560px){
  .proof-row{grid-template-columns:1fr}
  .pf{border-right:0;border-bottom:1px solid var(--line-2);padding:20px 0}
  .pf:last-child{border-bottom:0}
}

/* interior page headers share the hero grid, at lower volume */
.phero{padding:clamp(172px,22vh,258px) 0 clamp(56px,7vw,92px);
  border-bottom:1px solid var(--line-2);position:relative;overflow:hidden}
.phero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 14% 40%,rgba(14,71,254,.09),transparent 68%)}
.phero .wrap{position:relative;z-index:1}
.phero h1{margin-top:18px;max-width:15ch}

/* ---- full blue field. the swiss beat ---- */
.fld{background:var(--blue);color:#fff;padding:clamp(84px,10vw,152px) 0;
  border-bottom:1px solid var(--line-2)}
.fld-k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:20px}
.fld h2{max-width:15ch;color:#fff}
.fld p{margin-top:20px;max-width:52ch;font-size:17px;color:rgba(255,255,255,.9)}

/* ---- full-bleed image band. the cinematic beat between instrument sections ---- */
.band{position:relative;height:clamp(240px,34vw,420px);overflow:hidden;
  border-bottom:1px solid var(--line-2)}
.band img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.05)}
.band::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,9,12,.88) 0%,rgba(8,9,12,.35) 55%,rgba(8,9,12,.72) 100%)}
.band .over{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.band .over .wrap{width:100%}
.band h2{max-width:16ch;font-size:clamp(24px,3.2vw,42px)}
.band p{margin-top:14px;max-width:44ch;color:var(--bone-2);font-size:16px}

/* ==========================================================================
   DATA PANELS. Replaces the bordered-card grid that made it look templated.
   ========================================================================== */

.panel{border:1px solid var(--line);background:rgba(20,24,33,.66)}
.panel .prow{display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;padding:15px 20px;border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em}
.panel .prow:last-child{border-bottom:0}
.panel .prow .k{color:var(--mute);text-transform:uppercase;font-size:10.5px;
  letter-spacing:.14em;flex:0 0 auto}
.panel .prow .v{color:var(--bone);text-align:right}
.panel .prow .v.hl{color:var(--blue-lt)}

/* numbered rows */
.rows{border-top:1px solid var(--line-2)}
.row{display:grid;grid-template-columns:56px 1fr;gap:24px;
  padding:32px 0;border-bottom:1px solid var(--line-2);
  transition:background .42s var(--ease)}
.row:hover{background:rgba(20,24,33,.4)}
.row .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--blue-lt);
  letter-spacing:.1em;padding-top:5px}
.row p{font-size:15.5px;color:var(--bone-2);margin-top:7px;max-width:62ch}
.row .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-top:11px}

/* cells, kept minimal: no heavy border, a top rule instead */
.cell{padding:24px 0 0;border-top:1px solid var(--line)}
.cell .n{font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.cell h3{margin-top:10px}
.cell p{font-size:14.5px;color:var(--bone-2);margin-top:9px}
.cell .ctrl{color:var(--bone);font-size:15px;margin-top:9px}
.cell .cad{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.06em}
.cell ul{list-style:none;margin-top:14px}
.cell li{font-family:var(--mono);font-size:11.5px;color:var(--bone-2);
  padding:6px 0 6px 16px;position:relative;letter-spacing:-.01em}
.cell li::before{content:'';position:absolute;left:0;top:13px;width:6px;height:1px;
  background:var(--blue)}

/* flow */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2)}
.flow>div{background:var(--black);padding:16px 12px}
.flow .s{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;
  color:var(--blue-lt)}
.flow .t{font-family:var(--disp);font-size:14px;font-weight:700;margin-top:8px;
  letter-spacing:-.025em;line-height:1.15}

/* big stat */
.stat{font-family:var(--disp);font-weight:700;letter-spacing:-.05em;
  font-size:clamp(50px,10vw,132px);display:flex;align-items:baseline;gap:.12em;
  flex-wrap:wrap;line-height:.94}
.stat .to{color:var(--blue-lt)}
.stat .ar{font-size:.3em;color:var(--mute)}

.pull{margin-top:26px;padding-left:20px;border-left:2px solid var(--blue)}
.pull p{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.03em;
  line-height:1.25}
.note{margin-top:26px;padding:18px 20px;border:1px solid var(--line);
  background:rgba(20,24,33,.5)}
.note p{font-size:14.5px;color:var(--bone-2);margin-top:9px}

/* ---- pricing ---- */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);margin-top:clamp(30px,4vw,50px)}
.pkg{padding:40px 32px;border-right:1px solid var(--line);position:relative}
.pkg:last-child{border-right:0}
.pkg.feat{background:var(--char-2)}
.pkg.feat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--blue)}
.pkg .stage{font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.pkg h3{font-size:26px;margin-top:12px}
.pkg .price{font-family:var(--disp);font-size:38px;font-weight:700;
  letter-spacing:-.045em;margin-top:16px;line-height:1}
.pkg .price small{display:block;font-family:var(--mono);font-size:10.5px;
  font-weight:400;color:var(--mute);letter-spacing:.06em;margin-top:8px}
.pkg .for{font-size:14.5px;color:var(--bone-2);margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line-2)}
.pkg ul{list-style:none;margin-top:18px}
.pkg li{font-family:var(--mono);font-size:11.5px;color:var(--bone-2);
  padding:5px 0 5px 16px;position:relative;letter-spacing:-.01em;line-height:1.5}
.pkg li::before{content:'';position:absolute;left:0;top:12px;width:6px;height:1px;
  background:var(--blue)}
.pkg .note{font-size:12.5px;margin-top:18px;padding:14px 0 0;border:0;
  border-top:1px solid var(--line-2);background:none;color:var(--mute)}
.pkg .btn{margin-top:22px;width:100%;justify-content:center}

.plist{border-top:1px solid var(--line-2);margin-top:26px}
.plist .r{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.plist .r b{font-weight:400;font-size:15px}
.plist .r span{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--blue-lt)}
.plist .r em{font-style:normal;font-family:var(--mono);font-size:11px;
  color:var(--mute);flex-basis:100%;letter-spacing:.04em}

.terms{list-style:none;margin-top:22px}
.terms li{font-size:14.5px;color:var(--bone-2);padding:8px 0 8px 18px;
  position:relative}
.terms li::before{content:'';position:absolute;left:0;top:16px;width:7px;height:1px;
  background:var(--blue)}

/* ---- diagnostic, as a readout ---- */
.diag{border:1px solid var(--line);background:rgba(20,24,33,.62)}
.diag-head{padding:20px 22px;border-bottom:1px solid var(--line)}
.diag-head h3{font-size:17px}
.diag-head p{font-family:var(--mono);font-size:11.5px;color:var(--mute);margin-top:8px;
  letter-spacing:-.01em}
.diag-item{display:flex;gap:13px;align-items:flex-start;padding:14px 22px;
  border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .4s}
.diag-item:hover{background:rgba(35,42,54,.4)}
.diag-item input{position:absolute;opacity:0;width:0;height:0}
.diag-box{width:15px;height:15px;flex:0 0 15px;border:1px solid var(--line);
  margin-top:3px;position:relative;transition:background .4s,border-color .4s}
.diag-item input:checked+.diag-box{background:var(--blue);border-color:var(--blue)}
.diag-item input:checked+.diag-box::after{content:'';position:absolute;left:4px;top:1px;
  width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.diag-item input:focus-visible+.diag-box{outline:2px solid var(--blue-lt);outline-offset:2px}
.diag-item .t{font-size:14.5px;color:var(--bone-2);line-height:1.5}
.diag-item input:checked~.t{color:var(--bone)}
.diag-foot{padding:20px 22px;background:rgba(8,9,12,.5)}
.diag-count{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}
.diag-count b{color:var(--blue-lt);font-size:15px}
.diag-out{margin-top:14px}
.diag-out h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-lt)}
.diag-out p{font-size:14.5px;color:var(--bone-2);margin-top:9px}
.diag-out .btn{margin-top:16px}
.diag-idle{font-family:var(--mono);font-size:12px;color:var(--mute)}

.diag-list{border-top:0}
.nf{font-family:var(--mono);font-size:clamp(60px,14vw,150px);font-weight:700;
  letter-spacing:-.04em;color:var(--line);line-height:1;display:block}

/* ---- Q and A ---- */
.qas{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid var(--line);margin-top:clamp(28px,4vw,44px)}
.qa{padding:36px 34px 36px 0;border-bottom:1px solid var(--line-2)}
.qa:nth-child(odd){border-right:1px solid var(--line-2);padding-right:34px}
.qa:nth-child(even){padding-left:34px}
.qa h3{font-size:17px;line-height:1.28}
.qa p{font-size:14.5px;color:var(--bone-2);margin-top:11px}

/* ---- reviews ---- */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;border:1px solid var(--line);margin-top:clamp(26px,4vw,40px)}
.rev{padding:36px 34px;border-right:1px solid var(--line)}
.rev:last-child{border-right:0}
.rev p{font-size:16px;color:var(--bone);line-height:1.58}
.rev cite{display:block;margin-top:16px;font-style:normal;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* ---- forms ---- */
.form-card{border:1px solid var(--line);background:rgba(20,24,33,.6);padding:28px 26px}
.tally-wrap{margin-top:18px}
.field{margin-top:16px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;background:var(--black);
  border:1px solid var(--line);color:var(--bone);padding:13px 14px;
  font-family:var(--ff);font-size:15px;border-radius:2px}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;
  border-color:var(--blue-lt)}
.field input::placeholder,.field textarea::placeholder{color:var(--mute)}
.field .hint{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:6px}
.form-foot{font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:16px}

/* ---- accordion ---- */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line-2)}
.acc summary{padding:18px 0;cursor:pointer;font-family:var(--disp);font-size:16px;
  font-weight:700;letter-spacing:-.02em;list-style:none;display:flex;
  justify-content:space-between;gap:16px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-family:var(--mono);color:var(--blue-lt);
  font-size:18px;flex:0 0 auto}
.acc details[open] summary::after{content:'\2013'}
.acc details p{font-size:14.5px;color:var(--bone-2);padding-bottom:20px;max-width:70ch}

/* ---- figures, prose ---- */
.figure{border:1px solid var(--line)}
.figure img{width:100%}
.figure figcaption{padding:13px 18px;font-family:var(--mono);font-size:11px;
  color:var(--mute);border-top:1px solid var(--line);letter-spacing:.04em}
.prose p{font-size:16.5px;color:var(--bone-2);margin-top:16px;max-width:72ch}
.prose h2{margin-top:44px}
.prose h3{margin-top:30px}
.prose ul{margin-top:14px;list-style:none}
.prose li{font-size:16px;color:var(--bone-2);padding:6px 0 6px 18px;position:relative}
.prose li::before{content:'';position:absolute;left:0;top:15px;width:7px;height:1px;
  background:var(--blue)}
.code{font-family:var(--mono);font-size:13px;background:var(--char-2);
  border:1px solid var(--line);padding:14px 16px;overflow-x:auto}

/* ---- guarantee ---- */
.gtee{border:1px solid var(--blue);background:rgba(14,71,254,.06);padding:40px 38px}
.gtee-line{font-family:var(--disp);font-size:clamp(19px,2.1vw,25px);font-weight:700;
  letter-spacing:-.03em;line-height:1.28;color:var(--bone)}
.gtee-why{font-family:var(--mono);font-size:12px;color:var(--bone-2);margin-top:20px;
  padding-top:18px;border-top:1px solid rgba(109,149,255,.28);letter-spacing:-.01em;
  line-height:1.6}

/* ---- who this is not for ---- */
.nf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid var(--line);margin-top:clamp(28px,4vw,44px)}
.nf-row{padding:36px 36px 36px 0;border-bottom:1px solid var(--line-2)}
.nf-row:nth-child(odd){border-right:1px solid var(--line-2);padding-right:36px}
.nf-row:nth-child(even){padding-left:36px}
.nf-row h3{font-size:17px;line-height:1.26;color:var(--bone-2)}
.nf-row h3::before{content:'\2717';font-family:var(--mono);color:var(--mute);
  font-size:13px;margin-right:11px}
.nf-row p{font-size:14.5px;color:var(--bone-2);margin-top:11px}

/* ---- closing CTA ---- */
.close{padding:clamp(96px,12vw,190px) 0;text-align:center;
  border-bottom:1px solid var(--line-2);position:relative;background:var(--char)}
.close::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 70% at 50% 50%,rgba(14,71,254,.09),transparent 70%)}
.close .wrap{position:relative;z-index:1}
.close .eyebrow{justify-content:center}
.close h2{margin-top:16px;max-width:22ch;margin-left:auto;margin-right:auto}
.close .lede{margin:18px auto 0;text-align:center}
.close .cta-row{justify-content:center}

/* ---- footer ---- */
.site-footer{padding:clamp(52px,6vw,84px) 0 34px;background:var(--char)}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
.fabout p{margin-top:16px;max-width:38ch;font-size:14.5px;color:var(--mute)}
.f-logo img{height:26px}
.fh{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:9px}
.site-footer li a{font-size:14px;color:var(--bone-2);transition:color .4s}
.site-footer li a:hover{color:var(--blue-lt)}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-2);
  display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--mute)}
.fbot .r{display:flex;gap:20px}
.fbot a:hover{color:var(--blue-lt)}

/* ==========================================================================
   MOTION. Sections rise in on first view. A large part of why expensive
   sites feel expensive. Disabled entirely for reduced-motion.
   ========================================================================== */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1080px){
  .flow{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .pkgs{grid-template-columns:1fr}
  .pkg{border-right:0;border-bottom:1px solid var(--line)}
  .pkg:last-child{border-bottom:0}
  .grid.g3{grid-template-columns:1fr}
  .qas{grid-template-columns:1fr}
  .qa:nth-child(odd){border-right:0;padding-right:0}
  .qa:nth-child(even){padding-left:0}
  .nf-grid{grid-template-columns:1fr}
  .nf-row:nth-child(odd){border-right:0;padding-right:0}
  .nf-row:nth-child(even){padding-left:0}
  .revs{grid-template-columns:1fr}
  .rev{border-right:0;border-bottom:1px solid var(--line)}
  .rev:last-child{border-bottom:0}
}
@media(max-width:680px){
  .ov-inner{grid-template-columns:1fr;gap:34px;align-content:start}
  .ov-side{align-self:start}
  .wrap{padding:0 20px}
  .grid.g2{grid-template-columns:1fr}
  .flow{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr}
  .row{grid-template-columns:38px 1fr;gap:12px}
  .band{height:220px}
}

@media(max-width:900px){
  .hero-data .wrap{grid-template-columns:repeat(2,1fr)}
  .hero-data>.wrap>div:nth-child(2){border-right:0}
  .hero-data>.wrap>div:nth-child(1),.hero-data>.wrap>div:nth-child(2){
    border-bottom:1px solid var(--line-2)}
}
@media(max-width:560px){
  .hero-data .wrap{grid-template-columns:1fr}
  .hero-data>.wrap>div{border-right:0;border-bottom:1px solid var(--line-2)}
  .hero-data>.wrap>div:last-child{border-bottom:0}
  .mono-h1 em{-webkit-text-stroke-width:1px}
}


/* ==========================================================================
   CRAFT. The details that separate expensive from competent. None of these
   are noticed individually; all of them are noticed together.
   ========================================================================== */

::selection{background:var(--blue);color:#fff}
::-moz-selection{background:var(--blue);color:#fff}

:focus-visible{outline:2px solid var(--blue-lt);outline-offset:4px;
  border-radius:1px}

html{scrollbar-color:var(--line) var(--black);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--line);border:3px solid var(--black)}
::-webkit-scrollbar-thumb:hover{background:var(--mute)}

/* display type gets optical tracking. big type needs less, small needs more. */
.stat,.hv,.price,.prc{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}
h1{text-wrap:balance}
h2,h3{text-wrap:balance}
.lede,.row p,.qa p,.nf-row p{text-wrap:pretty}

/* links inside prose get a considered underline, not a default one */
.prose a,.row p a,.qa p a{color:var(--blue-lt);
  border-bottom:1px solid rgba(109,149,255,.32);
  padding-bottom:1px;transition:border-color .42s var(--ease)}
.prose a:hover,.row p a:hover,.qa p a:hover{border-bottom-color:var(--blue-lt)}

/* nothing should jump. images reserve their space. */
img{background:var(--char-2)}


/* ==========================================================================
   STICKY CTA. Phones only, after a third of the page. A shop owner who is
   convinced two thirds down should not have to scroll back up to act.
   ========================================================================== */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:920;display:none;
  align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;background:rgba(8,9,12,.94);
  backdrop-filter:blur(14px) saturate(1.4);
  border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .6s var(--ease)}
.stickycta.on{transform:none}
.stickycta span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}
@media(max-width:680px){
  .stickycta{display:flex}
  body{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* accordion answers, sized for scanning rather than reading */
.acc summary{font-family:var(--disp);font-weight:800;font-size:17px;
  letter-spacing:-.025em;padding:22px 0;text-transform:none}
.acc details p{font-size:15.5px;line-height:1.68;padding-bottom:26px;max-width:72ch}


/* ==========================================================================
   BLOG. Footer-only ranking asset. Rows, not cards.
   ========================================================================== */
.posts{border-top:1px solid var(--line)}
.post-row{display:grid;grid-template-columns:120px 1fr 170px;gap:28px;
  align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line-2);
  transition:background .42s var(--ease)}
.post-row:hover{background:rgba(20,24,33,.4)}
.pr-date{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mute)}
.pr-t{font-family:var(--disp);font-weight:800;font-size:clamp(19px,2vw,26px);
  letter-spacing:-.03em;line-height:1.14;color:var(--bone)}
.pr-d{grid-column:2;font-size:15px;color:var(--bone-2);margin-top:-14px;max-width:64ch}
.pr-go{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-lt);text-align:right;grid-row:1}
.post-row:hover .pr-go .ar{transform:translateX(3px)}
.pr-go .ar{display:inline-block;transition:transform .42s var(--ease)}

.article h2{font-size:clamp(21px,2.3vw,30px);text-transform:none;
  letter-spacing:-.03em;line-height:1.12;margin-top:48px}
.article h2:first-child{margin-top:0}
.article p{font-size:17px;line-height:1.72;color:var(--bone-2);margin-top:18px;
  max-width:70ch}
.art-foot{margin-top:56px;padding-top:30px;border-top:1px solid var(--line)}
.art-foot .btn{margin-top:16px}

@media(max-width:760px){
  .post-row{grid-template-columns:1fr;gap:8px;padding:26px 0}
  .pr-d{grid-column:1;margin-top:4px}
  .pr-go{grid-row:auto;text-align:left;margin-top:8px}
}


/* ==========================================================================
   ==========================================================================
   REBUILD, 2026-09. Light surfaces, the operating path, the four layers,
   the stage chapters and the native application.

   The one structural idea worth knowing before editing any of this: a light
   section does not restyle its children. It swaps the colour tokens and lets
   every existing component recolour itself. Add a new component once, in the
   dark palette, and it works on both surfaces for free.
   ==========================================================================
   ========================================================================== */

:root{
  --paper:#F2F0EB; --paper-2:#E7E3DB;
  --ink:#12141A; --ink-2:#4A5060; --ink-3:#5F6675;
  --line-lt:#D5D0C6; --line-lt2:#E2DED5;
}

[hidden]{display:none!important}

/* ---- the light surface. token swap, not a restyle ---- */
.sec.light{
  --bone:var(--ink);
  --bone-2:var(--ink-2);
  --mute:var(--ink-3);
  --line:var(--line-lt);
  --line-2:var(--line-lt2);
  --blue-lt:var(--blue);
  --char-2:var(--paper-2);
  background:var(--paper);color:var(--ink);
  border-bottom-color:var(--line-lt)
}
.sec.light .row:hover{background:rgba(18,20,26,.035)}
.sec.light .note{background:rgba(18,20,26,.035);border-color:var(--line-lt)}
.sec.light .figure{border-color:var(--line-lt)}
.sec.light .eyebrow::before{background:var(--blue)}
.sec.light .btn-s{border-color:#BEB8AC;color:var(--ink)}
.sec.light .btn-s:hover{border-color:var(--blue);color:var(--blue)}
.sec.light img{background:var(--paper-2)}
.sec.light ::selection{background:var(--blue);color:#fff}

/* ==========================================================================
   RECOGNITION. The tone changes here, so the surface does too.
   Two columns, no red X and no green tick. Nothing on this page tells an
   owner their shop is failing.
   ========================================================================== */
.gap-grid{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(34px,5vw,72px);margin-top:clamp(34px,4.5vw,58px);align-items:start}
.gap-copy{display:flex;flex-direction:column}
.gap-copy p{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.7;color:var(--ink-2);
  margin-bottom:18px;max-width:56ch;text-wrap:pretty}
.gap-close{font-family:var(--disp);font-weight:800;font-size:clamp(19px,2.1vw,26px);
  letter-spacing:-.03em;line-height:1.24;color:var(--ink)!important;
  margin-top:auto!important;padding:28px 0 0 20px;border-left:3px solid var(--blue)}
.gap-cols{display:grid;gap:26px}
.gap-col{border-top:1px solid var(--line-lt);padding-top:18px}
.gap-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.gap-col ul{list-style:none}
.gap-col li{padding:8px 0 8px 20px;position:relative;font-size:15.5px;
  line-height:1.45;border-bottom:1px solid var(--line-lt2)}
.gap-col li:last-child{border-bottom:0}
.gap-col-a li{color:var(--ink);font-weight:500}
.gap-col-a li::before{content:'';position:absolute;left:0;top:17px;width:9px;height:2px;
  background:var(--blue)}
.gap-col-b li{color:var(--ink-3)}
.gap-col-b li::before{content:'';position:absolute;left:0;top:17px;width:9px;height:1px;
  background:#BEB8AC}
@media(max-width:900px){.gap-grid{grid-template-columns:1fr}}

/* ==========================================================================
   THE OPERATING PATH. A measured rail, read like a build sheet.

   Ticks on a single rule rather than eight boxes with arrows between them.
   Without JS the rail is inert and every panel is visible, which is also
   what keeps all eight explanations in the indexed HTML.
   ========================================================================== */
.pathbox{margin-top:clamp(38px,5vw,64px)}
.path-rail{display:none}
.pathbox.js .path-rail{display:grid;grid-template-columns:repeat(8,1fr);
  position:relative;padding-top:30px}
.path-line{position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);
  overflow:hidden}
.path-fill{display:block;height:1px;width:12.5%;background:var(--blue);
  transition:width .62s var(--ease)}
.path-tab{position:relative;background:none;border:0;cursor:pointer;text-align:left;
  padding:0 12px 4px 0;font-family:var(--mono);color:var(--mute);
  transition:color .4s var(--ease);display:block}
.path-tab::before{content:'';position:absolute;top:-30px;left:0;width:1px;height:11px;
  background:var(--line);transition:height .4s var(--ease),background .4s var(--ease)}
.path-tab i{display:block;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.14em;color:var(--line)}
.path-tab span{display:block;margin-top:8px;font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.35}
.path-tab:hover{color:var(--bone-2)}
.path-tab[aria-selected="true"]{color:var(--bone)}
.path-tab[aria-selected="true"]::before{height:20px;background:var(--blue-lt)}
.path-tab[aria-selected="true"] i{color:var(--blue-lt)}
.path-tab:focus-visible{outline:2px solid var(--blue-lt);outline-offset:4px}
.pathbox.lit .path-tab{animation:pathin .6s var(--ease) backwards}
.pathbox.lit .path-tab:nth-child(2){animation-delay:.05s}
.pathbox.lit .path-tab:nth-child(3){animation-delay:.1s}
.pathbox.lit .path-tab:nth-child(4){animation-delay:.15s}
.pathbox.lit .path-tab:nth-child(5){animation-delay:.2s}
.pathbox.lit .path-tab:nth-child(6){animation-delay:.25s}
.pathbox.lit .path-tab:nth-child(7){animation-delay:.3s}
.pathbox.lit .path-tab:nth-child(8){animation-delay:.35s}
.pathbox.lit .path-tab:nth-child(9){animation-delay:.4s}
@keyframes pathin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.path-panels{margin-top:clamp(30px,4vw,52px)}
.path-panel{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(22px,4vw,60px);padding:clamp(26px,3.4vw,42px) 0;
  border-top:1px solid var(--line)}
.pathbox.js .path-panel{border-top:0;padding-top:0;min-height:200px}
.path-panel:focus-visible{outline:2px solid var(--blue-lt);outline-offset:8px}
.pp-i{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--blue-lt)}
.pp-i em{font-style:normal;color:var(--line);margin:0 4px}
.path-panel h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  letter-spacing:-.04em;font-size:clamp(28px,4.4vw,56px);line-height:.94;margin-top:14px}
.pp-what{font-size:clamp(16px,1.5vw,18.5px);line-height:1.66;color:var(--bone-2);
  max-width:52ch}
.pp-cost{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-2);
  font-size:15px;color:var(--bone-2);max-width:52ch}
.pp-cost b{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
@media(max-width:900px){
  .path-panel{grid-template-columns:1fr;gap:14px}
  .pathbox.js .path-rail{display:none}
  .pathbox.js .path-panel{display:grid!important;border-top:1px solid var(--line);
    padding-top:clamp(26px,3.4vw,42px);min-height:0}
  .path-panel h3{font-size:clamp(24px,7vw,34px);margin-top:8px}
}

/* ==========================================================================
   THE FOUR LAYERS. An editorial sequence, not four identical cards.
   Two carry media and two do not, which is the intentional break in the grid.
   ========================================================================== */
.layer-stack{margin-top:clamp(38px,5vw,64px);border-top:1px solid var(--line)}
.layer{display:grid;grid-template-columns:90px minmax(0,1fr);
  gap:clamp(20px,3vw,44px);padding:clamp(36px,4.4vw,62px) 0;
  border-bottom:1px solid var(--line-2);align-items:start}
.layer-media-on{grid-template-columns:90px minmax(0,1.25fr) minmax(0,.9fr)}
.layer-n{font-family:var(--disp);font-weight:900;font-size:clamp(30px,3.4vw,46px);
  letter-spacing:-.05em;line-height:.9;color:#5A6478;
  -webkit-text-stroke:0;transition:color .5s var(--ease)}
.layer:hover .layer-n{color:var(--blue-lt)}
.layer-body h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(24px,3vw,40px);letter-spacing:-.045em;line-height:.96}
.layer-lead{font-family:var(--disp);font-weight:800;letter-spacing:-.028em;
  font-size:clamp(17px,1.75vw,22px);line-height:1.3;color:var(--bone);margin-top:14px;
  max-width:34ch}
.layer-body>p:not(.layer-lead){font-size:16px;line-height:1.68;color:var(--bone-2);
  margin-top:16px;max-width:60ch;text-wrap:pretty}
.layer-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.layer-list li{font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);
  border:1px solid var(--line);padding:7px 11px;border-radius:2px}
.layer-media img{width:100%;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--line);filter:saturate(.85) contrast(1.04)}
@media(max-width:1000px){
  .layer,.layer-media-on{grid-template-columns:62px minmax(0,1fr)}
  .layer-media{grid-column:2}
  .layer-media img{aspect-ratio:16/9;margin-top:8px}
}
@media(max-width:620px){
  .layer,.layer-media-on{grid-template-columns:1fr;gap:6px}
  .layer-media{grid-column:1}
  .layer-n{font-size:26px}
}

/* ==========================================================================
   CASE STUDY BLOCK
   ========================================================================== */
.case-hl{background:
  radial-gradient(ellipse 70% 60% at 78% 12%,rgba(14,71,254,.11),transparent 68%),
  var(--char)}
.case-top{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,60px);align-items:center;margin-top:clamp(30px,4vw,50px)}
.case-hl .stat{font-size:clamp(44px,8.4vw,108px)}
.case-side p{font-size:16px;line-height:1.7;color:var(--bone-2);max-width:52ch}
.case-side .fine{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);
  max-width:56ch}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(34px,4.5vw,58px);border-top:1px solid var(--line)}
.ph{padding:28px 30px 30px 0;border-right:1px solid var(--line-2);position:relative}
.ph:last-child{border-right:0}
.ph-n{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  color:var(--blue-lt)}
.ph h3{margin-top:12px;font-size:19px}
.ph p{font-size:14.5px;color:var(--bone-2);margin-top:10px;line-height:1.62}
.case-foot{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;
  margin-top:clamp(30px,4vw,48px)}
.case-foot .note{margin-top:0;max-width:66ch}
@media(max-width:900px){
  .case-top,.phases,.case-foot{grid-template-columns:1fr}
  .ph{border-right:0;border-bottom:1px solid var(--line-2);padding-right:0}
  .ph:last-child{border-bottom:0}
  .case-foot{align-items:start}
}

/* ==========================================================================
   STAGE CHAPTERS. Three chapters, not three pricing cards.
   ========================================================================== */
.stg-stack{margin-top:clamp(34px,4.5vw,56px);border-top:1px solid var(--line-lt)}
.stg{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(22px,4vw,56px);padding:clamp(30px,4vw,50px) 0;
  border-bottom:1px solid var(--line-lt2);align-items:start}
.stg-n{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-3)}
.stg-head h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  letter-spacing:-.045em;font-size:clamp(26px,3.2vw,44px);line-height:.94;margin-top:12px}
.stg-price{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.2vw,30px);
  letter-spacing:-.04em;margin-top:16px;color:var(--blue)}
.stg-price span{display:block;font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.stg-band{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:14px;
  border-bottom:1px solid var(--line-lt)}
.stg-who{font-family:var(--disp);font-weight:800;letter-spacing:-.028em;
  font-size:clamp(17px,1.7vw,21px);line-height:1.3;margin-top:18px;max-width:40ch}
.stg-body>p:not(.stg-band):not(.stg-who){font-size:15.5px;line-height:1.68;
  color:var(--ink-2);margin-top:14px;max-width:58ch}
.stg-body ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.stg-body li{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-lt);
  padding:7px 11px;border-radius:2px;background:rgba(255,255,255,.5)}
.stages .cta-row{margin-top:clamp(26px,3vw,40px)}
@media(max-width:860px){.stg{grid-template-columns:1fr;gap:16px}}

/* ==========================================================================
   THE TWO SIDES. No faces, by decision. Type does the work.
   ========================================================================== */
.ppl-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-top:clamp(34px,4.5vw,56px);border-top:1px solid var(--line)}
.ppl-col{padding:34px 40px 36px 0;border-right:1px solid var(--line-2)}
.ppl-col:last-child{border-right:0;padding-left:40px;padding-right:0}
.ppl-side{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--mute)}
.ppl-name{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  letter-spacing:-.05em;font-size:clamp(38px,5.6vw,74px);line-height:.9;margin-top:14px}
.ppl-cred{font-family:var(--disp);font-weight:800;letter-spacing:-.028em;
  font-size:clamp(16px,1.6vw,20px);line-height:1.32;color:var(--blue-lt);margin-top:16px;
  max-width:30ch}
.ppl-body{font-size:15.5px;line-height:1.68;color:var(--bone-2);margin-top:16px;
  max-width:44ch}
.ppl-close{margin-top:clamp(30px,4vw,46px);padding-top:26px;
  border-top:1px solid var(--line);font-family:var(--disp);font-weight:800;
  font-size:clamp(18px,2.1vw,26px);letter-spacing:-.03em;line-height:1.32;
  max-width:62ch;text-wrap:pretty}
@media(max-width:820px){
  .ppl-grid{grid-template-columns:1fr}
  .ppl-col{border-right:0;border-bottom:1px solid var(--line-2);padding:26px 0 28px}
  .ppl-col:last-child{border-bottom:0;padding-left:0}
}

/* ==========================================================================
   STANDARDS
   ========================================================================== */
.std-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  margin-top:clamp(30px,4vw,50px);border-top:1px solid var(--line)}
.std{padding:28px 36px 30px 0;border-bottom:1px solid var(--line-2)}
.std:nth-child(odd){border-right:1px solid var(--line-2)}
.std:nth-child(even){padding-left:36px;padding-right:0}
.std-n{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  color:var(--blue-lt)}
.std h3{margin-top:12px;font-size:18px;line-height:1.24}
.std p{font-size:14.5px;color:var(--bone-2);margin-top:11px;line-height:1.62;max-width:46ch}
@media(max-width:820px){
  .std-grid{grid-template-columns:1fr}
  .std:nth-child(odd){border-right:0}
  .std:nth-child(even){padding-left:0}
}

/* ==========================================================================
   INDUSTRY PAGES. Weighting grid, honest fit, related links.
   ========================================================================== */
.wt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  margin-top:clamp(30px,4vw,50px);border-top:1px solid var(--line-lt)}
.wt{padding:28px 36px 30px 0;border-bottom:1px solid var(--line-lt2)}
.wt:nth-child(odd){border-right:1px solid var(--line-lt2)}
.wt:nth-child(even){padding-left:36px;padding-right:0}
.wt-n{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  color:var(--blue)}
.wt h3{margin-top:12px;font-size:19px}
.wt p{font-size:15px;color:var(--ink-2);margin-top:11px;line-height:1.66;max-width:48ch}
@media(max-width:820px){
  .wt-grid{grid-template-columns:1fr}
  .wt:nth-child(odd){border-right:0}
  .wt:nth-child(even){padding-left:0}
}

.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-top:clamp(28px,4vw,46px);border:1px solid var(--line)}
.fit{padding:32px 30px}
.fit-yes{border-right:1px solid var(--line);background:rgba(14,71,254,.05)}
.fit-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.fit-yes .fit-lbl{color:var(--blue-lt)}
.fit p{font-size:16px;line-height:1.66;color:var(--bone-2);max-width:44ch}
.fit-note{margin-top:22px;max-width:66ch}
@media(max-width:760px){
  .fit-grid{grid-template-columns:1fr}
  .fit-yes{border-right:0;border-bottom:1px solid var(--line)}
}

.rel{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  margin-top:clamp(26px,3.5vw,42px);border-top:1px solid var(--line)}
.rel-i{padding:24px 30px 26px 0;border-bottom:1px solid var(--line-2);display:block;
  transition:background .42s var(--ease)}
.rel-i:nth-child(odd){border-right:1px solid var(--line-2)}
.rel-i:nth-child(even){padding-left:30px;padding-right:0}
.rel-i:hover{background:rgba(20,24,33,.4)}
.rel-i span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-lt)}
.rel-i b{display:block;margin-top:10px;font-family:var(--disp);font-weight:800;
  font-size:17px;letter-spacing:-.028em;line-height:1.26;color:var(--bone)}
.nf-rel{max-width:760px;margin-left:auto;margin-right:auto;text-align:left}
@media(max-width:760px){
  .rel{grid-template-columns:1fr}
  .rel-i:nth-child(odd){border-right:0}
  .rel-i:nth-child(even){padding-left:0}
}

/* ==========================================================================
   THE APPLICATION. Three steps, light per step, built for one hand.
   ========================================================================== */
.app-sec .app-split{grid-template-columns:.88fr 1.12fr;align-items:start}
.app-aside .rows{margin-top:30px}
.app-alt{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.app-card{border:1px solid var(--line);background:rgba(20,24,33,.66);
  padding:clamp(22px,2.6vw,34px)}
.app-title{font-family:var(--disp);font-weight:800;font-size:clamp(21px,2.2vw,27px);
  letter-spacing:-.035em;text-transform:none;line-height:1.14;margin-top:12px}
.app-card>.fine{margin-top:10px}

.app-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;
  margin-top:26px;padding-bottom:16px}
.app-step{background:none;border:0;text-align:left;padding:0 0 12px;cursor:default;
  font-family:var(--mono);color:var(--mute);border-bottom:2px solid var(--line);
  transition:color .4s var(--ease),border-color .4s var(--ease)}
.app-step i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.16em;
  display:block}
.app-step span{display:block;margin-top:6px;font-size:10.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase}
.app-step.done{color:var(--bone-2);border-bottom-color:var(--blue-lt);cursor:pointer}
.app-step[aria-current="step"]{color:var(--bone);border-bottom-color:var(--blue)}
.app-step:focus-visible{outline:2px solid var(--blue-lt);outline-offset:3px}
.app-prog.static .app-step{border-bottom-color:var(--line)}
.app-prog.static .app-step:first-child{color:var(--bone);border-bottom-color:var(--blue)}
.app-bar{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-2)}
.app-bar-fill{display:block;height:1px;width:33.33%;background:var(--blue);
  transition:width .5s var(--ease)}

.app-panel{border:0;margin-top:26px}
.app-legend{padding:0;font-family:var(--disp);font-weight:800;
  font-size:clamp(19px,2vw,24px);letter-spacing:-.032em;line-height:1.16;color:var(--bone)}
.app-legend:focus{outline:0}
.app-legend-i{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue-lt);margin-bottom:11px}
.app-blurb{font-size:14.5px;color:var(--bone-2);margin-top:12px;line-height:1.62;
  max-width:52ch}

.fld{margin-top:20px;border:0;padding:0;min-width:0}
.fld label,.fld legend{display:block;font-family:var(--mono);font-size:10px;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--bone-2);
  margin-bottom:9px;padding:0}
.fld .req{color:var(--mute);letter-spacing:.12em;font-weight:400}
.fld .opt{color:var(--line);letter-spacing:.12em;font-weight:400}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],
.fld input[type=url],.fld select,.fld textarea{
  width:100%;background:var(--black);border:1px solid var(--line);color:var(--bone);
  padding:14px 15px;font-family:var(--ff);font-size:16px;border-radius:2px;
  transition:border-color .3s var(--ease)}
.fld select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),
                   linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.fld textarea{resize:vertical;min-height:88px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--blue-lt);
  box-shadow:0 0 0 3px rgba(109,149,255,.18)}
.fld input::placeholder,.fld textarea::placeholder{color:#69717F}
.fld.has-err input,.fld.has-err select,.fld.has-err textarea{border-color:#FF7A6B}
.fld-err{font-family:var(--mono);font-size:12px;color:#FF9A8E;margin-top:9px;
  line-height:1.5;letter-spacing:-.01em}
.fld.has-err legend{color:#FF9A8E}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;margin:0}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:block;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bone-2);
  border:1px solid var(--line);padding:11px 14px;border-radius:2px;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.chip:hover span{border-color:var(--mute);color:var(--bone)}
.chip input:checked+span{border-color:var(--blue);background:rgba(14,71,254,.16);
  color:var(--bone)}
.chip input:focus-visible+span{outline:2px solid var(--blue-lt);outline-offset:3px}

.app-nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:30px;
  padding-top:24px;border-top:1px solid var(--line-2)}
.app-nav [data-next],.app-nav [data-send]{margin-left:auto}
.app.sending{opacity:.62;pointer-events:none}
.app-status{font-family:var(--mono);font-size:12.5px;margin-top:16px;line-height:1.6;
  color:var(--mute);min-height:1px}
.app-status.busy{color:var(--blue-lt)}
.app-status.bad{color:#FF9A8E}
.app-status a{color:inherit;border-bottom:1px solid currentColor}
.app-consent{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:20px;
  line-height:1.68;letter-spacing:-.01em}
.app-consent a{color:var(--blue-lt);border-bottom:1px solid rgba(109,149,255,.34)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;
  overflow:hidden}
.app-fallback .app-prog{margin-top:22px}
.app-fallback .tally-wrap{margin-top:20px}
@media(max-width:1000px){.app-sec .app-split{grid-template-columns:1fr}}
@media(max-width:520px){
  .app-nav{flex-direction:column-reverse;align-items:stretch}
  .app-nav .btn{justify-content:center;width:100%}
  .app-nav [data-next],.app-nav [data-send]{margin-left:0}
  .app-step span{font-size:9.5px;letter-spacing:.1em}
}

/* ==========================================================================
   CLOSING CTA over real shop media
   ========================================================================== */
.close{overflow:hidden}
.close-bg{position:absolute;inset:0;z-index:0}
.close-bg img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) contrast(1.06) brightness(.5)}
.close::before{background:
  radial-gradient(ellipse 70% 80% at 50% 50%,rgba(8,9,12,.72),rgba(8,9,12,.93) 72%);
  z-index:1}
.close .wrap{z-index:2}
.close h2{max-width:26ch}
.close-micro{margin-top:24px;font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;color:var(--mute);line-height:1.7}

/* ---- footer email ---- */
.f-mail{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:12.5px;
  font-weight:700;color:var(--blue-lt);border-bottom:1px solid rgba(109,149,255,.34);
  padding-bottom:3px;word-break:break-word}
.f-mail:hover{border-bottom-color:var(--blue-lt)}
.revsec .head{text-align:left}
.revsec .fine{margin-top:16px}
.ind-split{margin-top:clamp(30px,3.5vw,46px)}
.about-body p{font-size:16.5px;line-height:1.7;color:var(--ink-2);max-width:56ch}
.about-body p+p{margin-top:16px}

/* reduced motion, again, for everything added above */
@media(prefers-reduced-motion:reduce){
  .pathbox.lit .path-tab{animation:none}
  .path-fill,.app-bar-fill{transition:none}
}

/* ---- path panel: index and name are one unit ---- */
.pp-head{min-width:0}
.pp-body{min-width:0}

/* ---- masthead over light surfaces ---- */
.mast-logo{display:block;position:relative}
.lg-light{display:none}
body.on-light .lg-dark{display:none}
body.on-light .lg-light{display:block}
body.on-light .mast-menu{color:var(--ink)}
body.on-light .mast-menu::after{background:var(--blue)}
body.on-light .mast-status{color:var(--ink-3)}
body.on-light .mast-status b{background:var(--blue)}
body.menu-open .lg-light{display:none}
body.menu-open .lg-dark{display:block}
body.menu-open.on-light .mast-menu{color:var(--blue-lt)}
.mast-logo img,.mast-menu,.mast-status{transition:color .3s var(--ease),height .6s var(--ease),opacity .3s}

/* ---- path rail, second pass: the labels are the interface, so they read ---- */
.path-tab{color:var(--bone-2)}
.path-tab i{color:var(--mute)}
.path-tab span{font-size:11.5px;letter-spacing:.1em}
.path-tab::before{width:2px;background:var(--line)}
.path-tab:hover::before{background:var(--mute)}
.path-tab[aria-selected="true"]::before{background:var(--blue-lt);height:22px}
.path-fill{height:2px;margin-top:-1px}
.path-line{height:2px}

/* ---- layers without media get a two column body instead of dead space ---- */
@media(min-width:1001px){
  .layer:not(.layer-media-on) .layer-body{display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    column-gap:clamp(24px,3.4vw,52px);align-items:start}
  .layer:not(.layer-media-on) .layer-body>h3,
  .layer:not(.layer-media-on) .layer-body>.layer-lead,
  .layer:not(.layer-media-on) .layer-body>p{grid-column:1}
  .layer:not(.layer-media-on) .layer-list{grid-column:2;grid-row:1 / span 4;
    flex-direction:column;align-items:flex-start;align-content:start;margin-top:6px;
    padding-left:clamp(0px,1vw,10px);border-left:1px solid var(--line-2)}
  .layer:not(.layer-media-on) .layer-list li{border:0;padding:8px 0 8px 14px;
    position:relative;letter-spacing:.11em}
  .layer:not(.layer-media-on) .layer-list li::before{content:'';position:absolute;
    left:0;top:15px;width:7px;height:1px;background:var(--blue)}
}

/* ---- final pass ---- */
.close-bg img{filter:saturate(.6) contrast(1.05) brightness(.6)}
.case-hl .stat{flex-direction:column;align-items:flex-start;gap:0;line-height:.98}
.case-hl .stat .ar{font-size:.26em;color:var(--mute);line-height:1;
  transform:rotate(90deg);transform-origin:center;margin:6px 0 6px 6px}
@media(max-width:900px){.case-hl .stat{font-size:clamp(40px,13vw,64px)}}
.pf-hl .pf-v{white-space:nowrap}


/* ---- logos never sit on the global image placeholder plate ---- */
.mast-logo img,.f-logo img,.lg-light,.lg-dark{background:none!important}
/* ---- let the recognition columns share a height so the pull quote sits at the foot ---- */
.gap-grid{align-items:stretch}

/* ---- the two sides: no names, so the side label carries the display weight ---- */
.ppl-side{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  letter-spacing:-.045em;font-size:clamp(26px,3.4vw,46px);line-height:.96;
  color:var(--bone)}
.ppl-cred{margin-top:18px}


/* ==========================================================================
   ==========================================================================
   THE CLEARCOAT AND THE MACHINE

   Two showpiece layers, both strictly additive. The HTML underneath is
   unchanged, so search and answer engines read exactly what they read
   before: the eight written stages, the questions, the answers.
   ==========================================================================
   ========================================================================== */

/* ---- the surface ----
   The canvas sits behind everything at z-index 0. It only shows where a
   surface lets it through, which is why the dark sections below are set
   slightly transparent and the paper ones are not. Light must never wash
   over the light sections, so those stay fully opaque. */
#coat{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  mix-blend-mode:screen;opacity:0;transition:opacity 1.6s var(--ease)}
body.coated #coat{opacity:1}

body.coated .sec.char{background:rgba(14,16,21,.80)}
body.coated .sec.gridbg{background-color:rgba(14,16,21,.80)}
body.coated .proof{background:rgba(14,16,21,.78)}
body.coated .case-hl{background:
  radial-gradient(ellipse 70% 60% at 78% 12%,rgba(14,71,254,.11),transparent 68%),
  rgba(14,16,21,.76)}
body.coated .close{background:rgba(14,16,21,.62)}
body.coated .site-footer{background:rgba(14,16,21,.88)}
/* paper stays paper */
body.coated .sec.light{background:var(--paper)}

/* Every content layer has to sit above the surface. Only elements that are
   statically positioned get position:relative here. The masthead, the overlay
   and the sticky CTA are already fixed and must stay that way: giving them
   position:relative drops them into the flow and adds 900px of nothing to
   the top of every page. That happened once. */
main,.site-footer,.crumbs{position:relative;z-index:1}
.hero,.phero,.sec,.band,.fld,.close,.proof{position:relative}

/* ==========================================================================
   THE MACHINE
   ========================================================================== */
.machine{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(22px,3vw,44px);
  margin-top:clamp(30px,4vw,50px);border:1px solid var(--line);
  background:rgba(8,9,12,.52);align-items:stretch}
.mch-stage{position:relative;min-height:clamp(280px,28vw,360px);
  border-right:1px solid var(--line)}
#mchcv{position:absolute;inset:0;width:100%;height:100%;display:block}
.mch-lbl{position:absolute;top:16px;font-family:var(--mono);font-size:9px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.mch-lbl-in{left:14px}
.mch-lbl-out{right:14px;color:var(--blue-lt)}

.mch-panel{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:20px}
.mch-read{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mch-read b{font-family:var(--disp);font-weight:900;letter-spacing:-.05em;
  font-size:clamp(40px,5vw,64px);line-height:.9;color:var(--blue-lt);
  font-variant-numeric:tabular-nums}
.mch-read span{font-size:14px;color:var(--bone-2);line-height:1.4;max-width:20ch}
.mch-money{font-size:14.5px;color:var(--bone-2);padding-top:14px;
  border-top:1px solid var(--line-2)}
.mch-money b{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;
  font-size:19px;color:var(--bone);font-variant-numeric:tabular-nums}

.mch-ticket{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap}
.mch-ticket label{font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.mch-ticket-in{display:flex;align-items:center;border:1px solid var(--line);
  background:var(--black);border-radius:2px;transition:border-color .3s var(--ease)}
.mch-ticket-in:focus-within{border-color:var(--blue-lt);
  box-shadow:0 0 0 3px rgba(109,149,255,.18)}
.mch-ticket-in span{font-family:var(--mono);font-size:13px;color:var(--mute);
  padding:0 0 0 11px}
.mch-ticket-in input{width:92px;background:none;border:0;color:var(--bone);
  font-family:var(--mono);font-size:14px;font-weight:700;padding:9px 11px 9px 3px}
.mch-ticket-in input:focus{outline:0}

.mch-ctrls{display:flex;flex-direction:column;gap:14px;margin-top:auto;
  padding-top:18px;border-top:1px solid var(--line-2)}
.mch-ctrl label{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2);margin-bottom:9px}
.mch-ctrl label b{color:var(--blue-lt);font-size:12px;font-variant-numeric:tabular-nums}
.mch-hint{font-family:var(--ff);font-size:11.5px;color:var(--mute);line-height:1.45;
  margin-top:7px;letter-spacing:0;text-transform:none;max-width:44ch}
.mch-note{font-family:var(--mono);font-size:11px;color:var(--mute);line-height:1.68;
  padding-top:16px;border-top:1px solid var(--line-2);letter-spacing:-.01em}

/* range input, styled in both engines so it stops looking like a default */
.mch-ctrl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;
  height:2px;background:var(--line);border-radius:2px;cursor:pointer;outline:0}
.mch-ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:16px;height:16px;border-radius:50%;background:var(--blue);
  border:2px solid var(--black);box-shadow:0 0 0 1px var(--blue);
  transition:transform .2s var(--ease)}
.mch-ctrl input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}
.mch-ctrl input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--blue);border:2px solid var(--black);box-shadow:0 0 0 1px var(--blue)}
.mch-ctrl input[type=range]::-moz-range-track{height:2px;background:var(--line)}
.mch-ctrl input[type=range]:focus-visible{outline:2px solid var(--blue-lt);
  outline-offset:6px}

@media(max-width:900px){
  .machine{grid-template-columns:1fr}
  .mch-stage{border-right:0;border-bottom:1px solid var(--line);min-height:200px}
  .mch-ctrls{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  #coat{display:none}
  body.coated .sec.char{background:var(--char)}
  body.coated .sec.gridbg{background-color:var(--char)}
}

/* ---- the story spine ----
   Numbered act markers. The number is information, not decoration: the
   homepage is six movements in a fixed order and each one only makes sense
   after the previous one. Other pages are not that story and never get one. */
.eyebrow.act{align-items:baseline;gap:0}
.eyebrow.act::before{display:none}
.eyebrow.act i{font-style:normal;font-size:20px;font-weight:700;letter-spacing:-.03em;
  color:var(--blue-lt);line-height:1}
.eyebrow.act s{display:block;width:30px;height:1px;background:var(--blue);
  text-decoration:none;margin:0 14px;transform:translateY(-4px)}
.sec.light .eyebrow.act i{color:var(--blue)}
.belief{background:var(--char)}
.belief .proof{border-top:1px solid var(--line);margin-top:clamp(30px,4vw,48px);
  background:transparent}
body.coated .belief{background:rgba(14,16,21,.80)}
body.coated .belief .proof{background:transparent}


/* ==========================================================================
   INTERIOR PAGES

   The homepage got six acts, a shader and an interactive model. Everything
   below it got a gradient and a heading, which is why the site stopped
   feeling designed the moment you clicked anything. This section is the
   catch up.
   ========================================================================== */

.phero-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(26px,4vw,58px);align-items:start}
.phero-copy{grid-column:1;min-width:0}
.phero-meta{grid-column:2;min-width:0}
.phero-media{grid-column:2;min-width:0}

/* the build sheet rail */
.phero-meta{border-top:2px solid var(--blue);padding-top:4px}
.phero-meta dl{display:block}
.phero-meta div{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.phero-meta div:last-child{border-bottom:0}
.phero-meta dt{font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--mute);flex:0 0 auto;
  max-width:46%}
.phero-meta dd{font-family:var(--disp);font-weight:800;font-size:14.5px;
  letter-spacing:-.02em;line-height:1.3;color:var(--bone);text-align:right;
  text-wrap:pretty}
.phero-media{margin-top:22px}
.phero-media img{width:100%;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--line);filter:saturate(.86) contrast(1.04)}
.phero h1{max-width:17ch}
.phero .lede{max-width:52ch}

@media(max-width:900px){
  .phero-grid{grid-template-columns:1fr;gap:30px}
  .phero-copy,.phero-meta,.phero-media{grid-column:1}
  .phero-media{margin-top:0;order:-1}
  .phero-media img{aspect-ratio:16/10}
}

/* ---- the six areas, as an editorial sequence rather than a card grid ---- */
.area-stack{margin-top:clamp(34px,4.5vw,58px);border-top:1px solid var(--line)}
.area{display:grid;grid-template-columns:74px minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(18px,3vw,44px);padding:clamp(30px,3.6vw,48px) 0;
  border-bottom:1px solid var(--line-2);align-items:start}
.area-n{font-family:var(--disp);font-weight:900;font-size:clamp(26px,3vw,38px);
  letter-spacing:-.05em;line-height:.9;color:#5A6478;transition:color .5s var(--ease)}
.area:hover .area-n{color:var(--blue-lt)}
.area h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(21px,2.5vw,32px);letter-spacing:-.045em;line-height:.98}
.area-ctrl{font-family:var(--disp);font-weight:800;letter-spacing:-.028em;
  font-size:clamp(15px,1.55vw,19px);line-height:1.32;color:var(--bone);margin-top:13px;
  max-width:34ch}
.area-break{font-size:15px;line-height:1.66;color:var(--bone-2);margin-top:14px;
  max-width:52ch;text-wrap:pretty}
.area-fine{font-family:var(--mono);font-size:11.5px;color:var(--mute);line-height:1.6;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);max-width:48ch}
.area-list{list-style:none;padding-left:clamp(0px,1vw,10px);
  border-left:1px solid var(--line-2)}
.area-list li{font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--bone-2);
  padding:7px 0 7px 14px;position:relative}
.area-list li::before{content:'';position:absolute;left:0;top:14px;width:7px;height:1px;
  background:var(--blue)}
@media(max-width:1000px){
  .area{grid-template-columns:58px minmax(0,1fr)}
  .area-list{grid-column:2;border-left:0;padding-left:0;margin-top:6px;
    display:flex;flex-wrap:wrap;gap:6px}
  .area-list li{border:1px solid var(--line);padding:6px 10px;border-radius:2px}
  .area-list li::before{display:none}
}
@media(max-width:600px){
  .area{grid-template-columns:1fr;gap:8px}
  .area-list{grid-column:1}
}

/* ---- the case study, given a real spine ---- */
.cs-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,60px);align-items:center}
.cs-claims{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--line)}
.cs-claim{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(16px,2.5vw,36px);
  padding:22px 0;border-bottom:1px solid var(--line-2);align-items:baseline}
.cs-claim b{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-lt)}
.cs-claim.no b{color:var(--mute)}
.cs-claim p{font-size:15.5px;color:var(--bone-2);line-height:1.62;max-width:60ch}
@media(max-width:760px){
  .cs-top{grid-template-columns:1fr}
  .cs-claim{grid-template-columns:1fr;gap:8px}
}

/* ---- the article template ---- */
.article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 210px;
  gap:clamp(30px,5vw,72px);align-items:start}
.article .lead-in{font-family:var(--disp);font-weight:800;letter-spacing:-.028em;
  font-size:clamp(18px,2vw,23px);line-height:1.42;color:var(--bone);
  padding-bottom:26px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.article h2{counter-increment:arth}
.article h2::before{content:counter(arth,decimal-leading-zero);display:block;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  color:var(--blue-lt);margin-bottom:12px}
.article{counter-reset:arth}
.art-rail{position:sticky;top:110px;border-top:2px solid var(--blue);padding-top:16px}
.art-rail p{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.art-rail a{display:block;font-size:13.5px;color:var(--bone-2);line-height:1.45;
  padding:9px 0;border-bottom:1px solid var(--line-2);transition:color .35s var(--ease)}
.art-rail a:hover{color:var(--blue-lt)}
@media(max-width:900px){
  .article-wrap{grid-template-columns:1fr}
  .art-rail{position:static;margin-top:34px}
}

/* ---- interior header, second pass ----
   Two things the render caught. The h1 clamp was tuned for a full width
   column and overflowed into the build sheet rail the moment there was one.
   And the breadcrumb bar has always sat underneath the fixed masthead,
   because it is the first thing in the document and the masthead floats
   over it. Both fixed here. */
.phero-grid .phero-copy h1{font-size:clamp(32px,4.4vw,58px);line-height:.94;
  max-width:15ch}
.crumbs{padding:clamp(94px,11vh,122px) 0 14px}
.crumbs ~ main .phero{padding-top:clamp(38px,5vw,68px)}
.crumbs ~ main .phero::before{opacity:.7}

/* opaque panels were punching holes in the clearcoat, so the surfaces that
   sit directly on the page ground let it through */
body.coated .flow>div{background:rgba(8,9,12,.72)}
body.coated .panel{background:rgba(20,24,33,.5)}
body.coated .diag{background:rgba(20,24,33,.5)}
body.coated .app-card,body.coated .form-card{background:rgba(20,24,33,.52)}
body.coated .machine{background:rgba(8,9,12,.4)}


/* ==========================================================================
   LENGTH

   The homepage ran to roughly 16,650 vertical pixels, and about 4,500 of
   that was section padding alone. Shop owners do not scroll that far. The
   scale below keeps the composition generous and takes back a third of the
   height without deleting a word.
   ========================================================================== */
.sec{padding:clamp(62px,7.4vw,112px) 0}
.sec.tight{padding:clamp(44px,5vw,74px) 0}
.close{padding:clamp(70px,8.5vw,128px) 0}
.hero{padding-top:clamp(128px,17vh,196px)}
.hero-grid{padding-bottom:clamp(40px,5vw,68px)}
.phero{padding:clamp(140px,18vh,200px) 0 clamp(40px,5vw,68px)}
.crumbs ~ main .phero{padding-top:clamp(30px,4vw,52px)}
.layer{padding:clamp(28px,3.4vw,44px) 0}
.stg{padding:clamp(24px,3vw,38px) 0}
.area{padding:clamp(24px,3vw,38px) 0}
.path-panels{margin-top:clamp(22px,3vw,36px)}
.pathbox.js .path-panel{min-height:170px}

/* the guarantee now sits inside the belief movement instead of owning a
   section of its own */
.gtee-inline{margin-top:clamp(26px,3.4vw,44px);max-width:78ch}

/* ==========================================================================
   LENGTH, SECOND PASS

   Measured: the four layers and the three stages were 30 percent of the
   homepage between them, purely because both were vertical stacks of things
   a reader wants to compare. Comparison wants columns. Neither loses a word.
   ========================================================================== */

@media(min-width:1001px){
  /* each layer becomes one wide row instead of a tall block */
  .layer,.layer-media-on{grid-template-columns:62px minmax(0,1.5fr) minmax(0,.62fr);
    align-items:start}
  .layer-body{display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    column-gap:clamp(22px,2.6vw,40px);align-items:start}
  .layer-body>h3{grid-column:1 / -1}
  .layer-body>.layer-lead{grid-column:1;margin-top:12px}
  .layer-body>p:not(.layer-lead){grid-column:2;margin-top:12px}
  .layer-body>.layer-list{grid-column:1 / -1;grid-row:auto;margin-top:18px;
    flex-direction:row;border-left:0;padding-left:0}
  .layer-body>.layer-list li{border:1px solid var(--line);padding:6px 10px;
    border-radius:2px}
  .layer-body>.layer-list li::before{display:none}
  .layer-media img{aspect-ratio:1/1;max-height:196px;object-position:center}

  /* the three stages are a comparison, so they sit side by side */
  .stg-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    border-top:1px solid var(--line-lt)}
  .stg{display:block;padding:clamp(24px,2.6vw,34px) clamp(20px,2vw,28px)
    clamp(26px,3vw,38px) 0;border-bottom:0;
    border-right:1px solid var(--line-lt2)}
  .stg:last-child{border-right:0}
  .stg:not(:first-child){padding-left:clamp(20px,2vw,28px)}
  .stg-head h3{font-size:clamp(21px,2.1vw,28px)}
  .stg-price{font-size:clamp(19px,1.8vw,24px);margin-top:12px}
  .stg-body{margin-top:20px}
  .stg-band{font-size:10px;letter-spacing:.11em}
  .stg-who{font-size:clamp(15px,1.4vw,17px);margin-top:14px;max-width:none}
  .stg-body>p:not(.stg-band):not(.stg-who){font-size:14.5px;margin-top:12px;
    max-width:none}
  .stg-body ul{margin-top:16px}
  .stg-body li{font-size:9.5px;padding:5px 8px}
}

/* ---- layers, third pass ----
   I argued for an editorial stack over a card grid, and on length grounds
   that argument loses. Four stacked layers were 2,280px. As a two by two
   they are about half that, the numbered reading order survives, and the
   two decorative images go: the page already carries the hero, the band and
   the case study imagery. */
@media(min-width:781px){
  .layer-stack{display:grid;grid-template-columns:repeat(2,1fr);
    border-top:1px solid var(--line)}
  .layer,.layer-media-on{grid-template-columns:52px minmax(0,1fr);
    padding:clamp(24px,2.8vw,34px) clamp(22px,2.4vw,32px) clamp(26px,3vw,36px) 0;
    border-bottom:1px solid var(--line-2)}
  .layer:nth-child(odd){border-right:1px solid var(--line-2)}
  .layer:nth-child(even){padding-left:clamp(22px,2.4vw,32px);padding-right:0}
  .layer:nth-last-child(-n+2){border-bottom:0}
  .layer-media{display:none}
  .layer-body{display:block}
  .layer-body>h3{font-size:clamp(20px,2vw,27px)}
  .layer-body>.layer-lead{font-size:clamp(15px,1.45vw,18px);margin-top:11px;
    max-width:none}
  .layer-body>p:not(.layer-lead){font-size:14.5px;line-height:1.6;margin-top:12px;
    max-width:none}
  .layer-body>.layer-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;
    margin-top:16px;border-left:0;padding-left:0}
  .layer-body>.layer-list li{border:1px solid var(--line);padding:5px 9px;
    border-radius:2px;font-size:9.5px;letter-spacing:.09em}
  .layer-body>.layer-list li::before{display:none}
  .layer-n{font-size:clamp(22px,2.2vw,30px)}
}

/* the interiors pass gave non-media layers a side rail at higher specificity,
   which survived the two by two change and left 03 and 04 in cramped columns */
@media(min-width:781px){
  .layer:not(.layer-media-on) .layer-body{display:block}
  .layer:not(.layer-media-on) .layer-body>h3,
  .layer:not(.layer-media-on) .layer-body>.layer-lead,
  .layer:not(.layer-media-on) .layer-body>p{grid-column:auto}
  .layer:not(.layer-media-on) .layer-list{grid-column:auto;grid-row:auto;
    display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;margin-top:16px;
    border-left:0;padding-left:0}
  .layer:not(.layer-media-on) .layer-list li{border:1px solid var(--line);
    padding:5px 9px;border-radius:2px;font-size:9.5px;letter-spacing:.09em}
  .layer:not(.layer-media-on) .layer-list li::before{display:none}
}

/* ---- section headers ----
   Eleven section headings, each an eyebrow, a display heading and a lede.
   The heading scale and the gaps around it were tuned before the page had
   eleven of them. */
h2{font-size:clamp(28px,3.9vw,52px)}
.head .lede{margin-top:18px}
.head.wide{margin-bottom:0}
.lede{font-size:18px;line-height:1.62;margin-top:20px}

/* ---- masthead quick links ----
   The full screen menu stays, but pricing and results were a click away and
   they are the two things a prospect opens the site to check. */
.mast-quick{display:none;margin-left:auto;gap:clamp(18px,2vw,30px)}
.mast-quick a{font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--bone-2);
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.mast-quick a:hover{color:var(--bone);border-bottom-color:var(--blue)}
body.on-light .mast-quick a{color:var(--ink-2)}
body.on-light .mast-quick a:hover{color:var(--ink)}
body.menu-open .mast-quick{opacity:0;pointer-events:none}
@media(min-width:1080px){
  .mast-quick{display:flex;align-items:center}
  .mast-menu{margin-left:clamp(24px,2.6vw,40px)}
}

/* ---- the guarantee, with every term defined underneath it ----
   A promise with undefined words is the worst thing on a site whose whole
   position is that we only say checkable things. */
.gterms{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.gterms-h{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);padding:16px 0 4px}
.gterm{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(14px,2vw,30px);
  padding:14px 0;border-bottom:1px solid var(--line-2);align-items:baseline}
.gterm:last-child{border-bottom:0}
.gterm b{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue-lt)}
.gterm p{font-size:14.5px;color:var(--bone-2);line-height:1.6;max-width:62ch}
@media(max-width:760px){.gterm{grid-template-columns:1fr;gap:6px}}

/* ---- the scope claim ----
   The single sentence no competitor can write without changing what their
   business does. It closes the operating path, because the path is this
   sentence drawn out. Sized to be read before anything around it. */
.scope{margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3.4vw,44px);
  border-top:1px solid var(--line);max-width:74ch}
.scope-h{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--blue-lt)}
.scope-line{font-family:var(--disp);font-weight:900;letter-spacing:-.045em;
  line-height:1.02;font-size:clamp(27px,4.1vw,54px);margin-top:16px;
  text-wrap:balance}
.scope-note{font-size:15px;line-height:1.68;color:var(--bone-2);margin-top:20px;
  max-width:60ch}
@media(max-width:700px){.scope-note{font-size:14.5px}}

/* ---- degrees of ownership, on the homepage chapters ---- */
.stages .stg-body>p.stg-owns{font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  margin-top:22px;max-width:none}
.stages .stg-body>p.stg-owns+ul{margin-top:10px}

/* ---- and on the pricing cards ---- */
.pkg-owns{font-size:14.5px;line-height:1.6;color:var(--bone);margin-top:18px;
  padding-top:18px;border-top:1px solid var(--line-2)}
.pkg-owns b{font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--blue-lt);
  display:block;margin-bottom:8px}
.pkg-keeps{font-size:13px;line-height:1.6;color:var(--mute);margin-top:10px}
.pkg-inc-h{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-top:20px}
.pkg-inc-h+ul{margin-top:8px}