/* Three reversible art directions; the published homepage is unchanged. */
body.theme-preview {
  --page: #080f1c;
  --surface: #0d1829;
  --raised: #15243a;
  --text: #eef3fc;
  --secondary: #acbad0;
  --quiet: #94a7c1;
  --accent: #a1bdff;
  --edge: #293a53;
  --diagram: #1a2e4b;
  --diagram-front: #243853;
  --diagram-line: #54729c;
  --input: #0c1729;
  --ink: var(--text);
  --paper: var(--page);
  --line: var(--edge);
  --blue: #a1bdff;
  background: var(--page);
  color: var(--text);
  color-scheme: dark;
}
.theme-preview ::selection { background: #476bb5; color: #fff; }
.theme-preview .hero { color: #f6f7fc; }
.theme-preview .hero .status-dot { background: #a1bdff; }
.theme-preview .hero::after { background: linear-gradient(180deg, #050a131a 0%, transparent 55%, #080f1c00 68%, #080f1c80 84%, #080f1c 100%); }
.theme-preview .problem.turning-point { background: var(--page); }
.theme-preview .turning-point .section-kicker,
.theme-preview .value-pillars.section-shell,
.theme-preview .turning-point-close,
.theme-preview .problem-card-copy,
.theme-preview .faq-list details,
.theme-preview .site-footer { border-color: var(--edge); }
.theme-preview .section-number,
.theme-preview .turning-point .section-number,
.theme-preview .value-pillars .section-number,
.theme-preview .turning-point-aside,
.theme-preview .problem-card-label,
.theme-preview .turning-point .card-index { color: var(--quiet); }
.theme-preview h2,
.theme-preview .turning-point .problem-cards h3,
.theme-preview .pillar-card h4,
.theme-preview .turning-point-close p { color: var(--text); }
.theme-preview h2 em,
.theme-preview .turning-point .problem-heading h2 em,
.theme-preview .pillars-intro h2 em,
.theme-preview .turning-point-close em { color: var(--accent); }
.theme-preview .turning-point .problem-heading > p,
.theme-preview .turning-point .problem-cards p,
.theme-preview .pillars-intro > p,
.theme-preview .pillar-card p,
.theme-preview .for-you > p,
.theme-preview .faq-list details p { color: var(--secondary); }
.theme-preview .turning-point .problem-heading > p { border-left-color: var(--diagram-line); }
.theme-preview .turning-point .problem-heading strong { color: var(--text); }
.theme-preview .turning-point .problem-cards article,
.theme-preview .turning-point .problem-cards article + article { background: linear-gradient(145deg, var(--surface), var(--raised)); border-color: var(--edge); }
.theme-preview .pillar-card { background: var(--surface); border-color: var(--edge); }
.theme-preview .pillar-group-heading h3 { color: var(--secondary); }
.theme-preview .pillar-group-heading::after { background: var(--edge); }
.theme-preview .pillar-icon { color: var(--accent); }
.theme-preview .feature-paper,
.theme-preview .context-paper,
.theme-preview .growth-project { background: var(--diagram); border-color: var(--diagram-line); box-shadow: 0 10px 24px #0002; }
.theme-preview .old-feature,
.theme-preview .intent-change,
.theme-preview .rebuild-note { background: var(--diagram-front); border-color: var(--diagram-line); box-shadow: 0 10px 24px #0002; }
.theme-preview .paper-caption,
.theme-preview .old-feature .paper-caption,
.theme-preview .context-paper .paper-caption,
.theme-preview .intent-change .paper-caption,
.theme-preview .growth-caption,
.theme-preview .rebuild-caption { color: var(--quiet); }
.theme-preview .feature-paper b,
.theme-preview .old-feature b,
.theme-preview .context-paper > span:not(.memo-dot),
.theme-preview .intent-change > span:not(.memo-dot),
.theme-preview .rebuild-question { color: var(--text); }
.theme-preview .paper-status,
.theme-preview .old-feature .paper-status,
.theme-preview .context-paper b,
.theme-preview .intent-change b { color: var(--secondary); }
.theme-preview .paper-line,
.theme-preview .old-feature .paper-line,
.theme-preview .memo-line,
.theme-preview .next-context .memo-line,
.theme-preview .intent-change .memo-line,
.theme-preview .rebuild-line { background: var(--diagram-line); }
.theme-preview .old-feature .paper-status i { background: var(--diagram-line); color: var(--text); }
.theme-preview .change-connector { border-color: var(--diagram-line); }
.theme-preview .growth-grid span { background: var(--surface); color: var(--secondary); border-color: var(--diagram-line); }
.theme-preview .for-you.section-shell { max-width: none; }
.theme-preview .early-access.section-shell {
  --page: #0d192c; --surface: #13223a; --text: #eef3fc;
  --secondary: #b0bfd5; --quiet: #97acc9; --accent: #a1bdff;
  --edge: #30435f; --input: #0c1729;
  background: var(--page); color: var(--text); max-width: none; margin: 0;
  padding: 58px clamp(24px, 4vw, 88px); border-radius: 0;
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
}
.theme-preview .early-access::before,
.theme-preview .early-access::after { border-color: #86abf31a; }
.theme-preview .light-pill { color: var(--quiet); }
.theme-preview .light-pill .status-dot { background: var(--accent); }
.theme-preview .early-copy h2 { color: var(--text); }
.theme-preview .early-copy h2 em { color: var(--accent); }
.theme-preview .early-copy > p,
.theme-preview .founder-note { color: var(--secondary); }
.theme-preview .founder-note small { color: var(--quiet); }
.theme-preview .founder-mark { color: var(--accent); border-color: var(--edge); }
.theme-preview .access-form { background: var(--surface); color: var(--text); border-color: var(--edge); }
.theme-preview .form-kicker,
.theme-preview .form-note,
.theme-preview .access-form label > span { color: var(--quiet); }
.theme-preview .access-form label { color: var(--secondary); }
.theme-preview .access-form input,
.theme-preview .access-form textarea { background: var(--input); border-color: var(--edge); color: var(--text); }
.theme-preview .access-form input::placeholder,
.theme-preview .access-form textarea::placeholder { color: var(--quiet); opacity: 1; }
.theme-preview .access-form .button.dark { background: #526fe0; color: #fff; border-color: #819aee; justify-content: center; }
.theme-preview .access-form .button.dark:hover { background: #647fe9; }
.theme-preview .access-form .development-note { color: var(--quiet); border-color: var(--edge); }
.theme-preview .access-form #form-result { background: #1e3151; border-color: var(--edge); color: var(--text); }
.theme-preview .faq.section-shell { max-width: none; padding: 64px clamp(24px, 4vw, 88px) 72px; }
.theme-preview .faq-list summary { color: var(--text); }
.theme-preview .faq-list summary > span { color: var(--accent); }
.theme-preview .site-footer.section-shell { max-width: none; padding-left: clamp(24px, 4vw, 88px); padding-right: clamp(24px, 4vw, 88px); }
.theme-preview .site-footer p,
.theme-preview .site-footer > div:last-child > span { color: var(--quiet); }
.theme-preview .site-footer .brand-symbol { fill: var(--accent); }
.theme-preview .site-footer .brand-dot { color: var(--accent); }

/* Direction 2: one light middle, framed by a dark opening and ending. */
.theme-cool .turning-point,
.theme-cool .value-pillars,
.theme-cool .for-you,
/* Direction 3: one deliberate light interlude for the problem. */
.theme-spotlight .turning-point {
  --page: #f0f4fa; --surface: #f9fbff; --raised: #eaf0fa;
  --text: #15243b; --secondary: #52647d; --quiet: #5e718d;
  --accent: #365dc4; --edge: #d2dcea;
  --diagram: #e0e9f8; --diagram-front: #eff4fc;
  --diagram-line: #bdcde5;
  background: var(--page); color: var(--text); color-scheme: light;
}
.theme-cool .hero::after,
.theme-spotlight .hero::after { background: linear-gradient(180deg, #050a131a 0%, transparent 55%, #f0f4fa00 68%, #f0f4fa66 84%, #f0f4fa 100%); }
.theme-spotlight .value-pillars { padding-top: 54px; }
.theme-cool .for-you { border-bottom: 0; }

/* Preview navigation is present only on these comparison pages. */
.theme-switcher { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; padding: 22px 20px; background: #050a13; color: #aebed5; border-top: 1px solid #293a53; font-size: 12px; }
.theme-switcher > span { color: #e7efff; margin-right: 8px; }
.theme-switcher a { padding: 8px 11px; border: 1px solid #344762; border-radius: 5px; }
.theme-switcher a[aria-current=page] { background: #213757; color: #fff; border-color: #91b4f8; }
.theme-switcher a:hover { background: #213757; color: #fff; }
@media(max-width:760px) {
  .theme-preview .early-access.section-shell { padding: 38px 20px; }
  .theme-preview .faq.section-shell { padding: 42px 20px 50px; }
  .theme-preview .site-footer.section-shell { padding-left: 20px; padding-right: 20px; }
  .theme-spotlight .value-pillars { padding-top: 38px; }
}