/* Studyfin — modern, flashy design system */

:root {
  --bg: #fafaff;
  --bg-deep: #0b0b1a;
  --surface: #ffffff;
  --surface-2: #f5f6fb;
  --ink: #0b0b1a;
  --ink-soft: #2a2b3d;
  --muted: #6b7280;
  --border: #ececf4;

  /* Owl brand — violet → fuchsia tile, cyan eye-rings, amber belly, pink tufts */
  --brand-1: #7c5cff;   /* violet (tile top) */
  --brand-2: #d946ef;   /* fuchsia (tile bottom) */
  --brand-3: #22d3ee;   /* cyan (eye rings) */
  --accent:  #fb923c;   /* amber/orange (belly) */
  --pink:    #f472b6;   /* tufts */
  --periwinkle: #a5b4fc;/* sparkle */
  --success: #10b981;
  --danger:  #ef4444;

  --grad-primary: linear-gradient(140deg, #7c5cff 0%, #a855f7 50%, #d946ef 100%);
  --grad-cool:    linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
  --grad-warm:    linear-gradient(135deg, #fbbf24 0%, #fb7a3c 100%);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 18px 60px rgba(124, 92, 255, 0.35);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 22px;   /* ~40% over the original 16px — large, kid-readable web base */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

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

/* === Decorative background blobs === */
.bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.bg-orbs::before, .bg-orbs::after {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: drift 18s ease-in-out infinite alternate;
}
.bg-orbs::before {
  background: radial-gradient(circle at 30% 30%, #d946ef, transparent 70%);
  top: -120px; left: -120px;
}
.bg-orbs::after {
  background: radial-gradient(circle at 60% 60%, #6366f1, transparent 70%);
  bottom: -180px; right: -180px;
  animation-delay: -6s;
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 40px) scale(1.1); }
}

/* === Nav === */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 40px);
  background: rgba(255,255,255,0.7);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand img.logo { width: 34px; height: 34px; display: block; border-radius: 9px; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.brand:hover img.logo { transform: rotate(-7deg) scale(1.1); }
@media (prefers-reduced-motion: reduce){ .brand img.logo { transition: none; } .brand:hover img.logo { transform: none; } }
.brand .mark {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand .dot { color: var(--brand-2); }
.nav .who { color: var(--muted); font-size: 16px; }
/* Top-nav links bigger & clearly tappable — kids (and parents) shouldn't squint. */
.nav .btn { font-size: 18px; padding: 11px 18px; }
.nav .btn-ghost { font-weight: 700; }

/* === Container === */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 36px);
}
.container.narrow { max-width: 760px; }
.container.wide   { max-width: 1240px; }

/* === Hero === */
.hero {
  text-align: center;
  padding: clamp(56px, 8vw, 110px) 24px 36px;
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124, 92, 255, 0.1);
  color: #6d28d9;
  border: 1px solid rgba(124, 92, 255, 0.2);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.hero h1 .grad {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.hero p.lead {
  color: var(--muted);
  font-size: clamp(16px, 2vw, 19px);
  max-width: 680px;
  margin: 0 auto 36px;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.14s cubic-bezier(.34,1.4,.5,1), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, filter 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover  { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #d9cffb; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-primary {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 26px rgba(124, 92, 255, 0.32);
}
.btn-primary:hover { filter: brightness(1.03); box-shadow: 0 16px 40px rgba(124, 92, 255, 0.45); transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
}
.btn-ghost:hover { background: var(--surface-2); }

.btn-google {
  background: #fff;
  border: 1px solid var(--border);
  color: #3c4043;
  font-weight: 600;
  width: 100%;
}
.btn-google img { width: 18px; height: 18px; }

.btn-lg { padding: 15px 26px; font-size: 17px; border-radius: 15px; }
.btn-full { width: 100%; }

/* === Cards === */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 28px;
  position: relative;
}
.card.tight { padding: 22px; }
.card.lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* === Role chooser cards === */
.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 720px) { .role-grid { grid-template-columns: 1fr; } }

.role-card {
  padding: 36px 28px;
  text-align: left;
  position: relative;
  overflow: hidden;
  cursor: default;
}
.role-card .icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 16px;
  font-size: 28px;
  color: #fff;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.role-card.student .icon { background: var(--grad-primary); }
.role-card.parent  .icon { background: var(--grad-cool); }
.role-card h3 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.role-card p  { color: var(--muted); margin: 0 0 22px; font-size: 15.5px; }

/* === Feature strip === */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
}
@media (max-width: 800px) { .features { grid-template-columns: 1fr; } }
.feature {
  padding: 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(124, 92, 255, 0.15); border-color: #d9cffb; }
.feature .badge { font-size: 22px; }
.feature h4 { margin: 8px 0 4px; font-size: 16px; }
.feature p  { color: var(--muted); margin: 0; font-size: 15.5px; line-height: 1.55; }

/* === Subject tiles === */
.subjects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.subject-tile {
  position: relative;
  border-radius: var(--r-lg);
  padding: 22px 20px 20px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  border: none;
  background: var(--grad-primary);
  text-align: left;
  font-family: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  min-height: 130px;
  box-shadow: var(--shadow-md);
}
.subject-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.subject-tile .emoji { font-size: 30px; }
.subject-tile .name {
  font-weight: 700;
  font-size: 18px;
  margin-top: 8px;
  letter-spacing: -0.01em;
}
.subject-tile .count {
  position: absolute;
  bottom: 14px; right: 16px;
  font-size: 12px;
  opacity: 0.85;
}

/* === Forms === */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.form-row label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.form-row input,
.form-row select,
.form-row textarea {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-row input:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--brand-1);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.15);
}
.form-row select { padding-right: 34px; }   /* room for the custom caret */
.id-input {
  font-feature-settings: "tnum";
  letter-spacing: 0.3em;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/* === Global form controls (platform-wide consistency) ===================
   Every text-like input, select and textarea gets the same comfortable
   height, padding, radius, border and focus ring — so forms never look
   tiny or uneven, regardless of which page they're on. Checkboxes, radios,
   ranges, file and color inputs keep their native look. `.form-row` and
   `.id-input` stay more specific, so they still win where used. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  min-height: 40px;
  max-width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.5;
}
/* Custom caret so selects match text inputs in height + style across browsers. */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand-1);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15);
}
input::placeholder, textarea::placeholder { color: #9aa1b2; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
/* Compact controls inside dense action rows can opt out via .input-sm. */
.input-sm { min-height: 32px; padding: 5px 9px; font-size: 14px; }

/* === Status === */
.status {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 14px;
  margin-top: 14px;
  display: none;
}
.status.show { display: block; }
.status.err { background: #fef2f2; color: #b91c1c; }
.status.ok  { background: #ecfdf5; color: #047857; }
.status.warn{ background: #fff7ed; color: #c2410c; }

/* === Section titles === */
.section-title {
  margin: 32px 0 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}

/* === Footer === */
.footer {
  text-align: center;
  padding: 60px 24px 80px;
  color: var(--muted);
  font-size: 13px;
}
.staff-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--muted);
}

/* === Dashboard header === */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0 28px;
}
.dash-header h1 {
  margin: 0;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* === Placeholder === */
.placeholder {
  border: 1px dashed var(--border);
  background: rgba(255,255,255,0.6);
  border-radius: var(--r-lg);
  padding: 56px 28px;
  text-align: center;
  color: var(--muted);
}

/* === Tables === */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--surface-2);
}

