:root {
  --bg: #14110f;
  --bg-deep: #0e0a07;
  --surface: #1c1814;
  --ink: #f5ede0;
  --ink-warm: #c9bca8;
  --ink-dim: #847868;
  --accent: #e8a04a;
  --accent-2: #d97757;
  --velvet: #8b3a4e;
  --border: rgba(245,237,224,0.10);
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --brand-grad: linear-gradient(135deg, #e8a04a 0%, #d97757 50%, #c54f63 100%);
  --ease-cinema: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"); opacity: 0.5; mix-blend-mode: overlay; }
body > * { position: relative; z-index: 2; }

.landing { max-width: 1100px; margin: 0 auto; padding: 24px 20px 56px; }

.hero { text-align: center; padding: 48px 0 64px; }
/* Wordmark master was rendered on a pure-black backdrop so the leather appears lit;
   page bg is warm-dark #14110f (not pure black), so the rectangle was showing.
   `lighten` per-channel = max(logo_px, page_px): the black backdrop becomes the page
   color, while every brown leather pixel (all brighter than #14110f) passes through. */
.hero-wordmark { width: min(420px, 70vw); height: auto; /* Post-Phase-15.3 (2026-05-27): logo-h{N}.png now has native alpha transparency
  via scripts/regenerate-icons.cjs; mix-blend-mode: lighten workaround deleted. */ }
.hero-tagline { font-family: 'Instrument Serif', 'Fraunces', serif; font-style: italic; font-size: 22px; color: var(--ink-warm); margin: 8px 0 10px; }
.hero-subtagline { font-family: 'Instrument Serif', 'Fraunces', serif; font-style: italic; font-size: 16px; color: var(--ink-dim); margin: 0 0 28px; letter-spacing: 0.01em; }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta-primary { display: inline-block; padding: 14px 32px; background: var(--brand-grad); color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; text-decoration: none; border-radius: var(--r-pill); box-shadow: 0 4px 24px rgba(232,160,74,0.25); transition: transform 300ms var(--ease-cinema); }
.cta-primary:hover { transform: translateY(-1px); }
.cta-secondary { color: var(--ink-dim); font-size: 14px; text-decoration: none; border-bottom: 1px dotted var(--border); padding-bottom: 2px; }
.cta-secondary:hover { color: var(--ink-warm); }
.hero-trust { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--ink-dim); margin: 20px 0 0; letter-spacing: 0.01em; }

section { padding: 40px 0; border-top: 1px solid var(--border); }
section h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; margin: 0 0 16px; line-height: 1.2; }
section p { color: var(--ink-warm); max-width: 640px; }

/* Why-we-built-it: longer prose, narrower max-width for readability */
.why p { max-width: 640px; margin: 0 0 16px; color: var(--ink-warm); font-size: 17px; line-height: 1.6; }
.why p strong { color: var(--ink); font-weight: 700; }
.why p em { font-style: italic; color: var(--ink); }

/* Two paths section */
.paths-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
.path-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; }
.path-card .eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--ink-dim); text-transform: uppercase; margin: 0 0 12px; }
.path-card .frame { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--ink-warm); font-size: 18px; margin: 0 0 16px; }
.path-card ol { margin: 0; padding-left: 22px; }
.path-card li { margin-bottom: 10px; color: var(--ink-warm); }
.path-card li strong { color: var(--ink); font-weight: 600; }
.path-card li em { font-style: italic; }
.paths-footnote { margin-top: 20px; font-family: 'Instrument Serif', serif; font-style: italic; color: var(--ink-warm); text-align: center; font-size: 16px; }

.audience-grid, .install-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
.audience-card, .install-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; }
.audience-card h3, .install-card h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; margin: 12px 0 6px; }
.audience-card .emoji { font-size: 36px; display: block; margin-bottom: 4px; }

.how-steps { padding-left: 20px; }
.how-steps li { margin-bottom: 12px; color: var(--ink-warm); }
.how-steps strong { color: var(--ink); font-weight: 600; }

