/* ════════════════════════════════════════════
   MONARCH DESIGN SYSTEM v1
   Tokens for colors, type, spacing, motion.
   ════════════════════════════════════════════ */
:root {
  /* === BASE === */
  --m-cream:    #FAF8F3;
  --m-paper:    #F5F1E8;
  --m-ink:      #1A1A1A;
  --m-ink-soft: #2A2A2A;
  --m-graphite: #4A4A4A;
  --m-stone:    #6B6B6B;
  --m-mist:     #9A9A9A;
  --m-hairline: rgba(26, 26, 26, 0.08);

  /* === SIGNATURE PAIR === */
  --m-sun:      #FFE08A;
  --m-sun-deep: #5C3D00;

  /* === PASTEL FILLS + MATCHING DEEP TEXT === */
  --m-mint:     #B8E6C8; --m-mint-deep:     #0F3D22;
  --m-peach:    #FFD8C9; --m-peach-deep:    #712B13;
  --m-sky:      #C7E8FF; --m-sky-deep:      #0C447C;
  --m-lavender: #D9C9F2; --m-lavender-deep: #3C3489;
  --m-rose:     #FF9FB8; --m-rose-deep:     #72243E;
  --m-accent:   #A5D6FB;
  --m-blush:    #FFC9D6; --m-blush-deep:    #8C1F3D;
  --m-butter:   #FFE08A; --m-butter-deep:   #633806;
  --m-sage:     #D4E8C5; --m-sage-deep:     #2D5016;
  --m-coral:    #FFB89B; --m-coral-deep:    #993C1D;

  /* === SEMANTIC === */
  --m-success:    #6FC78A;
  --m-success-bg: #DDF0E0;

  /* === RADII === */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 24px; --r-pill: 999px;

  /* === SHADOWS === */
  --shadow-soft: 0 4px 12px rgba(26, 26, 26, 0.04);
  --shadow-card: 0 8px 24px rgba(26, 26, 26, 0.06);
  --shadow-lift: 0 16px 40px rgba(26, 26, 26, 0.08);

  /* === MOTION === */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 180ms;
  --t-med:  320ms;
  --t-slow: 480ms;
}

/* ════════════════════════════════════════════
   RESET + GLOBAL BASE
   ════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--m-cream);
  color: var(--m-ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
@media (prefers-color-scheme: dark) {
  html, body { background: var(--m-cream); color: var(--m-ink); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body.locked { overflow: hidden; }
/* Freeze the page behind the open mobile sheet — nothing tappable/selectable except the sheet */
body.sheet-open .page > *:not(.nav):not(.sheet) {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
body.sheet-open .nav .nav-links,
body.sheet-open .nav .nav-right { pointer-events: none; }
/* Feature popover interactivity is driven purely by [aria-hidden] (see .feature-pop
   rules) so it releases clicks the instant it closes, even mid fade-out. */
/* The subject modal must stay interactive/scrollable while the page is frozen */
body.sheet-open .subj-modal { pointer-events: auto; }
body.sheet-open .subj-modal * { pointer-events: auto; }

img, svg { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
}
/* Large screens: let content breathe instead of sitting in a narrow 1200 box */
@media (min-width: 1600px) { .container { max-width: 1320px; } }
@media (min-width: 2100px) { .container { max-width: 1440px; } }

/* ════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════ */
.h-hero {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(48px, 8vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--m-ink);
  margin: 0;
  text-wrap: balance;
}
.h-section {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--m-ink);
  margin: 0;
  text-wrap: balance;
}
.h-feature {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.body, p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--m-graphite);
  margin: 0;
}
.body-lg {
  font-size: 18px;
  line-height: 1.5;
  color: var(--m-graphite);
}
.eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--m-stone);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--m-stone);
}

/* ════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════ */
.btn-primary {
  background: var(--m-ink);
  color: var(--m-sun);
  border: none;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.18);
}
.btn-primary .arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}
.btn-primary:hover .arrow { transform: translateX(3px); }
.nav-cta-dashboard:hover, .subj-missing .btn-primary:hover { transform: none; }
}

.btn-secondary {
  background: transparent;
  color: var(--m-ink);
  border: 1.5px solid var(--m-ink);
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
.btn-secondary:hover { background: var(--m-ink); color: var(--m-cream); }
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--m-ink);
  padding: 8px 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.btn-ghost::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 0; right: 100%;
  height: 1.5px;
  background: var(--m-ink);
  transition: right var(--t-med) var(--ease);
}
.btn-ghost:hover::after { right: 0; }


/* ════════════════════════════════════════════
   BRAND LOGO SYSTEM
   ════════════════════════════════════════════ */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}
.brand-logo .brand-mark {
  background: var(--m-ink);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
}
.brand-crown {
  color: var(--m-accent);
  width: 22px;
  height: 22px;
  display: block;
}
.brand-text {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.brand-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--m-ink);
  line-height: 1;
  letter-spacing: -0.01em;
}
.brand-logo .brand-motto {
  font-size: 14px;
  font-weight: 500;
  color: var(--m-graphite);
  line-height: 1.2;
  letter-spacing: 0;
}
.brand-logo.is-small .brand-mark  { width: 36px; height: 36px; }
.brand-logo.is-small .brand-crown { width: 18px; height: 18px; }
.brand-logo.is-small .brand-name  { font-size: 16px; }
.brand-logo.is-small .brand-motto { font-size: 12px; }
.brand-logo.is-large .brand-mark  { width: 56px; height: 56px; border-radius: 14px; }
.brand-logo.is-large .brand-crown { width: 28px; height: 28px; }
.brand-logo.is-large .brand-name  { font-size: 24px; }
.brand-logo.is-large .brand-motto { font-size: 16px; }
.brand-logo.is-on-dark .brand-name  { color: var(--m-cream); }
.brand-logo.is-on-dark .brand-motto { color: var(--m-accent); }
.brand-logo.is-on-dark .brand-mark  { background: var(--m-cream); }
.brand-logo.is-on-dark .brand-crown { color: var(--m-ink); }
.brand-logo.is-compact .brand-motto { display: none; }
@media (max-width: 640px) {
  .nav .brand-logo .brand-motto { display: none; }
}

/* ════════════════════════════════════════════
   ANNOUNCEMENT BAR
   ════════════════════════════════════════════ */
.announce {
  background: var(--m-mint);
  color: var(--m-mint-deep);
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.announce a {
  color: var(--m-mint-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
  font-weight: 500;
}
.announce-spark { font-size: 14px; }
.announce { position: relative; padding-right: 44px; padding-left: 44px; }
@media (max-width: 600px) {
  .announce { font-size: 12px; gap: 6px; padding: 9px 40px; }
  .announce-spark { display: none; }
}
.announce-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--m-mint-deep);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  opacity: 0.65;
  transition: opacity 180ms ease;
}
.announce-close:hover { opacity: 1; }

/* ════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════ */
.nav {
  background: rgba(250, 248, 243, 0.85);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--m-hairline);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-links {
  display: flex;
  gap: 28px;
}
.nav-links a {
  color: var(--m-graphite);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  padding: 8px 0;
  transition: color var(--t-fast) var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 0; right: 100%;
  height: 1.5px;
  background: var(--m-ink);
  transition: right var(--t-med) var(--ease);
}
.nav-links a:hover { color: var(--m-ink); }
.nav-links a:hover::after { right: 0; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-right .btn-primary {
  padding: 9px 16px;
  font-size: 13px;
}
.nav-right .btn-primary .arrow { font-size: 12px; }

.hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--m-hairline);
  border-radius: 10px;
  width: 42px; height: 42px;
  padding: 9px;
  cursor: pointer;
  color: var(--m-ink);
  align-items: center;
  justify-content: center;
}
.hamburger svg { width: 22px; height: 22px; display: block; overflow: visible; }
.ham-svg .ham-line { stroke-dasharray: 1; }
.ham-svg .ham-x { display: none; }
.hamburger[aria-expanded="true"] .ham-svg .ham-line { opacity: 1; transition: opacity 200ms ease-out 0ms; }
.hamburger[aria-expanded="false"] .ham-svg .ham-line { opacity: 1; transition: opacity 200ms ease-out 0ms; }

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-right .signin-pill, .nav-right .nav-cta-desktop, .nav-right .nav-cta-dashboard { display: none; }
  .hamburger { display: inline-flex; }
}

/* ════════════════════════════════════════════
   MOBILE SHEET
   ════════════════════════════════════════════ */
.sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--m-cream);
  z-index: 200;
  transform: translateY(-100%);
  transition: transform 480ms var(--ease);
  display: flex;
  flex-direction: column;
  padding: 16px 20px 24px;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 16px 40px rgba(26, 26, 26, 0.12);
  visibility: hidden;
  max-height: 88vh;
  overflow-y: auto;
}
.sheet[aria-hidden="false"] {
  transform: translateY(0);
  visibility: visible;
}
.sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.sheet-top .btn-ghost { font-size: 13px; }
.sheet-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sheet-links a {
  position: relative;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--m-ink);
  text-decoration: none;
  padding: 11px 0;
  border-bottom: 1px solid var(--m-hairline);
}
.sheet-links a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 100%;
  height: 1.5px;
  background: var(--m-ink);
  transition: right var(--t-med) var(--ease);
}
.sheet-links a:hover::after,
.sheet-links a:focus-visible::after,
.sheet-links a:active::after { right: 0; }
.sheet-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.sheet-bottom .signin-pill {
  color: var(--m-graphite);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 9px;
}
.sheet-bottom .btn-primary {
  justify-content: center;
  padding: 11px 20px;
  font-size: 14px;
}

/* ════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════ */
.hero {
  padding: 80px 0 32px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 64px; }
}
@media (max-width: 600px) {
  .hero { padding: 40px 0 48px; }
  .hero-grid { gap: 36px; }
  .h-hero { font-size: clamp(44px, 13.5vw, 60px); }
  .hero-sub { font-size: 16px; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary { width: 100%; justify-content: center; }
  .hero-right { max-width: 100%; margin-top: 4px; }
  .hero-right .float-card { width: min(312px, 86vw); padding: 22px; }
  .hero-right .float-plan { width: min(288px, 80vw); right: 4px; }
  .hero-right .float-tutor { top: 232px; }
  .hero-right .float-grade { font-size: 52px; }
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--m-butter);
  color: var(--m-butter-deep);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 28px;
  text-transform: none;
  letter-spacing: 0;
}
.hero-tag-dot {
  width: 6px; height: 6px;
  background: var(--m-butter-deep);
  border-radius: 50%;
}
.hero-motto {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  color: #72243E;
  margin: 24px 0 20px;
  line-height: 1.2;
}
.h-hero .highlight {
  background: var(--m-rose);
  color: var(--m-rose-deep);
  padding: 0 12px;
  border-radius: 10px;
  display: inline-block;
  transform: rotate(-1.2deg);
  font-style: normal;
  font-weight: 600;
}

