/* ==========================================================================
   SocraChess.ai — homepage v3
   --------------------------------------------------------------------------
   Rebuilt around one rule: every screen has one job and one loud thing.
   White is the ground, cream marks the two sections that need warmth, gold is
   spent almost nowhere so that the primary button owns it. The flow band is
   carried over from v2 verbatim — markup, CSS and JS — everything else is new.
   ========================================================================== */

/* ==========================================================================
   Aeonik Font (Obvious.ai Heading Typography)
   ========================================================================== */
@font-face {
  font-family: 'Aeonik';
  src: url('/assets/AeonikVF.woff2') format('woff2');
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('/assets/Aeonik-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('/assets/Aeonik-SemiBold.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* Open-Source Authority Block --------------------------------------------- */
.authority-box {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(32px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  display: grid;
  gap: var(--sp-6);
}

.authority-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--cream);
}

.authority-stat-card {
  padding: clamp(20px, 2.5vw, 28px) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid var(--line);
  background: transparent;
}

.authority-stat-card:last-child {
  border-right: none;
}

.authority-stat-num {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.authority-stat-label {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.authority-stat-sub {
  font-size: var(--t-xs);
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: 4px;
}

.authority-body {
  display: grid;
  gap: var(--sp-3);
  font-size: var(--t-base);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 78ch;
}

.authority-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.outbound-badge-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font: 600 var(--t-sm) var(--sans);
  text-decoration: none;
  transition: all 180ms var(--ease-out);
}

.outbound-badge-link:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-1px);
}

.outbound-badge-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .authority-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .authority-stat-card:nth-child(2) {
    border-right: none;
  }
  .authority-stat-card:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 520px) {
  .authority-stats-grid {
    grid-template-columns: 1fr;
  }
  .authority-stat-card {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .authority-stat-card:last-child {
    border-bottom: none;
  }
}

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;

  --paper: #ffffff;
  --paper-strong: #ffffff;
  --cream: #f6f5f4;
  /* trial: neutral grey instead of the warm cream */
  --ink: #101110;
  --ink-soft: #545650;
  --lead-ink: #6b6861;
  --muted: #73756d;
  --line: #e8e4da;
  --line-strong: #d2cdbf;

  /* Brand gold from the logo. --gold-dark is the same hue darkened until it
     reads as text on white (#CD9114 alone is 2.5:1). --gold-deep carries white
     text at 4.7:1 for the primary button. */
  --gold: #cd9114;
  --gold-dark: #8b630e;
  --gold-deep: #9a6a0e;

  /* Heading Font (Aeonik modern geometric sans as seen on Obvious.ai)
     To revert to serif: --display: "Newsreader", Georgia, "Times New Roman", serif; */
  --display: "Aeonik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  --t-xs: clamp(12px, .12vw + 11.4px, 13px);
  --t-sm: clamp(13px, .15vw + 12.5px, 14px);
  --t-base: clamp(16px, .3vw + 15.1px, 18px);
  --t-md: clamp(18px, .55vw + 16.2px, 21px);
  --t-lg: clamp(21px, 1.1vw + 17.5px, 28px);
  --t-xl: clamp(24px, 2vw + 17px, 40px);
  --t-2xl: clamp(34px, 4.2vw + 20px, 66px);

  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --section: clamp(58px, 7vw, 96px);

  --shell: min(100% - 48px, 1140px);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 24px -4px rgb(16 17 16 / .08);
  --shadow-lg: 0 8px 16px -4px rgb(16 17 16 / .12);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark Theme Tokens -------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --paper: #0f100f;
  --paper-strong: #151715;
  --cream: #181a18;
  --ink: #f5f5f3;
  --ink-soft: #b2b4ad;
  --lead-ink: #9ea098;
  --muted: #8c8e87;
  --line: #262926;
  --line-strong: #383c38;

  --gold: #dfa72e;
  --gold-dark: #f0c366;
  --gold-deep: #dfa72e;

  --shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px -4px rgba(0, 0, 0, 0.55);
}

/* Theme Toggle Button (44x44px WCAG Target Size) --------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all 180ms var(--ease-out);
  padding: 0;
  margin-right: 6px;
}

.theme-toggle:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
  transform: scale(1.05);
}

.theme-icon-sun {
  display: none;
}

.theme-icon-moon {
  display: block;
}

[data-theme="dark"] .theme-icon-sun {
  display: block;
}

[data-theme="dark"] .theme-icon-moon {
  display: none;
}

.mm-theme-toggle {
  width: 100%;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: var(--t-sm);
  font-weight: 600;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.brand-logo-dark {
  display: none;
}

[data-theme="dark"] .brand-logo-light {
  display: none;
}

[data-theme="dark"] .brand-logo-dark {
  display: block;
}

/* Comprehensive Dark Theme Styling Overrides ------------------------------ */
[data-theme="dark"] body {
  background-color: var(--paper);
  color: var(--ink);
}

[data-theme="dark"] .site-header {
  background: rgba(14, 15, 14, 0.88);
  border-bottom-color: var(--line);
}

[data-theme="dark"] .site-footer {
  background: #080908;
  border-top-color: var(--line-strong);
}

[data-theme="dark"] .feature-card,
[data-theme="dark"] .teaching-card,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .affiliate-card,
[data-theme="dark"] .changelog-entry,
[data-theme="dark"] .authority-box,
[data-theme="dark"] .custom-panel,
[data-theme="dark"] .theme-card-body,
[data-theme="dark"] .plan {
  background: var(--paper-strong);
  border-color: var(--line);
}

[data-theme="dark"] .feature-card:hover {
  border-color: var(--gold);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .feature-shot,
[data-theme="dark"] .feature-art,
[data-theme="dark"] .showcase-split-shot img {
  background: var(--paper);
  border-color: var(--line);
}

[data-theme="dark"] .sec-rule span {
  background: var(--paper);
  color: var(--gold);
  border: 1px solid var(--line);
}

[data-theme="dark"] .sec-rule em {
  color: var(--ink-soft);
}

[data-theme="dark"] .sec-rule::before {
  background: var(--line);
}

[data-theme="dark"] .authority-stat-card,
[data-theme="dark"] .contact-info-item,
[data-theme="dark"] .plans-toggle {
  background: var(--cream);
  border-color: var(--line);
}

[data-theme="dark"] .outbound-badge-link,
[data-theme="dark"] .contact-info-ico {
  background: var(--paper);
  border-color: var(--line-strong);
  color: var(--gold-dark);
}

[data-theme="dark"] .compare-scroll,
[data-theme="dark"] .compare thead th {
  background: var(--paper-strong);
  border-color: var(--line);
}

[data-theme="dark"] .compare td,
[data-theme="dark"] .compare th {
  border-bottom-color: var(--line);
}

[data-theme="dark"] .compare .col-featured {
  background: rgba(223, 167, 46, 0.08);
}

[data-theme="dark"] .faq details,
[data-theme="dark"] .faq-list details {
  border-bottom-color: var(--line);
}

[data-theme="dark"] .faq summary,
[data-theme="dark"] .faq-list summary {
  color: var(--ink);
}

[data-theme="dark"] .faq summary:hover,
[data-theme="dark"] .faq-list summary:hover {
  color: var(--gold);
}

[data-theme="dark"] .why-item {
  border-top-color: var(--line);
}

[data-theme="dark"] .why-btn {
  color: var(--ink);
}

[data-theme="dark"] .why-btn:hover {
  color: var(--gold);
}

[data-theme="dark"] .mega {
  background: var(--paper-strong);
  border-color: var(--line-strong);
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .mega-ico {
  background: var(--cream);
  border-color: var(--line);
  color: var(--gold-dark);
}

[data-theme="dark"] .mega-row:hover,
[data-theme="dark"] .mega-sol-card:hover,
[data-theme="dark"] .mega-res-row:hover {
  background: var(--cream);
}

[data-theme="dark"] .mega-promo-glass {
  background: rgba(14, 15, 14, 0.9);
  border-top-color: var(--line-strong);
}

[data-theme="dark"] .button-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

[data-theme="dark"] .button-ghost:hover {
  background: var(--cream);
  border-color: var(--ink);
}

[data-theme="dark"] .button-dark {
  background: var(--paper-strong);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

[data-theme="dark"] .button-dark:hover {
  background: var(--cream);
  border-color: var(--gold);
  color: var(--gold-dark);
}

[data-theme="dark"] .mobile-menu {
  background: var(--paper);
  border-bottom-color: var(--line-strong);
}

[data-theme="dark"] .mm-login {
  background: var(--cream);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .article-callout {
  background: var(--cream);
  border-left-color: var(--gold);
}

[data-theme="dark"] .article-author {
  background: var(--cream);
  border-color: var(--line);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: var(--paper);
  border-color: var(--line-strong);
  color: var(--ink);
}

/* 2. Base ------------------------------------------------------------------ */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.02em;
}

h1 {
  font-size: var(--t-2xl);
  line-height: 1.05;
}

h2 {
  font-size: var(--t-xl);
  line-height: 1.1;
  text-wrap: balance;
}

h3 {
  font-size: var(--t-md);
  line-height: 1.35;
}

/* Highlighted Letters, Headings & Emphasized Elements in Brand Primary Color */
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em,
.hero-split-title em,
.sec-rule em,
mark,
.highlight,
.text-highlight,
.text-gold,
.accent-text {
  font-style: italic;
  color: var(--gold) !important;
  text-decoration-color: var(--gold);
}

[data-theme="dark"] h1 em,
[data-theme="dark"] h2 em,
[data-theme="dark"] h3 em,
[data-theme="dark"] h4 em,
[data-theme="dark"] h5 em,
[data-theme="dark"] h6 em,
[data-theme="dark"] .hero-split-title em,
[data-theme="dark"] .sec-rule em,
[data-theme="dark"] mark,
[data-theme="dark"] .highlight,
[data-theme="dark"] .text-highlight,
[data-theme="dark"] .text-gold,
[data-theme="dark"] .accent-text {
  color: var(--gold) !important;
  text-decoration-color: var(--gold);
}

mark {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold-dark) !important;
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

[data-theme="dark"] mark {
  background: color-mix(in srgb, var(--gold) 24%, transparent);
  color: var(--gold-light) !important;
}

.text-primary,
.socrates-name {
  color: var(--gold);
}

/* Global Content Links & Underlines in Brand Primary Color (Excluding UI elements & buttons) */
a:where(:not(.button):not(.btn):not(.brand):not(.nav-mega-btn):not(.mega-row):not(.mega-pill):not(.footer-partner-link):not(.footer-logo-link):not(.footer-cta-pill):not(.footer-links-list a):not(.footer-utility-links a):not(.footer-back-top):not(.skip-link)) {
  color: var(--gold-dark);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3.5px;
  text-decoration-thickness: 1.5px;
  transition: color 150ms var(--ease-out), text-decoration-color 150ms var(--ease-out);
}

[data-theme="dark"] a:where(:not(.button):not(.btn):not(.brand):not(.nav-mega-btn):not(.mega-row):not(.mega-pill):not(.footer-partner-link):not(.footer-logo-link):not(.footer-cta-pill):not(.footer-links-list a):not(.footer-utility-links a):not(.footer-back-top):not(.skip-link)) {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

a:where(:not(.button):not(.btn):not(.brand):not(.nav-mega-btn):not(.mega-row):not(.mega-pill):not(.footer-partner-link):not(.footer-logo-link):not(.footer-cta-pill):not(.footer-links-list a):not(.footer-utility-links a):not(.footer-back-top):not(.skip-link)):hover {
  color: var(--gold-deep);
  text-decoration-color: var(--gold-deep);
}

[data-theme="dark"] a:where(:not(.button):not(.btn):not(.brand):not(.nav-mega-btn):not(.mega-row):not(.mega-pill):not(.footer-partner-link):not(.footer-logo-link):not(.footer-cta-pill):not(.footer-links-list a):not(.footer-utility-links a):not(.footer-back-top):not(.skip-link)):hover {
  color: #ffffff;
  text-decoration-color: var(--gold-light);
}

/* Structural UI Links (Buttons, Navigation, Cards) - Reset default text underlines */
.btn,
.brand,
.site-nav > a,
.nav-mega-btn,
.mega a,
.card a,
.footer-logo-link,
.footer-cta-pill,
.footer-links-list a,
.footer-partner-link,
.footer-utility-links a,
.footer-back-top,
.breadcrumb a,
.breadcrumbs a,
.article-breadcrumbs a,
.article-callout-action,
.skip-link {
  text-decoration: none;
}

code {
  font-family: var(--mono);
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transition: top 160ms var(--ease-out);
}

.skip-link:focus-visible {
  top: 12px;
}

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

/* 3. Buttons ----------------------------------------------------------------
   One gold button per screen. Hover feedback is the "thunk": a small lift, a
   shade change, a shadow that arrives — 150ms, felt rather than watched. */
.button,
a.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 27px;
  border-radius: 999px;
  font: 600 var(--t-sm) var(--sans);
  letter-spacing: -.005em;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  outline: none;
  font-family: inherit;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out),
    transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out),
    border-color 150ms var(--ease-out);
}

.button:active,
a.button:active,
button.button:active {
  transform: translateY(1px);
}

/* Primary Button — Brand Gold with crisp white text across ALL themes and sections.
   Declared systematically once so it never differs across pages or sections. */
.button-primary,
a.button-primary,
button.button-primary,
[data-theme="dark"] .button-primary,
[data-theme="dark"] a.button-primary,
[data-theme="dark"] button.button-primary {
  background: var(--gold) !important;
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 14px -2px rgba(16, 17, 16, 0.18);
}

/* Light Theme Hover: Rich burnished gold with warm golden elevation */
.button-primary:hover,
a.button-primary:hover,
button.button-primary:hover {
  background: #b58318 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(184, 134, 27, 0.34);
}

/* Dark Sections & Dark Theme Hover: Luminous sunlit gold with warm halo (never black-on-black) */
[data-theme="dark"] .button-primary:hover,
[data-theme="dark"] a.button-primary:hover,
[data-theme="dark"] button.button-primary:hover,
.final-cta .button-primary:hover,
.final-cta a.button-primary:hover,
.final-cta button.button-primary:hover,
.final-cta-box .button-primary:hover,
.final-cta-box a.button-primary:hover,
.article-cta-box .button-primary:hover,
.article-cta-box a.button-primary:hover,
.article-cta-box .button-dark:hover,
.article-cta-box a.button-dark:hover {
  background: #dead3c !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(212, 162, 58, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.button-dark,
a.button-dark {
  background: var(--ink);
  color: #ffffff !important;
  text-decoration: none !important;
}

.button-dark:hover,
a.button-dark:hover {
  background: var(--gold);
  color: #ffffff !important;
  transform: translateY(-1px);
}

[data-theme="dark"] .button-dark,
[data-theme="dark"] a.button-dark {
  background: var(--paper-strong);
  color: var(--ink) !important;
  border: 1px solid var(--line-strong);
  text-decoration: none !important;
}

[data-theme="dark"] .button-dark:hover,
[data-theme="dark"] a.button-dark:hover {
  background: var(--cream);
  border-color: var(--gold);
  color: var(--gold-dark) !important;
  transform: translateY(-1px);
}

.button-ghost,
a.button-ghost {
  background: transparent;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong);
  padding-block: 14px;
  text-decoration: none !important;
}

.button-ghost:hover,
a.button-ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #ffffff !important;
  transform: translateY(-1px);
}

[data-theme="dark"] .button-ghost,
[data-theme="dark"] a.button-ghost {
  background: transparent;
  color: var(--ink) !important;
  border-color: var(--line-strong);
  text-decoration: none !important;
}

[data-theme="dark"] .button-ghost:hover,
[data-theme="dark"] a.button-ghost:hover {
  background: var(--cream);
  border-color: var(--ink);
  color: #ffffff !important;
}

.button-lg,
a.button-lg {
  padding: 18px 34px;
  font-size: var(--t-base);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}

.text-link:hover {
  color: var(--gold-dark);
  border-color: var(--gold);
}

.microcopy {
  color: var(--muted);
  font-size: var(--t-xs);
}

.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}

.cta-inline small {
  color: var(--muted);
  font-size: var(--t-xs);
}

/* 4. Header ------------------------------------------------------------------
   Boring on purpose: logo goes home, links where every site puts them, one
   button. The only motion is a hairline that appears once you scroll. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  will-change: transform;
}

.site-header[data-scrolled] {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.05);
}

.site-header[data-hidden] {
  transform: translateY(-100%);
  box-shadow: none;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 14px 0;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  color: transparent !important;
  text-decoration: none !important;
  font-size: 0;
  line-height: 0;
}

.brand img {
  width: min(280px, calc(100vw - 112px));
  height: auto;
  color: transparent;
  font-size: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-inline: auto;
}

.header-auth {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.header-login {
  position: relative;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 600;
  transition: color 150ms var(--ease-out);
}

.header-login::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 2px;
  background: var(--gold);
  transition: right 180ms var(--ease-out);
}

.header-login:hover {
  color: var(--ink);
}

.header-login:hover::after {
  right: 0;
}

/* The Product mega menu: a white panel dropped from the sticky header, promo
   card for the Coach on the left, the six features listed on the right. */
.nav-item {
  display: flex;
}

.nav-mega-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-soft);
  font: 500 15.5px var(--sans);
  transition: color 150ms var(--ease-out);
}

.nav-mega-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transition: right 180ms var(--ease-out);
}

.nav-mega-btn:hover,
.nav-mega-btn[aria-expanded="true"] {
  color: var(--ink);
}

.nav-mega-btn[data-active-parent="true"] {
  color: var(--ink);
  font-weight: 600;
}

