/* ==========================================================================
   Evidence Reporting - built to the Scan bar (evidence-page-rhythm skill).
   Guilloche is the Reporting pattern (banknote / certificate engraving).
   BACKGROUND RHYTHM: white (--canvas) / light gray (--slate-100) / dramatic
   dark (--slate-950) alternate - white, gray, white, gray, BLACK, white,
   black. Dark is the tentpole (the VM/CRQ/BI contrast) and the closer.
   PACING: deck-full story slides (hero, questions, contrast, closer) interleave
   with denser flow (the CFO board readout, the six capabilities) and a quiet
   carrier band. SCROLL: the CVE->dollar reading field behind 1-3
   (read-field.*) plus the composed board readout (data-scrub="board").
   Foil styling lives in assets/holo/holo-fallback.css; page CSS only sizes and
   positions foil boxes and lays out copy. Tokens from brand/elevate-tokens.css.
   ========================================================================== */

/* ---------- page shell + section stacking above the fixed reading field ---------- */
.rep{background:var(--canvas);color:var(--ink);}
.rep section{padding:var(--space-2xl) 0;position:relative;z-index:1;}
.rep .deck-full{padding-top:0;padding-bottom:0;}

/* the background rhythm, stated per section.
   ACT ONE (1-3) sits OVER the fixed CVE->dollar reading field, so those
   sections are TRANSPARENT - the white page + the reading texture show
   through (like Scan's sections over the radar). The gray / dark rhythm
   then runs across act two: gray (4), dark tentpole (5), white (6), dark
   closer (7). */
.rep-hero{background:transparent;}
.rep-ask{background:transparent;}
.rep-board{background:transparent;}
.rep-gives{background:var(--slate-100);}
.rep-price{background:var(--slate-950);color:var(--on-dark);}
.rep-carrier{background:var(--canvas);}
.rep-final{background:var(--slate-950);color:var(--on-dark);}

/* ---------- shared editorial type ---------- */
.rep-h{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(30px,4.2vw,52px);line-height:1.14;letter-spacing:-0.02em;color:inherit;margin:0 0 var(--space-sm);}
.rep-h__em{color:inherit;}
.rep-h--center{text-align:center;}
.rep-p{font-size:18px;line-height:1.7;color:inherit;max-width:56ch;margin:0;}
.rep-p--center{margin:0 auto;text-align:center;}

/* ---------- 1 · hero (white) ---------- */
.rep .rep-hero{isolation:isolate;text-align:center;overflow:hidden;}
.rep-hero__in{max-width:960px;margin:0 auto;padding:120px var(--space-sm) var(--space-lg);display:flex;flex-direction:column;align-items:center;}
.rep-hero__h{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(44px,7vw,92px);line-height:1.05;letter-spacing:-0.03em;margin:0;}
.rep-hero__lead{font-size:clamp(19px,2.4vw,27px);line-height:1.6;max-width:34ch;margin:var(--space-sm) 0 0;}
.rep-hero__cta{margin-top:var(--space-lg);display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;justify-content:center;}
.rep-hero__link{font-size:17px;font-weight:var(--w-medium);color:var(--ink);text-decoration:none;}

/* ---------- 2 · the interrogation (light gray, scrub) ----------
   Default layout (no JS / reduced motion / small screens) is a plain stacked
   list of the four questions with a quiet empty field under them. When
   reporting.js arms the scrub (.rep-ask.scrub-on) the section grows tall, the
   stage goes sticky, the questions overlay each other (crossfaded by the
   scrub) and the answer field types + kills the vuln-speak "answers". */
