/*
  Shared site chrome - reset, buttons, badges, cards, nav/header, mobile nav,
  section shell, and footer. Pulled out of index.html so every page (home,
  privacy policy, terms, and anything added later) links one file instead of
  duplicating ~200 lines of the same CSS three times. Page-specific sections
  (hero, verification cards, services grid, etc.) stay local to each page's
  own <style> block. No color / font / spacing / radius / shadow value is
  hand-picked here - each one pulls from design-system/tokens/*.css.
*/

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ -webkit-font-smoothing:antialiased; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

:focus-visible{ outline:none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

.wrap{max-width: var(--container-max); margin:0 auto; padding:0 var(--space-8);}
@media (max-width:720px){ .wrap{padding:0 var(--space-5);} }

.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono-label);
  text-transform:uppercase;
  color: var(--accent-verified-strong);
  display:flex; align-items:center; gap: var(--space-2);
}
.eyebrow::before{ content:""; width:16px; height:1px; background: var(--accent-verified-strong); display:inline-block; }
.eyebrow.on-inverse{ color: var(--brass-gold-300); }
.eyebrow.on-inverse::before{ background: var(--brass-gold-300); }

h1,h2,h3{ font-weight: var(--weight-bold); }

/* ---------- BUTTON (matches components/core/Button.jsx) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  cursor:pointer; border:1px solid transparent;
  transition: background var(--duration-fast) var(--ease-standard);
}
.btn-md{ padding:10px 18px; font-size: var(--text-base); }
.btn-lg{ padding:13px 24px; font-size: var(--text-md); }
.btn-primary{ background: var(--ink-navy-900); color: var(--fg-on-inverse); border-color: var(--ink-navy-900); }
.btn-primary:hover{ background: var(--ink-navy-800); }
.btn-gold{ background: var(--accent-verified); color: var(--ink-navy-900); border-color: var(--accent-verified); }
.btn-gold:hover{ background: var(--brass-gold-300); }
.btn-secondary{ background: var(--bg-surface); color: var(--fg-primary); border-color: var(--border-strong); }
.btn-secondary:hover{ background: var(--neutral-100); }

/* ---------- BADGE (matches components/feedback/Badge.jsx) ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size:11px; letter-spacing: var(--tracking-mono-label);
  text-transform:uppercase; font-weight: var(--weight-medium); border:1px solid transparent;
}
.badge-verified{ background: var(--accent-verified-soft); color: var(--brass-gold-700); border-color: var(--brass-gold-300); }

/* ---------- CARD (matches components/surfaces/Card.jsx) ---------- */
.card{ background: var(--bg-surface); border-radius: var(--radius-md); border:1px solid var(--border-default); box-shadow: var(--shadow-sm); }
.card-elevated{ box-shadow: var(--shadow-md); }

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background: rgba(238,240,241,0.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border-default);
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
a.logo{ display:inline-block; }
.navlinks{ display:none; align-items:center; gap: var(--space-8); font-size:14.5px; font-weight: var(--weight-medium); }
@media (min-width:960px){ .navlinks{ display:flex; } }
.navlinks a{ color: var(--fg-secondary); transition: color var(--duration-fast) var(--ease-standard); }
.navlinks a:hover{ color: var(--fg-primary); }
.navlinks a.active, .navdrop-trigger.active, .navdrop-panel a.active{ color: var(--fg-primary); font-weight: var(--weight-semibold); }
.navcta{ display:none; }
@media (min-width:960px){ .navcta{ display:inline-flex; } }

/* ---------- NAV DROPDOWN (Services / Industries) ---------- */
.navdrop{ position:relative; }
.navdrop-trigger{
  display:flex; align-items:center; gap:4px; cursor:pointer;
  color: var(--fg-secondary); background:none; border:none; font: inherit;
  transition: color var(--duration-fast) var(--ease-standard);
}
.navdrop-trigger i{ transition: transform var(--duration-fast) var(--ease-standard); }
.navdrop:hover .navdrop-trigger, .navdrop-trigger:hover{ color: var(--fg-primary); }
.navdrop:hover .navdrop-trigger i{ transform: rotate(180deg); }
.navdrop-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform: translateX(-50%);
  min-width:250px; background: var(--bg-surface); border:1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-2);
  opacity:0; visibility:hidden; transform: translateX(-50%) translateY(4px);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), visibility var(--duration-fast);
}
.navdrop:hover .navdrop-panel, .navdrop-panel:hover{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.navdrop-panel a{
  display:flex; flex-direction:column; gap:2px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); color: var(--fg-primary); font-size:14px; font-weight: var(--weight-medium);
}
.navdrop-panel a:hover{ background: var(--neutral-100); }
.navdrop-panel a span{ display:block; font-size:12.5px; font-weight: var(--weight-regular); color: var(--fg-muted); }

