/* =========================================================
   NotesToMastery — landing page
   Concept: "the living notebook" — notes that come alive.
   ========================================================= */

:root {
  --purple: #6C4BF0;
  --purple-deep: #5A36E0;
  --purple-soft: #876DF4;
  --purple-pale: #B39AF7;
  --ink: #1F2340;
  --ink-2: #2a2e52;
  --lav: #F3F1FE;
  --lav-2: #E9E3FF;
  --lav-3: #EDE9FA;
  --white: #FFFFFF;
  --gold: #FFB020;
  --gold-soft: #FFE3A3;
  --muted: #68647C;
  --border: #DCD5EF;
  --right: #138a5b;
  --right-bg: #e3f6ee;
  --wrong: #c8174a;
  --wrong-bg: #fde7ee;

  --font: "Google Sans", "Google Sans Flex", "Product Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --r: 0.625rem;
  --r-xl: 1.5rem;
  --shadow-1: 0 1px 2px rgba(31, 35, 64, .06), 0 8px 24px -12px rgba(31, 35, 64, .18);
  --shadow-2: 0 2px 4px rgba(31, 35, 64, .05), 0 24px 48px -20px rgba(60, 40, 160, .35);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--lav);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--purple); }
h1, h2, h3, h4 { line-height: 1.12; margin: 0; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: 2.75rem; padding: 0 1.4rem; border-radius: 999px; border: 2px solid transparent;
  font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--spring), background-color .2s, box-shadow .25s, color .2s, border-color .2s;
}
.btn:active { transform: scale(.97); }
.btn--sm { height: 2.4rem; padding: 0 1.1rem; font-size: .95rem; }
.btn--lg { height: 3.25rem; padding: 0 1.75rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--purple); color: #fff; box-shadow: 0 8px 20px -8px rgba(108, 75, 240, .7); }
.btn--primary:hover { background: var(--purple-deep); box-shadow: 0 12px 26px -8px rgba(108, 75, 240, .8); }
.btn--primary .i { transition: transform .3s var(--spring); }
.btn--primary:hover .i { transform: translateX(4px); }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--purple-deep); }
.btn--light:hover { background: var(--gold); color: var(--ink); }
.btn--outline-light { color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.link-quiet { color: var(--ink); text-decoration: none; font-weight: 600; }
.link-quiet:hover { color: var(--purple); }
.link-btn { background: none; border: 0; padding: 0; color: var(--purple); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Scroll progress (pencil line) ---------- */
.pencil-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.pencil-progress span {
  display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--purple) 0 calc(100% - 10px), var(--gold) calc(100% - 10px));
}

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; transition: background-color .3s, box-shadow .3s, backdrop-filter .3s; }
.nav.is-stuck { background: rgba(243, 241, 254, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--border); }
.nav__inner { display: flex; align-items: center; gap: 2rem; height: 72px; }
.nav__logo img { height: 30px; width: auto; }
.nav__actions { display: flex; align-items: center; gap: 1.25rem; }
.nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--white); }
.burger { display: grid; gap: 4px; justify-items: center; }
.burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { padding: 8px var(--gutter) 20px; background: var(--lav); border-bottom: 1px solid var(--border); }
.mobile-menu nav { display: grid; margin-bottom: 14px; }
.mobile-menu nav a { padding: 14px 4px; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--border); font-size: 1.1rem; }
.mobile-menu:not([hidden]) { animation: drop .35s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Shared text bits ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .92rem; color: var(--purple-deep); background: var(--white); padding: .4rem .9rem .4rem .7rem; border-radius: 999px; box-shadow: var(--shadow-1); }
.eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(255, 176, 32, .25); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 176, 32, 0); } }
.kicker { font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); margin-bottom: .9rem; }
.kicker--light { color: var(--gold); }
.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.section__head.center { margin-left: auto; margin-right: auto; }
.section__head h2, .progress h2, .faq h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.section__lede { margin-top: 1rem; color: var(--muted); font-size: 1.1rem; max-width: 60ch; }
.fine { font-size: .85rem; color: var(--muted); margin-top: 14px; }
.margin-note { font-family: var(--hand); font-size: 1.45rem; color: var(--purple-deep); line-height: 1.1; font-weight: 500; }

