/* CheckTow sites. Design system PORTED from the Check Tow proposal
   (proposal/public/css/proposal.css in this repo), the design Reco approved and
   sent to the client. Rules below are the proposal's own, in its own order.
   Adaptations vs the proposal file, kept to the minimum:
   1. .hero is the proposal's scroll-film track (s132), shortened in s233
      from 460vh to 260vh at Reco's direction (the film beat now lands in
      about 1.6 viewport heights of scroll instead of 3.6; the p-relative
      choreography is unchanged): canvas frame sequence, caption windows,
      beacon, dawn wipe with scan line, and the chapter rail are the
      proposal's own rules and choreography, extracted
      from proposal.css, not retyped. Still not ported: the in-hero phone
      mock and its phone-UI styles (illustrative in-app claims the site
      copy rules do not allow). Under prefers-reduced-motion the track
      collapses to the proposal's static 100svh stage, as before.
   2. .film also accepts a <video> (the app site's street film) alongside <img>.
   3. Proposal sections the sites do not use (simulator, calculator, summons,
      in-app phone UI, pricing) are omitted.
   4. A short "Site extensions" block at the end adds only what multi-page
      company sites need and the proposal never had: long-form prose (legal
      pages), company-detail rows, footer columns, a hero note line. */
:root{
  color-scheme:dark;
  --asphalt:#0C0D0F;           /* page ground */
  --asphalt-2:#131519;         /* alternating band */
  --panel:#1A1D22;             /* card surface */
  --panel-2:#22262C;
  --line:rgba(236,231,218,.12);
  --line-2:rgba(236,231,218,.22);
  --chalk:#EEEAE0;             /* primary text, ticket-paper white */
  --chalk-2:#A9A69C;           /* secondary text */
  --chalk-3:#7D7B74;
  --amber:#FFB000;             /* beacon / brand */
  --amber-ink:#121417;
  --amber-soft:rgba(255,176,0,.13);
  --red:#FF5141;               /* judgment, boot */
  --red-soft:rgba(255,81,65,.14);
  --green:#46D99A;             /* clear */
  --green-soft:rgba(70,217,154,.13);
  --ticket:#F2A65A;            /* summons-envelope orange */
  --plate-navy:#1B2A57;
  --plate-gold:#E8B53A;
  --disp:"Big Shoulders Display","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Public Sans",-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,Menlo,monospace;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  --pad-x:clamp(16px,6vw,96px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--asphalt);color:var(--chalk);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,canvas,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--amber);color:var(--amber-ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--amber);color:var(--amber-ink);padding:10px 14px;border-radius:8px;font-weight:700}
.skip:focus{left:calc(var(--gut) + 8px)}

/* grain */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- type ---------- */
.mono{font-family:var(--mono)}
.label{font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-2)}
.h1{font:900 clamp(46px,8.2vw,128px)/.86 var(--disp);letter-spacing:-.005em;text-transform:uppercase;margin:0;text-wrap:balance}
.h2{font:800 clamp(38px,5.6vw,84px)/1.0 var(--disp);text-transform:uppercase;margin:0;max-width:16ch;text-wrap:balance}
.h3{font:800 clamp(24px,2.3vw,32px)/1 var(--disp);text-transform:uppercase;letter-spacing:.005em;margin:0;text-wrap:balance}
.h1 em,.h2 em,.h3 em{font-style:normal;color:var(--amber)}
.h2 s{text-decoration:none;color:var(--red)}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--chalk-2);max-width:60ch;margin:0}
.lede b,.body b{color:var(--chalk);font-weight:600}
p{margin:0}

