/* Layout and components. Uses ONLY the tokens from theme.css (no raw colors here).
   Mobile-first: base styles are for small screens; min-width queries add columns. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--color-bg);
  background-image: var(--page-bg-image);
  background-size: var(--page-bg-size, auto);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, .h2, .h3 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--h1-size); }
h2, .h2 { font-size: var(--h2-size); }
h3, .h3 { font-size: var(--h3-size); }
p, ul, ol, dl, table, pre { margin: 0 0 var(--space-4); }
a { color: var(--color-link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.mono, code, pre { font-family: var(--font-mono); }
.small { font-size: 0.875rem; }
.muted { color: var(--color-text-muted); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-2) var(--space-4);
  background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius); }
.skip-link:focus { top: var(--space-2); }
main:focus { outline: none; }

/* Containers */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow, .container.narrow { max-width: var(--container-narrow); }
.narrow-card { max-width: 28rem; }

/* Header */
.site-header { background: var(--color-header-bg); border-bottom: var(--border-width) solid var(--color-border); position: relative; z-index: 10; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.1rem; }
.brand-mark { color: var(--color-accent); flex: none; }
.nav-toggle { display: none; }
.js .nav-toggle {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4);
  font: inherit; color: var(--color-text); background: transparent;
  border: var(--border-width) solid var(--color-border-strong); border-radius: var(--button-radius); cursor: pointer;
}
.site-nav { width: 100%; }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-1); }
.site-nav a { display: block; padding: var(--space-2) 0; color: var(--color-text); text-decoration: none; }
.site-nav a:hover { color: var(--color-link); text-decoration: underline; }
.site-nav a[aria-current="page"]:not(.button) { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav .button { color: var(--color-on-accent); text-decoration: none; display: inline-flex; margin-top: var(--space-2); padding: var(--space-1) var(--space-4); }
.site-nav .button:hover { color: var(--color-on-accent); }

@media (min-width: 62rem) {
  .js .nav-toggle { display: none; }
  .site-nav, .js .site-nav { display: block; width: auto; }
  .site-nav ul { flex-direction: row; align-items: center; gap: var(--space-4); padding: 0; }
  .site-nav a { padding: var(--space-2) 0; font-size: 0.95rem; }
  .site-nav .button { margin-top: 0; }
}

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-5);
  font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  color: var(--color-on-accent); background: var(--color-accent);
  border: var(--border-width) solid var(--color-accent); border-radius: var(--button-radius); cursor: pointer;
}
.button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); text-decoration: none; }
.button-secondary { color: var(--color-link); background: transparent; border-color: var(--color-border-strong); }
.button-secondary:hover { color: var(--color-link); background: var(--color-accent-soft); border-color: var(--color-link); }
.button-small { min-height: 36px; padding: var(--space-1) var(--space-4); font-size: 0.9rem; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.button-danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); }
.button-danger:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }
.text-link { font-weight: 600; }

/* Sections */
.hero { padding: var(--space-7) 0 var(--space-6); background-color: var(--hero-bg, transparent); background-image: var(--hero-bg-image); border-bottom: var(--hero-border); }
.hero-compact { padding: var(--space-6) 0 var(--space-5); }
.hero-inner { max-width: var(--container); }
.hero h1 { max-width: 22em; }
.lede { font-size: 1.15rem; max-width: 40em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.eyebrow {
  font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight);
  text-transform: var(--eyebrow-transform); letter-spacing: var(--eyebrow-tracking);
  color: var(--color-text-muted); margin-bottom: var(--space-2);
}
.section { padding: var(--space-7) 0; }
.section-alt { background: var(--color-surface-alt); border-top: var(--section-alt-border); border-bottom: var(--section-alt-border); }
.section-title { margin-bottom: var(--space-5); }
.cta-band { background: var(--color-accent-soft); text-align: left; }
.cta-inner h2 { margin-bottom: var(--space-2); }

/* Grids */
.grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.split { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 48rem) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Cards */
.card {
  background: var(--color-surface); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--card-shadow);
}
.card > :last-child { margin-bottom: 0; }
.card-muted { background: var(--color-surface-alt); }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.path-card h3 { font-size: var(--h2-size); }
.offer { display: flex; flex-direction: column; }
.offer .offer-cta { margin-top: auto; padding-top: var(--space-3); }
.offer .button { width: 100%; }
.price { margin-bottom: var(--space-3); }
.price-main { font-family: var(--font-heading); font-size: 1.5rem; font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); }
.price-alt { display: block; color: var(--color-text-muted); }
.founding {
  background: var(--color-accent-soft); border-left: 3px solid var(--color-accent);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
}
.note-block { border-left: 3px solid var(--color-border-strong); padding-left: var(--space-4); }
.note-block h3 { font-size: 1.05rem; }

