/* ===============================================
   lvrd.ai — marketing site
   Builds on LVRD foundations + marketing kit
   =============================================== */
@import url("./colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  /* Smooth in-page anchor scrolling, and offset for the sticky header
     so #book / #top land below it instead of underneath. */
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* Stop iOS from inflating type when rotating to landscape. */
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  /* Belt-and-suspenders against a stray wide child causing the whole
     page to scroll sideways on small screens. */
  overflow-x: hidden;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.site-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.wordmark {
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-strong);
  text-decoration: none;
  border-bottom: 0;
  font-size: 18px;
  line-height: 1;
}
.site-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}
@media (max-width: 720px) { .header-meta { display: none; } }

/* ---------- Site nav (desktop) ---------- */
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  margin-right: 24px;
}
.site-nav-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 0;
  letter-spacing: 0.005em;
  padding: 4px 0;
  position: relative;
  transition: color var(--duration-fast) var(--easing-default);
}
.site-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-fast) var(--easing-default);
}
.site-nav-link:hover { color: var(--fg-strong); }
.site-nav-link:hover::after,
.site-nav-link:focus-visible::after { transform: scaleX(1); }
.site-nav-link:focus-visible {
  outline: 0;
  color: var(--fg-strong);
}

/* Hamburger toggle (mobile-only by default) */
.site-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: 40px;
  height: 36px;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing-default);
}
.site-nav-toggle:hover { border-color: var(--accent); }
.site-nav-toggle:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-color: var(--accent); }
.site-nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--fg-strong);
  border-radius: 1px;
  transition: transform var(--duration-fast) var(--easing-default),
              opacity var(--duration-fast) var(--easing-default);
}
.site-nav-toggle.is-active .site-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle.is-active .site-nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-nav-toggle.is-active .site-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile breakpoint: swap inline nav + CTA for hamburger */
@media (max-width: 720px) {
  .site-nav { display: none; }
  .site-header-cta { display: none; }
  .site-nav-toggle { display: inline-flex; }
}

/* Compact desktop spacing so nav doesn't crowd the wordmark on mid widths */
@media (max-width: 960px) and (min-width: 721px) {
  .site-nav { gap: 20px; margin-right: 16px; }
  .site-nav-link { font-size: 13px; }
}

/* Body scroll lock while mobile overlay is open */
body.site-nav-open { overflow: hidden; }

/* ---------- Site nav overlay (mobile) ---------- */
.site-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--easing-default);
}
.site-nav-overlay[hidden] { display: none; }
.site-nav-overlay.is-open { opacity: 1; pointer-events: auto; }

.site-nav-overlay-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--bg) 70%, rgba(0, 0, 0, 0.35));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.site-nav-overlay-panel {
  position: relative;
  width: min(360px, 100%);
  max-width: 100%;
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--border-strong);
  padding: 24px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateX(16px);
  transition: transform 220ms var(--easing-default);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18);
}
.site-nav-overlay.is-open .site-nav-overlay-panel { transform: translateX(0); }

.site-nav-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-nav-overlay-wordmark {
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--fg-strong);
}
.site-nav-close {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-strong);
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing-default);
}
.site-nav-close:hover { border-color: var(--accent); color: var(--accent); }
.site-nav-close:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-color: var(--accent); }

.site-nav-overlay-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.site-nav-overlay-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--fg-strong);
  text-decoration: none;
  border-bottom: 0;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border-strong) 60%, transparent);
  transition: color var(--duration-fast) var(--easing-default);
}
.site-nav-overlay-link:hover { color: var(--accent); }
.site-nav-overlay-link:focus-visible {
  outline: 0;
  color: var(--accent);
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
  padding-left: 8px;
  padding-right: 8px;
}

.site-nav-overlay-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 15px;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default),
    gap var(--duration-fast) var(--easing-default);
}
.btn-primary { background: var(--accent); color: var(--fg-on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); gap: 14px; }
.btn-primary:active { background: var(--accent-press); border-color: var(--accent-press); }

.btn-ghost { background: transparent; color: var(--fg-strong); border-color: transparent; padding: 11px 16px; }
.btn-ghost:hover { background: var(--surface); }

.btn-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hero-cta-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-faint);
  margin-top: 4px;
}

.btn-ghost-sm {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--fg-strong);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  transition: all var(--duration-fast) var(--easing-default);
}
.btn-ghost-sm:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost-sm:focus-visible { box-shadow: var(--focus-ring); border-color: var(--accent); }

/* ---------- Sections ---------- */
section { padding: 128px 0; }
.section-surface { background: var(--surface); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 500;
}
.eyebrow .n { color: var(--fg-faint); }
.eyebrow .bar { width: 24px; height: 1px; background: var(--border-strong); display: inline-block; }

/* ---------- Hero ---------- */
.hero { padding: 144px 0 128px; }
.hero-headline {
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--fg-strong);
  max-width: 16ch;
  margin: 32px 0 32px;
  text-wrap: balance;
}
.hero-headline em {
  /* Force Instrument Serif here — the hero pivot is locked to it,
     even if --font-serif gets swapped at the brand level. */
  font-family: "Instrument Serif", "Iowan Old Style", "Hoefler Text", Georgia, serif;
}
.hero-subhead {
  font-size: 22px;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 32ch;
  margin: 0 0 56px;
  font-weight: 400;
}
.hero-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.hero-cta-line {
  font-size: 14px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ---------- Beat 1 — pain ---------- */
.beat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
}
.beat-head h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 24px 0 0;
  text-wrap: balance;
  max-width: 14ch;
}
.beat-head h2 em {
  /* The pivot: "You'll get home at nine." / "You barely touched any of it." */
  display: block;
  margin-top: 0.28em;
  letter-spacing: -0.015em;
}
.beat-body p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg);
  max-width: 52ch;
  margin: 0 0 20px;
}
.beat-body p:last-child { margin-bottom: 0; }