.nav-mega-btn[data-active-parent="true"]::after {
  right: 0;
}

.nav-caret {
  display: inline-flex;
  margin-top: 1px;
  transition: transform 180ms var(--ease-out);
}

.nav-mega-btn[aria-expanded="true"] .nav-caret {
  transform: rotate(180deg);
}

.site-header:has(.nav-item[data-open]) ~ main {
  opacity: 0.42;
  filter: blur(1.5px);
  transition: opacity 200ms ease, filter 200ms ease;
}

main {
  transition: opacity 200ms ease, filter 200ms ease;
}

.mega {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(6px);
  --bridge: 22px;
  width: min(840px, calc(100vw - 32px));
  padding: 20px 24px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 32px 72px -12px rgba(15, 17, 21, 0.28), 0 4px 16px rgba(15, 17, 21, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s 160ms;
}

.nav-item[data-open] .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--bridge) * -1);
  height: var(--bridge);
}

/* Shared Mega Menu Item Tokens across Product, Solutions & Resources */
.mega-row,
.mega-sol-card,
.mega-res-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  transition: background 140ms ease;
}

.mega-row:hover,
.mega-sol-card:hover,
.mega-res-row:hover {
  background: #F5F4F0;
  border-color: transparent;
  transform: none;
}

.mega-row[aria-current="page"],
.mega-sol-card[aria-current="page"],
.mega-res-row[aria-current="page"] {
  background: #F5F4F0;
  border-color: transparent;
}

[data-theme="dark"] .mega-row:hover,
[data-theme="dark"] .mega-sol-card:hover,
[data-theme="dark"] .mega-res-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
  transform: none;
}

[data-theme="dark"] .mega-row[aria-current="page"],
[data-theme="dark"] .mega-sol-card[aria-current="page"],
[data-theme="dark"] .mega-res-row[aria-current="page"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}

.mega-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin-top: 1px;
  border: 1px solid #E6E4E1;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  background: #F6F5F4;
  color: var(--ink);
  overflow: hidden;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.mega-ico img,
.mega-ico svg,
.svg-ico {
  width: 17px;
  height: 17px;
  display: block;
  object-fit: contain;
  transition: transform 160ms ease;
}

.mega-row:hover .mega-ico,
.mega-sol-card:hover .mega-ico,
.mega-res-row:hover .mega-ico {
  transform: none;
}

[data-theme="dark"] .mega-ico {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--gold-light);
}

[data-theme="dark"] .mega-row:hover .mega-ico,
[data-theme="dark"] .mega-sol-card:hover .mega-ico,
[data-theme="dark"] .mega-res-row:hover .mega-ico {
  transform: none;
}

[data-theme="dark"] .mega-ico img,
[data-theme="dark"] .svg-ico {
  filter: invert(1) brightness(1.2);
}

.card-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--cream, #f5f3ef);
  border: 1px solid var(--line, #e5e3dc);
  margin-bottom: 18px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-icon-badge img,
.card-icon-badge .svg-ico,
.card-icon-badge svg {
  width: 28px;
  height: 28px;
  fill: none;
  transition: transform 0.2s ease;
}

.feature-card:hover .card-icon-badge {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(16, 17, 16, 0.08);
}

.feature-card:hover .card-icon-badge img {
  opacity: 0.95;
}

[data-theme="dark"] .card-icon-badge {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.card-icon-badge.active-badge {
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  border-color: var(--gold);
}

/* Feature Grid V2 — High-Impact Modern Module Design */
.features-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: var(--sp-6);
}

@media (max-width: 1024px) {
  .features-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .features-grid-v2 {
    grid-template-columns: 1fr;
  }
}

.feature-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 28px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.04);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.feature-card-v2:hover {
  border-color: var(--line-strong);
  box-shadow: 0 12px 28px -6px rgba(16, 17, 16, 0.08);
  transform: translateY(-2px);
}

[data-theme="dark"] .feature-card-v2:hover {
  border-color: rgba(223, 167, 46, 0.35);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.45);
}

.feature-card-v2 .card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.feature-card-v2 .card-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 12%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.feature-card-v2:hover .card-icon-box {
  transform: scale(1.08);
  background: color-mix(in srgb, var(--gold) 22%, var(--cream));
  border-color: var(--gold);
}

.feature-card-v2 .card-icon-box img,
.feature-card-v2 .card-icon-box .svg-ico {
  width: 24px;
  height: 24px;
}

[data-theme="dark"] .feature-card-v2 .card-icon-box {
  background: rgba(205, 145, 20, 0.12);
  border-color: rgba(205, 145, 20, 0.28);
}

.feature-card-v2 .card-num-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 4px 11px;
  border-radius: 999px;
}

[data-theme="dark"] .feature-card-v2 .card-num-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--ink-soft);
}

.feature-card-v2 .card-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.feature-card-v2 h3 {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.feature-card-v2 p {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.feature-card-v2 .card-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.feature-card-v2 .card-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}

.feature-card-v2 .card-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.mega-row-txt,
.mega-res-row-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-row-txt strong,
.mega-res-row-txt strong {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.mega-row:hover .mega-row-txt strong,
.mega-sol-card:hover .mega-row-txt strong,
.mega-res-row:hover .mega-res-row-txt strong {
  color: var(--ink);
}

[data-theme="dark"] .mega-row:hover .mega-row-txt strong,
[data-theme="dark"] .mega-sol-card:hover .mega-row-txt strong,
[data-theme="dark"] .mega-res-row:hover .mega-res-row-txt strong {
  color: #ffffff;
}

.mega-row-txt small,
.mega-res-row-txt small {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  color: #8a8880;
  line-height: 1.35;
  margin-top: 2px;
}

[data-theme="dark"] .mega-row-txt small,
[data-theme="dark"] .mega-res-row-txt small {
  color: rgba(255, 255, 255, 0.46);
}

/* 2. Menu 1: Product (Spacious 3-Column Architecture) */
.mega-product {
  width: min(980px, calc(100vw - 32px));
}

.mega-grid-product {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 280px;
  gap: 28px;
  align-items: stretch;
}

/* 3. Menu 2: Solutions (3-Column Architecture) */
.mega-solutions {
  width: min(960px, calc(100vw - 32px));
}

.mega-grid-solutions {
  display: grid;
  grid-template-columns: 1.05fr 1fr 280px;
  gap: 28px;
  align-items: stretch;
}

/* 4. Menu 3: Resources (3-Column Knowledge Hub) */
.mega-resources {
  width: min(900px, calc(100vw - 32px));
}

.mega-resources-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}

.mega-col-header {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 12px 6px;
  margin-bottom: 8px;
  border-bottom: none;
}

[data-theme="dark"] .mega-col-header {
  color: var(--gold);
}

.mega-col-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Side Callout Card with Rich Atmospheric Background */
.mega-side-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-radius: 18px;
  background-color: #111a13;
  background-image: 
    linear-gradient(rgba(12, 18, 14, 0.48), rgba(10, 15, 12, 0.65)),
    url('/assets/use-cases-support-agent-bg.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 34px -8px rgba(10, 16, 12, 0.4);
  overflow: hidden;
}

[data-theme="dark"] .mega-side-card {
  background-color: #0d140e;
  background-image: 
    linear-gradient(rgba(10, 15, 12, 0.55), rgba(8, 12, 9, 0.72)),
    url('/assets/use-cases-support-agent-bg.jpg');
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.55);
}

/* Solutions Mega Menu: Partnership & Affiliate Atmospheric Background */
.mega-side-card-partner,
.mega-solutions .mega-side-card {
  background-color: #0d1217;
  background-image: 
    linear-gradient(rgba(10, 14, 18, 0.48), rgba(8, 11, 15, 0.72)),
    url('/assets/mega-side-partner-bg.webp');
  background-size: cover;
  background-position: center top;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.48);
}

[data-theme="dark"] .mega-side-card-partner,
[data-theme="dark"] .mega-solutions .mega-side-card {
  background-color: #080b0f;
  background-image: 
    linear-gradient(rgba(8, 11, 15, 0.52), rgba(5, 8, 12, 0.78)),
    url('/assets/mega-side-partner-bg.webp');
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.65);
}

.mega-side-kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

[data-theme="dark"] .mega-side-kicker {
  color: var(--gold);
}

.mega-side-title {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin-bottom: 8px;
}

.mega-side-desc {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  margin-bottom: 14px;
  text-wrap: pretty;
}

[data-theme="dark"] .mega-side-desc {
  color: rgba(255, 255, 255, 0.78);
}

.mega-side-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.mega-pill,
a.mega-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-decoration: none !important;
  transition: all 160ms var(--ease-out);
}

.mega-pill:hover,
a.mega-pill:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: var(--gold);
  color: #ffffff !important;
  transform: translateY(-1px);
}

[data-theme="dark"] .mega-pill,
[data-theme="dark"] a.mega-pill {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
}

[data-theme="dark"] .mega-pill:hover,
[data-theme="dark"] a.mega-pill:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: var(--gold);
  color: #ffffff !important;
}

.mega-side-foot {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  transition: color 150ms ease, transform 150ms ease;
}

.mega-side-foot:hover {
  color: #ffffff;
  text-decoration: none;
  transform: translateX(2px);
}

[data-theme="dark"] .mega-side-foot {
  color: var(--gold);
  border-top-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .mega-side-foot:hover {
  color: #ffffff;
}

.mega-bottom-ribbon {
  margin-top: 14px;
  padding: 10px 16px;
  background: #F7F6F3;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #8a8880;
}

[data-theme="dark"] .mega-bottom-ribbon {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}

.mega-bottom-ribbon a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 150ms ease;
}

.mega-bottom-ribbon a:hover {
  color: var(--gold-dark);
  text-decoration: none;
}

[data-theme="dark"] .mega-bottom-ribbon a {
  color: #ffffff;
}

[data-theme="dark"] .mega-bottom-ribbon a:hover {
  color: var(--gold-light);
}

/* Top-level items only: the unscoped `.site-nav a` was also hitting the links
   inside the mega panel, crushing their padding and underlining whole rows. */
.site-nav>a {
  position: relative;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  padding: 6px 0;
}

.site-nav>a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transition: right 180ms var(--ease-out);
}

.site-nav>a:hover {
  color: var(--ink);
}

.site-nav>a:hover::after,
.site-nav>a[aria-current="page"]::after,
.site-nav>a.active::after {
  right: 0;
}

.site-nav>a[aria-current="page"],
.site-nav>a.active {
  color: var(--ink);
  font-weight: 600;
}

.header-cta {
  padding-block: 11px;
}

/* Hamburger + mobile panel: hidden on desktop, the whole nav on a phone. */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: none;
  cursor: pointer;
}

.nav-burger i {
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 200ms var(--ease-out), opacity 150ms;
}

.nav-burger[aria-expanded="true"] i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-burger[aria-expanded="true"] i:nth-child(2) {
  opacity: 0;
}

.nav-burger[aria-expanded="true"] i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 10px clamp(16px, 5vw, 24px) 18px;
}

.site-header[data-menu-open] .mobile-menu {
  display: grid;
  gap: 2px;
}

.mobile-menu>a {
  padding: 13px 8px;
  border-radius: 9px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-base);
}

.mobile-menu>a:active,
.mobile-menu>a:hover {
  background: var(--cream);
}

.mm-label {
  margin: 14px 8px 4px;
  color: var(--muted);
  font: 600 var(--t-xs) var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mm-label:first-child {
  margin-top: 6px;
}

.mm-auth {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.mm-login {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-sm);
}

/* Mobile Header & Navigation Responsive Rules */
@media (max-width: 900px) {
  .site-nav,
  .header-auth {
    display: none;
  }

  .nav-burger {
    display: flex;
  }

  .mobile-menu {
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 28px;
  }

  .mobile-menu > a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 15.5px;
  }

  .mobile-menu > a:active {
    background: var(--cream);
    transform: scale(0.99);
  }

  .mm-label {
    margin: 18px 8px 6px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 700;
  }

  .mm-auth {
    margin-top: 16px;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mm-auth .button {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }

  .mm-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 999px;
    text-align: center;
    background: var(--cream);
  }
}

/* Mobile Feature Tabs & Split Hero Responsive Polish */
@media (max-width: 768px) {
  .feat-tablist {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
    gap: 4px;
  }

  .feat-tablist [role="tab"] {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  .feat-panel-shot {
    padding: 6px;
    border-radius: 12px;
  }

  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .hero-split-actions {
    justify-content: center;
  }

  .hero-split-micro {
    justify-content: center;
  }

  .hero-split-title {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }

  .compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--line);
  }
}

/* 5. Hero -------------------------------------------------------------------
   Everything above the fold answers: what, for whom, why believe it, what next. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 4.5vw, 64px) 0 0;
  text-align: center;
}

/* Subpage Hero sections (which don't have .hero-shot) get generous, consistent breathing room */
.hero:not(:has(.hero-shot)),
.page-sub .hero {
  padding: clamp(48px, 6vw, 76px) 0 clamp(54px, 7vw, 92px);
}

.hero:not(:has(.hero-shot)) .microcopy,
.page-sub .hero .microcopy {
  margin-bottom: var(--sp-2);
}

.hero > .shell {
  position: relative;
  z-index: 2;
}

/* Watermark knight: HOMEPAGE ONLY (body.page-home) */
.hero::before,
.hero::after {
  display: none;
}

body.page-home .hero::after {
  display: block;
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: -70px;
  top: 40%;
  width: 430px;
  height: 600px;
  background: url("/assets/mark-knight.svg") no-repeat center / contain;
  opacity: .032;
}

[data-theme="dark"] body.page-home .hero::after {
  opacity: .045;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin-inline: auto;
}

.hero-eyebrow,
.hero-split-eyebrow {
  margin-bottom: var(--sp-4);
  color: var(--gold);
  font: 600 var(--t-xs) var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 16ch;
  margin-inline: auto;
  line-height: 1.06;
  text-wrap: balance;
}

.hero:not(:has(.hero-shot)) h1,
.page-sub .hero h1 {
  max-width: 22ch;
}

.hero .lede {
  max-width: 56ch;
  margin: 22px auto 0;
  color: var(--lead-ink);
  font-size: clamp(17px, 1.1vw + 13.5px, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

.hero-trust-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.trust-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.trust-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--paper);
  box-shadow: 0 2px 6px rgba(16, 17, 16, 0.12);
  margin-left: -9px;
  position: relative;
  display: block;
}

.trust-avatar:first-child {
  margin-left: 0;
}

[data-theme="dark"] .trust-avatar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.trust-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
}

.trust-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.trust-rating .trust-stars {
  color: var(--gold);
  letter-spacing: 1.5px;
  font-size: 13.5px;
  line-height: 1;
}

.trust-rating strong {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.trust-reviews {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1;
}

.trust-caption {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
}

[data-theme="dark"] .trust-caption,
[data-theme="dark"] .trust-reviews {
  color: var(--ink-soft);
}

.hero .microcopy {
  margin-top: var(--sp-4);
}

/* Ships hidden. The markup is ready for the day a real review score exists;
   until then no number is shown, because no number is real. */
.hero-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: var(--sp-4);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.hero-rating[hidden] {
  display: none;
}

.hero-rating .stars {
  color: var(--gold);
  letter-spacing: 2px;
  font-size: var(--t-base);
}

.hero-shot {
  position: relative;
  z-index: 2;
  width: min(calc(100vw - 32px), 1360px);
  max-width: min(calc(100vw - 32px), 1360px);
  margin: clamp(44px, 5vw, 64px) auto 0;
  margin-inline: calc(50% - min(calc(100vw - 32px), 1360px) / 2);
  background: #eeede9;
  padding: clamp(14px, 2vw, 22px);
  border-radius: clamp(24px, 3.2vw, 40px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  box-shadow:
    0 20px 50px -12px rgba(16, 17, 16, 0.09),
    0 1px 3px rgba(16, 17, 16, 0.04);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

[data-theme="dark"] .hero-shot {
  background: #181a18;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 24px 64px -12px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: clamp(14px, 1.6vw, 18px);
  box-shadow: 0 4px 18px -2px rgba(16, 17, 16, 0.06);
}

[data-theme="dark"] .hero-shot img {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------------------------
   Hero Staggered Entrance Animation (Obvious.ai style)
   Ultra-smooth staggered entrance for hero headline, lede, actions, and mockup
   ------------------------------------------------------------------------- */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroShotFadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .hero-eyebrow,
.sub-hero .hero-eyebrow {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  will-change: opacity, transform;
}

.hero h1,
.sub-hero h1,
.glossary-hero h1 {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
  will-change: opacity, transform;
}

.hero .lede,
.sub-hero .lede,
.glossary-lede,
.llm-lead-notice {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
  will-change: opacity, transform;
}

.hero-actions,
.sub-hero .hero-actions {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
  will-change: opacity, transform;
}

.hero-trust-row,
.hero .microcopy,
.sub-hero .microcopy {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
  will-change: opacity, transform;
}

.hero-shot,
.showcase-split-shot {
  animation: heroShotFadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both;
  will-change: opacity, transform;
}

.proof-row {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1.25s both;
  will-change: opacity, transform;
}

/* Feature Subpage Split Heroes */
.hero-split-badge,
.hero-split-eyebrow,
.hero-split-content .hero-eyebrow {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  will-change: opacity, transform;
}

.hero-split-content h1,
.hero-split-title {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
  will-change: opacity, transform;
}

.hero-split-lead,
.hero-split-lede,
.hero-split-content .lede,
.hero-split-content p.hero-split-lede,
.hero-split-content > p:not(.hero-eyebrow):not(.hero-split-micro):not(.microcopy) {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
  will-change: opacity, transform;
}

.hero-split-actions {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
  will-change: opacity, transform;
}

.hero-split-trust,
.hero-split-micro,
.hero-split-content .microcopy {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
  will-change: opacity, transform;
}

.hero-split-preview,
.hero-split-visual,
.hero-split-card {
  animation: heroShotFadeUp 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
  will-change: opacity, transform;
}

/* Pages opening with a standard section head (e.g. socratic-method, ai-chess-coach, pricing, features) */
main > section:first-of-type .section-head h1 {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
  will-change: opacity, transform;
}

main > section:first-of-type .section-head p {
  animation: heroFadeUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .hero .lede,
  .hero-actions,
  .hero-trust-row,
  .hero-shot,
  .proof-row,
  .hero .hero-eyebrow,
  .hero .microcopy,
  .sub-hero h1,
  .sub-hero .lede,
  .sub-hero .hero-actions,
  .sub-hero .microcopy,
  .glossary-hero h1,
  .glossary-lede,
  .llm-lead-notice,
  .showcase-split-shot,
  .hero-split-badge,
  .hero-split-eyebrow,
  .hero-split-content .hero-eyebrow,
  .hero-split-content h1,
  .hero-split-title,
  .hero-split-lead,
  .hero-split-lede,
  .hero-split-content .lede,
  .hero-split-content p.hero-split-lede,
  .hero-split-content > p:not(.hero-eyebrow):not(.hero-split-micro):not(.microcopy),
  .hero-split-actions,
  .hero-split-trust,
  .hero-split-micro,
  .hero-split-content .microcopy,
  .hero-split-preview,
  .hero-split-visual,
  .hero-split-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 5b. Feature Subpage Hero (Split 2-Column Layout) */
.hero-split-section {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4.5vw, 60px) 0 clamp(44px, 5.5vw, 76px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.hero-split-section > .shell {
  position: relative;
  z-index: 2;
}

.hero-split-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 4.5vw, 56px);
  align-items: center;
}

.hero-split-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.hero-split-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 12%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--gold-dark);
  font: 600 var(--t-xs) var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.hero-split-title {
  font: 600 clamp(30px, 3.6vw, 48px)/1.15 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}


.hero-split-lede {
  color: var(--lead-ink);
  font-size: var(--t-base);
  line-height: 1.58;
  margin-bottom: var(--sp-5);
  max-width: 50ch;
}

.hero-split-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6) 0;
  display: grid;
  gap: 10px;
}

.hero-split-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-sm);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.45;
}

