/* Bastion marketing site.
   Hand-authored rather than generated: these pages ship no JavaScript and no
   build-time CSS framework, so the whole site is one small stylesheet.

   Design system, "watch floor":
   - Canvas is a deep sea-green ink, not neutral black: the unlit water the
     radar watches. Panels are flat with 1px lines; nothing is glassy.
   - Two accents with fixed meaning: phosphor teal = the watching (links,
     actions, OK), signal amber = a finding. Red only for severity.
   - Three type voices: IBM Plex Sans Condensed for display (instrument
     signage), the system sans for prose, IBM Plex Mono for anything the
     instrument says: labels, timestamps, domains, prices, table headers.
   - The signature motif is the radar dial (lib/hero.mjs); graduation ticks
     from its outer ring recur as section rulers and the eyebrow dash. */

@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/plex-cond-600.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/plex-cond-700.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/plex-mono-400.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/plex-mono-600.woff2) format("woff2");
}

:root {
  --bg: #081419;
  --panel: rgba(13, 31, 39, 0.55);
  --panel-solid: #0d1f27;
  --line: #1b3641;
  --line-soft: rgba(143, 169, 172, 0.14);
  --text: #e4efec;
  --bright: #f6fcfa;
  --muted: #8fa9ac;
  --faint: #64818a;
  --accent: #2fd6b5;
  --accent-hover: #63e6c6;
  --accent-soft: rgba(47, 214, 181, 0.13);
  --accent-ink: #04241d;
  --ok: #46e5a3;
  --warn: #f5b841;
  --bad: #ff7a6b;
  --radius: 10px;
  --font-display: "IBM Plex Sans Condensed", "Avenir Next Condensed",
    "Arial Narrow", ui-sans-serif, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

a { color: var(--accent-hover); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(47, 214, 181, 0.35); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 8px;
}
.skip:focus { left: 12px; top: 12px; z-index: 10; }

/* --- header / footer --- */

.site-header {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 20, 25, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 15px; padding-bottom: 15px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 17px; letter-spacing: 0.3em; color: var(--bright);
}
.wordmark::before {
  content: ""; width: 24px; height: 24px; flex: none;
  background: url(/favicon.svg) center / contain no-repeat;
  filter: drop-shadow(0 2px 10px rgba(47, 214, 181, 0.4));
}
.wordmark:hover { text-decoration: none; }

.site-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; flex-wrap: wrap; }
.site-nav a { color: var(--muted); transition: color 0.15s ease; }
.site-nav a:hover { color: var(--bright); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--bright); }
.site-nav .btn-primary { color: var(--accent-ink); }

