/* ============================================================
   Sapwood - Design System
   Warm, grounded learning aesthetic
   ============================================================ */

/* First focusable element: bypass the nav and move focus to the active screen's
   main landmark. Hidden until focused so it does not change the visual design. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 4000;
  padding: 10px 16px;
  color: #ffffff;
  background: var(--green-btn);
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(16, 38, 28, 0.22);
}

.skip-link:focus {
  top: 16px;
}

:root {
  /* Sapwood palette: bark/wood lead; living leaf is a supporting accent. */
  --wood-ink: #765237;
  --sapwood-gold: #b58a5b;
  --sapwood-gold-light: #e3cba5;
  --sapwood-gold-pale: #ead9b8;
  --bark: #3b3028;
  --paper: #faf7f0;

  --primary-green: #89a879;
  --primary-green-dark: #66865e;
  --primary-green-darker: #45664a;

  /* The brown brand ink leads. Green remains a secondary decorative/action cue. */
  --green-ink: #765237;
  /* Supporting leaf green for dark surfaces; wood remains the primary ink. */
  --green-ink-bright: #a9c99d;
  /* Hover and selected affordances (arrows, dots) are the one place the bright
     brand green belongs to text, but only on a dark surface. On a light card it
     is 1.99:1, so this adapts instead. */
  --green-accent: #527351;
  --green-btn: #765237;
  --green-btn-hover: #65452f;
  --green-btn-active: #523824;

  --primary-green-light: #e2ead9;
  --primary-green-extra-light: #eef2e8;
  --primary-green-soft: #f6f7f0;

  /* Pale accent tints for icon tiles. Like the green tints above these are
     surfaces, so the dark theme needs its own values. */
  --accent-purple-tint: #f4ecf7;
  --accent-blue-tint: #eaf4fb;
  --accent-orange-tint: #f5ebdf;
  --accent-yellow-tint: #fef9e7;

  --navy: #3b3028;
  --navy-500: #51443a;
  --text-primary: #39342e;
  --text-secondary: #60594f;
  --text-muted: #6b6257;
  /* Error and destructive text. The old #e74c3c was 3.82:1 on white, below AA
     for 13-14px text; this red clears it while keeping the same meaning. */
  --danger-ink: #b42318;
  --danger-surface: #b42318;
  --danger-soft: #fef5f5;

  /* --navy and --white do double duty: they are surfaces *and* text inks. The
     dark theme redefines both to dark surfaces, so anything that painted text
     with them turned into dark-on-dark. These are the ink-only twins, holding
     today's light values here so switching to them changes nothing above. */
  --navy-ink: #3b3028;
  --white-ink: #ffffff;

  /* Accent inks: the bright accents stay for fills and borders, where the 3:1
     non-text rule applies, and these darker siblings carry any text. */
  --accent-blue-ink: #1f618d;
  --accent-orange-ink: #80512f;
  --accent-yellow-ink: #7a5f00;
  --accent-purple-ink: #7d3c98;

  --white: #ffffff;
  --off-white: #faf7f0;
  --border-light: #e9e1d4;
  --border: #d9cebd;

  --forest-green: #385640;
  --forest-green-light: #4d6d50;
  /* --forest-green is a light ink in the dark theme, so the cards and buttons
     that use it as a surface need their own value to keep white text on them.
     Identical to --forest-green here, so light mode does not move. */
  --forest-green-surface: #4a3628;

  --accent-purple: #9b59b6;
  --accent-blue: #3498db;
  --accent-orange: #a8784d;
  --accent-yellow: #f1c40f;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Type scale. Seven steps, nothing between them: every font size in the
     stylesheet is meant to be one of these, so a heading, a card title and a
     caption never differ by the couple of pixels that read as a mistake. */
  --fs-xs: 0.75rem;    /* chips, captions, mockup micro-type */
  --fs-sm: 0.875rem;   /* labels, eyebrows, secondary meta */
  --fs-base: 1rem;     /* body copy */
  --fs-md: 1.125rem;   /* lead paragraphs, card titles */
  --fs-lg: 1.5rem;     /* sub-headings */
  --fs-xl: 2rem;       /* section headings */
  --fs-display: clamp(2.5rem, 5vw, 3.5rem); /* hero only */

  /* Icon tile sizes. Small sits inline with text, medium heads a card, large
     carries a step or an empty-state illustration. */
  --tile-sm: 30px;
  --tile-md: 52px;
  --tile-lg: 64px;

  /* Card system: one padding, one radius, one hover lift. */
  --card-pad: 24px;
  --card-lift: -3px;

  --shadow-xs: 0 1px 3px rgba(28, 38, 51, 0.05);
  --shadow-sm: 0 2px 8px rgba(28, 38, 51, 0.06);
  --shadow-md: 0 6px 20px rgba(28, 38, 51, 0.08);
  --shadow-lg: 0 12px 36px rgba(28, 38, 51, 0.1);
  --shadow-xl: 0 20px 60px rgba(28, 38, 51, 0.16);
  --shadow-green: 0 6px 20px rgba(118, 82, 55, 0.16);

  /* Motion. Durations are short on purpose: this app switches screens, opens
     dialogs and swaps whole lists, so anything above ~380ms starts to feel like
     waiting rather than responding. The curves do the smoothing instead of the
     length. */
  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 380ms;

  /* Decelerating: fast out of the gate, slow into the target. The default for
     anything the user initiated, because it reads as responsive. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Symmetric: for things that move within the screen, such as a tab swap. */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* A small overshoot. Reserved for things that appear under the finger, such
     as a button press or a dialog, where a little weight reads as physical. */
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);

  --transition-fast: var(--dur-fast) var(--ease-out);
  --transition-normal: var(--dur-base) var(--ease-out);
  /* Everything a card-like click target changes when it is hovered, pressed or
     selected. Declared once so a subject card, a topic row and a level card
     all start and finish their movement on the same beat instead of drifting
     at rates copied around by hand. border-radius is deliberately absent: no
     rule here changes it, so transitioning it only costs style recalc.
     Every item repeats the timing on purpose. In the transition shorthand a
     time binds to that one comma item only - the others fall back to 0s and
     snap - so a trailing duration would leave everything but the last property
     un-animated. */
  --transition-surface:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal),
    color var(--transition-normal);

  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Outfit', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}

/* Keep the product interface clear and friendly; the landing headline uses an
   editorial serif for Sapwood's quieter, more lasting voice. */
h1, h2, h3, h4, h5, h6,
button, label, small, input, select, textarea,
[class*="eyebrow"], [class*="badge"], [class*="chip"],
[class*="tag"], [class*="meta"], [class*="label"] {
  font-family: var(--font-ui);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

input, select, textarea {
  font-family: inherit;
}

/* ============================================================
   Reusable Components
   ============================================================ */

/* Screen system */
.screen {
  display: none;
  min-height: 100vh;
}

/* A screen used to appear with no transition at all, because switching screens
   was a bare display swap. The old screen is removed from the layout before the
   new one is painted, so there is nothing to cross-fade from; the entrance is
   therefore a short rise, which is enough to register the change without
   delaying it.
   Fill mode is backwards, not both: a filled-in transform (even the identity
   matrix the animation resolves to once it is done) keeps the screen as a
   containing block for position:fixed descendants. The course options menu is
   position:fixed inside the hub screen, and it is positioned from viewport
   clientX/clientY, so a lingering transform made it track the whole scrolled
   hub instead of the viewport and it appeared far above the three dots. */
.screen.active {
  display: block;
  animation: screenIn var(--dur-slow) var(--ease-out) backwards;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: var(--fs-base);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  line-height: 1.2;
}

.btn:active {
  transform: scale(0.97);
}

/* Bark/wood is the primary button color; leaf green stays a supporting accent. */
.btn-green {
  background: var(--green-btn);
  color: var(--white-ink);
  box-shadow: var(--shadow-green);
}

.btn-green:hover {
  background: var(--green-btn-hover);
  transform: translateY(-1px);
}

.btn-green:active {
  background: var(--green-btn-active);
}

.btn-green-dark {
  background: var(--forest-green-surface);
  color: var(--white-ink);
  box-shadow: 0 6px 20px rgba(20, 83, 45, 0.3);
}

.btn-green-dark:hover {
  background: var(--forest-green-light);
  transform: translateY(-1px);
}

.btn-outline {
  background: var(--white);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
}

.btn-outline:hover {
  border-color: var(--primary-green);
  color: var(--green-ink);
  transform: translateY(-1px);
}

.btn-ghost {
  background: var(--primary-green-soft);
  color: var(--forest-green);
}

.btn-ghost:hover {
  background: var(--primary-green-light);
  transform: translateY(-1px);
}

.btn-white {
  background: var(--white);
  color: var(--forest-green);
}

.btn-white:hover {
  transform: translateY(-1px);
}

/* Ghost on a dark or photographic surface: transparent fill with a light
   outline. Exists so the final CTA does not need an inline style attribute. */
.btn-ghost-dark {
  background: transparent;
  color: var(--white-ink);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white-ink);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 16px 32px;
  font-size: var(--fs-md);
}

.btn-sm {
  padding: 8px 16px;
  font-size: var(--fs-sm);
}

.btn-block {
  width: 100%;
}

/* Icons */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  font-size: 1.6rem;
  flex-shrink: 0;
}

.icon-circle.sm {
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
  border-radius: var(--radius);
}

.icon-circle.xs {
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  border-radius: var(--radius-sm);
}

.bgc-green { background: var(--primary-green-extra-light); }
.bgc-purple { background: var(--accent-purple-tint); }
.bgc-blue { background: var(--accent-blue-tint); }
.bgc-orange { background: var(--accent-orange-tint); }
.bgc-yellow { background: var(--accent-yellow-tint); }

/* Icon tiles borrow both halves of the palette: the tinted background and the
   matching ink. Emoji used to bring their own colours here. */
.sc-icon.bgc-green, .tg-icon.bgc-green, .wsr-ic.bgc-green { color: var(--green-ink); }
.sc-icon.bgc-orange, .tg-icon.bgc-orange, .wsr-ic.bgc-orange { color: var(--accent-orange-ink); }
.sc-icon.bgc-purple, .tg-icon.bgc-purple, .wsr-ic.bgc-purple { color: var(--accent-purple-ink); }
.sc-icon.bgc-blue, .tg-icon.bgc-blue, .wsr-ic.bgc-blue { color: var(--accent-blue-ink); }
.sc-icon.bgc-yellow, .tg-icon.bgc-yellow, .wsr-ic.bgc-yellow { color: var(--accent-yellow-ink); }
.bgc-mint { background: var(--primary-green-soft); }

/* These sit on the pale tints above, so they use the darker accent inks. The
   bright accents are 1.7-3.2:1 on white and fail there too. */
.tc-green { color: var(--green-ink); }
.tc-purple { color: var(--accent-purple-ink); }
.tc-blue { color: var(--accent-blue-ink); }
.tc-orange { color: var(--accent-orange-ink); }
.tc-yellow { color: var(--accent-yellow-ink); }

/* Sapwood brand lockup */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-lockup .logo-mark {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.brand-lockup .logo-mark .logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Hidden SVG sprite (icons referenced via <use>) */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Inline SVG icons */
.ic {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  vertical-align: -0.2em;
}

.ic-fill {
  fill: currentColor;
  stroke: none;
}

/* The icons scale with the font, so a stroke-width in user units scales with
   them too and a 12px chevron would draw a visibly lighter line than a 24px
   icon. Each size therefore overrides stroke-width so the rendered line stays
   about 1.7px: stroke-width = 1.7 * 24 / (size in px). */
.ic-xs {
  width: 0.8em;
  height: 0.8em;
  stroke-width: 3.2;
}

.ic-lg {
  width: 1.6em;
  height: 1.6em;
  stroke-width: 1.6;
}

/* Icon hover micro-motion */
.nav-icon-btn .ic {
  transition: transform var(--transition-fast);
}

.nav-icon-btn:hover .ic {
  transform: scale(1.18);
}

.sidebar-nav-item .icon .ic {
  transition: transform var(--transition-fast);
}

.sidebar-nav-item:hover .icon .ic,
.sidebar-nav-item.active .icon .ic {
  transform: scale(1.12);
}

/* Rating stars pop in brand yellow */
.rating-card .ic-fill,
.rate-footer-btn .ic-fill {
  color: var(--accent-yellow);
}

.wizard-header h1 .brand-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.wizard-header h1 .brand-icon .logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-lockup .logo-text {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--navy-ink);
  letter-spacing: -0.02em;
}

.brand-lockup .logo-text .brand-sap { color: var(--navy-ink); }
.brand-lockup .logo-text .brand-wood { color: var(--wood-ink);
}

.site-footer .brand-lockup .logo-text .brand-sap { color: var(--white-ink); }
.site-footer .brand-lockup .logo-text .brand-wood { color: var(--sapwood-gold-light); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--primary-green-light);
  color: var(--green-ink);
}

.badge-purple { background: var(--accent-purple-tint); color: var(--accent-purple-ink); }
.badge-blue { background: var(--accent-blue-tint); color: var(--accent-blue-ink); }
.badge-gray { background: #eef1f0; color: var(--text-secondary); }

/* Avatar */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-green-light);
  color: var(--green-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   LANDING PAGE
   ============================================================ */

/* Header / Navbar */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}

/* The edge is a soft fade rather than a 1px rule: the page scrolls under the
   bar and dims out, which reads calmer than a hard border appearing at the
   moment the user starts scrolling. */
.landing-nav::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: 14px;
  background: linear-gradient(180deg, rgba(28, 38, 51, 0.07), rgba(28, 38, 51, 0));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.landing-nav.scrolled::after {
  opacity: 1;
}

.landing-nav .nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 24px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--green-ink);
  background: var(--primary-green-soft);
}

/* Touch pointers get a 44px-tall hit area, the minimum comfortable target. */
@media (pointer: coarse) {
  .nav-links a {
    padding: 12px 16px;
  }

  .nav-icon-btn {
    width: 44px;
    height: 44px;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--off-white);
  border: 1px solid var(--border-light);
  transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  font-size: 1.1rem;
}

.nav-icon-btn:hover {
  background: var(--primary-green-soft);
  border-color: var(--primary-green);
}

#navMenuBtn {
  display: none;
}

.nav-login {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background-color var(--transition-fast), border-radius var(--transition-fast), color var(--transition-fast);
}

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

/* Hero Section
   One background treatment: a single soft gradient, plus the grid overlay in
   `.hero-grid`. The blurred blobs and the extra radial glow that used to sit
   here were removed so the headline and the product mockup are the loudest
   things on the fold. */
.hero-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-green-light);
  color: var(--green-ink);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.hero-badge-tag .dot {
  width: 6px;
  height: 6px;
  background: var(--green-btn);
  border-radius: 50%;
}

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 900;
  color: var(--navy-ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 500px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.hero-benefits {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.hero-benefit .check {
  color: var(--green-ink);
  font-weight: 900;
}

/* Hero visual - device mockup */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-mockup {
  width: 100%;
  max-width: 560px;
  position: relative;
}

.laptop-frame {
  background: var(--navy);
  border-radius: 14px 14px 0 0;
  padding: 14px 14px 0;
  box-shadow: var(--shadow-xl);
}

.laptop-screen {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.laptop-base {
  height: 12px;
  background: #06090d;
  border-radius: 0 0 8px 8px;
  position: relative;
}

.laptop-base::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}

.screen-grid {
  background: var(--primary-green-soft);
  padding: 16px;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}

.screen-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.screen-logo {
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--navy-ink);
  display: flex;
  align-items: center;
  gap: 4px;
}

.screen-logo .sm {
  width: 16px;
  height: 16px;
  background: var(--primary-green);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: #fff;
}

.screen-hello {
  display: flex;
  gap: 6px;
  align-items: center;
}

.screen-hello .dot-sm {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-green-light);
}

.screen-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* Phone overlapping laptop */

/* Features / how it works */
.features {
  border-top: 1px solid var(--border-light);
  position: relative;
  z-index: 0;
  padding: 96px 24px;
  background:
    radial-gradient(800px 380px at 50% -12%, rgba(168, 120, 77, 0.06), transparent),
    var(--primary-green-soft);
  max-width: 100%;
  margin: 0;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-header .eyebrow {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green-ink);
  margin-bottom: 12px;
}

.section-header h2 {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--navy-ink);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  line-height: 1.2;
}

.section-header p {
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  font-size: var(--fs-md);
}

.steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.step-item {
  position: relative;
  text-align: center;
  padding: var(--card-pad);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
}

/* A faint track joins the four step tiles so the section reads as one
   sequence rather than four unrelated columns. It runs from the right edge of
   one tile to the left edge of the next: half a tile plus half the 40px gap
   in, and it stops before the last item. */
.step-item::after {
  content: "";
  position: absolute;
  top: calc(var(--card-pad) + var(--tile-lg) / 2);
  left: calc(50% + var(--tile-lg) / 2 + 8px);
  width: calc(100% - var(--tile-lg) - 16px);
  height: 2px;
  background: var(--border-light);
  z-index: 0;
}

.step-item:last-child::after {
  content: none;
}

.step-icon-wrap {
  position: relative;
  z-index: 1;
  width: var(--tile-lg);
  height: var(--tile-lg);
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 16px;
}

.step-item .step-num {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

.step-item h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy-ink);
  margin-bottom: 8px;
}

.step-item p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Subtle woodgrain lines add texture to the categories panel without a plant motif. */
.categories::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -10px;
  width: 320px;
  height: 150px;
  background: repeating-linear-gradient(166deg, transparent 0 12px, rgba(168,120,77,.09) 13px 14px, transparent 15px 28px);
  -webkit-mask-image: radial-gradient(ellipse, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 0%, transparent 72%);
  pointer-events: none;
  z-index: -1;
}

/* Course categories */
.categories {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(168, 120, 77, 0.06), transparent),
    var(--white);
  padding: 96px 24px;
}

.categories-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* One card, two sizes: `--card-pad` and `--radius-lg` are the shared values,
   and the only hover is the small lift below, reserved for cards that navigate
   (category cards). Cards that don't navigate get a border highlight instead. */
.category-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: var(--transition-surface);
  cursor: pointer;
  position: relative;
  text-align: left;
  font: inherit;
  color: inherit;
}

.category-card:hover {
  transform: translateY(var(--card-lift));
  box-shadow: var(--shadow-md);
  border-color: var(--primary-green);
}

.category-card:active {
  transform: translateY(0) scale(0.99);
}

.category-card:focus-visible {
  outline: 3px solid var(--green-ink);
  outline-offset: 2px;
}

.category-card .cat-icon {
  width: var(--tile-md);
  height: var(--tile-md);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.category-card .cat-icon .ic {
  width: 26px;
  height: 26px;
}

.category-card h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy-ink);
}

.category-card .count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 600;
}

.category-card .arrow {
  position: absolute;
  top: 22px;
  right: 18px;
  width: var(--tile-sm);
  height: var(--tile-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-green-soft);
  font-size: var(--fs-md);
  color: var(--text-muted);
  transition: var(--transition-surface);
}

.category-card .arrow .ic {
  width: 16px;
  height: 16px;
}

.category-card:hover .arrow {
  background: var(--green-btn);
  color: var(--white-ink);
  transform: translateX(2px);
}

/* Testimonials */
.testimonials {
  border-top: 1px solid var(--border-light);
  position: relative;
  z-index: 0;
  padding: 96px 24px;
  background:
    radial-gradient(800px 380px at 50% -16%, rgba(168, 120, 77, 0.04), transparent),
    var(--primary-green-soft);
}

.testimonials-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}

.testimonials-left .section-text h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--navy-ink);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.2;
}

.testimonials-left .section-text p {
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.65;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Testimonial quotes. A quote is not a control, so the hover only firms up the
   border and shadow; the card never lifts. The staggered offset on even cards
   was removed so the two columns align. */
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-xs);
  transition: var(--transition-surface);
}

.testimonial-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.testimonial-card .stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--accent-yellow-ink);
  font-size: var(--fs-sm);
}

.testimonial-card blockquote {
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: 1.65;
}

.feature-card .feature-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 2px;
}

.feature-card .feature-icon .ic {
  width: 22px;
  height: 22px;
}

.feature-card h3 {
  margin: 0;
  color: var(--navy-ink);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.feature-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
}

.testimonial-card .author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.testimonial-card .author .name {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--navy-ink);
}

.testimonial-card .author .role {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 600;
}

/* Final CTA */
.final-cta {
  background: #3b3028;
  padding: 96px 24px;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 160% at 100% 0%, rgba(214, 185, 137, 0.14), transparent 54%);
  pointer-events: none;
}

.final-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.final-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--white-ink);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.15;
}

.final-cta p {
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  margin-bottom: 36px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.final-cta .cta-btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Footer */
.site-footer {
  background: radial-gradient(800px 320px at 50% 0%, rgba(255,255,255,0.05), transparent), var(--navy);
  color: rgba(255,255,255,0.85);
  padding: 64px 24px 32px;
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 32px;
}

.footer-brand .brand-lockup .logo-text {
  color: var(--white-ink);
}

.footer-brand p {
  font-size: 0.9rem;
  line-height: 1.65;
  margin-top: 16px;
  max-width: 300px;
  opacity: 0.75;
}

.footer-col h3 {
  color: var(--white-ink);
  font-weight: 800;
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--green-ink-bright);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--white-ink);
}