.hero-split-check {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 16%, var(--cream));
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.hero-split-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.hero-split-micro {
  color: var(--muted);
  font-size: var(--t-xs);
  margin: 0;
}

/* Right Visual Column */
.hero-split-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-split-visual::before {
  content: "";
  position: absolute;
  inset: -16px;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gold) 16%, transparent) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.hero-split-card {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-strong);
  box-shadow: 0 16px 45px rgba(16, 17, 16, 0.1);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}

.hero-split-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(16, 17, 16, 0.14);
}

.hero-split-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Hero 4-Image Composition */
.hero-composite-wrapper {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-comp-board {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 390px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 20px -8px rgba(16, 17, 16, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
  background: var(--paper);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}

.hero-comp-board:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 16px -6px rgba(16, 17, 16, 0.18);
}

.hero-comp-board img {
  width: 100%;
  height: auto;
  display: block;
}

/* Floating Satellite Cards */
.hero-comp-float {
  position: absolute;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 8px 16px -6px rgba(16, 17, 16, 0.18), 0 2px 6px rgba(0, 0, 0, 0.04);
  background: var(--paper);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}

.hero-comp-float:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 16px -6px rgba(16, 17, 16, 0.24);
  z-index: 10 !important;
}

.hero-comp-float img {
  width: 100%;
  height: auto;
  display: block;
}

/* Top-Right: Engine Evaluation */
.hero-comp-float-engine {
  top: 6px;
  right: -10px;
  width: 215px;
  z-index: 4;
}

/* Bottom-Right: Move History List */
.hero-comp-float-moves {
  bottom: 0px;
  right: -20px;
  width: 170px;
  z-index: 3;
}

/* Bottom-Left: Accuracy & Quality Report */
.hero-comp-float-report {
  bottom: 16px;
  left: -20px;
  width: 170px;
  z-index: 3;
}

@media (max-width: 600px) {
  .hero-composite-wrapper {
    padding: 10px 0;
    max-width: 100%;
  }

  .hero-comp-board {
    max-width: 100%;
  }

  .hero-comp-float-engine {
    width: 150px;
    top: -10px;
    right: -5px;
  }

  .hero-comp-float-moves {
    width: 125px;
    bottom: -10px;
    right: -5px;
  }

  .hero-comp-float-report {
    width: 125px;
    bottom: 5px;
    left: -5px;
  }
}

.hero-split-float-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 9px;
  background: rgba(16, 17, 16, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.hero-split-float-icon {
  font-size: 20px;
  line-height: 1;
  color: var(--gold);
}

.hero-split-float-txt {
  display: grid;
  gap: 2px;
}

.hero-split-float-txt strong {
  font-size: 13px;
  color: #ffffff;
  font-weight: 600;
}

.hero-split-float-txt small {
  font-size: 12px;
  color: #d2cdbf;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.proof-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: var(--sp-6) 0 var(--sp-8);
  border-top: 1px solid var(--line);
  list-style: none;
}

.proof-row li {
  display: grid;
  gap: 3px;
  text-align: center;
}

.proof-row strong {
  font-size: var(--t-sm);
  letter-spacing: -.005em;
}

.proof-row span {
  color: var(--muted);
  font: 400 var(--t-xs) var(--mono);
}

/* 6. Flow band (carried from v2 — do not restyle) -------------------------- */
.flow-band {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 4vw, 52px) 0 0;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}

.flow-caption {
  margin: 0 0 var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--muted);
  font: 500 var(--t-xs) var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.flow-caption i {
  color: var(--gold-dark);
  font-style: normal;
}

.flow-svg {
  display: block;
  width: 100%;
  height: clamp(220px, 21vw, 310px);
}

.flow-ribbon {
  fill: none;
  stroke: var(--ink);
  stroke-width: 62;
  stroke-linecap: round;
}

.flow-text-raw {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .02em;
  fill: color-mix(in srgb, var(--ink) 28%, transparent);
}

.flow-text-clean {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.012em;
  fill: var(--paper-strong);
}

.flow-pill {
  fill: var(--paper-strong);
  stroke: var(--ink);
  stroke-width: 2;
}

.flow-bars rect {
  fill: var(--ink);
  transform-box: fill-box;
  transform-origin: center;
  animation: flow-pulse 1.2s ease-in-out infinite;
}

.flow-bars rect:nth-child(1) {
  animation-delay: -.05s;
}

.flow-bars rect:nth-child(2) {
  animation-delay: -.42s;
}

.flow-bars rect:nth-child(3) {
  animation-delay: -.17s;
}

.flow-bars rect:nth-child(4) {
  animation-delay: -.61s;
}

.flow-bars rect:nth-child(5) {
  animation-delay: -.28s;
}

.flow-bars rect:nth-child(6) {
  animation-delay: -.75s;
}

.flow-bars rect:nth-child(7) {
  animation-delay: -.09s;
}

.flow-bars rect:nth-child(8) {
  animation-delay: -.53s;
}

.flow-bars rect:nth-child(9) {
  animation-delay: -.34s;
}

.flow-bars rect:nth-child(10) {
  animation-delay: -.68s;
}

.flow-bars rect:nth-child(11) {
  animation-delay: -.21s;
}

.flow-bars rect:nth-child(12) {
  animation-delay: -.47s;
}

.flow-bars rect:nth-child(13) {
  animation-delay: -.12s;
}

.flow-bars rect:nth-child(14) {
  animation-delay: -.58s;
}

.flow-bars rect:nth-child(15) {
  animation-delay: -.30s;
}

@keyframes flow-pulse {

  0%,
  100% {
    transform: scaleY(.35);
  }

  50% {
    transform: scaleY(1);
  }
}

.flow-ask text {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--ink);
}

.flow-ask rect {
  fill: var(--paper-strong);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.flow-ask-dot {
  fill: var(--gold);
  stroke: none;
}

.flow-ask-item {
  opacity: 0;
  animation: flow-ask-cycle 14s ease-in-out infinite;
}

.flow-ask-item:nth-child(2) {
  animation-delay: 3.5s;
}

.flow-ask-item:nth-child(3) {
  animation-delay: 7s;
}

.flow-ask-item:nth-child(4) {
  animation-delay: 10.5s;
}

@keyframes flow-ask-cycle {

  0%,
  2% {
    opacity: 0;
    transform: translateY(7px);
  }

  6%,
  21% {
    opacity: 1;
    transform: translateY(0);
  }

  26%,
  100% {
    opacity: 0;
    transform: translateY(-7px);
  }
}

/* Why-choose accordion: outcome headlines in the serif, one open at a time.
   The open item becomes a warm panel with its argument and a link deeper in. */
.why-head-row {
  max-width: 62ch;
}

.why-head-row h2 {
  font-size: var(--t-xl);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 600;
}

.why-head-row p {
  margin-top: var(--sp-4);
  color: var(--lead-ink);
  font-size: clamp(16px, 1.1vw + 12px, 18px);
  line-height: 1.55;
  text-wrap: pretty;
}

.why-acc {
  margin-top: var(--sp-7);
}

.why-item {
  border-top: 1px solid var(--line-strong);
  transition: background 300ms var(--ease-out), border-top-color 300ms var(--ease-out),
    border-radius 300ms var(--ease-out);
}

.why-item:last-child {
  border-bottom: 1px solid var(--line-strong);
}

.why-item h3 {
  margin: 0;
}

.why-btn {
  display: block;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: 500 var(--t-lg) var(--display);
  letter-spacing: -.012em;
  color: var(--ink-soft);
  transition: color 150ms var(--ease-out);
}

.why-btn:hover {
  color: var(--ink);
}

.why-item[data-open] {
  background: var(--paper);
  border-radius: var(--radius);
  border-top-color: transparent;
}

.why-item[data-open]+.why-item {
  border-top-color: transparent;
}

.why-item[data-open] .why-btn {
  padding: 26px 26px 0;
  color: var(--ink);
}

/* The panel is always rendered; a 0fr -> 1fr grid row animates the height
   smoothly, so opening never snaps the way display:none/block did. */
.why-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 340ms var(--ease-out);
}

.why-body>div {
  overflow: hidden;
  min-height: 0;
  padding: 12px 26px 26px;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}

.why-item[data-open] .why-body {
  grid-template-rows: 1fr;
}

.why-item[data-open] .why-body>div {
  padding: 12px 26px 26px;
  opacity: 1;
  transition-delay: 0ms, 90ms;
}

@media (prefers-reduced-motion: reduce) {

  .why-item,
  .why-btn,
  .why-body,
  .why-body>div {
    transition: none;
  }
}

.why-body p {
  max-width: 62ch;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
}

/* Numbers band: social proof as a row of figures, big serif numerals over
   small mono labels, one hairline above and below so it reads as a ledger
   line rather than a section. */
.stats-band {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
}

.stat {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

.stat strong {
  font: 500 var(--t-lg) var(--display);
  letter-spacing: -.01em;
}

.stat strong:first-letter {
  color: inherit;
}

.stat span {
  color: var(--muted);
  font: 400 var(--t-xs) var(--mono);
  letter-spacing: .04em;
}

/* 7. Sections ----------------------------------------------------------------
   The rhythm is fixed rather than fluid: every section is 110px top and
   bottom, so the colour changes land the same distance from content every
   time and stop reading as arbitrary cuts. */
/* Asymmetric on purpose: the numbered label right under the seam claims the
   new section quickly, so the top needs far less air than the bottom. */
.section {
  padding: 56px 20px 110px;
  padding: 56px clamp(16px, 3vw, 24px) 110px;
}

.section-cream {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

.section-cream > .shell {
  position: relative;
  z-index: 2;
}

.section-head {
  max-width: clamp(680px, 72ch, 880px);
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(36px, 4vw, 54px);
}

.section-head h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

.section-head p {
  margin-top: 14px;
  color: var(--lead-ink);
  font-family: var(--sans);
  font-size: clamp(16px, 1.1vw, 17.5px);
  line-height: 1.58;
  text-wrap: pretty;
  max-width: 58ch;
  margin-inline: auto;
}

/* Every main section opens with a numbered label on a rule that runs the rest
   of the shell. It does two jobs: it marks the boundary far more deliberately
   than a colour change alone, and the numbering tells the visitor the page has
   a structure they are moving through. */
.sec-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--sp-6);
  color: var(--muted);
  font: 700 12px/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sec-rule span {
  color: var(--gold-dark);
  font-weight: 800;
}

.sec-rule em {
  font-style: normal;
  color: var(--ink-soft);
}

.sec-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

/* Impeccable Typeset: 4-Tier Intentional Card Hierarchy ------------------- */
.card-kicker {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
  margin-bottom: 6px;
}

[data-theme="dark"] .card-kicker {
  color: var(--gold);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  width: 100%;
}

/* The innovation: three sources joined into a formula. The plus signs between
   the cards are the argument — it has all three at once. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.pillar+.pillar::before {
  content: "+";
  position: absolute;
  left: calc(var(--sp-6) / -2);
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--gold-dark);
  font: 400 34px/1 var(--display);
}

/* Each pillar opens with a live miniature of its part of the product, drawn
   in markup: the engine numbers, the board with its arrow, the book line. */
.pillar-shot {
  margin: 0 0 var(--sp-4);
  padding: 12px;
  height: 178px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

/* 01 — the engine panel, condensed. */
.mini-engine {
  display: grid;
  gap: 8px;
  align-content: start;
}

.me-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 10px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.me-icon {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
}

.me-chance {
  font-size: var(--t-xs);
  font-weight: 700;
}

.me-chance b {
  font-variant-numeric: tabular-nums;
}

.me-chance small {
  color: var(--muted);
  font-weight: 400;
}

.me-line {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: var(--t-xs);
  opacity: 1;
  transform: none;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}

.me-line b {
  font-weight: 700;
}

.me-line.me-best {
  background: #f2f8f4;
  border-color: rgba(47, 158, 108, 0.25);
}

.me-line.me-best em {
  font-style: normal;
  color: #217a52;
  font-weight: 700;
}

[data-theme="dark"] .me-line {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .me-line.me-best {
  background: rgba(47, 158, 108, 0.15);
  border-color: rgba(47, 158, 108, 0.35);
}

[data-theme="dark"] .me-line.me-best em {
  color: #4ade80;
}

.me-star {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #2f9e6c;
  color: #fff;
  font-size: 8px;
}

[data-mini-engine].counting .me-line {
  opacity: 0;
  transform: translateY(6px);
}

[data-mini-engine].counting .me-line.on {
  opacity: 1;
  transform: none;
}

/* 02 — the app's board with the Coach's arrows, straight from a screenshot. */
.pillar-shot-img {
  padding: 8px;
}

.pillar-shot-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  border-radius: 5px;
  display: block;
}

/* 03 — Miniature Socrates AI Coach Knowledge Card -------------------------- */
.mini-know {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 10px 11px;
  box-sizing: border-box;
  overflow: hidden;
}

.mk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.mk-coach-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 1;
}

.mk-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--gold);
  flex-shrink: 0;
}

.mk-icon svg {
  display: block;
}

.mk-coach-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mk-name {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
}

.mk-kicker {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.2;
}

.mk-tag {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold-dark);
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 180ms ease;
}

.mk-bubble {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0;
  display: flex;
  align-items: center;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.mk-text {
  display: block;
  font-family: var(--body);
  font-size: 11.5px;
  line-height: 1.48;
  color: var(--ink);
  margin: 0;
  width: 100%;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

.mk-text strong {
  font-weight: 700;
  color: var(--ink);
}

.mk-text .mv {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid var(--line);
  color: var(--ink);
}

.mk-text.writing::after {
  content: "▍";
  color: var(--gold);
  margin-left: 2px;
  animation: caret 900ms steps(1) infinite;
}

.mk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
  font-size: 10px;
  min-width: 0;
  width: 100%;
}

.mk-source {
  font-family: var(--body);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.mk-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.mk-indicator .mk-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

[data-theme="dark"] .mk-bubble {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line);
  border-left-color: var(--gold);
}

[data-theme="dark"] .mk-text .mv {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line-strong);
  color: var(--gold-light);
}

.pillar h2,
.pillar h3,
.pillar .card-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 10px;
}

.pillar p:not(.pillar-label):not(.card-meta),
.pillar .card-body {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
  margin: 0 0 16px;
}

/* The delivery: it does not just say the answer, it draws it on the board. */
.pillar-show {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: var(--sp-7);
  margin-top: var(--sp-6);
  padding: var(--sp-7);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.pillar-show-copy {
  display: grid;
  gap: var(--sp-3);
}

.pillar-show h3 {
  font-size: var(--t-lg);
}

.pillar-show p:not(.pillar-label) {
  max-width: 52ch;
  color: var(--ink-soft);
  line-height: 1.65;
}

.pillar-show-shot {
  margin: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
}

.pillar-show-shot img {
  width: 100%;
  max-height: 330px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* Coach demo: one exchange, engine line in, sentence out. */
.coach-demo {
  display: grid;
  grid-template-columns: 1fr auto 1.3fr;
  align-items: stretch;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}

/* The Engine Evaluation panel, drawn rather than screenshotted: the black bolt
   chip, the gold toggle, win chance, then the ranked lines with their piece
   glyphs. Greens are the app's own "best" green. */
.engine-win {
  align-self: center;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}

.engine-win-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ew-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
}

.engine-win-head strong {
  font: 600 var(--t-xs) var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ew-gear {
  margin-left: auto;
  color: var(--muted);
  font-size: 16px;
}

.ew-toggle {
  position: relative;
  width: 38px;
  height: 21px;
  flex: 0 0 38px;
  border-radius: 999px;
  background: var(--gold);
}

.ew-toggle i {
  position: absolute;
  top: 2.5px;
  right: 2.5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .25);
}

.ew-chance {
  font-size: var(--t-sm);
}

.ew-chance strong {
  font-weight: 700;
}

.ew-chance small {
  color: var(--muted);
  font-size: var(--t-xs);
}

.ew-info {
  color: var(--muted);
  font-size: var(--t-xs);
}

.ew-line {
  display: grid;
  gap: 7px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--cream);
  border: 1px solid var(--line);
}

