/* ---------------------------------------------------------------------------
   Lia — bookwithlia.com  (v3 — mimics the shipped site)
   Warm cream + terracotta orange, rounded forms, soft shadows.
   Cormorant Garamond display + DM Sans body kept; italics carry the brand
   accent in orange (instead of the gold called for in the older DESIGN.md).
   --------------------------------------------------------------------------- */

:root {
  /* ---- Color tokens (live-site palette) ---- */
  --cream:        #FAF5EE;   /* page background */
  --cream-warm:   #F4EBDC;   /* panel + section band */
  --cream-soft:   #FDF1E5;   /* hero faint warm wash */
  --paper:        #FFFFFF;   /* card surface (when cards sit on cream) */

  --ink:          #1A1F2E;   /* primary text — dark navy */
  --ink-soft:     #2C3344;   /* secondary text */
  --muted:        #4B5563;   /* meta text — WCAG AA on cream */
  --rule:         #E7DECB;   /* hairline rules on cream */
  --rule-soft:    #EFE7D7;   /* even softer rule */

  --tc:           #E97B3C;   /* terracotta — primary accent */
  --tc-deep:      #D26424;   /* hover / pressed */
  --tc-soft:      #F4B58A;   /* tints, soft accents */
  --tc-tint:      #FCE2CB;   /* card icon background */
  --tc-band:      #FBE6D2;   /* full-width pale band */

  --night:        #14181F;   /* dark panel background (Become a Founding Partner) */
  --night-soft:   rgba(255,255,255,0.78);

  --danger:       #A14A2A;

  /* ---- Type ---- */
  --display: 'Cormorant Garamond', Georgia, serif;
  --body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Geometry ---- */
  --radius:       14px;
  --radius-sm:    10px;
  --radius-lg:    20px;
  --radius-pill:  999px;

  --shadow-card:  0 4px 14px rgba(20,24,31,0.04), 0 1px 2px rgba(20,24,31,0.05);
  --shadow-lift:  0 12px 32px -16px rgba(20,24,31,0.18), 0 2px 4px rgba(20,24,31,0.05);
  --shadow-hero:  0 24px 60px -30px rgba(20,24,31,0.25), 0 6px 14px rgba(20,24,31,0.06);

  --gutter:       64px;
  --max:          1200px;
  --max-content:  1000px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Very subtle grain (kept at low opacity — the live site is clean but a
   touch of texture keeps the cream surface from feeling synthetic.) */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.015;
  z-index: 100;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; margin: 0; color: var(--ink); }
h1 {
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
}
h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
h3 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 500; line-height: 1.3; }
p  { margin: 0 0 1em 0; }

/* Italic accents in display headlines are terracotta — the brand gesture */
h1 em, h1 .italic,
h2 em, h2 .italic,
h3 em, h3 .italic {
  color: var(--tc);
  font-style: italic;
  font-weight: 400;
}

/* Lede / deck */
.lede {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 50ch;
  text-wrap: pretty;
}
.lede strong {
  font-weight: 600;
  color: var(--ink);
}
.lede em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  color: var(--tc);
  font-size: 1.06em;
  letter-spacing: -0.005em;
}
.deck {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
}

/* Eyebrow — two forms. The em-dash form for inline section headers,
   the pill-badge form for hero-level eyebrows that need presence. */
.eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tc);
}
.eyebrow.dash::before { content: "— "; color: var(--tc); }

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tc);
  border: 1px solid var(--tc);
  background: transparent;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
}
.pill-badge.solid {
  background: var(--tc);
  color: var(--paper);
  border-color: var(--tc);
}
.pill-badge.tint {
  background: var(--tc-tint);
  color: var(--tc-deep);
  border-color: transparent;
}

/* Caption */
.caption {
  font-size: 13px;
  color: var(--muted);
}

/* Tabular numbers wherever they appear */
.num, .meta-strip dd, .stat-num, .price {
  font-variant-numeric: tabular-nums;
}

