/* =========================================================
   XContent RED — Design tokens + global styles
   ========================================================= */

/* Cobe Heavy Italic — display headline face, mirrored from hax.xcontent.red
   so the marketing surface and the product surface share a brand voice.
   Self-hosted (62KB woff2). Italic-only file: any rule using
   var(--font-display) MUST also declare font-style: italic to match it,
   otherwise the browser will ignore Cobe and fall through to the sans
   fallback. */
@font-face {
  font-family: 'Cobe Heavy';
  font-style: italic;
  font-weight: 700 900;
  font-display: swap;
  src: url('/assets/fonts/cobe-heavy-italic.woff2') format('woff2');
}

:root {
  /* Core palette — near-black + off-white + signal red */
  --bg-0: #07070a;           /* deepest */
  --bg-1: #0a0a0d;           /* page */
  --bg-2: #101014;           /* surface */
  --bg-3: #16161c;           /* raised */
  --bg-4: #1c1c24;           /* hover */
  --line: #23232c;           /* dividers */
  --line-soft: #1a1a22;

  --fg-0: #f2efe9;           /* primary text */
  --fg-1: #c9c5bb;           /* secondary */
  --fg-2: #8b8779;           /* muted */
  --fg-3: #5a5749;           /* faint */
  --fg-4: #3a3a44;           /* very faint */

  /* Signal accents */
  --red: #d7263d;
  --red-bright: #ff2e4d;
  --red-glow: #ff3d5e;
  --red-deep: #8b0a1c;
  --red-soft: rgba(215, 38, 61, 0.12);
  --red-line: rgba(215, 38, 61, 0.32);

  --amber: #f0a020;
  --green: #22c55e;
  --green-term: #7dd87d;

  /* Brand blue — sampled from the X glyph in the XContent RED logo.
     --blue is the dominant fill, --blue-bright is the highlight tone.
     Used as the secondary accent (e.g. service-tile headline on hover)
     to lean on parent-brand colour where red would over-dominate. */
  --blue: #1870b8;
  --blue-bright: #28a8e0;

  /* Type */
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  /* Display face is Cobe Heavy (italic-only). Sans listed as fallback so
     numerals / non-headline display usage (.hero__stat .num, .graph__stats .v)
     keep rendering normally — those rules don't request italic, so the browser
     skips the italic-only Cobe and uses the sans fallback. */
  --font-display: 'Cobe Heavy', 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  /* Rhythm */
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1440px;
  --maxw-tight: 1200px;

  --radius: 2px;
  --radius-lg: 4px;

  /* Fixed-nav offset — measured from the rendered nav height including the
     primary "Book a call" button (the tallest item in .nav__inner). 60px
     was clipping the ticker behind the nav border. */
  --nav-h: 72px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-1);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(1200px 700px at 85% -5%, rgba(215,38,61,0.08), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(215,38,61,0.04), transparent 70%),
    var(--bg-1);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--red); color: #fff; }

/* Subtle grid background on sections */
.grid-bg {
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
}

/* =========================================================
   Typography
   ========================================================= */

.mono { font-family: var(--font-mono); letter-spacing: 0; }
.sans { font-family: var(--font-sans); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--red);
  box-shadow: 0 0 12px var(--red-glow);
}

.eyebrow--plain::before { display: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* italic is required to match the @font-face declaration for Cobe Heavy
     (italic-only). Without it, the browser would skip Cobe and render in
     the IBM Plex Sans fallback. */
  font-style: italic;
  font-weight: 800;
  /* Mirrors hax.xcontent.red — Cobe Heavy is a display face designed to be
     set in caps, so all titles using it are uppercased. The few headings
     that override font-family (.dash__head h4, .foot__col h4 — both mono)
     have their own uppercase declarations, so they're unaffected. */
  text-transform: uppercase;
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin: 0;
  color: var(--fg-0);
  text-wrap: balance;
}

