/* ==========================================================================
   LeadLab — aileadlabinc.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-delay:0ms!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)}
/* ================================================== 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;
  }
}

/* ==========================================================================
   19. SET-PIECES — four figures for the mobile page
   Appended after section 18. Mobile-only by construction: every new element
   is display:none by default and switched on inside @media (max-width:620px),
   so the approved desktop layout is byte-for-byte unchanged.

   ONE SHARED VOCABULARY (what was reconciled across the four designs):
   - every figure is a .card + .card__chrome, never a re-implemented panel;
   - one blue->cyan ramp, --ramp-1..7, declared once and used by two figures;
   - one mono label spec (.fig__lbl) = the existing .field__label spec;
   - one bar family: track = .meter (bg-well + 1px border + pill radius),
     fill always carries the accent glow. Nothing else draws a bar;
   - radius ladder: <=10px objects 2px, 12-20px --radius-sm, 28-44px nodes
     --radius-md, panels --radius-lg, figures --radius-xl;
   - one "illustrative" affordance for figures (.fig__illus, a single mono
     line). The full .sample-label box stays reserved for #example;
   - zero new JavaScript and zero new IntersectionObservers. Every figure
     hangs off the .reveal -> .in observer that already exists in site.js,
     and every animated element's BASE state is its finished state, running
     with animation-fill-mode:backwards. No JS, no observer, no motion: the
     reader still gets the complete, truthful figure.
   ========================================================================== */

:root{
  /* the logo ramp, #0048FC -> #38BDF8, linearly interpolated at 7 stops.
     Declared once here; #score and #how both consume it. */
  --ramp-1:#0048FC;--ramp-2:#095CFB;--ramp-3:#136FFB;--ramp-4:#1C83FA;
  --ramp-5:#2596FA;--ramp-6:#2FAAF9;--ramp-7:#38BDF8;
}

/* -- mobile-only switches. Same pattern as .only-mob in section 17. ------ */
.fig{display:none}
.fig__illus{display:none}
.flow__in{display:none}
.flow__out{display:none}
.step__node{display:none}
.step__flag{display:none}
.flow__note{display:none}

@media (max-width:620px){

/* the desktop tables and pill lists these figures replace */
.deskonly{display:none}

/* ============================================== shared figure chassis ==== */
/* .fig rides .card, so border, radius, gradient, shadow and the top hairline
   all come from the existing component. Only the new parts are declared. */
.fig{display:block;margin:var(--space-24) 0 0;margin-inline:-12px}
.fig__plate{background:var(--bg-well);border-block:1px solid var(--border);line-height:0}
.fig__svg{width:100%;height:auto}
.fig__body{padding:var(--space-16)}
.fig__of{margin-left:auto;color:var(--fg-faint);letter-spacing:.06em;text-transform:none}

/* the ONE mono label spec in the figure system: identical to .field__label */
.fig__lbl{
  font-family:var(--font-mono);font-weight:500;font-size:.625rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent);
}
.fig__val{font-family:var(--font-mono);font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--fg-secondary)}

.fig__cap{
  padding:var(--space-12) var(--space-16) var(--space-14);
  border-top:1px solid var(--border);background:var(--bg-well);
  font-size:.8125rem;line-height:1.55;color:var(--fg-muted);
}
.fig__cap strong,.fig__cap b{color:var(--fg-secondary);font-weight:500}
.fig__cap p{max-width:none}
.fig__note{margin:var(--space-12) 0 0;max-width:none}

/* the compact illustrative flag. One line, dashed, mono — the .sample-label
   box is 3x this height and there is already one on the page. */
.fig__illus{
  display:flex;align-items:center;gap:var(--space-8);
  margin:var(--space-20) 0 0;padding:var(--space-6) var(--space-10);
  border:1px dashed var(--border-strong);border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:.625rem;line-height:1.5;
  letter-spacing:.04em;color:var(--fg-muted);max-width:none;
}
.fig__illus b{color:var(--fg-secondary);font-weight:500}

/* the shared legend row */
.fig__key{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6)}
.fig__key li{
  display:flex;align-items:center;gap:var(--space-10);
  font-family:var(--font-mono);font-size:.625rem;line-height:1.4;
  letter-spacing:.02em;color:var(--fg-muted);
}
.fig__km{position:relative;flex:none;width:16px;height:16px}
.fig__km::after{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;border-radius:50%;
}
.fig__km--inert::after{background:var(--fg-muted)}
.fig__km--live::before{content:"";position:absolute;inset:0;border:1px solid var(--accent-line);border-radius:2px}
.fig__km--live::after{background:var(--accent-hi);box-shadow:0 0 7px var(--accent-glow)}
.fig__glyph{
  position:relative;flex:none;width:11px;height:11px;
  border:1px solid var(--accent-line);border-radius:2px;
}
.fig__glyph::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 6px var(--accent-glow);
}