/* Links */
a { color: inherit; text-decoration: none; }
a.linked {
  color: var(--tc);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
a.linked:hover { color: var(--tc-deep); }

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

/* ---------- Layout ---------- */
.shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.shell.narrow { max-width: var(--max-content); }
section { padding: 64px 0; }
section.tight { padding: 40px 0; }
section.flush-top { padding-top: 0; }
section.flush-bottom { padding-bottom: 0; }
body[data-screen-label="02 How it works"] section { padding: 36px 0; }
body[data-screen-label="02 How it works"] section.tight { padding: 22px 0; }
body[data-screen-label="02 How it works"] section.flush-top { padding-top: 0; }
body[data-screen-label="02 How it works"] section.flush-bottom { padding-bottom: 0; }

.band-warm { background: var(--cream-warm); }
.band-tint { background: var(--tc-band); }
.band-night { background: var(--night); color: var(--cream); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,245,238,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; gap: 36px;
}
.brand-mark {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-mark .home-tag {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.95em;
  margin-left: 4px;
}
.nav-links {
  display: flex; align-items: center; gap: 32px;
  list-style: none; padding: 0; margin: 0 auto;
}
.nav-links a {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--tc); }
.nav-cta { margin-left: 0; }
.nav-hamburger {
  display: none;
  background: none; border: 0; padding: 6px; cursor: pointer;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px; background: var(--ink);
  margin: 5px 0;
  border-radius: 1px;
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.btn-primary {
  background: var(--tc);
  color: var(--paper);
}
.btn-primary:hover { background: var(--tc-deep); }
.btn-primary.on-dark { background: var(--tc); color: var(--paper); }
.btn-primary.on-dark:hover { background: var(--tc-deep); }

.btn-secondary {
  background: transparent;
  color: var(--tc);
  border-color: var(--tc);
}
.btn-secondary:hover {
  background: var(--tc);
  color: var(--paper);
}
.btn-secondary.on-dark {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255,255,255,0.82);
}
.btn-secondary.on-dark:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--paper);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  padding: 10px 12px;
}
.btn-ghost:hover { color: var(--tc); }

.btn-small {
  padding: 10px 18px;
  font-size: 13px;
}
.btn-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
}

/* "Watch Lia's Intro" small play link */
.play-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  background: none; border: 0; padding: 8px 0;
  cursor: pointer;
}
.play-link .play-ring {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--tc);
  color: var(--tc);
  display: inline-flex; align-items: center; justify-content: center;
}
.play-link .play-ring svg { width: 12px; height: 12px; }
.play-link:hover { color: var(--ink); }
.play-link:hover .play-ring { background: var(--tc-tint); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 56px 0 72px;
  overflow: hidden;
  background: var(--cream);
}
/* The decorative gold/orange swirl behind the hero. Built as an SVG
   background so it scales and stays soft on every viewport. Subtle. */
.hero-swirl {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(60% 50% at 88% 14%, rgba(233,123,60,0.10) 0%, rgba(233,123,60,0) 70%),
    radial-gradient(50% 70% at 15% 95%, rgba(244,181,138,0.10) 0%, rgba(244,181,138,0) 70%);
}
.hero-swirl svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0.55;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero-content .pill-badge { margin-bottom: 32px; }
.hero-content h1 { margin-bottom: 28px; }
.hero-content .lede { margin-bottom: 36px; }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.hero-foot {
  margin-top: 28px;
}

/* Lia portrait card — tilted, with "Meet Lia" tag */
.meet-card {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 5 / 6;
  border-radius: var(--radius-lg);
  overflow: visible;
  transform: rotate(-1.5deg);
  transition: transform 0.5s ease;
}
.meet-card:hover { transform: rotate(0deg); }
.meet-card .meet-photo {
  width: 100%; height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-hero);
  position: relative;
}
.meet-card .meet-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
.meet-card .meet-tag {
  position: absolute;
  right: -14px; bottom: -22px;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 10px 18px;
  box-shadow: var(--shadow-card);
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  z-index: 2;
}
.meet-card .meet-tag .meet-name {
  display: block;
  margin-top: 2px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--tc);
  letter-spacing: 0;
  line-height: 1;
}

