/* ============================================================================
   SecurityZ · Scam Protect — Warm Premium Design System (light)
   Theme imported from Claude Design "Scam Protect Launch"
   Surfaces: warm whites · Brand: emerald-teal · Threat: coral · Type: Hanken Grotesk
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* The HTML `hidden` attribute must always win over component display rules
   (overlays/banners toggle visibility via `hidden`; without this they can get
   stuck open — e.g. the welcome tour). */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  /* Surfaces — warm whites (mapped onto legacy bg-* names so all pages reskin) */
  --bg-900: #EFE9DD;
  --bg-800: #F7F4EE;   /* page background */
  --bg-700: #FDFBF6;   /* alternating section band (surfaceWarm) */
  --bg-600: #F1ECE3;   /* panel */
  --bg-card: #FFFFFF;
  --bg-glass: rgba(255,255,255,0.72);
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --panel: #F1ECE3;

  /* Ink — warm near-blacks (mapped onto legacy text-* names) */
  --text-100: #241F1A;  /* ink */
  --text-200: #322C25;
  --text-300: #5A534A;  /* inkSoft */
  --text-400: #8C8377;  /* muted */
  --text-500: #8C8377;
  --text-600: #B6AEA1;  /* faint */
  --ink: #241F1A; --ink-soft: #5A534A; --muted: #8C8377; --faint: #B6AEA1;

  /* Hairlines */
  --border: #E7E0D4;
  --border-strong: #DBD2C4;
  --line-soft: #F0EAE0;
  --ring: rgba(28,107,87,0.45);

  /* Brand — deep emerald-teal (replaces old blue/cyan) */
  --blue-500: #1C6B57;  --blue-600: #114C3E;  --blue-400: #1C6B57;
  --brand: #1C6B57; --brand-deep: #114C3E; --brand-soft: #E4EFE9; --brand-tint: #F0F6F2;
  --cyan: #2E9D71;
  --violet: #1C6B57;

  /* Safe / confirm */
  --green-500: #2E9D71; --green-400: #2E9D71; --safe: #2E9D71; --safe-soft: #E3F2EA;

  /* Threat — warm coral-red */
  --danger: #CF4B33; --threat: #CF4B33; --threat-deep: #A6371F; --threat-soft: #FAE7E1;

  /* Caution amber */
  --warn: #CC8A2B; --amber: #CC8A2B; --amber-soft: #F6ECD8;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #1C6B57 0%, #114C3E 100%);
  --grad-green: linear-gradient(135deg, #2E9D71 0%, #1C6B57 100%);
  --grad-hero: radial-gradient(1200px 600px at 70% -10%, rgba(28,107,87,0.10), transparent 60%),
               radial-gradient(900px 500px at 8% 0%, rgba(204,138,43,0.07), transparent 55%);
  --grad-text: linear-gradient(120deg, #1C6B57 0%, #114C3E 100%);

  /* Shadows — warm, soft */
  --shadow-sm: 0 1px 2px rgba(40,34,26,0.06);
  --shadow-md: 0 18px 40px -26px rgba(40,34,26,0.40);
  --shadow-lg: 0 30px 70px -28px rgba(40,34,26,0.34);
  --glow-blue: 0 16px 36px -16px rgba(28,107,87,0.55);
  --glow-green: 0 16px 36px -16px rgba(46,157,113,0.5);

  /* Geometry */
  --radius-sm: 9px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --maxw: 1200px; --gutter: clamp(1rem, 4vw, 2rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 240ms;
  --z-nav: 50; --z-overlay: 40; --z-dropdown: 60; --z-modal: 80;
}

/* ----------------------------------------------------------------- RESET -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  background: var(--bg-800);
  color: var(--text-300);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(28,107,87,0.18); color: var(--ink); }
main, footer, header { position: relative; z-index: 2; }

/* ------------------------------------------------------------- TYPOGRAPHY -- */
h1,h2,h3,h4,h5 { color: var(--ink); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -0.02em; }
h4 { font-size: 1.15rem; letter-spacing: -0.01em; }
p { color: var(--ink-soft); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.blue-text { color: var(--brand); }
.green-text { color: var(--safe); }

/* --------------------------------------------------------------- LAYOUT --- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: 1320px; }
.container-narrow { max-width: 820px; }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-sm { gap: .5rem; } .gap { gap: 1rem; } .gap-lg { gap: 2rem; }
.text-center { text-align: center; } .mx-auto { margin-inline: auto; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-6{margin-top:3rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.maxw-prose{max-width:65ch}

/* --------------------------------------------------------- SECTION HEADER -- */
/* Kicker (matches the launch design's mono kicker — no pill) */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brand);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.eyebrow.threat { color: var(--threat); } .eyebrow.threat::before { background: var(--threat); }
.section-head { max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 1rem; }
.section-head p { margin-top: 1rem; font-size: 1.1rem; color: var(--muted); }
.lead { font-size: 1.18rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- NAVBAR -- */
.nav-wrap { position: sticky; top: 0; z-index: var(--z-nav); padding: .8rem var(--gutter); transition: background var(--dur), box-shadow var(--dur), border-color var(--dur); border-bottom: 1px solid transparent; }
.nav-wrap.scrolled { background: rgba(247,244,238,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.nav { max-width: 1320px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.25rem; color: var(--ink); letter-spacing: -.02em; flex-wrap: nowrap; flex-shrink: 0; }
.brand .logo-mark { width: 34px; height: 39px; display: grid; place-items: center; border-radius: 0; background: transparent; box-shadow: none; }
.brand .logo-mark svg { width: 34px; height: 39px; }
.brand b { color: var(--brand); }
.brand .wordmark { display: inline-flex; align-items: baseline; white-space: nowrap; flex: none; }
.brand-tag { font-family: 'JetBrains Mono', monospace; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); border-radius: var(--radius-pill); padding: .2rem .5rem; font-weight: 700; vertical-align: middle; white-space: nowrap; align-self: center; flex: none; }
.site-footer .brand-tag { color: #BFEAD9; background: rgba(255,255,255,0.12); }
/* phones: drop the tagline chip in the top nav so the wordmark + menu fit */
@media (max-width: 600px) { .nav .brand-tag { display: none; } }
.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links > li > a, .nav-item-btn {
  display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .8rem; border-radius: 10px;
  font-size: .95rem; font-weight: 600; color: var(--ink-soft); background: none; border: none;
  transition: color var(--dur), background var(--dur);
}
.nav-links > li > a:hover, .nav-item-btn:hover, .nav-links > li > a.active { color: var(--ink); background: rgba(28,107,87,0.07); }
.nav-actions { display: flex; align-items: center; gap: .6rem; }
.nav-toggle { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .5rem; color: var(--ink); }

/* Mega dropdown */
.has-mega { position: relative; }
.mega {
  position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(680px, 90vw); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.2rem; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
  opacity: 0; visibility: hidden; transition: all var(--dur) var(--ease); z-index: var(--z-dropdown);
}
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega a { display: flex; gap: .7rem; padding: .6rem .7rem; border-radius: 10px; transition: background var(--dur); }
.mega a:hover { background: var(--brand-tint); }
.mega a .mi { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.mega a strong { color: var(--ink); font-size: .92rem; display: block; }
.mega a span { color: var(--muted); font-size: .8rem; }

/* --------------------------------------------------------------- BUTTONS -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.45rem; border-radius: var(--radius); font-weight: 700; font-size: .96rem;
  border: 1px solid transparent; transition: transform var(--dur) var(--ease), box-shadow var(--dur), background var(--dur), border-color var(--dur), color var(--dur);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--glow-blue); }
.btn-primary:hover { transform: translateY(-2px); background: var(--brand-deep); box-shadow: 0 20px 42px -16px rgba(28,107,87,0.65); }
.btn-cta { background: var(--brand); color: #fff; box-shadow: var(--glow-blue); }
.btn-cta:hover { transform: translateY(-2px); background: var(--brand-deep); box-shadow: 0 20px 42px -16px rgba(28,107,87,0.65); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--panel); border-color: var(--brand); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-tint); }
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn-sm { padding: .55rem 1rem; font-size: .86rem; }
.btn-block { width: 100%; }

/* ----------------------------------------------------------------- CARDS -- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.7rem; transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur);
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card.glass { background: var(--bg-glass); backdrop-filter: blur(14px); }
.card-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-soft); color: var(--brand); margin-bottom: 1.1rem; }
.card-icon svg { width: 26px; height: 26px; }
.card.green .card-icon { background: var(--safe-soft); color: var(--safe); }
.card.violet .card-icon { background: var(--amber-soft); color: var(--amber); }
.card h3 { font-size: 1.25rem; }
.card p { margin-top: .6rem; color: var(--ink-soft); font-size: .98rem; }
.card-link { margin-top: 1rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--brand); font-weight: 700; font-size: .9rem; }
.card-link svg { width: 16px; height: 16px; transition: transform var(--dur); }
.card:hover .card-link svg { transform: translateX(4px); }
.card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand); opacity: 0; transition: opacity var(--dur); }
.card:hover::after { opacity: 1; }

.feature-row { display: flex; gap: 1rem; align-items: flex-start; }
.feature-row .ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }

/* ----------------------------------------------------------------- HERO --- */
.hero { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--grad-hero); }
.hero-bg { display: none; }
.hero::after { display: none; }

/* Scam Protect launch film — animated hero band (iframe to assets/story) */
.story-hero { width: 100%; background: #0a0a0a; line-height: 0; overflow: hidden; }
.story-frame { display: block; width: 100%; border: 0; height: min(56.25vw, 82vh); }
@media (max-width: 720px) { .story-frame { height: min(72vw, 70vh); } }

/* Full-bleed background video (home hero) */
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--bg-800) 4%, rgba(247,244,238,0.95) 28%, rgba(247,244,238,0.66) 52%, rgba(247,244,238,0.34) 76%, rgba(247,244,238,0.14) 100%),
    linear-gradient(to top, rgba(247,244,238,0.62), rgba(247,244,238,0) 42%); }
.hero-video-on { padding-block: clamp(4rem, 9vw, 7.5rem); }

.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero h1 { margin-top: 1.2rem; }
.hero p.lead { margin-top: 1.4rem; max-width: 54ch; }
.hero-actions { margin-top: 2rem; display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }
.hero-stats { margin-top: 2.5rem; display: flex; gap: 2.4rem; flex-wrap: wrap; }
.hero-stats .num { font-size: 2rem; font-weight: 800; color: var(--ink); }
.hero-stats .lbl { font-size: .82rem; color: var(--muted); }

/* Page hero (inner pages) — warm light treatment */
.page-hero { position: relative; padding-block: clamp(3.5rem, 7vw, 5.5rem); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--brand-tint), var(--bg-800)); }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-2; background: var(--grad-hero); }
.page-hero-bg { display: none; }
.page-hero::after { display: none; }
.page-hero h1 { margin-top: 1rem; max-width: 20ch; }
.page-hero p { margin-top: 1rem; max-width: 60ch; font-size: 1.12rem; color: var(--ink-soft); }
.breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: var(--muted); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { opacity: .5; }

