/* Privacy component polish round, 2026-09-27. Instrument-panel treatment for the
   why-private steps, the public/private scanner, badges/pills and the footer strip.
   Pure CSS/SVG, no new runtime deps. Reduced motion is handled by the sitewide
   kill switch in snag-motion.css (animation:none!important), so every animated
   element here is written so its non-animated CSS state is already the settled,
   meaningful frame. */

/* ---------- status dot, shared by the nav badge and the hero pill ---------- */
.privacy-dot{width:6px;height:6px;border-radius:50%;background:var(--glow);flex:none;display:inline-block;box-shadow:0 0 0 0 color-mix(in srgb, var(--glow) 45%, transparent)}
.nav-privacy-pill .privacy-dot{margin-right:1px}
.hero-cta-pill .privacy-dot{margin-right:6px;vertical-align:middle}
.privacy-dot{animation:privacy-pulse 2.4s var(--ease) infinite}
@keyframes privacy-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--glow) 45%, transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--glow) 0%, transparent)}}

/* ---------- lock-badge chip treatment for existing privacy bullet icons ---------- */
.route-privacy-icon{background:color-mix(in srgb, var(--accent) 12%, var(--stage-ground));border-radius:50%;padding:2px;box-sizing:content-box}

/* ---------- route-map: lock marker on the stealth stage ---------- */
.route-stage{position:relative}
.route-lock-badge{position:absolute;top:-7px;right:4px;width:18px;height:18px;display:grid;place-items:center;background:var(--ground);border:1px solid var(--accent-deep);border-radius:50%;color:var(--accent);pointer-events:none}
.route-lock-badge svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:767px){.route-lock-badge{width:15px;height:15px;top:-5px;right:1px}.route-lock-badge svg{width:7px;height:7px}}

/* ---------- why-private: three instrument tiles on a lit route line ---------- */
.why-private{position:relative}
.why-private-steps li{display:flex;align-items:flex-start;gap:var(--space-12);position:relative}
.why-visual{flex:none;width:48px;height:48px;display:grid;place-items:center;background:var(--stage-ground);border:1px solid var(--line);border-radius:14px;position:relative}
.why-visual-art{width:30px;height:30px;fill:none;stroke:var(--accent-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.why-visual-art .why-visual-hit{fill:var(--glow);stroke:none}
.why-visual-art .why-visual-dot{fill:var(--glow);stroke:none}
.why-visual-art circle:not(.why-visual-hit):not(.why-visual-dot){fill:currentColor;stroke:none;opacity:.55}
.why-visual-scan{fill:var(--glow);opacity:.9;transform:translateX(21px)}
@media(min-width:1024px){
 .why-private-steps{position:relative}
 .why-private-steps::before{content:'';position:absolute;left:7%;right:7%;top:24px;height:2px;background:var(--line);z-index:0}
 .why-private.is-in .why-private-steps::before{background:linear-gradient(90deg,var(--accent-deep),var(--glow) 50%,var(--accent-deep));background-size:200% 100%;animation:why-route-sweep 1100ms var(--ease) both}
 .why-visual{z-index:1}
}
@keyframes why-route-sweep{from{background-position:200% 0;opacity:.4}to{background-position:0 0;opacity:1}}
.why-private.is-in .why-private-steps li:nth-child(1) .why-visual [data-draw]{animation:rule-draw 650ms var(--ease) 0ms both}
.why-private.is-in .why-private-steps li:nth-child(2) .why-visual [data-draw]{animation:rule-draw 650ms var(--ease) 220ms both}
.why-private.is-in .why-private-steps li:nth-child(3) .why-visual [data-draw]{animation:rule-draw 650ms var(--ease) 440ms both}
.why-private.is-in .why-private-steps li:nth-child(3) .why-visual-scan{animation:why-scan-sweep 900ms var(--ease) 620ms both}
@keyframes why-scan-sweep{0%{transform:translateX(0);opacity:0}10%{opacity:1}100%{transform:translateX(21px);opacity:.9}}

/* ---------- public/private scanner: glass public side, sealed private side ---------- */
.scanner-grid{position:relative}
.scanner-row{display:grid;grid-template-columns:20px 1fr;column-gap:var(--space-8);row-gap:2px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.scanner-row:first-of-type{border-top:0}
.scanner-row-icon{grid-row:1/3;grid-column:1;width:16px;height:16px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.scanner-row dt,.scanner-row dd{grid-column:2}
.scanner-col-public{position:relative;padding:var(--space-16);background:color-mix(in srgb, var(--stage-ground) 45%, transparent);border:1px solid color-mix(in srgb, var(--line) 70%, transparent);border-radius:14px}
.scanner-col-public .scanner-col-label,.scanner-col-public .scanner-row-icon{color:var(--ink-soft)}
.scanner-col-public dd{color:color-mix(in srgb, var(--ink-soft) 88%, transparent)}
.scanner-col-private{position:relative;padding:var(--space-16);background:var(--stage-ground);border:1px solid var(--accent-deep);border-radius:14px;overflow:hidden}
.scanner-col-private .scanner-row-icon{color:var(--accent)}
.scanner-col-private::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 6px,color-mix(in srgb, var(--accent) 5%, transparent) 6px 7px);pointer-events:none}
.scanner-col-private::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--glow),transparent);opacity:.5;animation:scanner-sweep 3.4s linear infinite;pointer-events:none}
@keyframes scanner-sweep{0%{top:0}100%{top:100%}}
.scanner-seam{position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);display:grid;place-items:center;background:var(--ground);border:1px solid var(--accent-deep);border-radius:50%;color:var(--accent);z-index:2}
.scanner-seam svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:767px){.scanner-seam{display:none}}
.scanner-honest{display:flex;gap:var(--space-8);align-items:flex-start;margin:var(--space-16) 0 0;padding:var(--space-12) var(--space-16);border-left:1px solid var(--accent-deep);background:var(--band);border-radius:0 10px 10px 0;max-width:64ch}
.scanner-honest-icon{flex:none;width:15px;height:15px;margin-top:2px;color:var(--ink-soft);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- privacy strip: ticker chips ---------- */
.privacy-strip p{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px}
.privacy-chip{padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--stage-ground);color:var(--ink)}

