/* ============================================================================
   CLEVER ACADEMY — "EVIDENCE ENGINE" DESIGN SYSTEM
   ----------------------------------------------------------------------------
   A precision-instrument identity: a calm dark canvas with raised panels,
   one disciplined teal "signal" accent, and data set in mono so numbers read
   like readouts from an instrument.

   Structure:
     1. Tokens (palette, type, scale, radius, spacing, motion)
     2. Legacy aliases  (keep older pages' inline var(--color-*) working)
     3. Base / reset / typography
     4. Layout (container, grid, section)
     5. Components (header, footer, buttons, panels, hero, badges, forms,
        meta-analysis tool, plan cards, course, modal, signal canvas)
     6. Motion + reduced-motion + responsive
   ========================================================================== */

/* ─── 1. TOKENS ──────────────────────────────────────────────────────────── */
:root {
  /* Deep-instrument palette */
  --bg-void:     #0A0E14;   /* primary background */
  --bg-panel:    #121823;   /* raised panels / cards */
  --bg-panel-2:  #161E2B;   /* nested / hover panels */
  --ink:         #E8EDF4;   /* primary text */
  --ink-dim:     #8A97AB;   /* secondary text */
  --ink-faint:   #5E6B7E;   /* tertiary / disabled */
  --signal:      #4DE0C2;   /* the one bold accent — use sparingly */
  --signal-deep: #2BB89C;   /* pressed / darker signal */
  --signal-warm: #F0A868;   /* amber secondary accent */
  --signal-noise: #3A4456;  /* scattered "noise" dots in the signal motif */
  --line:        #1F2A3A;   /* hairline borders / dividers */
  --line-soft:   #18222F;   /* fainter dividers */
  --danger:      #F0726A;   /* errors */
  --on-signal:   #06140F;   /* text/icon on a teal fill — stays dark in both themes for AA */

  /* Aurora Glass — gradient accents + frosted glass */
  --cyan:    #38BDF8;
  --violet:  #8B5CF6;
  --aurora:        linear-gradient(110deg, #4DE0C2 0%, #38BDF8 48%, #8B5CF6 100%);
  --aurora-bright: linear-gradient(110deg, #5BF0D0 0%, #56C7FB 48%, #A78BFA 100%);
  --glass-bg:   rgba(18, 24, 35, 0.62);
  --glass-blur: 14px;
  --glow-violet: rgba(139, 92, 246, 0.45);
  --glow-teal:   rgba(77, 224, 194, 0.40);

  /* Translucent signal washes (for "live data" tints, never large fills) */
  --signal-wash:  rgba(77, 224, 194, 0.10);
  --signal-wash2: rgba(77, 224, 194, 0.18);
  --warm-wash:    rgba(240, 168, 104, 0.12);
  --danger-wash:  rgba(240, 114, 106, 0.12);

  /* Typography */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale — 13 / 15 / 18 / 24 / 36 / 60 */
  --fs-xs:   0.8125rem;  /* 13 */
  --fs-sm:   0.9375rem;  /* 15 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.5rem;     /* 24 */
  --fs-xl:   2.25rem;    /* 36 */
  --fs-2xl:  3.75rem;    /* 60 */

  /* Radius — deliberately small, reads precise not soft */
  --radius:     6px;
  --radius-sm:  4px;
  --radius-lg:  10px;
  --radius-full: 999px;

  /* Spacing scale */
  --space-xxs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-xxl: 3rem;
  --space-xxxl: 4.5rem;

  /* Motion */
  --duration-fast: 140ms;
  --duration: 320ms;
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);

  --shadow-panel: 0 1px 0 rgba(255,255,255,0.02) inset,
                  0 12px 32px -16px rgba(0,0,0,0.7);
  --shadow-lift:  0 24px 60px -24px rgba(0,0,0,0.85);

  --container: 1140px;
}

/* ─── 2. LEGACY ALIASES ──────────────────────────────────────────────────────
   Older pages (meta-analysis.html, the auth pages, success/cancel) reference
   the previous design system's variable names inline. Map them onto the new
   palette so those pages adopt the Evidence Engine look without touching every
   inline style. New pages should prefer the tokens above. */
:root {
  --color-void:         var(--bg-void);
  --color-canvas:       var(--bg-panel);
  --color-ink:          var(--ink);
  --color-on-ink:       var(--ink);
  --color-on-ink-muted: var(--ink-dim);
  --color-slate:        var(--ink-dim);
  --color-steel:        var(--ink-faint);
  --color-hairline:     var(--line);
  --color-primary:        var(--signal);
  --color-primary-pressed: var(--signal-deep);
  --color-on-primary:     var(--bg-void);
  --color-warning:        var(--signal-warm);
  --color-danger:         var(--danger);

  --tint-mint:     var(--signal-wash);
  --tint-sky:      rgba(96, 165, 250, 0.10);
  --tint-lavender: var(--signal-wash);
  --tint-rose:     var(--warm-wash);
  --tint-yellow:   var(--warm-wash);
  --tint-peach:    var(--warm-wash);

  --radius-md:   var(--radius);
  --radius-xl:   var(--radius-lg);
  --shadow-card: var(--shadow-panel);
}

/* ─── LIGHT THEME ────────────────────────────────────────────────────────────
   Same instrument identity, lit. Toggled via [data-theme="light"] on <html>
   (set by ui.js, persisted in localStorage, defaults to OS preference). */
:root[data-theme="light"] {
  --bg-void:     #F3F6FA;
  --bg-panel:    #FFFFFF;
  --bg-panel-2:  #EEF2F8;
  --ink:         #0E1722;
  --ink-dim:     #51607A;
  --ink-faint:   #8390A6;
  --signal:      #0E9E86;   /* deeper teal for AA contrast on light */
  --signal-deep: #0B7E6B;
  --signal-warm: #B5712B;
  --signal-noise:#B9C4D4;
  --line:        #DCE3ED;
  --line-soft:   #E7ECF3;
  --danger:      #C8453D;

  --signal-wash:  rgba(14, 158, 134, 0.10);
  --signal-wash2: rgba(14, 158, 134, 0.16);

  --cyan:    #0EA5E9;
  --violet:  #7C3AED;
  --aurora:        linear-gradient(110deg, #0E9E86 0%, #0EA5E9 48%, #7C3AED 100%);
  --aurora-bright: linear-gradient(110deg, #0E9E86 0%, #0EA5E9 48%, #7C3AED 100%);
  --glass-bg:   rgba(255, 255, 255, 0.7);
  --glow-violet: rgba(124, 58, 237, 0.30);
  --glow-teal:   rgba(14, 158, 134, 0.28);
  --warm-wash:    rgba(181, 113, 43, 0.12);
  --danger-wash:  rgba(200, 69, 61, 0.10);

  --tint-sky: rgba(37, 99, 235, 0.08);

  --shadow-panel: 0 1px 0 rgba(255,255,255,0.6) inset,
                  0 10px 30px -18px rgba(20,40,70,0.30);
  --shadow-lift:  0 24px 60px -24px rgba(20,40,70,0.35);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(820px 460px at 84% -10%, rgba(124,58,237,0.12), transparent 60%),
    radial-gradient(760px 480px at 14% 0%, rgba(14,165,233,0.09), transparent 58%),
    radial-gradient(900px 560px at 50% 116%, rgba(14,158,134,0.07), transparent 62%);
}
:root[data-theme="light"] .site-header { background: rgba(243, 246, 250, 0.72); }
:root[data-theme="light"] .site-header.scrolled { background: rgba(243, 246, 250, 0.94); }
:root[data-theme="light"] .nav.is-open { background: rgba(255, 255, 255, 0.98); }
:root[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2351607A' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* Avoid a flash by transitioning theme-able surfaces softly */
body, .site-header, .panel, .card, .btn, .course-module, .lesson {
  transition: background-color var(--duration) var(--easing),
              border-color var(--duration) var(--easing),
              color var(--duration) var(--easing);
}
@media (prefers-reduced-motion: reduce) {
  body, .site-header, .panel, .card, .btn, .course-module, .lesson { transition: none; }
}

/* ─── 3. BASE / RESET / TYPOGRAPHY ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient field: faint scanlines + a single soft signal glow up top.
   Cheap, fixed, behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(820px 460px at 84% -10%, rgba(139,92,246,0.14), transparent 60%),
    radial-gradient(760px 480px at 14% 0%, rgba(56,189,248,0.10), transparent 58%),
    radial-gradient(900px 560px at 50% 116%, rgba(77,224,194,0.08), transparent 62%);
  pointer-events: none;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
}
h1 { font-size: clamp(2.25rem, 6vw, var(--fs-2xl)); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 4vw, var(--fs-xl)); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--space-md); }

a { color: var(--signal); text-decoration: none; transition: color var(--duration-fast) var(--easing); }
a:hover { color: var(--ink); }

strong { color: var(--ink); font-weight: 600; }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; color: var(--signal); }
em { color: var(--ink-dim); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-xl) 0; }

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

::selection { background: var(--signal-wash2); color: var(--ink); }

/* Visible, on-brand keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Mono "instrument readout" helper */
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" 1;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  left: -999px; top: 0;
  background: var(--signal); color: var(--on-signal);
  padding: var(--space-sm) var(--space-md);
  z-index: 1000; font-weight: 600;
}
.skip-link:focus { left: var(--space-md); top: var(--space-md); }

/* ─── 4. LAYOUT ──────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.section { padding-block: var(--space-xxxl); }
.section--sm { padding-block: var(--space-xl); }

/* Eyebrow / kicker — small mono label above headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--space-md);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--signal);
}
.eyebrow.on-dark { color: var(--signal); }

/* Section title block */
.section-title { max-width: 720px; margin-bottom: var(--space-xxl); }
.section-title .num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: var(--space-sm);
}
.lead { color: var(--ink-dim); font-size: var(--fs-md); max-width: 60ch; }

/* ─── 5a. HEADER / NAV ───────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 14, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--easing),
              background var(--duration) var(--easing);
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  background: rgba(10, 14, 20, 0.92);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: var(--space-lg);
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.brand:hover { color: var(--ink); }
.brand .mark {
  width: auto; height: 30px;
  flex: none;
  color: var(--signal);
  display: block;
}
.site-footer .brand .mark { height: 26px; }
.brand span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}

.nav { display: flex; align-items: center; gap: var(--space-xs); }
.nav a {
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  position: relative;
  transition: color var(--duration-fast) var(--easing);
}
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--ink); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: var(--space-sm); right: var(--space-sm);
  bottom: 2px; height: 1.5px;
  background: var(--signal);
}
.nav a.nav-cta {
  color: var(--on-signal);
  background: var(--signal);
  font-weight: 600;
  padding-inline: var(--space-md);
}
.nav a.nav-cta:hover { background: var(--signal-deep); color: var(--on-signal); }
.nav a.nav-cta.active::after { display: none; }

.header-right { display: flex; align-items: center; gap: var(--space-xs); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 8px;
  cursor: pointer;
}

.theme-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-dim);
  padding: 7px;
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing);
}
.theme-toggle:hover { color: var(--signal); border-color: var(--signal); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* ─── 5b. FOOTER ─────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-xl);
  margin-top: var(--space-xxxl);
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.site-footer .brand { font-size: 0.9375rem; }
.site-footer a { color: var(--ink-dim); }
.site-footer a:hover { color: var(--signal); }

/* Full multi-column footer */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-xl) var(--space-lg);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-about { max-width: 32ch; }
.footer-about p { color: var(--ink-faint); font-size: var(--fs-xs); margin-top: var(--space-sm); }
.footer-col h4 {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin: 0 0 var(--space-md);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.footer-col a { color: var(--ink-dim); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--signal); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--space-lg);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-md); flex-wrap: wrap;
  color: var(--ink-faint); font-size: var(--fs-xs);
}