/* In-brand toast (replaces native alert) */
.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--m-ink);
  color: var(--m-cream);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  max-width: 88vw;
}
.toast.is-in { opacity: 1; transform: translateY(0) scale(1); }
.toast::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--m-sun);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 160ms linear; transform: none; }
  .toast.is-in { transform: none; }
}
.hero-sub {
  margin: 20px 0 28px;
  max-width: 520px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.hero-fine { color: var(--m-stone); }
.exam-urgency {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--m-coral);
  color: var(--m-coral-deep);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 28px;
}
.hero-tags .hero-tag { margin-bottom: 0; }
.exam-urgency-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--m-coral-deep);
  flex-shrink: 0;
  animation: urgPulse 1.6s ease-in-out infinite;
}
.exam-urgency-num { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 15px; }
.exam-line-wheel {
  display: inline-block;
  height: 1.3em;
  line-height: 1.3em;
  overflow: hidden;
  vertical-align: bottom;
}
.exam-line-track {
  display: block;
  will-change: transform;
}
.exam-line-track > span {
  display: block;
  height: 1.3em;
  line-height: 1.3em;
  white-space: nowrap;
}
.exam-line-track > span .exam-urgency-num {
  display: inline;
  font-size: 14px;
}
@keyframes urgPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) { .exam-urgency-dot { animation: none; } }

/* === Floating product cards === */
.hero-right {
  position: relative;
  min-height: 430px;
}
@media (max-width: 980px) {
  .hero-right { min-height: 460px; width: min(500px, 100%); margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .hero-right { min-height: 580px; }
  .float-tutor { top: 232px; }
}
.float-card {
  position: absolute;
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow: var(--shadow-card);
  width: 280px;
}
.float-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 12px;
}
.float-pill {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 500;
}

/* Prediction card · sky */
.float-prediction {
  top: 0; right: 0;
  background: var(--m-sky);
  color: var(--m-sky-deep);
  transform: rotate(2deg);
  animation: floatA 8s ease-in-out infinite;
}
.float-prediction .float-pill {
  background: var(--m-sky-deep);
  color: var(--m-sky);
}
.float-label { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.float-grade {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.float-spark { width: 100%; height: 60px; display: block; }

/* Tutor card · peach */
.float-tutor {
  top: 130px; left: 0;
  background: var(--m-peach);
  color: var(--m-peach-deep);
  transform: rotate(-3deg);
  width: 280px;
  animation: floatB 9s ease-in-out infinite;
}
.float-time { opacity: 0.6; font-weight: 400; }
.float-bubble {
  background: rgba(255, 255, 255, 0.55);
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.4;
  font-weight: 500;
}
.float-reply {
  font-size: 12px;
  line-height: 1.5;
  padding: 0 4px;
  opacity: 0.92;
}

/* Plan card · lavender */
.float-plan {
  bottom: 0; right: 24px;
  background: var(--m-lavender);
  color: var(--m-lavender-deep);
  transform: rotate(2.5deg);
  width: 260px;
  animation: floatC 7s ease-in-out infinite;
}
.float-plan .float-pill {
  background: var(--m-lavender-deep);
  color: var(--m-lavender);
}
.float-bars {
  display: flex;
  gap: 4px;
  align-items: end;
  height: 60px;
  margin-bottom: 8px;
}
.float-bars div {
  flex: 1;
  background: rgba(60, 52, 137, 0.32);
  border-radius: 4px;
  min-height: 8px;
}
.float-bars .active {
  background: var(--m-lavender-deep);
}
.float-days {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 500;
  padding: 0 2px;
}

@keyframes floatA {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-8px); }
}
@keyframes floatB {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-6px); }
}
@keyframes floatC {
  0%, 100% { transform: rotate(2.5deg) translateY(0); }
  50%      { transform: rotate(2.5deg) translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .float-card { animation: none !important; }
}

/* Clickable hero cards + Apple-style expand affordance */
.float-card[role="button"] { cursor: pointer; }
.float-card { transition: box-shadow 240ms var(--ease), transform 140ms var(--ease); }
.float-card.is-hovering {
  animation-play-state: paused;
  box-shadow: 0 26px 60px rgba(26, 26, 26, 0.20);
  z-index: 5;
}
.float-card .float-expand { display: none; }

/* Contextual action label revealed on hover */
.float-cta {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(calc(50% + 6px));
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  opacity: 0;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(26,26,26,0.08);
}
.float-card.is-hovering .float-cta { opacity: 1; transform: translateX(-50%) translateY(50%); }
.float-cta { background: #FFFFFF; }
/* Half outline: only on the part of the pill hanging off the card, in the card's colour */
.float-cta::before {
  content: '';
  position: absolute;
  inset: -3.5px;
  border-radius: var(--r-pill);
  border: 3.5px solid var(--cta-outline, var(--m-ink));
  clip-path: inset(50% 0 0 0);
  pointer-events: none;
}
.float-prediction { --cta-outline: var(--m-sky); }
.float-tutor { --cta-outline: var(--m-peach); }
.float-plan { --cta-outline: var(--m-lavender); }
/* Touch devices: no hover state — the CTA label is always shown */
.float-card.is-touch .float-cta { opacity: 1 !important; transform: translateX(-50%) translateY(50%) !important; }
.float-card.is-touch::after { animation: none !important; opacity: 0 !important; }

/* "Start here" resting pulse ring on the prediction card */
.float-prediction::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: calc(var(--r-xl) + 5px);
  border: 2px solid var(--m-sky-deep);
  opacity: 0;
  pointer-events: none;
  animation: restPulse 2.8s ease-in-out infinite;
}
.float-prediction.is-hovering::after { animation: none; opacity: 0; }
@keyframes restPulse {
  0%, 100% { opacity: 0; transform: scale(0.985); }
  50%      { opacity: 0.32; transform: scale(1); }
}

/* Content reacts: plan bars grow on hover */
.float-card.is-hovering .float-bars div {
  animation: barGrow 560ms var(--ease) both;
  transform-origin: bottom;
}
@keyframes barGrow { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .float-prediction::after { animation: none; }
  .float-card.is-hovering { transform: none !important; }
  .float-card.is-hovering .float-bars div { animation: none; }
}
.float-card .float-expand {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  pointer-events: none;
}
.float-prediction .float-expand { top: auto; bottom: 14px; }
.float-card .float-expand svg { width: 13px; height: 13px; }
.float-card[role="button"]:hover .float-expand,
.float-card[role="button"]:focus-visible .float-expand {
  opacity: 0.9;
  transform: scale(1);
}
.float-card[role="button"]:focus-visible {
  outline: 2px solid var(--m-ink);
  outline-offset: 3px;
}

/* Feature detail popover */
.feature-pop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  /* No opacity fade on the wrapper — an animating ancestor opacity suspends the
     backdrop-filter on the child, making the blur snap instead of ramp. Toggle
     visibility only; the card and backdrop each run their own entrance. */
  pointer-events: none;
  transition: visibility 0s linear 580ms;
}
.feature-pop[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}
.feature-pop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 300ms var(--ease), backdrop-filter 300ms var(--ease), -webkit-backdrop-filter 300ms var(--ease);
}
.feature-pop[aria-hidden="false"] .feature-pop-backdrop {
  background: rgba(26, 26, 26, 0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.feature-pop-card {
  position: relative;
  background: var(--m-cream);
  border-radius: var(--r-2xl);
  padding: 0;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  max-height: calc(100dvh - 48px);
  transform: translateY(24px) scale(0.92);
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms var(--ease);
  text-align: left;
}
.feature-pop[aria-hidden="false"] .feature-pop-card { transform: translateY(0) scale(1); opacity: 1; }
/* The card clips to its radius; the inner wrapper scrolls so the scrollbar is clipped at the rounded corners */
.feature-pop-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100dvh - 48px);
  padding: 0 36px 36px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(26,26,26,0.24) transparent;
}
.feature-pop-scroll::-webkit-scrollbar { width: 11px; }
.feature-pop-scroll::-webkit-scrollbar-track { background: transparent; margin: 18px 0; }
.feature-pop-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(26,26,26,0.20);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.feature-pop-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(26,26,26,0.32); }
/* Bespoke feature header — a mix of the live card + its descriptor */
.feature-pop-visual {
  margin: 0 -36px 24px;
  padding: 28px 32px 26px;
  position: relative;
}
.feature-pop-visual .fpv-row:first-child { padding-right: 40px; }
.fpv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
}
.fpv-pill { padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; }
.fpv-time { opacity: 0.6; font-weight: 400; }
.fpv-label { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.fpv-grade { font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; margin-bottom: 10px; transition: transform 240ms var(--ease), opacity 320ms var(--ease); }
.fpv-grade-pending { opacity: 0.2; }
.fpv-grade.fpv-grade-pop { animation: fpvGradePop 480ms cubic-bezier(0.16,1,0.3,1); }
@keyframes fpvGradePop { 0%{ transform: scale(1) } 45%{ transform: scale(1.16) } 100%{ transform: scale(1) } }
.fpv-spark { width: 100%; height: 46px; display: block; }
.fpv-spark path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: fpvDraw 1300ms 1200ms cubic-bezier(0.16,1,0.3,1) forwards; }
.fpv-spark circle { opacity: 0; animation: fpvDot 320ms 2400ms ease forwards; }
@keyframes fpvDraw { to { stroke-dashoffset: 0; } }
@keyframes fpvDot { to { opacity: 1; } }
.fpv-bubble {
  background: rgba(255,255,255,0.6);
  padding: 11px 13px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.4;
}
.fpv-reply { font-size: 13px; line-height: 1.5; opacity: 0.9; }
.fpv-bars { display: flex; gap: 5px; align-items: end; height: 64px; margin-bottom: 10px; }
.fpv-bars i { flex: 1; border-radius: 4px; min-height: 8px; display: block; transform-origin: bottom; transform: scaleY(0.06); transition: transform 420ms cubic-bezier(0.16,1,0.3,1); }
.fpv-bars i.up { transform: scaleY(1); }
.fpv-bars i.win { box-shadow: 0 0 0 3px rgba(60,52,137,0.18); animation: fpvWin 600ms ease; }
@keyframes fpvWin { 0%{ transform: scaleY(1) } 40%{ transform: scaleY(1.12) } 100%{ transform: scaleY(1) } }
@keyframes fpvBar { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
.fpv-days { display: flex; justify-content: space-between; font-size: 11px; font-weight: 500; }

/* Prediction stats layout */
.fpv-gradewrap { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.fpv-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  background: var(--m-success-bg);
  color: var(--m-mint-deep);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.fpv-delta.in { opacity: 1; transform: translateY(0); }
.fpv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fpv-stat { background: rgba(255,255,255,0.42); border-radius: 12px; padding: 13px 12px; }
.fpv-stat strong { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.fpv-stat strong span { font-size: 14px; opacity: 0.65; }
.fpv-stat-l { font-size: 11px; opacity: 0.62; margin-top: 6px; display: block; }

/* Tutor chat sequence */
.fpv-chat { display: flex; flex-direction: column; gap: 8px; min-height: 132px; }
.fpv-msg { padding: 9px 12px; border-radius: 15px; font-size: 13px; line-height: 1.42; max-width: 86%; }
.fpv-msg-q {
  align-self: flex-end;
  background: var(--m-peach-deep);
  color: var(--m-peach);
  border-bottom-right-radius: 5px;
  font-weight: 500;
}
.fpv-msg-a {
  align-self: flex-start;
  background: rgba(255,255,255,0.72);
  color: inherit;
  border-bottom-left-radius: 5px;
}
.fpv-msg-enter { opacity: 0; transform: translateY(8px); animation: fpvMsgIn 320ms cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes fpvMsgIn { to { opacity: 1; transform: translateY(0); } }
.fpv-think { display: inline-flex; gap: 4px; align-items: center; padding: 11px 13px; }
.fpv-think i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: fpvThink 1s ease-in-out infinite; }
.fpv-think i:nth-child(2) { animation-delay: 0.15s; }
.fpv-think i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fpvThink { 0%,100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 0.85; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .fpv-spark path { animation: none; stroke-dashoffset: 0; }
  .fpv-spark circle { animation: none; opacity: 1; }
  .fpv-bars i { animation: none; }
}

/* Marking sequence (English essay) */
.fpv-essay {
  background: var(--m-cream);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--m-ink);
  min-height: 178px;
  margin-bottom: 12px;
}
.fpv-essay .cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--m-peach-deep);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: fpvCaret 0.9s step-end infinite;
}
@keyframes fpvCaret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.fpv-essay mark {
  background: linear-gradient(var(--m-accent), var(--m-accent)) no-repeat;
  background-size: 0% 78%;
  background-position: 0 62%;
  color: inherit;
  padding: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 560ms ease;
}
.fpv-essay mark.lit { background-size: 100% 78%; }
.fpv-essay del {
  text-decoration: none;
  color: inherit;
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 0% 1.5px;
  background-position: 0 58%;
  transition: background-size 520ms ease, opacity 520ms ease;
}
.fpv-essay del.lit { background-size: 100% 1.5px; opacity: 0.48; }
/* Lined-answer layout: continuous prose with a gutter number per VISUAL line */
.fpv-paper {
  position: relative;
  display: flex; gap: 0; align-items: flex-start;
  --fpv-lh: 24px;
  min-height: 168px;
  /* faint ruled lines on the 24px writing grid */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent calc(var(--fpv-lh) - 1px),
    rgba(96,124,168,0.20) calc(var(--fpv-lh) - 1px), rgba(96,124,168,0.20) var(--fpv-lh)
  );
}
/* red book margin between the line numbers and the writing */
.fpv-paper::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 33px;
  width: 1.5px;
  background: rgba(206,86,86,0.5);
}
.fpv-gutter { display: flex; flex-direction: column; flex-shrink: 0; width: 24px; position: relative; }
.fpv-gutter span {
  height: var(--fpv-lh); line-height: var(--fpv-lh);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--m-stone); opacity: 0.5;
  text-align: right; width: 100%;
  -webkit-user-select: none; user-select: none;
}
.fpv-prose { flex: 1 1 auto; min-width: 0; line-height: var(--fpv-lh); padding-left: 20px; position: relative; }
.fpv-prose .flag {
  background: linear-gradient(var(--flag-c, transparent), var(--flag-c, transparent)) no-repeat;
  background-size: 0% 82%;
  background-position: 0 90%;
  border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size 520ms ease;
}
.fpv-prose .flag.lit { background-size: 100% 82%; }
.fpv-prose .flag.ao2 { --flag-c: rgba(255,224,138,0.55); }
.fpv-prose .flag.ao4 { --flag-c: rgba(255,159,184,0.45); }
.fpv-count { margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--m-stone); text-align: right; letter-spacing: 0.02em; }
.fpv-ao-ref { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; opacity: 0.75; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: rgba(26,26,26,0.07); white-space: nowrap; }
.fpv-mark-wrap { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.fpv-mark-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--m-peach-deep);
  color: var(--m-peach);
  border: none;
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease), filter 160ms var(--ease);
  pointer-events: none;
}
.fpv-mark-btn.in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fpv-mark-btn:hover:not(:disabled) { filter: brightness(1.08); }
.fpv-mark-btn:disabled { cursor: default; opacity: 0.75; }
.fpv-mark-btn .spin {
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: fpvSpin 0.7s linear infinite;
}
@keyframes fpvSpin { to { transform: rotate(360deg); } }
.fpv-result {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 460ms cubic-bezier(0.16,1,0.3,1), opacity 360ms var(--ease), margin-top 460ms var(--ease);
  margin-top: 0;
}
.fpv-result.in { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
.fpv-result-inner { overflow: hidden; }
/* AO breakdown — loads one by one */
.fpv-ao-list {
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 16px;
  border-top: 1px solid rgba(113,43,19,0.18);
}
.fpv-ao {
  display: flex; align-items: center; gap: 11px;
  font-size: 12.5px;
  opacity: 0; transform: translateY(7px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.fpv-ao.show { opacity: 1; transform: none; }
.fpv-ao-tick {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--m-mint); color: var(--m-mint-deep);
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  transform: scale(0.4);
  transition: transform 340ms cubic-bezier(0.34,1.5,0.5,1);
}
.fpv-ao.show .fpv-ao-tick { transform: scale(1); }
/* full tick draws an SVG checkmark (.fpv-tick-svg); partial/fail use glyphs below */
.fpv-tick-svg { width: 12px; height: 12px; display: block; }
.fpv-tick-svg path { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.fpv-ao.show .fpv-tick-svg path { animation: fpvTickDraw 360ms 160ms cubic-bezier(0.65,0,0.35,1) forwards; }
@keyframes fpvTickDraw { to { stroke-dashoffset: 0; } }
.fpv-ao-tick.partial { background: var(--m-sun); color: var(--m-butter-deep); }
.fpv-ao-tick.partial::after { content: '~'; }
.fpv-ao-tick.fail { background: var(--m-blush); color: var(--m-blush-deep); }
.fpv-ao-tick.fail::after { content: '\2715'; }
.fpv-ao-code { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; width: 30px; flex-shrink: 0; }
.fpv-ao-desc { flex: 1; opacity: 0.82; }
.fpv-score-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px;
  opacity: 0; transform: translateY(7px);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
.fpv-score-row.show { opacity: 1; transform: none; }
.fpv-score-num { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.fpv-score-den { font-family: 'JetBrains Mono', monospace; font-size: 13px; opacity: 0.6; margin-left: 2px; }
.fpv-band { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; padding: 4px 12px; background: var(--m-peach-deep); color: var(--m-peach); border-radius: var(--r-pill); opacity: 0; transform: translateY(4px); transition: opacity 340ms var(--ease), transform 340ms var(--ease); }
.fpv-band.show { opacity: 1; transform: none; }
.fpv-status { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.fpv-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--m-stone); display: inline-block; }
.fpv-status.marking i { background: var(--m-butter-deep); animation: fpvThink 1s ease-in-out infinite; }
.fpv-status.done i { background: var(--m-mint-deep); }
.feature-pop-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--m-cream);
  color: var(--m-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(26,26,26,0.16);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.feature-pop-close:hover { background: #fff; transform: scale(1.08); }
.feature-pop-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-stone);
  display: block;
  margin-bottom: 10px;
}
.feature-pop-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--m-ink);
  margin: 0 0 12px;
  line-height: 1.1;
}
.feature-pop-desc {
  font-size: 17px;
  line-height: 1.65;
  color: var(--m-graphite);
  margin: 0;
  max-height: 30vh;
  overflow-y: auto;
}
/* Wider, slower popover for the horizontal marking demo */
.feature-pop-card.is-wide {
  max-width: 680px;
  /* Fixed cap so the marking results scroll inside the card instead of growing it (and the page) on tall screens */
  max-height: min(86vh, 720px);
  transition: transform 580ms cubic-bezier(0.16,1,0.3,1), opacity 460ms var(--ease);
}
.feature-pop-card.is-wide .feature-pop-scroll { max-height: min(86vh, 720px); }
@media (prefers-reduced-motion: reduce) {
  .feature-pop-card { transition: none; transform: none; }
  .feature-pop[aria-hidden="false"] .feature-pop-card { transform: none; }
}

