/* ==========================================================================
   FireStrategy.ai — design system
   Tokens carried over from v4, with the performance and accessibility
   problems fixed: no 4× viewport animated grain, no stacked backdrop
   filters, real focus states, a working mobile nav, svh units.
   ========================================================================== */

/* --------------------------------------------------------------- typefaces
   Self-hosted, replacing the Google Fonts <link>. That removed two
   third-party origins and, with them, a request chain that sat on the
   critical path: the browser had to fetch CSS from fonts.googleapis.com
   before it could discover the woff2 on fonts.gstatic.com. Both files are
   now same-origin and preloaded from the document head, so they start
   downloading in the first round trip.

   These are the *variable* fonts, not the eight static instances the old
   link requested. Two consequences, both wanted:
     - one file per family per subset instead of eight, and
     - styles.css asks for weight 550 and 650 in two places. Against static
       instances CSS font matching rounds those to 600 and 700, so the
       declarations were quietly doing nothing. A variable font honours them.

   The latin/greek split is Google's own, kept deliberately. The site sets
   Δ, ε, π, σ and φ in equations and none of them are in the latin subset —
   shipping latin alone would have dropped them to a fallback face mid-formula.
   unicode-range means the greek file is only fetched by a page that uses it.

   Licences, which the OFL requires be distributed with the fonts: /fonts/LICENSE.txt
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

:root {
  --bg: #070b22;
  --bg-2: #0a1030;
  --bg-3: #0c1338;
  --ink: #eef1ff;
  --ink-dim: #96a0cf;
  /* #6c78a8 measured 4.19:1 on --card-solid and --bg-3, short of the 4.5:1
   * that SC 1.4.3 needs for body-size text. #717eb0 clears it on all four
   * backgrounds (4.92 / 4.70 / 4.56 / 4.55). */
  --ink-faint: #717eb0;
  --blue: #2438ff;
  --blue-bright: #3a6bff;
  --blue-glow: #6c8dff;
  --line: rgba(120, 150, 255, 0.14);
  --line-strong: rgba(120, 150, 255, 0.3);
  /* The border is the only thing marking out a form control, so SC 1.4.11
   * wants 3:1 against what is behind it. --line-strong manages 1.69. This is
   * scoped to inputs so card and panel edges keep their softer line. */
  --line-input: rgba(120, 150, 255, 0.6);
  --card: rgba(13, 20, 52, 0.72);
  --card-solid: #0d1434;
  --good: #4fd6ff;
  --pass: #37d99a;
  --warn: #ffc857;
  --bad: #ff6b8a;
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 9px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1180px;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(58, 107, 255, 0.2), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(36, 56, 255, 0.16), transparent 58%),
    radial-gradient(1000px 700px at 50% 110%, rgba(76, 110, 255, 0.1), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg) 100%);
}

/* Static, cheap grain. No animation, no 4× viewport element. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--blue-glow);
  text-decoration-color: rgba(108, 141, 255, 0.35);
  text-underline-offset: 3px;
}
a:hover { color: #a9c0ff; }

:focus-visible {
  outline: 2px solid var(--blue-glow);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--blue);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

.wrap {
  width: min(100% - 44px, var(--wrap));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- Typography */

h1, h2, h3, h4 {
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); letter-spacing: -0.03em; }
h3 { font-size: 1.22rem; font-weight: 600; }
h4 { font-size: 1.02rem; font-weight: 600; }
p { margin: 0 0 1.1em; }

/* The section labels. Julio: "the titles are kinda hard to read … increase size
   or make more bright blue, or a little bit of both." Both, plus two things he
   did not name that were doing as much damage as the size:
   - weight 500. JetBrains Mono at 400 is a thin face, and a thin uppercase run
     at 11px is the actual reason these read as faint rather than small.
   - tracking 0.2em -> 0.15em. Past about 0.18em at this size the letters stop
     reading as a word and start reading as scattered glyphs, so the extra air
     was costing legibility rather than buying it.
   #93aaff measures 8.74:1 on --bg, up from 6.38:1 for --blue-glow. The variable
   itself is untouched: it also colours links, .step-k and the h1 em, and those
   are not the complaint. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #93aaff;
  margin-bottom: 1.1em;
  display: block;
}

.lede { font-size: 1.16rem; color: var(--ink-dim); max-width: 66ch; }
.dim { color: var(--ink-dim); }
.mono { font-family: var(--mono); }

.block { padding: clamp(64px, 9vw, 128px) 0; }
.block-tight { padding: clamp(44px, 6vw, 78px) 0; }

/* ---------------------------------------------------------------- Header */

.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.scrolled {
  background: rgba(7, 11, 34, 0.9);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 70px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.06rem;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { border-radius: 7px; }
.brand-dot { color: var(--blue-glow); }

.topnav { display: flex; gap: 4px; }
.topnav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 99px;
  transition: color 0.2s, background 0.2s;
}
.topnav a:hover { color: var(--ink); background: rgba(120, 150, 255, 0.08); }
.topnav a[aria-current] { color: var(--ink); background: rgba(120, 150, 255, 0.12); }

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

.navtoggle {
  display: none;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.navtoggle span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobilenav {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 10px 22px 26px;
  background: rgba(7, 11, 34, 0.98);
  border-bottom: 1px solid var(--line);
}
.mobilenav a {
  color: var(--ink);
  text-decoration: none;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.mobilenav a.btn { margin-top: 16px; border-bottom: 0; justify-content: center; }

@media (max-width: 1000px) {
  .topnav { display: none; }
  .navtoggle { display: flex; }
  .mobilenav:not([hidden]) { display: flex; }
  .bar-end .btn-sm { display: none; }
}
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 10px 30px -12px rgba(58, 107, 255, 0.8);
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), filter 0.2s;
  white-space: nowrap;
}
.btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -14px rgba(58, 107, 255, 0.95);
  filter: brightness(1.06);
}
.btn:active { transform: translateY(0); }
.btn-sm { padding: 9px 18px; font-size: 0.88rem; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  box-shadow: none;
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(120, 150, 255, 0.09); box-shadow: none; }

