/* ============================================================ */
/* INSTABOOKS — Marketing site                                   */
/* Base typographic system + four theme treatments:              */
/*   [data-theme="evergreen"]  — refined current, forest greens  */
/*   [data-theme="slate"]      — modern premium, cool neutrals   */
/*   [data-theme="ledger"]     — editorial, cream + serif        */
/*   [data-theme="terminal"]   — pro-tool dense, mono headlines  */
/* ============================================================ */

:root {
  /* — Defaults; each theme overrides — */
  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "Source Code Pro", ui-monospace, monospace;

  --paper:    #fafbf9;
  --section:  #ffffff;
  --section-2:#f3f6f2;
  --ink:      #0d1b24;
  --ink-soft: #1f2c34;
  --muted:    #5b6770;
  --line:     #dce9df;
  --line-soft:#e8efea;

  --brand:    #3c8d52;
  --brand-deep: #174529;
  --brand-tint: #e6f0e7;

  --nav-bg:   linear-gradient(155deg, #001d07 0%, #174529 42%, #3c8d52 100%);
  --nav-ink:  #ffffff;
  --nav-stripes: repeating-linear-gradient(118deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 22px);

  --radius:   12px;
  --radius-sm: 8px;
  --radius-lg: 18px;

  --space-section: 112px;
  --space-stack:   28px;
  --container-w:   1200px;

  --shadow-card: 0 1px 0 rgba(13,27,36,.04), 0 10px 30px rgba(13,27,36,.04);
  --shadow-pop:  0 20px 60px rgba(13,27,36,.14);

  --hero-title-size: clamp(2.2rem, 5.2vw, 4.2rem);
  --section-title-size: clamp(1.7rem, 3.2vw, 2.7rem);
  --body-size: 17px;

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================ */
/* TOP NAV                                                       */
/* ============================================================ */

.site-nav {
  position: relative;
  isolation: isolate;
  padding: 16px 0;
  background: var(--nav-bg);
  color: var(--nav-ink);
  overflow: hidden;
  border-bottom: 1px solid var(--nav-border, transparent);
}

.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nav-stripes);
  opacity: var(--nav-stripes-opacity, 0.45);
  pointer-events: none;
  z-index: 0;
}

.site-nav > * { position: relative; z-index: 1; }

.site-nav .container {
  display: flex;
  align-items: center;
  gap: 32px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nav-ink);
}

.booklogo {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.wm-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  line-height: 1;
}

.nav-links {
  margin-left: auto;
}

.nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
  font-size: 0.94rem;
}

.nav-links a {
  color: rgba(255,255,255,0.72);
  transition: color 150ms ease;
  padding: 6px 0;
}

.nav-links a:hover { color: var(--nav-ink); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--nav-ink);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 120ms ease, box-shadow 150ms ease, background 150ms ease;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

.nav-cta svg { transition: transform 200ms ease; }
.nav-cta:hover svg { transform: translateX(2px); }

/* ============================================================ */
/* HERO                                                          */
/* ============================================================ */

.hero {
  padding: 88px 0 var(--space-section);
  background: var(--paper);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--section);
  margin-bottom: 28px;
}

.hero-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.hero-eyebrow .sep {
  color: var(--line);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 600);
  font-size: var(--hero-title-size);
  line-height: 1.05;
  letter-spacing: var(--display-tracking, -0.035em);
  margin: 0 0 28px 0;
  color: var(--ink);
  white-space: nowrap;
}

.hero-title em {
  font-style: var(--em-style, normal);
  color: var(--em-color, var(--brand));
  font-weight: inherit;
}

.hero-lede {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 36px 0;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  transition: transform 120ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn svg { transition: transform 200ms ease; }

.btn-primary {
  background: var(--brand);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--brand-deep);
  box-shadow: 0 16px 40px var(--shadow-brand, rgba(13,27,36,0.18));
}

.btn-primary:hover svg { transform: translateX(3px); }

.btn-secondary {
  background: var(--section);
  color: var(--ink);
  border-color: var(--line);
}

.btn-secondary:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.btn-secondary:hover svg { transform: translateY(-1px) rotate(-8deg); }

.hero-meta {
  margin: 0 0 60px 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Hero video frame */
.hero-video-frame {
  position: relative;
  isolation: isolate;
  padding: 36px 56px;
  background: var(--hero-frame-bg, var(--nav-bg));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.hero-video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-frame-stripes, var(--nav-stripes));
  opacity: var(--hero-frame-stripes-opacity, 0.32);
  pointer-events: none;
  z-index: 0;
}

.hero-video-frame > * { position: relative; z-index: 1; }

