/* FAILSAFE. tokens.mjs sets [data-reveal]{opacity:0} unconditionally, so if
   main.js ever fails to run — blocked, cached badly, a JS error — the entire
   page renders invisible. On a live marketing site that is catastrophic and
   silent. The reveal start-state is therefore gated behind .js, which an
   inline head script sets. No JS, no hiding. */
html:not(.js) [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
*,*::before,*::after{box-sizing:border-box}
/* [hidden] must win. A component rule of display:flex/grid silently beats
   the UA stylesheet's [hidden]{display:none} — which left the form's
   "That is through." success panel permanently visible on the contact
   page and under the modal form. Found by eye at 768. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--ground);color:var(--ink);
  font-family:var(--font-body);font-size:var(--t0);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-display);
  letter-spacing:var(--ls-display);line-height:var(--lh-display);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(a,button,input,select,summary,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* every grid/flex child can shrink — the commonest overflow cause */
main *,.hdr *,.ftr *{min-width:0}
.skip{position:absolute;left:-9999px;top:0;padding:12px 18px;background:var(--accent);color:var(--accent-ink);z-index:200}
.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.concept-strip{background:var(--surface-2);color:var(--ink-2);font-size:var(--tn2);
  padding:8px var(--gutter);border-bottom:1px solid var(--line);
  display:flex;gap:.45em;justify-content:center;align-items:baseline;text-align:center;line-height:1.35}
.concept-strip b{color:var(--ink);font-weight:600;white-space:nowrap}
.concept-strip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){ .concept-strip span{display:none} }

/* header ------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:100;background:var(--ground);
  border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease)}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);
  padding:0 var(--gutter);min-height:var(--hdr-h,66px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;
  min-height:44px}
.nav{margin-left:auto}
.nav ul{display:flex;gap:clamp(12px,1.6vw,24px)}
.nav a{text-decoration:none;white-space:nowrap;font-size:var(--tn1);color:var(--ink-2);
  padding:6px 0;transition:color var(--dur-fast) var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.hdr-act{display:flex;align-items:center;gap:12px;margin-left:clamp(14px,2.4vw,32px);flex:0 0 auto}
.nav:not(:has(*)) + .hdr-act,.hdr-in > .nav[hidden] + .hdr-act{margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 var(--s4);text-decoration:none;white-space:nowrap;
  font-family:var(--font-display);font-size:var(--tn1);font-weight:600;letter-spacing:.02em;
  border-radius:var(--radius);transition:transform var(--dur-fast) var(--ease),
  background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.btn-pri{background:var(--accent);color:var(--accent-ink)}
.btn-pri:hover{transform:translateY(-1px)}
.hdr-cta{min-height:40px}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;padding:0 10px}
.burger span{display:block;height:1.5px;background:var(--ink);transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:99;background:var(--ground);
  display:flex;flex-direction:column;gap:var(--s3);justify-content:center;
  padding:var(--s6) var(--gutter);overflow-y:auto}
.drawer[hidden]{display:none}
.drawer ul{display:flex;flex-direction:column;gap:var(--s2)}
.drawer a{text-decoration:none;font-family:var(--font-display);font-size:var(--t3);
  min-height:48px;display:flex;align-items:center}
.drawer .btn{align-self:flex-start;margin-top:var(--s3)}

/* the explicit yield order — nothing is allowed to push off-screen */
@media (max-width:979px){
  .nav{display:none}
  .burger{display:flex}
  .hdr-cta{display:none}
  .hdr-act{margin-left:auto}
}
@media (min-width:980px){ .drawer{display:none!important} }

/* footer ------------------------------------------------------------- */
.ftr{border-top:1px solid var(--line);padding:var(--section-y-tight) var(--gutter) var(--s4);
  background:var(--surface-1)}
.ftr-in{display:grid;gap:var(--s5);grid-template-columns:1fr}
.ftr h2{font-size:var(--tn2);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);font-family:var(--font-body);font-weight:600;margin-bottom:var(--s3)}
.ftr-name{font-family:var(--font-display);font-size:var(--t3)}
.ftr-line{color:var(--ink-2);margin-top:var(--s2);max-width:36ch}
.ftr-note{color:var(--ink-2);margin-top:var(--s3);font-size:var(--tn1);max-width:40ch;
  padding-top:var(--s2);border-top:1px solid var(--line)}
.ftr p,.ftr a{font-size:var(--tn1);color:var(--ink-2)}
.ftr-sm{margin-top:var(--s2)}
/* 44px in BOTH axes — "Home" was 37px wide and failed the tap check even
   once it was tall enough */
.ftr a{text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;min-width:44px}
.ftr a:hover{color:var(--accent)}
.ftr-nav a{padding-right:var(--s3)}
.ftr-nav li + li{margin-top:0}
.ftr-fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}
.ftr-fine p{font-size:var(--tn2);color:var(--ink-2)}
@media (min-width:760px){ .ftr-in{grid-template-columns:1.6fr .9fr 1.1fr;gap:var(--s5)} }

/* the "get started" modal — MECHANICS ONLY. Look belongs to the direction.
   Full-page: the panel is the whole viewport, not a centred card. */
.lead{position:fixed;inset:0;z-index:150;display:flex}
.lead[hidden]{display:none}
.lead-scrim{position:absolute;inset:0;background:var(--ground);opacity:0;
  transition:opacity 180ms var(--ease)}