/* ---------------------------------------------------------------- Breadcrumbs */

.crumbs { padding-top: 22px; font-size: 0.85rem; }
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--ink-faint);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-faint); }
.crumbs a { color: var(--ink-dim); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ---------------------------------------------------------------- Cards */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
a.card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
a.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card h3 { margin-bottom: 0.55em; }
.card p { color: var(--ink-dim); font-size: 0.92rem; line-height: 1.6; margin-bottom: 1em; }
.card-go {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-glow);
}
.card-go::after { content: " \2192"; transition: opacity 0.3s var(--ease); }
a.card:hover .card-go::after { opacity: 0.6; }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-glow);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------- Hero */

.hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex;
  align-items: center;
  padding: 60px 0 40px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  width: 100%;
}
@media (max-width: 950px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero { min-height: auto; }
}
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--blue-glow); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 26px; }
.hero-proof {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pass);
}

.stage {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 2;
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.stage img { width: 100%; height: 100%; object-fit: cover; }
.stage .fire {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  -webkit-mask-image: radial-gradient(circle var(--r, 0px) at var(--x, 50%) var(--y, 50%), #000 0%, #000 62%, transparent 100%);
  mask-image: radial-gradient(circle var(--r, 0px) at var(--x, 50%) var(--y, 50%), #000 0%, #000 62%, transparent 100%);
}
.stage[data-active] .fire { opacity: 1; }
.stage-hint {
  position: absolute;
  left: 16px; bottom: 16px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(7, 11, 34, 0.6);
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

/* ---------------------------------------------------------------- Marquee */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 46px;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee span {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------------------------------------------------------------- Stats */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }
.stat {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  background: linear-gradient(180deg, rgba(20, 30, 76, 0.5), rgba(10, 16, 48, 0.3));
}
.stat-n {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  background: linear-gradient(135deg, #fff, var(--blue-glow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.stat-h { color: var(--ink-dim); font-size: 0.95rem; }

/* Section heading above a grid of cards. */
.sec-h { font-size: 1.5rem; margin-bottom: 8px; }
.sec-h + .dim { margin-bottom: 22px; max-width: 70ch; }
.src { font-size: 0.8rem; color: var(--ink-faint); margin-top: 20px; }

/* ---------------------------------------------------------------- Tools UI */

.tool-head { padding: 34px 0 8px; }
.tool-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.tool-meta b { color: var(--ink-dim); font-weight: 500; }

.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 26px;
  align-items: start;
}
@media (max-width: 1000px) { .tool-layout { grid-template-columns: 1fr; } }

.panel {
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
}
.panel + .panel { margin-top: 18px; }
.panel > h2, .panel > h3 { margin-top: 0; }

.sticky { position: sticky; top: 92px; }
@media (max-width: 1000px) { .sticky { position: static; } }

.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field > label,
.fieldset-legend {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}
.field-help {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 7px 0 0;
  line-height: 1.5;
}

input[type="number"],
input[type="email"],
input[type="text"],
select {
  width: 100%;
  background: rgba(7, 11, 34, 0.8);
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  color: var(--ink);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 0.98rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2396a0cf' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
input:hover, select:hover { border-color: rgba(120, 150, 255, 0.5); }
input:focus-visible, select:focus-visible {
  outline: 0;
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(58, 107, 255, 0.25);
}

.input-unit { position: relative; }
.input-unit .unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
  pointer-events: none;
}
.input-unit input { padding-right: 62px; }

.radios { display: grid; gap: 8px; }
.radios.inline { grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 520px) { .radios.inline { grid-auto-flow: row; } }
.radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.92rem;
  transition: border-color 0.2s, background 0.2s;
}
.radio:hover { border-color: rgba(120, 150, 255, 0.5); }
.radio input { accent-color: var(--blue-bright); margin-top: 3px; flex-shrink: 0; }
.radio:has(input:checked) {
  border-color: var(--blue-bright);
  background: rgba(58, 107, 255, 0.11);
}

.toggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.5;
}
.toggle input { accent-color: var(--blue-bright); margin-top: 3px; flex-shrink: 0; width: 17px; height: 17px; }

fieldset {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 22px;
  padding: 20px 0 0;
}
fieldset:first-of-type { border-top: 0; padding-top: 0; }
legend {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-glow);
  padding: 0;
  margin-bottom: 14px;
}

.rows-table { width: 100%; }
.row-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 40px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.row-del {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink-faint);
  border-radius: var(--r-sm);
  height: 42px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.row-del:hover { color: var(--bad); border-color: var(--bad); }
.row-add {
  background: none;
  border: 1px dashed var(--line-strong);
  color: var(--ink-dim);
  border-radius: var(--r-sm);
  padding: 10px;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
}
.row-add:hover { border-color: var(--blue-bright); color: var(--ink); }

/* Result card */

.result {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: var(--card-solid);
}
.result-top { padding: 26px; border-bottom: 1px solid var(--line); }
.result-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 99px;
  margin-bottom: 14px;
}
.result-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-pass { color: var(--pass); background: rgba(55, 217, 154, 0.11); }
.st-fail { color: var(--bad); background: rgba(255, 107, 138, 0.12); }
.st-warn { color: var(--warn); background: rgba(255, 200, 87, 0.12); }
.st-info { color: var(--good); background: rgba(79, 214, 255, 0.11); }

.result-title { font-size: 1.32rem; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 10px; }
.result-text { color: var(--ink-dim); font-size: 0.95rem; margin: 0; }

.result-figs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}
.fig {
  padding: 20px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fig:nth-child(2n) { border-right: 0; }
.fig-l {
  font-size: 0.76rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
  margin-bottom: 7px;
}
.fig-v { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.fig-v small { font-size: 0.78rem; font-weight: 500; color: var(--ink-dim); letter-spacing: 0; }
.fig.primary { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(36, 56, 255, 0.16), rgba(58, 107, 255, 0.05)); }
.fig.primary .fig-v { font-size: 2.1rem; }

.working { width: 100%; border-collapse: collapse; font-size: 0.89rem; }
.working th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.working td { padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.working td:last-child { text-align: right; font-family: var(--mono); white-space: nowrap; padding-left: 14px; }
.working .w-detail { color: var(--ink-faint); font-size: 0.82rem; display: block; margin-top: 3px; }
.working .w-cite {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--blue-glow);
  margin-top: 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}

.notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.notes li {
  font-size: 0.88rem;
  color: var(--ink-dim);
  padding-left: 22px;
  position: relative;
  line-height: 1.6;
}
.notes li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--blue-glow);
  opacity: 0.7;
}