.site-footer {
  border-top: 1px solid var(--line-soft);
  margin-top: 56px; padding: 40px 0;
  background: linear-gradient(180deg, transparent, rgba(13, 31, 39, 0.5));
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  font-size: 14px; color: var(--faint);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { color: var(--faint); }
.footer-links a:hover { color: var(--text); }

/* --- buttons --- */

/* The primary action is solid phosphor with ink text: the one bright object
   on a dark console. No gradients, no levitation. */
.btn {
  display: inline-block; border-radius: 7px; padding: 12px 22px;
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: background 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-sm { padding: 7px 15px; font-size: 14px; border-radius: 6px; }
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 24px rgba(47, 214, 181, 0.3);
}
.btn-ghost { border-color: var(--line); color: var(--text); background: rgba(13, 31, 39, 0.4); }
.btn-ghost:hover { background: var(--panel-solid); border-color: var(--faint); }
.btn-block { display: block; width: 100%; }

/* --- sections --- */

section { padding: 72px 0; position: relative; }
section.tight { padding: 48px 0; }
section.alt {
  background: rgba(13, 31, 39, 0.35);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* Hero: first section on the page gets a soft phosphor glow + faint chart grid. */
main > section:first-child {
  padding: 92px 0 84px;
  background:
    radial-gradient(52rem 26rem at 18% -10%, rgba(47, 214, 181, 0.1), transparent 65%),
    radial-gradient(40rem 22rem at 85% 0%, rgba(79, 200, 240, 0.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(143, 169, 172, 0.04) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(143, 169, 172, 0.04) 0 1px, transparent 1px 48px);
}

/* Instrument label: tick line, mono smallcaps, live blip. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 20px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--accent); opacity: 0.8;
}
.eyebrow::after {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: blip 2.4s ease-out infinite;
}
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5.8vw, 64px); line-height: 1.02; letter-spacing: 0.002em;
  margin: 0 0 20px; color: var(--bright); max-width: 20ch;
}
/* The highlighted phrase runs a gradient: a light tint in, the page's hero
   accent through the middle, drifting toward cyan on the way out. Built from
   --hero-accent so use-case pages' phrases still agree with the dial beside
   them; the cyan is mixed at 30% so off-teal accents shift subtly instead of
   changing hue. */
h1 .grad, h2 .grad {
  --grad-a: var(--hero-accent, var(--accent));
  background: linear-gradient(92deg,
    color-mix(in srgb, var(--grad-a) 45%, #f2fffb) 0%,
    var(--grad-a) 55%,
    color-mix(in srgb, var(--grad-a) 70%, #4fc8f0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(27px, 3.4vw, 40px); line-height: 1.08;
  margin: 0 0 12px; color: var(--bright); letter-spacing: 0.004em;
}
h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; color: #eef7f4; }

/* Graduation ruler over section headings: the dial's tick marks, laid flat.
   Major tick every 24px, minor every 8px, bottom-aligned. */
section > .wrap > h2::before {
  content: ""; display: block; width: 73px; height: 10px; margin: 0 0 16px;
  background:
    repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent) 0 1px, transparent 1px 8px);
  background-size: 73px 10px, 65px 6px;
  background-repeat: no-repeat;
  background-position: left bottom;
}
/* The one centered section (closing CTA) centers its ruler too. */
[style*="text-align:center"] h2::before { margin-inline: auto; }
/* A section that already opens with an instrument label (eyebrow) doesn't
   need a second device, so drop the ruler there. */
.eyebrow + h2::before { display: none; }

.lede { font-size: 18px; color: var(--muted); max-width: 62ch; margin: 0 0 28px; }
.prose { color: var(--muted); max-width: 68ch; }
.prose p { margin: 0 0 14px; }
.note { font-size: 14px; color: var(--faint); margin-top: 16px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

/* --- grids / cards --- */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* A card stranded alone on the last row centers instead of hugging the left
   edge: span the full grid, then size back down to one column. The auto-fit
   column count is pure arithmetic on the container width, so each range below
   mirrors where its class genuinely shows 3 or 2 columns (wrap max 1052px,
   24px page padding, 20px gap). :only-child is excluded: a deliberate
   single-card grid should keep its full width. */
@media (min-width: 988px) {
  .grid-2 > :last-child:nth-child(3n + 1):not(:only-child) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - 40px) / 3);
  }
}
@media (min-width: 668px) and (max-width: 987.9px) {
  .grid-2 > :last-child:nth-child(2n + 1):not(:only-child) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - 20px) / 2);
  }
}
@media (min-width: 928px) {
  .grid-3 > :last-child:nth-child(3n + 1):not(:only-child) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - 40px) / 3);
  }
}
@media (min-width: 628px) and (max-width: 927.9px) {
  .grid-3 > :last-child:nth-child(2n + 1):not(:only-child) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - 20px) / 2);
  }
}

.card {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(13, 31, 39, 0.5);
  border-radius: var(--radius); padding: 24px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, rgba(47, 214, 181, 0.55), transparent);
  opacity: 0; transition: opacity 0.2s ease;
}
.card:hover {
  border-color: rgba(47, 214, 181, 0.4);
  background: rgba(17, 39, 48, 0.6);
}
.card:hover::before { opacity: 1; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

/* Whole-card links (use-case index): the anchor is the card itself. */
a.card { display: block; }
a.card:hover { text-decoration: none; }
.card .card-more { margin-top: 14px; color: var(--accent-hover); font-size: 14px; }

.step-num {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 7px;
  font-family: var(--font-mono); font-size: 15px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(47, 214, 181, 0.3);
  font-weight: 600; margin-bottom: 14px;
}

/* --- pricing --- */

.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: stretch; }
.plan {
  border: 1px solid var(--line);
  background: rgba(13, 31, 39, 0.45);
  border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.plan:hover { border-color: rgba(143, 169, 172, 0.4); }
.plan.featured {
  border-color: rgba(47, 214, 181, 0.55);
  background: linear-gradient(180deg, rgba(47, 214, 181, 0.07), rgba(13, 31, 39, 0.4));
  box-shadow: 0 0 0 1px rgba(47, 214, 181, 0.2);
}
.plan .badge {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.price { margin: 10px 0 2px; }
.price .amount {
  font-family: var(--font-display);
  font-size: 46px; font-weight: 700; color: var(--bright); letter-spacing: 0.01em;
}
.price .per { color: var(--muted); font-size: 15px; }
.price-sub { font-family: var(--font-mono); font-size: 12px; color: var(--faint); min-height: 20px; }
.plan .blurb { color: var(--muted); font-size: 15px; margin: 14px 0 0; }
.features { list-style: none; padding: 0; margin: 18px 0 0; flex: 1; }
.features li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 15px; }
.features li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}
.plan .btn { margin-top: 22px; }