.rep-ask{text-align:center;}
.rep-ask__in{max-width:920px;position:relative;margin:0 auto;}
.rep-ask__h{margin-bottom:var(--space-sm);}
.rep-askq{max-width:820px;margin:var(--space-lg) auto 0;}
/* the shared card: question + typed answer live on one gray surface */
.rep-askq__card{background:var(--slate-100);border-radius:var(--radius-card);padding:clamp(28px,4vw,48px);}
.rep-askq__qs{display:flex;flex-direction:column;gap:var(--space-md);}
.rep-askq__q{font-family:var(--font-display);font-size:clamp(26px,3.6vw,44px);font-weight:var(--w-bold);line-height:1.14;letter-spacing:-0.02em;color:var(--ink);margin:0;}
.rep-askq__field{margin-top:var(--space-md);display:flex;align-items:center;gap:14px;text-align:left;}
.rep-askq__cur{font-family:var(--font-display);font-weight:var(--w-bold);font-size:52px;line-height:1;color:var(--slate-300);}
.rep-askq__slot{flex:1;min-height:64px;border-radius:12px;background:var(--canvas);display:flex;align-items:center;gap:4px;padding:0 20px;overflow:hidden;}
.rep-askq__ans{font-size:18px;font-weight:var(--w-medium);color:var(--slate-400);white-space:nowrap;}
.rep-askq__ans span{display:inline-block;white-space:pre;will-change:transform,opacity,filter;}
.rep-askq__caret{flex:none;width:3px;height:30px;border-radius:2px;background:var(--ink);}
html.rv-on .rep-askq__caret{animation:rep-caret 1.1s steps(2,start) infinite;}
@keyframes rep-caret{0%,49%{opacity:1;}50%,100%{opacity:0;}}
/* the rejection: once the vuln-speak answer finishes typing the slot shakes
   "no" (decaying oscillation, settles to rest) and the $ tips away from it;
   the "not dollars" badge (first question only - it teaches the gesture)
   fades in after, and dies with the dust. reporting.js latches --no and
   drives the badge opacity off the scrub. */
.rep-askq__field--no .rep-askq__slot{animation:rep-no .5s cubic-bezier(.36,.07,.19,.97) both;}
@keyframes rep-no{0%,100%{transform:translateX(0);}15%{transform:translateX(-8px);}35%{transform:translateX(7px);}55%{transform:translateX(-5px);}75%{transform:translateX(3px);}90%{transform:translateX(-1px);}}
.rep-askq__field--no .rep-askq__cur{animation:rep-no-cur .55s cubic-bezier(.22,1,.36,1) both;}
@keyframes rep-no-cur{0%,100%{transform:rotate(0);}40%{transform:rotate(-12deg);}}
.rep-askq__bad{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--slate-100);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:var(--w-medium);color:var(--ink);opacity:0;will-change:transform,opacity;}
.rep-askq__bad-x{position:relative;width:10px;height:10px;}
.rep-askq__bad-x::before,.rep-askq__bad-x::after{content:'';position:absolute;left:4px;top:0;width:2.5px;height:10px;border-radius:2px;background:var(--ink);transform:rotate(45deg);}
.rep-askq__bad-x::after{transform:rotate(-45deg);}
/* armed stage. Padding goes so the sticky stage stays pinned to the very
   end of the driver. */
.rep-ask.scrub-on{min-height:420vh;padding:0;}
.rep-ask.scrub-on .rep-ask__sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;justify-content:center;}
.rep-ask.scrub-on .rep-askq__qs{display:grid;}
.rep-ask.scrub-on .rep-askq__q{grid-area:1/1;align-self:center;opacity:0;min-height:3.5em;display:flex;align-items:center;justify-content:center;will-change:transform,opacity,filter;}

/* ---------- 3 · the composed board readout (white, scrub) ---------- */
.rep-board{min-height:300vh;}
.rep-board__sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;}
.rep-trans__grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-xl);align-items:center;width:100%;}
@media(max-width:880px){.rep-trans__grid{grid-template-columns:1fr;gap:var(--space-lg);}.rep-board{min-height:auto;}.rep-board__sticky{position:static;min-height:auto;}}
/* the surface is a layer (.rep-slide__bg) so the scrub can fade the frame in
   AFTER the flying figure docks; overflow stays visible for the flight */
.rep-slide{position:relative;width:min(100%,520px);justify-self:center;background:var(--slate-50);border-radius:16px;}
.rep-slide__bg{position:absolute;inset:0;background:var(--slate-50);border-radius:16px;}
.rep-slide__bar,.rep-slide__body{position:relative;}
html.rv-on .rep-board.scrub-on .rep-slide{background:none;}
/* the flying figure: reporting.js transforms the inner span between screen
   centre (big) and its docked slot */