.sources { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.sources li { font-size: 0.88rem; color: var(--ink-dim); }
.sources b { display: block; color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 0.82rem; margin-bottom: 3px; }

.eq {
  background: rgba(7, 11, 34, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.9;
  overflow-x: auto;
}
.eq code { color: var(--good); }

.disclaimer {
  border: 1px solid rgba(255, 200, 87, 0.28);
  background: rgba(255, 200, 87, 0.05);
  border-radius: var(--r-md);
  padding: 18px 20px;
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.disclaimer b { color: var(--warn); }

/* Author card on /about/. */
.authorcard {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin: 22px 0 26px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.authorcard-img {
  width: 108px;
  height: 108px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.authorcard p { margin: 0 0 10px; }
.authorcard p:last-child { margin-bottom: 0; }
.authorcard-name { color: var(--ink); }
@media (max-width: 640px) {
  .authorcard { flex-direction: column; gap: 16px; }
}

/* Article byline. A named, checkable human on YMYL content. */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.byline p { margin: 0; }
.byline-who a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.byline-who a:hover { border-bottom-color: var(--blue-glow); }
.byline-ext { margin-left: 8px; font-size: 0.82rem; color: var(--ink-dim) !important; }
.byline-role, .byline-when { color: var(--ink-faint); }

/* Honeypot. Off-screen rather than display:none, which bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Print, Copy and Reset only do anything once tool-runner.js has loaded and
 * set data-live. They are server-rendered, so without this a no-JS visitor —
 * or anyone whose module request failed — gets three buttons that silently do
 * nothing. */
.toolbar-actions { display: none; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
#tool[data-live="1"] .toolbar-actions { display: flex; }
.toolbar-actions button, .toolbar-actions a {
  flex: 1;
  min-width: 130px;
  justify-content: center;
  text-align: center;
}

/* ---------------------------------------------------------------- Prose */

.prose { max-width: 74ch; font-size: 1.03rem; }
.prose h2 { margin-top: 2em; font-size: 1.75rem; }
.prose h3 { margin-top: 1.8em; font-size: 1.22rem; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--blue-bright);
  color: var(--ink);
  font-size: 1.08rem;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.9rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.prose td.num { font-family: var(--mono); text-align: right; }
.prose figure { margin: 1.8em 0; }
.prose figcaption { font-size: 0.82rem; color: var(--ink-faint); margin-top: 8px; }
.prose code { font-family: var(--mono); font-size: 0.88em; background: rgba(120, 150, 255, 0.1); padding: 2px 6px; border-radius: 4px; }

.callout {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--blue-bright);
  background: rgba(58, 107, 255, 0.06);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin: 1.8em 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout b { color: var(--ink); }

.keyfact {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin: 1.6em 0;
  background: linear-gradient(135deg, rgba(36, 56, 255, 0.1), transparent);
}
.keyfact dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-glow); }
.keyfact dd { margin: 6px 0 16px; font-size: 1.02rem; }
.keyfact dd:last-child { margin-bottom: 0; }

.toc {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-bottom: 34px;
  background: var(--card);
}
.toc h2 { font-size: 0.72rem; font-family: var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 20px; font-size: 0.92rem; }
.toc li { margin-bottom: 6px; }
.toc a { color: var(--ink-dim); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }

/* ---------------------------------------------------------------- Article */

.article-head { padding: 26px 0 4px; }
.article-head h1 { max-width: 22ch; }
.article-head .lede { max-width: 68ch; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.article-meta b { color: var(--blue-glow); font-weight: 500; }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 54px;
  align-items: start;
}
@media (max-width: 980px) { .article-layout { grid-template-columns: 1fr; gap: 34px; } }
.aside h3 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 12px;
}
.aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aside a { color: var(--ink-dim); text-decoration: none; font-size: 0.92rem; }
.aside a:hover { color: var(--ink); }
.aside .panel p { font-size: 0.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-dim);
}
.updated-note {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--ink-faint);
  max-width: 74ch;
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  padding: 18px 34px 18px 0;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--blue-glow);
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 20px; color: var(--ink-dim); font-size: 0.96rem; max-width: 74ch; }

/* ---------------------------------------------------------------- Capture */