/* ─── 5c. BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  padding: 11px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--easing),
              background var(--duration-fast) var(--easing),
              color var(--duration-fast) var(--easing),
              transform var(--duration-fast) var(--easing);
}
.btn:hover { border-color: var(--signal); color: var(--ink); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--signal);
  color: var(--on-signal);
  border-color: var(--signal);
}
.btn--primary:hover {
  background: var(--signal-deep);
  border-color: var(--signal-deep);
  color: var(--on-signal);
}

.btn--ghost { background: transparent; }
.btn--on-dark { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--on-dark:hover { border-color: var(--signal); }

.btn--lg { padding: 14px 26px; font-size: var(--fs-md); }
.btn--sm { padding: 8px 12px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.danger-action {
  color: var(--danger);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}
.danger-action:hover { text-decoration: underline; }

/* ─── 5d. PANELS / CARDS ─────────────────────────────────────────────────── */
.panel, .card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: var(--shadow-panel);
}
.card h2 { font-size: var(--fs-lg); margin-bottom: var(--space-md); }

/* hover bloom for interactive cards */
.panel--link, .hover-bloom {
  transition: border-color var(--duration-fast) var(--easing),
              transform var(--duration) var(--easing);
}
.panel--link:hover, .hover-bloom:hover {
  border-color: var(--signal);
  transform: translateY(-2px);
}