/* ============================================================
   LANDING PAGE - visual overhaul
   Depth and hierarchy on top of the original layout: an aurora
   hero, a product-style app mockup, value props, a stats band and
   an FAQ. Built on the existing tokens so both themes keep working.
   ============================================================ */

/* Nav gains a shadow once the page has scrolled under it. */
/* The scrolled state now only turns on the fade in `.landing-nav::after`. */

/* Anchor targets stop below the sticky nav instead of sliding under it. */
#why,
#how-it-works,
#cursos,
#testimonials,
#faq {
  scroll-margin-top: 88px;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1000px 600px at 78% 12%, rgba(168, 120, 77, 0.10), transparent 68%),
    linear-gradient(180deg, var(--white) 0%, var(--primary-green-soft) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 84px 24px 120px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--white) 100%);
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(167deg, transparent 0 38px, rgba(168, 120, 77, 0.1) 39px 40px, transparent 41px 68px);
  -webkit-mask-image: radial-gradient(70% 76% at 82% 48%, #000 0%, transparent 76%);
  mask-image: radial-gradient(70% 76% at 82% 48%, #000 0%, transparent 76%);
  opacity: 0.55;
}

/* The highlighted word carries a soft marker stroke. */
.hero h1 .accent {
  color: var(--wood-ink);
  background: linear-gradient(transparent 63%, var(--sapwood-gold-pale) 63%);
  padding: 0 0.06em;
  border-radius: var(--radius-sm);
}

.hero h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -.055em;
}

.hero-demo-btn .hero-play {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-left: -6px;
  background: var(--primary-green-light);
  color: var(--green-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-play .ic {
  width: 0.72em;
  height: 0.72em;
  fill: currentColor;
  stroke: none;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.trust-meta {
  display: grid;
  gap: 2px;
}

.trust-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--accent-yellow-ink);
  font-size: var(--fs-sm);
  line-height: 1;
}

/* Stars are sprite icons, not ★ glyphs: one shape, one colour, identical on
   every platform. */
.stars .ic,
.trust-stars .ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: none;
}

.stars .ic.off {
  fill: none;
  stroke: currentColor;
  opacity: 0.4;
}

.trust-text {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-secondary);
}

/* ---- Hero mockup ---- */
.hero-mockup {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.app-window {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.app-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: var(--off-white);
  border-bottom: 1px solid var(--border-light);
}

.chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.cd1 { background: #ff5f57; }
.cd2 { background: #febc2e; }
.cd3 { background: #28c840; }

.app-url {
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
}

.app-body {
  padding: 16px;
  background: var(--primary-green-soft);
  display: grid;
  gap: 12px;
}

.app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--navy-ink);
}

.app-brand-mark {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--primary-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-brand-mark svg {
  width: 14px;
  height: 14px;
}

.app-brand-mark svg path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.app-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--green-ink);
  background: var(--primary-green-light);
  border-radius: var(--radius-pill);
}

.app-ai-pill .ic {
  width: 0.9em;
  height: 0.9em;
}

.app-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.app-stat {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  display: grid;
  gap: 3px;
}

.app-stat-ic {
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.app-stat-ic .ic {
  width: 15px;
  height: 15px;
}

.app-stat .num {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--navy-ink);
}

.app-stat .lbl {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
}

.app-course {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 11px 12px;
  display: grid;
  gap: 8px;
}

.app-course-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.app-course-ic {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--primary-green-extra-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.app-course-ic .ic {
  width: 16px;
  height: 16px;
}

.app-course-meta {
  display: grid;
  min-width: 0;
  flex: 1;
}

.app-course-meta .ttl {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--navy-ink);
}

.app-course-meta .sub {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
}

.app-course-pct {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--green-ink);
}

.app-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border-light);
  overflow: hidden;
}

.app-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-green-dark), var(--primary-green));
}

/* ---- Value propositions ---- */
.value {
  padding: 96px 24px;
  background: var(--white);
}

.value-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.value-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  display: grid;
  gap: 12px;
  align-content: start;
  transition: var(--transition-surface);
}

/* A value proposition is not a control: highlight the border, do not lift. */
.value-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

.value-icon {
  width: var(--tile-md);
  height: var(--tile-md);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.value-icon .ic {
  width: 24px;
  height: 24px;
}

.value-card h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy-ink);
}

.value-card p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---- Stats band ---- */
.stats-band {
  background: var(--navy);
  padding: 56px 24px;
}

.stats-band-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}

.sb-item {
  display: grid;
  gap: 6px;
}

.sb-num {
  font-size: var(--fs-xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--green-ink-bright);
}

.sb-lbl {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
}

/* ---- FAQ ---- */
.faq {
  border-top: 1px solid var(--border-light);
  position: relative;
  z-index: 0;
  padding: 96px 24px;
  background:
    radial-gradient(900px 400px at 50% -12%, rgba(168, 120, 77, 0.06), transparent),
    var(--primary-green-soft);
}

.faq-inner {
  max-width: 820px;
  margin: 0 auto;
}

.lp-faq-list {
  display: grid;
  gap: 12px;
}

.lp-faq-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-surface);
}

.lp-faq-item[open] {
  border-color: var(--primary-green);
  box-shadow: var(--shadow-sm);
}

.lp-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--navy-ink);
}

.lp-faq-item summary::-webkit-details-marker {
  display: none;
}

.lp-faq-q {
  min-width: 0;
}

.lp-faq-chev {
  flex: none;
  width: var(--tile-sm);
  height: var(--tile-sm);
  border-radius: 50%;
  background: var(--primary-green-soft);
  color: var(--green-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.lp-faq-chev .ic {
  width: 16px;
  height: 16px;
}

.lp-faq-item[open] .lp-faq-chev {
  transform: rotate(180deg);
  background: var(--primary-green-light);
}

.lp-faq-answer {
  padding: 0 22px 20px;
}

.lp-pricing {
  border-top: 1px solid var(--border-light);
  padding: 96px 24px;
  background:
    radial-gradient(800px 360px at 50% -14%, rgba(168, 120, 77, 0.04), transparent),
    var(--white);
}

.lp-pricing-inner {
  max-width: 800px;
  margin: 0 auto;
}

.pricing-cards {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* A dotted track in the gap joins the two plans, the same gesture the steps
   grid uses to read as one sequence rather than two separate tiles. It sits at
   the vertical centre, which lands on the price line in both cards. */
.pricing-cards::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  border-top: 2px dotted var(--border-light);
  pointer-events: none;
}

.price-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  display: grid;
  gap: 8px;
  box-shadow: var(--shadow-xs);
}

.price-card.is-featured {
  position: relative;
  border-color: var(--primary-green);
  box-shadow: var(--shadow-md);
}

.featured-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green-btn);
  color: var(--white-ink);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.price-card h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy-ink);
}

.price-num {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--navy-ink);
}

.price-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

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

  /* Stacked, there is no gap left to bridge. */
  .pricing-cards::before {
    content: none;
  }
}

/* FAQ open/close animation.
   A native <details> snaps open. The answer lives in the details content slot,
   so that slot is given an explicit block size it can transition from 0 to
   `auto`. `interpolate-size: allow-keywords` makes `auto` a valid transition
   target, and `allow-discrete` lets `content-visibility` flip when the
   animation ends, keeping closed answers out of the tab order. Browsers that
   don't support either keyword simply keep today's instant open. */
:root {
  interpolate-size: allow-keywords;
}

.lp-faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--dur-base) var(--ease-out),
    content-visibility var(--dur-base) allow-discrete;
}

.lp-faq-item[open]::details-content {
  block-size: auto;
}

/* ---- Refinements to existing landing pieces ---- */
.step-item {
  border-radius: var(--radius-lg);
  transition: var(--transition-surface);
}

/* Steps do not navigate, so they get the border highlight rather than a lift. */
.step-item:hover {
  background: var(--white);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

/* ---- Scroll reveal ----
   The hidden state is scoped to .js, which the app adds at boot. Without
   JavaScript the marketing content stays visible instead of sitting at
   opacity 0 waiting for an observer that never arrives. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Landing responsive ---- */
@media (max-width: 1100px) {
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .value,
  .faq {
    padding: 64px 20px;
  }

  .value-grid {
    grid-template-columns: 1fr;
  }

  .stats-band-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .app-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-trust {
    flex-wrap: wrap;
  }
}

/* ---- Landing dark theme ---- */
body.dark .hero {
  background: radial-gradient(1200px 620px at 50% 0%, rgba(255,255,255,0.22), transparent),
    linear-gradient(180deg, var(--white) 0%, var(--primary-green-soft) 100%);
}

body.dark .hero-grid {
  opacity: 0.4;
}

body.dark .hero-bg::after {
  background: linear-gradient(180deg, rgba(245, 252, 249, 0) 0%, var(--primary-green-soft) 100%);
}

body.dark .value-card {
  background: var(--navy-500);
}

/* ============================================================
   AUTH SCREEN
   ============================================================ */

.auth-screen {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 24px;
  background: linear-gradient(135deg, var(--primary-green-soft) 0%, var(--white) 100%);
}

.screen.active.auth-screen {
  display: flex;
}

.auth-card-wrap {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 40px 36px;
  border: 1px solid var(--border-light);
}

/* ---------- Plans screen ---------- */
/* The comparison card layout. Two side-by-side pricing cards with a shared
   header, centered but not squeezed into the auth width: a plan comparison
   needs room to compare. */
.plans-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.plans-head {
  text-align: center;
  margin-bottom: 36px;
}

.plans-logo {
  justify-content: center;
  margin-bottom: 8px;
}

.plans-head h1 {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--navy-ink);
  margin: 8px 0 10px;
}

.plans-sub {
  color: var(--text-secondary);
  font-size: 1rem;
}

.plans-notice {
  margin: 18px auto 0;
  max-width: 560px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--primary-green-soft);
  color: var(--navy-ink);
  border: 1px solid var(--border-light);
  font-weight: 600;
}

/* Launch-window announcement on the plans screen: same soft-green pair as the
   notice above, but more than one line, so the two paragraphs stack. */
.plans-promo {
  margin: 18px auto 0;
  max-width: 560px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--primary-green-soft);
  color: var(--navy-ink);
  border: 1px solid var(--border-light);
  text-align: left;
}

.plans-promo p {
  margin: 0;
}

.plans-promo p + p {
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 600;
}

#plansPromoH {
  font-weight: 800;
}

.plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}

.plan-card {
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.plan-card--pro {
  border-color: var(--primary-green);
  background: linear-gradient(180deg, var(--primary-green-extra-light) 0%, var(--white) 45%);
}

.plan-tier {
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--navy-ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-once {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.plan-price {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--navy-ink);
  margin: 8px 0 16px;
}

.plan-card--pro .plan-price {
  color: var(--green-ink);
}

.plan-feats {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  flex: 1;
}

.plan-feats li {
  position: relative;
  padding: 8px 0 8px 30px;
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.45;
}

.plan-feats li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-green-light);
  color: var(--green-ink);
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plans-skip {
  display: block;
  margin: 26px auto 0;
}

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

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-header h1 {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--navy-ink);
  margin: 20px 0 8px;
}

.auth-header p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.auth-tabs {
  display: flex;
  background: var(--off-white);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: 28px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), border-radius var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-tab.active {
  background: var(--white);
  color: var(--green-ink);
  box-shadow: var(--shadow-sm);
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.input-wrap {
  position: relative;
}

.input-wrap .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  font-size: 1rem;
  color: var(--text-muted);
  pointer-events: none;
}

.input-wrap input,
.input-wrap select {
  width: 100%;
  padding: 13px 14px 13px 42px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--off-white);
  transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), border-radius var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.input-wrap input:focus,
.input-wrap select:focus {
  border-color: var(--primary-green);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(118, 82, 55, 0.12);
}

.lang-select {
  cursor: pointer;
}

.nav-lang-select {
  max-width: 112px;
  padding: 6px 8px;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
}

.auth-card-wrap { position: relative; }

.auth-lang {
  position: absolute;
  top: 14px;
  right: 14px;
  max-width: 112px;
  padding: 5px 7px;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
}

.nav-lang-mobile { display: none; }

@media (max-width: 480px) {
  .auth-lang {
    position: static;
    display: block;
    margin: 0 auto 14px;
  }
}

.auth-msg {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 12px;
  text-align: center;
  min-height: 20px;
}

.auth-msg.error { color: var(--danger-ink); }
.auth-msg.success { color: var(--green-ink); }

.auth-alt {
  text-align: center;
  margin-top: 20px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.auth-alt button {
  color: var(--green-ink);
  font-weight: 800;
}

/* ============================================================
   HUB / DASHBOARD
   ============================================================ */

.hub-layout {
  display: flex;
  min-height: 100vh;
  background: var(--primary-green-soft);
}

/* Sidebar */
.hub-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.hub-sidebar .brand-lockup {
  padding: 0 8px;
  margin-bottom: 40px;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-secondary);
  transition: transform var(--transition-fast), border-radius var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.sidebar-nav-item .icon {
  width: 20px;
  text-align: center;
  font-size: 1.1rem;
}

.sidebar-nav-item:hover {
  background: var(--primary-green-soft);
  color: var(--green-ink);
}

.sidebar-nav-item.active {
  background: var(--primary-green-extra-light);
  color: var(--green-ink);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(118, 82, 55, 0.18);
}

.sidebar-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 2px 6px;
  color: #ffffff;
  background: var(--green-btn);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  text-align: center;
}

.review-summary {
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: .88rem;
  font-weight: 700;
}

.review-list { display: grid; gap: 8px; }

.review-row {
  padding: 12px 14px;
  background: var(--primary-green-soft);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}

.review-row-q { color: var(--text-primary); font-weight: 700; font-size: .9rem; }
.review-row-meta { margin-top: 4px; color: var(--text-secondary); font-size: .78rem; }

.review-meta {
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.review-course { margin-top: 4px; color: var(--text-secondary); font-size: .84rem; }
.review-question { margin: 14px 0 16px; color: var(--text-primary); font-size: 1.15rem; line-height: 1.4; }
.review-options { display: grid; gap: 8px; }

.review-option { width: 100%; text-align: left; }
.review-option.is-correct { border-color: var(--green-accent) !important; background: var(--primary-green-extra-light) !important; color: var(--green-ink) !important; }
.review-option.is-wrong { border-color: var(--danger-ink) !important; background: var(--danger-soft) !important; color: var(--danger-ink) !important; }

.review-feedback {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 700;
}
.review-feedback.is-correct { color: var(--green-ink); background: var(--primary-green-extra-light); }
.review-feedback.is-wrong { color: var(--danger-ink); background: var(--danger-soft); }
.review-explanation { margin-top: 6px; color: var(--text-secondary); font-weight: 500; font-size: .84rem; line-height: 1.5; }
.review-feedback + .btn { margin-top: 12px; }
.review-done { padding: 20px 0; text-align: center; }
.review-done h3 { margin: 0 0 16px; color: var(--text-primary); font-size: 1.05rem; }

.sidebar-card {
  background: #3b3028;
  border: 1px solid rgba(214, 185, 137, 0.2);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 20px;
  color: var(--white-ink);
  position: relative;
  overflow: hidden;
}

.sidebar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 110% at 100% 0%, rgba(214, 185, 137, 0.16), transparent 56%), linear-gradient(145deg, transparent 0%, rgba(74, 54, 40, 0.9) 100%);
  pointer-events: none;
}

.sidebar-card > * { position: relative; z-index: 1; }

.sidebar-card::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -32px;
  width: 140px;
  height: 140px;
  background: url("icons/sapwood-watermark.svg") center / contain no-repeat;
  opacity: 0.17;
  transform: rotate(-8deg);
  pointer-events: none;
}

.sidebar-card .sidebar-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 8px;
  opacity: 1;
}

.sidebar-card p {
  font-size: 0.82rem;
  opacity: 0.85;
  margin-bottom: 16px;
  line-height: 1.5;
}

.sidebar-card .btn {
  position: relative;
  z-index: 2;
  font-size: 0.8rem;
  padding: 9px 16px;
}

/* Hub main area */
.hub-main {
  flex: 1;
  padding: 32px 40px;
  overflow-x: hidden;
}

/* The phone tab bar is rendered in the hub markup but only shown below 860px,
   where the sidebar nav is replaced instead of squeezed into a scroller. */
.mobile-tabbar {
  display: none;
}

/* Top bar */
.hub-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 24px;
}

.hub-search {
  flex: 1;
  max-width: 420px;
  position: relative;
}

.hub-search .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
}

.hub-search input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 0.92rem;
  color: var(--text-primary);
  outline: none;
  transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), border-radius var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.hub-search input:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(118, 82, 55, 0.12);
}

.hub-top-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.notif-btn {
  cursor: pointer;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border: none;
}

.notif-btn .notif-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  background: var(--accent-orange);
  border-radius: 50%;
  border: 2px solid var(--white);
}

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 50;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 8px 10px 6px;
  color: var(--navy-ink);
}

.notif-clear {
  color: var(--green-ink);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.notif-item:hover {
  background: var(--primary-green-soft);
}

.notif-icon {
  flex-shrink: 0;
  color: var(--green-ink);
  display: inline-flex;
  margin-top: 2px;
}

.notif-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.notif-text {
  font-weight: 600;
}

.notif-action {
  color: var(--green-ink);
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.notif-action:hover { text-decoration: underline; }

.notif-dismiss {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.notif-dismiss:hover { background: var(--off-white); color: var(--text-primary); }

.hub-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.hub-icon-btn:hover { color: var(--green-ink); background: var(--primary-green-soft); }

.hub-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 6px 14px 6px 6px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.hub-user .user-meta {
  line-height: 1.1;
}

.hub-user .user-meta .name {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--navy-ink);
}

.hub-user .user-meta .email {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.hub-user .caret {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 190px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
  text-align: left;
}

.user-menu button:hover {
  background: var(--primary-green-soft);
  color: var(--green-ink);
}

/* Hub content layout */
.hub-content {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

/* ------------------------------------------------------------
   Top bar search results
   ------------------------------------------------------------
   Single column, unlike .hub-content: the other tabs pair a main
   column with a 320px sidebar, and a list of matches has no sidebar
   to sit beside. Capped so a long run of results stays a readable
   measure rather than stretching across a wide screen. */
.hub-search-content {
  max-width: 860px;
  grid-template-columns: 1fr;
}

.hub-search-head {
  margin-bottom: 20px;
}

.hub-search-head h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* Each hit is a plain block so the course row inside it can keep its own
   click target, and the whole row can also take focus from Tab. */
.hub-search-hit {
  margin-bottom: 8px;
  border-radius: var(--radius);
  transition: border-radius var(--transition-fast), transform var(--transition-fast);
}

.hub-search-hit:focus-visible {
  outline: 2px solid var(--green-btn);
  outline-offset: 2px;
}

.hub-search-group {
  margin-bottom: 26px;
}

.hub-search-group-h {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hub-search-group .course-row,
.hub-search-group .settings-item {
  margin-bottom: 8px;
}

.hub-search-hit-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hub-search-hit-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.hub-search-hit-desc {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* The rebuilt search panel: courses reuse the course row, while lesson and
   settings hits use a compact button so every result is one clear tap target. */
.search-group {
  margin: 22px 0 10px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.search-group:first-of-type { margin-top: 0; }

.search-lesson,
.search-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.search-lesson:hover,
.search-action:hover {
  border-color: var(--primary-green);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

.search-lesson-icon {
  flex: none;
  width: 36px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-green-soft);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--green-ink);
}

.search-lesson-icon .ic {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.search-lesson-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-lesson-title {
  font-size: 0.9rem;
  font-weight: 700;
}

.search-lesson-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.search-action {
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 700;
}

.search-action .ic,
.search-lesson > .ic {
  flex: none;
  color: var(--green-ink);
}

.hub-tab {
  display: none;
}

.hub-tab.active {
  display: block;
}

/* Greeting */
.greeting {
  margin-bottom: 28px;
  position: relative;
}

.greeting h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--navy-ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.greeting p {
  color: var(--text-secondary);
  font-size: 1rem;
}

.greeting .hello-mark {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  color: var(--green-ink);
  opacity: 0.28;
}

.greeting .hello-mark .ic {
  width: 46px;
  height: 46px;
  stroke-width: 1.2;
}

/* Stat cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color var(--transition-normal), border-color var(--transition-normal), border-radius var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal), color var(--transition-normal);
  box-shadow: var(--shadow-xs);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stat-card .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--navy-ink);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.stat-card .stat-growth {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green-ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stat-card .stat-growth.is-limit { color: var(--accent-orange-ink, #a35a00); }

.stat-plan-link {
  align-self: flex-start;
  padding: 0;
  color: var(--green-ink);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.stat-plan-link:hover { text-decoration: underline; }

/* One next action, above the numbers. */
.resume-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding: 20px 24px;
  background: #3b3028;
  color: var(--white-ink);
  border: 1px solid rgba(214, 185, 137, 0.22);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

.resume-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 160% at 100% 0%, rgba(214, 185, 137, 0.18), transparent 52%), linear-gradient(135deg, transparent 0%, rgba(74, 54, 40, 0.9) 100%);
  pointer-events: none;
}

.resume-banner::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -34px;
  width: 260px;
  height: 120px;
  background: repeating-linear-gradient(166deg, transparent 0 11px, rgba(214, 185, 137, 0.12) 12px 13px, transparent 14px 25px);
  -webkit-mask-image: radial-gradient(ellipse, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 0%, transparent 72%);
  pointer-events: none;
}

.resume-banner > * { position: relative; z-index: 1; }
.resume-banner[hidden] { display: none; }

.resume-banner-copy { min-width: 0; }

.resume-banner-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

.resume-banner-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.25;
}

.resume-banner-meta {
  margin: 5px 0 0;
  font-size: 0.8rem;
  opacity: 0.72;
}

@media (max-width: 560px) {
  .resume-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
}

/* Local data needs a visible backup prompt somewhere that is not a settings
   dialog the learner has to go looking for. */
.backup-nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}

.backup-nudge[hidden] { display: none; }

.backup-nudge-icon {
  flex: none;
  color: var(--green-ink);
  display: inline-flex;
}

.backup-nudge-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.84rem;
  line-height: 1.45;
}

.backup-nudge-x {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  font: inherit;
  cursor: pointer;
}

.backup-nudge-x:hover { background: var(--off-white); color: var(--text-primary); }

@media (max-width: 560px) {
  .backup-nudge { flex-wrap: wrap; }
  .backup-nudge-text { flex-basis: calc(100% - 80px); }
}

/* Course management */
.course-panel {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 32px;
}

.course-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.course-panel-header h2 {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--navy-ink);
  margin-bottom: 6px;
}