h1 {
  font-size: clamp(44px, 6.2vw, 96px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

h2 {
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.025em;
}

h3 {
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing: -0.01em;
  font-weight: 600;
}

p {
  margin: 0;
  color: var(--fg-1);
  text-wrap: pretty;
}

.lead {
  font-size: clamp(16px, 1.15vw, 18px);
  color: var(--fg-1);
  max-width: 62ch;
  line-height: 1.55;
}

.label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.hairline {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* =========================================================
   Layout
   ========================================================= */

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

.container--tight {
  max-width: var(--maxw-tight);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid var(--line);
}

section.pad-sm { padding: clamp(60px, 7vw, 100px) 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: clamp(48px, 6vw, 88px);
  max-width: 960px;
}

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
  }
  .section-head .eyebrow {
    padding-top: 10px;
  }
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-0);
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--red);
  color: var(--fg-0);
  background: var(--red-soft);
}

.btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn--primary:hover {
  background: var(--red-bright);
  border-color: var(--red-bright);
  box-shadow: 0 0 32px rgba(215,38,61,0.4);
}

.btn--ghost {
  border-color: var(--fg-4);
  color: var(--fg-1);
}
.btn--ghost:hover { color: var(--fg-0); }

/* Text link with terminal arrow */
.tlink {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-0);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: all 0.18s ease;
}
.tlink:hover { color: var(--red-bright); border-color: var(--red); }
.tlink::before { content: '→'; color: var(--red); }

/* =========================================================
   Navigation
   ========================================================= */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(10, 10, 13, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  transition: all 0.2s ease;
}

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--fg-0);
  font-weight: 500;
}
.nav__logo img {
  height: 22px;
  width: auto;
  /* Source PNG (739×70) reads as vertically heavy at this size — compress
     the rendered image 18% on the Y axis without changing the layout box
     or the horizontal width. */
  transform: scaleY(0.82);
  transform-origin: left center;
}
.nav__logo .sep { color: var(--fg-4); }
.nav__logo .tag {
  color: var(--red);
  font-weight: 600;
}

.nav__links {
  display: none;
  gap: 2px;
  align-items: center;
}
@media (min-width: 900px) {
  .nav__links { display: flex; }
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-1);
  padding: 8px 14px;
  border: 1px solid transparent;
  transition: all 0.15s;
  text-transform: uppercase;
}
.nav__links a:hover { color: var(--fg-0); border-color: var(--line); }

.nav__cta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.nav__status {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  padding: 6px 12px;
  border: 1px solid var(--line);
  letter-spacing: 0.06em;
}
@media (min-width: 1100px) { .nav__status { display: inline-flex; } }
.nav__status .dot {
  width: 7px; height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* =========================================================
   Ticker (CVE feed)
   ========================================================= */

.ticker {
  border-bottom: 1px solid var(--line);
  background: var(--bg-0);
  padding: 10px 0;
  overflow: hidden;
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.06em;
}
.ticker__track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: ticker 120s linear infinite;
  width: max-content;
}
/* Pause when the visitor's pointer is over the strip so they can read and
   click an entry that's catching their eye, and respect prefers-reduced-motion. */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; transform: translateX(0); }
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  transition: color 120ms ease, opacity 120ms ease;
}
a.ticker__item:hover,
a.ticker__item:focus-visible {
  color: var(--fg-0);
  outline: none;
}
a.ticker__item:hover .cve,
a.ticker__item:focus-visible .cve {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--red-bright);
}
.ticker__item .sev {
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.ticker__item .sev--crit { background: var(--red); color: #fff; }
.ticker__item .sev--high { background: rgba(215,38,61,0.2); color: var(--red-bright); border: 1px solid var(--red-line); }
.ticker__item .sev--med  { background: rgba(240, 160, 32, 0.15); color: var(--amber); border: 1px solid rgba(240,160,32,0.3); }
.ticker__item .dim { color: var(--fg-3); }
.ticker__item .cve { color: var(--fg-1); }

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  padding-top: calc(var(--nav-h, 64px) + 80px);
  padding-bottom: 80px;
  position: relative;
  border-top: none;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: end;
}

@media (min-width: 1100px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.hero__eyebrow .bar {
  width: 1px; height: 10px; background: var(--fg-4);
}
.hero__eyebrow .dot {
  width: 6px; height: 6px; background: var(--red); box-shadow: 0 0 10px var(--red-glow);
}

.hero__headline {
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.hero__headline .accent { color: var(--red); }
.hero__headline .cursor {
  display: inline-block;
  width: 0.5em;
  height: 0.9em;
  background: var(--red);
  vertical-align: text-bottom;
  animation: blink 1s steps(2) infinite;
  margin-left: 4px;
}
@keyframes blink {
  50% { opacity: 0; }
}

.hero__sub {
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--fg-1);
  max-width: 54ch;
  line-height: 1.55;
  margin-bottom: 36px;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 520px;
}
.hero__stat .num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  line-height: 1;
}
.hero__stat .num .plus { color: var(--red); }
.hero__stat .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-top: 10px;
}