/* The pain "pile" — a column of overlapping job slips */
.pile {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pile-row {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  position: relative;
  isolation: isolate;
  /* Entry: each row fades up; staggered via nth-child below.
     Paper-pile X-offset lives in --x so it composes with the
     translateY used for entry. Slow + heavy easing — these
     items carry emotional weight; let them land. */
  --x: 0px;
  opacity: 0;
  transform: translate(var(--x), 28px);
  transition:
    opacity 1100ms var(--easing-subtle),
    transform 1100ms var(--easing-subtle),
    background-color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default),
    padding-left var(--duration-default) var(--easing-default),
    box-shadow var(--duration-default) var(--easing-default);
}
.pile.in-view .pile-row {
  opacity: 1;
  transform: translate(var(--x), 0);
}
.pile-row > * {
  position: relative;
  transition: color var(--duration-fast) var(--easing-default);
}
/* Hover: dark mode shows up fully (no slide), the card nudges
   inward by a few px and lifts on a soft shadow so the touch
   feels weighted. */
.pile-row:hover,
.pile-row:focus-within {
  background: var(--smoke-900);
  border-color: var(--smoke-900);
  padding-left: 26px;
  box-shadow: 0 10px 28px -16px rgba(13, 17, 38, 0.45);
}
.pile-row:hover .who,
.pile-row:focus-within .who { color: var(--smoke-400); }
.pile-row:hover .what,
.pile-row:focus-within .what { color: #FFFFFF; }
.pile-row:hover .when,
.pile-row:focus-within .when { color: var(--smoke-300); }

.pile-row .who {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.pile-row .what { color: var(--fg-strong); }
.pile-row .when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  letter-spacing: 0.04em;
}
.pile-row.overdue .when { color: var(--smoke-700); }
/* Paper-pile horizontal stagger, expressed as the composable --x. */
.pile-row:nth-child(odd) { --x: -8px; }
.pile-row:nth-child(3n)  { --x: 4px; }
/* Entry stagger — each row trails the one above. Heavier 140ms
   beat between rows so the sequence feels deliberate, not a flurry. */
.pile-row:nth-child(1) { transition-delay: 0ms,    0ms,    0ms, 0ms, 0ms, 0ms; }
.pile-row:nth-child(2) { transition-delay: 140ms,  140ms,  0ms, 0ms, 0ms, 0ms; }
.pile-row:nth-child(3) { transition-delay: 280ms,  280ms,  0ms, 0ms, 0ms, 0ms; }
.pile-row:nth-child(4) { transition-delay: 420ms,  420ms,  0ms, 0ms, 0ms, 0ms; }
.pile-row:nth-child(5) { transition-delay: 560ms,  560ms,  0ms, 0ms, 0ms, 0ms; }
.pile-row:nth-child(6) { transition-delay: 700ms,  700ms,  0ms, 0ms, 0ms, 0ms; }
.pile-row:nth-child(7) { transition-delay: 840ms,  840ms,  0ms, 0ms, 0ms, 0ms; }
@media (prefers-reduced-motion: reduce) {
  .pile-row { opacity: 1; transform: translate(var(--x), 0); transition: none; }
}

/* ---------- Three hats (E-Myth frame) ---------- */
.hats { padding: 128px 0 128px; }
.hats-head {
  max-width: 880px;
  margin-bottom: 80px;
}
.hats-head h2 {
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 28px 0 32px;
  text-wrap: balance;
  max-width: 18ch;
}
.hats-head h2 em {
  display: block;
  margin-top: 0.18em;
}
.hats-intro {
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg-muted);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}
.hats-intro strong {
  color: var(--fg-strong);
  font-weight: 500;
}

.hats-list {
  list-style: none;
  margin: 0 0 72px;
  padding: 0;
  border-top: 1px solid var(--border);
}
.hat {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
  transition:
    background var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
}
.hat-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  align-self: start;
  padding-top: 12px;
}
.hat-body { max-width: 64ch; }
.hat-name {
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  margin: 0 0 12px;
  text-wrap: balance;
}
.hat-name em {
  display: inline;
  margin: 0;
  letter-spacing: -0.02em;
}
.hat-desc {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
  max-width: 52ch;
}
.hat-agents {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--fg-faint);
  max-width: 56ch;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hat-agents .arrow {
  font-family: var(--font-mono);
  color: var(--accent);
  flex-shrink: 0;
}
.hat-agents .names {
  font-family: var(--font-sans);
  color: var(--fg-subtle);
  letter-spacing: -0.005em;
}
/* Dim the agent hints on handed rows, but a touch less than the
   description so the names stay legible as the takeaway. */
.hat[data-state="handed"] .hat-agents .names { color: var(--fg-faint); }
.hat-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  white-space: nowrap;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  margin-top: 14px;
}
.hat-status .status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-faint);
}

/* Handed-off rows: dimmed across the board so the eye lifts to the
   third hat. Number, name, and copy all step down a tone. */
.hat[data-state="handed"] .hat-num   { color: var(--fg-disabled); }
.hat[data-state="handed"] .hat-name  { color: var(--fg-subtle); }
.hat[data-state="handed"] .hat-desc  { color: var(--fg-faint); }

/* The Entrepreneur row: full strength, with the name in the brand
   serif italic (em color comes from the global em rule). Status pill
   picks up the accent. */
.hat[data-state="yours"] .hat-status {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-on-accent);
}
.hat[data-state="yours"] .hat-status .status-dot { background: var(--fg-on-accent); }

.hats-close {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  text-align: left;
  max-width: 44ch;
  margin: 0;
  text-wrap: balance;
  font-weight: 500;
}
.hats-close em {
  display: inline;
  margin: 0;
}

@media (max-width: 720px) {
  .hats { padding: 88px 0; }
  .hat {
    grid-template-columns: 40px 1fr;
    gap: 20px;
    padding: 28px 0;
  }
  .hat-status {
    grid-column: 2;
    margin-top: 0;
    align-self: start;
    justify-self: start;
  }
  .hats-head { margin-bottom: 56px; }
  .hats-list { margin-bottom: 56px; }
}