/* ================================================ FIGURE 1 — THE FIELD ==
   #problem. A detector plate: a dense lattice of inert marks fading out at
   every edge, a dashed region tagged MATCHES THE FILTER, and seven marks
   inside it framed by reticles — the ones where a dated, sourced event was
   found. States a mechanism. States no rate, no count and no outcome; the
   edge fade is the honesty device, because a field with no countable
   boundary cannot be read as a ratio.
   ====================================================================== */
.llf-plate{fill:var(--bg-well)}
.llf-d{fill:var(--fg-muted)}
.llf-d--a{opacity:.9}
.llf-d--b{opacity:.62}
.llf-d--c{opacity:.78}
.llf-d--d{opacity:.55}
.llf-field{opacity:.5}
.llf-field--in{opacity:.55}
.llf-f0{stop-color:#fff}
.llf-f1{stop-color:#000}
.llf-boxfill{fill:var(--fg-primary);opacity:.025}
.llf-box{fill:none;stroke:var(--fg-faint);stroke-width:1;stroke-dasharray:4 3.5}
.llf-tagbg{fill:var(--bg-well)}
.llf-tag{
  font-family:var(--font-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.07em;fill:var(--fg-secondary);
}
/* base state is LIT: no-JS, no-IntersectionObserver and reduced-motion all
   land on the finished figure rather than an empty grey plate. */
.llf-hit{color:var(--accent);opacity:1;stroke-dashoffset:0}
.llf-halo{fill:url(#llf-halog)}
.llf-dot{fill:var(--accent-hi)}
.llf-h0{stop-color:var(--accent);stop-opacity:.42}
.llf-h1{stop-color:var(--accent);stop-opacity:.15}
.llf-h2{stop-color:var(--accent);stop-opacity:0}
.llf-sweep{opacity:0}
.llf-s0{stop-color:var(--accent);stop-opacity:0}
.llf-s1{stop-color:var(--accent);stop-opacity:.15}

@keyframes llf-sweep{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(406px);opacity:0}
}
@keyframes llf-lite{from{opacity:0}to{opacity:1}}
@keyframes llf-draw{from{stroke-dashoffset:8}to{stroke-dashoffset:0}}

/* delays = 420ms + x * 3.448ms, i.e. each mark lights as the sweep reaches it */
.fig--field.in .llf-sweep{animation:llf-sweep 1400ms linear 420ms both}
.fig--field.in .llf-hit{
  animation:llf-lite 420ms var(--ease) backwards,
            llf-draw 380ms var(--ease) backwards;
  stroke-dasharray:8;
}
.fig--field.in .llf-hit:nth-child(1){animation-delay:637ms}
.fig--field.in .llf-hit:nth-child(2){animation-delay:782ms}
.fig--field.in .llf-hit:nth-child(3){animation-delay:879ms}
.fig--field.in .llf-hit:nth-child(4){animation-delay:1072ms}
.fig--field.in .llf-hit:nth-child(5){animation-delay:1168ms}
.fig--field.in .llf-hit:nth-child(6){animation-delay:1265ms}
.fig--field.in .llf-hit:nth-child(7){animation-delay:1313ms}

/* =========================================== FIGURE 2 — SCORE ANATOMY ==
   #score. Replaces the seven-row component table and the loose band pills.
   Three bars on one shared 0-100 axis: the score, the score split into its
   seven NAMED parts, and the five bands drawn to scale — which is the one
   structural fact the pill list actively conceals, that "research & hold"
   owns 60% of the number line and "act now" owns 10%.

   HONESTY, and this is the part that was cut from the submitted design:
   the seven blocks are EQUAL WIDTH (100%/7). The original drew them at
   19.1% / 17.0% / 16.0% / 11.7% / 12.8% / 12.8% / 10.6% and gave every row
   its own meter at 92/82/77/56/62/62/51%. A bar is a number whether or not
   digits are printed beside it: those seventeen values are a component
   weighting LeadLab has never published and, pre-launch, does not have.
   Equal blocks assert only what is true and what the section actually
   claims — the score is composed of these seven named parts, in this order.
   The only numerals in the figure are 94 (already printed on the sample
   card 200px above), 0/60/70/80/90/100 and the five band names, which are
   the published definition of the scale.
   ====================================================================== */
.fig--score{--sc-score:94%}
.sc__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);
  padding-bottom:var(--space-16);margin-bottom:var(--space-16);
  border-bottom:1px solid var(--border);
}
.sc__possible{
  margin:0;max-width:none;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.06em;color:var(--fg-faint);white-space:nowrap;
}
.sc-plot{position:relative;padding-top:9px}
/* the readout hairline: ties the three bars together at the score */
.sc-plot::after{
  content:"";position:absolute;left:var(--sc-score);top:9px;bottom:19px;width:1px;
  background:linear-gradient(180deg,var(--accent-hi),rgba(56,189,248,.22));
  opacity:.75;
}
.sc-plot__caret{
  position:absolute;left:var(--sc-score);top:0;transform:translateX(-50%);
  color:var(--accent-hi);line-height:0;
}
.sc-plot__meter{margin-top:0}
.sc-plot__fill{
  height:100%;width:var(--sc-score);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);
}
/* the same 94, taken apart. The hatch showing through past the strip is the
   six points not awarded — derived from a number the page already prints. */
.sc-comp{
  height:14px;margin-top:5px;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  background-color:var(--bg-well);
  background-image:repeating-linear-gradient(-45deg,rgba(169,179,180,.11) 0 1px,transparent 1px 5px);
  box-shadow:0 0 18px rgba(56,189,248,.12);
}
.sc-comp__strip{display:flex;height:100%;width:var(--sc-score);border-radius:var(--radius-pill);overflow:hidden}
.sc-comp__strip > i{
  flex:1 1 0;display:block;height:100%;min-width:0;
  background-image:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 62%);
}
.sc-comp__strip > i + i{border-left:1px solid var(--bg-base)}
.sc-comp__strip > [data-c="fit"]     {background-color:var(--ramp-1)}
.sc-comp__strip > [data-c="signal"]  {background-color:var(--ramp-2)}
.sc-comp__strip > [data-c="timing"]  {background-color:var(--ramp-3)}
.sc-comp__strip > [data-c="value"]   {background-color:var(--ramp-4)}
.sc-comp__strip > [data-c="dm"]      {background-color:var(--ramp-5)}
.sc-comp__strip > [data-c="contact"] {background-color:var(--ramp-6)}
.sc-comp__strip > [data-c="research"]{background-color:var(--ramp-7)}