/* Lists */
.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 1.6em; margin-bottom: var(--space-2); }
.checklist li::before {
  content: ""; position: absolute; left: 0.2em; top: 0.55em; width: 0.65em; height: 0.35em;
  border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(-45deg);
}
.checklist-caution li::before { border: 0; transform: none; width: 0.5em; height: 0.5em; top: 0.55em; left: 0.3em; border-radius: 50%; background: var(--color-warning); }
.numbered { padding-left: 1.4em; }
.numbered li { margin-bottom: var(--space-2); }
.steps { list-style: none; padding: 0; display: grid; gap: var(--space-5); counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-top: var(--space-6); }
.steps li::before {
  content: counter(step); position: absolute; top: 0; left: 0; width: 2rem; height: 2rem;
  display: grid; place-items: center; border-radius: 50%; font-family: var(--font-mono); font-weight: 700;
  color: var(--color-on-accent); background: var(--color-accent);
}
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.link-list { padding-left: 1.2em; }

/* Code-style sample output */
.sample-output { margin: 0; background: var(--color-code-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); overflow-x: auto; }
.sample-output figcaption { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.sample-output pre { margin: 0; font-size: 0.95rem; line-height: 1.5; white-space: pre; }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-4); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.data-table thead th { font-size: 0.85rem; color: var(--color-text-muted); border-bottom-color: var(--color-border-strong); }
.price-table { min-width: 40rem; }
.price-cell { font-weight: 600; white-space: nowrap; }

/* Notices */
.alert { border-radius: var(--radius); padding: var(--space-4); border: var(--border-width) solid; margin-bottom: var(--space-5); }
.alert > :last-child { margin-bottom: 0; }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-text); }
.alert-danger { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-text); }
.alert-success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-text); }
.disclaimer { margin-top: var(--space-5); padding: var(--space-4); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); }
.disclaimer > :last-child { margin-bottom: 0; }

/* FAQ */
.faq { border-bottom: var(--border-width) solid var(--color-border); padding: var(--space-3) 0; }
.faq summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.faq p { margin-top: var(--space-2); }

/* Forms */
.form { margin-bottom: var(--space-6); }
.field { margin-bottom: var(--space-5); }
.field-row { display: grid; gap: 0 var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
label, legend { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.req { color: var(--color-danger); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--color-text); background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius);
}
textarea { min-height: 8rem; resize: vertical; }
input[type="file"] { font: inherit; max-width: 100%; color: var(--color-text); }
/* The native "Choose File" button follows the theme (light and dark) instead of the browser's grey. */
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; min-height: 44px; margin-right: var(--space-3); padding: var(--space-2) var(--space-4); cursor: pointer;
  color: var(--color-link); background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius);
}
input[type="file"]::file-selector-button:hover { background: var(--color-accent-soft); border-color: var(--color-link); }
input[type="file"]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; }
[aria-invalid="true"] { border-color: var(--color-danger) !important; border-width: 2px !important; }
.field-hint { font-size: 0.875rem; color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.field-error { font-size: 0.9rem; font-weight: 600; color: var(--color-danger); margin: var(--space-1) 0 0; }
.field-error:empty { display: none; }
.field-group { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5) 0; margin: 0 0 var(--space-5); }
.field-group legend { padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); }
.field-check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: start; }
.field-check input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; }
.field-check label { margin: 0; }
.field-check .field-error { grid-column: 2; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.success-panel { padding: var(--space-6); border: 2px solid var(--color-success); background: var(--color-success-bg); border-radius: var(--radius-lg); }
.reference { font-family: var(--font-mono); font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem); font-weight: 700; letter-spacing: 0.04em; margin: 0 0 var(--space-3); }