.capture { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.capture input { flex: 1; min-width: 190px; }
.capture button {
  padding: 12px 22px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  color: #fff;
  border: 0;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  cursor: pointer;
  transition: filter 0.2s;
}
.capture button:hover { filter: brightness(1.08); }
.capture button:disabled { opacity: 0.6; cursor: default; }
.capture-note { flex-basis: 100%; font-size: 0.76rem; color: var(--ink-faint); margin: 8px 0 0; }
.capture-msg { flex-basis: 100%; font-size: 0.86rem; margin: 8px 0 0; }
.capture-msg[data-ok] { color: var(--pass); }
.capture-msg[data-err] { color: var(--bad); }

/* ---------------------------------------------------------------- Footer */

.siteft {
  border-top: 1px solid var(--line);
  padding: 66px 0 40px;
  margin-top: 60px;
  background: rgba(6, 9, 28, 0.6);
}
.ftgrid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px;
}
@media (max-width: 1000px) { .ftgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ftgrid { grid-template-columns: 1fr; gap: 30px; } }
.fbrand p { color: var(--ink-faint); font-size: 0.9rem; margin: 16px 0 20px; max-width: 40ch; }
.fcol h3 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
  font-weight: 500;
}
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fcol a { color: var(--ink-dim); text-decoration: none; font-size: 0.9rem; }
.fcol a:hover { color: var(--ink); }
.ftbase {
  border-top: 1px solid var(--line);
  margin-top: 46px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.ftbase p { margin: 0; }
.ftnote { max-width: 62ch; }

/* ---------------------------------------------------------------- Reveal */

/* Only hide the initial state when JS is running to reveal it again. app.js
   sets `js` on <html> as its first statement, so without JS these elements
   stay visible instead of leaving /tools/ and /guides/ rendering blank. */
.js .reveal-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal-up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal-up { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Print */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before, .grain, .topbar, .siteft, .toolbar-actions, .mobilenav, .skip { display: none !important; }
  .panel, .card, .result { border: 1px solid #999; background: #fff; page-break-inside: avoid; }
  .fig.primary { background: #f2f2f2; }
  .stat-n, .fig-v { color: #000; -webkit-text-fill-color: #000; }
  a { color: #000; text-decoration: underline; }
  .tool-layout { display: block; }
  main { max-width: none; }

  /* A <details> prints in whatever state it is in on screen, so the FAQ block
     came out as a column of collapsed "+" rows that nobody can open on paper.
     Two different answers, because the two contexts want opposite things:

     On a calculator page the printout is a result sheet — a record to file or
     hand to a client — and the FAQ is dead weight on it. Drop it. */
  .tool-faq { display: none !important; }

  /* Everywhere else (guides, hubs) the questions ARE the content, so print
     them open — without script, because the site works with JS off.

     Overriding `display` on the children is NOT enough and looks like it works
     until you actually render a PDF: current Chrome hides a closed <details>
     with `content-visibility: hidden` on the ::details-content pseudo-element,
     not with display:none on the children. Verified by printing to PDF and
     reading the text back, which is the only thing that proves it. */
  details::details-content { content-visibility: visible !important; }
  details > *:not(summary) { display: block !important; }
  details { page-break-inside: avoid; }
  /* The "+" affordance is a lie on paper — nothing is going to expand. */
  .faq summary::after { content: "" !important; }
  /* The answers are set in --ink-dim, which is tuned for a dark screen and
     comes out as pale grey on white. It only started mattering when they began
     printing at all. */
  .faq details > div { color: #000; }
}

/* ==========================================================================
   HOME PAGE (v4)
   The original v4 home page, preserved exactly. Every rule below is scoped to
   body.home so it cannot affect the tools, guides, hubs or reference pages,
   and so the site-wide design system cannot affect it.
   ========================================================================== */

/* -- backdrop ------------------------------------------------------------ */
.home .bg-aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 560px at 78% -5%, rgba(58, 107, 255, 0.22), transparent 60%),
    radial-gradient(700px 500px at -8% 40%, rgba(36, 56, 255, 0.14), transparent 60%),
    radial-gradient(800px 600px at 55% 110%, rgba(108, 141, 255, 0.1), transparent 60%);
  animation: aurora 16s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(-30px) scale(1.05); opacity: 0.85; }
}
.home main, .home .hero, .home .marquee-band, .home .siteft {
  position: relative; z-index: 3;
}

/* v4's bar overlaid the hero, so the hero owns the full viewport. It has to
 * stay above the page content, or the sections scroll straight through it. */
.home .topbar { position: fixed; left: 0; right: 0; z-index: 90; }

/* -- type ---------------------------------------------------------------- */
.home h1 {
  font-size: clamp(44px, 5.4vw, 78px);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.035em;
  margin-bottom: 22px;
}
.home .grad-text {
  background: linear-gradient(100deg, var(--blue-glow), #a5c0ff 60%, var(--blue-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home h2 {
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 700; line-height: 1.06; letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.home h2 em, .home h1 em { font-style: normal; color: var(--blue-glow); }
.home h3 {
  font-size: 19px; font-weight: 650; letter-spacing: -0.015em;
  line-height: 1.25; margin-bottom: 8px;
}
.home .eyebrow {
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--blue-glow); margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 10px;
}
.home .pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 0 0 rgba(58, 107, 255, 0.6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(58, 107, 255, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(58, 107, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 107, 255, 0); }
}
.home .lede {
  font-size: 18px; color: var(--ink-dim); margin-bottom: 30px; max-width: 460px;
}

/* -- buttons ------------------------------------------------------------- */
.home .btn-lg { padding: 16px 36px; font-size: 15px; border-radius: 12px; }
.home .btn-block { width: 100%; margin-top: 22px; }

/* -- hero ---------------------------------------------------------------- */
/* 88svh, not 100. The copy is vertically centred in the hero box, so the gap
   under the fixed 71px nav is (heroHeight + padTop - padBottom - copyHeight)/2
   — the stage height cancels out of it entirely. At 100svh that put the
   headline 190px below the nav on a 858px screen. 88svh brings it to ~66px and
   lets the marquee band show above the fold, which the full-height hero never
   did. */
.home .hero {
  min-height: 88vh;
  min-height: 88svh;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 30px;
  /* 80, not 120. The copy is centred against the stage, so the gap under the
     nav is set by the stage height, not by this padding — at 88vh the row was
     taller than the viewport and 120px on top pushed the whole hero off the
     bottom. See .reveal-stage: the stage lost 10vh and the brain did not
     shrink, because object-fit:contain is width-limited in this column. */
  padding: 80px 56px 30px;
  max-width: 1560px;
  margin: 0 auto;
}
.home .hero-copy { max-width: 590px; }
.home .cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.home .cta-row.center { justify-content: center; }

.home .hero-proof {
  display: flex; align-items: center; gap: 22px; margin-top: 42px;
  padding: 0; border: 0; background: none; font-size: inherit;
}
.home .proof { display: flex; flex-direction: column; }
.home .proof-n { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.home .proof-l { font-size: 12px; color: var(--ink-dim); }
/* the site-wide hero puts a dot before every proof span; v4's stacks a number
 * over a label, so that would give two dots per stat. */
.home .hero-proof span { display: block; gap: 0; }
.home .hero-proof span::before { content: none; }
.home .proof-sep { width: 1px; height: 34px; background: var(--line-strong); }

/* -- reveal stage -------------------------------------------------------- */
/* 70vh, was 88vh. Costs the brain nothing: the column is ~545px wide and the
   image is 1.21:1, so object-fit:contain is width-limited and every stage
   height above ~450px paints exactly the same brain. What it buys is the hero
   fitting the viewport again — at 88vh the grid row was 755px and the hero
   came to 905px on an 858px screen, which is most of why the headline sat so
   far below the nav. */
.home .reveal-stage {
  position: relative; width: 100%; height: 70vh; min-height: 480px;
  display: flex; align-items: center; justify-content: center;
  cursor: crosshair;
}
.home .layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  user-select: none; -webkit-user-drag: none;
  /* the layers are scaled past the edge of the figure, so without this they
   * hit-test over the hero copy and swallow clicks on the buttons. */
  pointer-events: none;
}
/* No scale at all now, and the brain is still 60% wider on screen than the one
   that shipped. The building images used 1.55 and the round-13 brain kept
   1.15, both bleeding the image past its column on purpose: a cropped skyline
   reads as a tall building, and a 4:3 canvas that was 45% empty margin could
   afford it. This canvas is cropped to the brain, so overflow no longer buys
   size, it just crops — measured at a 1179px viewport, scale(1.15) painted the
   image to x=1204 and sliced the right parietal lobe off against the window
   edge. At scale 1 the image can never leave its column at any width. If these
   ever go back above 1, BOTH layers must carry the SAME value or the reveal
   misaligns. */
.home .layer.base { transform: none; }
.home .layer.fire {
  --x: 50%; --y: 50%; --r: 0px;
  transform: none;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, #000 62%, rgba(0,0,0,0.35) 82%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, #000 62%, rgba(0,0,0,0.35) 82%, transparent 100%);
  filter: drop-shadow(0 0 30px rgba(58, 107, 255, 0.4));
}
.home .stage-hint {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
  pointer-events: none; transition: opacity 0.4s;
}
.home .reveal-stage:hover .stage-hint { opacity: 0; }

/* The hint word follows the input device, not the breakpoint — a small window
 * on a desktop still hovers, and a large tablet still drags, so a width query
 * would get both wrong. "Hover" is the default so that a browser too old to
 * support the hover feature query keeps the desktop wording.
 *
 * display:none rather than visibility/opacity is deliberate: it drops the
 * inactive word out of the accessibility tree, so a screen reader announces
 * one word instead of "Hover Drag". */
.home .stage-hint .hint-coarse { display: none; }
@media (hover: none) {
  .home .stage-hint .hint-fine { display: none; }
  .home .stage-hint .hint-coarse { display: inline; }
}

/* On touch there is no :hover to fade the pill, so it would sit on the brain
 * for the rest of the session. app.js adds .hint-off on the first touch. */
.home .reveal-stage.hint-off .stage-hint { opacity: 0; }

/* -- marquee ------------------------------------------------------------- */
.home .marquee-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(10, 16, 48, 0.4);
  overflow: hidden; padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.home .marquee { overflow: visible; padding: 0; border: 0; -webkit-mask-image: none; mask-image: none; }
.home .marquee-track {
  display: flex; gap: 34px; width: max-content;
  animation: marquee 30s linear infinite;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em;
  color: var(--ink-dim); text-transform: uppercase; white-space: nowrap;
}
.home .marquee-track span { border: 0; background: none; padding: 0; }
.home .marquee-band:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -- blocks -------------------------------------------------------------- */
.home .block { max-width: 1160px; margin: 0 auto; padding: 110px 48px; }
.home .block.center, .home .center { text-align: center; }
.home .body { font-size: 16.5px; color: var(--ink-dim); max-width: 560px; }
.home .center-b { margin-left: auto; margin-right: auto; }
.home .dim { margin-top: 30px; font-size: 15px; }

/* -- problem grid -------------------------------------------------------- */
.home .prob-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 48px; text-align: left;
}
.home .prob {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 24px;
  backdrop-filter: blur(14px);
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.home .prob:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.home .prob-ico {
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-glow);
  background: rgba(58, 107, 255, 0.12);
  border: 1px solid rgba(58, 107, 255, 0.28);
  margin-bottom: 18px;
}
.home .prob-ico svg { width: 21px; height: 21px; }
.home .prob h3 { font-size: 17px; margin-bottom: 8px; }
.home .prob p { font-size: 13.5px; color: var(--ink-dim); line-height: 1.55; }

.home .severity { margin-top: 64px; }
.home .severity-head {
  font-size: clamp(17px, 2vw, 21px); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); max-width: 640px; margin: 0 auto 32px;
}
.home .src {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em;
  color: var(--ink-dim); opacity: 0.7; margin-top: 24px; max-width: 720px;
  margin-left: auto; margin-right: auto; line-height: 1.6;
}
.home .src a { color: var(--blue-glow); }

/* -- stats --------------------------------------------------------------- */
.home .stat-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home .stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 34px 26px;
  backdrop-filter: blur(14px); text-align: left;
}
.home .stat-n {
  font-size: clamp(40px, 4.6vw, 62px); font-weight: 800; letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(120deg, #fff, var(--blue-glow));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
.home .stat-h { font-size: 14px; color: var(--ink-dim); }

/* -- bento --------------------------------------------------------------- */
.home .bento { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 48px; }
.home .cell {
  grid-column: span 2; position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 28px;
  backdrop-filter: blur(14px); overflow: hidden; text-align: left;
  transition: border-color 0.35s, transform 0.35s var(--ease), box-shadow 0.35s;
}
.home .cell-wide { grid-column: span 3; }
.home .cell:hover {
  border-color: var(--line-strong); transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.home .glow::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(90, 125, 255, 0.14), transparent 65%);
  opacity: 0; transition: opacity 0.35s;
}
.home .glow:hover::before { opacity: 1; }
.home .cell-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue-glow); margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 10px;
}
.home .tool-ico {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blue-glow);
  background: rgba(58, 107, 255, 0.12);
  border: 1px solid rgba(58, 107, 255, 0.3);
}
.home .tool-ico svg { width: 15px; height: 15px; }
.home .cell > p { font-size: 14px; color: var(--ink-dim); margin-bottom: 20px; }