/* the five bands, to scale on the same axis */
.sc-scale{display:flex;height:7px;margin-top:10px;border-radius:2px;overflow:hidden;background:var(--bg-well)}
.sc-scale > span{flex:0 0 auto;display:block;height:100%}
.sc-scale > span + span{border-left:1px solid var(--bg-base)}
.sc-scale > [data-b="hold"] {width:60%;background:#14181A}
.sc-scale > [data-b="watch"]{width:10%;background:#1B2226}
.sc-scale > [data-b="qual"] {width:10%;background:#243035}
.sc-scale > [data-b="high"] {width:10%;background:#2F3F46}
.sc-scale > [data-b="act"]  {width:10%;background:var(--accent);box-shadow:0 0 14px var(--accent-glow)}

.sc-axis{
  position:relative;height:13px;margin-top:var(--space-6);
  font-family:var(--font-mono);font-size:.5625rem;line-height:13px;color:var(--fg-faint);
}
.sc-axis > span{position:absolute;top:0;transform:translateX(-50%)}
.sc-axis > [data-t="0"]  {left:0;transform:none}
.sc-axis > [data-t="60"] {left:60%}
.sc-axis > [data-t="70"] {left:70%}
.sc-axis > [data-t="80"] {left:80%}
.sc-axis > [data-t="90"] {left:90%}
.sc-axis > [data-t="100"]{left:100%;transform:translateX(-100%)}

/* existing .bands component, compacted, with a swatch matching the zone */
.sc-bands{margin-top:var(--space-16);gap:var(--space-6)}
.sc-bands li{
  display:inline-flex;align-items:center;gap:var(--space-6);
  font-size:.6875rem;padding:var(--space-4) var(--space-10);background:var(--bg-well);
}
.sc-bands li i{width:8px;height:8px;border-radius:2px;flex:none}
.sc-bands li[data-b="act"]   i{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.sc-bands li[data-b="high"]  i{background:#2F3F46}
.sc-bands li[data-b="qual"]  i{background:#243035}
.sc-bands li[data-b="watch"] i{background:#1B2226}
.sc-bands li[data-b="hold"]  i{background:#14181A;box-shadow:inset 0 0 0 1px var(--border)}

.sc__legend{
  display:flex;align-items:center;gap:var(--space-10);max-width:none;
  margin:var(--space-20) 0 var(--space-12);color:var(--fg-muted);
}
.sc__legend::after{content:"";flex:1;height:1px;background:var(--border)}

.sc-parts{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-12)}
.sc-part{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:baseline;column-gap:var(--space-8)}
.sc-part__n{font-family:var(--font-mono);font-size:.625rem;color:var(--fg-faint)}
.sc-part__sw{width:8px;height:8px;border-radius:2px;flex:none;align-self:center}
.sc-part[data-c="fit"]      .sc-part__sw{background:var(--ramp-1)}
.sc-part[data-c="signal"]   .sc-part__sw{background:var(--ramp-2)}
.sc-part[data-c="timing"]   .sc-part__sw{background:var(--ramp-3)}
.sc-part[data-c="value"]    .sc-part__sw{background:var(--ramp-4)}
.sc-part[data-c="dm"]       .sc-part__sw{background:var(--ramp-5)}
.sc-part[data-c="contact"]  .sc-part__sw{background:var(--ramp-6)}
.sc-part[data-c="research"] .sc-part__sw{background:var(--ramp-7)}
/* provenance colour borrowed from the chips on the sample card: green is a
   read fact, amber is an inference. It is carried by text, never by length. */
.sc-part__val{justify-self:end;white-space:nowrap}
.sc-part__val--ok{color:var(--success)}
.sc-part__val--warn{color:var(--warning)}

/* draw-in. Base state is the finished figure; the animation runs from 0 with
   fill-mode backwards, so a script failure leaves it whole, never half-drawn. */
@keyframes sc-grow{from{width:0}}
@keyframes sc-fade{from{opacity:0}}
.fig--score.in .sc-plot__fill{animation:sc-grow 1.05s var(--ease) backwards}
.fig--score.in .sc-comp__strip{animation:sc-grow 1.05s var(--ease) .12s backwards}
.fig--score.in .sc-plot__caret{animation:sc-fade .45s var(--ease) 1.05s backwards}

/* =========================================== FIGURE 3 — PIPELINE RAIL ==
   #how. Six cards become one mechanism: a 44px rail column carrying a
   blue-to-cyan spine, a masked hairline band beside it for the candidates
   still in flight, a hard constriction at step 03 — the step whose own prose
   says "the value is in what doesn't reach your reps" — and a single filled
   terminus. The band is a texture at a fixed pitch, not a count; the intake
   fan fades out at the top for the same reason the field plate fades at its
   edges, so nothing entering the rail is countable. A note under the figure
   says so in words.
   SUPERSEDES section 17's "6. how: a numbered index" block, which must be
   deleted rather than layered on.
   ====================================================================== */
.flow{
  position:relative;
  --flow-col:44px;
  --band-w:20px;
  --spine-w:3px;
}
.flow__in{
  display:grid;grid-template-columns:var(--flow-col) minmax(0,1fr);
  column-gap:var(--space-8);align-items:center;
  position:relative;padding-top:var(--space-16);
}
.flow__in::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--border-strong) 18%,var(--border-strong) 82%,transparent);
}
.flow__fan{
  display:block;width:var(--flow-col);height:44px;
  background:linear-gradient(180deg,rgba(0,72,252,0),var(--ramp-1) 62%,var(--ramp-2));
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px);
          mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px);
  clip-path:polygon(0 0,100% 0,72.7% 100%,27.3% 100%);
}
.flow__cap{
  font-family:var(--font-mono);font-weight:500;font-size:.625rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-muted);
}
.flow__cap--out{color:var(--accent)}

.flow .steps{margin:0;gap:var(--space-12)}
.flow .step{
  position:relative;display:grid;
  grid-template-columns:var(--flow-col) minmax(0,1fr);
  column-gap:var(--space-8);align-items:start;
  background:none;border:0;border-radius:0;padding:0;
}
.flow .step:hover{border-color:transparent}
/* .reveal stays on the six <li> so desktop is untouched, but the 18px
   translate would tear the rail apart mid-fade. Opacity only, below 620px. */
.flow .step.reveal{transform:none}

.flow .step:nth-child(1){--rail-a:var(--ramp-1);--rail-b:var(--ramp-2)}
.flow .step:nth-child(2){--rail-a:var(--ramp-2);--rail-b:var(--ramp-3)}
.flow .step:nth-child(3){--rail-a:var(--ramp-3);--rail-b:var(--ramp-4)}
.flow .step:nth-child(4){--rail-a:var(--ramp-4);--rail-b:var(--ramp-5)}
.flow .step:nth-child(5){--rail-a:var(--ramp-5);--rail-b:var(--ramp-6)}
.flow .step:nth-child(6){--rail-a:var(--ramp-6);--rail-b:var(--ramp-7)}

.flow .step::before{
  content:"";position:absolute;z-index:0;
  top:0;bottom:calc(var(--space-12) * -1);
  left:calc((var(--flow-col) - var(--band-w)) / 2);width:var(--band-w);
  background:linear-gradient(180deg,var(--rail-a),var(--rail-b));
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px);
          mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px);
  opacity:.9;
}
.flow .step::after{
  content:"";position:absolute;z-index:0;
  top:0;bottom:calc(var(--space-12) * -1);
  left:calc((var(--flow-col) - var(--spine-w)) / 2);width:var(--spine-w);
  border-radius:2px;
  background:linear-gradient(180deg,var(--rail-a),var(--rail-b));
  box-shadow:0 0 14px rgba(56,189,248,.18);
}
/* the constriction. px, not %, so the cone stays welded to the badge when a
   <details> opens and the row grows 200px. */