/* Status page */
.status-card { margin-bottom: var(--space-6); }
.status-steps { list-style: none; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: 1fr; margin: var(--space-4) 0 var(--space-5); }
@media (min-width: 40rem) { .status-steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .status-steps { grid-template-columns: repeat(6, 1fr); } }
.status-steps li { padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: var(--border-width) solid var(--color-border); font-size: 0.9rem; color: var(--color-text-muted); }
.status-steps li.done { color: var(--color-text); border-color: var(--color-border-strong); }
.status-steps li[aria-current="step"] { color: var(--color-on-accent); background: var(--color-accent); border-color: var(--color-accent); font-weight: 700; }
.status-legend { display: grid; gap: var(--space-2); }
.status-legend div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-3); }
.status-legend dt { font-weight: 600; }
.status-legend dd { margin: 0; color: var(--color-text-muted); }
.badge { display: inline-block; padding: 0.1em 0.6em; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--color-accent-soft); color: var(--color-text); border: var(--border-width) solid var(--color-border); white-space: nowrap; }

/* Prose (legal pages) */
.prose h2 { font-size: 1.3rem; margin-top: var(--space-6); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }

/* Footer */
.site-footer { border-top: var(--border-width) solid var(--color-border); padding: var(--space-7) 0 var(--space-5); background: var(--color-surface-alt); }
.footer-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.1rem; }
.footer-heading { font-weight: 700; margin-bottom: var(--space-2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--space-1); }
.site-footer nav a { display: inline-block; padding: var(--space-1) 0; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.footer-bottom p { margin: 0; }
/* Sun/moon switch: the knob slides over to the active mode (transform + opacity only). */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 4px; color: var(--color-text); background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
html:not(.js) .theme-toggle { display: none; }
.theme-toggle-track { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 60px; height: 32px; padding: 0 8px; border: var(--border-width) solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface, transparent); }
.theme-icon { position: relative; z-index: 1; display: block; opacity: 0.45; transition: opacity 200ms ease; }
.theme-toggle-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-text); opacity: 0.12; transition: transform 220ms ease; }
.theme-toggle[aria-checked="false"] .theme-icon-sun,
.theme-toggle[aria-checked="true"] .theme-icon-moon { opacity: 1; }
.theme-toggle[aria-checked="true"] .theme-toggle-knob { transform: translateX(28px); }
.theme-toggle:hover .theme-toggle-track { border-color: var(--color-text); }

/* Admin */
.admin-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-4); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.filters .field { margin-bottom: var(--space-3); flex: 1 1 11rem; max-width: 22rem; }
.filters .field-button { flex: 0 0 auto; }
.admin-layout { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 75rem) { .admin-layout { grid-template-columns: 3fr 2fr; align-items: start; } }
.admin-table { min-width: 44rem; }
.admin-table tbody tr { cursor: pointer; }
.admin-table tbody tr:hover, .admin-table tbody tr.is-selected { background: var(--color-accent-soft); }
.admin-table button.linklike { white-space: nowrap; font: inherit; font-family: var(--font-mono); color: var(--color-link); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.pager { display: flex; align-items: center; gap: var(--space-3); }
.detail dl { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-1) var(--space-3); }
.detail dt { font-weight: 600; color: var(--color-text-muted); }
.detail dd { margin: 0; overflow-wrap: anywhere; }
.detail .message { white-space: pre-wrap; background: var(--color-surface-alt); padding: var(--space-3); border-radius: var(--radius); }
.detail .note { border-left: 3px solid var(--color-border-strong); padding-left: var(--space-3); margin-bottom: var(--space-3); white-space: pre-wrap; }
.detail h3 { margin-top: var(--space-5); }
.inline-list { list-style: none; padding: 0; }
.inline-list li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media print {
  .site-header, .site-footer, .hero-actions, .cta-band { display: none; }
}

/* =============================================================================
   SECTION LAYOUTS (v2): split hero, bento grid, timelines, price cards,
   FAQ accordion, soft CTA band, section dividers. Token-driven like the rest.
   ============================================================================= */

/* Split hero with illustration */
.hero-split { position: relative; overflow: hidden; isolation: isolate; }
.hero-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56rem) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.hero-copy h1 { max-width: 18em; }
.hero-points { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 0.95rem; color: var(--color-text-muted); }
.hero-points li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-points li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); }
.hero-art { width: 100%; max-width: 30rem; justify-self: center; }
.hero-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { display: none; }

