/* lightbreak — sales page styles. Extends WilCo Guide tokens. */
@import url('tokens.css');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
.lb-root { background: var(--paper); }

/* Generic page container */
.page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 80px;
}

/* ─────────────────────── Tone system ──────────────────────── */
/* Tones override the inherited tokens so any token-consuming
 * element re-tints automatically.
 */
.tone-cream { background: var(--paper); color: var(--ink); }
.tone-cream-deep { background: var(--paper-2); color: var(--ink); }

.tone-blue {
  background: var(--bluebonnet); color: var(--paper);
  --ink: var(--paper);
  --ink-2: oklch(0.92 0.02 80);
  --ink-3: oklch(0.78 0.04 80);
  --ink-4: oklch(0.62 0.06 258);
  --rule: oklch(0.42 0.10 258);
  --rule-2: oklch(0.50 0.10 258);
  --rust: var(--gold);
}
/* Bug fix: previously redefined --rust inside this scope, which then
 * resolved the `background: var(--rust)` declaration to cream. We now use
 * an explicit oklch value for the background and leave --rust alone. */
.tone-rust {
  background: oklch(0.58 0.13 45); color: var(--paper);
  --ink: var(--paper);
  --ink-2: oklch(0.96 0.03 60);
  --ink-3: oklch(0.93 0.05 60);
  --ink-4: oklch(0.78 0.10 50);
  --rule: oklch(0.50 0.13 45);
  --rule-2: oklch(0.66 0.13 45);
  --bluebonnet: oklch(0.96 0.03 60);
}

/* ─────────────────────── Masthead / topbar ──────────────────────── */
.masthead-bar {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid oklch(0.86 0.012 85);
}
.masthead-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 80px;
  max-width: 1320px; margin: 0 auto;
}
.brand {
  display: inline-flex; align-items: baseline;
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.brand .accent { color: var(--rust); }
.nav-list {
  display: flex; align-items: center; gap: 26px;
  list-style: none; margin: 0; padding: 0;
  justify-content: center;
}
.nav-list a {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--ink-2);
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.nav-list a:hover { color: var(--bluebonnet); border-bottom-color: var(--bluebonnet); }
.nav-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }

/* ─────────────────────── Today bar (ticker) ──────────────────────── */
.today-bar {
  background: var(--bluebonnet);
  color: var(--paper);
  position: sticky; top: 83px; z-index: 59;
  border-bottom: 1px solid oklch(0.22 0.07 258);
}
.today-inner {
  display: flex; align-items: stretch;
  max-width: 1320px; margin: 0 auto; padding: 0 80px;
  height: 44px;
  font-family: var(--sans); font-size: 12.5px;
}
.today-cell { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-right: 1px solid oklch(0.42 0.08 258); }
.today-cell:first-child { padding-left: 0; }
.today-cell:last-child { border-right: none; }
.today-cell.label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: oklch(0.85 0.13 60);
}
.today-ticker { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  color: oklch(0.85 0.13 60); padding: 3px 7px;
  border: 1px solid oklch(0.85 0.13 60); border-radius: 2px;
  flex-shrink: 0; margin-right: 12px;
}
.ticker-text {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--paper);
  transition: opacity .35s;
}
.ticker-text.fading { opacity: 0; }
.today-cell.weather { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: oklch(0.92 0.04 80); }
.today-cell.live-count {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: oklch(0.92 0.04 80); font-weight: 600;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 999px; background: oklch(0.78 0.18 142);
  display: inline-block; margin-right: 6px;
  box-shadow: 0 0 0 0 oklch(0.78 0.18 142);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 oklch(0.78 0.18 142 / 0.6); }
  70% { box-shadow: 0 0 0 8px oklch(0.78 0.18 142 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.78 0.18 142 / 0); }
}

/* ─────────────────────── Buttons ──────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 13.5px;
  padding: 10px 16px; border-radius: 3px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.btn--primary { background: oklch(0.32 0.09 258); color: #fdfaf4; }
.btn--primary:hover { background: oklch(0.22 0.07 258); }
.btn--rust { background: oklch(0.58 0.13 45); color: #fdfaf4; }
.btn--rust:hover { background: oklch(0.50 0.13 42); }
.btn--ink { background: oklch(0.18 0.02 260); color: #fdfaf4; }
.btn--ink:hover { background: #000; }
.btn--gold { background: oklch(0.85 0.13 60); color: oklch(0.18 0.02 260); }
.btn--gold:hover { background: oklch(0.92 0.04 80); }
.btn--ghost { background: transparent; color: oklch(0.32 0.025 260); border-color: oklch(0.78 0.015 85); }
.btn--ghost:hover { color: oklch(0.32 0.09 258); border-color: oklch(0.32 0.09 258); }
.btn--ghost-light { background: transparent; color: var(--paper); border-color: oklch(0.55 0.10 258); }
.btn--ghost-light:hover { color: var(--paper); border-color: oklch(0.85 0.13 60); background: oklch(0.22 0.07 258 / 0.4); }
.btn--ghost-cream { background: transparent; color: oklch(0.18 0.02 260); border-color: oklch(0.18 0.02 260); }
.btn--ghost-cream:hover { background: oklch(0.18 0.02 260); color: #fdfaf4; }
.btn--lg { padding: 14px 22px; font-size: 14px; }
.btn--xl { padding: 18px 28px; font-size: 15px; }
.btn .arrow { font-family: var(--sans); font-size: 1.05em; line-height: 1; transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ─────────────────────── Section base ──────────────────────── */
.section { padding: 88px 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-rule {
  display: flex; align-items: baseline; gap: 14px;
  border-top: 2px solid var(--ink);
  padding-top: 12px; margin-bottom: 16px;
}
.section-rule .label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--ink);
}
.section-rule .meta {
  margin-left: auto;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

.section-head {
  text-align: center;
  margin-bottom: 28px;
}
.section-head .kicker {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 14px;
}
.tone-cream .section-head .kicker,
.tone-cream-deep .section-head .kicker { color: var(--rust); }
.tone-blue .section-head .kicker { color: oklch(0.85 0.13 60); }
.tone-rust .section-head .kicker { color: oklch(0.18 0.02 260); }
.section-head h2 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 30;
  font-size: clamp(36px, 4.2vw, 52px);
  line-height: 1.04; letter-spacing: -0.022em;
  color: var(--ink); margin: 0 auto; text-wrap: balance;
  max-width: 900px;
}
.section-head .intro {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 70;
  font-size: 19px; line-height: 1.45;
  color: var(--ink-2);
  max-width: 640px; margin: 18px auto 0;
  text-wrap: pretty;
}
.section-head.align-left { text-align: left; margin-bottom: 40px; }
.section-head.align-left h2,
.section-head.align-left .intro { margin-left: 0; margin-right: 0; }