.home .mini-card {
  background: rgba(7, 11, 34, 0.7);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 20px; font-size: 13.5px;
}
.home .mini-head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.home .mini-row { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); }
.home .markers { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.home .markers li { display: flex; align-items: flex-start; gap: 12px; }
.home .marker {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--blue-bright); color: var(--blue-glow);
  font-family: var(--mono); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.home .cite {
  font-family: var(--mono); font-size: 11px; color: var(--blue-glow);
  background: rgba(58, 107, 255, 0.12);
  border: 1px solid rgba(58, 107, 255, 0.3);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.home .docline { font-size: 14.5px; line-height: 1.9; margin-bottom: 14px; }
.home del { color: var(--bad); }
.home ins { color: var(--good); text-decoration-color: rgba(79, 214, 255, 0.5); }
.home .ripple-note {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--ink-dim);
  border-top: 1px dashed var(--line); padding-top: 12px;
}
.home .ripple-badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--blue-glow);
  border: 1px solid rgba(58, 107, 255, 0.45); border-radius: 4px; padding: 2px 7px;
}
.home .dot-live {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--good); box-shadow: 0 0 8px rgba(79, 214, 255, 0.8);
}
.home .calc-grid { display: grid; grid-template-columns: 1fr auto; row-gap: 10px; color: var(--ink-dim); }
.home .mono { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.home .mono.bad { color: var(--bad); }

.home .free-note {
  margin-top: 30px; text-align: center;
  font-size: 14px; color: var(--ink-dim);
}
.home .free-note a { color: var(--blue-glow); }

/* -- steps --------------------------------------------------------------- */
.home .steps {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: 16px; margin-top: 48px;
}
.home .step {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 24px;
  text-align: left; backdrop-filter: blur(14px);
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.home .step:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.home .step-k { font-family: var(--mono); font-size: 12px; color: var(--blue-glow); margin-bottom: 12px; }
.home .step p { font-size: 13.5px; color: var(--ink-dim); }
.home .step-line {
  align-self: center; width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-glow), transparent);
}
/* max-width is sized so the longest pull quote on the page ("The tool raises the
   intelligence in the deliverable. The judgement stays human.", 78 characters at
   21px) sits on ONE line on a desktop, which is what Julio asked for. At 700px it
   wrapped and orphaned the word "human." on a line of its own. text-wrap: balance
   handles the narrower viewports where one line is impossible, splitting evenly
   instead of orphaning a word. */