.flow .step--gate{min-height:82px}
.flow .step--gate::before{
  background:
    linear-gradient(180deg,transparent 0 46px,var(--accent-hi) 46px 47px,transparent 47px),
    linear-gradient(180deg,var(--rail-a),var(--rail-b));
  clip-path:polygon(0 0,100% 0,100% 50px,50% 76px,0 50px);
}
.flow .step--gate ~ .step::before{content:none}

.flow .step__mark{
  position:relative;z-index:2;width:var(--flow-col);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-6);
}
.flow .step__mark::after{
  content:"";position:absolute;top:18px;left:40px;width:12px;height:1px;
  background:var(--border-strong);
}
.flow .step__node{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:var(--radius-md);color:var(--accent);
  border:1px solid var(--accent-line);
  background:linear-gradient(var(--accent-dim),var(--accent-dim)),var(--bg-base);
  box-shadow:0 0 0 4px var(--bg-base);
}
.flow .step__node svg{width:18px;height:18px}
.flow .step--gate .step__node{
  border-color:rgba(56,189,248,.55);
  box-shadow:0 0 0 4px var(--bg-base),0 0 20px var(--accent-glow);
}
.flow .step__num{
  width:auto;height:auto;padding:0;border:0;border-radius:0;background:none;
  font-size:.625rem;font-weight:500;letter-spacing:.12em;color:var(--accent);
}
.flow .disclose--step{
  background:linear-gradient(180deg,var(--bg-card),var(--bg-raised));
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
}
.flow .disclose--step > summary{
  position:relative;cursor:pointer;margin:0;
  padding:var(--space-12) var(--space-32) var(--space-12) var(--space-14);
  list-style:none;
}
.flow .disclose--step > summary::-webkit-details-marker{display:none}
.flow .disclose--step[open] > summary{margin:0;padding-bottom:var(--space-8)}
.flow .disclose--step > summary::after{
  content:"";position:absolute;right:var(--space-12);top:1.5em;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);
}
.flow .disclose--step[open] > summary::after{transform:translateY(-30%) rotate(225deg);border-color:var(--accent)}
.flow .disclose--step > p{padding-inline:var(--space-14)}
.flow .disclose--step > p:last-child{padding-bottom:var(--space-14)}
/* the page's own sentence about step 03, promoted to a label on the figure */
.flow .step__flag{
  display:inline-flex;align-items:center;margin-top:var(--space-8);
  font-family:var(--font-mono);font-weight:500;font-size:.625rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:var(--accent);background:var(--accent-dim);
  border:1px solid var(--accent-line);border-radius:var(--radius-pill);
  padding:1px var(--space-8);
}
/* the only filled node on the rail. A record glyph, deliberately not a tick:
   the claim is that one opportunity arrives with its evidence, never that it
   closed. */
