/* 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. */

:root {
  --bg: #020617;
  --panel: rgba(15, 23, 42, 0.55);
  --panel-solid: #0f172a;
  --line: #1e293b;
  --line-soft: rgba(148, 163, 184, 0.14);
  --text: #e2e8f0;
  --muted: #94a3b8;
  --faint: #64748b;
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-soft: rgba(99, 102, 241, 0.14);
  --ok: #34d399;
  --warn: #fbbf24;
  --radius: 14px;
}

*, *::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(99, 102, 241, 0.4); }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; 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(2, 6, 23, 0.82);
  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-weight: 700; font-size: 17px; letter-spacing: 0.24em; color: #fff;
}
.wordmark::before {
  content: ""; width: 24px; height: 24px; flex: none;
  background: url(/favicon.svg) center / contain no-repeat;
  filter: drop-shadow(0 2px 10px rgba(79, 70, 229, 0.55));
}
.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: #fff; text-decoration: none; }
.site-nav a[aria-current="page"] { color: #fff; }
.site-nav .btn-primary { color: #fff; }

.site-footer {
  border-top: 1px solid var(--line-soft);
  margin-top: 56px; padding: 40px 0;
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 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 --- */

.btn {
  display: inline-block; border-radius: 10px; 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, transform 0.15s ease,
    border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-sm { padding: 7px 15px; font-size: 14px; border-radius: 8px; }
.btn-primary {
  background: linear-gradient(180deg, #6d70f4, #5457ee);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 4px 18px rgba(79, 70, 229, 0.45);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #8184f7, #6366f1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 24px rgba(99, 102, 241, 0.55);
  transform: translateY(-1px);
}
.btn-ghost { border-color: var(--line); color: var(--text); background: rgba(15, 23, 42, 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(15, 23, 42, 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 radial glow + faint grid. */
main > section:first-child {
  padding: 92px 0 84px;
  background:
    radial-gradient(52rem 26rem at 18% -10%, rgba(99, 102, 241, 0.16), transparent 65%),
    radial-gradient(40rem 22rem at 85% 0%, rgba(56, 189, 248, 0.07), transparent 60%),
    repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.035) 0 1px, transparent 1px 56px);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-hover); margin: 0 0 18px;
  border: 1px solid rgba(99, 102, 241, 0.35); border-radius: 999px;
  padding: 6px 14px; background: rgba(99, 102, 241, 0.08);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--ok); box-shadow: 0 0 8px var(--ok);
}

h1 {
  font-size: clamp(34px, 5.2vw, 54px); line-height: 1.08; letter-spacing: -0.025em;
  margin: 0 0 20px; color: #fff; max-width: 21ch;
}
h1 .grad, h2 .grad {
  background: linear-gradient(92deg, #a5b4fc 0%, #818cf8 45%, #38bdf8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; color: #fff; letter-spacing: -0.015em; }
h3 { font-size: 17px; margin: 0 0 8px; color: #f1f5f9; }

.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)); }

.card {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.4));
  border-radius: var(--radius); padding: 24px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 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(129, 140, 248, 0.55), transparent);
  opacity: 0; transition: opacity 0.2s ease;
}
.card:hover {
  border-color: rgba(99, 102, 241, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.55);
}
.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: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-hover);
  border: 1px solid rgba(99, 102, 241, 0.3);
  font-weight: 700; 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: linear-gradient(180deg, rgba(30, 41, 59, 0.45), rgba(15, 23, 42, 0.35));
  border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.plan:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(2, 6, 23, 0.5); }