/* ---------- Stat strip (4 cells, big serif numbers) ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--cream-warm);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-cell {
  padding: 34px 24px;
  text-align: center;
  border-right: 1px solid var(--rule);
}
.stat-cell:last-child { border-right: 0; }
.stat-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 3.6vw, 3.2rem);
  line-height: 1;
  color: var(--tc);
  letter-spacing: -0.015em;
}
.stat-cell .stat-label {
  margin-top: 14px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Section heads (eyebrow + h2 + deck) ---------- */
.section-head { margin-bottom: 56px; max-width: 760px; }
.section-head .eyebrow { display: inline-block; margin-bottom: 18px; }
.section-head h2 { margin-bottom: 18px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Reasoning cards (Sound familiar? / How Lia helps / What changes) ---------- */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.reason-grid.two { grid-template-columns: repeat(2, 1fr); }
.reason-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.reason-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.reason-card .ico {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--tc-tint);
  color: var(--tc-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.reason-card .ico svg { width: 22px; height: 22px; }
.reason-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.reason-card p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* Outcome card — numbered */
.outcome-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.outcome-card .num-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--tc-tint);
  color: var(--tc-deep);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 18px;
}
.outcome-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
}
.outcome-card p {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--muted);
}

/* ---------- Industry tabs (pricing + microsite vertical selector) ---------- */
.industry-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: transparent;
  margin-bottom: 28px;
}
.industry-tab {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.18s ease;
}
.industry-tab:hover { border-color: var(--tc-soft); color: var(--ink); }
.industry-tab[aria-pressed="true"] {
  background: var(--tc);
  color: var(--paper);
  border-color: var(--tc);
}

/* Billing toggle (Monthly / Annual) */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.toggle .switch {
  position: relative;
  width: 44px; height: 24px;
  border-radius: var(--radius-pill);
  background: var(--rule);
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}
.toggle .switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(20,24,31,0.2);
  transition: transform 0.22s ease;
}
.toggle .switch[aria-checked="true"] { background: var(--tc); }
.toggle .switch[aria-checked="true"]::after { transform: translateX(20px); }
.toggle .save-tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tc-deep);
  background: var(--tc-tint);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* ---------- Pricing cards ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px 24px 26px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.pricing-card.featured {
  border-color: var(--tc);
  box-shadow: 0 0 0 1px var(--tc), var(--shadow-lift);
}
.pricing-card .popular-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tc);
  color: var(--paper);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pricing-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.pricing-card .tier-sub {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.pricing-card .tier-fit {
  margin-top: 6px;
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
}
.pricing-card .tier-price {
  margin-top: 26px;
  display: flex; align-items: baseline; gap: 2px;
  font-variant-numeric: tabular-nums;
}
.pricing-card .tier-price .currency {
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-right: 6px;
  font-family: var(--display);
}
.pricing-card .tier-price .amount {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--ink);
  line-height: 1;
}
.pricing-card .tier-price .per {
  margin-left: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.pricing-card .tier-cta {
  margin-top: auto;
  padding-top: 24px;
}
.pricing-card .tier-cta .btn-secondary { width: 100%; padding: 12px 14px; font-size: 13px; }
.pricing-card.featured .tier-cta .btn-secondary {
  background: var(--tc);
  color: var(--paper);
  border-color: var(--tc);
}
.pricing-card.featured .tier-cta .btn-secondary:hover { background: var(--tc-deep); }

/* "Included on every plan" rounded panel */
.included-panel {
  margin-top: 36px;
  background: var(--cream-warm);
  border-radius: var(--radius);
  padding: 26px 30px;
}
.included-panel .ip-eye {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.included-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 28px;
}
.included-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}
.included-list li::before {
  content: "✓";
  color: var(--tc);
  font-weight: 600;
}