.hero-video {
  border: 1px solid rgba(255,255,255,0.18);
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.hv-chrome {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 14px;
  background: linear-gradient(180deg, #f3f4f1, #e6e8e3);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.hv-dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
  width: 50px;
}
.hv-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
}

.hv-url {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.hv-url-pill {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.6);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 3px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.hv-url-pill .hv-lock {
  display: inline-block;
  margin-right: 8px;
  vertical-align: -1px;
  opacity: 0.5;
}

.hv-spacer { width: 50px; flex-shrink: 0; }

.hero-video video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #001d07;
}

/* Hero marks bar */
.hero-marks {
  margin-top: 48px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.marks-label {
  color: var(--ink);
  letter-spacing: 0.12em;
  font-weight: 600;
}

.marks-sep {
  flex: 1;
  height: 1px;
  background: var(--line);
  min-width: 24px;
}

/* ============================================================ */
/* TRUSTED — customer logos band                                 */
/* ============================================================ */

.trusted {
  padding: 80px 0;
  background: var(--section-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.trusted-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 auto 36px;
  max-width: 52ch;
}

.trusted-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trusted-logos li { display: flex; align-items: center; }

.trusted-logos img {
  height: 56px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  opacity: 0.68;
  filter: grayscale(1) contrast(0.95);
  transition: opacity 200ms ease, filter 200ms ease;
}

.trusted-logos li:hover img {
  opacity: 1;
  filter: grayscale(0) contrast(1);
}

@media (min-width: 768px) {
  .trusted { padding: 96px 0; }
  .trusted-label { margin-bottom: 44px; }
  .trusted-logos { gap: 32px 64px; }
  .trusted-logos img { height: 72px; }
}

@media (min-width: 1024px) {
  .trusted-logos { gap: 32px 80px; }
}

/* ============================================================ */
/* SECTIONS — shared scaffolding                                 */
/* ============================================================ */

section { padding: var(--space-section) 0; }

.section-eyebrow {
  margin: 0 0 18px 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

.section-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 600);
  font-size: var(--section-title-size);
  line-height: 1.1;
  letter-spacing: var(--display-tracking, -0.028em);
  margin: 0 0 22px 0;
  color: var(--ink);
  white-space: nowrap;
}

.section-title .sep {
  color: var(--line);
  font-weight: 400;
  margin: 0 0.15em;
}

.marks-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 8px;
  vertical-align: 1px;
  box-shadow: 0 0 0 3px var(--brand-tint);
  animation: pulse 2.4s ease-in-out infinite;
}

.marks-shield {
  display: inline-block;
  color: var(--brand);
  margin-right: 7px;
  vertical-align: -2px;
}

.section-lede {
  font-size: 1.1rem;
  line-height: 1.62;
  color: var(--muted);
  max-width: 64ch;
  margin: 0;
}

/* Pain */
.pain {
  background: var(--section);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
}

.pain-copy .section-lede {
  margin-bottom: 0;
}

.pain .pain-pun {
  margin-top: 32px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-style: italic;
  font-weight: 500;
  color: var(--brand-deep);
  letter-spacing: -0.01em;
  max-width: 50ch;
  padding-left: 18px;
  border-left: 2px solid var(--brand);
}

/* ============================================================ */
/* WAIT ART — QuickBooks Online loading spinner recreation       */
/* Four green dots expand outward from center into a square,     */
/* rotate while expanded, then contract back to center. Loops.   */
/* The visible metaphor for the wait users are sick of.          */
/* ============================================================ */

.pain-art {
  position: relative;
  padding: 28px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wa-spinner {
  position: relative;
  width: 180px;
  height: 180px;
}

/* Whole-spinner rotation. Constant speed; one full turn per
   pulse cycle so the dots flow continuously around the square. */
.wa-orbit {
  position: absolute;
  inset: 0;
  animation: wa-spin 1.5s linear infinite;
  will-change: transform;
}

/* Each arm is a full-bleed flex container pre-rotated to one of
   the four diagonal axes; its dot sits at the center and the
   pulse keyframe translates it outward along the arm's Y axis. */
.wa-arm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-arm-0 { transform: rotate(45deg); }
.wa-arm-1 { transform: rotate(135deg); }
.wa-arm-2 { transform: rotate(225deg); }
.wa-arm-3 { transform: rotate(315deg); }

.wa-dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2CA01C; /* Intuit QuickBooks brand green */
  animation: wa-pulse 1.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes wa-pulse {
  0%, 100% { transform: translateY(0) scale(0.4); }
  50%      { transform: translateY(-58px) scale(1); }
}

@keyframes wa-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-orbit { animation: none; }
  .wa-dot {
    animation: none;
    transform: translateY(-44px);
  }
}

/* ============================================================ */
/* FEATURES                                                      */
/* ============================================================ */

.features {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.bucket-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.bucket {
  display: flex;
  flex-direction: column;
}

.bucket-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.bucket-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.bucket-head h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 600);
  font-size: 1.45rem;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

.bucket-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.bucket-list li {
  display: flex;
  gap: 16px;
  padding: 18px;
  background: var(--section);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 200ms ease;
}

.bucket-list li:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.bucket-list .ic {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bucket-list .bd { min-width: 0; }

.bucket-list h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin: 2px 0 6px 0;
  color: var(--ink);
}

.bucket-list p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ============================================================ */
/* CLEANUPS                                                      */
/* ============================================================ */

.cleanups {
  background: var(--section-2);
  border-bottom: 1px solid var(--line);
}

.cleanups-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
}

