/* Figtree is self-hosted so the page loads nothing from third parties: the CSP can stay
   closed, and visitors' IP addresses are not handed to a font CDN. */
@font-face { font-family: 'Figtree'; src: url('fonts/Figtree-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('fonts/Figtree-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('fonts/Figtree-Bold.ttf') format('truetype'); font-weight: 600 700; font-display: swap; }

:root {
  --bg: #0a1320;          /* base ground */
  --band: #14263c;        /* alternating band */
  --band-close: #17304c;  /* closing band, a touch bluer */
  --card: #15263a;
  --text: #e8eef7;
  --dim: #9aabc2;
  --accent: #4da3f5;
  --accent-strong: #1565c0;
  --max: 980px;
  --mono: 'Cascadia Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --font: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 22px; }
a { color: var(--accent); }

/* ── top bar ─────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 10; background: rgba(10, 19, 32, .85); backdrop-filter: blur(10px);
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 13px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.brand svg { width: 30px; height: 30px; flex: none; }
.lang { display: flex; gap: 2px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 3px; }
.lang button {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--dim); background: none;
  border: 0; border-radius: 999px; padding: 5px 13px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--accent-strong); color: #fff; }

/* ── bands ───────────────────────────────────────────────── */
/* Sections are told apart by their ground colour and a soft wave at the seam — no rules.
   The wave carries the section's own colour up over the one before it. */
section { position: relative; padding-block: clamp(64px, 7.8vw, 100px); }
section > .wrap { position: relative; }
.ground-base { background: var(--bg); }
.ground-band { background: var(--band); }
.ground-close { background: var(--band-close); }
/* The wave hangs above its own section and is filled in that section's colour, so the
   seam reads as the new band rising into the one before it. */
.wave {
  --wave-h: clamp(26px, 3.4vw, 44px);
  position: absolute; left: 0; top: calc(1px - var(--wave-h));
  width: 100%; height: var(--wave-h); display: block;
}
.ground-base .wave { color: var(--bg); }
.ground-band .wave { color: var(--band); }
.ground-close .wave { color: var(--band-close); }

/* ── hero ────────────────────────────────────────────────── */
.hero-wrap { position: relative; overflow: hidden; }
.hero-mark {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: min(420px, 42vw); opacity: .07; pointer-events: none;
}
@media (max-width: 860px) { .hero-mark { display: none; } }
.hero { position: relative; padding-block: clamp(66px, 9vw, 106px) clamp(56px, 7.5vw, 92px); }
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px;
}
h1 { font-size: clamp(32px, 5.4vw, 50px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 20px; font-weight: 700; }
.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--dim); max-width: 42em; margin: 0 0 36px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block; padding: 13px 22px; border-radius: 8px; font-weight: 600;
  text-decoration: none; font-size: 16px; border: 1px solid transparent;
}
.btn-main { background: var(--accent-strong); color: #fff; }
.btn-main:hover { background: #1a74d6; }
.btn-ghost { border-color: rgba(255, 255, 255, .16); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── section heads ───────────────────────────────────────── */
h2 { font-size: clamp(24px, 3.2vw, 31px); line-height: 1.24; letter-spacing: -.015em; margin: 0 0 14px; font-weight: 700; }
.sub { color: var(--dim); margin: 0 0 clamp(24px, 3vw, 34px); max-width: 44em; }

/* ── content blocks ──────────────────────────────────────── */
.grid { display: grid; gap: clamp(16px, 2.2vw, 24px); }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.card { background: var(--card); border-radius: 14px; padding: clamp(22px, 2.8vw, 30px); }
.ground-band .card, .ground-close .card { background: rgba(255, 255, 255, .05); }
.card h3 { margin: 0 0 11px; font-size: 19px; font-weight: 700; }
.card p { margin: 0; color: var(--dim); font-size: 16px; }
.step-no { color: var(--accent); font-weight: 700; font-size: 15px; letter-spacing: .04em; display: block; margin-bottom: 9px; }
ul.clean { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; max-width: 52em; }
ul.clean li { padding-left: 27px; position: relative; color: var(--dim); }
ul.clean li::before {
  content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px;
  border-radius: 2px; background: var(--accent);
}
ul.clean strong { color: var(--text); font-weight: 600; }
.caveat { margin: clamp(22px, 3vw, 30px) 0 0; color: var(--dim); font-size: 16px; max-width: 46em; }
.caveat strong { color: var(--text); font-weight: 600; }

/* ── sample report link ──────────────────────────────────── */
.sample-report { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(30px, 4vw, 42px); }
.sample-report p { margin: 0; flex: 1 1 22em; color: var(--dim); font-size: 15px; }

/* ── contact ─────────────────────────────────────────────── */
.contact { display: flex; flex-wrap: wrap; gap: 24px 46px; align-items: baseline; margin-top: 26px; }
.contact a { font-size: 19px; font-weight: 600; text-decoration: none; }
.contact a:hover { text-decoration: underline; }
footer { background: var(--bg); padding-block: 32px 42px; color: var(--dim); font-size: 14px; }
.footer-row { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }

/* ── shared bits ─────────────────────────────────────────── */
button.btn { font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; }
button.btn-ghost { background: none; color: var(--text); }
.tag {
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 3px 11px;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
section { scroll-margin-top: 72px; }

/* ── try a round ─────────────────────────────────────────── */
/* An incident console on top, a readiness dashboard beneath it. The panels carry a faint
   blueprint grid; everything placed on them has an opaque fill, so the grid shows only in
   the panel's open space. */
.demo { display: grid; gap: 28px; }
.console, .scorecard {
  position: relative; border-radius: 16px; overflow: hidden;
  background-color: #0b1626;
  background-image:
    linear-gradient(rgba(77, 163, 245, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 163, 245, .05) 1px, transparent 1px);
  background-size: 28px 28px;
  border: 1px solid rgba(77, 163, 245, .22);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7), 0 0 40px -20px rgba(77, 163, 245, .14);
}
.console { scroll-margin-top: 80px; }
.scorecard[hidden] { display: none; }

/* Launch screen: the hook and one button, centred on the panel's grid. */
.launch {
  display: grid; justify-items: center; text-align: center;
  padding: clamp(52px, 7.5vw, 92px) clamp(20px, 4vw, 44px) clamp(56px, 8vw, 96px);
}
.launch-time { font: 600 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #ff7a7a; margin: 0 0 20px; }
.launch-h { font-size: clamp(26px, 3.8vw, 38px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 16px; max-width: 17em; }
.launch-p { color: var(--dim); margin: 0 0 38px; max-width: 30em; }
.launch-btn {
  display: inline-flex; align-items: center; gap: 11px; padding: 16px 28px; border-radius: 10px; font-size: 17px;
  animation: beckon 2.6s ease-out infinite;
}
.launch-btn svg { width: 15px; height: 15px; }
@keyframes beckon {
  0% { box-shadow: 0 0 0 0 rgba(77, 163, 245, .32); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(77, 163, 245, 0); }
}

.con-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 17px clamp(20px, 4vw, 44px);
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  background: #0f1f32;
}
.con-live { display: inline-flex; align-items: center; gap: 8px; color: #ff7a7a; }
.con-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff5d5d; animation: pulse 1.6s ease-out infinite; }
.con-live.off { color: var(--dim); }
.con-live.off i { background: var(--dim); animation: none; }
.con-round { color: var(--accent); }
.con-time { margin-left: auto; color: var(--text); }
.con-track { height: 2px; background: rgba(255, 255, 255, .06); }
.con-track i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 6px rgba(77, 163, 245, .45); transition: width .6s ease; }

.con-status { display: flex; flex-wrap: wrap; gap: 10px; padding: 26px clamp(20px, 4vw, 44px) 0; }
.st {
  --c: var(--dim);
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 8px;
  font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  background: #141e2e; border: 1px solid rgba(255, 255, 255, .08);
}
.st b { color: var(--dim); font-weight: 600; }
.st i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.st-bad { --c: #f07a6e; }
.st-warn { --c: #f0c14e; }
.st-ok { --c: #5ccf96; }
.st.changed { animation: flip 1.4s ease-out; }
@keyframes flip {
  0%, 25% { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
  100% { border-color: rgba(255, 255, 255, .08); background: #141e2e; }
}

.log { list-style: none; margin: 0 0 36px; padding: 16px 20px; border-radius: 10px; background: #08101b; font: 13px/1.95 var(--mono); }
.log li { display: grid; grid-template-columns: auto 4.5ch minmax(0, 1fr); gap: 12px; color: var(--text); }
.log time { color: var(--dim); }
.log .lvl { font-weight: 700; }
.log-crit .lvl { color: #f07a6e; }
.log-warn .lvl { color: #f0c14e; }
.log-info .lvl { color: var(--accent); }
.log li.stream { animation: logIn .25s ease-out both; }
@keyframes logIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.choices.stream { animation: rise .4s ease-out both; }
.con-status + .con-body { padding-top: 30px; }

.con-body { padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 44px) clamp(30px, 4.4vw, 48px); }
.console h3 { font-size: clamp(24px, 3.3vw, 33px); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 14px; }
.con-brief { color: var(--dim); margin: 0 0 38px; max-width: 40em; }
.con-label { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }

.choices { display: grid; gap: 14px; }
@media (min-width: 640px) {
  .choices.n4 { grid-template-columns: 1fr 1fr; }
  .choices.n3 { grid-template-columns: repeat(3, 1fr); }
}
.choice {
  display: flex; align-items: flex-start; gap: 12px; font: inherit; font-size: 15.5px; font-weight: 500;
  line-height: 1.35; text-align: left; color: var(--text); cursor: pointer;
  background: #121d2c; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 17px 18px;
  transition: border-color .15s, box-shadow .15s, background-color .15s, color .25s;
}
.choice .key {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -2px; border-radius: 6px;
  font: 700 12px/1 var(--mono); color: var(--accent); border: 1px solid rgba(77, 163, 245, .4);
  transition: background-color .15s, color .15s;
}
.choice:hover:not(:disabled) {
  border-color: var(--accent); background: #102137;
  box-shadow: 0 0 16px -8px rgba(77, 163, 245, .35);
}
.choice:hover:not(:disabled) .key { background: var(--accent); color: #08111d; }
.choice:disabled { cursor: default; color: rgba(232, 238, 247, .3); border-color: rgba(255, 255, 255, .05); }
.choice:disabled .key { color: rgba(77, 163, 245, .35); border-color: rgba(77, 163, 245, .15); }
.choice.picked { color: var(--text); border-color: var(--verdict); box-shadow: 0 0 16px -10px var(--verdict); }
.choice.picked .key { color: #08111d; background: var(--verdict); border-color: var(--verdict); }

.v-good { --verdict: #5ccf96; }
.v-partial { --verdict: #f0c14e; }
.v-poor { --verdict: #f07a6e; }

.feedback {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 28px; align-items: end;
  margin-top: 28px; padding: 24px 26px; border-radius: 12px;
  background: #141e2e; box-shadow: inset 3px 0 0 var(--verdict);
  animation: rise .35s ease-out;
}
.fb-top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fb-verdict { margin: 0; font: 700 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--verdict); }
.fb-scores { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.fb-scores li {
  font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 5px 10px; background: #141e2e;
}
.fb-scores b { color: var(--verdict); }
.fb-text { margin: 0; font-size: 16px; line-height: 1.55; }
.fb-next { white-space: nowrap; }
@media (max-width: 640px) {
  .feedback { grid-template-columns: 1fr; }
  .fb-next { justify-self: start; }
}

.recap { list-style: none; margin: 4px 0 34px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.recap li {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: #0f1a2b;
  border: 1px solid color-mix(in srgb, var(--verdict) 45%, transparent); font: 700 11.5px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.recap-r { color: var(--dim); }
.recap-v { color: var(--verdict); }

.compare { display: grid; margin: 0 0 38px; border-radius: 12px; overflow: hidden; background: #121d2c; }
.cmp-row { display: grid; grid-template-columns: 140px minmax(0, .8fr) minmax(0, 1.2fr); gap: 4px 22px; padding: 15px 22px; }
.cmp-row:nth-child(even) { background: #172233; }
.cmp-head { font: 600 11.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding-block: 17px 12px; }
.cmp-head .cmp-d { color: var(--dim); }
.cmp-head .cmp-r { color: var(--accent); }
.cmp-l { font: 600 11.5px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cmp-row:not(.cmp-head) .cmp-d { color: var(--dim); font-size: 15px; }
.cmp-row:not(.cmp-head) .cmp-r { font-size: 15px; font-weight: 600; }
@media (max-width: 600px) {
  .cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cmp-l { grid-column: 1 / -1; }
  .cmp-head > :first-child { display: none; }
}
.con-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.console .btn-ghost { background: #0b1626; }

/* ── readiness dashboard ─────────────────────────────────── */
.scorecard {
  --band: var(--accent);
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 30px 28px; align-items: center;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 44px);
}
.sc-areas { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .scorecard { grid-template-columns: 132px minmax(0, .85fr) minmax(0, 1.5fr); gap: 30px 48px; }
  .sc-areas { grid-column: auto; }
}
.gauge { position: relative; aspect-ratio: 1; }
.gauge svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.g-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 8; }
.g-arc {
  fill: none; stroke: var(--band); stroke-width: 8; stroke-linecap: round;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--band) 55%, transparent));
  transition: stroke-dashoffset 1s cubic-bezier(.2, .7, .2, 1), stroke .4s, opacity .3s;
}
.g-arc.idle { opacity: 0; }
.g-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.g-num small { font-size: .5em; margin-left: 1px; }
.sc-main .con-label { margin-bottom: 8px; }
.sc-band {
  margin: 0; font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; line-height: 1.2; color: var(--band);
  text-shadow: 0 0 14px color-mix(in srgb, var(--band) 22%, transparent);
}
.sc-band.pending { color: var(--dim); font-size: 15.5px; font-weight: 500; text-shadow: none; }
.sc-basis { margin: 6px 0 0; font-size: 13.5px; color: var(--dim); }
.sc-basis:empty { display: none; }
.sc-note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--dim); text-align: right; }
@media (max-width: 759px) { .sc-note { text-align: left; } }

.sc-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.a-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; align-items: baseline; }
.a-name { font-size: 14px; }
.a-val { grid-column: 2; grid-row: 1; font: 600 12px/1 var(--mono); }
.cells { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cells i { height: 6px; border-radius: 2px; background: #212b3a; transition: background-color .3s, box-shadow .3s; }
.cells i.on { background: var(--accent); box-shadow: 0 0 5px rgba(77, 163, 245, .35); }
.cells i:nth-child(2) { transition-delay: .08s; }
.cells i:nth-child(3) { transition-delay: .16s; }
.cells i:nth-child(4) { transition-delay: .24s; }
.untested .a-name, .untested .a-val { color: var(--dim); }
.untested .a-val { font-weight: 500; }
.untested .cells i { background: #0b1626; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }

.untyped { visibility: hidden; }
.caret {
  display: inline-block; width: 3px; height: .95em; margin: 0 1px 0 2px; vertical-align: -.1em;
  background: var(--accent); animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.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;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 93, 93, .6); }
  70% { box-shadow: 0 0 0 8px rgba(255, 93, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 93, 93, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}