/* ════════════════════════════════════════════
   TRUST STRIP
   ════════════════════════════════════════════ */
.trust-strip {
  background: var(--m-ink);
  color: var(--m-mist);
  padding: 18px 0;
}
.trust-strip-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.trust-codes { color: var(--m-mist); }
.trust-stats { color: var(--m-sun); }
@media (max-width: 720px) {
  .trust-strip-inner { justify-content: center; text-align: center; }
}

/* ════════════════════════════════════════════
   FEATURE HERO (combined AI tutor + AI marking)
   ════════════════════════════════════════════ */
.feature-hero-wrap { padding: 48px 0 96px; scroll-margin-top: 88px; }
.feature-hero {
  background: var(--m-peach);
  color: var(--m-peach-deep);
  border-radius: var(--r-2xl);
  padding: 72px 56px;
  text-align: center;
}
.feature-hero .eyebrow { color: var(--m-peach-deep); justify-content: center; }
.feature-hero .h-section {
  color: var(--m-peach-deep);
  max-width: 720px;
  margin: 16px auto 20px;
}
.feature-hero .body-lg {
  color: var(--m-peach-deep);
  opacity: 0.86;
  max-width: 640px;
  margin: 0 auto 48px;
}
.feature-hero-mock {
  background: var(--m-cream);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift);
  text-align: left;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.feature-hero-mock[role="button"] {
  cursor: pointer;
  transition: box-shadow 240ms var(--ease);
}
.feature-hero-mock[role="button"]:hover,
.feature-hero-mock[role="button"]:focus-visible {
  outline: none;
}
/* Glow ring that emerges from the edge — same mechanic as the prediction card */
.feature-hero-mock[role="button"]::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--r-xl) + 6px);
  border: 2px solid var(--m-peach-deep);
  opacity: 0;
  pointer-events: none;
  animation: markEmerge 2.8s ease-in-out infinite;
}
.feature-hero-mock[role="button"]:hover::after,
.feature-hero-mock[role="button"]:focus-visible::after { animation: none; opacity: 0; }
@keyframes markEmerge {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.34; }
}
.mock-cta {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(10px) scale(0.94);
  background: var(--m-peach-deep);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  opacity: 0;
  transition: opacity 260ms var(--ease), transform 320ms cubic-bezier(0.34, 1.4, 0.5, 1);
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(113,43,19,0.26);
}
.feature-hero-mock[role="button"]:hover .mock-cta,
.feature-hero-mock[role="button"]:focus-visible .mock-cta {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .feature-hero-mock[role="button"]::after { animation: none; }
}
.mock-bar {
  background: var(--m-paper);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--m-hairline);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.mock-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--m-mist);
  opacity: 0.5;
}
.mock-url { margin-left: 12px; color: var(--m-stone); }
.mock-body { padding: 24px; }
.mock-eyebrow { color: var(--m-stone); margin-bottom: 12px; display: block; }
.essay {
  color: var(--m-ink);
  font-size: 16px;
  line-height: 1.7;
}
.essay mark {
  background: var(--m-accent);
  color: var(--m-sky-deep);
  padding: 1px 4px;
  border-radius: 4px;
}
.essay del {
  color: var(--m-mist);
  text-decoration: line-through;
}
.essay-marks {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--m-hairline);
}
.mark-num {
  font-size: 32px;
  font-weight: 600;
  color: var(--m-ink);
  letter-spacing: -0.02em;
  display: block;
}
.mock-see-more {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 6px auto 0;
  padding: 13px 26px;
  background: var(--m-peach-deep);
  color: #FFFFFF;
  border: none;
  border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(113,43,19,0.26);
}
.mock-see-more::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: var(--r-pill);
  border: 2px solid var(--m-peach-deep);
  opacity: 0;
  pointer-events: none;
  animation: restPulse 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mock-see-more::after { animation: none; }
}
@media (max-width: 720px) {
  .feature-hero { padding: 40px 24px; border-radius: var(--r-xl); }
  .feature-hero-mock { display: none; }
  .mock-see-more { display: inline-flex; }
  .mock-body { padding: 16px; }
}