.cleanups-copy .section-lede {
  margin-bottom: 28px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 150ms ease, gap 150ms ease;
}

.link-arrow:hover {
  color: var(--brand-deep);
  gap: 12px;
}

.cleanups-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--section);
  overflow: hidden;
}

.cleanups-stats li {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cleanups-stats li:nth-child(2n) { border-right: none; }
.cleanups-stats li:nth-last-child(-n+2) { border-bottom: none; }

/* ============================================================ */
/* CLEANUP ART — abstract ledger cleanup illustration            */
/* Rows of date / description / amount bars start misaligned     */
/* with strikethroughs over miscoded rows; on scroll-in they     */
/* snap into a tidy ledger as the strikes wipe away.             */
/* No text. Purely visual metaphor for batch cleanup.            */
/* ============================================================ */

.cleanup-art {
  position: relative;
  padding: 28px 24px;
  background: var(--section);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.ca-ledger {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ca-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 60px;
  gap: 14px;
  align-items: center;
}

.ca-bar {
  position: relative;
  height: 10px;
  border-radius: 3px;
  background: var(--ca-from, rgba(150, 150, 145, 0.22));
  transform: translateX(var(--ca-x, 0)) scaleX(var(--ca-sx, 1));
  transform-origin: left center;
  will-change: background-color, transform;
}

.ca-bar-2 { transform-origin: right center; }

.ca-strike {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  height: 2px;
  background: rgba(170, 90, 75, 0.7);
  transform: scaleX(1);
  transform-origin: left center;
}

/* Settle animation: each bar briefly flashes brand, then snaps
   from its messy translate/scale into the clean column position.
   Row index drives the top-to-bottom wave; column adds a small
   offset so the cleanup reads as organic rather than mechanical. */
.cleanup-art.playing .ca-bar {
  animation: ca-settle 0.7s cubic-bezier(.4, .8, .35, 1) forwards;
  animation-delay: calc(var(--row, 0) * 0.06s + var(--col, 0) * 0.04s);
}

.cleanup-art.playing .ca-strike {
  animation: ca-strike-out 0.5s ease forwards;
  animation-delay: calc(var(--row, 0) * 0.06s + 0.05s);
}

@keyframes ca-settle {
  0% {
    background: var(--ca-from);
    transform: translateX(var(--ca-x, 0)) scaleX(var(--ca-sx, 1));
  }
  55% {
    background: var(--brand);
    transform: translateX(0) scaleX(1.04);
  }
  100% {
    background: var(--brand-tint);
    transform: translateX(0) scaleX(1);
  }
}

@keyframes ca-strike-out {
  0%   { transform: scaleX(1); opacity: 0.7; }
  100% { transform: scaleX(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ca-bar {
    background: var(--brand-tint);
    transform: none;
  }
  .ca-strike { display: none; }
  .cleanup-art.playing .ca-bar { animation: none; }
}

.stat-num {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 600);
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================ */
/* TESTIMONIALS                                                  */
/* ============================================================ */

.testimonials {
  background: var(--section);
  border-bottom: 1px solid var(--line);
}

.quote-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.quote-lead { grid-column: span 6; background: var(--section-2); }
.quote-lead blockquote {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 500;
}

.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
}

.quote blockquote::before {
  content: "“";
  font-size: 1.4em;
  line-height: 0;
  color: var(--brand);
  margin-right: 2px;
  vertical-align: -0.1em;
}

.quote blockquote::after {
  content: "”";
  font-size: 1.4em;
  line-height: 0;
  color: var(--brand);
  margin-left: 2px;
  vertical-align: -0.1em;
}

.quote figcaption {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================ */
/* HOW IT WORKS                                                  */
/* ============================================================ */

.how { background: var(--paper); border-bottom: 1px solid var(--line); }

.steps {
  list-style: none;
  margin: 56px 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: step;
}

.steps li {
  padding: 32px;
  background: var(--section);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
}

.step-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand);
  background: var(--brand-tint);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.steps h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 8px 0;
}

.steps p {
  margin: 0;
  font-size: 0.97rem;
  color: var(--muted);
  line-height: 1.55;
}

.centered-cta,
.centered-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 48px;
}

/* ============================================================ */
/* TRUST                                                         */
/* ============================================================ */

.trust { background: var(--section); border-bottom: 1px solid var(--line); }

.trust-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.trust-item {
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.trust-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  margin-bottom: 18px;
}

.trust-item h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.012em;
  margin: 0 0 8px 0;
  color: var(--ink);
}

.trust-item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ============================================================ */
/* PRICING TEASER                                                */
/* ============================================================ */

.pricing-teaser {
  background: var(--section-2);
  text-align: center;
}

.pricing-teaser .section-eyebrow { color: var(--brand); }

.pricing-teaser .section-title { margin: 0 auto 16px; max-width: 24ch; }

