/* Self-hosted fonts (SIL Open Font License, see /fonts). Previously loaded
   from Google Fonts, which sends every visitor's IP address to Google; a
   German court ruled that a GDPR violation. Self-hosting also removes a
   render-blocking third-party request flagged by PageSpeed. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/source-serif-4-latin-700-normal.woff2') format('woff2'); }

/* ============================================
   PRUNESOCIAL design tokens (from brief, verbatim)
   ============================================ */
:root {
  --color-bg: #FAFAF7;
  --color-surface: #FFFFFF;
  --color-border: #E4E1DA;
  --color-text-primary: #1E2229;
  --color-text-muted: #5A6270;
  --color-accent: #0E6E64;
  --color-accent-hover: #0A5850;
  --color-text-on-accent: #FFFFFF;
  --color-accent-tint: #E8F1EF;

  --chip-consider: #9C6006;
  --chip-review: #B3382E;
  --chip-clear: #0E6E64;

  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: 44px;
  --fs-h2: 30px;
  --fs-h3: 19px;
  --fs-body: 17px;
  --fs-small: 14px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --radius: 8px;
  --border-w: 1px;
  --max-width: 1080px;
  --section-pad: 96px;
  --motion-fast: 180ms ease-out;
}

@media (max-width: 640px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 25px;
    --fs-h3: 18px;
    --section-pad: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
  color: var(--color-text-primary);
}

h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 { font-size: var(--fs-h3); line-height: 1.35; }

p { margin: 0 0 var(--space-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

small, .text-small { font-size: var(--fs-small); line-height: 1.5; }

a { color: var(--color-accent); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

section { padding: var(--section-pad) 0; border-top: var(--border-w) solid var(--color-border); }
section:first-of-type { border-top: none; }

.band-bg { background: var(--color-bg); }
.band-surface {
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMiIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAuMTE4ICAwIDAgMCAwIDAuMTMzICAwIDAgMCAwIDAuMTYxICAwIDAgMCAwLjA1IDAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+");
  background-repeat: repeat;
}

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

.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: var(--border-w) solid transparent;
  cursor: pointer;
  transition: background-color var(--motion-fast), transform 120ms ease-out;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-secondary:hover { background: var(--color-accent-tint); }

/* ============================================
   Nav
   ============================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: var(--border-w) solid var(--color-border);
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: var(--space-2);
  flex-wrap: nowrap;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text-primary);
}
.nav-brand img { width: 28px; height: 28px; }
.nav-brand span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 400;
}
.nav-links a:hover { color: var(--color-accent); }
.nav-cta { display: inline-block; padding: 10px 16px; font-size: 15px; }
.nav-menu-items { display: none; }
.nav-mobile-wrap { display: contents; }
.nav-mobile { display: block; position: relative; }
/* The five links plus the wordmark and CTA only fit side by side from about
   960px. Below that the Menu button carries the links (checked by rendering
   at 640, 700, 768, 820, and 900px, where the full row used to overflow). */
@media (min-width: 960px) {
  .nav-menu-items { display: flex; }
  .nav-mobile-wrap { display: none; }
  .nav-mobile { display: none; }
}
@media (max-width: 639px) {
  .nav-cta { display: none; }
}
.nav-mobile summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile[open] summary { background: var(--color-surface); }
.nav-mobile a {
  display: block;
  padding: 10px 14px;
  white-space: nowrap;
}
.nav-mobile[open] {
  position: absolute;
  right: var(--space-4);
  top: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  margin-top: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: 10px 16px;
  border-radius: 0 0 6px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

html { scroll-padding-top: 88px; }
#hero-form, #how-it-works, #pricing, #faq, #final-form, #top {
  scroll-margin-top: 88px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================
   Hero
   ============================================ */
.hero .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .hero .container { flex-direction: row; }
  .hero-copy { flex: 1 1 0; min-width: 0; }
  .hero-visual-wrap { flex: 1 1 0; min-width: 0; }
}
.hero-copy p { max-width: 52ch; color: var(--color-text-muted); }
.hero-copy p.hero-lead { color: var(--color-text-primary); font-size: 18px; line-height: 1.5; }
.hero-copy .btn { margin-top: var(--space-2); }
.selected-tier-pill {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}


.hero-visual-wrap {
  position: relative;
  padding: var(--space-2);
}
.hero-visual-wrap::before,
.hero-visual-wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: var(--space-2);
  background:
    repeating-linear-gradient(
      to bottom,
      var(--color-border) 0px, var(--color-border) 1px,
      transparent 1px, transparent 15px
    )
    22px 28px / calc(100% - 44px) calc(100% - 100px) no-repeat,
    var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
}
.hero-visual-wrap::before { transform: rotate(-3deg); }
.hero-visual-wrap::after { transform: rotate(2deg); }

.hero-visual {
  position: relative;
  z-index: 1;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-5);
}
.report-doc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-w) solid var(--color-border);
}
.report-doc-textblock { flex: 1 1 auto; min-width: 0; }
.report-doc-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.report-doc-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
}
.report-doc-meta {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin-top: 2px;
}
.report-field-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 9px 0;
  border-bottom: 1px dotted var(--color-border);
  font-size: var(--fs-small);
}
.report-field-row:last-child { border-bottom: none; }
.report-field-row .val { color: var(--color-text-muted); }

.ink-stamp {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
}
@media (max-width: 480px) {
  .ink-stamp { width: 64px; height: 64px; }
  .report-doc-title { font-size: 17px; }
}

/* Hero credibility stat, styled as an editorial pull-figure rather than a caption line */
.hero-stat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--color-border);
}
.hero-stat-num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 42px;
  line-height: 1;
  color: var(--color-text-primary);
  flex-shrink: 0;
}
.hero-stat p { color: var(--color-text-muted); font-size: var(--fs-small); max-width: 32ch; margin: 0; }
.hero-stat-source,
.figure-source {
  display: block;
  margin-top: 4px;
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.92em;
}

/* One orchestrated entrance, hero only */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-copy > * { animation: fadeUp 500ms ease-out both; }
.hero-copy h1 { animation-delay: 0ms; }
.hero-copy > p { animation-delay: 70ms; }
.hero-copy .signup-form { animation-delay: 140ms; }
.hero-copy .hero-stat { animation-delay: 210ms; }
.hero-visual-wrap { animation: fadeUp 600ms ease-out 140ms both; }

/* ============================================
   Problem
   ============================================ */
.problem-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 860px) {
  .problem-layout { flex-direction: row; align-items: center; gap: var(--space-7); }
  .problem-text { flex: 1 1 auto; min-width: 0; }
  .problem-figure { flex: 0 0 220px; }
}
.problem-figure { text-align: center; }
.problem-figure svg { margin: 0 auto; }
.problem-figure .figure-caption {
  margin: var(--space-3) auto 0;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  max-width: 30ch;
}
.problem-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  max-width: 74ch;
}
.problem-list li {
  padding: var(--space-4) 0;
  border-top: var(--border-w) solid var(--color-border);
  color: var(--color-text-muted);
}
.problem-list li:last-child { border-bottom: var(--border-w) solid var(--color-border); }

/* ============================================
   How it works
   ============================================ */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 800px) {
  .steps { flex-direction: row; }
  .step { flex: 1 1 0; min-width: 0; }
}
.step-number {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.step p { color: var(--color-text-muted); }

/* ============================================
   Demo moment
   ============================================ */
.demo-intro { max-width: 70ch; color: var(--color-text-muted); margin-bottom: var(--space-6); }
.demo-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 860px) {
  .demo-panels { flex-direction: row; align-items: stretch; }
  .demo-panel { flex: 1 1 0; min-width: 0; }
}
.demo-panel {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.demo-panel.feed { transform: rotate(-1deg); }
.demo-panel h3 { margin-bottom: var(--space-4); }
.feed-card {
  border-top: var(--border-w) solid var(--color-border);
  padding: var(--space-3) 0;
}
.feed-card:first-of-type { border-top: none; padding-top: 0; }
.feed-card .kind { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: 2px; }
.feed-card .content { font-size: var(--fs-small); }

.report-row {
  display: flex;
  gap: var(--space-3);
  border-top: var(--border-w) solid var(--color-border);
  padding: var(--space-3) 0;
  align-items: flex-start;
}
.report-row:first-of-type { border-top: none; padding-top: 0; }
.chip {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  transform: rotate(-6deg);
  background: transparent;
}
.report-row:nth-child(2n) .chip { transform: rotate(5deg); }
.report-row:nth-child(3n) .chip { transform: rotate(-3deg); }
.chip-consider { color: var(--chip-consider); }
.chip-review { color: var(--chip-review); }
.chip-clear { color: var(--chip-clear); }
.report-row-body .category { font-weight: 600; font-size: var(--fs-small); margin-bottom: 2px; }
.report-row-body .reason { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: 4px; }
.report-row-body .fix { font-size: var(--fs-small); }
.report-row-body .fix strong { font-weight: 600; }

.demo-summary {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-text-primary);
  font-weight: 600;
  font-size: var(--fs-body);
}