/* ---------- topbar ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.top.solid{background:rgba(12,13,15,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;gap:18px;height:64px;padding-left:max(var(--gut),var(--pad-x));padding-right:max(var(--gut-r),var(--pad-x))}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 22px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.brand svg{width:26px;height:26px;flex:none}
.top .for{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--chalk-2);padding-left:18px;border-left:1px solid var(--line-2)}
.top nav{margin-left:auto;display:flex;gap:4px}
.top nav a{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--chalk-2);padding:10px 12px;border-radius:999px}
.top nav a:hover,.top nav a[aria-current]{color:var(--chalk);background:rgba(255,255,255,.06)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:999px;padding:14px 20px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);cursor:pointer;transition:transform .25s var(--ease),background .25s}
.btn:hover{transform:translateY(-2px)}
.btn-amber{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.btn-amber:hover{background:#ffc23a}
.top .btn{padding:11px 16px;font-size:12px}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--amber);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:1100px){.top nav{display:none}.top .btn{margin-left:auto}}
@media (max-width:640px){.top .for{display:none}.top-in{height:56px}.top .btn .long{display:none}}
/* ---------- hero stage ---------- */
.hero{position:relative;height:260vh;background:#06070a}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.film,.film canvas,.film img,.film video,.dawn,.dawn img{position:absolute;inset:0;width:100%;height:100%}
.film img,.film video,.dawn img{object-fit:cover}
.film canvas{opacity:0;transition:opacity .6s}
.film.live canvas{opacity:1}
.film.live img{visibility:hidden}
.dawn{clip-path:inset(0 100% 0 0);will-change:clip-path}
.dawn img{object-position:50% 50%}
.scan{position:absolute;top:0;bottom:0;width:3px;left:0;background:var(--amber);box-shadow:0 0 24px 6px rgba(255,176,0,.55),0 0 80px 20px rgba(255,176,0,.18);opacity:0;pointer-events:none}
.beacon{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(60% 45% at 62% 52%,rgba(255,160,0,.42),transparent 70%)}
.beacon.on{animation:beacon 1.1s steps(1) infinite}
@keyframes beacon{0%{opacity:.0}12%{opacity:.85}24%{opacity:.1}36%{opacity:.7}50%,100%{opacity:0}}
.shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(6,7,10,.6) 0%,rgba(6,7,10,0) 24%,rgba(6,7,10,0) 48%,rgba(6,7,10,.86) 100%),
  linear-gradient(90deg,rgba(6,7,10,.78) 0%,rgba(6,7,10,.42) 38%,rgba(6,7,10,0) 66%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:0 max(var(--gut-r),var(--pad-x)) clamp(28px,6vh,72px) max(var(--gut),var(--pad-x));display:grid;gap:22px;will-change:opacity,transform}