/* badges */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 4px 11px;
  background: var(--bg-panel);
}
.badge--purple, .badge--signal { color: var(--signal); border-color: rgba(77,224,194,0.4); }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* ─── 5e. HERO ───────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(3rem, 9vw, 6.5rem) var(--space-xxxl); overflow: hidden; }
.hero__inner { position: relative; z-index: 2; max-width: 760px; }
.hero h1 { margin-bottom: var(--space-lg); }
.hero .accent { color: var(--signal); }
.hero__lead { color: var(--ink-dim); font-size: var(--fs-md); max-width: 56ch; }
.hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
  margin-top: var(--space-xxl);
  font-size: var(--fs-xs);
  color: var(--ink-dim);
}
.hero__meta strong { color: var(--ink); font-family: var(--font-mono); }

/* The signature signal-in-noise canvas sits behind the hero copy */
.signal-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(115deg, transparent 0%, rgba(0,0,0,0.5) 38%, #000 70%);
          mask-image: linear-gradient(115deg, transparent 0%, rgba(0,0,0,0.5) 38%, #000 70%);
}

/* small reusable divider motif */
.signal-divider {
  position: relative;
  height: 60px;
  margin: var(--space-xl) 0;
}
.signal-divider canvas { width: 100%; height: 100%; display: block; }

/* ─── 5f. GENERIC GRIDS ──────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* Product cards on the homepage */
.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: var(--shadow-panel);
}
.product-card__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--signal);
  margin-bottom: var(--space-sm);
}
.product-card__price {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: var(--fs-md);
  margin-top: var(--space-xs);
}
.product-card__price small { color: var(--ink-dim); font-size: var(--fs-xs); }
.product-card ul { list-style: none; padding: 0; margin: var(--space-sm) 0 var(--space-lg); }
.product-card li {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  font-size: var(--fs-sm); color: var(--ink-dim);
  padding: 5px 0;
}
.product-card li svg { color: var(--signal); flex: none; margin-top: 3px; }
.product-card .btn { margin-top: auto; }