/* ---------- Slab (dark card above canvas) ---------- */
.slab {
  background: var(--bg);                 /* flips to dark via .dark scope */
  color: var(--fg);
  border-radius: var(--radius-lg);
  padding: 88px 80px;
  box-shadow: var(--shadow-3);
  /* Slight outward breathing room so the slab feels like it floats
     above the canvas rather than locks into the column. */
  margin: 0 -16px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.slab > * { position: relative; z-index: 1; }

/* ---------- Mesh gradient bg (inside dark slabs only) ----------
   Four very blurred orbs in the brand Deep Spectrum drift behind
   the content. Tuned subtle: low opacity, long durations, large
   blur radii. Composes with the .dark canvas as atmosphere, not
   activity. */
.mesh-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.mesh-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.mesh-orb.m1 {
  width: 60%; height: 60%;
  left: -10%; top: -10%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--marian) 35%, transparent) 0%,
    transparent 70%);
  filter: blur(80px);
  animation: meshMove1 60s ease-in-out infinite;
}
.mesh-orb.m2 {
  width: 50%; height: 50%;
  right: -5%; top: 10%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--astronaut) 45%, transparent) 0%,
    transparent 70%);
  filter: blur(100px);
  animation: meshMove2 80s ease-in-out infinite;
}
.mesh-orb.m3 {
  width: 70%; height: 55%;
  left: 20%; bottom: -15%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--space) 60%, transparent) 0%,
    transparent 70%);
  filter: blur(120px);
  animation: meshMove3 90s ease-in-out infinite;
}
.mesh-orb.m4 {
  width: 40%; height: 40%;
  left: 40%; top: 30%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--marian-lift) 22%, transparent) 0%,
    transparent 70%);
  filter: blur(90px);
  animation: meshMove4 70s ease-in-out infinite;
}

/* ---------- Marian slab (inverted: bright bg, dark orbs) ---------- */
/* Used on the Door section. Background flips to the brand Marian
   blue; the mesh palette inverts to the darker spectrum so the
   orbs read as deeper navy patches drifting across the field. */
.slab.marian {
  background: var(--marian);
  color: #FFFFFF;
  /* Token overrides so everything in the slab inherits a coherent
     on-marian palette without having to per-element restyle. */
  --bg:           var(--marian);
  --surface:      oklch(0.46 0.135 269);
  --surface-2:    oklch(0.50 0.135 269);
  --border:       rgba(255, 255, 255, 0.14);
  --border-strong:rgba(255, 255, 255, 0.28);
  --fg:           #FFFFFF;
  --fg-strong:    #FFFFFF;
  --fg-muted:     oklch(0.92 0.04 269);
  --fg-subtle:    oklch(0.82 0.06 269);
  --fg-faint:     oklch(0.70 0.08 269);
  --fg-disabled:  oklch(0.55 0.10 269);
  --accent:       #FFFFFF;
  --accent-hover: rgba(255, 255, 255, 0.85);
  --fg-on-accent: var(--marian);
}
/* Serif italic emphasis lands white inside the marian slab — same
   pattern as inside .dark, just routed via this token override. */
.slab.marian em, .slab.marian .serif { color: #FFFFFF; }

/* Reveal-words start state on marian: a darker navy mix so the
   words emerge from the field, then resolve to white via inherit. */
.slab.marian .reveal-words .word {
  color: color-mix(in oklab, var(--marian) 65%, var(--windsor) 35%);
}
/* Lit override at matching specificity — without this, the rule
   above out-specifies the generic .word.lit color and the words
   never resolve. */
.slab.marian .reveal-words .word.lit { color: inherit; }

/* Inverted mesh palette — windsor → space → astronaut as dark orbs
   on the marian field. Saturations bumped so they read on the
   brighter background. */
.slab.marian .mesh-orb.m1 {
  background: radial-gradient(circle,
    color-mix(in oklab, var(--windsor) 65%, transparent) 0%,
    transparent 70%);
}
.slab.marian .mesh-orb.m2 {
  background: radial-gradient(circle,
    color-mix(in oklab, var(--space) 55%, transparent) 0%,
    transparent 70%);
}
.slab.marian .mesh-orb.m3 {
  background: radial-gradient(circle,
    color-mix(in oklab, var(--astronaut) 50%, transparent) 0%,
    transparent 70%);
}
.slab.marian .mesh-orb.m4 {
  background: radial-gradient(circle,
    color-mix(in oklab, var(--windsor) 35%, transparent) 0%,
    transparent 70%);
}
.slab.marian .mesh-noise { opacity: 0.05; }

/* On the marian slab, the door-list cards invert their hover state:
   the slide-up fill rises in LIGHT mode (smoke-50 background, dark
   text) so the card pops as a bright tile against the brand blue —
   the mirror of the dark hover used on the light canvas. */
.slab.marian .door-list li::before { background: var(--smoke-50); }
.slab.marian .door-list li:hover,
.slab.marian .door-list li:focus-within {
  border-color: var(--smoke-50);
}
.slab.marian .door-list li:hover > .n,
.slab.marian .door-list li:focus-within > .n { color: var(--smoke-500); }
.slab.marian .door-list li:hover > .label,
.slab.marian .door-list li:focus-within > .label { color: var(--smoke-900); }

.slab.dark .door-list li::before { background: var(--smoke-50); }
.slab.dark .door-list li:hover,
.slab.dark .door-list li:focus-within {
  border-color: var(--smoke-50);
}
.slab.dark .door-list li:hover > .n,
.slab.dark .door-list li:focus-within > .n { color: var(--smoke-500); }
.slab.dark .door-list li:hover > .label,
.slab.dark .door-list li:focus-within > .label { color: var(--smoke-900); }
.mesh-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes meshMove1 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  25%      { transform: translate(5%, 10%)  scale(1.05); }
  50%      { transform: translate(10%, 5%)  scale(0.95); }
  75%      { transform: translate(5%, -5%)  scale(1.02); }
}
@keyframes meshMove2 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  33%      { transform: translate(-10%, 8%) scale(1.08); }
  66%      { transform: translate(-5%, -5%) scale(0.95); }
}
@keyframes meshMove3 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  50%      { transform: translate(-8%, -10%) scale(1.1); }
}
@keyframes meshMove4 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  25%      { transform: translate(15%, -10%) scale(0.9); }
  50%      { transform: translate(-10%, 15%) scale(1.1); }
  75%      { transform: translate(-15%, -5%) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-orb { animation: none; }
}
/* Give the log column more horizontal room so each entry sits on
   no more than two lines. */
.slab .beat {
  grid-template-columns: 4fr 7fr;
  gap: 64px;
}

/* ---------- Reveal-on-scroll utility ---------- */
/* Elements with .reveal-left start offset to the left + transparent;
   the IntersectionObserver in the page adds .in-view when they cross
   into view, sliding them home. Slow + smooth easing so the gesture
   feels weighted. */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 900ms var(--easing-subtle),
    transform 900ms var(--easing-subtle);
  transition-delay: 200ms;
}
.reveal-left.in-view {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-left { opacity: 1; transform: none; transition: none; }
}

