.mob-cta-bar{display:none}
@media (max-width:768px){.mob-cta-bar{display:flex;align-items:center;gap:12px;justify-content:space-between;position:fixed;left:0;right:0;bottom:0;z-index:950;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(23,30,20,.1);transform:translateY(110%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.mob-cta-bar.on{transform:none}.mob-cta-txt{font-size:.72rem;color:#555;line-height:1.35}.mob-cta-txt strong{color:#111}.mob-cta-btn{flex-shrink:0;background:#CCFF00;color:#000;font-weight:700;font-size:.82rem;font-family:'Space Grotesk',sans-serif;padding:11px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px rgba(160,200,0,.35)}body.mob-cta-on .senti{bottom:84px;transition:bottom .3s}}

/* Calm, evidence-led homepage polish. */
@media (min-width:1024px){
  .hero-h1{font-size:clamp(3.5rem,4.7vw,5.25rem);max-width:760px}
  .hero-sub{max-width:650px;margin-bottom:32px}
}
.hero::after{opacity:.55}
.hero-ctas{align-items:center}
.hero-ctas .btn-primary{box-shadow:0 8px 22px rgba(22,163,74,.18)}

.scanner-widget{
  --scanner-transition-ms:280ms;
  background:#fff;
  border:1px solid #d9ded9;
  border-top-color:#cbd2cc;
  border-radius:18px;
  box-shadow:0 2px 5px rgba(16,24,18,.05),0 22px 54px rgba(16,24,18,.13);
}
.scanner-glow{display:none}
.scanner-header{min-height:58px;padding:12px 16px;background:#fff;border-bottom-color:#e5e9e5}
.scanner-header-right{gap:9px}
.scanner-live-status{padding:6px 10px;border:1px solid #edf0ed;border-radius:999px;background:#f7f9f7}
.scanner-rescan{min-height:36px;padding:0 12px;border-radius:10px;background:#fff}
.scanner-body{display:grid;min-height:306px;padding:20px}
.scanner-loading-msg{
  position:relative;inset:auto;grid-area:1/1;min-height:266px;
  transition:opacity 200ms cubic-bezier(.4,0,.2,1),transform 240ms cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.scanner-loading-msg.fading{opacity:0;transform:scale(.99)}
.scanner-result{
  grid-area:1/1;grid-template-columns:minmax(0,1fr) 176px;gap:18px;
  transition:opacity var(--scanner-transition-ms) cubic-bezier(.22,1,.36,1) 40ms;
  pointer-events:none;
}
/* Skeleton loader grid must mirror .scanner-result above exactly, or the
   right column shifts sideways at the crossfade. Keep the two in sync. */
.sk-grid{grid-template-columns:minmax(0,1fr) 176px;gap:18px}
.scanner-result.visible{pointer-events:auto}
.scanner-result .result-row{transition:opacity 260ms ease}
.scanner-result.show-rows .result-row:nth-child(n){transition-delay:60ms}
.scanner-widget.is-transitioning .scanner-result,.scanner-widget.is-transitioning .scanner-loading-msg{pointer-events:none}
@media (min-width:641px){.scanner-live-status{min-width:108px;justify-content:center}}
.scanner-left{justify-content:flex-start}
.result-row{min-height:50px;padding:12px 10px;margin:0;border-radius:0;border-bottom-color:#e8ece8}
.result-row:first-child{border-top-color:#e8ece8}
.result-row:hover{background:#fafbfa}
.result-row-label{color:#59635c!important}
.result-row-val{color:#202621;font-weight:600}
/* val-scanning (breathing pending values) and val-flash (value-upgrade
   highlight) intentionally NOT overridden here — killing those animations
   made the loader read as frozen/washed-out instead of actively scanning. */
.scanner-right{align-items:stretch;gap:10px;padding:13px;background:#f7f9f7;border:1px solid #e5eae5;border-radius:14px;transition:background .45s ease,border-color .45s ease}
/* Verdict-state tint — the score card shifts with the verdict so the panel
   reads at a glance. Classes set by updateGaugeArc() in index.html. */
.scanner-widget.verdict-threat .scanner-right{background:#fdf3f2;border-color:#f2d8d4}
.scanner-widget.verdict-warn .scanner-right{background:#fdf8ee;border-color:#efe1c3}
.scanner-widget.verdict-clean .scanner-right{background:#f2faf3;border-color:#d2e8d5}
.scanner-widget.verdict-threat .scanner-data-badge{border-color:#f2d8d4;color:#b0564d}
.scanner-widget.verdict-warn .scanner-data-badge{border-color:#efe1c3;color:#a07b2f}
.scanner-widget.verdict-clean .scanner-data-badge{border-color:#d2e8d5;color:#3f7a4a}
.scanner-data-badge{align-self:center;background:#fff;border-color:#d7ddd8;color:#66736a;transition:border-color .45s ease,color .45s ease}
.score-block{padding:2px 0 4px}
#risk-score-circle{font-size:2.55rem;font-variant-numeric:tabular-nums;letter-spacing:-.06em}
.risk-bar{height:5px;background:#e2e7e2;border-radius:999px;overflow:hidden}
#result-message{line-height:1.35}
.verdict-sub{color:#69736c!important}
.verdict-link{color:#66736a;border-bottom-color:#c8d0ca}
.scanner-tabs{margin-top:auto;background:#eef2ee;border-color:#dfe5df}
.scanner-tab{min-height:38px;color:#647068}
.scanner-tab.active{background:#fff;color:#34463a;box-shadow:0 1px 3px rgba(16,24,18,.08),inset 0 0 0 1px #d5ddd6}
@media (max-width:640px){
  .scanner-body{min-height:300px;padding:14px}
  .scanner-loading-msg{min-height:272px}
  .scanner-result{grid-template-columns:1fr;gap:12px}
  .sk-grid{grid-template-columns:1fr;gap:12px}
  .scanner-right{padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .scanner-loading-msg,.scanner-result{transition:none!important;transform:none!important}
}

/* Keep below-the-fold marketing sections out of the initial layout pass. */
@supports (content-visibility:auto){
  .value-props{content-visibility:auto;contain-intrinsic-size:auto 720px}
  .how-it-works{content-visibility:auto;contain-intrinsic-size:auto 820px}
  .vs-table{content-visibility:auto;contain-intrinsic-size:auto 680px}
  .proof-section{content-visibility:auto;contain-intrinsic-size:auto 860px}
  .quote-section{content-visibility:auto;contain-intrinsic-size:auto 440px}
  .cta-section{content-visibility:auto;contain-intrinsic-size:auto 460px}
}

/* ── Verdict rail compaction (2026-07-17): the rail ran ~2x the height of
   the signal rows — smaller score, tighter gaps, quieter threat state. The
   demo footnote moved out of the rail to .scanner-footnote (index.html). ── */
.scanner-right{gap:8px;padding:12px}
#risk-score-circle{font-size:2.05rem}
.score-block{padding:2px 0 0;gap:3px}
.risk-bar{height:4px;margin-top:4px}
.verdict-sub{margin-bottom:5px}
.verdict-cta{margin-top:4px}
.scanner-footnote{font-size:0.68rem}
.scanner-tabs{margin-top:2px;padding-top:0;border-top:none}
/* Threat state stays calm: the tint, score, and verdict headline carry the
   red — explainer, link, and badge keep neutral ink. */
.scanner-widget.verdict-threat .scanner-data-badge{border-color:#e8dad7;color:#8a7d78}
.scanner-widget.verdict-threat .verdict-link{color:#8a7f7b;border-bottom-color:#ddcbc7}
.scanner-widget.verdict-threat .verdict-sub{color:#7c716d!important}
@media (max-width:700px){#risk-score-circle{font-size:1.8rem}}

/* ── Readability pass (2026-07-21): calmer chrome, roomier verdict rail,
   instrument-grade score. ONE authoritative block — later rules here win
   over everything above; don't add scanner rules after this section. ── */

/* Header: one control family — equal heights, pill shapes, hairline borders.
   Tighter gaps so "Live Risk Assessment" never truncates at 560px. */
.scanner-header{padding:12px 14px 12px 16px}
.scanner-header-right{gap:7px}
.scanner-live-status{min-width:0;height:30px;padding:0 11px;border-color:#e2e7e2;background:#f7f9f7}
.scan-time-chip{height:30px;min-width:0;border-radius:999px;padding:0 11px}
.scanner-rescan{min-height:30px;height:30px;padding:0 12px;border-radius:999px;border-color:#dde3de;background:#fff;color:#5a655c}
.scanner-rescan:hover{background:#f4f7f4;color:#34463a;border-color:#c8d0ca}

/* Rows: darker labels, real breathing room, no pointless hover. */
.result-row{min-height:52px;padding:13px 10px}
.result-row:hover{background:transparent}
.result-row-label{color:#4d574f!important}
.result-row-val{color:#1c221d;font-weight:600;letter-spacing:-0.01em}

/* Verdict rail: 20px wider (BOTH grids — the skeleton must mirror the
   result grid exactly or the crossfade shifts sideways). */
.scanner-result{grid-template-columns:minmax(0,1fr) 196px}
.sk-grid{grid-template-columns:minmax(0,1fr) 196px}
.scanner-right{padding:14px;border-radius:12px;gap:9px}

/* Score as an instrument: tabular numeral with a quiet /100 denominator
   (CSS-only so the JS count-up can keep writing textContent), and a
   quarter-ticked track under a thicker fill. The denominator only appears
   once a verdict class lands — the pending "—" stays bare. */
#risk-score-circle{font-size:2.35rem;letter-spacing:-0.05em}
.scanner-widget.verdict-clean #risk-score-circle::after,
.scanner-widget.verdict-warn #risk-score-circle::after,
.scanner-widget.verdict-threat #risk-score-circle::after{
  content:'/100';font-size:0.82rem;font-weight:600;letter-spacing:0;
  color:#9aa39c;margin-left:3px}
.risk-bar{height:6px;margin-top:5px;border-radius:999px;
  background:repeating-linear-gradient(90deg,#e3e8e3 0 calc(25% - 1px),#fff calc(25% - 1px) 25%)}

/* Verdict text: clear hierarchy, sub never fights the headline. */
#result-message{margin-bottom:5px}
.verdict-sub{line-height:1.5;margin-bottom:6px}

/* CTA: a touch more presence — it is the one loud element on purpose. */
.verdict-cta{margin-top:6px;padding:10px;border-radius:10px;font-size:0.78rem}

/* Tabs + footnote: quieter, consistent radii. */
.scanner-tab{border-radius:7px}
.scanner-footnote{font-size:0.66rem;color:#97a099;max-width:520px;margin-left:auto;margin-right:auto}
@media (max-width:640px){
  .scanner-result{grid-template-columns:1fr}
  .sk-grid{grid-template-columns:1fr}
}

/* ── Reveal choreography (2026-07-21): the crossfade popped everything in
   as one flat frame. Now: longer skeleton/result overlap, a tight
   top-to-bottom row wave (~400ms total — one motion, not "assembly"),
   values settling 3px into place, the verdict rail cascading, and a
   single scan-sweep down the card as the verdict lands. Opacity and
   transform ONLY (no blur, ever), all killed under reduced motion. ── */
.scanner-widget{--scanner-transition-ms:360ms}
.scanner-loading-msg{transition:opacity 240ms cubic-bezier(.4,0,.2,1),transform 260ms cubic-bezier(.22,1,.36,1)}
.scanner-result{transition:opacity var(--scanner-transition-ms) cubic-bezier(.22,1,.36,1) 60ms}
.scanner-result.show-rows .result-row:nth-child(1){transition-delay:0ms}
.scanner-result.show-rows .result-row:nth-child(2){transition-delay:35ms}
.scanner-result.show-rows .result-row:nth-child(3){transition-delay:70ms}
.scanner-result.show-rows .result-row:nth-child(4){transition-delay:105ms}
.scanner-result.show-rows .result-row:nth-child(5){transition-delay:140ms}
.scanner-result.show-rows .result-row:nth-child(6){transition-delay:175ms}
@keyframes valSettle{from{opacity:0;transform:translateY(3px)}}
.scanner-result.show-rows .result-row-val:not(.val-scanning):not(.val-flash){animation:valSettle 260ms cubic-bezier(.22,1,.36,1) backwards}
.scanner-result.show-rows .result-row:nth-child(1) .result-row-val{animation-delay:60ms}
.scanner-result.show-rows .result-row:nth-child(2) .result-row-val{animation-delay:95ms}
.scanner-result.show-rows .result-row:nth-child(3) .result-row-val{animation-delay:130ms}
.scanner-result.show-rows .result-row:nth-child(4) .result-row-val{animation-delay:165ms}
.scanner-result.show-rows .result-row:nth-child(5) .result-row-val{animation-delay:200ms}
.scanner-result.show-rows .result-row:nth-child(6) .result-row-val{animation-delay:235ms}
@keyframes railIn{from{opacity:0;transform:translateY(3px)}}
.scanner-result.visible .scanner-right>*{animation:railIn 280ms cubic-bezier(.22,1,.36,1) backwards}
.scanner-result.visible .scanner-right>*:nth-child(1){animation-delay:140ms}
.scanner-result.visible .scanner-right>*:nth-child(2){animation-delay:185ms}
.scanner-result.visible .scanner-right>*:nth-child(3){animation-delay:230ms}
.scanner-result.visible .scanner-right>*:nth-child(4){animation-delay:275ms}
.scanner-result.visible .scanner-right>*:nth-child(5){animation-delay:320ms}
/* One-shot scan sweep: a faint green band travels down the card once as
   the result reveals. Progressive enhancement via :has() — browsers
   without it simply skip the sweep. */
@keyframes scanSweep{0%{transform:translateY(0);opacity:0}12%{opacity:1}100%{transform:translateY(400px);opacity:0}}
.scanner-widget:has(.scanner-result.visible) .scanner-body::after{
  content:'';position:absolute;left:0;right:0;top:-72px;height:72px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(22,163,74,0.08),transparent);
  animation:scanSweep 620ms cubic-bezier(.4,0,.2,1) 140ms 1 both}
@media (prefers-reduced-motion:reduce){
  .scanner-result.show-rows .result-row,.scanner-result.show-rows .result-row-val,
  .scanner-result.visible .scanner-right>*,
  .scanner-widget:has(.scanner-result.visible) .scanner-body::after{
    animation:none!important;transition-delay:0ms!important;transform:none!important}
}


/* ── SURFACE SCALE ────────────────────────────────────────────────────────
   Appended here because this is the LAST sheet the homepage loads, so it is
   the only place these can win. Radii had drifted to eleven values across 35
   surfaces, and three classes carried TWO different radii in separate blocks
   (.scanner-widget 14 and 16, .scanner-tab 5 and 6, .scanner-chip 8 and 10) —
   whichever came last silently won, which is the inconsistency you feel
   rather than see. Collapsed onto three steps plus the pill.

   Elevation reuses the --el-1/2/3 tokens that were already defined on this
   page but used exactly three times, while twelve distinct ad-hoc shadows
   rendered. Same idea: the system existed, nothing was wired to it.        */
:root { --r-sm: 6px; --r-md: 10px; --r-lg: 14px; }

/* Small: chips, badges, tags, inline controls. */
.scan-time-chip, .scanner-rescan, .sk, .bl-chip, .scheme-scan-btn, .detail-item,
.scanner-data-badge, .scanner-visitor-id, .scanner-tab, .result-row,
.result-row-val.val-flash, .vs-vendor .vs-fav, .scanner-details-toggle,
.nav-logo .logo-mark {
    border-radius: var(--r-sm);
}

/* Medium: buttons and grouped controls. */
.btn-bracket, .btn-primary, .btn-secondary, .btn-cta-outline, .verdict-cta,
.scanner-chip, .sk-score, .sk-tab, .scanner-tabs, .review-badge-logo {
    border-radius: var(--r-md);
}

/* Large: panels and cards — the surfaces that hold content. */
.scanner-widget, .hiw-step, .quote-card, .review-badge, #mobile-menu {
    border-radius: var(--r-lg);
}

/* Elevation from the existing scale rather than one-off shadows. */
.scanner-widget { box-shadow: var(--el-2); }
.quote-card, .review-badge { box-shadow: var(--el-1); }
.hiw-step { box-shadow: var(--el-1); }


/* ══ macOS TREATMENT — above the fold ══════════════════════════════════════
   Everything here is CSS only. 28 of the page's JS hooks live inside the
   scanner markup, so the window chrome is drawn with pseudo-elements rather
   than by restructuring the DOM.                                           */

/* 1 ─ Drop the highlighter. A marker sweep under the headline is the single
   most un-macOS element on the page; system UI marks emphasis with weight
   and colour, not a felt-tip. Keeps the animation hook alive but neutral. */
.hero-h1 em {
    background: none !important;
    animation: none !important;
    color: var(--accent-ink, #4d7c0f);
    font-style: normal;
    position: relative;
}
.hero-h1 em::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0.06em;
    height: 2px;
    background: currentColor;
    opacity: 0.22;
    border-radius: 2px;
}

/* 2 ─ Tighter display type. macOS display sizes run tight and heavy; the
   looser tracking here read as web-marketing rather than system. */
.hero-h1 {
    letter-spacing: -0.045em;
    line-height: 0.98;
}

/* 3 ─ The scanner becomes a window: continuous corners, a real title bar with
   traffic lights, and depth that separates it from the page instead of a
   1px outline. */
.scanner-widget {
    border-radius: 18px !important;
    border: 1px solid rgba(23,30,20,0.07) !important;
    box-shadow:
        0 0 0 0.5px rgba(23,30,20,0.04),
        0 12px 28px -12px rgba(16,22,16,0.18),
        0 40px 80px -32px rgba(16,22,16,0.22) !important;
    padding-top: 34px;                       /* room for the title bar */
    position: relative;
    isolation: isolate;
}
.scanner-widget::before {                    /* title bar */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 34px;
    background: linear-gradient(180deg, rgba(250,251,249,0.92), rgba(244,246,242,0.92));
    border-bottom: 1px solid rgba(23,30,20,0.07);
    border-radius: 18px 18px 0 0;
    z-index: 1;
}
.scanner-widget::after {                     /* traffic lights */
    content: '';
    position: absolute;
    top: 12px; left: 15px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ff5f57;
    /* Two more dots via spread shadows — one element, no extra markup, and
       far more predictable than stacking three positioned gradients. */
    box-shadow: 18px 0 0 0 #febc2e, 36px 0 0 0 #28c840;
    z-index: 2;
    /* The hero's cinematic entrance animates descendants from opacity 0 and
       catches pseudo-elements too — measured 0 here. Window chrome is not
       part of that reveal, so it opts out. */
    opacity: 1 !important;
    animation: none !important;
}

/* 4 ─ The scanner window is OPAQUE, deliberately.
   It used to be rgba(255,255,255,.82) with backdrop-filter: saturate(180%)
   blur(24px). Vibrancy reads well over a plain wash, but this window sits
   directly on top of the hero's lime and green orbs, so the translucency
   pulled that colour up through the panel and dropped the contrast of every
   label, value and hairline inside it — the whole thing looked soft and
   washed out. backdrop-filter also promotes the panel to its own compositing
   layer, which compounded the resampling blur the 3D stage transform was
   already causing (see .mx-stage-inner in mx.*.css). Solid white keeps the
   data legible, which is the entire job of this widget. */
.scanner-widget {
    background: #fff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* 5 ─ Calmer page ground so the window has something to sit on. */
body { background: #f4f6f2; }

/* 6 ─ Controls: continuous corners and a system-weight press. */
.btn-primary, .btn-secondary, .btn-cta-outline {
    border-radius: 12px;
    transition: transform var(--sm-t-tap, 130ms) var(--sm-ease, ease),
                box-shadow var(--sm-t-state, 260ms) var(--sm-ease, ease);
}
.btn-primary:active, .btn-secondary:active, .btn-cta-outline:active {
    transform: scale(0.976);
}


/* ══ CASE STUDIES ══════════════════════════════════════════════════════════
   The results were the interesting part and they were buried mid-sentence in
   the headline. Each card now leads with the number, and the cards became
   real surfaces instead of three panels sharing a grey band with hairline
   dividers between them.                                                   */
.proof-grid {
    gap: 20px;
    background: none !important;
    border: 0 !important;
}
.proof-item {
    background: #fff;
    border: 1px solid rgba(23,30,20,0.08);
    border-radius: var(--r-lg, 14px);
    padding: 26px 26px 22px;
    box-shadow: var(--el-1);
    transition: transform var(--sm-t-state, 260ms) var(--sm-ease, ease),
                box-shadow var(--sm-t-state, 260ms) var(--sm-ease, ease);
}
.proof-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--el-2);
}

/* The metric, set at display size — this is the line people actually read. */
.proof-metric { display: block; margin-bottom: 18px; }
.proof-metric-num {
    display: block;
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 2.9rem;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--accent-ink, #4d7c0f);
    font-variant-numeric: tabular-nums;
}
.proof-metric-unit { font-size: 1.6rem; letter-spacing: -0.02em; }
.proof-metric-label {
    display: block;
    margin-top: 7px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #6a726a;
}
.proof-title {
    font-size: 1.02rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin-bottom: 10px;
}
.proof-desc { font-size: 0.88rem; line-height: 1.65; }
.proof-link { font-weight: 650; }