.course-panel-header p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Four buckets instead of three, with longer labels, in a column that is only
   ~517px wide at a 1280 viewport. Sized so they stay on one row there, and wrap
   to two rather than three on a phone. */
.filter-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--off-white);
  transition: background-color var(--transition-fast), border-radius var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.filter-tab.active {
  background: var(--green-btn);
  color: var(--white-ink);
  box-shadow: var(--shadow-green);
}

/* Course rows.
   The list is one column, but the column is narrow - the hub splits off a
   320px sidebar, so at a 1280 viewport the row is only ~517px wide. Every fixed
   piece of it - padding, thumb, score chip, favourite, three dots - is charged
   against the width the title and description get, and that is what decided the
   sizes below. The text is the point; the furniture stays as small as it can be
   and still be read and hit. */
.course-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), border-radius var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  background: var(--white);
}

.course-row:hover {
  border-color: var(--primary-green);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

.course-thumb {
  width: 44px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--primary-green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  color: var(--green-ink);
}

.course-thumb .ic {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}

.course-info {
  flex: 1;
  min-width: 0;
}

.course-info .course-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy-ink);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-info .course-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.course-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.course-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.course-meta .meta-item .dot {
    color: var(--green-accent);
}

.course-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
}

/* Only bundled samples carry a label now. The published/draft chips are gone
   because every owned course was published and nothing could unpublish one, so
   they stated a constant; a sample differs in kind rather than in state, and
   this label is what tells a learner they do not own it. */
.course-status.sample { background: #eef0fb; color: #3d4a8a; }

/* The trailing "→" used to sit here. It only said "openable", which the hover
   already says, and in the narrow main column it took 26px straight out of the
   width the title and description get. */

.course-row .more-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  background: transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), border-radius var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}

.course-row .more-btn:hover {
  background: var(--off-white);
  color: var(--navy-ink);
}

.course-row .fav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), border-radius var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.course-row .fav-btn:hover {
  background: var(--primary-green-extra-light);
  color: var(--green-ink);
}

.course-row .fav-btn.faved {
  color: #f59e0b;
}

.course-menu {
  position: fixed;
  z-index: 80;
  width: 220px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.course-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 8px;
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}

.course-menu-x {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}

.course-menu-x:hover {
  color: var(--navy-ink);
  background: var(--off-white);
}

.course-menu-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--navy-ink);
  padding: 6px 8px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
  text-align: left;
}

.course-menu-btn:hover {
  background: var(--primary-green-soft);
  color: var(--green-ink);
}

.course-menu-btn .cmi {
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.course-menu-danger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--danger-ink);
  text-align: left;
}

.course-menu-danger:hover {
  background: #fef5f5;
  color: #c0392b;
}

/* Right column panel */
.hub-side-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.progress-card {
  background: #3b3028;
  border: 1px solid rgba(214, 185, 137, 0.2);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  color: var(--white-ink);
  position: relative;
  overflow: hidden;
}

.progress-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 100% 0%, rgba(214, 185, 137, 0.16), transparent 55%), linear-gradient(145deg, transparent 0%, rgba(75, 55, 40, 0.9) 100%);
  pointer-events: none;
}

.progress-card > * { position: relative; z-index: 1; }

.progress-card::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -22px;
  width: 190px;
  height: 130px;
  background: repeating-linear-gradient(168deg, transparent 0 10px, rgba(214, 185, 137, 0.11) 11px 12px, transparent 13px 23px);
  -webkit-mask-image: radial-gradient(ellipse, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse, #000 0%, transparent 70%);
  pointer-events: none;
}

.progress-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.progress-card .progress-sub {
  font-size: 0.82rem;
  opacity: 0.7;
  margin-bottom: 24px;
}

.progress-ring-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 20px;
}

.progress-ring {
  width: 132px;
  height: 132px;
}

.progress-ring circle {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transform-box: view-box;
}

.progress-ring .ring-track {
  fill: none;
  stroke: rgba(247, 241, 229, 0.16);
  stroke-width: 10;
}

.progress-ring .ring-fill {
  fill: none;
  stroke: var(--sapwood-gold-light);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}

.progress-ring-wrap .ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.progress-ring-wrap .ring-value {
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 2px;
}

.progress-ring-wrap .ring-label {
  font-size: 0.82rem;
  opacity: 0.7;
  font-weight: 600;
}

/* Empty states */
.empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.empty-state .empty-illustration {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: var(--primary-green-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.empty-state .empty-svg {
  width: 34px;
  height: 34px;
}

.empty-state .empty-svg path:first-child {
  stroke: var(--primary-green-dark);
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
}

.empty-state .empty-svg path:not(:first-child) {
  fill: var(--primary-green);
}

.empty-state .empty-msg {
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 280px;
  margin: 0;
}

.empty-state .btn {
  margin-top: 4px;
}

/* Quiz answer review */
.quiz-review {
  text-align: left;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-review-head {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--navy-ink);
  margin-bottom: 4px;
}

.quiz-review-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary-green);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-xs);
}

.quiz-review-item.review-bad {
  border-left-color: var(--danger-ink);
}

.quiz-review-q {
  font-weight: 700;
  color: var(--navy-ink);
  font-size: 0.95rem;
  line-height: 1.45;
}

.quiz-review-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white-ink);
  background: var(--primary-green);
  border-radius: 999px;
  padding: 3px 10px;
  margin-right: 8px;
  vertical-align: 1px;
}

.review-bad .quiz-review-badge {
  background: var(--danger-surface);
}

.quiz-review-ans {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.quiz-review-ans strong {
  color: var(--navy-ink);
}

.quiz-review-correct-opt strong {
  color: var(--green-ink);
}

.quiz-review-why {
  font-size: 0.88rem;
  color: var(--text-secondary);
  background: var(--primary-green-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  line-height: 1.5;
}

.review-bad .quiz-review-why {
  background: #fef5f5;
}

.progress-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* These were written as `.progress-bar-item .pb-*`, but no such wrapper is ever
   rendered: courseRowHtml() emits a bare .pb-track/.pb-fill pair. The prefix
   therefore matched nothing and the per-course progress bars were rendering
   unstyled, which also meant the grow animation had nothing to attach to. */
.pb-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.pb-track {
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.pb-fill {
  height: 100%;
  background: var(--primary-green);
  border-radius: 3px;
}

/* Account settings card */
.side-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-xs);
}

.side-card h4 {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--navy-ink);
  margin-bottom: 20px;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-radius var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  width: 100%;
  text-align: left;
}

.settings-item:hover {
  background: var(--primary-green-soft);
  color: var(--green-ink);
}

.settings-item .set-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--off-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.settings-item.active {
  background: var(--primary-green-soft);
  color: var(--green-ink);
}

/* Settings modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 16, 24, 0.55);
  backdrop-filter: blur(3px);
}

.modal-box {
  display: none;
  width: 100%;
  max-width: 430px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 22px 24px;
  animation: modalPop var(--dur-base) var(--ease-spring);
}

@keyframes modalPop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.modal-head > span {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-x {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--off-white);
  color: var(--text-secondary);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), border-radius var(--transition-fast), color var(--transition-fast);
}

.modal-x:hover {
  background: var(--primary-green-light);
  color: var(--green-ink);
}

.modal-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 2px;
  cursor: pointer;
  border-top: 1px solid var(--border-light);
  user-select: none;
}

.settings-toggle-row:first-of-type {
  border-top: none;
}

.settings-toggle-row input {
  display: none;
}

.settings-toggle-row input:focus-visible ~ .toggle-track {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.settings-toggle-row .toggle-name {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.settings-toggle-row .toggle-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.settings-toggle-row > span:nth-child(2) {
  flex: 1;
}

.toggle-track {
  width: 44px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--border);
  position: relative;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.toggle-track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast);
}

.settings-toggle-row input:checked ~ .toggle-track {
  background: var(--primary-green);
}

.settings-toggle-row input:checked ~ .toggle-track i {
  transform: translateX(20px);
}

/* Help card */
.help-card .help-btn {
  width: 100%;
  background: var(--primary-green-light);
  color: var(--green-ink);
  padding: 12px;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 0.9rem;
  transition: background-color var(--transition-fast), border-radius var(--transition-fast), color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.help-card .help-btn:hover {
  background: var(--green-btn);
  color: var(--white-ink);
}

/* Week strip: seven dots, with the active ones carrying the green. */
.week-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--navy-ink);
}

.week-streak {
  margin: 0 0 14px;
  color: var(--green-ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.week-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 10px;
  background: var(--off-white);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.week-day.is-active {
  background: var(--primary-green-light);
  color: var(--green-ink);
}

.week-day.is-today {
  box-shadow: inset 0 0 0 2px var(--primary-green);
}

.week-lessons {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Rating card (dashboard side) */
.rating-card .help-btn {
  width: 100%;
  background: var(--primary-green-light);
  color: var(--green-ink);
  padding: 12px;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 0.9rem;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-radius var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rating-card .help-btn:hover {
  background: var(--green-btn);
  color: var(--white-ink);
}

/* Rating widget (modal + landing footer) */
.rate-stars {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 8px 0 14px;
}

.rate-star {
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--border-light);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.rate-star.on {
  color: #f1c40f;
}

.rate-star:hover {
  transform: scale(1.15);
  color: #f1c40f;
}

/* Course rating: the star glyph, the score chip on a row, and the floating card
   the options menu opens. Half a star is the same glyph clipped, so 3.5 and 4
   stay visually consistent instead of relying on a half-star character that
   most system fonts do not carry. The glyph carries its size from whatever
   contains it - the chip or the picker - so it is sized in em. */
.score-star {
  position: relative;
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  line-height: 1.05em;
  overflow: hidden;
  vertical-align: middle;
  flex-shrink: 0;
}

/* An ink token, not a border token: the empty half of the scale has to be
   visible on the chip and on the white card, in both themes. */
.score-star-bg {
  color: var(--text-muted);
}

.score-star-fg {
  position: absolute;
  inset: 0;
  color: var(--accent-yellow);
  clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
}

/* Score chip, read-only: the score is set from the options menu. */
.course-rate {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-yellow-tint);
  font-size: 0.72rem;
  flex-shrink: 0;
}

/* The five stars are one scale, not five items: the chip's own gap belongs
   between the scale and the number, so the stars carry a much tighter one.
   Without this the chip inherited the 6px and spent a third of its width on
   the gaps, which is what made it read as a fat lozenge. */
.course-rate-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.course-rate.is-empty {
  display: none;
}

.course-rate-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-yellow-ink);
}

/* Floating rating card */
.rate-card-float {
  position: fixed;
  z-index: 90;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 16px 18px;
  animation: modalPop var(--dur-base) var(--ease-spring);
}

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

.rate-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--navy-ink);
  line-height: 1.35;
}

.rate-card-x {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--off-white);
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.rate-card-x:hover {
  background: var(--primary-green-light);
  color: var(--green-ink);
}

.rate-card-prompt {
  margin: 6px 0 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.rate-pick-row {
  display: flex;
  justify-content: center;
  gap: 2px;
  font-size: 2rem;
  line-height: 1;
}

.rate-slot {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

/* Two hit areas per star, so the halves are reachable by pointer. */
.rate-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.rate-hit-l { left: 0; }
.rate-hit-r { right: 0; }

.rate-hit:hover {
  background: var(--accent-yellow-tint);
}

.rate-card-value {
  min-height: 1.4em;
  margin-top: 8px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent-yellow-ink);
}

.rate-card-avg {
  margin-top: 2px;
  text-align: center;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.rate-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* A course row is one flex line: thumb, text, score chip, favourite, three
   dots. Below this width it stopped fitting - the row spilled past its own edge
   instead of the text giving way - so the trailing controls move to a second
   line. */
@media (max-width: 640px) {
  .course-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* Below this width the text takes its own line and the trailing controls sit
   under it, which keeps the title readable instead of squeezing it to a
   column of one word per line. */
.course-info {
    min-width: 55%;
  }

  .course-rate {
    margin-left: 0;
  }

  .course-row .fav-btn {
    margin-left: auto;
  }
}

.rate-summary {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 16px;
  text-align: center;
}

.rate-submit-wrap {
  text-align: center;
}

.rate-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: var(--primary-green-light);
  color: var(--green-ink);
  border: none;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), border-radius var(--transition-fast);
}

.rate-footer-btn:hover {
  background: var(--green-btn);
  color: var(--white-ink);
}

.rate-footer-summary {
  font-weight: 500;
  opacity: 0.85;
}

/* Analytics mini cards */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.mini-stat {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.mini-stat .mini-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.mini-stat .mini-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--navy-ink);
}

.mini-stat .mini-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.mini-stat .sparkline {
  height: 32px;
  margin-top: 10px;
}

/* ============================================================
   COURSE CREATION WIZARD
   ============================================================ */

.wizard-layout {
  display: flex;
  min-height: 100vh;
  background: var(--primary-green-soft);
}

.wizard-main {
  flex: 1;
  /* The bottom is deeper than the other sides so the floating step arrows at
     the foot of the viewport never sit on top of the card's own content. */
  padding: 40px 40px 104px;
  max-width: 860px;
}

.wizard-header {
  margin-bottom: 32px;
}

.wizard-header h1 {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--navy-ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wizard-header h1 .brand-icon {
  font-size: 1.4rem;
}

.wizard-header p {
  color: var(--text-secondary);
  font-size: 1rem;
}

/* Stepper */
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
}

.stepper::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 1;
  position: relative;
  flex: 1;
}

.stepper-step .step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: background-color var(--transition-normal), border-color var(--transition-normal), border-radius var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
  position: relative;
}

.stepper-step .step-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  transition: background-color var(--transition-normal), border-color var(--transition-normal), border-radius var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}

.stepper-step.active .step-circle {
  background: var(--green-btn);
  border-color: var(--green-btn);
  color: var(--white-ink);
  box-shadow: var(--shadow-green);
}

.stepper-step.active .step-label {
  color: var(--green-ink);
  font-weight: 800;
}

.stepper-step.done .step-circle {
  background: var(--green-btn);
  border-color: var(--green-btn);
  color: var(--white-ink);
}

.stepper-step.done .step-label {
  color: var(--green-ink);
}

/* Moving between steps. Forward the new step rises from below, back slides in
   from the left, so the transition itself says which way the wizard went - the
   click that caused it does not have to be watched to be understood. Because a
   hidden step has no animation at all, each one replays as it is revealed.
   The direction is a data attribute rather than a class so applyWizardStep()
   stays a single write and no animation name has to be remembered in JS. */
.wizard-step {
  animation: wizardStepIn var(--dur-base) var(--ease-out) both;
}

#screenWizard[data-wizdir="back"] .wizard-step {
  animation-name: wizardStepInBack;
}

/* Wizard card */
.wizard-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}

.wizard-card .card-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--navy-ink);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wizard-card .card-title .title-icon {
  font-size: 1.2rem;
}

/* Search in wizard */
.wizard-search {
  position: relative;
  margin-bottom: 24px;
}

.wizard-search .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.wizard-search input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--off-white);
  outline: none;
  transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), border-radius var(--transition-fast), box-shadow var(--transition-fast);
}

.wizard-search input:focus {
  border-color: var(--primary-green);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(118, 82, 55, 0.12);
}

/* Wizard search results */
.wizard-search-results {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  margin: -8px 0 24px;
  box-shadow: var(--shadow-sm);
}

.wizard-search-results .wsr-empty {
  padding: 18px 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.wizard-search-results .wsr-section {
  padding: 10px 16px 2px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.wizard-search-results .wsr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--dur-instant);
  border-top: 1px solid var(--border);
}

.wizard-search-results .wsr-row:first-of-type {
  border-top: none;
}

.wizard-search-results .wsr-row:hover {
  background: var(--off-white);
}

/* The row is a full-width target, so the press is a horizontal squeeze
   instead of a lift - a lift on something this wide would drag the rows
   below it around. */
.wizard-search-results .wsr-row:active {
  background: var(--primary-green-extra-light);
  transform: scale(0.985);
}

.wizard-search-results .wsr-row .wsr-ic {
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.wizard-search-results .wsr-row .wsr-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--navy-ink);
  flex: 1;
}

.wizard-search-results .wsr-row .wsr-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.wizard-search-results .wsr-row .wsr-arrow {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.wizard-search-results .wsr-row:hover .wsr-arrow {
  color: var(--green-accent);
  transform: translateX(3px);
}

/* Subject cards grid */
.subject-grid-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.subject-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition-surface);
  position: relative;
  text-align: center;
}

.subject-card.locked {
  background: var(--off-white);
  border-style: dashed;
}

.subject-card.locked .sc-icon {
  opacity: 0.55;
}

.subject-lock {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--text-secondary);
}

.subject-lock .ic {
  width: 16px;
  height: 16px;
}

.subject-card .subject-pro {
  position: absolute;
  top: 12px;
  right: 12px;
}

.subject-card:hover {
  border-color: var(--primary-green);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

/* Pressing. A card that only reacts on release reads as unresponsive, so it
   dips under the pointer and springs back. The press itself is the short half
   of the movement; the release keeps the longer, softer settle. */
.subject-card:active {
  transform: translateY(-1px) scale(0.985);
  box-shadow: none;
  transition-duration: var(--dur-instant);
}

.subject-card.selected {
  border-color: var(--primary-green);
  background: var(--primary-green-extra-light);
  box-shadow: 0 0 0 3px rgba(118, 82, 55, 0.1);
}

.subject-card .sc-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.subject-card .sc-icon .ic {
  width: 26px;
  height: 26px;
  stroke-width: 1.9;
}

.subject-card .sc-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--navy-ink);
}

.subject-card .sc-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.4;
}

.subject-card .checkmark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-btn);
  color: var(--white-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  opacity: 0;
  transform: scale(0.4);
  transition: var(--transition-surface);
  font-weight: 900;
}

.subject-card.selected .checkmark {
  opacity: 1;
  transform: scale(1);
  animation: checkPop var(--dur-base) var(--ease-out) both;
}

/* Topic rows */
.topic-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.topic-group-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px 2px;
}

.topic-group-head:first-child {
  padding-top: 4px;
}

.topic-group-head .tg-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.topic-group-head .tg-icon .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.topic-group-head .tg-name {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--navy-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topic-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-surface);
  position: relative;
  background: var(--white);
}

.topic-row:hover {
  border-color: var(--primary-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.topic-row:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow: none;
  transition-duration: var(--dur-instant);
}

.topic-row.selected {
  border-color: var(--primary-green);
  background: var(--primary-green-extra-light);
  box-shadow: 0 0 0 3px rgba(118, 82, 55, 0.1);
}

.topic-row .topic-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: transparent;
  transition: var(--transition-surface);
  flex-shrink: 0;
}

.topic-row.selected .topic-check {
  background: var(--green-btn);
  border-color: var(--green-btn);
  color: var(--white-ink);
  animation: checkPop var(--dur-base) var(--ease-out) both;
}

.topic-row .topic-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--navy-ink);
  flex: 1;
}

.topic-row .topic-arrow {
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.topic-row.selected .topic-arrow {
  color: var(--green-accent);
}

/* A small nudge, on the row's own timing, so the row reads as leading
   somewhere before it is even clicked. */
.topic-row:hover .topic-arrow {
  transform: translateX(3px);
}

/* A premium topic on a free account. The card advertises what Pro contains -
   the name, emoji and badge stay - but it answers click with the plan screen
   instead of pretending it can open. No hover lift: there is nowhere to go,
   and motion should not suggest there is. */
.topic-row.locked {
  background: var(--off-white);
  border-style: dashed;
  border-color: var(--border);
  opacity: 0.85;
}

.topic-row.locked:hover {
  border-color: var(--text-muted);
  transform: none;
  box-shadow: none;
}

.topic-row.locked .topic-check {
  border-style: dashed;
  border-color: var(--text-muted);
  color: transparent;
}

.topic-row.locked .topic-name {
  color: var(--text-secondary);
}

.topic-lock {
  color: var(--text-muted);
  font-size: 0.82rem;
  flex-shrink: 0;
}

/* The small "PRO" tag on a locked card, and the same tag in wizard search. */
.plan-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-yellow-tint);
  color: var(--accent-yellow-ink);
  flex-shrink: 0;
}