.flow__out{
  display:grid;grid-template-columns:var(--flow-col) minmax(0,1fr);
  column-gap:var(--space-8);align-items:center;
  position:relative;padding:var(--space-12) 0 var(--space-16);
}
.flow__out::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--border-strong) 18%,var(--border-strong) 82%,transparent);
}
.flow__term{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;margin-inline:auto;border-radius:var(--radius-md);
  color:var(--fg-on-accent);
  background:linear-gradient(150deg,var(--accent-hi),var(--accent) 55%,var(--accent-deep));
  box-shadow:0 0 0 4px var(--bg-base),0 0 24px var(--accent-glow);
}
.flow__term svg{width:15px;height:15px}
.flow__note{
  display:block;margin:var(--space-12) 0 0;max-width:none;
  font-size:.75rem;line-height:1.5;color:var(--fg-muted);
}

/* ========================================== FIGURE 4 — THE RECORD SLIP ==
   #evidence. Replaces the five-row schema table with one specimen of the
   record itself, and deliberately with the HARD case: a fact LeadLab worked
   out rather than read. The five fields are the table's first column; the
   table's second column survives as .cust__def, the grey gloss on each
   label, so no information is lost.

   The submitted design shipped TWO slips (~1,360px) including a confirmed
   record carrying a fabricated link affordance — "The published
   announcement" with a dotted underline and an external-link arrow. Both
   are cut. The confirmed case is already fully visible 200px up the page in
   .evidence-footer ("Source: regional hospitality trade press · Found:
   2026-08-24 · Last verified: 2026-08-26 · Confidence: High"), so the
   second slip was 680px of duplication; and a link shape that opens nothing
   is the one element in the batch that could read as a screenshot of real
   customer data. The three-segment .ticks confidence meter is also cut: the
   product states High/Low, and three ticks invent a granularity it has not
   claimed. The existing .chip--warn "Low" carries it instead.
   Every remaining string already appears in #example — grep-verified.
   ====================================================================== */