/* Highlighter swipe */
.hl {
  background-image: linear-gradient(100deg, rgba(255, 176, 32, 0) 0, rgba(255, 176, 32, .55) 2%, rgba(255, 196, 80, .55) 97%, rgba(255, 176, 32, 0) 100%);
  background-repeat: no-repeat; background-size: 0% 42%; background-position: 0 88%;
  padding: 0 .08em; transition: background-size 1s var(--ease) .25s; border-radius: .2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hl.is-on { background-size: 100% 42%; }
.hl--gold { background-image: linear-gradient(100deg, transparent 0, rgba(255, 176, 32, .75) 2%, rgba(255, 176, 32, .75) 97%, transparent 100%); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Owl ---------- */
.owl { position: relative; pointer-events: none; }
.owl svg { width: 100%; height: auto; overflow: visible; }
.owl__head { transform-box: view-box; transform-origin: 147px 255px; }
.owl__eye { transform-box: fill-box; transform-origin: center; transition: transform .09s ease-in; }
.owl.is-blink .owl__eye { transform: scaleY(.08); }
.owl__pupil { transition: transform .18s ease-out; }
.owl__page-l, .owl__page-r { transform-box: view-box; transform-origin: 147px 278px; }

/* ================= HERO ================= */
.hero { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.blob--a { width: 520px; height: 520px; right: -120px; top: -80px; background: radial-gradient(circle, #d9cffd, transparent 70%); animation: float 16s ease-in-out infinite; }
.blob--b { width: 380px; height: 380px; left: -140px; bottom: -120px; background: radial-gradient(circle, #ffe2a6, transparent 70%); opacity: .45; animation: float 20s ease-in-out infinite reverse; }
@keyframes float { 50% { transform: translate(30px, 40px) scale(1.06); } }
.hero__doodles { position: absolute; inset: 0; width: 100%; height: 100%; }
.doodle { fill: none; stroke: var(--purple-pale); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 10; opacity: .7; }

.hero__grid { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy { position: relative; }
.hero__title { font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; margin: 1.25rem 0 1.4rem; font-weight: 800; }
.scribble-under { position: relative; white-space: nowrap; color: var(--purple); }
.scribble-under svg { position: absolute; left: 0; bottom: -.18em; width: 100%; height: .32em; overflow: visible; }
.scribble-under path { fill: none; stroke: var(--purple); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.1s var(--ease) .9s; }
.hero__title.is-in .scribble-under path { stroke-dashoffset: 0; }
.hero__lede { font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 34rem; --d: .1s; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; --d: .2s; }
.hero__ctas.center { justify-content: center; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2rem; --d: .3s; }
.hero__chips li { font-size: .82rem; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.6); border: 1px solid var(--border); padding: .25rem .7rem; border-radius: 999px; }
.hero__note { position: absolute; right: 2%; bottom: -54px; transform: rotate(-4deg); opacity: 0; animation: fadeIn .8s 2s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

/* Hero stage */
.hero__stage-wrap { position: relative; width: 100%; aspect-ratio: 560 / 520; }
.hero__stage { position: absolute; left: 0; top: 0; width: 560px; height: 520px; transform-origin: 0 0; transform: scale(var(--s, 1)); }
.chip-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.fly-chip { position: absolute; left: 0; top: 0; padding: 2px 10px; border-radius: 8px; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 10px 20px -8px rgba(31,35,64,.4); will-change: transform; }
.stage-note { position: absolute; right: 2%; bottom: -8px; transform: rotate(-3deg); color: var(--muted); font-size: 1.35rem; }

.paper {
  background: var(--white); border-radius: 18px; box-shadow: var(--shadow-2); position: relative; overflow: hidden;
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, #eeeaf9 33px 34px);
  background-position: 0 8px;
}
.paper::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 2px; background: #ffd9e1; }
.src-note { position: absolute; left: 6px; top: 96px; width: 318px; padding: 22px 22px 22px 46px; transform: rotate(-2.5deg); z-index: 2; overflow: visible; }
.src-note::after { content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.paper__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.file-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; background: var(--lav-2); color: var(--purple-deep); padding: 3px 9px; border-radius: 999px; }
.paper__meta { font-size: 12px; color: var(--muted); font-weight: 600; }
.paper__title { font-family: var(--hand); font-size: 34px; font-weight: 700; color: var(--ink); margin-bottom: 4px; letter-spacing: 0; }
.paper__line { font-size: 15px; line-height: 34px; color: #3c4060; }
.paper__line + .paper__line { margin-top: 0; }
.term { background: transparent; color: inherit; border-radius: 4px; padding: 0 2px; transition: background-color .4s, color .4s; background-image: linear-gradient(transparent 55%, rgba(255,176,32,0) 55%); }
.term.is-lit { background-color: rgba(255, 176, 32, .45); }
.term.is-sent { background-color: rgba(108, 75, 240, .12); color: var(--purple-deep); }
.paper__ghost { display: grid; gap: 14px; padding: 12px 0 4px; }
.paper__ghost i { display: block; height: 7px; border-radius: 6px; background: #ece8f7; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 56px; background: linear-gradient(to bottom, transparent, rgba(108,75,240,.14), transparent); border-bottom: 2px solid rgba(108,75,240,.5); opacity: 0; pointer-events: none; border-radius: 18px; }
.scan.is-run { animation: scan 1.8s var(--ease) forwards; }
@keyframes scan { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(300px); } }

.owl--perch { position: absolute; width: 88px; right: 18px; top: -70px; z-index: 3; transform: rotate(4deg); }

.out { position: absolute; background: var(--white); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-2); z-index: 3; opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .5s var(--ease), transform .7s var(--spring); }
.out.is-on { opacity: 1; transform: none; }
.out__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--purple-deep); background: var(--lav-2); padding: 3px 9px; border-radius: 999px; }
.out__tag--plain { background: none; padding: 0; color: var(--ink); }
.out__q { font-weight: 600; font-size: 15px; line-height: 1.35; margin: 10px 0 10px; }
.out--flash { right: 0; top: 18px; width: 236px; transform-origin: 0 100%; }
.out__rate { display: flex; gap: 5px; }
.out__rate span { flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 5px 0; border-radius: 8px; background: var(--lav-3); color: var(--muted); }
.out__rate span.is-on { background: var(--purple); color: #fff; }
.out--quiz { right: 0; top: 206px; width: 236px; transform-origin: 0 50%; }
.out__opts { display: grid; gap: 6px; }
.out__opts li { font-size: 13px; padding: 7px 10px; border-radius: 10px; border: 1.5px solid var(--border); }
.out__opts li.is-right { border-color: var(--right); background: var(--right-bg); color: var(--right); font-weight: 600; display: flex; justify-content: space-between; }
.out--audio { left: 120px; bottom: 6px; width: 250px; display: flex; gap: 12px; align-items: center; }
.out__play { width: 42px; height: 42px; border-radius: 50%; background: var(--purple); display: grid; place-items: center; flex: none; }
.out__play svg { width: 18px; fill: #fff; margin-left: 2px; }
.eq { display: flex; gap: 3px; align-items: end; height: 22px; margin-top: 6px; }
.eq i { width: 4px; border-radius: 2px; background: var(--purple-soft); height: 30%; }
.out.is-on .eq i { animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(3n) { animation-delay: -.3s !important; } .eq i:nth-child(3n+1) { animation-delay: -.6s !important; } .eq i:nth-child(4n) { animation-duration: .8s !important; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.out--sum { right: 10px; bottom: 96px; width: 210px; display: none; }
.out--sum ul { margin-top: 8px; display: grid; gap: 4px; font-size: 13px; }
.out--sum li::before { content: "• "; color: var(--gold); font-weight: 800; }

/* ---------- Ribbon ---------- */
.ribbon { background: var(--ink); color: #fff; overflow: hidden; padding: 16px 0; transform: rotate(-1.2deg) scale(1.02); }
.ribbon__track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 40s linear infinite; }
.ribbon span { font-weight: 600; font-size: 1.05rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 2.5rem; opacity: .9; }
.ribbon span::after { content: "✦"; color: var(--gold); font-size: .8rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ================= HOW ================= */
.how__track { position: relative; }
.how__path { position: absolute; left: 0; right: 0; top: 18px; width: 100%; height: 120px; overflow: visible; }
.how__path path { fill: none; stroke: var(--purple-pale); stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--len, 1200); stroke-dashoffset: calc(var(--len, 1200) * (1 - var(--draw, 0))); }
.how__steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.how__step { background: var(--white); border-radius: var(--r-xl); padding: 28px; position: relative; border: 2px solid transparent; transition: border-color .3s; }
.how__step:hover { border-color: var(--ink); }
.how__num { position: absolute; top: -18px; right: 22px; font-family: var(--hand); font-size: 3rem; line-height: 1; color: var(--gold); font-weight: 700; }
.how__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple); margin-bottom: 18px; font-size: 1.3rem; }
.how__step h3 { font-size: 1.25rem; margin-bottom: 8px; }
.how__step p { color: var(--muted); font-size: 1rem; }

/* ================= MANY (sticky) ================= */
.many { background: var(--white); border-radius: 48px 48px 0 0; }
.many__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 88px); }
.many__step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s var(--ease); max-width: 30rem; }
.many__step:first-child { min-height: 52vh; justify-content: flex-start; padding-top: 10vh; }
.many__step:last-child { min-height: 60vh; }
.many__step.is-active { opacity: 1; }
.many__label { font-weight: 700; color: var(--purple); font-size: .95rem; margin-bottom: 12px; display: flex; gap: .6rem; align-items: baseline; }
.many__label b { font-family: var(--hand); font-size: 1.7rem; color: var(--gold); }
.many__step h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 14px; }
.many__step p { color: var(--muted); font-size: 1.08rem; }
.many__step .panel-clone { display: none; }

.many__stage-col { position: relative; }
.many__stage { position: sticky; top: calc(50vh - 250px); height: 500px; border-radius: 32px; background: var(--lav); padding: 28px; overflow: hidden; }
.paper--mini { width: 74%; padding: 20px 20px 18px 44px; transform: rotate(-2deg); }
.paper--mini .paper__line { font-size: 14px; line-height: 34px; }
.paper--mini [data-for] { border-radius: 4px; transition: background-color .5s, box-shadow .5s; }
.paper--mini [data-for].is-lit { background: rgba(255, 176, 32, .5); box-shadow: 0 0 0 3px rgba(255, 176, 32, .5); }
.many__beam { position: absolute; left: 50%; top: 48%; width: 120px; height: 3px; background: repeating-linear-gradient(90deg, var(--purple) 0 8px, transparent 8px 14px); transform: rotate(32deg); opacity: .35; animation: dash 1s linear infinite; }
@keyframes dash { to { background-position: 14px 0; } }

.panel { position: absolute; right: 28px; bottom: 28px; width: 64%; background: var(--white); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(30px) rotate(2deg) scale(.95); transition: opacity .5s var(--ease), transform .7s var(--spring); pointer-events: none; }
.panel.is-active { opacity: 1; transform: rotate(1deg); pointer-events: auto; }
.panel__tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--purple-deep); background: var(--lav-2); padding: 3px 10px; border-radius: 999px; }
.panel__big { font-weight: 700; font-size: 1.2rem; line-height: 1.3; margin: 12px 0; }
.panel__top { display: flex; justify-content: space-between; align-items: center; }
.stack { position: relative; height: 170px; }
.stack__card { position: absolute; inset: 0; background: var(--white); border: 1.5px solid var(--border); border-radius: 16px; padding: 16px; }
.stack__card--2 { transform: translate(8px, 8px) rotate(2deg); background: var(--lav-3); }
.stack__card--3 { transform: translate(16px, 16px) rotate(4deg); background: var(--lav-2); }
.panel__ans { font-family: var(--hand); font-size: 1.8rem; color: var(--purple); font-weight: 700; }
.panel.is-active .panel__ans { animation: write .8s .5s both var(--ease); }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.rate-row { display: flex; gap: 6px; margin-top: 24px; }
.rate-row span { flex: 1; text-align: center; font-size: 13px; font-weight: 700; padding: 8px 0; border-radius: 10px; background: var(--lav-3); color: var(--muted); }
.rate-row .is-on { background: var(--purple); color: #fff; }
.timer { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.timer svg { width: 22px; transform: rotate(-90deg); }
.timer circle { fill: none; stroke: var(--lav-2); stroke-width: 4; }
.timer .timer__run { stroke: var(--gold); stroke-dasharray: 94.25; stroke-dashoffset: 30; }
.panel.is-active .timer__run { animation: tick 20s linear infinite; }
@keyframes tick { to { stroke-dashoffset: 94.25; } }
.opts { display: grid; gap: 8px; }
.opts li { font-size: 14px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; }
.panel.is-active .opts .is-right { animation: rightPop .5s .7s both var(--spring); }
@keyframes rightPop { to { border-color: var(--right); background: var(--right-bg); color: var(--right); font-weight: 600; } }
.explain { font-size: 13px; color: var(--muted); margin-top: 10px; }
.panel.is-active .explain { animation: rise .5s 1.1s both var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.sum-list { display: grid; gap: 8px; font-size: 14.5px; }
.sum-list li { padding-left: 14px; border-left: 3px solid var(--gold); }
.panel.is-active .sum-list li { animation: rise .5s both var(--ease); }
.panel.is-active .sum-list li:nth-child(2) { animation-delay: .12s; } .panel.is-active .sum-list li:nth-child(3) { animation-delay: .24s; } .panel.is-active .sum-list li:nth-child(4) { animation-delay: .36s; }
.pod { display: grid; gap: 8px; margin: 12px 0; }
.pod__line { font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.pod__line b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--purple); color: #fff; }
.pod__line--b b { background: var(--gold); color: var(--ink); }
.wave { height: 44px; border-radius: 12px; background: var(--lav-3); position: relative; overflow: hidden; -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px); mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px); }
.wave::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--purple) 0 40%, var(--purple-pale) 40%); clip-path: polygon(0 40%, 5% 20%, 10% 55%, 15% 10%, 20% 45%, 25% 25%, 30% 60%, 35% 15%, 40% 50%, 45% 30%, 50% 5%, 55% 40%, 60% 25%, 65% 55%, 70% 20%, 75% 45%, 80% 10%, 85% 35%, 90% 25%, 95% 50%, 100% 30%, 100% 100%, 0 100%); }
.panel.is-active .wave::before { animation: wavefill 6s linear infinite; }
@keyframes wavefill { from { background-position: -100% 0; } }