/* "How we price this" explainer panel */
.explain-panel {
  margin-top: 18px;
  background: var(--cream-warm);
  border-radius: var(--radius);
  padding: 22px 26px;
}
.explain-panel .ep-eye {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.explain-panel .ep-eye::before { content: "✦  "; color: var(--tc); }
.explain-panel p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- Creed pair (What Lia is / What Lia is not) ---------- */
.creed-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.creed-col {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 32px 30px;
  box-shadow: var(--shadow-card);
}
.creed-col.is-not { background: var(--cream-warm); border-color: var(--rule); }
.creed-col .creed-label {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 22px;
}
.creed-col.is .creed-label em { color: var(--tc); font-style: italic; letter-spacing: 0; }
.creed-col.is-not .creed-label em { color: var(--danger); font-style: italic; letter-spacing: 0; }
.creed-col ul { list-style: none; padding: 0; margin: 0; }
.creed-col li {
  padding: 14px 0;
  border-top: 1px dashed var(--rule);
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
}
.creed-col li:first-child { border-top: 0; padding-top: 0; }
.creed-col li em { font-style: italic; color: var(--tc); }
.creed-col.is-not li {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(107,114,128,0.4);
  text-decoration-thickness: 1px;
}
.creed-col.is-not li em {
  color: var(--danger);
  text-decoration: none;
}

/* ---------- Press / partner strip ---------- */
.press-strip {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 36px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.press-strip .ps-label {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.press-strip .ps-pub {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink);
  letter-spacing: 0;
}
.press-strip .ps-loc {
  font-size: 13px;
  color: var(--muted);
}
.press-strip .ps-future {
  margin-left: auto;
  font-family: var(--body);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.press-strip .ps-future em { color: var(--tc); font-style: italic; }

/* ---------- 60-second film card (re-styled to rounded vocabulary) ---------- */
.film-card {
  position: relative;
  display: block;
  width: 100%;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  font: inherit;
}
.film-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.7;
  transition: opacity 0.5s ease, transform 4s ease;
}
.film-card:hover img { opacity: 0.55; transform: scale(1.02); }
.film-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,24,31,0.05) 0%, rgba(20,24,31,0.5) 65%, rgba(20,24,31,0.78) 100%);
}
.film-card .film-inner {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto;
  padding: 36px 44px; gap: 0;
}
.film-card .film-eyebrow {
  grid-column: 1 / -1;
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tc-soft);
}
.film-card .film-title {
  grid-column: 1; align-self: end;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0; max-width: 18ch;
  color: var(--cream);
}
.film-card .film-title em { color: var(--tc-soft); font-style: italic; }
.film-card .film-meta {
  grid-column: 1; margin-top: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.04em;
  color: rgba(245,242,237,0.7);
  display: flex; gap: 12px;
}
.film-card .film-play {
  grid-column: 2; grid-row: 2 / 4;
  align-self: end; justify-self: end;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid var(--tc-soft);
  color: var(--tc-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.film-card:hover .film-play { transform: scale(1.07); background: rgba(244,181,138,0.12); color: var(--paper); }
.film-card .film-play svg { width: 22px; height: 22px; transform: translateX(2px); }

/* ---------- Film modal ---------- */
.film-modal {
  position: fixed; inset: 0;
  background: var(--night);
  color: var(--cream);
  z-index: 1000;
  display: flex; flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.film-modal.is-open { opacity: 1; pointer-events: auto; }
.film-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.film-modal-head .fm-tag { color: var(--tc-soft); }
.film-modal-head .fm-close {
  background: none; border: 0;
  font: inherit;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
}
.film-modal-head .fm-close:hover { color: var(--tc-soft); }

/* Film iframe wrapper — fills remaining space below modal header */
.film-iframe-wrap {
  flex: 1;
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
}
.film-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: #0a0a0a;
}

.film-stage {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 8vw;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease, transform 1.4s ease;
  pointer-events: none;
}
.scene.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scene .scene-inner { max-width: 880px; width: 100%; }
.scene .scene-num {
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tc-soft);
  margin-bottom: 22px;
}
.scene h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--cream);
}
.scene h2 em { color: var(--tc); font-style: italic; }
.scene .scene-deck {
  margin-top: 22px;
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  max-width: 56ch;
}
.scene .scene-card {
  margin-top: 30px;
  border-radius: var(--radius);
  padding: 22px 26px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  max-width: 640px;
}
.scene .scene-card .sc-from {
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tc-soft);
  margin-bottom: 10px;
}
.scene .scene-card .sc-msg {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--cream);
}
.scene-2 .lang-cycle { display: inline-block; min-width: 5ch; font-style: italic; color: var(--tc); }
.scene-3 .pref-list {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-width: 700px;
}
.scene-3 .pref-list li {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: grid; grid-template-columns: 110px 1fr; gap: 14px;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.scene-3.is-playing .pref-list li { opacity: 1; transform: translateY(0); }
.scene-3 .pref-list dt {
  font-family: var(--body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tc-soft);
}
.scene-3 .pref-list dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--cream);
}
.scene-4 .brief-stamp {
  margin-top: 28px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--tc-soft);
  max-width: 700px;
}