/* ─────────────────────── HERO ──────────────────────── */
.hero {
  padding: 64px 0 40px;
  background: var(--paper);
}
.dateline {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.50 0.02 260); font-weight: 600;
  border-top: 1px solid oklch(0.18 0.02 260);
  border-bottom: 1px solid oklch(0.18 0.02 260);
  padding: 9px 0;
  margin-bottom: 48px;
}
.dateline .dot { color: oklch(0.66 0.015 260); }
.dateline .accent { color: oklch(0.58 0.13 45); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: start;
}
.hero-left { padding-right: 12px; }
.hero-kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: oklch(0.58 0.13 45);
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(8px);
  animation: heroFadeUp .8s .1s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-kicker::before {
  content: ""; width: 26px; height: 1px;
  background: oklch(0.58 0.13 45); display: inline-block;
}
.hero-headline {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 10;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 26px;
  text-wrap: balance;
}
.hero-headline .line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  animation: heroFadeUp .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-headline .line:nth-child(1) { animation-delay: .15s; }
.hero-headline .line:nth-child(2) { animation-delay: .3s; color: oklch(0.32 0.09 258); }
.hero-dek {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 70;
  font-size: 20px; line-height: 1.45;
  color: oklch(0.32 0.025 260); margin: 0 0 36px;
  max-width: 540px; text-wrap: pretty;
  opacity: 0; transform: translateY(8px);
  animation: heroFadeUp .8s .45s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-cta { display: flex; gap: 12px; margin-bottom: 40px;
  opacity: 0; transform: translateY(8px);
  animation: heroFadeUp .8s .6s cubic-bezier(.2,.7,.2,1) forwards;
}
.proof-bar {
  display: flex; align-items: center; gap: 20px;
  padding-top: 22px;
  border-top: 1px solid oklch(0.86 0.012 85);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(0.50 0.02 260); font-weight: 600;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeUp .8s .75s cubic-bezier(.2,.7,.2,1) forwards;
}
.proof-bar .num { color: oklch(0.32 0.09 258); font-weight: 700; margin-right: 4px; }
.proof-bar .pdot { color: oklch(0.66 0.015 260); }

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────── Newsletter preview (animated) ──────────────────────── */
.newsletter-preview {
  position: relative;
  background: #fff;
  border: 1px solid oklch(0.86 0.012 85);
  border-top: 4px solid oklch(0.18 0.02 260);
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(20,18,30,0.04),
    0 16px 40px -16px rgba(20,18,30,0.18),
    0 4px 14px rgba(20,18,30,0.05);
  overflow: hidden;
  opacity: 0;
  animation: heroFadeUp 1s .35s cubic-bezier(.2,.7,.2,1) forwards;
}
.np-build-strip {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: oklch(0.93 0.018 82);
  overflow: hidden;
  z-index: 5;
}
.np-build-strip::before {
  content: ""; display: block; height: 100%;
  background: linear-gradient(90deg, oklch(0.58 0.13 45), oklch(0.32 0.09 258));
  width: 0;
  transition: width 6.4s cubic-bezier(.4,.7,.3,1);
}
.np-build-strip.animate::before { width: 100%; }
.np-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid oklch(0.86 0.012 85);
  background: oklch(0.955 0.014 85);
}
.np-chrome .cdot {
  width: 9px; height: 9px; border-radius: 999px;
  background: oklch(0.93 0.018 82);
  border: 1px solid oklch(0.86 0.012 85);
}
.np-chrome .url {
  margin-left: 8px; flex: 1;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: oklch(0.50 0.02 260);
}
.np-chrome .badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  color: oklch(0.58 0.13 45);
  display: flex; align-items: center; gap: 6px;
}
.np-chrome .badge .blink {
  width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.58 0.13 45);
  animation: blink 1.4s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

.np-body { padding: 26px 30px 32px; position: relative; }

.np-masthead-area { text-align: center; padding-bottom: 14px; }
.np-publication {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: oklch(0.50 0.02 260); font-weight: 600;
  padding-bottom: 6px;
}
.np-masthead {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: 40px; letter-spacing: -0.028em;
  color: oklch(0.18 0.02 260);
  line-height: 1; margin: 0;
}
.np-dateline {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: oklch(0.50 0.02 260);
  margin: 8px 0 0;
  padding: 10px 0 12px;
  border-top: 1px solid oklch(0.86 0.012 85);
  border-bottom: 2px solid oklch(0.18 0.02 260);
  display: flex; justify-content: space-between;
}

.np-slots {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 18px;
}

/* slot machinery */
.np-slot {
  position: relative;
  border-radius: 2px;
  transition: transform .25s;
}
.np-slot-empty {
  position: absolute; inset: 0; z-index: 2;
  background: oklch(0.955 0.014 85);
  border: 1.5px dashed oklch(0.78 0.015 85);
  border-radius: 2px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: oklch(0.50 0.02 260); font-weight: 600;
  transition: opacity .35s, transform .35s;
}
.np-slot-empty .empty-num {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--paper);
  border: 1px solid oklch(0.78 0.015 85);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 12px;
  color: oklch(0.50 0.02 260);
  flex-shrink: 0;
}
.np-slot-empty .empty-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  font-weight: 700; padding: 3px 7px; border: 1px solid currentColor;
  border-radius: 2px;
}
.np-slot.dropping .np-slot-empty {
  border-color: oklch(0.58 0.13 45);
  background: oklch(0.93 0.04 45);
  color: oklch(0.50 0.13 42);
  transform: scale(1.01);
}
.np-slot.filled .np-slot-empty {
  opacity: 0; transform: scale(0.97);
  pointer-events: none;
}
.np-slot-filled {
  opacity: 0;
  transform: translateY(6px) scale(0.99);
  transition: opacity .55s .1s, transform .55s .1s;
  border-radius: 2px;
  position: relative;
}
.np-slot.filled .np-slot-filled {
  opacity: 1; transform: translateY(0) scale(1);
}