/* ============================================
   Signup form
   ============================================ */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 420px;
  margin-top: var(--space-4);
}
.signup-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.signup-row input[type="email"] {
  flex: 1 1 220px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.signup-row input[type="email"]:focus { border-color: var(--color-accent); }
.signup-privacy { color: var(--color-text-muted); font-size: var(--fs-small); }
.signup-success {
  display: none;
  padding: var(--space-3);
  border: var(--border-w) solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-accent-tint);
  color: var(--color-text-primary);
  font-size: var(--fs-small);
}
.centered-form { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.centered-form .signup-row { justify-content: center; }

/* ============================================
   Benefits
   ============================================ */
.benefits-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
@media (min-width: 860px) {
  .benefits-layout { flex-direction: row; align-items: flex-start; }
  .benefit-featured { flex: 0.85 1 0; min-width: 0; }
  .benefit-list { flex: 1.15 1 0; min-width: 0; }
}
.benefit-featured {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.benefit-featured svg { width: 30px; height: 30px; color: var(--color-text-primary); margin-bottom: var(--space-3); }
.benefit-featured p { color: var(--color-text-muted); margin: 0; }

.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-w) solid var(--color-border);
}
.benefit-list li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: var(--border-w) solid var(--color-border);
}
.benefit-list li svg { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; margin-right: var(--space-1); color: var(--color-text-primary); }
.benefit-list li h3 { margin-bottom: 4px; }
.benefit-list li p { color: var(--color-text-muted); margin: 0; }

/* ============================================
   Pricing
   ============================================ */
.pricing-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 860px) {
  .pricing-grid { flex-direction: row; align-items: stretch; }
  .price-card { flex: 1 1 0; min-width: 0; }
}
.price-card {
  position: relative;
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
}
.price-card.recommended { border: 2px solid var(--color-accent); }
.badge-recommended {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius);
}
.price-card .amount { font-family: var(--font-heading); font-size: 34px; font-weight: 600; margin: var(--space-2) 0; }
.price-card .best-for { color: var(--color-text-muted); font-size: var(--fs-small); margin-bottom: var(--space-4); }
.price-card ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; flex-grow: 1; }
.price-card li {
  padding: var(--space-2) 0;
  border-top: var(--border-w) solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.price-card li:first-child { border-top: none; }
.price-card .btn { text-align: center; }
.no-guarantee {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  max-width: 60ch;
  margin: var(--space-5) auto 0;
}

/* ============================================
   FAQ
   ============================================ */
.faq-list { border-top: var(--border-w) solid var(--color-border); margin-top: var(--space-6); }
.faq-item { border-bottom: var(--border-w) solid var(--color-border); }
.faq-item summary {
  position: relative;
  cursor: pointer;
  padding: var(--space-4) 34px var(--space-4) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h3);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .q { display: block; }
.faq-item summary .q-icon {
  position: absolute;
  top: var(--space-4);
  right: 0;
  width: 22px;
  text-align: center;
}
.faq-item summary .q-icon::before {
  content: "+";
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 22px;
  color: var(--color-accent);
}
.faq-item[open] summary .q-icon::before { content: "\2212"; }
.faq-item p { padding-bottom: var(--space-4); color: var(--color-text-muted); }

/* ============================================
   Final CTA
   ============================================ */
.final-cta { text-align: center; }
.final-cta .container { display: flex; flex-direction: column; align-items: center; }
.final-cta h2 { max-width: 26ch; }
.final-cta .risk-reversal { color: var(--color-text-muted); max-width: 50ch; }

/* ============================================
   Footer
   ============================================ */
.site-footer {
  border-top: var(--border-w) solid var(--color-border);
  padding: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
}
.footer-brand img { width: 22px; height: 22px; }
.footer-brand span { font-family: var(--font-heading); font-weight: 600; }
.footer-legal { max-width: 70ch; }
.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px var(--space-4);
  padding: 0;
  margin: var(--space-3) 0 0;
  font-size: var(--fs-small);
}
.footer-links a { color: var(--color-text-muted); }
.footer-links a:hover { color: var(--color-accent); }

/* Supported platforms line under How it works */
.platforms-supported {
  margin-top: var(--space-6);
  margin-left: auto;
  margin-right: auto;
  max-width: 70ch;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* Sample report showcase in the demo section */









.sample-link { font-weight: 600; color: var(--color-accent); }


/* Two pricing tiers since Watchlist was retired, keep the cards proportionate */
.pricing-grid { max-width: 820px; margin-left: auto; margin-right: auto; }
.no-guarantee a { color: var(--color-accent); }

/* Problem section is text-only since the 80% figure was removed */
.problem-text { max-width: 780px; }

/* Compact sample-report strip (replaces the larger two-page showcase) */
.sample-strip {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--color-bg);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
}
.sample-strip-thumb {
  width: 120px;
  height: auto;
  flex: 0 0 auto;
  border: var(--border-w) solid var(--color-border);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(30, 34, 41, 0.10);
  transform: rotate(-2deg);
}
.sample-strip-copy h3 { margin-bottom: var(--space-2); }
.sample-strip-copy p { color: var(--color-text-muted); max-width: 64ch; }
@media (max-width: 600px) {
  .sample-strip { flex-direction: column; text-align: center; }
  .sample-strip-copy p { margin-left: auto; margin-right: auto; }
}

/* ============================================
   Content width pass: two reading widths used site-wide.
   --measure for body copy, --measure-wide for full-width text blocks
   (FAQ answers, section intros, legal lines) so nothing sits in a
   narrow column on the left half of a wide section.
   ============================================ */
:root { --measure: 72ch; --measure-wide: 92ch; }
.problem-list, .problem-text { max-width: var(--measure-wide); }
.problem-list li { max-width: none; }
.demo-intro { max-width: none; }
.step p { max-width: none; }
.platforms-supported { max-width: none; }
.faq-item p { max-width: var(--measure-wide); }
.no-guarantee { max-width: 820px; }
.final-cta h2 { max-width: 34ch; }
.final-cta .risk-reversal { max-width: 70ch; }
.signup-privacy { max-width: 64ch; margin-left: auto; margin-right: auto; }
.hero-copy .signup-privacy { margin-left: 0; margin-right: 0; }
.footer-legal { max-width: var(--measure-wide); }
.sample-strip-copy p { max-width: var(--measure); }
/* CONSIDER is the longest stamp label, keep it inside its circle */
.chip-consider { font-size: 10.5px; letter-spacing: 0; }
.faq-item p { max-width: none; padding-right: var(--space-6); }
.final-cta h2 { max-width: 44ch; }
.pricing-grid { max-width: none; }
.no-guarantee { max-width: var(--measure-wide); }
.report-row-body { flex: 1 1 auto; min-width: 0; }
.report-row-body .reason { max-width: none; }

/* ============================================
   Articles: methodology and export guides
   ============================================ */
