/* ============================================================
   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);
}
*, *::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; }
a:hover { 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: 700px; 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(3, 1fr); gap: 1.2rem; }
.mega-guides .mega-cols { grid-template-columns: 1fr 1fr; }
.mega-heading { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 .5rem .5rem; }
.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 { 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; }
.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 a { display: grid; grid-template-columns: 31px 1fr; column-gap: .65rem; align-items: center; padding: .85rem .1rem; color: var(--soft); }
.mobile-featured a + a { border-left: 1px solid var(--line); padding-left: 1.25rem; }
.mobile-featured a:hover { color: var(--accent); }
.mobile-featured a > 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); }

/* ---------- 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.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); }
.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-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; }

/* ---------- 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. */
.premium-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .16rem .5rem; border-radius: 4px; background: var(--gold-soft); border: 1px solid rgba(216, 163, 44, .45); color: var(--gold); font: 800 .64rem var(--font); letter-spacing: .09em; text-transform: uppercase; }
.premium-badge svg { color: currentColor; }
.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 { transform: translateY(-3px); border-color: var(--accent); color: var(--soft); }
.tool-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.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: var(--accent); }
.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; }
.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 { 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); }
/* The step cards read left to right with an arrow in the gap, so the order
   is carried by the layout rather than by a numeral on each card. */
.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: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.6rem 1.7rem; }
.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 { 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 { 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; }

/* ---------- 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); position: absolute; left: 0; top: .05rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--accent); font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
.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-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.directory-title h2 { margin: 0; }
.directory-title span { color: var(--muted); font-size: .85rem; }
.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; }
.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 { 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 { margin-top: 2.5rem; padding: 1.6rem 1.8rem 1.8rem; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2); }
.ns-head h3 { margin: 0 0 .3rem; font-size: 1.25rem; }
.ns-head p { margin: 0 0 1.2rem; color: var(--muted); font-size: .9rem; }
.ns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem; }
.ns-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--soft); transition: border-color .15s, transform .12s; }
.ns-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--soft); }
.ns-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--panel-3); color: var(--accent); }
.ns-copy strong { display: block; color: #fff; font-size: .95rem; margin-bottom: .15rem; }
.ns-copy span { display: block; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.ns-card > svg { color: var(--muted); }

/* ---------- 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); }

/* ---------- 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; }
  .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; }
}
@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; }
  .mobile-menu-note { display: none; }
  .mobile-featured, .mobile-nav-grid { grid-template-columns: 1fr; }
  .mobile-featured { border-bottom: 0; }
  .mobile-featured a + a { 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-radius: var(--radius); background: var(--panel); height: 100%; }
.credit-step h3 { margin: .8rem 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 are an <ol> now; the arrow lives inside each item rather than between. */
.steps-grid { list-style: none; margin: 0; padding: 0; }
.steps-grid > .step { position: relative; display: flex; flex-direction: column; }
.steps-grid > .step .step-arrow { position: absolute; top: 50%; left: -1.45rem; transform: translateY(-50%); }
.step h3 { display: block; margin: 0 0 .3rem; color: #fff; font-size: 1rem; font-weight: 700; }
.tool-related { color: var(--soft); font-size: .95rem; }
@media (max-width: 860px) {
  .steps-grid > .step .step-arrow { position: static; transform: rotate(90deg); margin-bottom: .5rem; }
}
.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; }

/* --- 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; }
  .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; }
.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); }

/* ---------- 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; } }