.plan.featured {
  border-color: rgba(99, 102, 241, 0.65);
  background:
    linear-gradient(180deg, rgba(99, 102, 241, 0.1), rgba(15, 23, 42, 0.35));
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25), 0 16px 40px rgba(79, 70, 229, 0.18);
}
.plan .badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-hover); margin-bottom: 10px;
}
.price { margin: 10px 0 2px; }
.price .amount { font-size: 40px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.price .per { color: var(--muted); font-size: 15px; }
.price-sub { font-size: 13px; 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(--ok); 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(15,23,42,0.6); border-radius: 10px; padding: 4px; }
.term-switch label {
  padding: 7px 16px; border-radius: 7px; font-size: 14px; font-weight: 500;
  color: var(--muted); cursor: pointer; transition: color 0.15s ease;
}
.term-switch label:hover { color: var(--text); }
.savings {
  background: rgba(52, 211, 153, 0.12); color: var(--ok);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; 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: #f1f5f9; color: #0f172a; }
#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(15, 23, 42, 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(30, 41, 59, 0.35); }
th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--faint); font-weight: 600; background: rgba(15, 23, 42, 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-size: 13.5px; color: var(--faint); margin-top: 12px; }

.paper {
  width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(2, 6, 23, 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: 12px; overflow: hidden;
  background: #0b1120;
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.6);
  font-size: 12px; line-height: 1.45;
}
.browser-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; background: #0f172a; border-bottom: 1px solid var(--line);
}
.browser-dots { display: flex; gap: 5px; }
.browser-dots span { width: 9px; height: 9px; border-radius: 50%; background: #334155; }
.browser-url {
  flex: 1; max-width: 260px; text-align: center;
  background: #1e293b; color: var(--faint); border-radius: 6px;
  padding: 3px 12px; font-size: 11px;
}

.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-weight: 700; letter-spacing: 0.2em; color: #fff; font-size: 11px; }
.mk-tabs { display: flex; gap: 2px; margin-left: 8px; }
.mk-tabs span { padding: 3px 8px; color: var(--faint); border-radius: 6px; }
.mk-tabs .on { color: #fff; background: rgba(99, 102, 241, 0.18); }
.mk-chip {
  margin-left: auto; font-size: 10px; color: var(--muted);
  background: #1e293b; 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(30, 41, 59, 0.45); border: 1px solid var(--line);
  border-radius: 10px; 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%), #1e293b 0);
  display: flex; align-items: center; justify-content: center;
}
.mk-ring > div {
  width: 66px; height: 66px; border-radius: 50%; background: #0b1120;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--ok);
}
.mk-label { font-size: 9.5px; letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.mk-sub { font-size: 10.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(30, 41, 59, 0.45); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; color: var(--text);
}
.mk-row small { margin-left: auto; color: var(--faint); font-size: 10px; white-space: nowrap; }
.mk-badge {
  flex: none; font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  border-radius: 5px; padding: 2px 7px; color: #fff;
}
.mk-high { background: #c2410c; }
.mk-med { background: #b45309; }
.mk-new { background: var(--accent); }
.mk-ok { background: #047857; }

/* 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; } }

.slack {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #1a1d21; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 18px 48px rgba(2, 6, 23, 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: 12px; overflow: hidden;
  background: #0b1120; box-shadow: 0 18px 48px rgba(2, 6, 23, 0.6);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.75;
}
.agent-term-body { padding: 14px 16px; overflow-x: auto; }
.agent-term .ps { color: #34d399; }
.agent-term .cmd { color: #e2e8f0; }
.agent-term .out { color: var(--faint); display: block; }
.agent-term .out .hl { color: #a5b4fc; }
.agent-term .diff-add { color: #34d399; display: block; }

/* Change-feed rows inside the browser mock. */
.mk-feed { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mk-day { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: 4px 0 -2px; }
.mk-diff {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; background: #0f172a; border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 8px; color: var(--muted);
}
.mk-diff .del { color: #f87171; }
.mk-diff .add { color: #34d399; }

/* --- FAQ --- */

.faq { max-width: 820px; margin-top: 26px; }
.faq details {
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(15, 23, 42, 0.4); margin-bottom: 10px;
  transition: border-color 0.2s ease;
}
.faq details[open] { border-color: rgba(99, 102, 241, 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-hover);
  font-size: 20px; 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: linear-gradient(180deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.4));
  color: var(--text);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover {
  text-decoration: none; border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-2px); box-shadow: 0 12px 32px rgba(2, 6, 23, 0.55);
}
.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-size: 12.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-hover)) 40%, transparent);
  color: var(--hero-accent, var(--accent-hover));
  background: color-mix(in srgb, var(--hero-accent, var(--accent-hover)) 10%, transparent);
  border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.post-card:hover { border-color: color-mix(in srgb, var(--hero-accent, var(--accent-hover)) 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: #fff; }
.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 only motion on the page and it is decoration, so it is
   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 — 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(30px, 4.4vw, 42px); max-width: 19ch; }
.article-header .post-meta { font-size: 14px; 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 — 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)) 26%, transparent), transparent 66%),
    radial-gradient(40rem 22rem at 8% 0%, rgba(99, 102, 241, 0.10), transparent 62%),
    repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.035) 0 1px, transparent 1px 56px);
}
.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)) 22%, transparent), transparent 66%),
    radial-gradient(40rem 22rem at 8% 0%, rgba(99, 102, 241, 0.10), transparent 62%),
    repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.035) 0 1px, transparent 1px 56px);
}
.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: #cbd5e1; font-size: 16.5px; }
.article-body h2 {
  font-size: 25px; 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: #f1f5f9; }
.article-body code {
  background: rgba(30, 41, 59, 0.8); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px; font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.article-body pre {
  background: #0b1220; border: 1px solid var(--line); border-radius: 10px;
  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(129, 140, 248, 0.4); }
.article-body a:hover { text-decoration-color: var(--accent-hover); }

.article-tldr {
  border: 1px solid rgba(99, 102, 241, 0.35); border-radius: var(--radius);
  background: rgba(99, 102, 241, 0.07); padding: 18px 20px; margin: 0 0 28px;
  font-size: 15.5px; color: var(--text);
}
.article-tldr .tldr-label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-hover); margin-bottom: 8px;
}
.article-tldr p { margin: 0 0 8px; }
.article-tldr p:last-child { margin: 0; }