/* slot 0 — front page (full-bleed lead) */
.np-slot.lead { min-height: 196px; }
.np-slot.lead .np-slot-filled {
  display: flex; flex-direction: column;
}
.np-slot.lead .img {
  height: 102px;
  background:
    radial-gradient(ellipse at 20% 30%, oklch(0.58 0.13 45) 0%, oklch(0.42 0.12 30) 60%, oklch(0.32 0.09 258) 100%);
  position: relative; overflow: hidden;
  border-radius: 2px 2px 0 0;
}
.np-slot.lead .img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(20,18,30,0.4) 100%),
    repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,0.04) 6px 7px);
}
.np-slot.lead .img-credit {
  position: absolute; bottom: 6px; right: 8px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.85); text-transform: uppercase; z-index: 2;
}
.np-slot.lead .body { padding: 12px 14px 14px; }
.np-slot.lead .np-cat { color: oklch(0.32 0.09 258); margin-bottom: 6px; }
.np-slot.lead h4 {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 60, "SOFT" 0;
  font-size: 18px; line-height: 1.12; color: oklch(0.18 0.02 260);
  letter-spacing: -0.01em; margin: 0 0 6px;
}
.np-slot.lead .byline {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em;
  color: oklch(0.50 0.02 260); margin-bottom: 6px;
}
.np-slot.lead .byline .b { color: oklch(0.32 0.025 260); }
.np-slot.lead .lede {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 11.5px; line-height: 1.42; color: oklch(0.32 0.025 260);
}

/* slot 1 — schools (side-by-side) */
.np-slot.side { min-height: 92px; }
.np-slot.side .np-slot-filled {
  display: grid;
  grid-template-columns: 90px 1fr;
  background: oklch(0.975 0.012 85);
  border: 1px solid oklch(0.86 0.012 85);
  border-left: 3px solid oklch(0.50 0.10 160);
  align-items: stretch;
}
.np-slot.side .img {
  background:
    linear-gradient(135deg, oklch(0.55 0.10 160) 0%, oklch(0.38 0.08 165) 100%);
  position: relative; overflow: hidden;
}
.np-slot.side .img::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255,255,255,0.05) 5px 6px);
}
.np-slot.side .body { padding: 11px 14px; }
.np-slot.side .np-cat { color: oklch(0.42 0.10 160); margin-bottom: 4px; }
.np-slot.side h4 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  font-size: 14px; line-height: 1.18; color: oklch(0.18 0.02 260);
  letter-spacing: -0.005em; margin: 0 0 4px;
}
.np-slot.side .lede {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 11px; line-height: 1.38; color: oklch(0.32 0.025 260);
}

/* slot 2 — eats (orange-accented with tag) */
.np-slot.eats { min-height: 92px; }
.np-slot.eats .np-slot-filled {
  display: grid;
  grid-template-columns: 1fr 90px;
  background: oklch(0.975 0.012 85);
  border: 1px solid oklch(0.86 0.012 85);
  border-left: 3px solid oklch(0.58 0.13 45);
}
.np-slot.eats .body { padding: 11px 14px; position: relative; }
.np-slot.eats .img {
  background:
    radial-gradient(ellipse at 30% 70%, oklch(0.55 0.13 25) 0%, oklch(0.40 0.10 35) 100%);
  position: relative; overflow: hidden;
}
.np-slot.eats .img::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255,255,255,0.15), transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,255,255,0.05) 5px 6px);
}
.np-slot.eats .np-cat { color: oklch(0.58 0.13 45); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.np-slot.eats .new-tag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em;
  background: oklch(0.58 0.13 45); color: var(--paper);
  padding: 2px 5px; border-radius: 2px; font-weight: 700;
}
.np-slot.eats h4 {
  font-family: var(--display); font-weight: 600;
  font-size: 14px; line-height: 1.18; color: oklch(0.18 0.02 260);
  letter-spacing: -0.005em; margin: 0 0 4px;
}
.np-slot.eats .meta-row {
  display: flex; gap: 10px; margin-top: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: oklch(0.50 0.02 260);
}
.np-slot.eats .meta-row .stars { color: oklch(0.58 0.13 45); letter-spacing: 0; }

.np-cat {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
}

/* Flying drag ghost */
.np-drag-ghost {
  position: absolute;
  right: 16px; top: 14px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  background: #fff;
  border: 1px solid oklch(0.78 0.015 85);
  border-left: 3px solid currentColor;
  border-radius: 2px;
  padding: 9px 13px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  box-shadow: 0 8px 24px rgba(20,18,30,0.18);
  display: flex; align-items: center; gap: 10px;
}
.np-drag-ghost .ghost-handle {
  width: 12px; height: 12px; border-radius: 2px;
  background: currentColor; opacity: .15;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
  position: relative;
}
.np-drag-ghost .ghost-handle::before {
  content: ""; position: absolute; inset: 2px;
  border-top: 2px dotted currentColor; border-bottom: 2px dotted currentColor;
  opacity: 0.8;
}
.np-drag-ghost[data-target="0"] { color: oklch(0.32 0.09 258); }
.np-drag-ghost[data-target="1"] { color: oklch(0.42 0.10 160); }
.np-drag-ghost[data-target="2"] { color: oklch(0.58 0.13 45); }

/* The ghost flies from its top-right resting position to a target offset
 * supplied by JS via --tx/--ty CSS variables. This keeps motion accurate
 * regardless of viewport / preview size. */
.np-drag-ghost.flying {
  animation: ghostFly 1.25s cubic-bezier(.45, .05, .55, .95) forwards;
}
@keyframes ghostFly {
  0%   { opacity: 0; transform: translate(40px, -28px) scale(0.85) rotate(3deg); }
  14%  { opacity: 1; transform: translate(20px, -10px) scale(0.95) rotate(2deg); }
  78%  { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1.02) rotate(-1deg); }
  92%  { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 6px)) scale(0.96) rotate(0deg); }
}

/* Source tray on the right edge */
.np-source-tray {
  position: absolute; right: 14px; top: 14px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 4;
}
.tray-tag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700;
  color: oklch(0.50 0.02 260);
  padding: 4px 7px;
  background: oklch(0.955 0.014 85);
  border: 1px solid oklch(0.86 0.012 85);
  border-radius: 2px;
  display: flex; align-items: center; gap: 6px;
  transition: opacity .3s;
}
.tray-tag .pulse {
  width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.58 0.13 45);
  animation: blink 1.4s infinite;
}
.tray-tag.consumed { opacity: 0.25; }
.tray-tag.consumed .pulse {
  background: oklch(0.50 0.10 160);
  animation: none;
}