/* Letter-by-letter variant — JS in the page wraps each non-space
   character in a `.ch` span and stamps a staggered transition-delay
   on it. The first letter stays anchored (no animation) so the
   sentence feels like it grows out from its leading character. */
.reveal-letters .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.22em);
  transition:
    opacity 380ms var(--easing-subtle),
    transform 380ms var(--easing-subtle);
}
.reveal-letters .ch:first-child {
  opacity: 1;
  transform: none;
  transition-delay: 0ms !important;
}
.reveal-letters.in-view .ch {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-letters .ch { opacity: 1; transform: none; transition: none; }
}

/* ---------- Pull quote (callout under the beat header) ---------- */
.pull-quote {
  margin: 56px 0 0;
  padding: 0;
  max-width: 24ch;
}
.pull-quote::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 28px;
}
.pull-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  color: var(--fg-strong);
  margin: 0;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
/* Word-by-word color reveal — JS in the page wraps each word in a
   `.word` span and sets `.lit` on it as the host element scrolls
   through view, left to right. Works on any element carrying the
   class. The final colour is inherited so each emphasis block lands
   in its native colour (brand blue inside `<em>`, fg-strong inside
   pull-quotes, white inside dark slabs, etc.). */
.reveal-words .word {
  color: var(--smoke-100);
  transition: color 240ms var(--easing-default);
}
.dark .reveal-words .word {
  /* On dark surfaces the words start near the bg, then resolve. */
  color: var(--smoke-800);
}
.reveal-words .word.lit { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .reveal-words .word { color: inherit; transition: none; }
}

/* Centered variant — used inside the .door section. */
.pull-quote.center {
  margin: 24px auto 0;
  max-width: 36ch;
  text-align: center;
}
.pull-quote.center::before {
  margin-left: auto;
  margin-right: auto;
}
.pull-quote.center p { font-size: clamp(22px, 2.4vw, 32px); }

@media (max-width: 960px) {
  .pull-quote { margin-top: 32px; max-width: 36ch; }
  .pull-quote::before { width: 40px; margin-bottom: 20px; }
}
@media (max-width: 960px) {
  .slab { padding: 56px 40px; margin: 0; }
}
@media (max-width: 560px) {
  .slab { padding: 48px 24px; border-radius: var(--radius-md); }
}

/* ---------- Beat 2 — relief log ---------- */
.relief-card {
  margin-top: 32px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 32px;
}
.relief-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.relief-card-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-strong);
}
.relief-card-day {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.log-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--border) 70%, transparent);
}
.log-row:last-child { border-bottom: 0; }
.log-row .t {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}
.log-row .e {
  font-size: 15px;
  color: var(--fg-strong);
  line-height: 1.5;
}
.log-row .e .muted { color: var(--fg-muted); }
.log-row .by {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  text-transform: none;
}
.log-row .by::before {
  content: "— ";
  color: var(--fg-faint);
  margin-right: 2px;
}
.log-row .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ---------- Beat 3 — the door ---------- */
.door {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.door h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 24px 0 32px;
  text-wrap: balance;
}
.door h2 em {
  display: block;
  margin-top: 0.28em;
  letter-spacing: -0.015em;
}
.door p {
  font-size: 20px;
  line-height: 1.6;
  color: var(--fg);
  max-width: 56ch;
  margin: 0 auto 22px;
  text-wrap: pretty;
}
.door p.lede { color: var(--fg-strong); font-weight: 500; }
.door .eyebrow { justify-content: center; }
.door-list {
  list-style: none;
  margin: 56px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 880px;
}
.door-list li {
  background: var(--bg);
  padding: 28px 24px;
  text-align: left;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}
/* Hover: a dark slab rises from the bottom edge, taking the card
   into dark mode. On leave, it retreats the way it came. */
.door-list li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--smoke-900);
  z-index: -1;
  transition: height var(--duration-default) var(--easing-default);
  will-change: height;
}
.door-list li:hover::before,
.door-list li:focus-within::before { height: 100%; }
.door-list li > .n,
.door-list li > .label { transition: color var(--duration-default) var(--easing-default); }
.door-list li:hover > .n,
.door-list li:focus-within > .n { color: var(--smoke-400); }
.door-list li:hover > .label,
.door-list li:focus-within > .label { color: #FFFFFF; }
.door-list li .n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.door-list li .label {
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-strong);
  line-height: 1.4;
}

/* ---------- Close — calendar ---------- */
.close-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 64px;
  align-items: start;
  min-width: 0;
}
.close-intro h2 {
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 24px 0 24px;
  text-wrap: balance;
}
.close-intro p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 30ch;
  margin: 0 0 40px;
}
.signature {
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.signature .name {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-strong);
}
.signature .role {
  font-size: 14px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.signature .email {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.signature .email:hover { border-bottom-color: var(--accent); }

/* ---------- Calendar widget ---------- */
.cal {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 240px;
  min-height: 460px;
  min-width: 0;
}
.cal > * { min-width: 0; }
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  grid-column: 1 / -1;
}
.cal-head-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-strong);
}
.cal-head-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.cal-head-meta .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}

/* Month grid */
.cal-month {
  padding: 24px;
  border-right: 1px solid var(--border);
}
.cal-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cal-month-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-strong);
}
.cal-nav {
  display: flex;
  gap: 4px;
}
.cal-nav button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--easing-default);
}
.cal-nav button:hover { border-color: var(--accent); color: var(--accent); }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-dow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-align: center;
  padding: 8px 0 12px;
}
.cal-day {
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-default);
}
.cal-day.dim { color: var(--fg-disabled); cursor: default; }
.cal-day.dim:hover { background: transparent; }
.cal-day:hover { background: var(--surface); color: var(--fg-strong); }
.cal-day.available {
  position: relative;
  color: var(--fg-strong);
  font-weight: 500;
  /* Lift the number to clear the availability dot below it. */
  padding-bottom: 10px;
}
.cal-day.available::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.cal-day.selected {
  background: var(--accent);
  color: var(--fg-on-accent);
}
.cal-day.selected::after { background: var(--fg-on-accent); }
.cal-day.today {
  outline: 1px solid var(--border-strong);
  outline-offset: -2px;
}