.film-transport {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 32px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.film-transport .timer {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.05em;
  color: var(--tc-soft); min-width: 90px;
}
.film-transport .rail {
  position: relative; flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.12);
  border-radius: 1px;
}
.film-transport .rail-fill {
  position: absolute; top: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--tc);
  border-radius: 1px;
  transition: width 0.25s linear;
}
.film-transport .ticks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.film-transport .ticks span { border-left: 1px solid rgba(255,255,255,0.10); }
.film-transport .ticks span:first-child { border-left: 0; }
.film-transport .scene-label {
  font-family: var(--body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  min-width: 18ch; text-align: right;
}

/* ---------- Film scenes — additional treatments (4-act version) ---------- */
.scene-2 .channel-grid {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 680px;
}
.scene-2 .channel-grid .ch {
  font-family: var(--body);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cream);
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.03);
}
.scene-2.is-active .channel-grid .ch {
  animation: chFadeIn 0.6s ease both;
}
.scene-2.is-active .channel-grid .ch:nth-child(1) { animation-delay: 0.1s; }
.scene-2.is-active .channel-grid .ch:nth-child(2) { animation-delay: 0.25s; }
.scene-2.is-active .channel-grid .ch:nth-child(3) { animation-delay: 0.4s; }
.scene-2.is-active .channel-grid .ch:nth-child(4) { animation-delay: 0.55s; }
.scene-2.is-active .channel-grid .ch:nth-child(5) { animation-delay: 0.7s; }
.scene-2.is-active .channel-grid .ch:nth-child(6) { animation-delay: 0.85s; }
@keyframes chFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scene-3 .pref-list-solution {
  display: block;
  max-width: 760px;
  margin-top: 32px;
}
.scene-3 .pref-list-solution li {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.scene-3 .pref-list-solution li:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.scene-3 .pref-list-solution dt {
  font-family: var(--display);
  font-size: 22px; font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tc);
}
.scene-3 .pref-list-solution dd {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.45;
  color: var(--cream);
  margin: 0;
}

.scene-4 .closing-mark {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border: 1px solid rgba(244,181,138,0.32);
  border-radius: var(--radius-pill);
}
.scene-4 .closing-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--tc);
}