/* ════════════════════════════════════════════
   FEATURE GRID (three-up cards)
   ════════════════════════════════════════════ */
.feature-grid-section { padding: 32px 0 96px; }
.feature-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 900px) { .feature-grid-cards { grid-template-columns: 1fr; } }
/* iPad / tablet: single centred column — every card full-width, no orphaned 3rd card */
@media (min-width: 601px) and (max-width: 900px) {
  .feature-grid-cards {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 22px; max-width: 680px; margin-left: auto; margin-right: auto;
  }
  .feature-grid-cards > .flip-card:not(.flip-card-wide) { width: 100%; max-width: 100%; }
  .feature-grid-cards > .flip-card-wide { width: 100%; }
  .feature-grid-cards .flip-card-wide .flip-front-wide { flex-direction: column; gap: 18px; text-align: left; align-items: stretch; }
  .feature-grid-cards .flip-card-wide .flip-hook { flex: none; max-width: none; }
  .feature-grid-cards .flip-card-wide .lb-panel,
  .feature-grid-cards .flip-card-wide .pl-panel { align-self: stretch; width: 100%; }
}
/* Mobile + tablet: trio cards are shorter than the wide cards (less empty space) */
@media (max-width: 900px) {
  .feature-grid-cards .flip-card[data-color="sky"] .flip-front,
  .feature-grid-cards .flip-card[data-color="sky"] .flip-back,
  .feature-grid-cards .flip-card[data-color="lavender"] .flip-front,
  .feature-grid-cards .flip-card[data-color="lavender"] .flip-back,
  .feature-grid-cards .flip-card[data-color="mint"] .flip-front,
  .feature-grid-cards .flip-card[data-color="mint"] .flip-back { min-height: 320px; }
  /* flashcard stack sits lower so it clears the shorter card's heading */
  .feature-grid-cards .flip-card[data-color="lavender"] .flip-art-cards { bottom: -72px; }
  /* forecast chart stays compact (doesn't balloon with card width) */
  .feature-grid-cards .flip-card[data-color="mint"] .flip-art-forecast { align-self: center; max-width: 300px; width: 100%; }
}
.feature-card {
  border-radius: var(--r-xl);
  padding: 32px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.feature-card[data-color="sky"]      { background: var(--m-sky);      color: var(--m-sky-deep); }
.feature-card[data-color="lavender"] { background: var(--m-lavender); color: var(--m-lavender-deep); }
.feature-card[data-color="mint"]     { background: var(--m-mint);     color: var(--m-mint-deep); }
.feature-card[data-color="peach"]    { background: var(--m-peach);    color: var(--m-peach-deep); }
.feature-card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.feature-card .h-feature { margin: 0 0 12px; color: inherit; }
.feature-card p {
  font-size: 15px;
  line-height: 1.55;
  color: inherit;
  opacity: 0.88;
}

/* ── Flip cards (Apple-style) ── */
.feature-card.flip-card { padding: 0; perspective: 1500px; background: transparent; box-shadow: none; position: relative; }
.feature-card.flip-card:hover { transform: none; box-shadow: none; }
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0.15, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card.is-flipped { z-index: 60; }
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  border-radius: var(--r-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card[data-color="sky"]      .flip-front, .flip-card[data-color="sky"]      .flip-back { background: var(--m-sky);      color: var(--m-sky-deep); }
.flip-card[data-color="lavender"] .flip-front, .flip-card[data-color="lavender"] .flip-back { background: var(--m-lavender); color: var(--m-lavender-deep); }
.flip-card[data-color="mint"]     .flip-front, .flip-card[data-color="mint"]     .flip-back { background: var(--m-mint);     color: var(--m-mint-deep); }
.flip-card[data-color="butter"]   .flip-front, .flip-card[data-color="butter"]   .flip-back { background: var(--m-butter);   color: var(--m-butter-deep); }
.flip-card[data-color="coral"]    .flip-front, .flip-card[data-color="coral"]    .flip-back { background: #AEBAC9;    color: #233048; }
.flip-front { position: relative; box-shadow: var(--shadow-soft); }
.flip-card[data-color="lavender"] .flip-front { overflow: hidden; clip-path: inset(0 round var(--r-xl)); }
.flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  justify-content: center;
  box-shadow: var(--shadow-soft);
}
.flip-card.is-flipped .flip-front, .flip-card.is-flipped .flip-back { box-shadow: var(--shadow-lift); }
.flip-back-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 12px;
}
.flip-back p { font-size: 15px; line-height: 1.6; margin: 0; }
.flip-btn, .flip-close {
  position: absolute;
  bottom: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(26, 26, 26, 0.12);
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.flip-btn:hover, .flip-close:hover { background: rgba(26, 26, 26, 0.22); }
.flip-close { font-size: 20px; }
.flip-front-hook { justify-content: center; }
.flip-card[data-color="lavender"] .flip-front-hook { justify-content: flex-start; padding-top: 36px; }
.flip-card[data-color="lavender"] .flip-front,
.flip-card[data-color="lavender"] .flip-back { min-height: 440px; }
.flip-card[data-color="mint"] .flip-front-hook { justify-content: flex-start; padding-top: 36px; }
.flip-card[data-color="mint"] .flip-back { min-height: 440px; }
.flip-card[data-color="mint"] .flip-front { min-height: 440px; }
.flip-card[data-color="sky"] .flip-front,
.flip-card[data-color="sky"] .flip-back { min-height: 440px; }
.flip-front-hook-center { text-align: center; align-items: center; }
/* Centre the purple + green heading text, like the blue card */
.flip-card[data-color="lavender"] .flip-hook,
.flip-card[data-color="mint"] .flip-hook { text-align: center; }

/* Wide closing card — spans all 3 columns, hugs its content */
.feature-grid-cards .flip-card-wide { grid-column: 1 / -1; min-height: 0; }
.flip-card-wide .flip-front,
.flip-card-wide .flip-back { min-height: 216px; }
.flip-card-wide .flip-hook { max-width: 720px; }
/* Long horizontal cards flip vertically (around X) instead of sideways */
.flip-card-wide.is-flipped .flip-inner { transform: rotateX(180deg); }
.flip-card-wide .flip-back { transform: rotateX(180deg); }

/* Wide card: title left, leaderboard panel right */
.flip-front-wide {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  text-align: left;
}
.flip-front-wide .flip-hook { flex: 0 0 32%; max-width: 320px; }

.lb-panel {
  flex: 1;
  align-self: stretch;
  background: #FCFBF9;
  border: 1px solid rgba(99, 56, 6, 0.18);
  border-radius: 18px;
  padding: 14px 18px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lb-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(99, 56, 6, 0.6);
  margin-bottom: 2px;
}
.lb-sub { font-size: 11px; color: rgba(99, 56, 6, 0.45); margin-bottom: 12px; }
.lb-body { display: flex; gap: 32px; flex: 1; }

/* Podium (left) */
.lb-podium { flex: 0 0 52%; display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.pod { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; }
.pod-delta {
  font-size: 10px; font-weight: 500;
  margin-bottom: 3px; line-height: 1;
  color: rgba(99,56,6,0.5);
}
/* Distinct avatar colors (each used at most twice across the board) */
.pfp-sky      { background: var(--m-sky-deep)      !important; color: #FCFBF9 !important; }
.pfp-rose     { background: var(--m-rose-deep)     !important; color: #FCFBF9 !important; }
.pfp-mint     { background: var(--m-mint-deep)     !important; color: #FCFBF9 !important; }
.pfp-lavender { background: var(--m-lavender-deep) !important; color: #FCFBF9 !important; }
.pfp-coral    { background: var(--m-coral-deep)    !important; color: #FCFBF9 !important; }
.pfp-blush    { background: var(--m-blush-deep)    !important; color: #FCFBF9 !important; }
.pod-pfp {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--m-butter-deep); color: #FCFBF9;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; margin-bottom: 4px;
}
.pod-name { font-size: 11px; font-weight: 600; color: var(--m-butter-deep); line-height: 1.1; }
.pod-xp { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(99,56,6,0.55); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.pod-xp::after { content: ' XP'; font-size: 0.82em; opacity: 0.6; }
.pod-block {
  width: 54px;
  background: #E5DDD0;
  border: 1px solid rgba(99, 56, 6, 0.14);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 5px;
}
.pod-rank { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; color: var(--m-butter-deep); }
.pod-1 .pod-block { height: 60px; background: #F2DEA0; border-color: rgba(176, 137, 38, 0.4); }
.pod-2 .pod-block { height: 42px; background: #DEE1E6; border-color: rgba(120, 130, 145, 0.4); }
.pod-3 .pod-block { height: 30px; background: #EAC7A6; border-color: rgba(170, 110, 64, 0.4); }

/* Chasing pack (right) */
.lb-pack { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-right: 44px; max-height: 145px; overflow: hidden; }
.lb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 8px;
  font-size: 12px; color: var(--m-butter-deep);
}
.lb-rank { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(99,56,6,0.5); width: 12px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.lb-av {
  width: 22px; height: 22px; border-radius: 50%;
  background: #D8D0C2; color: #6B6151;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 10px; flex-shrink: 0;
}
.lb-av-you { background: var(--m-butter-deep); color: #FCFBF9; }
.lb-name { flex: 1; font-weight: 600; white-space: nowrap; }
.lb-gap { font-weight: 500; font-size: 10px; color: var(--m-coral-deep); opacity: 0.85; margin-left: 5px; }
.lb-behind { font-weight: 400; font-size: 10px; color: rgba(99,56,6,0.42); margin-left: 5px; }
.lb-xp { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-xp::after { content: ' XP'; font-size: 0.82em; opacity: 0.55; font-weight: 500; }
.lb-row-you { background: rgba(255, 224, 138, 0.32); color: var(--m-butter-deep); font-weight: 700; border-radius: 11px; }
.lb-row-you .lb-rank { color: var(--m-butter-deep); }

/* Study planner panel (coral card) — value range: dusty card / cream panel / espresso ink */
.pl-panel {
  flex: 1; align-self: stretch;
  background: #FBFCFE;
  border: 1px solid rgba(41, 54, 76, 0.1);
  border-radius: 18px;
  padding: 15px 18px 16px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 6px rgba(41, 54, 76, 0.07);
}
.pl-panel .lb-label { color: #233048; }
.pl-panel .lb-sub { color: rgba(41, 54, 76, 0.6); }
.pl-body { display: flex; gap: 24px; flex: 1; }

/* Week rail (left) */
.pl-week { flex: 0 0 30%; display: flex; flex-direction: column; gap: 1px; padding-right: 22px; }
.pl-week-cap { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(41, 54, 76, 0.5); margin-bottom: 5px; }
.pl-wrow { display: flex; align-items: center; gap: 9px; padding: 3px 7px; border-radius: 7px; }
.pl-day { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: rgba(41, 54, 76, 0.6); width: 30px; flex-shrink: 0; }
.pl-load { flex: 1; height: 5px; border-radius: 3px; background: rgba(41, 54, 76, 0.08); overflow: hidden; }
.pl-load i { display: block; height: 100%; border-radius: 3px; background: rgba(41, 54, 76, 0.42); }
.pl-wrow.is-weekend .pl-load i { background: rgba(41, 54, 76, 0.66); }
.pl-wrow.is-today { background: rgba(174, 186, 201, 0.34); }
.pl-wrow.is-today .pl-day { color: #233048; }
.pl-wrow.is-today .pl-load i { background: #3E5C88; }
.pl-exam { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; color: #233048; }
.pl-exam-dot { width: 7px; height: 7px; border-radius: 50%; background: #C62828; flex-shrink: 0; }

/* Today detail (right) */
.pl-today { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pl-agenda { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 5px; }
.pl-row { display: inline-flex; align-items: center; gap: 11px; padding: 5px 10px; border-radius: 9px; }
.pl-status { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pl-check { background: rgba(41, 54, 76, 0.32); color: #FBFCFE; font-size: 9px; font-weight: 700; }
.pl-ring-filled { background: #3E5C88; box-shadow: inset 0 0 0 2px #FBFCFE, 0 0 0 1.5px #3E5C88; }
.pl-ring { border: 1.5px solid rgba(41, 54, 76, 0.38); }
.pl-main { width: 168px; flex: none; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pl-topic { font-size: 13px; font-weight: 600; color: #233048; white-space: nowrap; }
.pl-src { font-size: 11px; color: rgba(41, 54, 76, 0.62); }
.pl-glyph { color: rgba(41, 54, 76, 0.5); flex-shrink: 0; display: flex; }
.pl-glyph svg { width: 15px; height: 15px; }
.pl-dur { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: #233048; font-variant-numeric: tabular-nums; flex-shrink: 0; width: 48px; text-align: right; }
.pl-done { opacity: 0.5; }
.pl-next { background: rgba(94, 132, 194, 0.26); }
.pl-uptag {
  font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700;
  letter-spacing: 0.06em; color: #233048;
  background: rgba(41, 54, 76, 0.16); padding: 1px 6px; border-radius: 5px;
  margin-left: 7px; vertical-align: middle;
}

@media (max-width: 720px) {
  .flip-front-wide { flex-direction: column; gap: 22px; text-align: center; }
  .flip-front-wide .flip-hook { flex: none; max-width: none; }
  .lb-panel { align-self: stretch; width: 100%; }
}

/* Forecast line chart on the green card — in-flow, fixed gap, contained */
.flip-art-forecast {
  margin-top: auto;
  background: #FCFBF9;
  border: 1px solid rgba(15, 61, 34, 0.18);
  border-radius: 18px;
  padding: 14px 16px 16px;
  pointer-events: none;
  position: relative;
}
.flip-art-forecast .fcast-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(15, 61, 34, 0.55);
  margin-bottom: 12px;
}
.flip-art-forecast .fcast-svg {
  display: block;
  width: 100%; height: auto;
  overflow: visible;
}
.fcast-past, .fcast-proj {
  fill: none;
  stroke: var(--m-mint-deep);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fcast-proj { stroke-dasharray: 2 5; opacity: 0.8; }
.fcast-today {
  stroke: rgba(15, 61, 34, 0.4);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.fcast-dot { fill: var(--m-mint-deep); }
.fcast-end { fill: var(--m-mint-deep); }
.flip-art-forecast .fcast-today-label {
  position: absolute;
  bottom: 6px;
  left: calc(16px + (100% - 32px) * 0.645);
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
  color: rgba(15, 61, 34, 0.5);
}
.flip-art-forecast .fcast-target {
  position: absolute;
  top: 26px; right: 14px;
  font-size: 22px; font-weight: 700;
  color: var(--m-mint-deep);
  line-height: 1;
}

/* Flashcard-stack drawing on the purple card — stack receding into the page, front card cropped at the bottom edge */
.flip-art-cards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -48px;
  height: 200px;
  pointer-events: none;
}
.flip-art-cards .fc {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 256px;
  height: 184px;
  border-radius: 18px;
  background: var(--m-cream);
  border: 2px solid var(--m-lavender-deep);
  transform-origin: bottom center;
  box-shadow: 0 -6px 22px rgba(60, 52, 137, 0.16);
}
/* Back cards peek out ABOVE the front one and recede (smaller, higher) */
.flip-art-cards .fc-3 {
  transform: translateX(-50%) translateY(-58px) scale(0.85); opacity: 1;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 16px 20px 0;
}
.flip-art-cards .fc-2 {
  transform: translateX(-50%) translateY(-6px) scale(0.92); opacity: 1;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 16px 20px 0;
}
.flip-art-cards .fc-1 {
  transform: translateX(-50%) translateY(58px);
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 16px 20px 0;
  box-shadow: 0 -10px 30px rgba(60, 52, 137, 0.22);
}
.flip-art-cards .fc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1.5px solid rgba(60, 52, 137, 0.18);
}
.flip-art-cards .fc-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m-lavender-deep); opacity: 0.65;
}
.flip-art-cards .fc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--m-lavender-deep); opacity: 0.4;
}
.flip-art-cards .fc-q {
  font-size: 19px; font-weight: 600; line-height: 1.3;
  color: var(--m-lavender-deep); letter-spacing: -0.01em;
  text-align: left;
}
.flip-art-cards .fc-hint {
  margin-top: 12px;
  font-size: 11px; font-weight: 500;
  color: var(--m-lavender-deep); opacity: 0.5;
}
.feature-card .flip-hook { font-size: clamp(28px, 3.1vw, 40px); font-weight: 700; line-height: 1.0; letter-spacing: -0.03em; margin: 0; opacity: 1; text-wrap: balance; }
.flip-hook-3 { display: flex; flex-direction: column; }
.flip-hook-3 span { white-space: nowrap; }

/* ── Mobile: keep "Some features" as a compact grid (3 colour tiles + shrunk wide cards) ── */
@media (max-width: 600px) {
  .feature-grid-section { padding: 24px 0 64px; }
  /* One card per row — each keeps its full original design (art + proportions) */
  .feature-grid-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .feature-grid-cards .flip-card { min-width: 0; min-height: 0; }
  .feature-grid-cards .flip-card:not(.flip-card-wide),
  .feature-grid-cards .flip-card-wide { grid-column: auto; }
  .feature-grid-cards .flip-card-wide { min-height: 0; }

  /* Trio (sky/lavender/mint): compact on phones — shorter than the wide cards, headline kept large */
  .feature-grid-cards .flip-card[data-color="sky"] .flip-front,
  .feature-grid-cards .flip-card[data-color="sky"] .flip-back,
  .feature-grid-cards .flip-card[data-color="lavender"] .flip-front,
  .feature-grid-cards .flip-card[data-color="lavender"] .flip-back,
  .feature-grid-cards .flip-card[data-color="mint"] .flip-front,
  .feature-grid-cards .flip-card[data-color="mint"] .flip-back { height: 236px; min-height: 236px; }
  /* deterministic card height so the trio hugs content uniformly (no flip-inner auto-size quirk) */
  .feature-grid-cards .flip-card[data-color="sky"] .flip-inner,
  .feature-grid-cards .flip-card[data-color="lavender"] .flip-inner,
  .feature-grid-cards .flip-card[data-color="mint"] .flip-inner { height: 236px; }
  .feature-grid-cards .flip-card[data-color="lavender"] .flip-art-cards { bottom: -92px; transform: scale(0.78); transform-origin: bottom center; }
  /* Green card on phones: horizontal split — heading centred left, forecast chart on the right */
  .feature-grid-cards .flip-card[data-color="mint"] .flip-front-hook {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; padding-top: 24px;
  }
  .feature-grid-cards .flip-card[data-color="mint"] .flip-hook { flex: 1 1 auto; font-size: clamp(20px, 5.4vw, 26px); }
  /* keep the chart wide-and-short (its original proportions), just scaled down to fit beside the text */
  .feature-grid-cards .flip-card[data-color="mint"] .flip-art-forecast {
    flex: 0 0 auto; width: 150px; max-width: 150px; margin-top: 0; align-self: center; zoom: 1;
  }
  .feature-grid-cards .flip-card[data-color="mint"] .flip-art-forecast .fcast-label { font-size: 9px; margin-bottom: 7px; }
  .feature-grid-cards .flip-card[data-color="mint"] .flip-art-forecast .fcast-target { font-size: 15px; top: 16px; }
  .feature-grid-cards .flip-card[data-color="mint"] .flip-art-forecast .fcast-today-label { font-size: 7px; }

  /* Wide cards: title stacked over a scaled-to-fit panel */
  .feature-grid-cards .flip-card-wide .flip-front,
  .feature-grid-cards .flip-card-wide .flip-back {
    height: auto; min-height: 0; max-height: none; padding: 24px; overflow: hidden;
  }
  .feature-grid-cards .flip-card-wide .flip-front-wide {
    flex-direction: column; gap: 16px; text-align: left; align-items: stretch; justify-content: flex-start;
  }
  /* Wide cards stay the dominant ones — a touch taller than the compact trio */
  .feature-grid-cards .flip-card-wide .flip-front { min-height: 305px; justify-content: center; }
  .feature-grid-cards .flip-card-wide .flip-hook { flex: none; max-width: none; width: 100%; }
  .feature-grid-cards .flip-card-wide .lb-panel,
  .feature-grid-cards .flip-card-wide .pl-panel { align-self: center; width: max-content; max-width: none; zoom: 0.6; }

  /* Popover: fits the screen, scrolls internally, compact type for phones */
  .feature-pop { padding: 12px; }
  .feature-pop-card { max-height: 86dvh; border-radius: 22px; }
  .feature-pop-scroll { padding: 0 20px 22px; max-height: 86dvh; }
  .feature-pop-card.is-wide { max-width: 100%; }
  .feature-pop-visual { margin: 0 -20px 18px; padding: 20px 18px 18px; }
  .feature-pop-title { font-size: 21px; }
  .feature-pop-desc { font-size: 14.5px; line-height: 1.55; }
  .feature-pop-eyebrow { font-size: 10px; margin-bottom: 7px; }
  .fpv-essay { font-size: 12px; line-height: 1.6; padding: 12px 13px; min-height: 0; }
  .fpv-paper { --fpv-lh: 21px; min-height: 0; }
  .fpv-grade { font-size: 42px; }
  .fpv-spark { height: 38px; }
}

/* Tiny phones (iPhone SE / 320): shrink the green chart so it doesn't crowd the text */
@media (max-width: 360px) {
  .feature-grid-cards .flip-card[data-color="mint"] .flip-art-forecast { width: 122px; max-width: 122px; zoom: 1; }
}

/* Whole-site dim while a card is flipped */
.site-dim {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 16, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
  z-index: 40;
}
body.is-dimmed .site-dim { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
}

/* ════════════════════════════════════════════
   FEATURE ROWS (study plans + built around syllabus)
   ════════════════════════════════════════════ */
.feature-row { padding: 88px 0; }
.feature-row-dark {
  background: var(--m-ink);
  color: var(--m-cream);
}
.feature-row-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .feature-row-grid { grid-template-columns: 1fr; gap: 32px; }
}
.feature-row-text p { color: var(--m-graphite); }
.feature-row-dark .feature-row-text p { color: var(--m-mist); }
.see-log-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--m-sun);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: gap var(--t-fast) var(--ease);
}
.see-log-link:hover { gap: 12px; }
.see-log-link .arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}
.see-log-link:hover .arrow { transform: translateX(2px); }
.feature-row-visual {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.feature-row-visual-light {
  background: var(--m-cream);
  border: 1px solid var(--m-hairline);
}
.feature-row-visual-dark { background: var(--m-ink-soft); }

/* Study plan day columns */
.plan-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  height: 160px;
  margin-top: 16px;
}
.day-col {
  background: rgba(60, 52, 137, 0.08);
  border-radius: var(--r-sm);
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  padding-bottom: 8px;
  overflow: hidden;
}
.day-col::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--h, 50%);
  background: var(--m-lavender);
}
.day-col.day-active::before { background: var(--m-lavender-deep); }
.day-col .mono {
  position: relative;
  z-index: 1;
  color: var(--m-stone);
  font-size: 10px;
}
.day-col.day-active .mono { color: var(--m-cream); }

.plan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.plan-status {
  background: var(--m-success-bg);
  color: var(--m-mint-deep);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
}

/* Log rows */
.log-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--m-cream);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  gap: 16px;
}
.log-row:last-child { border-bottom: none; }
.log-row .log-date { color: var(--m-stone); display: inline-block; min-width: 56px; }
.log-row .log-ok { color: var(--m-success); white-space: nowrap; }
.log-row .log-sun { color: var(--m-sun); white-space: nowrap; }

.dark-mock-bar { background: #111111; border-bottom-color: rgba(255,255,255,0.08); }
.dark-mock-bar .mock-url { color: var(--m-mist); }
.dark-mock-body { padding: 20px; }
.dark-mock-body .mono { color: var(--m-stone); margin-bottom: 16px; display: block; }

/* ════════════════════════════════════════════
   SUBJECTS GRID
   ════════════════════════════════════════════ */
.subjects { padding: 96px 0; }
.subjects-head { margin-bottom: 40px; max-width: 760px; }
.subjects-head .h-section { margin-top: 12px; }
.subjects-stats {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--m-stone);
  letter-spacing: 0.02em;
  margin-top: 12px;
  display: block;
}

.subj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .subj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .subj-grid { grid-template-columns: 1fr; } }

.subj-tile {
  text-decoration: none;
  border: none;
  border-radius: var(--r-lg);
  padding: 20px;
  min-height: 130px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease);
  font-family: 'Inter', sans-serif;
}
.subj-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.subj-tile:focus-visible {
  outline: 2px solid var(--m-ink);
  outline-offset: 3px;
}
.subj-name {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: auto;
  line-height: 1.12;
  color: inherit;
}
.subj-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.subj-cards { display: none; }
.subj-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}


.subj-tile.is-active {
  outline: 3px solid var(--m-ink);
  outline-offset: 3px;
}

.subj-hidden { display: contents; }
.subj-hidden[hidden] { display: none; }

.subj-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.subj-toggle {
  cursor: pointer;
}
.subj-toggle .subj-toggle-arrow {
  display: inline-block;
  transition: transform var(--t-med) var(--ease);
}
.subj-toggle[aria-expanded="true"] .subj-toggle-arrow {
  transform: rotate(180deg);
}

.subj-detail {
  background: var(--m-paper);
  color: var(--m-ink);
  border-radius: var(--r-xl);
  padding: 32px;
  margin-top: 28px;
}
.subj-detail-inner { animation: subjFadeIn 320ms var(--ease); }
@keyframes subjFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.subj-detail-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.subj-detail-name {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--m-ink);
  line-height: 1.1;
}
.subj-detail-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--m-stone);
  margin-top: 4px;
}
.subj-detail-cards {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--m-stone);
}
.subj-detail-cards em {
  font-style: normal;
  font-weight: 600;
  color: var(--m-ink);
  font-size: 15px;
  margin-right: 4px;
}
.subj-detail-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--m-graphite);
  max-width: 64ch;
  margin: 0 0 20px;
}
.subj-detail-topics {
  border-top: 1px solid var(--m-hairline);
  padding-top: 16px;
}
.subj-detail-eyebrow {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--m-stone);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.subj-detail-topiclist {
  font-size: 14px;
  color: var(--m-graphite);
}


/* ════════════════════════════════════════════
   BOARD TABS (qualification switcher)
   ════════════════════════════════════════════ */
.board-tabs {
  display: inline-flex;
  background: var(--m-paper);
  padding: 4px;
  border-radius: var(--r-pill);
  margin: 32px 0 28px;
  gap: 2px;
}
.board-tab {
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: none;
  background-color: transparent;
  color: var(--m-graphite);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: none;
  white-space: nowrap;
}
.board-tab:hover:not(.is-active) { color: var(--m-ink); }
.board-tab.is-active {
  background-color: var(--m-ink) !important;
  color: var(--m-sun) !important;
}
.board-tab:not(.is-active) {
  background-color: transparent !important;
  color: var(--m-graphite) !important;
}
.board-tab-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  opacity: 0.7;
  font-weight: 400;
}
@media (max-width: 720px) {
  .board-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* === EXPANDED SUBJECT PALETTE · 15 unique colors === */
:root {
  --m-c1:  #B8E6C8;  --m-c1-deep:  #0F3D22;   /* Biology */
  --m-c2:  #FFD8C9;  --m-c2-deep:  #712B13;   /* Chemistry */
  --m-c3:  #C7E8FF;  --m-c3-deep:  #0C447C;   /* Physics */
  --m-c4:  #D9C9F2;  --m-c4-deep:  #3C3489;   /* Maths */
  --m-c5:  #FFE08A;  --m-c5-deep:  #633806;   /* Economics */
  --m-c6:  #FF9FB8;  --m-c6-deep:  #72243E;   /* English Lit */
  --m-c7:  #D4E8C5;  --m-c7-deep:  #2D5016;   /* Computer Science */
  --m-c8:  #FFC9D6;  --m-c8-deep:  #8C1F3D;   /* English Lang */
  --m-c9:  #FFB89B;  --m-c9-deep:  #993C1D;   /* History */
  --m-c10: #C4D9F0;  --m-c10-deep: #1E3A6B;   /* Geography */
  --m-c11: #E8D4C0;  --m-c11-deep: #5C3D1F;   /* Business */
  --m-c12: #C9E8E0;  --m-c12-deep: #1F4D44;   /* Psychology */
  --m-c13: #F2D4E8;  --m-c13-deep: #6B1F4F;   /* Languages */
  --m-c14: #EADCFA;  --m-c14-deep: #4A2D7A;   /* Religious Studies */
  --m-c15: #FFCFA0;  --m-c15-deep: #7A3F0A;   /* Art & Design */
}

/* Inline meta line (BOARD · CODE) · plain mono, no chip */
.subj-tile .subj-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
  margin-bottom: 3px;
  background: transparent;
  padding: 0;
  border: none;
}

/* 15 unique tile color variants */
.subj-tile[data-color="c1"]  { background: var(--m-c1);  color: var(--m-c1-deep); }
.subj-tile[data-color="c1"]  .subj-arrow { background: var(--m-c1-deep);  color: var(--m-c1); }
.subj-tile[data-color="c2"]  { background: var(--m-c2);  color: var(--m-c2-deep); }
.subj-tile[data-color="c2"]  .subj-arrow { background: var(--m-c2-deep);  color: var(--m-c2); }
.subj-tile[data-color="c3"]  { background: var(--m-c3);  color: var(--m-c3-deep); }
.subj-tile[data-color="c3"]  .subj-arrow { background: var(--m-c3-deep);  color: var(--m-c3); }
.subj-tile[data-color="c4"]  { background: var(--m-c4);  color: var(--m-c4-deep); }
.subj-tile[data-color="c4"]  .subj-arrow { background: var(--m-c4-deep);  color: var(--m-c4); }
.subj-tile[data-color="c5"]  { background: var(--m-c5);  color: var(--m-c5-deep); }
.subj-tile[data-color="c5"]  .subj-arrow { background: var(--m-c5-deep);  color: var(--m-c5); }
.subj-tile[data-color="c6"]  { background: var(--m-c6);  color: var(--m-c6-deep); }
.subj-tile[data-color="c6"]  .subj-arrow { background: var(--m-c6-deep);  color: var(--m-c6); }
.subj-tile[data-color="c7"]  { background: var(--m-c7);  color: var(--m-c7-deep); }
.subj-tile[data-color="c7"]  .subj-arrow { background: var(--m-c7-deep);  color: var(--m-c7); }
.subj-tile[data-color="c8"]  { background: var(--m-c8);  color: var(--m-c8-deep); }
.subj-tile[data-color="c8"]  .subj-arrow { background: var(--m-c8-deep);  color: var(--m-c8); }
.subj-tile[data-color="c9"]  { background: var(--m-c9);  color: var(--m-c9-deep); }
.subj-tile[data-color="c9"]  .subj-arrow { background: var(--m-c9-deep);  color: var(--m-c9); }
.subj-tile[data-color="c10"]  { background: var(--m-c10);  color: var(--m-c10-deep); }
.subj-tile[data-color="c10"]  .subj-arrow { background: var(--m-c10-deep);  color: var(--m-c10); }
.subj-tile[data-color="c11"]  { background: var(--m-c11);  color: var(--m-c11-deep); }
.subj-tile[data-color="c11"]  .subj-arrow { background: var(--m-c11-deep);  color: var(--m-c11); }
.subj-tile[data-color="c12"]  { background: var(--m-c12);  color: var(--m-c12-deep); }
.subj-tile[data-color="c12"]  .subj-arrow { background: var(--m-c12-deep);  color: var(--m-c12); }
.subj-tile[data-color="c13"]  { background: var(--m-c13);  color: var(--m-c13-deep); }
.subj-tile[data-color="c13"]  .subj-arrow { background: var(--m-c13-deep);  color: var(--m-c13); }
.subj-tile[data-color="c14"]  { background: var(--m-c14);  color: var(--m-c14-deep); }
.subj-tile[data-color="c14"]  .subj-arrow { background: var(--m-c14-deep);  color: var(--m-c14); }
.subj-tile[data-color="c15"]  { background: var(--m-c15);  color: var(--m-c15-deep); }
.subj-tile[data-color="c15"]  .subj-arrow { background: var(--m-c15-deep);  color: var(--m-c15); }

/* The "+7 more · See all subjects" tile */
.subj-tile-more {
  background: var(--m-paper);
  color: var(--m-ink);
  border: 1px dashed rgba(26, 26, 26, 0.18);
  border-radius: var(--r-lg);
  padding: 20px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.subj-tile-more:hover {
  background: var(--m-paper);
  border-color: var(--m-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.05);
}
.subj-more-num {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--m-ink);
  margin-bottom: 4px;
  line-height: 1;
}
.subj-more-label {
  font-size: 12px;
  color: var(--m-stone);
}

/* ════════════════════════════════════════════
   SUBJECT BOARD FILTER PILLS
   ════════════════════════════════════════════ */
.subj-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.subj-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--m-hairline);
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--m-graphite);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.subj-filter-pill:hover:not(.is-active) {
  border-color: var(--m-ink);
  color: var(--m-ink);
}
.subj-filter-pill.is-active {
  background: var(--m-ink);
  border-color: var(--m-ink);
  color: var(--m-cream);
}
.subj-filter-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.7;
}
.subj-filter-pill.is-active .subj-filter-count { opacity: 0.8; }
.subj-tile.is-filtered-out { display: none !important; }
.subj-tile-more.is-filtered-out { display: none !important; }