/* Terminal window */
.term {
  background: var(--bg-0);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg-1);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 60px -20px rgba(215,38,61,0.2);
  position: relative;
  overflow: hidden;
}

.term__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.06em;
}
.term__bar .dots { display: flex; gap: 6px; }
.term__bar .dots span {
  width: 10px; height: 10px; border-radius: 50%; background: var(--line);
}
.term__bar .dots span:nth-child(1) { background: #ff5f57; }
.term__bar .dots span:nth-child(2) { background: #febc2e; }
.term__bar .dots span:nth-child(3) { background: #28c840; }
.term__bar .title {
  flex: 1;
  text-align: center;
  color: var(--fg-2);
  font-size: 11px;
}
.term__bar .live {
  color: var(--red-bright);
  display: inline-flex; align-items: center; gap: 6px;
}
.term__bar .live::before {
  content: ''; width: 6px; height: 6px; background: var(--red-bright);
  border-radius: 50%; box-shadow: 0 0 8px var(--red-bright);
  animation: pulse 1.2s infinite;
}

.term__body {
  padding: 20px 22px;
  min-height: 440px;
  max-height: 480px;
  overflow: hidden;
  position: relative;
}
.term__body::after {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  background: linear-gradient(transparent 70%, var(--bg-0));
  pointer-events: none;
}

.term__line { margin: 0; white-space: pre-wrap; word-break: break-word; }
.term__line .prompt { color: var(--red); }
.term__line .cmd { color: var(--fg-0); }
.term__line .arrow { color: var(--fg-2); }
.term__line .ok { color: var(--green-term); }
.term__line .warn { color: var(--amber); }
.term__line .err { color: var(--red-bright); }
.term__line .dim { color: var(--fg-3); }
.term__line .hl { color: var(--fg-0); }
.term__line.blank { height: 8px; }

.term__caret {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--red);
  vertical-align: -2px;
  animation: blink 1s steps(2) infinite;
}

/* =========================================================
   Services grid
   ========================================================= */

.services {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (min-width: 700px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services { grid-template-columns: repeat(3, 1fr); } }

.service {
  padding: 40px 36px 48px;
  border-top: 0;
  border-left: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background 180ms ease, border-color 180ms ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: transparent;
  font: inherit;
  isolation: isolate;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}
/* Top accent bar — slides in from the left on hover/focus, signals the
   tile is interactive and aligns with the red signal palette. */
.service::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--red);
  transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
}
.service:hover,
.service:focus-visible {
  background: var(--red-soft);
  border-right-color: var(--red-line);
  border-bottom-color: var(--red-line);
  outline: none;
}
.service:hover::before,
.service:focus-visible::before { width: 100%; }
/* Headline shifts to the brand blue (sampled from the X in the
   XContent RED logo) on hover/focus — gives the active tile a clear
   secondary-accent pop without doubling up on the red signal already
   carried by the top accent bar, arrow and border tints. */
.service:hover h3,
.service:focus-visible h3 { color: var(--blue-bright); }
.service:hover .service__arrow,
.service:focus-visible .service__arrow {
  color: var(--red);
  transform: translate(4px, -4px);
}
.service:hover .service__meta,
.service:focus-visible .service__meta { border-top-color: var(--red-line); color: var(--fg-2); }
.service h3 { transition: color 180ms ease; }
.service__meta { transition: color 180ms ease, border-top-color 180ms ease; }

.service__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service__num .tag {
  color: var(--red);
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid var(--red-line);
  background: var(--red-soft);
}

.service h3 {
  font-size: 22px;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
  font-weight: 600;
}
.service p {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 24px;
  flex: 1;
}
.service__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
  display: flex;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.service__meta span::before { content: '·'; color: var(--red); margin-right: 8px; }
.service__meta span:first-child::before { display: none; }

.service__arrow {
  position: absolute;
  top: 36px;
  right: 36px;
  font-family: var(--font-mono);
  color: var(--fg-3);
  font-size: 18px;
  transition: all 0.2s ease;
}

/* =========================================================
   Hax tabbed module
   ========================================================= */

.hax {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
}

.hax__head {
  display: grid;
  gap: 24px;
  margin-bottom: 56px;
}
@media (min-width: 900px) {
  .hax__head { grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
}

.hax__tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  margin-bottom: 32px;
  overflow-x: auto;
  background: var(--bg-2);
}
.hax__tab {
  flex: 1;
  min-width: 140px;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hax__tab:last-child { border-right: 0; }
.hax__tab:hover { color: var(--fg-0); background: var(--bg-3); }
.hax__tab.active {
  color: var(--fg-0);
  background: var(--bg-3);
}
.hax__tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--red);
  box-shadow: 0 0 12px var(--red-glow);
}
.hax__tab .tnum { color: var(--fg-4); font-size: 10px; }
.hax__tab.active .tnum { color: var(--red); }