.tick{display:flex;align-items:center;gap:12px;font:500 11.5px/1.3 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}
.tick::before{content:"";width:34px;height:1px;background:var(--amber);flex:none}
.hero .h1{max-width:13ch}
.hero .h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero .h1 .ln>span{display:block;transform:translateY(105%);animation:rise 1.2s var(--ease) forwards}
.hero .h1 .ln:nth-child(2)>span{animation-delay:.09s}
.hero .h1 .ln:nth-child(3)>span{animation-delay:.18s}
@keyframes rise{to{transform:none}}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.hero-sub{max-width:52ch;color:#d6d2c8;font-size:clamp(16px,1.3vw,19px)}
.hero-sub b{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(10,11,14,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap}
.chip.go{border-color:var(--amber);color:var(--amber)}
.cue{position:absolute;right:max(var(--gut-r),var(--pad-x));bottom:clamp(28px,6vh,72px);font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-2);display:flex;flex-direction:column;align-items:center;gap:10px}
.cue i{width:1px;height:46px;background:linear-gradient(var(--chalk-2),transparent);animation:cue 2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-width:760px){.cue{display:none}}
.cap{position:absolute;left:max(var(--gut),var(--pad-x));top:50%;transform:translateY(-50%);max-width:min(560px,82vw);opacity:0;pointer-events:none}
.cap .clock{font:600 13px/1 var(--mono);letter-spacing:.2em;color:var(--amber);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.cap .clock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--red-soft);animation:rec 1.2s infinite}
@keyframes rec{50%{opacity:.25}}
.cap p{font:800 clamp(30px,4vw,58px)/.95 var(--disp);text-transform:uppercase;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.cap p em{font-style:normal;color:var(--amber)}
.cap small{display:block;margin-top:14px;color:#d8d4ca;font-size:clamp(15px,1.2vw,18px);max-width:44ch;text-shadow:0 1px 14px rgba(0,0,0,.8)}
@media (max-width:900px){
  .cap{top:calc(76px + env(safe-area-inset-top,0px));transform:none;right:var(--gut-r);max-width:none}
  .cap p{font-size:clamp(30px,8.6vw,44px)}
}
@media (max-width:900px) and (max-height:700px){.cap small{display:none}}
.cap.dawncap .clock{color:#ffe2a3}
.cap.dawncap .clock::before{background:var(--green);box-shadow:0 0 0 4px var(--green-soft);animation:none}
.rail{position:absolute;right:max(var(--gut-r),var(--pad-x));top:50%;transform:translateY(-50%);display:grid;gap:14px;text-align:right}
.rail span{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.38);transition:color .3s}
.rail span::after{content:"";display:inline-block;vertical-align:middle;width:14px;height:1px;margin-left:10px;background:currentColor;transition:width .3s}
.rail span.on{color:var(--chalk)}
.rail span.on::after{width:30px;background:var(--amber)}
@media (max-width:900px){.rail{display:none}}
/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line);background:var(--asphalt-2);overflow:hidden;padding-block:16px}
.ticker-in{display:flex;width:max-content;animation:tick 60s linear infinite}
.ticker span{font:500 12.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;padding-right:48px;color:var(--chalk-2)}
.ticker b{color:var(--amber);font-weight:600}
.ticker i{color:var(--red);font-style:normal}
.ticker u{color:var(--green);text-decoration:none}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding-block:clamp(80px,10vw,150px);padding-left:max(var(--gut),var(--pad-x));padding-right:max(var(--gut-r),var(--pad-x));position:relative}
.sec.alt{background:var(--asphalt-2)}
.head{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.head .num{font:600 13px/1 var(--mono);letter-spacing:.12em;color:var(--amber);padding-bottom:12px;border-bottom:2px solid var(--amber);align-self:end;margin-bottom:.5em}
.head-txt{display:grid;gap:22px}
@media (max-width:640px){.head{grid-template-columns:1fr;gap:16px}.head .num{justify-self:start}}

.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.on{opacity:1;transform:none}
.rv-ready .rv:not(.on){transition-delay:0s}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--panel);display:grid;gap:12px;align-content:start}
.kick{font:600 11.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.kick.no{color:var(--red)}.kick.ok{color:var(--green)}
.card p{color:var(--chalk-2);font-size:16px}
.card p b{color:var(--chalk);font-weight:600}

/* ---------- 01 problem ---------- */
.founder{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(56px,7vw,96px)}
@media (max-width:900px){.founder{grid-template-columns:1fr}}
.photo{position:relative;border-radius:18px;overflow:hidden;background:var(--panel);margin:0}
.photo img{width:100%;height:100%;object-fit:cover}
.photo figcaption{position:absolute;left:14px;bottom:14px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:8px 11px;border-radius:999px;background:rgba(10,11,14,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--chalk)}
.photo.wide{aspect-ratio:3/2}
.photo.tall{aspect-ratio:4/5}
.quotes{display:grid;gap:14px}
.q{position:relative;border-left:2px solid var(--amber);padding:6px 0 6px 22px}
.q p{font:700 clamp(22px,2vw,28px)/1.18 var(--disp);text-transform:none;letter-spacing:.005em;color:var(--chalk)}
.q p::before{content:"\201C";color:var(--amber)}
.q p::after{content:"\201D";color:var(--amber)}
.q cite{display:block;margin-top:8px;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-3);font-style:normal}
.pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px}
.pain{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);display:grid;grid-template-rows:auto 1fr}
.pain .photo{border-radius:0;aspect-ratio:4/3}
/* ---------- 03 product ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:0;border-top:1px solid var(--line)}
.step{padding:26px 24px 30px 0;border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start}
.step .n{font:900 64px/.8 var(--disp);color:var(--amber);opacity:.9}
.step p{color:var(--chalk-2);font-size:16px;max-width:34ch}
.pool{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:0;border-block:1px solid var(--line);margin-bottom:56px}
.pool div{padding:26px 20px 26px 0;display:grid;gap:8px;align-content:start}
.pool b{font:900 clamp(44px,4.6vw,68px)/.9 var(--disp);color:var(--chalk);font-variant-numeric:tabular-nums}
.pool span{color:var(--chalk-2);font-size:15px;max-width:30ch}
.pool cite{font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-3);font-style:normal}
.truth{margin-top:18px;color:var(--chalk-2);max-width:78ch}
.truth b{color:var(--chalk)}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.check-list li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);color:var(--chalk-2);font-size:15.5px}
.check-list li::before{content:"";width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--amber-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.4' fill='none' stroke='%23FFB000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.check-list li b{color:var(--chalk);font-weight:600}
.check-list.later li::before{background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.5 9h7' fill='none' stroke='%23A9A69C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}
/* ---------- 12 close ---------- */
.close{position:relative;min-height:88vh;display:grid;align-items:end;overflow:hidden;padding-block:clamp(80px,10vw,140px);padding-left:max(var(--gut),var(--pad-x));padding-right:max(var(--gut-r),var(--pad-x))}
.close picture,.close img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.close::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,15,.25),rgba(12,13,15,.2) 40%,rgba(12,13,15,.92))}
.close-in{position:relative;z-index:2;display:grid;gap:22px;max-width:900px}
.close .h1{font-size:clamp(52px,9vw,140px)}
.close p{font-size:clamp(18px,1.6vw,22px);color:#e3dfd5;max-width:52ch}
.close .ctas{display:flex;flex-wrap:wrap;gap:10px}

footer{padding-block:40px 56px;padding-left:max(var(--gut),var(--pad-x));padding-right:max(var(--gut-r),var(--pad-x));border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:space-between;font:500 11.5px/1.7 var(--mono);letter-spacing:.06em;color:var(--chalk-3)}
footer p{max-width:70ch}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .ticker-in{animation:none}
  .hero .h1 .ln>span{animation:none;transform:none}
  .beacon.on,.cue i,.cap .clock::before,.scanbox .frame::before{animation:none}
  .hero{height:auto}
  .stage{position:relative;height:100vh;height:100svh}
}
.hphone .device{--w:min(300px,62vw)}
@media (max-width:640px){
  .photo figcaption,.q cite,.money-grid cite,.pool cite,.res .nums small,.res-src,.badge,.rate .unit,.proves,.co small,
  .summons .band span,.summons .f small,.summons .amount small,.summons .split small,.opt-badge,.label,.note,.kick,.chip,.tick{font-size:12px}
  .summons .f b{font-size:14.5px}
  .sources ol{font-size:14px}
}
.yours{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:14px;padding:16px 18px;background:var(--panel);display:grid;gap:8px}
.yours p{color:var(--chalk-2);font-size:15.5px;max-width:78ch}
.yours b{color:var(--chalk);font-weight:600}