/* "Ready" badge */
.np-ready-badge {
  position: absolute; right: 18px; bottom: 18px;
  z-index: 10;
  background: oklch(0.18 0.02 260);
  color: var(--paper);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700;
  padding: 7px 11px; border-radius: 2px;
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(4px) scale(0.96);
  transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1);
}
.np-ready-badge.show { opacity: 1; transform: translateY(0) scale(1); }
.np-ready-badge .check {
  width: 14px; height: 14px; border-radius: 999px;
  background: oklch(0.7 0.16 142); color: oklch(0.18 0.02 260);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900;
}

/* ─────────────────────── DEMO VIDEO (tone-blue) ──────────────────────── */
.section.demo .section-rule { border-top-color: var(--paper); }
.section.demo .section-rule .label { color: var(--paper); }
.section.demo .section-rule .meta { color: oklch(0.85 0.13 60); }
.section.demo .section-head .intro { color: oklch(0.92 0.02 80); }

.video-wrap {
  position: relative;
  max-width: 1140px; margin: 0 auto;
  border-radius: 4px; overflow: hidden;
  background: oklch(0.16 0.04 258);
  box-shadow:
    0 30px 70px -30px rgba(0,0,0,0.45),
    0 8px 24px rgba(0,0,0,0.12);
  border: 1px solid oklch(0.42 0.10 258);
}
.video-player {
  position: relative;
  aspect-ratio: 16/9;
  background: oklch(0.18 0.04 258);
  overflow: hidden;
  cursor: pointer;
}
.video-poster {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, oklch(0.32 0.09 258) 0%, oklch(0.22 0.07 258) 50%, oklch(0.14 0.04 258) 100%);
}
.video-poster-ui {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  opacity: 0.42;
  filter: blur(0.4px);
}
.vp-rail {
  background: oklch(0.16 0.04 258);
  border-right: 1px solid oklch(0.42 0.10 258);
  padding: 22px 18px;
}
.vp-rail .vp-brand {
  font-family: var(--display); font-weight: 700;
  font-size: 18px; color: var(--paper); margin-bottom: 22px;
  letter-spacing: -0.025em;
}
.vp-rail .vp-brand .accent { color: oklch(0.85 0.13 60); }
.vp-rail .vp-item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 12px;
  color: oklch(0.78 0.04 258);
  padding: 8px 10px; border-radius: 3px; margin-bottom: 2px;
}
.vp-rail .vp-item.active { background: oklch(0.42 0.10 258); color: var(--paper); }
.vp-rail .vp-item .sq { width: 12px; height: 12px; border-radius: 2px; background: oklch(0.85 0.13 60); opacity: .8; }
.vp-main { padding: 24px 28px; background: oklch(0.96 0.012 85); color: oklch(0.18 0.02 260); }
.vp-main .vp-title {
  font-family: var(--display); font-weight: 600;
  font-size: 22px; color: oklch(0.18 0.02 260); margin-bottom: 4px; letter-spacing: -0.01em;
}
.vp-main .vp-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: oklch(0.50 0.02 260); margin-bottom: 18px;
}
.vp-row {
  display: grid; grid-template-columns: 70px 1fr 80px;
  gap: 12px;
  padding: 12px 0; border-bottom: 1px solid oklch(0.86 0.012 85);
  align-items: center;
}
.vp-thumb {
  width: 70px; height: 44px;
  background: linear-gradient(135deg, oklch(0.58 0.13 45), oklch(0.32 0.09 258));
  border-radius: 2px;
}
.vp-row:nth-child(3) .vp-thumb { background: linear-gradient(135deg, oklch(0.50 0.10 160), oklch(0.38 0.08 165)); }
.vp-row:nth-child(4) .vp-thumb { background: linear-gradient(135deg, oklch(0.55 0.13 25), oklch(0.42 0.10 35)); }
.vp-row .vp-h {
  font-family: var(--display); font-weight: 600; font-size: 13px; color: oklch(0.18 0.02 260); line-height: 1.18;
}
.vp-row .vp-meta {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: oklch(0.50 0.02 260); margin-top: 3px;
}
.vp-row .vp-tag {
  text-align: right;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: oklch(0.58 0.13 45); font-weight: 700;
}
.vp-side { background: oklch(0.93 0.018 82); padding: 22px 20px; border-left: 1px solid oklch(0.86 0.012 85); }
.vp-side .vp-st {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: oklch(0.50 0.02 260); font-weight: 700; margin-bottom: 12px;
}
.vp-side .vp-card {
  background: #fff; border: 1px solid oklch(0.86 0.012 85); padding: 10px 12px;
  margin-bottom: 8px; border-radius: 2px;
}
.vp-card-h { font-family: var(--display); font-weight: 600; font-size: 12.5px; line-height: 1.2; color: oklch(0.18 0.02 260); }

.video-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; z-index: 3;
  background: linear-gradient(180deg, rgba(20,18,30,0.05) 0%, rgba(20,18,30,0.25) 45%, rgba(20,18,30,0.75) 100%);
  transition: opacity .3s;
}
.play-button {
  width: 100px; height: 100px; border-radius: 999px;
  background: oklch(0.58 0.13 45); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  border: none;
  box-shadow: 0 0 0 0 rgba(196,90,42,0.5);
  transition: transform .2s, box-shadow .25s, background .2s;
  position: relative;
}
.play-button::before {
  content: ""; position: absolute; inset: -14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5);
  animation: playRing 2.4s ease-out infinite;
}
@keyframes playRing {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
.play-button:hover { background: oklch(0.50 0.13 42); transform: scale(1.05); }
.play-button svg { margin-left: 6px; }
.play-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--paper); font-weight: 700;
}
.play-runtime {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: oklch(0.85 0.04 80); font-weight: 500;
}