.hax__panel {
  border: 1px solid var(--line);
  background: var(--bg-0);
  min-height: 520px;
  position: relative;
  overflow: hidden;
}
.hax__view { display: none; }
.hax__view.active { display: block; }

/* --- Dashboard view --- */
.dash {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 520px;
}
@media (max-width: 800px) { .dash { grid-template-columns: 1fr; } }

.dash__side {
  border-right: 1px solid var(--line);
  background: var(--bg-1);
  padding: 20px 0;
  font-family: var(--font-mono);
  font-size: 12px;
}
.dash__brand {
  padding: 0 20px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-0);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.dash__brand .sq {
  width: 18px; height: 18px; background: var(--red);
  display: inline-grid; place-items: center;
  color: #fff; font-size: 10px;
}
.dash__nav { display: flex; flex-direction: column; gap: 2px; }
.dash__nav a {
  padding: 8px 20px;
  color: var(--fg-2);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: 0.06em;
}
.dash__nav a:hover { color: var(--fg-0); background: var(--bg-2); }
.dash__nav a.on { color: var(--fg-0); background: var(--bg-3); border-left: 2px solid var(--red); padding-left: 18px; }
.dash__nav a .k { color: var(--fg-4); font-size: 10px; margin-left: auto; }

.dash__main { padding: 24px; }
.dash__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.dash__head h4 {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--fg-1);
  text-transform: uppercase;
  font-weight: 500;
}
.dash__head .search {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
  padding: 6px 12px; border: 1px solid var(--line); background: var(--bg-2);
}

.dash__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 700px) { .dash__kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  position: relative;
}
.kpi .kpi__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-2); margin-bottom: 10px;
  display: flex; justify-content: space-between;
}
.kpi .kpi__num {
  font-family: var(--font-display); font-size: 28px; font-weight: 500;
  letter-spacing: -0.02em; color: var(--fg-0); line-height: 1;
}
.kpi .kpi__trend {
  font-family: var(--font-mono); font-size: 10px; margin-top: 8px;
}
.kpi.kpi--crit .kpi__num { color: var(--red-bright); }
.kpi.kpi--crit .kpi__label { color: var(--red-bright); }
.kpi.kpi--warn .kpi__num { color: var(--amber); }
.kpi--up { color: var(--green-term); }
.kpi--down { color: var(--red-bright); }