.article { max-width: 780px; margin: 0 auto; padding: var(--space-7) var(--space-4) var(--space-8); }
.article h1 { margin-bottom: var(--space-2); }
.article h2 { font-size: 24px; margin-top: var(--space-7); margin-bottom: var(--space-3); }
.article p, .article li { line-height: 1.7; max-width: none; }
.article ul, .article ol { padding-left: 1.3em; margin: 0 0 var(--space-4); }
.article li { margin-bottom: var(--space-2); }
.article sup a { text-decoration: none; font-size: 0.75em; }
.breadcrumb { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--color-text-muted); }
.article-meta { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.article-meta a { color: var(--color-text-muted); }
.answer-box { background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.answer-box p:last-child { margin-bottom: 0; }
.guide-callout { background: var(--color-accent-tint); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 14px; margin: 0 0 var(--space-4); font-size: 15px; line-height: 1.5; }
.guide-callout p { margin: 0; }
.guide-callout .callout-cta { font-weight: 600; white-space: nowrap; }
.guide-callout .callout-alt { display: inline; margin-top: 0; }
.guide-callout .callout-alt::before { content: " "; }
.answer-meta { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-2); }
.note-box { background: #FFF8EC; border: var(--border-w) solid #F0DDB8; border-radius: var(--radius); padding: var(--space-3) var(--space-4); font-size: var(--fs-small); }
.table-wrap { overflow-x: auto; margin: var(--space-4) 0 var(--space-5); }
.article-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.article-table th { text-align: left; font-weight: 600; border-bottom: 2px solid var(--color-border); padding: var(--space-2); }
.article-table td { border-bottom: var(--border-w) solid var(--color-border); padding: var(--space-2); vertical-align: top; }
.rating { display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1.5px solid currentColor; }
.rating-review { color: var(--chip-review); }
.rating-consider { color: var(--chip-consider); }
.rating-clear { color: var(--chip-clear); }
.sources { font-size: var(--fs-small); }
.sources li { word-break: break-word; }
.changelog { font-size: var(--fs-small); }
.author-box { margin-top: var(--space-7); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius); font-size: var(--fs-small); }
.author-box .author-name { font-family: var(--font-heading); font-weight: 600; font-size: 16px; margin-bottom: var(--space-2); color: var(--color-text-primary); }
.author-box p { color: var(--color-text-muted); }
.article-cta { margin-top: var(--space-7); padding: var(--space-5); border-radius: var(--radius); background: var(--color-accent); color: #fff; text-align: center; }
.article-cta h2 { color: #fff; margin-top: 0; font-size: 22px; }
.article-cta p { color: rgba(255,255,255,.88); margin-left: auto; margin-right: auto; max-width: 60ch; }
.article-cta .btn { background: #fff; color: var(--color-accent); margin-top: var(--space-2); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }
.guide-card { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: var(--color-text-primary); }
.guide-card:hover { border-color: var(--color-accent); }
.guide-card-name { font-family: var(--font-heading); font-weight: 600; font-size: 17px; }
.guide-card-wait { font-size: var(--fs-small); color: var(--color-text-muted); }
.related-list { font-size: var(--fs-small); }
.article .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: 4px; padding: 0 4px; }
.feedback-form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.feedback-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: var(--fs-small); }
.feedback-form fieldset { border: var(--border-w) solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.feedback-form legend { font-weight: 600; font-size: var(--fs-small); padding: 0 6px; }
.feedback-form fieldset label { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; padding: 4px 0; }
.feedback-form input[type=text], .feedback-form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: var(--border-w) solid var(--color-border); border-radius: 8px; background: #fff; }
.fb-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); }
.fb-privacy { font-size: var(--fs-small); color: var(--color-text-muted); }
.feedback-form .btn { align-self: flex-start; }
.question-list { list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-5); }
.question-list li { border-top: var(--border-w) solid var(--color-border); padding: var(--space-3) 0; margin: 0; }
.question-list li:last-child { border-bottom: var(--border-w) solid var(--color-border); }
.question-list a { font-family: var(--font-heading); font-weight: 600; font-size: 17px; text-decoration: none; }
.table-note { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: calc(-1 * var(--space-3)); }
.article .question-list { padding-left: 0; }
.scale-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.feedback-form label > span { display: block; }
.about-intro { display: flex; gap: var(--space-5); align-items: center; margin: var(--space-4) 0 var(--space-5); }
.about-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 3px solid #fff; box-shadow: 0 6px 20px rgba(30,34,41,.12); }
.about-lede { font-family: var(--font-heading); font-size: 21px; line-height: 1.45; color: var(--color-text-primary); }
@media (max-width: 600px) { .about-intro { flex-direction: column; text-align: center; } }
.author-box { display: flex; gap: var(--space-4); align-items: flex-start; }
.author-photo { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; }
.about-intro picture { flex: 0 0 160px; width: 160px; height: 160px; display: block; } .about-intro picture img { width: 160px; height: 160px; }
.footer-chd { text-align: center; margin: var(--space-3) auto 0; max-width: none; font-size: var(--fs-small); } .footer-chd a { font-weight: 600; color: var(--color-text-primary); white-space: nowrap; }
.footer-copy { text-align: center; margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.footer-social { text-align: center; margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--color-text-muted); } .footer-social a { color: var(--color-text-muted); }

/* Hero trust strip and quick links */
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 16px 0 0; color: var(--color-text-muted); font-size: var(--fs-small); }
.hero-trust li::before { content: "\2713"; color: var(--color-accent); font-weight: 600; margin-right: 6px; }
.hero-links { margin-top: 8px; font-size: var(--fs-small); }

/* At a glance */
.glance-list { display: grid; gap: 10px; max-width: 760px; margin: var(--space-4) 0 0; }
.glance-list > div { display: grid; grid-template-columns: minmax(110px, 0.3fr) 1fr; gap: var(--space-3); padding: 12px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.glance-list dt { font-weight: 600; }
.glance-list dd { margin: 0; }
@media (max-width: 560px) { .glance-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* Founder proof */
.founder-proof { display: flex; align-items: flex-start; gap: var(--space-3); max-width: 760px; margin: var(--space-6) auto 0; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.founder-proof img { border-radius: 50%; flex: 0 0 auto; }
.founder-proof p { margin: 0; }
.founder-proof .methodology-proof { margin-top: 8px; font-size: var(--fs-small); color: var(--color-text-muted); }

/* Pricing add-on line and popular guides */
.price-addon { font-size: var(--fs-small); color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-3); }
.topic-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: var(--space-5); font-size: var(--fs-small); }
.topic-links span { color: var(--color-text-muted); }

/* Phones: email field and button stack full width */
@media (max-width: 480px) {
  .signup-row { flex-direction: column; width: 100%; }
  .signup-row input[type="email"], .signup-row .btn { width: 100%; }
}

/* Long URLs and file names in guides wrap instead of pushing the page sideways on phones */
.article a, .article .code, .code { overflow-wrap: anywhere; }

/* Feedback form: fields shrink to fit, and stack on phones */
.fb-row > label { min-width: 0; }
.fb-row input { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 480px) { .fb-row { grid-template-columns: 1fr; } }

/* ============================================
   Homepage visual refresh (Oct 2026)
   Additive. New classes only, plus a few homepage-scoped tweaks.
   Palette: brand teal, deep teal for dark bands, and blue and plum
   as icon-tile hues that are NOT used for ratings, so Clear / Consider /
   Review colors keep a single meaning.
   ============================================ */
:root {
  --color-deep: #0B3D38;
  --color-deep-text: #E4F1EE;
  --color-tint: #EEF5F3;
  --tile-teal-bg: #E8F1EF;   --tile-teal-ink: #0E6E64;
  --tile-blue-bg: #E6EDF5;   --tile-blue-ink: #2F5D8A;
  --tile-plum-bg: #EEE8F3;   --tile-plum-ink: #70497D;
  --tint-consider: #FBF1DD;
  --tint-review: #FBE9E6;
}

.band-tint { background: var(--color-tint); }
.band-dark { background: var(--color-deep); color: var(--color-deep-text); border-top-color: var(--color-deep); }
.band-dark h2, .band-dark h3 { color: #fff; }

.section-intro { color: var(--color-text-muted); max-width: var(--measure-wide); margin-bottom: var(--space-6); }

/* ---- Hero report card: tally + colored values ---- */
.report-tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-3);
}
.tally {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 8px;
  border-radius: 6px;
  border-top: 4px solid currentColor;
}
.tally-num { font-family: var(--font-heading); font-weight: 600; font-size: 26px; line-height: 1.1; }
.tally-label { font-size: 13px; font-weight: 600; }
.tally-clear { color: var(--chip-clear); background: var(--color-accent-tint); }
.tally-consider { color: var(--chip-consider); background: var(--tint-consider); }
.tally-review { color: var(--chip-review); background: var(--tint-review); }
.report-field-row .val { font-weight: 600; }
.report-field-row .val-review { color: var(--chip-review); }
.report-field-row .val-consider { color: var(--chip-consider); }
.report-field-row .val-clear { color: var(--chip-clear); }

/* ---- Dark trust band ---- */
.trust-band { padding: 20px 0; }
.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
}
.trust-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.trust-list svg { width: 22px; height: 22px; flex: 0 0 auto; color: #8FD1C6; }
@media (max-width: 899px) {
  .trust-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .trust-list { grid-template-columns: 1fr; }
}

.problem { padding: 36px 0 28px; }
.price-footnote {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.programs-note {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
}
.programs-note a { font-weight: 600; }

/* ---- How it works: circled step numbers, platform chips ---- */
.how-it-works .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent-tint);
  border: 1px solid #BFDCD6;
  margin-bottom: var(--space-3);
}
.platform-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  max-width: 700px; /* five chips on the first row and four on the second, never one alone */
  margin: var(--space-6) auto 0;
  padding: 0;
}
.platform-chips li {
  padding: 6px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
}
.platform-chips + .platforms-supported { margin-top: var(--space-4); }

/* ---- Icon tiles shared by categories, industries, benefits ---- */
.cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--tile-teal-bg);
  color: var(--tile-teal-ink);
  flex: 0 0 auto;
}
.cat-icon svg { width: 24px; height: 24px; }