.video-top {
  position: absolute; top: 16px; left: 16px; right: 16px;
  display: flex; align-items: center; gap: 10px; z-index: 4;
}
.video-top .ptag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  background: oklch(0.58 0.13 45); color: var(--paper);
  padding: 4px 8px; border-radius: 2px;
}
.video-top .vtime {
  margin-left: auto;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: oklch(0.85 0.04 80);
  display: flex; align-items: center; gap: 8px;
}
.video-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
}
.scrubber {
  flex: 1; height: 3px; background: rgba(255,255,255,0.18); border-radius: 999px; position: relative;
}
.scrubber::before {
  content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%;
  background: oklch(0.58 0.13 45); border-radius: 999px;
  animation: progressIdle 12s linear infinite;
}
@keyframes progressIdle {
  0%, 100% { width: 0; }
  50% { width: 22%; }
}
.video-bottom .vt {
  font-family: var(--mono); font-size: 11px; color: oklch(0.85 0.04 80);
  letter-spacing: 0.06em;
}
.video-caption {
  text-align: center; margin: 26px auto 0; max-width: 720px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: oklch(0.78 0.04 80);
}

/* ─────────────────────── WHAT IT IS (tone-cream) ──────────────────────── */
.split-2 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}
.split-2 .left p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17.5px; line-height: 1.55; color: oklch(0.32 0.025 260);
  margin: 0 0 18px;
}
.split-2 .left p:last-child { margin-bottom: 0; }
.callout {
  background: oklch(0.32 0.09 258);
  color: var(--paper);
  border-radius: 2px;
  padding: 36px 36px;
  position: relative;
  box-shadow: 0 8px 24px -12px rgba(20,18,30,0.18);
}
.callout::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: oklch(0.85 0.13 60);
}
.callout .ctag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 700;
  color: oklch(0.85 0.13 60);
  margin-bottom: 14px;
}
.callout p {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 60, "SOFT" 50;
  font-size: 26px; line-height: 1.25; letter-spacing: -0.012em;
  color: var(--paper); margin: 0; text-wrap: balance;
}
.callout .csig {
  margin-top: 22px;
  display: flex; align-items: center; gap: 12px;
  padding-top: 18px;
  border-top: 1px solid oklch(0.42 0.10 258);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: oklch(0.85 0.13 60); font-weight: 600;
}

/* ─────────────────────── PROBLEM (tone-rust) ──────────────────────── */
.section.problem .section-rule { border-top-color: var(--paper); }
.section.problem .section-rule .label { color: var(--paper); }
.section.problem .section-rule .meta { color: oklch(0.96 0.04 60); }
.section.problem .section-head .intro { color: oklch(0.96 0.04 60); }

.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.problem-card {
  background: var(--paper);
  padding: 30px 26px 28px;
  border-radius: 2px;
  position: relative;
  transition: transform .2s, box-shadow .2s;
  border-top: 4px solid oklch(0.32 0.09 258);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.problem-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -16px rgba(0,0,0,0.3), 0 2px 0 rgba(0,0,0,0.06);
}
.problem-card .num {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: 56px; line-height: 0.9;
  color: oklch(0.32 0.09 258); letter-spacing: -0.04em;
  margin-bottom: 20px;
  display: block;
}
.problem-card h3 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  font-size: 21px; line-height: 1.15;
  color: oklch(0.18 0.02 260); letter-spacing: -0.01em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.problem-card p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14.5px; line-height: 1.5;
  color: oklch(0.32 0.025 260);
  margin: 0;
}
.problem-closer {
  text-align: center; margin: 48px auto 0;
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 60, "SOFT" 60;
  font-size: 23px; color: var(--paper);
  letter-spacing: -0.005em;
  max-width: 760px; text-wrap: balance;
}
.problem-closer .punch { color: oklch(0.58 0.13 45); background: var(--paper); padding: 2px 10px; border-radius: 2px; font-weight: 700; }

/* ─────────────────────── HOW IT WORKS (tone-cream) ──────────────────────── */
.steps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  position: relative;
}
.step {
  background: #fff;
  border: 1px solid oklch(0.86 0.012 85);
  padding: 26px 24px 28px;
  border-radius: 2px;
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.step:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -16px rgba(20,18,30,0.18); }
.step .step-num {
  width: 52px; height: 52px;
  border-radius: 999px;
  background: oklch(0.32 0.09 258);
  color: var(--paper);
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700;
  font-size: 18px;
  margin-bottom: 22px;
  position: relative;
}
.step:not(:last-child) .step-num::after {
  content: ""; position: absolute;
  left: 100%; top: 50%; height: 1px; width: calc(100% + 38px);
  background: oklch(0.78 0.015 85);
  z-index: -1;
  margin-left: 28px;
}
.step .step-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700; color: oklch(0.58 0.13 45);
  margin-bottom: 10px;
}
.step h3 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 60, "SOFT" 50;
  font-size: 20px; line-height: 1.15; color: oklch(0.18 0.02 260);
  letter-spacing: -0.008em; margin: 0 0 10px;
  text-wrap: balance;
}
.step p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14.5px; line-height: 1.5; color: oklch(0.32 0.025 260); margin: 0;
}

/* ─────────────────────── FEATURES (tone-blue) ──────────────────────── */
.section.features .section-rule { border-top-color: var(--paper); }
.section.features .section-rule .label { color: var(--paper); }
.section.features .section-rule .meta { color: oklch(0.85 0.13 60); }
.section.features .section-head .intro { color: oklch(0.92 0.02 80); }

.features-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}
.feature {
  background: var(--paper);
  color: oklch(0.18 0.02 260);
  padding: 36px 36px 32px;
  border-radius: 2px;
  position: relative;
}
.feature .fkicker {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700; color: oklch(0.58 0.13 45);
  margin-bottom: 14px;
}
.feature h3 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 60, "SOFT" 50;
  font-size: 26px; line-height: 1.1; color: oklch(0.18 0.02 260);
  letter-spacing: -0.012em;
  margin: 0 0 12px; text-wrap: balance;
}
.feature .lede {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 70;
  font-size: 17px; line-height: 1.4; color: oklch(0.32 0.025 260);
  margin: 0 0 22px; text-wrap: pretty;
}
.feature .fvisual {
  margin-top: 8px;
  padding: 18px;
  background: oklch(0.955 0.014 85);
  border: 1px solid oklch(0.86 0.012 85);
  border-radius: 2px;
}