/* ================= PRACTICE (bento) ================= */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile { background: var(--white); border-radius: 28px; padding: 24px; display: flex; flex-direction: column; border: 2px solid transparent; }
.tile__head { margin-bottom: 18px; }
.tile__head h3 { font-size: 1.25rem; }
.tile__hint { font-size: .85rem; color: var(--muted); }
.inline-note { display: inline-block; transform: rotate(-4deg) translateY(-6px); font-size: 1.6rem; color: var(--purple); margin-left: .3em; letter-spacing: 0; }

/* Flashcard */
.fc { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.fc__card { position: relative; width: 100%; min-height: 200px; border: 0; padding: 0; background: none; perspective: 1000px; }
.fc__face { position: absolute; inset: 0; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; justify-content: center; text-align: left; font-size: 1.2rem; font-weight: 600; line-height: 1.35; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s var(--spring); }
.fc__face small { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; opacity: .7; }
.fc__front { background: var(--lav); color: var(--ink); background-image: repeating-linear-gradient(to bottom, transparent 0 29px, #e4def8 29px 30px); }
.fc__back { background: var(--purple); color: #fff; transform: rotateY(180deg); }
.fc__card.is-flipped .fc__front { transform: rotateY(-180deg); }
.fc__card.is-flipped .fc__back { transform: rotateY(0); }
.fc__card.is-leaving { animation: leave .45s var(--ease) forwards; }
.fc__card.is-entering { animation: enter .5s var(--spring); }
@keyframes leave { to { transform: translateX(60px) rotate(8deg); opacity: 0; } }
@keyframes enter { from { transform: translateY(16px) scale(.94); opacity: 0; } }
.fc__rates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fc__rates button { border: 0; border-radius: 12px; padding: 10px 0; font-weight: 700; font-size: .9rem; background: var(--lav-3); color: var(--ink); transition: background-color .2s, transform .2s var(--spring), color .2s; }
.fc__rates button:hover:not(:disabled) { background: var(--purple); color: #fff; transform: translateY(-2px); }
.fc__rates button:disabled { opacity: .45; cursor: not-allowed; }
.fc__status { font-size: .9rem; color: var(--muted); min-height: 1.5em; }

/* Quiz */
.qz { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.qz legend { font-weight: 600; font-size: 1.1rem; line-height: 1.35; margin-bottom: 12px; padding: 0; }
.qz__opt { text-align: left; padding: 13px 16px; border-radius: 14px; border: 2px solid var(--border); background: var(--white); font-weight: 500; transition: border-color .2s, background-color .25s, transform .2s var(--spring); }
.qz__opt:hover:not(:disabled) { border-color: var(--purple); transform: translateX(3px); }
.qz__opt.is-right { border-color: var(--right); background: var(--right-bg); color: var(--right); font-weight: 700; }
.qz__opt.is-wrong { border-color: var(--wrong); background: var(--wrong-bg); color: var(--wrong); animation: shake .4s; }
.qz__opt:disabled { cursor: default; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.qz__explain { background: var(--lav); border-radius: 14px; padding: 14px 16px; font-size: .95rem; animation: rise .4s var(--ease); }
.qz__explain p { margin-bottom: 8px; }

/* Chat */
.chat { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.msg { font-size: .95rem; line-height: 1.5; border-radius: 18px; padding: 12px 14px; }
.msg--me { align-self: flex-end; max-width: 88%; background: var(--purple); color: #fff; border-bottom-right-radius: 6px; }
.msg--ai { display: flex; gap: 10px; align-items: flex-start; background: var(--lav); border-bottom-left-radius: 6px; }
.owl--tiny { width: 30px; flex: none; margin-top: 2px; }
.msg__body p { min-height: 4.5em; }
.msg__body p.typing::after { content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--purple); animation: caret .9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.cite { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .8rem; font-weight: 600; color: var(--purple-deep); background: var(--white); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); opacity: 0; transform: translateY(6px); transition: all .5s var(--spring); }
.cite.is-on { opacity: 1; transform: none; }
.chat__input { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 10px 16px; border-radius: 999px; background: var(--lav-3); font-size: .9rem; color: var(--muted); }
.chat__input i { width: 30px; height: 30px; border-radius: 50%; background: var(--purple); }

/* ================= DAY (dark) ================= */
.day { color: #fff; background: linear-gradient(160deg, var(--ink) 0%, #2d2366 55%, var(--purple-deep) 100%); overflow: hidden; }
.day__bg { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); }
.day h2 { color: #fff; }
.day .hl { color: var(--gold); background-image: linear-gradient(100deg, transparent 0, rgba(255,255,255,.16) 2%, rgba(255,255,255,.16) 97%, transparent 100%); }
.day__grid { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.timeline { position: relative; display: grid; gap: 28px; }
.timeline::before { content: ""; position: absolute; left: 77px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--gold), rgba(255,255,255,.15)); }
.timeline li { display: grid; grid-template-columns: 64px 1fr; gap: 28px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 71px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid var(--gold); }
.timeline time { font-family: var(--hand); font-size: 1.4rem; color: var(--gold); line-height: 1; padding-top: 2px; text-align: left; }
.timeline h3 { font-size: 1.15rem; margin-bottom: 4px; color: #fff; }
.timeline p { color: rgba(255,255,255,.72); font-size: .98rem; }

.rec { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 28px; padding: 24px; backdrop-filter: blur(8px); }
.rec__top { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.rec__dot { width: 12px; height: 12px; border-radius: 50%; background: #ff5a7a; box-shadow: 0 0 0 0 rgba(255,90,122,.6); animation: recp 1.6s infinite; }
@keyframes recp { 70% { box-shadow: 0 0 0 10px rgba(255,90,122,0); } }
.rec__time { margin-left: auto; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.8); }
.rec__bars { display: flex; align-items: center; gap: 3px; height: 64px; margin: 18px 0 22px; }
.rec__bars i { flex: 1; min-width: 2px; border-radius: 3px; background: linear-gradient(var(--purple-pale), var(--purple-soft)); height: 10%; transition: height .15s ease-out; }
.rec__cols { display: grid; grid-template-columns: 1fr 36px 1fr; gap: 12px; align-items: start; }
.rec__col { background: rgba(255,255,255,.95); color: var(--ink); border-radius: 18px; padding: 16px; min-height: 230px; }
.rec__col--notes { background: #fff; }
.rec__h { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }
.tr { font-size: .88rem; color: #4a4e6c; font-style: italic; margin-bottom: 8px; }
.nt { font-size: .9rem; margin-bottom: 6px; }
h4.nt { font-size: .95rem; color: var(--purple-deep); margin-top: 6px; }
.tr, .nt { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tr.is-on, .nt.is-on { opacity: 1; transform: none; }
.rec__arrow { width: 36px; margin-top: 100px; fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ================= MORE ================= */
/* Same sticky pattern as MANY, mirrored: stage on the left, steps on the right */
.many__grid--flip { grid-template-columns: 1.1fr 1fr; }
.many__grid--flip .many__step { margin-left: auto; }
.more__stage { background: var(--white); box-shadow: var(--shadow-1); }
.more__stage::before { content: ""; position: absolute; inset: auto -60px -80px auto; width: 260px; height: 260px; border-radius: 50%; background: var(--lav-2); }
.more__rail { position: relative; display: flex; gap: 6px; flex-wrap: wrap; }
.more__rail li { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--lav); color: var(--muted); transition: background-color .4s, color .4s, transform .4s var(--spring); }
.more__rail li.is-lit { background: var(--purple); color: #fff; transform: translateY(-2px); }
.more__stage .panel { left: 50%; right: auto; top: 88px; bottom: auto; width: min(420px, 84%); margin-left: max(-210px, -42%); background: var(--white); border: 1.5px solid var(--border); }
.more__stage .panel:not(.is-active) { transform: translateY(30px) rotate(-2deg) scale(.95); }
.more__stage .panel.is-active { transform: rotate(-1deg); }
.more__score { font-size: 12px; font-weight: 700; color: var(--muted); }
.panel .seq { margin-top: 4px; }
.panel .editor { margin-top: 4px; }
.panel .res { margin-top: 4px; }
.more__added { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--right); background: var(--right-bg); padding: 5px 12px; border-radius: 999px; }
.panel.is-active .res li { animation: rise .5s both var(--ease); }
.panel.is-active .res li:nth-child(2) { animation-delay: .12s; } .panel.is-active .res li:nth-child(3) { animation-delay: .24s; }
.panel.is-active .more__added { animation: rise .5s .7s both var(--spring); }
.more__chat { margin: 14px 0 16px; }
.panel.is-active .more__chat .msg { animation: rise .5s .2s both var(--ease); }
.seq { position: relative; margin-top: auto; height: 192px; }
.seq li { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; background: var(--lav); font-size: .88rem; font-weight: 600; transition: transform .8s var(--spring), background-color .4s; }
.seq li::before { content: counter(x); counter-increment: x; }
.seq { counter-reset: x; }
.seq li::before { content: "⋮⋮"; color: var(--purple-pale); font-size: .8rem; letter-spacing: -2px; }
.seq.is-solved li { background: var(--right-bg); }
.seq li.is-moving { background: var(--gold-soft); z-index: 2; box-shadow: var(--shadow-1); }
.editor { margin-top: auto; background: var(--lav); border-radius: 18px; padding: 14px; }
.editor__text { font-size: .9rem; min-height: 6.2em; transition: opacity .3s; }
.editor__text.is-swap { opacity: 0; }
.editor__bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.editor__bar button { border: 1.5px solid var(--border); background: var(--white); border-radius: 999px; padding: 5px 11px; font-size: .8rem; font-weight: 600; transition: all .2s; }
.editor__bar button.is-on, .editor__bar button:hover { background: var(--purple); color: #fff; border-color: var(--purple); }
.res { margin-top: auto; display: grid; gap: 8px; }
.res li { display: grid; grid-template-columns: 38px 1fr; column-gap: 10px; align-items: center; font-size: .85rem; font-weight: 600; background: var(--lav); padding: 8px; border-radius: 14px; transition: transform .3s var(--spring); }
.res li:hover { transform: translateX(4px); }
.res em { grid-column: 2; font-style: normal; font-weight: 500; color: var(--muted); font-size: .75rem; }
.res__ic { grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: #fff; background: var(--c); }
.res li:nth-child(2) .res__ic { color: var(--ink); }
.remind { margin-top: auto; display: flex; gap: 12px; align-items: center; background: var(--ink); color: #fff; padding: 14px; border-radius: 18px; box-shadow: var(--shadow-2); transform-origin: top center; }
.remind .i { width: 28px; height: 28px; color: var(--gold); flex: none; }
.panel.is-active .remind { animation: ring 1.2s .6s var(--ease) both; }
.panel.is-active .remind .i { animation: bell 1s 1s ease-in-out 2; }
@keyframes ring { from { opacity: 0; transform: translateY(-14px) scale(.95); } }
@keyframes bell { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
.remind b { display: block; font-size: .95rem; }
.remind span { font-size: .8rem; opacity: .75; }

/* ================= PROGRESS ================= */
.progress { background: var(--white); }
.progress__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.progress h2 { margin-bottom: 0; }
.ticks { display: grid; gap: 10px; margin-top: 24px; --d: .15s; }
.ticks li { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.ticks li::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--ink); font-weight: 800; font-size: .8rem; flex: none; }
.dash { position: relative; background: var(--lav); border-radius: 32px; padding: 24px; }
.dash__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { position: relative; background: var(--white); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; justify-content: center; min-height: 104px; overflow: hidden; }
.stat--ring, .stat--coin { flex-direction: row; align-items: center; gap: 12px; }
.stat__label { display: block; font-size: .78rem; color: var(--muted); font-weight: 600; }
.stat__val { display: block; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.flame { position: absolute; right: -8px; bottom: -14px; width: 60px; height: 72px; background: radial-gradient(circle at 50% 70%, var(--gold) 0 30%, transparent 31%), radial-gradient(ellipse at 50% 60%, rgba(255,176,32,.35) 0 50%, transparent 51%); border-radius: 50% 50% 45% 45%; animation: flicker 1.8s ease-in-out infinite; transform-origin: bottom center; }
@keyframes flicker { 50% { transform: scale(1.08, .94) rotate(-3deg); } }
.stat--ring svg { width: 52px; transform: rotate(-90deg); flex: none; }
.stat--ring circle { fill: none; stroke-width: 6; stroke: var(--lav-2); }
.stat--ring .ring { stroke: var(--purple); stroke-linecap: round; stroke-dasharray: 169.6; stroke-dashoffset: 169.6; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.dash.is-in .ring { stroke-dashoffset: 55; }
.coin { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffd77a, var(--gold) 60%, #e39200); color: #8a5600; font-size: 1.2rem; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); flex: none; }
.dash.is-in .coin { animation: coinflip 1.4s .6s var(--ease) both; }
@keyframes coinflip { 0% { transform: rotateY(0) translateY(0); } 40% { transform: rotateY(540deg) translateY(-18px); } 100% { transform: rotateY(720deg) translateY(0); } }
.heat { background: var(--white); border-radius: 20px; padding: 16px; margin-top: 12px; }
.heat__head { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.heat__legend { display: flex; gap: 3px; }
.heat__legend i, .heat__grid i { display: block; border-radius: 4px; }
.heat__legend i { width: 12px; height: 12px; }
.heat__legend i:nth-child(1) { background: var(--lav-3); } .heat__legend i:nth-child(2) { background: #cfc2fb; } .heat__legend i:nth-child(3) { background: var(--purple-soft); } .heat__legend i:nth-child(4) { background: var(--purple); }
.heat__grid { display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 4px; }
.heat__grid i { aspect-ratio: 1; background: var(--lav-3); transform: scale(.4); opacity: 0; transition: transform .4s var(--spring), opacity .3s, background-color .3s; }
.heat__grid i.is-on { transform: none; opacity: 1; }
.heat__grid i[data-l="1"].is-on { background: #cfc2fb; } .heat__grid i[data-l="2"].is-on { background: var(--purple-soft); } .heat__grid i[data-l="3"].is-on { background: var(--purple); }
.heat__grid i.is-today { box-shadow: 0 0 0 2px var(--gold); }
.badge-toast { position: absolute; left: -28px; bottom: -26px; display: flex; gap: 12px; align-items: center; background: var(--ink); color: #fff; border-radius: 20px; padding: 12px 18px 12px 12px; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(16px) scale(.9); transition: opacity .5s, transform .7s var(--spring); }
.badge-toast.is-on { opacity: 1; transform: rotate(-2deg); }
.badge-toast b { display: block; font-size: .9rem; color: var(--gold); }
.badge-toast span { font-size: .85rem; }
.owl--toast { width: 40px; }
.fine--dash { text-align: right; margin-top: 10px; font-size: .75rem; }

/* ================= PRICING ================= */
.billing { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 28px; padding: 5px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-1); }
.billing button { position: relative; z-index: 1; border: 0; background: none; padding: 10px 20px; border-radius: 999px; font-weight: 600; transition: color .3s; white-space: nowrap; }
.billing button[aria-checked="true"] { color: #fff; }
.billing em { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--purple); background: var(--lav-2); padding: 2px 7px; border-radius: 999px; margin-left: 4px; transition: all .3s; }
.billing button[aria-checked="true"] em { background: var(--gold); color: var(--ink); }
.billing__thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--ink); transition: transform .45s var(--spring); }
.billing[data-period="yearly"] .billing__thumb { transform: translateX(100%); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; background: var(--white); border-radius: 28px; padding: 30px 28px; display: flex; flex-direction: column; border: 2px solid transparent; transition: border-color .3s, transform .4s var(--spring); }
.plan:hover { border-color: var(--ink); }
.plan--pop { background: var(--ink); color: #fff; transform: translateY(-10px); box-shadow: var(--shadow-2); }
.plan--pop:hover { border-color: var(--gold); }
.plan__badge { position: absolute; top: -14px; left: 28px; background: var(--gold); color: var(--ink); font-weight: 700; font-size: .8rem; padding: 5px 12px; border-radius: 999px; transform: rotate(-3deg); }
.plan h3 { font-size: 1.35rem; }
.plan__desc { color: var(--muted); font-size: .95rem; margin-top: 6px; min-height: 3em; }
.plan--pop .plan__desc { color: rgba(255,255,255,.7); }
.plan__price { margin: 22px 0 6px; display: flex; align-items: baseline; gap: 6px; }
.plan__amt { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; display: inline-block; }
.plan__amt.is-flip { animation: flipNum .5s var(--ease); }
@keyframes flipNum { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-14px); opacity: 0; } 55% { transform: translateY(14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.plan__per { color: var(--muted); font-weight: 500; }
.plan--pop .plan__per { color: rgba(255,255,255,.7); }
.plan__note { font-size: .82rem; color: var(--muted); min-height: 1.3em; }
.plan--pop .plan__note { color: var(--gold); }
.plan__limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; padding: 14px 0; border-block: 1px dashed var(--border); }
.plan--pop .plan__limits { border-color: rgba(255,255,255,.2); }
.plan__limits div { text-align: center; }
.plan__limits b { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.plan__limits span { font-size: .72rem; color: var(--muted); line-height: 1.2; display: block; }
.plan--pop .plan__limits span { color: rgba(255,255,255,.65); }
.plan__feats { display: grid; gap: 10px; margin-bottom: 26px; font-size: .95rem; }
.plan__feats li { display: flex; gap: 10px; align-items: flex-start; }
.plan__feats li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--lav-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C4BF0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.plan--pop .plan__feats li::before { background-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2340' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.plan .btn { margin-top: auto; }
.plan--pop .btn--primary { background: var(--gold); color: var(--ink); box-shadow: none; }
.plan--pop .btn--primary:hover { background: #fff; }

/* ================= FAQ ================= */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq__head { position: sticky; top: 110px; }
.owl--faq { width: 130px; margin-top: 32px; }
.faq__list { display: grid; gap: 10px; }
.qa { background: var(--white); border-radius: 20px; border: 2px solid transparent; transition: border-color .3s; }
.qa:hover, .qa[open] { border-color: var(--ink); }
.qa summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-weight: 600; font-size: 1.05rem; position: relative; border-radius: 18px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--lav-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C4BF0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/13px no-repeat; transition: transform .4s var(--spring), background-color .3s; }
.qa[open] summary::after { transform: rotate(135deg); background-color: var(--gold); }
.qa > div { padding: 0 22px 20px; color: var(--muted); }
.qa[open] > div { animation: rise .4s var(--ease); }

/* ================= CLOSING ================= */
.closing { position: relative; overflow: hidden; color: #fff; text-align: center; padding: clamp(80px, 12vw, 140px) 0; background: linear-gradient(135deg, var(--ink) 0%, var(--purple-deep) 55%, var(--purple) 100%); }
.closing__inner { position: relative; z-index: 1; }
.closing h2 { font-size: clamp(2.2rem, 5.5vw, 4rem); max-width: 16ch; margin: 24px auto 16px; color: #fff; letter-spacing: -0.035em; }
.closing__em { font-family: var(--hand); color: var(--gold); font-size: 1.15em; letter-spacing: 0; font-weight: 700; }
.closing p { color: rgba(255,255,255,.8); font-size: 1.15rem; }
.owl--big { width: 140px; margin: 0 auto; }
.owl--big.is-cheer .owl__head { animation: cheer 1.2s var(--spring); }
.owl--big.is-cheer .owl__page-l { animation: pageL 1.2s var(--ease); }
.owl--big.is-cheer .owl__page-r { animation: pageR 1.2s var(--ease); }
@keyframes cheer { 30% { transform: translateY(-14px) rotate(-6deg); } 60% { transform: translateY(-6px) rotate(5deg); } }
@keyframes pageL { 40% { transform: rotate(-10deg); } }
@keyframes pageR { 40% { transform: rotate(10deg); } }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 3px; opacity: .9; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }

/* ================= FOOTER ================= */
.footer { background: var(--ink); color: rgba(255,255,255,.75); padding: 64px 0 28px; }
.footer__inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__brand img { height: 30px; width: auto; }
.footer__brand p { margin-top: 12px; font-family: var(--hand); font-size: 1.4rem; color: var(--purple-pale); }
.footer__cols { display: flex; gap: clamp(32px, 6vw, 80px); flex-wrap: wrap; }
.footer__cols h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 14px; }
.footer__cols div { display: grid; gap: 8px; align-content: start; }
.footer__cols a { color: rgba(255,255,255,.75); text-decoration: none; }
.footer__cols a:hover { color: var(--gold); }
.footer__base { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1080px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tile--tutor { grid-column: span 2; }
}
@media (max-width: 1023px) {
  .nav__links, .nav__actions { display: none; }
  .nav__toggle { display: grid; place-items: center; }
}
@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__note { display: none; }
  .hero__stage-wrap { max-width: 560px; margin: 0 auto; }
  .how__path { display: none; }
  .how__steps { grid-template-columns: 1fr; gap: 28px; }
  .many__grid, .many__grid--flip { grid-template-columns: 1fr; }
  .many__grid--flip .many__step { margin-left: 0; }
  .many__step .panel-clone.panel { left: auto; margin-left: 0; top: auto; }
  .many__grid--flip .many__step .panel-clone { background: var(--white); }
  .many__stage-col { display: none; }
  .many__step, .many__step:first-child, .many__step:last-child { min-height: 0; opacity: 1; padding: 0 0 48px; max-width: none; }
  .many__step .panel-clone { display: block; position: relative; inset: auto; width: 100%; margin-top: 20px; opacity: 1; transform: none; box-shadow: var(--shadow-1); background: var(--lav); }
  .many__step .panel-clone .stack__card:not(.stack__card--2):not(.stack__card--3) { background: var(--white); }
  .day__grid, .progress__grid, .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .owl--faq { display: none; }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 28px; }
  .plan--pop { transform: none; }
  .badge-toast { left: 12px; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .bento { grid-template-columns: 1fr; }
  .tile--tutor { grid-column: auto; }
  .many { border-radius: 28px 28px 0 0; }
  .rec__cols { grid-template-columns: 1fr; }
  .rec__arrow { margin: 0 auto; transform: rotate(90deg); }
  .rec__col { min-height: 0; }
  .dash__row { grid-template-columns: 1fr 1fr; }
  .stat:first-child { grid-column: span 2; }
  .dash { padding-bottom: 72px; }
  .fine--dash { text-align: left; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .stage-note { display: none; }
  .billing button { padding: 10px 14px; }
}

/* ================= REDUCED 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; }
  .reveal { opacity: 1; transform: none; }
  .ribbon__track { animation: none; }
  .hl { background-size: 100% 42%; }
  .scribble-under path { stroke-dashoffset: 0; }
  .how__path path { stroke-dashoffset: 0; }
  .out { opacity: 1; transform: none; }
  .tr, .nt { opacity: 1; transform: none; }
  .heat__grid i { opacity: 1; transform: none; }
  .cite { opacity: 1; transform: none; }
}