.rcpt__stamp{
  flex:none;margin-left:auto;font-family:var(--font-mono);font-weight:600;
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  padding:5px var(--space-10);border-radius:var(--radius-sm);
  color:var(--warning);background:var(--warning-dim);
  border:1.5px dashed var(--warning-line);
  outline:1px dashed var(--warning-line);outline-offset:2px;
  transform:rotate(3deg);
}
.rcpt__claim{
  margin:0 0 var(--space-16);max-width:none;
  font-family:var(--font-serif);font-size:1rem;line-height:1.45;color:var(--fg-primary);
  padding-bottom:var(--space-14);border-bottom:1px solid var(--border);
}
.rcpt__kicker{margin:0 0 var(--space-6);max-width:none;color:var(--fg-muted)}
/* five nodes on one thread: these fields are one record, not five lines */
.cust{margin:0}
.cust__row{position:relative;padding:0 0 var(--space-12) var(--space-20)}
.cust__row:last-child{padding-bottom:0}
.cust__row::before{
  content:"";position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%;
  box-sizing:border-box;background:var(--bg-base);border:1.5px solid var(--warning);
  box-shadow:0 0 9px rgba(233,180,92,.28);
}
.cust__row::after{
  content:"";position:absolute;left:4px;top:16px;bottom:2px;width:1px;
  background:linear-gradient(180deg,var(--warning-line),var(--border-strong));
}
.cust__row:last-child::after{display:none}
.cust__k{margin:0 0 var(--space-2);line-height:1.5;color:var(--warning)}
.cust__def{
  display:block;font-family:var(--font-sans);font-weight:400;font-size:.75rem;
  line-height:1.4;letter-spacing:0;text-transform:none;color:var(--fg-muted);
}
.cust__v{margin:var(--space-4) 0 0;font-size:.875rem;line-height:1.45;color:var(--fg-primary)}
.cust__v--conf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8)}
/* an absence, drawn as an absence */
.noslot{
  display:block;padding:var(--space-8) var(--space-10);
  border:1px dashed var(--border-strong);border-radius:var(--radius-sm);
  background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.015) 6px 12px);
  font-size:.8125rem;line-height:1.4;color:var(--fg-muted);
}
.rcpt__tear{height:1px;margin-top:var(--space-14);background:repeating-linear-gradient(90deg,var(--border-strong) 0 4px,transparent 4px 9px)}

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

/* Reduced motion. The site's global block clamps animation-duration but not
   animation-delay, so a delayed `backwards` fill would still blink these
   elements out for over a second. Section 15 gets animation-delay:0ms added
   (see PATCH A); this kills the remaining ones outright, because every base
   state above is already the finished figure. */
@media (prefers-reduced-motion: reduce){
  .fig--field.in .llf-sweep,
  .fig--field.in .llf-hit,
  .fig--score.in .sc-plot__fill,
  .fig--score.in .sc-comp__strip,
  .fig--score.in .sc-plot__caret{animation:none}
  .llf-sweep{display:none}
}

