/* self-hosted — CSP default-src 'self' blocks external font CDNs */
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

/* ============================================================
   RESUME SHINE UP — instrument system
   Diagnostic readout for people who diagnose systems for a living.
   All CSS lives here. No inline styles anywhere: the site CSP
   (style-src 'self') blocks them, which is why the old score ring
   rendered empty.
   ============================================================ */

:root{
  --blueprint:#0A1628;      /* deep blueprint navy */
  --steel:#132340;          /* panel steel */
  --steel-line:#1E3358;     /* rule / hairline */
  --amber:#FFB020;          /* safety amber — the signal colour */
  --torch:#FF6A2B;          /* torch orange — action */
  --paper:#EDF1F7;          /* blueprint paper */
  --paper-dim:#A7B6CE;      /* secondary text on dark */
  --ink:#0A1628;
  --good:#3DD68C;

  --gauge-size:clamp(190px,44vw,260px);
  --shell:min(1180px,92vw);
  --step:clamp(1rem,.72rem + .9vw,1.35rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--blueprint);
  color:var(--paper);
  font:400 var(--step)/1.6 "Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- blueprint grid field ---------- */
.field{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 40%,transparent 100%);
}
.shell{position:relative;z-index:1;width:var(--shell);margin-inline:auto;min-width:0}

/* ---------- type ---------- */
.display{
  font-family:"Barlow Condensed","Oswald",Impact,system-ui,sans-serif;
  font-weight:700;line-height:.94;letter-spacing:-.01em;
  text-transform:uppercase;
}
h1.display{font-size:clamp(2.35rem,1.1rem + 4.6vw,4.9rem);margin:0;overflow-wrap:break-word;hyphens:none}
h2.display{font-size:clamp(2rem,1.2rem + 3.2vw,3.6rem);margin:0 0 .5em}
h3{font-family:"Barlow Condensed",system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:1.5rem;margin:0 0 .4em}

.tag{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:"Barlow Condensed",system-ui,sans-serif;
  font-size:.82rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);margin:0 0 1.1rem;
}
.tag::before{content:"";width:26px;height:2px;background:var(--amber)}

.lede{color:var(--paper-dim);font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);max-width:56ch;margin:1.2rem 0 0}
.amber{color:var(--amber)}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:40;background:rgba(10,22,40,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--steel-line)}
.bar .shell{display:flex;align-items:center;gap:1.5rem;height:66px}
.mark{display:flex;align-items:center;gap:.7rem;color:var(--paper);text-decoration:none;font-family:"Barlow Condensed",system-ui,sans-serif;font-weight:700;letter-spacing:.16em;font-size:.95rem;text-transform:uppercase}
.mark i{display:grid;place-items:center;width:34px;height:34px;background:var(--amber);color:var(--ink);border-radius:7px;font-style:normal;font-weight:700;font-size:.95rem}
.bar nav{margin-left:auto;display:flex;gap:1.6rem}
.bar nav a{color:var(--paper-dim);text-decoration:none;font-size:.94rem;display:flex;align-items:center;min-height:44px}
.bar nav a:hover,.bar nav a:focus-visible{color:var(--paper)}
@media(max-width:860px){.bar nav{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:0 1.8rem;border:0;border-radius:8px;cursor:pointer;
  font-family:"Barlow Condensed",system-ui,sans-serif;font-weight:700;font-size:1.12rem;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  background:var(--torch);color:#fff;
  box-shadow:0 10px 30px rgba(255,106,43,.28);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,106,43,.36);background:#ff7c45}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--steel-line);box-shadow:none}
.btn.ghost:hover{background:var(--steel);border-color:var(--amber)}
.btn.wide{width:100%}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ---------- hero ---------- */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-grid>*{min-width:0}
.steps>*,.compare>*,.faq>*{min-width:0}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:2.6rem}}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
@media(max-width:520px){.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}}

/* trust strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--steel-line);border:1px solid var(--steel-line);border-radius:10px;overflow:hidden;margin-top:2.4rem}
.strip div{background:var(--blueprint);padding:1rem 1.1rem}
.strip strong{display:block;font-family:"Barlow Condensed",system-ui,sans-serif;font-size:1.02rem;text-transform:uppercase;letter-spacing:.04em}
.strip small{color:var(--paper-dim);font-size:.83rem;line-height:1.4;display:block;margin-top:.15rem}
@media(max-width:860px){.strip{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   THE GAUGE — signature element
   Drawn in SVG. The needle and arc are driven by CSS custom
   properties set from a stylesheet class, never an inline
   style attribute, because the CSP blocks those.
   ============================================================ */