/* === Badges === */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(124,92,255,0.1);
  color: #6d28d9;
}
.badge.linked  { background: rgba(16,185,129,0.12); color: #047857; }
.badge.pending { background: rgba(245,158,11,0.14); color: #b45309; }
.badge.mastered{ background: var(--grad-primary); color: white; }
.badge.work    { background: rgba(245,158,11,0.18); color: #b45309; }

/* === Tile list (parent dashboard) === */
.tile-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
}
.tile .name { font-weight: 700; margin-bottom: 4px; }
.tile .meta { color: var(--muted); font-size: 14.5px; }

/* === Subtle text === */
.subtle  { color: var(--muted); font-size: 18px; }
.empty   { color: var(--muted); font-size: 18px; font-style: italic; }

/* === Learn UI === */
.learn-shell {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}
@media (max-width: 900px) { .learn-shell { grid-template-columns: 1fr; } }

/* ── Large-screen / iPad polish (Guideline 4) ──────────────────────────────────
   The app was phone-first with NO min-width breakpoints, so on tablets wide surfaces
   lacked a comfortable reading width + breathing room. These rules ONLY add spacing/
   caps on big screens; the phone layout is untouched. */
@media (min-width: 820px) {
  main.container { padding-left: clamp(28px, 5vw, 72px); padding-right: clamp(28px, 5vw, 72px); }
  .learn-shell { max-width: 1040px; margin-left: auto; margin-right: auto; gap: 28px; }
}
@media (min-width: 1180px) {
  .container.narrow { max-width: 840px; }   /* keep long text columns readable on wide iPads */
}

.lesson-card {
  position: relative;
}
.lesson-card h2 {
  margin: 4px 0 10px;
  font-size: 26px;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.lesson-card .pillrow {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
  border: 1px solid var(--border);
}
.pill.brand { background: rgba(124,92,255,0.1); color: #6d28d9; border-color: rgba(124,92,255,0.18); }
.pill.warn  { background: rgba(245,158,11,0.12); color: #b45309; border-color: rgba(245,158,11,0.2); }

.lesson-body p { margin: 0 0 12px; }

.svg-frame {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #ffffff 0%, #f7f7fc 100%);
  padding: 12px;
  margin: 16px 0;
  display: flex;
  justify-content: center;
}
.svg-frame svg { max-width: 100%; height: auto; }
.svg-frame.inline {
  margin: 10px 0 18px;
  padding: 10px;
  background: linear-gradient(180deg, #fafbff 0%, #f3f4fb 100%);
}
.svg-frame.inline svg { max-height: 260px; width: 100%; }
.svg-frame.inline svg * { transform-box: fill-box; }

.lesson-block { margin-bottom: 8px; position: relative; }
.lesson-block p { margin: 0 0 8px; }

.lesson-image {
  margin: 10px 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #fafbff 0%, #f3f4fb 100%);
  overflow: hidden;
}
.lesson-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
}
.lesson-image .img-attr {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.lesson-image img {
  animation: imgZoomIn 600ms ease-out;
}
@keyframes imgZoomIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* === AI tutor demo section (iPad mockup + cycling screens) === */
.ai-demo-grid {
  display: grid;
  grid-template-columns: 540px 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .ai-demo-grid { grid-template-columns: 1fr; gap: 32px; }
  .ai-demo-tablet { margin: 0 auto; }
}
@media (max-width: 600px) {
  .ai-demo-tablet {
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 3 / 4;
    padding: 14px;
    border-radius: 28px;
  }
  .ai-demo-tablet__screen { border-radius: 14px; }
  .ai-demo-screen { padding: 18px; }
}

/* iPad shell — 3:4 portrait, uniform bezels, tiny camera dot, no notch / no home bar */
.ai-demo-tablet {
  position: relative;
  width: min(540px, 88vw);  /* viewport-relative: can never exceed the screen, any device */
  max-width: 100%;
  aspect-ratio: 540 / 720;  /* keep the iPad shape as it scales down */
  height: auto;
  background: linear-gradient(160deg, #1a1024, #06060e);
  border-radius: 40px;
  padding: 22px;
  box-shadow:
    0 36px 70px -22px rgba(124,92,255,0.45),
    0 14px 32px -8px rgba(0,0,0,0.42),
    inset 0 0 0 2px rgba(255,255,255,0.06);
  margin: 12px 0;
}
.ai-demo-tablet::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 46px;
  background: linear-gradient(135deg, rgba(124,92,255,0.5), rgba(6,182,212,0.5));
  filter: blur(32px);
  z-index: -1;
  opacity: 0.6;
}
.ai-demo-tablet__camera {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #444;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  z-index: 3;
}
.ai-demo-tablet__screen {
  /* Pinned inside the 22px bezel (not height:100% of an aspect-ratio parent,
     which let the white screen poke past the rounded bottom edge on iPad sizes). */
  position: absolute;
  inset: 22px;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  border-radius: 20px;
  overflow: hidden;
}

/* Cycling screens — each is absolutely positioned and fades in on its turn */
.ai-demo-screen-cycle {
  position: relative;
  width: 100%;
  height: 100%;
}
.ai-demo-screen {
  position: absolute;
  inset: 0;
  padding: 28px 28px 24px;
  opacity: 0;
  transform: translateY(10px);
  animation: aiDemoCycle 20s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes aiDemoCycle {
  0%, 22%   { opacity: 1; transform: translateY(0); }
  25%, 100% { opacity: 0; transform: translateY(-10px); }
}

.ai-demo-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ai-demo-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}
.ai-demo-pill--brand {
  background: rgba(124,92,255,0.12);
  color: #6d28d9;
}

/* Screen 1: subjects */
.ai-demo-subjects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
}
.ai-demo-tile {
  border-radius: 18px;
  color: white;
  text-align: center;
  padding: 36px 12px;
  font-size: 44px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}
.ai-demo-tile small {
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-top: 8px;
}

/* Screen 2: lesson */
.ai-demo-h4 { margin: 10px 0 12px; font-size: 18px; line-height: 1.3; }
.ai-demo-svg { width: 100%; height: auto; margin: 14px 0; }
.ai-demo-p { font-size: 14px; color: #4b5563; line-height: 1.5; margin: 6px 0; }

/* Screen 3: chat */
.ai-demo-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.ai-demo-bubble {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
}
.ai-demo-bubble--student {
  align-self: flex-end;
  background: #7c5cff;
  color: white;
  border-bottom-right-radius: 4px;
}
.ai-demo-bubble--tutor {
  align-self: flex-start;
  background: white;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px;
  color: #1f2937;
}

/* Screen 4: mastered */
.ai-demo-mastered {
  text-align: center;
  margin-top: 80px;
}
.ai-demo-mastered__big {
  font-size: 88px;
  font-weight: 800;
  background: linear-gradient(135deg, #7c5cff, #d946ef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.ai-demo-mastered__lbl {
  font-size: 18px;
  color: #6b7280;
  margin: 12px 0 28px;
}
.ai-demo-mastered__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ai-demo-chip {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(124,92,255,0.12);
  color: #6d28d9;
}

/* Right column: numbered steps */
.ai-demo-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ai-demo-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 14px;
  background: white;
  border: 1px solid #e5e7eb;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ai-demo-step:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 20px rgba(124,92,255,0.12);
}
.ai-demo-step__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.ai-demo-step h4 { margin: 0 0 4px; font-size: 16px; }
.ai-demo-step p { margin: 0; color: #4b5563; font-size: 14px; line-height: 1.5; }

/* === Topic picker: side-by-side Standard / Advanced columns === */
.topics-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
.topics-layout--single {
  grid-template-columns: 1fr;
}
.topics-col {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.topics-col--advanced {
  background: linear-gradient(180deg, rgba(124,92,255,0.06), rgba(6,182,212,0.04));
  border-color: rgba(124, 92, 255, 0.22);
}
.topics-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.topics-col-head h3 {
  margin: 0;
  font-size: 17px;
}
.topics-col-head .subtle {
  font-size: 12.5px;
}
.topics-col-blurb {
  font-size: 13px;
  color: #4b5563;
  margin: -4px 0 14px;
  line-height: 1.4;
}
.topics-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.topics-col--advanced .topics-tile-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.topics-col .subject-tile {
  min-height: 116px;
  padding: 14px 10px;
}
.topics-col .subject-tile .name {
  font-size: 13.5px;
  line-height: 1.25;
}
@media (max-width: 900px) {
  .topics-layout {
    grid-template-columns: 1fr;
  }
}

/* === Native-app mode (running inside Studyfin-iOS Capacitor shell) === */
/* When body.is-app is set, strip everything that screams "marketing
   website" and surface the focused sign-in / dashboard content like a
   real iOS app. Triggered by Capacitor detection or ?app=1 query param. */
body.is-app .topbar,
body.is-app .nav,
body.is-app .footer,
body.is-app .marquee,
body.is-app .footer-cta {
  display: none !important;
}

/* On the homepage ONLY, hide every section except the sign-in card (#start).
   Scoped to `.app-landing` (set on the marketing index page) — WITHOUT this scope
   the rule also matched the dashboards' own `<main> > <section>` blocks
   (pickerSection, topicSection, …), blanking the whole student/parent/teacher app
   in native mode while leaving only the fixed-position FABs (Ask Finn / scratchpad)
   visible. Every page shares body.sf-dash, so .app-landing is the discriminator. */
body.is-app.app-landing main > section:not(#start) { display: none !important; }

/* Make the sign-in section feel like an iOS welcome card, not a marketing
   strip. Full viewport height, centered, dark gradient background. */
body.is-app main {
  padding-top: 0 !important;
}
body.is-app #start {
  min-height: 100vh;
  min-height: 100dvh;   /* iOS Safari: exclude the dynamic address-bar area */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(env(safe-area-inset-top), 32px) 20px max(env(safe-area-inset-bottom), 32px);
  margin: 0 !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(124,92,255,0.35), transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(6,182,212,0.30), transparent 55%),
    linear-gradient(180deg, #0b0b1a 0%, #1a0f2e 100%);
}
body.is-app #start .container {
  max-width: 460px;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}
body.is-app #start h2,
body.is-app #start h1,
body.is-app #start p,
body.is-app #start .section-head * { color: white !important; }
body.is-app #start .btn { width: 100%; padding: 16px; font-size: 16px; border-radius: 14px; }
body.is-app #start .btn-light { background: white; color: #0b0b1a; }
body.is-app #start .btn-clear { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.25); }

/* Inside dashboards (student / parent / school), also strip the nav so the
   page reads like an app screen. The page's own header takes over. */
body.is-app main.container { max-width: none; padding: max(env(safe-area-inset-top), 12px) 16px max(env(safe-area-inset-bottom), 16px); }

/* === Lesson visual flourishes (cover emoji + block bubbles) === */
.lesson-cover-emoji {
  width: 64px;
  height: 64px;
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(124,92,255,0.12), rgba(6,182,212,0.12));
  box-shadow: 0 4px 12px rgba(124,92,255,0.18);
  animation: lessonCoverBob 4s ease-in-out infinite;
}
@keyframes lessonCoverBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}
.lesson-emoji-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  margin: 10px auto 14px;
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(248,250,252,1) 70%);
  box-shadow:
    0 6px 16px rgba(124, 92, 255, 0.15),
    inset 0 0 0 2px rgba(124, 92, 255, 0.08);
  animation: bubbleFloat 3.5s ease-in-out infinite;
}
@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@media print {
  .lesson-cover-emoji, .lesson-emoji-bubble {
    animation: none !important;
    box-shadow: none !important;
    background: white !important;
    border: 1px solid #ddd !important;
  }
}

/* === Colorful curriculum tiles (admin + parent) === */
.cur-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.cur-tile {
  position: relative;
  padding: 12px 10px;
  border-radius: 12px;
  color: white;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cur-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.cur-tile__emoji {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.cur-tile__name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,0.22);
  word-wrap: break-word;
}
.cur-tile--advanced {
  box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.6), 0 4px 10px rgba(0,0,0,0.08);
}
.cur-tile__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255,255,255,0.95);
  color: #7c5cff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}

/* In print, tiles render with their colors washed out so they don't bleed
   too much ink, but stay recognizable. */
@media print {
  .cur-tile {
    color: #111 !important;
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  .cur-tile__emoji, .cur-tile__name { text-shadow: none !important; }
  .cur-tile--advanced { box-shadow: 0 0 0 2px #7c5cff !important; }
}

/* === Curriculum print view (admin + parent) === */
@media print {
  body { background: white !important; }
  .nav, .topbar, .footer, .tab-btn, #curriculumControls,
  .lesson-chat, .mascot, .bg-orbs { display: none !important; }
  .tab-panel:not(.active) { display: none; }
  .tab-panel.active, .container, main { padding: 0 !important; margin: 0 !important; }
  .card, .curriculum-subject { box-shadow: none !important; border-color: #ddd !important; page-break-inside: avoid; }
  .curriculum-grade-block { page-break-before: auto; page-break-inside: avoid; }
  .curriculum-grade-block:not(:first-child) { page-break-before: always; }
  .curriculum-print-head { display: block !important; border-bottom: 1px solid #ddd; padding-bottom: 8px; }
  h1, h2, h3, h4 { color: #111 !important; }
  a { color: #333 !important; text-decoration: none !important; }
}

/* === Advanced/AP challenge tiles & badges === */
.subject-tile.advanced-tile {
  position: relative;
  box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.55), var(--shadow-lg);
}
.subject-tile.advanced-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.subject-tile .advanced-badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #7c5cff;
}
.advanced-rocket {
  display: inline-block;
  animation: rocketBob 2.4s ease-in-out infinite;
}
@keyframes rocketBob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-3px) rotate(-2deg); }
}

/* === In-lesson chat (Ask the tutor) === */
.lesson-chat {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid rgba(124, 92, 255, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.05), rgba(6, 182, 212, 0.04));
}
.lesson-chat__head h4 { margin: 0 0 4px; font-size: 16px; }
.lesson-chat__msgs {
  margin: 14px 0;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-bubble--tutor {
  align-self: flex-start;
  background: white;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px;
}
.chat-bubble--student {
  align-self: flex-end;
  background: #7c5cff;
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-bubble--thinking {
  font-style: italic;
  color: #6b7280;
  opacity: 0.85;
}
.lesson-chat__form {
  display: flex;
  gap: 8px;
}
.lesson-chat__form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 14.5px;
  background: white;
}
.lesson-chat__form input:focus {
  outline: none;
  border-color: #7c5cff;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15);
}
.lesson-chat__form input:disabled { opacity: 0.6; }
.chat-mic {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: white;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.chat-mic:hover { background: #f9fafb; }
.chat-mic.recording {
  background: #ef4444;
  border-color: #dc2626;
  color: white;
  animation: micPulse 1s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* === Sequential block reveal === */
.lesson-card .lesson-block,
.lesson-card .worked {
  opacity: 0;
  animation: blockSlideIn 480ms cubic-bezier(.2,.9,.3,1) forwards;
}
.lesson-card .lesson-block:nth-child(1) { animation-delay:   60ms; }
.lesson-card .lesson-block:nth-child(2) { animation-delay:  220ms; }
.lesson-card .lesson-block:nth-child(3) { animation-delay:  380ms; }
.lesson-card .lesson-block:nth-child(4) { animation-delay:  540ms; }
.lesson-card .lesson-block:nth-child(5) { animation-delay:  700ms; }
.lesson-card .lesson-block:nth-child(6) { animation-delay:  860ms; }
.lesson-card .worked                     { animation-delay: 1000ms; }
@keyframes blockSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Mascot mentor === */
.mascot {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  z-index: 4;
  pointer-events: none;
  max-width: 280px;
}
.mascot-speech {
  background: var(--surface);
  padding: 9px 14px;
  border-radius: 18px 18px 18px 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  position: relative;
  animation: speechIn 380ms cubic-bezier(.2,.9,.3,1);
  pointer-events: auto;
}
.mascot-speech::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 8px;
  border: 7px solid transparent;
  border-left-color: var(--surface);
}
.mascot-body {
  font-size: 40px;
  line-height: 1;
  animation: bob 2.6s ease-in-out infinite;
  transition: transform 0.3s ease;
}
.mascot-body img { width: 64px; height: 64px; display: block; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(124,92,255,0.35)); animation: mascotIdleBob 3.4s ease-in-out infinite; }
@keyframes mascotIdleBob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce){ .mascot-body img { animation: none; } }
.mascot.cheer .mascot-body { animation: cheerJump 0.6s ease-in-out 2; }
.mascot.encourage .mascot-body { animation: tilt 0.6s ease-in-out 2; }
@keyframes bob       { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cheerJump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px) scale(1.18); } }
@keyframes tilt      { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-15deg); } }
@keyframes speechIn  { from { opacity: 0; transform: translateY(8px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 720px) {
  .mascot { bottom: 8px; right: 8px; max-width: 200px; }
  .mascot-body { font-size: 32px; }
  .mascot-body img { width: 42px; height: 42px; }
  .mascot-speech { font-size: 12px; padding: 6px 10px; }
}

/* Streak flame pulse + goal-bar shine (P0 delight) */
.streak-pill:not(.cold) .fire { display: inline-block; animation: flamefx 1.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flamefx { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.18) rotate(3deg); } }
#goalFill { position: relative; box-shadow: 0 0 0 rgba(124,92,255,0); transition: width .6s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
#goalBlock.goal-met #goalFill { box-shadow: 0 0 14px rgba(124,92,255,0.55); }
@media (prefers-reduced-motion: reduce) {
  .mascot-body, .streak-pill .fire, #goalFill { animation: none !important; transition: none !important; }
}

/* === Step-by-step worked example === */
.worked .step-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.worked .step-row.visible {
  opacity: 1;
  transform: translateY(0);
}
.worked .step-row:last-child { border-bottom: none; }
.worked .step-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(124,92,255,0.3);
}
.worked .step-body { flex: 1; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; }
.worked .reveal-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.worked .reveal-progress {
  flex: 1;
  height: 5px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.worked .reveal-progress > div {
  height: 100%;
  background: var(--grad-primary);
  width: 0;
  transition: width 0.4s ease;
}

/* === Quiz options stagger + satisfying pick feedback === */
/* Visibility must NEVER depend on the entrance animation running: the pre-delay
   hidden state comes from the keyframe's `from{opacity:0}` via `both` fill, so a
   browser/setting that skips the animation (reduced-motion, old Firefox, engine
   with animations disabled) falls back to the element's default opacity:1 and the
   options stay VISIBLE. A prior `opacity:0` base left options invisible wherever
   the animation didn't fire — options vanished entirely for those users. */
.q-opt {
  animation: optIn 350ms ease-out both;
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.15s ease, background 0.15s ease;
}
.q-opt:nth-child(1) { animation-delay:  80ms; }
.q-opt:nth-child(2) { animation-delay: 180ms; }
.q-opt:nth-child(3) { animation-delay: 280ms; }
.q-opt:nth-child(4) { animation-delay: 380ms; }
@keyframes optIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
/* Reduced-motion: skip the slide-in but keep options fully visible (belt-and-suspenders). */
@media (prefers-reduced-motion: reduce) { .q-opt { animation: none; opacity: 1; } }
.q-opt.picked { transform: scale(1.02); box-shadow: 0 6px 20px rgba(124,92,255,0.25); }
.q-opt.correct { animation: optCorrect 0.6s ease; }
.q-opt.wrong   { animation: optWrong   0.5s ease; }
@keyframes optCorrect {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateY(-3px) scale(1.03); }
  50% { transform: translateY(0) scale(1); }
}
@keyframes optWrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Sound mute toggle in nav */
.sfx-toggle {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}
.sfx-toggle:hover { background: var(--surface-2); }
.sfx-toggle.muted { color: var(--muted); }

/* === Listen / TTS controls === */
.listen-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(124,92,255,0.06), rgba(6,182,212,0.06));
  border: 1px solid rgba(124,92,255,0.18);
  border-radius: var(--r-md);
  margin: 10px 0 18px;
}
.listen-row .label {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 600;
}
.btn-listen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-listen:hover  { border-color: var(--brand-1); color: var(--brand-1); }
.btn-listen.active {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,92,255,0.4);
}
.btn-listen.active .icon { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

.btn-listen-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
  vertical-align: middle;
}
.btn-listen-mini:hover { border-color: var(--brand-1); color: var(--brand-1); }
.btn-listen-mini.active {
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}