.lead.is-open .lead-scrim{opacity:1}
.lead-panel{position:relative;flex:1;background:var(--ground);overflow-y:auto;
  -webkit-overflow-scrolling:touch;opacity:0;transform:translateY(8px);
  transition:opacity 180ms var(--ease),transform 180ms var(--ease)}
.lead.is-open .lead-panel{opacity:1;transform:none}
.lead-x{position:absolute;top:14px;right:14px;z-index:2;width:48px;height:48px;
  display:grid;place-items:center;border:1px solid var(--line)}
.lead-x span{position:absolute;width:17px;height:1.5px;background:var(--ink)}
.lead-x span:first-child{transform:rotate(45deg)}
.lead-x span:last-child{transform:rotate(-45deg)}
.lead-x:hover{border-color:var(--ink)}
/* Honeypot. Hidden with the clip technique, NOT left:-9999px — parking it
   off-canvas made it a real element 9999px outside the layout and qa.mjs
   correctly flagged it as horizontal overflow on every width. */
.f-hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0;
  pointer-events:none}
/* the input needs hiding too: opacity is not an inherited computed value,
   so the child still reported a 153x21 box and read as a sub-44px tap
   target on the contact page */
.f-hp input,.f-hp label{width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0}
.f-err{display:none;font-size:var(--tn2);color:var(--accent-2,#ff6b6b)}
.f-row.has-err .f-err{display:block}
.f-row.has-err input,.f-row.has-err textarea,.f-row.has-err select{outline:2px solid var(--accent-2,#ff6b6b);outline-offset:1px}
.f-hint{font-size:var(--tn2);color:var(--ink-2)}
.lead-done-mark{width:34px;height:34px;border:2px solid var(--accent);border-radius:50%;
  position:relative}
.lead-done-mark::after{content:'';position:absolute;left:10px;top:5px;width:9px;height:16px;
  border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){
  .lead-scrim,.lead-panel{transition:none}
}

/* accordion ---------------------------------------------------------- */
[data-acc] > button{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:var(--s3);text-align:left;padding:var(--s3) 0;min-height:56px;
  font-family:var(--font-display);font-size:var(--t1)}
[data-acc] > div{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease)}
[data-acc].is-open > div{grid-template-rows:1fr}
[data-acc] > div > div{overflow:hidden}
[data-acc] .acc-body{padding-bottom:var(--s4);color:var(--ink-2);max-width:var(--measure)}
[data-acc] .acc-mark{flex:0 0 auto;width:14px;height:14px;position:relative}
[data-acc] .acc-mark::before,[data-acc] .acc-mark::after{content:'';position:absolute;background:var(--accent);
  transition:transform var(--dur-fast) var(--ease)}
[data-acc] .acc-mark::before{inset:6px 0 auto;height:1.5px}
[data-acc] .acc-mark::after{inset:0 6px auto;width:1.5px;height:14px}
[data-acc].is-open .acc-mark::after{transform:scaleY(0)}

/* =====================================================================
   v1 "Broker" — REBUILT to a best-in-class SaaS standard.

   The reference set: Linear, Stripe, Vercel, Ramp. What they share and
   this now has: a centred container so nothing stretches to 1900px, a
   hero that shows the product, feature cards on layered surfaces with a
   1px border and an inner highlight, restrained accent, generous
   deliberate whitespace, and a real spacing scale.

   Identity retained: cool blue-black, Archivo 800, amber accent, mono
   micro-labels, the register of true facts.
   ===================================================================== */

.v1{
  --hdr-h:68px;
  --container:1200px;
  --gutter:clamp(20px,5vw,40px);
  /* a real spacing scale — the token scale for `dense` tops out at 36px */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;--sp-11:160px;
  --section-y:clamp(72px,9vw,128px);
  --measure:62ch;
  /* surfaces with an inner highlight — the "layered" look */
  --card-bg:color-mix(in srgb,var(--surface-1) 88%,transparent);
  --card-hi:color-mix(in srgb,#fff 6%,transparent);
  --grade:saturate(.9) contrast(1.05) brightness(.96);
  --r:14px;--r-lg:20px;
}

/* ---- wordmark ------------------------------------------------------- */
.wm{display:inline-flex;align-items:baseline;gap:1px;font-family:var(--font-display);
  font-weight:800;font-size:1.15rem;letter-spacing:-.03em}
.wm-a{color:var(--ink)}.wm-b{color:var(--ink-2)}
.wm-d{width:5px;height:5px;background:var(--accent);margin-left:5px;align-self:center;
  transition:transform var(--dur-fast) var(--ease)}
.brand:hover .wm-d{transform:translateY(-2px) rotate(45deg)}

/* ---- header: glass on scroll ---------------------------------------- */
/* explicit rgba, not color-mix: the header-collision probe parses rgba()
   only and read the color-mix() glass as fully transparent */
.v1 .hdr{background:rgb(13,17,23)}
.v1 .hdr-in{max-width:var(--container);margin-inline:auto}
.v1 .nav a{font-size:.9rem}
.v1 .btn{border-radius:10px;font-family:var(--font-body);font-weight:600;letter-spacing:0}
.v1 .hdr-cta{min-height:40px;padding-inline:16px}

/* ---- container / sections ------------------------------------------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--section-y);position:relative}
.sec--facts{padding-block:0}
.sec--band{padding-block:0}
.sec--band + .sec{padding-top:var(--section-y)}

/* ---- buttons ---------------------------------------------------------- */
.btn{border-radius:10px;font-family:var(--font-body);font-weight:600;letter-spacing:0;
  transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),
  border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.btn-pri{background:var(--accent);color:var(--accent-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 8px 24px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn-pri:hover{background:color-mix(in srgb,var(--accent) 86%,#fff);transform:translateY(-1px)}
.btn-pri:active{transform:translateY(0)}
.btn-ghost{background:var(--card-bg);color:var(--ink);border:1px solid var(--line-strong);
  box-shadow:0 1px 0 var(--card-hi) inset}
.btn-ghost:hover{border-color:var(--ink-2);transform:translateY(-1px)}
.btn-lg{min-height:52px;padding-inline:24px;font-size:1rem}
.tlink{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;
  font-size:.95rem;min-height:44px;text-decoration:none;
  transition:color var(--dur-fast) var(--ease)}
.tlink span{transition:transform var(--dur-fast) var(--ease);color:var(--accent)}
.tlink:hover{color:var(--accent)}
.tlink:hover span{transform:translateX(3px)}
.more{margin-top:var(--sp-7);text-align:center}

/* ---- icons ------------------------------------------------------------ */
.ico{width:22px;height:22px}.ico-s{width:16px;height:16px}.ico-xs{width:15px;height:15px;flex:0 0 auto}

/* ---- section heads (centred) ---------------------------------------- */
.shead{max-width:760px;margin:0 auto var(--sp-8);text-align:center}
.shead--l{margin-inline:0;text-align:left}
.shead-l{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-4)}
.shead-h{font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.04;letter-spacing:-.035em;
  font-weight:700;text-wrap:balance}
.shead-d{margin:var(--sp-5) auto 0;color:var(--ink-2);font-size:1.08rem;line-height:1.6;max-width:56ch}
.shead--l .shead-d{margin-inline:0}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;padding-block:clamp(64px,9vw,120px) 0;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),
    radial-gradient(40% 40% at 85% 20%,color-mix(in srgb,var(--accent-2) 10%,transparent),transparent 70%),
    radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1.5px);
  background-size:auto,auto,28px 28px;
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.hero-in{text-align:center}
.hero-pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--card-bg);
  font-size:.85rem;color:var(--ink-2);margin-bottom:var(--sp-6)}
.hero-pill i{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.hero-h{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-.045em;
  font-weight:800;max-width:15ch;margin-inline:auto;text-wrap:balance}
/* solid accent, not gradient-clipped text: background-clip:text needs
   color:transparent, which the contrast probe reads as 1.13:1 */
.hero-h em{font-style:normal;color:var(--accent)}
.hero-sub{margin:var(--sp-6) auto 0;max-width:58ch;color:var(--ink-2);font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6}
.hero-act{display:flex;justify-content:center;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-7)}
.mast .hero-act{justify-content:flex-start}

/* =====================================================================
   PRODUCT MOCKUP
   ===================================================================== */
.mock{position:relative;margin:clamp(56px,7vw,96px) auto 0;max-width:1080px;
  padding-bottom:clamp(72px,11vw,168px)}
.mk-browser{border-radius:var(--r-lg);border:1px solid var(--line-strong);
  background:var(--surface-1);overflow:hidden;
  box-shadow:0 1px 0 var(--card-hi) inset,0 40px 100px -30px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.4)}
.mk-chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.mk-chrome > span{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.mk-url{margin-left:12px;flex:1;max-width:340px;height:26px;border-radius:7px;
  background:var(--ground);border:1px solid var(--line);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--ink-2);
  display:flex;align-items:center;padding-inline:12px}
.mk-site{background:#0f1319}
.mk-nav{display:flex;align-items:center;gap:20px;padding:16px 28px}
.mk-logo{width:88px;height:12px;border-radius:3px;background:var(--ink)}
.mk-links{display:flex;gap:16px;margin-left:auto}
.mk-links i{width:40px;height:7px;border-radius:3px;background:var(--line-strong)}
.mk-btn{width:84px;height:26px;border-radius:6px;background:var(--accent)}
.mk-hero{position:relative;height:clamp(180px,26vw,330px);overflow:hidden}
.mk-hero img{width:100%;height:100%;object-fit:cover;filter:var(--grade) brightness(.72)}
.mk-hero-t{position:absolute;left:28px;right:28px;bottom:24px;max-width:520px}
.mk-hero-t b{display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.1rem,2.6vw,1.9rem);line-height:1.05;letter-spacing:-.03em;color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.5)}
.mk-search{margin-top:14px;display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-radius:10px;padding:10px 10px 10px 16px;max-width:380px}
.mk-search span{font-size:12px;color:#6b7280}
.mk-search em{width:64px;height:26px;border-radius:6px;background:var(--accent)}
.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:22px 28px 28px}
.mk-card{border-radius:10px;overflow:hidden;background:#161b23;border:1px solid var(--line)}
.mk-card img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:var(--grade)}
.mk-card-t{padding:10px 12px}
.mk-card-t b{display:block;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink)}
.mk-card-t span{font-size:11px;color:var(--ink-2)}