/* Browser chrome (Scam Protect product UI) */
.browser { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); }
.browser-bar { display: flex; align-items: center; gap: 1rem; padding: 0 1.1rem; height: 52px; background: var(--surfaceWarm, #FDFBF6); border-bottom: 1px solid var(--line-soft); }
.browser-bar .dots { display: flex; gap: 8px; }
.browser-bar .dots span { width: 12px; height: 12px; border-radius: 50%; }
.browser-bar .dots .r{background:#E6C0B6}.browser-bar .dots .y{background:#EBD8B0}.browser-bar .dots .g{background:#BFD8C2}
.browser-url { flex: 1; height: 32px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; gap: .55rem; padding: 0 .75rem; font-family: 'JetBrains Mono', monospace; font-size: .82rem; color: var(--ink-soft); }
.browser-url.danger { background: var(--threat-soft); border-color: #EBC3B8; color: var(--threat-deep); }
.browser-status { display: flex; align-items: center; gap: .45rem; font-family: 'JetBrains Mono', monospace; font-size: .76rem; font-weight: 500; color: var(--muted); }
.browser-status.scanning { color: var(--brand); }
.browser-body { position: relative; }

/* Terminal kept as a dark code panel (works on light) */
.terminal { background: #1b211c; border: 1px solid #2c352d; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); font-family: 'JetBrains Mono', monospace; font-size: .86rem; }
.terminal-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: #232b24; border-bottom: 1px solid #2c352d; }
.terminal-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.terminal-bar .dot.r{background:#E6C0B6}.terminal-bar .dot.y{background:#EBD8B0}.terminal-bar .dot.g{background:#BFD8C2}
.terminal-bar .ttl { margin-left: auto; color: #9aa39b; font-size: .78rem; }
.terminal-body { padding: 1.1rem 1.2rem; line-height: 1.8; color: #d7ddd6; }
.terminal-body .ln { display: block; }
.terminal-body .pr, .terminal-body .ok { color: #7FD4B6; }
.terminal-body .warn { color: #EBD8B0; }
.terminal-body .cm { color: #8c958c; }
.cursor-blink::after { content: "▋"; color: #7FD4B6; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ----------------------------------------------------------------- STATS -- */
.stats-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.stat { background: var(--surface); padding: 2rem 1.5rem; text-align: center; }
.stat .num { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--ink); line-height: 1; }
.stat .num b { color: var(--brand); }
.stat .lbl { margin-top: .6rem; color: var(--muted); font-size: .92rem; }

/* --------------------------------------------------------------- PRICING -- */
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; align-items: stretch; }
.price-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; transition: transform var(--dur), border-color var(--dur), box-shadow var(--dur); }
.price-card:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.price-card.featured { border-color: var(--brand); box-shadow: var(--shadow-md); background: linear-gradient(180deg, var(--brand-tint), var(--surface)); }
.price-card .tier { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--brand); }
.price-card .badge { float: right; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 700; padding: .25rem .7rem; border-radius: var(--radius-pill); }
.price-card .amt { margin-top: 1rem; font-size: 3rem; font-weight: 800; color: var(--ink); }
.price-card .amt span { font-size: 1rem; font-weight: 500; color: var(--muted); }
.price-card .desc { margin-top: .5rem; color: var(--ink-soft); font-size: .95rem; }
.price-card ul.feat { margin-top: 1.4rem; display: grid; gap: .7rem; flex: 1; }
.price-card ul.feat li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); }
.price-card ul.feat li svg { width: 18px; height: 18px; flex: none; color: var(--safe); margin-top: 2px; }
.price-card .btn { margin-top: 1.6rem; }

/* ----------------------------------------------------------------- TABLE -- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
table.zt { width: 100%; border-collapse: collapse; min-width: 560px; }
table.zt th, table.zt td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--border); font-size: .94rem; }
table.zt thead th { background: var(--panel); color: var(--ink); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
table.zt tbody tr:hover { background: var(--brand-tint); }
table.zt td svg { width: 18px; height: 18px; }
.check { color: var(--safe); } .cross { color: var(--faint); }

/* ------------------------------------------------------------ TESTIMONIAL -- */
.quote-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.8rem; position: relative; box-shadow: var(--shadow-sm); }
.quote-card .stars { color: var(--amber); display: flex; gap: .15rem; margin-bottom: .9rem; }
.quote-card .stars svg { width: 17px; height: 17px; }
.quote-card blockquote { color: var(--ink); font-size: 1.05rem; line-height: 1.6; font-weight: 500; }
.quote-card .who { margin-top: 1.2rem; display: flex; align-items: center; gap: .8rem; }
.quote-card .who .av { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.quote-card .who > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.quote-card .who strong { color: var(--ink); display: block; font-size: .94rem; font-weight: 700; line-height: 1.25; }
.quote-card .who span { display: block; color: var(--muted); font-size: .8rem; line-height: 1.3; }

/* ------------------------------------------------------------------- FAQ -- */
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .9rem; overflow: hidden; background: var(--surface); transition: border-color var(--dur); }
.faq-item[open] { border-color: var(--border-strong); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.2rem 1.4rem; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .pm { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--border-strong); color: var(--brand); transition: transform var(--dur); }
.faq-item[open] summary .pm { transform: rotate(45deg); }
.faq-item .ans { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); font-size: .98rem; }

/* ----------------------------------------------------------------- TABS --- */
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 1.8rem; }
.tab-btn { padding: .7rem 1.1rem; background: none; border: none; color: var(--muted); font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur), border-color var(--dur); }
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-panel { display: none; } .tab-panel.active { display: block; animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- FORMS -- */
.field { margin-bottom: 1.1rem; }
.field label, .form-card label, main form > label, main form .grid > label, main form fieldset > label { display: block; font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: .4rem; }
.field input, .field select, .field textarea,
.form-card input, .form-card select, .form-card textarea,
main form input:not([type="checkbox"]):not([type="radio"]), main form select, main form textarea {
  width: 100%; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--ink); font: inherit; line-height: 1.4;
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
main form label > input, main form label > select, main form label > textarea { margin-top: .5rem; }
.field input:focus, .field select:focus, .field textarea:focus,
.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
main form input:focus, main form select:focus, main form textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(28,107,87,0.14); background: #fff;
}
.field textarea, .form-card textarea, main form textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder,
.form-card input::placeholder, .form-card textarea::placeholder,
main form input::placeholder, main form textarea::placeholder { color: var(--faint); }
.field select, .form-card select, main form select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C8377' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.form-card.elevated { box-shadow: var(--shadow-lg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px){ .form-row { grid-template-columns: 1fr; } }
.form-note { margin-top: .8rem; font-size: .88rem; min-height: 1.2em; }

ul.check-list, ul.feat { display: grid; gap: .8rem; margin-top: 1rem; }
.check-list li, ul.feat li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-soft); font-size: .96rem; line-height: 1.5; }
.check-list li svg, ul.feat li svg { width: 20px; height: 20px; flex: none; color: var(--safe); margin-top: 2px; }

