/* ==========================================================================
   LeadLab — leadlabinc.com — v2 "instrument"
   Dark-first, dimensional, product-forward. Committed single look.
   The substance stays: evidence-first, no fabricated proof, no dollar figures.
   ========================================================================== */

@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:400;src:url("/assets/fonts/plex-serif-400.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;src:url("/assets/fonts/plex-serif-600.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;src:url("/assets/fonts/plex-sans-400.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;src:url("/assets/fonts/plex-sans-500.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;src:url("/assets/fonts/plex-sans-600.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;src:url("/assets/fonts/plex-mono-400.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;src:url("/assets/fonts/plex-mono-500.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;src:url("/assets/fonts/plex-mono-600.woff2") format("woff2");font-display:swap}

:root{
  color-scheme: dark;

  --bg-base:#08090B;
  --bg-raised:#0E1113;
  --bg-card:#101416;
  --bg-elevated:#141A1C;
  --bg-well:#0A0D0E;

  --fg-primary:#F1F5F5;
  --fg-secondary:#A9B3B4;
  --fg-muted:#6E797B;
  --fg-faint:#4A5355;
  --fg-on-accent:#04191C;

  --border:#1C2124;
  --border-strong:#2A3134;
  --border-glow:rgba(56,189,248,.28);

  /* Sampled from LeadLab_Logo_Source.png: navy #000C30, electric blue #0048FC,
     cyan highlight. --accent is the cyan end because #0048FC is too dark to
     read as text on a near-black background; the blue lives in gradients. */
  --accent:#38BDF8;
  --accent-hi:#8AD8FF;
  --accent-deep:#0048FC;
  --accent-navy:#000C30;
  --accent-dim:rgba(56,189,248,.12);
  --accent-line:rgba(56,189,248,.30);
  --accent-glow:rgba(56,189,248,.22);

  --success:#4FD1A0; --success-dim:rgba(79,209,160,.12); --success-line:rgba(79,209,160,.30);
  --warning:#E9B45C; --warning-dim:rgba(233,180,92,.12); --warning-line:rgba(233,180,92,.30);
  --danger:#FF8A7A;  --danger-dim:rgba(255,138,122,.12); --danger-line:rgba(255,138,122,.32);

  --font-serif:"IBM Plex Serif","Iowan Old Style",Georgia,serif;
  --font-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;--space-10:10px;--space-12:12px;--space-14:14px;
  --space-16:16px;--space-20:20px;--space-24:24px;--space-28:28px;--space-32:32px;--space-40:40px;
  --space-48:48px;--space-56:56px;--space-64:64px;--space-80:80px;--space-96:96px;--space-128:128px;

  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-pill:999px;

  --measure:66ch;
  --container:1160px;
  --container-narrow:780px;

  --shadow-card:0 1px 2px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.45);
  --shadow-float:0 2px 6px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.65),0 40px 120px rgba(0,0,0,.5);
  --shadow-glow:0 0 0 1px var(--accent-line),0 0 40px rgba(56,189,248,.10),0 24px 70px rgba(0,0,0,.7);

  --ease:cubic-bezier(.22,.68,.32,1);
  --dur-fast:130ms;--dur:240ms;--dur-slow:420ms;
}

/* ---------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg-base);color:var(--fg-primary);
  font-family:var(--font-sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:rgba(56,189,248,.26);color:#fff}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0 0 var(--space-16);color:var(--fg-primary);text-wrap:balance;letter-spacing:-.02em}
h1{font-weight:600;font-size:clamp(2.5rem,1.6rem + 3.9vw,4.5rem);line-height:1.04;letter-spacing:-.035em}
h2{font-weight:600;font-size:clamp(1.875rem,1.4rem + 2vw,2.875rem);line-height:1.12;letter-spacing:-.028em}
h3{font-weight:600;font-size:1.375rem;line-height:1.28}
h4{font-weight:600;font-size:1.0625rem;line-height:1.4}
p{margin:0 0 var(--space-20);max-width:var(--measure);color:var(--fg-secondary)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi)}
strong{color:var(--fg-primary);font-weight:600}
em{font-style:italic;color:var(--fg-primary)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}
:focus:not(:focus-visible){outline:none}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--bg-elevated);color:var(--fg-primary);padding:var(--space-12) var(--space-16);border:1px solid var(--border-strong);border-radius:var(--radius-md)}
.skip-link:focus{left:var(--space-16);top:var(--space-16)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* -------------------------------------------------------------- layout -- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-24);position:relative}
@media (max-width:600px){.container{padding-inline:var(--space-20)}}
.narrow{max-width:var(--container-narrow);margin-inline:auto}
section{padding-block:var(--space-128);position:relative}
@media (max-width:760px){section{padding-block:var(--space-80)}}

/* hairline gradient divider between sections */
.rule-top::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--border-strong) 22%,var(--border-strong) 78%,transparent);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-8);
  font-family:var(--font-mono);font-weight:500;font-size:.75rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);margin:0 0 var(--space-20);
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.lede{font-size:1.1875rem;line-height:1.6;color:var(--fg-secondary);max-width:60ch}
.small{font-size:.8125rem;line-height:1.55;color:var(--fg-muted)}
.mono{font-family:var(--font-mono);font-size:.875rem}