.mk-crm{position:absolute;right:-8px;bottom:12px;width:min(480px,86%);
  border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface-1);
  box-shadow:0 1px 0 var(--card-hi) inset,0 30px 70px -20px rgba(0,0,0,.75);
  padding:14px 16px 16px;backdrop-filter:blur(8px)}
.mk-crm-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mk-crm-hd span{font-family:var(--font-display);font-weight:700;font-size:13px}
.mk-crm-hd i{font-family:'IBM Plex Mono',ui-monospace,monospace;font-style:normal;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.mk-crm-hd i::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);animation:mkpulse 2s infinite}
@keyframes mkpulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
.mk-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mk-stage > span{display:block;font-size:10px;color:var(--ink-2);letter-spacing:.04em;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-stage > b{display:block;font-family:var(--font-display);font-size:16px;margin-bottom:8px}
.mk-lead{display:flex;align-items:center;gap:6px;background:var(--ground);border:1px solid var(--line);
  border-radius:6px;padding:6px 7px;margin-bottom:6px}
.mk-lead i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);flex:0 0 auto}
.mk-lead.is-new{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.mk-lead.is-new i{background:var(--accent)}
.mk-lead span{font-size:9.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mk-toast{position:absolute;left:-8px;bottom:clamp(120px,14vw,190px);display:flex;align-items:center;gap:12px;
  border-radius:12px;border:1px solid var(--line-strong);background:var(--surface-1);
  box-shadow:0 1px 0 var(--card-hi) inset,0 24px 50px -16px rgba(0,0,0,.7);padding:12px 16px 12px 12px}
.mk-toast i{width:34px;height:34px;border-radius:9px;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;flex:0 0 auto}
.mk-toast b{display:block;font-size:13px;font-weight:600}
.mk-toast span{font-size:11.5px;color:var(--ink-2)}
@media (max-width:760px){
  .mk-nav{padding:12px 16px}.mk-links{display:none}
  .mk-hero-t{left:16px;right:16px;bottom:16px}
  .mk-grid{grid-template-columns:repeat(2,1fr);padding:14px 16px 18px;gap:10px}
  .mk-card:last-child{display:none}
  .mk-crm{position:static;width:auto;margin-top:14px}
  .mk-stages{grid-template-columns:repeat(2,1fr)}
  .mk-toast{position:static;margin-top:12px}
  .mock{padding-bottom:0}
}

/* =====================================================================
   REGISTER STRIP — true facts
   ===================================================================== */
.reg{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-top:var(--sp-6)}
.reg-c{background:var(--surface-1);padding:var(--sp-5) var(--sp-5);display:flex;flex-direction:column;gap:6px}
.reg-l{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2)}
.reg-v{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink)}
@media (min-width:760px){ .reg{grid-template-columns:repeat(4,1fr)} }

