/* Layout concept: a wire-service front page. A photo slider leads, a timed headline
   river runs beside it, and a threat board of exploited CVEs sits under the news.
   Accent is radar cyan; red/orange/amber/green are reserved for severity only. */
:root {
  --paper: #F2F4F7;
  --surface: #FFFFFF;
  --surface-2: #E9EDF2;
  --ink: #0D1524;
  --ink-2: #364153;
  --muted: #687487;
  --line: #D9DFE7;
  --accent: #0A7FA3;
  --accent-ink: #FFFFFF;
  --accent-soft: #DDF1F7;
  --mast: #0B111C;
  --mast-ink: #E9EEF5;
  --mast-muted: #8A97AB;
  --mast-line: #1E2A3B;
  --brand: #3CC3E6;
  --brand-ink: #0B111C;
  --crit: #C8233A; --crit-soft: #FBE3E6;
  --high: #D9620F; --high-soft: #FDEBDD;
  --med: #A97A00; --med-soft: #FBF1D3;
  --low: #2F8A52; --low-soft: #DDF2E5;
  --none: #7C8798; --none-soft: #E8EBF0;
  --kev: #B0122B;
  --shadow: 0 1px 2px rgba(13,21,36,.06), 0 8px 24px -12px rgba(13,21,36,.18);
  --overlay: rgba(6,10,18,.55);

  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r-s: 6px; --r-m: 10px; --r-l: 16px;
  --maxw: 1240px;
  --tabbar-h: 62px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A0F18; --surface: #111927; --surface-2: #182233; --ink: #E8EDF5; --ink-2: #C3CCD9; --muted: #8E9AAE; --line: #222E41;
    --accent: #4CC9E8; --accent-ink: #04121A; --accent-soft: #0E2C38;
    --mast: #060A11; --mast-line: #18222F;
    --crit: #FF5C70; --crit-soft: #3A1520; --high: #FF9548; --high-soft: #3A2212; --med: #F2C443; --med-soft: #352A0C;
    --low: #4CC77E; --low-soft: #112B1D; --none: #8E9AAE; --none-soft: #1D2635; --kev: #FF4D63;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0A0F18; --surface: #111927; --surface-2: #182233; --ink: #E8EDF5; --ink-2: #C3CCD9; --muted: #8E9AAE; --line: #222E41;
  --accent: #4CC9E8; --accent-ink: #04121A; --accent-soft: #0E2C38;
  --mast: #060A11; --mast-line: #18222F;
  --crit: #FF5C70; --crit-soft: #3A1520; --high: #FF9548; --high-soft: #3A2212; --med: #F2C443; --med-soft: #352A0C;
  --low: #4CC77E; --low-soft: #112B1D; --none: #8E9AAE; --none-soft: #1D2635; --kev: #FF4D63;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--mast); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
svg { flex: none; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- top utility bar + masthead ---------- */
.topbar { background: var(--mast); color: var(--mast-muted); font-size: 12px; border-bottom: 1px solid var(--mast-line); }
.topbar-in { display: flex; align-items: center; gap: 10px; padding-block: 7px; flex-wrap: wrap; }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.pill-warn { background: var(--med-soft); color: var(--med); }

.masthead { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--mast); color: var(--mast-ink); }
.mast-in { display: flex; align-items: center; gap: 22px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 32px; height: 32px; }
.brand-word { font: 800 21px/1 var(--f-display); font-stretch: 125%; letter-spacing: -.01em; text-transform: uppercase; }
.brand-word b { color: var(--brand); font-weight: 800; margin-left: 2px; }
.mainnav { display: flex; gap: 4px; margin-left: 10px; }
.mainnav a { padding: 8px 12px; border-radius: 8px; font-weight: 500; font-size: 14.5px; color: var(--mast-muted); transition: color .15s, background .15s; }
.mainnav a:hover { color: var(--mast-ink); }
.mainnav a[aria-current="page"] { color: var(--mast-ink); background: var(--mast-line); }
.mast-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 0; background: transparent; cursor: pointer; color: inherit; }
.icon-btn:hover { background: var(--mast-line); }
.icon-btn svg, .btn svg, .tabbar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn-app { background: var(--brand); color: var(--brand-ink); }
.btn-app:hover { filter: brightness(1.08); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-ghost[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ticker */
.ticker { background: var(--surface); border-bottom: 1px solid var(--line); overflow: hidden; }
.ticker-in { display: flex; align-items: center; gap: 14px; height: 40px; }
.ticker-label { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .08em; color: var(--kev); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--kev); box-shadow: 0 0 0 0 var(--kev); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kev) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ticker-track { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.ticker-run { display: inline-flex; gap: 34px; white-space: nowrap; animation: run 70s linear infinite; padding-left: 8px; }
.ticker-track:hover .ticker-run { animation-play-state: paused; }
.ticker-run button { border: 0; background: none; padding: 0; cursor: pointer; font-size: 13.5px; color: var(--ink-2); display: inline-flex; gap: 8px; align-items: baseline; }
.ticker-run button b { font-family: var(--f-mono); font-weight: 600; color: var(--ink); font-size: 12.5px; }
.ticker-run button:hover span { text-decoration: underline; }
@keyframes run { to { transform: translateX(-50%); } }

/* ---------- views & section heads ---------- */
.view { padding-block: 22px 40px; }
.section { margin-top: 44px; }
.sec-head { display: flex; align-items: end; gap: 14px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.sec-head h2 { margin: 0; font: 800 24px/1.1 var(--f-display); font-stretch: 125%; letter-spacing: -.015em; text-transform: uppercase; text-wrap: balance; }
.sec-head .sub { color: var(--muted); font-size: 13px; }
.sec-head .more { margin-left: auto; font-weight: 600; font-size: 13.5px; color: var(--accent); white-space: nowrap; }
.sec-head .more:hover { text-decoration: underline; }
.page-title { font: 800 clamp(28px, 5vw, 44px)/1.02 var(--f-display); font-stretch: 125%; letter-spacing: -.02em; text-transform: uppercase; margin: 6px 0 6px; text-wrap: balance; }
.page-lede { color: var(--muted); max-width: 64ch; margin: 0 0 20px; }
.eyebrow { font: 700 11.5px/1 var(--f-display); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- hero slider ---------- */
.lead { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 26px; }
.hero { position: relative; border-radius: var(--r-l); overflow: hidden; background: var(--mast); color: #fff; aspect-ratio: 16 / 10; max-width: 100%; min-height: 360px; isolation: isolate; box-shadow: var(--shadow); }
.slides { position: absolute; inset: 0; display: flex; transition: transform .7s cubic-bezier(.22,.8,.2,1); touch-action: pan-y; }
.slide { position: relative; flex: 0 0 100%; height: 100%; cursor: pointer; }
.slide .media { position: absolute; inset: 0; }
.slide .media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s ease-out; }
.slide.is-active .media img { transform: scale(1); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,14,0) 25%, rgba(5,8,14,.55) 55%, rgba(5,8,14,.94) 100%); z-index: 1; }
.slide-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 30px 54px; display: grid; gap: 12px; }
.slide-body h3 { margin: 0; font: 700 clamp(22px, 3.1vw, 36px)/1.08 var(--f-display); font-stretch: 112%; letter-spacing: -.012em; text-wrap: balance; max-width: 30ch; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.slide-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; color: rgba(255,255,255,.82); }
.slide-meta .src { font-weight: 600; color: #fff; }
.slide .cat { opacity: 0; transform: translateY(8px); transition: .5s .25s; }
.slide.is-active .cat, .slide.is-active h3 { opacity: 1; transform: none; }
.slide h3 { opacity: .0; transform: translateY(14px); transition: opacity .6s .15s, transform .6s .15s; }
.hero-ctrl { position: absolute; z-index: 3; left: 30px; right: 30px; bottom: 20px; display: flex; gap: 8px; align-items: center; }
.bars { flex: 1; display: flex; gap: 6px; }
.bars button { flex: 1; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.bars button i { display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; }
.bars button i::after { content: ""; display: block; height: 100%; width: 0; background: #fff; }
.bars button.done i::after { width: 100%; }
.bars button.on i::after { animation: fill var(--slide-ms, 6500ms) linear forwards; }
.hero.paused .bars button.on i::after { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }
.hero-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(5,8,14,.35); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.hero-arrow:hover { background: rgba(5,8,14,.6); }
.hero-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-count { font: 600 12px var(--f-mono); color: rgba(255,255,255,.75); min-width: 42px; text-align: right; }

/* category label */
.cat { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font: 700 11px/1 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .09em; padding: 6px 9px; border-radius: 5px; background: var(--cat, var(--accent)); color: #fff; }
.cat.flat { background: none; padding: 0; color: var(--cat-ink, var(--accent)); }

/* generated cover (used when a story has no photo or the photo can't load) */
.cover { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--c) 70%, #fff 0%) 0%, transparent 60%), linear-gradient(140deg, color-mix(in srgb, var(--c) 82%, #000) 0%, color-mix(in srgb, var(--c) 35%, #05080e) 100%); }
.cover::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(200deg, #000 10%, transparent 75%); }
.cover svg { position: absolute; right: -6%; top: 8%; width: 58%; height: auto; max-width: 340px; stroke: rgba(255,255,255,.22); fill: none; stroke-width: .9; }
.cover .mono-tag { position: absolute; left: 7%; top: 9%; font: 800 clamp(14px, 2.2vw, 22px)/1 var(--f-display); font-stretch: 125%; letter-spacing: .04em; color: rgba(255,255,255,.88); text-transform: uppercase; }
.media { position: relative; overflow: hidden; background: var(--surface-2); }
.media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }

/* headline river */
.river { display: flex; flex-direction: column; min-width: 0; }
.river-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.river-head h2 { margin: 0; font: 800 17px/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; }
.river-head a { font-size: 13px; color: var(--accent); font-weight: 600; }
.river ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.river li { border-bottom: 1px solid var(--line); }
.river li button { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; width: 100%; text-align: start; border: 0; background: none; padding: 13px 0; cursor: pointer; }
.river time { font: 600 12px/1.5 var(--f-mono); color: var(--muted); padding-top: 2px; }
.river .rt { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ink); text-wrap: pretty; }
.river li button:hover .rt { color: var(--accent); }
.river .rs { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* ---------- filter chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.chip:hover { border-color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip .n { font: 600 11.5px var(--f-mono); opacity: .65; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--accent)); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.toolbar .chips { flex: 1 1 320px; min-width: 0; padding-bottom: 2px; }
.select { height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); padding: 0 34px 0 12px; font: 500 13.5px var(--f-body); color: var(--ink); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 15px, calc(100% - 12px) 15px; background-size: 5px 5px; background-repeat: no-repeat; }
.field { height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); padding: 0 12px; font: 400 14px var(--f-body); color: var(--ink); min-width: 0; flex: 1 1 200px; }

/* ---------- story cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 22px; }
.card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; min-width: 0; background: none; border: 0; padding: 0; text-align: start; }
.card .media { aspect-ratio: 16 / 10; border-radius: var(--r-m); max-width: 100%; }
.card .media img { transition: transform .5s ease; }
.card:hover .media img { transform: scale(1.04); }
.card h3 { margin: 0; font: 700 18px/1.22 var(--f-display); font-stretch: 112%; letter-spacing: -.005em; text-wrap: balance; color: var(--ink); }
.card:hover h3 { color: var(--accent); }
.card p { margin: 0; color: var(--ink-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.byline .src { font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.byline .src i { width: 7px; height: 7px; border-radius: 2px; background: var(--src); }
.tag-detected { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--med-soft); color: var(--med); }
.feature-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; }
.feature-row .card.big h3 { font-size: clamp(22px, 2.6vw, 30px); font-stretch: 125%; }
.feature-row .stack { display: grid; gap: 20px; align-content: start; }
.card.row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; }
.card.row .media { aspect-ratio: 4 / 3; }
.card.row h3 { font-size: 16px; }
.list-stories { display: grid; gap: 0; }
.list-stories .card.row { padding-block: 16px; border-bottom: 1px solid var(--line); }
.list-stories .card.row .media { aspect-ratio: 16/10; }
@media (min-width: 760px) { .list-stories .card.row { grid-template-columns: 240px minmax(0, 1fr); gap: 22px; } .list-stories .card.row h3 { font-size: 20px; } }

/* ---------- threat board ---------- */
.board { background: var(--mast); color: var(--mast-ink); border-radius: var(--r-l); padding: 26px; display: grid; gap: 22px; }
.board .sec-head { border-color: var(--mast-ink); }
.board .sec-head .sub { color: var(--mast-muted); }
.board .sec-head .more { color: var(--brand); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--mast-line); border: 1px solid var(--mast-line); border-radius: var(--r-m); overflow: hidden; }
.stat { background: var(--mast); padding: 16px 18px; display: grid; gap: 4px; text-align: start; border: 0; color: inherit; cursor: pointer; }
.stat:hover { background: #0F1724; }
.stat .k { font: 800 34px/1 var(--f-display); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12.5px; color: var(--mast-muted); }
.stat.s-crit .k { color: #FF6B7D; } .stat.s-kev .k { color: #FF8A5B; } .stat.s-rw .k { color: #F2C443; } .stat.s-up .k { color: var(--brand); }
.board-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vcard { position: relative; display: grid; gap: 10px; align-content: start; text-align: start; padding: 16px 16px 16px 18px; border-radius: var(--r-m); background: #111A28; border: 1px solid var(--mast-line); color: var(--mast-ink); cursor: pointer; min-width: 0; }
.vcard:hover { border-color: #33445E; }
.vcard::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--sev); }
.vcard .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vcard .id { font: 600 13px var(--f-mono); color: #fff; }
.vcard h4 { margin: 0; font: 600 15px/1.35 var(--f-body); color: var(--mast-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vcard .meta { font-size: 12px; color: var(--mast-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* severity score pill + KEV badge (shared) */
.score { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; font: 600 12px var(--f-mono); background: var(--sev-soft); color: var(--sev); white-space: nowrap; }
.score b { font-weight: 700; }
.sev-CRITICAL { --sev: var(--crit); --sev-soft: var(--crit-soft); }
.sev-HIGH { --sev: var(--high); --sev-soft: var(--high-soft); }
.sev-MEDIUM { --sev: var(--med); --sev-soft: var(--med-soft); }
.sev-LOW { --sev: var(--low); --sev-soft: var(--low-soft); }
.sev-NONE { --sev: var(--none); --sev-soft: var(--none-soft); }
.board .sev-CRITICAL { --sev: #FF5C70; --sev-soft: #3A1520; } .board .sev-HIGH { --sev: #FF9548; --sev-soft: #3A2212; }
.board .sev-MEDIUM { --sev: #F2C443; --sev-soft: #352A0C; } .board .sev-LOW { --sev: #4CC77E; --sev-soft: #112B1D; } .board .sev-NONE { --sev: #8E9AAE; --sev-soft: #1D2635; }
.kev { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; font: 700 11px/1 var(--f-display); font-stretch: 112%; letter-spacing: .07em; text-transform: uppercase; background: var(--kev); color: #fff; }
.kev svg { width: 12px; height: 12px; fill: currentColor; }
.rw { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; font: 600 11.5px var(--f-body); background: var(--med-soft); color: var(--med); }
.board .rw { background: #352A0C; color: #F2C443; }

/* ---------- vulnerability list ---------- */
.vlist { display: grid; gap: 10px; }
.vrow { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer; text-align: start; width: 100%; color: var(--ink); }
.vrow:hover { border-color: var(--muted); }
.dial { --p: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--sev) calc(var(--p) * 1%), var(--surface-2) 0); position: relative; }
.dial::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.dial span { position: relative; font: 700 16px/1 var(--f-mono); color: var(--sev); }
.dial small { position: relative; display: block; font: 600 8.5px/1 var(--f-body); color: var(--muted); text-align: center; margin-top: 2px; letter-spacing: .04em; }
.vrow .main { min-width: 0; display: grid; gap: 5px; }
.vrow .line1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vrow .id { font: 600 14px var(--f-mono); }
.vrow .prod { font-size: 13px; color: var(--muted); }
.vrow .desc { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vrow .side { display: grid; justify-items: end; gap: 6px; font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-m); }
.count-line { font-size: 13px; color: var(--muted); margin: -6px 0 14px; }
.load-more { margin: 18px auto 0; display: flex; }

/* ---------- updates timeline ---------- */
.timeline { display: grid; gap: 26px; }
.day h3 { margin: 0 0 10px; font: 700 13px/1 var(--f-display); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.day ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); margin-left: 6px; display: grid; gap: 4px; }
.upd { position: relative; padding: 10px 0 10px 22px; }
.upd::before { content: ""; position: absolute; left: -7px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--imp); }
.upd button { border: 0; background: none; padding: 0; text-align: start; cursor: pointer; width: 100%; display: grid; gap: 4px; color: var(--ink); }
.upd .t { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-weight: 600; }
.upd .t .id { font: 600 13.5px var(--f-mono); color: var(--accent); }
.upd .d { font-size: 13.5px; color: var(--ink-2); }
.upd .d s { color: var(--muted); }
.upd .m { font-size: 12px; color: var(--muted); }
.imp-critical { --imp: var(--crit); } .imp-medium { --imp: var(--med); } .imp-minor { --imp: var(--none); }
.imp-tag { font: 700 10.5px/1 var(--f-display); font-stretch: 112%; letter-spacing: .07em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; color: var(--imp); background: color-mix(in srgb, var(--imp) 14%, transparent); }
.mini-updates { display: grid; gap: 0; }
.mini-updates .upd { border-bottom: 1px solid var(--line); padding: 12px 0 12px 22px; }
.mini-updates .upd::before { left: 0; top: 18px; width: 10px; height: 10px; }
.mini-updates .upd button { padding-left: 4px; }

/* ---------- get the app band ---------- */
.appband { position: relative; overflow: hidden; border-radius: var(--r-l); background: linear-gradient(120deg, #07202B 0%, #0B111C 60%); color: #E9EEF5; padding: 34px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 30px; align-items: center; }
.appband::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 40%, rgba(60,195,230,.25), transparent 45%), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; pointer-events: none; }
.appband > * { position: relative; }
.appband h2 { margin: 8px 0 10px; font: 800 clamp(26px, 4vw, 40px)/1.02 var(--f-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; }
.appband p { margin: 0 0 18px; color: #AEBBCD; max-width: 52ch; }
.appband .eyebrow { color: var(--brand); }
.appband ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; color: #C9D3E0; font-size: 14px; }
.appband li { display: flex; gap: 10px; align-items: start; }
.appband li svg { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.app-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.appband .btn-ghost { color: #E9EEF5; border-color: #2B3A50; }
.appband .btn-ghost:hover { background: #142033; }
.phone { justify-self: center; width: 220px; max-width: 100%; aspect-ratio: 9 / 18.5; border-radius: 34px; background: #05080E; border: 6px solid #1B2638; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), inset 0 0 0 1px #2B3A50; padding: 12px 10px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; overflow: hidden; transform: rotate(4deg); }
.phone .ph-bar { display: flex; align-items: center; gap: 6px; font: 800 11px var(--f-display); font-stretch: 125%; text-transform: uppercase; color: #fff; }
.phone .ph-bar svg { width: 18px; height: 18px; }
.phone .ph-bar b { color: var(--brand); }
.phone .ph-hero { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3.4; }
.phone .ph-hero .t { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; font: 700 12px/1.2 var(--f-display); color: #fff; }
.phone .ph-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85)); }
.phone .ph-list { display: grid; gap: 7px; align-content: start; }
.phone .ph-list div { display: flex; gap: 7px; align-items: center; padding: 7px; border-radius: 9px; background: #111A28; font: 600 9.5px/1.25 var(--f-body); color: #C9D3E0; }
.phone .ph-list span { font: 700 9px var(--f-mono); padding: 3px 5px; border-radius: 4px; background: #3A1520; color: #FF6B7D; flex: none; }

/* install steps (app view) */
.install-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.ins { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; display: grid; gap: 10px; align-content: start; }
.ins h3 { margin: 0; font: 700 17px/1.2 var(--f-display); font-stretch: 112%; display: flex; gap: 10px; align-items: center; }
.ins h3 svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ins ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: 14px; }
.ins.here { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ins .here-tag { font-size: 11.5px; font-weight: 600; color: var(--accent); }
.note { font-size: 13px; color: var(--muted); }

/* ---------- sources / footer ---------- */
.sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.srcbox { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.srcbox b { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; }
.srcbox b i { width: 9px; height: 9px; border-radius: 3px; background: var(--src); }
.state-ok { color: var(--low); font-weight: 600; } .state-bad { color: var(--high); font-weight: 600; }
.footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; }
.footer-in { padding-block: 26px; display: grid; gap: 10px; }
.footer-in a { color: var(--accent); }
.footer-in p { margin: 0; max-width: 90ch; }

/* ---------- search ---------- */
.search-layer, .sheet-layer { position: fixed; inset: 0; z-index: 80; background: var(--overlay); backdrop-filter: blur(3px); }
.search-panel { margin: calc(env(safe-area-inset-top, 0px) + 70px) auto 0; width: min(720px, calc(100% - 24px)); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100% - 110px); }
.search-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.search-row > svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search-row input { flex: 1; min-width: 0; border: 0; background: none; height: 44px; font: 400 16px var(--f-body); color: var(--ink); outline: none; }
.search-row .icon-btn:hover { background: var(--surface-2); }
.search-results { overflow-y: auto; padding: 8px; }
.sr-group { padding: 8px 10px 4px; font: 700 11px/1 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sr-item { display: grid; gap: 2px; width: 100%; text-align: start; border: 0; background: none; padding: 10px; border-radius: 8px; cursor: pointer; color: var(--ink); }
.sr-item:hover, .sr-item:focus-visible { background: var(--surface-2); }
.sr-item .a { font-weight: 600; font-size: 14.5px; }
.sr-item .b { font-size: 12.5px; color: var(--muted); }
mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---------- detail sheet ---------- */
.sheet { position: absolute; right: 0; top: 0; bottom: 0; width: min(640px, 100%); background: var(--surface); overflow-y: auto; box-shadow: var(--shadow); animation: slidein .28s cubic-bezier(.2,.8,.2,1); padding-bottom: env(safe-area-inset-bottom, 0px); }
@keyframes slidein { from { transform: translateX(30px); opacity: .4; } }
.sheet-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) max(16px, env(safe-area-inset-right, 0px)) 10px 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.sheet-top .grow { flex: 1; min-width: 0; font: 600 13px var(--f-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-top .icon-btn:hover { background: var(--surface-2); }
.sheet-top .icon-btn[aria-pressed="true"] svg { fill: var(--accent); stroke: var(--accent); }
.sheet-body { padding: 22px max(20px, env(safe-area-inset-right, 0px)) 40px 20px; display: grid; gap: 18px; }
.sheet .media { aspect-ratio: 16/9; border-radius: var(--r-m); }
.sheet-body > h2 { margin: 0; font: 700 clamp(22px, 3.4vw, 30px)/1.12 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; text-wrap: balance; }
.sheet p { margin: 0; color: var(--ink-2); }
.kv { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; font-size: 14px; }
.kv > div { padding: 10px 14px; border-bottom: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.kv > div:nth-child(odd) { background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: 13px; }
.kv > div:nth-last-child(-n+2) { border-bottom: 0; }
.sheet-body > h3 { margin: 6px 0 0; font: 700 13px/1 var(--f-display); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.reflist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.reflist a { color: var(--accent); overflow-wrap: anywhere; }
.reflist a:hover { text-decoration: underline; }
.callout { padding: 14px 16px; border-radius: var(--r-m); background: var(--crit-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--kev) 40%, transparent); display: grid; gap: 6px; font-size: 14px; }
.callout b { color: var(--kev); }
.metrics { display: grid; gap: 8px; }
.metric { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.metric code { font: 500 12px var(--f-mono); color: var(--ink-2); overflow-wrap: anywhere; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px); transform: translateX(-50%); z-index: 90; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow); max-width: calc(100% - 32px); }

/* ---------- bottom tab bar (phones) ---------- */
.tabbar { display: none; }
@media (max-width: 860px) {
  #today, .topbar .dot-sep { display: none; }
  .mainnav, .btn-app span { display: none; }
  .btn-app { width: 40px; padding: 0; }
  .mast-in { height: 56px; gap: 12px; }
  .brand-word { font-size: 18px; }
  .tabbar { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 4px max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px)); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--muted); }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tabbar a[aria-current="page"] svg { stroke-width: 2.2; }
  .lead { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appband { grid-template-columns: 1fr; padding: 26px 20px; }
  .phone { width: 190px; transform: rotate(0); }
  .install-grid { grid-template-columns: 1fr; }
  .toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px); }
}
@media (min-width: 861px) { body { padding-bottom: 0; } .toast { bottom: 24px; } }
@media (max-width: 560px) {
  .hero { aspect-ratio: 4 / 5; min-height: 0; border-radius: var(--r-m); }
  .slide-body { padding: 20px 18px 50px; }
  .hero-ctrl { left: 18px; right: 18px; bottom: 16px; }
  .hero-arrow { display: none; }
  .vrow { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .vrow .side { grid-column: 2; justify-items: start; text-align: start; display: flex; gap: 8px; flex-wrap: wrap; }
  .dial { width: 50px; height: 50px; }
  .card.row { grid-template-columns: 110px minmax(0, 1fr); }
  .board { padding: 20px 16px; }
  .stat .k { font-size: 28px; }
  .sec-head h2 { font-size: 20px; }
  .kv { grid-template-columns: 1fr; }
  .kv > div:nth-child(odd) { border-bottom: 0; padding-bottom: 2px; }
  .kv > div:nth-last-child(2) { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ticker-run { animation: none; }
}

/* ---------- vulnerability cards (plain language) ---------- */
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.sm { width: 15px; height: 15px; }
.linkbtn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.vc { position: relative; display: flex; flex-direction: column; gap: 14px; text-align: start; padding: 18px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); cursor: pointer; color: var(--ink); min-width: 0; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.vc::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--sev); }
.vc:hover { border-color: var(--sev); transform: translateY(-2px); box-shadow: var(--shadow); }
.vc.is-kev { border-color: color-mix(in srgb, var(--kev) 45%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--kev) 7%, var(--surface)) 0%, var(--surface) 55%); }
.vc-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.vc-prod { display: grid; gap: 2px; min-width: 0; }
.vc-prod .vendor { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.vc-prod h3 { margin: 0; font: 700 21px/1.15 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.vc-impact { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-m); background: var(--surface-2); }
.vc-impact .ic { width: 22px; height: 22px; color: var(--sev); }
.vc-impact span { display: grid; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.vc-impact small { font-weight: 500; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.vc-desc { margin: 0; font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vc-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12.5px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }
.vc-foot .mono { font-weight: 600; color: var(--ink-2); font-size: 12.5px; }
.fixtag, .rwtag { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; padding: 3px 8px; border-radius: 99px; }
.fixtag { color: var(--low); background: var(--low-soft); } .fixtag .ic { width: 13px; height: 13px; }
.rwtag { color: var(--med); background: var(--med-soft); }

.sevb { display: inline-flex; align-items: center; gap: 9px; padding: 5px 11px 5px 5px; border-radius: 10px; background: var(--sev-soft); color: var(--sev); }
.sevb > b { display: grid; place-items: center; min-width: 38px; height: 32px; padding: 0 6px; border-radius: 7px; background: var(--sev); color: #fff; font: 700 15px/1 var(--f-mono); }
.sev-NONE .sevb > b, .sevb.sev-NONE > b { background: var(--none); }
.sevb > span { display: grid; line-height: 1.15; }
.sevb strong { font: 700 13.5px/1.1 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .04em; }
.sevb small { font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.xtag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; background: var(--kev); color: #fff; font: 700 11.5px/1 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .06em; }
.xtag .ic { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.chip-kev[aria-pressed="true"] { background: var(--kev); border-color: var(--kev); color: #fff; }

.glossary { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.glossary summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--accent); display: flex; gap: 8px; align-items: center; list-style: none; }
.glossary summary::-webkit-details-marker { display: none; }
.glossary summary::after { content: "+"; margin-left: auto; font: 600 18px/1 var(--f-mono); }
.glossary[open] summary::after { content: "–"; }
.glossary dl { margin: 0; padding: 4px 16px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 22px; }
.glossary dt { font: 700 14px var(--f-display); font-stretch: 112%; margin-bottom: 3px; }
.glossary dd { margin: 0; font-size: 13.5px; color: var(--ink-2); }

/* ---------- update stories ---------- */
.stories { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.story button { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; text-align: start; padding: 16px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); cursor: pointer; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.story button:hover { border-color: var(--imp); box-shadow: var(--shadow); }
.story-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--imp) 14%, transparent); color: var(--imp); }
.story-ic .ic { width: 22px; height: 22px; }
.story-main { display: grid; gap: 8px; min-width: 0; }
.story-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.story-top .mono { font-weight: 600; }
.story-head { font: 700 17.5px/1.25 var(--f-display); font-stretch: 112%; text-wrap: balance; overflow-wrap: anywhere; }
.story-plain { font-size: 14px; color: var(--ink-2); }
.story-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.story-meta b { color: var(--ink-2); font-weight: 600; }
.ba-row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.ba { display: grid; gap: 5px; padding: 8px 10px; border-radius: var(--r-m); background: var(--surface-2); min-width: 0; max-width: 100%; }
.ba small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ba-text { font: 600 13px/1.35 var(--f-mono); overflow-wrap: anywhere; }
.ba .sevb { padding: 3px 9px 3px 3px; } .ba .sevb > b { height: 26px; min-width: 34px; font-size: 13px; }
.arrow { align-self: center; font: 700 20px/1 var(--f-body); color: var(--muted); }
.day h3 { display: flex; align-items: baseline; gap: 10px; }
.day h3 span { font: 500 12px var(--f-body); letter-spacing: 0; text-transform: none; }
.upd-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.upd-legend span { display: inline-flex; gap: 7px; align-items: center; }
.upd-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--imp); }
.upd-legend b { color: var(--ink); }
.imp-tag { color: var(--imp); background: color-mix(in srgb, var(--imp) 14%, transparent); }
@media (max-width: 560px) {
  .vgrid { grid-template-columns: 1fr; }
  .story button { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .story-ic { width: 38px; height: 38px; }
}

/* ---------- languages: only the text changes, the layout stays left-to-right ---------- */
.lang { position: relative; }
.lang-btn { width: auto; gap: 6px; padding: 0 10px; display: inline-flex; align-items: center; font: 500 14px var(--f-body); }
.lang-btn .code { font: 600 12px var(--f-mono); text-transform: uppercase; }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; min-width: 180px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow); padding: 6px; display: grid; gap: 2px; }
.lang-menu .lm-title { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; font: 500 14.5px var(--f-body); color: var(--ink); text-align: start; }
.lang-menu button:hover { background: var(--surface-2); }
.lang-menu button .code { font: 600 11.5px var(--f-mono); color: var(--muted); width: 22px; }
.lang-menu button[aria-checked="true"] { color: var(--accent); }
.lang-menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: 700; }
.lang-menu [lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--f-body); }
:root[lang="ar"] { --f-display: "IBM Plex Sans Arabic", "Archivo", "Segoe UI", Tahoma, sans-serif; --f-body: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif; }
:root[lang="ar"] *, :root[lang="ar"] *::before, :root[lang="ar"] *::after { letter-spacing: 0 !important; }
:root[lang="ar"] .brand-word { font-family: "Archivo", "Arial Narrow", Arial, sans-serif; }
:root[lang="ar"] .page-title, :root[lang="ar"] .sec-head h2, :root[lang="ar"] .appband h2 { font-weight: 700; line-height: 1.25; }
/* each paragraph reads in its own direction (Arabic interface text, English headlines) */
:root[lang="ar"] :is(p, h1, h2, h3, h4, dt, dd, li, .story-head, .story-plain, .page-lede, .vc-impact span, .rs) { unicode-bidi: plaintext; }
.card h3, .rt, .slide-body h3, .vc-desc, .vc-prod h3, .vcard h4, .src-text, .sr-item .a, .ph-hero .t, .ba-text { unicode-bidi: plaintext; }
@media (max-width: 860px) { .lang-btn .label { display: none; } .lang-btn { padding: 0 8px; } }
.rt { display: block; }
.day ol.stories { border: 0; margin: 0; }
.ba-row { flex-wrap: wrap; }
.ba { min-width: 0; }
.ba { flex: 0 1 auto; }
@media (max-width: 560px) {
  .story button { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .story-ic { width: 36px; height: 36px; border-radius: 10px; }
  .story-ic .ic { width: 19px; height: 19px; }
}
@media (max-width: 440px) {
  .mast-actions { gap: 0; }
  .mast-actions .icon-btn { width: 36px; }
  .btn-app { width: 38px; height: 38px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-word { font-size: 16px; }
  .mast-in { gap: 8px; }
}
.ba { padding: 6px 8px; }
.ba .sevb { gap: 6px; padding: 2px 8px 2px 2px; }
.ba .sevb strong { font-size: 12px; }
.ba-row { gap: 8px; }
.mast-actions .lang-btn { width: auto; }
:root[lang="ar"] .glossary summary span { unicode-bidi: plaintext; }

/* ------------------------------------------------------------ members area: sign-in, breach check, site check */
.acct-btn { width: auto; gap: 8px; padding: 0 10px 0 8px; display: inline-flex; align-items: center; font: 500 14px var(--f-body); }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font: 700 13px var(--f-display); }
.avatar.big { width: 52px; height: 52px; font-size: 22px; flex: none; }
.acct-card { display: flex; gap: 14px; align-items: center; } .acct-card > div { display: grid; gap: 2px; }
@media (max-width: 1100px) { .acct-btn .label { display: none; } .acct-btn { padding: 0 8px; } .mainnav a { padding: 8px 9px; font-size: 14px; } }
@media (max-width: 860px) { .tabbar a span { font-size: 10.5px; } }
.eb-ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; fill: none; stroke: currentColor; stroke-width: 2; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); margin-bottom: 22px; max-width: 100%; }
.seg a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted); white-space: nowrap; }
.seg a[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.seg svg, .mc-ic svg, .gate-ic svg, .chk-ic svg, .verdict > svg, .phone-note svg, .vtag svg, .if-ic svg, .linkbtn svg, .gate li svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gate { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 28px; border-radius: var(--r-l); background: var(--mast); color: var(--mast-ink); }
.gate h2 { margin: 12px 0 6px; font: 800 26px/1.1 var(--f-display); font-stretch: 112%; }
.gate p { color: var(--mast-muted); margin: 0 0 12px; }
.gate ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gate li { display: flex; gap: 10px; align-items: flex-start; } .gate li svg { color: var(--brand); margin-top: 2px; }
.gate-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); }
.gate-ic svg { width: 24px; height: 24px; }
.gate:not(:has(form)) { grid-template-columns: auto 1fr; }
.auth { display: grid; gap: 14px; padding: 22px; border-radius: var(--r-m); background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.auth label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.auth .field { height: 44px; font-size: 15px; } .auth small { font-weight: 400; color: var(--muted); }
.auth .btn { height: 46px; font-size: 15px; }
.auth .btn[disabled], .inline-form .btn[disabled] { opacity: .65; cursor: progress; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface-2); }
.auth-tabs button { height: 36px; border: 0; border-radius: 7px; background: none; font: 600 14px var(--f-body); color: var(--muted); cursor: pointer; }
.auth-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.form-err { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--crit-soft); color: var(--crit); font-size: 13.5px; font-weight: 500; }
.form-ok { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--low-soft); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.linkish { justify-self: start; background: none; border: 0; padding: 2px 0; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; margin-bottom: 22px; }
.bstats > div { background: var(--surface); padding: 14px 16px; display: grid; gap: 2px; }
.bstats b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; } .bstats span { font-size: 12.5px; color: var(--muted); }
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.mcard { display: grid; gap: 14px; padding: 20px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.mc-head { display: flex; gap: 12px; align-items: flex-start; }
.mc-head h2 { margin: 0; font: 700 19px/1.2 var(--f-display); font-stretch: 112%; } .mc-head p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.mc-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.inline-form { display: flex; gap: 8px; align-items: center; position: relative; }
.inline-form .field { height: 44px; font-size: 15px; } .inline-form .btn { height: 44px; }
.inline-form.big .field { height: 52px; font-size: 17px; padding-left: 44px; } .inline-form.big .btn { height: 52px; padding: 0 22px; font-size: 15px; }
.if-ic { position: absolute; left: 14px; color: var(--muted); display: grid; pointer-events: none; }
.verdict { display: flex; gap: 12px; padding: 14px; border-radius: var(--r-m); align-items: flex-start; }
.verdict > svg { width: 22px; height: 22px; margin-top: 1px; }
.verdict > div { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; } .verdict span { font-size: 13.5px; color: var(--ink-2); }
.verdict.good { background: var(--low-soft); } .verdict.good > svg, .verdict.good b { color: var(--low); }
.verdict.bad { background: var(--crit-soft); } .verdict.bad > svg, .verdict.bad b { color: var(--crit); }
.todo { padding: 14px 16px; border-radius: var(--r-m); border: 1px solid var(--line); font-size: 14px; } .todo ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }
.phone-note { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); padding: 12px; border-radius: var(--r-m); background: var(--surface-2); }
.blist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.bcard { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); text-align: start; cursor: pointer; color: var(--ink); width: 100%; font: inherit; }
.bcard:hover { border-color: var(--muted); }
.mono-av { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, #7B4BD6 16%, var(--surface)); color: #7B4BD6; font: 800 18px var(--f-display); }
.bmain { display: grid; gap: 5px; min-width: 0; } .bl1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .bl1 b { font-size: 15.5px; overflow-wrap: anywhere; }
.bl2 { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.bside { display: grid; justify-items: end; text-align: right; } .bside b { font-size: 16px; } .bside small { font-size: 11.5px; color: var(--muted); }
.dchips { display: flex; flex-wrap: wrap; gap: 5px; }
.dchip { font-size: 11.5px; padding: 3px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); }
.dchip.risk { background: var(--crit-soft); color: var(--crit); font-weight: 600; } .dchip.more { color: var(--muted); }
.vtag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: var(--low-soft); color: var(--low); white-space: nowrap; }
.vtag svg { width: 12px; height: 12px; stroke-width: 2.4; }
.vtag.kev, .vtag.hit { background: var(--crit-soft); color: var(--crit); } .vtag.maybe { background: var(--med-soft); color: var(--med); }
.tech-h .vtag.mono { background: var(--surface-2); color: var(--ink); font-family: var(--f-mono); }
.mcard.wide { margin-bottom: 22px; }
.report { display: grid; gap: 22px; }
.grade-card { display: flex; gap: 22px; align-items: center; padding: 22px; border-radius: var(--r-l); background: var(--mast); color: var(--mast-ink); --g: var(--low); }
.grade-card h2 { margin: 6px 0 4px; font: 800 26px/1.1 var(--f-display); font-stretch: 112%; overflow-wrap: anywhere; } .grade-card p { margin: 0 0 4px; } .grade-card .eyebrow, .grade-card .note { color: var(--mast-muted); }
.grade { width: 92px; height: 92px; flex: none; border-radius: 22px; display: grid; place-items: center; font: 800 54px/1 var(--f-display); background: var(--g); color: #fff; }
.g-A { --g: #2F8A52; } .g-B { --g: #5E9B2B; } .g-C { --g: #A97A00; } .g-D { --g: #D9620F; } .g-F { --g: #C8233A; }
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.rh { margin: 0 0 12px; font: 700 13px/1 var(--f-display); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chk { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.chk > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; } .chk b { font-size: 14.5px; } .chk span { font-size: 13px; color: var(--ink-2); }
.chk-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.chk.good .chk-ic { background: var(--low-soft); color: var(--low); } .chk.warn .chk-ic { background: var(--med-soft); color: var(--med); }
.chk.bad .chk-ic { background: var(--crit-soft); color: var(--crit); } .chk.info .chk-ic { background: var(--surface-2); color: var(--muted); }
.chk.bad { border-color: color-mix(in srgb, var(--crit) 35%, var(--line)); }
.tech { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px; }
.tech-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tech-h b { font-size: 16px; }
.tech-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); } .tech-sub.kevt { color: var(--kev); }
.vminis { display: grid; gap: 6px; }
.vmini { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); text-align: start; cursor: pointer; color: var(--ink); font: inherit; width: 100%; }
.vm-main { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; } .vm-main small { flex-basis: 100%; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.tech .linkbtn { color: var(--accent); font-size: 13px; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; width: fit-content; } .tech .linkbtn svg { width: 14px; height: 14px; }
.tech .reflist .linkbtn { color: var(--accent); font-size: 13px; }
@media (max-width: 860px) {
  .gate, .mgrid, .report-grid { grid-template-columns: 1fr; }
  .gate { padding: 20px 16px; gap: 20px; }
  .bstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .seg { display: flex; } .seg a { flex: 1; justify-content: center; padding: 0 10px; font-size: 13.5px; }
  .inline-form { flex-wrap: wrap; } .inline-form .btn { flex: 1 1 100%; }
  .inline-form.big .if-ic { top: 17px; }
  .grade-card { padding: 18px 16px; gap: 16px; } .grade { width: 72px; height: 72px; font-size: 42px; border-radius: 18px; }
  .grade-card h2 { font-size: 21px; }
  .bcard { grid-template-columns: 36px minmax(0, 1fr); } .mono-av { width: 36px; height: 36px; font-size: 16px; }
  .bside { grid-column: 2; justify-items: start; display: flex; gap: 6px; align-items: baseline; }
  .mcard { padding: 16px; }
}
.mainnav a { white-space: nowrap; }
@media (max-width: 1340px) and (min-width: 861px) { .acct-btn .label, .lang-btn .label { display: none; } .mainnav { margin-left: 0; } }
@media (max-width: 440px) {
  .lang-btn .code { display: none; }
  .mast-actions .lang-btn { width: 36px; padding: 0; }
  .mast-actions .icon-btn, .mast-actions .lang-btn { width: 34px; }
  .brand { gap: 7px; }
  .brand-word { font-size: 15px; }
}
.demo-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 18px; border-radius: var(--r-m); background: var(--med-soft); color: var(--ink); font-size: 13.5px; border: 1px solid color-mix(in srgb, var(--med) 35%, transparent); }
.demo-note svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--med); stroke-width: 1.8; stroke-linecap: round; margin-top: 1px; }
.demo-note b { color: var(--med); }