.pricing-teaser .section-lede {
  margin: 0 auto 32px;
  max-width: 48ch;
}

/* ============================================================ */
/* FOOTER                                                        */
/* ============================================================ */

.site-footer {
  position: relative;
  isolation: isolate;
  background: var(--footer-bg, var(--nav-bg));
  color: rgba(255,255,255,0.82);
  padding: 72px 0 28px;
  overflow: hidden;
  font-size: 0.92rem;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--footer-stripes, var(--nav-stripes));
  opacity: var(--footer-stripes-opacity, 0.4);
  z-index: 0;
  pointer-events: none;
}

.site-footer::after {
  content: "";
  position: absolute;
  bottom: -160px;
  left: -100px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 60%, transparent 76%);
  pointer-events: none;
  z-index: 0;
}

.site-footer .container { position: relative; z-index: 1; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: white;
}

.site-footer .booklogo { width: 36px; height: 36px; }

.site-footer .wm-text {
  font-size: 1.4rem;
  color: white;
}

.footer-tagline {
  margin: 0 0 18px 0;
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  max-width: 30ch;
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding-bottom: 10px;
  margin: 0 0 16px 0;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li { margin-bottom: 10px; }

.site-footer a {
  color: rgba(255,255,255,0.82);
  transition: color 150ms ease;
}

.site-footer a:hover { color: white; }

.site-footer address {
  font-style: normal;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  font-size: 0.9rem;
}

.site-footer address a {
  color: rgba(255,255,255,0.78);
  border-bottom: 1px dotted rgba(255,255,255,0.4);
}

.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}

.footer-meta { font-family: var(--font-mono); letter-spacing: 0.04em; }

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */

/* Per-theme heading size overrides are inlined in each theme's main block below. */

@media (max-width: 1000px) {
  :root { --space-section: 80px; }
  .bucket-grid { grid-template-columns: 1fr; gap: 28px; }
  .cleanups-grid { grid-template-columns: 1fr; gap: 36px; }
  .pain-grid { grid-template-columns: 1fr; gap: 36px; }
  .quote-grid { grid-template-columns: 1fr 1fr; }
  .quote, .quote-lead { grid-column: span 1; }
  .quote-lead { grid-column: span 2; }
  .steps { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-links { display: none; }
  .site-nav .container { gap: 16px; justify-content: space-between; }
  .hero { padding: 56px 0 80px; }
  .hero-video-frame { padding: 16px; }
  .hero-title,
  .section-title { white-space: normal; }
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem); letter-spacing: -0.025em; }
  .section-title { font-size: clamp(1.4rem, 5vw, 2rem); }
  .quote-grid { grid-template-columns: 1fr; }
  .quote, .quote-lead { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .cleanups-stats { grid-template-columns: 1fr; }
  .cleanups-stats li { border-right: none; }
  .cleanups-stats li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cleanups-stats li:last-child { border-bottom: none; }

  .cleanup-art { padding: 20px 16px; }
  .ca-ledger { gap: 10px; }
  .ca-row { grid-template-columns: 36px 1fr 50px; gap: 10px; }

  .pain-art { padding: 20px 16px; min-height: 220px; }
}

/* ============================================================ */
/* ============================================================ */
/* THEME 1 — EVERGREEN (default, refined current)                */
/* ============================================================ */
/* ============================================================ */

[data-theme="evergreen"] {
  /* uses defaults */
}

/* ============================================================ */
/* THEME 2 — SLATE (modern premium)                              */
/* ============================================================ */

[data-theme="slate"] {
  --font-display: "Geist", system-ui, sans-serif;
  --font-body:    "Geist", system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;

  --display-weight: 600;
  --display-tracking: -0.04em;

  --paper:    oklch(0.985 0.003 240);
  --section:  #ffffff;
  --section-2: oklch(0.97 0.005 240);
  --ink:      oklch(0.18 0.02 250);
  --ink-soft: oklch(0.28 0.02 250);
  --muted:    oklch(0.48 0.015 250);
  --line:     oklch(0.92 0.008 240);
  --line-soft:oklch(0.95 0.005 240);

  --brand:        oklch(0.45 0.16 252);
  --brand-deep:   oklch(0.32 0.14 252);
  --brand-tint:   oklch(0.95 0.03 252);

  --nav-bg:   oklch(0.18 0.02 250);
  --nav-ink:  #ffffff;
  --nav-stripes: none;
  --nav-border: oklch(0.22 0.02 250);

  --footer-bg: oklch(0.16 0.02 250);
  --footer-stripes: none;

  --hero-frame-bg: oklch(0.97 0.008 240);
  --hero-frame-stripes: none;

  --shadow-brand: rgba(20, 40, 90, 0.22);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  --space-section: 128px;

  --em-color: oklch(0.45 0.16 252);
}

[data-theme="slate"] .site-nav { padding: 18px 0; }
[data-theme="slate"] .site-nav::before { display: none; }
[data-theme="slate"] .nav-cta {
  background: white;
  color: oklch(0.18 0.02 250);
}