/* Times */
.cal-times {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
}
#cal-slots-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-times-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 8px;
}
.cal-times-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-strong);
  margin-bottom: 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.cal-slot {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-strong);
  cursor: pointer;
  text-align: left;
  transition: all var(--duration-fast) var(--easing-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.cal-slot > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cal-slot:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cal-slot.confirm {
  background: var(--accent);
  color: var(--fg-on-accent);
  border-color: var(--accent);
}
.cal-slot.confirm:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--fg-on-accent);
}
.cal-slot-arrow { opacity: 0; transform: translateX(-4px); transition: all var(--duration-fast) var(--easing-default); }
.cal-slot.confirm .cal-slot-arrow { opacity: 1; transform: translateX(0); }

/* ---------- Footer ---------- */
.site-footer { padding: 56px 0 48px; }
.site-footer .lvrd-accent-line { margin-bottom: 56px; }
.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}

/* Accent line wrapper */
.lvrd-accent-line {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--accent-line);
  border: 0;
}

/* Breath */
.breath-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: breath 2.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  vertical-align: middle;
}
@keyframes breath {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* ---------- Tuesday section — combined before/after toggle ---------- */
/* Replaces the old separate pain (.beat) + relief (.relief-card) beats
   with a single section the user can flip. Each row in the day card
   stacks a .rb (before) and .ra (after) child in the same grid cell;
   CSS shows one or the other based on the section's data-state. The
   card itself transforms its visual skin between a light pile and a
   dark mesh-lit log so the comparison reads at a glance. */
.tuesday-section {
  padding: 128px 0;
  position: relative;
}
.tuesday-head {
  max-width: 920px;
  margin-bottom: 64px;
}
.tuesday-head h2 {
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 24px 0 32px;
  text-wrap: balance;
  max-width: 18ch;
}
.tuesday-head h2 em {
  display: block;
  margin-top: 0.2em;
  letter-spacing: -0.015em;
}
.tuesday-head h2 span[data-show],
.pivot-eyebrow span[data-show] {
  /* Allow inline-block so the spans don't break the flow but can
     animate independently if we later want crossfades. */
  display: inline;
}

/* Show/hide pivot content based on section state. !important because
   several pivot spans live inside elements with their own display
   rules (eyebrow, em, p) — this is the canonical override. */
.tuesday-section[data-state="before"] [data-show="after"] { display: none !important; }
.tuesday-section[data-state="after"]  [data-show="before"] { display: none !important; }

/* ---------- Toggle (segmented control, sliding thumb) ---------- */
.t-toggle {
  margin: 8px 0 0;
  display: block;
}
.t-track {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  padding: 4px;
  border: 1px solid var(--border);
  min-width: 380px;
  isolation: isolate;
}
.t-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--smoke-900);
  border-radius: var(--radius-full);
  transition: transform 420ms var(--easing-default);
  z-index: 0;
  box-shadow: 0 4px 14px -6px rgba(13, 17, 38, 0.35);
}
.tuesday-section[data-state="after"] .t-thumb { transform: translateX(100%); }
.t-opt {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  padding: 11px 18px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  transition: color 320ms var(--easing-default);
  min-height: 40px;
}
.t-opt[aria-selected="true"] { color: #FFFFFF; }
.t-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-full);
}
.t-opt .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-disabled);
  transition: background 320ms var(--easing-default), transform 320ms var(--easing-default);
}
.t-opt[aria-selected="true"] .dot {
  background: var(--accent);
  transform: scale(1.15);
}

/* ---------- Body grid (text left, card right) ---------- */
.t-body {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: start;
}
.t-body-text { max-width: 44ch; }
.t-body-text .pull-quote { margin-top: 0; }
.t-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg);
  margin: 32px 0 0;
  text-wrap: pretty;
}

/* ---------- The day card ---------- */
.t-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-md);
  padding: 28px 32px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg-strong);
  /* Skin-flip transition: bg + border + text colors all glide together
     so the card feels like one object changing state, not seven. */
  transition:
    background 620ms var(--easing-default),
    border-color 620ms var(--easing-default),
    color 620ms var(--easing-default),
    box-shadow 620ms var(--easing-default);
}
.t-card > * { position: relative; z-index: 1; }
.t-card .mesh-bg {
  z-index: 0;
  opacity: 0;
  transition: opacity 720ms var(--easing-default);
}
.tuesday-section[data-state="after"] .t-card {
  background: oklch(0.16 0.018 269);     /* deep navy-tinted near-black */
  border-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  box-shadow: 0 24px 56px -28px rgba(13, 17, 38, 0.55);
}
.tuesday-section[data-state="after"] .t-card .mesh-bg { opacity: 1; }
.tuesday-section[data-state="after"] .t-card .mesh-noise { opacity: 0.06; }

.t-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  transition: border-color 620ms var(--easing-default);
}
.tuesday-section[data-state="after"] .t-card-head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.t-card-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-strong);
  transition: color 620ms var(--easing-default);
}
.tuesday-section[data-state="after"] .t-card-title { color: #FFFFFF; }
.t-card-day {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  transition: color 620ms var(--easing-default);
}
.tuesday-section[data-state="after"] .t-card-day {
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Rows: stack .rb and .ra in same grid cell ---------- */
.t-rows { display: flex; flex-direction: column; }
.t-row {
  display: grid;
  grid-template-areas: "stack";
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--border) 70%, transparent);
  transition: border-color 620ms var(--easing-default);
}
.t-row:last-child { border-bottom: 0; }
.tuesday-section[data-state="after"] .t-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.t-row > .rb,
.t-row > .ra {
  grid-area: stack;
  transition:
    opacity 380ms var(--easing-default),
    transform 380ms var(--easing-default);
}

/* Outbound (the state being left): instant exit, slight slide. */
.tuesday-section[data-state="before"] .t-row > .ra {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
.tuesday-section[data-state="after"] .t-row > .rb {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

/* Inbound (the state being entered): default to hidden until the
   section is .in-view. On state change after that, transition runs
   naturally. Stagger via --idx so the rows arrive in sequence. */
.tuesday-section[data-state="before"] .t-row > .rb,
.tuesday-section[data-state="after"]  .t-row > .ra {
  opacity: 0;
  transform: translateY(10px);
}
.tuesday-section.in-view[data-state="before"] .t-row > .rb,
.tuesday-section.in-view[data-state="after"]  .t-row > .ra {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--idx, 0) * 55ms + 80ms);
}
@media (prefers-reduced-motion: reduce) {
  .t-row > .rb,
  .t-row > .ra { transition: none; transform: none !important; }
  .tuesday-section.in-view[data-state="before"] .t-row > .rb,
  .tuesday-section.in-view[data-state="after"]  .t-row > .ra { transition-delay: 0ms !important; }
}