.rep-fig-fly{display:inline-flex;align-items:flex-start;gap:6px;transform-origin:center;will-change:transform;}
.rep-slide__fig{position:relative;z-index:2;}
.rep-slide__caret{display:none;flex:none;width:4px;height:0.78em;border-radius:2px;background:var(--ink);align-self:center;}
html.rv-on .rep-board.scrub-on .rep-slide__caret{display:block;animation:rep-caret 1.1s steps(2,start) infinite;}
html.rv-on .rep-board.scrub-on .rep-slide--counted .rep-slide__caret{display:none;}
/* before the count the figure is just the holo $ + caret; the digits are
   born into it */
html.rv-on .rep-board.scrub-on .rep-slide__fig .rep-count{opacity:0;}
html.rv-on .rep-board.scrub-on .rep-slide--counted .rep-slide__fig .rep-count{opacity:1;transition:opacity 300ms ease-out;}
.rep-slide__bar{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-xs);padding:var(--space-sm) 28px 0;}
.rep-slide__bar span:first-child{font-size:24px;font-weight:600;color:var(--ink);}
.rep-slide__pill{display:inline-block;height:12px;width:64px;border-radius:4px;background:var(--slate-200);}
.rep-slide__body{padding:var(--space-sm) 28px;}
.rep-slide__label{font-size:14px;font-weight:var(--w-medium);color:var(--ink);margin:0 0 8px;}
.rep-slide__fig{display:flex;align-items:flex-start;gap:6px;font-family:var(--font-display);font-weight:700;font-size:clamp(40px,4vw,52px);letter-spacing:-0.02em;line-height:1;color:var(--ink);margin:0;}
.rep-slide__cur{font-size:0.7em;font-weight:500;margin-top:0.1em;}
.rep-slide__delta{font-size:15px;font-weight:var(--w-medium);color:var(--ink);margin:12px 0 0;}
.rep-slide__delta .rep-slide__cur{font-size:1em;margin:0;}
.rep-slide__sparkwrap{position:relative;margin-top:var(--space-sm);}
.rep-slide__spark{display:block;width:100%;height:auto;}
.rep-slide__spark polyline{fill:none;stroke:var(--slate-400);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.rep-slide__spark circle{fill:var(--slate-950);stroke:#fff;stroke-width:2;}
.rep-slide__sparkwrap .hl.hl--rule{position:absolute;inset:0;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2096'%3E%3Cpolyline%20points='4,84%2036,74%2064,76%2096,58%20128,50%20156,52%20192,36%20224,28%20256,22%20288,14%20310,10'%20fill='none'%20stroke='%23fff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2096'%3E%3Cpolyline%20points='4,84%2036,74%2064,76%2096,58%20128,50%20156,52%20192,36%20224,28%20256,22%20288,14%20310,10'%20fill='none'%20stroke='%23fff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.rep-slide__spark--dot{position:absolute;inset:0;z-index:1;height:100%;pointer-events:none;}

/* the trendline draws when beat 2 arrives (reporting.js adds .rep-slide--drawn) */
.rep-slide__draw{stroke-dasharray:520;stroke-dashoffset:0;}
html.rv-on .rep-board.scrub-on .rep-slide__draw{stroke-dashoffset:520;}
html.rv-on .rep-board.scrub-on .rep-slide__sparkfoil,
html.rv-on .rep-board.scrub-on .rep-slide__spark--dot{opacity:0;}
html.rv-on .rep-slide--drawn .rep-slide__draw{stroke-dashoffset:0;transition:stroke-dashoffset 1000ms var(--ease-silk,cubic-bezier(.22,1,.36,1));}
html.rv-on .rep-slide--drawn .rep-slide__sparkfoil{opacity:1;transition:opacity 500ms ease-out 750ms;}
html.rv-on .rep-slide--drawn .rep-slide__spark--dot{opacity:1;transition:opacity 400ms ease-out 900ms;}

/* scrub phases: visible by default (no-JS); the scrub sets opacity live */
.rep-phase{opacity:1;}

/* ---------- 4 · the six capabilities (light gray, dense) ---------- */
.rep-gives__h{max-width:22ch;margin-bottom:var(--space-lg);}
.rep-caps{position:relative;padding-left:calc(clamp(20px,2.5vw,36px) + var(--space-md));display:flex;flex-direction:column;gap:var(--space-lg);}
.rep-caps__seal{position:absolute;left:0;top:0;bottom:0;width:clamp(20px,2.5vw,36px);border-radius:8px;}
.rep-cap h3{font-family:var(--font-display);font-size:clamp(21px,2.4vw,27px);font-weight:var(--w-bold);letter-spacing:-0.015em;line-height:1.2;color:var(--ink);margin:0 0 10px;max-width:30ch;}
.rep-cap p{font-size:17px;line-height:1.65;color:var(--ink);max-width:62ch;margin:0;}
.rep-cap__fig{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(26px,3vw,38px);letter-spacing:-0.02em;line-height:1;color:var(--ink);margin:14px 0 0;display:flex;align-items:flex-start;gap:4px;}
.rep-cap__fig .rep-slide__cur{font-size:0.62em;font-weight:var(--w-medium);margin-top:0.12em;}
.rep-conc{display:flex;align-items:flex-end;gap:10px;height:64px;margin-top:16px;}
.rep-conc__bar{width:34px;height:var(--w);background:var(--slate-300);border-radius:6px 6px 0 0;transform-origin:bottom;transform:scaleY(0);}
html.rv-on .rep-cap.in .rep-conc__bar{transform:scaleY(1);transition:transform 700ms var(--ease-silk,cubic-bezier(.22,1,.36,1));}
html.rv-on .rep-cap.in .rep-conc__bar:nth-child(2){transition-delay:90ms;}
html.rv-on .rep-cap.in .rep-conc__bar:nth-child(3){transition-delay:180ms;}
html.rv-on .rep-cap.in .rep-conc__bar:nth-child(4){transition-delay:270ms;}

/* ---------- 5 · the category contrast (dark, the loud slide) ---------- */
.rep-price{text-align:center;}
.rep-price__in{max-width:900px;}
.rep-price__stack{list-style:none;margin:0;padding:0;}
.rep-price__row{font-family:var(--font-display);font-weight:var(--w-bold);letter-spacing:-0.025em;line-height:1.1;}
.rep-price__row--rival{font-size:clamp(28px,4.6vw,54px);color:var(--slate-500);margin-bottom:8px;}
.rep-price__row--us{font-size:clamp(44px,8vw,104px);margin-top:var(--space-sm);color:var(--on-dark);}
.rep-price__notes{max-width:60ch;margin:var(--space-xl) auto 0;display:flex;flex-direction:column;gap:var(--space-sm);}
.rep-price__notes p{font-size:17px;line-height:1.65;color:#fff;margin:0;}

/* ---------- 6 · the carrier band (white, quiet) ---------- */
.rep-carrier__in{max-width:860px;text-align:center;margin:0 auto;}
.rep-carrier .rep-p{margin-top:var(--space-sm);}

/* ---------- 7 · closer (dark) ---------- */
.rep-final{text-align:center;}
.rep-final__in{max-width:860px;margin:0 auto;}
.rep-final__h{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(36px,5.6vw,68px);line-height:1.08;letter-spacing:-0.025em;color:var(--on-dark);margin:0;}
.rep-final__p{font-size:18px;line-height:1.7;color:#fff;max-width:52ch;margin:var(--space-sm) auto 0;}
.rep-final__p--tight{margin-top:12px;}
.rep-final__in .rv:last-child{margin-top:var(--space-md);}

/* ---------- silky IO reveals (reporting.js) ----------
   Hidden state gated on html.rv-on; no-JS renders everything visible.
   Reduced-motion never hides or moves anything. */
html.rv-on .rv{opacity:0;transform:translateY(var(--reveal-rise,20px));transition:opacity var(--dur-reveal,500ms) var(--ease-silk,ease-out),transform var(--dur-reveal,500ms) var(--ease-silk,ease-out);}
html.rv-on .rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html.rv-on .rv{opacity:1;transform:none;transition:none;}
  html.rv-on .rep-phase{opacity:1;}
  html.rv-on .rep-slide__draw,html.rv-on .rep-conc__bar{transition:none;stroke-dashoffset:0;transform:none;}
  html.rv-on .rep-askq__caret,html.rv-on .rep-board.scrub-on .rep-slide__caret{animation:none;}
  .rep-askq__field--no .rep-askq__slot,.rep-askq__field--no .rep-askq__cur{animation:none;}
}