[data-theme="slate"] .hero-video {
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(20, 40, 90, 0.1);
}

[data-theme="slate"] .hero-video-frame {
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 30px 80px rgba(20, 40, 90, 0.06);
}

[data-theme="slate"] .hero-video-frame::before { display: none; }

[data-theme="slate"] .pain .pain-pun {
  color: oklch(0.32 0.14 252);
  border-left-color: oklch(0.45 0.16 252);
}

[data-theme="slate"] .bucket-list li {
  background: #fff;
  box-shadow: 0 1px 0 oklch(0.95 0.005 240);
}
[data-theme="slate"] .bucket-list li:hover {
  border-color: oklch(0.45 0.16 252);
  box-shadow: 0 18px 40px rgba(20, 40, 90, 0.08);
}

[data-theme="slate"] .footer-bar,
[data-theme="slate"] .site-footer ul,
[data-theme="slate"] .site-footer address {
  color: rgba(255,255,255,0.7);
}

[data-theme="slate"] .site-footer::before { display: none; }
[data-theme="slate"] .site-footer::after { display: none; }

/* ============================================================ */
/* THEME 3 — LEDGER (editorial, cream + serif)                   */
/* ============================================================ */

[data-theme="ledger"] {
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --display-weight: 500;
  --display-tracking: -0.018em;

  --paper:    oklch(0.965 0.012 82);
  --section:  oklch(0.98 0.008 82);
  --section-2: oklch(0.945 0.014 82);
  --ink:      oklch(0.15 0.012 60);
  --ink-soft: oklch(0.28 0.01 60);
  --muted:    oklch(0.42 0.012 60);
  --line:     oklch(0.85 0.018 70);
  --line-soft:oklch(0.91 0.012 75);

  --brand:        oklch(0.42 0.16 25);
  --brand-deep:   oklch(0.3 0.14 25);
  --brand-tint:   oklch(0.93 0.04 30);

  --nav-bg:   oklch(0.15 0.012 60);
  --nav-ink:  oklch(0.965 0.012 82);
  --nav-stripes: none;
  --nav-border: oklch(0.25 0.012 60);

  --footer-bg: oklch(0.15 0.012 60);
  --footer-stripes: none;

  --hero-frame-bg: oklch(0.945 0.014 82);
  --hero-frame-stripes: none;

  --shadow-brand: rgba(120, 30, 20, 0.18);

  --radius: 4px;
  --radius-sm: 4px;
  --radius-lg: 6px;

  --space-section: 120px;

  --hero-title-size: clamp(2rem, 4.6vw, 3.6rem);
  --em-style: italic;
  --em-color: oklch(0.42 0.16 25);
}

body[data-theme="ledger"] {
  background: var(--paper);
}

[data-theme="ledger"] .hero-eyebrow,
[data-theme="ledger"] .section-eyebrow,
[data-theme="ledger"] .stat-label,
[data-theme="ledger"] .marks-label,
[data-theme="ledger"] .hero-marks,
[data-theme="ledger"] .step-num,
[data-theme="ledger"] .bucket-num,
[data-theme="ledger"] .quote figcaption,
[data-theme="ledger"] .footer-col h4,
[data-theme="ledger"] .footer-meta {
  font-family: var(--font-mono);
}

[data-theme="ledger"] .hero-eyebrow {
  border-radius: 4px;
  background: transparent;
}

[data-theme="ledger"] .site-nav { padding: 16px 0; }
[data-theme="ledger"] .site-nav::before { display: none; }
[data-theme="ledger"] .nav-cta {
  background: oklch(0.965 0.012 82);
  color: oklch(0.15 0.012 60);
  border-radius: 4px;
}

[data-theme="ledger"] .hero-video-frame::before { display: none; }
[data-theme="ledger"] .hero-video-frame { border: 1px solid var(--line); }
[data-theme="ledger"] .hero-video { border-color: var(--line); }

[data-theme="ledger"] .pain .pain-pun {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 500;
  color: oklch(0.3 0.14 25);
  border-left-color: oklch(0.42 0.16 25);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
}

[data-theme="ledger"] .bucket-list li { border-radius: 4px; }
[data-theme="ledger"] .bucket-list .ic { border-radius: 4px; }
[data-theme="ledger"] .cleanups-stats { border-radius: 4px; }
[data-theme="ledger"] .trust-mark { border-radius: 4px; }
[data-theme="ledger"] .steps li { border-radius: 4px; }
[data-theme="ledger"] .trust-item { border-radius: 4px; }
[data-theme="ledger"] .quote { border-radius: 4px; }
[data-theme="ledger"] .btn { border-radius: 4px; }

[data-theme="ledger"] .quote blockquote {
  font-family: var(--font-display);
  font-weight: 400;
}
[data-theme="ledger"] .quote-lead blockquote {
  font-style: italic;
  font-weight: 400;
}