/* ----------------------------------------------------------- AUTH / LOGIN -- */
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 900px) { .auth-grid { grid-template-columns: 1fr; } .auth-aside { display: none; } }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.4rem); box-shadow: var(--shadow-lg); max-width: 460px; width: 100%; margin-inline: auto; }
.auth-card h2 { font-size: 1.5rem; }
.auth-step { display: none; } .auth-step.active { display: block; animation: fade .3s var(--ease); }
.input-wrap { position: relative; }
.input-wrap .toggle-eye { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); padding: .35rem; border-radius: 6px; display: grid; place-items: center; }
.input-wrap .toggle-eye:hover { color: var(--ink); }
.input-wrap .toggle-eye svg { width: 18px; height: 18px; }
.input-wrap input { padding-right: 2.6rem !important; }
.caps-warn { display: none; align-items: center; gap: .4rem; color: var(--amber); font-size: .78rem; margin-top: .45rem; }
.caps-warn.show { display: flex; } .caps-warn svg { width: 14px; height: 14px; }
.field-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.field-head label { margin: 0; } .field-head a { font-size: .82rem; font-weight: 700; }
.remember { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-soft); cursor: pointer; user-select: none; }
.remember input[type="checkbox"] { width: 16px !important; height: 16px; accent-color: var(--brand); margin: 0; flex: none; }
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.3rem 0; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.sso-btn { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .75rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 700; font-size: .92rem; transition: border-color .2s, background .2s, transform .15s; }
.sso-btn:hover { border-color: var(--brand); background: var(--brand-tint); transform: translateY(-1px); }
.sso-btn svg { width: 18px; height: 18px; flex: none; }
.auth-alert { display: none; align-items: center; gap: .5rem; background: var(--threat-soft); border: 1px solid #EFC9BD; color: var(--threat-deep); border-radius: 10px; padding: .7rem .9rem; font-size: .85rem; margin-bottom: 1.1rem; }
.auth-alert.show { display: flex; } .auth-alert svg { width: 16px; height: 16px; flex: none; }
.auth-meta { display: flex; align-items: center; justify-content: center; gap: .4rem; color: var(--muted); font-size: .78rem; margin-top: 1.3rem; }
.auth-meta svg { width: 14px; height: 14px; color: var(--brand); }
.otp-row { display: flex; gap: .55rem; justify-content: space-between; margin-top: .6rem; }
.otp { width: 100%; text-align: center; font-size: 1.35rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; padding: .75rem 0 !important; }
.mfa-target { font-weight: 700; color: var(--ink); }
.link-btn { background: none; border: none; color: var(--brand); font-weight: 700; font-size: .85rem; padding: 0; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.auth-success { text-align: center; padding: 1rem 0; }
.auth-success .tick { width: 76px; height: 76px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--safe-soft); border: 1px solid #BFE3D0; }
.auth-success .tick svg { width: 38px; height: 38px; color: var(--safe); }
.auth-aside .trust-badges { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }

/* --------------------------------------------------------------- CTA BAND -- */
.cta-band { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: clamp(2.5rem,6vw,4.5rem); text-align: center; isolation: isolate; background: var(--brand-deep); color: #fff; }
.cta-band::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.08;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 64px 64px; }
.cta-band-bg { display: none; }
.cta-band::after { display: none; }
.cta-band .eyebrow { color: #7FD4B6; } .cta-band .eyebrow::before { background: #7FD4B6; }
.cta-band h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.cta-band p { max-width: 52ch; margin: 1rem auto 0; color: rgba(255,255,255,0.78); }
.cta-band .hero-actions { justify-content: center; }
.cta-band .btn-ghost { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.3); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,0.18); border-color: #fff; }
.cta-band .btn-cta { background: #fff; color: var(--brand-deep); box-shadow: 0 16px 36px -16px rgba(0,0,0,0.4); }
.cta-band .btn-cta:hover { background: #F7F4EE; color: var(--brand-deep); }

/* --------------------------------------------------------------- LOGOS ---- */
.logo-strip { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem,5vw,3.5rem); flex-wrap: wrap; opacity: .8; }
.logo-strip span { font-weight: 800; font-size: 1.1rem; color: var(--muted); letter-spacing: -.01em; display:flex; align-items:center; gap:.4rem; }
.logo-strip svg { width: 22px; height: 22px; color: var(--faint); }

/* ----------------------------------------------------------- BLOG / CARDS -- */
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur), border-color var(--dur), box-shadow var(--dur); }
.post-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.post-card .thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--panel); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .thumb img { transform: scale(1.06); }
.post-card .body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card .meta { display: flex; gap: .7rem; font-size: .78rem; color: var(--muted); margin-bottom: .7rem; flex-wrap: wrap; }
.tag { font-family: 'JetBrains Mono', monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); background: var(--brand-soft); padding: .2rem .6rem; border-radius: var(--radius-pill); }
.post-card h3 { font-size: 1.15rem; }
.post-card p { margin-top: .5rem; color: var(--ink-soft); font-size: .92rem; flex: 1; }