.dash__findings {
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.finding {
  display: grid;
  grid-template-columns: 80px 1fr 100px 140px 80px;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  align-items: center;
  color: var(--fg-1);
}
.finding:last-child { border-bottom: 0; }
.finding:hover { background: var(--bg-2); }
.finding.head {
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.finding .sev {
  padding: 3px 8px; font-size: 10px; letter-spacing: 0.1em; display: inline-block;
  text-align: center;
}
.sev--critical { background: var(--red); color: #fff; }
.sev--highsv  { background: rgba(215,38,61,0.18); color: var(--red-bright); border: 1px solid var(--red-line); }
.sev--mediumsv{ background: rgba(240,160,32,0.15); color: var(--amber); border: 1px solid rgba(240,160,32,0.3); }
.sev--lowsv   { background: var(--bg-3); color: var(--fg-1); border: 1px solid var(--line); }

.finding .asset { color: var(--fg-0); }
.finding .path { color: var(--fg-3); }
.finding .action { text-align: right; color: var(--red-bright); }

@media (max-width: 700px) {
  .finding { grid-template-columns: 70px 1fr; }
  .finding .path, .finding .when, .finding .action { display: none; }
  .finding.head { display: none; }
}

/* --- Threat graph view --- */
.graph {
  position: relative;
  height: 520px;
  overflow: hidden;
}
.graph__overlay {
  position: absolute;
  top: 20px; left: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  z-index: 3;
  letter-spacing: 0.06em;
}
.graph__overlay .title { color: var(--fg-0); font-size: 13px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.12em; }
.graph__overlay .list { display: flex; flex-direction: column; gap: 2px; color: var(--fg-3); }
.graph__overlay .list span b { color: var(--fg-1); font-weight: 500; }

.graph__legend {
  position: absolute;
  bottom: 20px; right: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 3;
  display: flex;
  gap: 18px;
  background: var(--bg-0);
  padding: 10px 14px;
  border: 1px solid var(--line);
}
.graph__legend span { display: inline-flex; align-items: center; gap: 6px; }
.graph__legend .d { width: 8px; height: 8px; border-radius: 50%; }
.graph__legend .d.crit { background: var(--red-bright); box-shadow: 0 0 8px var(--red-bright); }
.graph__legend .d.asset { background: var(--fg-1); }
.graph__legend .d.ext { background: var(--amber); }

.graph__stats {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  color: var(--fg-2);
  letter-spacing: 0.06em;
}
.graph__stats .v { color: var(--red-bright); font-size: 22px; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; display: block; }

/* =========================================================
   Methodology (scroll-scrubbed)
   ========================================================= */

.method {
  background: var(--bg-0);
  position: relative;
  overflow: hidden;
}
.method__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 1000px) {
  .method__track { grid-template-columns: 0.9fr 1.1fr; gap: 80px; }
}

.method__sticky {
  position: sticky;
  top: 100px;
  align-self: start;
  padding: 40px 0;
}

.method__phases { display: flex; flex-direction: column; gap: 8px; }
.method__phase {
  padding: 32px 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: opacity 0.3s;
  opacity: 0.35;
  cursor: pointer;
}
.method__phase:last-child { border-bottom: 1px solid var(--line); }
.method__phase.active { opacity: 1; }
/* Hover lifts the dimmed phases to ~85% so users get instant feedback
   that the row is interactive even before they click/move on. */
.method__phase:not(.active):hover,
.method__phase:not(.active):focus-visible { opacity: 0.85; }
.method__phase:focus-visible { outline: none; }
.method__phase:focus-visible .method__phase-num .line { flex-basis: 80px; }

.method__phase-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.method__phase-num .line {
  height: 1px;
  background: var(--red);
  flex: 0 0 40px;
  transition: flex-basis 0.4s ease;
}
.method__phase.active .method__phase-num .line { flex-basis: 80px; }

.method__phase h3 {
  font-size: 28px;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.method__phase p {
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 54ch;
}

.method__viz {
  height: 80vh;
  min-height: 500px;
  max-height: 700px;
  position: sticky;
  top: 10vh;
  border: 1px solid var(--line);
  background: var(--bg-1);
  overflow: hidden;
}
.method__viz-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.method__viz-stage.active { opacity: 1; }

/* Phase 4 — quarterly cadence chart (SVG)
   ----------------------------------------
   The chart is rendered as inline SVG inside .cad__plot (see site.js).
   ViewBox-driven coordinates mean geometry is deterministic — the
   chart is always visible at its full size on first paint, so the
   worst case is a static-but-readable graph rather than the previous
   blank box. The .play class added on hover/activation simply replays
   a grow-and-pop animation pass on top of the already-visible chart. */
.cad {
  padding: 24px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  box-sizing: border-box;
}
.cad__title {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: 12px;
  flex: 0 0 auto;
}
.cad__plot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.cad__svg {
  width: 100%;
  height: 100%;
  display: block;
  font-family: var(--font-mono);
}

/* Static styling — chart reads correctly with zero JS animation state. */
.cad__bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.cad__trend,
.cad__dot {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.cad__svg-now {
  fill: var(--red-bright);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.cad__svg-q {
  fill: var(--fg-2);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cad__svg-sub {
  fill: var(--fg-3);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}
.cad__svg-sub--now {
  fill: var(--red-bright);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cad__svg-axis {
  fill: var(--fg-3);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cad__svg-axis--stat { fill: var(--fg-1); }

/* Animation state — added by site.js as .cad__plot.play. We use
   animation (not transition) so we can stagger via animation-delay
   and replay by removing/re-adding the class. */
.cad__plot.play .cad__bar {
  animation: cad-bar-grow 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.cad__plot.play .cad__trend {
  animation: cad-fade-in 500ms ease 600ms both;
}
.cad__plot.play .cad__dot {
  animation: cad-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(700ms + var(--i, 0) * 80ms);
}
@keyframes cad-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes cad-fade-in {
  from { opacity: 0; }
  to   { opacity: 0.55; }
}
@keyframes cad-pop {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cad__plot.play .cad__bar,
  .cad__plot.play .cad__trend,
  .cad__plot.play .cad__dot { animation: none; }
}

.cad__foot {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}
.cad__foot b { color: var(--fg-0); font-weight: 500; }

/* =========================================================
   Sectors + threat map
   ========================================================= */

.sectors {
  border-top: 1px solid var(--line);
}

.sectors__wrap {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .sectors__wrap { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
}

.sectors__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.sectors__item {
  padding: 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-1);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s;
}
.sectors__item:hover { background: var(--bg-2); color: var(--fg-0); }
.sectors__item .num {
  color: var(--fg-4);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.map {
  border: 1px solid var(--line);
  background: var(--bg-0);
  height: 520px;
  position: relative;
  overflow: hidden;
}
.map__head {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 3;
  display: flex;
  gap: 10px;
  align-items: center;
}
.map__head .live {
  color: var(--red-bright);
  display: inline-flex; align-items: center; gap: 6px;
}
.map__head .live::before {
  content: ''; width: 6px; height: 6px; background: var(--red-bright);
  border-radius: 50%; box-shadow: 0 0 8px var(--red-bright);
  animation: pulse 1.2s infinite;
}

.map__stats {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 3;
}
.map__stats b { color: var(--fg-0); font-weight: 500; }

/* =========================================================
   Proof (logos + certs)
   ========================================================= */

.proof {
  background: var(--bg-0);
}

.proof__logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-bottom: 80px;
}
@media (min-width: 700px) { .proof__logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .proof__logos { grid-template-columns: repeat(6, 1fr); } }

.proof__logo {
  padding: 36px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
  min-height: 110px;
  position: relative;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
}
.proof__logo::before {
  content: 'LOGO';
  position: absolute; top: 8px; left: 10px;
  font-size: 9px; color: var(--fg-4); letter-spacing: 0.1em;
}
.proof__logo .wm {
  color: var(--fg-1);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -0.01em;
  font-weight: 500;
  text-transform: none;
}

.certs {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .certs { grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
}

.certs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 600px) { .certs__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .certs__grid { grid-template-columns: repeat(4, 1fr); } }

.cert {
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s;
}
.cert:hover { border-color: var(--red-line); background: var(--bg-3); }
.cert .abbr {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
}
.cert .full {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  text-transform: uppercase;
}
.cert .held {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--red);
  margin-top: auto;
  padding-top: 10px;
  letter-spacing: 0.08em;
}

/* =========================================================
   CTA
   ========================================================= */

.cta {
  background:
    radial-gradient(800px 400px at 80% 50%, rgba(215,38,61,0.1), transparent 70%),
    var(--bg-0);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
  pointer-events: none;
}
.cta__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: end;
}
@media (min-width: 900px) {
  .cta__inner { grid-template-columns: 2fr 1fr; gap: 64px; }
}

.cta h2 {
  font-size: clamp(36px, 5vw, 68px);
  letter-spacing: -0.028em;
  margin-bottom: 20px;
}
.cta p { color: var(--fg-1); max-width: 58ch; }
.cta__actions {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.cta__actions .row { display: flex; gap: 12px; flex-wrap: wrap; }
.cta__email {
  color: var(--red-bright);
  border-bottom: 1px solid var(--red-line);
  padding-bottom: 4px;
  display: inline-block;
  width: fit-content;
}

/* =========================================================
   Footer
   ========================================================= */

footer {
  background: var(--bg-0);
  padding: 80px 0 40px;
  border-top: 1px solid var(--line);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 60px;
}
@media (min-width: 700px) { .foot__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

.foot__brand { max-width: 360px; }
.foot__brand img { height: 24px; margin-bottom: 20px; }
.foot__brand p { color: var(--fg-2); font-size: 13px; line-height: 1.55; }
/* Brand slogan — set in the display face (Cobe Heavy italic, uppercased)
   to match the headline voice used elsewhere on the page. The two
   highlighted spans ("if", "when") pick up the signal red so the rhetorical
   beat lands on the inevitability. */
.foot__brand .foot__slogan {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-0);
  margin-bottom: 0;
}
.foot__brand .foot__slogan span { color: var(--red-bright); }
.foot__brand .parent {
  margin-top: 18px; font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em;
}

.foot__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 16px;
  font-weight: 500;
}
.foot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot__col a { color: var(--fg-1); font-size: 14px; }
.foot__col a:hover { color: var(--red-bright); }

.foot__bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  flex-wrap: wrap;
}
.foot__bottom .links { display: flex; gap: 18px; }

/* =========================================================
   Tweaks panel
   ========================================================= */

#tweaks-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  z-index: 200;
  font-family: var(--font-mono);
  font-size: 12px;
  width: 280px;
  display: none;
}
#tweaks-panel.on { display: block; }
#tweaks-panel .tw__bar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fg-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  background: var(--bg-3);
}
#tweaks-panel .tw__bar .close {
  background: transparent; border: 0; color: var(--fg-3); cursor: pointer; padding: 2px 6px;
}
#tweaks-panel .tw__body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
#tweaks-panel .tw__row { display: flex; flex-direction: column; gap: 8px; }
#tweaks-panel .tw__label {
  font-size: 10px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase;
}
#tweaks-panel .tw__swatches { display: flex; gap: 8px; flex-wrap: wrap; }
#tweaks-panel .tw__swatch {
  width: 28px; height: 28px; border: 1px solid var(--line); cursor: pointer; padding: 0;
  transition: transform 0.1s;
}
#tweaks-panel .tw__swatch:hover { transform: scale(1.08); }
#tweaks-panel .tw__swatch.on { border-color: var(--fg-0); outline: 1px solid var(--fg-4); outline-offset: 2px; }
#tweaks-panel .tw__options { display: flex; flex-direction: column; gap: 4px; }
#tweaks-panel .tw__opt {
  padding: 8px 10px; background: var(--bg-1); border: 1px solid var(--line);
  color: var(--fg-1); text-align: left; cursor: pointer; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
}
#tweaks-panel .tw__opt.on { border-color: var(--red); color: var(--fg-0); background: var(--red-soft); }