/* ==========================================================================
   19. APPROVED FOR DESKTOP (2026-08-29)
   Two of the four mobile figures were strong enough to run at every width and
   Thomas approved them. Everything else stays mobile-only.
   This block DELIBERATELY changes the desktop rendering, which nothing before
   it in this file does. The baseline moves here and only here.
   ========================================================================== */

/* -- the band ruler, unscoped so it works at any width. Identical declarations
      to the copies inside section 17's media block, which become redundant. -- */
.sc-scale{display:flex;height:7px;margin-top:10px;border-radius:2px;overflow:hidden;background:var(--bg-well);border:1px solid var(--border)}
.sc-scale > span{flex:0 0 auto;display:block;height:100%}
.sc-scale > span + span{border-left:1px solid var(--bg-base)}
.sc-scale > [data-b="hold"] {width:60%;background:#14181A}
.sc-scale > [data-b="watch"]{width:10%;background:#1B2226}
.sc-scale > [data-b="qual"] {width:10%;background:#243035}
.sc-scale > [data-b="high"] {width:10%;background:#2F3F46}
.sc-scale > [data-b="act"]  {width:10%;background:var(--accent);box-shadow:0 0 14px var(--accent-glow)}
.sc-axis{position:relative;height:14px;margin-top:6px;font-family:var(--font-mono);font-size:.625rem;color:var(--fg-faint)}
.sc-axis > span{position:absolute;top:0;transform:translateX(-50%)}
.sc-axis > [data-t="0"]  {left:0;transform:none}
.sc-axis > [data-t="60"] {left:60%}
.sc-axis > [data-t="70"] {left:70%}
.sc-axis > [data-t="80"] {left:80%}
.sc-axis > [data-t="90"] {left:90%}
.sc-axis > [data-t="100"]{left:100%;transform:translateX(-100%)}

/* the desktop ruler wrapper: hidden on mobile, where the figure already has one */
.deskonly-fig{display:block;margin-top:var(--space-24);max-width:420px}
@media (max-width:620px){ .deskonly-fig{display:none} }

/* -- the field plate at desktop widths ---------------------------------- */
@media (min-width:621px){
  /* #problem's desktop layout is a 44ch lede with dead space beside it, then
     three tiles below. Put the plate in that dead space: it costs no height
     because the section head is taller than the figure. */
  #problem .container{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,400px);
    column-gap:var(--space-64);
    align-items:start;
  }
  #problem .section-head{grid-column:1;grid-row:1;margin-bottom:0}
  #problem .fig--field{
    display:block;grid-column:2;grid-row:1;margin:0;
    /* nudge down so the plate's chrome bar aligns with the lede's first line
       rather than the eyebrow above it */
    margin-top:var(--space-40);
  }
  #problem .grid--3{grid-column:1/-1;margin-top:var(--space-64)}
}

/* Below the two-column threshold but above the mobile block, the plate would
   be squeezed into a narrow column. Stack it instead. */
@media (min-width:621px) and (max-width:940px){
  #problem .container{grid-template-columns:minmax(0,1fr)}
  #problem .fig--field{grid-column:1;grid-row:2;margin-top:var(--space-32);max-width:420px}
  #problem .grid--3{grid-row:3}
}

/* -- field-figure internals, re-declared at base scope so the plate renders
      above 620px too. Identical declarations to the copies inside section 17;
      the bare `.fig{display}` rule is deliberately NOT copied, or the three
      mobile-only figures would appear on desktop. -------------------------- */
.fig__plate{background:var(--bg-well);border-block:1px solid var(--border);line-height:0}
.fig__svg{width:100%;height:auto}
.fig__body{padding:var(--space-16)}
.fig__of{margin-left:auto;color:var(--fg-faint);letter-spacing:.06em;text-transform:none}
/* the ONE mono label spec in the figure system: identical to .field__label */
.fig__lbl{font-family:var(--font-mono);font-weight:500;font-size:.625rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent);}
.fig__val{font-family:var(--font-mono);font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--fg-secondary)}
.fig__cap{padding:var(--space-12) var(--space-16) var(--space-14);
  border-top:1px solid var(--border);background:var(--bg-well);
  font-size:.8125rem;line-height:1.55;color:var(--fg-muted);}
.fig__cap strong,.fig__cap b{color:var(--fg-secondary);font-weight:500}
.fig__cap p{max-width:none}
.fig__note{margin:var(--space-12) 0 0;max-width:none}
/* the compact illustrative flag. One line, dashed, mono — the .sample-label
   box is 3x this height and there is already one on the page. */