/* ---- Category grid ---- */
.category-grid, .industry-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.category-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (min-width: 960px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }
.category-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}
.category-card .cat-icon { margin-bottom: var(--space-3); }
.category-card h3 { margin-bottom: var(--space-2); }
.category-card p { margin: 0; font-size: var(--fs-small); max-width: none; }
.category-card .cat-covers { color: var(--color-text-primary); }
.category-card .cat-not {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.category-card .cat-not strong { color: var(--color-text-primary); font-weight: 600; }
.category-card:nth-child(3n+2) .cat-icon { background: var(--tile-blue-bg); color: var(--tile-blue-ink); }
.category-card:nth-child(3n+3) .cat-icon { background: var(--tile-plum-bg); color: var(--tile-plum-ink); }
.category-clear { background: var(--color-accent); border-color: var(--color-accent); }
.category-clear h3, .category-clear .cat-covers { color: #fff; }
.category-clear .cat-icon { background: rgba(255,255,255,0.16); color: #fff; }
.category-clear.category-card:nth-child(n) .cat-icon { background: rgba(255,255,255,0.16); color: #fff; }

/* ---- Industry cards ---- */
.industry-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (min-width: 960px) { .industry-grid { grid-template-columns: repeat(3, 1fr); } }
.industry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  height: 100%;
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: border-color var(--motion-fast), background-color var(--motion-fast);
}
.industry-card:hover { border-color: var(--color-accent); background: var(--color-surface); }
.industry-card .cat-icon { margin-bottom: var(--space-2); }
.industry-grid li:nth-child(3n+2) .cat-icon { background: var(--tile-blue-bg); color: var(--tile-blue-ink); }
.industry-grid li:nth-child(3n+3) .cat-icon { background: var(--tile-plum-bg); color: var(--tile-plum-ink); }
.industry-name { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
.industry-desc { color: var(--color-text-muted); font-size: var(--fs-small); flex-grow: 1; }
.industry-link { margin-top: var(--space-2); color: var(--color-accent); font-weight: 600; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Benefits: tinted icon tiles, tinted featured card ---- */
.benefit-featured { background: var(--color-surface); border-top: 4px solid var(--color-accent); }
.benefit-featured svg {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 12px;
  background: var(--tile-teal-bg);
  color: var(--tile-teal-ink);
}
.benefits .benefit-list { border-top: none; }
.benefits .benefit-list li { border-bottom: none; padding: var(--space-3) 0; }
.benefits .benefit-list li svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  margin: 0 var(--space-1) 0 0;
  border-radius: 10px;
  background: var(--tile-teal-bg);
  color: var(--tile-teal-ink);
}
.benefits .benefit-list li:nth-child(3n+2) svg { background: var(--tile-blue-bg); color: var(--tile-blue-ink); }
.benefits .benefit-list li:nth-child(3n+3) svg { background: var(--tile-plum-bg); color: var(--tile-plum-ink); }

/* ---- Final CTA on the dark band ---- */
.final-cta.band-dark .risk-reversal { color: var(--color-deep-text); }
.final-cta.band-dark .signup-privacy { color: #B9D3CE; }
.final-cta.band-dark .signup-privacy a { color: #fff; }
.final-cta.band-dark .selected-tier-pill { color: #8FD1C6; }
.final-cta.band-dark .signup-row input[type="email"] { border-color: transparent; }
.final-cta.band-dark .signup-row input[type="email"]:focus { border-color: #8FD1C6; }
.final-cta.band-dark .btn-primary { background: #fff; color: var(--color-deep); }
.final-cta.band-dark .btn-primary:hover { background: var(--color-tint); }
.final-cta.band-dark :focus-visible,
.trust-band :focus-visible { outline-color: #fff; }

/* Bug fix: on phones the signup row stacks vertically, but the email input kept
   flex: 1 1 220px, so its 220px basis became a 220px tall box. Size it to content. */
@media (max-width: 480px) {
  .signup-row input[type="email"] { flex: 0 0 auto; }
}

/* Phones: tighter category cards so eight stacked cards don't run long */
@media (max-width: 640px) {
  .category-card { padding: var(--space-3) var(--space-4); }
  .category-card .cat-icon { width: 36px; height: 36px; margin-bottom: var(--space-2); }
  .category-card .cat-icon svg { width: 20px; height: 20px; }
  .category-card .cat-not { margin-top: var(--space-2); padding-top: var(--space-2); }
  .trust-list { gap: var(--space-3); }
}

/* ---- Upload vs connect comparison ---- */
.compare-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 860px) { .compare-grid { grid-template-columns: 1fr 1fr; } }
.compare-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.compare-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.compare-head h3 { margin: 0; }
.compare-card ul { list-style: none; margin: 0; padding: 0; }
.compare-card li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) 28px;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
}
.compare-card li:first-child { border-top: none; }
.compare-card li::before { position: absolute; left: 0; top: 8px; font-weight: 600; }
.compare-other { background: var(--color-bg); }
.compare-other li { color: var(--color-text-muted); }
.compare-other li::before { content: "\2022"; color: var(--color-text-muted); left: 6px; }
.compare-other .cat-icon { background: var(--tile-blue-bg); color: var(--tile-blue-ink); }
.compare-us { border-top: 4px solid var(--color-accent); }
.compare-us li::before { content: "\2713"; color: var(--color-accent); }
.compare-note { margin: var(--space-5) 0 0; color: var(--color-text-muted); font-size: var(--fs-small); max-width: var(--measure-wide); }

/* ============================================
   Site-wide consistency (Oct 2026)
   Brings article, legal, guide, and form pages in line with the homepage:
   a tinted title band, deep-teal call-to-action blocks, card-style lists,
   and tinted table headers. Rating colors keep their single meaning.
   ============================================ */

/* Full-width tinted band behind a page's title block */
.article-head,
.legal-head {
  background: var(--color-tint);
  box-shadow: 0 0 0 100vmax var(--color-tint);
  clip-path: inset(0 -100vmax);
  padding: var(--space-6) 0 var(--space-5);
  margin-bottom: var(--space-5);
}
.article-head { margin-top: calc(-1 * var(--space-7)); }
.legal-head { margin-top: calc(-1 * var(--space-8)); }
.article-head .breadcrumb { margin-bottom: var(--space-3); }
.article-head h1, .legal-head h1 { margin-top: 0; margin-bottom: var(--space-2); }
.article-head .article-meta { margin-bottom: 0; }
.legal-doc .legal-head .updated { margin-bottom: 0; }
@media (max-width: 640px) {
  .article-head, .legal-head { padding: var(--space-5) 0 var(--space-4); }
}

/* Deep-teal call-to-action, matching the homepage's dark bands */
.article-cta { background: var(--color-deep); }
.article-cta p { color: var(--color-deep-text); }
.article-cta .btn { background: #fff; color: var(--color-deep); }
.article-cta .btn:hover { background: var(--color-tint); }

/* Tables: tinted header row, teal rule */
.article-table thead th { background: var(--color-tint); border-bottom: 2px solid var(--color-accent); }
.article-table tbody tr:last-child td { border-bottom-color: var(--color-border); }

/* Guides index: questions as cards, like the homepage's category and industry cards */
.question-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.question-list li,
.question-list li:last-child {
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 0;
  transition: border-color var(--motion-fast);
}
.question-list li:hover { border-color: var(--color-accent); }
.question-list a { display: block; padding: var(--space-3) var(--space-4); line-height: 1.35; }

/* Platform export guide cards: same hover and accent as the rest */
.guide-card { border-top: 3px solid var(--color-accent); }

/* Answer boxes and author boxes read as cards on the tinted/plain page */
.answer-box { box-shadow: 0 1px 0 rgba(30,34,41,.03); }

/* Forms (feedback pages): consistent field styling */
.feedback-form input[type="text"], .feedback-form textarea, .feedback-form select {
  font-family: var(--font-body);
  border: var(--border-w) solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
}
.feedback-form input:focus-visible, .feedback-form textarea:focus-visible, .feedback-form select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* ============================================
   Platform icons (generic illustrations in the site's own style, shared sprite)
   ============================================ */
.plat { width: 22px; height: 22px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.plat-sm { width: 18px; height: 18px; }
.plat-chip { width: 18px; height: 18px; margin-right: 8px; }
.plat-card { width: 34px; height: 34px; margin-bottom: var(--space-2); }
.plat-h1 { width: 0.78em; height: 0.78em; margin-right: 0.3em; vertical-align: -0.04em; }
.plat-inline { margin-right: 8px; vertical-align: -4px; }
.platform-chips li { display: inline-flex; align-items: center; }
.guide-card .plat-card { align-self: flex-start; }
.footer-marks { max-width: var(--measure-wide); font-size: 12.5px; color: var(--color-text-muted); }

/* ---- Hero sample card: category label ---- */
.report-cat-label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted); margin: var(--space-3) 0 2px;
}

/* ---- Homepage demo: each profile item paired with its report finding ---- */
.demo-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-deep); color: var(--color-deep-text);
  border-radius: var(--radius); margin-bottom: var(--space-4);
}
.demo-bar-text strong { color: #fff; }
.pill {
  display: inline-block; flex: 0 0 auto;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.5;
  color: #fff; text-transform: uppercase;
}
.pill-review { background: var(--chip-review); }
.pill-consider { background: var(--chip-consider); }
.pill-clear { background: var(--chip-clear); }
.demo-bar .pill-review { background: #C4463B; color: #fff; }

.finding-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 860px) { .finding-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
.finding-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--color-bg);
  border: var(--border-w) solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.finding-review { border-left-color: var(--chip-review); background: linear-gradient(to right, var(--tint-review) 0, var(--color-bg) 34%); }
.finding-consider { border-left-color: var(--chip-consider); }
.finding-clear { border-left-color: var(--chip-clear); background: var(--color-accent-tint); }
.finding-source { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); }
.finding-quote {
  margin: 0; padding: 0 0 0 var(--space-3);
  border-left: 2px solid var(--color-border);
  font-size: 15px; line-height: 1.5; color: var(--color-text-primary); font-style: italic;
}
.finding-verdict { display: flex; align-items: center; gap: 10px; margin-top: var(--space-2); font-size: 15px; }
.finding-verdict strong { font-family: var(--font-heading); font-weight: 600; font-size: 17px; }
.finding-reason, .finding-fix { margin: 0; font-size: var(--fs-small); max-width: none; }
.finding-reason { color: var(--color-text-muted); }
.finding-fix strong { font-weight: 600; }
@media (max-width: 480px) { .demo-bar { align-items: flex-start; flex-direction: column; gap: var(--space-2); } }

/* ============================================
   Pricing refinements, coming-soon card, organizations page (Oct 2026)
   ============================================ */
.price-note { margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--color-text-primary); }
.price-note strong { font-weight: 600; }

.coming-soon {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
  margin: var(--space-6) 0 var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-w) dashed #9DB8B3;
  border-radius: var(--radius);
}
@media (min-width: 860px) { .coming-soon { grid-template-columns: 1.35fr 1fr; gap: var(--space-6); } }
.coming-soon-tag {
  display: inline-block; margin-bottom: var(--space-2);
  padding: 3px 11px; border-radius: 999px;
  background: var(--tint-consider); color: var(--ink-consider, #7A4E06);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.coming-soon h3 { margin: 0 0 var(--space-2); }
.coming-soon p { margin: 0; font-size: var(--fs-small); max-width: none; color: var(--color-text-muted); }
.coming-soon p strong { color: var(--color-text-primary); font-weight: 600; }
.coming-soon-form { margin: 0; }
.coming-soon-form .signup-privacy { margin-left: 0; margin-right: 0; text-align: left; }
.org-link { margin: 0 0 var(--space-5); font-size: var(--fs-small); color: var(--color-text-muted); }
.org-link a { font-weight: 600; }

/* Organizations page */
.org-hero-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); margin: var(--space-4) 0;
  background: var(--tint-consider); border-left: 4px solid var(--chip-consider);
  border-radius: 6px; font-size: var(--fs-small);
}
.org-hero-note p { margin: 0; max-width: none; }
.pack-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
@media (min-width: 720px) { .pack-grid { grid-template-columns: repeat(3, 1fr); } }
.pack-card {
  background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  border-top: 4px solid var(--color-accent); border-radius: var(--radius);
  padding: var(--space-4); text-align: left;
}
.pack-card.pack-featured { background: var(--color-accent-tint); }
.pack-card h3 { margin: 0 0 var(--space-1); font-size: var(--fs-h3); }
.pack-price { font-family: var(--font-heading); font-weight: 600; font-size: 34px; line-height: 1.1; margin: var(--space-2) 0 2px; }
.pack-each { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.pack-save { display: inline-block; margin-top: var(--space-2); font-size: 12.5px; font-weight: 600; color: var(--color-accent); }
.org-steps { counter-reset: step; list-style: none; padding: 0; margin: var(--space-3) 0; }
.org-steps li { counter-increment: step; position: relative; padding: 0 0 var(--space-3) 44px; margin: 0; }
.org-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-accent-tint); color: var(--color-accent); font-weight: 600; text-align: center; line-height: 30px;
}
.org-form { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-5); background: var(--color-tint); border-radius: var(--radius); }
.org-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: var(--fs-small); }
.org-form input, .org-form select, .org-form textarea {
  font-family: var(--font-body); font-size: 16px; padding: 10px 12px;
  border: var(--border-w) solid var(--color-border); border-radius: 6px; background: var(--color-surface);
}
.org-form .signup-success { display: none; }

/* ============================================
   Post-signup export links
   ============================================ */
.signup-exports { display: block; margin-top: var(--space-2); }
.signup-exports a { display: inline-block; margin: 0 var(--space-3) var(--space-1) 0; font-weight: 600; white-space: nowrap; }
.centered-form .signup-exports a { margin: 0 var(--space-2) var(--space-1); }

/* ============================================
   How your data moves
   ============================================ */
.data-flow { margin: var(--space-6) 0 var(--space-4); }
.data-flow h3 { margin: 0 0 var(--space-3); }
.data-flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; counter-reset: flow; }
.data-flow-steps li { position: relative; padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 40px); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius); }
.data-flow-steps li::before { counter-increment: flow; content: counter(flow); position: absolute; left: var(--space-3); top: var(--space-3); width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent); color: #fff; font-weight: 700; font-size: 14px; line-height: 26px; text-align: center; }
.data-flow-steps strong { display: block; margin-bottom: 2px; }
.data-flow-steps p { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.data-flow-steps li.flow-end { border-color: var(--color-accent); background: var(--color-accent-tint); }
@media (min-width: 1000px) {
  .data-flow-steps { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
  .data-flow-steps li { padding: calc(var(--space-3) + 34px) var(--space-3) var(--space-3); }
  .data-flow-steps li::before { left: var(--space-3); top: var(--space-3); }
  .data-flow-steps li:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * var(--space-4)); top: 28px; width: var(--space-4); height: 2px; background: var(--color-accent); opacity: .55; }
}

