/* InsureMEP for brokers — the shared components the broker story adds.

   Loaded AFTER /assets/site.css, which build.py copies from ../insuremep-site at
   build time (never forked). From site.css you already have: the tokens
   (--ink --deep --blue --electric --cyan --ice --muted --line --card --amber
   --paper --paper-ink --paper-muted --display), header/footer, .hero, .block
   (.deep .paper .free), .wrap .split(.rev) .grid(.g2 .g3 .g4) .card .photo
   .badge .stamp .phone .ticks .chain .cats .bands .stat .src .cta .ticker
   .report and .reveal (see "Reveal" below: visible by default, animated by broker.js).

   Everything below is new. Each block starts with the markup it expects, so a
   depth page can copy it. build.py tokens that write the markup for you:
     {{phone:<image-stem>|tilt nocap eager}}   app screen in a phone frame + glass caption
     {{img:<image-stem>|full nocap eager}}     render / web screen (.pic) or photo-illustration (.photo)
     {{src:<stem>}} {{full:<stem>}} {{alt:<stem>}} {{caption:<stem>}}
     {{film}} {{steps}} {{stats}} {{cars_teaser}} {{freeoffer}} {{cta}} {{ticker}}
     {{savings_note}} {{chubb}} {{example_title}} {{contact_email}} {{icon:1..10|class}}
   Breakpoints match site.css: 1000px, 760px, 640px. */

:root {
  --glass: #050f2bdd;
  --glass-line: #ffffff33;
  --c-cta: #7fe3ff;          /* highlighted words inside .cta (was inline 7×) */
  --ok: #34d399;
  --ev-v: #1e3a8a;           /* Verified (report palette) */
  --ev-p: #93c5fd;           /* Partially verified */
  --ev-n: #fde68a;           /* Not evidenced */
  --hairline: #e6edf8;
}

/* ------------------------------------------------------------------ basics */
/* Reveal, as progressive enhancement. site.css hides every .reveal until site.js
   adds .in; here content is VISIBLE BY DEFAULT instead. broker.js (InsureReveal)
   arms an element with .arm (its "before" state) only while it is still below the
   fold and about to scroll in, then shows it (.in + .live) as it enters — so a fast
   scroll, a full-page capture, print or no JS never leave anything hidden. Every
   "before" state on the site is written as .reveal.arm:not(.in) … (or
   .X.arm:not(.on) for address.js), and transitions are off while armed so the
   hide is instant and offscreen. */
.reveal:not(.arm), .reveal.in { opacity: 1; transform: none; }
.reveal.arm:not(.in) { opacity: 0; transform: translateY(22px); }
.arm:not(.in):not(.live), .arm:not(.in):not(.live) *,
.arm:not(.in):not(.live) *::before, .arm:not(.in):not(.live) *::after { transition: none !important; }
html:not(.js) .needs-js { display: none !important; }
.js .no-js-only { display: none !important; }
[id] { scroll-margin-top: 86px; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; } .reveal.d5 { transition-delay: .4s; }
body { overflow-x: clip; }

/* -------------------------------------------- promoted InsureMEP inline styles */
/* <section class="hero sub"> — sub-page hero (was style="min-height:auto;padding:110px 0 90px") */
.hero.sub { min-height: auto; padding: 110px 0 90px; }
/* <div class="cta"><div>…</div><div class="actions">…</div></div> — was style="margin:0;justify-content:flex-end" */
.cta > .actions { margin: 0; justify-content: flex-end; }
@media (max-width: 1000px) { .cta > .actions { justify-content: flex-start; } }
.cta .display .c { color: var(--c-cta); }   /* was style="color:#7fe3ff" */
/* {{cta}}: <h2 class="display"><span class="l">You bring the client.</span> <span class="l c">We bring the proof.</span></h2>
   — one sentence per line, never "… We / bring the proof." */
.cta .display .l { display: block; }
.paper .star { color: var(--paper-muted); }  /* was style="color:var(--paper-muted)" */
.mt { margin-top: 34px; } .mt-s { margin-top: 18px; } .mt-l { margin-top: 56px; } .mt-0 { margin-top: 0; }
/* <div class="head [center]"><p class="kicker">…</p><h2 class="display">… <span class="c">…</span></h2><p class="lede">…</p></div> */
.head { max-width: 900px; }
.head.center { margin-inline: auto; text-align: center; }
.head.center .lede { margin-inline: auto; }
.paper .display .c { color: var(--electric); }
.paper .card h3, .paper h3 { color: var(--paper-ink); }