/* =====================================================================
   FEATURE GRID
   ===================================================================== */
.feat{display:grid;gap:var(--sp-4)}
.feat-c{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--card-bg);padding:var(--sp-6);
  box-shadow:0 1px 0 var(--card-hi) inset;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.feat-c::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 50% at 20% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);
  opacity:0;transition:opacity var(--dur) var(--ease)}
@media (hover:hover){
  .feat-c:hover{border-color:var(--line-strong);transform:translateY(-3px);
    box-shadow:0 1px 0 var(--card-hi) inset,0 30px 60px -30px rgba(0,0,0,.7)}
  .feat-c:hover::before{opacity:1}
}
.feat-i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);margin-bottom:var(--sp-5)}
.feat-h{font-size:1.3rem;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.feat-h a{text-decoration:none;display:inline-flex;min-height:44px;align-items:center;
  transition:color var(--dur-fast) var(--ease)}
.feat-h a:hover{color:var(--accent)}
.feat-b{margin-top:var(--sp-2);color:var(--ink-2);line-height:1.55}
.feat-l{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.feat-l li{display:flex;gap:10px;font-size:.92rem;color:var(--ink-2);line-height:1.4}
.feat-l .ico-xs{color:var(--accent);margin-top:3px}
@media (min-width:720px){ .feat{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .feat{grid-template-columns:repeat(4,1fr)} .feat-c{padding:var(--sp-6) var(--sp-5)} }

/* =====================================================================
   FLOW
   ===================================================================== */
.flow{display:grid;gap:var(--sp-4);counter-reset:f;position:relative}
.flow-n{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--card-bg);
  padding:var(--sp-5);box-shadow:0 1px 0 var(--card-hi) inset}
.flow-i{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);color:var(--accent)}
.flow-i span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;color:var(--ink-2)}
.flow-h{font-size:1.1rem;line-height:1.15;letter-spacing:-.015em;font-weight:700}
.flow-b{margin-top:var(--sp-2);color:var(--ink-2);font-size:.92rem;line-height:1.5}
.flow-note{margin:var(--sp-7) auto 0;max-width:60ch;text-align:center;color:var(--ink-2);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r);
  background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
@media (min-width:720px){ .flow{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){
  .flow{grid-template-columns:repeat(5,1fr);gap:var(--sp-3)}
  /* connector: a dashed hairline behind the row, so it reads as a sequence */
  .flow::before{content:'';position:absolute;left:8%;right:8%;top:38px;height:1px;
    background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px);z-index:0}
  .flow-n{z-index:1}
}

