/* ============================================================
   SCAN.NOW design system
   Dark navy ground, teal signal colour, serif accents for editorial
   headings. No external fonts: a privacy site loads nothing third-party.
   ============================================================ */
:root {
  --bg: #0b1220; --bg-2: #0e1729; --panel: #111a2c; --panel-2: #16213a; --panel-3: #1b2842;
  --line: #22304a; --line-2: #2d3d5c;
  --text: #e6edf7; --soft: #c3cee0; --muted: #93a3bb; --faint: #6b7a93;
  --accent: #2dd4bf; --accent-2: #7dd3fc; --accent-dark: #14b8a6; --accent-ink: #062b28;
  --gold: #d8a32c; --gold-hover: #e5b445; --gold-ink: #2a1d02; --gold-soft: rgba(216, 163, 44, .14);
  --good: #22c55e; --warn: #f59e0b; --bad: #ef4444; --crit: #fb7185; --info: #60a5fa; --low: #a78bfa;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 10px; --radius-sm: 6px; --radius-lg: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --header-h: 72px; --container: 100%;
  /* Side gutter: the page is full-bleed, but never flush against the glass. */
  --gutter: clamp(1.75rem, 7.5vw, 11rem);
}
.tone-websites { --tone: 45, 212, 191; }
.tone-active { --tone: 251, 113, 133; }
.tone-browsers { --tone: 96, 165, 250; }
.tone-files { --tone: 245, 158, 11; }
.tone-privacy { --tone: 167, 139, 250; }
.tone-files-privacy { --tone: 192, 132, 252; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.menu-open { overflow: hidden; }
/* While a panel is open the header must not be able to leave.
   position:sticky sticks relative to the nearest scrolling ancestor, and
   body{overflow:hidden} removes the body as that ancestor - so the header
   stopped sticking and scrolled away behind the open menu, leaving page text
   showing through the strip above it. Fixed does not depend on a scroll
   container. Nothing shifts on close, because with the body locked the scroll
   position never moved. */
body.menu-open .site-header { position: fixed; top: 0; left: 0; right: 0; }
a { color: var(--accent-2); text-decoration: none; }
/* Card links: only the title is the link (clean anchor text). The title link's ::after
   stretches over its .link-card, so the whole card stays one click target. The card keeps
   the colour the old whole-card <a> had. */
.link-card { position: relative; color: var(--accent-2); }
.card-link, .card-link:hover { color: inherit; }
.card-link::after { content: ""; position: absolute; inset: 0; }
a:hover { color: #fff; }
.link-card:hover, .link-card:focus-within { color: #fff; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: #fff; }
h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; color: var(--soft); }
strong { color: #fff; }
code { font-family: var(--mono); font-size: .88em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: .08em .4em; color: #c7f9f1; }
pre { background: #070d19; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; overflow-x: auto; font-size: .85rem; line-height: 1.55; color: #dbe7f5; margin: 1rem 0 1.4rem; }
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: .5rem 1rem; border-radius: 6px; z-index: 999; }
.skip-link:focus { left: 8px; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.ico { flex: none; vertical-align: -3px; }

/* ---------- Layout ---------- */
/* Full-bleed: the only limit is the viewport, with a gutter either side.
   Reading width is governed by the grids (rails, TOC), not by a hard cap. */
.container { width: calc(100% - var(--gutter) * 2); margin-inline: auto; }
/* Only pure prose (the legal pages) keeps a reading measure; everything
   else is full-bleed and lets its own grid decide. */
.container-narrow { width: calc(100% - var(--gutter) * 2); max-width: 1100px; margin-inline: auto; }
.section { padding: 3.5rem 0; }
.section-tight { padding: 2.25rem 0; }
/* Padding does not collapse the way margins do, so two stacked sections used
   to add both gutters together - 11rem of empty screen between one heading and
   the next. One gutter between them is enough. */
.section + .section,
.section + .section-tight,
.section-tight + .section,
.section-tight + .section-tight { padding-top: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.section-head h2 { margin: 0; }
.section-head p { margin: .3rem 0 0; }
.text-link { color: var(--accent); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .3rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: 0 1.25rem; border-radius: 8px; border: 1px solid transparent; font-weight: 650; font-size: .95rem; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, transform .1s; background: var(--panel-2); color: #fff; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #5eead4; color: var(--accent-ink); }
.btn-outline { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--soft); }
.btn-ghost:hover { background: var(--panel-2); color: #fff; }
.btn-sm { min-height: 36px; padding: 0 .9rem; font-size: .85rem; }
.btn-lg { min-height: 52px; padding: 0 1.6rem; font-size: 1.05rem; }
.btn-full { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 200; height: var(--header-h); background: rgba(11, 18, 32, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
/* The header does not need the generous side gutter the content columns use;
   at 1200px that gutter alone was costing 195px and pushing the actions off
   the right edge. It gets its own, and the nav absorbs what is left. */
.site-header .container { width: calc(100% - clamp(1rem, 3vw, 4rem) * 2); max-width: 1700px; }
.header-inner { display: flex; align-items: center; height: 100%; gap: 1.25rem; }
.header-inner .desktop-nav { flex: 1 1 auto; min-width: 0; }
.header-actions { flex: 0 0 auto; }
.brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; font-size: 1.3rem; letter-spacing: -.04em; white-space: nowrap; }
.brand-logo { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.brand-dot { color: var(--accent); font-weight: 400; }
.desktop-nav { flex: 1; }
.nav-links { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border-radius: 7px; color: var(--soft); font-size: .92rem; font-weight: 600; white-space: nowrap; }
.nav-link > svg:first-child { color: var(--faint); transition: color .15s; }
.nav-link:hover > svg:first-child, .nav-link.active > svg:first-child, .nav-has-mega:hover > .nav-link > svg:first-child { color: var(--accent); }
.nav-link:hover, .nav-link.active, .nav-has-mega:hover > .nav-link { color: #fff; background: var(--panel-2); }
.mega { position: absolute; top: calc(100% + 10px); left: 0; min-width: 940px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); padding: 1.1rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 210; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-has-mega:hover .mega, .nav-has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.mega-guides .mega-cols { grid-template-columns: 1fr 1fr; }
.mega-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 .5rem .5rem; }
.mega-heading small { display: none; font-size: .6rem; letter-spacing: 0; }
.mega-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .6rem; align-items: start; padding: .5rem; border-radius: 8px; color: var(--soft); }
.mega-item:hover, .mega-item:focus-within { background: var(--panel-2); color: #fff; }
.mega-symbol { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--panel-3); color: var(--accent); }
.mega-title { display: block; font-size: .88rem; font-weight: 650; color: #fff; line-height: 1.3; }
.mega-sub { display: block; font-size: .74rem; color: var(--muted); line-height: 1.35; margin-top: .1rem; }
.mega-footer { display: flex; gap: 1.5rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.mega-footer a { font-size: .85rem; font-weight: 650; color: var(--accent); display: inline-flex; align-items: center; gap: .3rem; }
/* All Tools is a viewport-level inventory, not a tooltip attached to one nav
   label. Centring and bounding it keeps both outer columns reachable at every
   desktop width; the only scrolling that can remain is vertical on a short
   screen. Active Security spans two columns because it contains 14 focused
   tools, while the other groups remain quick single-column scans. */
.mega-tools { position: fixed; top: calc(var(--header-h) - 1px); left: 50%; width: min(1180px, calc(100vw - 2rem)); min-width: 0; max-height: calc(100vh - var(--header-h) - 1rem); max-height: calc(100dvh - var(--header-h) - 1rem); padding: .8rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; transform: translate(-50%, 6px); }
.nav-has-mega:hover .mega-tools, .nav-has-mega:focus-within .mega-tools { transform: translate(-50%, 0); }
.mega-tools::before { top: -2px; height: 2px; }
.mega-tools .mega-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.mega-tools .mega-col { min-width: 0; padding: .5rem; border-top: 2px solid rgba(var(--tone), .68); border-radius: 10px; background: linear-gradient(180deg, rgba(var(--tone), .055), transparent 34%); }
.mega-tools .mega-col-wide { grid-column: span 2; }
.mega-tools .mega-list { display: grid; gap: .08rem; }
.mega-tools .mega-col-wide .mega-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .35rem; }
.mega-tools .mega-heading { margin-bottom: .2rem; padding: .25rem .45rem .55rem; border-bottom: 1px solid rgba(var(--tone), .22); color: rgb(var(--tone)); }
.mega-tools .mega-heading small { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .32rem; border: 1px solid rgba(var(--tone), .22); border-radius: 999px; background: rgba(var(--tone), .1); color: rgb(var(--tone)); }
.mega-tools .mega-item { grid-template-columns: 32px minmax(0, 1fr); gap: .55rem; min-height: 48px; padding: .4rem .42rem; align-items: center; }
.mega-tools .mega-item:hover, .mega-tools .mega-item:focus-within { background: rgba(var(--tone), .085); }
.mega-tools .mega-symbol { width: 32px; height: 32px; border: 1px solid rgba(var(--tone), .2); background: rgba(var(--tone), .11); color: rgb(var(--tone)); }
.mega-tools .mega-title { font-size: .82rem; line-height: 1.25; }
.mega-tools .mega-sub { display: -webkit-box; overflow: hidden; margin-top: .08rem; font-size: .68rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.mega-tools .mega-footer { margin: .65rem .25rem 0; padding: .7rem .45rem .1rem; }
@media (max-width: 1300px) and (min-width: 1101px) {
  .mega-tools .mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-tools .mega-col-wide { grid-column: span 1; }
  .mega-tools .mega-list, .mega-tools .mega-col-wide .mega-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-tools .mega-sub { display: none; }
  .mega-tools .mega-item { min-height: 42px; }
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

/* Hamburger + mobile panel (GTA6.free pattern) */
.hamburger { display: none; align-items: center; gap: .58rem; min-width: 69px; height: 38px; padding: 0 .25rem 0 .5rem; border: 0; border-left: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--soft); font-family: inherit; }
.hamburger-label { font-size: .65rem; font-weight: 780; letter-spacing: .055em; text-transform: uppercase; }
.hamburger-mark { position: relative; display: block; width: 21px; height: 18px; }
.hamburger-mark i { position: absolute; right: 0; display: block; height: 1.5px; background: currentColor; transition: top .18s ease, width .18s ease, transform .18s ease; }
.hamburger-mark i:first-child { top: 5px; width: 21px; }
.hamburger-mark i:last-child { top: 12px; width: 14px; }
.hamburger.open { color: var(--accent); }
.hamburger.open .hamburger-mark i { top: 9px; width: 18px; }
.hamburger.open .hamburger-mark i:first-child { transform: rotate(45deg); }
.hamburger.open .hamburger-mark i:last-child { transform: rotate(-45deg); }
.mobile-panel { display: none; position: fixed; inset: var(--header-h) 0 0; z-index: 190; background: var(--bg); color: var(--soft); overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 0 4rem; border-top: 1px solid var(--line); }
.mobile-panel.open { display: block; }
.mobile-menu-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.mobile-menu-head strong { color: #fff; font-size: 1.15rem; }
.mobile-menu-head p { margin: .28rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.mobile-menu-note { color: var(--accent); font: 650 .6rem var(--mono); letter-spacing: .05em; }
.mobile-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; margin-top: 1rem; padding: .4rem .4rem .4rem .75rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--muted); }
.mobile-search input { min-width: 0; padding: .35rem 0; border: 0; outline: 0; background: transparent; color: #fff; font: 500 .9rem var(--font); }
.mobile-search input::placeholder { color: var(--faint); }
.mobile-search button { min-height: 34px; padding: .44rem .8rem; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font: 800 .72rem var(--font); }
.mobile-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.5rem; margin-top: 1.15rem; border-block: 1px solid var(--line); }
.mobile-featured .link-card { display: grid; grid-template-columns: 31px 1fr; column-gap: .65rem; align-items: center; padding: .85rem .1rem; color: var(--soft); }
.mobile-featured .link-card + .link-card { border-left: 1px solid var(--line); padding-left: 1.25rem; }
.mobile-featured .link-card:hover, .mobile-featured .link-card:focus-within { color: var(--accent); }
.mobile-featured .link-card > span { grid-row: 1 / 3; display: grid; place-items: center; width: 31px; height: 31px; border-left: 2px solid var(--accent); color: var(--accent-2); }
.mobile-featured strong, .mobile-featured small { display: block; }
.mobile-featured strong { font-size: .8rem; color: #fff; }
.mobile-featured small { color: var(--muted); font-size: .66rem; }
.mobile-nav-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem 2rem; margin-top: 1.65rem; }
.mob-head { display: flex; align-items: center; gap: .55rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); font-size: .66rem; font-weight: 820; text-transform: uppercase; letter-spacing: .09em; color: #fff; }
.mob-head::before { content: ""; width: 12px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.mob-link { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .62rem .2rem; border-bottom: 1px solid var(--line); color: var(--soft); font-size: .8rem; font-weight: 600; }
.mob-link svg { color: var(--faint); }
.mob-link:hover, .mob-link.active { color: var(--accent); }
.mobile-utility { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.7rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.mobile-utility a { color: var(--soft); font-size: .72rem; font-weight: 700; }
.mobile-utility a:hover { color: var(--accent); }

/* Chrome desktop only: the class is set synchronously in <head>, before the
   first paint, and removed permanently for thirty days when dismissed. */
#chrome-extension-banner { display: none; border-bottom: 1px solid rgba(45, 212, 191, .28); background: linear-gradient(90deg, rgba(15, 118, 110, .2), rgba(14, 61, 78, .12)); }
.recommend-chrome-extension .chrome-extension-banner { display: block; }
.chrome-extension-banner-inner { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding-block: .38rem; }
.chrome-extension-banner-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; background: rgba(45, 212, 191, .14); color: var(--accent); }
.chrome-extension-banner p { flex: 1; margin: 0; color: var(--soft); font-size: .78rem; line-height: 1.35; }
.chrome-extension-banner p strong { color: #fff; }
.chrome-extension-banner-link { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; color: var(--accent); font-size: .76rem; font-weight: 750; white-space: nowrap; }
.chrome-extension-banner-link:hover { color: #fff; }
.chrome-extension-banner-close { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.chrome-extension-banner-close:hover { background: var(--panel-2); color: #fff; }
@media (max-width: 900px) { .recommend-chrome-extension #chrome-extension-banner { display: none; } }

/* ---------- Hero / page heads ---------- */
.hero { padding: 5.5rem 0 5rem; background: radial-gradient(1200px 500px at 80% -10%, rgba(45, 212, 191, .16), transparent 60%), radial-gradient(800px 400px at 10% 110%, rgba(125, 211, 252, .10), transparent 60%); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom: 1rem; }
.hero .deck { font-size: 1.12rem; color: var(--soft); }
.hero-art img { border-radius: var(--radius-lg); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.hero-proof { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.4rem; font-size: .84rem; color: var(--muted); }
.hero-proof span { display: inline-flex; align-items: center; gap: .35rem; }
.hero-proof svg { color: var(--accent); }
.page-hero { padding: .8rem 0 3.5rem; background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 3rem; align-items: center; margin-top: 1.6rem; }
.page-hero-grid-llm { align-items: start; }
.page-hero-grid.no-art { grid-template-columns: 1fr; }
.page-hero-copy .deck { font-size: 1.08rem; }
.page-hero-art img { border-radius: var(--radius-lg); border: 1px solid var(--line-2); }
.tool-visual { --scene: 45, 212, 191; position: relative; display: block; overflow: hidden; color: rgb(var(--scene)); background: var(--bg-2); isolation: isolate; }
.tool-scene-active { --scene: 248, 113, 113; }
.tool-scene-browser { --scene: 125, 211, 252; }
.tool-scene-file { --scene: 245, 158, 11; }
.tool-scene-privacy { --scene: 167, 139, 250; }
.tool-visual-illustration { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tool-visual-hero { min-height: 20rem; border: 1px solid var(--line-2); border-radius: var(--radius-lg); }
.tool-card:hover .tool-visual-illustration, .tool-card:focus-within .tool-visual-illustration { transform: scale(1.025); }
@media (min-width: 901px) {
  .hero-grid > .hero-art { align-self: start; transform: translateY(-2.25rem); }
  .page-hero-grid-website > .page-hero-art { align-self: start; transform: translateY(-1.35rem); }
  .page-hero-grid-top { align-items: start; }
}
.page-hero.compact { padding: .8rem 0 1.8rem; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); min-height: 1.6rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--soft); }

/* ---------- Scan form ---------- */
.scan-form { display: flex; gap: .6rem; margin-top: 1.4rem; }
.scan-form .field { flex: 1; display: flex; align-items: center; gap: .6rem; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 0 .9rem; min-height: 54px; color: var(--muted); }
.scan-form .field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, .18); }
.scan-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font-size: 1.05rem; outline: 0; }
.scan-form input::placeholder { color: var(--faint); }
.scan-form .btn { min-height: 54px; padding: 0 1.5rem; }
.field-select { flex: 0 1 18rem; cursor: pointer; }
/* The native control and the custom one that replaces it on load are given
   the same box, so swapping them cannot move anything. A browser's default
   select metrics differ from a flex row of text plus a chevron, and the swap
   happens after first paint. */
.field-select select { flex: 1; width: 100%; min-width: 0; height: 100%; min-height: 2.1rem; border: 0; background: transparent; color: #fff; font-size: .92rem; outline: 0; padding: .3rem 0; cursor: pointer; }
.field-select select option { background: var(--panel); color: #fff; }
/* The list we draw instead of the OS one. The <select> is still the value:
   it is taken out of the layout rather than removed, so form behaviour and
   the label association survive. */
.field-select { position: relative; }
.field-select.is-enhanced > select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.xsel { flex: 1; min-width: 0; }
.xsel-btn { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.1rem; padding: .3rem 0; color: #fff; font-size: .92rem; font-weight: 650; cursor: pointer; }
.xsel-btn:focus { outline: 0; }
.xsel-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xsel-note { color: var(--muted); font-style: normal; font-weight: 400; }
.xsel-btn > svg { flex: 0 0 auto; color: var(--muted); transition: transform .15s; }
.xsel.open .xsel-btn > svg { transform: rotate(180deg); color: var(--accent); }
.xsel-pop { position: absolute; z-index: 60; top: calc(100% + 8px); left: -1px; right: -1px; min-width: 17rem; max-height: 19rem; overflow-y: auto; padding: .35rem; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); }
.xsel-opt { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .55rem .6rem; border-radius: 8px; color: var(--soft); cursor: pointer; }
.xsel-opt.active { background: var(--panel-3); color: #fff; }
.xsel-check { display: grid; place-items: center; color: var(--accent); opacity: 0; }
.xsel-opt[aria-selected="true"] .xsel-check { opacity: 1; }
.xsel-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.xsel-text strong { font-size: .91rem; font-weight: 650; color: inherit; }
.xsel-opt.active .xsel-text strong { color: #fff; }
.xsel-text small { font-size: .76rem; color: var(--muted); }
.xsel-tag { display: inline-flex; align-items: center; gap: .28rem; padding: .2rem .45rem; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.xsel-opt.is-locked .xsel-text strong { color: var(--muted); }
.xsel-opt.is-locked.active .xsel-text strong { color: var(--soft); }
.scan-note { font-size: .8rem; color: var(--muted); margin-top: .7rem; }
.scan-authority { display: flex; align-items: flex-start; gap: .55rem; width: fit-content; margin-top: .8rem; color: var(--text); font-size: .88rem; line-height: 1.45; cursor: pointer; }
.scan-authority input { width: 1rem; height: 1rem; margin-top: .12rem; accent-color: var(--accent); }
.scan-authority.is-invalid { color: #fca5a5; }
.scan-authority.is-invalid input { outline: 2px solid #ef4444; outline-offset: 2px; border-radius: 3px; box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
.llm-advanced { margin-top: .85rem; max-width: 760px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.llm-advanced summary { padding: .8rem 1rem; color: var(--soft); font-size: .88rem; font-weight: 700; cursor: pointer; }
.llm-advanced summary svg { margin-right: .35rem; vertical-align: -.2rem; color: var(--accent); }
.llm-advanced[open] summary { border-bottom: 1px solid var(--line); }
.llm-auth-grid { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: .8rem; padding: 1rem 1rem .45rem; }
.llm-auth-grid label { display: grid; gap: .35rem; font-size: .78rem; color: var(--muted); }
.llm-auth-grid input, .llm-auth-grid select, .llm-bulk textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); padding: .7rem .8rem; font: inherit; }
.llm-advanced > p { margin: .2rem 1rem 1rem; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.llm-local-audit { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .85rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.llm-local-audit > div:first-child { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; color: var(--accent); background: rgba(45,212,191,.1); }
.llm-local-audit strong { color: #fff; font-size: .9rem; }
.llm-local-audit p { margin: .15rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.llm-local-locked { border-color: rgba(216,163,44,.32); background: linear-gradient(120deg, rgba(216,163,44,.06), transparent 55%); }
.local-audit-card h2 { margin-top: .8rem; }
.local-audit-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.25rem; }
.local-audit-selection { margin: .75rem 0 0; color: var(--muted); font-size: .85rem; }
.local-audit-results { margin-top: 1.25rem; padding: 1.15rem 1.25rem; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); }
.local-audit-results h2 { margin: 0 0 .25rem; font-size: 1.2rem; }
.local-audit-results > p { margin: .25rem 0 0; font-size: .86rem; }
.local-audit-clean { border-color: rgba(34,197,94,.42); background: rgba(34,197,94,.07); }
.local-audit-found { border-color: rgba(251,113,133,.5); background: rgba(251,113,133,.07); }
.local-finding-list { display: grid; gap: .45rem; margin: .85rem 0; }
.local-finding { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .7rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.14); font: .8rem/1.4 var(--mono); }
.local-finding strong { overflow-wrap: anywhere; }
.local-finding span { color: var(--soft); }
.local-privacy-note strong { display: block; margin-bottom: .3rem; }
.local-cli { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.local-cli summary { padding: 1rem 1.15rem; color: #fff; font-weight: 700; cursor: pointer; }
.local-cli > div { padding: 0 1.15rem 1.15rem; border-top: 1px solid var(--line); }
.local-cli > div > p:first-child { margin-top: 1rem; }
.local-cli h3 { margin: 1.15rem 0 .45rem; font-size: 1rem; }
.local-cli pre { margin: 0; }
.llm-bulk { margin-top: 1.4rem; padding: 1.35rem; border: 1px solid rgba(45,212,191,.34); border-radius: 14px; background: linear-gradient(135deg, rgba(45,212,191,.09), transparent 60%), var(--panel); }
.llm-bulk h2 { margin: .55rem 0 .25rem; font-size: 1.25rem; }
.llm-bulk > p { margin: 0 0 .8rem; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.llm-bulk textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.llm-bulk .btn { margin-top: .75rem; }
.llm-bulk-status { margin-top: 1rem; }
.llm-bulk-results { display: grid; gap: .45rem; margin-top: .55rem; }
.llm-bulk-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: .8rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 9px; font-size: .82rem; background: rgba(0,0,0,.12); }
.llm-bulk-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llm-bulk-row.is-clean strong { color: var(--good); }
.llm-bulk-row.has-findings strong { color: var(--bad); }
.llm-bulk-row a { color: var(--accent); font-weight: 700; }
.llm-bulk-upsell { margin-top: 1.4rem; }
.llm-answer { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1rem; align-items: start; margin: 1.25rem 0; padding: 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.llm-answer > span { min-width: 4.5rem; padding: .45rem .65rem; border-radius: 9px; color: #fff; font-size: 1.35rem; font-weight: 900; text-align: center; letter-spacing: .06em; }
.llm-answer-yes { border-color: rgba(248,113,113,.48); background: linear-gradient(135deg, rgba(248,113,113,.1), transparent 55%), var(--panel); }
.llm-answer-no { border-color: rgba(52,211,153,.42); background: linear-gradient(135deg, rgba(52,211,153,.09), transparent 55%), var(--panel); }
.llm-answer-yes > span { background: var(--bad); }
.llm-answer-no > span { background: var(--good); }
.llm-answer strong { display: block; font-size: 1.08rem; }
.llm-answer p { margin: .3rem 0 .75rem; color: var(--soft); font-size: .9rem; line-height: 1.5; }
@media (max-width: 720px) {
  .llm-auth-grid { grid-template-columns: 1fr; }
  .llm-local-audit { grid-template-columns: auto minmax(0,1fr); }
  .llm-local-audit .btn { grid-column: 1 / -1; width: 100%; }
  .llm-bulk-row { grid-template-columns: 1fr auto; }
  .llm-bulk-row a { grid-column: 1 / -1; }
  .local-finding { grid-template-columns: 1fr; gap: .15rem; }
}
.scan-error { margin-top: .9rem; padding: .8rem 1rem; border-radius: 8px; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .4); color: #fecaca; font-size: .9rem; }
.scan-progress { margin-top: 1.4rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); }
.scan-progress > strong { display: inline-block; }
.sp-eta { float: right; font-family: var(--mono); font-size: .8rem; color: var(--accent); }
.scan-progress-bar { height: 6px; border-radius: 4px; background: var(--panel-3); overflow: hidden; margin-top: .8rem; }
.scan-progress-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; transition: width .25s linear; }
.scan-progress.overrun .scan-progress-bar i { animation: pulsebar 1.2s ease-in-out infinite; }
.scan-progress.overrun .sp-eta { color: var(--warn); }
@keyframes pulsebar { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.sp-now { margin: .8rem 0 0; font-size: .86rem; color: var(--soft); }
.scan-progress-steps { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .7rem; font-size: .78rem; color: var(--faint); }
.scan-progress-steps span.done { color: var(--accent); }
.scan-progress-steps span.active { color: #fff; font-weight: 650; }
.file-form { margin-top: 1.4rem; display: grid; gap: .9rem; justify-items: start; }
.file-form .result-actions { margin-top: 0; }
.dropzone { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.1rem; width: 100%; border: 2px dashed var(--line-2); border-radius: 14px; background: var(--panel); padding: 1.3rem 1.5rem; color: var(--muted); transition: border-color .15s, background .15s; cursor: pointer; }
.dropzone.over, .dropzone:hover { border-color: var(--accent); background: var(--panel-2); }
.dropzone-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--panel-3); border: 1px solid var(--line-2); color: var(--accent); }
.dropzone-copy { display: block; min-width: 0; }
.dropzone strong { display: block; color: #fff; font-size: 1.02rem; margin-bottom: .2rem; }
.dropzone-hint { display: block; font-size: .85rem; line-height: 1.5; color: var(--muted); }
.dropzone input { display: none; }
.dropzone-file { display: block; margin-top: .55rem; font-family: var(--mono); font-size: .8rem; color: var(--accent-2); word-break: break-all; }
.dropzone-file:empty { display: none; }

/* ---------- Hero scan chooser (tabs -> the tool that runs the scan) ---------- */
.scan-chooser { margin-top: 1.5rem; border: 1px solid var(--line-2); border-radius: 16px; background: rgba(17, 26, 44, .72); box-shadow: var(--shadow); overflow: hidden; }
/* One row, always: the tabs scroll sideways rather than wrapping onto a
   second line and pushing the form down. */
.scan-tablist { display: flex; flex-wrap: nowrap; gap: .15rem; padding: .4rem .4rem 0; border-bottom: 1px solid var(--line); background: var(--panel-2); overflow-x: auto; scrollbar-width: none; }
.scan-tablist::-webkit-scrollbar { display: none; }
.scan-tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .38rem; padding: .6rem .7rem; white-space: nowrap; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; background: transparent; color: var(--muted); font-size: .85rem; font-weight: 650; line-height: 1; }
.scan-tab svg { color: currentColor; }
.scan-tab:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.scan-tab[aria-selected="true"] { color: #fff; background: var(--panel); border-color: var(--line-2); }
/* The accent marker is its own straight bar: an inset shadow would follow
   the rounded top corners and curve down at both ends. */
.scan-tab[aria-selected="true"]::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: var(--accent); border-radius: 0; }
.scan-pane { padding: 1.4rem 1.5rem 1.5rem; }
.scan-pane .scan-form { margin-top: 0; }
.scan-pane .scan-note { margin-bottom: 0; }
.btn-wide { min-height: 54px; padding: 0 1.6rem; }

/* ---------- Activity feed ---------- */
.activity-panel { border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); overflow: hidden; }
.activity-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.activity-stats .stat { border: 0; border-radius: 0; background: var(--panel-2); }
.activity-feed { display: block; }
.activity-head, .activity-row { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(0, 2fr) minmax(130px, 1fr) minmax(90px, .8fr) minmax(80px, .6fr); gap: 1rem; align-items: center; padding: .85rem 1.6rem; }
.activity-head { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.activity-row { border-bottom: 1px solid var(--line); font-size: .87rem; color: var(--soft); }
.activity-row:last-child { border-bottom: 0; }
.activity-what { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; }
.activity-what i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); }
.activity-target, .activity-ip { font-family: var(--mono); font-size: .82rem; color: var(--accent-2); word-break: break-all; letter-spacing: .02em; }
.activity-ip { color: var(--muted); }
.activity-outcome { font-size: .8rem; font-weight: 700; color: var(--soft); text-transform: uppercase; letter-spacing: .04em; }
.activity-ago { font-size: .8rem; color: var(--faint); text-align: right; }
.activity-empty { padding: 1.6rem 1.2rem; color: var(--muted); font-size: .9rem; }
.activity-note { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: 1rem 1.6rem; font-size: .8rem; line-height: 1.55; color: var(--muted); background: var(--bg-2); border-top: 1px solid var(--line); }
.activity-note svg { flex: none; margin-top: .2rem; color: var(--accent); }
.dot-website { background: #2dd4bf; } .dot-wordpress { background: #7dd3fc; } .dot-ssl { background: #a78bfa; }
.dot-headers { background: #60a5fa; } .dot-email { background: #f59e0b; } .dot-js { background: #34d399; }
.dot-phishing { background: #fb7185; } .dot-file { background: #f97316; } .dot-extension { background: #c084fc; }
.dot-browser { background: #38bdf8; }
.dot-technology { background: #22d3ee; } .dot-centrality { background: #a78bfa; }

/* ---------- Technology and Common Crawl intelligence results ---------- */
.intel-result { margin: 1.25rem 0 2rem; border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; background: var(--panel); }
.intel-result-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.6rem; border-bottom: 1px solid var(--line); }
.intel-kicker { margin: 0 0 .35rem !important; color: var(--accent) !important; font-size: .74rem !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.intel-result-head h2 { margin: 0 0 .45rem; font-size: clamp(1.3rem, 2.4vw, 2rem); }
.intel-result-head p:last-child { margin: 0; color: var(--muted); max-width: 780px; line-height: 1.55; }
.intel-score { min-width: 150px; padding: 1rem 1.2rem; border: 1px solid rgba(45, 212, 191, .35); border-radius: 14px; background: rgba(45, 212, 191, .07); text-align: center; }
.intel-score strong { display: block; color: #fff; font: 800 clamp(1.45rem, 3vw, 2.2rem) var(--font); }
.intel-score span { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.intel-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.intel-metrics-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.intel-metrics > div { min-width: 0; padding: 1rem 1.2rem; border-right: 1px solid var(--line); }
.intel-metrics > div:last-child { border-right: 0; }
.intel-metrics span { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .73rem; letter-spacing: .04em; text-transform: uppercase; }
.intel-metrics strong { color: #fff; font-size: 1rem; overflow-wrap: anywhere; }
.tech-groups { display: grid; gap: 1rem; padding: 1.3rem; }
.tech-group { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel-2); }
.tech-group-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.tech-group-head h3 { margin: 0; font-size: .86rem; }
.tech-group-head span { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 6px; background: var(--panel-3); color: var(--accent); font-size: .74rem; font-weight: 800; }
.tech-hit { padding: .9rem 1rem; }
.tech-hit + .tech-hit { border-top: 1px solid var(--line); }
.tech-hit-title { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.tech-hit-title strong { color: #fff; }
.tech-hit-title code { color: var(--accent-2); }
.tech-hit-title span { margin-left: auto; color: #86efac; font-size: .75rem; font-weight: 700; }
.tech-hit > p { margin: .45rem 0 0; color: var(--soft); font-size: .86rem; line-height: 1.55; }
.tech-hit ul { display: grid; gap: .35rem; margin: .65rem 0 0; padding: 0; list-style: none; }
.tech-hit li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: .65rem; color: var(--muted); font-size: .8rem; }
.tech-hit li b { color: var(--soft); font-weight: 650; }
.tech-hit li code { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.intel-empty { margin: 1.3rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.intel-empty h3 { margin: 0 0 .4rem; }
.intel-empty p { margin: 0; color: var(--muted); line-height: 1.6; }
.intel-explain { padding: 1.3rem; }
.intel-explain article { padding: 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.intel-explain h3 { margin: 0 0 .4rem; font-size: .95rem; }
.intel-explain p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.intel-source { padding: .9rem 1.3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; line-height: 1.55; }
.intel-source strong { color: var(--soft); }
.intel-actions { padding: 0 1.3rem 1.3rem; }

/* ---------- Technology stack page and deeper result ---------- */
.tech-result-summary { color: #fff !important; font-weight: 650; }
.tech-result-section { padding: 1.35rem; border-top: 1px solid var(--line); }
.tech-section-head { margin-bottom: 1rem; }
.tech-section-head h3 { margin: 0 0 .35rem; font-size: 1.12rem; }
.tech-section-head p { max-width: 820px; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.tech-section-title { display: flex; align-items: flex-start; gap: .75rem; }
.tech-section-title > i, .tech-page-icon { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid rgba(45, 212, 191, .28); border-radius: 10px; background: rgba(45, 212, 191, .08); color: var(--accent); font-style: normal; }
.tech-section-title > div { min-width: 0; }
.tech-metrics > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; align-items: center; }
.tech-metrics > div > i { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: rgba(45, 212, 191, .08); color: var(--accent); font-style: normal; }
.tech-metrics > div > span, .tech-metrics > div > strong { margin: 0; }
.tech-result-section .tech-groups { padding: 0; }
.tech-group-head h4 { margin: 0; font-size: .86rem; }
.tech-proof { margin-top: .65rem; }
.tech-proof summary, .tech-records summary, .tech-redirect-list details summary { color: var(--accent-2); cursor: pointer; font-size: .79rem; font-weight: 700; }
.tech-confidence { margin: .6rem 0 0 !important; color: var(--muted) !important; font-size: .76rem !important; }
.tech-redirect-list { display: grid; gap: .65rem; }
.tech-redirect-list article { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.tech-redirect-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tech-redirect-list article > div strong { min-width: 0; overflow-wrap: anywhere; font: 700 .82rem var(--mono); color: #fff; }
.tech-redirect-list article > div span { flex: none; color: var(--accent); font-weight: 800; }
.tech-redirect-list article > p { margin: .4rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.tech-redirect-list .tech-bad { color: #fca5a5; }
.tech-redirect-list ol { display: grid; gap: .3rem; margin: .55rem 0 0; padding-left: 1.25rem; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.tech-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.tech-two-col > div { min-width: 0; }
.tech-simple-list { display: grid; gap: .5rem; }
.tech-simple-list p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .72rem .8rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); font-size: .8rem; }
.tech-simple-list span, .tech-simple-list code { color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.tech-muted { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.tech-records { margin-top: .8rem; }
.tech-records > div { display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: .65rem; padding: .55rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.tech-records > div code { overflow-wrap: anywhere; white-space: normal; }
.tech-chip-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.tech-chip-list span { padding: .45rem .65rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel-2); color: var(--soft); font-size: .76rem; }
.tech-host-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.tech-host-list code { padding: .25rem; }
.tech-history > p { margin: 0; color: var(--soft); font-size: .86rem; line-height: 1.6; }
.tech-result-table-wrap, .tech-redirect-table-wrap, .tech-mini-table { margin: 0; border-radius: 12px; }
.tech-result-table { min-width: 900px; table-layout: fixed; }
.tech-result-table th:nth-child(1) { width: 18%; }
.tech-result-table th:nth-child(2) { width: 15%; }
.tech-result-table th:nth-child(3) { width: 39%; }
.tech-result-table th:nth-child(4) { width: 14%; }
.tech-result-table th:nth-child(5) { width: 14%; }
.tech-result-table td { vertical-align: middle; font-size: .8rem; line-height: 1.45; }
.tech-table-name { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.tech-table-name > i { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: rgba(45, 212, 191, .08); color: var(--accent); font-style: normal; }
.tech-table-name strong { color: #fff; overflow-wrap: anywhere; }
.tech-na { color: var(--faint); }
.tech-match, .tech-status { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: .25rem .45rem; border-radius: 999px; background: rgba(34, 197, 94, .1); color: #86efac; font-size: .7rem; font-weight: 800; }
.tech-match-likely { background: rgba(96, 165, 250, .1); color: #93c5fd; }
.tech-status-bad { background: rgba(248, 113, 113, .1); color: #fca5a5; }
.tech-evidence-list { margin-top: 1rem; }
.tech-evidence-list > summary { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-2); cursor: pointer; font-size: .8rem; font-weight: 750; }
.tech-evidence-list[open] > summary { margin-bottom: 1rem; }
.tech-group-head h4 { display: inline-flex; align-items: center; gap: .45rem; }
.tech-group-head h4 svg { color: var(--accent); }
.tech-redirect-table { min-width: 860px; }
.tech-redirect-table td { vertical-align: middle; font-size: .78rem; }
.tech-redirect-table td code { overflow-wrap: anywhere; white-space: normal; }
.tech-secure, .tech-insecure { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 750; white-space: nowrap; }
.tech-secure { color: #86efac; }
.tech-insecure { color: #fca5a5; }
.tech-mini-table .data-table { min-width: 480px; }
.tech-mini-table .data-table td { vertical-align: middle; font-size: .78rem; }

.tech-page-intro, .tech-page-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 1.2rem; align-items: stretch; }
.tech-page-intro > .prose, .tech-page-callout, .tech-page-grid article, .tech-page-split > .prose, .tech-use-grid article, .tech-limit-card { padding: 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.tech-page-intro > .prose p:last-child, .tech-page-split > .prose p:last-child, .tech-limit-card p:last-child { margin-bottom: 0; }
.tech-page-callout { border-color: rgba(45, 212, 191, .35); background: linear-gradient(145deg, rgba(45, 212, 191, .09), transparent 65%), var(--panel); }
.tech-page-callout > strong { display: block; margin-bottom: .75rem; color: #fff; font-size: 1rem; }
.tech-page-callout p { margin: .6rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.tech-page-callout b { color: var(--accent); }
.tech-page-grid article, .tech-use-grid article { height: 100%; }
.tech-page-icon { margin-bottom: .8rem; }
.tech-page-grid h3, .tech-use-grid h3 { margin-bottom: .4rem; font-size: 1rem; }
.tech-page-grid p, .tech-use-grid p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.58; }
.tech-signal-table { margin: 0; border-radius: 14px; }
.tech-signal-table .data-table { min-width: 760px; }
.tech-page-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tech-page-split h2 { font-size: 1.25rem; }
.tech-limit-card { border-color: rgba(245, 158, 11, .3); background: linear-gradient(135deg, rgba(245, 158, 11, .06), transparent 60%), var(--panel); }
.tech-limit-card h2 { margin-bottom: .55rem; }
.tech-limit-card p { color: var(--muted); }

/* ---------- LLM API key scanner explanation ---------- */
.llm-explainer-grid, .llm-action-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 1.2rem; align-items: stretch; }
.llm-explainer-copy, .llm-server-rule, .llm-list-card { padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.llm-explainer-copy p:last-child { margin-bottom: 0; }
.llm-server-rule { display: flex; flex-direction: column; justify-content: center; border-color: rgba(45, 212, 191, .34); background: linear-gradient(145deg, rgba(45, 212, 191, .08), transparent 62%), var(--panel); }
.llm-rule-path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; margin-bottom: 1.1rem; }
.llm-rule-path > span { display: grid; justify-items: center; gap: .42rem; min-width: 0; padding: .7rem .35rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--accent); text-align: center; }
.llm-rule-path > span b { color: var(--soft); font-size: .73rem; line-height: 1.2; }
.llm-rule-path > i { color: var(--muted); }
.llm-server-rule > strong { color: #fff; font-size: 1.03rem; }
.llm-server-rule > p { margin: .45rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.llm-scan-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.llm-scan-map > li { position: relative; min-width: 0; padding: 1.25rem 1.2rem 1.35rem; border: 1px solid var(--line); border-top-color: rgba(45, 212, 191, .52); border-radius: 14px; background: linear-gradient(145deg, rgba(45, 212, 191, .055), transparent 48%), var(--panel); }
.llm-map-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: .8rem; border: 1px solid rgba(45, 212, 191, .3); border-radius: 11px; background: rgba(45, 212, 191, .08); color: var(--accent); }
.llm-scan-map h3 { margin-bottom: .42rem; font-size: .98rem; }
.llm-scan-map p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.58; }
.llm-coverage-table, .llm-provider-table, .llm-plan-table { margin: 0; border-radius: 14px; }
.llm-coverage-table .data-table { min-width: 920px; }
.llm-provider-table .data-table { min-width: 760px; }
.llm-plan-table .data-table { min-width: 680px; }
.llm-coverage-table .data-table th:first-child, .llm-provider-table .data-table th:first-child, .llm-plan-table .data-table th:first-child { width: 20%; }
.llm-table-yes { color: #86efac; font-weight: 750; }
.llm-table-note { margin: .9rem 0 0; padding: .85rem 1rem; border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; background: rgba(45, 212, 191, .07); color: var(--soft); font-size: .86rem; line-height: 1.55; }
.llm-verdict-grid { align-items: stretch; }
.llm-verdict-card { height: 100%; padding: 1.25rem 1.3rem 1.35rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.llm-verdict-card > span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: .85rem; border-radius: 11px; }
.llm-verdict-card h3 { margin-bottom: .4rem; font-size: 1rem; }
.llm-verdict-card p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.llm-verdict-alert { border-top-color: rgba(248, 113, 113, .58); }
.llm-verdict-alert > span { background: rgba(248, 113, 113, .1); color: #fca5a5; }
.llm-verdict-clean { border-top-color: rgba(74, 222, 128, .5); }
.llm-verdict-clean > span { background: rgba(74, 222, 128, .09); color: #86efac; }
.llm-verdict-scope { border-top-color: rgba(96, 165, 250, .5); }
.llm-verdict-scope > span { background: rgba(96, 165, 250, .09); color: #93c5fd; }
.llm-list-card h2 { margin-bottom: .75rem; font-size: 1.25rem; }
.llm-list-card ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.llm-list-card li { position: relative; padding-left: 1.15rem; color: var(--soft); font-size: .86rem; line-height: 1.55; }
.llm-list-card li::before { content: ""; position: absolute; top: .6em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.llm-limit-card { border-color: rgba(245, 158, 11, .28); background: linear-gradient(135deg, rgba(245, 158, 11, .055), transparent 62%), var(--panel); }
.llm-limit-card li::before { background: #fbbf24; }
.llm-remediation-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.llm-remediation-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.llm-remediation-list li > span { padding-top: .18rem; color: var(--accent); font: 750 .76rem/1 var(--mono); letter-spacing: .08em; }
.llm-remediation-list h3 { margin-bottom: .22rem; font-size: .97rem; }
.llm-remediation-list p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }

/* ---------- Shared in-depth tool explanations ---------- */
.tool-detail-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 1.2rem; align-items: stretch; }
.tool-detail-copy, .tool-detail-flow, .tool-outcome-card, .tool-detail-lists > article { padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.tool-detail-copy p:last-child { margin-bottom: 0; }
.tool-detail-flow { display: flex; flex-direction: column; justify-content: center; border-color: rgba(45, 212, 191, .34); background: linear-gradient(145deg, rgba(45, 212, 191, .075), transparent 64%), var(--panel); }
.tool-flow-node { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; }
.tool-flow-node > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(45, 212, 191, .3); border-radius: 11px; background: rgba(45, 212, 191, .08); color: var(--accent); }
.tool-flow-node b, .tool-flow-node small { display: block; }
.tool-flow-node b { color: #fff; font-size: .9rem; }
.tool-flow-node small { margin-top: .18rem; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.tool-flow-arrow { display: grid; place-items: center; width: 42px; height: 30px; color: var(--muted); }
.tool-detail-table { margin: 0; border-radius: 14px; }
.tool-detail-table .data-table { min-width: 760px; }
.tool-detail-table .data-table th:first-child { width: 20%; }
.tool-outcome-grid { align-items: stretch; }
.tool-outcome-card { height: 100%; border-top-width: 2px; }
.tool-outcome-card > span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .8rem; border-radius: 10px; }
.tool-outcome-card h3 { margin-bottom: .4rem; font-size: 1rem; }
.tool-outcome-card p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.tool-outcome-card.is-good { border-top-color: rgba(74, 222, 128, .58); }
.tool-outcome-card.is-good > span { color: #86efac; background: rgba(74, 222, 128, .09); }
.tool-outcome-card.is-alert { border-top-color: rgba(248, 113, 113, .58); }
.tool-outcome-card.is-alert > span { color: #fca5a5; background: rgba(248, 113, 113, .09); }
.tool-outcome-card.is-info { border-top-color: rgba(96, 165, 250, .58); }
.tool-outcome-card.is-info > span { color: #93c5fd; background: rgba(96, 165, 250, .09); }
.tool-detail-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; }
.tool-detail-lists h2 { margin-bottom: .75rem; font-size: 1.25rem; }
.tool-detail-lists ul, .active-limit-list { display: grid; gap: .68rem; margin: 0; padding: 0; list-style: none; }
.tool-detail-lists li, .active-limit-list li { position: relative; padding-left: 1.15rem; color: var(--soft); font-size: .86rem; line-height: 1.55; }
.tool-detail-lists li::before, .active-limit-list li::before { content: ""; position: absolute; top: .62em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tool-detail-lists .tool-boundary-card { border-color: rgba(245, 158, 11, .28); background: linear-gradient(135deg, rgba(245, 158, 11, .055), transparent 62%), var(--panel); }
.tool-boundary-card li::before { background: #fbbf24; }
.active-limit-list { margin-bottom: 1rem; }
.active-coverage-table { margin: 0; border-radius: 14px; }
.active-coverage-table .data-table { min-width: 660px; }
.active-coverage-table .data-table th:first-child { width: 28%; }

@media (max-width: 900px) {
  .llm-scan-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .llm-explainer-grid, .llm-action-grid { grid-template-columns: 1fr; }
  .llm-scan-map { grid-template-columns: 1fr; }
  .llm-rule-path { grid-template-columns: 1fr; }
  .llm-rule-path > i { transform: rotate(90deg); justify-self: center; }
  .tool-detail-intro, .tool-detail-lists { grid-template-columns: 1fr; }
}

/* ---------- Common Crawl rank checker explanation ---------- */
.cc-definition-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 1.2rem; align-items: stretch; }
.cc-definition-copy, .cc-formula, .cc-field-card, .cc-source-card, .cc-limit-grid article, .cc-actions-card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.cc-definition-copy { padding: 1.3rem 1.4rem; }
.cc-definition-copy p:last-child { margin-bottom: 0; }
.cc-formula { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; min-height: 210px; padding: 1.4rem; background: radial-gradient(circle at 50% 30%, rgba(45, 212, 191, .12), transparent 60%), var(--panel); color: #fff; font-family: var(--serif); font-size: clamp(1.3rem, 2.5vw, 2rem); }
.cc-formula > strong { color: var(--accent); font-size: 2.6em; font-weight: 400; line-height: .8; }
.cc-fraction { display: inline-grid; grid-template-rows: auto auto; text-align: center; line-height: 1.15; }
.cc-fraction b { padding: 0 .65rem .18rem; border-bottom: 2px solid var(--soft); }
.cc-fraction i { padding-top: .18rem; font-style: italic; }
.cc-formula small { flex-basis: 100%; color: var(--muted); font: .76rem/1.4 var(--font); text-align: center; }
.cc-callout { display: flex; align-items: baseline; gap: .55rem; margin-top: 1rem; padding: .9rem 1rem; border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; background: rgba(45, 212, 191, .08); color: var(--soft); font-size: .9rem; }
.cc-field-grid { align-items: stretch; }
.cc-field-card { position: relative; height: 100%; padding: 1.3rem 1.35rem 1.4rem; overflow: hidden; border-top-color: rgba(45, 212, 191, .52); background: linear-gradient(145deg, rgba(45, 212, 191, .055), transparent 48%), var(--panel); }
.sequence-marker { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.05rem; }
.sequence-marker span { flex: none; color: var(--accent); font: 750 .76rem/1 var(--mono); letter-spacing: .08em; }
.sequence-marker i { width: 100%; height: 1px; background: linear-gradient(90deg, rgba(45, 212, 191, .42), transparent); }
.cc-field-card h3 { margin-bottom: .45rem; color: #fff; font-size: 1.03rem; }
.cc-field-card p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.62; }
.cc-compare-table { margin: 0; border-radius: 14px; }
.cc-compare-table .data-table { min-width: 760px; }
.cc-compare-table .data-table th:first-child { width: 18%; }
.cc-source-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.4rem 1.5rem; border-color: rgba(45, 212, 191, .35); background: linear-gradient(135deg, rgba(45, 212, 191, .08), transparent 55%), var(--panel); }
.cc-source-card h2 { margin-bottom: .4rem; }
.cc-source-card p { margin: 0; color: var(--soft); }
.cc-source-label { margin: 0 0 .35rem !important; color: var(--accent) !important; font-size: .7rem !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cc-limit-grid { margin-top: 1rem; }
.cc-limit-grid article { height: 100%; padding: 1rem 1.1rem; }
.cc-limit-grid h3 { margin-bottom: .35rem; font-size: .95rem; }
.cc-limit-grid p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.cc-seo-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: 1.2rem; align-items: stretch; }
.cc-seo-grid > .prose { padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.cc-seo-grid > .prose p:last-child { margin-bottom: 0; }
.cc-actions-card { padding: 1.3rem 1.4rem; }
.cc-actions-card h3 { margin-bottom: .7rem; font-size: 1.05rem; }
.cc-actions-card ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.cc-actions-card li { position: relative; padding-left: 1.15rem; color: var(--soft); font-size: .86rem; line-height: 1.5; }
.cc-actions-card li::before { content: ""; position: absolute; top: .62em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

@media (max-width: 720px) {
  .intel-result-head { grid-template-columns: 1fr; padding: 1.2rem; }
  .intel-score { min-width: 0; width: 100%; }
  .intel-metrics, .intel-metrics-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intel-metrics > div:nth-child(2n) { border-right: 0; }
  .intel-metrics > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tech-hit li { grid-template-columns: 1fr; gap: .15rem; }
  .tech-hit-title span { width: 100%; margin-left: 0; }
  .cc-definition-grid, .cc-source-card, .cc-seo-grid { grid-template-columns: 1fr; }
  .cc-source-card .btn { width: 100%; }
  .cc-callout { display: grid; gap: .2rem; }
  .tech-two-col, .tech-page-intro, .tech-page-split { grid-template-columns: 1fr; }
  .tech-hit-title span { margin-left: 0; }
  .tech-hit li { grid-template-columns: 1fr; gap: .15rem; }
  .tech-simple-list p { display: grid; gap: .25rem; }
  .tech-simple-list span, .tech-simple-list code { text-align: left; }
  .tech-host-list { grid-template-columns: 1fr !important; }
}

/* ---------- Result summary (the whole scan before the detail) ---------- */
.result-summary { margin-top: 1.25rem; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); overflow: hidden; }
.rs-verdict { padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); }
.rs-verdict h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.rs-verdict p { margin: 0; color: var(--soft); font-size: .92rem; }
.rs-cats { display: flex; flex-wrap: wrap; gap: .4rem; padding: 1rem 1.6rem; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.rs-cat { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); font-size: .78rem; color: var(--muted); }
.rs-cat i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rs-cat b { color: var(--soft); font-family: var(--mono); font-size: .74rem; }
.rs-cat.has-fail { border-color: rgba(239, 68, 68, .4); color: var(--soft); }
.rs-filter-note { margin: 0; padding: .7rem 1.6rem; border-bottom: 1px solid var(--line); background: var(--panel-2); font-size: .84rem; color: var(--accent-2); }
.rs-fix { padding: 1.3rem 1.6rem 1.5rem; }
.rs-tier + .rs-tier { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.rs-fix h4, .rs-tier h4 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .2rem; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.rs-tier h4 span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: var(--radius-sm); background: var(--panel-3); color: var(--soft); font-size: .7rem; letter-spacing: 0; }
.rs-tier:first-child h4 { color: #fca5a5; }
.rs-tier-note { margin: 0 0 .8rem; font-size: .84rem; color: var(--muted); }
.rs-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rs-actions li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.rs-item { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
details.rs-item { display: block; }
.rs-item > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .85rem .95rem; cursor: pointer; list-style: none; }
.rs-item > summary:hover { background: rgba(255, 255, 255, .02); }
.rs-item > summary::-webkit-details-marker { display: none; }
.rs-item > summary svg, .rs-chev { justify-self: end; color: var(--muted); font-size: .8rem; transition: transform .15s; }
.rs-item[open] > summary .rs-chev { transform: rotate(180deg); }
.rs-item[open] > summary svg { transform: rotate(180deg); }
.rs-item[open] > summary { border-bottom: 1px solid var(--line); }
.rs-item:hover { border-color: var(--line-2); }
.rs-item-body { padding: 1rem 1.1rem 1.1rem; }
.rs-item-body h5 { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .3rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rs-item-body h5:first-child { margin-top: 0; }
.rs-item-body p { margin: 0 0 .2rem; font-size: .9rem; color: var(--soft); }
.rs-item-body pre { margin: .4rem 0 .6rem; }
.rs-detail { color: var(--muted) !important; font-size: .86rem !important; }
.snippet { margin: .5rem 0 .8rem; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #070d19; }
.snippet-example { border-style: dashed; border-color: var(--line-2); }
.snippet-generated { border-color: rgba(45, 212, 191, .45); }
.snippet-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .45rem .6rem .45rem .8rem; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.snippet-head .snippet-copy { margin-left: auto; }
.snippet-kind { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .5rem; border-radius: 4px; font: 800 .64rem var(--font); letter-spacing: .1em; text-transform: uppercase; }
.snippet-example .snippet-kind { background: rgba(245, 158, 11, .16); color: #fcd34d; border: 1px solid rgba(245, 158, 11, .35); }
.snippet-generated .snippet-kind { background: rgba(45, 212, 191, .14); color: var(--accent); border: 1px solid rgba(45, 212, 191, .35); }
.snippet-foot { margin: 0; padding: .5rem .8rem .6rem; font-size: .76rem; color: var(--faint); background: var(--panel-2); border-top: 1px solid var(--line); }
.snippet-copy { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); color: var(--soft); font-size: .74rem; font-weight: 650; }
.snippet-copy:hover { border-color: var(--accent); color: #fff; }
.snippet pre { margin: 0; border: 0; border-radius: 0; }
.results-group-title h3 { margin: 0; font-size: .9rem; font-weight: 800; letter-spacing: .04em; color: #fff; }
.pill-copy { cursor: pointer; }
.pill-copy:hover, a.count-pill:hover { border-color: var(--accent); color: #fff; }
a.count-pill { text-decoration: none; }
.rs-cat { cursor: pointer; font: inherit; font-size: .78rem; }
.rs-cat.is-on { border-color: var(--accent); color: #fff; background: var(--panel-2); }
a.rs-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .8rem .9rem; color: var(--soft); }
a.rs-item:hover { border-color: var(--accent); color: var(--soft); }
.rs-jump { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 650; color: var(--accent); white-space: nowrap; }
.finding:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, .18); }
.fb-label { margin: 1rem 0 .3rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fb-label:first-child { margin-top: 0; }
.ca-bar { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: var(--panel-3); overflow: hidden; vertical-align: middle; margin-right: .5rem; }
.ca-bar-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.cert-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .8rem; margin-top: 1rem; }
.cert-action { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--soft); }
a.cert-action:hover { border-color: var(--accent); color: var(--soft); }
.cert-action-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--panel-3); color: var(--accent); }
.cert-action strong { display: block; color: #fff; font-size: .93rem; margin-bottom: .2rem; }
.cert-action span span { display: block; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.cert-watch { align-items: center; }
.cert-watch-fields { display: flex !important; gap: .5rem; margin-top: .7rem; }
.cert-watch-fields input { flex: 1; min-width: 0; padding: .5rem .7rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: #fff; font-size: .86rem; }
.cert-watch-fields input:focus { outline: 0; border-color: var(--accent); }
.cert-watch-consent { display: flex !important; align-items: flex-start; gap: .45rem; margin-top: .6rem; font-size: .78rem; color: var(--muted); line-height: 1.4; cursor: pointer; }
.cert-watch-consent input { margin-top: .15rem; accent-color: var(--accent); }
.cert-watch-note { margin-top: .6rem; font-size: .82rem; }
.cert-watch-note.is-good { color: #86efac; }
.cert-watch-note.is-bad { color: #fca5a5; }
.ev-list { display: grid; gap: .3rem; margin: 0 0 .9rem; }
.ev-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; padding: .4rem .6rem; border-radius: 6px; background: var(--panel-2); font-size: .82rem; }
.ev-row code, .ev-group code { background: none; border: 0; padding: 0; color: var(--accent-2); font-size: .8rem; }
.ev-pair .ev-arrow { color: var(--faint); display: inline-flex; }
.ev-tag { padding: .08rem .4rem; border-radius: 4px; background: var(--bg-2); color: var(--muted); font-size: .72rem; white-space: nowrap; }
.ev-chain { flex-basis: 100%; color: var(--faint); font-size: .74rem; font-family: var(--mono); }
.ev-group { display: grid; gap: .2rem; padding: .5rem .6rem; border-left: 2px solid var(--line-2); border-radius: 0 6px 6px 0; background: var(--panel-2); }
.ev-group-key { font-size: .74rem; color: var(--muted); }
.ev-key { margin: .6rem 0 .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.ev-count { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); }
.ev-scalar { display: grid; grid-template-columns: minmax(0, 12ch) minmax(0, 1fr); gap: .7rem; }
.ev-scalar .ev-key { margin: 0; }
.ai-prompt { margin: 1.2rem 0; border: 1px solid rgba(125, 211, 252, .35); border-radius: 12px; background: rgba(125, 211, 252, .06); overflow: hidden; }
.ai-prompt-head { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .8rem 1rem; }
.ai-prompt-head strong { color: #fff; font-size: .95rem; }
.ai-prompt-head .btn { margin-left: auto; }
/* The Premium marker is the gold crown everywhere it appears, so the badge
   on an upsell and the button in the header read as the same thing. */
.ai-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .5rem; border-radius: 4px; background: rgba(125, 211, 252, .16); border: 1px solid rgba(125, 211, 252, .4); color: var(--accent-2); font: 800 .64rem var(--font); letter-spacing: .09em; text-transform: uppercase; }
.ai-prompt-body > summary { display: flex; align-items: center; gap: .4rem; padding: .4rem 1rem .6rem; cursor: pointer; font-size: .82rem; color: var(--muted); list-style: none; }
.ai-prompt-body > summary::-webkit-details-marker { display: none; }
.ai-prompt-body[open] > summary svg { transform: rotate(180deg); }
.ai-prompt-body pre { margin: 0 1rem 1rem; max-height: 340px; overflow: auto; font-size: .78rem; }
.ai-prompt.is-locked pre { max-height: 190px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.ai-lock { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; margin: -.4rem 1rem 1rem; padding: 1rem 1.1rem; border: 1px dashed rgba(125, 211, 252, .45); border-radius: 10px; background: rgba(125, 211, 252, .07); }
.ai-lock svg { color: var(--accent-2); margin-top: .15rem; }
.ai-lock strong { display: block; color: #fff; margin-bottom: .25rem; font-size: .92rem; }
.ai-lock p { margin: 0 0 .8rem; font-size: .85rem; color: var(--soft); }
.ai-prompt-foot { margin: 0; padding: .7rem 1rem .9rem; font-size: .78rem; color: var(--faint); border-top: 1px solid var(--line); }
.rs-eg-label { display: inline-block; padding: .12rem .45rem; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel-3); font: 700 .66rem var(--mono); letter-spacing: .04em; text-transform: none; color: var(--accent-2); }
.kb-example pre { margin-top: .6rem; }
.rs-action-copy strong { display: block; color: #fff; font-size: .92rem; margin-bottom: .1rem; }
.rs-action-copy span { display: block; color: var(--soft); font-size: .86rem; }
.rs-action-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 650; color: var(--accent); white-space: nowrap; }
.fix-action { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; margin-top: .9rem; padding: .8rem 1rem; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: rgba(45, 212, 191, .08); font-size: .9rem; color: var(--soft); }
.fix-action svg { color: var(--accent); margin-top: .15rem; }
.fix-action strong { color: #fff; }
.fix-action em { display: block; margin-top: .25rem; font-style: normal; color: var(--muted); font-size: .86rem; }
.fix-action-lead { margin-top: 1.1rem; font-size: .95rem; }

/* ---------- Results ---------- */
.results { margin-top: 2rem; }
.restored-note { margin-bottom: 1rem; padding: .75rem 1.1rem; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--panel-2); color: var(--muted); font-size: .85rem; }
.result-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.4rem 1.6rem; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; }
.grade { width: 92px; height: 92px; border-radius: 20px; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; color: #06131a; }
.grade-Aplus, .grade-A { background: linear-gradient(135deg, #34d399, #2dd4bf); }
.grade-B { background: linear-gradient(135deg, #a3e635, #4ade80); }
.grade-C { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.grade-D { background: linear-gradient(135deg, #fb923c, #f97316); }
.grade-F { background: linear-gradient(135deg, #f87171, #ef4444); color: #fff; }
.grade-unknown { background: linear-gradient(135deg, #64748b, #475569); color: #e2e8f0; }
.coverage-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; margin-top: 1.25rem; padding: 1.1rem 1.3rem; border: 1px solid rgba(96, 165, 250, .4); border-radius: 12px; background: rgba(96, 165, 250, .08); }
.coverage-note svg { color: var(--info); margin-top: .1rem; }
.coverage-note strong { display: block; color: #bfdbfe; margin-bottom: .25rem; }
.coverage-note p { margin: 0; font-size: .88rem; color: var(--soft); line-height: 1.55; }
.scan-incomplete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; margin-top: 1.25rem; padding: 1.1rem 1.3rem; border: 1px solid rgba(245, 158, 11, .45); border-radius: 12px; background: rgba(245, 158, 11, .1); }
.scan-incomplete svg { color: var(--warn); margin-top: .1rem; }
.scan-incomplete strong { display: block; color: #fcd34d; margin-bottom: .25rem; }
.scan-incomplete p { margin: 0; font-size: .9rem; color: var(--soft); }
.grade-verdict-clean { background: linear-gradient(135deg, #34d399, #2dd4bf); }
.grade-verdict-suspicious { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.grade-verdict-malicious { background: linear-gradient(135deg, #f87171, #ef4444); color: #fff; }
.grade small { font-size: .95rem; font-weight: 700; }
.result-title { margin: 0 0 .2rem; font-size: 1.25rem; word-break: break-all; }
.result-sub { color: var(--muted); font-size: .85rem; margin: 0; }
.result-counts { display: flex; flex-wrap: wrap; gap: .4rem; }
.count-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: var(--radius-sm); font-size: .76rem; font-weight: 700; border: 1px solid var(--line-2); color: var(--soft); background: var(--panel-2); }
.count-pill i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.result-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
/* ---------- Status colour on every row ----------
   A result page is a list of verdicts, and a verdict that looks like every
   other line is one more thing to read before you know whether to care. The
   severity is in the badge; this puts it in the row as well, so the shape of
   the page is legible before any of it is. */
.finding, a.rs-item { border-left-width: 4px; }
.sev-tint-critical, .finding-fail.sev-tint-critical { border-left-color: #fb7185; background: linear-gradient(90deg, rgba(251, 113, 133, .10), transparent 42%), var(--panel); }
.sev-tint-high, .finding-fail.sev-tint-high { border-left-color: #ef4444; background: linear-gradient(90deg, rgba(239, 68, 68, .10), transparent 42%), var(--panel); }
.sev-tint-medium { border-left-color: var(--warn); background: linear-gradient(90deg, rgba(245, 158, 11, .09), transparent 42%), var(--panel); }
.sev-tint-low { border-left-color: var(--low); background: linear-gradient(90deg, rgba(167, 139, 250, .09), transparent 42%), var(--panel); }
.sev-tint-info, .finding-info { border-left-color: var(--info); background: linear-gradient(90deg, rgba(96, 165, 250, .09), transparent 42%), var(--panel); }
.sev-tint-pass, .finding-pass { border-left-color: var(--good); background: linear-gradient(90deg, rgba(34, 197, 94, .08), transparent 42%), var(--panel); }
.finding-skip { border-left-color: var(--line-2); background: var(--panel); }
.finding-fail.sev-tint-critical:hover, .finding-fail.sev-tint-high:hover { border-color: rgba(239, 68, 68, .55); border-left-color: #ef4444; }
.finding-info:hover { border-color: rgba(96, 165, 250, .45); border-left-color: var(--info); }
.finding-pass:hover { border-color: rgba(34, 197, 94, .45); border-left-color: var(--good); }
a.rs-item.sev-tint-critical:hover, a.rs-item.sev-tint-high:hover { border-color: rgba(239, 68, 68, .5); }

.findings { margin-top: 1.4rem; display: grid; gap: .6rem; }
.finding { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.finding summary { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: .85rem 1.1rem; cursor: pointer; list-style: none; }
.finding summary::-webkit-details-marker { display: none; }
.finding summary strong { font-size: .95rem; color: #fff; }
.finding summary .finding-detail { display: block; font-size: .84rem; color: var(--muted); margin-top: .15rem; }
.finding[open] summary { border-bottom: 1px solid var(--line); }
.finding-body { padding: 1rem 1.1rem 1.1rem; font-size: .9rem; color: var(--soft); }
.finding-body h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: .9rem 0 .4rem; }
.finding-body h4:first-child { margin-top: 0; }
.finding-body pre { margin: .4rem 0 .6rem; font-size: .78rem; max-height: 260px; }
.fix-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 650; color: var(--accent); margin-top: .6rem; }
.finding-body .fix-link { margin-top: .4rem; }
.finding-pass summary strong { color: var(--soft); font-weight: 600; }
.sev { display: inline-flex; align-items: center; justify-content: center; min-width: 66px; padding: .22rem .5rem; border-radius: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sev-critical { background: rgba(251, 113, 133, .18); color: #fda4af; border: 1px solid rgba(251, 113, 133, .4); }
.sev-high { background: rgba(239, 68, 68, .16); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .4); }
.sev-medium { background: rgba(245, 158, 11, .16); color: #fcd34d; border: 1px solid rgba(245, 158, 11, .4); }
.sev-low { background: rgba(167, 139, 250, .16); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, .4); }
.sev-info { background: rgba(96, 165, 250, .14); color: #93c5fd; border: 1px solid rgba(96, 165, 250, .35); }
.sev-pass { background: rgba(34, 197, 94, .14); color: #86efac; border: 1px solid rgba(34, 197, 94, .35); }
.results-group-title { display: flex; align-items: center; justify-content: space-between; margin: 1.6rem 0 .6rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; }
.results-toggle { font-size: .8rem; color: var(--accent); background: none; border: 0; font-weight: 700; }
.meta-table { width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: .8rem; }
.meta-table th, .meta-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.meta-table th { color: var(--muted); font-weight: 600; width: 34%; }
.meta-table td { color: var(--soft); word-break: break-word; font-family: var(--mono); font-size: .8rem; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; margin-top: 1rem; }
.kv div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; }
.kv small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.kv strong { display: block; font-size: 1rem; word-break: break-all; margin-top: .15rem; }
.share-box { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; font-family: var(--mono); font-size: .82rem; color: var(--accent-2); }
.share-box span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Cards ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.card-body { padding: 1.5rem 1.6rem; }
.card-head { padding: .95rem 1.6rem; border-bottom: 1px solid var(--line); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tool-card { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--soft); transition: transform .15s, border-color .15s; }
.tool-card:hover, .tool-card:focus-within { transform: translateY(-3px); border-color: var(--accent); color: var(--soft); }
.tool-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.tool-card .tool-visual-card { min-height: 0; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line); }
.tool-card-copy { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .3rem; }
.tool-card-cat { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--tone, 45, 212, 191)); }
.tool-card[class*="tone-"]:hover, .tool-card[class*="tone-"]:focus-within { border-color: rgba(var(--tone), .8); box-shadow: 0 12px 30px rgba(var(--tone), .075); }
.tool-card strong { color: #fff; font-size: 1.02rem; line-height: 1.3; }
.tool-card p { margin: 0; font-size: .85rem; color: var(--muted); }
.tool-card.featured { grid-template-rows: auto 1fr; }
.related-tools-grid .tool-card img { aspect-ratio: 16 / 9; }
.related-tools-grid .tool-visual-card { min-height: 7rem; }
.related-tools-section .tool-related { margin-top: 1rem; }
.guide-card { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--soft); transition: transform .15s, border-color .15s; }
.guide-card:hover, .guide-card:focus-within { transform: translateY(-3px); border-color: var(--accent); color: var(--soft); }
.guide-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.guide-card-copy { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .35rem; align-content: start; }
.guide-card small { font-size: .72rem; color: var(--muted); }
.guide-card strong { color: #fff; font-size: 1rem; line-height: 1.3; }
.guide-card p { margin: 0; font-size: .85rem; color: var(--muted); }
.guide-card i { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: .3rem; margin-top: .2rem; }
.feature-list { display: grid; gap: .9rem; }
.feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .9rem; align-items: start; }
.feature-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--accent); }
.feature > div > strong { display: block; color: #fff; margin-bottom: .15rem; }
/* Left as inline: a <strong> inside the paragraph is emphasis, not a heading. */
.feature p strong { color: #fff; }
.feature p { margin: 0; font-size: .9rem; color: var(--muted); }
.steps-grid { display: flex; align-items: stretch; gap: 1.25rem; }
.steps-grid > .step { flex: 1 1 0; min-width: 0; }
.step-arrow { flex: none; display: grid; place-items: center; color: var(--accent); opacity: .8; }
.step { background: linear-gradient(145deg, rgba(45, 212, 191, .045), transparent 48%), var(--panel); border: 1px solid var(--line); border-top-color: rgba(45, 212, 191, .52); border-radius: 12px; padding: 1.45rem 1.55rem 1.6rem; }
.step strong { display: block; color: #fff; margin-bottom: .3rem; }
.step p { margin: 0; font-size: .9rem; color: var(--muted); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat-row-3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.35rem 1.5rem; }
.stat strong { display: block; font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1.1; }
.stat span { font-size: .82rem; color: var(--muted); }
.hub-tile { display: grid; grid-template-columns: 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--soft); transition: border-color .15s, transform .15s; }
.hub-tile:hover, .hub-tile:focus-within { border-color: var(--accent); transform: translateY(-3px); color: var(--soft); }
.hub-tile img { aspect-ratio: 16 / 9; object-fit: cover; }
.hub-tile-copy { padding: 1.1rem 1.2rem 1.3rem; }
.hub-tile-copy strong { display: block; color: #fff; font-size: 1.1rem; margin-bottom: .3rem; }
.hub-tile-copy p { margin: 0; font-size: .88rem; color: var(--muted); }
.page-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 3rem; padding: 1.8rem 2rem; border-radius: 16px; background: linear-gradient(135deg, rgba(45, 212, 191, .14), rgba(125, 211, 252, .08)); border: 1px solid var(--line-2); }
.page-cta h2 { margin: 0 0 .3rem; }
.page-cta p { margin: 0; }
.check-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--soft); }
.check-row:hover, .check-row:focus-within { border-color: var(--accent); color: var(--soft); }
.check-row-copy strong { display: block; color: #fff; font-size: .92rem; }
.check-row-copy small { display: block; color: var(--muted); font-size: .8rem; }
.check-list { display: grid; gap: .5rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .75rem; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--panel); font-size: .78rem; color: var(--soft); font-weight: 600; }
.chip:hover { border-color: var(--accent); color: #fff; }
.home-active-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.home-active-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .8rem; align-items: start; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--soft); transition: border-color .15s, transform .15s; }
.home-active-card:hover, .home-active-card:focus-within { border-color: var(--accent); color: var(--soft); transform: translateY(-2px); }
.home-active-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); color: var(--accent); }
.home-active-card strong { display: block; margin-bottom: .2rem; color: #fff; font-size: .92rem; line-height: 1.3; }
.home-active-card small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.methodology-active-links { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 1.8rem; }

/* ---------- Tables / callouts / FAQ (article + KB content) ---------- */
.table-wrap { overflow-x: auto; margin: 1.2rem 0 1.6rem; border: 1px solid var(--line); border-radius: 10px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 520px; }
.data-table th, .data-table td { padding: .65rem .85rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { background: var(--panel-2); color: #fff; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td { color: var(--soft); }
.callout { margin: 1.2rem 0 1.5rem; padding: .95rem 1.15rem; border-left: 4px solid var(--accent); background: rgba(45, 212, 191, .08); border-radius: 0 10px 10px 0; color: var(--soft); font-size: .95rem; }
.callout-warn { border-left-color: var(--warn); background: rgba(245, 158, 11, .1); }
.callout-good { border-left-color: var(--good); background: rgba(34, 197, 94, .1); }
.faq-section { margin-top: 2.6rem; }
.faq-list { display: grid; gap: .6rem; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; cursor: pointer; font-weight: 650; color: #fff; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { color: var(--muted); transition: transform .15s; flex: none; }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-body { padding: 0 1.1rem 1rem; color: var(--soft); font-size: .95rem; }
.faq-body p { margin: 0; }
.alert { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); margin: 1rem 0; color: var(--soft); }
.alert-error { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .1); }
.alert-success { border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .1); }
.flash-wrap { margin-top: 1rem; }

/* ---------- Article (magazine) ---------- */
.article-head { padding: .8rem 0 1.8rem; }
.article-head .breadcrumb { margin-bottom: 1.6rem; }
.article-head .badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(45, 212, 191, .14); color: var(--accent); border: 1px solid rgba(45, 212, 191, .3); }
.badge-soft { background: var(--panel-2); color: var(--soft); border-color: var(--line-2); }
.article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .84rem; color: var(--muted); margin-top: .8rem; }
.article-meta span { display: inline-flex; align-items: center; gap: .35rem; }
/* The two asides used to carry min-widths that beat their percentages, so on
   anything under a very wide screen they took their full size and the article
   column absorbed the loss - 389px of prose and tables at 1200px. The content
   is the page; the sidebars give way first. */
.article-layout { display: grid; grid-template-columns: minmax(150px, 14%) minmax(0, 1fr) minmax(200px, 19%); gap: 2.25rem; align-items: start; padding-bottom: 3rem; }
/* Any table that slipped into content without the .table-wrap convention
   still gets borders and padding rather than rendering as bare text. */
.article-body table:not(.data-table) { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1.25rem 0; }
.article-body table:not(.data-table) th,
.article-body table:not(.data-table) td { padding: .65rem .85rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.article-toc { position: sticky; top: 92px; }
.article-toc nav { display: grid; }
.article-toc a { display: block; padding: .38rem .8rem; font-size: .82rem; color: var(--muted); border-left: 2px solid var(--line); line-height: 1.35; }
.article-toc a.toc-h3 { padding-left: 1.5rem; font-size: .78rem; }
.article-toc a.active, .article-toc a:hover { color: #fff; border-left-color: var(--accent); }
.article-hero-img { border-radius: 14px; border: 1px solid var(--line-2); margin-bottom: 1.6rem; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.direct-answer { font-size: 1.15rem; line-height: 1.6; color: #fff; padding: 1.1rem 1.3rem; border-radius: 12px; background: linear-gradient(135deg, rgba(45, 212, 191, .12), rgba(125, 211, 252, .06)); border: 1px solid var(--line-2); margin-bottom: 1.6rem; }
.key-points { border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); padding: 1.1rem 1.3rem; margin-bottom: 1.8rem; }
.key-points .kp-title { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.key-points ul { margin: 0; padding-left: 1.2rem; color: var(--soft); font-size: .95rem; }
.key-points li { margin-bottom: .35rem; }
.article-body { font-size: 1.04rem; line-height: 1.75; }
.article-body h2 { font-size: 1.55rem; margin: 2.2rem 0 .8rem; padding-top: .4rem; }
.article-body h3 { font-size: 1.2rem; margin: 1.7rem 0 .6rem; color: #fff; }
.article-body p { color: var(--soft); }
.article-body ul, .article-body ol { color: var(--soft); padding-left: 1.4rem; margin: 0 0 1.2rem; }
.article-body li { margin-bottom: .45rem; }
.article-body a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(45, 212, 191, .4); text-underline-offset: 3px; }
.article-body a:hover { color: #fff; }
.article-body .steps { counter-reset: s; list-style: none; padding: 0; }
.article-body .steps li { position: relative; padding-left: 3rem; margin-bottom: .9rem; }
.article-body .steps li::before { counter-increment: s; content: "(" counter(s, decimal-leading-zero) ")"; position: absolute; left: 0; top: .14rem; color: var(--accent); font: 750 .78rem/1.5 var(--mono); letter-spacing: .06em; }
.article-body .direct-answer { font-size: 1.12rem; }
.sources { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.sources h2 { font-size: 1.1rem; }
.sources ol { padding-left: 1.3rem; font-size: .88rem; color: var(--muted); }
.sources a { color: var(--accent-2); word-break: break-all; }
.article-rail { position: sticky; top: 92px; display: grid; gap: 1rem; }
.rail-links a { display: block; padding: .55rem .9rem; border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--soft); line-height: 1.4; }
.rail-links a:last-child { border-bottom: 0; }
.rail-links a:hover { color: var(--accent); }
.byline-box { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .8rem; align-items: start; margin-top: 2rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: .88rem; }
.byline-box .avatar { width: 44px; height: 44px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--accent); }
.byline-box strong { display: block; color: #fff; }
.byline-box p { margin: .2rem 0 0; color: var(--muted); }
.pillar-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: 1.6rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); margin-bottom: 2.5rem; }
.pillar-band img { border-radius: 12px; aspect-ratio: 16/9; object-fit: cover; }
.directory-section { margin-top: 2.6rem; }
.directory-section[class*="tone-"] { padding: 1.25rem; border: 1px solid rgba(var(--tone), .18); border-radius: 18px; background: linear-gradient(145deg, rgba(var(--tone), .045), transparent 32%); }
.directory-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(var(--tone, 45, 212, 191), .2); }
.directory-title h2 { display: flex; align-items: center; gap: .65rem; margin: 0; }
.directory-section[class*="tone-"] .directory-title h2::before { content: ""; width: .72rem; height: .72rem; flex: 0 0 auto; border-radius: 4px; background: rgb(var(--tone)); box-shadow: 0 0 0 5px rgba(var(--tone), .11); }
.directory-title span { flex: 0 0 auto; padding: .22rem .62rem; border: 1px solid rgba(var(--tone, 45, 212, 191), .22); border-radius: 999px; background: rgba(var(--tone, 45, 212, 191), .09); color: rgb(var(--tone, 45, 212, 191)); font-size: .78rem; font-weight: 750; }
.directory-title p { margin: .2rem 0 0; color: var(--muted); font-size: .92rem; }

/* ---------- KB (check detail) ---------- */
.kb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 24%); gap: 3rem; align-items: start; padding: 2.4rem 0 4rem; }
.kb-section { margin-bottom: 1.8rem; }
.kb-section h2 { font-size: 1.3rem; display: flex; align-items: center; gap: .5rem; }
.kb-section h2 svg { color: var(--accent); }
.kb-body { font-size: 1rem; line-height: 1.7; }
.kb-body p, .kb-body li { color: var(--soft); }
.kb-body a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(45, 212, 191, .4); text-underline-offset: 3px; }
.kb-meta { display: grid; gap: .5rem; }
.kb-meta div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.kb-meta div:last-child { border-bottom: 0; }
.kb-meta span:first-child { color: var(--muted); }
.kb-status { display: grid; gap: .6rem; margin: 1rem 0 1.8rem; }
.kb-status div { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: .9rem; color: var(--soft); }

/* ---------- Browser scanner ---------- */
.bs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.bs-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.5rem; }
.bs-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin-bottom: .6rem; }
.bs-card h3 svg { color: var(--accent); }
.bs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.bs-row:last-child { border-bottom: 0; }
.bs-row span:first-child { color: var(--muted); }
.bs-row b { color: #fff; font-weight: 600; text-align: right; word-break: break-all; font-family: var(--mono); font-size: .8rem; }
.bs-verdict { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: 10px; margin-top: .6rem; font-size: .9rem; font-weight: 600; }
.bs-verdict.good { background: rgba(34, 197, 94, .12); color: #86efac; border: 1px solid rgba(34, 197, 94, .3); }
.bs-verdict.warn { background: rgba(245, 158, 11, .12); color: #fcd34d; border: 1px solid rgba(245, 158, 11, .3); }
.bs-verdict.bad { background: rgba(239, 68, 68, .12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .3); }
.bs-verdict.info { background: rgba(96, 165, 250, .12); color: #93c5fd; border: 1px solid rgba(96, 165, 250, .3); }
.bs-verdict.pending { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.bits-bar { height: 8px; border-radius: 4px; background: var(--panel-3); overflow: hidden; margin-top: .3rem; }
.bits-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--warn)); width: 0; transition: width .4s; }
.big-number { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1.1; }
.strength-meter { height: 10px; border-radius: 5px; background: var(--panel-3); overflow: hidden; margin: .8rem 0 .4rem; }
.strength-meter i { display: block; height: 100%; width: 0; transition: width .3s, background .3s; background: var(--bad); }
.pw-form { display: flex; gap: .6rem; margin-top: 1.4rem; align-items: stretch; }
.pw-form .btn { min-height: 54px; padding: 0 1.5rem; }
.pw-field { flex: 1; display: flex; align-items: center; gap: .6rem; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 0 .9rem; min-height: 54px; min-width: 0; }
.pw-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, .18); }
.pw-scenario { display: block; font-size: .72rem; color: var(--faint); margin-top: .1rem; }
.pw-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; align-items: start; }
.pw-span-4 { grid-column: span 4; }
.pw-span-6 { grid-column: span 6; }
.pw-span-12 { grid-column: 1 / -1; }
.pw-row-text b { font-family: var(--font) !important; font-size: .86rem !important; word-break: normal !important; }
.pw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin-top: .4rem; }
.pw-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.pw-step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--panel-3); color: var(--accent); font: 800 .78rem var(--mono); }
.pw-step p { margin: 0 0 .35rem; font-size: .86rem; color: var(--soft); line-height: 1.5; }
.pw-step .fix-link { margin-top: 0; font-size: .8rem; }
@media (max-width: 1100px) { .pw-span-4 { grid-column: span 6; } .pw-span-6 { grid-column: span 6; } }
@media (max-width: 820px) { .pw-span-4, .pw-span-6 { grid-column: 1 / -1; } }
.pw-tokens { display: grid; gap: .35rem; margin-top: .6rem; }
.pw-token { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); font-size: .82rem; }
.pw-token code { background: var(--bg); border-color: var(--line-2); color: #fff; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-token span { color: var(--muted); }
.pw-token b { color: var(--accent-2); font-family: var(--mono); font-size: .76rem; white-space: nowrap; }
.pw-note { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: .6rem; align-items: start; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--soft); }
.pw-note:last-child { border-bottom: 0; }
.pw-note i { width: 9px; height: 9px; border-radius: 50%; margin-top: .45rem; }
.pw-advice { font-size: .87rem; color: var(--soft); margin-bottom: .7rem; }
.pw-advice:last-child { margin-bottom: 0; }
.pw-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, .18); }
.pw-field input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font-size: 1.05rem; outline: 0; font-family: var(--mono); }
.pw-field button { background: none; border: 0; color: var(--muted); padding: .3rem; }
.pw-field button:hover { color: #fff; }

/* ---------- Forms (contact) ---------- */
.form-grid { display: grid; gap: 1rem; }
.form-grid label { display: grid; gap: .35rem; font-size: .88rem; color: var(--soft); font-weight: 600; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; color: #fff; padding: .7rem .9rem; }
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus { outline: 0; border-color: var(--accent); }
.form-grid textarea { min-height: 160px; resize: vertical; }
.hp { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 4rem; background: var(--bg-2); padding: 3rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 2rem; }
.footer-desc { font-size: .86rem; color: var(--muted); margin-top: .9rem; max-width: 36ch; }
.footer-desc.small { font-size: .76rem; color: var(--faint); }
.footer-heading { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: .8rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-links a { color: var(--muted); font-size: .86rem; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--faint); }
.footer-bottom-links { display: flex; gap: 1.2rem; }
.footer-bottom-links a { color: var(--muted); }

/* ---------- Prose pages ---------- */
.prose { font-size: 1.02rem; line-height: 1.75; }
.prose h2 { margin: 2rem 0 .7rem; font-size: 1.5rem; }
.prose h3 { margin: 1.5rem 0 .5rem; }
.prose ul, .prose ol { color: var(--soft); padding-left: 1.4rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(45, 212, 191, .4); text-underline-offset: 3px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 26%); gap: 3rem; align-items: start; }
/* Dedicated active-scanner explainers. The tool itself remains above the
   fold; below it, every scanner gets a complete technical explanation rather
   than a repeated marketing paragraph. */
.active-content { padding-top: 1rem; }
.active-overview .prose h2 { margin-top: 0; font-size: clamp(1.55rem, 2.3vw, 2rem); }
.active-overview .prose p { color: var(--soft); }
.active-limit-card { position: sticky; top: calc(var(--header-h) + 1rem); }
.active-limit-card h2 { margin: 0 0 .7rem; font-size: 1.12rem; }
.active-limit-card p { margin: 0 0 .85rem; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.active-limit-card p:last-child { margin-bottom: 0; }
.active-limit-card a { color: var(--accent); font-weight: 650; }
.active-info-card, .active-result-card { height: 100%; }
.active-info-card h3, .active-result-card h3, .active-fix-grid h3 { margin: 0 0 .45rem; font-size: 1rem; }
.active-info-card p, .active-result-card p, .active-fix-grid p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.active-info-card { border-top: 2px solid var(--accent); }
.active-result-card { border-top: 2px solid var(--accent-2); }
.active-fix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.active-fix-grid > li { border-top-color: rgba(45, 212, 191, .52); background: linear-gradient(145deg, rgba(45, 212, 191, .045), transparent 48%), var(--panel); }
.active-fix-grid .card-body { padding: 1.3rem 1.4rem 1.45rem; }
@media (max-width: 900px) {
  .active-limit-card { position: static; }
}
@media (max-width: 620px) {
  .active-fix-grid { grid-template-columns: 1fr; }
}
.error-page { text-align: center; padding: 4rem 0; }
.error-page img { max-width: 420px; margin: 0 auto 1.5rem; border-radius: 14px; }
.pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 2rem; }
.page-link { min-width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0 .6rem; border-radius: 8px; border: 1px solid var(--line-2); color: var(--soft); font-size: .88rem; }
.page-link.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.page-link.disabled { opacity: .4; pointer-events: none; }
.blog-card { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.blog-card:hover, .blog-card:focus-within { border-color: var(--accent); }
.blog-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.blog-card .no-cover { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--panel-2), var(--panel-3)); display: grid; place-items: center; color: var(--accent); }
.blog-card-copy { padding: 1rem 1.1rem 1.2rem; }
.blog-card-copy small { color: var(--muted); font-size: .74rem; }
.blog-card-copy strong { display: block; color: #fff; margin: .3rem 0; line-height: 1.3; }
.blog-card-copy p { margin: 0; font-size: .86rem; color: var(--muted); }
.copy-btn { display: inline-flex; align-items: center; gap: .3rem; }
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; border-radius: 8px; font-weight: 700; font-size: .85rem; z-index: 300; box-shadow: var(--shadow); }

/* ---------- Domain information (informational, outside the scan) ---------- */
.domain-facts { margin-top: 2.5rem; padding: 1.6rem 1.8rem 1.4rem; border: 1px dashed var(--line-2); border-radius: 16px; background: var(--bg-2); }
.df-head h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .3rem; font-size: 1.2rem; }
.df-head h3 svg { color: var(--accent-2); }
.df-head p { margin: 0 0 1.3rem; font-size: .88rem; color: var(--muted); max-width: 95ch; }
.df-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.df-card { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.df-card h4 { margin: 0 0 .7rem; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.df-wide { grid-column: 1 / -1; }
.df-note { margin: -.35rem 0 .7rem; font-size: .84rem; color: var(--accent-2); }
.df-empty { margin: 0; font-size: .85rem; color: var(--faint); }
.df-rows { display: grid; gap: .1rem; }
/* The value column was `auto`, so a long registrar name took its full
   content width, squeezed the label column to nothing and printed straight
   over the word "Registrar". The flexible, shrinkable column has to be the
   one holding unpredictable text; the label is the predictable half. */
.df-rows > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: baseline; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.df-rows > div:last-child { border-bottom: 0; }
.df-rows span { color: var(--muted); }
.df-rows b { color: #fff; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.df-rows b small, .df-rows small { color: var(--faint); font-weight: 500; }
.df-soon { color: #fcd34d !important; }
.df-list { display: grid; gap: .35rem; }
.df-list > div { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .35rem .5rem; border-radius: 6px; background: var(--panel-2); }
.df-list code { background: none; border: 0; padding: 0; color: var(--accent-2); font-size: .8rem; }
.df-list span { font-size: .74rem; color: var(--muted); }
/* The strip that closes every truncated area. */
.lock-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: center; margin-top: .6rem; padding: .85rem 1rem; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--panel-2); font-size: .88rem; color: var(--muted); }
.lock-strip strong { color: #fff; font-weight: 650; }
.lock-strip-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--panel-3); color: var(--accent); }
.lock-strip .btn { white-space: nowrap; }

/* Locked cards. The shapes are drawn, not blurred: the facts they stand in
   for were never sent to the browser, so there is nothing here to un-blur.
   Keeping the real headings means a visitor can see exactly what signing in
   would give them. */
.df-card.is-locked { position: relative; border-style: dashed; border-color: var(--line-2); background: linear-gradient(180deg, var(--panel), rgba(17, 26, 44, .35)); }
.df-card.is-locked h4 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.df-card.is-locked h4 svg { color: var(--faint); flex: none; }
.df-ghosts { display: grid; gap: .5rem; }
.df-ghosts i { display: block; height: 13px; border-radius: 5px; background: linear-gradient(90deg, var(--panel-2), var(--panel-3)); }
.df-ghosts i:nth-child(2) { width: 82%; opacity: .75; }
.df-ghosts i:nth-child(3) { width: 64%; opacity: .5; }
.df-ghosts i:nth-child(4) { width: 73%; opacity: .32; }
.df-ghosts i:nth-child(5) { width: 51%; opacity: .2; }

.df-gate { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: 1.2rem 1.3rem; border: 1px solid var(--accent); border-radius: 12px; background: var(--panel-2); }
.df-gate .gate-lock { margin: 0; }
.df-gate strong { display: block; font-size: 1.02rem; color: #fff; }
.df-gate p { margin: .25rem 0 0; font-size: .88rem; color: var(--muted); }
.df-gate small { display: block; margin-top: .45rem; font-size: .78rem; color: var(--faint); }
.df-gate .btn { white-space: nowrap; }

.df-foot { display: flex; align-items: flex-start; gap: .5rem; margin: 1.1rem 0 0; font-size: .8rem; color: var(--faint); }
.df-foot svg { flex: none; margin-top: .15rem; }

/* ---------- Crawl report and next steps ---------- */
.crawl-report { margin-top: 2.5rem; padding: 1.6rem 1.8rem 1.4rem; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); }
.crawl-table { font-size: .84rem; min-width: 760px; }
.crawl-table code { background: none; border: 0; padding: 0; color: var(--accent-2); font-size: .8rem; }
.crawl-table td { vertical-align: middle; }
.chip-row b { color: var(--accent-2); font-family: var(--mono); font-size: .72rem; }
.next-scans { position: relative; margin-top: 2.5rem; padding: 1.8rem; border: 1px solid #5eead4; border-radius: 18px; background: linear-gradient(135deg, #0f766e 0%, #0e7490 100%); box-shadow: 0 18px 55px rgba(13, 148, 136, .22); overflow: hidden; }
.ns-head { position: relative; z-index: 1; }
.ns-head h3 { margin: 0 0 .35rem; color: #fff; font-size: 1.45rem; }
.ns-head p { margin: 0 0 1.3rem; color: #d9fafa; font-size: .92rem; }
.ns-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .85rem; margin: 0; padding: 0; list-style: none; }
.ns-grid > li { min-width: 0; }
.ns-card { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; height: 100%; min-height: 112px; padding: 1rem 1.1rem; border: 1px solid rgba(255, 255, 255, .78); border-radius: 13px; background: #f8fafc; color: #0f172a; box-shadow: 0 8px 22px rgba(3, 31, 42, .18); transition: border-color .15s, box-shadow .15s, transform .12s; }
.ns-card-first { border-width: 2px; }
.ns-card:hover { border-color: #fff; box-shadow: 0 12px 28px rgba(3, 31, 42, .28); transform: translateY(-3px); color: #0f172a; }
.ns-card:focus-visible { outline: 3px solid #fef08a; outline-offset: 3px; }
.ns-order { color: #0f766e; font: 800 .78rem/1 var(--mono); letter-spacing: .04em; }
.ns-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: #ccfbf1; color: #0f766e; }
.ns-copy strong { display: block; color: #0f172a; font-size: .98rem; margin-bottom: .18rem; }
.ns-copy span { display: block; font-size: .84rem; color: #475569; line-height: 1.45; }
.ns-card > svg { color: #0f766e; }

.body-contextual-links { margin: 1.4rem 0 .4rem; padding: 1.15rem 1.25rem; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: rgba(45, 212, 191, .06); }
.body-contextual-links .prose { max-width: 1000px; }
.body-contextual-links h3 { margin: 0 0 .55rem; font-size: 1.08rem; }
.body-contextual-links p { margin: .45rem 0 0; color: var(--soft); font-size: .9rem; line-height: 1.7; }
.body-contextual-links a { color: var(--accent-2); font-weight: 650; text-decoration: underline; text-decoration-color: rgba(125, 211, 252, .35); text-underline-offset: 3px; }
.body-contextual-links a:hover { color: #fff; text-decoration-color: var(--accent); }

@media (max-width: 560px) {
  .next-scans { padding: 1.15rem; }
  .ns-grid { grid-template-columns: 1fr; }
  .ns-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ns-order { grid-column: 1 / -1; }
}

/* ---------- The two useful choices after every scan ---------- */
.after-scan { margin-top: 2.5rem; padding: 1.55rem 1.7rem 1.7rem; border: 1px solid rgba(45, 212, 191, .42); border-radius: 16px; background: linear-gradient(135deg, rgba(45, 212, 191, .11), rgba(125, 211, 252, .05)), var(--panel); }
.after-scan-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.after-scan-head > span { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: rgba(34, 197, 94, .15); color: #86efac; }
.after-scan-head h3 { margin: 0 0 .2rem; font-size: 1.22rem; }
.after-scan-head p { margin: 0; color: var(--muted); font-size: .88rem; }
.after-scan-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: .75rem; }
.after-scan-action { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; width: 100%; padding: .95rem 1rem; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); color: var(--text); text-align: left; cursor: pointer; }
.after-scan-action:hover { border-color: var(--accent); color: #fff; }
.after-scan-save { border-color: rgba(45, 212, 191, .5); }
.after-scan-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(45, 212, 191, .13); color: var(--accent); }
.after-scan-action strong, .after-scan-action small { display: block; }
.after-scan-action strong { font-size: .94rem; }
.after-scan-action small { margin-top: .15rem; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.after-scan-action > svg { color: var(--accent); }

/* ---------- Email header analyzer ---------- */
.email-header-hero { padding-bottom: 2.5rem; }
.eh-paste-card { margin-top: 1.35rem; padding: 1.1rem; border: 1px solid var(--line-2); border-radius: 15px; background: var(--panel); box-shadow: var(--shadow); }
.eh-paste-card label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .65rem; }
.eh-paste-card label strong { color: #fff; }
.eh-paste-card label span { color: var(--muted); font-size: .78rem; text-align: right; }
.eh-paste-card textarea { width: 100%; min-height: 250px; padding: .9rem 1rem; resize: vertical; border: 1px solid var(--line-2); border-radius: 10px; outline: 0; background: var(--bg); color: var(--text); font: .82rem/1.55 var(--mono); }
.eh-paste-card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, .15); }
.eh-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.eh-form-foot p { margin: 0; color: var(--muted); font-size: .78rem; }
.eh-form-foot p.over { color: #fca5a5; }
.eh-how-grid .card { padding: 1.35rem; }
.eh-how-grid h3 { margin: 0 0 .45rem; }
.eh-how-grid p { margin: 0; color: var(--soft); }
.email-header-results { scroll-margin-top: 5rem; }
.eh-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1.5rem 1.65rem; border: 1px solid var(--line-2); border-left-width: 5px; border-radius: 16px; background: var(--panel); }
.eh-verdict-ok { border-color: rgba(34, 197, 94, .5); border-left-color: #22c55e; }
.eh-verdict-warn { border-color: rgba(245, 158, 11, .5); border-left-color: #f59e0b; }
.eh-verdict-bad { border-color: rgba(239, 68, 68, .55); border-left-color: #ef4444; }
.eh-risk { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: var(--bg-2); }
.eh-risk strong { font: 800 1.7rem var(--mono); line-height: 1; }
.eh-risk span { color: var(--muted); font-size: .65rem; }
.eh-verdict h2 { margin: .25rem 0 .35rem; font-size: 1.6rem; }
.eh-verdict p { margin: 0; max-width: 82ch; color: var(--soft); }
.eh-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.eh-card, .eh-section, .eh-routes { padding: 1.35rem 1.45rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); }
.eh-card h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 1rem; font-size: 1.05rem; }
.eh-card h3 svg { color: var(--accent); }
.eh-facts { margin: 0; }
.eh-facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.eh-facts dt { color: var(--muted); font-size: .78rem; }
.eh-facts dd { margin: 0; color: var(--text); font-size: .86rem; overflow-wrap: anywhere; }
.eh-facts code { font-size: .78rem; }
.eh-caveat { margin: .9rem 0 0; padding: .7rem .8rem; border-radius: 8px; background: var(--bg-2); color: var(--muted); font-size: .76rem; line-height: 1.5; }
.eh-section, .eh-routes { margin-top: 1rem; }
.eh-section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.eh-section-head h3 { margin: 0 0 .25rem; font-size: 1.12rem; }
.eh-section-head p { margin: 0; color: var(--muted); font-size: .84rem; }
.eh-section-head > span { color: var(--faint); font-size: .72rem; }
.eh-auth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.eh-auth { padding: .95rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.eh-auth > div { display: flex; justify-content: space-between; gap: .5rem; }
.eh-auth > div span { padding: .12rem .45rem; border-radius: 999px; font: 800 .68rem var(--mono); text-transform: uppercase; }
.eh-auth-pass > div span { background: rgba(34, 197, 94, .14); color: #86efac; }
.eh-auth-fail > div span { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.eh-auth-unknown > div span { background: var(--panel-3); color: var(--muted); }
.eh-auth p { margin: .55rem 0 0; color: var(--muted); font-size: .78rem; }
.eh-signal-list { display: grid; gap: .65rem; }
.eh-signal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: .8rem .9rem; border-radius: 9px; background: var(--bg-2); }
.eh-signal > span { color: #fcd34d; }
.eh-signal strong { font-size: .9rem; }
.eh-signal p { margin: .18rem 0 0; color: var(--muted); font-size: .8rem; }
.eh-positive-list { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.eh-positive-list li { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .65rem; border: 1px solid rgba(34, 197, 94, .3); border-radius: 999px; color: #bbf7d0; font-size: .8rem; }
.eh-routes summary { cursor: pointer; color: #fff; font-weight: 700; }
.eh-routes ol { margin: 1rem 0 0; padding: 0; list-style: none; }
.eh-routes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.eh-routes li > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--panel-3); color: var(--accent); font: 700 .72rem var(--mono); }
.eh-routes li strong { font-size: .82rem; overflow-wrap: anywhere; }
.eh-routes li p { margin: .2rem 0 0; color: var(--muted); font-size: .74rem; }
.eh-privacy { display: flex; align-items: flex-start; gap: .45rem; margin: 1rem 0 0; color: var(--faint); font-size: .76rem; }
.eh-share { grid-template-columns: 1fr; }

/* ---------- Premium upsell ---------- */
.upsell { position: relative; margin-top: 1.6rem; padding: 1.5rem 1.7rem 1.4rem; border: 1px solid rgba(45, 212, 191, .34); border-radius: 16px; background: linear-gradient(135deg, rgba(45, 212, 191, .12), rgba(125, 211, 252, .06) 55%, transparent), var(--panel); overflow: hidden; }
.upsell::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.upsell-head h2 { margin: .6rem 0 .35rem; font-size: 1.3rem; }
.upsell-head p { margin: 0 0 1rem; font-size: .93rem; color: var(--soft); max-width: 80ch; }
.upsell-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: .7rem 1.6rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.upsell-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; font-size: .88rem; color: var(--muted); line-height: 1.5; }
.upsell-list svg { color: var(--accent); margin-top: .15rem; }
.upsell-list strong { color: #fff; font-weight: 650; }
.upsell-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid rgba(45, 212, 191, .18); }
.upsell-note { font-size: .82rem; color: var(--muted); }
.upsell-active { border-color: rgba(45, 212, 191, .5); }

/* ---------- The conclusion ---------- */
.conclusion { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-top: 2.5rem; padding: 1.6rem 1.8rem; border: 1px solid var(--line-2); border-left-width: 5px; border-radius: 16px; background: var(--panel); }
.conclusion-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--panel-2); }
.conclusion-label { display: inline-block; margin-bottom: .45rem; padding: .18rem .55rem; border-radius: 5px; font: 800 .66rem var(--font); letter-spacing: .1em; text-transform: uppercase; }
.conclusion h3 { margin: 0 0 .4rem; font-size: 1.3rem; }
.conclusion p { margin: 0 0 .5rem; color: var(--soft); font-size: .95rem; line-height: 1.6; }
.conclusion-first { margin: .8rem 0 0 !important; padding: .7rem .9rem; border-radius: 8px; background: var(--panel-2); font-size: .9rem; }
.conclusion-critical { border-color: rgba(239, 68, 68, .5); border-left-color: #ef4444; }
.conclusion-critical .conclusion-mark { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.conclusion-critical .conclusion-label { background: rgba(239, 68, 68, .16); color: #fca5a5; }
.conclusion-high { border-color: rgba(245, 158, 11, .45); border-left-color: var(--warn); }
.conclusion-high .conclusion-mark { background: rgba(245, 158, 11, .14); color: #fcd34d; }
.conclusion-high .conclusion-label { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.conclusion-medium { border-left-color: var(--accent-2); }
.conclusion-medium .conclusion-mark { background: rgba(125, 211, 252, .12); color: var(--accent-2); }
.conclusion-medium .conclusion-label { background: rgba(125, 211, 252, .14); color: var(--accent-2); }
.conclusion-ok { border-color: rgba(34, 197, 94, .45); border-left-color: var(--good); }
.conclusion-ok .conclusion-mark { background: rgba(34, 197, 94, .14); color: #86efac; }
.conclusion-ok .conclusion-label { background: rgba(34, 197, 94, .16); color: #86efac; }
.conclusion-unknown { border-left-color: var(--faint); }
.conclusion-unknown .conclusion-mark { background: var(--panel-2); color: var(--muted); }
.conclusion-unknown .conclusion-label { background: var(--panel-2); color: var(--muted); }

/* ---------- Share the report ---------- */
.share-cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: center; margin-top: 2.5rem; padding: 1.8rem 2rem; border: 1px solid var(--line-2); border-radius: 18px; background: linear-gradient(135deg, rgba(45, 212, 191, .13), rgba(125, 211, 252, .07)); }
.share-cta h3 { margin: 0 0 .3rem; font-size: 1.35rem; }
.share-cta-copy p { margin: 0 0 1rem; color: var(--soft); font-size: .92rem; }
.share-link { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .5rem .5rem .9rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); }
.share-link code { flex: 1; min-width: 0; background: none; border: 0; padding: 0; color: var(--accent-2); font-size: .82rem; overflow-wrap: anywhere; }
.share-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
/* Each network wears its own colour at rest, not only on hover. A phone has
   no hover state, so every button rendered in the same teal for exactly the
   people most likely to share - six identical tiles telling you nothing.
   --brand carries the colour; --wash is the same hue as a background tint,
   written out per network because this stylesheet predates color-mix. */
.share-btn { --brand: var(--accent); --wash: rgba(45, 212, 191, .12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 72px; padding: .6rem .4rem; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); color: var(--soft); font-size: .78rem; font-weight: 650; transition: border-color .15s, transform .1s, color .15s, background .15s; }
.share-btn svg { color: var(--brand); }
.share-btn:hover, .share-btn:focus-visible { color: #fff; border-color: var(--brand); background: var(--wash); transform: translateY(-2px); }
.share-btn:active { transform: translateY(0); }

.share-x        { --brand: #fff;     --wash: rgba(255, 255, 255, .10); }
.share-whatsapp { --brand: #25d366;  --wash: rgba(37, 211, 102, .12); }
.share-telegram { --brand: #229ed9;  --wash: rgba(34, 158, 217, .14); }
/* LinkedIn's own dark theme lifts #0a66c2 to a lighter blue, because the
   print-brand blue sits at 3.1:1 on a panel this dark and reads as muddy
   next to the others. This is their dark-mode blue, not an invention. */
.share-linkedin { --brand: #70b5f9;  --wash: rgba(10, 102, 194, .18); }
.share-reddit   { --brand: #ff4500;  --wash: rgba(255, 69, 0, .13); }
/* Email has no brand but ours. */
.share-email    { --brand: var(--accent); --wash: rgba(45, 212, 191, .12); }
/* Hidden by default and shown only where the OS share sheet exists. The
   class is set in the head before first paint, so this costs no shift. */
.share-native { display: none; grid-column: 1 / -1; flex-direction: row; min-height: 48px; border-color: var(--accent); color: #fff; }
.has-web-share .share-native { display: flex; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: var(--gutter) 1.25rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 16, .78); backdrop-filter: blur(3px); }
.modal-card { position: relative; width: min(100%, 620px); max-height: 86vh; overflow-y: auto; padding: 1.8rem 2rem 1.6rem; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.modal-card h2, .modal-card .modal-title { margin: .7rem 0 .6rem; font-size: 1.5rem; }
.modal-card p { font-size: .92rem; }
.modal-close { position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); color: var(--muted); }
.modal-close:hover { color: #fff; border-color: var(--accent); }
.modal-list { margin: 0 0 1.1rem; padding-left: 1.1rem; color: var(--soft); font-size: .92rem; }
.modal-list li { margin-bottom: .4rem; }
.modal-note { padding: .7rem .9rem; border-left: 3px solid var(--warn); border-radius: 0 8px 8px 0; background: rgba(245, 158, 11, .08); color: var(--soft); font-size: .86rem; }
.modal-form { display: flex; gap: .6rem; margin: 1rem 0 .4rem; }
.modal-form input { flex: 1; min-width: 0; padding: .6rem .8rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: #fff; font-size: .9rem; }
.modal-form input:focus { outline: 0; border-color: var(--accent); }
.modal-status { margin: .3rem 0 0; font-size: .85rem; }
.modal-status.is-good { color: #86efac; }
.modal-status.is-bad { color: #fca5a5; }
.modal-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.subscribe-modal-card { width: min(100%, 900px); max-height: calc(100dvh - 36px); padding: 0; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr); }
@supports not (height: 100dvh) { .subscribe-modal-card { max-height: calc(100vh - 36px); } }
/* Match ASKAI-FREE's checkout structure: one definite, shrinkable card row and
   one independently scrolling purchase column. This keeps the action usable
   on short laptop windows and above mobile browser chrome. */
.subscribe-shell { display: grid; grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100%; height: min(720px, calc(100dvh - 36px)); min-height: 0; }
@supports not (height: 100dvh) { .subscribe-shell { height: min(720px, calc(100vh - 36px)); } }
.subscribe-side { padding: 2.25rem 1.8rem; background: linear-gradient(155deg, #0f766e 0%, #0b3e55 100%); color: #fff; }
.subscribe-brand { color: #fff; margin-bottom: 2.4rem; }
.subscribe-brand .brand-dot { color: #5eead4; }
.subscribe-side h2 { margin: 0 0 1.35rem; color: #fff; font-size: 1.65rem; line-height: 1.18; }
.subscribe-side ul { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; color: #d5f5f1; font-size: .9rem; }
.subscribe-side li { display: flex; gap: .65rem; }
.subscribe-side li::before { content: "✓"; color: #5eead4; font-weight: 900; }
.subscribe-main { display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.8rem 2rem 1.45rem; }
.subscribe-title { margin: .7rem 2.5rem .25rem 0 !important; color: var(--text); font-size: 1.55rem !important; font-weight: 800; line-height: 1.2; }
.subscribe-sub { margin: 0 0 1.15rem; color: var(--muted); }
.subscribe-periods { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0 0 .9rem; padding: .25rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); }
.subscribe-periods label { cursor: pointer; }
.subscribe-periods input { position: absolute; opacity: 0; pointer-events: none; }
.subscribe-periods span { display: block; padding: .55rem .7rem; border-radius: 7px; color: var(--muted); font-size: .82rem; font-weight: 700; text-align: center; }
.subscribe-periods input:checked + span { background: rgba(45,212,191,.14); color: var(--text); box-shadow: inset 0 0 0 1px rgba(45,212,191,.35); }
.subscribe-plans { display: grid; gap: .65rem; margin: 0; padding: 0; border: 0; }
.subscribe-plans > label { --plan-color: #38bdf8; --plan-bg: rgba(56,189,248,.08); --plan-bg-on: rgba(56,189,248,.17); display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .85rem .95rem; border: 1px solid rgba(56,189,248,.45); border-radius: 11px; background: var(--plan-bg); cursor: pointer; transition: border-color .16s, background .16s, box-shadow .16s, transform .16s; }
.subscribe-plans > label.subscribe-plan-pro { --plan-color: #fbbf24; --plan-bg: rgba(251,191,36,.075); --plan-bg-on: rgba(251,191,36,.16); border-color: rgba(251,191,36,.43); }
.subscribe-plans > label:hover { border-color: var(--plan-color); background: var(--plan-bg-on); transform: translateY(-1px); }
.subscribe-plans > label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--plan-color) 34%, transparent); outline-offset: 2px; }
.subscribe-plans > label:has(input:checked) { border-color: var(--plan-color); background: var(--plan-bg-on); box-shadow: 0 0 0 2px color-mix(in srgb, var(--plan-color) 32%, transparent), inset 4px 0 0 var(--plan-color); }
.subscribe-plans input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--plan-color); border-radius: 50%; background: rgba(255,255,255,.04); }
.subscribe-plans input:checked { background: radial-gradient(circle, var(--plan-color) 0 5px, transparent 5.5px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan-color) 22%, transparent); }
.subscribe-plans label > span strong { color: var(--plan-color); }
.subscribe-plans label > span, .subscribe-plans label > b { display: grid; }
.subscribe-plans small { color: var(--muted); font-size: .74rem; font-weight: 500; }
.subscribe-plans label > b { text-align: right; color: var(--plan-color); }
.subscribe-check { display: grid !important; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(34,197,94,.15); color: #86efac; }
.subscribe-pay { position: sticky; bottom: 0; z-index: 4; flex: 0 0 auto; min-height: 52px; margin-top: .7rem; box-shadow: 0 0 0 12px var(--panel), 0 -9px 14px 7px rgba(17, 27, 46, .96), 0 2px 6px rgba(0, 0, 0, .24); }
.subscribe-modal-card.is-checkout { width: min(100%, 1060px); border-color: #e5e7eb; background: #fff; }
.subscribe-modal-card.is-checkout .modal-close { z-index: 8; border: 0; background: #f3f4f6; color: #6b7280; }
.subscribe-modal-card.is-checkout .modal-close:hover { background: #e5e7eb; color: #111827; }
/* ASKAI-FREE payment-window structure: artwork and a real Stripe Payment
   Element in a light purchase column. Stripe's fields stay embedded and PCI
   scoped, while the submit control remains ours and can stay on screen. */
.subscribe-checkout { display: grid; grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100%; height: min(800px, calc(100dvh - 36px)); min-height: 0; overflow: hidden; color: #111827; }
.subscribe-checkout[hidden] { display: none; }
@supports not (height: 100dvh) { .subscribe-checkout { height: min(800px, calc(100vh - 36px)); } }
.scanpay-art { position: relative; min-height: 0; overflow: hidden; background: #073e50; }
.scanpay-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(1.1); }
.scanpay-art::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(to bottom, transparent, rgba(2, 18, 31, .94)); pointer-events: none; }
.scanpay-art-copy { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; gap: .3rem; padding: 2rem; color: #fff; font-size: .84rem; line-height: 1.55; }
.scanpay-art-copy strong { font-size: 1rem; }
.scanpay-pane { min-width: 0; min-height: 0; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.7rem 2rem 1.35rem; background: #fff; color: #111827; }
.scanpay-back { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .7rem; padding: .25rem 0; border: 0; background: none; color: #6b7280; font-size: .78rem; font-weight: 650; }
.scanpay-back:hover { color: #0f766e; }
.scanpay-pane h2 { margin: 0 2.6rem .2rem 0; color: #111827; font-size: 1.45rem; letter-spacing: -.025em; }
.scanpay-sub { margin: 0 0 .9rem !important; color: #6b7280; font-size: .8rem !important; }
.scanpay-order { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .8rem .95rem; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff; }
.scanpay-order > span { display: grid; }
.scanpay-order strong { color: #111827; font-size: .86rem; }
.scanpay-order small { margin-top: .1rem; color: #6b7280; font-size: .68rem; }
.scanpay-tick { display: grid !important; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #dcfce7; color: #16a34a; }
.scanpay-total { text-align: right; }
.scanpay-total strong { font-size: 1rem; }
.scanpay-perks { display: flex; justify-content: space-between; gap: .5rem; margin: .8rem 0; padding: 0; list-style: none; }
.scanpay-perks li { position: relative; padding-left: .85rem; color: #374151; font-size: .68rem; font-weight: 650; white-space: nowrap; }
.scanpay-perks li::before { content: "✓"; position: absolute; left: 0; color: #16a34a; font-weight: 900; }
.scanpay-stripe { padding: .9rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; }
#stripe-payment-element, #stripe-payment-element.StripeElement { height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
.scanpay-loading { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 150px; color: #6b7280; font-size: .78rem; }
.scanpay-loading span { width: 16px; height: 16px; border: 2px solid #99f6e4; border-top-color: #0f766e; border-radius: 50%; animation: scanpay-spin .8s linear infinite; }
@keyframes scanpay-spin { to { transform: rotate(360deg); } }
.scanpay-error { margin: .65rem 0 0 !important; padding: .55rem .65rem; border: 1px solid #fecaca; border-radius: 7px; background: #fef2f2; color: #b91c1c !important; font-size: .72rem !important; font-weight: 650; }
.scanpay-submit { position: sticky; bottom: 0; z-index: 5; width: 100%; min-height: 48px; margin-top: .75rem; padding: .75rem 1rem; border: 0; border-radius: 8px; background: #0f9f91; color: #fff; font-size: .9rem; font-weight: 800; cursor: pointer; box-shadow: 0 0 0 12px #fafafa, 0 -9px 14px 7px rgba(250, 250, 250, .97), 0 2px 6px rgba(0, 0, 0, .16); }
.scanpay-submit:hover { background: #0d887d; }
.scanpay-submit:disabled { background: #99d5cf; cursor: default; }
.scanpay-brands { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 1rem 0 .65rem; }
.scanpay-brands > span { padding: .25rem .38rem; border-radius: 4px; background: #eef2f7; color: #1f4f91; font-size: .56rem; font-weight: 900; letter-spacing: -.02em; }
.scanpay-brands > span:nth-child(2) { color: #b91c1c; }
.scanpay-brands > span:nth-child(3) { background: #2563a8; color: #fff; }
.scanpay-brands > span:nth-child(4) { color: #374151; }
.scanpay-brands small { margin-left: .2rem; color: #9ca3af; font-size: .62rem; }
.scanpay-brands small strong { color: #635bff; }
.scanpay-fine { padding-top: .75rem; border-top: 1px solid #eef0f3; color: #9ca3af; text-align: center; }
.scanpay-fine > strong { display: inline-flex; align-items: center; gap: .35rem; color: #059669; font-size: .7rem; }
.scanpay-fine p { margin: .45rem 0 0 !important; color: #9ca3af; font-size: .65rem !important; line-height: 1.55; text-align: left; }
.scanpay-fine a { color: #0f766e; text-decoration: underline; }
.subscribe-powered { margin: .65rem 0 0 !important; color: var(--muted); font-size: .75rem !important; text-align: center; }
.subscribe-terms { margin: 1rem 0 0 !important; color: var(--muted); font-size: .72rem !important; line-height: 1.55; }
.subscribe-terms a { text-decoration: underline; }
@media (max-width: 720px) {
  .subscribe-modal-card { width: 100%; max-height: calc(100dvh - 20px); }
  .subscribe-modal-card.is-checkout { width: 100%; max-height: 100dvh; border-radius: 0; }
  .subscribe-checkout { grid-template-columns: 1fr; grid-template-rows: 76px minmax(0, 1fr); height: 100dvh; }
  .scanpay-art { min-height: 76px; }
  .scanpay-art img { object-position: 50% 42%; }
  #scanpay-art-copy { display: none; }
  .scanpay-pane { padding: 1rem 1rem .8rem; }
  .scanpay-pane h2 { font-size: 1.1rem; }
  .scanpay-sub { margin-bottom: .65rem !important; font-size: .72rem !important; }
  .scanpay-order { padding: .65rem .75rem; }
  .scanpay-perks { margin: .65rem 0; }
  .scanpay-perks li { font-size: clamp(.54rem, 2.5vw, .66rem); }
  .scanpay-stripe { padding: .75rem; }
  .subscribe-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 20px); min-height: 0; overflow: hidden; }
  .subscribe-side { padding: 1rem 1.25rem; }
  .subscribe-brand { margin: 0; }
  .subscribe-side h2, .subscribe-side ul { display: none; }
  .subscribe-main { min-height: 0; overflow-y: auto; padding: 1.25rem; }
  .subscribe-plans > label { padding: .75rem; }
  .subscribe-pay { box-shadow: 0 0 0 12px var(--panel), 0 -10px 14px 8px rgba(17, 27, 46, .98), 0 2px 6px rgba(0, 0, 0, .3); }
}
@media (max-width: 720px) {
  @supports not (height: 100dvh) {
    .subscribe-modal-card, .subscribe-modal-card.is-checkout { max-height: calc(100vh - 20px); }
    .subscribe-modal-card.is-checkout { max-height: 100vh; }
    .subscribe-checkout { height: 100vh; }
    .subscribe-shell { height: calc(100vh - 20px); }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  /* !important because .header-account is declared later in this file, at the
     same specificity, and would otherwise win and sit next to the hamburger. */
  .desktop-nav, .header-cta, .header-premium { display: none; }
  .header-account { display: none !important; }
  .hamburger { display: flex; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .article-toc { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-grid, .page-hero-grid, .two-col, .kb-grid, .pillar-band { grid-template-columns: 1fr; }
  .home-active-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero-grid-llm .page-hero-art { order: -1; }
  .activity-stats { grid-template-columns: repeat(2, 1fr); }
  .activity-head { display: none; }
  .activity-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .3rem; }
  .activity-row .activity-target { grid-column: 1 / -1; }
  .activity-outcome, .activity-ip { font-size: .76rem; }
  .hero-art { order: -1; }
  .article-layout { grid-template-columns: 1fr; }
  .article-rail { position: static; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .steps-grid { flex-direction: column; }
  .steps-grid > .step-arrow { transform: rotate(90deg); }
  .result-head { grid-template-columns: auto 1fr; }
  .rs-actions li { grid-template-columns: auto minmax(0, 1fr); row-gap: .4rem; }
  .rs-action-link { grid-column: 2; justify-self: start; }
  .result-counts { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .share-cta { grid-template-columns: 1fr; padding: 1.4rem 1.5rem; }
  .eh-summary-grid { grid-template-columns: 1fr; }
  .eh-auth-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4, .stat-row { grid-template-columns: 1fr; }
  .scan-form, .pw-form { flex-direction: column; }
  .scan-form .btn, .pw-form .btn { width: 100%; }
  .scan-tablist { gap: .1rem; }
  .scan-tab { justify-content: center; padding: .55rem .55rem; font-size: .8rem; }
  .scan-pane { padding: 1rem; }
  .dropzone { grid-template-columns: 1fr; justify-items: start; gap: .8rem; }
  .eh-paste-card label, .eh-form-foot, .eh-section-head { align-items: flex-start; flex-direction: column; }
  .eh-paste-card label span { text-align: left; }
  .eh-form-foot .btn { width: 100%; }
  .eh-verdict { grid-template-columns: 1fr; }
  .eh-risk { width: 68px; height: 68px; }
  .eh-facts > div { grid-template-columns: 1fr; gap: .25rem; }
  .mobile-menu-note { display: none; }
  .mobile-featured, .mobile-nav-grid { grid-template-columns: 1fr; }
  .mobile-featured { border-bottom: 0; }
  .mobile-featured .link-card + .link-card { border-left: 0; border-top: 1px solid var(--line); padding-left: .1rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .grade { width: 72px; height: 72px; font-size: 1.9rem; border-radius: 16px; }
  .finding summary { grid-template-columns: 1fr; }
  .finding summary .sev { justify-self: start; }
  .page-cta { padding: 1.4rem; }
  .hero { padding: 2.6rem 0 2.2rem; }

  /* The category rail was a ragged staircase on a phone: each chip sized to
     its own text, so five chips made five different widths, and any label
     long enough to wrap centred itself - a <button> is text-align:center by
     default. One full-width row each, dot and label left, count hard right,
     and tall enough to hit with a thumb. */
  .rs-cats { display: grid; grid-template-columns: 1fr; gap: .4rem; padding: .9rem 1rem; }
  .rs-cat { width: 100%; min-height: 44px; padding: .5rem .8rem; text-align: left; line-height: 1.35; }
  .rs-cat b { margin-left: auto; padding-left: .6rem; }

  /* Three columns inside a 390px card left the title a sliver to wrap in.
     Badge and title share the first row; the jump link moves under them,
     aligned with the title rather than floating at the right edge. */
  a.rs-item { grid-template-columns: auto minmax(0, 1fr); row-gap: .45rem; gap: .7rem; }
  .rs-jump { grid-column: 2; justify-self: start; }

  .lock-strip { grid-template-columns: auto minmax(0, 1fr); row-gap: .7rem; }
  .lock-strip .btn { grid-column: 1 / -1; width: 100%; }

  /* The gate stacks: a nowrap button beside two text columns does not fit. */
  .df-gate { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: .8rem; }
  .df-gate .btn { width: 100%; }

  /* The summary pills had the same ragged-width problem. Two even columns
     read as a block instead of a staircase. The copy button is the odd one
     out - it carries a longer label, so it takes the full width. */
  .result-counts { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
  .count-pill { min-height: 38px; padding: .35rem .6rem; justify-content: center; }
  .pill-copy, .pill-chain { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Utilities (no inline styles: the CSP forbids them) ---------- */
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: .8rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.2rem; } .mt-5 { margin-top: 1.5rem; } .mt-6 { margin-top: 2rem; } .mt-7 { margin-top: 2.5rem; }
.ml-3 { margin-left: 1rem; } .center { justify-content: center; } .fs-md { font-size: 1.25rem; } .fs-sm { font-size: 1.2rem; }
.rail-title { display: block; color: #fff; margin-bottom: .4rem; }
.mono-sm { font-size: .78rem; font-family: var(--mono); }
.wrap-any { overflow-wrap: anywhere; word-break: break-all; }
.mb-1 { margin-bottom: .4rem; }
.dot-critical { background: #fb7185; } .dot-high { background: #ef4444; } .dot-medium { background: #f59e0b; } .dot-low { background: #a78bfa; } .dot-info { background: #60a5fa; } .dot-pass { background: #22c55e; }
.text-bad { color: #fca5a5; } .text-good { color: #86efac; } .text-warn { color: #fcd34d; }
.fb-line { margin: .5rem 0 0; }

/* --- Pricing ------------------------------------------------------------- */
.billing-toggle { display: inline-flex; gap: .25rem; padding: .3rem; margin: 0 auto 2rem; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; }
.pricing-grid + .pricing-foot { margin-top: 1.75rem; }
.billing-toggle { display: flex; width: fit-content; }
.bt-opt { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; border: 0; border-radius: 7px; background: transparent; color: var(--soft); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.bt-opt:hover { color: var(--text); }
.bt-opt.is-on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.bt-save { padding: .15rem .45rem; border-radius: 5px; background: rgba(45, 212, 191, .16); color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; padding: 2rem 1.75rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.plan-featured { border-color: rgba(45, 212, 191, .45); background: linear-gradient(180deg, rgba(45, 212, 191, .07), transparent 55%), var(--panel); }
.plan-flag { position: absolute; top: -.75rem; left: 1.75rem; padding: .25rem .65rem; border-radius: 6px; background: var(--accent); color: #062225; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.plan-name { margin: 0; font-size: 1.35rem; }
.plan-tagline { margin: .4rem 0 0; color: var(--soft); font-size: .9rem; }
.plan-price { margin: 1.4rem 0 1.1rem; }
.price-when { display: flex; flex-direction: column; gap: .15rem; }
.price-amt { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.price-cur { margin-right: .1rem; font-size: 1.4rem; font-weight: 700; vertical-align: super; color: var(--soft); }
.price-per { color: var(--soft); font-size: .85rem; font-weight: 600; }
.price-note { margin-top: .35rem; min-height: 2.2em; color: var(--muted); font-size: .8rem; }
.plan-credits { display: flex; flex-direction: column; gap: .1rem; padding: .85rem 1rem; margin-bottom: 1.1rem; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel-2); font-size: .9rem; }
.plan-pages { color: var(--soft); font-size: .8rem; }
.plan-features { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .6rem; }
.plan-features li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; align-items: start; font-size: .88rem; }
.plan-features svg { margin-top: .15rem; color: var(--accent); }
.plan-features .pf-no { color: var(--muted); }
.plan-features .pf-no svg { color: var(--muted); }
.pricing-foot { color: var(--muted); font-size: .85rem; }

.credit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: center; margin-top: 1.5rem; }
.credit-step { padding: 1.5rem; border: 1px solid var(--line); border-top-color: rgba(45, 212, 191, .52); border-radius: var(--radius); background: linear-gradient(145deg, rgba(45, 212, 191, .045), transparent 48%), var(--panel); height: 100%; }
.credit-step h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.credit-step p { margin: 0; color: var(--soft); font-size: .88rem; }
.credit-ico { display: inline-flex; padding: .55rem; border-radius: 9px; background: var(--panel-2); color: var(--accent); }
.credit-arrow { color: var(--line-2); }

.table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: .9rem; }
.cmp-table th, .cmp-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.cmp-table thead th { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }
.cmp-table tbody th { font-weight: 600; color: var(--text); }
.cmp-table td { text-align: center; color: var(--soft); }
.cmp-table thead th:not(:first-child) { text-align: center; }
.cmp-table tbody tr:hover { background: var(--panel); }
.cmp-yes { color: var(--accent); }
.cmp-no { color: var(--line-2); }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .credit-row { grid-template-columns: 1fr; }
  .credit-arrow { transform: rotate(90deg); justify-self: center; }
}
.modal-chosen { padding: .6rem .85rem; margin: .75rem 0 0; border: 1px solid rgba(45, 212, 191, .3); border-radius: 8px; background: rgba(45, 212, 191, .08); color: var(--text); font-size: .88rem; font-weight: 600; }

/* --- Phishing checker: verdict, destination, chain ------------------------ */
.ph-verdict { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.4rem 1.5rem; margin: 1.5rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.ph-verdict strong { display: block; font-size: 1.25rem; }
.ph-verdict p { margin: .35rem 0 0; color: var(--soft); font-size: .92rem; }
.ph-danger { border-color: rgba(248, 113, 113, .45); background: linear-gradient(180deg, rgba(248, 113, 113, .1), transparent 70%), var(--panel); }
.ph-danger svg { color: #f87171; }
.ph-warn { border-color: rgba(251, 191, 36, .42); background: linear-gradient(180deg, rgba(251, 191, 36, .09), transparent 70%), var(--panel); }
.ph-warn svg { color: #fbbf24; }
.ph-ok { border-color: rgba(45, 212, 191, .38); background: linear-gradient(180deg, rgba(45, 212, 191, .08), transparent 70%), var(--panel); }
.ph-ok svg { color: var(--accent); }

.ph-dest { padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.ph-dest-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.ph-dest-head h3 { margin: 0; font-size: 1.1rem; }
.ph-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: center; margin: 1.25rem 0; }
.ph-node { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.ph-node code { font-size: 1.05rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.ph-node-label { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ph-node-sub { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.ph-node-ok { border-color: rgba(45, 212, 191, .35); }
.ph-node-bad { border-color: rgba(251, 191, 36, .45); }
.ph-jump { display: flex; flex-direction: column; align-items: center; gap: .25rem; color: var(--soft); font-size: .76rem; text-align: center; }
.ph-jump svg { color: var(--accent); }
.ph-dest-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .1rem 1.5rem; }
.ph-dest-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .87rem; }
.ph-dest-facts span { color: var(--soft); }
.ph-dest-facts b { text-align: right; overflow-wrap: anywhere; }
.ph-dest-err { display: flex; gap: .5rem; align-items: center; margin: 1rem 0 0; color: var(--muted); font-size: .85rem; }

.ph-chain { padding: 1.5rem; margin: 1.75rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); scroll-margin-top: 90px; }
.ph-chain h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.ph-chain-note { margin: 0 0 1.1rem; color: var(--soft); font-size: .87rem; }
.ph-hops { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ph-hops li { display: grid; grid-template-columns: 28px 1fr; gap: .85rem; align-items: start; padding: .8rem 1rem; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel-2); }
.ph-hop-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel); color: var(--soft); font-size: .8rem; font-weight: 800; }
.ph-hop-url { display: block; font-size: .88rem; overflow-wrap: anywhere; }
.ph-hop-meta { display: block; margin-top: .3rem; color: var(--muted); font-size: .8rem; }
.ph-hop-meta code { overflow-wrap: anywhere; }
.ph-code-redir { color: #fbbf24; }
.ph-code-ok { color: var(--accent); }
.ph-code-bad { color: #f87171; }
.pill-chain { color: var(--accent); }
.text-ok { color: var(--accent); }

@media (max-width: 760px) {
  .ph-flow { grid-template-columns: 1fr; }
  .ph-jump { flex-direction: row; }
  .ph-dest-facts { grid-template-columns: 1fr; }
}

/* Premium is the paid tier, so it gets its own colour - but built the same
   way .btn-primary is: one flat fill from a token, dark ink, no gradient and
   no animation. The earlier version had a five-stop metallic gradient, a
   sweeping highlight and three stacked shadows, which read as decoration
   rather than as part of this interface. */
.btn-gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 700; }
.btn-gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--gold-ink); }
.btn-gold svg { color: currentColor; opacity: .8; }

/* The two header buttons read as a pair: same height, same radius, one quiet
   and one loud. */
.header-premium { flex-shrink: 0; min-height: 38px; padding: 0 .85rem; font-size: .88rem; }
/* Not a button: an account control. The square mark carries the icon while
   signed out and the first letter of the address once signed in, which is
   what tells you at a glance which of the two states you are in. */
.header-account { display: inline-flex; align-items: center; gap: .55rem; flex-shrink: 0; min-height: 38px; padding: .2rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--soft); font-size: .88rem; font-weight: 650; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.header-account.is-in { padding-left: .25rem; }
.header-account:hover { background: var(--panel-3); border-color: var(--line-2); color: #fff; }
.header-account-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--panel-3); border: 1px solid var(--line); color: var(--muted); font-size: .78rem; font-weight: 700; line-height: 1; }
.header-account:hover .header-account-mark { color: var(--accent); border-color: var(--line-2); }
.header-account.is-in .header-account-mark { background: rgba(45, 212, 191, .13); border-color: rgba(45, 212, 191, .34); color: var(--accent); text-transform: uppercase; }

/* Tool pages: what the tool covers, without a wall of every check. */
.cover-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-bottom: 1.5rem; }
.cover-area { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.cover-area h3 { margin: 0; font-size: .88rem; font-weight: 700; }
.cover-area span { color: var(--muted); font-size: .78rem; }
.cover-lead { margin: 0 0 .9rem; color: var(--soft); font-size: .9rem; }
.cover-more { margin-top: 1.1rem; }
.modal-title { font-family: var(--font-display, inherit); font-weight: 800; line-height: 1.2; color: var(--text); }
.kb-fits h3 { margin: 1.4rem 0 .4rem; font-size: 1.02rem; }
.kb-fits p { color: var(--soft); }
/* The FAQ question is a real h3 now (it always was one, semantically); this
   keeps it looking exactly like the summary line it has always been. */
.faq-item summary h3 { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.45; color: inherit; font-family: inherit; }
.tools-intro { margin-bottom: 3rem; }
.tools-intro h3 { margin-top: 1.8rem; }
.steps-grid { list-style: none; margin: 0; padding: 0; }
.steps-grid > .step { position: relative; display: flex; flex-direction: column; }
.step h3 { display: block; margin: 0 0 .3rem; color: #fff; font-size: 1rem; font-weight: 700; }
.tool-related { color: var(--soft); font-size: .95rem; }
.licence-block { padding: 1.3rem 1.5rem; margin: 1.2rem 0 2rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--panel); }
.licence-block h3 { margin-top: 0; }
.licence-block blockquote { margin: .8rem 0; padding-left: 1rem; border-left: 2px solid var(--line-2); color: var(--soft); font-size: .9rem; }
.licence-content { display: grid; gap: 3rem; }
.licence-content > section { min-width: 0; }
.licence-intro { padding: 1.5rem 1.6rem; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, var(--panel), rgba(45, 212, 191, .035)); }
.licence-intro h2 { margin-top: 0; }
.licence-intro p:last-child { margin-bottom: 0; }
.licence-source { scroll-margin-top: 110px; }
.licence-source-head { display: block; margin-bottom: 1rem; }
.licence-source-head p { margin: 0 0 .1rem; color: var(--muted); font-size: .88rem; }
.licence-source-head h2 { margin: 0; }
.licence-facts { display: grid; margin: 0 0 1.25rem; border-bottom: 1px solid var(--line); }
.licence-facts div { display: grid; grid-template-columns: minmax(95px, .35fr) minmax(0, 1fr); gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.licence-facts dt { color: var(--muted); font-size: .86rem; }
.licence-facts dd { margin: 0; color: var(--text); font-size: .9rem; font-weight: 650; }
.licence-source-direct { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.licence-rail { position: sticky; top: 92px; }
.licence-index { padding: 1.35rem; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); }
.licence-index h2, .licence-related h2 { margin: 0; font-size: 1.1rem; }
.licence-index > p { margin: .35rem 0 1rem; color: var(--muted); font-size: .86rem; }
.licence-index > a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--line); color: var(--text); }
.licence-index > a:hover strong { color: var(--accent); }
.licence-index > a > svg { color: var(--muted); }
.licence-index-number { color: var(--accent); font: 750 .7rem/1 var(--mono); letter-spacing: .04em; }
.licence-index strong, .licence-index small { display: block; }
.licence-index strong { font-size: .88rem; line-height: 1.35; }
.licence-index small { margin-top: .1rem; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.licence-related .card-body { padding-bottom: .7rem; }
@media (max-width: 900px) {
  .licence-rail { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
  .licence-related { margin-top: 0; }
}
@media (max-width: 620px) {
  .licence-content { gap: 2.4rem; }
  .licence-intro, .licence-block { padding: 1.15rem; }
  .licence-facts div { grid-template-columns: 1fr; gap: .2rem; }
  .licence-rail { grid-template-columns: 1fr; }
}

/* --- Site search in the header ------------------------------------------- */
.header-search-btn { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--muted); font: inherit; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.header-search-btn:hover { background: var(--panel-3); border-color: var(--line-2); color: #fff; }
.hsb-label, .hsb-key { display: none; }
.hsb-label { font-weight: 600; }
.hsb-key { padding: .05rem .35rem; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); color: var(--muted); font-family: inherit; font-size: .72rem; line-height: 1.4; }

.search-overlay { position: fixed; inset: 0; z-index: 300; display: flex; justify-content: center; padding: 8vh 1rem 1rem; }
.search-panel { position: relative; z-index: 1; width: min(680px, 100%); align-self: flex-start; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); overflow: hidden; }
.search-panel-form { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.search-panel-form > svg { color: var(--muted); flex: none; }
.search-panel-form input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.05rem; outline: none; }
.search-panel-form input::placeholder { color: var(--muted); }
.search-close { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.search-close:hover { background: var(--panel-2); color: var(--text); }
.search-suggest { max-height: min(52vh, 430px); overflow-y: auto; }
.search-hit { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: .1rem .8rem; align-items: baseline; padding: .7rem 1rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.search-hit:hover, .search-hit.is-active { background: var(--panel-2); }
.search-kind { grid-row: span 2; align-self: center; padding: .2rem .45rem; border: 1px solid var(--line-2); border-radius: 5px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-align: center; }
.search-hit-title { color: var(--text); font-weight: 650; font-size: .95rem; }
.search-hit-path { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.search-none { margin: 0; padding: 1.1rem 1rem; color: var(--muted); font-size: .9rem; }
.search-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .65rem 1rem; background: var(--panel-2); color: var(--muted); font-size: .76rem; }
.search-hint kbd { padding: .05rem .3rem; margin-right: .15rem; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); font-family: inherit; font-size: .72rem; }
.search-hint a { margin-left: auto; color: var(--accent); display: inline-flex; align-items: center; gap: .3rem; }
/* On a phone the hero illustration is half a screen of decoration standing
   between the visitor and the thing they came to do. It is hidden rather than
   removed from the markup: it is still this page's primary image for a search
   engine and for a link preview, and the preload that fetches it carries a
   media query so no phone pays for it. Hiding it also hands the LCP to the
   headline, which is the honest candidate on a small screen anyway. */
@media (max-width: 620px) {
  .hero-art, .page-hero-art { display: none; }
  .hero-grid, .page-hero-grid { gap: 0; }
  .page-hero-grid { margin-top: .9rem; }
}

.plan-extra { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--line); color: var(--accent); font-size: .84rem; font-weight: 650; }
.plan-extra svg { flex: 0 0 auto; }

/* ---------- Phones ----------
   One place for the small-screen pass, so the next person changing a layout
   can see what it costs on a phone without hunting through six blocks. */
@media (max-width: 620px) {
  /* 7.5vw of a 390px screen is 29px a side. On a phone that is a tenth of
     the readable width spent on nothing. */
  :root { --gutter: 1.15rem; }
  /* Desktop section rhythm is 56px top and bottom; on a phone that is most
     of a screen of emptiness between every band. */
  .section { padding: 2.25rem 0; }
  .section-tight { padding: 1.5rem 0; }
  h1 { letter-spacing: -.02em; }
  .deck { font-size: 1rem; }
  .brand { font-size: 1.12rem; min-width: 0; }
  .header-inner { gap: .5rem; }
  .pricing-grid { grid-template-columns: 1fr; gap: 1rem; }
  .plan { padding: 1.5rem 1.25rem; }
  .credit-row { grid-template-columns: 1fr; }
  .result-actions { display: grid; grid-template-columns: 1fr; }
  .result-actions .btn { width: 100%; }
  .two-col > aside { order: 2; }
  .prose pre { font-size: .78rem; padding: .85rem .9rem; }
  .faq-item summary h3 { font-size: .98rem; }
  .home-active-grid { grid-template-columns: 1fr; }
  .gate-card { padding: 1.4rem 1.1rem 1.25rem; }
  .gate-card p { font-size: .9rem; }
  .dash-head-actions { width: 100%; }
  .dash-head-actions .btn { flex: 1; justify-content: center; }
  .upsell-list li { grid-template-columns: 1fr; gap: .35rem; }
  /* A table that scrolls should say so rather than looking truncated. */
  .table-wrap { -webkit-overflow-scrolling: touch; }
}
/* A 36px control is under every published minimum for a finger. Pointer
   coarse rather than a width, because that is the actual condition. */
@media (pointer: coarse) {
  .btn-sm { min-height: 42px; }
  .nav-link, .mob-link, .footer-col a { padding-block: .6rem; }
}
@media (max-width: 420px) {
  .page-cta { padding: 1.2rem; }
  .page-cta .btn { width: 100%; }
  .dash-stat-pair { grid-template-columns: 1fr; }
  .stat { padding: 1rem 1.1rem; }
  .gate-ghost { height: 48px; }
}

@media (max-width: 560px) { .search-overlay { padding: 0; } .search-panel { width: 100%; height: 100%; border-radius: 0; border: 0; } .search-suggest { max-height: calc(100vh - 140px); } }
.home-answer { margin-bottom: 1rem; }
.home-answer ol { padding-left: 1.2rem; }
.home-answer ol li { margin-bottom: .75rem; }
.audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.audience { padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.audience h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.audience p { margin: 0; color: var(--soft); font-size: .9rem; }

/* Comparison tables: the left column labels the row, so it reads as a label
   and not as a second column heading. */
.compare-table { min-width: 0; table-layout: auto; }
.compare-table thead th { text-align: left; }
.compare-table thead th:first-child { width: 30%; background: transparent; }
.compare-table tbody th {
  width: 30%;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 650;
  font-size: .86rem;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: top;
}
.compare-table tbody td { color: var(--soft); vertical-align: top; }
.compare-table tbody tr:hover td { color: var(--text); }
/* A free-vs-paid table reads as two columns of answers against one column of
   questions, so the answers are centred and narrow and the label column takes
   the room it needs. The paid column carries the same gold as the rest of the
   premium identity, which is what makes the shape of the offer readable
   before any of the words are. */
.plan-table thead th:first-child { width: 44%; }
.plan-table thead th:not(:first-child),
.plan-table tbody td { width: 28%; text-align: center; }
.plan-table tbody th { width: auto; font-weight: 600; }
.plan-table tbody td { white-space: nowrap; }
.plan-table thead th:last-child,
.plan-table tbody td:last-child { background: rgba(216, 163, 44, .07); }
.plan-table tbody tr:last-child td:last-child { border-radius: 0 0 var(--radius) 0; }
.pt-paid { display: inline-flex; align-items: center; gap: .35rem; color: var(--gold); }
.pt-yes { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent); font-weight: 650; }
.pt-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; padding: .1rem .45rem; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--line-2); color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pt-more { color: var(--gold); font-weight: 650; }
@media (max-width: 640px) {
  .plan-table tbody td { white-space: normal; }
}

@media (max-width: 640px) {
  .compare-table { min-width: 460px; }
}

/* Header crowding. Four actions plus seven nav items do not fit a laptop, so
   they drop in order of how easily the page replaces them: the scan button
   first (the hero carries a scan form and the nav carries the scanners), then
   the search label, then the nav itself. Log in and Premium survive longest,
   because nothing else on the page offers them. */
@media (max-width: 1500px) {
  .header-cta { display: none; }
}
@media (max-width: 1360px) {
  .nav-link { padding: .5rem .5rem; font-size: .88rem; }
  .header-inner { gap: .9rem; }
}
@media (max-width: 1500px) { .nav-drop-1 { display: none; } }
@media (max-width: 1380px) { .nav-drop-2 { display: none; } }
@media (max-width: 1260px) { .nav-drop-3 { display: none; } }
/* Log in and Premium sit at the top of the mobile panel, not buried under
   Reference: they are the two things a returning visitor opens the menu for. */
/* Install walkthrough: the diagrams carry their own dark ground, so they sit
   on the page without a frame fighting them. */
.install-shot { margin: 1.3rem 0 1.6rem; }
.install-shot img { width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius); }
.install-shot figcaption { margin-top: .6rem; font-size: .85rem; color: var(--muted); }

/* Every multi-column layout on the site, told that its children may shrink.
   A grid or flex child defaults to min-width:auto, meaning it refuses to go
   narrower than its widest unbreakable content - so one tab strip, table or
   long URL drags the entire page wider than the phone and, because the root
   clips rather than scrolls, silently cuts off everything beside it. */
.hero-grid > *, .page-hero-grid > *, .two-col > *, .article-layout > *,
.dash-shell > *, .result-head > *, .credit-row > *, .steps-grid > *,
.feature > *, .rs-item > *, .activity-row > * { min-width: 0; }
.scan-chooser, .scan-pane, .scan-form { max-width: 100%; }
/* Long unbreakable strings - a URL in a finding, a hash, a header value -
   are the other half of the same problem. */
.prose a, .finding-detail, .dash-target, .breadcrumb { overflow-wrap: anywhere; }

/* ---------- Monitored sites ---------- */
.site-add { display: flex; gap: .6rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.site-add .field { flex: 1; min-width: 14rem; display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; min-height: 46px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--muted); }
.site-add .field:focus-within { border-color: var(--accent); }
.site-add input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; outline: 0; }
.site-add .btn { min-height: 46px; }
.site-list { display: grid; gap: .6rem; }
.site-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.site-row.is-unverified { border-color: rgba(245, 158, 11, .35); }
.site-main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.site-main strong { color: #fff; font-family: var(--mono); font-size: .92rem; word-break: break-all; }
.site-main small { flex-basis: 100%; color: var(--muted); font-size: .8rem; }
.site-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.site-actions form { margin: 0; }
.site-proof { grid-column: 1 / -1; margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.site-proof > p { font-size: .88rem; }
.site-proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-bottom: .6rem; }

/* ---------- Outreach report conversion ---------- */
.outreach-report-cta { overflow: hidden; border-color: rgba(216,163,44,.46); background: radial-gradient(circle at 90% 5%, rgba(216,163,44,.12), transparent 34%), var(--panel); box-shadow: 0 22px 60px rgba(0,0,0,.18); }
.outreach-report-cta .card-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 2rem; align-items: center; padding: 1.8rem 2rem; }
.report-cta-copy h2 { margin: 0 0 .65rem; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.report-cta-copy > p { max-width: 760px; margin: 0; color: var(--soft); line-height: 1.65; }
.report-cta-coverage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; max-width: 820px; margin-top: .9rem; padding: .75rem .85rem; border: 1px solid rgba(245,158,11,.35); border-radius: 10px; background: rgba(245,158,11,.08); color: var(--warn); }
.report-cta-coverage span { color: var(--soft); font-size: .88rem; line-height: 1.55; }
.report-cta-coverage strong { color: #fde68a; }
.report-cta-stats { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0; }
.report-cta-stats span { padding: .5rem .7rem; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel-2); color: var(--muted); font-size: .82rem; }
.report-cta-stats strong { color: #fff; font-size: .95rem; }
.report-cta-benefits { display: grid; gap: .45rem; margin: .8rem 0 0; padding-left: 1.2rem; color: var(--soft); font-size: .9rem; }
.report-cta-benefits li::marker { color: var(--gold); }
.report-cta-action { display: grid; min-width: 0; gap: .75rem; align-content: center; padding: 1.25rem; border: 1px solid rgba(216,163,44,.35); border-radius: 14px; background: rgba(8,16,30,.55); text-align: center; }
.report-cta-action .btn { width: 100%; max-width: 100%; min-width: 0; padding-inline: .9rem; white-space: normal; line-height: 1.25; }
.report-cta-price { display: flex; justify-content: center; align-items: baseline; gap: .4rem; }
.report-cta-price strong { color: var(--gold); font-size: 2rem; letter-spacing: -.04em; }
.report-cta-price span, .report-cta-action small { color: var(--muted); }

@media (max-width: 800px) {
  .outreach-report-cta .card-body { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.35rem; }
  .report-cta-action { padding: 1rem; }
}

/* ---------- Scan-specific outreach offer ---------- */
.outreach-offer { max-width: 1240px; }
.offer-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 2.1rem 2.2rem; border: 1px solid var(--line-2); border-radius: 20px; background: radial-gradient(circle at 90% 10%, rgba(45,212,191,.10), transparent 30%), var(--panel); }
.offer-hero h1 { max-width: 980px; margin: 0; font-size: clamp(2.15rem, 5vw, 4.6rem); line-height: 1.03; letter-spacing: -.045em; overflow-wrap: anywhere; }
.offer-hero p { max-width: 850px; margin: 1rem 0 0; color: var(--soft); font-size: 1.08rem; line-height: 1.7; }
.offer-coverage-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; max-width: 900px; margin-top: 1rem; padding: .8rem .9rem; border: 1px solid rgba(245,158,11,.35); border-radius: 10px; background: rgba(245,158,11,.08); color: var(--warn); }
.offer-coverage-callout span { color: var(--soft); font-size: .9rem; line-height: 1.55; }
.offer-coverage-callout strong { color: #fde68a; }
.offer-hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }
.offer-hero-actions > a:not(.btn) { font-size: .9rem; }
.offer-grade { display: grid; justify-items: center; gap: .45rem; min-width: 100px; }
.offer-grade .grade { width: 82px; height: 82px; font-size: 2rem; }
.offer-grade small { color: var(--muted); }
.offer-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 1rem 0 1.4rem; }
.offer-kpis > div { display: grid; gap: .25rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.offer-kpis strong { color: #fff; font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.offer-kpis span { color: var(--muted); font-size: .82rem; }
.offer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.2rem; align-items: start; }
.offer-details { display: grid; gap: 1.2rem; }
.offer-details h2, .offer-checkout h2 { margin-top: 0; }
.offer-unlocks { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.offer-unlocks > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--accent); }
.offer-unlocks span { display: grid; gap: .25rem; }
.offer-unlocks strong { color: #fff; }
.offer-unlocks small { color: var(--muted); line-height: 1.5; }
.offer-findings { display: grid; gap: .55rem; }
.offer-findings > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.offer-findings strong { color: #fff; overflow-wrap: anywhere; }
.offer-locked { display: inline-flex; align-items: center; gap: .3rem; color: var(--gold); font-size: .78rem; white-space: nowrap; }
.offer-scope { display: grid; gap: .65rem; padding-left: 1.2rem; color: var(--soft); }
.offer-scope li::marker, .offer-checkout li::marker { color: var(--accent); }
.offer-checkout { position: sticky; top: 92px; border-color: rgba(216,163,44,.45); box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.offer-checkout .card-body { padding: 1.5rem; }
.offer-price { display: flex; align-items: baseline; gap: .5rem; margin: .2rem 0 .8rem; }
.offer-price strong { color: var(--gold); font-size: 2.25rem; letter-spacing: -.04em; }
.offer-price span { color: var(--muted); }
.offer-checkout ul { display: grid; gap: .6rem; margin: 1.1rem 0 1.35rem; padding-left: 1.2rem; color: var(--soft); font-size: .9rem; }
.offer-terms { margin: 1rem 0 .8rem; color: var(--faint); font-size: .78rem; line-height: 1.55; }
.outreach-payment-card { overflow: hidden; }
.outreach-payment-art img { filter: saturate(.85) contrast(1.05); }

@media (max-width: 900px) {
  .offer-layout { grid-template-columns: 1fr; }
  .offer-checkout { position: static; order: -1; }
  .offer-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .offer-hero { grid-template-columns: 1fr; padding: 1.35rem; }
  .offer-hero h1 { font-size: 2.25rem; }
  .offer-hero-actions .btn { width: 100%; white-space: normal; text-align: center; }
  .offer-grade { grid-template-columns: auto auto; justify-content: start; align-items: center; }
  .offer-grade .grade { width: 62px; height: 62px; font-size: 1.5rem; }
  .offer-unlocks { grid-template-columns: 1fr; }
  .offer-findings > div { grid-template-columns: auto minmax(0, 1fr); }
  .offer-locked { grid-column: 2; }
}
.site-proof small { display: block; margin-bottom: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.site-paths { margin: 0; padding-left: 1.1rem; }
.site-paths li { margin-bottom: .3rem; }
.site-paths code { font-size: .78rem; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .site-row { grid-template-columns: 1fr; }
  .site-proof-grid { grid-template-columns: 1fr; }
}

/* ---------- Thank you ---------- */
.thanks { max-width: 680px; padding: 3rem 0 4rem; }
.thanks-card { padding: 2.4rem 2rem 2rem; text-align: center; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); }
.thanks-mark { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 1.1rem; border-radius: 50%; background: rgba(45, 212, 191, .13); border: 1px solid rgba(45, 212, 191, .35); color: var(--accent); }
.thanks-card h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: .5rem; }
.thanks-lead { max-width: 38rem; margin: 0 auto 1.5rem; color: var(--soft); }
.thanks-status { margin: 0 0 1.2rem; font-size: .9rem; color: var(--muted); }
.thanks-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.thanks-note { margin: 1.4rem auto 0; max-width: 38rem; font-size: .86rem; color: var(--muted); }
.thanks-next { margin-top: 2.6rem; }
.thanks-next h2 { font-size: 1.25rem; }
@media (max-width: 620px) { .thanks-actions .btn { width: 100%; } .thanks-card { padding: 1.8rem 1.2rem 1.4rem; } }

/* ---------- Dashboard ----------
   Console layout: a filter rail on the left holding the plan and its meters,
   a dense table on the right. Structure borrowed from the ShareIt.onl file
   manager; every colour is this site's own. */
.dash { padding: 2rem 0 4rem; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.dash-head h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.dash-sub { margin: .3rem 0 0; color: var(--muted); font-family: var(--mono); font-size: .86rem; }
.dash-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.dash-shell { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 2rem; align-items: start; margin-top: 1.6rem; }
.dash-rail { position: sticky; top: 90px; display: grid; gap: 2px; }
.dash-rail-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .58rem .75rem; border: 0; border-radius: 999px; background: none; color: var(--soft); font: inherit; font-size: .9rem; font-weight: 600; text-align: left; cursor: pointer; }
.dash-rail-item:hover { background: var(--panel); color: #fff; }
.dash-rail-item.active { background: rgba(45, 212, 191, .13); color: var(--accent); }
.dash-rail-item svg { color: currentColor; opacity: .85; }
.dash-count { margin-left: auto; padding: .05rem .5rem; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-rail-item.active .dash-count { background: rgba(45, 212, 191, .18); color: var(--accent); }

.dash-rail-foot { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.dash-plan { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.dash-plan-name { font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); }
.dash-plan-flag { padding: .1rem .4rem; border-radius: 4px; background: rgba(245, 158, 11, .16); color: var(--warn); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.dash-meter { margin-bottom: 1.1rem; }
.dash-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; font-size: .8rem; color: var(--soft); }
.dash-meter-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-meter-track { height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.dash-meter-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.dash-meter-note { margin: .45rem 0 .6rem; font-size: .76rem; color: var(--muted); line-height: 1.45; }
.dash-stat-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; margin: 1rem 0 .8rem; }
.dash-stat-pair div { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.dash-stat-pair strong { display: block; font-size: 1.15rem; color: #fff; font-variant-numeric: tabular-nums; }
.dash-stat-pair span { font-size: .72rem; color: var(--muted); }
.dash-rail-hint { margin: 0; font-size: .74rem; color: var(--faint); }

.dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.dash-toolbar h2 { margin: 0; font-size: 1.2rem; }
.dash-find { display: flex; align-items: center; gap: .5rem; min-width: 14rem; padding: 0 .8rem; min-height: 38px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); color: var(--muted); }
.dash-find input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: .88rem; outline: 0; }

.dash-table td { vertical-align: middle; }
.dash-target { font-family: var(--mono); font-size: .84rem; color: #fff; word-break: break-all; }
.dash-when { white-space: nowrap; color: var(--muted); }
.dash-open { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; font-weight: 600; }
.dash-grade { display: inline-grid; place-items: center; min-width: 2.1rem; padding: .12rem .4rem; border-radius: 6px; font-weight: 800; font-size: .8rem; }
.dash-grade-a { background: rgba(34, 197, 94, .16); color: #86efac; }
.dash-grade-b { background: rgba(45, 212, 191, .16); color: var(--accent); }
.dash-grade-c { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.dash-grade-d, .dash-grade-e, .dash-grade-f { background: rgba(239, 68, 68, .16); color: #fca5a5; }
.dash-flag { padding: .12rem .45rem; border-radius: 5px; font-size: .72rem; font-weight: 700; }
.dash-flag-ok { background: rgba(34, 197, 94, .14); color: #86efac; }
.dash-flag-warn { background: rgba(245, 158, 11, .14); color: #fcd34d; }
.dash-flag-bad { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.dash-section-title { margin: 2.4rem 0 .9rem; font-size: 1.2rem; }
.dash-empty { padding: 3rem 1.5rem; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); background: var(--panel); color: var(--muted); }
.dash-empty svg { color: var(--line-2); margin-bottom: .6rem; }
.dash-empty h3 { margin: 0 0 .3rem; }
.dash-empty p { max-width: 34rem; margin: 0 auto 1.2rem; }
.dash-empty-filter { padding: 1.2rem; text-align: center; color: var(--muted); }
.dash-footer-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-rail { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: .4rem; }
  .dash-rail-foot { display: none; }
}

/* ---------- The sign-in gate ----------
   A fade into three blurred ghost rows, then the lock. The ghosts are drawn
   by CSS and hold no text: the findings behind this are not in the page at
   all, so there is nothing here that a reader could recover by looking. */
.gate { position: relative; margin-top: -1px; }
.gate-fade { position: relative; display: grid; gap: .5rem; padding-top: .5rem; pointer-events: none; }
.gate-ghost { height: 58px; border: 1px solid var(--line); border-radius: var(--radius); background:
  linear-gradient(90deg, var(--panel-2) 0 22%, var(--panel) 22% 100%); }
.gate-ghost:nth-child(2) { opacity: .55; }
.gate-ghost:nth-child(3) { opacity: .25; }
.gate-fade::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, .72) 45%, var(--bg) 92%); }
.gate-card { position: relative; margin-top: -3.2rem; padding: 1.8rem 1.6rem 1.6rem; text-align: center;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel);
  box-shadow: var(--shadow); }
.gate-lock { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto .8rem;
  border-radius: 50%; background: rgba(45, 212, 191, .12); border: 1px solid rgba(45, 212, 191, .3);
  color: var(--accent); }
.gate-card strong { display: block; font-size: 1.15rem; color: #fff; }
.gate-card p { max-width: 34rem; margin: .4rem auto 1.1rem; color: var(--muted); font-size: .94rem; }
.gate-card small { display: block; margin-top: .7rem; font-size: .8rem; color: var(--faint); }
.outreach-gate-cta { max-width: 100%; white-space: normal; line-height: 1.25; text-align: center; }
.outreach-gate-cta svg { flex: 0 0 auto; }
.outreach-gate-cta span { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .gate-card { padding: 1.4rem 1.1rem 1.25rem; }
  .gate-card p { font-size: .9rem; }
  .outreach-gate-cta { width: 100%; min-width: 0; height: auto; padding: .75rem .8rem; }
}

/* ---------- Log in ---------- */
.login-choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; margin-top: 2rem; }
.login-card { display: flex; flex-direction: column; padding: 1.6rem 1.5rem 1.5rem; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel); }
.login-card h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
.login-card p { font-size: .93rem; margin-bottom: 1.3rem; }
/* The buttons line up with each other even when one card's copy runs a line
   longer, which is the whole point of putting the two side by side. */
.login-card .btn { margin-top: auto; }
.login-foot { margin-top: 1.1rem; font-size: .86rem; color: var(--muted); }
@media (max-width: 720px) { .login-choice { grid-template-columns: 1fr; } }

.mobile-account { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; margin: 1rem 0 1.25rem; }
.mobile-account .btn { min-height: 46px; }
@media (max-width: 420px) { .mobile-account { grid-template-columns: 1fr; } }

/* Rail rows with a label ("Hub:", "Start here:") beside the link rather than
   inside it: same look as .rail-links a, the whole row still clickable. */
.rail-links .rail-row { position: relative; display: block; padding: .55rem .9rem; border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--soft); line-height: 1.4; }
.rail-links .rail-row:last-child { border-bottom: 0; }
.rail-links .rail-row:hover, .rail-links .rail-row:focus-within { color: var(--accent); }
.rail-links .rail-row a { display: inline; padding: 0; border: 0; font-size: inherit; line-height: inherit; }

/* ---------- EICAR download box (guide + blog) ----------
   A table on wide screens; on a phone each file stacks into its own row so
   the Download button is always on screen instead of behind a sideways scroll. */
.eicar-downloads .data-table { min-width: 0; }
.eicar-downloads .data-table td:last-child { white-space: nowrap; }
.eicar-downloads a.btn { text-decoration: none; color: #fff; }
@media (max-width: 620px) {
  .eicar-downloads .data-table thead { display: none; }
  .eicar-downloads .data-table,
  .eicar-downloads .data-table tbody,
  .eicar-downloads .data-table tr,
  .eicar-downloads .data-table td { display: block; width: 100%; }
  .eicar-downloads .data-table tr { padding: .8rem .9rem; border-bottom: 1px solid var(--line); }
  .eicar-downloads .data-table tr:last-child { border-bottom: 0; }
  .eicar-downloads .data-table td { padding: .15rem 0; border: 0; }
  .eicar-downloads .data-table td:last-child { padding-top: .55rem; }
  .eicar-downloads .card-body { padding: 1.1rem 1rem; }
}
.eicar-result .eicar-result-head { color: #fff; font-size: 1.02rem; }
.eicar-result .eicar-result-findings { list-style: none; margin: .4rem 0 1rem; padding: 0; display: grid; gap: .55rem; }
.eicar-result .eicar-result-findings .sev { min-width: 52px; margin-right: .35rem; }
.eicar-result code { word-break: break-all; }

/* ---------- Podcast ---------- */
.podcast-hero { position: relative; overflow: hidden; padding: .8rem 0 4.5rem; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 18% 45%, rgba(45,212,191,.11), transparent 30%), var(--bg-2); }
.podcast-hero-grid { display: grid; grid-template-columns: minmax(240px, 410px) minmax(0, 1fr); gap: clamp(2rem, 7vw, 6rem); align-items: center; margin-top: 1.6rem; }
.podcast-cover-wrap { position: relative; }
.podcast-cover-wrap::after { content: ""; position: absolute; inset: 12% -8% -8% 12%; z-index: -1; border-radius: 24px; background: rgba(45,212,191,.13); filter: blur(28px); }
.podcast-cover { display: block; width: 100%; height: auto; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; box-shadow: 0 28px 80px rgba(0,0,0,.42); }
.podcast-hero-copy h1 { margin: .35rem 0 .25rem; font-size: clamp(3rem, 8vw, 6.4rem); line-height: .94; letter-spacing: -.065em; }
.podcast-tagline { margin: 0 0 1rem; color: var(--accent); font: 600 clamp(1.1rem,2vw,1.5rem)/1.3 var(--font); }
.podcast-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.podcast-main { padding-top: 4rem; padding-bottom: 5rem; }
.podcast-episode-list { display: grid; gap: .8rem; }
.podcast-episode-card { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr) 44px; gap: 1rem; align-items: start; padding: 1.25rem; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel); transition: border-color .15s, background .15s; }
.podcast-episode-card:hover, .podcast-episode-card:focus-within { border-color: rgba(45,212,191,.55); background: var(--panel-2); }
.podcast-episode-card h3 { margin: .25rem 0 .4rem; font-size: clamp(1.05rem,2vw,1.3rem); }
.podcast-episode-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.podcast-number { color: var(--accent); font: 700 1.35rem/1 var(--mono); }
.podcast-date, .podcast-player-label { color: var(--faint); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.podcast-play-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(45,212,191,.4); border-radius: 50%; color: var(--accent); }
.podcast-coming { display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.podcast-coming > span { display: grid; place-items: center; min-width: 52px; height: 52px; border-radius: 50%; background: rgba(45,212,191,.1); color: var(--accent); }
.podcast-coming h3, .podcast-coming p { margin: 0; }.podcast-coming p { margin-top: .35rem; color: var(--muted); }
.podcast-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 4rem; }
.podcast-principles > div { padding: 1.2rem; border-top: 1px solid var(--line-2); }.podcast-principles h3 { margin: .8rem 0 .35rem; }.podcast-principles p { margin: 0; color: var(--muted); font-size: .9rem; }
.podcast-episode-page { padding-top: .8rem; padding-bottom: 5rem; }
.podcast-episode-page > .breadcrumb { margin-bottom: 1.6rem; }
.podcast-episode-head { max-width: 880px; margin: 0 auto 3rem; text-align: center; }
.podcast-episode-head h1 { margin: .65rem 0 1rem; font-size: clamp(2.3rem,5vw,4.6rem); line-height: 1.02; letter-spacing: -.045em; }
.podcast-episode-kicker { color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.podcast-episode-intro { position: relative; isolation: isolate; max-width: 780px; margin: 1.75rem auto 0; padding: 1.45rem 1.6rem 1.5rem 1.75rem; overflow: hidden; border: 1px solid rgba(45,212,191,.28); border-radius: 18px; background: linear-gradient(135deg, rgba(45,212,191,.1), rgba(17,26,44,.96) 48%, rgba(22,34,56,.9)); box-shadow: 0 18px 48px rgba(0,0,0,.2); text-align: left; }
.podcast-episode-intro-label { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .7rem; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.podcast-episode-intro p { max-width: 68ch; margin: 0; color: #c8d3e4; font-size: clamp(1rem,1.35vw,1.1rem); line-height: 1.72; letter-spacing: -.006em; text-wrap: pretty; }
.podcast-player { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 1rem; align-items: center; max-width: 720px; margin: 2rem auto 0; padding: .8rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); text-align: left; }
.podcast-player img { width: 88px; height: 88px; object-fit: cover; border-radius: 9px; }.podcast-player audio { display: block; width: 100%; margin-top: .55rem; }
.podcast-content-grid { display: grid; grid-template-columns: minmax(0,720px) minmax(250px,320px); gap: clamp(2rem,5vw,4rem); justify-content: center; align-items: start; }
.podcast-transcript > h2 { padding-bottom: .8rem; border-bottom: 1px solid var(--line); }.podcast-transcript .article-body p:first-child::first-letter { float: left; margin: .06em .12em 0 0; color: var(--accent); font: 700 4.4rem/.78 var(--serif); }
.podcast-sidebar { position: sticky; top: 88px; display: grid; gap: 1rem; }.podcast-timestamps { margin: 0; padding: .6rem .9rem; list-style: none; }.podcast-timestamps li { display: grid; grid-template-columns: 46px 1fr; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .82rem; }.podcast-timestamps li:last-child { border: 0; }.podcast-timestamps time { color: var(--accent); font-family: var(--mono); }.podcast-timestamps strong { display: block; font-size: .82rem; line-height: 1.35; }.podcast-timestamps small { display: block; margin-top: .2rem; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.transcript-chapter { padding-top: .7rem; scroll-margin-top: 90px; }.transcript-chapter + .transcript-chapter { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--line); }.transcript-chapter h3 { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: .8rem; align-items: baseline; margin-bottom: .55rem; }.transcript-chapter h3 time { color: var(--accent); font: 700 .82rem/1 var(--mono); letter-spacing: 0; }.transcript-subthemes { display: flex; flex-wrap: wrap; gap: .35rem .65rem; margin: 0 0 1rem 56px; padding: 0; list-style: none; color: var(--muted); font-size: .78rem; }.transcript-subthemes li::before { content: "•"; margin-right: .38rem; color: var(--accent); }
.preview-banner { padding: .7rem 1rem; background: #fcd34d; color: #1a1400; text-align: center; font-size: .82rem; font-weight: 800; }
@media (max-width: 780px) { .podcast-hero-grid { grid-template-columns: 1fr; }.podcast-cover-wrap { max-width: 340px; }.podcast-principles { grid-template-columns: 1fr; }.podcast-content-grid { grid-template-columns: 1fr; }.podcast-sidebar { position: static; }.podcast-episode-head { text-align: left; }.podcast-episode-intro, .podcast-player { margin-left: 0; } }
@media (max-width: 480px) { .podcast-episode-card { grid-template-columns: 42px minmax(0,1fr); }.podcast-play-mark { display: none; }.podcast-episode-intro { margin-top: 1.35rem; padding: 1.15rem 1.15rem 1.2rem 1.3rem; border-radius: 14px; }.podcast-episode-intro p { line-height: 1.65; }.podcast-player { grid-template-columns: 1fr; }.podcast-player img { width: 64px; height: 64px; } }