.article-cta {
  border: 1px solid rgba(99, 102, 241, 0.4); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(15, 23, 42, 0.4));
  padding: 26px; margin: 44px 0 0;
}
.article-cta h2 { margin: 0 0 8px; font-size: 21px; padding: 0; }
.article-cta p { margin: 0 0 18px; color: var(--muted); }

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

.breadcrumbs { font-size: 13.5px; 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(28px, 4vw, 36px); }
.legal .updated { color: var(--faint); font-size: 14px; margin: 0 0 36px; }
.legal section { padding: 0; margin-bottom: 30px; }
.legal h2 { font-size: 19px; 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; }
  .card:hover, .plan:hover, .post-card:hover, .btn-primary:hover { transform: none; }
  .hero-sweep { 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(28px, 4vw, 38px); margin: 0 0 12px; }

.support-form {
  display: grid;
  gap: 18px;
  margin: 32px 0 8px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.4));
  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(2, 6, 23, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  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 — 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: #fca5a5; }
.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: 19px; 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;
  color: var(--text);
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  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: 10px;
  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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  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: #f87171; }
.check.bad .tag { color: #f87171; }
.check.info { border-left-color: var(--faint); }
.check.info .tag { color: var(--faint); }

.tool-result-h { font-size: 20px; margin: 32px 0 10px; }
.tool-record {
  background: #0b1220;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.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-size: 21px; margin: 0 0 12px; }

.ai-chat {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #0b1120; box-shadow: 0 18px 48px rgba(2, 6, 23, 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(99, 102, 241, 0.35);
  border-radius: 12px 12px 4px 12px;
}
.ai-msg.bot {
  align-self: flex-start; color: var(--muted);
  background: rgba(15, 23, 42, 0.6); border: 1px solid var(--line);
  border-radius: 12px 12px 12px 4px;
}
.ai-msg.bot strong { color: var(--text); }
.ai-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-tool {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; color: #a5b4fc; background: #0f172a;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}
.ai-tool .ok { color: #34d399; }
.ai-sev-high { color: #f87171; font-weight: 700; }
.ai-sev-med { color: #fbbf24; font-weight: 700; }

/* ------------------------------------------------------------------
   Header "Features" dropdown. Pure CSS: :hover opens it for pointers,
   :has(:focus-visible) opens it while keyboard focus is inside — 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: #fff; }
.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: 12px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.6);
}
.nav-panel a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.nav-panel a:hover {
  color: #fff;
  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: #fff; }

/* 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 8px 8px;
  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-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  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; }