/* =====================================================================
   COMPARISON
   ===================================================================== */
.cmp{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-bg);
  overflow:hidden;box-shadow:0 1px 0 var(--card-hi) inset;max-width:960px;margin-inline:auto}
.cmp-hd{display:none}
.cmp-r{display:grid;gap:var(--sp-3);padding:var(--sp-5);border-top:1px solid var(--line)}
.cmp-r:first-of-type{border-top:0}
.cmp-l{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2)}
.cmp-a,.cmp-b{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.45}
.cmp-a{color:var(--ink-2)}.cmp-a .ico-xs{color:var(--ink-2);margin-top:3px;opacity:.7}
.cmp-b{color:var(--ink);font-weight:500}.cmp-b .ico-xs{color:var(--accent);margin-top:3px}
.cmp-a::before,.cmp-b::before{content:attr(data-l);display:block;width:100%;flex-basis:100%;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);opacity:.75;margin-bottom:-4px}
.cmp-a,.cmp-b{flex-wrap:wrap}
.cmp-r.is-worse .cmp-b{color:var(--ink-2);font-weight:400}
.cmp-r.is-worse .cmp-b .ico-xs{color:var(--ink-2)}
.cmp-foot{margin:var(--sp-5) auto 0;max-width:960px;text-align:center;color:var(--ink-2);font-size:.9rem}
@media (min-width:860px){
  .cmp-hd{display:grid;grid-template-columns:200px 1fr 1fr;gap:var(--sp-5);padding:var(--sp-4) var(--sp-5);
    background:var(--surface-2);border-bottom:1px solid var(--line)}
  .cmp-hd span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-2)}
  .cmp-hd .cmp-us{color:var(--accent)}
  .cmp-r{grid-template-columns:200px 1fr 1fr;gap:var(--sp-5);align-items:start;padding:var(--sp-4) var(--sp-5)}
  .cmp-r:first-of-type{border-top:0}
  .cmp-a::before,.cmp-b::before{display:none}
  .cmp-a,.cmp-b{flex-wrap:nowrap}
  .cmp-l{padding-top:3px}
  .cmp-b{position:relative;padding:var(--sp-2) var(--sp-3);margin:calc(var(--sp-2) * -1) calc(var(--sp-3) * -1);
    border-radius:8px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
  .cmp-r.is-worse .cmp-b{background:transparent}
}

/* =====================================================================
   PULL
   ===================================================================== */
.sec--pull{text-align:center;isolation:isolate;overflow:hidden}
.pull-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%)}
.pull-l{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-6)}
.pull-h{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,6.5vw,5.2rem);
  line-height:.98;letter-spacing:-.045em;max-width:14ch;margin-inline:auto;text-wrap:balance}
.pull-h em{font-style:normal;color:var(--accent)}
.pull-b{margin:var(--sp-6) auto 0;max-width:52ch;color:var(--ink-2);font-size:1.05rem;line-height:1.6}

/* =====================================================================
   STEPS / FIT
   ===================================================================== */
.steps{display:grid;gap:var(--sp-4);max-width:1040px;margin-inline:auto}
.step{border-radius:var(--r);border:1px solid var(--line);background:var(--card-bg);padding:var(--sp-6) var(--sp-5);
  box-shadow:0 1px 0 var(--card-hi) inset}
.step-n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;color:var(--accent);
  display:block;margin-bottom:var(--sp-4)}