.article { max-width: 760px; margin-inline: auto; }
.article p { margin-top: 1.2rem; font-size: 1.08rem; line-height: 1.8; color: var(--ink-soft); }
.article h2 { margin-top: 2.5rem; } .article h3 { margin-top: 1.8rem; }
.article ul.bullets { margin-top: 1.2rem; display: grid; gap: .7rem; }
.article ul.bullets li { padding-left: 1.6rem; position: relative; color: var(--ink-soft); }
.article ul.bullets li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--brand); }
.article blockquote { margin: 2rem 0; padding: 1.2rem 1.5rem; border-left: 3px solid var(--brand); background: var(--brand-tint); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink); font-size: 1.1rem; }
.article img.figure { border-radius: var(--radius); margin: 2rem 0; border: 1px solid var(--border); }
.callout { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.8rem 0; background: var(--surface); display: flex; gap: 1rem; }
.callout .ic { flex: none; color: var(--brand); }
.callout.warn { border-color: #EAD3A6; background: var(--amber-soft); }
.callout.warn .ic { color: var(--amber); }

/* --------------------------------------------------------------- TIMELINE -- */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--brand), transparent); }
.timeline .ti { position: relative; padding-bottom: 1.8rem; }
.timeline .ti::before { content: ""; position: absolute; left: -2rem; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); }
.timeline .ti time { font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--brand); }
.timeline .ti h4 { margin-top: .3rem; } .timeline .ti p { margin-top: .3rem; color: var(--ink-soft); font-size: .94rem; }