.ew-line.ew-best {
  background: color-mix(in srgb, #2f9e6c 12%, var(--cream));
  border-color: color-mix(in srgb, #2f9e6c 35%, transparent);
}

.ew-line-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-sm);
}

.ew-line-head b {
  font-weight: 700;
}

.ew-star {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #2f9e6c;
  color: #fff;
  font-size: 10px;
}

.ew-verdict {
  color: #217a52;
  font-weight: 700;
}

.ew-alt {
  color: #217a52;
  font-weight: 600;
}

.ew-moves {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 11px;
  font-size: var(--t-xs);
  color: var(--ink-soft);
}

.ew-moves span {
  white-space: nowrap;
}

.ew-moves i {
  color: var(--muted);
  font-style: normal;
}

.demo-arrow {
  display: grid;
  place-items: center;
  color: var(--gold-dark);
  font-size: 26px;
}

/* The Coach window, copied from the app: header with the gold knight, the
   conversation, and the (decorative) ask bar at the bottom. */
.coach-win {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.coach-win-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.coach-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  transition: transform 300ms var(--ease-out);
}

.coach-avatar svg,
.coach-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

/* Socrates Dynamic Facial Expressions & Micro-Animations */
.socrates-avatar-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.soc-eye-l, .soc-eye-r,
.soc-brow-l, .soc-brow-r,
.soc-mouth, .soc-forehead, .soc-head,
#soc-eye-l, #soc-eye-r,
#soc-brow-l, #soc-brow-r,
#soc-mouth, #soc-forehead, #soc-head {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 1. NEUTRAL / IDLE: Natural Blinking & Gentle Micro-breathing */
@keyframes idleBlink {
  0%, 88%, 100% { transform: scaleY(1); }
  92%, 95% { transform: scaleY(0.08); }
}
@keyframes idleBreathing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

.mood-blink .soc-eye-l, .mood-blink .soc-eye-r,
.mood-blink #soc-eye-l, .mood-blink #soc-eye-r,
.mood-neutral .soc-eye-l, .mood-neutral .soc-eye-r,
.mood-neutral #soc-eye-l, .mood-neutral #soc-eye-r {
  animation: idleBlink 3.8s infinite ease-in-out;
}
.mood-blink .soc-head, .mood-blink #soc-head,
.mood-neutral .soc-head, .mood-neutral #soc-head {
  animation: idleBreathing 4.2s infinite ease-in-out;
}

/* 2. THINKING (ΣΚΕΦΤΟΜΑΙ): Active Scanning & Deep Calculation */
@keyframes thinkingEyes {
  0%, 100% { transform: translate(6px, -6px); }
  25% { transform: translate(8px, -4px); }
  55% { transform: translate(-3px, -7px); }
  75% { transform: translate(4px, -6px); }
  92% { transform: scaleY(0.12) translate(4px, -6px); }
  95% { transform: translate(4px, -6px); }
}
@keyframes thinkingBrowL {
  0%, 100% { transform: translateY(-7px) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(-6deg); }
}
@keyframes thinkingBrowR {
  0%, 100% { transform: translateY(-7px) rotate(3deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
}
@keyframes thinkingForehead {
  0%, 100% { transform: translateY(-3px) scaleX(0.95); }
  50% { transform: translateY(-7px) scaleX(0.88); }
}
@keyframes thinkingHead {
  0%, 100% { transform: rotate(1.5deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(2.5px); }
}

.mood-thinking .soc-eye-l, .mood-thinking .soc-eye-r,
.mood-thinking #soc-eye-l, .mood-thinking #soc-eye-r {
  animation: thinkingEyes 4.5s infinite ease-in-out;
}
.mood-thinking .soc-brow-l, .mood-thinking #soc-brow-l {
  animation: thinkingBrowL 3.2s infinite ease-in-out;
}
.mood-thinking .soc-brow-r, .mood-thinking #soc-brow-r {
  animation: thinkingBrowR 3.2s infinite ease-in-out;
}
.mood-thinking .soc-forehead, .mood-thinking #soc-forehead {
  animation: thinkingForehead 3.2s infinite ease-in-out;
}
.mood-thinking .soc-head, .mood-thinking #soc-head {
  animation: thinkingHead 4.5s infinite ease-in-out;
}

/* 3. PUZZLED (ΑΠΟΡΩ): Skeptical One-Brow Arch & Quizzical Tilt */
@keyframes puzzledBrowL {
  0%, 100% { transform: translateY(-14px) rotate(-9deg) scale(1.05); }
  50% { transform: translateY(-20px) rotate(-14deg) scale(1.12); }
}
@keyframes puzzledBrowR {
  0%, 100% { transform: translateY(3px) rotate(6deg); }
  50% { transform: translateY(6px) rotate(9deg); }
}
@keyframes puzzledHead {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50% { transform: rotate(-5.5deg) scale(1.02); }
}
@keyframes puzzledEyeL {
  0%, 82%, 100% { transform: scale(1.14) translateY(-2px); }
  86% { transform: scaleY(0.1) scaleX(1.14) translateY(-2px); }
  90% { transform: scale(1.14) translateY(-2px); }
}
@keyframes puzzledEyeR {
  0%, 82%, 100% { transform: scale(0.92) translateY(1px); }
  86% { transform: scaleY(0.1) scaleX(0.92) translateY(1px); }
  90% { transform: scale(0.92) translateY(1px); }
}
@keyframes puzzledMouth {
  0%, 100% { transform: translateX(-3px) rotate(-4deg); }
  50% { transform: translateX(-5px) rotate(-7deg); }
}

.mood-puzzled .soc-brow-l, .mood-puzzled #soc-brow-l {
  animation: puzzledBrowL 3.4s infinite ease-in-out;
}
.mood-puzzled .soc-brow-r, .mood-puzzled #soc-brow-r {
  animation: puzzledBrowR 3.4s infinite ease-in-out;
}
.mood-puzzled .soc-head, .mood-puzzled #soc-head {
  animation: puzzledHead 3.4s infinite ease-in-out;
}
.mood-puzzled .soc-eye-l, .mood-puzzled #soc-eye-l {
  animation: puzzledEyeL 3.4s infinite ease-in-out;
}
.mood-puzzled .soc-eye-r, .mood-puzzled #soc-eye-r {
  animation: puzzledEyeR 3.4s infinite ease-in-out;
}
.mood-puzzled .soc-mouth, .mood-puzzled #soc-mouth {
  animation: puzzledMouth 3.4s infinite ease-in-out;
}

/* 4. ANGRY / BLUNDER (ΘΥΜΩΝΩ): Disapproving Head Shake & V-Brows */
@keyframes angryHeadShake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  12% { transform: rotate(-4.5deg) translateX(-3px); }
  28% { transform: rotate(4.5deg) translateX(3px); }
  44% { transform: rotate(-3deg) translateX(-2px); }
  60% { transform: rotate(3deg) translateX(2px); }
  75% { transform: rotate(0deg); }
}
@keyframes angryBrowL {
  0%, 100% { transform: translateY(6px) rotate(19deg); }
  30% { transform: translateY(9px) rotate(23deg); }
  70% { transform: translateY(5px) rotate(17deg); }
}
@keyframes angryBrowR {
  0%, 100% { transform: translateY(6px) rotate(-19deg); }
  30% { transform: translateY(9px) rotate(-23deg); }
  70% { transform: translateY(5px) rotate(-18deg); }
}
@keyframes angryEyes {
  0%, 100% { transform: scaleY(0.72) translateY(3px); }
  50% { transform: scaleY(0.62) translateY(4px); }
}
@keyframes angryMouth {
  0%, 100% { transform: scaleY(-0.72) translateY(8px); }
  50% { transform: scaleY(-0.88) translateY(9.5px); }
}
@keyframes angryForehead {
  0%, 100% { transform: translateY(5px) scaleX(0.85); }
  50% { transform: translateY(7px) scaleX(0.8); }
}

.mood-angry .soc-head, .mood-angry #soc-head {
  animation: angryHeadShake 2.8s infinite ease-in-out;
}
.mood-angry .soc-brow-l, .mood-angry #soc-brow-l {
  animation: angryBrowL 2.8s infinite ease-in-out;
}
.mood-angry .soc-brow-r, .mood-angry #soc-brow-r {
  animation: angryBrowR 2.8s infinite ease-in-out;
}
.mood-angry .soc-eye-l, .mood-angry .soc-eye-r,
.mood-angry #soc-eye-l, .mood-angry #soc-eye-r {
  animation: angryEyes 2.8s infinite ease-in-out;
}
.mood-angry .soc-mouth, .mood-angry #soc-mouth {
  animation: angryMouth 2.8s infinite ease-in-out;
}
.mood-angry .soc-forehead, .mood-angry #soc-forehead {
  animation: angryForehead 2.8s infinite ease-in-out;
}

/* 5. HAPPY / BRILLIANT (ΧΑΙΡΟΜΑΙ): Proud Nodding & Beaming Smile */
@keyframes happyHeadNod {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-5px) scale(1.02); }
  55% { transform: translateY(3px) scale(0.99); }
  75% { transform: translateY(-2px) scale(1.01); }
}
@keyframes happyBrowL {
  0%, 100% { transform: translateY(-10px) rotate(4deg); }
  50% { transform: translateY(-15px) rotate(7deg); }
}
@keyframes happyBrowR {
  0%, 100% { transform: translateY(-10px) rotate(-4deg); }
  50% { transform: translateY(-15px) rotate(-7deg); }
}
@keyframes happySmile {
  0%, 100% { transform: scale(1.18) translateY(2px); }
  50% { transform: scale(1.3) translateY(3px); }
}
@keyframes happyEyes {
  0%, 82%, 100% { transform: scale(1.1) translateY(-2px); }
  86% { transform: scaleY(0.15) scaleX(1.1) translateY(-2px); }
  90% { transform: scale(1.1) translateY(-2px); }
}

.mood-happy .soc-head, .mood-happy #soc-head {
  animation: happyHeadNod 2.6s infinite ease-in-out;
}
.mood-happy .soc-brow-l, .mood-happy #soc-brow-l {
  animation: happyBrowL 2.6s infinite ease-in-out;
}
.mood-happy .soc-brow-r, .mood-happy #soc-brow-r {
  animation: happyBrowR 2.6s infinite ease-in-out;
}
.mood-happy .soc-mouth, .mood-happy #soc-mouth {
  animation: happySmile 2.6s infinite ease-in-out;
}
.mood-happy .soc-eye-l, .mood-happy .soc-eye-r,
.mood-happy #soc-eye-l, .mood-happy #soc-eye-r {
  animation: happyEyes 2.6s infinite ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .soc-eye-l, .soc-eye-r,
  .soc-brow-l, .soc-brow-r,
  .soc-mouth, .soc-forehead, .soc-head,
  #soc-eye-l, #soc-eye-r,
  #soc-brow-l, #soc-brow-r,
  #soc-mouth, #soc-forehead, #soc-head {
    animation: none !important;
    transition: none !important;
  }
}

.coach-win-title {
  display: grid;
  gap: 1px;
}

.coach-win-title strong {
  font-size: var(--t-base);
  letter-spacing: -.01em;
  color: var(--ink);
}

.coach-win-title small {
  color: var(--muted);
  font-size: var(--t-xs);
}

.coach-replay {
  margin-left: auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  font-size: 17px;
  cursor: pointer;
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 300ms var(--ease-out);
}

.coach-replay:hover {
  color: var(--gold-dark);
  border-color: var(--gold);
  transform: rotate(-180deg);
}

/* Fixed height with its own scroll, like a real chat: the window never grows,
   the conversation scrolls up inside it and the sequencer keeps the newest
   message in view. */
.coach-win-body {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: var(--sp-5);
  /* flex: none, not flex: 1 — a grow factor would override the fixed height
     and let the window swell with the conversation, which is the exact thing
     the internal scroll exists to prevent. */
  flex: none;
  height: 372px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  background: var(--paper);
}

.coach-win-body::-webkit-scrollbar {
  width: 8px;
}

.coach-win-body::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 4px;
}

.coach-win-body::-webkit-scrollbar-track {
  background: transparent;
}

.msg .who {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font: 500 var(--t-xs) var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.msg-user {
  justify-self: end;
  max-width: 34ch;
  padding: 11px 16px;
  border-radius: 14px 14px 4px 14px;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: var(--t-sm);
}

.msg-user .who {
  color: var(--gold-dark);
}

/* The caret rides the growing text while the Coach is being "written". */
.mtext.writing::after {
  content: "▍";
  color: var(--gold-dark);
  animation: caret 900ms steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

.msg-coach {
  justify-self: start;
  max-width: 52ch;
  padding: 11px 16px;
  border-radius: 14px 14px 14px 4px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* Coach chat message rows with Socrates avatar */
.msg-coach-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-self: start;
  max-width: 58ch;
}

.msg-coach-row .msg-coach {
  max-width: none;
  flex: 1;
}

.msg-lesson-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-self: stretch;
}

.msg-lesson-row .msg-lesson {
  flex: 1;
}

.coach-msg-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden;
  margin-top: 2px;
}

.coach-msg-avatar svg,
.coach-msg-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

/* The Coach's message conventions, same as the app: moves in clickable-looking
   chips, terms in bold, the teaching line in italics at the end. */
.msg-coach .mv {
  display: inline-block;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 600 0.86em var(--mono);
  line-height: 1.55;
  white-space: nowrap;
}

.msg-coach strong {
  font-weight: 700;
}

/* Inline on purpose: the typewriter wraps each italic word in its own em, and
   a block em would stack them one per line mid-write. The line break before
   the teaching sentence is a real <br> in the markup instead. */
.msg-coach em {
  font-style: italic;
  color: var(--gold-dark);
}

.msg-lesson {
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid rgba(205, 145, 20, 0.28);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
}

/* Typing dots, shown by the sequencer while the Coach "writes". */
.typing {
  display: none;
  justify-self: start;
  align-items: center;
  gap: 10px;
}

.typing.on {
  display: inline-flex;
}

.typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 13px 17px;
  border-radius: 14px 14px 14px 4px;
  background: var(--cream);
  border: 1px solid var(--line);
}

@media (max-width: 600px) {
  .msg-coach-row,
  .msg-lesson-row {
    gap: 8px;
  }
  .coach-msg-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
}

.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing-dot 1s ease-in-out infinite;
}

.typing i:nth-child(2) {
  animation-delay: .16s;
}

.typing i:nth-child(3) {
  animation-delay: .32s;
}

@keyframes typing-dot {

  0%,
  60%,
  100% {
    opacity: .35;
    transform: none;
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* The ask bar: decoration, but it is the app's real furniture. */
.coach-win-input {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 var(--sp-5) var(--sp-5);
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  color: var(--muted);
  font-size: var(--t-sm);
}

.cwi-plus {
  font-size: 19px;
}

.cwi-ask {
  flex: 1;
}

.cwi-mode {
  font-size: var(--t-xs);
  color: var(--ink-soft);
  white-space: nowrap;
}

.cwi-send {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--gold);
  color: #141310;
  font-size: 14px;
}

/* While the sequencer drives, unplayed messages wait invisibly but keep their
   space out of layout only after being shown, so the window grows naturally. */
.coach-win[data-playing] .msg:not(.shown) {
  display: none;
}

.coach-win .msg.shown {
  animation: msg-in 300ms var(--ease-out);
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Features: six cards, one grid. The top three carry screenshots on cream
   mats; the bottom three are typographic, because pretending we have a
   screenshot we do not have reads as exactly that. */
/* The platform overview sits above the grid, height-capped so it reads as a
   wide establishing shot rather than a second hero. */
.features-banner {
  margin: var(--sp-7) auto 0;
  width: min(100%, 960px);
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow);
}

.features-banner img {
  width: 100%;
  height: clamp(200px, 26vw, 320px);
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.feature-card:hover {
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.feature-card h3,
.feature-card .card-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: 0 0 10px;
  color: var(--ink);
}

.feature-card > p,
.feature-card .card-body {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
  margin: 0 0 16px;
}

.feature-shot {
  margin: 0 0 var(--sp-4);
  padding: 9px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
}

.feature-shot img {
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: top left;
}

.feature-art {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 9px;
  min-height: 170px;
  margin-bottom: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
}

.feature-cite {
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.feature-cite span {
  font: 500 var(--t-md) var(--display);
  letter-spacing: -.01em;
}

.feature-cite small {
  color: var(--muted);
  font: 400 var(--t-xs) var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* 8b. Feature Showcase Split Panels (Dedicated Subpages only) */
.feat-eyebrow {
  display: inline-block;
  font: 600 var(--t-xs) var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}

.showcase-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5.5vw, 68px);
  align-items: center;
  margin-top: clamp(40px, 4.5vw, 64px);
}

.showcase-split-rev {
  grid-template-columns: 1fr 1fr;
}

.showcase-split-rev .showcase-split-shot {
  order: 1;
}

.showcase-split-rev .showcase-split-text {
  order: 2;
}

.showcase-split-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.showcase-split-text h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}

.showcase-split-text h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 14px;
  text-wrap: balance;
}