/* ---------- BDR Brief preview (how-it-works) ---------- */
.brief-stage {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 24px;
  align-items: start;
}
.channel-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 26px;
  min-height: 380px;
  display: flex; flex-direction: column;
}
.channel-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--rule);
}
.channel-head .ch-tag {
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tc);
}
.channel-head .ch-now {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
}
.guest-msg, .lia-msg {
  margin: 22px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.4;
}
.guest-msg .who, .lia-msg .who {
  display: block;
  font-family: var(--body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.lia-msg .who { color: var(--tc); }
.lia-msg .typing-caret {
  display: inline-block; width: 8px; height: 1.05em;
  background: var(--tc); margin-left: 2px;
  transform: translateY(2px);
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.brief-panel {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 28px 28px 22px;
  box-shadow: var(--shadow-card);
  min-height: 380px;
}
.brief-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brief-head .b-tag {
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tc-soft);
}
.brief-head .b-stamp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: rgba(255,255,255,0.82);
}
.brief-body { margin-top: 8px; }
.brief-row {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.brief-row.is-visible { opacity: 1; transform: translateY(0); }
.brief-row:last-child { border-bottom: 0; }
.brief-row dt {
  font-family: var(--body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tc-soft);
  padding-top: 2px;
}
.brief-row dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--cream);
}
.brief-row dd em { font-style: italic; color: var(--tc); }
.brief-row dd .tag {
  display: inline-block;
  font-family: var(--body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tc-soft);
  border: 1px solid rgba(244,181,138,0.4);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  margin-right: 6px;
  margin-bottom: 4px;
}
.brief-foot {
  margin-top: 22px; display: flex; gap: 12px; align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.brief-foot .lat {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--tc-soft);
}
.brief-foot .lat .dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--tc); border-radius: 50%;
  margin-right: 8px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.brief-foot .lat-label {
  margin-left: auto;
  font-family: var(--body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.brief-controls {
  display: flex; gap: 12px; align-items: center;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.brief-controls .step-pill {
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.18s;
}
.brief-controls .step-pill[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.brief-controls .replay {
  margin-left: 12px;
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tc);
  background: none; border: 0; cursor: pointer;
}
.brief-controls .replay:hover { color: var(--tc-deep); }

/* ---------- Memory diptych ---------- */
.diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.diptych > div {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 32px 30px;
}
.dip-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--tc-tint);
  color: var(--tc-deep);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 16px;
}
.diptych h3 { font-size: 1.5rem; }
.diptych h3 em { color: var(--tc); }
.diptych p { margin-top: 12px; color: var(--ink-soft); }
.dip-list {
  list-style: none; padding: 0; margin: 20px 0 0;
}
.dip-list li {
  font-size: 14.5px; color: var(--ink-soft);
  padding: 10px 0;
  border-top: 1px dashed var(--rule);
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
}
.dip-list li::before { content: "→"; color: var(--tc); }

/* ---------- Three-stage (how-it-works) ---------- */
.stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.stage {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 32px 28px 28px;
}
.stage .stage-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--tc-tint);
  color: var(--tc-deep);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  margin-bottom: 20px;
}
.stage h3 { font-size: 1.4rem; }
.stage h3 em { color: var(--tc); }
.stage p { margin-top: 10px; color: var(--ink-soft); font-size: 14.5px; }
.stage .stage-foot {
  margin-top: 22px;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
}

/* ---------- Pull quote ---------- */
.pull {
  padding: 56px 0;
  margin: 60px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.pull blockquote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.3;
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink);
}
.pull cite {
  display: block;
  margin-top: 18px;
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}

/* ---------- Capabilities list ---------- */
.cap-list {
  list-style: none; padding: 0; margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 8px 28px;
}
.cap-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px dashed var(--rule);
  font-size: 14.5px;
  color: var(--ink-soft);
}
.cap-list li:first-child { border-top: 0; }
.cap-list li::before {
  content: "→";
  color: var(--tc);
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.4;
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 22px 28px;
}
.faq details:last-of-type { border-bottom: 0; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--display);
  color: var(--tc);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 400;
  transition: transform 0.3s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq .answer {
  margin-top: 14px;
  max-width: 70ch;
  color: var(--ink-soft);
  font-size: 14.5px;
}