/* Feature / step cards (used by tool + homepage) */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 980px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.step-card .num {
  font-family: var(--font-mono);
  color: var(--signal);
  font-size: var(--fs-sm);
  display: inline-flex;
  width: 30px; height: 30px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}
.step-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-xs); }
.step-card p { font-size: var(--fs-sm); color: var(--ink-dim); margin: 0; }
/* legacy pastel step-card variants collapse to the panel look */
.step-card.is-lavender, .step-card.is-mint, .step-card.is-peach,
.step-card.is-yellow, .step-card.is-sky, .step-card.is-rose { background: var(--bg-panel); }

/* Interaction motion — visible hover feedback on the card surfaces */
.step-card, .format-card {
  transition: transform var(--duration) var(--easing),
              border-color var(--duration-fast) var(--easing),
              box-shadow var(--duration) var(--easing);
}
.step-card:hover, .format-card:hover {
  transform: translateY(-4px);
  border-color: var(--signal);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,0.8), 0 0 0 1px var(--signal-wash);
}
.step-card:hover .num { box-shadow: 0 0 0 5px var(--signal-wash); }
@media (prefers-reduced-motion: reduce) {
  .step-card:hover, .format-card:hover { transform: none; }
}

/* ─── 5g. CONTENT SECTION HEADER (tool + course) ─────────────────────────── */
.content-section__head {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  margin-bottom: var(--space-xl);
}
.content-section__icon {
  flex: none;
  width: 48px; height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--signal);
  display: flex; align-items: center; justify-content: center;
}
.content-section__icon svg { width: 24px; height: 24px; }
.content-section__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--space-xs);
}
.content-section__title { margin: 0 0 var(--space-sm); }
.content-section__desc { color: var(--ink-dim); max-width: 64ch; margin: 0; }