/* ----------------------------------------------------------------- nav -- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(8,9,11,.72);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.nav[data-stuck="true"]{border-bottom-color:var(--border);background:rgba(8,9,11,.9)}
.nav__inner{display:flex;align-items:center;gap:var(--space-24);min-height:68px}
.ll-logo{display:inline-flex;align-items:center;gap:var(--space-10);color:var(--fg-primary);font-weight:600;font-size:1.1875rem;letter-spacing:-.02em;line-height:1;flex:none;border-radius:var(--radius-sm)}
.ll-logo__mark{flex:none}
.ll-logo__word{transform:translateY(1px)}
.ll-logo:hover{color:var(--fg-primary)}
.ll-logo:hover .ll-logo__mark rect:first-child{fill:var(--accent-hi)}
.ll-logo img{height:26px;width:auto}

.nav__links{display:flex;align-items:center;gap:var(--space-4);list-style:none;margin:0 auto 0 var(--space-32);padding:0}
.nav__links a{
  display:block;color:var(--fg-secondary);font-size:.9375rem;
  padding:var(--space-8) var(--space-12);border-radius:var(--radius-md);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.nav__links a:hover{color:var(--fg-primary);background:var(--bg-raised)}
.nav__toggle{display:none}
.nav__cta{flex:none}

@media (max-width:940px){
  .nav__links{display:none}
  .nav__toggle{
    display:inline-flex;align-items:center;justify-content:center;order:3;
    width:44px;height:44px;background:var(--bg-raised);border:1px solid var(--border);
    border-radius:var(--radius-md);color:var(--fg-primary);cursor:pointer;
  }
  .nav__inner{justify-content:space-between}
  .nav__cta{margin-left:auto}
  .nav[data-open="true"]{background:rgba(8,9,11,.98)}
  .nav[data-open="true"] .nav__links{
    display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);
    position:absolute;left:0;right:0;top:100%;margin:0;
    background:var(--bg-raised);border-bottom:1px solid var(--border);
    padding:var(--space-12) var(--space-20) var(--space-24);box-shadow:var(--shadow-card);
  }
  .nav[data-open="true"] .nav__links a{padding:var(--space-14) var(--space-12);font-size:1.0625rem}
}
@media (max-width:520px){ .nav__cta .btn{padding-inline:var(--space-16);font-size:.875rem} }

/* ------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  min-height:44px;padding:0 var(--space-20);border-radius:var(--radius-md);
  font-family:var(--font-sans);font-size:.9375rem;font-weight:500;line-height:1;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;position:relative;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.btn--primary{
  background:linear-gradient(135deg,var(--accent-deep),var(--accent) 92%);
  color:#fff;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 20px rgba(0,72,252,.20);
}
.btn--primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 28px rgba(0,72,252,.34)}
.btn--primary:active{transform:translateY(0)}
.btn--secondary{background:var(--bg-elevated);color:var(--fg-primary);border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--bg-card);border-color:var(--fg-faint);color:var(--fg-primary);transform:translateY(-1px)}
.btn--ghost{background:none;color:var(--fg-secondary);padding-inline:var(--space-4)}
.btn--ghost:hover{color:var(--accent)}
.btn--lg{min-height:50px;padding:0 var(--space-24);font-size:1rem}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12);margin-top:var(--space-32)}

/* ---------------------------------------------------------------- hero -- */
.hero{
  padding-block:var(--space-96) var(--space-128);
  overflow:hidden;isolation:isolate;
}
@media (max-width:760px){.hero{padding-block:var(--space-64) var(--space-80)}}

/* layered atmosphere: radial glow + fading grid. Purely decorative. */
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero__glow{
  position:absolute;left:50%;top:-22%;width:min(1300px,150%);aspect-ratio:1.6;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,72,252,.20),rgba(0,72,252,.13) 38%,transparent 66%);
  filter:blur(28px);
}
.hero__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 32%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 32%,#000 25%,transparent 78%);
  opacity:.55;
}
.hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-64);align-items:center}
@media (max-width:1040px){.hero__inner{grid-template-columns:1fr;gap:var(--space-56)}}

.hero h1{margin-bottom:var(--space-24);max-width:15ch}
.hero h1 .grad{
  background:linear-gradient(100deg,#8AD8FF,var(--accent) 38%,#2C6BFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{font-size:1.1875rem;max-width:54ch}

.badge{
  display:inline-flex;align-items:center;gap:var(--space-8);
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fg-secondary);background:var(--bg-raised);
  border:1px solid var(--border-strong);border-radius:var(--radius-pill);
  padding:var(--space-6) var(--space-14);margin-bottom:var(--space-24);
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);flex:none}

/* the signature visual: the opportunity card, floating */
.hero__visual{position:relative;perspective:1600px}
.hero__visual .card{
  transform:rotateY(-9deg) rotateX(3deg) translateZ(0);
  transform-origin:left center;
  box-shadow:var(--shadow-float);
  transition:transform var(--dur-slow) var(--ease);
}
.hero__visual .card:hover{transform:rotateY(-4deg) rotateX(1.5deg)}
@media (max-width:1040px){
  .hero__visual{perspective:none}
  .hero__visual .card{transform:none}
  .hero__visual .card:hover{transform:none}
}
.hero__visual::after{
  content:"";position:absolute;inset:12% -6% -12% -6%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(0,72,252,.20),transparent 68%);
  filter:blur(40px);
}

/* ------------------------------------------------------------ sections -- */
.section-head{max-width:44ch;margin-bottom:var(--space-64)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .lede{margin-inline:auto}
.section-head p{margin-bottom:0}

/* generic surface card */
.tile{
  background:linear-gradient(180deg,var(--bg-card),var(--bg-raised));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-32);position:relative;overflow:hidden;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.tile:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.tile h4{margin-bottom:var(--space-8)}
.tile p{font-size:.9375rem;line-height:1.6;margin:0;color:var(--fg-secondary)}
.tile__ico{
  width:36px;height:36px;border-radius:var(--radius-md);flex:none;
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-20);
  background:var(--accent-dim);border:1px solid var(--accent-line);color:var(--accent);
}