/* ---------- CTA section centered (Ready to see Lia in action?) ---------- */
.cta-center {
  text-align: center;
  padding: 56px 0;
}
.cta-center .eyebrow { display: inline-block; margin-bottom: 18px; }
.cta-center h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.cta-center p { margin: 22px auto 36px; max-width: 56ch; color: var(--muted); }
.cta-center .ctas { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- Vertical entry cards (kept for /how-it-works back-link section) ---------- */
.entry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.entry {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 30px 26px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-height: 240px;
}
.entry:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.entry .entry-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--tc);
}
.entry h3 { margin-top: 10px; font-size: 1.5rem; }
.entry h3 em { color: var(--tc); }
.entry p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14.5px;
}
.entry .entry-foot {
  margin-top: auto;
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 24px;
  border-top: 1px dashed var(--rule);
}
.entry .arrow {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--tc);
  transition: transform 0.3s ease;
}
.entry:hover .arrow { transform: translateX(6px); }
.entry .entry-meta {
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Footer (live-site style) ---------- */
.footer {
  background: var(--cream);
  border-top: 1px solid var(--rule);
  padding: 60px 0 24px;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}
.footer .brand-mark {
  font-size: 2.4rem;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1;
  display: inline-block;
}
.brand-mark .dot { color: var(--tc); }
.footer .footer-lede {
  margin-top: 22px;
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
}
.footer .footer-meta {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.7;
}
.footer .footer-meta a { color: var(--ink-soft); border-bottom: 1px solid var(--rule); transition: color 0.18s ease, border-color 0.18s ease; }
.footer .footer-meta a:hover { color: var(--tc); border-bottom-color: var(--tc); }
.footer h4 {
  font-family: var(--body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--tc);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { padding: 7px 0; }
.footer ul a {
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  transition: color 0.18s ease;
}
.footer ul a:hover { color: var(--tc); }
.footer ul li.soon {
  color: var(--muted);
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
}
.footer ul li.soon .soon-tag {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--tc);
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--tc);
  border-radius: 999px;
  vertical-align: 3px;
}
.footer .colophon {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.footer .colophon .right { display: flex; gap: 28px; }
.footer .colophon a { color: var(--muted); transition: color 0.18s ease; }
.footer .colophon a:hover { color: var(--tc); }

/* ---------- Dark Founding-Partner panel ---------- */
.fp-panel {
  background: var(--night);
  color: var(--cream);
  padding: 64px 0;
  text-align: center;
}
.fp-panel .eyebrow { color: var(--tc); margin-bottom: 18px; display: inline-block; }
.fp-panel h2 { color: var(--cream); font-size: clamp(2.4rem, 4vw, 3.6rem); }
.fp-panel p { margin: 22px auto 36px; color: rgba(255,255,255,0.72); max-width: 56ch; }
.fp-panel .ctas { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- Partners — categories on warm band ---------- */
.partner-band {
  background: var(--cream-warm);
  padding: 56px 0;
}
.partner-band .reason-card { background: var(--paper); }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--cream);
  padding: 10px 16px;
  font-family: var(--body); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.skip:focus { left: 16px; top: 16px; z-index: 999; border-radius: var(--radius-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  :root { --gutter: 24px; }
  section { padding: 40px 0; }
  .hero { padding: 28px 0 44px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .meet-card { max-width: 360px; margin: 0 auto; transform: rotate(-1deg); }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-cell { border-right: 0; border-bottom: 1px solid var(--rule); }
  .stat-cell:nth-child(odd) { border-right: 1px solid var(--rule); }
  .stat-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .reason-grid, .reason-grid.two { grid-template-columns: 1fr; }
  .creed-pair, .diptych, .brief-stage { grid-template-columns: 1fr; }
  .stages { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .pricing-card.featured { transform: none; }
  .included-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .nav-links { display: none; }
  .nav-hamburger { display: block; margin-left: auto; }
  .nav-cta { display: none; }
  .nav.is-scrolled .nav-cta {
    display: inline-flex;
    margin-left: auto;
    padding: 8px 14px;
    font-size: 12px;
    letter-spacing: 0.02em;
  }
  .nav.is-scrolled .nav-hamburger { margin-left: 10px; }
  .nav-links.is-open {
    display: flex; flex-direction: column; gap: 18px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
    padding: 24px var(--gutter);
    margin: 0;
  }
  .film-card { aspect-ratio: 4 / 5; }
  .film-card .film-inner { padding: 28px 24px; }
  .film-card .film-play { width: 56px; height: 56px; }
  .scene-3 .pref-list { grid-template-columns: 1fr; }
  .scene-4 .brief-stamp { grid-template-columns: 1fr; gap: 8px; }
  .film-transport { flex-wrap: wrap; }
  .film-transport .scene-label { width: 100%; text-align: left; }
  .press-strip { gap: 16px; }
  .press-strip .ps-future { margin-left: 0; width: 100%; }
}

@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; }
  h1 { font-size: clamp(2.4rem, 9vw, 3rem); }

  /* ---- BDR Brief preview, tightened for mobile ---- */
  .brief-controls {
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 22px;
    justify-content: flex-start;
  }
  .brief-controls .step-pill {
    flex: 1 1 calc(50% - 8px);
    padding: 9px 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-align: center;
  }
  .brief-controls .replay {
    flex: 1 1 calc(50% - 8px);
    margin-left: 0;
    padding: 9px 10px;
    text-align: center;
  }

  .brief-stage { gap: 16px; }
  .channel-panel,
  .brief-panel {
    padding: 18px 16px;
    min-height: 0;
    border-radius: 14px;
  }
  .channel-head { gap: 8px; padding-bottom: 10px; flex-wrap: wrap; }
  .channel-head .ch-tag,
  .brief-head .b-tag { font-size: 10px; letter-spacing: 0.16em; }
  .channel-head .ch-now,
  .brief-head .b-stamp { font-size: 10px; }
  .channel-head .ch-now { margin-left: auto; }

  .guest-msg, .lia-msg {
    margin-top: 16px;
    font-size: 0.98rem;
    line-height: 1.45;
  }
  .guest-msg .who, .lia-msg .who {
    font-size: 9px; letter-spacing: 0.18em; margin-bottom: 6px;
  }

  .brief-panel { padding: 18px 16px 16px; }
  .brief-head { flex-wrap: wrap; gap: 6px; padding-bottom: 10px; }
  .brief-body { margin-top: 4px; }
  .brief-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }
  .brief-row dt { font-size: 9px; letter-spacing: 0.2em; padding-top: 0; }
  .brief-row dd { font-size: 0.98rem; line-height: 1.4; }
  .brief-row dd .tag {
    font-size: 9px;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    margin-right: 4px;
    margin-bottom: 4px;
  }
  .brief-foot { margin-top: 14px; padding-top: 12px; gap: 8px; flex-wrap: wrap; }
  .brief-foot .lat,
  .brief-foot .lat-label { font-size: 9px; letter-spacing: 0.18em; }
  .brief-foot .lat-label { margin-left: auto; }
}

/* ---------------------------------------------------------------------------
   Legal pages (Privacy · Cookies · Terms) — editorial long-form prose
   --------------------------------------------------------------------------- */
.legal-hero { padding: 56px 0 36px; }
.legal-hero h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); margin-top: 18px; }
.legal-meta {
  margin-top: 22px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-meta .sep { color: var(--tc); margin: 0 8px; }

.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
}
/* Sticky table of contents */
.legal-toc {
  position: sticky;
  top: 96px;
}
.legal-toc .toc-eye {
  font-family: var(--body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--tc);
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  padding: 8px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--muted);
  padding-top: 2px;
}
.legal-toc a:hover { color: var(--tc); }