/* Feature 1: source feeds */
.feed-flow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.feed-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700;
  padding: 8px 11px; border-radius: 2px;
  border: 1px solid oklch(0.78 0.015 85);
  color: oklch(0.32 0.025 260);
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff;
}
.feed-chip .dot {
  width: 8px; height: 8px; border-radius: 999px; background: oklch(0.58 0.13 45);
}
.feed-chip .dot.green { background: oklch(0.55 0.13 142); }
.feed-chip .dot.bb { background: oklch(0.32 0.09 258); }
.feed-chip .dot.ochre { background: oklch(0.55 0.12 80); }
.feed-chip .dot.plum { background: oklch(0.50 0.12 320); }
.feed-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 22px; color: oklch(0.50 0.02 260); font-family: var(--mono); font-weight: 700;
}
.feed-chip.dest {
  border-color: oklch(0.32 0.09 258);
  background: oklch(0.32 0.09 258);
  color: var(--paper);
}

/* Feature 2: sponsor inventory (REPLACES calendar) */
.sponsor-inv {
  display: flex; flex-direction: column;
}
.sponsor-inv .si-head {
  display: grid; grid-template-columns: 1.4fr 2fr 0.9fr 0.7fr;
  gap: 12px; padding: 0 4px 8px;
  border-bottom: 1.5px solid oklch(0.18 0.02 260);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; color: oklch(0.50 0.02 260);
}
.sponsor-inv .si-row {
  display: grid; grid-template-columns: 1.4fr 2fr 0.9fr 0.7fr;
  gap: 12px; padding: 11px 4px;
  border-bottom: 1px solid oklch(0.86 0.012 85);
  align-items: center;
  font-family: var(--sans); font-size: 12.5px;
}
.sponsor-inv .si-row:last-child { border-bottom: none; }
.sponsor-inv .slot {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: oklch(0.50 0.02 260); font-weight: 600;
}
.sponsor-inv .who {
  font-family: var(--display); font-weight: 600; font-size: 13.5px;
  color: oklch(0.18 0.02 260); letter-spacing: -0.005em;
}
.sponsor-inv .who.open { color: oklch(0.50 0.02 260); font-style: italic; font-weight: 400; }
.sponsor-inv .status {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  padding: 3px 7px; border-radius: 2px; display: inline-block;
}
.sponsor-inv .status.booked { background: oklch(0.32 0.09 258); color: var(--paper); }
.sponsor-inv .status.sold { background: oklch(0.58 0.13 45); color: var(--paper); }
.sponsor-inv .status.partial { background: oklch(0.85 0.13 60); color: oklch(0.18 0.02 260); }
.sponsor-inv .status.open { background: transparent; border: 1px solid oklch(0.78 0.015 85); color: oklch(0.50 0.02 260); font-weight: 600; }
.sponsor-inv .dollars {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: oklch(0.45 0.10 160); text-align: right;
  letter-spacing: 0.02em;
}
.sponsor-inv .dollars.muted { color: oklch(0.66 0.015 260); }
.sponsor-inv .si-foot {
  display: grid; grid-template-columns: 1.4fr 2fr 0.9fr 0.7fr;
  gap: 12px; padding: 12px 4px 0;
  border-top: 1.5px solid oklch(0.18 0.02 260);
  margin-top: 4px;
}
.sponsor-inv .si-foot .total-l {
  grid-column: 1 / span 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700; color: oklch(0.18 0.02 260);
  text-align: right;
}
.sponsor-inv .si-foot .total-v {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  color: oklch(0.45 0.10 160); text-align: right;
  letter-spacing: -0.005em;
}

/* Feature 3: templates stack */
.tmpl-stack {
  position: relative; height: 154px;
}
.tmpl-card {
  position: absolute; top: 0; left: 0;
  width: 62%; height: 100%;
  background: #fff;
  border: 1px solid oklch(0.86 0.012 85);
  border-radius: 2px;
  padding: 14px 16px;
  box-shadow: 0 6px 16px -8px rgba(20,18,30,0.15);
  overflow: hidden;
}
.tmpl-card .tmpl-mast {
  font-family: var(--display); font-weight: 700;
  font-size: 16px; color: oklch(0.18 0.02 260); letter-spacing: -0.015em;
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1.5px solid oklch(0.18 0.02 260);
  margin-bottom: 9px;
}
.tmpl-card .ctag {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  margin-bottom: 4px; color: currentColor;
}
.tmpl-card .l {
  height: 4px; background: oklch(0.86 0.012 85); border-radius: 2px; margin-top: 5px;
}
.tmpl-card .l.s { width: 60%; }
.tmpl-card .l.m { width: 84%; }
.tmpl-card .l.l { width: 100%; }
.tmpl-card:nth-child(3) {
  transform: translate(0, 0) rotate(-3deg); z-index: 1; opacity: 0.5;
  border-top: 3px solid oklch(0.55 0.13 142);
}
.tmpl-card:nth-child(3) .ctag { color: oklch(0.42 0.12 142); }
.tmpl-card:nth-child(2) {
  transform: translate(46px, 8px) rotate(2deg); z-index: 2; opacity: 0.85;
  border-top: 3px solid oklch(0.32 0.09 258);
}
.tmpl-card:nth-child(2) .ctag { color: oklch(0.32 0.09 258); }
.tmpl-card:nth-child(1) {
  transform: translate(92px, 0) rotate(-1deg); z-index: 3;
  border-top: 3px solid oklch(0.58 0.13 45);
}
.tmpl-card:nth-child(1) .ctag { color: oklch(0.58 0.13 45); }

/* Feature 4: platforms */
.platform-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.platform-chip {
  border: 1px solid oklch(0.78 0.015 85);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 700;
  font-size: 15px; color: oklch(0.18 0.02 260);
  letter-spacing: -0.012em;
  border-radius: 2px;
  background: #fff;
  transition: border-color .15s, transform .15s;
}
.platform-chip:hover { border-color: oklch(0.32 0.09 258); transform: translateY(-1px); }
.platform-chip .pdot {
  width: 24px; height: 24px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  color: var(--paper);
  flex-shrink: 0;
}
.platform-chip .pdot.b { background: oklch(0.58 0.13 45); }
.platform-chip .pdot.m { background: oklch(0.85 0.13 60); color: oklch(0.18 0.02 260); }
.platform-chip .pdot.s { background: oklch(0.55 0.13 25); }
.platform-chip .pdot.c { background: oklch(0.50 0.10 160); }
.platform-chip .pname { flex: 1; }
.platform-chip .pcheck {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: oklch(0.45 0.10 160); font-weight: 700;
}