/* =========================================================
   Reveal on scroll
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   Service modal
   - Single shared dialog populated from JS based on the tile's
     data-service slug. ESC and click-outside close it; focus is
     trapped inside while open and returned to the trigger on close.
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(20px, 6vh, 80px) 20px;
  overflow-y: auto;
}
.modal[aria-hidden="false"] { display: flex; }
.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 7, 10, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modal-backdrop-in 200ms ease-out;
}
.modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  padding: 36px 40px 32px;
  margin: auto 0;
  animation: modal-panel-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 46, 77, 0.08);
}
@media (max-width: 600px) {
  .modal__panel { padding: 28px 24px 24px; }
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.modal__close:hover,
.modal__close:focus-visible {
  color: var(--fg-0);
  border-color: var(--red);
  background: var(--red-soft);
  outline: none;
}
.modal__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.modal__num .tag {
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid var(--red-line);
  background: var(--red-soft);
  color: var(--red);
  letter-spacing: 0.12em;
}
.modal__title {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 18px;
}
.modal__lead {
  color: var(--fg-1);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.modal__section + .modal__section { margin-top: 24px; }
.modal__section h4 {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
}
.modal__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 560px) { .modal__list { grid-template-columns: 1fr 1fr; } }
.modal__list li {
  position: relative;
  padding-left: 20px;
  color: var(--fg-1);
  font-size: 14px;
  line-height: 1.5;
}
.modal__list li::before {
  content: '›';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red);
  font-family: var(--font-mono);
}
.modal__engage {
  color: var(--fg-1);
  font-size: 14px;
  line-height: 1.6;
}
.modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal__backdrop, .modal__panel { animation: none; }
}
/* Lock scroll on the body when the modal is open. */
body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}