/* Illustration colors (themes can override the --art-* tokens) */
.art-blob { fill: var(--art-blob, var(--color-accent-soft)); }
.art-card { fill: var(--art-card, var(--color-surface)); stroke: var(--color-border); stroke-width: 2; }
.art-ink { fill: var(--art-ink, var(--color-text)); }
.art-muted { fill: var(--art-muted, var(--color-border-strong)); opacity: 0.55; }
.art-accent { fill: var(--art-accent, var(--color-accent)); }
.art-soft { fill: var(--art-soft, var(--color-accent-soft)); }
.art-hi { fill: var(--art-hi, var(--color-highlight, var(--color-accent))); }
.art-stroke { fill: none; stroke: var(--art-accent, var(--color-accent)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art-stroke-hi { fill: none; stroke: var(--art-hi, var(--color-highlight, var(--color-accent))); stroke-width: 2.5; stroke-dasharray: 5 6; stroke-linecap: round; }
.art-check { fill: none; stroke: var(--color-on-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.art-on-hi { fill: none; stroke: var(--color-on-highlight, var(--color-on-accent)); stroke-width: 3; stroke-linecap: round; }

/* Line icons */
.icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); background: var(--color-accent-soft); color: var(--color-link); margin-bottom: var(--space-3); }
.icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Bento grid */
.bento { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.bento-item { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--card-shadow); }
.bento-item h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.bento-item p { margin-bottom: 0; }
.bento-item .stat { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 2.25rem; line-height: 1; letter-spacing: var(--heading-tracking); margin: var(--space-3) 0 var(--space-2); color: var(--color-text); }
.bento-feature .sample-output { margin-top: var(--space-4); }
@media (min-width: 48rem) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento-item { grid-column: span 3; }
  .bento-feature { grid-column: span 6; }
}
@media (min-width: 64rem) {
  .bento-item { grid-column: span 2; }
  .bento-feature { grid-column: span 4; grid-row: span 2; }
}

/* Timelines (How it works) */
.timeline-pair { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .timeline-pair { grid-template-columns: 1fr 1fr; } }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; counter-reset: tl; }
.timeline li { position: relative; padding: 0 0 var(--space-5) 3.25rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  counter-increment: tl; content: counter(tl);
  position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border-radius: 50%; font-weight: 700; font-size: 0.95rem;
  background: var(--color-accent); color: var(--color-on-accent);
}
.timeline li::after { content: ""; position: absolute; left: calc(1.125rem - 1px); top: 2.5rem; bottom: 0.25rem; width: 2px; background: var(--color-border); }
.timeline li:last-child::after { display: none; }
.timeline h3, .timeline h4 { font-size: 1.05rem; margin: 0.35rem 0 var(--space-1); }
.timeline p { margin: 0; color: var(--color-text-muted); }
.timeline-head { margin-bottom: var(--space-4); }
.timeline-head h3 { margin: 0 0 var(--space-1); }

/* Price cards */
.price-grid { display: grid; gap: var(--space-5) var(--space-4); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 40rem) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .price-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .price-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.price-card { position: relative; display: flex; flex-direction: column; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--card-shadow); }
.price-card h3 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.price-card .price { margin-bottom: var(--space-2); }
.price-card .price-main { display: block; font-size: 1.45rem; line-height: 1.25; }
.price-card .price-alt { font-size: 0.9rem; }
.price-card .offer-cta { margin-top: auto; padding-top: var(--space-4); margin-bottom: 0; }
.price-card .offer-cta .button { width: 100%; }
.price-card.is-highlight { border: 2px solid var(--color-accent); }
.ribbon { position: absolute; top: 0; left: var(--space-5); transform: translateY(-50%); padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--color-accent); color: var(--color-on-accent); white-space: nowrap; }
.chip { display: inline-block; align-self: flex-start; margin-bottom: var(--space-3); padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--color-accent-soft); color: var(--color-text); border: var(--border-width) solid var(--color-border); }
.perks { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.perks li { position: relative; padding-left: 1.5em; margin-bottom: var(--space-1); font-weight: 600; font-size: 0.95rem; }
.perks li::before { content: "\2605"; position: absolute; left: 0; color: var(--color-link); }
.payment-note { display: grid; gap: var(--space-2); }

/* FAQ accordion */
.faq-list { border-top: var(--border-width) solid var(--color-border); }
.faq-list details { border-bottom: var(--border-width) solid var(--color-border); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 3.25rem; padding: var(--space-3) 0; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s ease; }
.faq-list details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-body { padding: 0 0 var(--space-4); color: var(--color-text-muted); }
.faq-body > :last-child { margin-bottom: 0; }

/* Spacing between stacked groups */
.spacer { height: var(--space-6); }

/* Soft CTA band */
.cta-soft { border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); background-color: var(--color-accent-soft); background-image: var(--cta-bg-image, none); display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 48rem) { .cta-soft { grid-template-columns: 1fr auto; padding: var(--space-7) var(--space-6); } }
.cta-soft h2 { margin-bottom: var(--space-2); }
.cta-soft p { margin-bottom: 0; }
.cta-soft .hero-actions { margin-top: 0; }