.gauge-shell{position:relative;display:grid;place-items:center;padding:1.4rem}
.gauge{width:var(--gauge-size);height:var(--gauge-size);display:block}
.gauge-face{fill:#0D1B31;stroke:var(--steel-line);stroke-width:2}
.gauge-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:13;stroke-linecap:round}
.gauge-arc{
  fill:none;stroke:var(--band,#FF6A2B);stroke-width:13;stroke-linecap:round;
  stroke-dasharray:var(--arc-len,0) 100;
  transition:stroke-dasharray 1.6s cubic-bezier(.16,1,.3,1);
}
.gauge.is-live .gauge-arc{--arc-len:var(--score-len,0)}
.gauge-tick{stroke:rgba(255,255,255,.26);stroke-width:2}
.gauge-tick.major{stroke:rgba(255,255,255,.5);stroke-width:3}
.gauge-needle{
  stroke:var(--torch);stroke-width:4;stroke-linecap:round;
  transform-box:view-box;transform-origin:100px 100px;transform:rotate(-120deg);
  transition:transform 1.6s cubic-bezier(.16,1,.3,1);
}
.gauge.is-live .gauge-needle{transform:rotate(var(--needle,-120deg))}
.gauge-hub{fill:var(--torch)}
.gauge-value{
  fill:var(--paper);paint-order:stroke;font-family:"Barlow Condensed",system-ui,sans-serif;
  font-weight:700;font-size:46px;text-anchor:middle;
}
.gauge-unit{fill:var(--paper-dim);font-family:"Barlow",system-ui,sans-serif;font-size:13px;text-anchor:middle;letter-spacing:.18em}
.gauge-caption{margin:.6rem 0 0;text-align:center;color:var(--paper-dim);font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;font-family:"Barlow Condensed",system-ui,sans-serif}

/* band colour: below 60 torch, 60-79 amber, 80+ good */
.s0,.s10,.s20,.s30,.s40,.s50,.s55{--band:#FF6A2B}
.s60,.s65,.s70,.s75{--band:#FFB020}
.s80,.s85,.s90,.s95,.s100{--band:#3DD68C}
.s0 .gauge-needle,.s10 .gauge-needle,.s20 .gauge-needle,.s30 .gauge-needle,.s40 .gauge-needle,.s50 .gauge-needle,.s55 .gauge-needle{stroke:#FF6A2B}
.s60 .gauge-needle,.s65 .gauge-needle,.s70 .gauge-needle,.s75 .gauge-needle{stroke:#FFB020}
.s80 .gauge-needle,.s85 .gauge-needle,.s90 .gauge-needle,.s95 .gauge-needle,.s100 .gauge-needle{stroke:#3DD68C}
.s0 .gauge-hub,.s10 .gauge-hub,.s20 .gauge-hub,.s30 .gauge-hub,.s40 .gauge-hub,.s50 .gauge-hub,.s55 .gauge-hub{fill:#FF6A2B}
.s60 .gauge-hub,.s65 .gauge-hub,.s70 .gauge-hub,.s75 .gauge-hub{fill:#FFB020}
.s80 .gauge-hub,.s85 .gauge-hub,.s90 .gauge-hub,.s95 .gauge-hub,.s100 .gauge-hub{fill:#3DD68C}

/* score positions — class-driven, CSP-safe */
.s0{--needle:-120deg;--score-len:0}
.s10{--needle:-96deg;--score-len:10}
.s20{--needle:-72deg;--score-len:20}
.s30{--needle:-48deg;--score-len:30}
.s40{--needle:-24deg;--score-len:40}
.s50{--needle:0deg;--score-len:50}
.s55{--needle:12deg;--score-len:55}
.s60{--needle:24deg;--score-len:60}
.s65{--needle:36deg;--score-len:65}
.s70{--needle:48deg;--score-len:70}
.s75{--needle:60deg;--score-len:75}
.s80{--needle:72deg;--score-len:80}
.s85{--needle:84deg;--score-len:85}
.s90{--needle:96deg;--score-len:90}
.s95{--needle:108deg;--score-len:95}
.s100{--needle:120deg;--score-len:100}

/* ---------- sections ---------- */
.band{padding:clamp(3.2rem,7vw,6rem) 0;border-top:1px solid var(--steel-line)}
.band.paper{background:var(--paper);color:var(--ink)}
.band.paper .lede{color:#41556F}
.band.paper .tag{color:#B4560F}
.band.paper .tag::before{background:#B4560F}
.head{max-width:62ch;margin:0 0 2.6rem}

/* before / after — the proof */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:stretch}
@media(max-width:900px){.compare{grid-template-columns:1fr;gap:1rem}}
.sheet{background:#fff;color:#132340;border-radius:12px;padding:1.5rem 1.4rem;border:1px solid #D6DEEA;box-shadow:0 22px 50px rgba(10,22,40,.18)}
.sheet.before{filter:saturate(.55)}
.sheet h4{margin:0 0 .1rem;font-family:"Barlow Condensed",system-ui,sans-serif;font-size:1.35rem;text-transform:uppercase}
.sheet .role{color:#5A6E8C;font-size:.9rem;margin:0 0 .9rem}
.sheet p{font-size:.9rem;line-height:1.55;margin:.5rem 0}
.sheet ul{margin:.5rem 0 0;padding-left:1.05rem}
.sheet li{font-size:.88rem;line-height:1.5;margin:.35rem 0}
.sheet .flag{color:#C2410C;font-weight:600}
.sheet .win{color:#0F7B4F;font-weight:600}
.stamp{position:absolute;top:1rem;right:1rem;font-family:"Barlow Condensed",system-ui,sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:.28rem .6rem;border-radius:4px}
.sheet{position:relative}
.stamp.bad{background:#FEE2E2;color:#9F1239}
.stamp.good{background:#DCFCE7;color:#0F7B4F}
.arrow{display:grid;place-items:center;color:var(--amber);font-size:2rem}
@media(max-width:900px){.arrow{transform:rotate(90deg)}}

/* steps — genuinely sequential, so numbering is earned */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;counter-reset:s}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:var(--steel);border:1px solid var(--steel-line);border-radius:12px;padding:1.6rem;counter-increment:s;position:relative}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;top:1.1rem;right:1.2rem;font-family:"Barlow Condensed",system-ui,sans-serif;font-size:2.4rem;font-weight:700;color:rgba(255,176,32,.22);line-height:1}
.step h3{color:var(--amber)}
.step p{color:var(--paper-dim);margin:0;font-size:.96rem}

/* price */
.price-card{background:var(--steel);border:1px solid var(--steel-line);border-left:4px solid var(--amber);border-radius:12px;padding:clamp(1.6rem,3vw,2.4rem)}
.price-num{font-family:"Barlow Condensed",system-ui,sans-serif;font-size:clamp(3.4rem,2rem + 5vw,5.4rem);font-weight:700;line-height:.9;color:var(--paper)}
.price-num sup{font-size:.36em;vertical-align:super;color:var(--amber)}
.incl{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.6rem}
.incl li{display:flex;gap:.7rem;align-items:flex-start;color:var(--paper-dim);font-size:.98rem}
.incl li::before{content:"✓";color:var(--good);font-weight:700;flex:none}
.compare-note{margin-top:1.2rem;color:var(--paper-dim);font-size:.9rem}

/* faq */
.faq{display:grid;gap:.7rem;max-width:80ch}
details.q{background:var(--steel);border:1px solid var(--steel-line);border-radius:10px;overflow:hidden}
details.q summary{cursor:pointer;padding:1.1rem 1.3rem;font-family:"Barlow Condensed",system-ui,sans-serif;font-size:1.18rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";color:var(--amber);font-size:1.5rem;line-height:1;flex:none}
details.q[open] summary::after{content:"–"}
details.q .a{padding:0 1.3rem 1.2rem;color:var(--paper-dim);font-size:.98rem;line-height:1.65}
details.q .a a{color:var(--amber)}

/* ---------- upload / order form ---------- */
.order-card{background:var(--steel);border:1px solid var(--steel-line);border-radius:14px;padding:clamp(1.5rem,3vw,2.4rem)}
.order-heading{margin:0 0 1.6rem}
.order-heading h2{margin:0 0 .4rem}
#orderForm{display:grid;gap:1.05rem;min-width:0}
#orderForm>*{min-width:0}
#orderForm label{display:grid;gap:.4rem;font-family:"Barlow Condensed",system-ui,sans-serif;font-size:1rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim)}
#orderForm input,#orderForm textarea{
  width:100%;min-height:52px;padding:.85rem 1rem;border-radius:8px;
  background:#0B1930;border:1px solid var(--steel-line);color:var(--paper);
  font:400 1rem/1.5 "Barlow",system-ui,sans-serif;text-transform:none;letter-spacing:0;
}
#orderForm textarea{min-height:104px;resize:vertical}
#orderForm input::placeholder,#orderForm textarea::placeholder{color:#5D719A}
#orderForm input:focus,#orderForm textarea:focus{border-color:var(--amber);outline:none;box-shadow:0 0 0 3px rgba(255,176,32,.18)}
.optional{color:#5D719A;font-weight:400;letter-spacing:.02em;text-transform:none}

.file-field{cursor:pointer;position:relative}
.file-control{display:flex;align-items:center;gap:1rem;padding:1.15rem;border:2px dashed var(--steel-line);border-radius:10px;background:#0B1930;transition:border-color .18s ease,background .18s ease}
.file-field:hover .file-control{border-color:var(--amber);background:#0E2039}
.upload-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:var(--amber);color:var(--ink);font-size:1.2rem;flex:none}
.file-control strong{display:block;color:var(--paper);font-family:"Barlow Condensed",system-ui,sans-serif;font-size:1.1rem;text-transform:none;letter-spacing:0}
.file-control small{color:var(--paper-dim);font-size:.85rem}
#orderForm .file-field input[type=file]{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip-path:inset(50%)}

#orderForm label.consent{display:flex;flex-direction:row;align-items:flex-start;gap:.7rem;text-transform:none;letter-spacing:0;font-weight:400;font-family:"Barlow",system-ui,sans-serif;color:var(--paper-dim);font-size:.92rem;line-height:1.5}
#orderForm .consent span{min-width:0;flex:1}
#orderForm .consent input{width:20px;min-height:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--amber)}
.form-status{margin:0;font-size:.94rem;min-height:1.4em}
.form-status.error{color:#FF8A6B}
.form-status.success{color:var(--good)}
.form-status.working{color:var(--amber)}
.checkout-note{color:var(--paper-dim);font-size:.86rem;margin:.2rem 0 0;text-align:center}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--steel-line);padding:2.6rem 0;color:var(--paper-dim);font-size:.9rem}
.foot .shell{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:1000px){.foot .shell{grid-template-columns:1fr 1fr;gap:1.6rem}}
@media(max-width:640px){.foot .shell{grid-template-columns:1fr;gap:1.4rem}}
.foot h5{font-family:"Barlow Condensed",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--paper);margin:0 0 .7rem}
.foot a{color:var(--paper-dim);text-decoration:none;display:block;padding:.62rem 0;min-height:44px;display:flex;align-items:center}
.foot a:hover,.foot a:focus-visible{color:var(--amber)}
.foot .legal{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--steel-line);font-size:.82rem;grid-column:1/-1}

/* ---------- reveal on scroll ---------- */
/* Content is visible by default. Reveal only engages once JS confirms it is
   running, so a script failure can never leave the page blank. */
.rise{transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.js-reveal .rise{opacity:0;transform:translateY(22px)}
.js-reveal .rise.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal .rise{opacity:1;transform:none}}

/* ---------- assessment result panel ---------- */
.assessment-results{display:none;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--steel-line)}
.assessment-results.is-visible{display:block;animation:rise .5s cubic-bezier(.16,1,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.assessment-summary{color:var(--paper-dim);text-align:center;max-width:52ch;margin:.4rem auto 1.6rem;font-size:1rem;line-height:1.6}
.score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:.7rem;margin-bottom:1.6rem}
.mini-score{background:#0B1930;border:1px solid var(--steel-line);border-radius:9px;padding:.9rem .7rem;text-align:center}
.mini-score strong{display:block;font-family:"Barlow Condensed",system-ui,sans-serif;font-size:1.9rem;line-height:1;color:var(--amber)}
.mini-score span{display:block;color:var(--paper-dim);font-size:.74rem;line-height:1.3;margin-top:.35rem}
.assessment-columns{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:720px){.assessment-columns{grid-template-columns:1fr}}
.assessment-box{background:#0B1930;border:1px solid var(--steel-line);border-radius:10px;padding:1.2rem}
.assessment-box h4{margin:0 0 .8rem;font-family:"Barlow Condensed",system-ui,sans-serif;font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em;color:var(--paper)}
.assessment-box ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.assessment-box li{color:var(--paper-dim);font-size:.9rem;line-height:1.55}
.assessment-box li strong{display:block;color:var(--paper);margin-bottom:.15rem}
.offer-after-results{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--steel-line)}
.offer-after-results p{margin:0;color:var(--paper-dim);font-size:.9rem}
.offer-after-results strong{display:block;font-family:"Barlow Condensed",system-ui,sans-serif;font-size:2rem;line-height:1.1}
.offer-after-results small{color:var(--paper-dim);font-size:.82rem}
.assessment-disclaimer{color:#6E82A6;font-size:.76rem;line-height:1.5;margin:1.2rem 0 0}

/* label rows: keep the optional flag on the same line as the label */
#orderForm label>.lbl{display:block}

/* ============================================================
   ATS SCANNER — the argument, animated.
   Shows what screening software actually reads. Pure SVG + CSS
   keyframes so it stays CSP-safe and costs no JavaScript.
   ============================================================ */
.scanner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
@media(max-width:860px){.scanner{grid-template-columns:1fr}}
.scan-stage{position:relative;background:#0D1B31;border:1px solid var(--steel-line);border-radius:14px;padding:1.4rem;overflow:hidden;box-shadow:0 26px 60px rgba(10,22,40,.28)}
.scan-doc{width:100%;height:auto;display:block}

.doc-sheet{fill:#F7F9FC}
.doc-line{fill:#C6D0DE}
.doc-line.key{fill:#9AA9BC}

/* fields the parser keeps or loses — revealed as the beam passes */
.doc-hit,.doc-miss{opacity:0}
.scanner.run .doc-hit{animation:flash .5s ease forwards}
.scanner.run .doc-miss{animation:flash .5s ease forwards}
.doc-hit rect{fill:rgba(61,214,140,.22)}
.doc-hit line{stroke:#0F7B4F;stroke-width:2.4;stroke-linecap:round}
.doc-miss rect{fill:rgba(255,106,43,.2)}
.doc-miss line{stroke:#C2410C;stroke-width:2.4;stroke-linecap:round}
@keyframes flash{from{opacity:0}to{opacity:1}}

.scanner.run .h1{animation-delay:.55s}.scanner.run .h2{animation-delay:.95s}
.scanner.run .h3{animation-delay:1.85s}.scanner.run .h4{animation-delay:2.5s}
.scanner.run .m1{animation-delay:1.35s}.scanner.run .m2{animation-delay:2.15s}
.scanner.run .m3{animation-delay:2.85s}

/* the beam */
.beam{opacity:0}
.scanner.run .beam{animation:sweep 3.4s cubic-bezier(.4,0,.6,1) forwards}
@keyframes sweep{
  0%{opacity:0;transform:translateY(0)}
  6%{opacity:1}
  92%{opacity:1}
  100%{opacity:0;transform:translateY(268px)}
}
.beam-line{stroke:var(--amber);stroke-width:2}
.beam-glow{fill:url(#beamFade)}

/* readout beside the sheet */
.scan-readout{display:grid;gap:.9rem}
.readout-row{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border:1px solid var(--steel-line);border-radius:10px;background:#0B1930;opacity:0}
.scanner.run .readout-row{animation:flash .45s ease forwards}
.scanner.run .r1{animation-delay:.75s}.scanner.run .r2{animation-delay:1.55s}
.scanner.run .r3{animation-delay:2.35s}.scanner.run .r4{animation-delay:3.05s}
.readout-row i{font-style:normal;font-family:"Barlow Condensed",system-ui,sans-serif;font-weight:700;font-size:1.05rem;width:26px;height:26px;display:grid;place-items:center;border-radius:6px;flex:none}
.readout-row.ok i{background:rgba(61,214,140,.16);color:var(--good)}
.readout-row.no i{background:rgba(255,106,43,.16);color:var(--torch)}
.readout-row span{font-size:.92rem;line-height:1.4;color:var(--paper-dim)}
.readout-row strong{color:var(--paper);display:block;font-family:"Barlow Condensed",system-ui,sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:.03em}
.scan-verdict{margin:.4rem 0 0;padding:1rem;border-left:3px solid var(--torch);background:rgba(255,106,43,.1);border-radius:0 8px 8px 0;font-size:.95rem;line-height:1.55;color:#5A3520;opacity:0}
.scanner.run .scan-verdict{animation:flash .5s ease forwards;animation-delay:3.4s}
.scan-verdict strong{color:#8A2C06;display:block;margin-bottom:.2rem}

@media (prefers-reduced-motion:reduce){
  .doc-hit,.doc-miss,.readout-row,.scan-verdict{opacity:1;animation:none!important}
  .beam{opacity:0;animation:none!important}
}

/* utility classes — the CSP blocks inline style attributes, so spacing
   adjustments must be expressed as classes, never style="" */
.mt-sm{margin-top:1.2rem}
.mt-md{margin-top:1.4rem}
.mt-lg{margin-top:2.4rem}
.mt-xl{margin-top:2.6rem}
.mb-md{margin-bottom:1.4rem}
.mb-lg{margin-bottom:2rem}
.narrow{max-width:760px}
.foot-note{text-align:left}
h1.display.compact{font-size:clamp(2.2rem,1.2rem + 3.6vw,3.8rem)}