/* Collapse button (appears when grid is expanded) */
.subj-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 20px auto 0;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--m-hairline);
  border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--m-graphite);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.subj-collapse:hover {
  border-color: var(--m-ink);
  color: var(--m-ink);
  background: var(--m-paper);
}
.subj-collapse[hidden] { display: none; }

/* "+X more" tile hides itself when expanded */
.subj-tile-more[hidden] { display: none; }

/* Missing subject CTA */
.subj-missing {
  margin-top: 56px;
  padding: 32px 36px;
  background: var(--m-paper);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.subj-missing-text { flex: 1; min-width: 280px; }
.subj-missing-text h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--m-ink);
}
.subj-missing-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--m-graphite);
  max-width: 480px;
}
.subj-missing .btn-primary { flex-shrink: 0; }
@media (max-width: 640px) {
  .subj-missing {
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Missing block: hidden on IB */
.subj-missing.is-hidden { display: none; }

/* ════════════════════════════════════════════
   ANIMATED TAB INDICATOR (luxurious slide)
   ════════════════════════════════════════════ */
.board-tabs { position: relative; }
.board-tabs-indicator {
  position: absolute;
  top: 4px;
  height: calc(100% - 8px);
  border-radius: var(--r-pill);
  background: var(--m-ink);
  transition:
    left 520ms cubic-bezier(0.16, 1, 0.3, 1),
    width 520ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
  pointer-events: none;
  left: 0;
  width: 0;
}
.board-tab {
  position: relative;
  z-index: 1;
}
/* Remove the heavy !important bg from active state so indicator can take over.
   Keep color override so the text reads yellow on the moving pill. */
.board-tab.is-active {
  background-color: transparent !important;
  color: var(--m-sun) !important;
}
.board-tab:not(.is-active) {
  background-color: transparent !important;
  color: var(--m-graphite) !important;
}
.board-tab {
  transition: color 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ════════════════════════════════════════════
   SUBJECTS EXPAND ANIMATION
   ════════════════════════════════════════════ */
.subj-hidden { display: none; }
.subj-hidden.is-open,
.subj-hidden.is-closing { display: contents; }

.subj-hidden.is-open .subj-tile {
  animation: tileIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.subj-hidden.is-open .subj-tile:nth-child(1) { animation-delay: 0ms; }
.subj-hidden.is-open .subj-tile:nth-child(2) { animation-delay: 55ms; }
.subj-hidden.is-open .subj-tile:nth-child(3) { animation-delay: 110ms; }
.subj-hidden.is-open .subj-tile:nth-child(4) { animation-delay: 165ms; }
.subj-hidden.is-open .subj-tile:nth-child(5) { animation-delay: 220ms; }
.subj-hidden.is-open .subj-tile:nth-child(6) { animation-delay: 275ms; }
.subj-hidden.is-open .subj-tile:nth-child(7) { animation-delay: 330ms; }
.subj-hidden.is-open .subj-tile:nth-child(8) { animation-delay: 385ms; }

.subj-hidden.is-closing .subj-tile {
  animation: tileOut 360ms cubic-bezier(0.65, 0, 0.35, 1) both;
}
.subj-hidden.is-closing .subj-tile:nth-child(8) { animation-delay: 0ms; }
.subj-hidden.is-closing .subj-tile:nth-child(7) { animation-delay: 40ms; }
.subj-hidden.is-closing .subj-tile:nth-child(6) { animation-delay: 80ms; }
.subj-hidden.is-closing .subj-tile:nth-child(5) { animation-delay: 120ms; }
.subj-hidden.is-closing .subj-tile:nth-child(4) { animation-delay: 160ms; }
.subj-hidden.is-closing .subj-tile:nth-child(3) { animation-delay: 200ms; }
.subj-hidden.is-closing .subj-tile:nth-child(2) { animation-delay: 240ms; }
.subj-hidden.is-closing .subj-tile:nth-child(1) { animation-delay: 280ms; }

@keyframes tileIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes tileOut {
  from { opacity: 1; transform: translateY(0)    scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .subj-hidden.is-open .subj-tile,
  .subj-hidden.is-closing .subj-tile { animation: none !important; }
  .board-tabs-indicator { transition: none !important; }
}

/* ════════════════════════════════════════════
   BOARD PANELS
   ════════════════════════════════════════════ */
.board-panel { display: none; }
.board-panel.is-active { display: block; }
.board-panel[hidden] { display: none; }
.board-panel.is-active[hidden] { display: block; }



/* ════════════════════════════════════════════
   IB EMPTY STATE
   ════════════════════════════════════════════ */
.board-panel-empty.is-active {
  display: flex;
  justify-content: center;
}
.board-empty {
  background: var(--m-paper);
  border-radius: var(--r-xl);
  padding: 56px 40px;
  text-align: center;
  max-width: 560px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.board-empty-mark {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--m-lavender);
  color: var(--m-lavender-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.board-empty p { color: var(--m-graphite); }
.board-empty-form {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  width: 100%;
  max-width: 380px;
}
.board-empty-form input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--m-hairline);
  border-radius: var(--r-pill);
  background: var(--m-cream);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--m-ink);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.board-empty-form input:focus { border-color: var(--m-ink); }
.board-empty-form .btn-primary { padding: 12px 18px; font-size: 14px; }
@media (max-width: 520px) {
  .board-empty-form { flex-direction: column; }
}

/* ════════════════════════════════════════════
   TESTIMONIAL
   ════════════════════════════════════════════ */
.quote {
  padding: 96px 0;
  background: var(--m-accent);
}
.quote-line {
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 500;
  line-height: 1.4;
  max-width: 680px;
  margin: 0 auto;
  color: var(--m-sky-deep);
  text-align: center;
  letter-spacing: -0.01em;
}
.quote-attr {
  margin: 24px auto 0;
  color: var(--m-sky-deep);
  opacity: 0.65;
  text-align: center;
  display: block;
}


/* ════════════════════════════════════════════
   PRICING SECTION
   ════════════════════════════════════════════ */
.pricing-section {
  padding: 96px 0 120px;
  background: var(--m-cream);
}
.pricing-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.pricing-head .eyebrow { justify-content: center; }
.pricing-head .h-section {
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--m-ink);
  margin: 8px 0;
  line-height: 1.1;
}
.pricing-subhead {
  font-size: 16px;
  color: var(--m-graphite);
  margin: 8px 0 0;
}

.billing-toggle {
  scroll-margin-top: 78px;
  display: flex;
  background: var(--m-paper);
  padding: 4px;
  border-radius: var(--r-pill);
  gap: 2px;
  margin: 0 auto 40px;
  width: max-content;
}
.billing-btn {
  padding: 9px 22px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  color: var(--m-graphite);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.billing-btn:hover:not(.is-active) { color: var(--m-ink); }
.billing-btn.is-active {
  background: var(--m-ink);
  color: var(--m-sun);
}
.billing-save {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  background: var(--m-butter);
  color: var(--m-butter-deep);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}
.billing-btn.is-active .billing-save { background: var(--m-sun); }

.billing-toggle { position: relative; }
.billing-toggle-indicator {
  position: absolute;
  top: 4px;
  height: calc(100% - 8px);
  border-radius: var(--r-pill);
  background: var(--m-ink);
  transition:
    left 520ms cubic-bezier(0.16, 1, 0.3, 1),
    width 520ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
  pointer-events: none;
  left: 0;
  width: 0;
}
.billing-btn {
  position: relative;
  z-index: 1;
  transition: color 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.billing-btn.is-active {
  background: transparent !important;
}


.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 14px;
  max-width: 1000px;
  margin: 0 auto 48px;
}
@media (max-width: 880px) {
  .tier-grid { grid-template-columns: 1fr; gap: 16px; }
  .tier-pro { transform: none !important; }
}
.tier {
  background: var(--m-paper);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tier-pro {
  background: var(--m-ink);
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.12);
}
.tier-lifetime { border: 2px solid var(--m-sun); }
.tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--m-sun);
  color: var(--m-butter-deep);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tier-name {
  font-size: 13px;
  color: var(--m-graphite);
  margin-bottom: 16px;
}
.tier-pro .tier-name { color: var(--m-sun); font-weight: 500; }
.tier-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.tier-name-row .tier-name { margin-bottom: 0; }
.tier-mini-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  background: var(--m-ink);
  color: var(--m-sun);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.tier-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 6px;
}
.tier-price-animated { min-height: 48px; }
.tier-currency {
  font-size: 32px;
  font-weight: 500;
  color: rgba(255, 224, 138, 0.5);
  line-height: 1;
}
.tier-amount {
  font-size: 44px;
  font-weight: 600;
  color: var(--m-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-block;
  transition: opacity 0.15s ease;
}
.tier-pro .tier-amount { color: var(--m-sun); }
.tier-period {
  font-size: 14px;
  color: var(--m-stone);
  margin-left: 2px;
  transition: opacity 0.15s ease;
}
.tier-pro .tier-period { color: rgba(255, 224, 138, 0.6); }
.tier-tagline {
  font-size: 13px;
  color: var(--m-graphite);
  margin: 8px 0 20px;
  line-height: 1.5;
  transition: opacity 0.15s ease;
}
.tier-pro .tier-tagline { color: rgba(245, 241, 232, 0.7); }
.tier-features-divider {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--m-stone);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  padding-top: 16px;
  margin-bottom: 10px;
}
.tier-pro .tier-features-divider {
  color: rgba(245, 241, 232, 0.5);
  border-top-color: rgba(255, 224, 138, 0.15);
}
.tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--m-ink);
  line-height: 1.7;
  flex: 1;
}
.tier-features-bordered {
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  padding-top: 16px;
}
.tier-pro .tier-features { color: var(--m-paper); }
.tier-features li {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.tier-features li:last-child { margin-bottom: 0; }
.tier-features strong { font-weight: 600; }
.tier-check {
  color: var(--m-ink);
  font-weight: 600;
  flex-shrink: 0;
}
.tier-pro .tier-check { color: var(--m-sun); }
.tier-feature-body {
  flex: 1 1 auto;
  min-width: 0;
}
.tier-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tier-cta:hover { transform: translateY(-1px); }
.tier-cta-outline {
  border: 1px solid var(--m-ink);
  color: var(--m-ink);
  background: transparent;
}
.tier-cta-outline:hover { background: var(--m-ink); color: var(--m-cream); }
.tier-cta-primary {
  background: var(--m-sun);
  color: var(--m-ink);
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
.tier-cta-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 125%;
  width: 55%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.75) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}
.tier-cta-primary:hover { transform: none; box-shadow: 0 4px 16px rgba(255, 224, 138, 0.35); }
.tier-cta-primary:hover::after { animation: ctaShine 0.75s ease; }
@keyframes ctaShine {
  from { left: 125%; }
  to   { left: -75%; }
}
.tier-fine {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--m-stone);
  margin: 12px 0 0;
}
.tier-pro .tier-fine { color: rgba(245, 241, 232, 0.5); }