/* Optional curved section dividers: themes set --divider-height and --divider-mask */
.section-alt { position: relative; }
.section-alt::before, .section-alt::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--divider-height, 0); pointer-events: none;
  background: var(--color-surface-alt);
  -webkit-mask: var(--divider-mask, none) center / 100% 100% no-repeat; mask: var(--divider-mask, none) center / 100% 100% no-repeat;
}
.section-alt::before { bottom: 100%; }
.section-alt::after { top: 100%; transform: scaleY(-1); }

/* =============================================================================
   MOTION. Only transform and opacity animate. Everything is visible without JS:
   the hidden "before" state applies only after motion.js adds .motion to <html>.
   With prefers-reduced-motion: reduce, nothing moves (end of this block).
   ============================================================================= */
:root { --ease-soft: cubic-bezier(0.22, 0.7, 0.25, 1); --lift-shadow: 0 12px 28px rgb(0 0 0 / 0.12); }

.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft); transition-delay: calc(var(--i, 0) * 90ms); }
.motion [data-reveal].in { opacity: 1; transform: none; }

/* Hover lift: the shadow lives on a pseudo-element whose OPACITY animates */
.lift, .button { position: relative; isolation: isolate; }
.lift { transition: transform 0.3s var(--ease-soft); }
.lift::after, .button::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--lift-shadow); opacity: 0; transition: opacity 0.3s var(--ease-soft); pointer-events: none; }
.lift:hover { transform: translateY(-4px); }
.lift:hover::after { opacity: 1; }
.button { transition: transform 0.2s var(--ease-soft); }
.button:hover { transform: translateY(-1px); }
.button:hover::after { opacity: 0.55; }
.button:active { transform: translateY(1px) scale(0.98); transition-duration: 0.08s; }
.button:active::after { opacity: 0; }

/* Subtle focus rings */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* FAQ open/close: the answer fades and settles; the chevron rotates */
@keyframes bbl-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes bbl-faq-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
.faq-list details[open] > .faq-body { animation: bbl-faq-in 0.35s var(--ease-soft) both; }
.faq-list details.is-closing > .faq-body { animation: bbl-faq-out 0.2s ease both; }

/* Gentle float on the hero illustration's small badge */
@keyframes bbl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.motion .art-float { animation: bbl-float 6s ease-in-out infinite; }

/* Light/dark crossfade (View Transitions API; other browsers switch instantly) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  .lift:hover, .button:hover, .button:active { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media print { .motion [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* ---------- SAMPLE OUTPUTS ("See what you get") ----------
   Screenshots of real sample outputs (fictional client), each on a paper card with a
   "Sample" badge sitting on the card's top edge (it never covers the screenshot). */
.shot-grid { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 48rem) { .shot-grid { grid-template-columns: repeat(2, 1fr); } }
.shot-grid > * { min-width: 0; }
@media (min-width: 48rem) { .shot-grid-single { grid-template-columns: minmax(0, 40rem); justify-content: center; } }
.shot { margin: 0; }
.shot-frame {
  position: relative; margin: 0 0 var(--space-3); padding: var(--space-4) var(--space-3) var(--space-3);
  background: var(--color-surface); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--card-shadow);
}
.shot-frame img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
}
.shot-frame .ribbon { left: auto; right: var(--space-5); }
.sample-note { margin-top: var(--space-4); }
.shot figcaption { font-size: 0.95rem; color: var(--color-text-muted); }
.shot figcaption strong { color: var(--color-text); }
.shot figcaption p { margin: 0 0 var(--space-2); }
.shot figcaption > :last-child { margin-bottom: 0; }
.shot-intro { max-width: 46rem; margin-bottom: var(--space-6); }
.hero-more { margin: var(--space-4) 0 0; }
.shot-intro > :last-child { margin-bottom: 0; }
/* Home: one sample next to the list of what you receive */
.receive-split { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56rem) { .receive-split { grid-template-columns: 1fr 1.15fr; } }
.receive-split > * { min-width: 0; }
/* "How we handle your data" card */
.data-card h2 { margin-bottom: var(--space-3); }
.data-card .checklist li { margin-bottom: var(--space-3); }

/* Grid children may shrink below their content width (stops wide code samples from overflowing on phones) */
.grid > *, .split > *, .bento > *, .price-grid > *, .timeline-pair > *, .hero-grid > * { min-width: 0; }
.price-grid + p { margin-top: var(--space-5); }