/* --------------------------------------------------------------- BADGES ---- */
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: var(--radius-pill); font-size: .8rem; font-weight: 700; border: 1px solid var(--border-strong); color: var(--ink-soft); background: var(--surface); }
.pill.green { color: var(--safe); border-color: #BFE3D0; background: var(--safe-soft); }
.pill.blue { color: var(--brand); border-color: #C5DED4; background: var(--brand-soft); }
.pill.threat { color: var(--threat-deep); border-color: #EFC9BD; background: var(--threat-soft); }
.pill.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* --------------------------------------------------------------- FOOTER ---- */
.site-footer { background: var(--brand-deep); color: rgba(255,255,255,0.72); border-top: 1px solid var(--brand-deep); padding-block: 4rem 2rem; margin-top: 2rem; }
.site-footer .brand { color: #fff; } .site-footer .brand b { color: #7FD4B6; }
.site-footer .logo-mark svg path[fill="#051018"] { fill: #114C3E; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 2rem; }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: .92rem; margin-top: 1rem; max-width: 32ch; }
.footer-col h5 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.footer-col a { display: block; color: rgba(255,255,255,0.66); font-size: .9rem; padding: .3rem 0; transition: color var(--dur); }
.footer-col a:hover { color: #7FD4B6; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.3rem; }
.footer-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); transition: all var(--dur); }
.footer-social a:hover { color: #fff; border-color: #7FD4B6; transform: translateY(-2px); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.55); font-size: .85rem; }
.footer-bottom .links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-bottom .links a:hover { color: #7FD4B6; }

/* --------------------------------------------------------- REVEAL ON SCROLL */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}

/* ------------------------------------------------------------ DECORATIONS -- */
.grid-overlay { display: none; }
.glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; pointer-events: none; opacity: .4; }
.glow-orb.blue { background: rgba(28,107,87,0.18); }
.glow-orb.green { background: rgba(46,157,113,0.16); }

/* ----------------------------------------------------------- RESPONSIVE --- */
/* Global mobile safety: never allow sideways scroll; let grid tracks shrink
   below their content's min-width (the classic 1fr = minmax(auto,1fr) blowout). */
html { overflow-x: clip; }
.hero-grid > *, .sp-dash > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* single-column: keep text legible across the full width over the video */
  .hero-scrim { background:
    linear-gradient(180deg, rgba(247,244,238,0.92) 0%, rgba(247,244,238,0.80) 55%, rgba(247,244,238,0.40) 100%),
    linear-gradient(to top, var(--bg-800), rgba(247,244,238,0) 60%); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 880px) {
  .nav-links, .nav-actions .btn-ghost { display: none; }
  .nav-toggle { display: inline-grid; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: .2rem;
    position: absolute; top: 100%; left: var(--gutter); right: var(--gutter);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1rem; box-shadow: var(--shadow-lg); margin-top: .6rem;
  }
  /* mobile mega = collapsible accordion (tap a section to expand) */
  .nav-links.open .mega { position: static; transform: none; width: auto; grid-template-columns: 1fr; box-shadow: none; border: none; background: var(--panel); border-radius: 12px;
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; padding: 0 .4rem; transition: max-height .28s ease, opacity .2s, padding .2s; }
  .nav-links.open .has-mega.open .mega { max-height: 640px; opacity: 1; visibility: visible; padding: .4rem; margin-top: .25rem; }
  .nav-item-btn svg { transition: transform .2s; }
  .nav-links.open .has-mega.open > .nav-item-btn svg { transform: rotate(180deg); }
  .has-mega { width: 100%; }
  .nav-links.open .nav-item-btn { width: 100%; justify-content: space-between; }
}
@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .stat:nth-child(n) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  /* don't autoplay motion; the poster (or the hero gradient) stays as a still backdrop */
  .hero-video { display: none; }
}

/* ============================================================================
   SCAM PROTECT — product components (notifications, chips, intercept, dashboard)
   ========================================================================== */
.warn-tri { display:inline-grid; place-items:center; position:relative; width:1em; height:1em; }
.warn-tri::before { content:""; position:absolute; inset:0; background:currentColor; clip-path:polygon(50% 6%,96% 92%,4% 92%); border-radius:2px; }
.warn-tri::after { content:"!"; position:relative; color:#fff; font-weight:800; font-size:.5em; line-height:1; margin-top:.12em; }

/* scam notification cards (Problem scene) */
.sp-notifs { display:grid; gap:.9rem; max-width:880px; margin-inline:auto; }
.sp-notif { display:flex; align-items:flex-start; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.1rem 1.25rem; box-shadow:0 18px 40px -28px rgba(40,34,26,0.45); }
.sp-notif .av { width:46px; height:46px; border-radius:12px; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.05rem; }
.sp-notif .bd { flex:1; min-width:0; }
.sp-notif .bd .t { display:flex; align-items:center; gap:.6rem; }
.sp-notif .bd .t strong { font-weight:800; font-size:1.05rem; color:var(--ink); }
.sp-notif .bd .t time { font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--muted); }
.sp-notif .bd p { margin-top:.25rem; font-size:.96rem; color:var(--ink-soft); line-height:1.35; }
.sp-flag { flex:none; display:inline-flex; align-items:center; gap:.4rem; font-family:'JetBrains Mono',monospace; font-size:.78rem; font-weight:600; color:var(--threat-deep); background:var(--threat-soft); border:1px solid #EFC9BD; border-radius:9px; padding:.4rem .65rem; }
.sp-flag .warn-tri { color:var(--threat); font-size:.85rem; }

/* channel chips (Escalation) */
.channel-chips { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
.channel-chip { display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.05rem; color:var(--threat-deep); background:var(--threat-soft); border:1px solid #EFC9BD; border-radius:999px; padding:.7rem 1.3rem; }
.channel-chip .dot { width:9px; height:9px; border-radius:50%; background:var(--threat); }

/* intercept card (Scam blocked) */
.intercept { background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); }
.intercept .topbar { height:6px; background:var(--threat); }
.intercept .in { padding:1.7rem 1.8rem; }
.intercept .hd { display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; }
.intercept .shield { width:46px; height:53px; flex:none; }
.intercept .hd .kick { font-family:'JetBrains Mono',monospace; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--threat); font-weight:600; }
.intercept .hd h3 { font-size:1.5rem; margin-top:.2rem; }
.intercept .body { font-size:1.05rem; color:var(--ink-soft); line-height:1.5; margin-bottom:1.2rem; }
.intercept .tags { display:flex; gap:.6rem; flex-wrap:wrap; }
.threat-tag { display:inline-flex; align-items:center; gap:.45rem; font-family:'JetBrains Mono',monospace; font-size:.8rem; font-weight:500; color:var(--threat-deep); background:var(--threat-soft); border:1px solid #EFC9BD; border-radius:8px; padding:.45rem .7rem; }
.threat-tag .warn-tri { color:var(--threat); font-size:.85rem; }

/* shield glyph (emerald + white check) */
.sp-shield { display:inline-grid; place-items:center; position:relative; }
.sp-shield .bg { position:absolute; inset:0; background:var(--brand); clip-path:polygon(50% 0%,100% 16%,100% 56%,50% 100%,0% 56%,0% 16%); }
.sp-shield svg { position:relative; }

/* mini dashboard preview */
.sp-dash { display:grid; grid-template-columns:240px 1fr; gap:1.4rem; background:var(--bg-800); border:1px solid var(--border); border-radius:18px; padding:1.6rem; }
@media(max-width:680px){ .sp-dash { grid-template-columns: minmax(0, 1fr); } }
@media(max-width:560px){ .form-card { padding: 1.4rem; } }
.sp-dash .col-status { display:flex; flex-direction:column; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.6rem 1.2rem; }
.sp-dash .col-status .lbl { align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:1.2rem; }
.status-ring { width:150px; height:150px; border-radius:50%; display:grid; place-items:center; position:relative; background:conic-gradient(var(--safe) 300deg, var(--line-soft) 300deg); }
.status-ring::before { content:""; position:absolute; inset:12px; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-soft); }
.status-ring .inner { position:relative; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.status-ring .inner .pr { font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--safe); font-weight:600; }
.sp-dash .stat-rows { width:100%; margin-top:1.4rem; display:grid; gap:.7rem; }
.sp-dash .stat-rows .r { display:flex; justify-content:space-between; align-items:baseline; }
.sp-dash .stat-rows .r span { font-size:.9rem; color:var(--ink-soft); }
.sp-dash .stat-rows .r b { font-size:1.5rem; font-weight:800; color:var(--ink); }
.sp-dash .stat-rows hr { border:none; border-top:1px solid var(--line-soft); }
.sp-dash .col-feed .hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.sp-dash .col-feed .hd h4 { font-size:1.1rem; }
.sp-dash .col-feed .hd .rt { display:flex; align-items:center; gap:.4rem; font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--safe); font-weight:500; }
.sp-dash .col-feed .hd .rt .dot { width:7px; height:7px; border-radius:50%; background:var(--safe); box-shadow:0 0 0 3px rgba(46,157,113,0.18); }
.block-row { display:flex; align-items:center; gap:.85rem; padding:.8rem 1rem; background:var(--surface); border:1px solid var(--line-soft); border-radius:11px; margin-bottom:.6rem; }
.block-row .ic { width:34px; height:34px; flex:none; border-radius:9px; background:var(--threat-soft); display:grid; place-items:center; color:var(--threat); }
.block-row .bd { flex:1; min-width:0; }
.block-row .bd strong { display:block; font-weight:700; font-size:.95rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.block-row .bd span { font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--muted); }
.block-row time { font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--faint); flex:none; }
.block-row .blocked { display:inline-flex; align-items:center; gap:.35rem; font-family:'JetBrains Mono',monospace; font-size:.74rem; font-weight:600; color:var(--safe); background:var(--safe-soft); border-radius:7px; padding:.3rem .55rem; flex:none; }
.device-row-mini { display:flex; gap:.7rem; margin-top:.4rem; }
.device-chip { flex:1; display:flex; align-items:center; gap:.6rem; padding:.7rem .85rem; background:var(--brand-tint); border:1px solid var(--brand-soft); border-radius:11px; }
.device-chip .di { width:26px; height:26px; flex:none; border-radius:7px; background:var(--surface); border:1px solid var(--brand-soft); display:grid; place-items:center; color:var(--brand); }
.device-chip strong { display:block; font-weight:700; font-size:.85rem; color:var(--ink); }
.device-chip span { display:flex; align-items:center; gap:.3rem; font-family:'JetBrains Mono',monospace; font-size:.66rem; color:var(--safe); }
.device-chip span .dot { width:5px; height:5px; border-radius:50%; background:var(--safe); }