.home .pull {
  margin: 44px auto 0; font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
  max-width: 880px; text-align: center; text-wrap: balance;
}
/* The gloss under the pull quote. Quieter than the pull, so the two read as
   statement and explanation rather than as two competing headlines. */
.home .pull-sub {
  margin: 12px auto 0; max-width: 640px; text-align: center;
  font-size: 15px; line-height: 1.6; color: var(--ink-dim);
}

/* -- security pills ------------------------------------------------------ */
.home .sec-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.home .pill {
  font-size: 14px; font-weight: 550; color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 13px 26px;
  backdrop-filter: blur(12px);
  transition: border-color 0.3s, transform 0.3s var(--ease), background 0.3s;
}
.home .pill:hover { border-color: var(--blue-bright); transform: translateY(-3px); background: rgba(58, 107, 255, 0.1); }

/* -- multiplier ---------------------------------------------------------- */
.home .multiplier { display: flex; align-items: center; justify-content: center; gap: 34px; margin: 40px 0 8px; }
.home .mx { text-align: center; }
.home .mx-n { font-size: clamp(48px, 6.6vw, 80px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink-dim); }
.home .mx-hot .mx-n {
  background: linear-gradient(120deg, var(--blue-glow), #a5c0ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(90, 125, 255, 0.45));
}
.home .mx-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-top: 10px; }
.home .mx-arrow { font-size: 28px; color: var(--blue-bright); }

/* -- pricing ------------------------------------------------------------- */
.home .price-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  margin: 48px auto 0; max-width: 860px;
}
/* The grid already makes the three cards equal height, but the CTA used to float
   directly under a feature list whose length differs per tier, so the three
   buttons landed at three different heights. Making the card a flex column and
   pushing the button down with margin-top:auto pins all three to the same
   baseline, which is what makes the row read as a comparison. */
.home .price {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 34px 30px;
  backdrop-filter: blur(14px); text-align: left;
  transition: border-color 0.35s, transform 0.35s var(--ease), box-shadow 0.35s;
}
.home .price > .btn { margin-top: auto; }
/* The list must not stretch to fill the gap the auto margin creates. */
.home .price ul { flex: 0 0 auto; }
.home .price:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.home .price.hot {
  border-color: rgba(58, 107, 255, 0.55);
  box-shadow: 0 0 60px rgba(58, 107, 255, 0.16);
  background: linear-gradient(180deg, rgba(36, 56, 255, 0.12), var(--card) 45%);
}
.home .price-badge {
  position: absolute; top: -12px; right: 24px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-bright));
  border-radius: 999px; padding: 5px 14px;
  box-shadow: 0 4px 18px rgba(36, 56, 255, 0.5);
}
.home .price-tier { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-glow); margin-bottom: 12px; }
.home .price-n { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.home .price-n span { font-family: var(--mono); font-size: 12.5px; font-weight: 400; color: var(--ink-dim); letter-spacing: 0; margin-left: 6px; }
.home .price ul { list-style: none; margin-top: 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.home .price li { font-size: 14px; color: var(--ink-dim); padding-left: 24px; position: relative; }
.home .price li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-glow); font-weight: 700; }
.home .price-note { font-size: 13px; color: var(--ink-dim); margin-top: 26px; }

