/* === Self-hosted fonts === */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* === Tokens =========================================================
   Palette: warm bone background, near-black ink, single forest accent.
   Severity colors share the same chroma so the feed reads as a system.
==================================================================== */
:root {
  /* surfaces */
  --bg:           #F4F1EA;   /* bone */
  --paper:        #FBFAF6;   /* card */
  --paper-2:      #EFEBE2;   /* sunken */
  --ink:          #1F1B16;   /* near-black, faintly warm */
  --ink-2:        #3A3530;
  --muted:        #6E665B;   /* secondary text */
  --faint:        #9A9082;   /* labels, meta */
  --hairline:     #E5E0D4;
  --hairline-2:   #D9D3C3;

  /* accent — single forest tone */
  --accent:       #3D5A40;
  --accent-ink:   #2B4030;
  --accent-soft:  #E2E8DC;

  /* severity */
  --sev-crit:     #A8412C;
  --sev-crit-bg:  #F4E2DC;
  --sev-high:     #9A6A1B;
  --sev-high-bg:  #F2E7CE;
  --sev-med:      #5C6B33;
  --sev-med-bg:   #E5E9D4;
  --sev-low:      #3D5A40;
  --sev-low-bg:   #DDE5D9;
  --sev-info:     #6E665B;
  --sev-info-bg:  #ECE7DA;

  /* type */
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* radius / shadow */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 10px;
  --shadow-sm: 0 1px 0 rgba(31,27,22,0.04);
  --shadow:    0 1px 2px rgba(31,27,22,0.05), 0 6px 24px -12px rgba(31,27,22,0.10);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  font-feature-settings: "ss01", "cv11";
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); }
button { font: inherit; }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-sm { padding: 7px 12px; font-size: 12.5px; }
.btn-block { width: 100%; padding: 11px 14px; }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--bg); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-2);
}
.btn-secondary:hover { border-color: var(--ink); }

/* === Masthead === */
.masthead {
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(160%) blur(6px);
  background: rgba(244,241,234,0.86);
}
.masthead-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
}
.brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-divider {
  width: 1px;
  height: 14px;
  background: var(--hairline-2);
}
.brand-tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.masthead-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-spacer { width: 8px; }
.nav-link {
  color: var(--muted);
  font-size: 13px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  transition: color .15s ease, background .15s ease;
}
.nav-link:hover { color: var(--ink); background: var(--paper-2); }
.nav-link.is-active {
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px;
  margin-left: 4px;
}
.account-chip:hover { border-color: var(--hairline-2); background: var(--bg); color: var(--ink); }
.account-monogram {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

/* === Hero band === */
.hero {
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(1200px 300px at 80% -20%, rgba(61,90,64,0.06), transparent 60%),
    var(--bg);
}
.hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 28px 36px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
.eyebrow-dark { color: var(--ink); }
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(61,90,64,0.18);
}
.hero-title {
  margin-top: 14px;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-ink);
}
.hero-sub {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-cta {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
  position: relative;
  box-shadow: var(--shadow);
}
.hero-cta-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
}
.hero-cta-title {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hero-cta-body {
  margin-top: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* === Layout === */
.layout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 28px 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: start;
}

/* === Sidebar === */
.sidebar {
  position: sticky;
  top: 80px;
}
.sidebar-section {
  margin-bottom: 22px;
}
.sidebar-section + .sidebar-section {
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  margin-top: 0;
}
.sidebar-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  padding: 0 2px;
}

/* search */
.search-wrap { position: relative; }
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}
.search-input {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px 10px 8px 30px;
  border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
.search-input::placeholder { color: var(--faint); }
.search-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(31,27,22,0.06);
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-family: var(--sans);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: color .12s, background .12s;
  margin-bottom: 1px;
  position: relative;
}
.filter-btn > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.filter-btn:hover { background: var(--paper-2); color: var(--ink); }
.filter-btn.is-active,
.filter-btn.active {
  color: var(--ink);
  font-weight: 500;
  background: var(--paper);
  box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--hairline);
}
.filter-btn .count {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.filter-btn.is-active .count,
.filter-btn.active .count { color: var(--muted); }

.sev-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--faint);
  display: inline-block;
}
.sev-dot-all       { background: var(--ink); }
.sev-dot-critical  { background: var(--sev-crit); }
.sev-dot-high      { background: var(--sev-high); }
.sev-dot-medium    { background: var(--sev-med); }
.sev-dot-low       { background: var(--sev-low); }
.sev-dot-info      { background: var(--sev-info); }
.sev-dot.sev-critical { background: var(--sev-crit); }
.sev-dot.sev-high { background: var(--sev-high); }
.sev-dot.sev-medium { background: var(--sev-med); }
.sev-dot.sev-low { background: var(--sev-low); }