.grid{display:grid;gap:var(--space-24)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:940px){.grid--3{grid-template-columns:1fr}.grid--2{grid-template-columns:1fr}}

/* bento — the eight things on every opportunity */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-16)}
.bento .tile{padding:var(--space-24)}
.bento .tile--wide{grid-column:span 2}
@media (max-width:1040px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.bento{grid-template-columns:1fr}.bento .tile--wide{grid-column:span 1}}
.bento .field__label{margin-bottom:var(--space-8)}

/* numbered steps, alternating */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-16)}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-24);align-items:start;
  background:linear-gradient(180deg,var(--bg-card),var(--bg-raised));
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-24) var(--space-28);
  transition:border-color var(--dur) var(--ease);
}
.step:hover{border-color:var(--border-strong)}
.step__num{
  font-family:var(--font-mono);font-weight:600;font-size:.8125rem;color:var(--accent);
  border:1px solid var(--accent-line);background:var(--accent-dim);
  width:40px;height:40px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.step h4{margin-bottom:var(--space-6)}
.step p{font-size:.9375rem;line-height:1.6;margin-bottom:var(--space-12);color:var(--fg-secondary)}
.step p:last-child{margin-bottom:0}
@media (max-width:620px){.step{grid-template-columns:1fr;gap:var(--space-16)}}

/* definition list */
.deflist{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:var(--space-4) var(--space-24);margin:0;max-width:var(--measure)}
.deflist dt{font-family:var(--font-mono);font-weight:500;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);padding-top:var(--space-4)}
.deflist dd{margin:0 0 var(--space-16);color:var(--fg-secondary);font-size:.9375rem;line-height:1.55}
@media (max-width:640px){.deflist{grid-template-columns:1fr;gap:0}.deflist dt{padding-top:var(--space-12)}}

/* table */
.table{width:100%;border-collapse:collapse;font-size:.9375rem;margin:var(--space-24) 0}
.table th,.table td{text-align:left;padding:var(--space-14) var(--space-16);border-bottom:1px solid var(--border);vertical-align:top}
.table th{font-family:var(--font-mono);font-weight:500;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-muted);border-bottom:1px solid var(--border-strong);white-space:nowrap}
.table td:first-child{color:var(--fg-primary);font-weight:500;white-space:nowrap}
.table td{color:var(--fg-secondary)}
.table tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-raised)}
.table-scroll .table{margin:0}

/* pull quote */
.pull{
  font-family:var(--font-serif);font-weight:400;font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);
  line-height:1.42;color:var(--fg-primary);margin:var(--space-56) 0 0;max-width:26ch;
  padding-left:var(--space-24);border-left:2px solid var(--accent);
}
@media (max-width:940px){.pull{max-width:none;margin-top:var(--space-40)}}

/* score bands */
.bands{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:var(--space-24) 0 0;padding:0;list-style:none}
.bands li{
  font-family:var(--font-mono);font-size:.8125rem;padding:var(--space-8) var(--space-14);
  border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--fg-secondary);background:var(--bg-raised);
}
.bands li:first-child{border-color:var(--accent-line);color:var(--accent);background:var(--accent-dim)}

/* callout */
.callout{
  border:1px solid var(--border);border-left:2px solid var(--accent);
  background:var(--bg-raised);border-radius:var(--radius-md);
  padding:var(--space-24);margin:var(--space-32) 0;max-width:var(--measure);
}
.callout > :last-child{margin-bottom:0}

/* build-status markers — the page promises these, so they must be real */
.not-yet{
  display:inline-flex;align-items:center;gap:var(--space-6);vertical-align:middle;
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;
  color:var(--warning);background:var(--warning-dim);border:1px solid var(--warning-line);
  border-radius:var(--radius-pill);padding:1px var(--space-8);margin-left:var(--space-6);
}
.status-note{
  display:flex;gap:var(--space-12);align-items:flex-start;
  border:1px solid var(--warning-line);background:var(--warning-dim);
  border-radius:var(--radius-md);padding:var(--space-14) var(--space-16);
  margin:var(--space-16) 0 0;font-size:.875rem;line-height:1.55;
}
.status-note b{color:var(--fg-primary)}
.status-note svg{flex:none;margin-top:3px;color:var(--warning)}
.status-note p{margin:0;max-width:none;font-size:.875rem}

/* --------------------------------------------- the opportunity "card" --- */
.sample-label{
  display:flex;gap:var(--space-12);align-items:flex-start;
  font-size:.8125rem;line-height:1.55;color:var(--fg-muted);
  border:1px dashed var(--border-strong);border-radius:var(--radius-md);
  padding:var(--space-12) var(--space-16);margin-bottom:var(--space-20);max-width:var(--measure);
}
.sample-label svg{flex:none;margin-top:2px}
.sample-label strong{color:var(--fg-secondary)}

.card{
  border:1px solid var(--border-strong);border-radius:var(--radius-xl);
  background:linear-gradient(180deg,var(--bg-elevated),var(--bg-card));
  box-shadow:var(--shadow-card);overflow:hidden;position:relative;
}
.card::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--border-glow),transparent);
}
.card__chrome{
  display:flex;align-items:center;gap:var(--space-10);
  background:var(--bg-well);border-bottom:1px solid var(--border);
  padding:var(--space-12) var(--space-16);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-muted);
}
.card__chrome .live{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);flex:none}
.card__body{padding:var(--space-24)}
@media (max-width:640px){.card__body{padding:var(--space-16)}}