.screenshot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
.screenshot-card { position: relative; margin: 0; aspect-ratio: 1170 / 2532; overflow: hidden; border-radius: 32px; background: var(--bg-deep); border: 1px solid var(--border); box-shadow: 0 18px 40px -16px rgba(0,0,0,0.55), 0 6px 14px -8px rgba(232,160,74,0.10), inset 0 0 0 1px rgba(245,237,224,0.04); transition: transform 320ms var(--ease-cinema), box-shadow 320ms var(--ease-cinema); }
.screenshot-card:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -16px rgba(0,0,0,0.6), 0 10px 20px -8px rgba(232,160,74,0.18), inset 0 0 0 1px rgba(245,237,224,0.06); }
.screenshot-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.screenshot-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 12px 12px; background: linear-gradient(to top, rgba(20,17,15,0.92), rgba(20,17,15,0.55) 60%, rgba(20,17,15,0)); color: var(--ink-warm); font-family: 'Instrument Serif', serif; font-style: italic; font-size: 14px; text-align: center; letter-spacing: 0.02em; }

.landing-footer { padding: 48px 0 0; color: var(--ink-dim); font-size: 13px; text-align: center; border-top: 1px solid var(--border); }
.landing-footer a { color: var(--ink-warm); margin: 0 8px; }
.landing-legal { color: var(--ink-dim); font-size: 13px; margin: 8px 0 0; }
.landing-legal a { color: var(--ink-warm); margin: 0 6px; border-bottom: 1px solid var(--border); }
.landing-legal a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.landing-legal .sep { color: var(--ink-faint); user-select: none; }
.landing-tmdb-attr { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--ink-dim); font-size: 13px; margin: 8px 0 0; }
.landing-tmdb-attr a { color: var(--ink-warm); margin: 0; border-bottom: 1px solid var(--border); }
.landing-tmdb-attr a:hover { color: var(--ink); border-bottom-color: var(--accent); }

@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: left; gap: 48px; padding: 64px 0 80px; }
  .hero-wordmark { width: 100%; max-width: 480px; }
  .hero-cta { flex-direction: row; align-items: flex-start; gap: 16px; }
  .paths-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .audience-grid { grid-template-columns: repeat(3, 1fr); }
  .install-grid { grid-template-columns: repeat(3, 1fr); }
  .screenshot-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .audience-grid { grid-template-columns: repeat(5, 1fr); }
  .screenshot-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Phase 31 / Marketing refresh — comparison + features + FAQ sections.
   D-21: NO new tokens — all rules reuse existing :root declarations above.
   D-19 prep: every change here ships under cache `couch-v48-marketing-refresh`. */

/* Comparison section — leans on .path-card density (cards w/ surface bg + border + r-md). */
.compare-eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--ink-dim); text-transform: uppercase; margin: 0 0 8px; }
.compare-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
.compare-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; }
.compare-block h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: var(--ink); margin: 0 0 8px; line-height: 1.3; }
.compare-block p { color: var(--ink-warm); margin: 0; font-size: 15px; line-height: 1.55; max-width: none; }
.compare-block p em { font-style: italic; color: var(--ink); }

/* Features section — flatter than comparison (no card chrome) so visual weight differs. */
.feature-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 20px; }
.feature-block { padding: 24px 0; border-top: 1px solid var(--border); }
.feature-block:first-child { border-top: none; padding-top: 12px; }
.feature-block h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: var(--ink); margin: 0 0 8px; line-height: 1.3; }
.feature-block p { color: var(--ink-warm); margin: 0; font-size: 15px; line-height: 1.55; max-width: 640px; }

/* FAQ — native <details>/<summary> accordion. Custom marker per .signin-more precedent. */
.faq-list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 20px; transition: border-color 220ms var(--ease-cinema); }
.faq-item[open] { border-color: rgba(232,160,74,0.30); }
.faq-item summary { cursor: pointer; font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; color: var(--ink); user-select: none; list-style: none; padding-right: 28px; position: relative; line-height: 1.3; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: 'Inter', sans-serif; font-weight: 400; font-size: 22px; color: var(--ink-dim); transition: transform 220ms var(--ease-cinema); line-height: 1; }
.faq-item[open] summary::after { content: '−'; color: var(--accent); }
.faq-item p { color: var(--ink-warm); margin: 12px 0 0; font-size: 15px; line-height: 1.55; max-width: 640px; }
.faq-item p a { color: var(--ink-warm); border-bottom: 1px solid var(--border); }
.faq-item p a:hover { color: var(--ink); border-bottom-color: var(--accent); }

@media (min-width: 900px) {
  .compare-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .feature-list { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .feature-block { padding: 24px 0; }
  .feature-block:nth-child(2) { border-top: none; padding-top: 12px; }
}