/* === Main / stats === */
.main { min-width: 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 28px;
}
.stat {
  padding: 16px 20px;
  border-right: 1px solid var(--hairline);
}
.stat:last-child { border-right: none; }
.stat-label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 30px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-value-sm {
  font-size: 18px;
  letter-spacing: -0.01em;
  font-family: var(--mono);
  font-weight: 500;
  padding-top: 6px;
}
.stat-alert { color: var(--sev-crit); }
.stat-sub {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}

/* === Feed header === */
.feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 2px;
}
.feed-header-left {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.feed-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.feed-count {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}
.feed-sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.sort-label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 8px;
}
.sort-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.sort-btn:hover { color: var(--ink); background: var(--paper-2); }
.sort-btn.is-active { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }

/* === Entry cards === */
.entry-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.entry-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 18px 22px 16px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.entry-card:hover {
  border-color: var(--hairline-2);
  box-shadow: var(--shadow);
}

.entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  color: var(--muted);
}
.entry-meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--hairline-2);
  flex-shrink: 0;
}
.entry-source {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.entry-time {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  margin-left: auto;
}

/* severity pill — flat, single tone */
.sev-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 3px;
  line-height: 1;
}
.sev-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}
.sev-critical      { background: var(--sev-crit-bg); color: var(--sev-crit); }
.sev-high          { background: var(--sev-high-bg); color: var(--sev-high); }
.sev-medium        { background: var(--sev-med-bg);  color: var(--sev-med); }
.sev-low           { background: var(--sev-low-bg);  color: var(--sev-low); }
.sev-informational { background: var(--sev-info-bg); color: var(--sev-info); }

/* regulation tag — outline */
.reg-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline-2);
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.entry-title {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.32;
  letter-spacing: -0.012em;
  margin-bottom: 8px;
  text-wrap: pretty;
}
.entry-title a { color: inherit; }
.entry-title a:hover {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.entry-summary {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 12px;
  text-wrap: pretty;
}

.entry-action {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--accent-ink);
  line-height: 1.55;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--accent);
}
.entry-action strong { color: var(--accent-ink); font-weight: 600; }
.entry-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  flex-shrink: 0;
  margin-top: 1px;
}

.entry-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.entry-footer a {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
}
.entry-footer a:hover { color: var(--ink); }
.entry-dot {
  width: 3px;
  height: 3px;
  background: var(--hairline-2);
  border-radius: 999px;
}

/* === AI note === */
.ai-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
  margin-bottom: 0;
  padding: 0 2px;
}
.ai-chip {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  background: var(--paper);
  border: 1px solid var(--hairline-2);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 3px;
}

/* === Signup band === */
.signup {
  margin: 56px 0 32px;
  padding: 36px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
}
.signup .eyebrow-dark { color: rgba(244,241,234,0.7); }
.signup .pulse {
  background: #C9D8B5;
  box-shadow: 0 0 0 3px rgba(201,216,181,0.18);
}
.signup-copy h2 {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--bg);
  text-wrap: balance;
}
.signup-copy p {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(244,241,234,0.7);
  max-width: 38ch;
  line-height: 1.55;
}
.signup-form { display: flex; flex-direction: column; gap: 12px; }
.signup-form .input-row {
  display: flex;
  gap: 8px;
  background: rgba(244,241,234,0.06);
  border: 1px solid rgba(244,241,234,0.14);
  border-radius: var(--r);
  padding: 4px;
}
.signup-form input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  padding: 8px 10px;
}
.signup-form input[type="email"]::placeholder { color: rgba(244,241,234,0.4); }
.signup-form input[type="email"]:focus { outline: none; }
.signup-form .btn-primary {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}
.signup-form .btn-primary:hover { background: #fff; border-color: #fff; color: var(--ink); }

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: rgba(244,241,234,0.6);
  line-height: 1.5;
}
.consent-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: #C9D8B5;
}
.consent-row a { color: rgba(244,241,234,0.85); text-decoration: underline; text-decoration-color: rgba(244,241,234,0.3); }
.consent-row a:hover { color: #fff; }

.signup-success {
  display: none;
  font-size: 13px;
  color: #C9D8B5;
  padding: 8px 0;
}

/* === Footer === */
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: 24px;
}
.site-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}
.footer-brand { color: var(--ink); font-weight: 500; }
.footer-meta a { color: var(--muted); }
.footer-meta a:hover { color: var(--ink); }
.footer-roadmap { color: var(--faint); }