.card__head{display:flex;flex-wrap:wrap;gap:var(--space-20);align-items:flex-start;justify-content:space-between;padding-bottom:var(--space-20);border-bottom:1px solid var(--border);margin-bottom:var(--space-20)}
.card__title{margin:0 0 var(--space-4);font-size:1.1875rem}
.card__sub{margin:0;font-size:.8125rem;color:var(--fg-muted);font-family:var(--font-mono)}

.score{display:flex;align-items:center;gap:var(--space-14);flex:none}
.score__num{
  font-family:var(--font-mono);font-weight:600;font-size:2.25rem;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(150deg,var(--accent-hi),var(--accent) 55%,var(--accent-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.score__meta{display:flex;flex-direction:column;gap:var(--space-4)}
.score__label{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}
.score__band{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-line);
  border-radius:var(--radius-pill);padding:2px var(--space-8);white-space:nowrap;
}
.meter{width:100%;height:5px;background:var(--bg-well);border:1px solid var(--border);border-radius:var(--radius-pill);overflow:hidden;margin-top:var(--space-16)}
.meter__fill{
  height:100%;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--accent-deep),var(--accent) 65%,var(--accent-hi));
  box-shadow:0 0 14px var(--accent-glow);
  width:0;transition:width 1.1s var(--ease);
}

.field{margin-bottom:var(--space-20)}
.field:last-child{margin-bottom:0}
.field__label{font-family:var(--font-mono);font-weight:500;font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--space-8)}
.field p{margin:0 0 var(--space-8);font-size:.9375rem;line-height:1.55;color:var(--fg-secondary);max-width:none}
.field p:last-child{margin-bottom:0}

.contact-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-8);padding:var(--space-10) 0;border-bottom:1px solid var(--border);font-size:.9375rem}
.contact-row:last-of-type{border-bottom:0}
.contact-row b{color:var(--fg-primary)}
.contact-row span{color:var(--fg-muted);font-family:var(--font-mono);font-size:.75rem}

.chip{
  display:inline-flex;align-items:center;gap:var(--space-6);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.03em;
  border:1px solid var(--border-strong);border-radius:var(--radius-pill);
  padding:2px var(--space-8);color:var(--fg-muted);background:var(--bg-well);white-space:nowrap;
}
.chip--ok{color:var(--success);background:var(--success-dim);border-color:var(--success-line)}
.chip--warn{color:var(--warning);background:var(--warning-dim);border-color:var(--warning-line)}

.draft{
  background:var(--bg-well);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-16);margin-top:var(--space-8);
  font-family:var(--font-mono);font-size:.8125rem;line-height:1.75;color:var(--fg-secondary);
  white-space:pre-wrap;overflow-x:auto;
}
.draft b{color:var(--accent)}

.evidence-footer{
  margin-top:var(--space-20);padding:var(--space-14) var(--space-16);
  background:var(--bg-well);border:1px solid var(--border);border-radius:var(--radius-md);
  font-family:var(--font-mono);font-size:.6875rem;line-height:1.8;color:var(--fg-muted);word-break:break-word;
}

/* ------------------------------------------------------------- offers -- */
.offer{
  background:linear-gradient(180deg,var(--bg-card),var(--bg-raised));
  border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:var(--space-32);display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.offer:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.offer::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--border-glow),transparent)}
.offer h3{margin-bottom:var(--space-4)}
.offer__tag{font-family:var(--font-mono);font-size:.8125rem;color:var(--accent);margin:0 0 var(--space-20)}
.offer p{font-size:.9375rem;line-height:1.6}
.offer__best{
  border:1px solid var(--accent-line);background:var(--accent-dim);color:var(--fg-primary);
  padding:var(--space-14) var(--space-16);border-radius:var(--radius-md);
  margin:var(--space-8) 0 var(--space-20);font-size:.9375rem;line-height:1.5;max-width:none;
}
.offer__best b{color:var(--accent)}
.offer__tiers{font-size:.8125rem;color:var(--fg-muted);margin-bottom:var(--space-24)}
.offer .btn{margin-top:auto;align-self:flex-start}

/* ---------------------------------------------------------------- faq -- */
.faq{max-width:var(--measure);border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-20) var(--space-40) var(--space-20) 0;font-weight:500;font-size:1.0625rem;color:var(--fg-primary);position:relative;transition:color var(--dur-fast) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:var(--space-8);top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--fg-muted);border-bottom:1.5px solid var(--fg-muted);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg);border-color:var(--accent)}
.faq summary:hover{color:var(--accent)}
.faq__body{padding:0 0 var(--space-24)}
.faq__body p{font-size:.9375rem;line-height:1.65}
.faq__body p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- form -- */
.form-wrap{
  background:linear-gradient(180deg,var(--bg-elevated),var(--bg-card));
  border:1px solid var(--border-strong);border-radius:var(--radius-xl);
  padding:var(--space-32);box-shadow:var(--shadow-card);position:relative;overflow:hidden;
}
.form-wrap::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--border-glow),transparent)}
@media (max-width:640px){.form-wrap{padding:var(--space-20)}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-20)}
.form-grid .full{grid-column:1/-1}
@media (max-width:680px){.form-grid{grid-template-columns:1fr}}

