/* 
   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-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; }

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; }
}

/* 
   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);
}
.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); }

.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);
}
.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-sun);
  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-rose-deep);
  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-rose); }
.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; }

/* 
   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 line { stroke-dasharray: 1; }
.ham-svg .ham-x { opacity: 0; }
.hamburger[aria-expanded="true"] .ham-svg .ham-line { opacity: 0; 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 { display: none; }
  .hamburger { display: inline-flex; }
}

/* 
   MOBILE SHEET
    */
.sheet {
  position: fixed;
  inset: 0;
  background: var(--m-cream);
  z-index: 200;
  transform: translateY(-100%);
  transition: transform 540ms var(--ease);
  display: flex;
  flex-direction: column;
  padding: 24px 24px 40px;
  visibility: hidden;
}
.sheet[aria-hidden="false"] {
  transform: translateY(0);
  visibility: visible;
}
.sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}
.sheet-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.sheet-links a {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--m-ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--m-hairline);
}
.sheet-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.sheet-bottom .signin-pill {
  color: var(--m-graphite);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 12px;
}
.sheet-bottom .btn-primary { justify-content: center; }

/* 
   HERO
    */
.hero {
  padding: 80px 0 64px;
}
.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; }
}

.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: var(--m-rose-deep);
  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;
}
.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); }

/* === Floating product cards === */
.hero-right {
  position: relative;
  min-height: 480px;
}
@media (max-width: 980px) {
  .hero-right { min-height: 460px; max-width: 460px; }
}
.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; }
}

/* 
   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: 96px 0; }
.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;
  overflow: hidden;
}
.mock-bar {
  background: var(--m-paper);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--m-hairline);
}
.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-sun);
  color: var(--m-sun-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;
}
@media (max-width: 720px) {
  .feature-hero { padding: 48px 24px; border-radius: var(--r-xl); }
  .feature-hero-mock { margin: 0 -8px; }
  .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, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 900px) { .feature-grid-cards { grid-template-columns: 1fr; } }
.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;
}

/* 
   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); }
.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: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: auto;
  line-height: 1.15;
  color: inherit;
}
.subj-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.subj-cards { color: inherit; opacity: 0.85; }
.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: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
  margin-bottom: 2px;
  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-cream);
  border-color: var(--m-ink);
  transform: translateY(-2px);
}
.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;
  }
}

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

.subj-hidden { display: none; }
.subj-hidden.is-open { display: contents; }


/* 
   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; }
}

/* 
   PRICING TEASER
    */
.pricing-teaser {
  padding: 96px 0;
  text-align: center;
}
.pricing-teaser .eyebrow { justify-content: center; }
.pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 40px auto 0;
  text-align: left;
}
@media (max-width: 720px) { .pricing-cards { grid-template-columns: 1fr; } }
.pricing-card {
  border-radius: var(--r-xl);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pricing-free {
  background: var(--m-paper);
  color: var(--m-ink);
}
.pricing-pro {
  background: var(--m-ink);
  color: var(--m-cream);
}
.pricing-pro p { color: var(--m-mist); }
.pricing-name {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.7;
}
.pricing-price {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 12px 0 16px;
  line-height: 1;
}
.pricing-pro .pricing-price { color: var(--m-sun); }
.pricing-price span {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.55;
  margin-left: 6px;
}
.pricing-card p {
  font-size: 15px;
  margin: 0 0 24px;
}
.pricing-card .btn-primary,
.pricing-card .btn-ghost { align-self: flex-start; margin-top: auto; }
.pricing-fine { color: var(--m-stone); margin-top: 24px; }

/* 
   TESTIMONIAL
    */
.quote {
  padding: 96px 0;
  background: var(--m-butter);
}
.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-butter-deep);
  text-align: center;
  letter-spacing: -0.01em;
}
.quote-attr {
  margin: 24px auto 0;
  color: var(--m-butter-deep);
  opacity: 0.65;
  text-align: center;
  display: block;
}

/* 
   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: 24px 0;
}
.faq .q summary {
  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 var(--t-med) var(--ease);
  display: inline-block;
  line-height: 1;
}
.faq .q[open] summary::after { transform: rotate(45deg); }
.faq .q .a {
  font-size: 15px;
  line-height: 1.6;
  color: var(--m-graphite);
  padding-top: 16px;
  max-width: 620px;
  overflow: hidden;
  height: 0;
  transition: height 320ms var(--ease);
}
.faq .q[open][data-anim-open] .a { /* set by JS */ }

/* 
   FOOTER
    */
.footer {
  background: var(--m-paper);
  color: var(--m-graphite);
  padding: 64px 0 32px;
  border-top: 1px solid var(--m-hairline);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
}
.footer h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--m-ink);
  margin: 0 0 16px;
  letter-spacing: 0;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.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-bottom {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--m-stone);
  margin-top: 48px;
  text-align: center;
  letter-spacing: 0.02em;
}

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