/* Three tiers rather than two. The cards carry only what a buyer needs in
   order to choose; the rest lives in the comparison table below, shut by
   default so the section stays scannable. */
.home .price-row.price-3 { grid-template-columns: repeat(3, 1fr); max-width: 1080px; }
.home .price-sub { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); }

.home .price-compare {
  max-width: 1080px; margin: 26px auto 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); overflow: hidden;
}
.home .price-compare summary {
  cursor: pointer; list-style: none; padding: 16px 22px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
}
.home .price-compare summary::-webkit-details-marker { display: none; }
.home .price-compare summary::after {
  content: "+"; font-family: var(--mono); font-size: 18px; font-weight: 400;
  color: var(--blue-glow); line-height: 1;
}
.home .price-compare[open] summary::after { content: "−"; }
.home .price-compare summary:hover { color: var(--blue-glow); }

/* The table is the one thing in this section that cannot shrink to a phone, so
   it scrolls inside its own box rather than pushing the page sideways. */
.home .price-table-scroll { overflow-x: auto; padding: 0 22px 22px; }
.home .price-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.home .price-table th,
.home .price-table td { padding: 11px 14px; text-align: left; border-top: 1px solid var(--line); }
.home .price-table thead th {
  border-top: 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-glow);
}
.home .price-table tbody th { font-weight: 500; color: var(--ink); }
.home .price-table td { color: var(--ink-dim); }
.home .price-table td.yes { color: var(--blue-glow); font-weight: 700; }
.home .price-table td.no { opacity: 0.45; }
/* The paid tier is what the other two are being compared against, so it reads
   as the subject of the table rather than as one of three equals. */
.home .price-table th:nth-child(3),
.home .price-table td:nth-child(3) { background: rgba(58, 107, 255, 0.06); }

/* -- final CTA ----------------------------------------------------------- */
.home .cta-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(36, 56, 255, 0.14), var(--card) 55%);
  border: 1px solid rgba(58, 107, 255, 0.35);
  border-radius: 28px; padding: 70px 50px;
  overflow: hidden; backdrop-filter: blur(16px);
}
.home .cta-divider {
  display: flex; align-items: center; gap: 16px;
  max-width: 420px; margin: 30px auto 22px;
  color: var(--ink-dim); font-size: 12.5px;
}
.home .cta-divider::before, .home .cta-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.home .cta-divider span { white-space: nowrap; }

/* -- email capture ------------------------------------------------------- */
/* Scoped to main: the footer sits inside body.home too, and v4's pill-shaped
 * form does not fit the narrow footer column. */
.home main .capture {
  display: flex; gap: 10px; max-width: 460px; flex-wrap: nowrap;
  background: rgba(13, 20, 52, 0.6);
  border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 6px;
  backdrop-filter: blur(12px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.home main .capture:focus-within { border-color: var(--blue-bright); box-shadow: 0 0 0 4px rgba(58, 107, 255, 0.15); }
.home main .capture input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--ink); font-family: var(--sans); font-size: 15px;
  padding: 10px 14px;
}
.home main .capture input::placeholder { color: var(--ink-dim); }
.home main .capture .btn { flex-shrink: 0; }
/* --pass, not --good: --good is cyan and the confirmation text is green, so
 * the border and the message it confirms did not match. */
.home main .capture.sent { border-color: var(--pass); }
.home main .capture-note { font-size: 12.5px; color: var(--ink-dim); margin-top: 12px; flex-basis: auto; }
.home main .capture-note a { color: var(--blue-glow); text-decoration: none; }
.home main .capture-note a:hover { text-decoration: underline; }
.home main .center-capture { margin: 26px auto 0; }
/* Now a sibling of the form rather than a flex child, so it needs the pill's
 * own width and centring to line up under it. */
.home main .capture-msg { font-size: 12.5px; margin: 10px auto 0; max-width: 460px; }

/* =========================================================== SECURITY PAGE
 *
 * The brief ships a cream reference implementation in Poppins. Julio asked for
 * the front page's visuals instead, so everything below is the site's own
 * palette and type, and the page reuses .card, .grid, .g2, .g3, .callout,
 * .panel and .faq rather than introducing a parallel component set. Only the
 * four things the site did not already have are defined here: the data journey,
 * the staging markers, the tables and the hero.
 *
 * All of it is scoped under body.security. Nothing here can reach another page.
 */

.security .sec-hero { padding: 84px 0 8px; max-width: 940px; }
.security .sec-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); margin-bottom: 20px; }
.security .sec-hero .lede { max-width: 620px; }
.security .sec-version {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-faint); margin: 26px 0 0;
}

.security .sec-h { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; margin-bottom: 0.5em; }
.security .sec-lead { color: var(--ink-dim); max-width: 70ch; margin-bottom: 1.8em; }
.security .sec-grid { margin-top: 8px; }
.security .sec-card h3 { font-size: 1.02rem; margin-bottom: 0.5em; }
.security .sec-card p { margin-bottom: 0; }
/* The three commitments a reviewer needs first are tinted rather than reordered,
 * so the scan order and the reading order stay the same. */