.step-h{font-size:1.2rem;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.step-b{margin-top:var(--sp-2);color:var(--ink-2);font-size:.95rem;line-height:1.5}
@media (min-width:720px){ .steps{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .steps{grid-template-columns:repeat(4,1fr)} }

.fit{display:grid;gap:var(--sp-4);max-width:1040px;margin-inline:auto}
.fit-c{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-bg);padding:var(--sp-6);
  box-shadow:0 1px 0 var(--card-hi) inset}
.fit-c h3{font-size:1.25rem;line-height:1.15;letter-spacing:-.02em;font-weight:700;margin-bottom:var(--sp-5)}
.fit-c li{display:flex;gap:12px;padding:var(--sp-3) 0;border-top:1px solid var(--line);color:var(--ink-2);line-height:1.5}
.fit-c li .ico-xs{color:var(--accent);margin-top:4px}
.fit-c--no li .ico-xs{color:var(--ink-2)}
@media (min-width:860px){ .fit{grid-template-columns:1fr 1fr} }

/* =====================================================================
   CTA
   ===================================================================== */
.sec--cta{text-align:center;isolation:isolate;overflow:hidden}
.cta-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.cta-h{font-size:clamp(2.2rem,5.2vw,4rem);line-height:1.02;letter-spacing:-.04em;font-weight:800;
  max-width:16ch;margin-inline:auto;text-wrap:balance}
.cta-b{margin:var(--sp-5) auto 0;max-width:52ch;color:var(--ink-2);font-size:1.08rem;line-height:1.6}
.cta-act{margin-top:var(--sp-7);display:flex;justify-content:center;align-items:center;gap:var(--sp-5);flex-wrap:wrap}

/* =====================================================================
   MASTHEAD (inner pages)
   ===================================================================== */
.mast{position:relative;padding-block:clamp(56px,8vw,104px) var(--sp-8);isolation:isolate;overflow:hidden}
.mast-h{font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1;letter-spacing:-.04em;font-weight:800;max-width:16ch;text-wrap:balance}
.mast-d{margin-top:var(--sp-5);color:var(--ink-2);font-size:1.15rem;line-height:1.6;max-width:56ch}
.mast .hero-act{margin-top:var(--sp-6)}

/* ---- band ------------------------------------------------------------- */
.band{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.band-img{height:clamp(220px,36vw,440px)}
.band-img img{width:100%;height:100%;object-fit:cover;filter:var(--grade)}
.band-cap{display:flex;gap:var(--sp-4);align-items:baseline;flex-wrap:wrap;padding:var(--sp-4) var(--sp-5);
  background:var(--surface-1);color:var(--ink-2);font-size:.95rem}
.band-l{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}

/* ---- details (what-you-get) ------------------------------------------ */
.sec--dets{display:flex;flex-direction:column;gap:var(--sp-9)}
.sec--dets .wrap{display:flex;flex-direction:column;gap:var(--sp-9)}
.det{display:grid;gap:var(--sp-6);align-items:center}
.det-n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:var(--sp-3)}
.det-h{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.det-b{margin-top:var(--sp-4);color:var(--ink-2);line-height:1.6;font-size:1.05rem}
.det-spec{margin-top:var(--sp-5);border-radius:var(--r);border:1px solid var(--line);background:var(--card-bg);overflow:hidden}
.det-spec > div{display:grid;grid-template-columns:120px 1fr;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line)}
.det-spec > div:first-child{border-top:0}
.det-spec dt{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.det-spec dd{color:var(--ink-2);font-size:.95rem}
.det-f{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.det-f img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:var(--grade)}
@media (min-width:900px){
  .det{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  .det.is-alt .det-t{order:2}
}

/* ---- why (essay + aside) --------------------------------------------- */
.why{display:grid;gap:var(--sp-6)}
.why-t{display:flex;flex-direction:column;gap:var(--sp-5);max-width:var(--measure)}
.why-t p{color:var(--ink-2);line-height:1.65;font-size:1.05rem}
.why-t p:first-child{color:var(--ink);font-size:1.25rem;font-weight:500;line-height:1.5}
.why-a{border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  background:color-mix(in srgb,var(--accent) 6%,transparent);padding:var(--sp-6);align-self:start}
.why-a h3{font-size:1.3rem;line-height:1.15;letter-spacing:-.02em;color:var(--accent);margin-bottom:var(--sp-4)}
.why-a p{color:var(--ink-2);line-height:1.55;font-size:.95rem}
.why-plain{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid color-mix(in srgb,var(--accent) 25%,transparent);font-size:.9rem}
@media (min-width:960px){ .why{grid-template-columns:1.15fr .85fr;gap:var(--sp-8);align-items:start} }

/* ---- terms ------------------------------------------------------------ */
.terms{display:grid;gap:var(--sp-4);max-width:1040px;margin-inline:auto}
.term{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-bg);padding:var(--sp-6);
  box-shadow:0 1px 0 var(--card-hi) inset}
.term-n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:var(--sp-3)}
.term-q{font-size:1.3rem;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.term-a{margin-top:var(--sp-3);font-size:1.05rem;color:var(--ink);font-weight:500;line-height:1.5}
.term-w{margin-top:var(--sp-3);color:var(--ink-2);font-size:.95rem;line-height:1.5}
@media (min-width:860px){ .terms{grid-template-columns:1fr 1fr} }
.honesty{margin:var(--sp-6) auto 0;max-width:1040px;border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent);padding:var(--sp-6)}
.honesty p{color:var(--ink-2);line-height:1.6;max-width:70ch}

/* ---- faq --------------------------------------------------------------- */
.faq{max-width:840px;margin-inline:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-bg);overflow:hidden}
.acc{border-top:1px solid var(--line);padding-inline:var(--sp-5)}
.acc:first-child{border-top:0}
.acc > button{font-size:1.05rem;font-family:var(--font-body);font-weight:600}
.acc > button:hover{color:var(--accent)}

/* ---- idx ---------------------------------------------------------------- */
.idx{max-width:760px;margin-inline:auto;border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  background:color-mix(in srgb,var(--accent) 6%,transparent);padding:var(--sp-6)}
.idx-tag{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-4)}
.idx-tag span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.idx-tag b{background:var(--accent);color:var(--accent-ink);font-size:.78rem;padding:4px 10px;border-radius:6px;font-weight:600}
.idx-h{font-size:1.6rem;line-height:1.1;letter-spacing:-.025em;font-weight:700}
.idx-b{margin-top:var(--sp-4);color:var(--ink-2);line-height:1.55}
.idx-dis{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid color-mix(in srgb,var(--accent) 25%,transparent);color:var(--ink-2);font-size:.9rem}

/* ---- pricing ------------------------------------------------------------ */
.price-grid{display:grid;gap:var(--sp-6);max-width:1040px;margin-inline:auto}
.unpriced{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-bg);padding:var(--sp-7);
  box-shadow:0 1px 0 var(--card-hi) inset}