/* The Pro badge next to the signed-in account's name in the hub header. */
.pro-pill {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-yellow-tint);
  color: var(--accent-yellow-ink);
  flex-shrink: 0;
  align-self: center;
}

/* Plan panel inside settings */
.plan-pill {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.plan-pill-pro {
  background: var(--accent-yellow-tint);
  color: var(--accent-yellow-ink);
}
.plan-pill-free {
  background: var(--border-light);
  color: var(--text-primary);
}
.plan-panel-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 16px;
}
.plan-panel-text {
  flex: 1;
  min-width: 0;
}
.plan-panel-title {
  margin: 0 0 2px;
  font-weight: 800;
  color: var(--text-primary);
}
.plan-panel-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Level cards */
.level-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.level-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-surface);
  position: relative;
}

.level-card:hover {
  border-color: var(--primary-green);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.level-card:active {
  transform: translateY(-1px) scale(0.985);
  box-shadow: none;
  transition-duration: var(--dur-instant);
}

.level-card.selected {
  border-color: var(--primary-green);
  background: var(--primary-green-extra-light);
  box-shadow: 0 0 0 3px rgba(118, 82, 55, 0.1);
}

.level-card .level-icon {
  font-size: 1.6rem;
  color: var(--green-ink);
}

.level-card .level-icon .ic {
  width: 30px;
  height: 30px;
  stroke-width: 1.8;
}

.level-card .level-name {
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--navy-ink);
}

.level-card .level-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.level-card .checkmark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-btn);
  color: var(--white-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  opacity: 0;
  transform: scale(0.4);
  transition: var(--transition-surface);
  font-weight: 900;
}

.level-card.selected .checkmark {
  opacity: 1;
  transform: scale(1);
  animation: checkPop var(--dur-base) var(--ease-out) both;
}

/* Custom level controls: one explanation level plus independent quiz sizes.
   They stay inside the level card's step so the 4-step wizard does not grow. */
.custom-level-panel {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

/* An author `display` beats the UA sheet's [hidden] rule, so the hidden state
   needs its own rule or the panel would stay visible for every level. */
.custom-level-panel[hidden] {
  display: none;
}

.custom-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.custom-field-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--navy-ink);
}

.custom-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.custom-opt {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: var(--transition-surface);
}

.custom-opt:hover {
  border-color: var(--primary-green);
  color: var(--green-ink);
}

.custom-opt:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.custom-opt.selected {
  background: var(--primary-green);
  border-color: var(--primary-green);
  color: var(--white-ink);
  box-shadow: 0 0 0 3px rgba(118, 82, 55, 0.1);
}

.custom-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 860px) {
  .custom-level-panel {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Wizard footer buttons */
.wizard-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
  gap: 12px;
}

.wizard-actions .btn {
  min-width: 160px;
}

/* Floating step arrows */
.wizard-float {
  position: fixed;
  left: 40px;
  bottom: 28px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  /* Replayed by showScreen() unhiding it, so the arrows arrive with the
     wizard instead of materialising under the pointer that got there. */
  animation: wizardFloatIn var(--dur-base) var(--ease-out) both;
}

/* An author `display` beats the UA sheet's [hidden] rule, so the hidden state
   has to be restated here or the arrows would show up over every other screen. */
.wizard-float[hidden] {
  display: none;
}

.wizard-float .wf-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--primary-green-soft);
  color: var(--green-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-normal), color var(--transition-normal), opacity var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast);
}

.wizard-float .wf-btn:hover:not(:disabled) {
  background: var(--green-btn);
  color: var(--white-ink);
  transform: scale(1.05);
  box-shadow: var(--shadow-green);
}

/* Asymmetric on purpose: the press is quick so it answers the finger, the
   release is slow so the arrow appears to settle back rather than snap.
   One value here shortens all five properties for the press only. */
.wizard-float .wf-btn:active:not(:disabled) {
  transform: scale(0.9);
  transition-duration: var(--dur-instant);
}

.wizard-float .wf-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Same author-display-beats-[hidden] problem as the pill itself: without this
   the next arrow would sit in the row from the first step onwards. */
.wizard-float .wf-btn[hidden] {
  display: none;
}

/* The next arrow appearing is the wizard saying the step is answered, so it
   arrives rather than blinking on. Fill mode is backwards for the same reason
   as the stagger entrance: a forward fill would keep applying this animation's
   transform and permanently outrank the hover and press scales below. */
.wizard-float .wf-next {
  animation: wfNextIn var(--dur-base) var(--ease-spring) backwards;
}

.wizard-float .wf-btn:focus-visible {
  outline: 3px solid var(--green-ink);
  outline-offset: 2px;
}

.wizard-float .wf-ic {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The sprite arrow points right; back reuses it mirrored so both directions
   share one glyph. */
.wizard-float .wf-back .wf-ic {
  transform: scaleX(-1);
}

.wizard-float .wf-count {
  min-width: 46px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Course generation progress
   ------------------------------------------------------------
   The ring is a plain two-tone circle rather than something more
   elaborate on purpose. It is decoration; the stage text below it is what
   actually reports progress, because that keeps working when the ring
   cannot move (see the reduced-motion block at the end of this file, which
   drops every animation to a single pass).

   The gap in the ring is made with a transparent border rather than a
   conic-gradient sweep so the shape is identical in both colour themes
   without a second rule. */
.gen-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 16, 24, 0.72);
  backdrop-filter: blur(6px);
}

.gen-box {
  width: 100%;
  max-width: 380px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 30px 26px 26px;
  animation: genBoxIn var(--dur-slow) var(--ease-spring) both;
}

@keyframes genBoxIn {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

.gen-ring {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 4px solid var(--border-light);
  border-top-color: var(--green-btn);
  animation: genSpin 900ms linear infinite;
}

@keyframes genSpin {
  to { transform: rotate(360deg); }
}

.gen-title {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--text);
}

.gen-stage {
  margin: 0;
  /* Reserved so the box keeps its height while the phrase changes. */
  min-height: 1.45em;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--green-ink);
}

/* Reserves a line too: the first phrase can be longer than the rest, and
   without this the note below it hops as the text changes. */
.gen-note {
  margin: 12px 0 0;
  min-height: 1.4em;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Right preview panel */
.wizard-preview {
  width: 340px;
  flex-shrink: 0;
  padding: 40px 24px 40px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.preview-panel {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.preview-panel .preview-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.preview-course-thumb {
  border-radius: var(--radius-lg);
  background: var(--primary-green-soft);
  aspect-ratio: 16 / 8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  margin-bottom: 16px;
  border: 1px solid var(--border-light);
  color: var(--green-ink);
}

.preview-course-thumb .ic {
  width: 58px;
  height: 58px;
  stroke-width: 1.3;
}

.preview-subject-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--primary-green-light);
  color: var(--green-ink);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.preview-course-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--navy-ink);
  margin-bottom: 16px;
}

.preview-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.preview-detail-row .d-icon {
  font-size: 1rem;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.preview-detail-row .d-label {
  font-weight: 700;
  color: var(--text-primary);
  margin-right: auto;
}

.preview-detail-row .d-value {
  font-weight: 600;
}

.preview-include-box {
  background: var(--primary-green-soft);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 16px;
}

.preview-include-box .inc-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--navy-ink);
  margin-bottom: 12px;
}

.preview-include-box ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-include-box li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.preview-include-box li .li-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.act-box {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-xs);
}

.act-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.act-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}

.act-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: var(--primary-green-extra-light);
  border: 1px solid var(--border-light);
}

.act-steps {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.act-step {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-light);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.act-step.on {
  background: var(--primary-green);
  transform: scale(1.3);
}

.act-step.past {
  background: var(--primary-green);
  opacity: 0.45;
}

.act-progress-text {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.act-box-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.act-feedback {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--primary-green-soft);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary-green);
  border-radius: 10px;
  padding: 10px 14px;
  display: none;
}

.act-feedback.show {
  display: block;
  animation: actIn var(--dur-base) var(--ease-out);
}

@keyframes actIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.act-hint {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.act-hint::before {
  content: "💡";
  font-size: 0.95rem;
}

.act-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 6px;
}

.act-option {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  text-align: left;
  font-size: 0.9rem;
  padding: 12px 14px;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.act-option:not(:disabled):hover {
  transform: translateX(4px);
  border-color: var(--primary-green);
  box-shadow: 0 3px 10px rgba(118, 82, 55, 0.14);
}

.act-opt-chip {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-secondary);
  background: var(--primary-green-extra-light);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.act-correct {
  border-color: var(--primary-green) !important;
  background: var(--primary-green-extra-light) !important;
  color: var(--text-primary) !important;
}

.act-correct .act-opt-chip,
.act-correct.seq-num {
  background: var(--primary-green) !important;
  color: var(--white-ink) !important;
}

.act-correct:disabled {
  opacity: 1;
  cursor: default;
}

.act-selected {
  border-color: var(--accent-blue-ink) !important;
  background: #ebf4ff !important;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.act-wrong {
  border-color: var(--danger-ink) !important;
  background: var(--danger-soft) !important;
  color: var(--danger-ink) !important;
}

.act-match-cols {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.act-col {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.act-col .btn {
  justify-content: flex-start;
  text-align: left;
  font-size: 0.85rem;
  padding: 11px 13px;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.act-col-term .btn {
  border-left: 4px solid var(--primary-green);
}

.act-col-def .btn {
  border-left: 4px solid var(--accent-blue);
}

@media (max-width: 560px) {
  .act-match-cols { flex-direction: column; }
  .act-col { min-width: 0; }
}

.act-seq-wrap {
  display: grid;
  gap: 8px;
  margin-bottom: 6px;
}

.act-seq-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--border-light);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--white);
  min-height: 42px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.act-seq-slot.filled {
  border-style: solid;
  border-color: var(--primary-green);
  background: var(--primary-green-extra-light);
  color: var(--text-primary);
  font-weight: 600;
}

.seq-num {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--white-ink);
  background: var(--primary-green);
}

.seq-empty {
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.act-svg-shell {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px 10px;
}

.act-svg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  padding: 0 2px;
}

.act-task {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.act-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--primary-green-soft);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 3px 12px;
}

.act-svg-wrap {
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.act-label-line {
  transition: stroke var(--dur-fast) var(--ease-out);
}

.act-dot {
  cursor: pointer;
}

.act-dot-halo {
  transition: r var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.act-dot-core {
  transition: r var(--dur-fast) var(--ease-out);
}

.act-dot:not(.selected):hover .act-dot-halo {
  r: 21;
  opacity: 0.24;
}

.act-dot:not(.selected):hover .act-dot-core {
  r: 12.5;
}

.act-dot.selected .act-dot-halo {
  animation: dotPulse 1.2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { r: 17; opacity: 0.16; }
  50% { r: 23; opacity: 0.3; }
}

.act-bank {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.act-bank .btn {
  text-align: center;
  font-size: 0.82rem;
  padding: 8px 6px;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.act-bank .btn:not(:disabled):hover {
  transform: translateY(-2px);
}

.act-box .btn:disabled {
  cursor: default;
  transform: none;
  box-shadow: none;
}

.wizard-preview .wizard-tip {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.wizard-preview .wizard-tip .tip-icon {
  font-size: 1.2rem;
}

/* ============================================================
   SPARK ACTIVITY COMPONENTS (explore / build / sort / sim / fill)
   ============================================================ */

.act-fill-group .form-control {
  margin-top: 10px;
}

.act-fill-btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.act-fill-hintbox {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  min-height: 20px;
}

.act-input-ok {
  border-color: var(--primary-green) !important;
  background: var(--primary-green-soft) !important;
}

.act-sort-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.act-sort-chip.act-selected {
  border-color: var(--primary-green);
  background: var(--primary-green-soft);
}

.act-sort-bins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.act-sort-bin {
  border: 2px dashed var(--border-light);
  border-radius: 12px;
  padding: 12px;
  min-height: 96px;
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.act-sort-bin:hover {
  border-color: var(--primary-green);
  background: var(--primary-green-soft);
}

.act-sort-bin-label {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.act-sort-placed {
  display: inline-block;
  background: var(--primary-green-soft);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 4px 10px;
  margin: 3px 4px 3px 0;
  font-size: 0.82rem;
  color: var(--text-primary);
}

.act-explore-canvas {
  position: relative;
}

.act-explore-info {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--primary-green-soft);
  border: 1px solid var(--border-light);
  font-size: 0.92rem;
  line-height: 1.6;
  min-height: 48px;
  color: var(--text-primary);
}

.act-hot {
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.act-hot:hover {
  opacity: 0.9;
}

.act-hot .act-wrong {
  animation: actWiggle var(--dur-slow) var(--ease-in-out);
}

@keyframes actWiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.act-build-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.act-build-canvas svg {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--white);
}

.act-build-slot {
  cursor: pointer;
}

.act-build-slot.filled {
  cursor: default;
}

.act-build-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.act-build-feedback {
  margin-top: 10px;
  min-height: 22px;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.act-wrong-text {
  color: var(--danger-ink);
  font-weight: 600;
}

.act-sim {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.act-sim-caption {
  margin-top: 4px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 20px;
}

.act-sim-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.act-sim-phase {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 700;
}

.act-sim-quiz {
  margin-top: 8px;
}

.act-sim-qtitle {
  font-weight: 700;
  font-size: 0.94rem;
  margin-bottom: 10px;
  color: var(--text-primary);
}

/* ============================================================
   STUDY PLAN / LESSON SCREENS
   ============================================================ */

.plan-screen {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  min-height: 100vh;
  background: var(--primary-green-soft);
}

.plan-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--border-light);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), border-radius var(--transition-fast), color var(--transition-fast);
}

.back-link:hover {
  color: var(--green-ink);
  border-color: var(--primary-green);
}

.plan-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.plan-hero .plan-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.plan-hero h1 {
  font-size: 2rem;
  font-weight: 900;
  color: var(--navy-ink);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.plan-hero p {
  color: var(--text-secondary);
  max-width: 560px;
  font-size: 1rem;
}

.plan-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.plan-stat-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-xs);
}

.plan-stat-card .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.plan-stat-card .stat-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--navy-ink);
  line-height: 1;
  margin-bottom: 4px;
}

.plan-stat-card .stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Lesson cards in plan */
.lesson-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-lesson-row {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), border-radius var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast), color var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.plan-lesson-row:hover:not(.locked) {
  border-color: var(--primary-green);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.plan-lesson-row.completed {
  background: var(--primary-green-extra-light);
  border-color: var(--primary-green-light);
}

.plan-lesson-row.locked {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--off-white);
}

.plan-lesson-row .lesson-num {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--primary-green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1rem;
  color: var(--forest-green);
  flex-shrink: 0;
}

.plan-lesson-row.completed .lesson-num {
  background: var(--green-btn);
  color: var(--white-ink);
}

.plan-lesson-row.locked .lesson-num {
  background: #eef1f0;
  color: var(--text-muted);
}

.plan-lesson-row .lesson-info {
  flex: 1;
  min-width: 0;
}

.plan-lesson-row .lesson-info .lt {
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--navy-ink);
  margin-bottom: 2px;
}

.plan-lesson-row .lesson-info .ld {
  font-size: 0.84rem;
  color: var(--text-secondary);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .steps-grid,
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* In two columns only the first tile of each row connects to its neighbour. */
  .step-item:nth-child(even)::after {
    content: none;
  }

  .stats-grid,
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .subject-grid-2,
  .level-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hub-content {
    grid-template-columns: 1fr;
  }

  .hub-side-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero-visual {
    max-width: 600px;
    margin: 0 auto;
  }

  .testimonials-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .wizard-preview {
    width: 300px;
  }
}

@media (min-width: 861px) and (max-width: 1100px) {
  .landing-nav .nav-inner {
    gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav-links a {
    padding: 8px 10px;
    font-size: .82rem;
  }

  .nav-lang-select {
    max-width: 84px;
    padding: 4px 6px;
    font-size: .72rem;
  }

  .nav-actions { gap: 6px; }
}

@media (max-width: 860px) {
  .nav-inner { position: relative; }

  #navMenuBtn { display: inline-flex; }

  .nav-links { display: none; }

  /* The sheet grows out of the menu button: it scales from the top-right
     corner over ~240ms instead of appearing instantly, so it reads as
     something that was opened rather than a second page. */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
    padding: 12px 20px;
    box-shadow: var(--shadow-md);
    z-index: 90;
    transform-origin: top right;
    animation: navSheetIn var(--dur-base) var(--ease-out);
  }

  .nav-links.open a {
    padding: 14px 16px;
    border-radius: var(--radius);
    font-size: var(--fs-base);
  }

  .nav-lang-select { display: none; }

  .nav-links.open .nav-lang-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    color: var(--text-secondary);
    font-size: .85rem;
    font-weight: 700;
  }

  .nav-links.open .nav-lang-mobile select {
    max-width: 150px;
    padding: 8px 10px;
    color: var(--text-primary);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
  }

  @keyframes navSheetIn {
    from {
      opacity: 0;
      transform: translateY(-8px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .hub-layout {
    flex-direction: column;
  }

  .hub-sidebar {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 60;
    flex-direction: row;
    align-items: center;
    padding: 10px 16px;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    overflow: visible;
  }

  .hub-sidebar .brand-lockup {
    margin-bottom: 0;
  }

  .hub-sidebar .sidebar-nav,
  .hub-sidebar .sidebar-card {
    display: none;
  }

  .hub-main {
    padding-bottom: 96px;
  }

  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    background: var(--white);
    background: color-mix(in srgb, var(--white) 94%, transparent);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -8px 24px rgba(16, 38, 28, 0.08);
    backdrop-filter: blur(14px);
  }

  .mobile-tabbar-item {
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
  }

  .mobile-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 22px);
    min-width: 16px;
    padding: 1px 4px;
    color: #ffffff;
    background: var(--green-btn);
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.4;
  }

  .mobile-badge[hidden] { display: none; }

  .mobile-tabbar-item .ic {
    width: 20px;
    height: 20px;
  }

  .mobile-tabbar-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-tabbar-item.active {
    color: var(--green-ink);
    background: var(--primary-green-extra-light);
  }

  .wizard-layout {
    flex-direction: column-reverse;
  }

  .wizard-preview {
    width: 100%;
    height: auto;
    position: static;
    padding: 24px;
  }

  .wizard-preview .preview-panel {
    display: none;
  }

  .wizard-main {
    padding: 24px;
    padding-bottom: 96px;
    max-width: 100%;
  }

  .wizard-float {
    left: 24px;
    bottom: 20px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card:nth-child(even) {
    margin-top: 0;
  }

  .hub-topbar {
    flex-wrap: wrap;
  }

  .topic-list,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-top {
    gap: 32px;
  }

  .plan-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .steps-grid,
  .categories-grid,
  .subject-grid-2,
  .level-grid,
  .hub-side-column {
    grid-template-columns: 1fr;
  }

  /* Two compact cards per row beat a 390px column of four tall cards. The
     dashboard is a summary, not a feed. */
  .stats-grid,
  .analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hub-main {
    padding: 20px 14px 92px;
  }

  .hub-topbar {
    gap: 10px;
    row-gap: 12px;
    margin-bottom: 20px;
  }

  /* A search box squeezed between the bell and the account chip showed only
     three characters of its placeholder on a 390px phone. Give the account
     its own row and the search the full width underneath it. */
  .hub-top-right {
    order: 1;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .hub-search {
    order: 2;
    flex: 1 1 100%;
    max-width: none;
  }

  .greeting .hello-mark {
    display: none;
  }

  .greeting {
    margin-bottom: 20px;
  }

  .greeting h1 {
    font-size: clamp(1.65rem, 8vw, 2.1rem);
    line-height: 1.15;
  }

  .greeting p {
    font-size: 0.9rem;
  }

  .stat-card {
    padding: 14px 12px;
  }

  .stat-card .stat-value {
    font-size: 1.75rem;
  }

  .stat-card .stat-label {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .course-panel {
    padding: 16px;
  }

  /* One column: a horizontal track between steps makes no sense. */
  .step-item::after {
    content: none;
  }

  :root {
    --fs-display: 2.2rem;
  }

  .hero h1 {
    font-size: var(--fs-display);
  }

  .wizard-card {
    padding: 24px 18px;
  }

  .asset {
    overflow: hidden;
  }

  .final-cta, .testimonials, .categories, .features {
    padding: 64px 20px;
  }
}

/* Toast */
.toast-msg {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--navy);
  color: var(--white-ink);
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
}

.toast-msg.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Structural helpers */
.hero-content { min-width: 0; }
.hub-main-col { min-width: 0; }
.wizard-step { width: 100%; }
.lesson-tab-content { width: 100%; }

.notes-panel {
  padding: 4px 0 8px;
}

.notes-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: .88rem;
  font-weight: 800;
}

.notes-input {
  width: 100%;
  min-height: 150px;
  padding: 14px 16px;
  color: var(--text-primary);
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius);
  font: inherit;
  font-size: .95rem;
  line-height: 1.6;
  resize: vertical;
}

.notes-input:focus-visible {
  outline: 3px solid var(--green-accent);
  outline-offset: 2px;
  border-color: var(--green-accent);
}

.notes-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.notes-status {
  min-height: 1.2em;
  margin-right: auto;
  color: var(--green-ink);
  font-size: .8rem;
  font-weight: 700;
}

.notes-hint {
  margin: 8px 0 18px;
  color: var(--text-secondary);
  font-size: .8rem;
  line-height: 1.5;
}

.notes-highlights-title {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 800;
}