/* Pure-CSS monthly/yearly switch: two sets of cards, one radio pair, no JS. */
.term-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 28px; }
.term-switch .segmented { display: inline-flex; border: 1px solid var(--line); background: rgba(13, 31, 39, 0.6); border-radius: 8px; padding: 4px; }
.term-switch label {
  padding: 7px 16px; border-radius: 5px; font-size: 14px; font-weight: 500;
  color: var(--muted); cursor: pointer; transition: color 0.15s ease;
}
.term-switch label:hover { color: var(--text); }
.savings {
  font-family: var(--font-mono);
  background: rgba(70, 229, 163, 0.12); color: var(--ok);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 500;
}
input[name="term"] { position: absolute; opacity: 0; pointer-events: none; }
#term-year:checked ~ .term-switch label[for="term-year"],
#term-month:checked ~ .term-switch label[for="term-month"] { background: var(--accent); color: var(--accent-ink); }
#term-month:checked ~ .plans[data-term="year"],
#term-year:checked ~ .plans[data-term="month"] { display: none; }

/* --- tables --- */

.table-scroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(13, 31, 39, 0.35);
}
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(27, 54, 65, 0.35); }
th {
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--faint); font-weight: 600; background: rgba(13, 31, 39, 0.6);
}

/* --- product showcase (app + PDF mockups) --- */

.showcase {
  display: grid; gap: 26px; grid-template-columns: 1.45fr 1fr;
  align-items: start; margin-top: 34px;
}
@media (max-width: 860px) { .showcase { grid-template-columns: 1fr; } }

.shot { margin: 0; }
.shot figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 12px; }

.paper {
  width: 100%; height: auto; display: block; border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(3, 10, 13, 0.6);
}

/* Fake browser window holding a hand-drawn dashboard. Kept as HTML/CSS
   rather than a screenshot so it never goes stale and stays sharp. */
.browser {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: #0a1a21;
  box-shadow: 0 18px 48px rgba(3, 10, 13, 0.6);
  font-size: 12px; line-height: 1.45;
}
.browser-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; background: #0d1f27; border-bottom: 1px solid var(--line);
}
.browser-dots { display: flex; gap: 5px; }
.browser-dots span { width: 9px; height: 9px; border-radius: 50%; background: #2a4854; }
.browser-url {
  flex: 1; max-width: 260px; text-align: center;
  font-family: var(--font-mono);
  background: #14303a; color: var(--faint); border-radius: 6px;
  padding: 3px 12px; font-size: 10.5px;
}

.mk-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.mk-logo { width: 15px; height: 15px; flex: none;
  background: url(/favicon.svg) center / contain no-repeat; }
.mk-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.24em; color: var(--bright); font-size: 11px; }
.mk-tabs { display: flex; gap: 2px; margin-left: 8px; }
.mk-tabs span { padding: 3px 8px; color: var(--faint); border-radius: 5px; }
.mk-tabs .on { color: var(--bright); background: rgba(47, 214, 181, 0.16); }
.mk-chip {
  margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted);
  background: #1b3641; border-radius: 999px; padding: 2px 8px;
}

.mk-body { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 14px; }
@media (max-width: 420px) { .mk-body { grid-template-columns: 1fr; } }

.mk-card {
  background: rgba(27, 54, 65, 0.4); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px;
}
.mk-score { text-align: center; }
.mk-ring {
  width: 84px; height: 84px; border-radius: 50%; margin: 6px auto 8px;
  background: conic-gradient(var(--ok) calc(78 * 1%), #1b3641 0);
  display: flex; align-items: center; justify-content: center;
}
.mk-ring > div {
  width: 66px; height: 66px; border-radius: 50%; background: #0a1a21;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; color: var(--ok);
}
.mk-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--faint); text-transform: uppercase; }
.mk-sub { font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); margin-top: 2px; }