/* ─── 5h. FORMS ──────────────────────────────────────────────────────────── */
label { color: var(--ink); font-size: var(--fs-sm); font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: border-color var(--duration-fast) var(--easing),
              box-shadow var(--duration-fast) var(--easing);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-wash);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A97AB' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.param-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
@media (max-width: 720px) { .param-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.field .hint { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); font-weight: 400; }
.field .help { font-size: var(--fs-xs); color: var(--ink-faint); margin: 2px 0 0; }

/* ─── 5i. META-ANALYSIS TOOL (preserve class/IDs from JS) ─────────────────── */
.tool-hero { position: relative; padding-block: clamp(3rem, 8vw, 5.5rem) var(--space-xxl); overflow: hidden; }
.tool-hero .container { position: relative; z-index: 2; }
.tool-hero h1 { margin-bottom: var(--space-md); }
.tool-hero .accent { color: var(--signal); }
.tool-hero p { color: var(--ink-dim); max-width: 60ch; font-size: var(--fs-md); }
.tool-hero .badges { margin-top: var(--space-lg); }

.tool-form { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-xl); }

.dropzone {
  display: block;
  text-align: center;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--space-xxl);
  cursor: pointer;
  background: var(--bg-void);
  transition: border-color var(--duration-fast) var(--easing), background var(--duration-fast) var(--easing);
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--signal); background: var(--signal-wash); }
.dropzone.has-file { border-style: solid; border-color: var(--signal); }
.dropzone .icon { color: var(--signal); display: inline-flex; }
.dropzone p { margin: var(--space-xs) 0 0; color: var(--ink-dim); }
.dropzone .filename { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--signal); }
.dropzone input[type="file"] { display: none; }

.output-toggles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
@media (max-width: 720px) { .output-toggles { grid-template-columns: 1fr; } }
.toggle {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing);
}
.toggle:hover { border-color: var(--signal); }
.toggle input { width: auto; margin-top: 3px; accent-color: var(--signal); }
.toggle__body { display: flex; flex-direction: column; }
.toggle__body strong { font-size: var(--fs-sm); }
.toggle__hint { font-size: var(--fs-xs); color: var(--ink-faint); }
.toggle--warn { border-color: rgba(240,168,104,0.35); }

.tool-form__actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-xl); }

.status {
  display: none;
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  background: var(--bg-void);
}
.status.is-active { display: block; }
.status.is-info  { border-color: rgba(77,224,194,0.4);  background: var(--signal-wash); color: var(--ink); }
.status.is-ok    { border-color: rgba(77,224,194,0.5);  background: var(--signal-wash); color: var(--ink); }
.status.is-warn  { border-color: rgba(240,168,104,0.4); background: var(--warm-wash);   color: var(--ink); }
.status.is-error { border-color: rgba(240,114,106,0.45);background: var(--danger-wash); color: var(--ink); }

.results { display: none; margin-top: var(--space-xl); }
.results.is-visible { display: block; }
.result-grid { display: grid; gap: var(--space-sm); }
.result-item {
  display: flex; align-items: center; gap: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md);
  background: var(--bg-void);
}
.result-item .ext {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--signal); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px 7px;
}
.result-item .meta { flex: 1; display: flex; flex-direction: column; }
.result-item .meta span { font-size: var(--fs-xs); color: var(--ink-faint); }

/* format guide cards */
.format-guide { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
@media (max-width: 720px) { .format-guide { grid-template-columns: 1fr; } }
.format-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-lg); }
.format-card h4 { margin: var(--space-xs) 0; }
.format-card .desc { font-size: var(--fs-sm); color: var(--ink-dim); }
.format-card .cols { list-style: none; padding: 0; margin: var(--space-sm) 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.format-card .cols li { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--signal); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px 7px; }