/* Footer: the savings asterisk line and the copyright */
.foot .fine p { margin: 0 0 8px; }
.foot .fine p:last-child { margin: 12px 0 0; color: var(--ice); }
.foot-tag { font-family: var(--display); text-transform: uppercase; font-size: 1.15rem; color: #fff; letter-spacing: .01em; margin: 0 0 6px; }

.rp-chips .ok { background: #dcfce7; color: #047857; }

/* -------------------------------------------------------------- glass caption */
/* <p class="glass">One-line factual caption.</p>  (also <figcaption class="glass">) */
.glass { margin: 0; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; line-height: 1.45; color: var(--ice); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---------------------------------------------------------- phone shot (.shot) */
/* {{phone:app-emergency-controls-capture}} writes:
   <figure class="shot"><a class="phone zoom" href="/assets/img/product/x.jpg">
     <img src="/assets/img/product/x-sm.jpg" alt="…" width="640" height="1391" loading="lazy"></a>
     <figcaption class="glass">Caption.</figcaption></figure>
   Options: tilt (rotate -4°, InsureMEP style), tilt-r, sm / lg (frame width), nocap. */
.shot { margin: 0; display: grid; justify-items: center; align-content: start; gap: 16px; }
.shot .phone { display: block; transform: none; transition: transform .35s ease; }
.shot.tilt .phone { transform: rotate(-4deg); }
.shot.tilt-r .phone { transform: rotate(3deg); }
.shot.sm .phone { width: 200px; }
.shot.lg .phone { width: 280px; }
.shot a.phone:hover { transform: translateY(-4px); }
.shot.tilt a.phone:hover { transform: rotate(-4deg) translateY(-4px); }
.shot figcaption { max-width: 300px; text-align: left; }
.phone img { height: auto; }

/* ------------------------------------------- wide figure (.pic) for renders/web */
/* {{img:replica-white-studio-home}} writes:
   <figure class="pic"><a class="zoom" href="full.jpg"><img …></a><figcaption class="glass">…</figcaption></figure>
   Photo-illustrations come out as InsureMEP's <figure class="photo"> with a .badge caption. */
.pic { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #f3f6fb; box-shadow: 0 30px 70px #0009; }
.pic > a { display: block; }
.pic img { width: 100%; height: auto; }
.pic figcaption { position: absolute; left: 16px; bottom: 16px; max-width: min(78%, 460px); }
.pic.dark { background: #0b0b0d; }
.photo > a { display: block; height: 100%; }
figure.photo { margin: 0; }
@media (max-width: 640px) {
  .pic figcaption { position: static; max-width: none; border-radius: 0; border-width: 1px 0 0; }
}

/* ----------------------------------------------------------------- lightbox */
/* Any <a class="zoom" href="/full-size.jpg"> opens here (broker.js builds the
   <dialog class="lightbox">). Without JS the link simply opens the image. */
.zoom { cursor: zoom-in; }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: visible; }
dialog.lightbox::backdrop { background: #02081cee; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 14px; }
dialog.lightbox img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; border-radius: 14px; box-shadow: 0 40px 90px #000c; background: #fff; }
dialog.lightbox figcaption { max-width: 640px; }
.lb-close { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }

/* --------------------------------------------------------------- parallax */
/* <div data-parallax="0.1">…</div> — broker.js moves the element by
   0.1 × its distance from the viewport centre. Put it on an inner element, not
   on a .reveal (both use transform). Off under prefers-reduced-motion. */
[data-parallax] { will-change: transform; }

/* ------------------------------------------------------------ broker hero */
/* <section class="hero broker"><div class="bg" style="background-image:url('/brokers/assets/img/photo/…jpg')"></div>
     <video class="teaser" data-teaser data-src="/assets/film/broker-water-teaser-v1.mp4" muted loop playsinline preload="none" aria-hidden="true" tabindex="-1"></video>
     <div class="wrap hero-grid"><div>copy</div><div>.addr card</div></div>
     <button class="teaser-toggle" type="button" hidden aria-pressed="false" aria-label="Pause background video"></button></section>
   The teaser loads only when motion is allowed and the hero is on screen. */
.hero .teaser { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.hero .teaser.on { opacity: .55; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; }
.hero.broker h1.display { font-size: clamp(2.9rem, 5.7vw, 5.25rem); }
.hero.broker h1.display > span { display: block; }
.hero.broker h1 .c { text-shadow: 0 0 40px #29c7ff55; }
.hero.broker .tag { margin-top: 18px; }
.hero.broker .lede { margin-top: 14px; }
.btn .play-ic { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-right: 2px; }
.teaser-toggle { position: absolute; right: 18px; bottom: 18px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass); color: #fff; cursor: pointer; display: grid; place-items: center; }
.teaser-toggle::before { content: ""; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.teaser-toggle[aria-pressed="true"]::before { width: 0; height: 0; border-right: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.hero.sub .lede { max-width: 700px; }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero.broker { min-height: auto; padding: 64px 0 72px; }
  .hero-grid .addr { max-width: 560px; }
}

/* ------------------------------------------------- address-in card (.addr) */
/* <div class="addr" aria-label="What one address returns">
     <div class="addr-in"><svg class="pin">…</svg><span><small>Building address</small>1200 Example Avenue · Anytown, USA</span><i class="caret"></i></div>
     <ul class="addr-list"><li style="--i:0"><span>Ownership</span><span class="cite">cited</span></li>…</ul>
     <div class="addr-out">…</div></div>
   The rows light up one by one (static under reduced motion). */
.addr { position: relative; background: linear-gradient(160deg, #0a2160f0, #050f2bf2); border: 1px solid #ffffff26; border-radius: 18px; padding: 18px; box-shadow: 0 40px 90px #0009, inset 0 1px 0 #ffffff1a; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.addr-in { display: flex; align-items: center; gap: 12px; background: #fff; color: var(--paper-ink); border-radius: 12px; padding: 11px 14px; font-weight: 700; font-size: 15px; box-shadow: 0 0 0 4px #29c7ff33; }
.addr-in small { display: block; font: 700 10px/1.2 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-muted); margin-bottom: 2px; }
.addr-in .pin { width: 26px; height: 26px; flex: none; color: var(--electric); }
.addr-in .caret { display: inline-block; width: 2px; height: 20px; background: var(--electric); margin-left: auto; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.addr-k { font: 700 10.5px/1.2 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin: 16px 2px 8px; display: flex; justify-content: space-between; gap: 8px; }
.addr-k span { color: var(--muted); letter-spacing: .08em; }
.addr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.addr-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.25; color: var(--ice); background: #ffffff0b; border: 1px solid #ffffff14; border-radius: 8px; padding: 7px 8px 7px 10px; animation: addr-row .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 160ms + 500ms); }
.addr-list li.wide { grid-column: 1 / -1; background: #29c7ff14; border-color: #29c7ff40; }
@keyframes addr-row { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.addr-out { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, var(--blue), var(--electric)); font-size: 13.5px; line-height: 1.4; color: #fff; animation: addr-row .55s both; animation-delay: 2.3s; }
.addr-out b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.25rem; letter-spacing: .01em; line-height: 1.05; }
.addr-out svg { width: 30px; height: 30px; flex: none; }
@media (max-width: 640px) { .addr-list { grid-template-columns: 1fr; } .addr { padding: 14px; } }

/* -------------------------------------------------------- source chip (.cite) */
/* <span class="cite">cited</span>  ·  <a class="cite" href="#sources">cited</a>
   <span class="cite nc">not checked</span>  — never "clean": an absence of coverage. */
.cite { display: inline-flex; align-items: center; gap: 5px; flex: none; font: 700 9.5px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); background: #29c7ff17; border: 1px solid #29c7ff55; border-radius: 999px; padding: 4px 7px 4px 6px; white-space: nowrap; text-decoration: none; }
.cite::before { content: ""; width: 9px; height: 9px; background: currentColor; -webkit-mask: var(--link-ic) center/contain no-repeat; mask: var(--link-ic) center/contain no-repeat; }
.cite.nc { color: var(--muted); background: transparent; border-style: dashed; border-color: #9db4dd88; }
.cite.nc::before { -webkit-mask-image: none; mask-image: none; width: 7px; height: 7px; border-radius: 50%; background: transparent; border: 1.5px solid currentColor; }
.paper .cite, .cars-card .cite { color: var(--blue); background: #0b3bb810; border-color: #0b3bb840; }
.paper .cite.nc { color: var(--paper-muted); border-color: #4a5b8288; background: transparent; }
:root { --link-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------- stage rail (.rail) */
/* <ol class="rail" style="--n:6">
     <li class="st confirmed"><b>Structures</b><span>Proposed with sources · confirmed by the client</span><em>Confirmed</em></li>
     <li class="st proposed">…<em>Proposed</em></li>
     <li class="st done">…<em>Done</em></li>
     <li class="st needs">…<em>Needs you</em></li></ol>
   States: proposed = waiting for the client's click · confirmed = a person signed ·
   done = machine stage complete · needs = needs drawings or the walk.
   .rail.grid3 lays six stages out 3 × 2 (inside a diagram); .paper / .light flips to light cards. */
.rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 10px; counter-reset: st; }
.rail .st { position: relative; counter-increment: st; padding: 46px 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.rail .st::before { content: counter(st); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 11.5px/1 Inter, sans-serif; z-index: 1; box-sizing: border-box; }
.rail .st:not(:last-child)::after { content: ""; position: absolute; top: 23px; left: calc(100% + 1px); width: 9px; height: 2px; background: #29c7ff77; }
.rail .st b { display: block; font-size: 14.5px; line-height: 1.25; }
.rail .st span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.rail .st em { position: absolute; right: 10px; top: 13px; font: 700 9px/1 Inter, sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; border-radius: 4px; white-space: nowrap; }
.st.proposed::before { border: 2px dashed var(--cyan); color: var(--cyan); background: var(--ink); }
.st.proposed em { color: var(--cyan); border: 1px dashed #29c7ff99; }
.st.proposed { border-color: #29c7ff66; box-shadow: 0 0 0 3px #29c7ff14; }
.st.confirmed::before, .st.done::before { content: ""; background: var(--cyan) var(--check) center/14px no-repeat; }
.st.confirmed em { background: var(--cyan); color: var(--ink); }
.st.done::before { background-color: var(--ok); }
.st.done em { background: var(--ok); color: var(--ink); }
.st.needs::before { content: "!"; border: 2px solid var(--amber); color: var(--amber); background: var(--ink); }
.st.needs em { color: var(--amber); border: 1px solid #ffc24b88; }
.st.needs { border-style: dashed; border-color: #ffc24b66; }
:root { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23050f2b' stroke-width='2.6'/%3E%3C/svg%3E"); }
.rail.grid3 { --n: 3; }
.rail.grid3 .st:nth-child(3n)::after { display: none; }
/* Legend: <ul class="rail-legend"><li class="st-k proposed">Proposed — your client confirms in a click</li>…</ul> */
.rail-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--muted); }
.rail-legend li { display: inline-flex; align-items: center; gap: 7px; }
.rail-legend li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.rail-legend .proposed::before { border: 2px dashed var(--cyan); }
.rail-legend .confirmed::before { background: var(--cyan); }
.rail-legend .done::before { background: var(--ok); }
.rail-legend .needs::before { border: 2px solid var(--amber); }
.paper .rail .st, .rail.light .st { background: #fff; border-color: #d8e3f7; }
.paper .rail .st span, .rail.light .st span { color: var(--paper-muted); }
.paper .rail .st b, .rail.light .st b { color: var(--paper-ink); }
.paper .st.proposed::before, .paper .st.needs::before { background: #fff; }
.paper .st.proposed::before, .paper .st.proposed em { color: var(--blue); border-color: var(--electric); }
.paper .st.needs::before, .paper .st.needs em { color: #92400e; border-color: #f0b54a; }
.paper .rail-legend { color: var(--paper-muted); }
@media (max-width: 1000px) {
  .rail:not(.grid3) { --n: 3; }
  .rail:not(.grid3) .st:nth-child(3n)::after { display: none; }
}
@media (max-width: 760px) {
  .rail, .rail.grid3 { grid-template-columns: 1fr; gap: 8px; }
  .rail .st { padding: 12px 12px 12px 48px; }
  .rail .st::before { top: 12px; }
  .rail .st em { position: static; display: inline-block; margin-top: 6px; }
  .rail .st:not(:last-child)::after, .rail.grid3 .st:nth-child(3n):not(:last-child)::after { display: block; top: 36px; bottom: -10px; left: 23px; right: auto; width: 2px; height: auto; background: var(--line); }
}

/* ------------------------------------------------- 8-step playbook grid (.steps) */
/* {{steps}} writes: <ol class="steps"><li class="reveal"><a class="step" href="/playbook.html#step-1">
     <span class="n">01</span><svg class="ic">…</svg><strong>SOPs</strong><p>…</p>
     <span class="who"><b>Ask</b>Facilities · chief engineer</span>
     <span class="moves"><b>Moves</b>SOP / curtailment readiness</span><span class="go">→</span></a></li>…</ol>
   Dark cards by default; white on a .paper band. .step.hl = the highlighted payoff card. */
.steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.steps > li { display: flex; }
.step { position: relative; display: flex; flex-direction: column; width: 100%; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 18px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow: hidden; }
.step:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 18px 40px #0006; }
.step .n { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--cyan); }
.step .ic { position: absolute; right: 18px; top: 20px; width: 34px; height: 34px; color: var(--cyan); opacity: .85; }
.step strong { display: block; font-size: 1.1rem; margin: 10px 0 6px; letter-spacing: -.01em; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); flex: 1; }
.step .who, .step .moves { display: block; font-size: 12.5px; line-height: 1.4; margin-top: 12px; }
.step .moves { margin-top: 6px; padding-top: 0; padding-right: 22px; }
.step .who b, .step .moves b { display: inline-block; min-width: 46px; margin-right: 6px; font: 700 9.5px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.step .who { padding-top: 12px; border-top: 1px solid var(--line); }
.step .go { position: absolute; right: 18px; bottom: 14px; font-weight: 800; color: var(--cyan); transition: transform .25s ease; }
.step:hover .go { transform: translateX(4px); }
.paper .step { background: #fff; border-color: #d8e3f7; box-shadow: 0 10px 30px #0b3bb812; }
.paper .step:hover { border-color: var(--electric); box-shadow: 0 18px 40px #0b3bb826; }
.paper .step .n, .paper .step .go, .paper .step .who b, .paper .step .moves b { color: var(--electric); }
.paper .step .ic { color: var(--blue); }
.paper .step strong { color: var(--paper-ink); }
.paper .step p { color: var(--paper-muted); }
.paper .step .who, .paper .step .moves { color: var(--paper-ink); }
.paper .step .who { border-top-color: var(--hairline); }
.step.hl, .paper .step.hl { background: radial-gradient(400px 220px at 90% 0%, #29c7ff55, transparent 70%), linear-gradient(125deg, var(--blue), var(--electric)); border-color: transparent; color: #fff; }
.step.hl .n, .step.hl .go, .step.hl .ic, .step.hl .who b, .step.hl .moves b { color: #bff0ff; }
.step.hl strong, .step.hl .who, .step.hl .moves { color: #fff; }
.step.hl p { color: #e3f0ff; }
.step.hl .who { border-top-color: #ffffff33; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- attributed stats (.stats) */
/* {{stats}} writes: <div class="stats"><div class="stat-cell"><span class="stat">58%</span><p>…</p>
     <p class="src"><a href="/proof.html#sources">FM, Broker Insights · 2025</a></p></div>…</div>
   <p class="stats-foot">quote <span class="src">Source · <a>All sources →</a></span></p>
   Every number carries its source and year and links to the Sources list. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); margin-top: 34px; }
.stat-cell { padding: 30px 26px 26px; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.stat-cell:first-child { border-left: 0; padding-left: 0; }
.stat-cell .stat { display: block; font-size: clamp(2.6rem, 4.4vw, 4.1rem); text-shadow: 0 0 40px #29c7ff40; }
.stat-cell p { margin: 14px 0 0; color: var(--ice); font-size: 15px; line-height: 1.5; flex: 1; }
.stat-cell .src { flex: none; margin-top: 14px; }
.stat-cell .src a, .stats-foot .src a { color: var(--muted); text-decoration: underline; text-decoration-color: #9db4dd66; text-underline-offset: 3px; }
.stat-cell .src a:hover, .stats-foot .src a:hover { color: var(--cyan); }
.stats-foot { margin: 22px 0 0; max-width: 900px; font-size: 1.05rem; line-height: 1.55; color: #fff; }
.stats-foot .src { display: block; margin-top: 6px; }
.paper .stats, .paper .stat-cell { border-color: #d8e3f7; }
.paper .stat-cell p { color: var(--paper-ink); }
.paper .stat-cell .src a, .paper .stats-foot .src a { color: var(--paper-muted); }
.paper .stats-foot { color: var(--paper-ink); }
@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
  .stat-cell { border-left: 0; padding: 22px 0; }
  .stat-cell + .stat-cell { border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------ evidence chips (.ev) */
/* <span class="ev v">Verified</span> <span class="ev p">Partially verified</span> <span class="ev n">Not evidenced</span>
   Shown separately, always: doubt is shown, not hidden. */
.ev { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; padding: 5px 10px 5px 8px; white-space: nowrap; }
.ev::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.ev.v { background: var(--ev-v); color: #fff; box-shadow: inset 0 0 0 1px #4f74d6; }
.ev.v::before { background: #7fb2ff; }
.ev.p { background: var(--ev-p); color: var(--paper-ink); }
.ev.p::before { background: linear-gradient(90deg, var(--ev-v) 50%, transparent 50%); border: 1.5px solid var(--ev-v); }
.ev.n { background: repeating-linear-gradient(135deg, var(--ev-n) 0 4px, #fff3c4 4px 8px); color: #92400e; }
.ev.n::before { border: 1.5px solid #b45309; }

/* --------------------------------------------------------- CARS ring (.ring) */
/* <div class="ring [dark]" style="--v:55" role="img" aria-label="CARS 55, band BB">
     <svg viewBox="0 0 100 100" aria-hidden="true"><circle class="bg" cx="50" cy="50" r="42"/>
       <circle class="fg" cx="50" cy="50" r="42" pathLength="100"/></svg>
     <div><span>CARS</span><b>55<i>BB</i></b></div></div>
   The arc draws in when its .reveal parent (or the ring itself) scrolls into view.
   */
.ring { --size: 118px; position: relative; width: var(--size); height: var(--size); flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .bg { stroke: #e9eef6; }
.ring .fg { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: var(--v) 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) .2s; }
.reveal.arm:not(.in) .ring .fg, .ring.reveal.arm:not(.in) .fg { stroke-dashoffset: var(--v); }
html:not(.js) .ring .fg { stroke-dashoffset: 0 !important; }
.ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring span { font: 700 8.5px Inter, sans-serif; letter-spacing: .16em; color: #52607a; }
.ring b { font-size: 2.1rem; line-height: 1; color: var(--blue); letter-spacing: -.03em; }
.ring b i { font-style: normal; font-size: .85rem; color: var(--electric); margin-left: 2px; }
.ring em { font-style: normal; font-size: 9.5px; color: #b45309; margin-top: 2px; }
.ring.dark .bg { stroke: #ffffff1f; } .ring.dark .fg { stroke: var(--cyan); }
.ring.dark span { color: var(--muted); } .ring.dark b { color: #fff; } .ring.dark b i { color: var(--cyan); } .ring.dark em { color: #ffd27a; }
.ring.lg { --size: 168px; } .ring.lg b { font-size: 3rem; }

/* ------------------------------------------------ example CARS card (.cars-card) */
/* {{cars_teaser}}: a white document card with the ring, the evidence legend and the
   11 categories (fixed weights; the example tower's scores from build.py CARS_CATS). */
.cars-card { background: #fff; color: var(--paper-ink); border-radius: 16px; border-top: 5px solid var(--electric); box-shadow: 0 40px 90px #0b3bb82e, 0 2px 0 #d8e3f7; padding: 18px 22px 18px; }
.cc-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.cc-top > div:first-child { min-width: 0; }
.cc-top small { display: block; font: 700 10.5px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #0891b2; margin-top: 8px; }
.cc-top strong { display: block; font-size: 1.3rem; line-height: 1.15; color: var(--blue); letter-spacing: -.02em; }
.cc-top em { display: block; font-style: normal; font-size: 12px; color: var(--paper-muted); }
.cc-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.cc-cats { list-style: none; margin: 0; padding: 0; }
.cc-cats li { display: grid; grid-template-columns: minmax(0, 1fr) 40px 90px 28px 12px; gap: 10px; align-items: center; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid #eef2f8; }
.cc-cats .cn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-cats .w { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: #8a98b8; text-align: right; }
.cc-cats .bar { height: 6px; border-radius: 3px; background: #edf2fa; overflow: hidden; }
.cc-cats .bar i { display: block; height: 100%; width: calc(var(--s) * 1%); background: var(--ev-v); transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.8,.2,1) .3s; }
.cc-cats .s-p .bar i { background: var(--ev-p); }
.cc-cats .s-n .bar { background: repeating-linear-gradient(135deg, #fde68a 0 4px, #fff7d6 4px 8px); }
.cc-cats .s-n .bar i { background: #f0b54a; }
.reveal.arm:not(.in) .cc-cats .bar i { transform: scaleX(0); }
.cc-cats b { text-align: right; font-variant-numeric: tabular-nums; }
.cc-cats .s-n b { color: #b45309; }
.cc-cats .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ev-v); }
.cc-cats .s-p .dot { background: var(--ev-p); }
.cc-cats .s-n .dot { background: var(--ev-n); box-shadow: inset 0 0 0 1.5px #b45309; }
.cc-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--paper-muted); font-style: italic; }
@media (max-width: 640px) {
  .cars-card { padding: 14px; }
  .cc-cats li { grid-template-columns: minmax(0, 1fr) 54px 26px 10px; gap: 8px; }
  .cc-cats .w { display: none; }
  .cc-top { flex-wrap: wrap; }
  .cc-top .ring { --size: 92px; } .cc-top .ring b { font-size: 1.6rem; }
}

/* ----------------------------------------------------------------- the film */
/* {{film}} writes: <div class="film" data-film><div class="film-fallback">…</div>
     <video controls playsinline preload="none" poster="…poster.jpg"><source …mp4><track kind="captions" …vtt></video>
     <button class="film-play">…</button></div><ol class="film-chapters">…</ol>
   Never autoplays with sound; the play button only appears with JS. */
.film { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: radial-gradient(900px 500px at 20% 20%, #0b3bb8aa, transparent 70%), #02081c; border-top: 5px solid var(--electric); box-shadow: 0 40px 90px #0009, 0 0 0 1px #ffffff14; margin-top: 40px; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: transparent; }
.film-fallback { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; padding: 20px; font-size: clamp(1.8rem, 5vw, 4.4rem); }
.film-fallback .display { line-height: .95; }
.film-fallback .c { color: var(--cyan); }
.film-fallback::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); }
.js .film-fallback .display { visibility: hidden; }
.film-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 20px; border: 0; cursor: pointer; color: #fff; background: radial-gradient(closest-side, #050f2b88, transparent), linear-gradient(0deg, #050f2bcc, transparent 55%); transition: opacity .35s ease; text-align: left; }
.film-play .ic { width: 96px; height: 96px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--cyan), #6fe0ff); box-shadow: 0 0 0 12px #29c7ff2e, 0 20px 50px #0009; transition: transform .25s ease, box-shadow .25s ease; }
.film-play .ic::before { content: ""; margin-left: 7px; border-left: 28px solid var(--ink); border-top: 17px solid transparent; border-bottom: 17px solid transparent; }
.film-play:hover .ic, .film-play:focus-visible .ic { transform: scale(1.06); box-shadow: 0 0 0 18px #29c7ff3a, 0 20px 50px #0009; }
.film-play strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1; letter-spacing: .01em; }
.film-play small { display: block; font: 700 12.5px/1.3 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); margin-top: 8px; }
.film-play:focus-visible { outline-offset: -6px; }
.film.playing .film-play { opacity: 0; pointer-events: none; }
.film.missing .film-play small::after { content: " · being rendered"; color: #ffd27a; }
.film-chapters { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.film-chapters button { display: inline-flex; align-items: baseline; gap: 7px; font: 600 13px/1.2 Inter, sans-serif; color: var(--ice); background: #ffffff0a; border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; cursor: pointer; transition: border-color .2s, background .2s; white-space: nowrap; }
.film-chapters button b { font: 600 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cyan); }
.film-chapters button:hover { border-color: #29c7ff88; }
.film-chapters button[aria-current="true"] { border-color: var(--cyan); background: #29c7ff1f; color: #fff; }
@media (max-width: 640px) {
  .film { border-radius: 12px; margin-top: 28px; }
  .film-play { flex-direction: column; gap: 10px; text-align: center; }
  .film-play .ic { width: 64px; height: 64px; box-shadow: 0 0 0 8px #29c7ff2e; }
  .film-play .ic::before { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; margin-left: 5px; }
  .film-play small { font-size: 10.5px; }
  .film-chapters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
}

/* ------------------------------------------------------------ the acts */
/* <div class="acts"><article class="act"><div class="act-copy"><p class="act-n"><span>Act 1</span>Address in</p>
     <h3 class="display">…</h3><p class="lede">…</p><a class="more" href="…">… →</a></div>
     <div class="act-fig"><div class="diagram">…</div></div></article>…</div>
   Even acts flip sides. */
.acts { display: grid; gap: 96px; margin-top: 64px; }
.act { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 56px; align-items: center; }
.act:nth-child(even) .act-copy { order: 2; }
.act-n { display: flex; align-items: center; gap: 12px; font: 700 12.5px/1.3 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); margin: 0 0 16px; }
.act-n span { font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: .06em; color: var(--ink); background: var(--cyan); padding: 5px 10px 4px; border-radius: 6px; }
.act h3.display { font-size: clamp(2.1rem, 4.2vw, 3.5rem); }
.act .lede { font-size: clamp(1.02rem, 1.4vw, 1.15rem); }
.act .ticks { margin-top: 18px; }
.more { display: inline-flex; gap: 8px; margin-top: 22px; font-weight: 700; text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
.small-print { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; }
.paper .small-print { color: var(--paper-muted); }
@media (max-width: 1000px) {
  .act { grid-template-columns: 1fr; gap: 30px; }
  .act:nth-child(even) .act-copy { order: 0; }
  .acts { gap: 72px; }
}

/* -------------------------------------------------- diagram panel (.diagram) */
/* <div class="diagram"> …HTML/SVG… </div>
   A blueprint-grid panel for the explainers. Keep text as HTML (it stays legible
   at 390 px); use SVG for lines and shapes. */
.diagram { position: relative; background: linear-gradient(160deg, #0a2160, #071a4a 70%); border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: 0 30px 70px #0007; overflow: hidden; isolation: isolate; }
.diagram::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 85%); mask-image: radial-gradient(circle at 50% 40%, #000, transparent 85%); }
.dg-k { font: 700 10.5px/1.3 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin: 0 0 10px; }
@media (max-width: 640px) { .diagram { padding: 18px 14px; border-radius: 14px; } }

/* Act 1 — fan-out from one address (.fan)
   <div class="diagram fan"><div class="fan-addr">…</div><svg class="fan-lines">…</svg>
     <ul class="fan-tracks"><li><b>Ownership</b><span class="cite">cited</span></li>…</ul>
     <div class="fan-plus">…</div><p class="dg-k">…</p><ol class="rail grid3">…</ol></div> */
.fan-addr { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin: 6px auto 0; background: #fff; color: var(--paper-ink); border-radius: 999px; padding: 9px 18px 9px 12px; font-weight: 700; font-size: 14px; box-shadow: 0 0 0 5px #29c7ff2e, 0 14px 30px #0008; }
.fan-addr svg { width: 22px; height: 22px; color: var(--electric); flex: none; }
.fan-lines { display: block; width: 100%; height: 46px; overflow: visible; }
.fan-lines path { fill: none; stroke: #29c7ff88; stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -14; } }
.fan-tracks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fan-tracks li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: #050f2bb3; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 12.5px; line-height: 1.3; color: #fff; min-width: 0; }
.fan-tracks li b { font-weight: 600; }
.fan-plus { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #29c7ff55; background: #29c7ff12; font-size: 13px; color: var(--ice); text-align: center; }
.fan-plus strong { color: #fff; }
.fan-down { display: block; width: 2px; height: 26px; margin: 8px auto; background: linear-gradient(var(--cyan), transparent); }
@media (max-width: 760px) { .fan-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fan-lines { height: 30px; } }

/* Act 2 — who the broker asks (.hub)
   <div class="diagram hub"><svg class="hub-lines">…</svg><div class="hub-grid">
     <div class="node n1"><b>…</b><span>…</span></div>…<div class="hub-core">…</div></div></div> */
.hub-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-template-areas: "n1 n2 n3" ". core ." "n4 n5 n6"; gap: 34px 14px; align-items: center; }
.hub-lines { position: absolute; inset: 26px; width: calc(100% - 52px); height: calc(100% - 52px); z-index: 0; overflow: visible; }
.hub-lines line { stroke: #29c7ff77; stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; animation: flow-in 1.4s linear infinite; }
@keyframes flow-in { to { stroke-dashoffset: 16; } }
.node { position: relative; z-index: 1; background: #050f2bd9; border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 12px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.node b { display: block; color: #fff; font-size: 13.5px; margin-bottom: 3px; }
.node .ni { display: block; width: 26px; height: 26px; color: var(--cyan); margin-bottom: 6px; }
.node.field { border-color: var(--cyan); background: linear-gradient(160deg, #0b3bb8, #0a2160); color: var(--ice); }
.n1 { grid-area: n1; } .n2 { grid-area: n2; } .n3 { grid-area: n3; } .n4 { grid-area: n4; } .n5 { grid-area: n5; } .n6 { grid-area: n6; }
.hub-core { grid-area: core; position: relative; z-index: 1; display: grid; place-items: center; text-align: center; aspect-ratio: 1; width: min(100%, 150px); justify-self: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6fe0ff, var(--cyan) 45%, #1590c9); color: var(--ink); box-shadow: 0 0 0 10px #29c7ff22, 0 0 0 22px #29c7ff10, 0 20px 50px #0009; padding: 12px; }
.hub-core span { font: 700 10px/1.2 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.hub-core b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.45rem; line-height: .95; display: block; margin-top: 4px; }
@media (max-width: 760px) {
  .hub-grid { grid-template-columns: 1fr; grid-template-areas: "core" "n1" "n2" "n3" "n4" "n5" "n6"; gap: 8px; }
  .hub-lines { display: none; }
  .hub-core { width: 130px; margin-bottom: 12px; }
  .node { border-left: 3px solid var(--cyan); }
}

/* Act 3 — evidence to terms (.terms-dg)
   <div class="diagram terms-dg"><div class="evi"><p class="dg-k">…</p><ul><li><span class="ev v">Verified</span>…</li></ul></div>
     <div class="to"></div><ol class="term-list"><li><b>…</b><span>Seek …</span></li>…</ol><p class="decides">…</p></div> */
.terms-dg { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 10px; align-items: center; padding-top: 50px; }
.evi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.evi li { display: grid; gap: 6px; background: #050f2bc9; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; font-size: 12.5px; line-height: 1.4; color: var(--ice); }
.evi li .ev { justify-self: start; }
.terms-dg .to { height: 2px; background: linear-gradient(90deg, #29c7ff33, var(--cyan)); position: relative; }
.terms-dg .to::after { content: ""; position: absolute; right: -2px; top: -5px; border-left: 9px solid var(--cyan); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.term-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: t; }
.term-list li { counter-increment: t; position: relative; background: #fff; color: var(--paper-ink); border-radius: 10px; padding: 10px 12px 10px 42px; font-size: 12.5px; line-height: 1.35; box-shadow: 0 10px 24px #0006; }
.term-list li::before { content: counter(t); position: absolute; left: 12px; top: 10px; font-family: var(--display); font-size: 1.35rem; line-height: 1; color: var(--electric); }
.term-list b { display: block; font-size: 13.5px; }
.term-list span { color: var(--paper-muted); }
.decides { grid-column: 1 / -1; margin: 8px 0 0; text-align: center; font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; letter-spacing: .02em; color: #fff; }
.decides span { color: var(--cyan); }
@media (max-width: 760px) {
  .terms-dg { grid-template-columns: 1fr; }
  .terms-dg .to { width: 2px; height: 26px; justify-self: center; background: linear-gradient(#29c7ff33, var(--cyan)); }
  .terms-dg .to::after { right: -5px; top: auto; bottom: -3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--cyan); border-bottom: 0; }
}

/* -------------------------------------------- horizontal shot rail (.shots-rail) */
/* <div class="rail-head"><div class="head">…</div><div class="rail-nav needs-js">
     <button type="button" data-rail-prev="screens" aria-label="Previous screens">←</button>
     <button type="button" data-rail-next="screens" aria-label="Next screens">→</button></div></div>
   <div class="shots-rail" id="screens" data-rail><ul class="shots-track"><li>{{phone:…}}</li>…</ul></div> */
.rail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.rail-nav { display: flex; gap: 10px; flex: none; }
.rail-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: #fff; font-size: 20px; cursor: pointer; transition: border-color .2s, opacity .2s; }
.rail-nav button:hover:not(:disabled) { border-color: var(--cyan); }
.rail-nav button:disabled { opacity: .35; cursor: default; }
.shots-rail { position: relative; margin-top: 34px; }
.shots-track { list-style: none; margin: 0; padding: 14px 2px 22px; display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.shots-track > li { scroll-snap-align: start; }
.shots-track .shot .phone { width: 100%; }
.shots-track .shot figcaption { font-size: 13px; }
@media (max-width: 760px) {
  .rail-head { display: block; }
  .rail-nav { display: none; }
  .shots-track { grid-auto-columns: 210px; gap: 18px; -webkit-mask-image: none; mask-image: none; }
  .shots-track .shot .phone { width: 100%; margin: 0; }
}

/* ------------------------------------------------- render + phone stack (.stack) */
/* <div class="stack">{{img:replica-white-studio-home|full}}<div class="stack-phone" data-parallax="0.08">{{phone:…|nocap}}</div></div> */
.stack { position: relative; padding: 0 0 90px; }
.stack > .pic { width: 90%; }
.stack-phone { position: absolute; right: 0; bottom: 0; width: 210px; }
.stack-phone .phone { width: 210px; transform: rotate(4deg); }
.stack-cap { margin: 14px 0 0; max-width: 64%; }
@media (max-width: 1000px) { .stack > .pic { width: 100%; } }
@media (max-width: 640px) {
  .stack { padding: 0; }
  .stack-phone { position: relative; width: auto; margin-top: -60px; display: flex; justify-content: flex-end; padding-right: 8px; }
  .stack-phone .phone { width: 150px; }
  .stack-cap { max-width: none; }
}

/* --------------------------------------------------------- chart card (.chart) */
/* <figure class="chart"><figcaption><h3>…</h3><p>…</p></figcaption>
     <svg viewBox="…" role="img" aria-label="…">…</svg><ul class="chart-metrics">…</ul></figure> */
.chart { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 18px; display: flex; flex-direction: column; }
.chart figcaption h3 { margin: 10px 0 4px; font-size: 1.15rem; }
.chart figcaption p { margin: 0; color: var(--muted); font-size: 14px; }
.chart svg { display: block; width: 100%; height: auto; margin-top: 16px; }
.chart svg text { font-family: Inter, system-ui, sans-serif; }
.chart-metrics { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 12.5px; color: var(--muted); }
.chart-note { margin: auto 0 0; padding-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.chart-metrics + .chart-note { margin-top: 14px; }
.chart-metrics b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: #fff; letter-spacing: .01em; line-height: 1.05; }

/* ------------------------------------------------- what happens next (.chain.c4) */
/* site.css .chain is five columns; .c4 makes it four. Same markup as InsureMEP's chain. */
.chain.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chain.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paper .chain > div { background: #fff; border-color: #d8e3f7; }
.paper .chain p { color: var(--paper-muted); }
.paper .chain .n { color: var(--electric); }
@media (max-width: 1000px) { .chain.c4, .chain.c3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .chain.c4, .chain.c3 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- equipment art (.equip) */
/* <div class="equip"><figure class="eq">{{img:equipment-water-shutoff}}<figcaption><b>Water shutoffs</b><span>…</span></figcaption></figure>…</div> */
.equip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.eq { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.eq .art { height: 132px; width: 100%; object-fit: contain; padding: 18px; background: radial-gradient(circle at 50% 55%, #ffffff, #dfe9fb 80%); }
.eq figcaption { padding: 14px 16px 18px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.eq figcaption b { display: block; color: #fff; font-size: 1.02rem; margin-bottom: 4px; }
/* Inside a .split column the cards turn sideways: art left, words right. */
.split .equip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split .eq { flex-direction: row; align-items: stretch; }
.split .eq .art { width: 104px; height: auto; min-height: 104px; flex: none; padding: 14px; }
.split .eq figcaption { padding: 14px 14px 14px 16px; align-self: center; }
@media (max-width: 1000px) { .equip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .split .equip { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .eq .art { height: 104px; padding: 14px; } .eq figcaption { padding: 12px 12px 14px; } }

/* ------------------------------------------------- request builder (.req) */
/* <div class="req"><form class="req-form" id="request-form" data-mailto="{{contact_email}}"
       data-subject="Broker request — … — " data-what="WHAT TO DO: …">
     <fieldset class="fs"><legend>You</legend><div class="fgrid">
       <div class="field"><label for="rq-name">Broker name <abbr title="required">*</abbr></label>
         <input id="rq-name" name="broker_name" data-label="Broker name" required></div>…</div></fieldset>
     <fieldset class="field full" data-label="What the client already has"><legend>…</legend><div class="checks">
       <label><input type="checkbox" value="Floor plans"> Floor plans</label>…</div></fieldset>
     <div class="req-actions"><button class="btn" type="submit">…</button><button class="btn line" type="button" data-copy>…</button></div>
     <p class="req-status" role="status" aria-live="polite"></p></form>
   <aside class="mail-preview"><div class="mail-head">…</div><pre data-preview-for="request-form">{{mailbody:request-form}}</pre></aside></div>
   broker.js composes the mailto (WHAT TO DO first, every field labelled, required ones
   marked, then page-detected facts). {{mailto:request-form}} is the no-JS fallback link. */
.req { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: start; }
.req-form { background: #fff; color: var(--paper-ink); border-radius: 18px; border-top: 5px solid var(--electric); padding: 30px; box-shadow: 0 40px 90px #0008; }
.req-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.req-form .fs + .fs, .req-form .fs + .field, .req-form .field.full + .fs { margin-top: 26px; }
.req-form legend { font: 700 11px/1.3 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); padding: 0; margin-bottom: 14px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full, .fgrid .full { grid-column: 1 / -1; }
.field label, .field > legend { font: 600 14px/1.3 Inter, sans-serif; color: var(--paper-ink); letter-spacing: 0; text-transform: none; margin: 0; }
.field abbr { color: #b42318; text-decoration: none; font-weight: 800; margin-left: 2px; }
.field .hint { font-size: 12.5px; color: var(--paper-muted); }
.req-form input:not([type=checkbox]), .req-form select, .req-form textarea { width: 100%; font: 15px/1.4 Inter, sans-serif; color: var(--paper-ink); background: #f7f9fe; border: 1.5px solid #d3def3; border-radius: 10px; padding: 11px 12px; min-height: 46px; transition: border-color .15s, box-shadow .15s; }
.req-form textarea { min-height: 96px; resize: vertical; }
.req-form input:focus, .req-form select:focus, .req-form textarea:focus { outline: none; border-color: var(--electric); box-shadow: 0 0 0 4px #1f6bff2e; background: #fff; }
.req-form input:user-invalid, .req-form select:user-invalid { border-color: #d92d20; box-shadow: 0 0 0 4px #d92d201f; }
.req-form ::placeholder { color: #8a98b8; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #d3def3; border-radius: 999px; padding: 8px 14px 8px 11px; cursor: pointer; font: 500 14px Inter, sans-serif; color: var(--paper-ink); background: #fff; transition: border-color .15s, background .15s; }
.checks input { width: 17px; height: 17px; margin: 0; accent-color: var(--electric); }
.checks label:has(input:checked) { border-color: var(--electric); background: #e8f0ff; }
.checks label:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.req-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.req-actions .btn { border: 0; cursor: pointer; font-family: inherit; }
.btn.line { background: #fff; color: var(--blue); border: 1.5px solid #c7d6f3 !important; box-shadow: none; }
.req-status { margin: 12px 0 0; font-size: 13.5px; color: #047857; min-height: 1.4em; }
.req-alt { margin: 10px 0 0; font-size: 13px; color: var(--paper-muted); }
.req-alt a { color: var(--blue); font-weight: 600; }
.mail-preview { position: sticky; top: 92px; background: #050f2bcc; border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 30px 70px #0007; }
.mail-preview .dg-k { display: flex; align-items: center; gap: 8px; }
.mail-head { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.mail-head b { color: #fff; font-weight: 600; }
.mail-preview pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ice); max-height: 560px; overflow: auto; }
.mail-preview pre .what { color: var(--cyan); font-weight: 700; }
.mail-foot { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 1000px) { .req { grid-template-columns: 1fr; } .mail-preview { position: static; } }
@media (max-width: 640px) { .req-form { padding: 20px 16px; border-radius: 14px; } .fgrid { grid-template-columns: 1fr; } .req-actions .btn { width: 100%; justify-content: center; white-space: normal; } }

/* ----------------------------------------------------------------- FAQ (.faq) */
/* <div class="faq"><details><summary>Question?</summary><div><p>Answer.</p></div></details>…</div> */
.faq { max-width: 900px; margin-top: 30px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 2px; font-weight: 700; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; color: var(--cyan); background: linear-gradient(currentColor, currentColor) center/12px 2px no-repeat, linear-gradient(currentColor, currentColor) center/2px 12px no-repeat; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 2px 20px; color: var(--ice); max-width: 760px; }
.faq details > div p { margin: 0 0 10px; }
.paper .faq, .paper .faq details { border-color: #d8e3f7; }
.paper .faq summary { color: var(--paper-ink); }
.paper .faq summary::after { color: var(--electric); }
.paper .faq details > div { color: var(--paper-muted); }


/* --------------------------------------------- free band figure + stamp tweak */
.free-fig { position: relative; }
.free-fig .photo { box-shadow: 0 30px 70px #0007; }

/* -------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .addr-list li, .addr-out { animation: none; }
  .addr-in .caret, .fan-lines path, .hub-lines line { animation: none; }
  .ring .fg, .cc-cats .bar i { transition: none; }
  .reveal.arm:not(.in) .ring .fg, .ring.reveal.arm:not(.in) .fg { stroke-dashoffset: 0; }
  .reveal.arm:not(.in) .cc-cats .bar i { transform: none; }
  .hero .teaser { transition: none; }
  .step, .step .go, .shot .phone, .film-play, .film-play .ic { transition: none; }
  html { scroll-behavior: auto; }
}
@media print { .teaser, .teaser-toggle, .film-play, .film-chapters, .rail-nav { display: none !important; } .reveal, .reveal.arm:not(.in) { opacity: 1 !important; transform: none !important; } }

/* 110 Central Park South: the customer line on the CARS card, and the record's own figures in the diagrams */
.cars-card .cust { display:block; margin-top:8px; font-size:12px; line-height:1.4; color:#4a5b82; letter-spacing:.01em; }
.cars-card .ring em, .pf-doc-top .ring em { display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#92400e; margin-top:2px; }
.rec-fig { display:block; width:100%; border-radius:12px; overflow:hidden; border:1px solid #d8e3f7; background:#fff; }
.rec-fig img { display:block; width:100%; height:auto; }
.rec-fig figure, .rec-fig .pic { margin:0; }
.rec-fig figcaption { display:none; }
.sf-plan .rec-fig { border-color:#29c7ff55; }

/* value-prop ribbon (Casey, 2026-10-07: "push the value props front and center") */
.vp { background: linear-gradient(90deg, #071a4a, #0b2a7a 60%, #071a4a); border-bottom: 1px solid rgba(41,199,255,.45); color: #fff; }
.vp .wrap { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: baseline; padding: 12px 0; font: 600 15px/1.4 "Inter", system-ui, sans-serif; }
.vp .vp-k { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: #29c7ff; font-weight: 800; }
.vp b { color: #29c7ff; font-weight: 800; }
@media (max-width: 720px) { .vp .wrap { padding: 10px 0; font-size: 14px; gap: 4px 16px; } }

/* the ribbon scrolls (Casey, 2026-10-07: "the broker one should scroll too"); pauses on hover; static for reduced motion */
.vp .wrap { display: block; overflow: hidden; padding: 11px 0; }
.vp .track { display: inline-flex; gap: 0 56px; white-space: nowrap; animation: vp-scroll 48s linear infinite; }
.vp .track > span { flex: none; }
.vp:hover .track { animation-play-state: paused; }
@keyframes vp-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vp .track { animation: none; } }

/* cache key bump 2026-10-07: the scrolling ribbon (a stale compressed variant was being served) */

/* the ribbon is the front layer (Casey, 2026-10-07: "too faded … on the front layer"): sticky under the header, solid, display type */
.vp { position: sticky; top: 70px; z-index: 39; background: linear-gradient(90deg, #0b3bb8, #1f6bff 55%, #0b3bb8); border-bottom: 1px solid #29c7ff; box-shadow: 0 10px 30px rgba(5, 15, 43, .45); }
.vp .wrap { padding: 9px 0; }
.vp .track { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: #fff; gap: 0 48px; }
.vp .track > span::after { content: "·"; color: #29c7ff; margin-left: 48px; }
.vp b { color: #9cecff; font-weight: 400; }
.vp .vp-k { font-family: "Inter", system-ui, sans-serif; font-size: 11.5px; letter-spacing: .22em; color: #050f2b; background: #29c7ff; border-radius: 999px; padding: 5px 10px; align-self: center; }
.vp .vp-k::after { content: none; }
@media (max-width: 720px) { .vp { top: 62px; } .vp .track { font-size: 19px; } }