/* ---------- Site extensions (multi-page company sites) ---------- */
/* s132: the s130 small-phone stage-grow rule is gone on this site. The film
   stage must stay exactly 100svh inside the 260vh track, so the proposal's
   geometry governs at every width. In its place, the copy stack itself is
   compacted on small screens: at 375px the headline wraps to five lines and
   the full stack (tick + headline + sub + chips + CTAs + launch note) is
   taller than a phone stage, so the bottom-anchored stack slid under the
   fixed header, the same defect in film geometry. On shorter screens the
   stack tightens further and the launch note drops out (its facts live in
   the chips above it and in the closing section), the same trade the
   proposal makes when it hides caption small print on short screens.
   Verified by probe in the s132 captures: the tick clears the fixed
   header at 375x812, 375x667, 390x844, and 360x740. */
@media (max-width:759px){
  .hero-copy{gap:12px}
  .hero .h1{font-size:clamp(34px,10vw,42px)}
}
@media (max-width:759px) and (max-height:760px){
  .hero-note{display:none}
  .hero-copy{gap:10px}
  .hero .h1{font-size:clamp(32px,9.5vw,38px)}
  .hero-sub{font-size:15px;line-height:1.55}
  .chip{padding:8px 12px}
}
/* .ctas is the proposal's .close .ctas, usable in heroes too. */
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.hero-note{color:#d8d4ca;font-size:15px;max-width:56ch}
/* Vertical rhythm for stacked blocks inside a section. */
.stack{display:grid;gap:clamp(28px,4vw,48px)}
/* Company detail rows, after the proposal's summons field rows. */
.defs{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:8px 26px}
.defs dl{margin:0}
.defs .row{display:grid;grid-template-columns:200px 1fr;gap:8px 16px;padding:15px 0;border-bottom:1px dashed var(--line-2)}
.defs .row:last-child{border-bottom:0}
.defs dt{font:500 11.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-3)}
.defs dd{margin:0;color:var(--chalk)}
@media (max-width:640px){.defs .row{grid-template-columns:1fr}}
/* Long-form prose (legal pages, about text): proposal type on solid surfaces. */
.prose{max-width:74ch;display:grid;gap:14px;color:var(--chalk-2)}
.prose h2{margin-top:30px}
.prose h2:first-child{margin-top:0}
.prose h3{font:600 16.5px/1.4 var(--body);color:var(--chalk);margin-top:8px}
.prose ul,.prose ol{margin:0;padding-left:22px;display:grid;gap:6px}
.prose b,.prose strong{color:var(--chalk);font-weight:600}
/* Footer columns (the proposal footer is a single flex row of paragraphs). */
footer .fcol{display:grid;gap:10px;align-content:start}
footer .fbrand{display:flex;align-items:center;gap:10px;font:900 20px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:var(--chalk)}
footer .fbrand svg{width:24px;height:24px;flex:none}
footer .fnav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{color:var(--chalk-2);text-decoration:none}
footer a:hover{color:var(--amber)}
@media (max-width:760px){footer .fcol{flex:1 1 100%}}