/* ---------- Before-state row (pile-style) ---------- */
.t-row .rb {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 16px;
  align-items: baseline;
}
.t-row .rb .who {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.t-row .rb .what {
  color: var(--fg-strong);
  font-size: 15px;
  line-height: 1.45;
}
.t-row .rb .when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---------- After-state row (log-style on dark) ---------- */
.t-row .ra {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: baseline;
}
.t-row .ra .t {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}
.t-row .ra .e {
  font-size: 15px;
  color: #FFFFFF;
  line-height: 1.5;
}
.t-row .ra .e .muted { color: rgba(255, 255, 255, 0.7); }
.t-row .ra .by {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}
.t-row .ra .by::before { content: "— "; }
.t-row .ra .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  align-self: start;
  white-space: nowrap;
}

/* ---------- Tuesday section responsive ---------- */
@media (max-width: 960px) {
  .tuesday-section { padding: 96px 0; }
  .t-body { grid-template-columns: 1fr; gap: 40px; }
  .tuesday-head { margin-bottom: 40px; }
  .tuesday-head h2 { max-width: none; }
  .t-track { min-width: 0; width: 100%; }
}
@media (max-width: 560px) {
  .tuesday-section { padding: 72px 0; }
  .t-card { padding: 20px 18px; }
  .t-card-head { padding-bottom: 14px; }
  .t-row { padding: 14px 0; }

  /* Stack each row state's meta line above the message — matches the
     mobile pattern used elsewhere for the log-style rows. */
  .t-row .rb {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
  }
  .t-row .rb .who { grid-column: 1; grid-row: 1; }
  .t-row .rb .when { grid-column: 2; grid-row: 1; justify-self: end; }
  .t-row .rb .what { grid-column: 1 / -1; grid-row: 2; }

  .t-row .ra {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
  }
  .t-row .ra .t { grid-column: 1; grid-row: 1; }
  .t-row .ra .tag { grid-column: 2; grid-row: 1; justify-self: end; }
  .t-row .ra .e { grid-column: 1 / -1; grid-row: 2; font-size: 14.5px; }

  /* Toggle: keep both options readable, tighten padding. The dot is
     redundant once the thumb's color does the work. */
  .t-opt { padding: 12px 12px; font-size: 13px; min-height: 44px; gap: 8px; }
  .t-opt .dot { display: none; }
  .t-lede { font-size: 16.5px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .container { padding-left: 32px; padding-right: 32px; }
  section { padding: 96px 0; }
  .hero { padding: 96px 0; }
  .beat,
  .slab .beat { grid-template-columns: 1fr; gap: 48px; }
  .close-grid { grid-template-columns: 1fr; gap: 48px; }
  .cal { grid-template-columns: 1fr; min-height: 0; max-width: 520px; }
  .cal-month { border-right: 0; border-bottom: 1px solid var(--border); }
  .cal-day { aspect-ratio: auto; height: 38px; }
  .door-list { grid-template-columns: 1fr; }

  /* Beat headers: don't constrain the headline to 14ch on mobile — it
     truncates the pivot line too aggressively. */
  .beat-head h2 { max-width: none; }
  .beat-body p { font-size: 16.5px; }
}
@media (max-width: 560px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .site-header-inner { padding: 16px 20px; gap: 16px; }
  .hero { padding: 56px 0 72px; }
  section { padding: 64px 0; }
  .hero-headline { margin-top: 24px; }
  .hero-subhead { font-size: 18px; margin-bottom: 40px; }
  .hero-cta-wrap .btn-primary {
    /* Full-width primary CTA reads as "the action" on a phone. */
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
  }
  .pile-row { grid-template-columns: 64px 1fr; padding: 12px 14px; gap: 12px; }
  .pile-row .when { grid-column: 2; padding-top: 4px; }
  /* Reset the paper-pile X-stagger on phones — at this width the
     offset just looks like ragged alignment, not intentional. */
  .pile-row:nth-child(odd),
  .pile-row:nth-child(3n) { --x: 0px; }

  /* Beat 2 relief log — restructure each row so the message gets the
     full width and time / tag sit together on a meta line above. */
  .relief-card { padding: 22px 18px; margin-top: 24px; }
  .relief-card-head { padding-bottom: 14px; }
  .relief-card-day { font-size: 10px; }
  .log-row {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 14px 0;
  }
  .log-row .t { grid-row: 1; grid-column: 1; }
  .log-row .tag { grid-row: 1; grid-column: 2; justify-self: end; }
  .log-row .e { grid-row: 2; grid-column: 1 / -1; font-size: 14.5px; }
  .log-row .by { margin-top: 4px; }

  /* Door list cards a hair tighter so they don't dominate the slab. */
  .door-list li { padding: 22px 20px; }

  /* Door section copy + headline tightened for phones. */
  .door p { font-size: 17px; }
  .door .pull-quote.center p { font-size: 22px; }

  /* Calendar polish — the time slots are the actual booking action,
     so size them like primary tap targets. */
  .cal-times { padding: 20px; }
  .cal-slot { padding: 14px 16px; font-size: 14px; min-height: 48px; }
  .cal-day { font-size: 14px; height: 42px; }

  /* Sticky-header anchor offset shrinks with the header. */
  html { scroll-padding-top: 64px; }

  /* Footer reads cleaner stacked on a phone. */
  .site-footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer { padding: 40px 0 32px; }
  .site-footer .lvrd-accent-line { margin-bottom: 32px; }
}

@media (max-width: 380px) {
  /* The very small end — Galaxy Fold cover, old iPhones. Pull
     padding in further and let the pile rows go single-column. */
  .container { padding-left: 16px; padding-right: 16px; }
  .pile-row { grid-template-columns: 1fr; }
  .pile-row .who { font-size: 10px; }
  .pile-row .when { grid-column: 1; padding-top: 2px; }
}

/* ---------- Operator preview ---------- */
.op {
  padding-top: 96px;
  padding-bottom: 96px;
}
.op-slab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin: 0 -16px;
  padding: 72px 72px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-3);
  transition:
    background var(--duration-default) var(--easing-default),
    color var(--duration-default) var(--easing-default),
    box-shadow var(--duration-default) var(--easing-default);
}
.op-slab > * { position: relative; z-index: 1; }
.op-mesh { opacity: 0; transition: opacity 480ms var(--easing-default); }