/* ─────────────────────── NO MIGRATION (tone-cream) ──────────────────────── */
.no-migration-card {
  background: oklch(0.32 0.09 258);
  color: var(--paper);
  border-radius: 2px;
  padding: 48px 48px 44px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px -28px rgba(20,18,30,0.35);
}
.no-migration-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: oklch(0.85 0.13 60);
}
.nm-card-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid oklch(0.42 0.10 258);
}
.nm-card-head .kicker {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 700; color: oklch(0.85 0.13 60);
}
.nm-card-head h3 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 30;
  font-size: clamp(28px, 3vw, 38px); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--paper); margin: 0;
  text-wrap: balance;
}
.nm-card-head .meta {
  margin-left: auto;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: oklch(0.78 0.04 80);
}

.nm-flow {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 18px; align-items: stretch;
  position: relative;
}
.nm-stage {
  background: oklch(0.16 0.04 258);
  border: 1px solid oklch(0.42 0.10 258);
  border-radius: 2px;
  padding: 22px 22px 24px;
  position: relative;
  display: flex; flex-direction: column;
  min-height: 200px;
}
.nm-stage.middle {
  background: var(--paper);
  border-color: oklch(0.85 0.13 60);
  color: oklch(0.18 0.02 260);
}
.nm-stage.middle::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: oklch(0.58 0.13 45);
}
.nm-stage .num {
  width: 30px; height: 30px; border-radius: 999px;
  background: oklch(0.85 0.13 60); color: oklch(0.18 0.02 260);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.nm-stage.middle .num { background: oklch(0.58 0.13 45); color: var(--paper); }
.nm-stage .h {
  font-family: var(--display); font-weight: 700;
  font-size: 19px; letter-spacing: -0.01em;
  color: var(--paper); margin-bottom: 8px;
}
.nm-stage.middle .h { color: oklch(0.18 0.02 260); }
.nm-stage .s {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 13.5px; line-height: 1.45;
  color: oklch(0.85 0.04 80); margin-bottom: 14px;
}
.nm-stage.middle .s { color: oklch(0.32 0.025 260); }
.nm-stage .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.nm-stage .tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  padding: 4px 7px;
  border: 1px solid oklch(0.55 0.10 258);
  color: oklch(0.85 0.13 60);
  border-radius: 2px;
}
.nm-stage.middle .tag { border-color: oklch(0.78 0.015 85); color: oklch(0.58 0.13 45); }

.nm-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  background: var(--paper);
  border: 1.5px solid oklch(0.18 0.02 260);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: oklch(0.18 0.02 260);
  font-family: var(--display); font-weight: 700; font-size: 14px;
  z-index: 2;
}
.nm-arrow.a1 { left: calc(33.33% - 14px); }
.nm-arrow.a2 { left: calc(66.66% - 14px); }

.nm-postscript {
  margin-top: 28px;
  background: var(--paper);
  color: oklch(0.18 0.02 260);
  border-radius: 2px;
  padding: 22px 26px;
  display: flex; align-items: center; gap: 18px;
  font-family: var(--display); font-weight: 500;
  font-size: 17.5px; line-height: 1.4; letter-spacing: -0.005em;
  text-wrap: balance;
}
.nm-postscript .ps-tag {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 700;
  color: var(--paper); background: oklch(0.58 0.13 45);
  padding: 6px 10px; border-radius: 2px;
}

.no-migration-intro {
  max-width: 600px; margin: 0 0 32px;
}
.no-migration-intro h2 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 30;
  font-size: clamp(32px, 3.6vw, 46px); line-height: 1.05;
  letter-spacing: -0.022em; color: oklch(0.18 0.02 260); margin: 14px 0 18px;
  text-wrap: balance;
}
.no-migration-intro p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px; line-height: 1.55;
  color: oklch(0.32 0.025 260); margin: 0;
}

/* ─────────────────────── TESTIMONIALS (tone-rust) ──────────────────────── */
.section.testimonials .section-rule { border-top-color: var(--paper); }
.section.testimonials .section-rule .label { color: var(--paper); }
.section.testimonials .section-rule .meta { color: oklch(0.96 0.04 60); }
.section.testimonials .section-head .intro { color: oklch(0.96 0.04 60); }

.testimonial-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.quote-card {
  background: var(--paper);
  color: oklch(0.18 0.02 260);
  border-radius: 2px;
  padding: 32px 30px 28px;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 24px -14px rgba(0,0,0,0.18);
}
.quote-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: oklch(0.18 0.02 260);
}
.quote-card:nth-child(2)::before { background: oklch(0.32 0.09 258); }
.quote-card:nth-child(3)::before { background: oklch(0.85 0.13 60); }
.quote-card .quote-mark {
  font-family: var(--display); font-weight: 700;
  font-size: 84px; color: oklch(0.58 0.13 45); line-height: 0.7;
  position: absolute; top: 22px; right: 26px; opacity: 0.15;
}
.quote-card blockquote {
  margin: 0 0 26px;
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 70;
  font-size: 19px; line-height: 1.42; color: oklch(0.18 0.02 260);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.quote-card .attrib {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid oklch(0.86 0.012 85);
  display: flex; align-items: center; gap: 14px;
}
.quote-card .avatar {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: oklch(0.93 0.018 82);
  border: 1px solid oklch(0.86 0.012 85);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.quote-card .avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.quote-card .avatar .initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700;
  font-size: 17px; color: oklch(0.18 0.02 260);
}
.quote-card .who {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  color: oklch(0.18 0.02 260); letter-spacing: -0.005em;
}
.quote-card .role {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: oklch(0.50 0.02 260); margin-top: 4px;
}

/* ─────────────────────── TRUST (tone-cream) ──────────────────────── */
.trust-grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 56px; align-items: stretch;
}
.trust-grid .left p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17.5px; line-height: 1.55; color: oklch(0.32 0.025 260);
  margin: 0 0 18px;
}
.stats-card {
  background: oklch(0.32 0.09 258);
  color: var(--paper);
  border-radius: 2px;
  padding: 36px 36px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  position: relative;
  box-shadow: 0 16px 40px -20px rgba(20,18,30,0.3);
}
.stats-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: oklch(0.85 0.13 60);
}
.stat {
  padding: 22px 24px 22px 0;
  border-right: 1px solid oklch(0.42 0.10 258);
  border-bottom: 1px solid oklch(0.42 0.10 258);
}
.stat:nth-child(2n) { border-right: none; padding-left: 24px; padding-right: 0; }
.stat:nth-child(2n+1) { padding-left: 0; }
.stat:nth-child(n+3) { border-bottom: none; padding-bottom: 0; padding-top: 22px; }
.stat:nth-child(-n+2) { padding-top: 0; }
.stat .n {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: clamp(40px, 4.5vw, 56px);
  line-height: 0.95; letter-spacing: -0.03em;
  color: var(--paper);
  display: flex; align-items: baseline; gap: 4px;
}
.stat .n .unit {
  font-size: 0.45em; color: oklch(0.85 0.13 60); font-weight: 600;
  letter-spacing: -0.005em;
}
.stat .n .lead-unit {
  font-size: 0.5em; color: oklch(0.85 0.13 60); font-weight: 600;
}
.stat .l {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.85 0.13 60); font-weight: 600;
  margin-top: 14px;
}