/* ============================================
   Pricing options (one graphic, four options)
   ============================================ */
.options { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.options-group { display: flex; flex-direction: column; min-width: 0; }
.options-label { margin: 0 0 var(--space-2); font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.01em; }
.options-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; flex: 1; }
@media (min-width: 900px) { .options-individual .options-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) { .option-primary { order: -1; } }
.option-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-5) var(--space-4) var(--space-4);
}
.option-card h3 { margin: var(--space-2) 0 0; }
.option-primary { border: 2px solid var(--color-accent); }
.option-amount { font-family: var(--font-heading); font-size: 34px; font-weight: 600; margin: var(--space-2) 0; line-height: 1.15; }
.option-amount-quiet { font-size: 20px; color: var(--color-text-muted); font-weight: 500; }
.option-card .best-for { color: var(--color-text-muted); font-size: var(--fs-small); margin-bottom: var(--space-3); }
.option-card ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; flex-grow: 1; }
.option-card li { padding: var(--space-2) 0; border-top: var(--border-w) solid var(--color-border); font-size: var(--fs-small); color: var(--color-text-muted); }
.option-card li:first-child { border-top: none; }
.option-card > .btn { text-align: center; }
.option-card .price-addon { margin: 0 0 var(--space-3); }
.option-soon { background: var(--color-bg); }
.option-tag {
  align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--color-accent-tint); color: var(--color-accent);
}
.option-tag-quiet { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); }
.option-form { margin: 0; }
.option-form .signup-row { flex-direction: column; }
.option-form .signup-row input[type="email"] { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
.option-form .signup-row .btn { width: 100%; }
.option-form .signup-privacy { margin: var(--space-2) 0 0; text-align: left; }

/* ============================================
   Compact chips (categories, field guides)
   ============================================ */
.chip-list { list-style: none; margin: var(--space-4) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-list li, .chip-list a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px;
  font-size: var(--fs-small); font-weight: 600; color: var(--color-text-primary); text-decoration: none;
}
.chip-list li a { padding: 0; border: 0; background: none; }
.chip-list.chip-links li { padding: 0; border: 0; background: none; }
.chip-list.chip-links li a { padding: 6px 14px 6px 8px; background: var(--color-bg); border: 1px solid var(--color-border); }
.chip-list.chip-links li a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.chip-list .cat-icon { width: 28px; height: 28px; border-radius: 8px; }
.chip-list .cat-icon svg { width: 16px; height: 16px; }
.chip-list li:nth-child(3n+2) .cat-icon { background: var(--tile-blue-bg); color: var(--tile-blue-ink); }
.chip-list li:nth-child(3n+3) .cat-icon { background: var(--tile-plum-bg); color: var(--tile-plum-ink); }
.categories .section-intro, .industries .section-intro { margin-bottom: 0; }
.founder { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.founder .founder-proof { margin-top: 0; }
.faq-more { margin-top: var(--space-4); font-size: var(--fs-small); }

/* Three findings instead of four */
@media (min-width: 860px) { .finding-grid { grid-template-columns: 1fr; } }
@media (min-width: 1000px) { .finding-grid { grid-template-columns: repeat(3, 1fr); } }
.problem-text p { max-width: var(--measure-wide); }

/* Packs sit under the three individual options as one slim strip */
.options-programs .option-org { padding: var(--space-4); }
.options-programs .option-org .option-org-main .option-tag { margin-bottom: var(--space-1); display: inline-block; }
.options-programs .option-org h3 { margin-top: var(--space-1); }
.options-programs .option-org .best-for { margin-bottom: 0; }
@media (min-width: 900px) {
  .options-programs .option-org { display: grid; grid-template-columns: 1.4fr 1.3fr auto; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); }
  .options-programs .option-org ul { margin: 0; }
}

/* ============================================
   Prepaid packs: buying
   ============================================ */
[data-when][hidden] { display: none !important; }
.pack-buy { display: block; width: 100%; margin-top: var(--space-3); text-align: center; }
.org-consent { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-small); }
.org-consent input { margin-top: 3px; accent-color: var(--color-accent); width: 16px; height: 16px; flex-shrink: 0; }
.org-error { color: #B3382E; font-weight: 600; font-size: var(--fs-small); min-height: 1.2em; margin: 0 0 var(--space-3); }
.org-thanks { border-color: var(--color-accent); }

/* On-ramp box on the export guides: the next step for someone who is downloading an export for a job search. */
.onramp { background: var(--color-accent-tint); border: var(--border-w) solid var(--color-accent); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); }
.onramp p { margin: 0 0 var(--space-2); line-height: 1.55; }
.onramp .onramp-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--color-deep, var(--color-accent)); }
.onramp .onramp-actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; margin: var(--space-3) 0 0; }
.onramp .onramp-actions a:not(.btn) { font-weight: 600; }
/* A smaller version used inside long guides. */
.midcta { border-left: 3px solid var(--color-accent); background: var(--color-accent-tint); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-3) var(--space-4); margin: var(--space-5) 0; font-size: 15px; line-height: 1.55; }
.midcta p { margin: 0; }
.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 28px; margin-bottom: var(--space-2); }
.checklist li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border: 2px solid var(--color-accent); border-radius: 3px; }