@media(max-width:479px){
 .why-visual{width:48px;height:48px}
 .why-visual-art{width:26px;height:26px}
 .scanner-row{grid-template-columns:18px 1fr}
}

/* ---------- lead review pass, 2026-09-27: badge overload, hero alignment,
   type hierarchy, box-in-box and heading-scale defects ---------- */

/* One compact hero chip only; must never wrap. */
.hero-cta-pill{white-space:nowrap}

/* Bug fix: auto margins were centering the sub paragraph away from the H1's
   left edge instead of stacking under it. Phone already gets a correct,
   non-centered margin from snag-phone.css, so this only needs to apply from
   768px up, where the bug was actually visible. */
@media(min-width:768px){.hero-trading{margin:24px 0 0}}
@media(min-width:1024px){.hero-trading{max-width:58ch}}

/* Publication note demoted to a small muted caption under the buttons. */
.hero-heading .publication-note{font-size:13px;margin:16px 0 0;max-width:40ch}

/* Folded stage caption replacing the dropped hero-helper/hero-piece-hint lines. */
.stage-helper{font:400 13px/1.6 var(--font-body);max-width:34ch;margin:8px auto 0;color:color-mix(in srgb, var(--ink) 70%, transparent);text-align:center}

/* H1 column containment at the two-column breakpoints, belt and suspenders
   against the grid growing past its 1fr track. */
@media(min-width:1024px){
 .hero-heading{min-width:0}
 .hero-heading h1{max-width:100%}
}

/* Why-private: drop the bordered box: the instrument tiles and route line
   carry the section now. Heading one step below the H2 scale. */
.why-private{background:none;border:0;padding:0}
#why-private-title{font-size:var(--fs-h3)}

/* Public/private scanner: one level of framing, not a card inside a card.
   The frame becomes a plain layout wrapper; the two columns keep the
   public/private distinction since that split is the meaningful content. */
.public-private .scanner-frame{background:none;border:0;padding:0;border-radius:0}
.scanner-corner{display:none}