.token-strip {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 24px;
  background: rgba(26, 26, 26, 0.04);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.token-strip-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--m-butter-deep);
  background: var(--m-sun);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.token-strip p {
  margin: 0;
  font-size: 13px;
  color: var(--m-graphite);
  line-height: 1.5;
}


/* ════════════════════════════════════════════
   FEATURE COMPARISON TABLE
   ════════════════════════════════════════════ */
.compare-section {
  padding: 0 0 120px;
  background: var(--m-cream);
}
.compare-head {
  text-align: center;
  margin-bottom: 32px;
}
.compare-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--m-stone);
  letter-spacing: 0.08em;
  margin: 0 0 6px;
}
.compare-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--m-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.compare-table {
  max-width: 900px;
  margin: 0 auto;
  background: var(--m-paper);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.compare-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  padding: 14px 24px;
  align-items: center;
  border-top: 1px solid rgba(26, 26, 26, 0.05);
}
.compare-row:first-of-type { border-top: none; }
.compare-row-header {
  padding: 18px 24px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  border-top: none;
}
.compare-row-pro { background: rgba(255, 224, 138, 0.15); }
.compare-col-label {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--m-stone);
  letter-spacing: 0.08em;
  font-weight: 500;
}
.compare-col-label-pro {
  color: var(--m-butter-deep);
  font-weight: 600;
}
.compare-section-label {
  padding: 18px 24px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--m-stone);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
}
.compare-section-label-pro {
  color: var(--m-butter-deep);
  background: rgba(255, 224, 138, 0.15);
}
.compare-feature { display: flex; flex-direction: column; gap: 2px; }
.compare-feature-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--m-ink);
}
.compare-feature-desc {
  font-size: 12px;
  color: var(--m-stone);
  line-height: 1.4;
}
.compare-row-pro .compare-feature-desc { color: var(--m-graphite); }
.compare-cell {
  text-align: center;
  font-size: 13px;
  color: var(--m-graphite);
}
.compare-cell-pro { color: var(--m-ink); font-weight: 500; }
.compare-cell-empty {
  font-size: 16px;
  color: rgba(26, 26, 26, 0.25);
}
.compare-pill {
  display: inline-block;
  background: rgba(255, 224, 138, 0.4);
  color: var(--m-butter-deep);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
}
.compare-pill-dark { background: var(--m-ink); color: var(--m-sun); }
.compare-row-cta {
  padding: 20px 24px;
  background: var(--m-ink);
  border-top: 1px solid rgba(26, 26, 26, 0.08);
}
.compare-cta-text {
  font-size: 13px;
  color: var(--m-paper);
  font-weight: 500;
}
.compare-cta-button-wrap { text-align: center; }
.compare-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--m-sun);
  color: var(--m-ink);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.compare-cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 224, 138, 0.3);
}
@media (max-width: 720px) {
  .compare-row,
  .compare-row-header,
  .compare-row-cta {
    grid-template-columns: 1.4fr 0.7fr 0.7fr;
    padding: 12px 16px;
  }
  .compare-feature-name { font-size: 13px; }
  .compare-feature-desc { font-size: 11px; }
  .compare-cell { font-size: 12px; }
  .compare-pill { font-size: 11px; padding: 2px 8px; }
  .compare-section-label { padding: 14px 16px 6px; }
  .compare-cta-text { font-size: 12px; }
}
.compare-collapse { display: none; }
.compare-collapse.is-open { display: block; animation: compareReveal 420ms var(--ease); }
@keyframes compareReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.compare-collapse-inner { min-height: 0; }
.compare-expand-row { padding: 18px 24px; text-align: center; border-top: 1px solid rgba(26,26,26,0.08); }
.compare-expand-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--m-hairline); border-radius: var(--r-pill); padding: 10px 22px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px; color: var(--m-graphite); cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.compare-expand-btn:hover { border-color: var(--m-ink); color: var(--m-ink); }
.compare-expand-btn .chev { transition: transform 320ms var(--ease); }
.compare-expand-btn.is-open .chev { transform: rotate(180deg); }