.notes-empty {
  color: var(--text-secondary);
  font-size: .85rem;
}

.notes-highlight-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border-light);
}

.notes-highlight-row:first-child { border-top: none; }

.notes-highlight-text {
  flex: 1;
  color: var(--text-primary);
  font-size: .86rem;
  line-height: 1.5;
}

.notes-highlight-remove {
  flex: none;
  color: var(--danger-ink);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

.note-highlight {
  padding: 0 .12em;
  color: inherit;
  background: #fff2a8;
  border-radius: .2em;
}

body.dark .note-highlight {
  background: #6a5410;
}

/* Utility */
.hidden { display: none !important; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

/* ============================================================
   Motion
   ============================================================
   Kept in one place so the timing language is easy to audit. Every rule here is
   neutralised by the prefers-reduced-motion block at the end of this file. */

@keyframes screenIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}

/* Shared entrance for a repeated item. The delay comes from --i, which the app
   sets on each item of a freshly rendered list, so a list arrives item by item
   instead of as one flat block. */
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}

/* Same entrance, from the side, for horizontal rows. */
@keyframes slideInLeft {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
  to { opacity: 1; transform: none; }
}

/* Wizard steps. Shorter than a screen change on purpose: the step swap is a
   direct answer to a click that just happened, so the wait before the content
   is readable should feel like a reply, not like loading. */
@keyframes wizardStepIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes wizardStepInBack {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
  to { opacity: 1; transform: none; }
}

/* A selection landing. The tick overshoots slightly and settles, which is what
   makes a state change read as confirmed rather than merely switched. */
@keyframes checkPop {
  from { opacity: 0; transform: scale(0.4); }
  55% { opacity: 1; transform: scale(1.14); }
  to { opacity: 1; transform: scale(1); }
}

/* The floating wizard nav arriving with the screen it belongs to. */
@keyframes wizardFloatIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}

/* The forward arrow being offered once the step has an answer. */
@keyframes wfNextIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* Progress fills grow from the left. transform-origin plus scaleX keeps this off
   the layout path, unlike animating width. */
@keyframes barGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Items that render in a list, staggered by --i.
   Fill mode is backwards, not both, and that is load-bearing rather than
   stylistic. A filled animation keeps applying its last keyframe forever, and
   a running animation outranks a transition in the cascade - so `both` would
   pin transform to the keyframe's `none` and silently kill every hover lift and
   button press on the card for the rest of the page's life. `backwards` is all
   an entrance needs: it holds the first keyframe during the stagger delay, then
   hands the property back to the stylesheet. */
.stagger-item {
  animation: riseIn var(--dur-slow) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger-step, 40ms));
}
.stagger-item--row {
  animation-name: slideInLeft;
}

/* The two progress bar shapes in the app: the per-course bars on a course row
   and the inline bars on the stats screen. */
.pb-fill,
.screen-row .bar-fill {
  transform-origin: left center;
  animation: barGrow var(--dur-slow) var(--ease-out) both;
}

/* Lifts are transform + shadow only, so hovering a card never reflows the page
   around it. Only genuinely card-shaped elements are lifted: list rows such as
   .course-row already signal hover with a background change, and lifting every
   row in a list makes the whole list look like it is wobbling.
   The landing cards set their own hover in the landing section (category cards
   lift because they navigate; value, step and testimonial cards only firm up
   their border), so they are not listed here. */
.stat-card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   Dark theme
   ============================================================ */
body.dark {
  color-scheme: dark;
  --wood-ink: #d3b28b;
  --sapwood-gold: #a8784d;
  --sapwood-gold-light: #d6b989;
  --sapwood-gold-pale: #4b3c2d;
  --bark: #141713;
  --paper: #171a17;
  --primary-green-light: #29382b;
  --primary-green-extra-light: #1c2b20;
  --primary-green-soft: #1b241c;
  --accent-purple-tint: #221a30;
  --accent-blue-tint: #10263a;
  --accent-orange-tint: #33271c;
  --accent-yellow-tint: #2f2712;
  --navy: #171a17;
  --navy-500: #242821;
  /* The light-theme greens are dark, which is right on white and 2.6-3.7:1 on
     these surfaces. They are text-only tokens (23 and 8 uses, no backgrounds),
     so they can simply become a light green here. */
  --primary-green-darker: #a9c99d;
  --primary-green-dark: #8dae7f;
  /* Ink twins of the two dual-purpose surface tokens above. */
  --navy-ink: #ede7db;
  --white-ink: #f8f4eb;
  --text-primary: #eee9df;
  --text-secondary: #b8b1a4;
  /* Was #6b7c8d, which is 4.08:1 on --off-white here - below AA for body text. */
  --text-muted: #9e9789;
  /* The light-theme red is dark on these surfaces; use a light red for text.
     Destructive buttons keep the dark surface so white labels still pass. */
  --danger-ink: #ffb4ab;
  --danger-surface: #b42318;
  --danger-soft: #3a1714;
  --white: #1e211d;
  --off-white: #171a17;
  --border-light: #34372f;
  --border: #45483e;
  --forest-green: #a9c99d;
  --forest-green-light: #8dae7f;
  --forest-green-surface: #4a3628;
  /* The light-theme inks are dark, which is right on white and unreadable here.
     These are the same hues lightened until they clear AA on the dark
   surfaces: warm wood ink must stay readable on the dark paper. */
  --green-ink: #d3b28b;
  --green-accent: #8dae7f;
  /* The light values were picked against a white label; on these dark-theme
     surfaces they left button labels at 3.02:1 and 2.46:1. This ramp keeps
     --white-ink legible in every state (5.26:1, 7.80:1, 10.5:1). */
  --green-btn: #8b6243;
  --green-btn-hover: #9a704b;
  --green-btn-active: #704b33;
  --accent-blue-ink: #7fbde8;
  --accent-orange-ink: #d6b18b;
  --accent-yellow-ink: #e8c95a;
  --accent-purple-ink: #c39bd3;
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.65);
  --shadow-green: 0 6px 20px rgba(137, 168, 121, 0.15);
  background: var(--white);
  color: var(--text-primary);
}

body.dark input,
body.dark select,
body.dark textarea {
  background: #1b2633;
  color: var(--text-primary);
  border-color: var(--border);
}

body.dark input::placeholder {
  color: var(--text-muted);
}

body.dark .settings-item:hover,
body.dark .settings-item.active {
  background: #16202c;
}

body.dark .course-card,
body.dark .plan-card,
body.dark .stat-card {
  background: #16202c;
}

body.dark .toggle-track {
  background: #324458;
}

body.dark .landing-nav {
  background: rgba(18, 26, 36, 0.92);
}

body.dark .bgc-green { background: #1b3a2b; }
body.dark .bgc-purple { background: #1b2240; }
body.dark .bgc-blue { background: #15263d; }
body.dark .bgc-orange { background: #2b1f15; }
/* The one pale tile the dark theme never covered, which left a light icon
   (#e6edf3) on a cream (#fef9e7) tile at 1.12:1. */
body.dark .bgc-yellow { background: #2f2712; }

body.dark .badge-gray { background: #1b2633; }
body.dark .course-status.sample { background: #1b2240; color: #aab4f0; }
body.dark .settings-item .set-icon { background: #1b2633; }
body.dark .rate-footer-btn { background: #16202c; border-color: #2b3c50; }
body.dark .rate-footer-btn:hover { border-color: var(--primary-green); }
body.dark .course-menu-danger:hover { background: #301421; }
body.dark .review-bad .quiz-review-why { background: #301421; }
body.dark .act-wrong { background: #301421 !important; }
body.dark .toast-msg { background: #1b2633; color: var(--text-primary); }

.act-target {
  pointer-events: none;
  animation: targetPulse 1.6s ease-in-out infinite;
}

.act-target.done {
  animation: none;
}

@keyframes targetPulse {
  0%, 100% { r: 8; opacity: 0.4; }
  50% { r: 15; opacity: 0.95; }
}

.act-svg-shell {
  background: linear-gradient(180deg, var(--white), #f7faff);
}

.lesson-figure {
  position: relative;
  margin: 0 0 16px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}

.lesson-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  background: var(--primary-green-soft);
}

.lesson-img.is-zoomable {
  cursor: zoom-in;
}

.lesson-figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 8px 12px;
  color: var(--text-secondary);
  background: var(--primary-green-soft);
  font-size: 0.78rem;
  line-height: 1.4;
}

.lesson-figcredit {
  color: var(--green-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* small zoom control in the corner of the lesson image */
.lesson-zoom-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(20, 28, 38, 0.62);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.lesson-zoom-btn:hover {
  background: rgba(20, 28, 38, 0.85);
  transform: scale(1.06);
}

.lesson-zoom-btn:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* full-screen zoom, above every screen (toast/modal are 1000) */
.img-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(8, 12, 18, 0.78);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: imgZoomFade var(--dur-fast) var(--ease-out);
  cursor: zoom-out;
}

@keyframes imgZoomFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.img-zoom-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
  cursor: default;
}

.img-zoom-img {
  display: block;
  max-width: min(1200px, 92vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  animation: imgZoomPop var(--dur-base) var(--ease-spring);
}

@keyframes imgZoomPop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

.img-zoom-cap {
  max-width: min(900px, 88vw);
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  color: #d7e0ea;
}

.img-zoom-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(20, 28, 38, 0.6);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.img-zoom-x:hover {
  background: rgba(20, 28, 38, 0.88);
  transform: scale(1.06);
}

.img-zoom-x:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .lesson-img { max-height: 200px; }
  .lesson-figure { border-radius: 10px; }
  .img-zoom-overlay { padding: 14px; }
  .img-zoom-img { max-width: 96vw; max-height: 74vh; }
  .img-zoom-x { top: 10px; right: 10px; width: 36px; height: 36px; }
  .lesson-zoom-btn { width: 28px; height: 28px; top: 6px; right: 6px; }
}

/* ============================================================
   Accessibility
   ============================================================ */

/* A visible focus ring for everything. Keyboard focus used to be invisible on
   most of the app: the only focus styling in the stylesheet was for text
   inputs, and 20-odd click targets were not focusable at all. The outline is
   drawn with box-shadow so it survives rounded corners, and the offset keeps
   it clear of the element's own border. */
:focus-visible {
  outline: 3px solid var(--green-btn);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Upgraded non-native click targets, so they look the same wherever they are. */
.a11y-clickable {
  cursor: pointer;
}

.a11y-clickable:focus-visible {
  outline: 3px solid var(--green-btn);
  outline-offset: 3px;
}

/* Focus moved programmatically (screen changes, dialog entry). Showing a ring
   there would be noise - the browser already draws nothing for these - but
   removing the default outline entirely would hide the destination. */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

body.dark :focus-visible,
body.dark .a11y-clickable:focus-visible {
  outline-color: #d3b28b;
}

/* Honour the OS-level motion preference. The app animates on every screen
   change, every card hover and several looping pulses; none of it carries
   meaning, so all of it stops here. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    /* Delays have to be reset too. An animation that starts from an invisible
       keyframe and uses fill-mode `both` would otherwise sit at opacity 0 for
       the length of its delay, so a staggered list would appear blank. */
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Scroll-reveal content is shown outright: there is no motion to wait for. */
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Users who ask for more contrast get a firmer hairline: the default
   #e6ece9 border is deliberately quiet and can disappear on a bright display. */
@media (prefers-contrast: more) {
  :root {
    --border-light: #b6c3bd;
    --border: #8fa39b;
  }

  .category-card,
  .value-card,
  .testimonial-card,
  .lp-faq-item,
  .app-window,
  .app-stat,
  .app-course {
    border-width: 1.5px;
  }

  .step-item {
    border-color: var(--border-light);
  }
}

/* Translucent surfaces become solid when the user asks for reduced
   transparency, so the blurred nav and the mockup glow never smear the text
   behind them. */
@media (prefers-reduced-transparency: reduce) {
  .landing-nav {
    background: var(--white);
    backdrop-filter: none;
  }

  .landing-nav::after {
    display: none;
  }
}

/* ============================================================
   Deep lesson content blocks
   A rewritten lesson expresses each section as an ordered list of
   blocks (prose, key points, worked example, misconception,
   self-check, table, callout), plus the per-lesson FAQ. Topics
   still using the original text/list shape are untouched.
   ============================================================ */

.cb-section {
  display: grid;
  gap: 12px;
}

.cb {
  display: grid;
  gap: 8px;
}

.cb-p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.cb-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.cb-points li {
  display: flex;
  gap: 8px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.cb-points li > span {
  color: var(--green-ink);
  flex: none;
}

.cb-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy-ink);
}

.cb-sub {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cb-label {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.cb-body {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.cb-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.cb-steps li::marker {
  color: var(--green-ink);
  font-weight: 700;
}

/* Worked example */
.cb-we {
  background: var(--primary-green-extra-light);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary-green);
  border-radius: 12px;
  padding: 14px 16px;
}

/* Common mistake */
.cb-mis {
  background: #fdf3f2;
  border: 1px solid var(--border-light);
  border-left: 4px solid #e74c3c;
  border-radius: 12px;
  padding: 14px 16px;
}

.cb-mis .cb-head {
  color: #c0392b;
}

.cb-mis-claim {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--text-primary);
  font-style: italic;
}

/* Inline self-check */
.cb-sc {
  background: var(--accent-blue-tint);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--accent-blue-ink);
  border-radius: 12px;
  padding: 14px 16px;
}

.cb-sc .cb-head {
  color: var(--accent-blue-ink);
}

.cb-sc-q {
  font-size: 0.93rem;
  line-height: 1.7;
  font-weight: 600;
  color: var(--text-primary);
}

.cb-sc .act-option:disabled {
  opacity: 1;
  cursor: default;
}

.cb-feedback {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-secondary);
  background: var(--white-ink);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px 12px;
}

.act-ok-text {
  color: var(--green-ink);
  font-weight: 600;
}

/* Comparison table. Wrapped so a wide table scrolls horizontally instead of
   forcing the whole lesson card to overflow on a narrow screen. */
.cb-table {
  margin: 0;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
}

.cb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cb-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}

.cb-table th,
.cb-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid var(--border-light);
}

.cb-table thead th {
  background: var(--primary-green-soft);
  color: var(--navy-ink);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.cb-table tbody th {
  background: var(--primary-green-extra-light);
  color: var(--text-primary);
  font-weight: 700;
}

.cb-table td {
  color: var(--text-secondary);
}

.cb-table tbody tr:last-child th,
.cb-table tbody tr:last-child td {
  border-bottom: none;
}

.cb-table figcaption {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 9px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--primary-green-extra-light);
}

/* Callouts */
.cb-callout {
  border: 1px dashed var(--border-light);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--primary-green-soft);
}

.cb-callout-warn {
  background: #fdf3f2;
  border-color: #e74c3c;
}

.cb-readtime {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--primary-green-soft);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.cb-prereq .cb-points li > span {
  color: var(--accent-blue-ink);
}

/* Per-lesson and per-course FAQ */
.faq-block {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.faq-head {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--navy-ink);
}

.faq-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.faq-item {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--white-ink);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

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

.faq-item summary::before {
  content: '?';
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-green-soft);
  color: var(--navy-ink);
  font-size: 0.75rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.faq-item summary:hover {
  background: var(--primary-green-extra-light);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent-blue-ink);
  outline-offset: -2px;
}

.faq-q {
  flex: 1;
}

.faq-a {
  padding: 11px 14px 13px 42px;
  border-top: 1px solid var(--border-light);
}

.faq-p {
  margin: 0 0 8px;
  font-size: 0.91rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.faq-p:last-child {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .cb-table th,
  .cb-table td {
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  .faq-a {
    padding-left: 14px;
  }
}

/* ============================================================
   Backup, recovery and legal pages
   ============================================================ */

/* Backup & recovery settings panel */
.backup-block-h {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 16px 0 6px;
}

.backup-note {
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.radio-row {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.radio-row-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--off-white);
  cursor: pointer;
}

.radio-row-item input {
  margin-top: 3px;
  accent-color: var(--green-btn);
}

.radio-name {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.radio-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.btn-row .btn {
  flex: 1;
  padding: 10px 14px;
}

/* Auth link row (forgot password) */
.auth-link-row {
  margin: 10px 0 0;
  text-align: center;
}

.link-like {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--green-ink);
  text-decoration: underline;
  cursor: pointer;
}

.link-like:hover {
  color: var(--green-btn);
}

/* Recovery key gate */
.recovery-keybox {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--navy-ink);
  background: var(--off-white);
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius);
  padding: 14px 10px;
  margin: 6px 0 12px;
  word-break: break-word;
  user-select: all;
}

.recovery-copy-btn {
  margin-bottom: 12px;
}

/* The account email shown beside a brand-new recovery key, so a mistyped
   address is visible at the one moment the learner is looking at the account. */
.recovery-email {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy-ink);
  word-break: break-word;
}

/* Privacy / legal screen */
.privacy-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.privacy-head {
  text-align: center;
  margin-bottom: 28px;
}

.privacy-head h1 {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--navy-ink);
  margin: 8px 0 6px;
}

.privacy-updated {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.privacy-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--navy-ink);
  font-weight: 600;
  margin-bottom: 24px;
}

.privacy-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.privacy-nav a {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--green-ink);
  text-decoration: underline;
}

.privacy-sec {
  margin-bottom: 26px;
}

.privacy-sec h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy-ink);
  margin: 0 0 10px;
}

.privacy-sec p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.privacy-mail {
  color: var(--green-ink);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-list {
  margin: 0 0 10px 18px;
}

.privacy-list li {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.privacy-back {
  margin-top: 28px;
  text-align: center;
}

@media (max-width: 560px) {
  .privacy-nav {
    flex-direction: column;
  }
}

/* ---- Mid-page texture ----
   The hero ends its grid with a mask and a fade. The tinted bands below the
   fold repeat it so the middle of the page keeps the same texture without
   becoming a pattern you have to look past. The tile is 56% larger than the
   hero one and it is masked away from the edges, so it reads as a whisper.
   It belongs to the tinted bands only: the white bands stay clean, so the
   alternation is carried by surface alone and the grid marks which band you
   are in rather than sitting on every one of them. */
.features::before,
.testimonials::before,
.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(92% 74% at 50% 34%, #000 0%, transparent 84%);
  mask-image: radial-gradient(92% 74% at 50% 34%, #000 0%, transparent 84%);
  opacity: 0.42;
  pointer-events: none;
  /* Negative, so the lines land on the section's own painted background and
     under the text. That only works while the section is a stacking context;
     each of the three therefore carries `z-index: 0`. Forcing `position:
     relative` on every child instead would change the containing block of any
     absolute descendant, which is a far bigger blast radius than it is worth. */
  z-index: -1;
}

/* The tile grows as the page descends: 72px just under the hero, 88px through
   the middle, 104px by the FAQ. One pitch all the way down reads as wallpaper;
   loosening it keeps the three bands from feeling like the same section
   repeated. */
.features::before {
  background-size: 72px 72px;
}

.testimonials::before {
  background-size: 88px 88px;
}

.faq::before {
  background-size: 104px 104px;
}

/* ============================================================
   UX POLISH PASS
   Reading measure, one-question-at-a-time quizzes, a real lesson
   outline, visible pricing actions, and phone-sized targets.
   ============================================================ */

/* ---- Pricing cards now end in an action, not a dead end ---- */
.price-card {
  align-content: start;
}

.price-cta {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}

/* ---- Auth has a way back without the browser chrome ---- */
.auth-back {
  display: flex;
  margin: 0 auto 18px;
}

/* ---- Lesson reader -------------------------------------------------------
   The old lesson card stretched a 14.7px paragraph across more than 1,100px.
   The outline gives the screen orientation and the reading column keeps prose
   near 70 characters regardless of viewport. */
.lesson-screen {
  max-width: 1360px;
}

.lesson-reader-layout {
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.lesson-rail {
  position: sticky;
  top: 24px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 18px;
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.lesson-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.lesson-rail-head h3 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--navy-ink);
}

.lesson-rail-count {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.lesson-rail-sub {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.lesson-rail-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lesson-rail-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.lesson-rail-item:hover {
  background: var(--off-white);
  color: var(--text-primary);
}

.lesson-rail-item.active {
  background: var(--primary-green-extra-light);
  color: var(--green-ink);
}

.rail-num {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.lesson-rail-item.done .rail-num {
  background: var(--green-btn);
  color: var(--white-ink);
}

.lesson-rail-item.active .rail-num {
  background: var(--green-btn);
  color: var(--white-ink);
}

.rail-title {
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.32;
}

.lesson-panel {
  margin-bottom: 0;
  min-width: 0;
}

.lesson-head {
  margin-bottom: 14px;
}

.lesson-progress {
  margin-bottom: 18px;
}

.lesson-progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.lesson-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--off-white);
}

.lesson-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-btn), var(--primary-green));
  transition: width var(--dur-base) var(--ease-out);
}

.lesson-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 18px;
  padding: 8px 0;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
}

.lesson-tab-content {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.lesson-tab-content p {
  margin: 0 0 1em;
}

.lesson-tab-content .learn-section {
  margin-bottom: 22px;
}

.lesson-tab-content .inc-title {
  margin-bottom: 10px;
  color: var(--navy-ink);
  font-size: 1.08rem;
  font-weight: 800;
}

.lesson-tab-content .learn-note {
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary-green);
  border-radius: 10px;
  background: var(--off-white);
  padding: 12px 14px;
  color: var(--text-secondary);
}

.lesson-tab-content .learn-list {
  margin: 0 0 1em 1.15em;
  padding: 0;
}

.lesson-tab-content .learn-list li {
  margin-bottom: 0.5em;
}

.lesson-tab-content .learn-faq {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 9px 11px;
  margin: 6px 0;
  background: var(--white);
}

.lesson-tab-content .learn-faq summary {
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 700;
}

.lesson-tab-content .learn-faq div {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.lesson-tab-content .lesson-figure {
  margin: 0 0 1.1em;
}

.lesson-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 820px;
  margin: 26px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}

.lesson-footer .btn {
  min-height: 44px;
}

.lesson-footer .btn:only-child {
  margin-left: auto;
}

/* ---- Quiz: one question at a time, with the whole set still in the DOM ---- */
.quiz-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 800;
}