.speed-select {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

/* ============================================================
   Chatbot widget
   ============================================================ */
.chat-widget {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 70;
  font-family: inherit;
}
.chat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: var(--grad-primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.chat-toggle:hover { transform: translateY(-2px); }
.chat-toggle-icon { width: 26px; height: 26px; border-radius: 8px; background: #fff; padding: 2px; display: block; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.chat-head-left { display: flex; align-items: center; gap: 10px; }
.chat-bot-av { width: 34px; height: 34px; border-radius: 9px; background: #fff; padding: 2px; flex: 0 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
@media (max-width: 540px) {
  .chat-toggle-label { display: none; }
  .chat-toggle { padding: 14px; }
}

.chat-panel {
  position: absolute;
  bottom: 64px;
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatSlide 0.22s ease;
}
@keyframes chatSlide {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--grad-primary);
  color: #fff;
}
.chat-header strong { font-size: 15px; }
.chat-subtitle { font-size: 12px; opacity: 0.85; letter-spacing: 0.02em; }
.chat-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
}
.chat-close:hover { background: rgba(255,255,255,0.28); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 60%);
}
.chat-msg {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--grad-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg-assistant {
  align-self: flex-start;
  background: transparent;
  padding: 0;
  max-width: 92%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-av {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #fff url("/assets/mascot/logo.png") center / 84% no-repeat;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.chat-msg .chat-bubble {
  background: var(--surface-2);
  color: var(--ink);
  padding: 9px 13px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.chat-msg-assistant a {
  color: var(--brand-1);
  text-decoration: underline;
}
.chat-msg-assistant ul { margin: 6px 0; padding-left: 18px; }
.chat-msg-assistant li { margin-bottom: 2px; }
.chat-msg-assistant strong { font-weight: 700; }

.chat-typing { padding: 0; }
.chat-typing .chat-bubble { padding: 12px 14px; }
.chat-typing span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 3px;
  animation: chatDot 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatDot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

.chat-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
  margin-top: 4px;
}
.chat-quick {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chat-quick:hover { border-color: var(--brand-1); color: var(--brand-1); }

.chat-actions-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.chat-link {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 0;
}
.chat-link:hover { color: var(--brand-1); }

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-input-row input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font: inherit;
  font-size: 14px;
}
.chat-input-row input:focus {
  outline: none;
  border-color: var(--brand-1);
  background: #fff;
}
.chat-send {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--grad-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.chat-send:hover  { filter: brightness(1.08); }
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Reading-view lesson prose (grades 6+, non-slide view). Base is 22px; lift it so
   older students still get comfortably large, readable letters — big text at every
   age, not just the youngest. */
.lesson-body p { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.65; }
.lesson-body h2, .lesson-body h3 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.25; }

/* Currently-being-read paragraph */
.lesson-block.reading,
.q-prompt.reading {
  background: linear-gradient(90deg, rgba(124,92,255,0.08), transparent);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  margin-left: -10px;
  transition: background 0.3s ease;
}
.worked .step-row.reading {
  background: linear-gradient(90deg, rgba(124,92,255,0.10), transparent);
  border-radius: var(--r-sm);
  transition: background 0.3s ease;
}
.worked .step-row.reading .step-num {
  box-shadow: 0 0 0 3px rgba(124,92,255,0.25);
}

/* ============================================================
   Pricing
   ============================================================ */
.bill-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 36px;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.bill-toggle button {
  background: transparent;
  border: none;
  padding: 8px 18px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.15s ease;
}
.bill-toggle button.active {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.bill-toggle .save {
  display: inline-block;
  background: rgba(16,185,129,0.15);
  color: #047857;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1100px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tier-grid { grid-template-columns: 1fr; } }

.tier {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}
.tier::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 100% 0%, rgba(124,92,255,0.06), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(124,92,255,0.25); }
.tier:hover::before { opacity: 1; }
.tier.popular {
  border-color: transparent;
  background:
    linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)) padding-box,
    var(--grad-primary) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-glow);
}
.tier.popular::before {
  background: radial-gradient(120% 60% at 100% 0%, rgba(236,72,153,0.10), transparent 70%);
  opacity: 1;
}
.tier .badge-top {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-primary);
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tier h3 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.01em; }
.tier .tag-line { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.tier .price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.tier .price .num {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tier .price .per { color: var(--muted); font-size: 14px; }
.tier .price.custom .num { font-size: 28px; }
.tier .price-note { color: var(--muted); font-size: 13px; margin-bottom: 18px; min-height: 18px; }
.tier ul { list-style: none; padding: 0; margin: 0 0 22px; font-size: 14px; }
.tier ul li {
  padding: 6px 0 6px 26px;
  position: relative;
  color: var(--ink-soft);
  line-height: 1.45;
}
.tier ul li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 6px;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: rgba(16,185,129,0.15);
  color: #047857;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}
.tier ul li.no::before { content: "—"; background: var(--surface-2); color: var(--muted); }
.tier ul li.star::before { content: "★"; background: rgba(245,158,11,0.18); color: #b45309; }
.tier .cta { margin-top: auto; }

/* Comparison table */
.comp-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
}
.comp-wrap table { min-width: 720px; }
.comp-wrap th, .comp-wrap td { padding: 14px 18px; vertical-align: middle; font-size: 14px; }
.comp-wrap th { background: var(--surface-2); }
.comp-wrap th.col-q { background: var(--grad-primary); color: #fff; text-align: center; }
.comp-wrap td.col-q { text-align: center; font-weight: 700; color: #6d28d9; }
.comp-wrap td.check { text-align: center; color: var(--success); font-weight: 700; }
.comp-wrap td.cross { text-align: center; color: var(--muted); }
.comp-wrap td.note { text-align: center; font-weight: 600; color: var(--ink-soft); }

.worked {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 16px 18px;
  border-left: 4px solid var(--brand-1);
}
.worked h4 { margin: 0 0 8px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.worked ol { margin: 0; padding-left: 22px; }
.worked ol li { margin-bottom: 4px; }

/* === Quiz === */
.quiz-card { padding: 28px; }
.quiz-progress {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.qbar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin-bottom: 22px;
}
.qbar > div {
  height: 100%;
  background: var(--grad-primary);
  transition: width 0.4s ease;
}
.q-prompt {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.q-options { display: grid; gap: 10px; }
.q-opt {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
}
.q-opt:hover { border-color: var(--brand-1); transform: translateY(-1px); }
.q-opt.picked { border-color: var(--brand-1); background: rgba(124,92,255,0.08); }
.q-opt.correct { border-color: var(--success); background: rgba(16,185,129,0.1); }
.q-opt.wrong   { border-color: var(--danger);  background: rgba(239,68,68,0.08); }
.q-opt[disabled] { cursor: default; }

/* Kid-readable question + answer sizing. The body base is already 22px; these lift
   the QUESTION and the ANSWER OPTIONS well above it so young readers can read them
   easily (they previously inherited the base and looked small next to the big lesson
   slides). Pre-K–2 early readers (.quiz-card.early) get bigger still. Uses clamp so
   it scales down safely on small phones. */
.q-prompt { font-size: clamp(23px, 3vw, 33px); line-height: 1.4; font-weight: 650; }
.q-opt { font-size: clamp(20px, 2.4vw, 27px); line-height: 1.35; padding: 16px 18px; }
.q-key { min-width: 26px; height: 26px; }
.quiz-card.early .q-prompt { font-size: clamp(27px, 3.9vw, 40px); font-weight: 700; }
.quiz-card.early .q-opt { font-size: clamp(23px, 3vw, 32px); padding: 18px 20px; }
/* Pre-K, K & grade 1 — extra-large question + options for the youngest readers. */
.quiz-card.xl .q-prompt { font-size: clamp(34px, 4.8vw, 50px); font-weight: 750; line-height: 1.35; }
.quiz-card.xl .q-opt { font-size: clamp(28px, 3.6vw, 40px); padding: 20px 22px; }
.quiz-card.xl .q-key { min-width: 32px; height: 32px; }

/* === Result === */
.score-hero {
  text-align: center;
  padding: 40px 24px;
  background: var(--grad-primary);
  color: #fff;
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  box-shadow: var(--shadow-glow);
}
.score-hero .num {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.score-hero .label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  opacity: 0.85;
}

.result-row {
  display: flex;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.result-row:last-child { border-bottom: none; }
.result-row .ico {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}
.ico.ok { background: var(--success); }
.ico.no { background: var(--danger);  }

/* === Sidebar (right column) === */
.side h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.side ul { padding-left: 18px; margin: 0; color: var(--ink-soft); font-size: 14px; }
.side ul li { margin-bottom: 6px; }

/* === Progress (parent) === */
.progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.progress-card {
  position: relative;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.progress-card .bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  margin-top: 10px;
  overflow: hidden;
}
.progress-card .bar > div {
  height: 100%;
  background: var(--grad-primary);
}

/* === Modal === */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(11,11,26,0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 20px;
}
.modal-mask.show { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--r-xl);
  max-width: 460px;
  width: 100%;
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
/* Premium entrance: backdrop fades, dialog springs up. Runs on mount (the mask
   flips display:none → flex when .show is added), so no JS changes needed. */
@media (prefers-reduced-motion: no-preference) {
  .modal-mask.show { animation: sfMaskIn .22s ease both; }
  .modal-mask.show .modal { animation: sfModalIn .36s cubic-bezier(.34,1.4,.5,1) both; }
}
@keyframes sfMaskIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfModalIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

/* Reusable backdrop fade for ad-hoc fixed overlays (homework drawer, install
   sheet). Fades only the scrim — inner panels keep their own entrance motion. */
@media (prefers-reduced-motion: no-preference) {
  .sf-overlay { animation: sfMaskIn .2s ease both; }
  .sf-pop { animation: sfModalIn .36s cubic-bezier(.34,1.4,.5,1) both; }
}

/* === Loader === */
.loader {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(124,92,255,0.25);
  border-top-color: var(--brand-1);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-block {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

/* === Delightful lesson loading (Finn thinking + skeleton) === */
.lesson-loading { text-align: center; padding: 26px 18px; }
.lesson-loading .finn-think { width: 88px; height: 88px; animation: bob 2.2s ease-in-out infinite; }
.lesson-loading .ll-msg { margin-top: 12px; font-weight: 700; font-size: 16px; min-height: 1.4em; transition: opacity .25s ease; }
.lesson-loading .ll-sub { font-size: 12px; margin-top: 3px; }
.ll-skeleton { margin: 20px auto 0; max-width: 520px; display: grid; gap: 10px; }
.ll-skeleton .bar {
  height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--surface-2) 25%, rgba(124,92,255,0.12) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: llShimmer 1.4s ease infinite;
}
.ll-skeleton .bar.short { width: 55%; margin: 0 auto; }
.ll-skeleton .bar.img { height: 120px; border-radius: 12px; }
@keyframes llShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .lesson-loading .finn-think { animation: none; }
  .ll-skeleton .bar { animation: none; }
}

/* === Weekly-goal progress ring === */
.goal-ring {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--brand-1) calc(var(--p, 0) * 1%), var(--surface-2) 0);
}
.goal-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.goal-ring span { position: relative; font-weight: 800; font-size: 13px; }

/* === Confetti / sparkle === */
.confetti { position: fixed; pointer-events: none; inset: 0; z-index: 90; }

/* === Utility === */
.hide { display: none !important; }
/* Marketplace kill-switch: when config/flags.marketplacePublic === false, the
   flag module (marketplace-flag.js) adds .sf-mkt-off to <html>, hiding every
   public-marketplace entry point — including ones rendered after page load. */
.sf-mkt-off [data-marketplace] { display: none !important; }
.sf-schools-off [data-schools] { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack-12 > * + * { margin-top: 12px; }
.stack-20 > * + * { margin-top: 20px; }

/* ============================================================
   Landing-page-only enhancements (marketing sections)
   ============================================================ */

/* Hero — rotating phrase + shimmer */
.hero .grad {
  background-size: 200% 200%;
  animation: gradShift 8s ease infinite;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.cycle {
  display: inline-block;
  position: relative;
  min-width: 7ch;
  text-align: left;
  vertical-align: bottom;
}
.cycle span {
  display: inline-block;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cycleIn 600ms ease both;
}
@keyframes cycleIn {
  from { opacity: 0; transform: translateY(14px) rotateX(40deg); }
  to   { opacity: 1; transform: translateY(0)    rotateX(0); }
}

.hero-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ===== Hero slideshow (auto-rotating offerings showcase) ===== */
.hero-show { position: relative; max-width: 940px; margin: 6px auto 0; }
.hs-viewport { overflow: hidden; border-radius: 24px; box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.hs-track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.hs-slide {
  flex: 0 0 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 28px;
  padding: 30px 36px; min-height: 230px;
  text-decoration: none; color: var(--ink);
  background: var(--surface);
}
.hs-slide:hover { text-decoration: none; }
.hs-img { width: 220px; max-width: 38%; height: auto; flex: none; }
.hs-img.hs-photo { width: 260px; max-width: 42%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 18px; box-shadow: 0 10px 28px rgba(15,23,42,.16); }
@media (max-width: 760px) { .hs-img.hs-photo { width: 100%; max-width: 100%; } }
.hs-emoji {
  flex: none; width: 220px; max-width: 38%; aspect-ratio: 1 / 1;
  display: grid; place-items: center; font-size: 96px; line-height: 1;
  border-radius: 28px; background: rgba(255,255,255,.6);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.hs-body { flex: 1; min-width: 0; }
.hs-tag {
  display: inline-block; font-size: 15px; font-weight: 700;
  color: var(--brand-1); background: rgba(124,92,255,.1);
  border: 1px solid rgba(124,92,255,.2); padding: 5px 12px; border-radius: 999px;
}
.hs-body h3 { margin: 12px 0 8px; font-size: 26px; letter-spacing: -.01em; }
.hs-body p { margin: 0 0 16px; color: var(--muted); font-size: 16.5px; line-height: 1.55; }
.hs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255,255,255,.9);
  font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-sm); z-index: 2;
}
.hs-arrow:hover { background: #fff; box-shadow: var(--shadow-md); }
.hs-prev { left: -10px; } .hs-next { right: -10px; }
.hs-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.hs-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0;
  background: var(--border); cursor: pointer; transition: all .2s ease;
}
.hs-dots button[aria-selected="true"] { background: var(--brand-1); width: 26px; border-radius: 6px; }
@media (max-width: 640px) {
  .hs-slide { flex-direction: column; text-align: center; gap: 14px; padding: 24px 20px; }
  .hs-img { width: 150px; max-width: 60%; }
  .hs-emoji { width: 140px; max-width: 56%; font-size: 64px; border-radius: 22px; }
  .hs-body h3 { font-size: 22px; }
  .hs-arrow { display: none; }
}

/* ===== Full-bleed hero slideshow (the landing-page main event) ===== */
.hero-show-section { width: 100%; }
.hero-show--full { max-width: 100%; margin: 0; }
.hero-show--full .hs-viewport { border-radius: 0; border: 0; box-shadow: none; }
.hero-show--full .hs-slide {
  min-height: calc(100vh - 72px);          /* fill the screen below the nav */
  justify-content: center; gap: 5vw; padding: 48px 7vw;
}
/* Rotate background tints across slides so the showcase feels lively. */
.hero-show--full .hs-slide:nth-child(3n+1) { background: linear-gradient(135deg, rgba(124,92,255,.08), rgba(34,211,238,.07)); }
.hero-show--full .hs-slide:nth-child(3n+2) { background: linear-gradient(135deg, rgba(236,72,153,.07), rgba(124,92,255,.08)); }
.hero-show--full .hs-slide:nth-child(3n)   { background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(16,185,129,.07)); }
.hero-show--full .hs-img { width: 380px; max-width: 42%; }
.hero-show--full .hs-emoji { width: 320px; max-width: 40%; font-size: clamp(96px, 13vw, 170px); border-radius: 40px; }
.hero-show--full .hs-body { flex: 0 1 560px; }
.hero-show--full .hs-tag { font-size: 17px; padding: 6px 14px; }
.hero-show--full .hs-body h2 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.07; margin: 18px 0 16px; }
.hero-show--full .hs-body p { font-size: clamp(18px, 1.9vw, 24px); line-height: 1.5; margin: 0 0 26px; }
.hero-show--full .hs-arrow { width: 54px; height: 54px; font-size: 30px; }
.hero-show--full .hs-prev { left: 20px; }
.hero-show--full .hs-next { right: 20px; }
.hero-show--full .hs-dots { position: absolute; left: 0; right: 0; bottom: 24px; }
@media (max-width: 760px) {
  .hero-show--full .hs-slide { min-height: calc(100vh - 64px); gap: 18px; padding: 40px 24px; }
  .hero-show--full .hs-img { width: 200px; max-width: 64%; }
  .hero-show--full .hs-emoji { width: 170px; max-width: 56%; font-size: 88px; }
  .hero-show--full .hs-body h2 { font-size: clamp(26px, 7vw, 34px); }
}
.hero-meta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
}
.hero-meta .dotsep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* Subject marquee row */
.marquee {
  margin: 48px 0 0;
  padding: 14px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee .track {
  display: inline-flex;
  gap: 14px;
  white-space: nowrap;
  animation: scrollX 40s linear infinite;
}
.marquee:hover .track { animation-play-state: paused; }
.marquee .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.marquee .chip .e { font-size: 18px; }
@keyframes scrollX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Section heading */
.section {
  padding: clamp(60px, 9vw, 110px) 0;
}
.section.gradient {
  background:
    radial-gradient(1200px 400px at 0% 0%,   rgba(124,92,255,0.10), transparent 60%),
    radial-gradient(1000px 400px at 100% 100%, rgba(236,72,153,0.10), transparent 60%);
}
.section-head { text-align: center; max-width: 700px; margin: 0 auto 48px; padding: 0 20px; }
.section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(6,182,212,0.1);
  color: #0e7490;
  border: 1px solid rgba(6,182,212,0.25);
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.section-head h2 {
  font-size: clamp(28px, 4.4vw, 48px);
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.1;
}
.section-head .grad {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head p {
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
  margin: 0 auto;
  max-width: 600px;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* Refined micro-polish: when a section reveals, its direct children cascade in
   with a gentle stagger instead of appearing all at once. Purely additive over
   the existing .reveal fade, and fully disabled for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .reveal.in > * { animation: sfRise .62s cubic-bezier(.22,1,.36,1) backwards; }
  .reveal.in > *:nth-child(1) { animation-delay: .02s; }
  .reveal.in > *:nth-child(2) { animation-delay: .09s; }
  .reveal.in > *:nth-child(3) { animation-delay: .16s; }
  .reveal.in > *:nth-child(4) { animation-delay: .23s; }
  .reveal.in > *:nth-child(5) { animation-delay: .30s; }
  .reveal.in > *:nth-child(6) { animation-delay: .37s; }
  .reveal.in > *:nth-child(7) { animation-delay: .44s; }
  .reveal.in > *:nth-child(n+8) { animation-delay: .5s; }
}
@keyframes sfRise {
  0%   { opacity: 0; transform: translateY(16px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Live demo (3 cards: lesson, quiz, mastered) */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1000px) { .demo-grid { grid-template-columns: 1fr; } }

.demo-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.demo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.demo-card .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px; font-weight: 700;
  color: var(--ink-soft);
  align-self: flex-start;
}
.demo-card.demo-lesson .tag    { background: rgba(124,92,255,0.1); color: #6d28d9; }
.demo-card.demo-quiz .tag      { background: rgba(6,182,212,0.1); color: #0e7490; }
.demo-card.demo-result .tag    { background: rgba(16,185,129,0.12); color: #047857; }

.demo-card h3 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.demo-card p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.demo-card .demo-svg {
  background: linear-gradient(180deg, #fff, #f7f7fc);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  display: grid; place-items: center;
}
.demo-card .demo-svg svg { max-width: 100%; height: auto; }

/* Repeating SVG step animation (auto-loop for marketing) */
.demo-svg svg .step {
  opacity: 0;
  transform-origin: center;
  animation: stepIn 4.8s linear infinite both;
}
.demo-svg svg .step:nth-child(1) { animation-delay: 0s; }
.demo-svg svg .step:nth-child(2) { animation-delay: 0.8s; }
.demo-svg svg .step:nth-child(3) { animation-delay: 1.6s; }
.demo-svg svg .step:nth-child(4) { animation-delay: 2.4s; }
.demo-svg svg .step:nth-child(5) { animation-delay: 3.2s; }
@keyframes stepIn {
  0%   { opacity: 0; transform: translateY(6px) scale(0.96); }
  6%   { opacity: 1; transform: translateY(0)   scale(1); }
  80%  { opacity: 1; }
  92%  { opacity: 0.95; }
  100% { opacity: 0; }
}

/* Mini quiz mock */
.mock-q { display: grid; gap: 8px; margin-top: 4px; }
.mock-q .opt {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink-soft);
  background: var(--surface);
}
.mock-q .opt.wrong  { border-color: var(--danger); background: rgba(239,68,68,0.06); color: #b91c1c; position: relative; }
.mock-q .opt.right  { border-color: var(--success); background: rgba(16,185,129,0.08); color: #047857; }
.mock-q .opt.wrong::after { content: "✗"; position: absolute; right: 12px; }
.mock-q .opt.right::after { content: "✓"; position: absolute; right: 12px; }

.mini-score {
  background: var(--grad-primary);
  color: #fff;
  border-radius: var(--r-md);
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-glow);
}
.mini-score .num { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.mini-score .lbl { text-transform: uppercase; font-size: 12px; opacity: 0.85; letter-spacing: 0.1em; margin-top: 4px; }

.arrow {
  display: grid; place-items: center;
  font-size: 28px; color: var(--brand-2);
  animation: arrowPulse 2.4s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50%      { transform: translateX(6px); opacity: 1; }
}

/* How it works — 3-step flow */
.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  position: relative;
}
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } }
.flow-step {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 26px;
  position: relative;
  overflow: hidden;
}
.flow-step::before {
  content: attr(data-step);
  position: absolute;
  top: 18px; right: 22px;
  font-size: 64px; font-weight: 800;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.18;
  line-height: 1;
}
.flow-step h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.01em; }
.flow-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.flow-step .icon {
  width: 44px; height: 44px;
  background: var(--grad-primary);
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff; font-size: 22px;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(124,92,255,0.25);
}

/* Personas / use cases */
.personas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .personas { grid-template-columns: 1fr; } }

.persona {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  position: relative;
  overflow: hidden;
}
.persona .avatar {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 32px;
  color: #fff;
  margin-bottom: 14px;
}
.persona.maya  .avatar { background: var(--grad-primary); }
.persona.alex  .avatar { background: var(--grad-cool); }
.persona.dana  .avatar { background: var(--grad-warm); }
.persona h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; }
.persona .meta { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.persona blockquote {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
  border-left: 3px solid var(--brand-1);
  padding-left: 14px;
}
.persona ul { padding-left: 18px; margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.persona ul li { margin-bottom: 6px; }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: center;
}
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat .n {
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 800;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat .l { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Comparison table */
.compare {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;            /* wide comparison table scrolls on phones instead of clipping */
  -webkit-overflow-scrolling: touch;
}
.compare table { width: 100%; min-width: 560px; }
.compare th, .compare td { padding: 14px 18px; vertical-align: top; }
.compare th { background: var(--surface-2); font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 14px; }
.compare th.col-q { background: var(--grad-primary); color: #fff; }
.compare td.has  { color: var(--success); font-weight: 700; }
.compare td.no   { color: var(--muted); }

/* CTA panel */
.cta-panel {
  position: relative;
  border-radius: var(--r-xl);
  padding: 56px clamp(24px, 4vw, 56px);
  background: var(--grad-primary);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-glow);
}
.cta-panel::before, .cta-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
}
.cta-panel::before { width: 360px; height: 360px; background: #fff; top: -120px; right: -120px; }
.cta-panel::after  { width: 280px; height: 280px; background: #22d3ee; bottom: -100px; left: -80px; }
.cta-panel h2 {
  font-size: clamp(28px, 4.6vw, 44px);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  font-weight: 800;
  position: relative;
}
.cta-panel p {
  margin: 0 0 28px;
  font-size: 17px;
  opacity: 0.92;
  position: relative;
  max-width: 560px;
}
.cta-panel .btn-light {
  background: #fff;
  color: var(--ink);
  border: none;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  position: relative;
}
.cta-panel .btn-light:hover { transform: translateY(-1px); }
.cta-panel .btn-clear {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  position: relative;
}

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 18px;
  transition: box-shadow 0.2s ease;
}
.faq details[open] { box-shadow: var(--shadow-md); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 0;
  font-weight: 700;
  font-size: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 22px;
  color: var(--brand-1);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Floating mini badges (hero decoration) */
.float-badges {
  position: relative;
  margin: 32px auto 0;
  width: 100%;
  max-width: 560px;
  height: 56px;
}
.float-badges .fb {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: bob 6s ease-in-out infinite;
}
.float-badges .fb.b1 { left: 0%;   top: 0;   animation-delay: 0s; }
.float-badges .fb.b2 { left: 32%;  top: 30px; animation-delay: -1.6s; }
.float-badges .fb.b3 { left: 64%;  top: -4px; animation-delay: -3s; }
.float-badges .fb.b4 { left: 84%;  top: 24px; animation-delay: -4.4s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (max-width: 700px) { .float-badges { display: none; } }

/* ============================================================
   Book-a-demo: calendar strip + time slots
   ============================================================ */
.calendar-shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) { .calendar-shell { grid-template-columns: 1fr; } }

.cal-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 560px) { .cal-strip { grid-template-columns: repeat(4, 1fr); } }
.cal-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.14s ease;
}
.cal-day:hover { border-color: var(--brand-1); transform: translateY(-1px); }
.cal-day .dow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.cal-day .num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin: 4px 0 2px;
}
.cal-day .mo {
  font-size: 12px;
  color: var(--muted);
}
.cal-day.active {
  background: var(--grad-primary);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.cal-day.active .dow, .cal-day.active .num, .cal-day.active .mo { color: #fff; }

.slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 500px) { .slots-grid { grid-template-columns: repeat(2, 1fr); } }
.slot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  transition: all 0.14s ease;
  font-family: inherit;
}
.slot:hover { border-color: var(--brand-1); color: var(--brand-1); }
.slot.active {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.demo-summary {
  position: sticky;
  top: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-md);
}
.demo-summary h3 { margin: 0 0 4px; font-size: 18px; }
.demo-summary .picked {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.demo-summary .picked strong { color: var(--ink); }

/* === Admin tabs === */
.tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 22px;
  border-bottom: 1px solid var(--border);
}
.tabs button {
  background: none;
  border: none;
  padding: 12px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active {
  color: var(--brand-1);
  border-bottom-color: var(--brand-1);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.ticket-msg, .demo-msg {
  margin-top: 6px;
  white-space: pre-wrap;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.sev-low    { background: rgba(100,116,139,0.12); color: #475569; }
.sev-medium { background: rgba(245,158,11,0.18); color: #b45309; }
.sev-high   { background: rgba(239,68,68,0.14); color: #b91c1c; }

/* ============================================================
   Gamification: XP bar, level pill, streak counter, confetti, toast
   ============================================================ */
.xp-bar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  position: relative;
  min-width: 180px;
}
.xp-bar .level-tag {
  background: var(--grad-primary);
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.xp-bar .xp-track {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.xp-bar .xp-fill {
  height: 100%;
  background: var(--grad-primary);
  width: 0%;
  transition: width 600ms cubic-bezier(.2,.9,.3,1);
}
.xp-bar .xp-text { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }

.streak-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(245,158,11,0.15);
  color: #b45309;
  font-weight: 700; font-size: 13px;
}
.streak-pill.cold {
  background: var(--surface-2);
  color: var(--muted);
}
.streak-pill .fire {
  font-size: 14px;
  animation: flicker 1.8s ease-in-out infinite;
}
@keyframes flicker { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* +XP floating animation */
.xp-pop {
  position: fixed;
  z-index: 100;
  font-weight: 800;
  font-size: 18px;
  pointer-events: none;
  color: #fff;
  background: var(--grad-primary);
  padding: 6px 12px;
  border-radius: 999px;
  animation: xpRise 1.4s ease-out forwards;
  box-shadow: var(--shadow-glow);
}
@keyframes xpRise {
  0%   { opacity: 0; transform: translate(-50%, 0)    scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -10px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -80px) scale(1); }
}

/* Level-up toast */
.level-toast {
  position: fixed;
  inset: auto 50% 28px auto;
  transform: translateX(50%);
  z-index: 101;
  padding: 14px 22px;
  background: var(--grad-primary);
  color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg), 0 0 50px rgba(124,92,255,0.5);
  font-weight: 700;
  display: flex; align-items: center; gap: 10px;
  animation: toastIn 350ms ease-out, toastOut 350ms ease-in 3.5s forwards;
}
.level-toast .badge-icon { font-size: 26px; }
.level-toast small { font-weight: 500; opacity: 0.9; display: block; font-size: 12px; }
@keyframes toastIn  { from { opacity: 0; transform: translate(50%, 30px); } to { opacity: 1; transform: translate(50%, 0); } }
@keyframes toastOut { to   { opacity: 0; transform: translate(50%, -20px); } }

/* Confetti pieces */
.confetti-host {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 99;
}
.confetti-piece {
  position: absolute;
  width: 8px; height: 14px;
  border-radius: 2px;
  animation: confettiFall 2.8s cubic-bezier(.2,.5,.4,1) forwards;
}
@keyframes confettiFall {
  0%   { transform: translate(0, -10vh) rotate(0deg);    opacity: 1; }
  100% { transform: translate(var(--dx, 0), 110vh) rotate(var(--rot, 720deg)); opacity: 0.95; }
}
/* Image-sprite confetti (glossy stars/sparkles) mixed into the shower for a richer,
   premium feel alongside the CSS shapes. */
.confetti-piece.sprite { width: 22px; height: 22px; border-radius: 0; background: transparent center/contain no-repeat; }
/* One-shot celebratory starburst that pops from the middle on big wins
   (mastery, perfect score, level-up). Pointer-transparent, self-removing. */
.sf-starburst {
  position: fixed; left: 50%; top: 40%;
  width: min(64vw, 380px); height: min(64vw, 380px);
  transform: translate(-50%, -50%) scale(.2);
  pointer-events: none; z-index: 100; opacity: 0;
  background: url("/assets/fx/fx_starburst.png") center/contain no-repeat;
  animation: sfBurstPop 1.2s cubic-bezier(.22,1.2,.36,1) forwards;
}
@keyframes sfBurstPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(-14deg); }
  28%  { opacity: 1; }
  60%  { opacity: 1; transform: translate(-50%,-50%) scale(1.06) rotate(6deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.28) rotate(11deg); }
}
/* Sparkle ping that twinkles at a correct answer. */
.sf-sparkle-ping {
  position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 6; opacity: 0;
  background: url("/assets/fx/fx_sparkle.png") center/contain no-repeat;
  animation: sfSparkPing .8s ease-out forwards;
}
@keyframes sfSparkPing {
  0%   { opacity: 0; transform: scale(.3) rotate(0); }
  40%  { opacity: 1; transform: scale(1.15) rotate(20deg); }
  100% { opacity: 0; transform: scale(.7) rotate(42deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-starburst, .sf-sparkle-ping { animation-duration: .01s; opacity: 0; }
}

/* === Top promo bar === */
.topbar {
  background: var(--grad-primary);
  color: #fff;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  position: relative;
  z-index: 60;
}
.topbar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 6px;
}
.topbar a:hover { opacity: 0.9; }
.topbar .sep { opacity: 0.6; margin: 0 10px; }

/* 3-column role grid */
.role-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .role-grid.three { grid-template-columns: 1fr; } }

.role-card.school .icon {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

/* School dashboard */
.school-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 800px) { .school-stats { grid-template-columns: repeat(2, 1fr); } }
.school-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
}
.school-stat .num {
  font-size: 32px;
  font-weight: 800;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.school-stat .lbl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 2px;
}

.student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.student-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
}
.student-tile .head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.student-tile .avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--grad-primary);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 14px;
}
.student-tile .name { font-weight: 700; font-size: 15px; }
.student-tile .meta { color: var(--muted); font-size: 13px; }
.student-tile .stats { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }
.search-row { display: flex; gap: 10px; margin-bottom: 16px; }
.search-row input { flex: 1; }



/* Nav Login / Sign-up dropdown */
.nav-dd { position: relative; display: inline-block; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 190px; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px;
  display: none; z-index: 60;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu,
.nav-dd.open .nav-dd-menu { display: block; }
.nav-dd-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  text-decoration: none; color: #1e293b; font-weight: 600;
  font-size: 14px; white-space: nowrap;
}
.nav-dd-menu a:hover { background: rgba(124,92,255,0.08); }
.nav-dd-menu a.primary { color: #6d28d9; }
.nav-dd-menu .nav-dd-sep { height: 1px; background: #eef2f7; margin: 4px 2px; }

/* === Global toasts (P1) === */
.sf-toasts {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 10000; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.sf-toast {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 11px;
  background: rgba(17, 19, 34, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff; font-size: 14px; font-weight: 600;
  padding: 12px 18px; border-radius: 14px;
  box-shadow: 0 12px 34px rgba(11, 11, 26, 0.34), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0; transform: translateY(14px) scale(.98); pointer-events: auto; cursor: pointer;
  transition: opacity .26s cubic-bezier(.22,.61,.36,1), transform .26s cubic-bezier(.34,1.4,.5,1);
  max-width: 100%;
}
.sf-toast.in { opacity: 1; transform: translateY(0) scale(1); }
/* Leading status glyph in a soft tinted disc. */
.sf-toast__icon {
  flex: none; width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
  background: rgba(255, 255, 255, 0.16); color: #fff;
}
.sf-toast__msg { min-width: 0; }
/* Auto-dismiss progress hairline along the bottom edge. */
.sf-toast::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform-origin: left; background: rgba(255, 255, 255, 0.45);
}
.sf-toast.in::after { animation: sfToastBar var(--sf-toast-dur, 3600ms) linear forwards; }
@keyframes sfToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.sf-toast--ok  { background: linear-gradient(135deg, rgba(16,185,129,.96), rgba(34,211,238,.96)); border-color: rgba(255,255,255,0.18); }
.sf-toast--ok  .sf-toast__icon { background: rgba(255,255,255,0.25); }
.sf-toast--err { background: linear-gradient(135deg, rgba(239,68,68,.96), rgba(217,70,239,.96)); border-color: rgba(255,255,255,0.18); }
.sf-toast--err .sf-toast__icon { background: rgba(255,255,255,0.25); }
@media (prefers-reduced-motion: reduce) {
  .sf-toast { transition: opacity .2s ease; transform: none; }
  .sf-toast.in { transform: none; }
  .sf-toast.in::after { animation: none; }
}

/* === Week activity mini-chart (P1) === */
.week-chart { display: flex; gap: 8px; align-items: flex-end; height: 54px; }
.wk-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.wk-bar { width: 100%; max-width: 22px; min-height: 4px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #7c5cff, #22d3ee); transition: height .55s cubic-bezier(.2,.8,.2,1); }
.wk-bar.empty { background: #e6e9f2; }
.wk-lbl { font-size: 12px; color: var(--muted); }

/* === Micro-interactions (P1): tactile press + card hover lift === */
.btn { transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn:active { transform: scale(0.93); box-shadow: 0 2px 6px rgba(2,6,23,.12); }
.btn-primary:hover { box-shadow: var(--shadow-glow); }
.card { transition: transform .18s ease, box-shadow .2s ease; }
.feature:hover, .flow-step:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .feature, .flow-step, .wk-bar { transition: none !important; }
  .btn:active { transform: none; }
}

/* === Marketplace card hover-lift (P1) === */
#results .card, #groupResults .card { transition: transform .18s ease, box-shadow .2s ease; }
#results .card:hover, #groupResults .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { #results .card:hover, #groupResults .card:hover { transform: none; } }

/* === Accessibility (P2) === */
:focus-visible { outline: 3px solid var(--brand-3); outline-offset: 2px; border-radius: 8px; }
.btn:focus-visible { outline-offset: 3px; }
a:focus-visible { text-decoration: none; }
/* System-wide reduced-motion: neutralize all animation/transition + decorative motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .bg-orbs, .marquee .track, .mascot-body, .streak-pill .fire { animation: none !important; }
}

/* === Learning-path map (T1.1): topic tiles show progress state === */
.path-progress { height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; margin: 6px 0 14px; }
.path-progress-fill { height: 100%; background: linear-gradient(90deg,#10b981,#22d3ee); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.subject-tile { position: relative; }
.tile-badge { position: absolute; top: 7px; right: 8px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(255,255,255,0.94); box-shadow: 0 1px 3px rgba(0,0,0,0.22); }
.tile-badge--done { color: #059669; }
.tile-badge--help { background: transparent; box-shadow: none; }
.tile-current { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--brand-3); }
.tile-done { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .path-progress-fill { transition: none; } }

/* === Trust band (T1.4) === */
.trust-band {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.trust-band span { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 640px) { .trust-band span { font-size: 12.5px; } }

/* === Preferences control: font size + dark toggle (T3.1) === */
.sf-prefs {
  position: fixed; left: 14px; bottom: 14px; z-index: 70;
  display: flex; gap: 2px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; box-shadow: var(--shadow-md);
}
.sf-prefs button {
  border: none; background: transparent; color: var(--ink-soft);
  font-weight: 700; font-size: 13px; cursor: pointer;
  width: 30px; height: 30px; border-radius: 999px; line-height: 1;
}
.sf-prefs button:hover { background: var(--surface-2); }
@media (max-width: 720px) { .sf-prefs { left: 8px; bottom: 8px; } }

/* === Dark theme (T3.1) — flips the design tokens; brand hues unchanged === */
[data-theme="dark"] {
  --bg: #0f1117;
  --bg-deep: #07080d;
  --surface: #181b24;
  --surface-2: #232734;
  --ink: #f1f5f9;
  --ink-soft: #cbd5e1;
  --muted: #94a3b8;
  --border: #2b3040;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

/* === Skeleton loaders (T3.4) === */
.sk { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 8px; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-100%); animation: skshine 1.3s infinite;
}
.sk-line { height: 12px; margin: 8px 0; }
.sk-card { height: 90px; }
@keyframes skshine { 100% { transform: translateX(100%); } }
[data-theme="dark"] .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* === Finn sticker shelf (T3.5) === */
.sticker { width: 70px; text-align: center; }
.sticker-e { font-size: 30px; line-height: 1.1; }
.sticker-t { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sticker.locked .sticker-e { filter: grayscale(1) opacity(0.5); }
.sticker.locked .sticker-t { opacity: 0.6; }

/* === Sticker unlock pop (quick win) === */
.sticker.justUnlocked .sticker-e { animation: stickerPop .7s cubic-bezier(.2,.8,.2,1); }
@keyframes stickerPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sticker.justUnlocked .sticker-e { animation: none; } }

/* === Sticker album (collectible modal) === */
.sf-album-ov { position: fixed; inset: 0; z-index: 9999; background: rgba(17,24,39,.7); display: flex; align-items: center; justify-content: center; padding: 18px; overflow: auto; animation: sfModalIn .28s ease; }
.sf-album { width: min(560px, 95vw); max-height: 88vh; overflow: auto; }
.sf-album-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sf-album-x { font-size: 18px; padding: 2px 11px; line-height: 1; }
.sf-album-bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 10px 0 16px; }
.sf-album-bar > div { height: 100%; background: linear-gradient(90deg, #7c5cff, #22d3ee); border-radius: 999px; transition: width .5s ease; }
.sf-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.sf-album-item { text-align: center; border: 1px solid var(--border); border-radius: 14px; padding: 12px 8px; background: var(--surface-2); }
.sf-album-item.on { background: linear-gradient(180deg, #fffdf5, #fff6e6); border-color: #fde68a; }
.sf-album-e { font-size: 34px; line-height: 1.1; }
.sf-album-item:not(.on) .sf-album-e { filter: grayscale(1) opacity(.55); }
.sf-album-t { font-weight: 800; font-size: 13px; margin-top: 4px; }
.sf-album-d { font-size: 11px; color: var(--muted); margin-top: 2px; min-height: 28px; }
.sf-album-got { font-size: 11.5px; font-weight: 800; color: #059669; margin-top: 5px; }
.sf-album-prog { height: 6px; border-radius: 999px; background: var(--surface); overflow: hidden; margin: 6px 4px 2px; }
.sf-album-prog > div { height: 100%; background: var(--brand-1, #7c5cff); border-radius: 999px; }
.sf-album-pn { font-size: 11px; color: var(--muted); }
body.sf-dark .sf-album-item { background: #1b2230; border-color: #334155; }
body.sf-dark .sf-album-item.on { background: #2a2410; border-color: #5b4a16; }

/* === Lucide icon sizing inside the prefs control === */
.sf-prefs i { display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; }
.sf-prefs svg { width: 16px; height: 16px; }

/* === Interactive lesson manipulatives === */
.lesson-widget { margin: 16px 0; }
.sf-widget {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px;
}
.sf-widget-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.sf-widget-head > span:first-child { font-weight: 800; font-size: 13px; color: var(--brand-1); }
.sf-widget-prompt { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.sf-widget .sf-nl { width: 100%; height: auto; touch-action: none; }
.sf-nl-marker:focus { outline: none; }
.sf-nl-marker:focus circle { stroke: var(--brand-3); }
/* Clear keyboard focus ring on the draggable marker (matches the quiz/widget
   focus style) so keyboard users can see what they're moving. */
.sf-nl-marker:focus-visible circle { stroke: var(--brand-3); stroke-width: 4; filter: drop-shadow(0 0 4px var(--brand-3)); }
.sf-nl-ghost { transition: opacity .15s ease; pointer-events: none; }
.sf-widget-status { min-height: 18px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
/* In-widget circular progress ring (sort-into-buckets, etc.) — fills as items
   are placed. The fill circle animates its dash offset. */
.sf-prog-ring { flex: 0 0 auto; margin-left: auto; }
.sf-prog-fill { transition: stroke-dashoffset .4s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .sf-prog-fill { transition: none; } }
/* When a widget reports "correct", the status pulses green once for feedback —
   shared by every widget (number-line, fractions, clock, sort, match, …). */
@keyframes sfStatusOk { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } }
.sf-widget-status.ok { color: #059669; display: inline-block; transform-origin: left center; animation: sfStatusOk .4s ease; }
.sf-widget-status.near { color: #d97706; }   /* "you're close" — encouraging, not a pass */

/* === Fraction-bar + array manipulatives === */
.sf-frac { display: flex; gap: 0; border-radius: 8px; overflow: hidden; border: 2px solid var(--border); }
.sf-frac-seg { flex: 1; height: 48px; border: none; border-right: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: background .12s ease; }
.sf-frac-seg:last-child { border-right: none; }
.sf-frac-seg.on { background: linear-gradient(135deg, #7c5cff, #22d3ee); }
.sf-frac-seg:focus-visible { outline: 3px solid var(--brand-3); outline-offset: -3px; }
.sf-array { display: grid; gap: 6px; margin-top: 4px; }
.sf-array-cell { aspect-ratio: 1; border: 2px solid var(--border); border-radius: 50%; background: var(--surface); cursor: pointer; transition: background .12s ease, transform .1s ease; padding: 0; }
.sf-array-cell.on { background: linear-gradient(135deg, #fb923c, #f472b6); border-color: transparent; }
.sf-array-cell:active { transform: scale(.9); }

/* === Base-ten blocks manipulative === */
.sf-bt { display: flex; flex-direction: column; gap: 8px; }
.sf-bt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-bt-label { width: 74px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.sf-bt-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 800; line-height: 1; }
.sf-bt-count { width: 22px; text-align: center; font-weight: 800; }
.sf-bt-blocks { display: inline-flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.sf-blk { display: inline-block; background: linear-gradient(135deg, #7c5cff, #22d3ee); border-radius: 2px; }
.sf-blk-o { width: 9px; height: 9px; }
.sf-blk-t { width: 7px; height: 24px; }
.sf-blk-h { width: 24px; height: 24px; }
.sf-bt-total { margin-top: 8px; font-size: 16px; }
.sf-bt-total strong { font-size: 20px; }

/* === Ten-frame manipulative === */
.sf-tf { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.sf-tf-frame { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 5px; border: 2px solid var(--border); border-radius: 8px; background: var(--surface); }
.sf-tf-cell { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface-2); cursor: pointer; padding: 0; transition: background .12s ease, transform .1s ease; }
.sf-tf-cell.on { background: linear-gradient(135deg, #7c5cff, #22d3ee); border-color: transparent; }
.sf-tf-cell:active { transform: scale(.88); }
.sf-tf-cell:focus-visible { outline: 3px solid var(--brand-3); outline-offset: 1px; }
.sf-tf-count { margin-top: 8px; font-size: 15px; }
.sf-tf-count strong { font-size: 19px; }

/* === Coin-box (money) manipulative === */
.sf-coin-pal { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.sf-coin { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(0,0,0,.16); cursor: pointer; padding: 0; box-shadow: 0 2px 5px rgba(0,0,0,.16); transition: transform .1s ease; }
.sf-coin:active { transform: scale(.92); }
.sf-coin:focus-visible { outline: 3px solid var(--brand-3); outline-offset: 2px; }
.sf-coin .sf-coin-val { font-size: 14px; font-weight: 800; color: #3a2e12; }
.sf-coin .sf-coin-name { font-size: 9px; font-weight: 700; color: #5b4a22; text-transform: uppercase; letter-spacing: .02em; }
.sf-coin-1 { background: radial-gradient(circle at 38% 32%, #f0b67a, #b5712e); }            /* penny */
.sf-coin-5 { background: radial-gradient(circle at 38% 32%, #e9edf2, #aab4c0); width: 62px; height: 62px; }  /* nickel */
.sf-coin-10 { background: radial-gradient(circle at 38% 32%, #eef1f5, #b3bcc8); width: 50px; height: 50px; } /* dime */
.sf-coin-25 { background: radial-gradient(circle at 38% 32%, #eef1f5, #aab4c0); width: 66px; height: 66px; } /* quarter */
.sf-coin.mini { width: 40px; height: 40px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.sf-coin.mini .sf-coin-val { font-size: 11px; }
.sf-coin-tray { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 48px; margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 13px; }
.sf-coin-tray.has { color: inherit; }
.sf-coin-total { margin-top: 8px; font-size: 15px; }
.sf-coin-total strong { font-size: 20px; }
.sf-coin-target { color: var(--muted); font-size: 13px; }

/* === Number-bond manipulative === */
.sf-nb { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 8px 0; }
.sf-nb-whole { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c5cff, #22d3ee); }
.sf-nb-legs { width: 120px; height: 40px; }
.sf-nb-legs line { stroke: var(--border); stroke-width: 3; }
.sf-nb-parts { display: flex; gap: 46px; }
.sf-nb-part { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; border: 2px solid var(--border); background: var(--surface); }
.sf-nb-part.known { background: var(--surface-2); }
.sf-nb-part.slot { color: var(--muted); }
.sf-nb-part.slot.ok { background: linear-gradient(135deg, #10b981, #22d3ee); color: #fff; border-color: transparent; }
.sf-nb-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.sf-nb-chip { min-width: 34px; }

/* === Tally-marks manipulative === */
.sf-tally { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; min-height: 40px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface); margin: 6px 0; }
.sf-tally-grp { position: relative; display: inline-flex; gap: 4px; padding: 0 2px; }
.sf-tally-bar { width: 3px; height: 28px; background: var(--ink); border-radius: 1px; display: inline-block; }
.sf-tally-grp.five .sf-tally-slash { position: absolute; left: -3px; right: -3px; top: 50%; height: 3px; background: var(--ink); transform: rotate(-20deg); border-radius: 1px; }
.sf-tally-empty { color: var(--muted); font-size: 13px; }
.sf-tally-ctrls { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.sf-tally-count { font-size: 15px; }
.sf-tally-count strong { font-size: 19px; }

/* === Fraction-of-a-set manipulative === */
.sf-fs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; max-width: 340px; }
.sf-fs-item { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface-2); cursor: pointer; padding: 0; transition: background .12s ease, transform .1s ease; }
.sf-fs-item.on { background: linear-gradient(135deg, #a855f7, #ec4899); border-color: transparent; }
.sf-fs-item:active { transform: scale(.88); }
.sf-fs-item:focus-visible { outline: 3px solid var(--brand-3); outline-offset: 1px; }
.sf-fs-count { margin-top: 8px; font-size: 15px; }
.sf-fs-count strong { font-size: 19px; }

/* === Pictograph manipulative === */
.sf-pg { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.sf-pg-row { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 8px; }
.sf-pg-row.ask { background: rgba(124, 92, 255, .1); }
.sf-pg-label { min-width: 92px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.sf-pg-icons { font-size: 20px; letter-spacing: 2px; line-height: 1.1; }
.sf-pg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* === Coordinate-plane manipulative === */
.sf-cp-grid { stroke: var(--border); stroke-width: 1; }
.sf-cp-axis { stroke: var(--ink-soft, #6b7280); stroke-width: 2; }
.sf-cp-hit { fill: transparent; cursor: pointer; }
.sf-cp-hit:hover { fill: rgba(124, 92, 255, .18); }
.sf-cp-pt { fill: #7c5cff; stroke: #fff; stroke-width: 2; transition: cx .12s ease, cy .12s ease; }
.sf-cp-pt.ok { fill: #10b981; }

/* === Probability-spinner manipulative === */
.sf-spin-wrap { position: relative; width: 150px; margin: 8px auto 4px; }
.sf-spin { width: 150px; height: 150px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(2,6,23,.18); }
.sf-spin-needle { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-size: 22px; color: #1f2937; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.sf-spin-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.sf-spin-opt { display: inline-flex; align-items: center; gap: 6px; }
.sf-spin-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.sf-spin-n { font-weight: 800; color: var(--ink-soft, #6b7280); }

/* === Sort-into-buckets manipulative === */
.sf-sort-tray { display: flex; flex-wrap: wrap; gap: 8px; min-height: 42px; padding: 8px; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; margin-bottom: 10px; }
.sf-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer; font-weight: 600; font-size: 13px; }
.sf-chip.sel { outline: 3px solid var(--brand-3); outline-offset: 1px; }
.sf-chip.locked { background: linear-gradient(135deg, #10b981, #22d3ee); color: #fff; border-color: transparent; cursor: default; }
.sf-chip.nudge { animation: sfNudge .4s; }
@keyframes sfNudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* Staggered "pop-in" entrance: tap tiles (chips/tokens) animate in as the
   widget renders, so hands-on questions feel tactile. CSS-only; the nudge rule
   above still overrides on a wrong answer. */
@keyframes sfTileIn { from { opacity: 0; transform: translateY(9px) scale(.88); } to { opacity: 1; transform: none; } }
.sf-chip, .sf-token { animation: sfTileIn .34s cubic-bezier(.2,.7,.3,1) both; }
.sf-chip:nth-child(1),.sf-token:nth-child(1){animation-delay:0s}
.sf-chip:nth-child(2),.sf-token:nth-child(2){animation-delay:.035s}
.sf-chip:nth-child(3),.sf-token:nth-child(3){animation-delay:.07s}
.sf-chip:nth-child(4),.sf-token:nth-child(4){animation-delay:.105s}
.sf-chip:nth-child(5),.sf-token:nth-child(5){animation-delay:.14s}
.sf-chip:nth-child(6),.sf-token:nth-child(6){animation-delay:.175s}
.sf-chip:nth-child(7),.sf-token:nth-child(7){animation-delay:.21s}
.sf-chip:nth-child(8),.sf-token:nth-child(8){animation-delay:.245s}
.sf-chip:nth-child(9),.sf-token:nth-child(9){animation-delay:.28s}
.sf-chip:nth-child(n+10),.sf-token:nth-child(n+10){animation-delay:.315s}
/* Match-pairs tiles get the same staggered pop-in (per column). */
.sf-match-item { animation: sfTileIn .34s cubic-bezier(.2,.7,.3,1) both; }
.sf-match-item:nth-child(1){animation-delay:0s}
.sf-match-item:nth-child(2){animation-delay:.05s}
.sf-match-item:nth-child(3){animation-delay:.1s}
.sf-match-item:nth-child(4){animation-delay:.15s}
.sf-match-item:nth-child(5){animation-delay:.2s}
.sf-match-item:nth-child(n+6){animation-delay:.25s}
/* Satisfying "lock-in" pop when an item is placed/matched correctly (the
   widgets add .locked on a correct action, so this plays once at that moment). */
@keyframes sfLockIn { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 70% { transform: scale(.97); } 100% { transform: scale(1); } }
.sf-chip.locked, .sf-match-item.locked { animation: sfLockIn .42s ease; }
/* Memory-match: flip-card concentration game — 3D card flip, match pulse, win pop. */
.sf-mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
@media (max-width: 440px) { .sf-mm-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } }
.sf-mm-card { aspect-ratio: 3 / 4; border: none; background: none; padding: 0; cursor: pointer; perspective: 800px; animation: sfTileIn .34s cubic-bezier(.2,.7,.3,1) both; }
.sf-mm-card.miss { animation: sfNudge .4s; }
.sf-mm-inner { position: relative; width: 100%; height: 100%; transition: transform .45s cubic-bezier(.2,.7,.3,1); transform-style: preserve-3d; }
.sf-mm-card.flipped .sf-mm-inner, .sf-mm-card.matched .sf-mm-inner { transform: rotateY(180deg); }
.sf-mm-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-weight: 800; font-size: 13px; line-height: 1.2; box-shadow: 0 2px 7px rgba(15,23,42,.13); }
.sf-mm-front { background: linear-gradient(135deg, var(--brand, #6366f1), #8b5cf6); color: #fff; font-size: 22px; }
.sf-mm-back { background: #fff; color: #1e293b; transform: rotateY(180deg); border: 2px solid #e2e8f0; }
.sf-mm-card.matched .sf-mm-back { border-color: #34d399; background: #ecfdf5; color: #065f46; }
.sf-mm-card.matched .sf-mm-inner { animation: sfLockIn .42s ease; }
/* "Connection spark": both cards of a found pair flash a green glow at the
   moment they lock — a felt beat of "these two go together". */
@keyframes sfMatchGlow {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0), 0 2px 7px rgba(15,23,42,.13); }
  35%  { box-shadow: 0 0 16px 5px rgba(52,211,153,.85), 0 2px 7px rgba(15,23,42,.13); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0), 0 2px 7px rgba(15,23,42,.13); }
}
.sf-mm-card.matched .sf-mm-back { animation: sfMatchGlow .7s ease; }
.sf-mm-grid.sf-mm-win .sf-mm-card { animation: sfLockIn .5s ease; }
.sf-mm-card:focus-visible { outline: 3px solid var(--brand, #6366f1); outline-offset: 2px; border-radius: 13px; }
/* Sequence slot slides in as each tile is placed in order. */
@keyframes sfSlotIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.sf-seq-slot { animation: sfSlotIn .3s ease both; }
/* Tactile tap feedback on all tap targets: gentle lift on hover, press on tap. */
.sf-chip:not(.locked), .sf-token, .sf-match-item:not(.locked), .sf-bucket { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.sf-chip:not(.locked):hover, .sf-token:hover, .sf-match-item:not(.locked):hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(124,92,255,0.18); }
.sf-chip:not(.locked):active, .sf-token:active, .sf-match-item:not(.locked):active, .sf-bucket:active { transform: scale(.94); }
.sf-sort-buckets { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-bucket { flex: 1; min-width: 120px; border: 2px solid var(--border); border-radius: 12px; padding: 8px; cursor: pointer; }
.sf-bucket:hover, .sf-bucket:focus-visible { border-color: var(--brand-1); outline: none; }
.sf-bucket-label { font-weight: 800; font-size: 13px; margin-bottom: 6px; text-align: center; }
.sf-bucket-drop { display: flex; flex-wrap: wrap; gap: 6px; min-height: 38px; }
@media (prefers-reduced-motion: reduce) {
  .sf-chip.nudge, .sf-chip, .sf-token, .sf-match-item, .sf-chip.locked, .sf-match-item.locked, .sf-seq-slot { animation: none; }
  .sf-chip, .sf-token, .sf-match-item, .sf-bucket { transition: none; }
  .sf-chip:hover, .sf-token:hover, .sf-match-item:hover { transform: none; box-shadow: none; }
  .sf-widget-status.ok { animation: none; }
}

/* === Clock manipulative === */
.sf-clock-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.sf-clock { width: 130px; height: 130px; flex: 0 0 auto; }
.sf-hand-h, .sf-hand-m { transition: transform .25s ease; }
.sf-clock-ctrl { display: flex; flex-direction: column; gap: 8px; }
.sf-clock-digital { font-size: 24px; font-weight: 800; letter-spacing: 1px; }
.sf-clock-row { display: flex; align-items: center; gap: 8px; }
.sf-clock-row > span { width: 36px; font-size: 12px; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .sf-hand-h, .sf-hand-m { transition: none; } }

/* === Balance-scale comparison === */
.sf-bal { display: flex; align-items: center; justify-content: center; gap: 12px; }
.sf-bal-pan { min-width: 60px; height: 60px; display: grid; place-items: center; font-size: 24px; font-weight: 800; background: var(--surface); border: 2px solid var(--border); border-radius: 12px; }
.sf-bal-ops { display: flex; flex-direction: column; gap: 6px; }
.sf-bal-op { width: 44px; height: 32px; font-size: 18px; font-weight: 800; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.sf-bal-op.right { background: linear-gradient(135deg, #10b981, #22d3ee); color: #fff; border-color: transparent; }
.sf-bal-op.wrong { animation: sfNudge .4s; border-color: #ef4444; }

/* === Sequence-order manipulative === */
.sf-seq-slots { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; min-height: 4px; }
.sf-seq-slot { background: linear-gradient(135deg, rgba(124,92,255,0.12), rgba(34,211,238,0.12)); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-weight: 600; font-size: 14px; }
.sf-seq-tray { display: flex; flex-wrap: wrap; gap: 8px; }

/* === Match-pairs manipulative === */
.sf-match { display: flex; gap: 16px; }
.sf-match-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sf-match-item { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer; font-weight: 600; font-size: 13px; text-align: left; }
.sf-match-item.sel { outline: 3px solid var(--brand-3); outline-offset: 1px; }
.sf-match-item.locked { background: linear-gradient(135deg, #10b981, #22d3ee); color: #fff; border-color: transparent; cursor: default; }
.sf-match-item.nudge { animation: sfNudge .4s; }

/* === Rigged-Finn (Lottie) stage — matches the mascot image footprint === */
.finn-rig { width: 56px; height: 56px; }
.finn-rig svg { width: 100%; height: 100%; display: block; }
@media (max-width: 720px) { .finn-rig { width: 42px; height: 42px; } }

/* === Hero Finn: visible float (DOM-level, animates regardless of <img> SMIL) === */
.hero-finn { animation: heroFloat 3.2s ease-in-out infinite; will-change: transform; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .hero-finn { animation: none; } }

/* === Plan pill: "running low" nudge === */
.pill.pill-low { background: linear-gradient(135deg, #fb923c, #f472b6) !important; color: #fff !important; border-color: transparent !important; animation: pillPulse 1.8s ease-in-out infinite; }
@keyframes pillPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .pill.pill-low { animation: none; } }

/* === Responsive polish: tighter top spacing + wrapping nav on phone/iPad ===
   Previously the hero kept ~56px top padding and the nav a fixed 18px on every
   size, so phones/iPad-portrait wasted a lot of space before content. */
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; row-gap: 8px; padding: 10px clamp(12px, 4vw, 24px); }
  .nav .row { flex-wrap: wrap; }
  .container { padding: 16px clamp(14px, 4vw, 24px); }
  .hero { padding-top: clamp(20px, 5vw, 40px); padding-bottom: 24px; }
  .section { padding-top: 24px; }
}
@media (max-width: 560px) {
  .nav { padding: 8px 12px; gap: 6px; }
  .nav .btn, .nav .btn-ghost { padding: 6px 10px; font-size: 13px; }
  .container { padding: 12px 14px; }
  .hero { padding: 18px 14px 20px; }
  .hero h1 { font-size: clamp(26px, 8vw, 38px); line-height: 1.15; }
  .hero p.lead { font-size: 15px; }
  .sec-nav { gap: 6px; }
  .sec-trigger { padding: 8px 10px; font-size: 13px; }
}

/* === UI polish: one cohesive, premium feel across all dashboards === */
/* Clickable cards (tiles, class cards, CTAs) get a tactile hover lift. */
button.card, a.card { cursor: pointer; text-decoration: none; color: inherit; }
button.card, a.card { transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease; }
button.card:hover, a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
button.card:active, a.card:active { transform: translateY(0); }

/* Branded, scannable section headers: a small gradient accent bar. */
.section-title { display: flex; align-items: center; gap: 9px; }
.section-title::before {
  content: ""; flex: none; width: 4px; height: 15px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-1, #7c5cff), var(--brand-2, #22d3ee));
}

/* Clear page top: a subtle divider under every dashboard header. */
.dash-header { padding-bottom: 16px; border-bottom: 1px solid var(--border); }

/* Friendlier, consistent empty states. */
.empty { text-align: center; padding: 26px 16px; border: 1px dashed var(--border); border-radius: var(--r-lg); }

/* Comfortable cards + headers on phones. */
@media (max-width: 560px) {
  .card { padding: 18px; }
  .card.tight { padding: 16px; }
  .dash-header { margin: 14px 0 18px; }
  .section-title { margin: 22px 0 12px; }
}

/* === Skeleton loaders: shimmering placeholders while data loads === */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2, #eef2f7); border-radius: 10px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); animation: sk-sheen 1.3s infinite; }
[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
@keyframes sk-sheen { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }
.sk-tile { height: 116px; border-radius: var(--r-lg); }
.sk-card { height: 120px; border-radius: var(--r-lg); }
.sk-line { height: 12px; border-radius: 6px; margin: 9px 0; }
.sk-line.short { width: 55%; } .sk-line.mid { width: 78%; }

/* === Unified dashboard header (avatar + greeting + chips) === */
.dash-header { align-items: center; }
.dash-avatar { width: 48px; height: 48px; border-radius: 14px; flex: none;
  background: linear-gradient(135deg, var(--brand-1,#7c5cff), var(--brand-2,#22d3ee)); padding: 4px; box-shadow: var(--shadow-sm); }
.dash-head-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
@media (max-width: 560px) { .dash-avatar { width: 40px; height: 40px; } }

/* === Illustrated empty / first-run states === */
.empty img, .empty .emoji { display: block; margin: 0 auto 8px; }
.empty .emoji { font-size: 40px; }
.empty h3 { margin: 4px 0 6px; font-size: 18px; color: var(--ink, #1f2937); font-style: normal; }
.empty .empty-cta { margin-top: 14px; }

/* ============================================================
   PREMIUM POLISH LAYER
   Small, cohesive refinements that lift the whole product:
   brand-tinted selection, quiet custom scrollbars, jitter-free
   animated stats, calmer mobile taps, and a gentle content
   entrance. All reduced-motion aware and safe site-wide.
   ============================================================ */

/* Brand-tinted text selection. */
::selection { background: rgba(124, 92, 255, 0.22); color: var(--ink); }
[data-theme="dark"] ::selection { background: rgba(124, 92, 255, 0.40); color: #fff; }

/* Quiet, modern scrollbars on desktop (mobile keeps native overlay bars). */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: rgba(124, 92, 255, 0.35) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: rgba(124, 92, 255, 0.30); border-radius: 999px;
    border: 2px solid transparent; background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover { background: rgba(124, 92, 255, 0.55); background-clip: padding-box; }
}

/* Animated counters: fixed-width digits so count-up never reflows the layout. */
#coinCount, #tEarned, .stat-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Calmer mobile touch: no grey flash, snappy active feedback instead. */
@media (hover: none) {
  a, button, .btn, .card, .pill { -webkit-tap-highlight-color: transparent; }
}

/* Living avatar: an idle breath + a playful spin-pop on hover (the hover
   animation is more specific, so it overrides the idle loop while hovered). */
@media (prefers-reduced-motion: no-preference) {
  .dash-head-main:hover .dash-avatar { animation: sfAvatarHi .55s cubic-bezier(.34,1.56,.64,1); }
}
@keyframes sfAvatarHi {
  0%   { transform: rotate(0) scale(1); }
  40%  { transform: rotate(-10deg) scale(1.12); }
  70%  { transform: rotate(6deg) scale(1.06); }
  100% { transform: rotate(0) scale(1); }
}

/* Gentle content entrance: cards fade-and-rise once as they mount. Because
   CSS animations run only when an element is inserted, re-rendered lists
   re-animate naturally and persistent cards animate just once on load. */
@keyframes sfRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .card, .dash-header, .empty { animation: sfRise .42s cubic-bezier(.22,.61,.36,1) both; }
}

/* Crisper pills: hairline highlight for a more dimensional, premium chip. */
.pill { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
[data-theme="dark"] .pill { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }

/* ============================================================
   KID-FRIENDLY MOTION LAYER
   Snappy, springy, playful — the touches that make a K-10
   product feel alive: tiles that bounce in and squish on tap,
   emojis that wiggle on hover, coins that pop when earned.
   All wrapped in (prefers-reduced-motion: no-preference).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* --- Springy tiles: bouncier hover + tactile squish on press --- */
  .subject-tile, .quick-tile, .tile {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
  }
  .subject-tile:hover, .quick-tile:hover, .tile:hover { transform: translateY(-4px) scale(1.025); }
  .subject-tile:active, .quick-tile:active, .tile:active { transform: translateY(-1px) scale(.97); }

  /* --- Playful emoji: a quick wiggle-bounce when you hover a tile --- */
  .subject-tile:hover .emoji,
  .quick-tile:hover > span:first-child { animation: sfEmojiWiggle .5s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
  @keyframes sfEmojiWiggle {
    0%   { transform: translateY(0) rotate(0); }
    35%  { transform: translateY(-6px) rotate(-12deg); }
    65%  { transform: translateY(-2px) rotate(9deg); }
    100% { transform: translateY(0) rotate(0); }
  }

  /* --- Bouncy entrance: tiles pop in with a tiny overshoot + stagger --- */
  .subjects .subject-tile, .quick-tools > .quick-tile { animation: sfTilePop .44s cubic-bezier(.34,1.56,.64,1) both; }
  .subjects .subject-tile:nth-child(2), .quick-tools > .quick-tile:nth-child(2) { animation-delay: .05s; }
  .subjects .subject-tile:nth-child(3) { animation-delay: .10s; }
  .subjects .subject-tile:nth-child(4) { animation-delay: .15s; }
  .subjects .subject-tile:nth-child(5) { animation-delay: .20s; }
  .subjects .subject-tile:nth-child(6) { animation-delay: .25s; }
  .subjects .subject-tile:nth-child(n+7) { animation-delay: .30s; }
  @keyframes sfTilePop {
    0%   { opacity: 0; transform: translateY(16px) scale(.9); }
    70%  { opacity: 1; transform: translateY(-3px) scale(1.03); }
    100% { opacity: 1; transform: none; }
  }

  /* --- Snappier primary button: squash on press, springs back --- */
  .btn-primary:active { transform: translateY(1px) scale(.95); }

  /* --- Reward pop: add via JS when a value grows (coins, XP, badges) --- */
  .sf-pop-anim { animation: sfPopBounce .55s cubic-bezier(.34,1.56,.64,1); }
  @keyframes sfPopBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.32); }
    70%  { transform: scale(.92); }
    100% { transform: scale(1); }
  }

  /* --- Living mascot: the dashboard avatar breathes gently while idle --- */
  .dash-avatar { animation: sfBreathe 4s ease-in-out infinite; }
  @keyframes sfBreathe { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-1.5deg); } }
  /* (hover wiggle defined earlier still overrides via :hover specificity) */

  /* --- Empty-state Finn: a gentle, friendly bob so the owl feels alive --- */
  .empty img { animation: sfEmptyBob 3.6s ease-in-out infinite; }
  @keyframes sfEmptyBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
}

/* === Rigged inline-SVG Finn: idle blink + breathe (assets/finn-rigged.js) === */
.finn-rg { display: block; }
.finn-rg .rg-eyes { transform-box: fill-box; transform-origin: center; }
.finn-rg .rg-bodyshape { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  /* A quick blink near the end of each cycle — staggered so two owls on screen
     don't blink in lockstep. */
  .finn-rg .rg-eyes { animation: rgBlink 5.4s ease-in-out infinite; }
  .finn-rg--happy .rg-eyes { animation-duration: 6.2s; }
  .finn-rg--think .rg-eyes { animation-duration: 4.6s; }
  @keyframes rgBlink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
  /* A soft breathing swell of the body. */
  .finn-rg .rg-bodyshape { animation: rgBreathe 3.8s ease-in-out infinite; }
  @keyframes rgBreathe { 0%, 100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.035) scaleX(.99); } }
}
/* Gentle mood tweaks (the gesture/voice usually carries the emotion). */
.finn-rg--oops .rg-eyes { transform: translateY(2px) scaleY(.82); }

/* ============================================================
   FINN FX: mascot reaction pop + bobbing loader
   Brings Finn the owl to reward moments and loading states
   across the whole product, not just inside lessons.
   ============================================================ */
.finn-fx {
  position: fixed; right: 18px; bottom: 18px; z-index: 10005;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; opacity: 0; transform: translateY(150%);
  transition: transform .42s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.finn-fx.in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.finn-fx__bubble {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  border-radius: 16px 16px 16px 5px; padding: 10px 14px;
  font-weight: 700; font-size: 14px; max-width: 230px; text-align: center;
}
.finn-fx__stage { position: relative; display: inline-block; }
.finn-fx__owl { display: block; cursor: pointer; filter: drop-shadow(0 10px 18px rgba(124, 92, 255, 0.35)); }
/* Celebratory sparkle effect (stars / confetti) — not a limb. */
.finn-fx__accent {
  position: absolute; top: 4px; left: -14px; font-size: 32px; opacity: 0;
  pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
/* Finn's wings — soft paddle limbs that actually perform each gesture. Hidden
   until a gesture calls on them; they rest against his body the rest of time. */
.finn-fx__wing { position: absolute; bottom: 28px; width: 30px; height: 38px; z-index: 3; opacity: 0; pointer-events: none; transform-origin: 50% 14%; }
.finn-fx__wing svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.finn-fx__wing--l { left: 4px; }
.finn-fx__wing--r { right: 4px; }
.finn-fx__wing--r svg { transform: scaleX(-1); }   /* mirror the wing for the right side */
@media (prefers-reduced-motion: no-preference) {
  /* Default happy bounce. */
  .finn-fx.in .finn-fx__owl { animation: finnFxBounce .7s cubic-bezier(.34,1.56,.64,1); }
  @keyframes finnFxBounce {
    0%   { transform: translateY(0) scale(1); }
    25%  { transform: translateY(-16px) scale(1.09) rotate(-5deg); }
    50%  { transform: translateY(0) scale(1) rotate(0); }
    72%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
  }
  /* High-five: Finn lunges up-left to tap the hand, which pops in to meet him. */
  .finn-fx--hifive.in .finn-fx__owl { animation: finnHifive .75s cubic-bezier(.34,1.56,.64,1); }
  @keyframes finnHifive {
    0% { transform: translate(0,0) rotate(0); }
    35% { transform: translate(-10px,-14px) rotate(-12deg); }
    55% { transform: translate(-4px,-6px) rotate(-6deg); }
    100% { transform: translate(0,0) rotate(0); }
  }
  .finn-fx--hifive.in .finn-fx__accent { animation: finnAccentHi .75s ease both; }
  @keyframes finnAccentHi {
    0% { opacity: 0; transform: translate(-6px,8px) scale(.4) rotate(-20deg); }
    45% { opacity: 1; transform: translate(0,-2px) scale(1.1) rotate(0); }
    70% { transform: scale(.92); }
    100% { opacity: 1; transform: translate(0,0) scale(1); }
  }
  /* Clap: snappy double-bounce, clapping hands pop above. */
  .finn-fx--clap.in .finn-fx__owl { animation: finnClap .7s ease; }
  @keyframes finnClap { 0%,100%{transform:translateY(0) scale(1);} 20%{transform:translateY(-6px) scale(1.06);} 40%{transform:translateY(0) scale(.98);} 60%{transform:translateY(-6px) scale(1.06);} 80%{transform:translateY(0) scale(1);} }
  .finn-fx--clap.in .finn-fx__accent { top: -10px; left: 50%; margin-left: -16px; animation: finnAccentPop .7s ease both; }
  /* Dance: joyful side-to-side wiggle. */
  .finn-fx--dance.in .finn-fx__owl { animation: finnDance .85s ease; }
  @keyframes finnDance { 0%,100%{transform:rotate(0) translateY(0);} 20%{transform:rotate(-9deg) translateY(-4px);} 40%{transform:rotate(8deg) translateY(0);} 60%{transform:rotate(-7deg) translateY(-4px);} 80%{transform:rotate(6deg) translateY(0);} }
  .finn-fx--dance.in .finn-fx__accent { top: -8px; left: -16px; animation: finnAccentPop .85s ease both; }
  /* Spin: a quick jump and 360. */
  .finn-fx--spin.in .finn-fx__owl { animation: finnSpin .8s cubic-bezier(.5,0,.3,1.4); }
  @keyframes finnSpin { 0%{transform:translateY(0) rotate(0);} 40%{transform:translateY(-22px) rotate(180deg);} 100%{transform:translateY(0) rotate(360deg);} }
  .finn-fx--spin.in .finn-fx__accent { top: -6px; left: 50%; margin-left: -16px; animation: finnAccentPop .8s ease both; }
  /* Wave: a friendly tilt back-and-forth hello. */
  .finn-fx--wave.in .finn-fx__owl { animation: finnWave .9s ease; transform-origin: bottom center; }
  @keyframes finnWave { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-12deg);} 50%{transform:rotate(8deg);} 75%{transform:rotate(-6deg);} }
  .finn-fx--wave.in .finn-fx__accent { top: -4px; left: -16px; animation: finnAccentPop .9s ease both; }
  /* Nod: a gentle encouraging "you've got this" dip. */
  .finn-fx--nod.in .finn-fx__owl { animation: finnNod .8s ease; }
  @keyframes finnNod { 0%,100%{transform:translateY(0) rotate(0);} 30%{transform:translateY(4px) rotate(-3deg);} 60%{transform:translateY(0) rotate(2deg);} }
  .finn-fx--nod.in .finn-fx__accent { top: 16px; left: -16px; animation: finnAccentPop .8s ease both; }

  /* ---- Finn's wings actually do the gesture (hidden for spin/bounce) ---- */
  /* Wave: one wing swings hello. */
  .finn-fx--wave.in .finn-fx__wing--r { opacity: 1; animation: finnWingWave .9s ease both; }
  @keyframes finnWingWave { 0%{transform:rotate(18deg);} 25%{transform:rotate(-28deg);} 50%{transform:rotate(6deg);} 75%{transform:rotate(-18deg);} 100%{transform:rotate(8deg);} }
  /* High-five: a wing shoots up to meet your hand as the body lunges in. */
  .finn-fx--hifive.in .finn-fx__wing--r { opacity: 1; animation: finnWingHi .75s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes finnWingHi { 0%{transform:rotate(12deg) translateY(0);} 45%{transform:rotate(-48deg) translateY(-10px);} 70%{transform:rotate(-34deg) translateY(-6px);} 100%{transform:rotate(-22deg) translateY(-2px);} }
  /* Clap: both wings swing in to meet, twice. */
  .finn-fx--clap.in .finn-fx__wing--l { opacity: 1; animation: finnWingClapL .7s ease both; }
  .finn-fx--clap.in .finn-fx__wing--r { opacity: 1; animation: finnWingClapR .7s ease both; }
  @keyframes finnWingClapL { 0%,40%,80%,100%{transform:translateX(0) rotate(-6deg);} 20%,60%{transform:translateX(22px) rotate(26deg);} }
  @keyframes finnWingClapR { 0%,40%,80%,100%{transform:translateX(0) rotate(6deg);} 20%,60%{transform:translateX(-22px) rotate(-26deg);} }
  /* Dance: wings sway in opposite time with the body wiggle. */
  .finn-fx--dance.in .finn-fx__wing--l { opacity: 1; animation: finnWingSway .85s ease both; }
  .finn-fx--dance.in .finn-fx__wing--r { opacity: 1; animation: finnWingSway .85s ease both reverse; }
  @keyframes finnWingSway { 0%,100%{transform:rotate(-18deg);} 50%{transform:rotate(28deg);} }
  /* Nod: a small encouraging wing nudge. */
  .finn-fx--nod.in .finn-fx__wing--r { opacity: 1; animation: finnWingNod .8s ease both; }
  @keyframes finnWingNod { 0%,100%{transform:rotate(14deg) translateY(0);} 50%{transform:rotate(-12deg) translateY(-3px);} }

  @keyframes finnAccentPop {
    0% { opacity: 0; transform: scale(.3) translateY(6px); }
    40% { opacity: 1; transform: scale(1.18) translateY(-2px); }
    70% { transform: scale(.95); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }
}
@media (max-width: 560px) {
  .finn-fx { right: 12px; bottom: 12px; }
  .finn-fx__owl { width: 88px; height: 88px; }
  .finn-fx__accent { font-size: 26px; }
  .finn-fx__wing { width: 24px; height: 30px; bottom: 23px; }
  .finn-fx__bubble { font-size: 13px; max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .finn-fx { transition: opacity .25s ease; transform: none; }
  .finn-fx__accent { opacity: 1; }
}

/* Celebratory entrance for inline result-screen Finns (diagnostic, quiz). */
@media (prefers-reduced-motion: no-preference) {
  .finn-pop { animation: finnFxBounce .7s cubic-bezier(.34,1.56,.64,1); transform-origin: center bottom; }
}

/* ============================================================
   FINN BUDDY: the Clippy-style Homework Helper mascot
   A friendly floating owl that bobs in the corner and offers a
   speech-bubble tip. Tapping it opens the Homework Helper.
   ============================================================ */
.finn-buddy {
  position: fixed; right: 22px; bottom: 84px; z-index: 71;
  display: flex; align-items: flex-end; gap: 10px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit;
}
/* The owl, sitting in a soft white disc with a brand ring + glow. */
.finn-buddy__owl {
  position: relative; flex: none;
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #fff 60%, #f3f0ff 100%);
  box-shadow: 0 10px 26px rgba(124, 92, 255, .45), inset 0 0 0 3px rgba(124, 92, 255, .18);
}
.finn-buddy__owl img { display: block; }
/* Speech bubble to the left, with a little tail. */
.finn-buddy__bubble {
  position: relative; max-width: 200px; margin-bottom: 8px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  border-radius: 16px 16px 4px 16px; padding: 9px 13px;
  font-size: 13.5px; font-weight: 700; line-height: 1.3; text-align: left;
  transform-origin: bottom right; transition: opacity .22s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
}
.finn-buddy__bubble::after {
  content: ""; position: absolute; right: 14px; bottom: -7px;
  width: 12px; height: 12px; background: var(--surface);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
/* Bubble hides by default; shows on hover/focus or when nudged. */
.finn-buddy__bubble { opacity: 0; transform: scale(.6) translateY(6px); pointer-events: none; }
.finn-buddy:hover .finn-buddy__bubble,
.finn-buddy:focus-visible .finn-buddy__bubble,
.finn-buddy.nudge .finn-buddy__bubble { opacity: 1; transform: scale(1) translateY(0); }
@media (prefers-reduced-motion: no-preference) {
  .finn-buddy__owl { animation: finnBuddyBob 3s ease-in-out infinite; }
  @keyframes finnBuddyBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
  /* A little wave-wiggle on hover to invite a tap. */
  .finn-buddy:hover .finn-buddy__owl { animation: finnBuddyWave .6s cubic-bezier(.34,1.56,.64,1); }
  @keyframes finnBuddyWave { 0%{transform:rotate(0) scale(1);} 30%{transform:rotate(-12deg) scale(1.08);} 60%{transform:rotate(9deg) scale(1.05);} 100%{transform:rotate(0) scale(1);} }
  .finn-buddy:active .finn-buddy__owl { transform: scale(.92); }
  /* Gentle attention pulse on the disc while a nudge bubble is showing. */
  /* On a nudge, Finn waves hello (reusing the wave gesture), keeps bobbing, and the disc pulses. */
  .finn-buddy.nudge .finn-buddy__owl { box-shadow: 0 10px 26px rgba(124,92,255,.55), inset 0 0 0 3px rgba(124,92,255,.18), 0 0 0 0 rgba(124,92,255,.45); animation: finnBuddyWave .6s cubic-bezier(.34,1.56,.64,1), finnBuddyBob 3s ease-in-out .6s infinite, finnBuddyPulse 1.6s ease-out 2; }
  @keyframes finnBuddyPulse { 0%{box-shadow:0 10px 26px rgba(124,92,255,.55), inset 0 0 0 3px rgba(124,92,255,.18), 0 0 0 0 rgba(124,92,255,.5);} 100%{box-shadow:0 10px 26px rgba(124,92,255,.45), inset 0 0 0 3px rgba(124,92,255,.18), 0 0 0 16px rgba(124,92,255,0);} }
}
@media (max-width: 560px) {
  .finn-buddy { right: 14px; bottom: 78px; }
  .finn-buddy__owl { width: 56px; height: 56px; }
  .finn-buddy__owl img { width: 48px; height: 48px; }
  .finn-buddy__bubble { max-width: 150px; font-size: 12.5px; }
}

/* Bobbing-Finn loader — a kid-friendly stand-in for plain spinners. */
.finn-loader { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px; text-align: center; }
.finn-loader__txt { color: var(--muted); font-size: 14px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .finn-loader img { animation: finnLoadBob 1.15s ease-in-out infinite; }
  @keyframes finnLoadBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-11px) rotate(4deg); } }
}

/* === Dynamic marketing photo band (Pixabay, re-hosted) === */
.photo-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.photo-band img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 8px 24px rgba(15,23,42,.10); transition: transform .35s ease, box-shadow .35s ease; background: var(--surface-2); }
.photo-band img:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 32px rgba(124,92,255,.22); }
@media (max-width: 600px) { .photo-band { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .photo-band img { transition: none; } .photo-band img:hover { transform: none; } }