.mk-rows { display: flex; flex-direction: column; gap: 8px; }
.mk-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(27, 54, 65, 0.4); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 12px; color: var(--text);
}
.mk-row small { margin-left: auto; font-family: var(--font-mono); color: var(--faint); font-size: 9.5px; white-space: nowrap; }
.mk-badge {
  flex: none; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em;
  border-radius: 4px; padding: 2px 7px; color: #fff; text-transform: uppercase;
}
.mk-high { background: #c14a37; }
.mk-med { background: #a1720f; }
.mk-new { background: var(--accent); color: var(--accent-ink); }
.mk-ok { background: #0e7a5c; }

/* Second mockup row: Slack alert + change feed. */
.mock-row {
  display: grid; gap: 26px; grid-template-columns: 1fr 1.25fr;
  align-items: start; margin-top: 36px;
}
@media (max-width: 860px) { .mock-row { grid-template-columns: 1fr; } }

/* The Slack mock keeps Slack's own palette, since it is depicting Slack. */
.slack {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: #1a1d21; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 18px 48px rgba(3, 10, 13, 0.6);
}
.slack-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid #2c2f33;
  color: #d1d2d3; font-weight: 700; font-size: 13px;
}
.slack-head .slack-note { margin-left: auto; color: #8d9093; font-weight: 400; font-size: 11px; }
.slack-hash { color: #8d9093; font-weight: 400; }
.slack-msg { display: flex; gap: 10px; padding: 12px 14px 4px; }
.slack-msg:last-child { padding-bottom: 14px; }
.slack-avatar {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  background: url(/favicon.svg) center / contain no-repeat;
}
.slack-who { color: #ffffff; font-weight: 700; font-size: 13px; }
.slack-app {
  background: #35373b; color: #b6b8ba; border-radius: 3px;
  font-size: 9px; font-weight: 600; padding: 1px 4px; vertical-align: 1px;
}
.slack-time { color: #8d9093; font-weight: 400; font-size: 11px; }
.slack-text { color: #d1d2d3; margin-top: 1px; }
.slack-text strong { color: #ffffff; }
.slack-attach {
  border-left: 3px solid #b91c1c; background: #222529;
  border-radius: 4px; padding: 8px 12px; margin-top: 6px; color: #d1d2d3;
}
.slack-attach.warn { border-left-color: #b45309; }
.slack-attach .sub { color: #8d9093; font-size: 11px; margin-top: 3px; }
.slack-attach .slack-link { color: #1d9bd1; }

/* Fake terminal showing a coding agent picking up the hand-off. Same
   rationale as .browser: HTML/CSS never goes stale and stays sharp. */
.agent-term {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: #0a1a21; box-shadow: 0 18px 48px rgba(3, 10, 13, 0.6);
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.75;
}
.agent-term-body { padding: 14px 16px; overflow-x: auto; }
.agent-term .ps { color: var(--ok); }
.agent-term .cmd { color: var(--text); }
.agent-term .out { color: var(--faint); display: block; }
.agent-term .out .hl { color: #9af0d9; }
.agent-term .diff-add { color: var(--ok); display: block; }

/* Change-feed rows inside the browser mock. */
.mk-feed { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mk-day { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 4px 0 -2px; }
.mk-diff {
  font-family: var(--font-mono);
  font-size: 10.5px; background: #0d1f27; border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 8px; color: var(--muted);
}
.mk-diff .del { color: var(--bad); }
.mk-diff .add { color: var(--ok); }

/* --- FAQ --- */

.faq { max-width: 820px; margin-top: 26px; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(13, 31, 39, 0.4); margin-bottom: 10px;
  transition: border-color 0.2s ease;
}
.faq details[open] { border-color: rgba(47, 214, 181, 0.4); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 46px 16px 18px;
  font-weight: 600; color: var(--text); position: relative; font-size: 15.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); color: var(--accent);
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 400; transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .faq-a { padding: 0 18px 16px; color: var(--muted); font-size: 15px; }
.faq .faq-a p { margin: 0 0 10px; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* --- blog --- */

.post-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-top: 30px; }
.post-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  background: rgba(13, 31, 39, 0.5);
  color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.post-card:hover {
  text-decoration: none;
  background: rgba(17, 39, 48, 0.6);
}
.post-card h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.post-card .post-desc { color: var(--muted); font-size: 14.5px; margin: 0; flex: 1; }
.post-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--faint);
}
/* --hero-accent is set per article from its tag (see lib/hero.mjs) and falls
   back to the site accent anywhere it is not provided. */
.post-tag {
  border: 1px solid color-mix(in srgb, var(--hero-accent, var(--accent)) 40%, transparent);
  color: var(--hero-accent, var(--accent));
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 10%, transparent);
  border-radius: 4px; padding: 2px 8px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.post-card:hover { border-color: color-mix(in srgb, var(--hero-accent, var(--accent)) 50%, transparent); }
.post-card .read-more { color: var(--hero-accent, var(--accent-hover)); font-size: 14px; font-weight: 600; }

/* --- generated hero dial (lib/hero.mjs) ---

   Shared by the home hero and every article banner. A host section supplies
   --hero-accent for the glow and the --art-* placement knobs; everything here
   styles the SVG itself, which inherits --hero-art from the <g> the generator
   emits. Placement goes through custom properties rather than per-host rules
   so the breakpoints below can override every host with one declaration. */

.hero-art {
  position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none;
  right: var(--art-right, -70px);
  width: var(--art-width, 620px);
  max-width: var(--art-max, 58%);
  opacity: var(--art-opacity, 1);
}
.hero-svg { display: block; width: 100%; height: auto; }

.hero-rings circle {
  fill: none; stroke: color-mix(in srgb, var(--hero-art) 34%, transparent); stroke-width: 1;
}
.hero-ticks line { stroke: color-mix(in srgb, var(--hero-art) 38%, transparent); stroke-width: 1; }
.hero-spokes line {
  stroke: color-mix(in srgb, var(--hero-art) 22%, transparent); stroke-width: 1;
}
.hero-node { fill: color-mix(in srgb, var(--hero-art) 85%, transparent); }
.hero-hub-dot { fill: #f6fcfa; }
.hero-hub {
  fill: none; stroke: var(--hero-art); stroke-width: 1.5;
}
.hero-ok { fill: var(--ok); }
.hero-ok-ring { fill: none; stroke: var(--ok); stroke-width: 1; opacity: 0.4; }
.hero-flag { fill: var(--warn); }
.hero-flag-ring { fill: none; stroke: var(--warn); stroke-width: 1; opacity: 0.45; }

/* The sweep is the page's one piece of motion (the eyebrow blip keeps its
   time). Slow, low-contrast, and gone entirely under prefers-reduced-motion. */
.hero-sweep { transform-box: view-box; animation: hero-sweep 14s linear infinite; }
@keyframes hero-sweep { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .hero-art { --art-right: -140px; --art-width: 460px; --art-max: 70%; --art-opacity: 0.5; }
}
/* On a phone the dial can only ever be a corner detail, so pull it back in far
   enough that a recognisable arc survives, and drop it well behind the text. */
@media (max-width: 620px) {
  .hero-art { --art-right: -84px; --art-width: 330px; --art-max: none; --art-opacity: 0.42; }
}

/* --- home page hero --- */

/* The dial is the page's only illustration, so it runs larger here and sits
   further off the edge than on an article, where a headline three lines deep
   needs the room. */
main > section.home-hero {
  position: relative;
  overflow: hidden;
  --art-right: -120px;
  --art-width: 720px;
  --art-max: 52%;
}
.home-hero .wrap { position: relative; z-index: 1; }

/* --- article page --- */

.article { max-width: 760px; }
.article-header h1 { font-size: clamp(32px, 4.6vw, 48px); max-width: 22ch; }
.article-header .post-meta { font-size: 12.5px; margin-top: 16px; }

/* Article banner. Overrides the generic first-section hero above: same grid,
   but the glow is tinted with the article's accent and the dial bleeds off the
   right edge. Equal specificity to `main > section:first-child`, so source
   order decides, so keep this block below it. */
main > section.article-hero {
  position: relative;
  overflow: hidden;
  padding: 60px 0 46px;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(46rem 24rem at 72% -20%,
      color-mix(in srgb, var(--hero-accent, var(--accent)) 22%, transparent), transparent 66%),
    radial-gradient(40rem 22rem at 8% 0%, rgba(47, 214, 181, 0.07), transparent 62%),
    repeating-linear-gradient(0deg, rgba(143, 169, 172, 0.04) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(143, 169, 172, 0.04) 0 1px, transparent 1px 48px);
}
.article-hero .wrap { position: relative; z-index: 1; }
.article-hero .article-header { margin-bottom: 0; }

/* --- use-case hero --- */

/* Same dial as the home page, tinted per page: the section inlines
   --hero-accent and the generator gets the same color, so the glow and the
   artwork always agree. Sized between the home hero (short headline, big
   dial) and an article banner (long headline, corner dial): use-case pages
   carry a multi-line h1 plus a lede, so the dial yields more room.
   Equal specificity to `main > section:first-child`; source order decides. */
main > section.use-hero {
  position: relative;
  overflow: hidden;
  --art-right: -110px;
  --art-width: 640px;
  --art-max: 48%;
  background:
    radial-gradient(46rem 24rem at 76% -18%,
      color-mix(in srgb, var(--hero-accent, var(--accent)) 18%, transparent), transparent 66%),
    radial-gradient(40rem 22rem at 8% 0%, rgba(47, 214, 181, 0.07), transparent 62%),
    repeating-linear-gradient(0deg, rgba(143, 169, 172, 0.04) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(143, 169, 172, 0.04) 0 1px, transparent 1px 48px);
}
.use-hero .wrap { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .article-header h1 { max-width: none; }
}
@media (max-width: 620px) {
  main > section.article-hero { padding: 40px 0 34px; }
}

main > section.article-main { padding-top: 44px; }
.article-body { color: #c4d6d4; font-size: 16.5px; }
.article-body h2 {
  font-size: 27px; margin: 44px 0 14px; padding-top: 8px;
}
.article-body h3 { font-size: 19px; margin: 30px 0 10px; }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { padding-left: 24px; margin: 0 0 16px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: #eef7f4; }
.article-body code {
  background: rgba(27, 54, 65, 0.6); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px; font-size: 14px;
  font-family: var(--font-mono);
}
.article-body pre {
  background: #0a1a21; border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 18px; overflow-x: auto; margin: 0 0 18px; font-size: 13.5px;
  line-height: 1.55;
}
.article-body pre code { background: none; border: none; padding: 0; font-size: inherit; }
.article-body blockquote {
  border-left: 3px solid var(--accent); margin: 0 0 16px; padding: 4px 0 4px 18px;
  color: var(--muted);
}
.article-body table { font-size: 14.5px; }
.article-body .table-scroll { margin: 0 0 18px; }
.article-body a { text-decoration: underline; text-decoration-color: rgba(99, 230, 198, 0.4); }
.article-body a:hover { text-decoration-color: var(--accent-hover); }

.article-tldr {
  border: 1px solid rgba(47, 214, 181, 0.35); border-radius: var(--radius);
  background: rgba(47, 214, 181, 0.06); padding: 18px 20px; margin: 0 0 28px;
  font-size: 15.5px; color: var(--text);
}
.article-tldr .tldr-label {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.article-tldr p { margin: 0 0 8px; }
.article-tldr p:last-child { margin: 0; }

.article-cta {
  border: 1px solid rgba(47, 214, 181, 0.4); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(47, 214, 181, 0.1), rgba(13, 31, 39, 0.4));
  padding: 26px; margin: 44px 0 0;
}
.article-cta h2 { margin: 0 0 8px; font-size: 22px; padding: 0; }
.article-cta p { margin: 0 0 18px; color: var(--muted); }

/* Outbound citations at the foot of an article body. Set smaller and quieter
   than body copy: they are there to be checked, not read through. */
.article-body ul.sources { list-style: none; padding: 0; font-size: 15px; }
.article-body ul.sources li { margin-bottom: 8px; color: var(--muted); }
.article-body ul.sources li::before { content: "↗"; margin-right: 8px; color: var(--faint); }

.related { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.related h2 { font-size: 21px; margin-bottom: 16px; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { margin-bottom: 10px; }

.breadcrumbs { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-bottom: 18px; }
.breadcrumbs a { color: var(--faint); }
.breadcrumbs a:hover { color: var(--text); }

/* --- legal --- */

.legal { max-width: 760px; }
.legal h1 { font-size: clamp(30px, 4.2vw, 40px); }
.legal .updated { font-family: var(--font-mono); color: var(--faint); font-size: 13px; margin: 0 0 36px; }
.legal section { padding: 0; margin-bottom: 30px; }
.legal h2 { font-size: 21px; margin-bottom: 10px; }
.legal p { color: var(--muted); margin: 0 0 12px; }
.legal ul { color: var(--muted); padding-left: 22px; margin: 0 0 12px; }
.legal li { margin-bottom: 9px; }
.legal strong { color: var(--text); }

@media (max-width: 620px) {
  section { padding: 48px 0; }
  main > section:first-child { padding: 60px 0 52px; }
  .header-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .plan, .post-card { transition: none; }
  .hero-sweep { animation: none; }
  .eyebrow::after { animation: none; }
}

/* ---- Support form -------------------------------------------------------
   The one form on the marketing site. It submits without JavaScript, so
   everything here has to look right before any script runs. */

.support-page { max-width: 760px; }
.support-page h1 { font-size: clamp(30px, 4.2vw, 42px); margin: 0 0 12px; }

.support-form {
  display: grid;
  gap: 18px;
  margin: 32px 0 8px;
  border: 1px solid var(--line);
  background: rgba(13, 31, 39, 0.5);
  border-radius: var(--radius);
  padding: 26px;
}

/* One column until there is genuinely room for two: a cramped name/email
   pair is worse than a tall form. */
.field-row { display: grid; gap: 18px; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 7px; }
.field > span { font-size: 14px; font-weight: 600; color: var(--text); }

.support-form input,
.support-form select,
.support-form textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: rgba(8, 20, 25, 0.6);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.support-form textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.support-form ::placeholder { color: var(--faint); }

.support-form input:focus-visible,
.support-form select:focus-visible,
.support-form textarea:focus-visible,
.support-form button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.support-form button { justify-self: start; cursor: pointer; border: 0; }
.support-form button:disabled { opacity: 0.55; cursor: default; }

/* Honeypot. Off-screen rather than display:none, since some bots skip hidden
   inputs, but almost none check where an element actually sits. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { margin: 0; font-size: 14px; color: var(--muted); min-height: 1.2em; }
.form-status.ok { color: var(--ok); }
.form-status.bad { color: #ffa89d; }
.form-note { margin: 0; font-size: 13px; color: var(--faint); }

.support-aside { margin-top: 44px; border-top: 1px solid var(--line-soft); padding-top: 28px; }
.support-aside h2 { font-size: 21px; margin: 0 0 10px; }
.support-aside p { color: var(--muted); margin: 0 0 12px; }

/* ------------------------------------------------------------------
   Free tools (/tools/*). These pages are the one place the marketing
   site ships JavaScript: small, page-local, no framework. */

.tool-ui input[type="text"] {
  width: 100%;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--text);
  background: rgba(8, 20, 25, 0.6);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tool-ui ::placeholder { color: var(--faint); }
.tool-ui input[type="text"]:focus-visible,
.tool-ui button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.tool-ui button { cursor: pointer; border: 0; }
.tool-ui button:disabled { opacity: 0.55; cursor: default; }

.tool-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 20px 0 12px; }
.tool-grow { flex: 1; min-width: 240px; }
.tool-row .btn { padding: 11px 24px; }

.tool-check {
  display: block;
  font-size: 14.5px;
  color: var(--muted);
  margin: 8px 0;
  cursor: pointer;
}
.tool-check input { margin-right: 8px; accent-color: var(--accent); }
.tool-check code { font-size: 13px; }

.tool-inline { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.tool-inline .tool-check { margin: 4px 0; }

/* Result rows: tag + text, colored by verdict on the left edge. */
.checks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.check {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: baseline;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--panel);
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--muted);
}
.check strong { color: var(--text); font-weight: 600; }
.check code { word-break: break-all; }
.check .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.check-body { display: block; }
.check-detail { display: block; margin-top: 4px; font-size: 13.5px; }
.check.ok { border-left-color: var(--ok); }
.check.ok .tag { color: var(--ok); }
.check.warn { border-left-color: var(--warn); }
.check.warn .tag { color: var(--warn); }
.check.bad { border-left-color: var(--bad); }
.check.bad .tag { color: var(--bad); }
.check.info { border-left-color: var(--faint); }
.check.info .tag { color: var(--faint); }

.tool-result-h { font-size: 22px; margin: 32px 0 10px; }
.tool-record {
  background: #0a1a21;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  font-family: var(--font-mono);
}
.tool-record.wrapcode { white-space: pre-wrap; word-break: break-word; }
.tool-out { margin-top: 28px; }
.tool-out .tool-row { margin: 12px 0 0; align-items: center; }
.tool-privacy { margin-top: 28px; max-width: 62ch; }
.tool-faq-h { margin-top: 44px; }

/* CSP builder form layout */
.csp-grid { display: grid; gap: 16px; margin: 28px 0 0; }
@media (min-width: 760px) { .csp-grid { grid-template-columns: 1fr 1fr; } .csp-span { grid-column: 1 / -1; } }
.csp-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 16px 18px;
  margin: 0;
}
.csp-box legend, .csp-box summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 0 6px;
}
.csp-box summary { cursor: pointer; padding: 0; }
.csp-extras { display: grid; gap: 14px; margin: 16px 0 10px; }
@media (min-width: 620px) { .csp-extras { grid-template-columns: 1fr 1fr; } }

/* Tool cards on the hub are whole-card links. */
.tool-card { color: inherit; display: block; }
.tool-card:hover { text-decoration: none; }
.tool-card-go { margin-top: 12px !important; color: var(--accent-hover) !important; font-size: 14px !important; }

/* --- AI section: subsection headings + assistant-chat mockup --- */

.ai-sub { margin-top: 52px; }
.ai-sub > h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin: 0 0 12px; }

.ai-chat {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: #0a1a21; box-shadow: 0 18px 48px rgba(3, 10, 13, 0.6);
  font-size: 12.5px; line-height: 1.6;
}
.ai-chat-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 92%; padding: 8px 12px; }
.ai-msg.user {
  align-self: flex-end; color: var(--text);
  background: var(--accent-soft); border: 1px solid rgba(47, 214, 181, 0.35);
  border-radius: 10px 10px 4px 10px;
}
.ai-msg.bot {
  align-self: flex-start; color: var(--muted);
  background: rgba(13, 31, 39, 0.6); border: 1px solid var(--line);
  border-radius: 10px 10px 10px 4px;
}
.ai-msg.bot strong { color: var(--text); }
.ai-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-tool {
  font-family: var(--font-mono);
  font-size: 10.5px; color: #9af0d9; background: #0d1f27;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}
.ai-tool .ok { color: var(--ok); }
.ai-sev-high { color: var(--bad); font-weight: 700; }
.ai-sev-med { color: var(--warn); font-weight: 700; }

/* ------------------------------------------------------------------
   Header "Features" dropdown. Pure CSS: :hover opens it for pointers,
   :has(:focus-visible) opens it while keyboard focus is inside, and mouse
   clicks don't match :focus-visible, so the panel closes naturally once
   the pointer leaves instead of sticking to the clicked link. */

.nav-drop { position: relative; }
.nav-drop > button {
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.nav-drop > button:hover, .nav-drop:has(:focus-visible) > button { color: var(--bright); }
.nav-drop .caret { font-size: 10px; color: var(--faint); }

/* The padding-top is a hover bridge so the pointer can travel from the
   button to the panel without a gap that would close it. */
.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 14px;
  z-index: 60;
}
.nav-drop:hover .nav-menu,
.nav-drop:has(:focus-visible) .nav-menu { display: block; }

.nav-panel {
  min-width: 220px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(3, 10, 13, 0.6);
}
.nav-panel a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.nav-panel a:hover {
  color: var(--bright);
  background: var(--accent-soft);
  text-decoration: none;
}

/* Lit when the visitor is on one of the dropdown's pages: the button
   equivalent of the aria-current link state. */
.nav-drop > button.on { color: var(--bright); }

/* Full-width index link under the Use cases columns. */
.nav-panel .nav-all {
  margin-top: 6px;
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 6px 6px;
  color: var(--accent-hover);
}

/* Two labeled columns inside a dropdown panel (Use cases: by role / by case). */
.nav-cols { display: flex; }
.nav-cols > div { min-width: 180px; }
.nav-cols > div + div {
  border-left: 1px solid var(--line-soft);
  margin-left: 8px;
  padding-left: 8px;
}
.nav-col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 12px 4px;
}

/* When the nav wraps on small viewports the Features button sits at the
   left of its row, so the panel opens rightward from it instead. */
@media (max-width: 720px) {
  .nav-menu { left: 0; right: auto; transform: none; }
  .nav-panel { max-width: calc(100vw - 24px); }
  .nav-cols { flex-wrap: wrap; }
  .nav-cols > div + div { border-left: 0; margin-left: 0; padding-left: 0; }
}

/* The header is sticky, so a jumped-to section must land below it. */
section[id] { scroll-margin-top: 76px; }