.quiz-step-count {
  color: var(--green-ink);
}

.quiz-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.quiz-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-light);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.quiz-dot.answered {
  background: var(--primary-green);
}

.quiz-dot.active {
  background: var(--green-btn);
  transform: scale(1.25);
}

.quiz-question {
  display: none;
  margin: 0;
}

.quiz-question.active {
  display: block;
  animation: quizQuestionIn var(--dur-fast) var(--ease-out);
}

@keyframes quizQuestionIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.quiz-question > label {
  display: block;
  margin-bottom: 12px;
  color: var(--navy-ink);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.45;
}

.quiz-options {
  display: grid;
  gap: 9px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  background: var(--white);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.quiz-option:hover {
  border-color: var(--primary-green);
  background: var(--primary-green-extra-light);
}

.quiz-option.is-selected {
  border-color: var(--green-btn);
  background: var(--primary-green-extra-light);
  color: var(--green-ink);
  box-shadow: 0 0 0 1px var(--green-btn) inset;
}

.quiz-option.is-correct {
  border-color: var(--green-btn);
  background: var(--primary-green-extra-light);
  color: var(--green-ink);
}

.quiz-option.is-wrong {
  border-color: #d64545;
  background: #fdf0f0;
  color: #9b2525;
}

.quiz-letter {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--off-white);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 900;
}

.quiz-option.is-selected .quiz-letter,
.quiz-option.is-correct .quiz-letter {
  background: var(--green-btn);
  color: var(--white-ink);
}

.quiz-option.is-wrong .quiz-letter {
  background: #d64545;
  color: #fff;
}

.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.quiz-nav .btn {
  min-height: 44px;
}

.quiz-check-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.quiz-check-wrap .btn {
  min-height: 46px;
}

.quiz-check-hint {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}

/* ---- Completion screen ---- */
.complete-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--primary-green-extra-light);
  color: var(--green-ink);
}

.complete-badge .ic {
  width: 34px;
  height: 34px;
  stroke-width: 2.4;
}

.complete-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.complete-actions .btn {
  min-height: 46px;
}

/* ---- Help dialog ---- */
.help-actions {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.help-actions .btn {
  min-height: 46px;
  justify-content: center;
}

/* ---- Phone layout -------------------------------------------------------
   Targets were 28-33px and rows wrapped into a text column plus a second
   control line. The row is now a single 56px band with a 44px action cluster. */
.filter-tab {
  min-height: 44px;
  padding: 9px 16px;
}

@media (max-width: 860px) {
  .wizard-layout {
    flex-direction: column;
  }

  .wizard-main {
    order: 1;
  }

  .wizard-preview {
    order: 2;
  }

  .lesson-reader-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .lesson-rail {
    position: static;
    max-height: none;
    padding: 14px;
  }

  .lesson-rail-list {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .lesson-rail-item {
    flex: 0 0 185px;
    background: var(--off-white);
  }

  .lesson-rail-item.active {
    background: var(--primary-green-extra-light);
  }
}

@media (max-width: 640px) {
  .lesson-screen {
    padding-left: 14px;
    padding-right: 14px;
  }

  .lesson-panel {
    padding: 16px;
  }

  .lesson-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .lesson-tab-content {
    font-size: 1rem;
  }

  .lesson-footer {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: var(--white);
  }

  .quiz-question > label {
    font-size: 1rem;
  }

  .quiz-option {
    font-size: 0.92rem;
  }

  .quiz-nav {
    flex-wrap: wrap;
  }

  .quiz-nav .btn {
    flex: 1 1 120px;
  }

  .course-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "thumb info"
      "actions actions";
    align-items: center;
    gap: 8px 12px;
    flex-wrap: nowrap;
    padding: 11px 10px;
  }

  .course-row .course-thumb {
    grid-area: thumb;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }

  .course-row .course-info {
    grid-area: info;
    min-width: 0;
  }

  .course-row .course-title {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .course-row .course-desc {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-top: 2px;
  }

  /* The action cluster used to share the title's line. Once Resume became a
     text button there was no room left for the title, and it broke into one
     word per line. Actions get their own row on a phone. */
  .course-row .course-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin-top: 2px;
  }

  .course-row .course-resume-btn {
    margin-right: auto;
    padding: 9px 14px;
  }

  /* The row itself opens the plan; the explicit Resume button is the better
     mobile target, so the small arrow is redundant here. */
  .course-row .course-open-btn {
    display: none;
  }

  .course-row .fav-btn,
  .course-row .more-btn {
    width: 40px;
    height: 40px;
    margin: 0;
    font-size: 1.05rem;
  }

  .course-row .count-badge,
  .course-row .course-status {
    display: none;
  }

  .course-row .pb-label {
    display: none;
  }

  .course-row .pb-track {
    margin-top: 6px;
  }

  /* Five filters do not fit one 390px row. Wrapping keeps every one visible
     instead of hiding Favorites off the right edge of the card. */
  .filter-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 2px;
    gap: 6px;
  }

  .filter-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .category-card {
    padding: 16px;
    gap: 10px;
  }

  .category-card .cat-icon {
    width: 40px;
    height: 40px;
  }

  .category-card h3 {
    font-size: 0.95rem;
  }

  .category-card .arrow {
    display: none;
  }

  .img-zoom-x {
    width: 44px;
    height: 44px;
  }
}

/* The greeting belongs to Home. Other tabs carry their own heading, and a
   stale "Hello, ..." above Settings made every tab look like the dashboard. */
#screenHub[data-view]:not([data-view="dashboard"]) .greeting {
  display: none;
}

@media (max-width: 640px) {
  #screenHub[data-view]:not([data-view="dashboard"]) .hub-main {
    padding-top: 16px;
  }
}

/* Dark-theme counterparts for the new surfaces. */
body.dark .lesson-rail,
body.dark .lesson-tabs,
body.dark .lesson-footer {
  background: #16202c;
  border-color: #2b3c50;
}

body.dark .lesson-rail-item:hover,
body.dark .lesson-tab-content .learn-note,
body.dark .lesson-tab-content .learn-faq {
  background: #1b2633;
  border-color: #2b3c50;
}

body.dark .lesson-rail-item.active {
  background: #1b3a2b;
  color: var(--green-ink-bright);
}

body.dark .rail-num {
  background: #1b2633;
}

body.dark .lesson-progress-track {
  background: #243244;
}

body.dark .quiz-option {
  background: #16202c;
  border-color: #2b3c50;
  color: var(--text-primary);
}

body.dark .quiz-option:hover,
body.dark .quiz-option.is-selected,
body.dark .quiz-option.is-correct {
  background: #1b3a2b;
  border-color: var(--primary-green);
}

body.dark .quiz-letter {
  background: #1b2633;
}

body.dark .complete-badge {
  background: #1b3a2b;
  color: var(--green-ink-bright);
}

/* Action cluster keeps star and menu together instead of letting the row wrap
   them onto a second line at the first long course title. */
.course-row .course-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* A direct resume action. Opening the plan and then picking a lesson is two
   steps for the one thing a "continue" list is asking the learner to do. */
.course-row .course-resume-btn {
  flex: none;
  padding: 6px 12px;
  margin-right: 4px;
  color: var(--green-ink);
  background: var(--primary-green-extra-light);
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.course-row .course-resume-btn:hover {
  color: var(--white-ink);
  background: var(--green-btn);
}

@media (max-width: 560px) {
  .course-row .course-resume-btn {
    padding: 8px 10px;
  }
}

.course-row .course-actions .fav-btn,
.course-row .course-actions .more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.course-row .course-actions .ic {
  width: 17px;
  height: 17px;
}

.course-row .course-actions .fav-btn.faved {
  color: var(--accent-yellow-ink);
}

.hero-trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
}

.hero-trust-line > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-trust-line .ic {
  color: var(--green-ink);
}

/* Disabled buttons should look disabled, not like a green call to action that
   silently ignores the click. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.52;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none;
  box-shadow: none;
}

/* The landing nav has four controls at phone width. Tightening the gap and the
   wordmark keeps the primary action inside the viewport. */
@media (max-width: 560px) {
  .landing-nav .nav-inner {
    gap: 8px;
    padding: 10px 12px;
  }

  .landing-nav .logo-mark {
    width: 38px;
    height: 38px;
  }

  .landing-nav .logo-text {
    font-size: 0.98rem;
  }

  .landing-nav .nav-actions {
    gap: 6px;
  }

  #navCta {
    padding: 10px 12px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .lesson-zoom-btn {
    width: 44px;
    height: 44px;
  }
}

/* Author display wins over the UA [hidden] rule, so the last-question Next
   button needs an explicit hidden state. */
.quiz-nav .btn[hidden] {
  display: none;
}

/* Dots are navigation, so the tap target is larger than the painted dot. */
.quiz-dot {
  position: relative;
  width: 22px;
  height: 22px;
  background: transparent;
  transform: none;
}

.quiz-dot::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--border-light);
  transition: background-color var(--transition-fast), inset var(--transition-fast);
}

.quiz-dot.answered::after {
  background: var(--primary-green);
}

.quiz-dot.active {
  transform: none;
}

.quiz-dot.active::after {
  inset: 4px;
  background: var(--green-btn);
}

body.dark .quiz-dot::after {
  background: #3a4a5e;
}

body.dark .quiz-dot.answered::after {
  background: var(--primary-green);
}

body.dark .quiz-dot.active::after {
  background: var(--green-ink-bright);
}

.lesson-rail-item {
  min-height: 44px;
}

@media (max-width: 640px) {
  /* Prev/Next and the step counter are enough on a phone; the dot strip would
     cost a whole row and offer targets too small for a thumb. */
  .quiz-dots {
    display: none;
  }
}

.quiz-dot.answered,
.quiz-dot.active {
  background: transparent;
}

/* The quiz brings its own Previous/Next, so the lesson footer would otherwise
   sit on top of the first answer on a phone. */
#screenLesson[data-tab="quiz"] .lesson-footer {
  display: none;
}

/* ============================================================
   LESSON CONTENT SYSTEM
   The reader uses semantic classes instead of per-element inline
   styles, so prose, worked examples and tables share one rhythm.
   ============================================================ */

.learn-lesson-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.learn-lesson-title {
  color: var(--navy-ink);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.35;
}

.learn-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.learn-text {
  margin: 0 0 0.9em;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.75;
}

.learn-box {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--white);
}

.learn-box .learn-text:last-child,
.learn-worked .learn-text:last-child {
  margin-bottom: 0;
}

.learn-box--soft {
  background: var(--primary-green-soft);
}

.learn-stack {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.learn-prereq {
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary-green);
  border-radius: 12px;
  background: var(--off-white);
}

.learn-prereq .learn-text {
  margin: 0;
}

.learn-prereq-list {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.learn-prereq-list li {
  position: relative;
  padding-left: 1.1em;
}

.learn-prereq-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-green);
}

.learn-caption {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-style: italic;
  text-align: center;
}

.learn-page-count {
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

.learn-label {
  margin-bottom: 5px;
  color: var(--green-ink);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.learn-points {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learn-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.learn-point-mark {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--primary-green);
}

.learn-worked {
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--white);
}

.learn-worked-section {
  padding: 12px 15px;
}

.learn-worked-section + .learn-worked-section {
  border-top: 1px solid var(--border-light);
}

.learn-worked-problem {
  background: var(--primary-green-soft);
}

.learn-worked .learn-text {
  margin: 0;
}

.learn-steps {
  display: grid;
  gap: 5px;
  margin: 0 0 0 1.15em;
  padding: 0;
  color: var(--text-secondary);
}

.learn-steps li {
  padding-left: 2px;
}

.learn-worked-why {
  background: var(--off-white);
}

.learn-selfcheck {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--white);
}

.learn-selfcheck .learn-text {
  margin: 0;
}

.learn-choices {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.learn-choices li {
  padding: 7px 10px;
  border: 1px solid var(--border-light);
  border-radius: 9px;
  background: var(--off-white);
  color: var(--text-secondary);
}

.learn-reveal {
  margin-top: 10px;
}

.learn-reveal summary {
  color: var(--green-ink);
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}

.learn-reveal-body {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--off-white);
}

.learn-reveal-body .learn-text {
  margin: 0 0 0.5em;
}

.learn-reveal-body .learn-text:last-child {
  margin-bottom: 0;
}

.learn-table-wrap {
  margin: 0 0 16px;
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: 12px;
}

.learn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.learn-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--primary-green-soft);
  color: var(--text-primary);
  font-weight: 800;
  text-align: left;
}

.learn-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.learn-table tr:last-child td {
  border-bottom: 0;
}

.learn-faq-list {
  display: grid;
  gap: 8px;
}

.learn-faq-list .learn-faq {
  margin: 0;
}

.learn-faq-answer {
  margin-top: 6px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.learn-callout {
  border-left: 4px solid var(--primary-green);
}

body.dark .learn-box,
body.dark .learn-worked,
body.dark .learn-selfcheck {
  border-color: #2b3c50;
  background: #16202c;
}

body.dark .learn-box--soft,
body.dark .learn-worked-problem {
  background: #1b3a2b;
}

body.dark .learn-prereq,
body.dark .learn-worked-why,
body.dark .learn-reveal-body,
body.dark .learn-choices li {
  border-color: #2b3c50;
  background: #1b2633;
}

body.dark .learn-table th {
  border-color: #2b3c50;
  background: #1b3a2b;
}

body.dark .learn-table td {
  border-color: #2b3c50;
}

body.dark .learn-label,
body.dark .learn-reveal summary {
  color: var(--green-ink-bright);
}

body.dark .learn-caption,
body.dark .learn-page-count,
body.dark .learn-meta {
  color: var(--text-muted);
}

/* On a phone the outline is a compact disclosure instead of a horizontal
   scroller that eats the first screen of every lesson. */
.lesson-rail-toggle {
  display: none;
}

.rail-chevron {
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

@media (max-width: 860px) {
  .lesson-rail-head {
    align-items: center;
    margin-bottom: 0;
  }

  .lesson-rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
  }

  .lesson-rail-toggle:hover,
  .lesson-rail-toggle:focus-visible {
    background: var(--off-white);
    color: var(--green-ink);
  }

  .lesson-rail-count {
    margin-left: auto;
  }

  .lesson-rail-body {
    display: none;
    margin-top: 10px;
  }

  .lesson-rail.is-open .lesson-rail-body {
    display: block;
  }

  .lesson-rail.is-open .rail-chevron {
    transform: rotate(-90deg);
  }

  .lesson-rail-list {
    flex-direction: column;
    gap: 3px;
    overflow: visible;
    padding-bottom: 0;
  }

  .lesson-rail-item {
    flex: 1 1 auto;
    width: 100%;
    background: transparent;
  }

  .lesson-rail-item.active {
    background: var(--primary-green-extra-light);
  }
}

body.dark .lesson-rail-toggle:hover,
body.dark .lesson-rail-toggle:focus-visible {
  background: #1b2633;
  color: var(--green-ink-bright);
}

/* A visible open affordance in every course row, in addition to the row click. */
.course-row .course-actions .course-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--green-ink);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.course-row .course-actions .course-open-btn:hover {
  background: var(--primary-green-soft);
  color: var(--green-btn);
}

@media (max-width: 640px) {
  .course-row .course-actions .course-open-btn {
    /* The row opens the plan and the explicit Resume button is the better
       phone target, so the small arrow is redundant. */
    display: none;
  }
}

.result-badge.is-fail {
  background: #fdf0f0;
  color: #b23b3b;
}

body.dark .result-badge.is-fail {
  background: #3a1e22;
  color: #ff9c9c;
}

/* Classed prose keeps its own rhythm; the generic p rule is only a fallback. */
.lesson-tab-content .learn-text {
  margin: 0 0 0.9em;
}

.lesson-tab-content .learn-meta {
  margin: 0;
}

.lesson-tab-content .learn-caption {
  margin: 8px 0 0;
}

.lesson-tab-content .learn-page-count {
  margin: 18px 0 0;
}

.lesson-tab-content .learn-worked .learn-text,
.lesson-tab-content .learn-selfcheck .learn-text,
.lesson-tab-content .learn-box .learn-text:last-child {
  margin-bottom: 0;
}

/* Conversion-focused sample lesson: clear hierarchy, tangible product proof,
   and motion kept subtle and fully disabled for reduced-motion preferences. */