[data-theme="ledger"] .site-footer::before { display: none; }
[data-theme="ledger"] .site-footer::after { display: none; }

/* ============================================================ */
/* THEME 4 — TERMINAL (pro-tool dense, mono headlines)           */
/* ============================================================ */

[data-theme="terminal"] {
  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --display-weight: 500;
  --display-tracking: -0.025em;

  --paper:    #fafaf7;
  --section:  #ffffff;
  --section-2: #f4f4ef;
  --ink:      #0a0a0c;
  --ink-soft: #2a2a2e;
  --muted:    #5e5e62;
  --line:     #dededa;
  --line-soft:#ececea;

  --brand:        oklch(0.55 0.16 60);
  --brand-deep:   oklch(0.4 0.14 50);
  --brand-tint:   oklch(0.94 0.06 85);

  --nav-bg:   #0a0a0c;
  --nav-ink:  #fafaf7;
  --nav-stripes: none;
  --nav-border: #1f1f22;

  --footer-bg: #0a0a0c;
  --footer-stripes: none;

  --hero-frame-bg: #0a0a0c;
  --hero-frame-stripes: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 32px);
  --hero-frame-stripes-opacity: 1;

  --shadow-brand: rgba(0, 0, 0, 0.2);

  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;

  --space-section: 96px;
  --container-w: 1240px;

  --hero-title-size: clamp(1.6rem, 3.3vw, 2.6rem);
  --section-title-size: clamp(1.5rem, 2.5vw, 2.1rem);
  --body-size: 16px;

  --em-color: oklch(0.55 0.16 60);
}

body[data-theme="terminal"] { background: var(--paper); }

[data-theme="terminal"] .hero-title em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 60%, var(--brand-tint) 60%);
  padding: 0 4px;
  margin: 0 -4px;
}

[data-theme="terminal"] .site-nav { padding: 12px 0; border-bottom: 1px solid #1f1f22; }
[data-theme="terminal"] .site-nav::before { display: none; }
[data-theme="terminal"] .wm-text { font-family: var(--font-display); font-weight: 600; }
[data-theme="terminal"] .nav-cta {
  background: var(--nav-ink);
  color: #0a0a0c;
}

[data-theme="terminal"] .hero { padding: 56px 0 var(--space-section); }
[data-theme="terminal"] .hero-eyebrow {
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--section);
}
[data-theme="terminal"] .hero-video-frame { padding: 28px; }
[data-theme="terminal"] .hero-video { border-color: rgba(255,255,255,0.2); border-radius: 2px; }

[data-theme="terminal"] .section-title { letter-spacing: -0.02em; }

[data-theme="terminal"] .pain .pain-pun {
  font-family: var(--font-display);
  font-style: normal;
  border-left-color: var(--brand);
  color: var(--brand-deep);
}

[data-theme="terminal"] .bucket-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); }
[data-theme="terminal"] .bucket { background: var(--paper); padding: 28px; }
[data-theme="terminal"] .bucket-head { border-bottom-style: dashed; }
[data-theme="terminal"] .bucket-list li { background: var(--section); border-radius: 0; }
[data-theme="terminal"] .bucket-list .ic {
  border-radius: 0;
  border: 1px solid var(--brand);
  background: transparent;
}
[data-theme="terminal"] .bucket-list li:hover { border-color: var(--ink); box-shadow: 4px 4px 0 var(--line); transform: translate(-2px, -2px); }

[data-theme="terminal"] .cleanups-stats { border-radius: 0; }
[data-theme="terminal"] .stat-num { font-family: var(--font-display); letter-spacing: -0.04em; }

[data-theme="terminal"] .quote { border-radius: 0; }
[data-theme="terminal"] .quote blockquote { font-family: var(--font-body); }
[data-theme="terminal"] .quote-lead blockquote { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; }

[data-theme="terminal"] .steps li { border-radius: 0; }
[data-theme="terminal"] .step-num { border-radius: 0; background: var(--ink); color: var(--paper); }

[data-theme="terminal"] .trust-item { border-radius: 0; }
[data-theme="terminal"] .trust-mark { border-radius: 0; border: 1px solid var(--brand); background: transparent; }

[data-theme="terminal"] .btn { border-radius: 0; }
[data-theme="terminal"] .btn-primary { background: var(--ink); color: var(--paper); }
[data-theme="terminal"] .btn-primary:hover { background: var(--brand-deep); }

[data-theme="terminal"] .site-footer::before { display: none; }
[data-theme="terminal"] .site-footer::after { display: none; }

/* ============================================================ */
/* THEME 5 — PAPER LEDGER (skeumorphic accountant's ledger)      */
/* ============================================================ */