/* Go-live: single CTA buttons */
.hero-actions { margin: 0 0 var(--space-3, 12px); }
.btn-lg { font-size: 1.125rem; padding: 16px 32px; }

/* Two-path hero: one dominant action, one clear text link */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px) var(--space-5, 24px); }
.hero-alt-link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.callout-alt { display: block; margin-top: 6px; }

/* Export-return reminder box (remind.js) */
.remind-box { border: var(--border-w, 1px) solid var(--color-border, #D5DCDA); border-radius: var(--radius); background: var(--color-surface, #fff); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; }
.remind-box h3 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.remind-box p { margin: 0 0 var(--space-3); font-size: 15px; line-height: 1.55; }
.remind-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin: 0 0 var(--space-3); }
.remind-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; }
.remind-field label { font-weight: 600; font-size: 14px; }
.remind-field input, .remind-field select { font: inherit; padding: 10px 12px; border: 1px solid var(--color-border, #B9C3C0); border-radius: 8px; background: #fff; color: inherit; min-height: 44px; }
.remind-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 0 0 var(--space-3); }
.remind-consent input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-accent); }
.remind-turnstile { margin: 0 0 var(--space-3); }
.remind-status { min-height: 1.3em; margin: var(--space-2) 0 0 !important; font-size: 14px !important; }
.remind-bad { color: #B3382E; font-weight: 600; }

.next-step { margin: var(--space-3) 0 var(--space-4); font-size: var(--fs-base, 1rem); }

/* Archive vs. public profile guide: CTA links on the dark band, and a comparison table that stacks on phones */
.article-cta .onramp-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: center; align-items: center; }
.article-cta .onramp-actions a:not(.btn) { color: #fff; font-weight: 600; }
.article-table tbody th { font-weight: 600; border-bottom: var(--border-w) solid var(--color-border); padding: var(--space-2); vertical-align: top; text-align: left; }
@media (max-width: 640px) {
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: 100%; }
  .compare-table tr { border: var(--border-w) solid var(--color-border); border-radius: var(--radius); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface, #fff); }
  .compare-table tbody th { border-bottom: none; padding: 0 0 var(--space-2); font-size: 15px; }
  .compare-table td { border-bottom: none; padding: 0 0 var(--space-2); }
  .compare-table td::before { content: attr(data-label); display: block; font-weight: 600; font-size: 13px; color: var(--color-text-muted); margin-bottom: 2px; }
}

/* Getting-started page (/start) */
.article-lead { font-size: 18px; line-height: 1.55; color: var(--color-text-primary); margin: var(--space-3) 0 0; max-width: 60ch; }
.start-grid { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 720px) { .start-grid { grid-template-columns: 1fr 1fr; } }
.start-card { border: var(--border-w) solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--color-surface, #fff); margin: 0; }
.start-card.is-requested { border-color: var(--color-accent); background: var(--color-accent-tint); }
.start-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.start-card-top strong { font-size: 17px; }
.start-wait { flex-basis: 100%; font-size: 13px; color: var(--color-text-muted); margin-top: -4px; }
.start-card p { margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.5; }
.start-links a { font-weight: 600; margin-right: 14px; display: inline-block; padding: 4px 0; }
.start-check { display: flex; align-items: center; gap: 8px; margin-top: var(--space-2); font-weight: 600; cursor: pointer; min-height: 32px; }
.start-check input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.start-note { font-weight: 400; font-size: 13px; color: var(--color-text-muted); }
.start-summary { font-size: 14px; color: var(--color-text-muted); min-height: 1em; }
.cal-box { border: var(--border-w) solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.cal-box h3 { margin-top: 0; font-size: 17px; }
.cal-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-row select { font: inherit; padding: 8px 10px; border: var(--border-w) solid var(--color-border); border-radius: 6px; }
.start-return { margin-top: var(--space-4); }
.hero-actions .btn-secondary { margin-left: 0; }
.hero-start-note { font-size: 14.5px; color: var(--color-text-muted); margin: 8px 0 0; }

.article ul.start-grid { padding-left: 0; margin-left: 0; }
.article ul.start-grid > li { margin: 0; }
/* ---- pricing alignment, packs strip, short data flow ---- */
.options-individual .options-row { align-items: stretch; }
.option-card > .option-tag { align-self: flex-start; }
.option-tag-rec { background: var(--color-accent); color: var(--color-text-on-accent); }
.option-card .price-footnote { margin: 0 0 var(--space-3); }
.option-card > .btn { margin-top: auto; width: 100%; box-sizing: border-box; padding: 14px 20px; border-width: 2px; border-style: solid; border-color: transparent; }
.option-card > .btn-secondary { border-color: var(--color-accent); }
.programs-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius); font-size: var(--fs-body, 16px); color: var(--color-text-primary); }
.programs-note p { margin: 0; flex: 1 1 320px; max-width: none; text-wrap: balance; }
.programs-note .btn { padding: 10px 18px; white-space: nowrap; }
.data-flow-note { margin: var(--space-3) 0 0; max-width: var(--measure-wide); font-size: var(--fs-small); color: var(--color-text-muted); }
@media (min-width: 1000px) { .data-flow-steps { grid-template-columns: repeat(3, 1fr); } }
.options-org .programs-note { margin: 0; padding: var(--space-4); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius); font-size: var(--fs-small); color: var(--color-text-muted); }
.options-org .programs-note strong { color: var(--color-text-primary); }
.options-org .programs-note .btn { padding: 14px 24px; border: 2px solid var(--color-accent); }
/* final-54: export-guide end box leads with the checklist, keeps a plain "I have the ZIP" link */
.article-cta .cta-row { margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-4); }
.article-cta .cta-row .btn { margin-top: 0; }
.article-cta .cta-alt { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.article-cta .cta-alt:hover { color: #fff; text-decoration-thickness: 2px; }

/* final-60: one reminder for several platforms */
.remind-platforms { border: 0; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.remind-platforms legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; width: 100%; }
.remind-plat { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; min-height: 32px; }
.remind-plat input { width: 18px; height: 18px; }
/* final-60: /start buy-now card and scan remainder line */
.prepay-card { border: 1px solid var(--color-border, #B9C3C0); border-radius: 12px; padding: 18px 20px; margin: 24px 0; background: #fff; }
.prepay-card h2 { margin-top: 0; }
.remainder-note { margin-top: 14px; }
.org-callout { margin-top: 14px; font-size: 14.5px; color: var(--muted, #5A6270); }

/* final-64: preview Clear items folded */
.clear-items-group { margin-top: 12px; }
.clear-items-group > summary { cursor: pointer; font-weight: 600; color: var(--color-text-muted, #5A6270); padding: 8px 0; }

/* ---- Evidence band: four sourced numbers that tell one story ---- */
.evidence { padding: 72px 0 64px; }
.evidence h2 { margin-bottom: var(--space-5); }
.evidence-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.ev-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 20px 18px;
  background: var(--color-bg);
  border: var(--border-w) solid var(--color-border);
  border-top: 4px solid var(--color-text-primary);
  border-radius: var(--radius);
}
.ev-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.ev-num { font-family: var(--font-heading); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -0.01em; color: var(--color-text-primary); margin: 4px 0 2px; white-space: nowrap; }
.ev-card p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--color-text-primary); }
.ev-src { margin-top: auto; padding-top: 10px; font-size: 12.5px; line-height: 1.35; color: var(--color-text-muted); text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 2px; }
.ev-src:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.ev-twist { border-top-color: var(--color-accent); background: var(--color-accent-tint); border-color: #CFE2DE; }
.ev-twist .ev-num, .ev-twist .ev-kicker { color: var(--color-accent); }
.ev-close { margin: var(--space-5) 0 0; max-width: var(--measure-wide); color: var(--color-text-muted); font-size: 17px; }
.ev-close strong { color: var(--color-text-primary); }
@media (max-width: 960px) { .evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .evidence { padding: 48px 0 44px; }
  .evidence-grid { grid-template-columns: 1fr; gap: 10px; }
  .ev-card { display: grid; grid-template-columns: 122px 1fr; column-gap: 14px; row-gap: 4px; padding: 14px 16px; }
  .ev-kicker { grid-column: 1 / -1; }
  .ev-num { grid-column: 1; grid-row: 2 / span 2; font-size: 33px; align-self: start; }
  .ev-card p { grid-column: 2; font-size: 15px; }
  .ev-src { grid-column: 2; padding-top: 2px; }
}

.hero-kicker { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.hero-copy p.hero-kicker { color: var(--color-accent); }

/* Found later (/found-later, guide case blocks, /guides/social-media-check-before-running-for-office) */
.article-wide { max-width: 920px; }
.fl-small { font-size: var(--fs-small); color: var(--color-text-muted); }
.fl-stats { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-2); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.fl-stats li { background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); }
.fl-stat-num { display: block; font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--color-accent); line-height: 1.1; margin-bottom: 4px; }
.fl-stat-txt { font-size: var(--fs-small); }
.fl-list { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-3); }
.fl-card { background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); }
.fl-card[hidden] { display: none; }
.fl-meta { margin: 0 0 6px; font-weight: 600; }
.fl-year { color: var(--color-text-muted); font-weight: 400; }
.fl-tags { margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: 6px; }
.fl-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--color-accent-tint); color: var(--color-accent); }
.fl-tag-field { background: #EEF0F3; color: var(--color-text-muted); }
.fl-tag-manual { background: #FBF1E3; color: var(--chip-consider); }
.fl-dl { margin: 0; display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 4px 12px; font-size: var(--fs-small); }
.fl-dl dt { color: var(--color-text-muted); }
.fl-dl dd { margin: 0; }
.fl-src { margin: var(--space-3) 0 0; font-size: var(--fs-small); }
.fl-fields { margin: var(--space-6) 0; }
.fl-field-grid { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.fl-field-grid li { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-accent-tint); }
.fl-field-tile { display: flex; justify-content: space-between; gap: var(--space-3); text-decoration: none; font-weight: 600; color: inherit; }
.fl-field-n { font-weight: 400; opacity: .75; white-space: nowrap; }
.fl-field-guide { font-size: .9rem; }
.fl-featured { margin: var(--space-6) 0; padding: var(--space-5); border-radius: var(--radius); background: var(--color-accent-tint); }
.fl-featured h2 { margin-top: 0; }
.fl-filters { margin: var(--space-3) 0; }
.fl-filter-label { margin: var(--space-3) 0 6px; font-size: var(--fs-small); font-weight: 600; }
.fl-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-chip { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: var(--border-w) solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); cursor: pointer; }
.fl-chip[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-on-accent); }
.fl-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fl-count { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-3); }
.fl-guide { margin-top: var(--space-6); }
@media (max-width: 560px) { .fl-dl { grid-template-columns: 1fr; } .fl-dl dt { margin-top: 6px; } }
.hero-proof { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-3); }
.hero-proof a { font-weight: 600; }
.article ul.fl-list, .article ul.fl-stats { padding-left: 0; margin-left: 0; }
.article ul.fl-list > li, .article ul.fl-stats > li { margin-left: 0; }
.fl-featured .btn { margin-right: var(--space-3); }