/* ════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════ */
.faq {
  background: var(--m-cream);
  padding: 96px 0;
}
.faq-head { max-width: 760px; margin: 0 auto 48px; }
.faq-head .h-section { color: var(--m-ink); margin-top: 12px; }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq .q {
  border-bottom: 1px solid var(--m-hairline);
  padding: 0;
}
.faq .q summary {
  padding: 28px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--m-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq .q summary::-webkit-details-marker { display: none; }
.faq .q summary::after {
  content: '+';
  font-size: 26px;
  font-weight: 300;
  color: var(--m-stone);
  transition: transform 240ms cubic-bezier(0.33, 0, 0.2, 1);
  display: inline-block;
  line-height: 1;
  will-change: transform;
}
.faq .q[data-anim-open] summary::after { transform: rotate(45deg); }
.faq .q .a {
  font-size: 15px;
  line-height: 1.7;
  color: var(--m-graphite);
  padding-top: 0;
  padding-bottom: 0;
  max-width: 620px;
  overflow: hidden;
  height: 0;
  transition: height 320ms var(--ease), padding 320ms var(--ease);
}
.faq .q[open][data-anim-open] .a { /* set by JS */ }

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
.footer {
  background: var(--m-paper);
  color: var(--m-graphite);
  padding: 56px 0 28px;
  border-top: 1px solid var(--m-hairline);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 40px 32px;
  align-items: start;
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .footer-brand-col { grid-column: 1 / -1; }
}
.footer-brand-col { max-width: 320px; }
.footer-tagline {
  font-size: 14px;
  line-height: 1.6;
  color: var(--m-graphite);
  margin: 16px 0 20px;
}
.footer-socials { display: flex; gap: 18px; }
.footer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--m-graphite);
  transition: color var(--t-fast) var(--ease);
}
.footer-socials a:hover {
  color: var(--m-ink);
}
.footer-socials svg { width: 22px; height: 22px; }
.footer-contact {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-contact a {
  font-size: 11px;
  color: var(--m-graphite);
}
.footer-contact a:hover { color: var(--m-ink); }
.footer h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--m-ink);
  margin: 0 0 9px;
  letter-spacing: 0;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.footer a {
  color: var(--m-graphite);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.footer a:hover { color: var(--m-ink); }
.footer-col ul a { position: relative; display: inline-block; }
.footer-col ul a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 100%;
  height: 1.5px;
  background: var(--m-ink);
  transition: right var(--t-med) var(--ease);
}
.footer-col ul a:hover::after { right: 0; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--m-mist);
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--m-hairline);
  letter-spacing: 0.02em;
}
.footer-bottom a { color: var(--m-mist); font-size: 11px; }
.footer-bottom a:hover { color: var(--m-ink); }
.footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ════════════════════════════════════════════
   PRINT (just in case)
   ════════════════════════════════════════════ */
@media print {
  .nav, .sheet, .announce, .hero-right { display: none; }
}