.unpriced-h{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;letter-spacing:-.03em;font-weight:700}
.unpriced-b{margin-top:var(--sp-4);color:var(--ink-2);line-height:1.6;font-size:1.05rem}
.unpriced .btn{margin-top:var(--sp-6)}
.always{display:flex;flex-direction:column;gap:var(--sp-3);align-self:center}
.always li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);line-height:1.5;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r);border:1px solid var(--line);background:var(--card-bg)}
.always .ico-xs{color:var(--accent);margin-top:4px}
.plans{display:grid;gap:var(--sp-4)}
.plan{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-bg);padding:var(--sp-6)}
.plan.is-feat{border-color:var(--accent)}
.plan-n{font-size:1.3rem;font-weight:700}
.plan-p{margin-top:var(--sp-3);display:flex;align-items:baseline;gap:6px}
.plan-p b{font-family:var(--font-display);font-size:2.6rem;font-weight:800;letter-spacing:-.03em}
.plan-p span{color:var(--ink-2)}
.plan-t{margin-top:var(--sp-2);color:var(--ink-2)}
.plan .btn{margin-top:var(--sp-5)}
@media (min-width:900px){ .price-grid{grid-template-columns:1.2fr .8fr} .plans{grid-template-columns:1fr 1fr} }

/* ---- contact ------------------------------------------------------------ */
.con{display:grid;gap:var(--sp-7);max-width:1040px;margin-inline:auto}
.con-form{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-bg);padding:var(--sp-6);
  box-shadow:0 1px 0 var(--card-hi) inset}
.f-row{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--sp-5)}
.f-row label{font-size:.88rem;font-weight:600;color:var(--ink)}
.f-row input,.f-row textarea,.f-row select{background:var(--ground);border:1px solid var(--line-strong);color:var(--ink);
  font:inherit;font-size:.98rem;padding:12px 14px;min-height:48px;border-radius:10px;width:100%;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.f-row textarea{min-height:130px;resize:vertical}
.f-row input::placeholder,.f-row textarea::placeholder{color:var(--ink-2);opacity:.7}
.f-row input:focus,.f-row textarea:focus,.f-row select:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.f-note{margin-top:var(--sp-4);color:var(--ink-2);font-size:.9rem}
.lead-submit{width:100%}
.con-side{align-self:start}
.con-side h2{font-size:1.4rem;letter-spacing:-.02em;font-weight:700;margin-bottom:var(--sp-5)}
.con-steps,.lead-steps{counter-reset:c;display:flex;flex-direction:column;gap:var(--sp-3)}
.con-steps li,.lead-steps li{counter-increment:c;position:relative;padding:var(--sp-4) var(--sp-4) var(--sp-4) 56px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--card-bg);color:var(--ink-2);line-height:1.5}
.con-steps li::before,.lead-steps li::before{content:counter(c,decimal-leading-zero);position:absolute;left:var(--sp-4);top:var(--sp-4);
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:600}
.con-steps b,.lead-steps b{color:var(--ink);font-weight:600}
.con-note{margin-top:var(--sp-5);color:var(--ink-2);line-height:1.55;font-size:.95rem}
.lead-status:not(:empty){margin-top:var(--sp-4);padding:var(--sp-4);border-radius:10px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink)}
.lead-done{grid-column:1/-1;border-radius:var(--r-lg);border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);
  padding:var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}
.lead-done h3{font-size:1.6rem;letter-spacing:-.025em;font-weight:700}
.lead-done p{color:var(--ink-2);max-width:48ch;line-height:1.55}
@media (min-width:900px){ .con{grid-template-columns:1.15fr .85fr} }

/* ---- modal --------------------------------------------------------------- */
.lead-in{display:grid;min-height:100%;grid-template-columns:1fr}
.lead-side{padding:var(--sp-8) var(--gutter) var(--sp-7);position:relative;isolation:isolate;
  background:var(--surface-1);border-bottom:1px solid var(--line)}
.lead-eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-4)}
.lead-h{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.02;letter-spacing:-.035em;font-weight:800;max-width:16ch}
.lead-sub{margin-top:var(--sp-5);color:var(--ink-2);line-height:1.6;max-width:46ch}
.lead-steps{margin-top:var(--sp-6)}
.lead-form{padding:var(--sp-7) var(--gutter) var(--sp-8)}
.lead-form .f-row{margin-bottom:var(--sp-5)}
.lead .lead-done{margin:var(--sp-7) var(--gutter)}
@media (min-width:900px){
  .lead-in{grid-template-columns:.9fr 1.1fr}
  .lead-side{border-bottom:0;border-right:1px solid var(--line);padding:var(--sp-9) var(--sp-8);
    display:flex;flex-direction:column;justify-content:center}
  .lead-form{padding:var(--sp-9) var(--sp-8);max-width:680px}
  .lead .lead-done{grid-column:1/-1;margin:var(--sp-9) var(--sp-8)}
}

/* ---- footer -------------------------------------------------------------- */
.v1 .ftr{background:var(--ground);border-top:1px solid var(--line);padding-block:var(--sp-8) var(--sp-5)}
.v1 .ftr-in,.v1 .ftr-fine{max-width:var(--container);margin-inline:auto}
.v1 .ftr-name{font-size:1.15rem;font-weight:800;letter-spacing:-.03em}