/* === Responsive === */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-cta { max-width: 420px; }
  .layout { grid-template-columns: 1fr; gap: 24px; padding: 24px 24px 0; }
  .sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .sidebar-section + .sidebar-section { border-top: none; padding-top: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(n+3) { border-bottom: none; }
  .signup { grid-template-columns: 1fr; padding: 28px; }
  .feed-sort { display: none; }
}
/* === Shared page chrome === */
.page-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 28px 56px;
}
.page-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 28px 64px;
}
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
}
.crumb:hover { color: var(--ink); }

/* === Forms === */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
.form-textarea { resize: vertical; line-height: 1.55; }
.form-select { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%236E665B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(31,27,22,0.06);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--faint); }

.form-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

/* === Card === */
.card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px;
}
.card + .card { margin-top: 16px; }

/* === Auth pages === */
.auth-shell {
  max-width: 440px;
  margin: 0 auto;
  padding: 56px 24px 64px;
}
.auth-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 32px;
}
.auth-card h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 6px;
}
.auth-copy {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 22px;
  line-height: 1.55;
}
.auth-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 10px;
  margin-bottom: 18px;
}
.auth-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.auth-row.single { grid-template-columns: 1fr; }
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 14px;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.auth-link-row {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.auth-message {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.auth-message[data-variant="error"] { color: var(--sev-crit); }
.auth-message[data-variant="success"] { color: var(--accent-ink); }
.auth-message[data-variant="pending"] { color: var(--sev-high); }

.account-settings-panel {
  margin: 4px 0 14px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--bg);
}
.account-settings-panel h3 {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}
.account-settings-copy {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* === Assess wizard === */
.assess-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.progress-steps {
  display: flex;
  align-items: center;
  gap: 0;
}
.step-indicator {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  font-family: var(--sans);
  font-size: 12.5px;
}
.step-indicator .step-num {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  border: 1px solid var(--hairline-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}
.step-indicator.active {
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.step-indicator.active .step-num {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.step-indicator.done .step-num { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.progress-line {
  width: 36px;
  height: 1px;
  background: var(--hairline-2);
}

.step-panel { display: none; }
.step-panel.active { display: block; }
.step-header { margin-bottom: 22px; }
.step-header h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 4px;
}
.step-header p {
  font-size: 14px;
  color: var(--muted);
}

.assess-body { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 32px; }

.auth-hint {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--accent-soft);
  border: 1px solid #CFDAC8;
  border-left: 2px solid var(--accent);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  margin-bottom: 22px;
}
.auth-hint a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label,
.form-group > label:first-child {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-opt, .checkbox-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--bg);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.radio-opt:hover, .checkbox-opt:hover { border-color: var(--hairline-2); }
.radio-opt input, .checkbox-opt input { margin-top: 2px; accent-color: var(--accent); }
.radio-opt span, .checkbox-content { font-size: 13.5px; color: var(--ink); }

.checkbox-opt {
  align-items: center;
}
.checkbox-content { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.checkbox-title { font-size: 14px; color: var(--ink); font-weight: 500; }
.checkbox-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.checkbox-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--hairline-2);
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.checkbox-sections { display: flex; flex-direction: column; gap: 22px; }
.checkbox-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.checkbox-section .checkbox-opt + .checkbox-opt { margin-top: 6px; }

.ai-scan-panel {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 22px;
}
.ai-scan-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.manual-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.manual-mode-toggle input { accent-color: var(--accent); }
.ai-plan-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}
.scan-helper {
  font-size: 12px;
  color: var(--faint);
  margin-top: 8px;
}

.scan-status {
  margin-top: 12px;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-2);
  color: var(--muted);
  background: var(--paper-2);
}

.scan-status.pending { border-color: var(--hairline-2); background: var(--paper-2); color: var(--ink-2); }
.scan-status.success { border-color: #C4CE95; background: #F5F7EE; color: #4E5C20; }
.scan-status.warn { border-color: #E5C87A; background: #FBF3E0; color: #8A6000; }
.scan-status.error { border-color: #E8C5C1; background: #F9ECEB; color: #B03A2E; }

.scan-summary {
  margin-top: 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--paper);
  padding: 12px;
}

.scan-summary-main { font-size: 13px; color: var(--ink); line-height: 1.6; }
.scan-summary-list { margin-top: 8px; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }

.ai-confidence-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: var(--mono);
  color: #4E5C20;
  background: #E5EBD0;
  border: 1px solid #C4CE95;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
}

.checklist-section { margin-bottom: 32px; }

.checklist-reg-title {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}

.checklist-item {
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--paper);
  margin-bottom: 8px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  transition: border-color .15s;
}

.checklist-item[data-answer="yes"] { border-left: 3px solid var(--sev-med); }
.checklist-item[data-answer="partial"] { border-left: 3px solid var(--sev-high); }
.checklist-item[data-answer="no"] { border-left: 3px solid var(--sev-crit); }

.checklist-question { flex: 1; padding: 12px 14px; }
.checklist-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.checklist-category {
  font-size: 10px;
  color: var(--faint);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.checklist-article {
  font-size: 10px;
  color: var(--faint);
  font-family: var(--mono);
  margin-left: auto;
}
.checklist-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.checklist-desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

.ai-answer-confidence {
  font-size: 10px;
  font-family: var(--mono);
  color: #4E5C20;
  background: #E5EBD0;
  border: 1px solid #C4CE95;
  border-radius: 999px;
  padding: 1px 7px;
}

.checklist-answer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border-left: 1px solid var(--hairline);
  min-width: 96px;
  justify-content: center;
  background: var(--bg);
}

.answer-opt { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.answer-opt input { accent-color: var(--accent); }
.answer-label { font-size: 12px; font-weight: 500; }
.answer-label.yes { color: #4E5C20; }
.answer-label.partial { color: #8A6000; }
.answer-label.no { color: #B03A2E; }

.results-summary {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: 28px;
}

#results-container { max-width: 820px; margin: 0 auto; }

.score-ring-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
}

.score-ring { width: 110px; height: 110px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--hairline); stroke-width: 9; }
.ring-fill {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dasharray .6s ease;
}

.score-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-num {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--mono);
  line-height: 1;
}

.score-text {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 3px;
}

.results-meta { flex: 1; }

.results-title { font-size: 18px; color: var(--ink); font-weight: 700; margin-bottom: 3px; }
.results-subtitle { font-size: 13px; color: var(--muted); margin-bottom: 12px; }

.results-ai-summary {
  font-size: 12px;
  color: var(--muted);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin-bottom: 12px;
}

.gap-counts { display: flex; gap: 8px; flex-wrap: wrap; }

.gap-count {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--mono);
  padding: 3px 9px;
  border-radius: 3px;
}

.gap-count.critical { background: #F9ECEB; color: #B03A2E; }
.gap-count.high { background: #FBF3E0; color: #8A6000; }
.gap-count.medium { background: #EFF2E4; color: #4E5C20; }
.gap-count.none { background: #EBF3EE; color: #2E6645; }

.results-section { margin-bottom: 24px; }

.results-reg-title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}

.reg-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--ink);
  color: #D4B96A;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: .3px;
}

.gap-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 14px 18px;
  margin-bottom: 8px;
  background: var(--paper);
}

.gap-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}

.sev-badge {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}

.sev-badge.sev-critical { background: #F9ECEB; color: #B03A2E; }
.sev-badge.sev-high { background: #FBF3E0; color: #8A6000; }
.sev-badge.sev-medium { background: #EFF2E4; color: #4E5C20; }
.sev-badge.sev-low { background: #EBF3EE; color: #2E6645; }

.gap-category {
  font-size: 10px;
  color: var(--faint);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.gap-article {
  font-size: 10px;
  color: var(--faint);
  font-family: var(--mono);
  margin-left: auto;
}

.gap-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.gap-desc { font-size: 13px; color: var(--ink-2); line-height: 1.6; }

.sev-border-critical { border-left: 3px solid var(--sev-crit); }
.sev-border-high { border-left: 3px solid var(--sev-high); }
.sev-border-medium { border-left: 3px solid var(--sev-med); }
.sev-border-low { border-left: 3px solid var(--sev-low); }

.no-gaps {
  background: #EBF3EE;
  border: 1px solid #AACDB8;
  border-radius: var(--r);
  padding: 18px 22px;
  color: #2E6645;
  font-size: 14px;
}

.results-cta {
  margin-top: 28px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  text-align: center;
}

.results-cta p { font-size: 13px; color: var(--muted); margin-bottom: 12px; }

.results-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
}

.ai-plan-section {
  margin-top: 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
}

.ai-plan-header {
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--hairline);
}

.ai-plan-header h3 {
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 4px;
}

.ai-plan-content { padding: 18px 22px; }
.ai-plan-text { font-size: 14px; color: var(--ink); line-height: 1.75; }
.ai-plan-text p { margin-bottom: 12px; }
.ai-plan-text strong { color: var(--ink); font-weight: 600; }

.ai-plan-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--hairline);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ai-plan-error {
  font-size: 13px;
  color: #B03A2E;
  background: #F9ECEB;
  border: 1px solid #E8C5C1;
  border-radius: var(--r-sm);
  padding: 14px 18px;
  line-height: 1.6;
}

.ai-plan-disclaimer {
  font-size: 11px;
  color: var(--faint);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-style: italic;
}

#ai-plan-trigger {
  margin-top: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.history-delta-wrap { text-align: right; }

.history-delta {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--mono);
  padding: 2px 8px;
  border-radius: 3px;
}

.history-delta.positive { color: #4E5C20; background: #EFF2E4; }
.history-delta.negative { color: #B03A2E; background: #F9ECEB; }
.history-delta.neutral { color: var(--faint); background: #F4EDE0; }

.related-news {
  margin-top: 10px;
  padding: 12px 14px;
  background: #F5F3ED;
  border-radius: var(--r);
  border: 1px solid var(--hairline);
}

.related-news-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-family: var(--mono);
  margin-bottom: 8px;
}

.related-news-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  margin-bottom: 5px;
  text-decoration: none;
  transition: border-color .15s;
}

.related-news-card:hover { border-color: var(--accent); text-decoration: none; }

.related-news-title {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  flex: 1;
  line-height: 1.4;
}

.related-news-source {
  font-size: 10px;
  color: var(--faint);
  font-family: var(--mono);
  white-space: nowrap;
}

.history-section {
  margin-top: 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
  padding: 14px 18px;
}

.history-list { padding-top: 6px; }

.history-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  margin-bottom: 6px;
  background: var(--bg);
}

.history-card.latest { border-color: #C4CE95; background: #F5F7EE; }
.history-score { font-size: 20px; font-weight: 700; font-family: var(--mono); min-width: 52px; text-align: center; }
.history-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.history-date { font-size: 12px; font-weight: 500; color: var(--ink); }
.history-gaps { font-size: 11px; color: var(--muted); }
.history-empty { font-size: 12px; color: var(--muted); padding: 10px 0 4px; }

.no-regs {
  color: var(--muted);
  font-size: 14px;
  padding: 18px;
  background: var(--paper);
  border-radius: var(--r);
  border: 1px solid var(--hairline);
}

.assess-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
.assess-nav .btn-primary { margin-left: auto; }

@media print {
  body { background: #fff !important; }
  .masthead,
  .assess-progress,
  #assessment-container,
  #btn-print,
  #ai-plan-trigger,
  .results-cta,
  .history-section,
  .btn-secondary { display: none !important; }

  .page-main { padding: 0 !important; max-width: 100% !important; }
  #results-page { display: block !important; }
  #results-container { max-width: 100%; }

  .results-summary {
    border: 2px solid var(--hairline);
    page-break-inside: avoid;
  }

  .gap-card,
  .results-section { page-break-inside: avoid; }

  .ai-plan-section {
    page-break-before: always;
    border: 2px solid var(--hairline);
  }
}

/* === Privacy === */
.privacy-content h1 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 4px;
}
.privacy-content .updated {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  margin-bottom: 32px;
}
.privacy-content h2 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-top: 32px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.privacy-content p,
.privacy-content li {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 8px;
}
.privacy-content ul { list-style: none; padding-left: 0; }
.privacy-content li {
  position: relative;
  padding-left: 18px;
}
.privacy-content li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}
.privacy-content strong { color: var(--ink); font-weight: 600; }
.privacy-content a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .auth-row { grid-template-columns: 1fr; }
  .assess-body { padding: 22px; }
  .progress-steps { gap: 0; }
  .step-indicator .step-name { display: none; }
  .progress-line { width: 18px; }

  .results-summary { flex-direction: column; text-align: center; }
  .gap-counts { justify-content: center; }
  .checklist-item { flex-direction: column; }
  .checklist-answer {
    flex-direction: row;
    border-left: none;
    border-top: 1px solid var(--hairline);
    background: var(--paper);
  }
}

@media (max-width: 620px) {
  .masthead-inner { padding: 0 18px; height: 56px; gap: 10px; }
  .brand-divider, .brand-tag { display: none; }
  .nav-link { padding: 6px 8px; }
  .hero-inner { padding: 32px 20px 28px; }
  .layout { padding: 20px 20px 0; }
  .sidebar { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .entry-card { padding: 16px 16px 14px; }
  .entry-time { margin-left: 0; }
}

/* ====================================================================
   Landing page — hero extras, sections, how-it-works, pricing, teaser
==================================================================== */

/* entry card top row (rendered by app.js) */
.entry-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  color: var(--muted);
}

/* hero extras */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hero-trust {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.01em;
}
.hero-cta-list {
  list-style: none;
  margin: 4px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hero-cta-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.hero-cta-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* generic section wrapper */
.section {
  border-bottom: 1px solid var(--hairline);
}
.section-alt {
  background:
    radial-gradient(1000px 260px at 15% -30%, rgba(61,90,64,0.05), transparent 60%),
    var(--paper-2);
}
.section-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 28px;
}
.section-head { margin-bottom: 32px; }
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.section-title {
  margin-top: 12px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  text-wrap: balance;
}
.section-sub {
  margin-top: 12px;
  max-width: 56ch;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
}

/* how it works */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.how-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px 22px 20px;
}
.how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
}
.how-card h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 7px;
}
.how-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* pricing */
.price-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 18px;
  align-items: stretch;
  max-width: 760px;
}
.price-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
}
.price-card-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.price-badge {
  position: absolute;
  top: -10px;
  left: 24px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: var(--bg);
  padding: 4px 9px;
  border-radius: 3px;
}
.price-card-head {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.price-plan {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.price-amount {
  margin-top: 10px;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.price-per {
  font-size: 15px;
  font-weight: 400;
  color: var(--faint);
  letter-spacing: 0;
}
.price-note {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--faint);
}
.price-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
  flex: 1;
}
.price-features li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.price-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.price-features li strong { color: var(--ink); font-weight: 600; }

.roadmap-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px dashed var(--hairline-2);
  border-radius: var(--r);
  max-width: 760px;
}
.roadmap-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 4px 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
.roadmap-items {
  font-size: 13px;
  color: var(--muted);
}

/* loading / empty / error state */
.state-box {
  background: var(--paper);
  border: 1px dashed var(--hairline-2);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  text-align: center;
}
.state-box h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.state-box p {
  font-size: 13px;
  color: var(--muted);
}
.state-box code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 3px;
}

/* updates teaser */
.entry-feed-teaser .entry-card { padding: 16px 20px 14px; }
.section .signup { margin: 0; }
.signup-error {
  display: none;
  font-size: 13px;
  color: #E8B4A0;
  padding: 4px 0;
}

@media (max-width: 860px) {
  .how-grid { grid-template-columns: 1fr; }
  .price-row { grid-template-columns: 1fr; }
  .section-inner { padding: 44px 22px; }
}