.field-group label,.field-group legend{display:block;font-size:.9375rem;font-weight:500;color:var(--fg-primary);margin-bottom:var(--space-8);padding:0}
.field-group .hint{font-size:.8125rem;color:var(--fg-muted);margin:var(--space-6) 0 0}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],select,textarea{
  width:100%;font-family:var(--font-sans);font-size:1rem;line-height:1.5;color:var(--fg-primary);
  background:var(--bg-well);border:1px solid var(--border-strong);border-radius:var(--radius-md);
  padding:var(--space-12);min-height:46px;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-muted) 50%),linear-gradient(135deg,var(--fg-muted) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--space-40)}
textarea{min-height:112px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--fg-faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--bg-raised);box-shadow:0 0 0 3px var(--accent-dim)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger)}
.err{display:block;font-size:.8125rem;color:var(--danger);margin-top:var(--space-6)}

fieldset{border:0;padding:0;margin:0}
.radio-set{display:grid;gap:var(--space-8);margin-top:var(--space-4)}
.radio-set .radio{
  display:flex;gap:var(--space-12);align-items:flex-start;
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  padding:var(--space-14) var(--space-16);cursor:pointer;background:var(--bg-well);
  margin-bottom:0;font-weight:400;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.radio-set .radio:hover{border-color:var(--fg-faint);background:var(--bg-raised)}
.radio-set .radio input{margin:3px 0 0;accent-color:var(--accent);width:16px;height:16px;flex:none}
.radio-set .radio:has(input:checked){border-color:var(--accent);background:var(--accent-dim)}
.radio-set .radio > span{font-size:.9375rem;line-height:1.45;color:var(--fg-primary);font-weight:400}
.radio-set .radio > span small{display:block;color:var(--fg-muted);font-size:.8125rem;margin-top:3px}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:.8125rem;color:var(--fg-muted);margin:var(--space-16) 0 0;max-width:52ch}
.form-status{margin-top:var(--space-16);font-size:.9375rem}
.form-status[data-state="error"]{color:var(--danger);background:var(--danger-dim);border:1px solid var(--danger-line);border-radius:var(--radius-md);padding:var(--space-12) var(--space-16)}
.success__tick{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--success-dim);border:1px solid var(--success-line);color:var(--success);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-20)}
.success h3{margin-bottom:var(--space-12)}

/* ------------------------------------------------------------- footer -- */
.footer{background:var(--bg-well);border-top:1px solid var(--border);padding-block:var(--space-64) var(--space-40)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-40)}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr;gap:var(--space-32)}}
.footer h4{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-muted);font-weight:500;margin-bottom:var(--space-16)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-10)}
.footer a{color:var(--fg-secondary);font-size:.9375rem}
.footer a:hover{color:var(--accent)}
.footer__tag{color:var(--fg-muted);font-size:.9375rem;margin-top:var(--space-16);max-width:32ch}
.footer__base{margin-top:var(--space-48);padding-top:var(--space-24);border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:var(--space-16);justify-content:space-between;font-size:.8125rem;color:var(--fg-muted)}

/* -------------------------------------------------------------- legal -- */
.legal{max-width:var(--container-narrow);margin-inline:auto}
.legal h1{font-size:clamp(2rem,1.5rem + 2vw,2.75rem)}
.legal h2{font-size:1.5rem;margin-top:var(--space-48)}
.legal h3{font-size:1.0625rem;margin-top:var(--space-32)}
.legal p,.legal li{color:var(--fg-secondary);font-size:1rem;line-height:1.7}
.legal ul{max-width:var(--measure);padding-left:var(--space-24)}
.legal li{margin-bottom:var(--space-8)}

/* ------------------------------------------------------------- motion -- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .meter__fill{transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   16. Utilities
   These exist so the HTML carries no inline style="" attributes, which lets
   the Content-Security-Policy keep style-src 'self' with no 'unsafe-inline'.
   ========================================================================== */
.mt-0{margin-top:0}
.mt-12{margin-top:var(--space-12)}
.mt-20{margin-top:var(--space-20)}
.mt-24{margin-top:var(--space-24)}
.mt-32{margin-top:var(--space-32)}
.mt-40{margin-top:var(--space-40)}
.mb-24{margin-bottom:var(--space-24)}
.measure{max-width:var(--measure)}
.note-center{margin-top:var(--space-32);text-align:center;max-width:none;color:var(--fg-muted)}
.grid--top{align-items:start}
.gap-40{gap:var(--space-40)}
.gap-48{gap:var(--space-48)}
.gap-64{gap:var(--space-64)}
.pad-xl{padding-block:var(--space-128)}

/* ==========================================================================
   17. MOBILE PASS
   Everything below 620px. Above it, the only rules that can match are the
   display:none declarations in this first block, and every class they name
   is new to the codebase — grep confirms zero occurrences before this pass.
   Appended last on purpose: equal-specificity conflicts resolve here.
   ========================================================================== */

/* -- paired copy: the desktop string is never edited, a mobile sibling is
      added beside it and revealed only below the breakpoint -------------- */
.only-mob{display:none}
.cta-tight{display:none}
.fico{display:none}
.bento__head{display:none}
.field__brief{display:none}
.tile__brief{display:none}
.mcta{display:none}

/* -- disclosure wrapper: a zero-effect block box at every width ---------- */
.disclose{display:block;margin:0;padding:0;border:0;background:none}
.disclose > summary{display:none}

/* The step variant's summary carries the visible <h4>, so it must render at
   every width. Margin is stated explicitly rather than left to collapse
   through the summary, so geometry is identical with or without collapsing. */