.showcase-split-text .showcase-lede {
  font-family: var(--sans);
  font-size: 17px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 16px;
  font-weight: 500;
  text-wrap: pretty;
}

.showcase-split-text>p {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 52ch;
}

.showcase-split-bullets {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  display: grid;
  gap: 14px;
}

.showcase-split-bullets li,
.showcase-split-bullets .bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 52ch;
}

.showcase-split-bullets li strong,
.showcase-split-bullets .bullet-item strong {
  color: var(--ink);
  font-weight: 600;
}

.showcase-split-bullets li .bullet-check,
.showcase-split-bullets .bullet-item .bullet-check,
.bullet-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 14%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 800;
  margin-top: 2px;
  line-height: 1;
}

[data-theme="dark"] .showcase-split-bullets li .bullet-check,
[data-theme="dark"] .showcase-split-bullets .bullet-item .bullet-check,
[data-theme="dark"] .bullet-check {
  background: rgba(223, 167, 46, 0.15);
  border-color: rgba(223, 167, 46, 0.3);
  color: var(--gold-light);
}

.showcase-split-shot {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  width: 100%;
}

.showcase-split-shot img {
  width: auto;
  max-width: 100%;
  max-height: 440px;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px -6px rgba(16, 17, 16, 0.1);
  background: var(--paper);
  display: block;
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}

.showcase-split-shot img:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -8px rgba(16, 17, 16, 0.16);
}

[data-theme="dark"] .showcase-split-shot img {
  border-color: var(--line-strong);
  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.65);
}

/* Full Width Showcase Card (Image Top, Text Below) */
.showcase-full {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  gap: var(--sp-5);
}

.showcase-compact {
  max-width: 640px;
  margin-inline: auto;
}

.showcase-medium {
  max-width: 980px;
  margin-inline: auto;
}

.showcase-full-shot {
  margin: 0;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--paper);
}

.showcase-full-shot img {
  width: 100%;
  height: auto;
  display: block;
}

.showcase-full-text {
  max-width: 72ch;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: var(--sp-3);
}

.showcase-full-text p {
  color: var(--ink-soft);
  font-size: var(--t-base);
  line-height: 1.65;
}

/* Concrete Chess Example Comparison Box */
.chess-compare-box {
  width: 100%;
  margin: var(--sp-3) 0 var(--sp-4);
  display: grid;
  gap: 10px;
}

.chess-compare-row {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
}

.chess-compare-row.engine {
  background: color-mix(in srgb, #e53e3e 4%, var(--paper));
  border-color: color-mix(in srgb, #e53e3e 22%, var(--line));
}

.chess-compare-row.tutor {
  background: color-mix(in srgb, var(--gold) 8%, var(--paper));
  border-color: color-mix(in srgb, var(--gold) 35%, var(--line));
}

.chess-compare-tag {
  font: 600 var(--t-xs) var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.chess-compare-row.engine .chess-compare-tag {
  color: #c53030;
}

.chess-compare-row.tutor .chess-compare-tag {
  color: var(--gold-dark);
}

.chess-compare-txt {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink);
}

@media (max-width: 900px) {

  .showcase-split,
  .showcase-split-rev {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .showcase-split-rev .showcase-split-shot {
    order: 2;
  }

  .showcase-split-rev .showcase-split-text {
    order: 1;
  }
}

/* Feature tabs, Bonsai-style: one horizontal strip of pill tabs riding above
   a full-width shot. The active pill is the only dark thing in the strip. */
.feat-tabs {
  margin-top: var(--sp-8);
}

.feat-tablist {
  display: flex;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.feat-tablist::-webkit-scrollbar {
  display: none;
}

.feat-tablist [role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 auto;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  color: var(--ink-soft);
  font: 600 clamp(12px, 0.9vw, 13px)/1.2 var(--sans);
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: color 150ms var(--ease-out), background 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.tab-ico {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tab-ico img,
.tab-ico svg {
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
  transition: filter 150ms var(--ease-out, ease);
}

[data-theme="dark"] .tab-ico img {
  filter: invert(1) brightness(1.2);
}

.feat-tablist [role="tab"][aria-selected="true"] .tab-ico img {
  filter: invert(1) brightness(1.5);
}

[data-theme="dark"] .feat-tablist [role="tab"][aria-selected="true"] .tab-ico img {
  filter: invert(0);
}

.feat-tablist [role="tab"]:hover {
  color: var(--ink);
  background: rgba(16, 17, 16, 0.06);
}

.feat-tablist [role="tab"][aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .feat-tablist {
  background: var(--paper-strong);
  border-color: var(--line);
}

[data-theme="dark"] .feat-tablist [role="tab"]:hover {
  background: var(--cream);
  color: var(--ink);
}

[data-theme="dark"] .feat-tablist [role="tab"][aria-selected="true"] {
  background: var(--cream);
  color: var(--gold);
  border: 1px solid var(--line-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.feat-panels {
  margin-top: var(--sp-5);
}

.feat-panel {
  display: grid;
  gap: var(--sp-4);
}

.feat-panel[hidden] {
  display: none;
}

/* A swap should feel like a page turn, not a jump cut. */
.feat-panel:not([hidden]) {
  animation: feat-in 260ms var(--ease-out);
}

@keyframes feat-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.feat-panel-shot {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow-md);
}

.feat-panel-shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.feat-panel h3,
.feat-panel .card-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 10px;
}

.feat-panel>p {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: var(--t-base);
  line-height: 1.6;
}

/* Social proof: player voices, expandable with blur fade */
.quotes-expandable {
  position: relative;
  margin-top: var(--sp-8);
}

.quotes-expandable .quotes {
  margin-top: 0;
  max-height: 840px;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.quotes-expandable.is-expanded .quotes {
  max-height: 2500px;
}

.quotes-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 190px;
  background: linear-gradient(to bottom, 
    rgba(247, 245, 240, 0) 0%, 
    rgba(247, 245, 240, 0.72) 30%, 
    rgba(247, 245, 240, 0.98) 80%,
    var(--cream) 100%
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--sp-2);
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 2;
}

[data-theme="dark"] .quotes-fade {
  background: linear-gradient(to bottom, 
    rgba(22, 24, 31, 0) 0%, 
    rgba(22, 24, 31, 0.72) 35%, 
    rgba(22, 24, 31, 0.98) 85%,
    var(--cream) 100%
  );
}

.quotes-expandable.is-expanded .quotes-fade {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.quotes-toggle-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 3;
}

[data-theme="dark"] .quotes-toggle-btn {
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.15);
}

.quotes-toggle-btn:hover {
  border-color: var(--gold-dark);
  color: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.quotes-toggle-btn svg {
  transition: transform 0.3s ease;
}

.quotes-collapse-row {
  display: none;
  text-align: center;
  margin-top: var(--sp-6);
}

.quotes-expandable.is-expanded + .quotes-collapse-row {
  display: block;
}

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  border-color: rgba(205, 145, 20, 0.35);
}

[data-theme="dark"] .quote:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  border-color: rgba(223, 167, 46, 0.35);
}

.quote-stars {
  color: var(--gold);
  letter-spacing: 3px;
  font-size: var(--t-sm);
  margin: 0;
}

.quote blockquote {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.65;
  flex-grow: 1;
}

.quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .quote figcaption {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.quote-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  flex-shrink: 0;
  border: 2px solid var(--line-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: var(--paper-warm);
  transition: transform 180ms var(--ease-out);
}

.quote:hover .quote-avatar {
  transform: scale(1.04);
}

[data-theme="dark"] .quote-avatar {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.quote-author-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quote figcaption strong {
  font-size: var(--t-sm);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}

.quote figcaption span {
  color: var(--muted);
  font: 400 var(--t-xs) var(--mono);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Full pricing page ---------------------------------------------------------- */
.billing-toggle {
  display: inline-flex;
  gap: 4px;
  margin: var(--sp-7) auto 0;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
}

.billing-wrap {
  text-align: center;
}

.billing-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font: 600 var(--t-sm) var(--sans);
  cursor: pointer;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out);
}

.billing-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.billing-toggle .save {
  color: var(--gold-dark);
  font: 700 var(--t-xs) var(--sans);
}

.billing-toggle button[aria-pressed="true"] .save {
  color: #f0c366;
}

.billing-toggle button[aria-pressed="false"]:hover {
  color: var(--ink);
}

[data-theme="dark"] .billing-toggle {
  background: var(--cream);
  border-color: var(--line-strong);
}

[data-theme="dark"] .billing-toggle button {
  color: var(--ink-soft);
}

[data-theme="dark"] .billing-toggle button[aria-pressed="true"] {
  background: var(--paper-strong);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line-strong);
}

[data-theme="dark"] .billing-toggle button[aria-pressed="true"] .save {
  color: #f0c366;
}

[data-theme="dark"] .billing-toggle button[aria-pressed="false"]:hover {
  color: var(--ink);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* Markup carries both price blocks; the grid's data-billing decides which is
   visible, so the page reads correctly with JavaScript off. */
.price-grid[data-billing="annual"] .price-monthly {
  display: none;
}

.price-grid[data-billing="monthly"] .price-annual {
  display: none;
}

.price-card {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.price-card-featured {
  border-color: var(--gold);
  box-shadow: var(--shadow);
}

.price-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-name h3 {
  font-size: var(--t-lg);
}

.tier-piece {
  font-size: 21px;
  line-height: 1;
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
}

.tier-piece img {
  width: 100%;
  height: 100%;
}

.tier-piece-free,
.tier-piece-pro {
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.tier-piece-free {
  color: var(--muted);
  mask-image: url("assets/tier/pawn.svg");
}

.tier-piece-pro {
  mask-image: url("assets/tier/rook.svg");
}

.pill {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: #141310;
  font: 700 var(--t-xs) var(--sans);
  letter-spacing: .04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.price-tag {
  font: 500 var(--t-xl) var(--display);
  letter-spacing: -.015em;
}

.price-tag small {
  color: var(--muted);
  font: 400 var(--t-sm) var(--sans);
}

.price-sub {
  color: var(--muted);
  font-size: var(--t-xs);
}

.price-sub s {
  opacity: .6;
}

.price-blurb {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.price-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.price-features li {
  position: relative;
  padding-left: 26px;
  font-size: var(--t-sm);
  line-height: 1.45;
}

/* A board square rather than a tick — the site's own motif. */
.price-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 10px;
  height: 10px;
  border: 1px solid var(--gold-dark);
}

.price-card-featured .price-features li::before {
  background: var(--gold);
  border-color: var(--gold);
}

/* Premium is defined as additions on top of Pro, so its bullets are pluses. */
.price-card[data-tier="premium"] .price-features li:not(.price-inherits)::before {
  content: "+";
  top: .08em;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  color: var(--gold-dark);
  font: 400 19px/19px var(--display);
}

.price-features li.price-inherits {
  padding-left: 0;
  margin-bottom: 2px;
  font-size: var(--t-base);
  font-weight: 700;
}

.price-features li.price-inherits::before {
  content: none;
}

.price-features li.price-inherits::after {
  content: "+";
  margin-left: .26em;
  vertical-align: -.04em;
  color: var(--gold-dark);
  font: 400 2.1em/0 var(--display);
}

.price-card .button {
  margin-top: auto;
  justify-content: center;
}

.price-card ul+.button {
  margin-top: var(--sp-5);
}

/* The daily-cost argument as a pull quote rather than a card: centred italic
   serif under a single gold quote mark, the way an editor would set it. */
.price-quote {
  position: relative;
  max-width: 44ch;
  margin: var(--sp-8) auto 0;
  padding-top: var(--sp-6);
  text-align: center;
  text-wrap: balance;
  font: italic 500 var(--t-lg) var(--display);
  line-height: 1.35;
  letter-spacing: -.008em;
  color: var(--ink);
}

.price-quote::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2em;
  line-height: .6;
  color: var(--gold-dark);
}

/* Comparison table */
.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  margin-top: var(--sp-8);
}

.compare {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.compare th,
.compare td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.compare thead th {
  font: 500 var(--t-xs) var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare tbody th {
  font-weight: 600;
}

.compare tbody th small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 400;
}

.compare td.no {
  color: var(--muted);
}

.compare .col-featured {
  background: color-mix(in srgb, var(--gold) 6%, transparent);
}

/* Responsive table wrapper for blogs and content pages */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--sp-6) 0;
  border-radius: var(--radius-sm);
}

.compare-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--t-sm);
  background: var(--paper);
}

.compare-table th,
.compare-table td {
  padding: 12px 16px;
  border: 1px solid var(--line);
  text-align: left;
}

.compare-table th {
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
}

/* Pricing: the recommended plan is the default your eye lands on. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.plan {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.plan>p:not(.plan-price):not(.plan-flag):not(.plan-alt) {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* Every card ends in its own action, so choosing happens where the deciding
   happens. Only the recommended plan's button is gold. */
.plan .button {
  justify-self: start;
  margin-top: var(--sp-3);
  padding: 12px 24px;
}

.plan-price {
  font: 500 var(--t-lg) var(--display);
  letter-spacing: -.01em;
}

.plan-price span {
  color: var(--muted);
  font: 400 var(--t-xs) var(--sans);
}

.plan-featured {
  border-color: var(--gold);
  box-shadow: var(--shadow);
}

.plan-flag {
  position: absolute;
  top: -12px;
  left: var(--sp-6);
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--gold);
  color: #141310;
  font: 700 var(--t-xs) var(--sans);
  letter-spacing: .04em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.plan-alt {
  color: var(--muted);
  font-size: var(--t-xs);
  margin-top: -6px;
}

/* The one pricing fact that closes the sale, set alone in the serif. */
.plans-note {
  margin: var(--sp-6) auto 0;
  max-width: 46ch;
  text-align: center;
  font: italic 500 var(--t-md) var(--display);
  color: var(--ink);
  text-wrap: balance;
}

/* FAQ: three honest answers, animated open. */
.faq-shell {
  max-width: 760px;
}

.faq,
.faq-list {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--sp-2);
}

.faq details,
.faq-list details {
  border-bottom: 1px solid var(--line-strong);
}

.faq summary,
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font: 600 var(--t-base) var(--sans);
  letter-spacing: -.008em;
  transition: color 150ms var(--ease-out);
}

.faq summary::-webkit-details-marker,
.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq summary::after,
.faq-list summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--gold);
  font: 400 26px/1 var(--display);
  transition: transform 220ms var(--ease-out);
}

.faq details[open] summary::after,
.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover,
.faq-list summary:hover {
  color: var(--gold);
}

.faq details p,
.faq-list details p {
  padding: 0 0 var(--sp-5);
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.65;
}

.faq details[data-animating],
.faq-list details[data-animating] {
  overflow: hidden;
}

/* Final CTA: Full-width architectural band with geometric grid & gold lines - */
.final-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(76px, 8vw, 108px) clamp(20px, 4vw, 32px);
  text-align: center;
  background-color: #111210;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(200, 155, 60, 0.055) 0%, rgba(17, 18, 16, 0.95) 70%),
    linear-gradient(to right, rgba(200, 155, 60, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200, 155, 60, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  background-position: center center;
  color: #f7f4eb;
  border-radius: 0;
  border-top: 1px solid rgba(200, 155, 60, 0.26);
  border-bottom: 1px solid rgba(200, 155, 60, 0.26);
  box-shadow: none;
}

/* Whisper-subtle chessboard squares & minimal Knight L-path on the outer wings */
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 448' fill='none'%3E%3Crect x='64' y='128' width='64' height='64' fill='%23c89b3c' fill-opacity='0.025'/%3E%3Crect x='128' y='192' width='64' height='64' fill='%23c89b3c' fill-opacity='0.028'/%3E%3Crect x='192' y='128' width='64' height='64' fill='%23c89b3c' fill-opacity='0.04' stroke='%23c89b3c' stroke-opacity='0.14' stroke-width='1'/%3E%3Crect x='64' y='256' width='64' height='64' fill='%23c89b3c' fill-opacity='0.022'/%3E%3Ccircle cx='96' cy='288' r='3' fill='%23c89b3c' fill-opacity='0.24'/%3E%3Cpath d='M96 288V160H216' stroke='%23c89b3c' stroke-opacity='0.18' stroke-width='1' stroke-dasharray='3 4'/%3E%3Ccircle cx='224' cy='160' r='3' stroke='%23c89b3c' stroke-opacity='0.28' stroke-width='1'/%3E%3Crect x='1312' y='128' width='64' height='64' fill='%23c89b3c' fill-opacity='0.025'/%3E%3Crect x='1248' y='192' width='64' height='64' fill='%23c89b3c' fill-opacity='0.028'/%3E%3Crect x='1184' y='128' width='64' height='64' fill='%23c89b3c' fill-opacity='0.04' stroke='%23c89b3c' stroke-opacity='0.14' stroke-width='1'/%3E%3Crect x='1312' y='256' width='64' height='64' fill='%23c89b3c' fill-opacity='0.022'/%3E%3Ccircle cx='1344' cy='288' r='3' fill='%23c89b3c' fill-opacity='0.24'/%3E%3Cpath d='M1344 288V160H1224' stroke='%23c89b3c' stroke-opacity='0.18' stroke-width='1' stroke-dasharray='3 4'/%3E%3Ccircle cx='1216' cy='160' r='3' stroke='%23c89b3c' stroke-opacity='0.28' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1440px 448px;
}