/* ─────────────────────── FINAL CTA (tone-cream-deep) ──────────────────────── */
.final-cta {
  padding: 96px 0 104px;
  background: oklch(0.955 0.014 85);
}
/* Big orange coupon card — distinct from the cream section behind it AND
 * the dark footer that follows. */
.final-coupon {
  max-width: 940px; margin: 0 auto;
  background: oklch(0.58 0.13 45);
  color: var(--paper);
  border: 2px dashed oklch(0.93 0.04 45);
  border-radius: 2px;
  padding: 64px 56px 56px;
  position: relative;
  text-align: center;
  box-shadow: 0 20px 50px -24px rgba(120, 50, 20, 0.4);
}
.final-coupon::before,
.final-coupon::after {
  content: ""; position: absolute;
  width: 16px; height: 16px;
  background: oklch(0.955 0.014 85);
  border: 2px dashed oklch(0.58 0.13 45);
  border-radius: 999px;
}
.final-coupon::before { top: -8px; left: 50%; transform: translateX(-50%); border-top: none; border-left: none; }
.final-coupon::after { bottom: -8px; left: 50%; transform: translateX(-50%); border-bottom: none; border-right: none; }
.final-coupon .ftag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em;
  text-transform: uppercase; font-weight: 700; color: oklch(0.93 0.04 45);
  margin-bottom: 16px;
}
.final-coupon h2 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 10;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.0; letter-spacing: -0.028em;
  color: var(--paper); margin: 0 auto 22px;
  max-width: 720px; text-wrap: balance;
}
.final-coupon .sub {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 70;
  font-size: 19px; line-height: 1.5;
  color: oklch(0.96 0.03 60);
  max-width: 560px; margin: 0 auto 32px;
  text-wrap: pretty;
}
.final-coupon .ctas { display: inline-flex; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; justify-content: center; }
.final-coupon .small {
  font-family: var(--body); font-size: 13.5px;
  color: oklch(0.93 0.04 45);
  max-width: 600px; margin: 0 auto;
  padding-top: 26px;
  border-top: 1px solid oklch(0.50 0.13 45);
}
.final-coupon .small a {
  color: var(--paper);
  border-bottom: 1px solid currentColor;
}
/* Button overrides for orange CTA — ink button + cream outline button. */
.final-coupon .btn--ink { background: oklch(0.18 0.02 260); color: var(--paper); }
.final-coupon .btn--ink:hover { background: #000; }
.final-coupon .btn--ghost-cream { background: transparent; color: var(--paper); border-color: var(--paper); }
.final-coupon .btn--ghost-cream:hover { background: var(--paper); color: oklch(0.58 0.13 45); }

/* ─────────────────────── FOOTER ──────────────────────── */
.footer {
  background: oklch(0.14 0.02 260); color: oklch(0.74 0.015 250);
  padding: 64px 0 32px;
}
.footer-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 80px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px;
}
.footer .footer-brand {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: 36px; letter-spacing: -0.03em;
  color: var(--paper); line-height: 1;
}
.footer .footer-brand .accent { color: oklch(0.58 0.13 45); }
.footer .fblurb {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14px; color: oklch(0.78 0.015 250);
  line-height: 1.5; margin-top: 18px; max-width: 320px;
}
.footer h5 {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: oklch(0.85 0.13 60); margin: 0 0 16px; font-weight: 600;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer a {
  font-family: var(--sans); font-size: 13.5px; color: oklch(0.78 0.015 250);
  transition: color .12s;
}
.footer a:hover { color: var(--paper); }
.footer-bottom {
  max-width: 1320px; margin: 48px auto 0; padding: 22px 80px 0;
  border-top: 1px solid oklch(0.26 0.025 260);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10.5px;
  color: oklch(0.55 0.02 260); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-bottom .tag { color: oklch(0.85 0.13 60); }
.footer-bottom a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.footer-bottom a:hover { color: var(--paper); }

/* ─────────────────────── Reveal on scroll ──────────────────────── */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1; transform: translateY(0);
}

/* ─────────────────────── Responsive ──────────────────────── */
@media (max-width: 1180px) {
  .page { padding: 0 48px; }
  .masthead-inner { padding: 18px 48px; }
  .today-inner { padding: 0 48px; }
  .footer-inner, .footer-bottom { padding-left: 48px; padding-right: 48px; }
  .hero-grid { gap: 48px; }
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .step:not(:last-child) .step-num::after { display: none; }
  .features-grid { grid-template-columns: 1fr; }
  .nm-flow { grid-template-columns: 1fr; gap: 32px; }
  .nm-arrow { position: relative; left: auto !important; top: auto; transform: rotate(90deg); margin: -16px auto; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .page { padding: 0 32px; }
  .masthead-inner { padding: 18px 32px; }
  .today-inner { padding: 0 32px; }
  .footer-inner, .footer-bottom { padding-left: 32px; padding-right: 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .split-2 { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .nav-list, .nav-actions { display: none; }
  .hero-headline { font-size: 44px; }
  .today-cell:not(.today-ticker):not(.label) { display: none; }
  .problem-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .stats-card { grid-template-columns: 1fr; }
  .stat { border-right: none !important; padding: 22px 0 !important; }
  .stat:nth-child(n) { border-bottom: 1px solid oklch(0.42 0.10 258); }
  .stat:last-child { border-bottom: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
  .platform-row { grid-template-columns: 1fr; }
  .final-coupon { padding: 48px 28px 36px; }
  .section { padding: 48px 0; }
  .section-rule { margin-bottom: 16px; }
  .section-head { margin-bottom: 28px; }
  .section-head.align-left { margin-bottom: 20px; }
}