.zip-more { display: inline; font-size: .9em; }
.zip-more summary { display: inline; cursor: pointer; text-decoration: underline; opacity: .8; }
.zip-more p { margin: 6px 0 0; }

/* final-88: hero platform limit, tradeoff block, post-preview upsell */
.hero-limit { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-2); }
.compare-note p { margin: 0 0 var(--space-3); }
.compare-note .btn { margin-right: var(--space-3); }

/* Found Later: field picker as a compact table (replaces the tile grid) */
.fl-field-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: 1rem; }
.fl-field-table th, .fl-field-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--color-border, rgba(0,0,0,.12)); vertical-align: baseline; }
.fl-field-table thead th { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.fl-field-table tbody th { font-weight: 600; }
.fl-field-table th a { text-decoration: none; color: inherit; }
.fl-field-table th a:hover, .fl-field-table th a:focus-visible { text-decoration: underline; }
.fl-field-table td:nth-child(2) { width: 4.5rem; font-variant-numeric: tabular-nums; }
.fl-field-table td:nth-child(3) { width: 7rem; white-space: nowrap; }
.fl-none { opacity: .4; }
@media (max-width: 480px) { .fl-field-table th, .fl-field-table td { padding: 9px 6px; } .fl-field-table td:nth-child(3) { width: 6rem; } }

.likes-line { margin: var(--space-2) 0; }

/* Found Later redesign (final-99) */
.fl-page { --fl-red: #B3382E; --fl-red-tint: #FBE9E6; --fl-amber: #9C6006; --fl-amber-tint: #FBF1DD; --fl-teal: #0E6E64; --fl-teal-tint: #E8F1EF; }
.fl-hero { background: #0B3B36; color: #fff; border-radius: 16px; padding: clamp(24px, 5vw, 48px); margin: var(--space-3) 0 var(--space-3); }
.fl-hero h1 { color: #fff; margin: 0 0 var(--space-2); font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1.05; }
.fl-hero-lead { color: #D6E7E4; font-size: 1.15rem; line-height: 1.5; max-width: 52ch; margin: 0 0 var(--space-4); }
.fl-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.fl-hero-note { color: #B5CFCB; font-size: var(--fs-small); max-width: 36ch; }
.btn-light { background: #fff; color: #0B3B36; }
.btn-light:hover { background: #E8F1EF; color: #0B3B36; }
.fl-tiles { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-6); display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.fl-tile { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); border-radius: 14px; border: 1px solid transparent; }
.fl-tile-num { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 700; line-height: 1; }
.fl-tile-txt { font-size: var(--fs-small); color: var(--color-text-primary); }
.fl-tile-red { background: var(--fl-red-tint); border-color: #F1CFC9; } .fl-tile-red .fl-tile-num { color: var(--fl-red); }
.fl-tile-amber { background: var(--fl-amber-tint); border-color: #EFDDB5; } .fl-tile-amber .fl-tile-num { color: var(--fl-amber); }
.fl-tile-teal { background: var(--fl-teal-tint); border-color: #CBE0DC; } .fl-tile-teal .fl-tile-num { color: var(--fl-teal); }
.fl-meter { display: block; height: 8px; border-radius: 999px; background: rgba(0,0,0,.08); margin-top: auto; overflow: hidden; }
.fl-meter > span { display: block; height: 100%; border-radius: 999px; }
.fl-tile-red .fl-meter > span { background: var(--fl-red); } .fl-tile-amber .fl-meter > span { background: var(--fl-amber); } .fl-tile-teal .fl-meter > span { background: var(--fl-teal); }
.fl-h2 { margin: var(--space-6) 0 var(--space-3); }
.fl-sub { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.fl-ways { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fl-way { display: flex; flex-direction: column; gap: 8px; padding: var(--space-4); border-radius: 14px; border-top: 5px solid; background: var(--color-surface); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.fl-way h3 { margin: 0; font-size: 1.1rem; }
.fl-way p { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); flex-grow: 1; }
.fl-way-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; }
.fl-way-red { border-color: var(--fl-red); } .fl-way-red .fl-way-icon { background: var(--fl-red-tint); color: var(--fl-red); }
.fl-way-amber { border-color: var(--fl-amber); } .fl-way-amber .fl-way-icon { background: var(--fl-amber-tint); color: var(--fl-amber); }
.fl-way-teal { border-color: var(--fl-teal); } .fl-way-teal .fl-way-icon { background: var(--fl-teal-tint); color: var(--fl-teal); }
.fl-way-link { font-weight: 600; text-decoration: none; }
.fl-way-link::after { content: " \2192"; }
.fl-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.fl-bars .fl-bar-row, .fl-bars a { display: grid; grid-template-columns: minmax(130px, 230px) 1fr 2rem; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 10px; text-decoration: none; color: inherit; }
.fl-bars a:hover, .fl-bars a:focus-visible { background: var(--fl-teal-tint); }
.fl-bar-label { font-size: .95rem; font-weight: 600; }
.fl-bar-track { display: block; height: 14px; border-radius: 999px; background: #EEF0F3; overflow: hidden; }
.fl-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0E6E64, #3C9A8F); }
.fl-bar-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.fl-guides { margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fl-guide-chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--fl-teal-tint); color: var(--fl-teal); font-size: .9rem; font-weight: 600; text-decoration: none; }
.fl-guide-chip:hover { background: #D5E8E4; }
.fl-select { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--color-border); background: #fff; max-width: 100%; }
.fl-case { padding: 0; }
.fl-case summary { list-style: none; cursor: pointer; display: grid; gap: 4px; padding: var(--space-3) var(--space-4); }
.fl-case summary::-webkit-details-marker { display: none; }
.fl-case summary::after { content: "Details \25BE"; justify-self: start; font-size: 13px; font-weight: 600; color: var(--fl-teal); margin-top: 2px; }
.fl-case details[open] summary::after { content: "Hide \25B4"; }
.fl-case summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: 12px; }
.fl-case-top { display: flex; align-items: center; gap: 8px; }
.fl-case-year { color: var(--color-text-muted); font-size: 13px; }
.fl-badge { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.fl-badge-red { background: var(--fl-red-tint); color: var(--fl-red); } .fl-badge-amber { background: var(--fl-amber-tint); color: var(--fl-amber); }
.fl-case-role { font-weight: 600; }
.fl-case-line { color: var(--color-text-muted); font-size: var(--fs-small); }
.fl-case-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-case-body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.fl-case-body .fl-dl { margin-top: 0; }
.fl-more { text-align: center; margin: var(--space-3) 0 var(--space-5); }
@media (max-width: 560px) { .fl-bars .fl-bar-row, .fl-bars a { grid-template-columns: 1fr 2rem; } .fl-bar-track { grid-column: 1 / -1; grid-row: 2; } .fl-bar-n { grid-row: 1; grid-column: 2; } }

/* Found Later field and pattern pages */
.fl-h3{font-size:1.05rem;margin:1.5rem 0 .6rem}
.fl-links{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.fl-links a{display:inline-block;padding:.4rem .8rem;border:1px solid var(--line,#d9d6cf);border-radius:999px;background:#fff;color:inherit;text-decoration:none;font-size:.92rem}
.fl-links a:hover{border-color:#0f6b5c;color:#0f6b5c}

.trust-audience{margin:1rem 0 0;text-align:center;font-size:.95rem;opacity:.85}

/* Found Later strip on the landing page (built by docs/found-later/build.py) */


/* Landing: distinct icon hues; static chips (not links) vs bordered arrow chips (links) */
.chip-list li:nth-child(7n+1) .cat-icon { background: #E8F1EF; color: #0E6E64; }
.chip-list li:nth-child(7n+2) .cat-icon { background: #E6EDF5; color: #2F5D8A; }
.chip-list li:nth-child(7n+3) .cat-icon { background: #EEE8F3; color: #70497D; }
.chip-list li:nth-child(7n+4) .cat-icon { background: #FBEBD9; color: #9A5B13; }
.chip-list li:nth-child(7n+5) .cat-icon { background: #F7E3E0; color: #A33B2E; }
.chip-list li:nth-child(7n+6) .cat-icon { background: #E3ECDD; color: #4A6B2F; }
.chip-list li:nth-child(7n+7) .cat-icon { background: #E2E5F5; color: #3F4A9A; }
.chip-list.chip-static li { background: transparent; border-color: transparent; padding-left: 0; padding-right: 10px; cursor: default; }
.chip-list.chip-links li a { text-decoration: none; }
.chip-list.chip-links li a .chip-arrow { color: var(--color-accent); font-weight: 700; margin-left: 2px; }
.chip-list.chip-links li a:hover .chip-arrow { transform: translateX(2px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.platform-matrix { margin: 0; }
.platform-matrix h3 { margin: 0 0 var(--space-3); }
.pm-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.platform-matrix table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.platform-matrix th, .platform-matrix td { padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--color-border); }
.platform-matrix thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); background: var(--color-bg); }
.platform-matrix tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
.platform-matrix tbody th .plat { vertical-align: -4px; margin-right: 8px; }
.platform-matrix tbody tr:last-child th, .platform-matrix tbody tr:last-child td { border-bottom: 0; }
.pm-y { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tile-teal-bg); color: var(--tile-teal-ink); font-weight: 700; font-size: 13px; }
.pm-n { color: #9AA0AA; }
.pm-t { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #FBEBD9; color: #7A4608; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pm-note { margin: var(--space-3) 0 0; font-size: 13.5px; color: var(--color-text-muted); }
@media (max-width: 520px) { .platform-matrix th, .platform-matrix td { padding: 8px 6px; } .platform-matrix table { font-size: 13.5px; } .pm-t { font-size: 11.5px; padding: 2px 6px; white-space: normal; } .platform-matrix thead th { font-size: 11px; } }
@media (max-width: 520px) { .platform-matrix tbody th .plat { display: none; } .platform-matrix tbody th { white-space: normal; } .platform-matrix thead th { letter-spacing: 0; } }

/* ============================================
   Landing polish (8px scale, one section rhythm)
   ============================================ */
body > section:not(.hero):not(.trust-band):not(.founder):not(.final-cta),
main > section:not(.hero):not(.trust-band):not(.founder):not(.final-cta) { padding-top: 80px; padding-bottom: 80px; }
section h2 { margin-bottom: 32px; }
.eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); }

/* Three steps: compact, number inline with the title */
.how-it-works .steps { margin-top: 0; gap: 32px; }
.how-it-works .step { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; row-gap: 8px; align-items: center; }
.how-it-works .step-number { grid-column: 1; grid-row: 1; width: 32px; height: 32px; margin: 0; display: grid; place-items: center; border-radius: 50%; background: var(--tile-teal-bg); font-size: 13px; }
.how-it-works .step h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 20px; line-height: 1.3; }
.how-it-works .step p { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 16px; line-height: 1.55; }

/* Found Later strip: copy left, chart right */
.fl-home-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.fl-home h2 { margin-bottom: 16px; }
.fl-home-lead { margin: 0 0 24px; color: var(--color-text-muted); font-size: 17px; line-height: 1.55; }
.fl-home-stat { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; padding-left: 16px; border-left: 3px solid #B4412F; }
.fl-home-num { font-family: var(--font-heading); font-weight: 700; font-size: 40px; line-height: 1.1; white-space: nowrap; }
.fl-home-stat span:last-child { font-size: 15px; line-height: 1.45; color: var(--color-text-primary); max-width: 240px; }
.fl-home-fields { padding: 32px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 16px; }
.fl-home-fields h3 { margin: 0 0 16px; font-size: 18px; }
.fl-home-top5 { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fl-home-top5 li { display: grid; grid-template-columns: 1fr 28px; gap: 4px 12px; align-items: center; font-size: 15px; }
.fl-top-name { font-weight: 600; grid-column: 1; }
.fl-top-n { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fl-top-track { grid-column: 1 / -1; grid-row: 2; display: block; height: 8px; border-radius: 999px; background: #E4E7EB; overflow: hidden; }
.fl-top-track span { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); }
.fl-home-src { margin: 16px 0 0; font-size: 13.5px; color: var(--color-text-muted); }

/* What we scan: categories left, platform table right */
.scan-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.scan-cats h3, .platform-matrix h3 { font-size: 18px; }
.scan-cats .chip-list { flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0 0 16px; }
.scan-cats .chip-list li { padding: 4px 0; font-size: 16px; }
.scan-note { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--color-text-muted); }
.pm-scroll { background: var(--color-surface); }
.platform-matrix th, .platform-matrix td { padding: 6px 10px; }
.platform-matrix tbody th { font-size: 14.5px; }

/* Field guides: one row of five */
.industries .chip-list { flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }

@media (max-width: 900px) {
  .fl-home-grid, .scan-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  body > section:not(.hero):not(.trust-band):not(.founder):not(.final-cta),
  main > section:not(.hero):not(.trust-band):not(.founder):not(.final-cta) { padding-top: 56px; padding-bottom: 56px; }
  section h2 { margin-bottom: 24px; }
  .fl-home-fields { padding: 24px 20px; }
  .fl-home-num { font-size: 36px; }
  .fl-home-stat { flex-wrap: wrap; gap: 8px 16px; }
}
.scan-grid > *, .fl-home-grid > * { min-width: 0; }

.h1-kicker { display: block; margin-bottom: 12px; font-family: var(--font-body, inherit); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; color: var(--color-accent); }