/* Luminous golden top crest line */
.final-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 86%);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(229, 185, 92, 0.85) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.final-cta-bg-mark {
  display: none;
}

@media (max-width: 768px) {
  .final-cta {
    padding: 60px 20px;
  }
}

.final-cta .shell {
  position: relative;
  z-index: 2;
}

/* Architectural eyebrow with flanking tapered golden lines */
.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #e5b95c;
  font: 600 12px/1.2 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cta-eyebrow::before,
.cta-eyebrow::after {
  content: "";
  display: inline-block;
  width: clamp(32px, 5vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229, 185, 92, 0.75));
}

.cta-eyebrow::after {
  background: linear-gradient(90deg, rgba(229, 185, 92, 0.75), transparent);
}

.cta-split .cta-eyebrow::before {
  width: 28px;
  background: rgba(229, 185, 92, 0.8);
}

.cta-split .cta-eyebrow::after {
  display: none;
}

.final-cta h2 {
  max-width: 28ch;
  margin-inline: auto;
  color: #f7f4eb;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.16;
  text-wrap: balance;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}



.final-cta-box {
  max-width: 740px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-cta-box h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #f5f2e8;
  margin-bottom: 18px;
  text-wrap: balance;
}

.final-cta-box h2 em {
  font-style: italic;
  color: var(--gold);
}

.final-cta-box .cta-sub {
  font-family: var(--sans);
  font-size: clamp(16px, 1.1vw, 18px);
  color: #c2c3be;
  line-height: 1.6;
  max-width: 58ch;
  margin-inline: auto;
  margin-bottom: 28px;
}

.final-cta-box .cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
}

.final-cta-box .cta-micro {
  font-family: var(--sans);
  font-size: 13px;
  color: #8c8e87;
  text-align: center;
  margin: 0;
}

.cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #f5f2e8;
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgba(245, 242, 232, 0.26);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.cta-ghost:hover {
  color: #ffffff;
  border-color: var(--gold);
  background: rgba(200, 155, 60, 0.14);
  transform: translateY(-1px);
}

.final-cta .button-ghost {
  color: #f5f2e8;
  border-color: rgba(245, 242, 232, 0.26);
  background: rgba(255, 255, 255, 0.04);
}

.final-cta .button-ghost:hover {
  color: #ffffff;
  border-color: var(--gold);
  background: rgba(200, 155, 60, 0.14);
  transform: translateY(-1px);
}

.cta-sub {
  max-width: 54ch;
  margin: 14px auto 0;
  color: #b9b7ae;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  text-wrap: pretty;
}

.cta-micro {
  margin-top: 18px;
  color: #85847c;
  font-size: var(--t-xs);
}

[data-theme="dark"] .final-cta {
  background-color: #0b0c0b;
  border-color: rgba(200, 155, 60, 0.32);
}


/* Teaching Styles / Personalities ------------------------------------------- */
.teaching-styles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.teaching-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow);
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.teaching-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
}

.teaching-card.active {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 4%, var(--paper));
}

.teaching-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.teaching-badge {
  font: 700 11px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
}

.teaching-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--gold-dark);
  flex-shrink: 0;
}

.teaching-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.teaching-card h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--ink);
}

.teaching-subtitle {
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--gold-dark);
  margin: 0;
}

.teaching-card p:not(.teaching-subtitle) {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

.teaching-benefit {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.teaching-benefit::before {
  content: "✓";
  color: var(--gold);
  font-weight: 700;
}

[data-theme="dark"] .teaching-icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}

[data-theme="dark"] .teaching-benefit {
  border-top-color: var(--line);
}

/* 3 Themes Showcase (Light, Dark, Navy) ------------------------------------ */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}
.theme-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.theme-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}
.theme-preview {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-card-dark .theme-preview {
  background: #111411;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.theme-card-navy .theme-preview {
  background: #0b1329;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}
.theme-mini-ui {
  width: 100%;
  max-width: 220px;
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.theme-card-light .theme-mini-ui {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}
.theme-card-dark .theme-mini-ui {
  background: #1e231e;
  border: 1px solid #2d362d;
  color: #edeae2;
}
.theme-card-navy .theme-mini-ui {
  background: #131f3d;
  border: 1px solid #1e3a8a;
  color: #f8fafc;
}
.theme-card-body {
  padding: 22px;
  background: var(--paper);
  display: grid;
  gap: 8px;
  flex: 1;
}
.theme-card-body h3 {
  font-size: var(--t-md);
  margin: 0;
}
.theme-card-body p {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* Board & Piece Customization ---------------------------------------------- */
.customization-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}

@media (max-width: 840px) {
  .customization-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

.custom-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
}
.custom-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.custom-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink);
}
.custom-chip-color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}

/* Blog & Learning Hub ------------------------------------------------------- */
.blog-cat-zone {
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--line);
}
.blog-cat-zone:last-of-type {
  border-bottom: none;
}
.blog-zone-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.blog-zone-info {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.blog-zone-info h2 {
  font-size: var(--t-xl);
  margin: 0;
  color: var(--ink);
}
.blog-zone-info p {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
.blog-zone-count {
  font: 700 var(--t-xs) var(--mono);
  color: var(--gold-dark);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-zone-articles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

/* Standalone Article Layout ----------------------------------------------- */
.article-header {
  padding: clamp(48px, 6vw, 80px) 0 32px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.article-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 500 var(--t-xs) var(--mono);
  color: var(--ink-soft);
  margin-bottom: var(--sp-4);
}
.article-breadcrumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}
.article-breadcrumbs a:hover {
  color: var(--gold-dark);
}
.article-header h1 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.18;
  margin: var(--sp-3) 0 var(--sp-4);
  text-wrap: balance;
}
.article-lead {
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink-soft);
  line-height: 1.55;
  font-style: italic;
  font-family: var(--serif);
  margin: 0 auto var(--sp-5);
}
.article-meta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  font-family: var(--mono);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.article-featured-img {
  max-width: 960px;
  margin: var(--sp-6) auto var(--sp-8);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.article-featured-img img {
  width: 100%;
  height: auto;
  display: block;
}
.article-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
  color: var(--ink);
}
.article-content p {
  margin-bottom: var(--sp-5);
}
.article-content h2 {
  font-size: clamp(24px, 2.5vw, 32px);
  margin: var(--sp-8) 0 var(--sp-4);
  line-height: 1.25;
}
.article-content h3 {
  font-size: clamp(20px, 2vw, 24px);
  margin: var(--sp-6) 0 var(--sp-3);
}
.article-content ul, .article-content ol {
  margin: 0 0 var(--sp-6) 24px;
  display: grid;
  gap: 10px;
}
.article-callout {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin: var(--sp-6) 0;
  font-size: var(--t-md);
  color: var(--ink);
}
.article-takeaways {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  margin: var(--sp-7) 0;
  box-shadow: var(--shadow);
}
.article-takeaways h3 {
  margin-top: 0;
  color: var(--gold-dark);
  font-size: var(--t-md);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: var(--mono);
}
.article-board-figure {
  margin: var(--sp-7) 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
}
.article-board-figure img {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.article-board-figure figcaption {
  padding: 12px 16px;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  background: var(--cream);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
}

@media (max-width: 960px) {
  .blog-zone-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .blog-zone-info {
    position: static;
  }
}
@media (max-width: 640px) {
  .blog-zone-articles {
    grid-template-columns: 1fr;
  }
}

/* Split CTA: pitch on the left, an action ticket on the right. The panel's
   gold hairline makes it read as the thing to grab, not more prose. */
.cta-split {
  text-align: left;
}

.cta-split-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.cta-split h2 {
  margin-inline: 0;
  max-width: 18ch;
}

.cta-split .cta-sub {
  margin-inline: 0;
  max-width: 46ch;
}

/* No box around the actions: the two actions side by side, the fine print
   under them, right of the copy. */
.cta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
}

.cta-panel .cta-micro {
  margin-top: 0;
  flex-basis: 100%;
}

/* 8. Footer (Adaptive Impeccable Edition with Brand Watermark) ----------------
   Adapts flawlessly between Light Mode (#f8f7f4 warm ivory) and Dark Mode (#080908 deep ink).
   Features Newsreader editorial quote, 4-column sitemap, seamless ecosystem bar,
   and a massive architectural brand watermark (SocraChess) spanning the bottom. */
.site-footer {
  background-color: #080908;
  color: #edeae2;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  transition: border-color 250ms var(--ease-out);
}

/* Subtle architectural ambient gradient at the top of footer */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 167, 46, 0.35), transparent);
  pointer-events: none;
}

/* Primary Layout: Brand Column + 4-Column Navigation */
.footer-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(56px, 7vw, 84px) 0 clamp(40px, 5vw, 56px);
}

/* Brand Column */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 380px;
}

.footer-logo-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
  color: transparent !important;
  text-decoration: none !important;
  font-size: 0;
  line-height: 0;
  transition: opacity 160ms var(--ease-out);
}

.footer-logo-link:hover {
  opacity: 0.88;
}

.footer-logo-link img {
  width: 252px;
  height: auto;
  display: block;
  color: transparent;
  font-size: 0;
}

/* In the black footer, always show the white brand logo */
.site-footer .brand-logo-light {
  display: none !important;
}

.site-footer .brand-logo-dark {
  display: block !important;
}

/* The Core Brand Philosophy Quote */
.footer-quote {
  margin: 0 0 14px 0;
  padding: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.45;
  color: rgba(237, 234, 226, 0.95);
  letter-spacing: -0.01em;
  font-weight: 400;
}

.footer-desc {
  margin: 0 0 24px 0;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.62;
  color: rgba(237, 234, 226, 0.58);
}

/* Refined Action Pill */
.footer-cta-wrap {
  margin-top: auto;
}

.footer-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(223, 167, 46, 0.28);
  color: #dfa72e;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  letter-spacing: 0.01em;
  transition: all 180ms var(--ease-out);
}

.footer-cta-arrow {
  transition: transform 180ms var(--ease-out);
  display: inline-block;
}

.footer-cta-pill:hover {
  border-color: #dfa72e;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(223, 167, 46, 0.25);
}

.footer-cta-pill:hover .footer-cta-arrow {
  transform: translateX(3px);
}

/* 4-Column Navigation Grid */
.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
}

.footer-col-title {
  margin: 0 0 16px 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cca142;
}

/* Footer Links List & Clean Divider */
.footer-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-list li {
  margin: 0;
  padding: 0;
}

.footer-nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
  margin: 6px 0;
  width: 100%;
  list-style: none;
  pointer-events: none;
}

.footer-links-list a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: rgba(237, 234, 226, 0.65);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none !important;
  transition: color 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.footer-links-list a:hover {
  color: #ffffff;
  transform: translateX(3px);
}

.footer-links-list a.footer-link-action {
  color: #cca142;
  font-weight: 600;
}

.footer-links-list a.footer-link-action:hover {
  color: #f1c76a;
}

.footer-links-list a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* High-Contrast Crisp White Micro-Tag with Black Text next to Changelog */
.footer-badge-new {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 2.5px 7px;
  border-radius: 999px;
  margin-left: 7px;
  color: #0c0d0c !important;
  background: #ffffff !important;
  vertical-align: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  text-decoration: none !important;
  transition: transform 150ms var(--ease-out), background 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}

.footer-links-list a:hover .footer-badge-new {
  background: #ffffff !important;
  color: #000000 !important;
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.25);
}

/* Eye-Catching Teal Micro-Tag with Trending Caption next to Affiliate Program */
.footer-badge-trending {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 2.5px 7.5px;
  border-radius: 999px;
  margin-left: 7px;
  color: #032b28 !important;
  background: #2dd4bf !important;
  border: 1px solid rgba(45, 212, 191, 0.5);
  vertical-align: 1px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(45, 212, 191, 0.22);
  text-decoration: none !important;
  transition: transform 150ms var(--ease-out), background 150ms var(--ease-out), box-shadow 150ms var(--ease-out), color 150ms var(--ease-out);
}

.footer-links-list a:hover .footer-badge-trending {
  background: #5eead4 !important;
  color: #01201e !important;
  border-color: #5eead4;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 14px rgba(94, 234, 212, 0.45);
}

.footer-links-list a.footer-link-action {
  color: rgba(237, 234, 226, 0.88);
  font-weight: 500;
}

.footer-links-list a.footer-link-action:hover {
  color: #dfa72e;
}

/* Seamless Ecosystem Trust Band */
.footer-ecosystem-band {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.015);
  transition: border-color 250ms var(--ease-out), background-color 250ms var(--ease-out);
}

.footer-ecosystem-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.footer-ecosystem-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-ecosystem-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-light);
  background: transparent;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(223, 167, 46, 0.2);
}

.footer-ecosystem-text {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(237, 234, 226, 0.6);
}

.footer-ecosystem-partners {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.footer-partner-link {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  opacity: 0.78;
  text-decoration: none !important;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), filter 160ms var(--ease-out);
}

.footer-partner-link:hover {
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.15));
}

.footer-partner-link img {
  display: block;
  height: 32px;
  width: auto;
}

/* In the black footer, always show the dark-mode (white text) partner logos */
.footer-partner-link .partner-logo-light {
  display: none !important;
}

.footer-partner-link .partner-logo-dark {
  display: block !important;
}

.footer-ecosystem-divider {
  color: rgba(255, 255, 255, 0.18);
  font-size: 12px;
}

/* Sub-Footer / Legal & System Meta */
.footer-sub {
  padding: 22px 0 10px;
}

.footer-sub-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 12.5px;
  color: rgba(237, 234, 226, 0.5);
}

.footer-copyright {
  margin: 0;
}

.footer-llm-link {
  color: rgba(237, 234, 226, 0.65);
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-color: rgba(237, 234, 226, 0.3) !important;
  transition: color 150ms var(--ease-out), text-decoration-color 150ms var(--ease-out);
}