.security .sec-card.hi { background: rgba(58, 107, 255, 0.07); border-color: rgba(120, 150, 255, 0.24); }
.security .sec-list { margin: 0; padding-left: 20px; color: var(--ink-dim); font-size: 0.92rem; }
.security .sec-list li { margin-bottom: 0.55em; }
.security .sec-list li:last-child { margin-bottom: 0; }

/* -- the data journey ----------------------------------------------------
 * The signature element. The brief: "Keep it as a vertical numbered sequence
 * with a connecting line … Do not turn it into a horizontal stepper or an icon
 * row." So there is deliberately no breakpoint below that changes its axis, and
 * the only responsive change is that the markers tuck in. An <ol> because it is
 * genuinely ordered: a screen reader should announce it as six steps. */
.security .journey {
  list-style: none; margin: 0; padding: 34px 30px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.security .jstep {
  display: grid; grid-template-columns: 46px 1fr; gap: 20px;
  position: relative; padding-bottom: 26px;
}
.security .jstep:last-child { padding-bottom: 0; }
/* The connecting line. Drawn from under the marker to the top of the next one,
 * so it reads as one continuous thread rather than six detached rules. */
.security .jstep:not(:last-child)::before {
  content: ""; position: absolute; left: 22px; top: 32px; bottom: 2px;
  width: 1px; background: var(--line-strong);
}
.security .jdot {
  width: 46px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--blue-glow); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 999px;
  position: relative; z-index: 1;
}
/* "Destroyed" is the endpoint the whole page is built around, so its marker is
 * filled. This is the one visual emphasis the brief asks for by name. */
.security .jstep.end .jdot { background: var(--blue-bright); border-color: var(--blue-bright); color: #fff; }
.security .jbody h3 { font-size: 1rem; margin-bottom: 4px; }
.security .jbody p { color: var(--ink-dim); font-size: 0.92rem; margin-bottom: 0; }
.security .leaves {
  display: block; margin-top: 8px;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* -- tables ---------------------------------------------------------------
 * Mirrors .prose table, but standalone: .prose caps at 74ch, which would crush
 * a four-column sub-processor table. .sec-scroll is the same overflow wrapper
 * the pricing matrix uses, so a narrow phone scrolls the table rather than the
 * page. */
.security .sec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.6em; }
.security .sec-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; }
.security .sec-table th, .security .sec-table td {
  text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top;
}
.security .sec-table thead th {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; padding-bottom: 10px;
}
.security .sec-table tbody th { color: var(--ink); font-weight: 500; width: 31%; }
.security .sec-table td { color: var(--ink-dim); }
.security .sec-table .never { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); }
.security .sec-table .yes { color: var(--blue-glow); font-weight: 600; }
.security .sec-table-2 tbody th { width: 26%; }

.security .sec-cta { margin-top: 20px; }
.security .sec-cta h2 { font-size: 1.5rem; margin-bottom: 0.4em; }

/* -- staging markers ------------------------------------------------------
 * Every one of these is a fact only Julio can supply. They are loud on purpose:
 * the brief's rule is that the page must not go live with a single one still
 * showing, and a marker that blends into the design is one that ships.
 *
 * --warn is the site's existing amber, so this introduces no new colour. While
 * any marker exists the page is noindex and out of the sitemap and the nav, so
 * these are only ever seen by someone who typed the URL. See LIVE in
 * src/pages/security.mjs. */
.security .fill {
  display: inline-block;
  font-family: var(--mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--warn); background: rgba(255, 200, 87, 0.1);
  border: 1px dashed rgba(255, 200, 87, 0.55); border-radius: 5px;
  padding: 0 7px;
}

@media (max-width: 640px) {
  .security .sec-hero { padding-top: 64px; }
  .security .journey { padding: 26px 20px; }
  .security .jstep { grid-template-columns: 40px 1fr; gap: 14px; }
  .security .jstep:not(:last-child)::before { left: 19px; }
  .security .jdot { width: 40px; }
}

/* -- responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .home .hero { grid-template-columns: 1fr; padding: 110px 26px 40px; }
  /* Stacked, the stage is full width and the image is width-limited, so a vh
     height just adds dead space above and below the brain — at 62vh on a tall
     phone that was ~350px of empty navy between the stats and the brain.
     aspect-ratio makes the box exactly the shape of the image, so contain
     letterboxes nothing. The cap stops the other end of the same problem: at
     820px wide the full-width brain painted 737px across, dwarfing the copy
     it is meant to sit under. */
  .home .reveal-stage {
    height: auto; min-height: 0;
    aspect-ratio: 1280 / 1059;
    max-width: 460px; margin-inline: auto;
    /* room for the hint, which has nowhere to sit once the box is exactly the
       size of the image — see below. */
    margin-bottom: 34px;
  }
  /* The hint sits inside the stage on desktop because the stage is taller than
     the brain and there is spare room under it. Stacked there is none, so at
     bottom:4px the pill landed on the brain stem — the same overlap the
     building photo had. Pushed just outside the box instead; the interaction
     still works here, because app.js binds touchstart and touchmove as well as
     mousemove, so you drag the wiring out with a finger. */
  .home .stage-hint { bottom: -30px; }
  .home .block { padding: 80px 26px; }
  .home .bento { grid-template-columns: 1fr; }
  .home .cell, .home .cell-wide { grid-column: span 1; }
  .home .stat-band { grid-template-columns: 1fr; }
  .home .steps { grid-template-columns: 1fr; }
  .home .step-line { display: none; }
  /* .price-3 is more specific than the bare .price-row rule, so it has to be
     restated here or the three tiers stay in three columns on a phone. */
  .home .price-row,
  .home .price-row.price-3 { grid-template-columns: 1fr; }
  .home main .capture { flex-direction: column; }
  .home main .capture .btn { width: 100%; }
  .home .hero-proof { flex-wrap: wrap; }
  .home .cta-panel { padding: 50px 26px; }
  .home .prob-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) and (min-width: 640px) {
  .home .prob-grid { grid-template-columns: 1fr 1fr; }
}