.fig__illus{display:flex;align-items:center;gap:var(--space-8);
  margin:var(--space-20) 0 0;padding:var(--space-6) var(--space-10);
  border:1px dashed var(--border-strong);border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:.625rem;line-height:1.5;
  letter-spacing:.04em;color:var(--fg-muted);max-width:none;}
.fig__illus b{color:var(--fg-secondary);font-weight:500}
/* the shared legend row */
.fig__key{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6)}
.fig__key li{display:flex;align-items:center;gap:var(--space-10);
  font-family:var(--font-mono);font-size:.625rem;line-height:1.4;
  letter-spacing:.02em;color:var(--fg-muted);}
.fig__km{position:relative;flex:none;width:16px;height:16px}
.fig__km::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;border-radius:50%;}
.fig__km--inert::after{background:var(--fg-muted)}
.fig__km--live::before{content:"";position:absolute;inset:0;border:1px solid var(--accent-line);border-radius:2px}
.fig__km--live::after{background:var(--accent-hi);box-shadow:0 0 7px var(--accent-glow)}
.fig__glyph{position:relative;flex:none;width:11px;height:11px;
  border:1px solid var(--accent-line);border-radius:2px;}
.fig__glyph::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 6px var(--accent-glow);}
/* ================================================ FIGURE 1 — THE FIELD ==
   #problem. A detector plate: a dense lattice of inert marks fading out at
   every edge, a dashed region tagged MATCHES THE FILTER, and seven marks
   inside it framed by reticles — the ones where a dated, sourced event was
   found. States a mechanism. States no rate, no count and no outcome; the
   edge fade is the honesty device, because a field with no countable
   boundary cannot be read as a ratio.
   ====================================================================== */
.llf-plate{fill:var(--bg-well)}
.llf-d{fill:var(--fg-muted)}
.llf-d--a{opacity:.9}
.llf-d--b{opacity:.62}
.llf-d--c{opacity:.78}
.llf-d--d{opacity:.55}
.llf-field{opacity:.5}
.llf-field--in{opacity:.55}
.llf-f0{stop-color:#fff}
.llf-f1{stop-color:#000}
.llf-boxfill{fill:var(--fg-primary);opacity:.025}
.llf-box{fill:none;stroke:var(--fg-faint);stroke-width:1;stroke-dasharray:4 3.5}
.llf-tagbg{fill:var(--bg-well)}
.llf-tag{font-family:var(--font-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.07em;fill:var(--fg-secondary);}
/* base state is LIT: no-JS, no-IntersectionObserver and reduced-motion all
   land on the finished figure rather than an empty grey plate. */
.llf-hit{color:var(--accent);opacity:1;stroke-dashoffset:0}
.llf-halo{fill:url(#llf-halog)}
.llf-dot{fill:var(--accent-hi)}
.llf-h0{stop-color:var(--accent);stop-opacity:.42}
.llf-h1{stop-color:var(--accent);stop-opacity:.15}
.llf-h2{stop-color:var(--accent);stop-opacity:0}
.llf-sweep{opacity:0}
.llf-s0{stop-color:var(--accent);stop-opacity:0}
.llf-s1{stop-color:var(--accent);stop-opacity:.15}
/* delays = 420ms + x * 3.448ms, i.e. each mark lights as the sweep reaches it */
.fig--field.in .llf-sweep{animation:llf-sweep 1400ms linear 420ms both}
.fig--field.in .llf-hit{animation:llf-lite 420ms var(--ease) backwards,
            llf-draw 380ms var(--ease) backwards;
  stroke-dasharray:8;}
.fig--field.in .llf-hit:nth-child(1){animation-delay:637ms}
.fig--field.in .llf-hit:nth-child(2){animation-delay:782ms}
.fig--field.in .llf-hit:nth-child(3){animation-delay:879ms}
.fig--field.in .llf-hit:nth-child(4){animation-delay:1072ms}
.fig--field.in .llf-hit:nth-child(5){animation-delay:1168ms}
.fig--field.in .llf-hit:nth-child(6){animation-delay:1265ms}
.fig--field.in .llf-hit:nth-child(7){animation-delay:1313ms}
@keyframes llf-sweep{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(406px);opacity:0}
}
@keyframes llf-lite{from{opacity:0}to{opacity:1}}
@keyframes llf-draw{from{stroke-dashoffset:8}to{stroke-dashoffset:0}}