.lesson-preview {
  position: relative;
  overflow: hidden;
  padding: clamp(68px, 8vw, 112px) 24px;
  color: #f5fbf7;
  background: radial-gradient(900px 520px at 100% 0%, rgba(79,217,138,.17), transparent 66%), #172a25;
}
.lesson-preview-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .82fr 1fr;
  gap: clamp(36px, 7vw, 88px);
  align-items: center;
}
.lesson-preview-copy .eyebrow { color: #8ee0ad; }
.lesson-preview-copy h2 {
  max-width: 520px;
  margin: 14px 0 18px;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.lesson-preview-copy > p { max-width: 460px; color: #c8d8d0; font-size: 1.05rem; line-height: 1.75; }
.preview-assurance { display: flex; align-items: center; gap: 9px; margin: 22px 0 28px; color: #d7e9df; font-size: .9rem; }
.preview-assurance .ic { width: 18px; color: #8ee0ad; }
.sample-lesson-card {
  padding: clamp(22px, 3.2vw, 36px);
  color: #24342e;
  background: #fff;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
  animation: sample-arrive .65s cubic-bezier(.16,1,.3,1) both;
}
.sample-lesson-kicker { display: flex; align-items: center; gap: 8px; color: #527066; font-size: .7rem; font-weight: 900; letter-spacing: .09em; }
.sample-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2eaa68; box-shadow: 0 0 0 4px #e2f6ea; }
.sample-label { margin-left: auto; padding: 5px 9px; border-radius: 999px; color: #426556; background: #eef7f1; font-size: .66rem; letter-spacing: 0; }
.sample-lesson-card h3 { margin: 24px 0 10px; color: #172a25; font-size: clamp(1.3rem, 2.3vw, 1.7rem); letter-spacing: -.02em; }
.sample-explanation { margin: 0; color: #52645c; font-size: .96rem; line-height: 1.7; }
.sample-question { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 19px; border-top: 1px solid #e8efeb; font-size: .82rem; font-weight: 900; }
.sample-question span { color: #556472; font-size: .75rem; font-weight: 700; }
.sample-prompt { margin: 8px 0 14px; font-weight: 800; }
.sample-answers { display: grid; gap: 9px; }
.sample-answers button { padding: 12px 14px; text-align: left; color: #34483e; background: #fff; border: 1px solid #dce7e0; border-radius: 11px; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.sample-answers button:hover:not(:disabled) { transform: translateY(-1px); border-color: #49a875; background: #f6fcf8; }
.sample-answers button:focus-visible { outline: 3px solid #83d9a5; outline-offset: 2px; }
.sample-answers button:disabled { cursor: default; }
.sample-answers button.is-correct { color: #17643a; border-color: #55b77b; background: #edf9f1; }
.sample-answers button.is-incorrect { color: #913b3b; border-color: #dc8989; background: #fff4f2; }
.sample-feedback { min-height: 1.5em; margin: 13px 0 0; color: #65756d; font-size: .86rem; line-height: 1.5; }
.sample-feedback.is-explanation { color: #17643a; font-weight: 700; }
.pricing-transparency { max-width: 780px; margin: 22px auto 0; padding: 16px 20px; color: var(--text-secondary); background: var(--primary-green-soft); border: 1px solid var(--border-light); border-radius: 12px; font-size: .88rem; line-height: 1.65; text-align: left; }
@keyframes sample-arrive { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 820px) {
  .lesson-preview-inner { grid-template-columns: 1fr; gap: 34px; max-width: 620px; }
  .lesson-preview-copy h2 { max-width: 620px; }
}
@media (max-width: 520px) {
  .lesson-preview { padding: 64px 18px; }
  .sample-lesson-card { padding: 22px 18px; border-radius: 17px; }
  .sample-label { font-size: .58rem; }
}
/* A quiet progress trail, expressed as restrained motion rather than
   decoration competing with the copy. All effects are transform/opacity
   based and are neutralised by the global reduced-motion treatment above. */
.landing-scroll-track {
  position: absolute;
  z-index: 2;
  inset: auto 0 -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.landing-scroll-track #landingScrollProgress {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--sapwood-gold), var(--wood-ink), var(--green-accent));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.hero-bg { isolation: isolate; }
.js .hero-content > * {
  animation: landing-rise-in .72s cubic-bezier(.16,1,.3,1) both;
}
.js .hero-content > :nth-child(1) { animation-delay: 70ms; }
.js .hero-content > :nth-child(2) { animation-delay: 150ms; }
.js .hero-content > :nth-child(3) { animation-delay: 230ms; }
.js .hero-content > :nth-child(4) { animation-delay: 310ms; }
.js .hero-content > :nth-child(5) { animation-delay: 390ms; }
.js .hero-content > :nth-child(6) { animation-delay: 450ms; }
.js .hero-visual { animation: landing-visual-in .95s cubic-bezier(.16,1,.3,1) 220ms both; }
.hero-mockup { perspective: 1200px; }
.app-window {
  transform-origin: 50% 60%;
  animation: mockup-float 7s ease-in-out 1.2s infinite;
  transition: box-shadow .35s ease, transform .35s ease;
}
.hero-mockup:hover .app-window {
  animation-play-state: paused;
  transform: translateY(-5px) rotateX(1deg);
  box-shadow: 0 32px 80px rgba(28,38,51,.19);
}
.hero-badge-tag .dot { animation: accent-pulse 2.6s ease-in-out infinite; }
.hero-benefit .check { animation: check-arrive .5s cubic-bezier(.34,1.56,.64,1) both; }
.hero-benefit:nth-child(2) .check { animation-delay: 220ms; }
.hero-benefit:nth-child(3) .check { animation-delay: 380ms; }
.step-item::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.steps-grid.is-visible .step-item::after { transform: scaleX(1); }
.step-item .step-icon-wrap { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.step-item:hover .step-icon-wrap { transform: translateY(-5px) rotate(-4deg); box-shadow: 0 9px 20px rgba(118,82,55,.14); }
.steps-grid.is-visible .step-item { animation: landing-rise-in .65s cubic-bezier(.16,1,.3,1) both; }
.steps-grid.is-visible .step-item:nth-child(2) { animation-delay: 90ms; }
.steps-grid.is-visible .step-item:nth-child(3) { animation-delay: 180ms; }
.steps-grid.is-visible .step-item:nth-child(4) { animation-delay: 270ms; }
.value-grid.is-visible .value-card,
.categories-grid.is-visible .category-card,
.testimonials-inner.is-visible .testimonial-card,
.pricing-cards.is-visible .price-card {
  animation: landing-rise-in .62s cubic-bezier(.16,1,.3,1) both;
}
.value-grid.is-visible .value-card:nth-child(2),
.categories-grid.is-visible .category-card:nth-child(2),
.testimonials-inner.is-visible .testimonial-card:nth-child(2),
.pricing-cards.is-visible .price-card:nth-child(2) { animation-delay: 80ms; }
.value-grid.is-visible .value-card:nth-child(3),
.categories-grid.is-visible .category-card:nth-child(3),
.testimonials-inner.is-visible .testimonial-card:nth-child(3) { animation-delay: 160ms; }
.value-grid.is-visible .value-card:nth-child(4),
.categories-grid.is-visible .category-card:nth-child(4),
.testimonials-inner.is-visible .testimonial-card:nth-child(4) { animation-delay: 240ms; }
.sample-answers button { position: relative; overflow: hidden; }
.sample-answers button.is-correct { animation: answer-confirm .35s cubic-bezier(.34,1.56,.64,1); }
.sample-answers button.is-incorrect { animation: answer-nudge .32s ease-in-out; }
.price-card { transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease; }
.price-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(28,38,51,.11); }
.price-card.is-featured:hover { border-color: var(--green-ink); }
.final-cta { position: relative; overflow: hidden; }
.final-cta::after {
  content: "";
  position: absolute;
  width: 440px;
  height: 160px;
  right: -40px;
  top: -45px;
  background: repeating-linear-gradient(165deg, transparent 0 12px, rgba(255,255,255,.09) 13px 14px, transparent 15px 28px);
  -webkit-mask-image: radial-gradient(ellipse, #000 0%, transparent 74%);
  mask-image: radial-gradient(ellipse, #000 0%, transparent 74%);
  pointer-events: none;
}
@keyframes landing-rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes landing-visual-in { from { opacity: 0; transform: translate3d(24px,18px,0) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes mockup-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(.25deg); } }
@keyframes accent-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(118,82,55,.2); } 55% { box-shadow: 0 0 0 6px rgba(118,82,55,0); } }
@keyframes check-arrive { from { opacity: 0; transform: scale(.45) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes answer-confirm { 0% { transform: scale(.97); } 70% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes answer-nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } 100% { transform: translateX(0); } }
@media (max-width: 760px) { .app-window { animation-duration: 8s; } }
@media (hover: none) {
  .hero-mockup:hover .app-window { animation-play-state: running; transform: none; }
  .price-card:hover { transform: none; box-shadow: none; }
}
/* The landing hero is an invitation to explore, not a floating dashboard.
   Seed choices pair three genuine free topics with the actual lesson content. */
#lesson-preview { scroll-margin-top: 92px; }
.hero-inner { grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr); gap: clamp(36px, 6vw, 76px); }
.hero-content { max-width: 600px; }
.hero h1 { max-width: 610px; font-size: clamp(2.65rem, 3.8vw, 3.35rem); letter-spacing: -.045em; line-height: 1.04; }
#landingTitle:focus-visible { outline: none; }
.hero-sub { max-width: 520px; }
.seed-picker { margin: 0 0 22px; }
.seed-picker-label { margin-bottom: 10px; color: var(--text-primary); font-size: .88rem; font-weight: 800; }
.seed-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.seed-choice {
  position: relative;
  display: flex;
  min-height: 82px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 11px 13px;
  /* The hero keeps its light gradient in both themes, so this card must keep
     a dark ink too. var(--text-primary) turned light in dark mode and made
     unselected choices 1.42:1 on the translucent white card. */
  color: #24342e;
  text-align: left;
  background: rgba(255,255,255,.76);
  border: 1px solid var(--border-light);
  border-radius: 15px 15px 15px 6px;
  box-shadow: 0 2px 8px rgba(28,38,51,.025);
  cursor: pointer;
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
  transition: transform .22s var(--ease-out), border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.seed-choice:hover { transform: translateY(-3px) rotate(-.5deg); border-color: var(--sapwood-gold); box-shadow: 0 9px 20px rgba(118,82,55,.09); }
.seed-choice.is-selected { color: #5a4030; background: #fbf6ec; border-color: var(--sapwood-gold); box-shadow: inset 0 0 0 1px rgba(168,120,77,.12), 0 5px 16px rgba(118,82,55,.08); }
.seed-choice:focus-visible { outline: 3px solid #765237; outline-offset: 3px; }
.seed-choice-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; color: #765237; font-size: 1.25rem; font-weight: 800; }
.seed-cells { color: #54835f; background: #e6f3e9; border-radius: 50% 45% 50% 40%; }
.seed-cells .ic { width: 15px; height: 15px; }
.seed-space { color: #6e658c; background: #eee9f7; border-radius: 50%; }
.seed-check { position: absolute; top: 8px; right: 8px; width: 13px; height: 13px; color: var(--wood-ink); opacity: 0; transform: scale(.5); transition: opacity .18s ease, transform .22s var(--ease-spring); }
.seed-choice.is-selected .seed-check { opacity: 1; transform: scale(1); }
.hero-actions { margin-bottom: 18px; gap: 10px; }
.hero-trust-line { gap: 7px 15px; margin-top: 16px; font-size: .76rem; }
.hero-sample-card { width: min(100%, 560px); padding: clamp(22px, 3vw, 34px); border-radius: 23px 23px 23px 7px; box-shadow: 0 24px 65px rgba(28,38,51,.16), 0 3px 10px rgba(28,38,51,.05); }
.sample-course-label { display: flex; align-items: center; gap: 9px; margin-top: 21px; color: #466455; font-size: .78rem; font-weight: 850; }
.sample-course-mark { display: grid; width: 28px; height: 28px; place-items: center; color: var(--wood-ink); background: var(--sapwood-gold-pale); border: 1px solid var(--sapwood-gold); border-radius: 8px; }
.sample-course-mark .ic { width: 16px; height: 16px; }
.sample-level-label { margin-left: auto; padding: 5px 9px; color: #4f6158; background: #f3f6f3; border-radius: 999px; font-size: .68rem; }
.hero-sample-card h2 { margin: 18px 0 9px; color: #172a25; font-size: clamp(1.45rem, 2.5vw, 1.9rem); line-height: 1.15; letter-spacing: -.035em; }
.hero-sample-card .sample-explanation { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.hero-sample-card .sample-question { margin-top: 19px; padding-top: 16px; }
.hero-sample-card .sample-prompt { font-size: .92rem; }
.hero-sample-card .sample-answers { grid-template-columns: 1fr 1fr; }
.hero-sample-card .sample-answers button { min-height: 44px; padding: 10px 12px; font-size: .82rem; line-height: 1.35; }
.hero-sample-card .sample-feedback { min-height: 2.8em; }
.hero-sample-card .sample-feedback.is-miss { color: #914442; font-weight: 700; }

.hero-resume-card[hidden],
.hero-sample-card[hidden] { display: none; }

.hero-resume-card .resume-progress { margin-top: 18px; }

.hero-resume-card .resume-actions { margin: 18px 0 0; }
.sample-privacy { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding-top: 12px; color: #556472; border-top: 1px solid #edf1ee; font-size: .7rem; line-height: 1.45; }
.sample-privacy .ic { flex: none; width: 13px; height: 13px; color: #528365; }
.hero-sample-card[aria-busy="true"] .sample-explanation { opacity: .6; }
.hero-sample-card .sample-answers button.is-incorrect { color: #913b3b; border-color: #dc8989; background: #fff4f2; }

/* A true preview screen: one real beginner lesson and one question, outside
   the account/course flow. It should feel like a calm sample, not a paywall. */
.sample-preview-screen { min-height: 100vh; padding: 24px; background: linear-gradient(180deg,#faf7f0 0,#fffdf8 360px); }
.sample-preview-wrap { width: min(780px,100%); margin: 0 auto; padding-bottom: 46px; }
.sample-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: clamp(42px,7vh,72px); }
.sample-back-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; color: var(--wood-ink); background: transparent; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 800; }
.sample-back-link:hover { background: #f2e9dc; }
.sample-back-link:focus-visible { outline: 3px solid var(--wood-ink); outline-offset: 2px; }
.sample-back-link .ic { width: 17px; transform: rotate(180deg); }
.sample-preview-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--bark); font-weight: 900; }
.sample-preview-brand > span > span { color: var(--wood-ink); }
.sample-preview-brand .logo-img { height: 40px; width: auto; }
.sample-preview-intro { max-width: 600px; margin: 0 auto 26px; text-align: center; }
.sample-preview-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--wood-ink); font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.sample-preview-eyebrow .sample-live-dot { width: 7px; height: 7px; }
.sample-preview-intro h1 { margin: 14px 0 10px; color: var(--bark); font-size: clamp(2rem,5vw,3rem); line-height: 1.1; letter-spacing: -.04em; }
.sample-preview-intro p { max-width: 540px; margin: 0 auto; color: var(--text-secondary); line-height: 1.65; }
.demo-lesson-card { padding: clamp(22px,4vw,38px); background: #fffdf8; border: 1px solid #e8ddcc; border-radius: 22px 22px 22px 7px; box-shadow: 0 18px 55px rgba(59,48,40,.09); }
.demo-lesson-meta { display: flex; align-items: center; gap: 10px; color: #6b5c4b; font-size: .85rem; font-weight: 850; }
.demo-lesson-number { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; color: #8b7d6c; font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.demo-lesson-number span:last-child { letter-spacing: 0; }
.demo-lesson-card h2 { margin: 11px 0; color: var(--bark); font-size: clamp(1.55rem,4vw,2.2rem); line-height: 1.15; letter-spacing: -.035em; }
.demo-lesson-explanation { margin: 0; color: #5f574b; font-size: 1rem; line-height: 1.8; }
.demo-check-heading { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 19px; color: var(--bark); border-top: 1px solid #eee3d4; font-size: .9rem; font-weight: 900; }
.demo-check-heading span:last-child { color: #8b7d6c; font-size: .78rem; font-weight: 700; }
.demo-question { margin: 9px 0 15px; color: #4a4036; font-weight: 850; }
.demo-answers { grid-template-columns: 1fr 1fr; }
.demo-answers button { min-height: 48px; font-size: .9rem; }
.demo-feedback { min-height: 2em; margin-top: 14px; }
.demo-lesson-footer { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding-top: 14px; color: #8b7d6c; border-top: 1px solid #eee3d4; font-size: .78rem; line-height: 1.5; }
.demo-lesson-footer .ic { flex: none; width: 15px; height: 15px; color: var(--wood-ink); }
.demo-next-step { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 24px; padding: 24px clamp(20px,4vw,32px); background: #f7efe2; border: 1px solid #e6d6c0; border-radius: 16px 16px 16px 5px; }
.demo-next-copy { max-width: 440px; }
.demo-next-kicker { color: var(--wood-ink); font-size: .67rem; font-weight: 900; letter-spacing: .1em; }
.demo-next-copy h2 { margin: 6px 0; color: var(--bark); font-size: 1.25rem; }
.demo-next-copy p { margin: 0; color: var(--text-secondary); font-size: .84rem; line-height: 1.55; }
.demo-next-step .btn { flex: none; }
.sample-return-bottom { display: block; margin: 20px auto 0; padding: 9px 12px; color: #7a6b5b; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 750; }
.sample-return-bottom:hover { color: var(--wood-ink); text-decoration: underline; }
.course-tour { margin: 48px 0 26px; }
.course-tour-heading { max-width: 590px; margin: 0 auto 22px; text-align: center; }
.course-tour-heading h2 { margin: 8px 0; color: var(--bark); font-size: clamp(1.55rem,3.5vw,2.15rem); letter-spacing: -.035em; }
.course-tour-heading p { margin: 0; color: var(--text-secondary); font-size: .9rem; line-height: 1.6; }
.tour-player { overflow: hidden; background: #fffdf8; border: 1px solid #e8ddcc; border-radius: 20px 20px 20px 7px; box-shadow: 0 14px 44px rgba(59,48,40,.07); }
.tour-step-nav { display: grid; grid-template-columns: repeat(4,1fr); padding: 15px 18px 0; background: #fbf7ef; border-bottom: 1px solid #eee3d4; }
.tour-step-nav button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 4px 6px 14px; color: #8b7d6c; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 750; }
.tour-step-nav button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; transform: scaleX(.3); transition: transform .25s ease, background .25s ease; }
.tour-step-nav button > span:first-child { display: grid; width: 22px; height: 22px; flex: none; place-items: center; color: #8b7d6c; background: #f2eadd; border-radius: 50%; font-size: .68rem; }
.tour-step-nav button.is-active { color: var(--wood-ink); }
.tour-step-nav button.is-active > span:first-child,
.tour-step-nav button.is-complete > span:first-child { color: #fff; background: var(--wood-ink); }
.tour-step-nav button.is-active::after { background: var(--sapwood-gold); transform: scaleX(1); }
.tour-step-nav button:focus-visible,
.tour-control:focus-visible,
.tour-play:focus-visible,
.tour-practice-answer:focus-visible { outline: 3px solid var(--wood-ink); outline-offset: 2px; }
.tour-scene { min-height: 300px; padding: clamp(20px,4vw,38px); background: radial-gradient(ellipse at 95% 5%,rgba(214,185,137,.2),transparent 42%), repeating-linear-gradient(166deg, transparent 0 22px, rgba(168,120,77,.035) 23px 24px, transparent 25px 48px), #fffdf8; }
.tour-visual-card { position: relative; max-width: 570px; margin: 0 auto; animation: tour-scene-in .38s cubic-bezier(.16,1,.3,1) both; }
.tour-visual-top { display: flex; align-items: center; gap: 8px; color: #6b5e50; font-size: .75rem; font-weight: 900; }
.tour-course-mark { display: grid; width: 26px; height: 26px; place-items: center; color: var(--wood-ink); background: var(--sapwood-gold-pale); border: 1px solid var(--sapwood-gold); border-radius: 7px; }
.tour-course-mark .ic { width: 15px; height: 15px; }
.tour-visual-stage { margin-left: auto; color: #8b7d6c; font-size: .72rem; font-weight: 750; }
.tour-visual-eyebrow { display: block; margin-top: 22px; color: var(--wood-ink); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.tour-visual-card h3 { margin: 7px 0; color: var(--bark); font-size: clamp(1.3rem,3vw,1.75rem); letter-spacing: -.035em; }
.tour-visual-copy { margin: 0; color: #6b6257; font-size: .88rem; line-height: 1.6; }
.tour-selection-card { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 13px 15px; background: #fbf6ec; border: 1px solid #eadcc8; border-radius: 13px 13px 13px 5px; }
.tour-selection-icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--wood-ink); background: var(--sapwood-gold-pale); border-radius: 50% 50% 50% 12%; }
.tour-selection-icon .ic { width: 19px; height: 19px; stroke-width: 2; }
.tour-selection-name { color: var(--bark); font-weight: 850; }
.tour-selection-level { margin-left: auto; padding: 5px 9px; color: var(--wood-ink); background: #fffdf8; border: 1px solid #eadcc8; border-radius: 99px; font-size: .7rem; font-weight: 750; }
.tour-outline-list { display: grid; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: tour-item; }
.tour-outline-list li { position: relative; padding: 9px 12px 9px 40px; color: #6b6257; background: #fdfbf6; border: 1px solid #eee4d5; border-radius: 8px; font-size: .82rem; counter-increment: tour-item; }
.tour-outline-list li::before { content: counter(tour-item); position: absolute; top: 50%; left: 11px; display: grid; width: 20px; height: 20px; place-items: center; color: var(--wood-ink); background: #f4eadb; border-radius: 50%; font-size: .65rem; font-weight: 850; transform: translateY(-50%); }
.tour-outline-list li.is-current { color: var(--wood-ink); background: #f7efe2; border-color: #e2d2bc; font-weight: 800; }
.tour-more-lessons { margin: 9px 0 0; color: #8b7d6c; font-size: .75rem; font-weight: 750; text-align: right; }
.tour-learning-surface { margin-top: 18px; padding: 19px 21px; background: #fffcf6; border: 1px solid #eee4d5; border-left: 3px solid var(--sapwood-gold); border-radius: 10px; }
.tour-learning-topic { color: var(--wood-ink); font-size: .68rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.tour-learning-surface h4 { margin: 8px 0; color: var(--bark); font-size: 1rem; }
.tour-learning-surface p { display: -webkit-box; overflow: hidden; margin: 0; color: #6b6257; font-size: .84rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.tour-practice-prompt { margin: 16px 0 12px; color: var(--bark); font-weight: 850; }
.tour-practice-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tour-practice-answer { min-height: 42px; padding: 9px 12px; color: #5b5247; background: #fffdf8; border: 1px solid #e6dccd; border-radius: 9px; cursor: pointer; font: inherit; font-size: .8rem; text-align: left; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.tour-practice-answer:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--sapwood-gold); background: #fbf6ec; }
.tour-practice-answer:disabled { cursor: default; }
.tour-practice-answer.is-correct { color: #17643a; border-color: #55b77b; background: #edf9f1; }
.tour-practice-answer.is-incorrect { color: #913b3b; border-color: #dc8989; background: #fff4f2; }
.tour-practice-feedback { min-height: 1.4em; margin: 11px 0 0; color: #8b7d6c; font-size: .8rem; line-height: 1.5; }
.tour-practice-feedback.is-visible { color: #3f6a48; font-weight: 750; }
.tour-cursor { position: absolute; z-index: 6; top: 0; left: 0; width: 25px; height: 31px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(17,34,23,.28)); animation: tour-cursor-in .5s ease-out both; will-change: transform; }
.tour-cursor.is-resting > svg { animation: tour-cursor-idle 2.6s ease-in-out infinite; }
.tour-cursor.is-clicking > svg { animation: tour-cursor-press .32s ease-out; }
.tour-cursor > svg { position: relative; z-index: 2; display: block; width: 22px; height: 28px; fill: #1c3022; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.tour-click-ripple { position: absolute; z-index: 1; top: -4px; left: -4px; width: 8px; height: 8px; border: 2px solid #27814a; border-radius: 50%; opacity: 0; }
.tour-cursor.is-clicking .tour-click-ripple { animation: tour-click .55s ease-out both; }
.tour-scene.stage-0 .tour-cursor { --cursor-top: 78%; --cursor-left: 84%; }
.tour-scene.stage-1 .tour-cursor { --cursor-top: 62%; --cursor-left: 90%; }
.tour-scene.stage-2 .tour-cursor { --cursor-top: 79%; --cursor-left: 90%; }
.tour-scene.stage-3 .tour-cursor { --cursor-top: 72%; --cursor-left: 88%; }
.tour-controls { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 18px; background: #fbf7ef; border-top: 1px solid #eee3d4; }
.tour-control { display: grid; width: 38px; height: 38px; place-items: center; color: var(--wood-ink); background: #fffdf8; border: 1px solid #e6dccd; border-radius: 50%; cursor: pointer; }
.tour-control:disabled { opacity: .42; cursor: default; }
.tour-control .ic { width: 17px; height: 17px; }
.tour-prev .ic { transform: rotate(180deg); }
.tour-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 15px; color: #fff; background: #765237; border: 0; border-radius: 99px; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 850; }
.tour-play:hover { background: #65452f; }
.tour-play .ic { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.tour-step-count { min-width: 74px; color: #8b7d6c; font-size: .72rem; font-weight: 750; text-align: center; }
.tour-scene.stage-0 .tour-visual-card { --tour-origin: 0 50%; }
.tour-scene.stage-1 .tour-visual-card { --tour-origin: 50% 50%; }
.tour-scene.stage-2 .tour-visual-card { --tour-origin: 50% 50%; }
.tour-scene.stage-3 .tour-visual-card { --tour-origin: 100% 50%; }
@keyframes tour-scene-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tour-cursor-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tour-cursor-idle { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(1px, 2px) rotate(-2deg); } }
@keyframes tour-cursor-press { 0% { transform: scale(1); } 40% { transform: scale(.86); } 100% { transform: scale(1); } }
@keyframes tour-click { 0% { opacity: .7; transform: scale(.4); } 70% { opacity: .4; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.8); } }
body.dark .sample-preview-screen { background: linear-gradient(180deg,#171a17 0,#201d19 360px); }
body.dark .sample-preview-brand, body.dark .sample-preview-intro h1, body.dark .demo-lesson-card h2 { color: #eee9df; }
body.dark .sample-preview-intro p, body.dark .demo-lesson-explanation { color: #b8b1a4; }
body.dark .demo-lesson-card { background: #241f1a; border-color: #4a3b2e; }
body.dark .demo-lesson-meta, body.dark .demo-question, body.dark .demo-check-heading { color: #e0d5c6; }
body.dark .demo-lesson-number, body.dark .demo-check-heading span:last-child, body.dark .demo-lesson-footer { color: #a99e8e; }
body.dark .demo-next-step { background: #2d261f; border-color: #4a3b2e; }
body.dark .demo-next-copy h2 { color: #eee9df; }
body.dark .demo-next-copy p { color: #b8b1a4; }
body.dark .course-tour-heading h2 { color: #eee9df; }
body.dark .course-tour-heading p { color: #b8b1a4; }
body.dark .tour-player { background: #241f1a; border-color: #4a3b2e; }
body.dark .tour-step-nav, body.dark .tour-controls { background: #201c18; border-color: #4a3b2e; }
body.dark .tour-step-nav button { color: #a99e8e; }
body.dark .tour-step-nav button.is-active { color: #d3b28b; }
body.dark .tour-step-nav button.is-active > span:first-child,
body.dark .tour-step-nav button.is-complete > span:first-child { color: #fff; background: #8b6243; }
body.dark .tour-scene { background: radial-gradient(ellipse at 95% 5%,rgba(168,120,77,.13),transparent 42%), #2a241e; }
body.dark .tour-visual-card h3 { color: #eee9df; }
body.dark .tour-visual-copy, body.dark .tour-step-count { color: #b8b1a4; }
body.dark .tour-visual-stage { color: #a99e8e; }
body.dark .tour-selection-card, body.dark .tour-outline-list li,
body.dark .tour-learning-surface { background: #2d261f; border-color: #4a3b2e; }
body.dark .tour-selection-name, body.dark .tour-learning-surface h4,
body.dark .tour-practice-prompt { color: #eee9df; }
body.dark .tour-outline-list li, body.dark .tour-learning-surface p { color: #b8b1a4; }
body.dark .tour-selection-level { color: #d8c8b2; background: #241f1a; border-color: #4a3b2e; }
body.dark .tour-practice-answer, body.dark .tour-control { color: #e0d5c6; background: #2d261f; border-color: #4a3b2e; }
body.dark .tour-practice-answer.is-correct { color: #b5e7c1; background: #294332; border-color: #4c8e60; }
body.dark .tour-practice-answer.is-incorrect { color: #ffc3bc; background: #472e2d; border-color: #9e5d57; }
body.dark .tour-practice-feedback.is-visible { color: #b5e7c1; }
body.dark .tour-cursor > svg { fill: #eee9df; stroke: #201c18; }

/* Side arrows sit on the edges of the scene, so the pointer travels to them the
   way a visitor's mouse would. The scene keeps room for them on both sides. */
.tour-stage { position: relative; }
.tour-scene { position: relative; overflow: hidden; padding: clamp(24px,4vw,38px) clamp(54px,7vw,66px); }
.tour-side-arrow { position: absolute; top: 50%; z-index: 3; display: grid; width: 40px; height: 40px; place-items: center; color: var(--wood-ink); background: #fffdf8; border: 1px solid #e6dccd; border-radius: 50%; box-shadow: 0 4px 12px rgba(59,48,40,.08); cursor: pointer; transform: translateY(-50%); transition: background .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease; }
.tour-side-arrow .ic { width: 17px; height: 17px; }
.tour-side-arrow:focus-visible { outline: 3px solid var(--wood-ink); outline-offset: 2px; }
.tour-side-arrow:disabled { opacity: .32; cursor: default; box-shadow: none; }
.tour-side-arrow.is-hover:not(:disabled) { border-color: var(--sapwood-gold); background: #fbf6ec; }
.tour-side-arrow.is-pressed { transform: translateY(-50%) scale(.9); background: #f4eadb; }
.tour-prev { left: 10px; }
.tour-next { right: 10px; }
.tour-practice-answer.is-hover:not(:disabled) { transform: translateY(-1px); border-color: #76b68a; background: #f4faf5; }
.tour-practice-answer.is-pressed { transform: scale(.97); }
body.dark .tour-side-arrow { color: #d3b28b; background: #2d261f; border-color: #4a3b2e; box-shadow: none; }
body.dark .tour-side-arrow.is-hover:not(:disabled) { background: #3a3027; border-color: #8b6243; }
@media (max-width: 560px) {
  .tour-scene { padding: 22px 42px; }
  .tour-side-arrow { width: 34px; height: 34px; }
  .tour-side-arrow .ic { width: 15px; height: 15px; }
  .tour-prev { left: 4px; }
  .tour-next { right: 4px; }
}
@media (max-width: 560px) {
  .sample-preview-screen { padding: 18px 16px; }
  .sample-preview-header { margin-bottom: 42px; }
  .demo-lesson-card { padding: 22px 18px; }
  .demo-answers { grid-template-columns: 1fr; }
  .demo-next-step { align-items: stretch; flex-direction: column; gap: 18px; }
  .demo-next-step .btn { width: 100%; }
  .course-tour { margin-top: 38px; }
  .tour-step-nav { padding-inline: 8px; }
  .tour-step-nav button { flex-direction: column; gap: 4px; padding-inline: 2px; font-size: .64rem; }
  .tour-scene { min-height: 330px; padding: 20px 16px; }
  .tour-practice-answers { grid-template-columns: 1fr; }
  .tour-controls { gap: 8px; padding-inline: 8px; }
  .tour-play { padding-inline: 11px; font-size: .72rem; }
}

/* A precise editorial progress path: milestones are contour markers, not plant stages. */
.landing-scroll-track { height: 13px; bottom: -7px; overflow: visible; }
.landing-path-base,
.landing-scroll-track #landingScrollProgress { position: absolute; top: 5px; left: 0; width: 100%; height: 2px; border-radius: 99px; }
.landing-path-base { background: var(--border); }
.landing-scroll-track #landingScrollProgress { background: linear-gradient(90deg, var(--sapwood-gold), var(--wood-ink) 72%, var(--green-accent)); }
.path-marker { position: absolute; top: -1px; left: var(--path-at); z-index: 2; width: 13px; height: 13px; background: var(--paper); border: 1.5px solid var(--sapwood-gold); border-radius: 4px; transform: translateX(-50%) rotate(45deg) scale(.82); transition: background .3s ease, border-color .3s ease, transform .35s var(--ease-spring), box-shadow .3s ease; }
.path-marker[data-progress="0.16"] { --path-at: 16%; }
.path-marker[data-progress="0.4"] { --path-at: 40%; }
.path-marker[data-progress="0.66"] { --path-at: 66%; }
.path-marker[data-progress="0.9"] { --path-at: 90%; }
.path-marker.is-reached { background: var(--wood-ink); border-color: var(--wood-ink); transform: translateX(-50%) rotate(45deg) scale(1); box-shadow: 0 0 0 3px rgba(118,82,55,.12); }
.categories-inner, .features, .testimonials, .lp-pricing-inner { position: relative; }
.categories-inner::before, .features::before, .testimonials::before, .lp-pricing-inner::before { content: ""; position: absolute; top: 10%; right: 1%; width: clamp(150px, 20vw, 270px); height: 120px; background: repeating-linear-gradient(166deg, transparent 0 11px, rgba(168,120,77,.08) 12px 13px, transparent 14px 25px); -webkit-mask-image: radial-gradient(ellipse, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse, #000 0%, transparent 72%); pointer-events: none; }
.landing-nav .logo-img { transition: transform .2s ease; }
.landing-nav .brand-lockup:hover .logo-img,
.landing-nav .brand-lockup:focus-visible .logo-img { transform: translateY(-1px) scale(1.04); }
.sample-question-meta { display: inline-flex; align-items: center; gap: 8px; }
.sample-progress-mark { display: inline-grid; width: 19px; height: 19px; place-items: center; color: var(--green-accent); background: var(--primary-green-light); border: 1px solid var(--green-accent); border-radius: 50%; opacity: 0; transform: scale(.25); transition: opacity .25s ease, transform .4s var(--ease-spring); }
.sample-progress-mark .ic { width: 12px; height: 12px; }
.sample-progress-mark.is-visible { opacity: 1; transform: scale(1); animation: progress-mark-pop .5s cubic-bezier(.2,1.35,.45,1) both; }
.hero-sample-card { transform-origin: left center; backface-visibility: hidden; }
.sample-course-path { margin-top: 12px; border-top: 1px solid #edf1ee; border-bottom: 1px solid #edf1ee; }
.sample-course-path summary { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 12px; color: #345544; cursor: pointer; list-style: none; font-size: .78rem; font-weight: 850; }
.sample-course-path summary::-webkit-details-marker { display: none; }
.sample-course-path summary > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.sample-course-path summary > span:first-child .ic { width: 16px; height: 16px; color: #3c8654; }
.sample-course-path summary > span:last-child { color: #556472; font-size: .7rem; font-weight: 700; }
.sample-course-path summary::after { content: ""; width: 7px; height: 7px; flex: none; margin-left: -5px; border-right: 1.5px solid #6c8174; border-bottom: 1.5px solid #6c8174; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.sample-course-path[open] summary::after { transform: rotate(225deg) translate(-2px,-1px); }
.sample-course-path summary:focus-visible { outline: 3px solid #76c98e; outline-offset: 2px; border-radius: 4px; }
.sample-course-path ol { display: grid; max-height: 220px; overflow: auto; gap: 0; margin: 0 0 10px; padding: 2px 4px 2px 0; list-style: none; counter-reset: course-stop; }
.sample-course-path li { position: relative; min-height: 33px; padding: 8px 8px 8px 34px; color: #64736a; border-left: 1px solid #d9e8dc; font-size: .76rem; line-height: 1.35; counter-increment: course-stop; }
.sample-course-path li::before { content: counter(course-stop); position: absolute; top: 6px; left: -10px; display: grid; width: 20px; height: 20px; place-items: center; color: #708174; background: #f1f6f2; border: 1px solid #dce9de; border-radius: 50%; font-size: .62rem; font-weight: 850; }
.sample-course-path li.is-current { color: #256a40; font-weight: 850; }
.sample-course-path li.is-current::before { color: white; background: #2a8b50; border-color: #2a8b50; }
.sample-privacy { padding-top: 12px; }
.sample-course-path ol::-webkit-scrollbar { width: 5px; }
.sample-course-path ol::-webkit-scrollbar-thumb { background: #cbdace; border-radius: 99px; }
/* The hero sample card keeps its white "paper" surface in both themes (see
   .sample-lesson-card), so its text must keep the light-surface inks too. The
   old dark overrides painted pale green on that white card (1.37:1). */
body.dark .sample-course-path { border-color: #d9e8dc; }
@keyframes progress-mark-pop { 0% { transform: scale(.2); } 65% { transform: scale(1.16); } 100% { transform: scale(1); } }
@media (max-width: 480px) {
  .path-marker { width: 11px; height: 11px; top: 0; }
  .landing-scroll-track { height: 11px; bottom: -6px; }
  .landing-path-base, .landing-scroll-track #landingScrollProgress { top: 4px; }
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(330px, .92fr); gap: 28px; padding: 54px 24px 48px; }
  .hero h1 { font-size: clamp(2.5rem, 4.8vw, 3.4rem); }
}
@media (max-width: 760px) {
  .hero-inner { grid-template-columns: 1fr; gap: 38px; padding: 56px 22px 76px; }
  .hero-content { max-width: 620px; }
  .hero h1 { max-width: 560px; }
  .hero-visual { justify-content: flex-start; }
  .hero-sample-card { max-width: 620px; }
}
@media (max-width: 500px) {
  .hero-inner { padding: 42px 17px 58px; gap: 30px; }
  .hero h1 { font-size: clamp(2.35rem, 11vw, 3.1rem); }
  .hero-sub { margin-bottom: 22px; font-size: 1rem; }
  .seed-options { gap: 7px; }
  .seed-choice { min-height: 76px; padding: 9px 9px; font-size: .75rem; }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; padding-inline: 13px; font-size: .88rem; }
  .hero-sample-card { padding: 20px 16px; border-radius: 18px 18px 18px 6px; }
  .hero-sample-card .sample-answers { grid-template-columns: 1fr; gap: 7px; }
  .hero-sample-card .sample-answers button { min-height: 40px; }
  .sample-lesson-kicker { font-size: .61rem; letter-spacing: .06em; }
}

/* Dashboard refinement follow-up overrides. */
.hub-create-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--green-ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.hub-create-btn .ic { width: 17px; height: 17px; }
.hub-create-btn:hover { border-color: var(--primary-green); background: var(--primary-green-soft); transform: translateY(-1px); }
.hub-create-btn.is-limit { border-color: transparent; background: var(--primary-green-soft); }

@media (max-width: 860px) {
  .hub-create-btn { display: inline-flex; }
}

#hubTopbarDesktopSlot,
#hubTopbarMobileSlot { display: contents; }

.hub-search-toggle { display: none; }
#hubUserHelp { display: none; }

@media (max-width: 860px) {
  .hub-empty-state { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; margin-bottom: 18px; padding: 18px; }
  .hub-empty-icon { width: 46px; height: 46px; border-radius: 14px; }
  .hub-empty-icon .ic { width: 23px; height: 23px; }
  .hub-empty-copy h2 { font-size: 1.12rem; }
  .hub-empty-copy > p:last-child { font-size: 0.86rem; }
  .hub-empty-actions { grid-column: 1 / -1; justify-content: stretch; }
  .hub-empty-actions .btn { flex: 1 1 0; padding-inline: 10px; font-size: 0.84rem; }
}

@media (max-width: 860px) {
  .hub-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "search search";
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    padding: 8px 14px;
  }

  .hub-sidebar .brand-lockup { grid-area: brand; min-width: 0; padding: 0 2px; }
  .hub-topbar-slot-mobile,
  #hubTopbar { display: contents; }
  .hub-top-right {
    grid-area: actions;
    width: auto;
    justify-content: flex-end;
    gap: 5px;
  }
  .hub-search-toggle {
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }
  .hub-create-btn {
    flex: 0 0 42px;
    width: 42px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
  }
  .hub-create-btn span { display: none; }
  .hub-create-btn .ic { width: 20px; height: 20px; }
  #helpBtn { display: none; }
  .hub-user {
    flex: 0 0 42px;
    width: 42px;
    height: 44px;
    justify-content: center;
    padding: 0;
  }
  .hub-user .user-meta,
  .hub-user .caret,
  .hub-user .pro-pill { display: none; }
  .hub-user .avatar { margin: 0; }
  .hub-user .user-menu { top: calc(100% + 8px); right: 0; left: auto; }
  .hub-search {
    display: none;
    grid-area: search;
    width: 100%;
    max-width: none;
    margin-top: 8px;
  }
  .hub-sidebar.mobile-search-open .hub-search { display: block; }
  .hub-sidebar.mobile-search-open .hub-search input { min-height: 44px; }
  #hubUserHelp { display: flex; }
}

/* Empty accounts get a real first action before metrics or backup reminders. */
.hub-empty-state {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  padding: 24px 26px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  background: linear-gradient(115deg, var(--white), var(--primary-green-soft));
  box-shadow: var(--shadow-sm);
}
.hub-empty-state[hidden],
#homeStatsGrid[hidden],
#homeCoursesPanel[hidden],
#homeSideColumn[hidden] { display: none !important; }
.hub-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  background: var(--primary-green-extra-light);
  color: var(--green-ink);
}
.hub-empty-icon .ic { width: 27px; height: 27px; }
.hub-empty-kicker {
  margin: 0 0 5px;
  color: var(--green-ink);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.hub-empty-copy h2 {
  margin: 0 0 6px;
  color: var(--navy-ink);
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.2;
}
.hub-empty-copy > p:last-child {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}
.hub-empty-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hub-empty-actions .btn { min-height: 46px; white-space: nowrap; }
#screenHub.is-empty-dashboard[data-view="dashboard"] #sidebarCreateCard { display: none; }

@media (min-width: 1101px) {
  #homeSideColumn {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
@media (max-width: 1100px) {
  #homeSideColumn { position: static; max-height: none; overflow: visible; }
}

/* Summary tiles are not links; avoid the misleading hover lift. */
.stat-card:hover { transform: none; box-shadow: var(--shadow-xs); }
.stat-card .stat-growth.is-muted { color: var(--text-muted); font-weight: 600; }

/* Compact, two-row mobile metrics let the useful course content appear sooner. */
@media (max-width: 560px) {
  #homeStatsGrid { gap: 9px; margin-bottom: 18px; }
  #homeStatsGrid .stat-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: "icon value" "icon label" "growth growth" "action action";
    align-content: start;
    align-items: center;
    gap: 4px 8px;
    min-height: 0;
    padding: 11px 12px;
    border-radius: 16px;
  }
  #homeStatsGrid .stat-icon { grid-area: icon; width: 34px; height: 34px; align-self: center; }
  #homeStatsGrid .stat-value { grid-area: value; font-size: 1.4rem; line-height: 1; }
  #homeStatsGrid .stat-label { grid-area: label; font-size: 0.7rem; line-height: 1.2; }
  #homeStatsGrid .stat-growth { grid-area: growth; margin-top: 4px; font-size: 0.66rem; line-height: 1.25; }
  #homeStatsGrid .stat-plan-link { grid-area: action; margin-top: 2px; font-size: 0.68rem; }
}

/* Week activity shows the date and a proportional bar, not ambiguous initials. */
.week-days { align-items: stretch; gap: 5px; }
.week-day {
  height: auto;
  min-height: 62px;
  padding: 6px 2px 5px;
  flex-direction: column;
  gap: 2px;
  border-radius: 11px;
}
.week-day-name { line-height: 1; }
.week-day-date { color: var(--text-primary); font-size: 0.73rem; font-weight: 900; line-height: 1.1; }
.week-day-track { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 24px; margin-top: 2px; }
.week-day-track > span { display: block; width: 6px; min-height: 3px; max-height: 24px; border-radius: 99px; background: var(--border-light); }
.week-day.is-active .week-day-track > span { background: var(--green-btn); }
.week-day.is-today .week-day-date { color: var(--green-ink); }

/* Resume is the explicit open action; don't show a second arrow. */
.course-row.has-resume .course-actions .course-open-btn { display: none; }
@media (max-width: 640px) {
  .course-row.has-resume {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas: "thumb info" "thumb actions";
    align-items: start;
    row-gap: 4px;
  }
  .course-row.has-resume .course-actions { justify-content: flex-start; margin-left: 0; }
  .course-row.has-resume .course-resume-btn { min-width: 88px; }
}

body.dark .hub-empty-state { background: linear-gradient(115deg, #16202c, #1b3a2b); border-color: #2b3c50; }
body.dark .hub-empty-icon { background: #1b3a2b; color: var(--green-ink-bright); }
body.dark .hub-create-btn { background: #16202c; border-color: #2b3c50; color: var(--green-ink-bright); }
body.dark .hub-create-btn:hover,
body.dark .hub-create-btn.is-limit { background: #1b3a2b; }
body.dark .week-day-date { color: var(--text-primary); }
body.dark .week-day-track > span { background: #3a4a5e; }
body.dark .week-day.is-active .week-day-track > span { background: var(--green-ink-bright); }

@media (max-width: 860px) {
  .hub-empty-state {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 18px;
    padding: 18px;
  }

  .hub-empty-icon { width: 46px; height: 46px; border-radius: 14px; }
  .hub-empty-icon .ic { width: 23px; height: 23px; }
  .hub-empty-copy h2 { font-size: 1.12rem; }
  .hub-empty-copy > p:last-child { font-size: 0.86rem; }
  .hub-empty-actions { grid-column: 1 / -1; justify-content: stretch; }
  .hub-empty-actions .btn { flex: 1 1 0; padding-inline: 10px; font-size: 0.84rem; }
}

@media (max-width: 560px) {
  /* At the free limit the compact header action already opens Plans. */
  #homeStatsGrid .stat-plan-link { display: none; }
}

/* Keep this typography test after component rules: some controls declare
   `font: inherit` locally, which would otherwise restore Nunito on them. */
h1, h2, h3, h4, h5, h6,
button, label, small, input, select, textarea,
[class*="eyebrow"], [class*="badge"], [class*="chip"],
[class*="tag"], [class*="meta"], [class*="label"] {
  font-family: var(--font-ui);
}