/* Prose body */
.legal-body { max-width: 70ch; }
.legal-note {
  background: var(--cream-warm);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 44px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.legal-note strong { color: var(--ink); font-weight: 600; }
.legal-section { padding-top: 8px; margin-bottom: 48px; scroll-margin-top: 96px; }
.legal-section > .sec-eye {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--tc);
  display: block;
  margin-bottom: 10px;
}
.legal-section h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: 18px;
}
.legal-section h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ink);
  margin: 30px 0 12px;
}
.legal-body p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-soft);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.legal-body a.linked, .legal-body a[href^="mailto"] {
  color: var(--tc);
  border-bottom: 1px solid currentColor;
}
.legal-body ul, .legal-body ol.legal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.legal-body ul li, .legal-body ol.legal-list li {
  position: relative;
  padding: 8px 0 8px 26px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  border-top: 1px dashed var(--rule);
}
.legal-body ul li:first-child, .legal-body ol.legal-list li:first-child { border-top: 0; }
.legal-body ul li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--tc);
}
.legal-body ol.legal-list { counter-reset: ll; }
.legal-body ol.legal-list li { counter-increment: ll; }
.legal-body ol.legal-list li::before {
  content: counter(ll);
  position: absolute; left: 0;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--tc);
  padding-top: 3px;
}
.legal-body li strong { color: var(--ink); font-weight: 600; }

/* Definition grid (data tables, sub-processors) */
.legal-defs {
  margin: 0 0 18px;
  border-top: 1px solid var(--rule);
}
.legal-defs .row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.legal-defs dt {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.legal-defs dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.legal-contact {
  margin-top: 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px 30px;
}
.legal-contact h3 { margin-top: 0; }
.legal-contact p { margin-bottom: 6px; }

@media (max-width: 960px) {
  .legal-layout { grid-template-columns: 1fr; gap: 8px; }
  .legal-toc { position: static; margin-bottom: 32px; }
  .legal-toc ol { columns: 2; column-gap: 28px; }
  .legal-defs .row { grid-template-columns: 1fr; gap: 4px; }
}