/* Mobile nav dropdown: plain expandable sublist, no hover panel */
.mnav-group .mnav-head{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding: var(--space-4) 0; font-size:15px; font-weight: var(--weight-medium);
  color: var(--fg-primary); border-top:1px solid var(--border-default);
  background:none; border-left:none; border-right:none; border-bottom:none; text-align:left; cursor:pointer; font-family:inherit;
}
.mnav-group:first-child .mnav-head{ border-top:none; }
.mnav-group .mnav-head i{ transition: transform var(--duration-fast) var(--ease-standard); }
.mnav-group.open .mnav-head i{ transform: rotate(180deg); }
.mnav-sub{ display:none; flex-direction:column; padding-left: var(--space-4); padding-bottom: var(--space-2); }
.mnav-group.open .mnav-sub{ display:flex; }
.mnav-sub a{ padding: var(--space-3) 0; font-size:14px; color: var(--fg-secondary); border-top:none !important; }

/* ---------- MOBILE NAV (burger, <960px) ---------- */
.navburger{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius: var(--radius-sm);
  border:1px solid var(--border-default); background: var(--bg-surface);
  color: var(--fg-primary); cursor:pointer;
}
@media (min-width:960px){ .navburger{ display:none; } }
.mobile-nav{
  display:none; flex-direction:column;
  background: var(--bg-surface); border-bottom:1px solid var(--border-default);
  box-shadow: var(--shadow-md); padding: var(--space-2) var(--space-8) var(--space-6);
}
.mobile-nav.open{ display:flex; }
@media (min-width:960px){ .mobile-nav{ display:none !important; } }
.mobile-nav a{
  padding: var(--space-4) 0; font-size:15px; font-weight: var(--weight-medium);
  color: var(--fg-primary); border-top:1px solid var(--border-default);
}
.mobile-nav a:first-child{ border-top:none; }
.mobile-nav .btn{ margin-top: var(--space-4); width:100%; }

/* ---------- SECTION SHELL ---------- */
section{ padding: var(--space-24) 0; }
.band-white{ background: var(--bg-surface); border-top:1px solid var(--border-default); border-bottom:1px solid var(--border-default); }
.band-tint{ background: var(--neutral-100); border-top:1px solid var(--border-default); }
/* Hero sections (class contains "-hero") never carry the band divider line -
   it reads as an unwanted line cutting straight through the hero on every
   subpage. Only non-hero content sections use the divider to band alternate
   sections, matching how the homepage's plain, border-free .hero looks. */
section[class*="-hero"].band-white,
section[class*="-hero"].band-tint{ border-top:none; border-bottom:none; }
/* The section immediately after a hero also needs its top border stripped -
   otherwise that section's own border-top recreates the exact same unwanted
   line the rule above just removed from the hero's border-bottom. */
section[class*="-hero"] + section.band-white,
section[class*="-hero"] + section.band-tint{ border-top:none; }

/* ---------- WHO-CARD PAIR (dark/light two-card motif) ----------
   Promoted from index.html - shared with the About page's Focus section. */
.who-grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-6); }
@media (max-width:800px){ .who-grid{ grid-template-columns:1fr; } }
.who-card{ border-radius: var(--radius-md); padding: var(--space-10) var(--space-8); min-height:230px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.who-igaming{ background: var(--ink-navy-900); color: var(--fg-on-inverse); }
.who-crypto{ background: var(--bg-surface); border:1px solid var(--border-default); color: var(--fg-primary); box-shadow: var(--shadow-sm); }
.who-card h3{ font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); }
.who-card p{ font-size:14.5px; line-height: var(--leading-normal); max-width:380px; }
.who-igaming p{ color: var(--ink-navy-300); }
.who-crypto p{ color: var(--fg-secondary); }
.who-tag{ font-family: var(--font-mono); font-size:11px; letter-spacing: var(--tracking-mono-label); text-transform:uppercase; margin-bottom: var(--space-2); }
.who-igaming .who-tag{ color: var(--brass-gold-300); }
.who-crypto .who-tag{ color: var(--fg-muted); }
.who-link{ font-size: var(--text-base); font-weight: var(--weight-semibold); display:inline-flex; align-items:center; gap:6px; margin-top: var(--space-6); }
.section-head{ max-width: 620px; margin-bottom: var(--space-12); }
.section-head h2{ font-family: var(--font-display); font-size: clamp(28px,3.4vw,var(--text-2xl)); letter-spacing: var(--tracking-tight); margin-top: var(--space-4); }
.section-head p{ color: var(--fg-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); margin-top: var(--space-4); }