/* ---------- s230: the app, in your hand ----------
   A scroll-driven phone mockup for the home page. The screens are built
   from the production app's own design tokens and components (Check Tow
   app: Garage, Scan, scan result sheet, Alerts, vehicle clear state):
   night ground #0A0B0D, cards #15171B, hairlines rgba(255,255,255,.07),
   amber #FFB000, Big Shoulders numerals, the NY plate, the raised amber
   Scan button in the tab bar. Chapters scroll on the left; the phone is
   sticky on the right and swaps screens as chapters pass the middle of
   the viewport. On small screens (s233) the walkthrough becomes a framed
   panel: the phone pins inside the panel and the chapters step beneath
   it, with the step rail and note shown. */
.phone-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:start}
.chapters{display:grid}
.chapter{display:grid;gap:16px;align-content:center;min-height:92vh;padding-block:24px;transition:opacity .5s var(--ease)}
html.js .chapter{opacity:.32}
html.js .chapter.on{opacity:1}
.chapter .ck{font:600 11.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.chapter h3{font:800 clamp(30px,3.2vw,46px)/.95 var(--disp);text-transform:uppercase;margin:0;text-wrap:balance}
.chapter h3 em{font-style:normal;color:var(--amber)}
.chapter p{color:var(--chalk-2);font-size:17px;line-height:1.6;max-width:46ch}
.chapter .check-list{margin-top:6px}
.chapter .check-list li{font-size:15px;padding:11px 0}
.phone-col{position:sticky;top:92px;display:grid;justify-items:center;gap:20px;padding-block:12px}
.phone-rail{display:flex;gap:6px;align-items:center}
.phone-rail button{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--chalk-2);font:600 11px/1 var(--mono);letter-spacing:.1em;border-radius:999px;padding:8px 12px;cursor:pointer;transition:all .3s}
.phone-rail button.on{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)}
.phone-note{font:500 10.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--chalk-3);text-align:center}
.phone{--pw:min(328px,86vw);width:var(--pw);aspect-ratio:328/700;position:relative;border-radius:54px;background:#000;border:1px solid rgba(255,255,255,.16);box-shadow:0 50px 100px rgba(0,0,0,.6),0 0 0 10px #101114,0 0 0 11.5px rgba(255,255,255,.09),0 0 90px rgba(255,176,0,.07);overflow:hidden;color:#F3F1EA;font-size:14px}
.p-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:88px;height:24px;border-radius:13px;background:#000;border:1px solid rgba(255,255,255,.05);z-index:30}
.p-status{position:absolute;top:0;left:0;right:0;height:46px;display:flex;justify-content:space-between;align-items:flex-start;padding:15px 28px 0;z-index:25;font:600 13px/1 var(--body);color:#F3F1EA;pointer-events:none}
.p-status .sic{display:flex;gap:5px;align-items:center;color:#F3F1EA}
.p-screens{position:absolute;left:0;right:0;top:46px;bottom:72px}
.p-screen{position:absolute;inset:0;padding:12px 15px 8px;background:#0A0B0D;opacity:0;transform:translateY(16px) scale(.992);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none;overflow:hidden}
.phone[data-screen="0"] .p-screen[data-i="0"],.phone[data-screen="1"] .p-screen[data-i="1"],.phone[data-screen="2"] .p-screen[data-i="2"],.phone[data-screen="3"] .p-screen[data-i="3"],.phone[data-screen="4"] .p-screen[data-i="4"]{opacity:1;transform:none;pointer-events:auto}
.p-tabs{position:absolute;left:0;right:0;bottom:0;height:72px;background:rgba(16,17,20,.94);border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-around;align-items:flex-start;padding:7px 4px 0;z-index:20}
.p-tabs::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:118px;height:4px;border-radius:2px;background:rgba(255,255,255,.32)}
.p-tab{width:56px;display:grid;justify-items:center;gap:3px;color:#8C8C8C;font-size:10px;font-weight:500}
.p-tab .tic{width:48px;height:27px;display:grid;place-items:center}
.p-tab svg{width:22px;height:22px}
.p-tab.on{color:var(--amber)}
.p-tab.scanbtn{width:60px}
.p-tab.scanbtn .tic{width:52px;height:52px;border-radius:50%;background:var(--amber);color:#121417;margin-top:-23px;border:5px solid #0A0B0D;box-shadow:0 8px 20px rgba(255,176,0,.35)}
.p-tab.scanbtn svg{width:25px;height:25px}
.p-badge{position:absolute;top:-3px;right:4px;min-width:17px;height:17px;border-radius:9px;background:#FF4D3D;color:#fff;font:800 9.5px/17px var(--body);text-align:center;border:2px solid #0A0B0D;padding:0 3px}
.p-tab .tic{position:relative}
/* in-phone building blocks, after the app's components */
.p-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:11px}
.p-eyebrow{font:600 10px/1.35 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#9A988F}
.p-title{font:700 24px/1.08 var(--body);letter-spacing:-.01em;color:#F3F1EA}
.p-avatar{width:37px;height:37px;flex:none;border-radius:50%;background:var(--amber);color:#121417;font:700 13.5px var(--body);display:grid;place-items:center;box-shadow:0 0 0 2px rgba(255,176,0,.35)}
.p-live{display:inline-flex;align-items:center;gap:7px;background:#15171B;border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:5px 11px 5px 8px;font-size:11px;font-weight:600;color:#9A988F;margin-bottom:11px}
.p-live i{width:7px;height:7px;border-radius:50%;background:#3EE08F;animation:plive 1.9s infinite}
@keyframes plive{0%{box-shadow:0 0 0 0 rgba(62,224,143,.45)}70%{box-shadow:0 0 0 6px rgba(62,224,143,0)}100%{box-shadow:0 0 0 0 rgba(62,224,143,0)}}
.p-card{background:#000;border:1px solid rgba(255,255,255,.08);border-radius:25px;overflow:hidden;box-shadow:0 18px 34px rgba(0,0,0,.45)}
.p-card .ph{position:relative;height:104px}
.p-card .ph img{width:100%;height:100%;object-fit:cover}
.p-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 38%,transparent 55%,#000)}
.p-card .tr{position:absolute;top:11px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2}
.p-card .nm{position:absolute;left:14px;right:14px;bottom:6px;z-index:2}
.p-card .nm b{display:block;font:700 15.5px/1.2 var(--body);color:#fff}
.p-card .nm span{font-size:11px;color:#B9B7B0}
.p-card .bd{padding:8px 14px 13px;display:grid;gap:7px;justify-items:center;background:#000}
.p-plate{display:grid;grid-template-rows:12px 1fr;width:88px;height:45px;background:#F7F6F1;border:2px solid #CFCBBE;border-radius:7px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.45);flex:none}
.p-plate .band{background:#1B2A57;color:#E8B53A;font:800 6.5px/12px var(--body);letter-spacing:2px;text-align:center}
.p-plate .no{display:grid;place-items:center;color:#1B2A57;font:900 14.5px/1 var(--body);letter-spacing:.6px;white-space:nowrap}
.p-plate.lg{width:148px;height:74px;grid-template-rows:19px 1fr;border-radius:10px}
.p-plate.lg .band{font-size:9.5px;line-height:19px}
.p-plate.lg .no{font-size:29px}
.p-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font:800 10px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.p-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.p-pill.amber{background:rgba(255,176,0,.15);color:#FFC53D}
.p-pill.red{background:rgba(255,77,61,.17);color:#FF6B5C}
.p-pill.green{background:rgba(62,224,143,.14);color:#3EE08F}
.p-pill.gray{background:rgba(255,255,255,.09);color:#C9C6BD}
.p-gauge{width:178px;max-width:100%}
.p-gauge svg{display:block;width:100%;height:auto}
.p-gaugewrap{display:grid;justify-items:center;margin-top:-52px}
.p-gaugenum{font:900 37px/.9 var(--disp);color:#F3F1EA;letter-spacing:.01em}
.p-gaugecap{font:600 9.5px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:#9A988F;margin-top:3px}
.p-delta{font-size:12px;color:#9A988F;text-align:center}
.p-delta b{color:#3EE08F;font-weight:600}
.p-delta b.warn{color:#FFC53D}
.p-ghostbtn{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);border-radius:999px;padding:8.5px 15px;font:600 12.5px var(--body);color:#F3F1EA}
.p-amberbtn{background:var(--amber);color:#121417;border-radius:999px;padding:12px 16px;font:700 13.5px var(--body);text-align:center;box-shadow:0 8px 20px rgba(255,176,0,.22)}
.p-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.p-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.25)}
.p-dots i.on{width:19px;background:var(--amber)}
.p-seclabel{display:flex;justify-content:space-between;align-items:baseline;margin:10px 2px 6px;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9A988F}
.p-seclabel span:last-child{font:600 12px var(--body);letter-spacing:0;text-transform:none;color:var(--amber)}
.p-list{background:#15171B;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:1px 11px}
.p-row{display:flex;gap:10px;align-items:center;padding:9.5px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.p-row:last-child{border-bottom:0}
.p-row .ic{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;flex:none}
.p-row .ic svg{width:15px;height:15px}
.p-row .ic.amber{background:rgba(255,176,0,.14);color:#FFC53D}
.p-row .ic.red{background:rgba(255,77,61,.16);color:#FF6B5C}
.p-row .ic.green{background:rgba(62,224,143,.14);color:#3EE08F}
.p-row .ic.gray{background:rgba(255,255,255,.07);color:#9A988F}
.p-row .tt{font:600 13px/1.25 var(--body);color:#F3F1EA;display:block}
.p-row .ss{font-size:11px;color:#9A988F;display:block;margin-top:1px}
.p-row .rt{margin-left:auto;font:800 16.5px var(--disp);color:#F3F1EA;white-space:nowrap}
.p-row .tm{margin-left:auto;font-size:11px;color:#6F6D67;white-space:nowrap;padding-top:2px}
.p-row .strip{width:4px;align-self:stretch;border-radius:4px;flex:none}
.p-row .unread{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none;margin-left:auto}
/* scan screen */
.p-screen.cam{padding:0;background:#000}
.p-cam{position:absolute;inset:0}
.p-cam img{width:100%;height:100%;object-fit:cover;opacity:.85}
.p-cam::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 42%,transparent 55%,rgba(0,0,0,.5));box-shadow:inset 0 0 90px rgba(0,0,0,.55)}
.p-cam.dim img{opacity:.4}
.p-camtop{position:absolute;top:12px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;z-index:3}
.p-camtop b{font:700 16px var(--body);color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.p-flash{width:35px;height:35px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;color:#fff}
.p-flash svg{width:17px;height:17px}
.p-reticle{position:absolute;left:50%;top:37%;width:212px;height:110px;transform:translate(-50%,-50%);z-index:2}
.p-reticle i{position:absolute;width:29px;height:29px;border:4px solid #fff}
.p-reticle i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:11px}
.p-reticle i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:11px}
.p-reticle i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:11px}
.p-reticle i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:11px}
.p-scanline{position:absolute;left:9px;right:9px;height:2px;background:var(--amber);box-shadow:0 0 14px 2px rgba(255,176,0,.85);animation:pscan 2.3s ease-in-out infinite alternate}
@keyframes pscan{from{top:7%}to{top:91%}}
.p-hint{position:absolute;top:54.5%;left:0;right:0;text-align:center;z-index:2;font:600 13px var(--body);color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.p-controls{position:absolute;left:0;right:0;bottom:12px;display:grid;justify-items:center;gap:11px;z-index:3}
.p-shutter{width:64px;height:64px;border-radius:50%;border:5px solid #fff;display:grid;place-items:center}
.p-shutter i{width:46px;height:46px;border-radius:50%;background:var(--amber)}
.p-typeit{display:inline-flex;gap:7px;align-items:center;background:rgba(0,0,0,.55);padding:8px 14px;border-radius:999px;font:600 12.5px var(--body);color:#fff}
.p-typeit svg{width:16px;height:16px}
/* result sheet */
.p-sheet{position:absolute;left:0;right:0;bottom:0;z-index:3;background:rgba(17,18,21,.985);border-top:1px solid rgba(255,255,255,.09);border-radius:26px 26px 0 0;padding:11px 17px 16px;display:grid;gap:12px}
.p-grab{width:37px;height:5px;border-radius:3px;background:#3A3D43;margin:0 auto}
.p-sheetrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.p-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.p-stat{background:#15171B;border:1px solid rgba(255,255,255,.07);border-radius:13px;padding:8px 10px 9px}
.p-stat span{display:block;font:600 9px/1.2 var(--mono);letter-spacing:.7px;text-transform:uppercase;color:#9A988F}
.p-stat b{display:block;font:800 22px/1.1 var(--disp);color:#F3F1EA;margin-top:2px}
.p-stat b.bad{color:#FF6B5C}
.p-scanlink{text-align:center;color:var(--amber);font:600 13px var(--body)}
/* alerts */
.p-chips{display:flex;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.p-chip{padding:6.5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.13);font:600 12px var(--body);color:#9A988F}
.p-chip.on{background:#F3F1EA;color:#121417;border-color:#F3F1EA}
.p-urgent{border-radius:22px;padding:15px;display:grid;gap:9px;margin-bottom:4px}
.p-urgent.warn{background:#1E1A0F;border:1px solid rgba(255,176,0,.42);box-shadow:0 14px 32px rgba(255,176,0,.08)}
.p-urgent .uk{font:700 10px/1.3 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:#FFC53D}
.p-urgent .ut{font:900 26px/.98 var(--disp);text-transform:uppercase;color:#F3F1EA}
.p-urgent .ut em{font-style:normal;color:#FFC53D}
.p-urgent .ub{font-size:12.5px;line-height:1.5;color:#C9C6BD}
.p-urgent .p-amberbtn{justify-self:start;padding:10px 15px;font-size:12.5px}
.p-markall{font:600 12px var(--body);color:var(--amber);padding-bottom:5px}
.p-row .strip.amber{background:#FFB000}
.p-row .strip.red{background:#FF4D3D}
.p-row .strip.green{background:#3EE08F}
.p-row .strip.gray{background:#6F6D67}
.p-clearwrap{display:grid;gap:11px}
@media (max-width:1023px){.m-opt{display:none}}
/* clear state */
.p-ring{width:88px;height:88px;border-radius:50%;border:3px solid #3EE08F;background:rgba(62,224,143,.09);display:grid;place-items:center;margin:14px auto 4px;color:#3EE08F;box-shadow:0 0 44px rgba(62,224,143,.16)}
.p-ring svg{width:40px;height:40px}
.p-clearT{text-align:center;font:900 29px/1 var(--disp);text-transform:uppercase;color:#F3F1EA}
.p-clearS{text-align:center;font-size:12.5px;color:#9A988F;margin-top:5px}
@media (max-width:1023px){
  /* s233: on small screens the walkthrough is a framed exhibit, not a
     phone floating over the page. The layout becomes a panel (panel
     surface, hairline border, radius) under the section head; the phone
     column pins inside the panel while the chapters step beneath it,
     and the step rail and the production-design note show, so the demo
     reads as its own section. Desktop is unchanged. */
  .phone-layout{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px 16px 10px}
  .phone-col{order:-1;position:sticky;top:68px;z-index:8;background:linear-gradient(var(--panel) calc(100% - 24px),rgba(26,29,34,0));box-shadow:0 -20px 0 0 var(--panel);padding-block:10px 18px;margin-bottom:2px}
  .phone{--pw:min(240px,68vw)}
  .phone-rail{flex-wrap:wrap;justify-content:center}
  .phone-rail button{font-size:10px;padding:7px 10px}
  .chapters{width:100%}
  html.js .chapter{opacity:1}
  .chapter{min-height:0;padding-block:28px}
  .chapter + .chapter{border-top:1px solid var(--line)}
  .p-gauge{width:158px}
  .p-gaugewrap{margin-top:-44px}
  .p-gaugenum{font-size:31px}
  .p-card .ph{height:112px}
  .p-plate{width:74px;height:38px;grid-template-rows:10px 1fr}
  .p-plate .band{font-size:5.5px;line-height:10px}
  .p-plate .no{font-size:12px;letter-spacing:.3px}
  .p-plate.lg{width:88px;height:45px;grid-template-rows:12px 1fr}
  .p-plate.lg .band{font-size:6.5px;line-height:12px}
  .p-plate.lg .no{font-size:14.5px}
  .p-pill{font-size:8.5px;padding:5px 8px;gap:4px}
  .p-pill i{width:6px;height:6px}
  .p-card .nm b{font-size:13.5px}
  .p-card .nm span{display:block;font-size:9.5px;line-height:1.3;margin-top:1px}
  .p-tab{width:42px;font-size:9px}
  .p-tab .tic{width:38px;height:24px}
  .p-tab svg{width:19px;height:19px}
  .p-tab.scanbtn{width:46px}
  .p-tab.scanbtn .tic{width:44px;height:44px;margin-top:-18px}
  .p-tab.scanbtn svg{width:22px;height:22px}
  .p-reticle{width:168px;height:88px}
}
@media (prefers-reduced-motion:reduce){
  .p-screen{transition:none}
  .p-scanline,.p-live i{animation:none}
  html.js .chapter{opacity:1}
  .chapter{min-height:0}
  .phone-col{position:static}
}