/* ---- global polish --------------------------------------------------------- */
::selection{background:var(--accent);color:var(--accent-ink)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .mk-crm-hd i::before{animation:none} }
[id]{scroll-margin-top:calc(var(--hdr-h) + 20px)}
/* cards in a row share a heading height so the bodies start on one line */
@media (min-width:1100px){ .feat-h,.flow-h,.step-h{min-height:2.35em;display:flex;align-items:flex-start} }

/* ---- photographs behind the hero and every masthead --------------------
   The scrim is shaped, not flat: heavy where the type sits, open where it
   does not, so the photograph is actually visible while the worst-case
   pixel under the headline still clears the contrast probe. */
.hero-photo,.mast-photo{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.hero-photo img,.mast-photo img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.04)}
.hero-photo img{object-position:60% 45%}
/* home: centred type, so darken the middle and let the edges breathe */
.hero-photo::after{content:'';position:absolute;inset:0;background:
    radial-gradient(56% 58% at 50% 34%,color-mix(in srgb,var(--ground) 86%,transparent) 0%,
      color-mix(in srgb,var(--ground) 62%,transparent) 55%,color-mix(in srgb,var(--ground) 30%,transparent) 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--ground) 55%,transparent) 0%,transparent 35%,transparent 55%,var(--ground) 82%)}
/* mastheads: left-aligned type, so the scrim is left-heavy and the right
   two-thirds of the photograph is open */
.mast-photo img{object-position:70% 50%}
.mast-photo::after{content:'';position:absolute;inset:0;background:
    linear-gradient(90deg,color-mix(in srgb,var(--ground) 94%,transparent) 0%,
      color-mix(in srgb,var(--ground) 82%,transparent) 42%,color-mix(in srgb,var(--ground) 38%,transparent) 72%,
      color-mix(in srgb,var(--ground) 22%,transparent) 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--ground) 40%,transparent) 0%,transparent 30%,var(--ground) 100%)}
.hero-bg{background:
    radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),
    radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1.5px);
  background-size:auto,28px 28px}
.mast{min-height:min(62vh,640px);display:flex;align-items:center}
.hero-h,.mast-h{text-shadow:0 2px 40px rgba(0,0,0,.5)}
@media (max-width:760px){
  .hero-photo img{object-position:60% 45%}
  .mast-photo img{object-position:60% 50%}
  .mast-photo::after{background:
    linear-gradient(180deg,color-mix(in srgb,var(--ground) 62%,transparent) 0%,color-mix(in srgb,var(--ground) 78%,transparent) 50%,var(--ground) 100%)}
  .mast{min-height:0}
}
/* over a photograph the 11px accent eyebrow and the grey lede fell under
   4.5:1 at the worst pixel. Solid backing for the eyebrow, full ink for the
   lede — the photograph stays as open as it is. */
.mast .shead-l{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 9px;
  border-radius:999px;background:rgb(13,17,23);border:1px solid var(--line-strong);margin-bottom:var(--sp-5)}
.mast .shead-l::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}
.mast-d{color:var(--ink);opacity:.92}
.mast-photo::after{background:
    linear-gradient(90deg,color-mix(in srgb,var(--ground) 96%,transparent) 0%,
      color-mix(in srgb,var(--ground) 88%,transparent) 44%,color-mix(in srgb,var(--ground) 40%,transparent) 72%,
      color-mix(in srgb,var(--ground) 22%,transparent) 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--ground) 40%,transparent) 0%,transparent 30%,var(--ground) 100%)}

/* =====================================================================
   LIGHT SECTIONS.
   Three of nine sections lift onto a light surface — features, the
   comparison, the steps — so the page runs dark / light / dark rather
   than one continuous dark. Every component reads its colour from tokens,
   so re-scoping the tokens is the whole change. The accent darkens on
   light ground: bright amber on white is ~1.9:1 and unreadable as text.
   ===================================================================== */
.sec--light{
  --ground:#F5F6F8;--surface-1:#FFFFFF;--surface-2:#EEF0F3;
  --line:#E1E4E9;--line-strong:#CBD0D8;
  --ink:#0D1117;--ink-2:#4B5563;
  --accent:#8C5608;--accent-ink:#FFFFFF;
  --card-bg:#FFFFFF;--card-hi:rgba(255,255,255,.9);
  background:var(--ground);color:var(--ink)}
.sec--light .feat-c,.sec--light .flow-n,.sec--light .step,.sec--light .cmp,.sec--light .fit-c{
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -14px rgba(15,23,42,.14)}
@media (hover:hover){
  .sec--light .feat-c:hover{box-shadow:0 1px 2px rgba(15,23,42,.05),0 24px 48px -20px rgba(15,23,42,.22)}
}
.sec--light .feat-i{background:color-mix(in srgb,var(--accent) 10%,#fff);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.sec--light .cmp-hd{background:var(--surface-2)}
.sec--light .cmp-r .cmp-b{background:color-mix(in srgb,#F0B429 14%,#fff)}
.sec--light .btn-pri{background:#F0B429;color:#111827;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 24px -10px rgba(240,180,41,.6)}
.sec--light .btn-pri:hover{background:#F4C24B}
.sec--light ::selection{background:#F0B429;color:#111827}
/* the dark→light seams: no hairline needed, the tone change is the edge */
.sec--light,.sec--light + .sec{border-top:0}