.svc-icon{
  width:44px; height:44px; border-radius:50%;
  background: var(--accent-verified-soft);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--space-6); color: var(--brass-gold-700);
}

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--border-default); padding: var(--space-6) 0; }
.foot-grid{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: var(--space-6); }
.foot-note{ font-family: var(--font-mono); font-size:11.5px; color: var(--fg-muted); margin-top: var(--space-2); }
.foot-copyright{ font-family: var(--font-mono); font-size:11.5px; color: var(--fg-muted); text-align:center; white-space:nowrap; }
.foot-legal{ display:flex; gap: var(--space-6); font-size:13.5px; color: var(--fg-secondary); justify-self:end; }
@media (max-width:700px){
  .foot-grid{ grid-template-columns:1fr; text-align:center; }
  .foot-copyright{ order:2; }
  .foot-legal{ order:3; justify-self:center; }
}

/* ---------- LEGAL CONTENT (privacy policy, terms) ---------- */
.legal-hero{ padding: var(--space-16) 0 var(--space-6); }
.legal-hero h1{ font-family: var(--font-display); font-size: clamp(32px,4.4vw,var(--text-3xl)); letter-spacing: var(--tracking-tighter); margin: var(--space-4) 0 var(--space-3); }
.legal-hero .updated{ font-family: var(--font-mono); font-size:12px; letter-spacing: var(--tracking-mono-label); color: var(--fg-muted); text-transform:uppercase; }
.legal-body{ max-width: var(--container-narrow); margin:0 auto; padding-bottom: var(--space-16); }
.legal-body h2{ font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); margin: var(--space-10) 0 var(--space-3); }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ color: var(--fg-secondary); font-size:15px; line-height: var(--leading-relaxed); margin-bottom: var(--space-4); }
.legal-body ul, .legal-body ol{ color: var(--fg-secondary); font-size:15px; line-height: var(--leading-relaxed); margin:0 0 var(--space-4) var(--space-6); }
.legal-body li{ margin-bottom: var(--space-2); }
.legal-body a{ color: var(--accent-verified-strong); text-decoration:underline; text-underline-offset:2px; }
.legal-body strong{ color: var(--fg-primary); font-weight: var(--weight-semibold); }
.legal-note{ background: var(--neutral-100); border:1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); font-size:13.5px; color: var(--fg-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-10); }

/* ---------- IMPACT CARDS (3-up "why it matters" grid) ----------
   Shared by service pages (trademarks, monitoring) that need a short,
   punchy 3-card explainer rather than a wall of paragraphs. */
.impact-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
@media (max-width:900px){ .impact-grid{ grid-template-columns:1fr; } }
.impact-card{ padding: var(--space-8) var(--space-6) var(--space-6); }
.impact-card h3{ font-family: var(--font-display); font-size: var(--text-md); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); }
.impact-card p{ color: var(--fg-secondary); font-size:14px; line-height: var(--leading-normal); }

/* ---------- COMPARISON TABLE (DIY / status quo vs CloneGuard) ----------
   Shared by service pages that make the "why not just do this yourself"
   case with a highlighted CloneGuard column. */