.banner-yellow {
  display: flex; gap: var(--space-md);
  background: var(--warm-wash);
  border: 1px solid rgba(240,168,104,0.35);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.banner-yellow .icon { color: var(--signal-warm); flex: none; }
.banner-yellow h3 { font-size: var(--fs-md); margin-bottom: var(--space-xs); }
.banner-yellow p { font-size: var(--fs-sm); color: var(--ink-dim); margin: 0; }

/* spinner */
.spinner {
  display: inline-block; vertical-align: -2px;
  width: 14px; height: 14px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ce-spin 0.8s linear infinite;
}
@keyframes ce-spin { to { transform: rotate(360deg); } }

/* ─── 5j. PLAN BANNERS / GATE CARDS (tool gating) ────────────────────────── */
.plan-banner {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  margin-bottom: var(--space-xl);
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  background: var(--bg-panel);
}
.plan-banner__icon { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.plan-banner__body { flex: 1; min-width: 0; }
.plan-banner strong { display: block; }
.plan-banner span.sub { color: var(--ink-dim); font-size: var(--fs-xs); }
.plan-banner.is-free .plan-banner__icon { color: var(--ink-dim); }
.plan-banner.is-pro { border-color: rgba(77,224,194,0.4); background: var(--signal-wash); }
.plan-banner.is-pro .plan-banner__icon { color: var(--signal); border-color: rgba(77,224,194,0.4); }

.gate-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-xxxl);
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: var(--shadow-panel);
}
.gate-card__icon {
  width: 60px; height: 60px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--signal);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-lg);
}
.gate-card.is-warn .gate-card__icon { color: var(--signal-warm); border-color: rgba(240,168,104,0.4); }
.gate-card h2 { margin-bottom: var(--space-sm); }
.gate-card p { color: var(--ink-dim); margin: 0 auto var(--space-xl); max-width: 460px; }
.gate-card__actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

.countdown {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--signal-warm);
  background: var(--warm-wash);
  border: 1px solid rgba(240,168,104,0.35);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-xl);
}
.gate-loading { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-xxl); color: var(--ink-faint); }
.upgrade-pill {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 4px 12px;
  background: var(--signal); color: var(--on-signal);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 600; text-decoration: none;
}
.upgrade-pill:hover { background: var(--signal-deep); color: var(--on-signal); }

/* ─── 5k. PLAN PILLS / PAYMENTS TABLE (account) ──────────────────────────── */
.plan-pill { display: inline-block; padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--line); }
.plan-pill.is-free { color: var(--ink-dim); }
.plan-pill.is-pro  { color: var(--signal); border-color: rgba(77,224,194,0.45); background: var(--signal-wash); }
.plan-pill.is-cancelled, .plan-pill.is-past_due { color: var(--signal-warm); border-color: rgba(240,168,104,0.4); background: var(--warm-wash); }
.plan-pill.is-owned { color: var(--signal); border-color: rgba(77,224,194,0.45); background: var(--signal-wash); }
.plan-pill.is-locked { color: var(--ink-dim); }

.card__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--line); }
.card__row:last-child { border-bottom: none; }
.card__row__label { color: var(--ink-dim); font-size: var(--fs-sm); }
.card__row__value { font-weight: 600; color: var(--ink); text-align: right; }

.payments-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.payments-table th, .payments-table td { text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); }
.payments-table th { font-family: var(--font-mono); font-weight: 500; color: var(--ink-faint); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.06em; }
.payments-table tbody tr:last-child td { border-bottom: none; }
.pay-status { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid var(--line); }
.pay-status.succeeded { color: var(--signal); }
.pay-status.refunded  { color: var(--signal-warm); }
.pay-status.failed    { color: var(--danger); }
.empty-row { padding: var(--space-xl); text-align: center; color: var(--ink-faint); font-size: var(--fs-sm); }

/* ─── 5l. MODAL ──────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(5, 8, 12, 0.72);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100; padding: var(--space-md);
}
.modal-backdrop.is-open { display: flex; }
.modal {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 480px; width: 100%;
  padding: var(--space-xl);
  box-shadow: var(--shadow-lift);
}
.modal h2 { font-size: var(--fs-lg); margin-bottom: var(--space-sm); }
.modal p { color: var(--ink-dim); margin-bottom: var(--space-lg); }
.modal-reasons { display: grid; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.modal-reason { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color var(--duration-fast) var(--easing); }
.modal-reason:hover { border-color: var(--signal); }
.modal-reason input { width: auto; accent-color: var(--signal); }
.modal-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; flex-wrap: wrap; }

/* ─── 5m. AUTH PAGES ─────────────────────────────────────────────────────── */
.auth-shell { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 68px); padding: var(--space-xl) var(--space-lg); }
.auth-card { width: 100%; max-width: 420px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-xxl); box-shadow: var(--shadow-panel); }
.auth-card h1 { font-size: var(--fs-xl); }
.auth-card .auth-sub { color: var(--ink-dim); margin-bottom: var(--space-xl); }
.auth-field { display: block; margin-bottom: var(--space-lg); }
.auth-field span { display: block; margin-bottom: var(--space-xs); font-size: var(--fs-sm); color: var(--ink); }
.auth-msg { margin-top: var(--space-md); font-size: var(--fs-sm); min-height: 1.4em; color: var(--ink-dim); }
.auth-msg.is-ok { color: var(--signal); }
.auth-msg.is-error { color: var(--danger); }
.auth-links { margin-top: var(--space-lg); font-size: var(--fs-sm); color: var(--ink-dim); display: flex; flex-direction: column; gap: var(--space-xs); }