[data-theme="paper"] {
  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --font-body:    "Source Serif 4", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --display-weight: 500;
  --display-tracking: -0.02em;

  /* Buff/cream paper tones — like aged ledger stock */
  --paper:    #f4ecd8;
  --section:  #f8f0dc;
  --section-2: #ede2c6;
  --ink:      #1a1408;
  --ink-soft: #3a2e1e;
  --muted:    #6b5942;
  --line:     #c9b58c;     /* warm khaki rule line */
  --line-soft:#d9c9a3;

  /* Oxblood / iron-gall ink red — classic ledger correction color */
  --brand:        #8a2418;
  --brand-deep:   #5a160e;
  --brand-tint:   #f0d9c9;

  --nav-bg:   #1a1408;
  --nav-ink:  #f4ecd8;
  --nav-stripes: none;
  --nav-border: #2a2210;

  --footer-bg: #1a1408;
  --footer-stripes: none;

  --hero-frame-bg: #ede2c6;
  --hero-frame-stripes: none;

  --shadow-brand: rgba(90, 22, 14, 0.2);

  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;

  --space-section: 96px;

  --hero-title-size: clamp(1.7rem, 3.5vw, 2.8rem);
  --section-title-size: clamp(1.5rem, 2.6vw, 2.2rem);
  --body-size: 17px;

  --em-color: #8a2418;
}

/* Ruled-paper background: faint horizontal lines like a ledger book,
   plus a single vertical column rule on the left. */
body[data-theme="paper"] {
  background:
    /* horizontal rule lines every 32px (approx the line-height of body type) */
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent 31px,
      rgba(60, 95, 70, 0.13) 31px,
      rgba(60, 95, 70, 0.13) 32px),
    /* paper grain */
    radial-gradient(ellipse at top, rgba(255, 240, 200, 0.4), transparent 60%),
    var(--paper);
  background-attachment: fixed, fixed, fixed;
  position: relative;
}

/* Vertical red margin rule on the left, like the date/ref-no margin on accounting paper. */
body[data-theme="paper"]::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(48px, calc((100% - var(--container-w)) / 2 + 60px));
  width: 1px;
  background: rgba(138, 36, 24, 0.32);
  pointer-events: none;
  z-index: 1;
}

/* Right-side column structure: a red rule separating description from the money columns,
   then three khaki vertical rules carving out Debit | Credit | Balance — like a real
   double-entry ledger. Drawn as multiple stops in a single linear-gradient. */
body[data-theme="paper"]::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  right: max(48px, calc((100% - var(--container-w)) / 2 + 60px));
  width: 360px;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgba(138, 36, 24, 0.32) 0,
      rgba(138, 36, 24, 0.32) 1px,
      transparent 1px 116px,
      rgba(201, 181, 140, 0.7) 116px,
      rgba(201, 181, 140, 0.7) 117px,
      transparent 117px 232px,
      rgba(201, 181, 140, 0.7) 232px,
      rgba(201, 181, 140, 0.7) 233px,
      transparent 233px 359px,
      rgba(201, 181, 140, 0.7) 359px,
      rgba(201, 181, 140, 0.7) 360px);
}

@media (max-width: 1100px) {
  body[data-theme="paper"]::after { display: none; }
}

@media (max-width: 900px) {
  body[data-theme="paper"]::before { display: none; }
}

[data-theme="paper"] .site-nav,
[data-theme="paper"] .hero,
[data-theme="paper"] .pain,
[data-theme="paper"] .features,
[data-theme="paper"] .cleanups,
[data-theme="paper"] .testimonials,
[data-theme="paper"] .how,
[data-theme="paper"] .trust,
[data-theme="paper"] .pricing-teaser,
[data-theme="paper"] .site-footer {
  background-color: transparent;
}

[data-theme="paper"] .site-nav { background: var(--nav-bg); }
[data-theme="paper"] .site-footer { background: var(--footer-bg); }

/* Sections with cards lay on the ruled paper too — keep them visually distinct
   by giving cards a slightly-warmer fill so they read like pasted-in slips. */
[data-theme="paper"] .site-nav::before { display: none; }
[data-theme="paper"] .site-footer::before,
[data-theme="paper"] .site-footer::after { display: none; }

[data-theme="paper"] .wm-text { font-family: var(--font-display); font-weight: 600; }
[data-theme="paper"] .nav-cta {
  background: var(--nav-ink);
  color: var(--ink);
}

/* Hero */
[data-theme="paper"] .hero-title {
  /* Pull headlines tight, all-caps for the inset emphasis feels too much — keep mixed case. */
  font-feature-settings: "ss01", "cv11";
}
[data-theme="paper"] .hero-title em {
  font-style: italic;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  color: var(--brand);
}

[data-theme="paper"] .hero-lede {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

[data-theme="paper"] .hero-meta,
[data-theme="paper"] .marks-label,
[data-theme="paper"] .marks-item,
[data-theme="paper"] .hero-marks,
[data-theme="paper"] .step-num,
[data-theme="paper"] .bucket-num,
[data-theme="paper"] .stat-label,
[data-theme="paper"] .quote figcaption,
[data-theme="paper"] .footer-col h4,
[data-theme="paper"] .footer-meta {
  font-family: var(--font-mono);
  color: var(--ink-soft);
}
[data-theme="paper"] .marks-label { color: var(--ink); }

[data-theme="paper"] .hero-video-frame {
  padding: 0;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 6px 6px 0 rgba(26, 20, 8, 0.18);
}
[data-theme="paper"] .hero-video-frame::before { display: none; }
[data-theme="paper"] .hero-video {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--ink);
}
[data-theme="paper"] .hero-video:last-child { border-bottom: none; }