.footer-llm-link:hover {
  color: var(--gold-light, #c4974f) !important;
  text-decoration-color: var(--gold-light, #c4974f) !important;
}

.footer-utility-links {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.footer-utility-links a {
  color: rgba(237, 234, 226, 0.55);
  text-decoration: none !important;
  transition: color 150ms var(--ease-out);
}

.footer-utility-links a:hover {
  color: #ffffff;
}

.footer-utility-sep {
  color: rgba(255, 255, 255, 0.15);
}

.footer-back-top {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(237, 234, 226, 0.65) !important;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.footer-back-top:hover {
  color: var(--gold-light) !important;
  transform: translateY(-2px);
}

/* Massive Brand Watermark at Footer Bottom (Memorisely Style) */
.footer-brand-watermark {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  user-select: none;
  line-height: 0.82;
  margin-top: clamp(20px, 3.5vw, 42px);
  padding: 0 16px;
}

.footer-brand-watermark span {
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(48px, 15.2vw, 215px);
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.038);
}

/* Responsive Footer Adjustments */
@media (max-width: 1024px) {
  .footer-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-brand {
    max-width: 540px;
  }

  .footer-nav-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .footer-nav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }

  .footer-ecosystem-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .footer-sub-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .footer-nav-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-col-title {
    font-size: 13.5px;
    letter-spacing: 0.09em;
    margin-bottom: 12px;
  }

  .footer-links-list {
    gap: 9px;
  }

  .footer-links-list a {
    font-size: 15px;
    padding: 6px 0;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-quote {
    font-size: 17.5px;
    line-height: 1.5;
  }

  .footer-desc {
    font-size: 14.5px;
    line-height: 1.6;
  }

  .footer-cta-pill {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 14.5px;
  }

  .footer-ecosystem-inner {
    gap: 16px;
    padding: 20px 0;
  }

  .footer-ecosystem-partners {
    flex-wrap: wrap;
    gap: 14px;
  }

  .footer-ecosystem-divider {
    display: none;
  }

  .footer-sub-inner {
    gap: 14px;
    align-items: flex-start;
  }

  .footer-utility-links {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .footer-brand-watermark span {
    font-size: clamp(38px, 14vw, 72px);
    letter-spacing: -0.02em;
  }
}

/* 9. Reveal on scroll ---------------------------------------------------------
   Content eases in once, 14px and 500ms, and never moves again. Serves the
   reader (it marks what is new on screen), never performs.

   The hidden state is .reveal-pending, and only script.js applies it, only to
   elements below the fold at load. So with JavaScript off, or slow, or an
   observer that never fires, nothing on the page is ever invisible — the
   failure mode is "no animation", never "no content". */
.reveal-pending {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.reveal-pending.revealed {
  opacity: 1;
  transform: none;
}

/* 10. Mobile ------------------------------------------------------------------ */
.mobile-cta {
  display: none;
}

@media (max-width: 960px) {

  .plans,
  .quotes,
  .price-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pillars {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
  }

  .teaching-styles-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  /* Stacked, the plus moves from the left edge to the seam above each card. */
  .pillar+.pillar::before {
    left: 50%;
    top: calc(var(--sp-7) / -2);
  }

  .pillar-show {
    grid-template-columns: 1fr;
    padding: var(--sp-6);
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .cta-split-grid {
    grid-template-columns: 1fr;
  }

  .cta-panel {
    justify-self: stretch;
  }


  .coach-demo {
    grid-template-columns: 1fr;
  }

  .demo-arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }

  .proof-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

}

@media (max-width: 1100px) {
  .site-nav {
    display: none;
  }

  .header-login {
    display: none;
  }

  .nav-burger {
    display: flex;
  }

  .header-inner {
    justify-content: space-between;
    gap: var(--sp-4);
  }
}

@media (max-width: 768px) {
  :root {
    --shell: min(100% - 32px, 640px);
    --t-xs: 12.5px;
    --t-sm: 14.5px;
    --t-base: 16.5px;
    --t-md: 18.5px;
  }

  /* Body & Core Typography Scale for Mobile Legibility */
  body {
    font-size: 16px;
    line-height: 1.6;
    padding-bottom: 0;
  }

  .section {
    padding: 40px 0 72px;
  }

  .section-cream::after {
    font-size: 280px;
    right: -60px;
    bottom: -80px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    text-align: left;
  }

  /* On a phone the margins the undertones live in do not exist. */
  .hero::before,
  .hero::after {
    content: none;
  }

  .hero h1,
  .hero .lede {
    margin-inline: 0;
  }

  .hero-actions {
    justify-content: flex-start;
  }

  .header-cta {
    display: none;
  }

  .section-head {
    margin-bottom: 32px;
  }

  .section-head h1 {
    font-size: clamp(28px, 6.5vw, 36px);
    line-height: 1.15;
  }

  .section-head h2 {
    font-size: clamp(26px, 6vw, 32px);
    line-height: 1.2;
  }

  .section-head p {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 10px;
  }

  .sec-rule span {
    font-size: 12px;
    padding: 4px 10px;
  }

  .sec-rule em {
    font-size: 13.5px;
  }

  /* Pillar Cards Mobile Legibility */
  .pillar {
    padding: 24px 20px;
  }

  .pillar h2,
  .pillar h3,
  .pillar .card-title {
    font-size: 22px;
    line-height: 1.25;
  }

  .pillar p:not(.pillar-label):not(.card-meta),
  .pillar .card-body {
    font-size: 15.5px;
    line-height: 1.6;
  }

  .pillar-label {
    font-size: 12px;
    font-weight: 600;
  }

  .pillar-shot {
    height: auto;
    min-height: 180px;
    padding: 14px 16px;
  }

  /* Mini Know Card (Socrates) */
  .mini-know {
    padding: 2px 0;
  }

  .mk-head {
    gap: 10px;
  }

  .mk-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .mk-name {
    font-size: 13.5px;
  }

  .mk-kicker {
    font-size: 11px;
  }

  .mk-tag {
    font-size: 11px;
    padding: 3.5px 8px;
  }

  .mk-bubble {
    padding: 11px 13px;
    margin: 9px 0;
    min-height: 60px;
  }

  .mk-text {
    font-size: 14.5px;
    line-height: 1.55;
  }

  .mk-text .mv {
    font-size: 13.5px;
    padding: 2px 6px;
  }

  .mk-foot {
    font-size: 12px;
    padding-top: 6px;
  }

  .mk-source {
    font-size: 12px;
  }

  .mk-indicator {
    font-size: 11.5px;
  }

  /* Mini Engine Card */
  .me-head {
    font-size: 12px;
    gap: 8px;
  }

  .me-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .me-chance {
    font-size: 14.5px;
  }

  .me-line {
    font-size: 14px;
  }

  /* Pillar Show Section */
  .pillar-show {
    padding: 24px 20px;
  }

  .pillar-show h2,
  .pillar-show h3 {
    font-size: 24px;
    line-height: 1.25;
  }

  .pillar-show p:not(.pillar-label) {
    font-size: 15.5px;
    line-height: 1.6;
  }

  /* Teaching Styles Cards */
  .teaching-styles-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .teaching-card {
    padding: 22px 20px;
    gap: 14px;
  }

  .teaching-card h3 {
    font-size: 22px;
  }

  .teaching-subtitle {
    font-size: 15px;
  }

  .teaching-card p:not(.teaching-subtitle) {
    font-size: 15px;
    line-height: 1.6;
  }

  .teaching-benefit {
    font-size: 13.5px;
  }

  .teaching-badge {
    font-size: 11.5px;
    padding: 5px 11px;
  }

  .teaching-icon {
    width: 36px;
    height: 36px;
  }

  .teaching-icon svg {
    width: 18px;
    height: 18px;
  }

  /* Coach Conversation Demo */
  .engine-win {
    padding: 18px 16px;
  }

  .engine-win-head strong {
    font-size: 13px;
  }

  .ew-chance {
    font-size: 15px;
  }

  .ew-line-head {
    font-size: 14.5px;
  }

  .ew-moves {
    font-size: 13px;
    flex-wrap: wrap;
  }

  .coach-win-head {
    padding: 14px;
  }

  .coach-win-title strong {
    font-size: 16px;
  }

  .coach-win-title small {
    font-size: 13px;
  }

  .coach-win-body {
    height: 390px;
    padding: 16px 14px;
    gap: 13px;
  }

  .msg-user {
    font-size: 15px;
    line-height: 1.5;
    padding: 12px 16px;
  }

  .msg-coach {
    font-size: 15px;
    line-height: 1.6;
    padding: 12px 16px;
  }

  .msg-coach .mv {
    font-size: 13.5px;
    padding: 1px 7px;
  }

  .msg-lesson {
    font-size: 14.5px;
    line-height: 1.5;
    padding: 12px 15px;
  }

  .coach-win-input {
    padding: 13px 14px;
  }

  .cwi-ask {
    font-size: 14px;
  }

  /* Final CTA */
  .final-cta h2 {
    font-size: clamp(26px, 6vw, 32px);
    line-height: 1.2;
  }

  .cta-eyebrow {
    font-size: 12.5px;
  }

  .cta-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .cta-actions .button,
  .cta-ghost {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-align: center;
    font-size: 15px;
  }

  .cta-micro {
    font-size: 13px;
    line-height: 1.5;
  }

  /* FAQ Section */
  .faq summary {
    font-size: 17px;
    padding: 18px 0;
    line-height: 1.35;
  }

  .faq details p {
    font-size: 15.5px;
    line-height: 1.65;
    padding-bottom: 18px;
  }

  /* The thumb-arc CTA appears once the hero button has scrolled away. */
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform 240ms var(--ease-out);
  }

  .mobile-cta[data-shown] {
    transform: none;
  }

  .mobile-cta .button {
    width: 100%;
    min-height: 50px;
  }
}

/* 11. Reduced motion (Intentional & Accessible) ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* The cycle is disabled, so pin one question open instead of ending on none. */
  .flow-ask-item {
    opacity: 0;
  }

  .flow-ask-item:first-child {
    opacity: 1;
  }

  /* Eliminate motion and positional shifts while preserving visual feedback */
  [data-reveal],
  .reveal-pending,
  .hero-shot,
  .plateau-panel {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: opacity 150ms ease !important;
  }


  /* Remove infinite animations and movement */
  .typing i,
  .mk-text.writing::after {
    animation: none !important;
    transform: none !important;
    opacity: 0.7 !important;
  }

  /* Remove hover transforms that cause disorienting motion */
  .button:hover,
  .button-primary:hover,
  .plateau-tab-item:hover,
  .feature-card-v2:hover,
  .hero-comp-board:hover {
    transform: none !important;
  }

  .ptab-collapse {
    transition: opacity 150ms ease !important;
  }

  .plateau-tab-item .ptab-chevron {
    transition: none !important;
  }
}

/* ==========================================================================
   12. Blog Hub, Featured Showcase, Filters & Standalone Article System
   ========================================================================== */

/* Blog Hero */
.blog-hero {
  padding: 60px 0 20px;
}

.blog-hero-head {
  max-width: 760px;
  margin-bottom: var(--sp-6);
}

.blog-hero-head h1 {
  font: 400 clamp(2.2rem, 4vw, 3.4rem)/1.15 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 16px;
}

.blog-hero-head p {
  font-size: var(--t-md);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Featured Story Showcase */
.blog-featured-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--sp-8);
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms var(--ease-out);
}

.blog-featured-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.blog-featured-shot {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  min-height: 340px;
}

.blog-featured-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms var(--ease-out);
}

.blog-featured-card:hover .blog-featured-shot img {
  transform: scale(1.03);
}

.blog-featured-pill {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 5px 14px;
  background: rgba(16, 17, 16, 0.85);
  backdrop-filter: blur(8px);
  color: var(--accent-light, #f3d489);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.blog-featured-body {
  display: flex;
  flex-direction: column;
  padding: 40px;
  justify-content: center;
}

.blog-featured-body h2 {
  font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.2 var(--display);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 10px 0 14px;
  transition: color 150ms var(--ease-out);
}

.blog-featured-card:hover .blog-featured-body h2 {
  color: var(--accent);
}

.blog-featured-body p {
  color: var(--ink-soft);
  font-size: var(--t-md);
  line-height: 1.6;
  margin: 0 0 20px;
}

.blog-featured-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-top: auto;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--muted);
}

.blog-featured-footer .featured-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 600;
  transition: color 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.blog-featured-card:hover .blog-featured-footer .featured-btn {
  color: var(--accent);
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .blog-featured-card {
    grid-template-columns: 1fr;
  }
  .blog-featured-shot {
    aspect-ratio: 16 / 9;
    min-height: auto;
  }
  .blog-featured-body {
    padding: 24px;
  }
}

/* Category Filter Bar */
.blog-filter-section {
  padding: 10px 0 40px;
}

.blog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}

.blog-filter-btn {
  padding: 8px 18px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all 180ms var(--ease-out);
}

.blog-filter-btn:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--cream);
}

.blog-filter-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Unified Articles Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Clickable Blog Card */
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms var(--ease-out);
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}

.blog-card-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream);
  margin: 0;
}

.blog-card-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 400ms var(--ease-out);
}

.blog-card:hover .blog-card-shot img {
  transform: scale(1.04);
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 20px;
}

.category-badge {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-ink, #8c6721);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 999px;
  margin-bottom: 10px;
  width: fit-content;
}

.blog-card-body h3 {
  margin: 0 0 10px 0;
  font: 400 1.35rem/1.3 var(--display);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 150ms var(--ease-out);
}

.blog-card:hover .blog-card-body h3 {
  color: var(--accent);
}

.blog-card-body p {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 18px 0;
  flex: 1;
}

.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: auto;
  margin-bottom: 16px;
}

.tag-chip {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  background: var(--cream);
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.blog-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--muted);
  font-family: var(--mono);
}

.blog-card-footer .read-more {
  color: var(--ink);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 150ms var(--ease-out), color 150ms var(--ease-out);
}

.blog-card:hover .blog-card-footer .read-more {
  color: var(--accent);
  transform: translateX(3px);
}

/* Standalone Article Layouts */
.article-header {
  padding: 60px 0 24px;
  text-align: center;
  max-width: 840px;
  margin: 0 auto;
}

/* Universal Breadcrumbs System */
.breadcrumb,
.breadcrumbs,
.article-breadcrumbs,
.article-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 5px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.breadcrumb ol,
.breadcrumb ul,
.breadcrumbs ol,
.breadcrumbs ul {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.breadcrumb li,
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  margin: 0;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after,
.breadcrumbs li:not(:last-child)::after {
  content: "/";
  opacity: 0.4;
  font-size: 11px;
}

.breadcrumb a,
.breadcrumbs a,
.article-breadcrumbs a,
.article-breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  transition: color 150ms var(--ease-out);
}

.breadcrumb a:hover,
.breadcrumbs a:hover,
.article-breadcrumbs a:hover,
.article-breadcrumb a:hover {
  color: var(--accent-ink, #8c6721);
  text-decoration: underline;
}

.breadcrumb span,
.breadcrumbs span,
.article-breadcrumbs span,
.article-breadcrumb span {
  margin: 0 2px;
  opacity: 0.5;
  color: var(--ink-soft);
}

.breadcrumb [aria-current="page"],
.breadcrumbs [aria-current="page"],
.article-breadcrumbs .current,
.article-breadcrumbs span:last-child,
.article-breadcrumb span:last-child {
  opacity: 1;
  color: var(--accent-ink, #8c6721);
  font-weight: 600;
}

.article-header h1 {
  font: 400 clamp(2.2rem, 4vw, 3.4rem)/1.18 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px 0 20px;
}

.article-lead {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 24px;
}

.article-meta-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--muted);
  padding: 6px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.article-featured-img {
  max-width: 920px;
  margin: 30px auto 48px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.article-featured-img img {
  width: 100%;
  height: auto;
  display: block;
}

.article-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ink);
}

.article-content p {
  margin-bottom: 1.5em;
}

.article-content h2 {
  font: 400 1.9rem/1.25 var(--display);
  letter-spacing: -0.015em;
  margin: 2.2em 0 0.8em;
  color: var(--ink);
}

.article-content ul,
.article-content ol {
  margin: 1em 0 1.8em 1.4em;
  padding: 0;
}

.article-content li {
  margin-bottom: 0.6em;
}

.article-callout {
  margin: 2.4em 0;
  padding: 22px 28px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.article-callout p {
  margin: 0;
}

.article-callout strong {
  color: var(--ink);
  font-weight: 700;
}

.article-callout a {
  color: var(--gold-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 150ms var(--ease-out);
}

.article-callout a:hover {
  color: var(--ink);
}

.article-callout-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--gold-dark);
  font: 600 var(--t-sm) var(--sans);
  text-decoration: none !important;
  border-bottom: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: all 180ms var(--ease-out);
}

.article-callout-action:hover {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateX(3px);
}

/* Mid-Article Contextual Socratic Box */
.article-mid-cta {
  margin: 2.6em 0;
  padding: 24px 28px;
  background: color-mix(in srgb, var(--gold) 6%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.article-mid-cta-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 var(--t-xs) var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.article-mid-cta p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.article-mid-cta a.mid-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}

.article-mid-cta a.mid-link:hover {
  color: var(--gold-dark);
  border-color: var(--gold-dark);
}

.article-takeaways {
  margin: 2.8em 0;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}

.article-takeaways h3 {
  font: 500 1.35rem/1.2 var(--display);
  margin: 0 0 16px;
  color: var(--ink);
}

.article-takeaways ul {
  margin: 0 0 0 1.2em;
}

/* Universal End-of-Article CTA System
   Replaces dark background with an elegant, warm cream card that integrates seamlessly above the footer */
article .final-cta,
.article-cta-box {
  margin: clamp(48px, 6vw, 72px) auto 48px;
  padding: clamp(40px, 5.5vw, 64px) clamp(24px, 4vw, 48px);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 24px;
  text-align: center;
  max-width: 820px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  color: var(--ink);
}

article .final-cta h2,
.article-cta-box h2,
.article-cta-box h3 {
  font: 500 clamp(24px, 3.2vw, 36px)/1.2 var(--display);
  color: var(--ink);
  margin: 0 auto 14px;
  max-width: 24ch;
}

article .final-cta p,
.article-cta-box p {
  font-size: var(--t-base);
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 auto 24px;
  line-height: 1.6;
}

article .final-cta .final-cta-actions,
.article-cta-box .final-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

article .final-cta .button-ghost,
.article-cta-box .button-ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-sm);
  padding: 10px 22px;
  border-radius: 999px;
  transition: all 180ms var(--ease-out);
}

article .final-cta .button-ghost:hover,
.article-cta-box .button-ghost:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

article .final-cta .final-cta-micro,
article .final-cta .cta-micro,
.article-cta-box .final-cta-micro {
  color: var(--muted);
  font-size: var(--t-xs);
  margin-top: 16px;
  margin-bottom: 0;
}

/* ==========================================================================
   13. Keep a Changelog (1.1.0) Standard System
   ========================================================================== */

.changelog-feed {
  max-width: 840px;
  margin: 0 auto;
  position: relative;
}

.changelog-entry {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 40px;
  margin-bottom: 36px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.03);
  transition: border-color 200ms var(--ease-out);
}

.changelog-entry:hover {
  border-color: var(--line-strong);
}

.changelog-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.changelog-version {
  font: 500 1.7rem/1.2 var(--display);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.changelog-tag {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.changelog-tag-latest {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-ink, #8c6721);
}

.changelog-date {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--muted);
  letter-spacing: 0.02em;
}

.changelog-summary {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 24px;
}

.changelog-group {
  margin-bottom: 24px;
}

.changelog-group:last-child {
  margin-bottom: 0;
}

.changelog-group-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.badge-added {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.badge-changed {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.badge-fixed {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.badge-security {
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

.badge-deprecated {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.changelog-group ul {
  margin: 0;
  padding-left: 1.2em;
  color: var(--ink);
  line-height: 1.65;
}

.changelog-group li {
  margin-bottom: 8px;
  font-size: 0.98rem;
}

.changelog-group li strong {
  font-weight: 600;
  color: var(--ink);
}

.changelog-group li code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--cream);
  padding: 2px 6px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .changelog-entry {
    padding: 24px 20px;
  }
  .changelog-version {
    font-size: 1.4rem;
  }
}

/* Contact Page Styles */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
}

.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow);
}

.contact-form {
  display: grid;
  gap: 20px;
}

.form-group {
  display: grid;
  gap: 6px;
}

.form-label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: #ffffff;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(205, 145, 20, 0.15);
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
}

.contact-form .button-primary {
  width: 100%;
  justify-content: center;
}

.contact-info-list {
  display: grid;
  gap: 16px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.contact-info-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 18px;
  color: var(--gold-dark);
}

.contact-info-txt h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.contact-info-txt p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.contact-info-txt a {
  color: var(--gold-dark);
  font-weight: 600;
  text-decoration: none;
}

.contact-info-txt a:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Pricing Trust Bar -------------------------------------------------------- */
.pricing-trust-bar {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-6);
  padding: 24px 0;
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pricing-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.trust-ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(205, 145, 20, 0.1);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(205, 145, 20, 0.22);
}

.trust-ico svg {
  width: 18px;
  height: 18px;
}

.trust-txt {
  font: 500 var(--t-xs) var(--sans);
  color: var(--ink-soft);
  line-height: 1.35;
}

.trust-txt strong {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
}

[data-theme="dark"] .pricing-trust-bar {
  background: transparent;
  border-top-color: var(--line-strong);
  border-bottom-color: var(--line-strong);
}