/* ─── 5n. LONG-FORM PROSE (legal / info pages) ───────────────────────────── */
.prose { max-width: 760px; }
.prose h2 { font-size: var(--fs-lg); margin: var(--space-xl) 0 var(--space-sm); }
.prose h3 { font-size: var(--fs-md); margin: var(--space-lg) 0 var(--space-xs); }
.prose p, .prose li { color: var(--ink-dim); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--space-md); }
.prose li { margin-bottom: var(--space-xs); }
.prose .updated { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* ─── 5o. AURORA GLASS (gradient accents + frosted glass) ────────────────────
   Teal → cyan → violet gradient on key accents; translucent blurred panels over
   the aurora ambient. Buttons stay solid teal for AA; the gradient lives on
   headlines, borders, glows, and dividers. */

/* Gradient headline accent */
.gradient-text, .hero .accent {
  background: var(--aurora);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* The eyebrow tick becomes an aurora line */
.eyebrow::before { background: var(--aurora); }

/* Frosted-glass surfaces */
.panel, .card, .product-card, .step-card, .format-card,
.gate-card, .auth-card, .modal, .plan-banner {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
}

/* Aurora glow on interaction */
.btn--primary { box-shadow: 0 6px 22px -12px var(--glow-teal); }
.btn--primary:hover { box-shadow: 0 10px 30px -8px var(--glow-violet); }
.product-card:hover, .hover-bloom:hover, .step-card:hover, .format-card:hover {
  box-shadow: 0 22px 50px -28px rgba(0,0,0,0.7), 0 0 30px -10px var(--glow-violet);
}

/* Gradient border utility (featured cards / banners) */
.aurora-border {
  position: relative;
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--bg-panel), var(--bg-panel)) padding-box,
    var(--aurora) border-box;
  box-shadow: 0 0 40px -16px var(--glow-violet);
}
.aurora-border::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--aurora);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.7; pointer-events: none;
}

/* Aurora-tinted divider motif container */
.signal-divider { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover { box-shadow: 0 6px 22px -12px var(--glow-teal); }
}

/* ─── 5p. EXPLAINER VIDEO (tool page) ────────────────────────────────────── */
.video-explainer {
  max-width: 900px; margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}
.video-explainer iframe, .video-explainer video { width: 100%; height: 100%; border: 0; display: block; }
.video-explainer__placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-xs); text-align: center; padding: var(--space-xl);
  background:
    radial-gradient(120% 140% at 50% -20%, var(--signal-wash2), transparent 55%),
    linear-gradient(160deg, var(--bg-panel), var(--bg-void));
}
.video-explainer__placeholder p { margin: 0; color: var(--ink); }
.video-explainer__play {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--signal); color: var(--on-signal);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-sm);
  box-shadow: 0 0 0 9px var(--signal-wash), 0 0 40px -6px var(--glow-violet);
}
.video-explainer__play svg { width: 26px; height: 26px; margin-left: 3px; }
.video-explainer__hint { color: var(--ink-faint) !important; font-size: var(--fs-xs); max-width: 46ch; }

/* ─── 6. MOTION (scroll reveal) ──────────────────────────────────────────── */
.reveal, .reveal-stagger > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration) var(--easing), transform var(--duration) var(--easing);
  will-change: opacity, transform;
}
.reveal.is-visible, .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .spinner { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ─── RESPONSIVE NAV ─────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-void);
    border-bottom: 1px solid var(--line);
    padding: var(--space-sm);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: var(--space-md); border-radius: var(--radius); }
  .nav a.active::after { display: none; }
  .nav a.nav-cta { text-align: center; margin-top: var(--space-xs); }
}