.disclose--step > summary{display:block;list-style:none;padding:0;margin:0 0 var(--space-6)}
.disclose--step > summary::-webkit-details-marker{display:none}
.disclose--step > summary h4{margin-bottom:0}

/* A wrapper changes :last-child. Rather than repair that, the wrapper takes
   the margin the wrapped block used to carry and the inner last child takes
   zero, which sums to the original in both the collapsing and the
   non-collapsing case. .field:last-child{margin-bottom:0} already exists at
   line 428 and does the inner half for free. */
.mt-24 > .disclose{margin-bottom:var(--space-20)}
.mt-24 > .disclose:last-child{margin-bottom:0}
.offer > .disclose{margin-bottom:var(--space-20)}
.offer > .disclose > p:last-child{margin-bottom:0}
/* .step > .disclose replaces a <div> that had no margin: base 0 is correct. */
@media (max-width:620px){

/* ============================================================== 1. hero == */
.hero{padding-block:var(--space-48) var(--space-56)}
/* minmax(0,1fr) and min-width:0 are load-bearing: 1fr's automatic minimum is
   max-content, and without this the overflow-x:auto chip row forces the hero
   column open and the card renders wider than the viewport, silently clipped
   by body{overflow-x:hidden}. */
.hero__inner{grid-template-columns:minmax(0,1fr);gap:var(--space-28)}
.hero__inner > *{min-width:0}
.badge{margin-bottom:var(--space-16)}
.hero h1{margin-bottom:var(--space-20)}          /* size unchanged: 40.8px */
.hero .lede{font-size:1.0625rem;line-height:1.5}

.hero .actions{margin-top:var(--space-16);flex-wrap:nowrap;gap:var(--space-10)}
.hero .actions .btn{flex:1 1 0;min-width:0;padding-inline:var(--space-12);font-size:.9375rem}
.cta-full{display:none}
.cta-tight{display:block}

/* the signal row: five existing .chip components, horizontally scrolling.
   Negative margin + matching padding lets it bleed to the viewport edge while
   the first chip still aligns to the text column. The mask is what makes it
   read as scrollable rather than as a rendering error. */
.hero .signalrow{
  display:flex;gap:var(--space-6);list-style:none;
  margin:var(--space-16) 0 0;padding:0 var(--space-20) 2px;
  margin-inline:calc(var(--space-20) * -1);
  overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
          mask-image:linear-gradient(90deg,#000 84%,transparent);
}
.hero .signalrow::-webkit-scrollbar{display:none}
.hero .signalrow li{flex:none}

/* Break the single 350px text column that every other block shares. The card
   is a depiction of software; showing it edge-to-edge is the cue that it is
   on a different plane from the prose. 350px -> 374px at 390px viewport. */
.hero__visual{margin-inline:-12px}

/* ===================================================== 2. section shell == */
/* supersedes @media (max-width:760px){section{padding-block:var(--space-80)}}
   at line 107 for this band only; 621-760px keeps 80px. */
section{padding-block:var(--space-56)}
.section-head{margin-bottom:var(--space-32);max-width:none}
h2{font-size:1.75rem;line-height:1.15}
.lede{font-size:1.0625rem;line-height:1.55}
.eyebrow{margin:0 0 var(--space-14)}

/* touch has no hover; the lift reads as a glitch on tap */
.tile:hover,.offer:hover{transform:none}
/* ========================================================== 3. field sheet */
/* Eight tiles stop being eight cards and become eight rows of one card: the
   record with eight fields that the product actually produces. One border and
   one background on screen instead of eight, plus a column of eight 28px
   accent glyphs, which is the page's first non-typographic vertical rhythm
   below the hero. ~1.2% of viewport area, so the accent budget is intact. */
.bento{
  display:block;gap:0;
  background:linear-gradient(180deg,var(--bg-card),var(--bg-raised));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-card);
}
.bento__head{
  display:block;margin:0;max-width:none;
  padding:var(--space-12) var(--space-16);
  background:var(--bg-well);border-bottom:1px solid var(--border);
  font-family:var(--font-mono);font-weight:500;font-size:.625rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg-muted);line-height:1.4;
}
.bento .tile{
  display:grid;grid-template-columns:28px 1fr;
  column-gap:var(--space-14);row-gap:var(--space-2);align-items:start;
  background:none;border:0;border-top:1px solid var(--border);border-radius:0;
  box-shadow:none;padding:var(--space-14) var(--space-16);overflow:visible;
}
.bento .bento__head + .tile{border-top:0}
.bento .tile:hover{transform:none;border-color:var(--border)}
.bento .fico{
  display:flex;align-items:center;justify-content:center;
  grid-column:1;grid-row:1 / span 2;
  width:28px;height:28px;margin-top:2px;
  border-radius:var(--radius-sm);background:var(--accent-dim);
  border:1px solid var(--accent-line);color:var(--accent);
}
/* THE SPECIFICITY FIX. .bento .field__label is (0,2,0) and beats .tile p
   (0,1,1) on class count. Do NOT write .bento .tile p anywhere in this file:
   at (0,2,1) it would outrank this rule and the labels would go grey again. */
.bento .field__label{grid-column:2;margin:0;font-size:.6875rem;line-height:1.5;color:var(--accent)}
.bento .field__full{display:none}
.bento .field__brief{
  grid-column:2;display:block;margin:0;max-width:none;
  font-size:.9375rem;line-height:1.45;color:var(--fg-secondary);
}
/* =================================================== 4. problem: 3 cards == */
/* Three is a legitimate set, so these stay cards. What changes is that each
   one gains internal structure: a header row (icon + heading) over a body,
   instead of being a top-to-bottom stack of three unrelated things. */