/* Section titles get a ledger-style label above them (just a horizontal rule + small caps mono label).
   This replaces the eyebrow without re-introducing label clutter — it's structural, not decorative. */
[data-theme="paper"] .section-title {
  font-family: var(--font-display);
  position: relative;
  padding-top: 14px;
}
[data-theme="paper"] .section-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--brand);
}

/* Pain */
[data-theme="paper"] .pain { border-color: var(--line); }
[data-theme="paper"] .pain .pain-pun {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--brand-deep);
  border-left: 2px solid var(--brand);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
}

/* Buckets: each bucket reads like a labeled ledger column. */
[data-theme="paper"] .bucket-head { border-bottom: 1px solid var(--ink); }
[data-theme="paper"] .bucket-head h3 { font-family: var(--font-display); }
[data-theme="paper"] .bucket-num { color: var(--brand); }

[data-theme="paper"] .bucket-list li {
  background: var(--section);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
[data-theme="paper"] .bucket-list li:hover {
  border-color: var(--ink);
  box-shadow: 4px 4px 0 rgba(26, 20, 8, 0.12);
  transform: translate(-2px, -2px);
}
[data-theme="paper"] .bucket-list .ic {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
}
[data-theme="paper"] .bucket-list h4 { font-family: var(--font-display); font-weight: 500; }
[data-theme="paper"] .bucket-list p { font-family: "Source Serif 4", Georgia, serif; font-size: 1rem; }

/* Cleanups stats: render as a ledger entry table. */
[data-theme="paper"] .cleanups-stats {
  border-radius: 0;
  background: var(--section);
  border-color: var(--ink);
}
[data-theme="paper"] .cleanups-stats li { border-color: var(--line); }
[data-theme="paper"] .stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* Testimonials — pulled like quoted ledger entries with rule lines. */
[data-theme="paper"] .quote {
  border-radius: 0;
  background: var(--section);
  border-color: var(--line);
}
[data-theme="paper"] .quote-lead { background: var(--section-2); }
[data-theme="paper"] .quote blockquote {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400;
}
[data-theme="paper"] .quote-lead blockquote {
  font-style: italic;
  font-weight: 500;
}

/* Steps — numbered like ledger line items. */
[data-theme="paper"] .steps li {
  border-radius: 0;
  background: var(--section);
}
[data-theme="paper"] .step-num {
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
}
[data-theme="paper"] .steps h4 { font-family: var(--font-display); font-weight: 500; }
[data-theme="paper"] .steps p { font-family: "Source Serif 4", Georgia, serif; font-size: 1rem; }

/* Trust */
[data-theme="paper"] .trust-item {
  border-radius: 0;
  background: var(--section);
}
[data-theme="paper"] .trust-mark {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
}
[data-theme="paper"] .trust-item h4 { font-family: var(--font-display); font-weight: 500; }
[data-theme="paper"] .trust-item p { font-family: "Source Serif 4", Georgia, serif; }

/* Buttons — square, with a hand-stamped feel. */
[data-theme="paper"] .btn {
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}
[data-theme="paper"] .btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
[data-theme="paper"] .btn-primary:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  box-shadow: 4px 4px 0 rgba(26, 20, 8, 0.25);
  transform: translate(-2px, -2px);
}
[data-theme="paper"] .btn-primary:hover svg { transform: translateX(2px); }
[data-theme="paper"] .btn-secondary {
  background: var(--section);
  border-color: var(--ink);
  color: var(--ink);
}
[data-theme="paper"] .btn-secondary:hover {
  box-shadow: 4px 4px 0 rgba(26, 20, 8, 0.15);
  transform: translate(-2px, -2px);
}

/* Footer — overlay the dark band so background grid doesn't leak through. */
[data-theme="paper"] .site-footer { background: var(--footer-bg); color: rgba(244, 236, 216, 0.82); }
[data-theme="paper"] .site-footer .wm-text { color: var(--paper); }
[data-theme="paper"] .footer-tagline { color: rgba(244, 236, 216, 0.85); font-family: "Source Serif 4", Georgia, serif; font-style: italic; }
[data-theme="paper"] .footer-col h4 { color: rgba(244, 236, 216, 0.5); }
[data-theme="paper"] .site-footer a { color: rgba(244, 236, 216, 0.82); }
[data-theme="paper"] .site-footer a:hover { color: var(--paper); }
[data-theme="paper"] .site-footer address { color: rgba(244, 236, 216, 0.78); font-family: "Source Serif 4", Georgia, serif; }

/* The container has to sit above the vertical margin rule. */
[data-theme="paper"] .container { position: relative; z-index: 2; }