.cmp-wrap{ overflow-x:auto; margin-top: var(--space-10); }
.cmp-table{ width:100%; min-width:560px; border-collapse:separate; border-spacing:0; }
.cmp-table th{ font-family: var(--font-mono); font-size:11px; letter-spacing: var(--tracking-mono-label); text-transform:uppercase; font-weight: var(--weight-semibold); color: var(--fg-muted); text-align:left; padding: var(--space-3) var(--space-4); border-bottom:2px solid var(--ink-navy-900); }
.cmp-table th:last-child{ color: var(--brass-gold-700); background: var(--accent-verified-soft); border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.cmp-table td{ font-size:14px; color: var(--fg-secondary); padding: var(--space-4); border-bottom:1px solid var(--border-default); vertical-align:top; line-height: var(--leading-normal); }
.cmp-table td:first-child{ font-family: var(--font-mono); font-size:11px; letter-spacing: var(--tracking-mono-label); text-transform:uppercase; color: var(--fg-muted); white-space:nowrap; }
.cmp-table td.cmp-us{ background: var(--accent-verified-soft); }
.cmp-table tr:last-child td.cmp-us{ border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.cmp-table tr:last-child td{ border-bottom:none; }
.cmp-cell{ display:flex; align-items:flex-start; gap:8px; }
.cmp-cell i{ flex-shrink:0; margin-top:2px; }
.cmp-no i{ color: var(--fg-muted); }
.cmp-yes i{ color: var(--accent-verified-strong); }
.cmp-yes{ color: var(--fg-primary); font-weight: var(--weight-medium); }

/* ---------- TIMELINE (horizontal steps) ----------
   First built for the trademark filing timeline, reused for the iGaming
   and Crypto industry-page scenario walkthroughs. Works for any 3-5 step
   horizontal sequence with a date/stage label. */
.tl-track{ position:relative; display:flex; justify-content:space-between; margin-top: var(--space-12); gap: var(--space-6); }
.tl-track::before{ content:""; position:absolute; top:6px; left:0; right:0; height:2px; background: var(--border-strong); }
.tl-step{ position:relative; flex:1; }
.tl-dot{ width:14px; height:14px; border-radius:50%; background: var(--ink-navy-900); box-shadow: 0 0 0 4px var(--bg-surface); display:block; margin-bottom: var(--space-4); position:relative; z-index:1; }
.tl-when{ font-family: var(--font-mono); font-size:11px; letter-spacing: var(--tracking-mono-label); text-transform:uppercase; color: var(--fg-muted); margin-bottom: var(--space-2); }
.tl-step h3{ font-family: var(--font-display); font-size:17px; letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2); }
.tl-step p{ font-size:13.5px; color: var(--fg-secondary); line-height: var(--leading-normal); }
.tl-service{ display:inline-block; font-size:13px; font-weight: var(--weight-semibold); color: var(--accent-verified-strong); text-decoration:underline; text-underline-offset:2px; margin: var(--space-3) var(--space-4) 0 0; }
.tl-service:hover{ color: var(--brass-gold-700); }
@media (max-width:800px){
  .tl-track{ flex-direction:column; gap: var(--space-8); }
  .tl-track::before{ top:0; bottom:0; left:6px; right:auto; width:2px; height:auto; }
  .tl-step{ padding-left: var(--space-8); }
  .tl-dot{ position:absolute; left:-1px; top:2px; margin-bottom:0; }
}

/* ---------- FAQ ----------
   Shared by Protection Plans, iGaming, and Crypto - each page's questions
   are specific to it, only the layout is shared. */
.faq-list{ max-width: var(--container-narrow); }
.faq-item{ border-top:1px solid var(--border-default); padding: var(--space-6) 0; }
.faq-item:last-child{ border-bottom:1px solid var(--border-default); }
.faq-item h3{ font-family: var(--font-display); font-size: var(--text-md); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2); }
.faq-item p{ color: var(--fg-secondary); font-size:14.5px; line-height: var(--leading-relaxed); }
.faq-columns{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-10); max-width: var(--container-max); }
.faq-columns .faq-list{ max-width:none; }
@media (max-width:800px){ .faq-columns{ grid-template-columns:1fr; } }

/* ---------- PRICING & ACCESS (dark 3-path strip) ----------
   Shared by Monitoring & Takedowns, Trademarks, Brand Enforcement, and
   Specialist Services - each page states its own 3 paths to purchase. */
.how-strip{ background: var(--ink-navy-900); color: var(--fg-on-inverse); }
.path-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background: var(--ink-navy-700); margin-top: var(--space-12); border-radius: var(--radius-md); overflow:hidden; }
@media (max-width:800px){ .path-grid{ grid-template-columns:1fr; } }
.path-card{ background: var(--ink-navy-800); padding: var(--space-8) var(--space-6); display:flex; flex-direction:column; }
.path-badge{ display:inline-block; align-self:flex-start; font-family: var(--font-mono); font-size:10px; letter-spacing: var(--tracking-mono-label); text-transform:uppercase; color: var(--brass-gold-300); border:1px solid var(--ink-navy-600); border-radius: var(--radius-pill); padding:3px 10px; margin-bottom: var(--space-4); }
.path-icon{ color: var(--brass-gold-300); margin-bottom: var(--space-4); }
.path-card h3{ font-family: var(--font-display); font-size:18px; letter-spacing: var(--tracking-tight); color: var(--fg-on-inverse); margin-bottom: var(--space-3); }
.path-card p{ font-size:13.5px; line-height: var(--leading-normal); color: var(--ink-navy-300); margin-bottom: var(--space-5); flex:1; }
.path-card a{ font-size:13px; font-weight: var(--weight-semibold); color: var(--brass-gold-300); display:inline-flex; align-items:center; gap:4px; }
.path-card a:hover{ color: var(--brass-gold-100); }