#problem .grid{gap:var(--space-14)}
#problem .tile{
  display:grid;grid-template-columns:30px 1fr;
  column-gap:var(--space-14);row-gap:var(--space-10);
  align-items:center;padding:var(--space-20);
}
#problem .tile__ico{grid-column:1;grid-row:1;width:30px;height:30px;margin:0;border-radius:var(--radius-sm)}
#problem .tile h4{grid-column:2;grid-row:1;margin:0;font-size:1rem;line-height:1.35}
#problem .tile > p:not(.tile__brief){display:none}
#problem .tile__brief{grid-column:1 / -1;grid-row:2;display:block;margin:0;font-size:.9375rem;line-height:1.5}

/* ================================================ 5. stage: one rail ====== */
/* These four are a sequence, not a set, so they lose the card chrome and
   become one drawing with four stations. The connecting line is graphic
   information (these happen in order), not decoration, and the four existing
   icons get promoted from decorations inside boxes to structural nodes. */
#stage .grid{gap:0}
#stage .tile{
  display:grid;grid-template-columns:34px 1fr;column-gap:var(--space-16);
  align-items:start;background:none;border:0;border-radius:0;box-shadow:none;
  padding:0 0 var(--space-28);
}
#stage .tile:last-child{padding-bottom:0}
#stage .tile:hover{transform:none;border-color:transparent}
/* per-tile connector rather than one on the container, so the line terminates
   exactly at the last node instead of fading out mid-paragraph. .tile is
   already position:relative and the segment stays inside the tile's box, so
   its overflow:hidden does not clip it. */
#stage .tile:not(:last-child)::before{
  content:"";position:absolute;left:17px;top:38px;bottom:0;width:1px;background:var(--border-strong);
}
#stage .tile__ico{
  grid-column:1;grid-row:1 / span 2;width:34px;height:34px;margin:0;border-radius:50%;
  /* layered, because --accent-dim is 12% alpha and the rail would show
     through a single-layer node */
  background:linear-gradient(var(--accent-dim),var(--accent-dim)),var(--bg-base);
  border-color:var(--accent-line);color:var(--accent);
}
#stage .tile h4{grid-column:2;margin:0 0 var(--space-6);padding-top:var(--space-6);font-size:1rem;line-height:1.4}
#stage .tile > p:not(.tile__brief){display:none}
#stage .tile__brief{grid-column:2;display:block;margin:0;font-size:.9375rem;line-height:1.55;color:var(--fg-secondary)}

/* ============================================ 6. how: a numbered index ==== */
/* Supersedes @media (max-width:620px){.step{grid-template-columns:1fr}} at
   line 311, which threw away the 01-06 rail — the strongest rhythm device the
   page already owns — to save nothing. A 40px badge plus 16px gap plus 40px
   padding leaves 294px of text column at 390px, which is workable. */