.op-slab.dark {
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-3);
}
.op[data-theme="dark"] .op-mesh { opacity: 1; }
.op[data-theme="dark"] .op-slab .reveal-words .word { color: var(--smoke-800); }
.op[data-theme="dark"] .op-slab .reveal-words .word.lit { color: inherit; }

.op-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 80px;
  align-items: center;
}

.op-copy h2 {
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 22px 0 18px;
  text-wrap: balance;
  max-width: 14ch;
}
.op-copy h2 em {
  display: block;
  margin-top: 0.18em;
  letter-spacing: -0.015em;
}
.op-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 44ch;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.op-points {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.op-points li {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.op-points li:last-child { border-bottom: 1px solid var(--border); }
.op-points li .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.op-points li .v {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
}

.op-toggle {
  display: inline-flex;
  margin-top: 4px;
}
.op-toggle-track {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 4px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  gap: 0;
  isolation: isolate;
}
.op-toggle-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--smoke-900);
  border-radius: var(--radius-full);
  transition: transform 420ms var(--easing-default), background var(--duration-default) var(--easing-default);
  z-index: 0;
}
.op[data-theme="dark"] .op-toggle-thumb { background: var(--smoke-50); }
.op[data-theme="dark"] .op-toggle-opt[aria-selected="true"] { color: var(--smoke-900); }
.op-toggle-opt {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 9px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--duration-default) var(--easing-default);
}
.op-toggle-opt[aria-selected="true"] { color: var(--smoke-50); }
.op-toggle-opt:hover { color: var(--fg-strong); }
.op-toggle-opt[aria-selected="true"]:hover { color: var(--smoke-50); }
.op[data-theme="dark"] .op-toggle-opt[aria-selected="true"]:hover { color: var(--smoke-900); }
.op-toggle-opt[data-theme="dark"] ~ .op-toggle-thumb,
.op[data-theme="dark"] .op-toggle-thumb { transform: translateX(100%); }

.op-device {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 402px;
  flex-shrink: 0;
}
.op-phone {
  position: relative;
  width: 402px;
  aspect-ratio: 402 / 874;
  border-radius: 13.68% / 6.29%;
  background: #000;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 0 1.5px rgba(13, 17, 38, 0.35);
  flex-shrink: 0;
}
.op[data-theme="dark"] .op-phone {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 0 0 1.5px rgba(255, 255, 255, 0.28);
}
.op-phone-screen {
  position: absolute;
  inset: 0.46% 1%;
  border-radius: 12.94% / 5.89%;
  overflow: hidden;
  background: #fff;
}
.op[data-theme="dark"] .op-phone-screen { background: #0A0A0C; }
.op-phone-screen::before {
  content: "";
  position: absolute;
  top: 1.39%;
  left: 50%;
  transform: translateX(-50%);
  width: 31.98%;
  height: 4.27%;
  background: #000;
  border-radius: 9999px;
  z-index: 2;
  pointer-events: none;
}
.op-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}
.op-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

@media (max-width: 1024px) {
  .op-grid { grid-template-columns: 1fr; gap: 56px; }
  .op-device { margin: 0 auto; }
}
@media (max-width: 720px) {
  .op { padding-top: 64px; padding-bottom: 64px; }
  .op-slab { padding: 48px 28px; }
  .op-device { width: 100%; max-width: 402px; }
  .op-phone { width: 100%; }
  .op-points li { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
}

/* ===============================================================
   v2 offer sections (LVR-120)
   Diagnostic · How it works · Two guarantees · When things go
   wrong · Built on Paperclip · the $500 close. Plus the shared
   button helpers (btn-pair / btn-ghost / btn-on-dark) and the
   hero CTA meta line. Reuses the existing tokens + the slab,
   mesh, and hat-row rhythms already on the page. No new deps.
   =============================================================== */

/* ---------- Shared button helpers ---------- */
.btn-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* Full-size ghost button — pairs with .btn. The -sm variant already
   exists for the header; this is the body-copy weight used in CTA
   pairs (hero, how-it-works, close). */
.btn-ghost {
  background: transparent;
  color: var(--fg-strong);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost:active { border-color: var(--accent-press); }
.btn-ghost:focus-visible { box-shadow: var(--focus-ring); border-color: var(--accent); }
/* Primary CTA sitting on a .slab.dark. The dark token scope lifts
   --accent to marian-lift, but the offer CTA wants more punch, so it
   lands as a near-white tile with deep-ink text. */
.btn-primary.btn-on-dark {
  background: var(--smoke-50);
  color: var(--windsor);
  border-color: var(--smoke-50);
}
.btn-primary.btn-on-dark:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--windsor);
}

/* ---------- Hero CTA meta line ---------- */
.hero-cta-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--fg-faint);
  margin-top: 6px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-top: 10px;
}

/* ---------- The diagnostic (offer slab) ---------- */
.diag-inner { max-width: 780px; }
.diag-headline {
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 28px 0 24px;
  text-wrap: balance;
  max-width: 18ch;
}
.diag-headline em { display: inline; }
.diag-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg-muted);
  max-width: 62ch;
  margin: 0;
}
.deliv-list {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.deliv {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.deliv-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}
.deliv-name {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  margin: 0 0 8px;
  text-wrap: balance;
}
.deliv-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
  max-width: 58ch;
}
.diag-trust {
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.diag-trust p {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--fg-subtle);
  margin: 0;
  position: relative;
  padding-left: 18px;
}
.diag-trust p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.diag-cta {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.diag-cta-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--fg-faint);
}

/* ---------- How it works (3 steps, light canvas, no cards) ---------- */
.how-head { max-width: 880px; margin-bottom: 56px; }
.how-headline {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 24px 0 0;
  text-wrap: balance;
  max-width: 20ch;
}
.how-headline em { display: inline; }
.how-list {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.how-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--border-strong);
}
.how-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.how-name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  margin: 0;
  text-wrap: balance;
}
.how-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
  max-width: 36ch;
}