/* ---------- INDUSTRY PAGES (iGaming, Crypto) ----------
   Shared template: flagged-activity feed (hero visual), 4-col threat and
   cost grids, and the how-we-protect-you grid mapping threats to services. */
.feed-card{ background: var(--ink-navy-900); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-lg); }
.feed-label{ font-family: var(--font-mono); font-size:10.5px; letter-spacing: var(--tracking-mono-label); text-transform:uppercase; color: var(--ink-navy-300); margin-bottom: var(--space-4); }
.feed-row{ display:flex; justify-content:space-between; align-items:center; gap: var(--space-3); background: var(--ink-navy-800); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); }
.feed-row:last-child{ margin-bottom:0; }
.feed-desc{ font-size:12.5px; color: var(--fg-on-inverse); }
.feed-status{ font-family: var(--font-mono); font-size:10.5px; letter-spacing: var(--tracking-mono-label); text-transform:uppercase; flex-shrink:0; }
.feed-status.status-flagged{ color: var(--brick-red-300); }
.feed-status.status-removed{ color: var(--brass-gold-300); }

/* Industry-page hero visual: live threat-scan radar (igaming.html, crypto.html) */
.radar-card{ width:380px; margin:0 auto; border:1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-lg); padding: var(--space-6); }
@media (max-width:520px){ .radar-card{ width:100%; max-width:380px; } }
.radar-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-6); }
.radar-top .eyebrow{ margin-bottom:0; }
.radar-live{ display:flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size:10px; letter-spacing: var(--tracking-mono-label); text-transform:uppercase; color: var(--accent-flagged-strong); }
.radar-live-dot{ width:6px; height:6px; border-radius:50%; background: var(--accent-flagged-strong); animation: radar-pulse 1.8s ease-in-out infinite; }
@keyframes radar-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.radar-ring-wrap{ display:flex; justify-content:center; margin-bottom: var(--space-6); }
.radar-ring{ width:132px; height:132px; border-radius:50%; background: conic-gradient(var(--accent-flagged-strong) 0deg 306deg, var(--border-default) 306deg 360deg); display:flex; align-items:center; justify-content:center; position:relative; }
.radar-ring::before{ content:""; position:absolute; inset:11px; border-radius:50%; background: var(--bg-surface); }
.radar-ring-inner{ position:relative; z-index:1; text-align:center; }
.radar-ring-num{ font-family: var(--font-display); font-size:30px; letter-spacing: var(--tracking-tight); color: var(--ink-navy-900); line-height:1; }
.radar-ring-label{ font-size:10.5px; color: var(--fg-muted); margin-top:3px; line-height:1.3; }
.radar-list{ display:flex; flex-direction:column; gap: var(--space-3); }
.radar-row{ display:flex; justify-content:space-between; align-items:center; font-size:13.5px; padding-bottom: var(--space-3); border-bottom:1px solid var(--border-default); }
.radar-risk{ font-family: var(--font-mono); font-size:10px; letter-spacing: var(--tracking-mono-label); text-transform:uppercase; padding:3px 9px; border-radius: var(--radius-pill); flex-shrink:0; }
.radar-risk-high{ background: var(--accent-flagged-soft); color: var(--accent-flagged-strong); }
.radar-risk-medium{ background: var(--accent-verified-soft); color: var(--accent-verified-strong); }
.radar-risk-low{ background: var(--neutral-100); color: var(--fg-muted); }
.radar-row:last-child{ border-bottom:none; padding-bottom:0; }
.radar-cat{ display:flex; align-items:center; color: var(--fg-primary); }
.radar-cat-dot{ width:7px; height:7px; border-radius:50%; margin-right:8px; flex-shrink:0; background: var(--accent-flagged-strong); }
.radar-count{ font-family: var(--font-mono); font-size:12px; color: var(--fg-muted); }
.radar-foot{ margin-top: var(--space-5); padding-top: var(--space-4); border-top:1px solid var(--border-default); font-family: var(--font-mono); font-size:10px; letter-spacing: var(--tracking-mono-label); text-transform:uppercase; color: var(--fg-muted); text-align:center; }