[data-theme="dark"] .trust-ico {
  background: rgba(205, 145, 20, 0.15);
  border-color: rgba(205, 145, 20, 0.35);
  color: var(--gold-light);
}

@media (max-width: 980px) {
  .pricing-trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 540px) {
  .pricing-trust-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .trust-item {
    justify-content: flex-start;
  }
}

/* ====================================================== Section: The 3 Plateaus (Split Layout) */
/* ====================================================== Section: The 3 Plateaus (Split Layout) */
.plateau-split {
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  align-items: stretch;
  margin-top: var(--sp-8);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: clamp(20px, 2.5vw, 28px);
  overflow: hidden;
  box-shadow: 0 12px 36px -8px rgba(16, 24, 16, 0.06);
}

.plateau-tabs-col {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: 10px;
  gap: 6px;
}

.plateau-tab-item {
  text-align: left;
  background: transparent;
  border-radius: 14px;
  border: 1px solid transparent;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px);
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.plateau-tab-item:hover {
  background: #F7F6F3;
}

[data-theme="dark"] .plateau-tab-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.plateau-tab-item.active {
  background: #FAF9F6;
  border-color: rgba(0, 0, 0, 0.05);
}

.plateau-tab-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3.5px;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
}

[data-theme="dark"] .plateau-tab-item.active {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .plateau-tab-item.active::before {
  background: var(--gold);
}

.ptab-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ptab-rating {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #ECEAE5;
  color: var(--ink-soft);
  transition: all 180ms ease;
}

.plateau-tab-item.active .ptab-rating {
  background: rgba(205, 145, 20, 0.14);
  color: var(--gold-dark);
}

[data-theme="dark"] .ptab-rating {
  background: rgba(255, 255, 255, 0.06);
  color: var(--lead-ink);
}

[data-theme="dark"] .plateau-tab-item.active .ptab-rating {
  background: rgba(223, 167, 46, 0.16);
  color: var(--gold);
}

.ptab-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--lead-ink);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease, background 200ms ease;
}

.plateau-tab-item:hover .ptab-indicator {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.04);
}

.plateau-tab-item.active .ptab-indicator {
  transform: rotate(90deg);
  color: var(--ink);
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .plateau-tab-item.active .ptab-indicator {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}

.ptab-title {
  font-family: var(--display);
  font-size: clamp(19px, 1.55vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 2px 0 0;
  transition: color 200ms ease;
}

/* Smooth Accordion Body Collapse */
.ptab-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
  opacity: 0;
}

.plateau-tab-item.active .ptab-collapse {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease 30ms;
}

.ptab-collapse-inner {
  overflow: hidden;
}

.ptab-desc {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lead-ink);
  margin: 12px 0 0;
  max-width: 48ch;
}

/* Right Column: Unified showcase stage */
.plateau-visual-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 3.5vw, 44px);
  background: #F8F7F4;
}

[data-theme="dark"] .plateau-visual-col {
  background: #141614;
}

.plateau-panel {
  display: none;
  width: 100%;
  animation: fadeInPanel 0.22s ease-out;
}

.plateau-panel.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 22px);
  width: 100%;
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.plateau-panel-media {
  width: 100%;
  max-width: 490px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 48px -12px rgba(16, 24, 16, 0.14), 0 2px 8px rgba(16, 24, 16, 0.04);
  overflow: hidden;
}

[data-theme="dark"] .plateau-panel-media {
  background: #191b19;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.6);
}

.plateau-panel-media img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
}

/* Contextual Live Feature Pill/Callout under the preview */
.plateau-callout-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 16px -2px rgba(16, 24, 16, 0.06);
  max-width: 100%;
  text-align: center;
}

[data-theme="dark"] .plateau-callout-bar {
  background: rgba(28, 30, 28, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.4);
}

.plateau-callout-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
}

.plateau-callout-tag::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(205, 145, 20, 0.2);
}

[data-theme="dark"] .plateau-callout-tag {
  color: var(--gold);
}

.plateau-callout-text {
  font-family: var(--sans);
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

@media (max-width: 900px) {
  .plateau-split {
    grid-template-columns: 1fr;
  }
  .plateau-tabs-col {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

/* ====================================================== Block 4: The 15-Minute Daily Habit */
.habit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.habit-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 36px);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: transform 200ms var(--ease-out), border-color 200ms ease;
}

.habit-step:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
}

[data-theme="dark"] .habit-step:hover {
  border-color: var(--gold);
}

.habit-step-eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.habit-step-num {
  font: 700 12px var(--mono);
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
}

[data-theme="dark"] .habit-step-num {
  color: var(--gold);
}

.habit-step-time {
  font: 500 12px var(--mono);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.habit-step-title {
  font: 600 clamp(20px, 1.6vw, 24px)/1.28 var(--display);
  margin: 0 0 var(--sp-3);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.habit-step-desc {
  font: 400 14.5px/1.65 var(--sans);
  color: var(--ink-soft);
  margin: 0 0 var(--sp-5);
  flex-grow: 1;
}

.habit-step-note {
  font: 500 12px/1.45 var(--sans);
  color: var(--ink-soft);
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: auto;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .habit-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* ====================================================== Block 5: What It Replaces */
.replaces-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;
  margin-top: var(--sp-8);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.replaces-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
}

.replaces-socra-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
}

.replaces-card-head {
  margin-bottom: var(--sp-4);
}

.replaces-card-title {
  font: 600 clamp(20px, 1.8vw, 24px)/1.25 var(--display);
  color: var(--ink);
  margin: 0 0 6px;
}

.replaces-card-sub {
  font: 400 14px/1.5 var(--sans);
  color: var(--ink-soft);
  margin: 0;
}

.replaces-card-sub em {
  font-style: italic;
  color: var(--ink);
  font-weight: 600;
}

.replaces-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--sp-5);
}

.replaces-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: 8px;
  font: 400 var(--t-sm) var(--sans);
}

.replaces-tool {
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
}

.replaces-price-old {
  text-decoration: line-through;
  color: var(--muted);
  font: 500 var(--t-xs) var(--mono);
  white-space: nowrap;
}

.replaces-tag-inc {
  font: 600 12.5px var(--mono);
  color: #1a6b38;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.replaces-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 4px;
  margin-top: auto;
  border-top: 1px dashed var(--line-strong);
  font: 500 var(--t-xs) var(--mono);
  color: var(--ink-soft);
}

.replaces-total-val {
  font-weight: 700;
  color: #b33939;
  font-size: 15px;
}

.replaces-socra-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.replaces-socra-pricing-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.replaces-socra-price-inline {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.replaces-socra-price {
  font: 600 24px/1 var(--display);
  color: var(--ink);
}

.replaces-socra-unit {
  font: 400 13px var(--sans);
  color: var(--ink-soft);
}

.replaces-socra-period {
  font: 500 12.5px var(--mono);
  color: var(--ink-soft);
}

.replaces-socra-period strong {
  color: #1a6b38;
  font-weight: 600;
}

.replaces-socra-btn {
  background: var(--ink);
  color: #ffffff;
  width: 100%;
  justify-content: center;
  font-weight: 600;
  padding: 13px 20px;
  box-shadow: 0 4px 14px rgba(16, 17, 16, 0.12);
  transition: background 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.replaces-socra-btn:hover {
  background: #2a2b28;
  color: #ffffff;
  transform: translateY(-1px);
}

.replaces-socra-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}

.replaces-socra-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .replaces-box {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* ==========================================================================
   Top Announcement / Notification Bar (Dismissible per session)
   ========================================================================== */
html.sc-announcement-closed #top-announcement-bar {
  display: none !important;
}

.top-announcement-bar {
  position: relative;
  z-index: 60;
  background: linear-gradient(90deg, #161513 0%, #201b14 50%, #161513 100%);
  border-bottom: 1px solid rgba(229, 169, 59, 0.28);
  color: #f7f4ec;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  max-height: 120px;
  opacity: 1;
  transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease, padding 320ms ease;
}

.top-announcement-bar.is-closing {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom-color: transparent !important;
}

.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px 48px 8px 16px;
  min-height: 38px;
}

.announcement-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  text-align: center;
}

/* ==========================================================================
   Universal Black & White Micro-Tag System
   - Dark background: Crisp white capsule, pitch-black text
   - Light background: Pitch-black capsule, pure-white text
   ========================================================================== */
.sc-tag,
.tag-bw,
.top-announcement-bar .announcement-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 2.5px 7px;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
  border: none;
  text-decoration: none !important;
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}

/* On Dark Background (Default for announcement bar, footer, dark sections) */
.sc-tag,
.tag-bw,
.tag-on-dark,
.top-announcement-bar .announcement-badge,
.footer-badge-new {
  color: #0c0d0c !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* On Light Background (For cream sections, white cards, light mode headers) */
.tag-on-light,
.section-cream .sc-tag,
.section-cream .tag-bw,
[data-theme="light"] .site-header .sc-tag,
[data-theme="light"] .site-header .tag-bw {
  color: #ffffff !important;
  background: #0c0d0c !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.announcement-text {
  color: rgba(247, 244, 236, 0.94);
  font-weight: 400;
}

.announcement-text strong {
  color: #ffffff;
  font-weight: 700;
}

.announcement-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffd278;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 210, 120, 0.5);
  transition: color 150ms ease, border-color 150ms ease, transform 150ms ease;
  white-space: nowrap;
}

.announcement-link:hover {
  color: #ffffff;
  border-bottom-style: solid;
  border-color: #ffffff;
}

.announcement-link span[aria-hidden="true"] {
  transition: transform 150ms ease;
}

.announcement-link:hover span[aria-hidden="true"] {
  transform: translateX(3px);
}

.announcement-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(247, 244, 236, 0.65);
  cursor: pointer;
  padding: 0;
  transition: background-color 150ms ease, color 150ms ease;
}

.announcement-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.announcement-close:focus-visible {
  outline: 2px solid #ffd278;
  outline-offset: 1px;
}

[data-theme="dark"] .top-announcement-bar {
  background: linear-gradient(90deg, #0e0d0c 0%, #191612 50%, #0e0d0c 100%);
  border-bottom-color: rgba(229, 169, 59, 0.22);
}

@media (max-width: 680px) {
  .announcement-inner {
    padding: 7px 40px 7px 12px;
  }
  .announcement-content {
    justify-content: flex-start;
    text-align: left;
    gap: 4px 8px;
  }
  .announcement-text {
    font-size: 12px;
  }
  .announcement-link {
    font-size: 12px;
  }
}

/* ==========================================================================
   Stockfish Analysis Page (Impeccable Craft Refactor)
   ========================================================================== */

/* Hero badge and meta */
.sf-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 999px;
  font: 600 var(--t-xs) var(--sans);
  letter-spacing: .02em;
  background: var(--ink);
  color: #ffffff;
  margin-bottom: var(--sp-4);
}

.sf-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

[data-theme="dark"] .sf-hero-badge {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border: 1px solid var(--line);
}

.sf-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  margin: 0;
}

.sf-hero-meta span {
  font-weight: 500;
}

/* Bento grid for Engine Capabilities */
.sf-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
  margin-top: var(--sp-6);
}

.sf-bento-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 200ms ease, transform 200ms ease;
}

.sf-bento-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

[data-theme="dark"] .sf-bento-card {
  background: var(--paper-strong);
}

.sf-bento-card.sf-col-8 {
  grid-column: span 8;
  background: linear-gradient(135deg, var(--paper) 0%, color-mix(in srgb, var(--cream) 40%, var(--paper)) 100%);
}

[data-theme="dark"] .sf-bento-card.sf-col-8 {
  background: linear-gradient(135deg, var(--paper-strong) 0%, color-mix(in srgb, var(--paper) 50%, var(--paper-strong)) 100%);
}

.sf-bento-card.sf-col-4 {
  grid-column: span 4;
}

.sf-bento-card.sf-col-6 {
  grid-column: span 6;
}

.sf-card-kicker {
  font: 700 var(--t-xs) var(--sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold);
  margin-bottom: 8px;
  display: block;
}

.sf-bento-card h3 {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin: 0;
}

.sf-card-body {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: var(--sp-2) 0 var(--sp-4);
}

.sf-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.sf-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
}

[data-theme="dark"] .sf-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* The Translation Workbench (Section 05) */
.sf-workbench {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
}

.sf-calc-panel {
  border: 1px solid #232724;
  border-radius: var(--radius);
  background: #111412;
  color: #f0f3f1;
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
}

.sf-panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.sf-engine-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8be0a4;
}

.sf-engine-tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
}

.sf-panel-meta {
  font: 500 12px var(--mono);
  color: #8a968d;
}

.sf-position-context {
  font-size: 13px;
  font-weight: 600;
  color: #d1d8d3;
  margin-bottom: 12px;
}

.sf-eval-display {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.sf-eval-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.sf-eval-score {
  font: 700 24px/1 var(--mono);
  color: #ffffff;
}

.sf-eval-pv {
  font: 500 13px/1.4 var(--mono);
  color: #a3b8aa;
}

.sf-calc-dilemma {
  margin-top: auto;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  font-size: 13px;
  line-height: 1.5;
  color: #fca5a5;
}

.sf-calc-dilemma strong {
  color: #fecaca;
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sf-coach-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
}

[data-theme="dark"] .sf-coach-panel {
  background: var(--paper-strong);
}

.sf-coach-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.sf-coach-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-coach-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  object-fit: contain;
  flex-shrink: 0;
}

.sf-coach-identity strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.sf-coach-chip {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 15%, var(--cream));
  color: var(--gold-dark);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}

.sf-coach-points {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.sf-coach-point {
  display: grid;
  gap: 3px;
}

.sf-point-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gold-dark);
}

.sf-point-desc {
  font-size: var(--t-sm);
  color: var(--ink);
  line-height: 1.55;
}

.sf-coach-takeaway {
  margin-top: auto;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--gold) 8%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.sf-coach-takeaway strong {
  color: var(--gold-dark);
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

@media (max-width: 900px) {
  .sf-bento-grid {
    grid-template-columns: 1fr;
  }
  .sf-bento-card.sf-col-8,
  .sf-bento-card.sf-col-4,
  .sf-bento-card.sf-col-6 {
    grid-column: span 1;
  }
  .sf-workbench {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Meet Socrates Section & Living Mentor Experience
   ========================================================================== */
.section-meet-socrates {
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.socrates-showcase {
  display: grid;
  gap: var(--sp-6);
  max-width: 1080px;
  margin: 0 auto;
}

.socrates-stage-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(24px, 3vw, 40px);
  background: var(--paper);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(24px, 3.5vw, 36px);
  box-shadow: 0 8px 32px rgba(205, 145, 20, 0.12);
  align-items: stretch;
  position: relative;
}

[data-theme="dark"] .socrates-stage-card {
  box-shadow: 0 8px 32px rgba(223, 167, 46, 0.16);
}

.socrates-avatar-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  border-right: 1px solid var(--line);
  padding-right: clamp(16px, 2.5vw, 32px);
}

.socrates-podium {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gold) 10%, transparent) 0%, transparent 72%);
}

.socrates-live-mount {
  --socra-size: 185px;
  padding-top: 48px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms ease;
}

.socrates-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  font: 600 12px var(--sans);
  color: var(--ink);
  margin-top: 10px;
  transition: all 250ms ease;
}

.socrates-status-pill .status-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: pulseGold 2s infinite ease-in-out;
}

@keyframes pulseGold {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
}

.socrates-narrative-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.socrates-dialogue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.socrates-dialogue-kicker {
  font: 700 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold-dark);
}

.socrates-timer-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.socrates-progress-track {
  width: 90px;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.socrates-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 2px;
}

.socrates-pause-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  transition: color 150ms ease;
}

.socrates-pause-btn:hover {
  color: var(--ink);
}

.socrates-chapter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.socrates-ch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  font: 500 12.5px var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 180ms ease;
}

.socrates-ch-btn .ch-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.socrates-ch-btn:hover {
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-1px);
}

.socrates-ch-btn.active {
  background: color-mix(in srgb, var(--gold) 15%, var(--paper));
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 0 12px rgba(205, 145, 20, 0.22);
}

.socrates-ch-btn.active .ch-num {
  color: var(--gold-dark);
}

.socrates-speech-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: clamp(20px, 2.5vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: opacity 160ms ease, transform 160ms ease;
}

.socrates-speech-card.is-updating {
  opacity: 0.35;
  transform: scale(0.995);
}

.socrates-spoken-quote {
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 24px);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid var(--gold);
  padding-left: 16px;
}

.socrates-explanation-text {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(14px, 1.35vw, 15.5px);
  line-height: 1.6;
  color: var(--ink-soft);
}

.socrates-speech-action {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.socrates-traits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: 8px;
}

.socrates-trait-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.socrates-trait-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: var(--shadow);
}

.st-icon-wrap {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--gold) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--gold-dark);
}

.st-icon-wrap svg {
  stroke: var(--gold-dark);
}

.socrates-trait-card h4 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.socrates-trait-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .socrates-stage-card {
    grid-template-columns: 1fr;
  }
  .socrates-avatar-column {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 24px;
  }
  .socrates-live-mount {
    --socra-size: 155px;
  }
  .socrates-traits-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep supplied product screenshots aligned with the existing theme toggle. */
img.product-shot-dark { display: none !important; }
[data-theme="dark"] img.product-shot-light { display: none !important; }
[data-theme="dark"] img.product-shot-dark { display: block !important; }
.feature-shot img:is(.product-shot-light, .product-shot-dark),
.pillar-shot-img img:is(.product-shot-light, .product-shot-dark) { object-fit: contain; object-position: center; }