/* ---------- Trust & Security ---------- */
.trust { padding: 100px 0 80px; }
.trust-head { max-width: 720px; margin-bottom: 48px; }
.trust-headline {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 24px 0 20px;
  text-wrap: balance;
}
.trust-headline em { display: inline; }
.trust-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 58ch;
  margin: 0;
}
.trust-stack { max-width: 720px; }
.trust-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 32px;
}
.trust-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 16px;
}
.trust-h {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  margin: 0 0 14px;
  text-wrap: balance;
}
.trust-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
  max-width: 62ch;
}
.trust-divider { margin: 28px 0; }

/* ---------- Two guarantees (contract cards) ---------- */
.guar-head { max-width: 720px; margin-bottom: 48px; }
.guar-headline {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 24px 0 0;
  text-wrap: balance;
}
.guar-headline em { display: inline; }
.guar-stack { max-width: 720px; }
.guar-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 32px;
}
.guar-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 16px;
}
.guar-h {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  margin: 0 0 14px;
  text-wrap: balance;
}
.guar-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
  max-width: 62ch;
}
.guar-divider { margin: 28px 0; }

/* ---------- When things go wrong (scenarios) ---------- */
.scn-head { max-width: 760px; margin-bottom: 40px; }
.scn-headline {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 24px 0 20px;
  text-wrap: balance;
}
.scn-headline em { display: inline; }
.scn-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 58ch;
  margin: 0;
}
.scn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.scn-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px 64px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}
.scn-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 12px;
}
.scn-setup {
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-strong);
  font-weight: 500;
  margin: 0;
  max-width: 38ch;
}
.scn-call {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  margin: 0 0 12px;
  text-wrap: balance;
}
.scn-call em { display: inline; }
.scn-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
  max-width: 58ch;
}

/* ---------- Built on Paperclip (seal) ---------- */
.pc { padding: 80px 0; }
.pc-inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 0;
}
.pc-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 20px;
}
.pc-line {
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  font-weight: 500;
  margin: 0 0 16px;
  text-wrap: balance;
}
.pc-line em { display: inline; }
.pc-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 54ch;
  margin: 0 auto;
}

/* ===========================================================
   12 · Closing CTA — the single .slab.marian moment
   Brand blue, white type, mesh-bg already styled in the kit.
   Buttons need explicit on-marian overrides because the marian
   field is the only place --accent (navy) becomes too close to
   the background to read.
   =========================================================== */

.close { padding: 96px 0 96px; }
.close-c { max-width: 880px; }

.close-h {
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: #FFFFFF;
  margin: 28px 0 24px;
  text-wrap: balance;
  max-width: 20ch;
}
.close-h em {
  display: block;
  margin-top: 0.18em;
}

.close-lede {
  font-size: 18px;
  line-height: 1.65;
  color: color-mix(in oklab, #FFFFFF 88%, transparent);
  max-width: 56ch;
  margin: 0 0 56px;
  font-weight: 400;
}

.close-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 56px;
}
.close-col {
  border-top: 1px solid color-mix(in oklab, #FFFFFF 24%, transparent);
  padding-top: 24px;
}
.close-col-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, #FFFFFF 60%, transparent);
  margin-bottom: 22px;
}

.close-deliv {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.close-deliv li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: baseline;
}
.close-deliv .n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: color-mix(in oklab, #FFFFFF 55%, transparent);
}
.close-deliv .label {
  font-size: 18px;
  line-height: 1.4;
  color: #FFFFFF;
  font-weight: 500;
}

.close-guar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.close-guar li {
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in oklab, #FFFFFF 88%, transparent);
}
.close-guar li strong {
  color: #FFFFFF;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.close-cta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.close-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, #FFFFFF 60%, transparent);
}

/* On the marian slab the standard --accent (deep navy) is too close
   to the background. Flip the primary to white-on-marian and lift
   the ghost border to white. */
.slab.marian .btn-primary {
  background: #FFFFFF;
  color: var(--marian);
  border-color: #FFFFFF;
}
.slab.marian .btn-primary:hover {
  background: var(--smoke-100);
  border-color: var(--smoke-100);
  color: var(--windsor);
}
.slab.marian .btn-primary:active {
  background: var(--smoke-200);
  border-color: var(--smoke-200);
}
.slab.marian .btn-ghost {
  border-color: color-mix(in oklab, #FFFFFF 35%, transparent);
  color: #FFFFFF;
}
.slab.marian .btn-ghost:hover {
  border-color: #FFFFFF;
  color: #FFFFFF;
  background: color-mix(in oklab, #FFFFFF 8%, transparent);
}

/* Close section — responsive (matches design at 960 / 720 / 560) */
@media (max-width: 960px) {
  .close-grid-2 { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
}
@media (max-width: 720px) {
  .close { padding: 80px 0 80px; }
  .close-lede { font-size: 17px; margin-bottom: 40px; }
  .close-deliv .label { font-size: 17px; }
  .close-cta { align-items: stretch; width: 100%; }
  .close-cta .btn-pair { width: 100%; }
}
@media (max-width: 560px) {
  .close { padding: 64px 0 64px; }
}

/* ---------- v2 sections — responsive ---------- */
@media (max-width: 960px) {
  .how-list { grid-template-columns: 1fr; gap: 0; }
  .how-step { padding: 24px 0; }
  .how-step:first-child { padding-top: 0; border-top: 0; }
  .how-desc { max-width: none; }
  .scn-row { grid-template-columns: 1fr; gap: 12px; }
  .scn-setup { max-width: none; }
  .diag-headline,
  .how-headline,
  .guar-headline,
  .scn-headline,
  .trust-headline { max-width: none; }
}
@media (max-width: 560px) {
  .btn-pair { width: 100%; }
  .btn-pair .btn { width: 100%; justify-content: center; }
  .deliv { grid-template-columns: 40px 1fr; gap: 16px; }
  .guar-card { padding: 24px 22px; }
  .trust-card { padding: 24px 22px; }
  .trust { padding: 64px 0 48px; }
  .diag-cta { gap: 16px; }
  .diag-cta .btn { width: 100%; justify-content: center; }
  .pc-inner { padding: 32px 0; }
}