.threat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5); }
@media (max-width:900px){ .threat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .threat-grid{ grid-template-columns:1fr; } }
.threat-icon{ width:40px; height:40px; border-radius:50%; background: var(--neutral-100); color: var(--fg-secondary); display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-4); }

/* Cost grid: darker, higher-contrast treatment - the financial/regulatory fallout, meant to read as more severe than the threat grid above it. */
.cost-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5); }
@media (max-width:900px){ .cost-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .cost-grid{ grid-template-columns:1fr; } }
.cost-card{ background: var(--bg-inverse); border:1px solid var(--border-inverse); border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); }
.cost-icon{ width:40px; height:40px; border-radius:50%; background: var(--accent-flagged-strong); color: var(--brick-red-100); display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-4); }
.cost-card h3{ font-family: var(--font-display); font-size:15.5px; letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2); color: var(--fg-on-inverse); }
.cost-card p{ color: var(--fg-on-inverse-muted); font-size:13px; line-height: var(--leading-normal); }

.cost-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-8); margin-bottom: var(--space-10); padding-bottom: var(--space-10); border-bottom:1px solid var(--border-strong); }
@media (max-width:800px){ .cost-stats{ grid-template-columns:1fr; gap: var(--space-6); } }
.cost-stat-num{ font-family: var(--font-display); font-size: clamp(30px,3.6vw,40px); letter-spacing: var(--tracking-tight); color: var(--accent-flagged-strong); line-height:1; margin-bottom: var(--space-2); }
.cost-stat-label{ font-size:14px; color: var(--fg-primary); line-height: var(--leading-normal); }
.cost-stat-src{ font-size:10px; color: var(--fg-muted); }
.cost-source{ font-size:11.5px; color: var(--fg-muted); margin-top: var(--space-8); }
.cost-source a{ color: var(--fg-muted); text-decoration:underline; text-underline-offset:2px; }
.protect-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
@media (max-width:800px){ .protect-grid{ grid-template-columns:1fr; } }
.protect-grid.protect-grid-6{ grid-template-columns: repeat(3,1fr); }
@media (max-width:900px){ .protect-grid.protect-grid-6{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .protect-grid.protect-grid-6{ grid-template-columns:1fr; } }
.threat-card, .protect-card{ padding: var(--space-6) var(--space-5); }
.threat-card h3, .protect-card h3{ font-family: var(--font-display); font-size:15.5px; letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2); }
.threat-card p, .protect-card p{ color: var(--fg-secondary); font-size:13px; line-height: var(--leading-normal); }
.protect-card{ display:flex; flex-direction:column; }
.protect-card a{ margin-top: var(--space-4); font-size:12.5px; font-weight: var(--weight-semibold); color: var(--accent-verified-strong); display:inline-flex; align-items:center; gap:4px; }
.protect-tag{ display:inline-block; font-family: var(--font-mono); font-size:10px; letter-spacing: var(--tracking-mono-label); text-transform:uppercase; padding:3px 8px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.protect-tag-included{ background: var(--accent-verified-soft); color: var(--accent-verified-strong); }
.protect-tag-request{ background: var(--neutral-100); color: var(--fg-muted); }

/* ---------- BENEFITS / VALUES STRIP ----------
   First built for the homepage Benefits section, reused on the About
   page for operating principles. Wrap of short pill-style claims. */
.benefits-strip{ display:flex; flex-wrap:wrap; gap: var(--space-4); }
.benefit-pill{ display:flex; align-items:center; gap:8px; padding: var(--space-4) var(--space-5); border:1px solid var(--border-default); border-radius: var(--radius-md); font-size:14px; color: var(--fg-primary); background: var(--bg-surface); }
.benefit-pill i{ color: var(--accent-verified-strong); flex-shrink:0; }

/* ---------- DARK CLOSING CTA BAND ----------
   Promoted from index.html - shared with the About page's closing section. */
.close-cta{ text-align:center; background: var(--ink-navy-900); color: var(--fg-on-inverse); }
.close-cta .wrap{ max-width:640px; }
.close-cta h2{ font-family: var(--font-display); font-size: clamp(28px,3.6vw,var(--text-2xl)); letter-spacing: var(--tracking-tight); margin: var(--space-4) 0 var(--space-4); color: var(--fg-on-inverse); }
.close-cta p{ color: var(--ink-navy-300); font-size: var(--text-base); line-height: var(--leading-relaxed); margin-bottom: var(--space-8); }
.close-cta .eyebrow{ justify-content:center; }