.steps{gap:var(--space-12)}
.step{grid-template-columns:auto 1fr;gap:var(--space-16);padding:var(--space-20)}
.step:hover{border-color:var(--border)}
.disclose--step > summary{position:relative;cursor:pointer;padding-right:var(--space-32)}
.disclose--step > summary::after{
  content:"";position:absolute;right:var(--space-4);top:.7em;width:9px;height:9px;
  border-right:1.5px solid var(--fg-muted);border-bottom:1.5px solid var(--fg-muted);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.disclose--step[open] > summary::after{transform:translateY(-30%) rotate(225deg);border-color:var(--accent)}
.disclose--step[open] > summary{margin-bottom:var(--space-12)}
/* ================================================== 7. disclosure rows ==== */
/* Collapsed, a panel reads as a mono accent label, a grey digest line and a
   chevron: the same visual language as .field__label and .card__chrome. That
   is the point — a run of prose becomes an instrument row. */
.disclose > summary{
  display:block;position:relative;cursor:pointer;list-style:none;
  padding:var(--space-12) var(--space-40) var(--space-12) var(--space-14);
  margin:0 0 var(--space-4);
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--bg-well);
  -webkit-tap-highlight-color:rgba(56,189,248,.10);
}
.disclose > summary::-webkit-details-marker{display:none}
.disclose[open] > summary{background:transparent;border-color:transparent;padding-left:0;margin-bottom:var(--space-8)}
.disclose__title{
  display:block;font-family:var(--font-mono);font-weight:500;font-size:.6875rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent);
}
.disclose__peek{
  display:block;margin-top:var(--space-4);font-size:.8125rem;line-height:1.45;
  color:var(--fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.disclose[open] .disclose__peek{display:none}
.disclose > summary::after{
  content:"";position:absolute;right:var(--space-14);top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--fg-muted);border-bottom:1.5px solid var(--fg-muted);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.disclose[open] > summary::after{transform:translateY(-30%) rotate(225deg);border-color:var(--accent);right:var(--space-4)}
.disclose--draft .disclose__peek{font-family:var(--font-mono);font-size:.75rem}

/* ================================================= 8. tables as sheets ==== */
/* .table td:first-child{white-space:nowrap} currently forces a fixed first
   column and squeezes the description into a ribbon inside a scroll box.
   Recast the first column as an accent mono label and the two tables read as
   instrument output in the same language as .field__label. Real table layout
   is kept, so the implicit ARIA roles survive; the display:block stacked-card
   pattern would drop them and make both tables taller. */
.table-scroll{border:0;background:none;border-radius:0;overflow-x:visible}
.table{margin:var(--space-20) 0 0}
.table th{padding-left:0}
.table th + th{padding-left:var(--space-14)}
.table td{padding:var(--space-12) 0;font-size:.875rem;line-height:1.5}
.table td + td{padding-left:var(--space-14)}
.table td:first-child{
  white-space:normal;width:38%;padding-right:var(--space-14);vertical-align:top;
  font-family:var(--font-mono);font-weight:500;font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
}

/* ================================================= 9. one accent band ==== */
/* The only full colour change on the page, arriving at roughly the two-thirds
   point of the scroll, which is where a long page needs a signal that it has
   moved on. #crm is the right candidate: short, sits between the two heaviest
   sections, and has no eyebrow/heading/lede/grid shape to fight. Precedent for
   the device is .hero__glow, which already paints rgba(0,72,252,.20) across the
   whole hero. .12 is the number to tune first if it reads as too much. */
#crm{
  background:linear-gradient(180deg,rgba(0,72,252,.12),rgba(0,72,252,.04) 55%,transparent);
  border-top:1px solid var(--accent-line);
  border-bottom:1px solid var(--accent-line);
}
#crm.rule-top::before{display:none}   /* the band's own border replaces it */
#crm .callout{background:rgba(8,9,11,.55)}

/* ===================================================== 10. pull quote ==== */
.pull{
  margin:var(--space-40) 0 0;padding:0;border-left:0;max-width:none;
  text-align:center;font-size:1.375rem;line-height:1.35;
}
.pull::before{
  content:"";display:block;width:28px;height:2px;background:var(--accent);
  margin:0 auto var(--space-20);box-shadow:0 0 12px var(--accent-glow);
}

/* ================================================ 11. sticky CTA bar ===== */
/* On a page this long the only persistent call to action is a nav button the
   thumb cannot reach. This is also the only piece of interface chrome that is
   on screen at every scroll position, which is what keeps the page reading as
   a product rather than a document. The 1px progress hairline answers the one
   thing the page currently withholds entirely: where am I. */
.mcta{
  display:flex;align-items:center;gap:var(--space-12);
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:var(--space-12) var(--space-20);
  padding-bottom:calc(var(--space-12) + env(safe-area-inset-bottom));
  background:rgba(8,9,11,.88);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--border);
  transform:translateY(115%);transition:transform var(--dur) var(--ease);
}
body[data-cta="on"] .mcta{transform:none}
body[data-cta="on"]{padding-bottom:76px}
body[data-cta="on"] .nav__cta{display:none}   /* exactly one primary action */
.mcta__line{
  flex:1;min-width:0;line-height:1.3;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-muted);
}
.mcta .btn{flex:none}
.mcta__prog{
  position:absolute;left:0;top:-1px;height:1px;width:var(--prog,0%);
  background:var(--accent);box-shadow:0 0 8px var(--accent-glow);
}

} /* ================================ end @media (max-width:620px) ========= */

/* -- paired copy visibility. These two lines are what actually swaps the
      desktop string for the mobile one; without them .only-desk stays visible
      and the trimmed lede never appears. Appended last so they win on source
      order against any equal-specificity rule above. ---------------------- */
@media (max-width:620px){
  .only-desk{display:none}
  .only-mob{display:inline}
  .field__full{display:none}
  .field__brief{display:block}
  .tile__full{display:none}
}

/* ==========================================================================
   18. MOBILE ATMOSPHERE
   The hero has a radial brand glow; every other section is flat near-black,
   which is a large part of why the page reads as an undifferentiated column.
   These add depth with no markup and no content. Mobile-only: desktop is
   approved as-is.
   ========================================================================== */
@media (max-width:620px){

  /* Alternating sections get a soft brand wash anchored to their top edge.
     Very low alpha on purpose: this is depth, not decoration, and it must not
     compete with the accent used on labels and scores. */
  /* overflow-x:clip, NOT hidden: `hidden` would make each section a scroll
     container and break position:sticky for anything inside it. `clip` just
     clips. Without this the -20% inset on the glow below pushes the document
     79px wider than the viewport. */
  section{position:relative;isolation:isolate;overflow-x:clip}
  section:nth-of-type(odd)::before,
  section:nth-of-type(even)::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    inset-inline:-20%;top:-6%;height:46%;
  }
  section:nth-of-type(odd)::before{
    background:radial-gradient(ellipse 60% 100% at 22% 0%,rgba(0,72,252,.10),transparent 70%);
  }
  section:nth-of-type(even)::before{
    background:radial-gradient(ellipse 60% 100% at 78% 0%,rgba(56,189,248,.08),transparent 70%);
  }

  /* A faint grid behind the two instrument-register sections, so the panels
     read as sitting on a surface rather than floating in void. */
  #feed::after,#example::after{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:0;
    background-image:linear-gradient(var(--border) 1px,transparent 1px),
                     linear-gradient(90deg,var(--border) 1px,transparent 1px);
    background-size:52px 52px;
    -webkit-mask-image:radial-gradient(ellipse 90% 50% at 50% 18%,#000 10%,transparent 72%);
    mask-image:radial-gradient(ellipse 90% 50% at 50% 18%,#000 10%,transparent 72%);
    opacity:.5;
  }

  /* The section rules are currently a flat hairline across the full width.
     Give them a lit centre so each section boundary reads as a deliberate
     seam rather than a gap. */
  .rule-top::before{
    background:linear-gradient(90deg,transparent,var(--accent-line) 30%,var(--accent-line) 70%,transparent);
    opacity:.7;
  }
}