:root {
  --sky-50: #f5fbff;
  --sky-100: #e8f7ff;
  --sky-200: #c9ecff;
  --sky-300: #8ed8fb;
  --sky-400: #4fbbe9;
  --sky-500: #1896cf;
  --sky-600: #0877aa;
  --ink: #101820;
  --ink-soft: #41505d;
  --muted: #687683;
  --white: #ffffff;
  --peach: #ffdcc8;
  --peach-deep: #b34f25;
  --green: #c9f3dc;
  --green-deep: #147349;
  --yellow: #ffe78a;
  --border: #dbe8ee;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --shadow-sm: 0 10px 35px rgba(16, 53, 72, 0.08);
  --shadow-lg: 0 28px 75px rgba(10, 68, 97, 0.16);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--white); font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.65; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 112px 0; position: relative; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 12px 18px; border-radius: 10px; color: var(--white); background: var(--ink); transform: translateY(-150%); transition: transform 180ms ease-out; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 3px; }

.site-header { height: 80px; position: fixed; inset: 0 0 auto; z-index: 100; display: flex; align-items: center; background: rgba(255,255,255,0.82); border-bottom: 1px solid transparent; backdrop-filter: blur(16px); transition: box-shadow 200ms ease, border-color 200ms ease; }
.site-header.scrolled { border-color: rgba(16,24,32,0.08); box-shadow: 0 8px 28px rgba(16,50,70,0.07); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 8px; height: 58px; flex: 0 0 auto; }
.brand-logo { width: 168px; height: 54px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav > a:not(.button) { font-size: 14px; font-weight: 650; color: #33424e; position: relative; }
.site-nav > a:not(.button)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; border-radius: 2px; background: var(--sky-500); transition: right 200ms ease; }
.site-nav > a:not(.button):hover::after, .site-nav > a.active::after { right: 0; }
.site-nav .sign-in { margin-left: 4px; color: var(--ink) !important; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border: 1px solid var(--ink); border-radius: 14px; background: var(--ink); color: var(--white); font-weight: 750; font-size: 15px; line-height: 1.1; cursor: pointer; box-shadow: 0 7px 0 rgba(8,119,170,0.18); transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 9px 0 rgba(8,119,170,0.2); }
.button:active { transform: translateY(1px); box-shadow: 0 4px 0 rgba(8,119,170,0.18); }
.button-small { min-height: 44px; padding: 11px 18px; border-radius: 12px; font-size: 14px; box-shadow: none; }
.button-secondary { color: var(--ink); background: rgba(255,255,255,0.76); border-color: rgba(16,24,32,0.16); box-shadow: none; }
.button-secondary svg { width: 18px; height: 18px; }
.button-secondary:hover { background: var(--white); box-shadow: 0 8px 24px rgba(16,50,70,0.1); }
.menu-toggle { display: none; width: 48px; height: 48px; border: 0; border-radius: 12px; background: transparent; padding: 12px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px auto; background: var(--ink); border-radius: 2px; transition: transform 200ms ease, opacity 160ms ease; }

.hero { min-height: 780px; padding-top: 176px; padding-bottom: 104px; background: linear-gradient(135deg, #f7fcff 0%, #e7f7ff 55%, #d9f2ff 100%); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 100px; background: var(--white); clip-path: ellipse(60% 45% at 50% 100%); }
.hero-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 52px; position: relative; z-index: 2; }
.hero-copy { max-width: 620px; }
.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--sky-600); font-size: 12px; line-height: 1.3; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.eyebrow { padding: 8px 12px; border: 1px solid rgba(8,119,170,0.15); background: rgba(255,255,255,0.66); border-radius: 999px; }
.eyebrow svg { width: 16px; height: 16px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.035em; line-height: 1.08; }
h1 { margin-bottom: 24px; font-size: clamp(3.1rem, 6vw, 5.4rem); font-weight: 850; }
h1 span { color: var(--sky-600); position: relative; }
h1 span::after { content: ""; position: absolute; left: 1%; right: 0; bottom: 5px; height: 9px; z-index: -1; background: var(--yellow); border-radius: 100%; transform: rotate(-1deg); opacity: 0.9; }
h2 { margin-bottom: 22px; font-size: clamp(2.35rem, 4vw, 4rem); font-weight: 820; }
h3 { margin-bottom: 12px; font-size: 1.35rem; font-weight: 780; }
.hero-lead { max-width: 590px; margin-bottom: 30px; color: var(--ink-soft); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-note { display: flex; align-items: center; gap: 13px; margin-top: 30px; }
.hero-note p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.hero-note strong { color: var(--ink); }
.avatar-stack { display: flex; }
.avatar-stack span { width: 34px; height: 34px; display: grid; place-items: center; margin-left: -7px; border: 3px solid var(--sky-100); border-radius: 50%; color: var(--ink); background: var(--yellow); font-size: 11px; font-weight: 800; }
.avatar-stack span:first-child { margin-left: 0; background: var(--peach); }
.avatar-stack span:last-child { background: var(--green); }
.payment-note { width: fit-content; display: flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--green-deep); font-size: 12px; font-weight: 800; }
.payment-note svg { width: 18px; height: 18px; }
.hero-shape { position: absolute; border-radius: 50%; filter: blur(1px); }
.hero-shape-one { width: 430px; height: 430px; right: -160px; top: 40px; border: 70px solid rgba(255,255,255,0.44); }
.hero-shape-two { width: 250px; height: 250px; left: -150px; bottom: 30px; background: rgba(142,216,251,0.2); }

.hero-visual { min-height: 540px; display: grid; place-items: center; position: relative; }
.tablet { width: min(100%, 560px); aspect-ratio: 1.1; position: relative; z-index: 3; padding: 12px; border: 3px solid #1a252d; border-radius: 32px; background: #25323c; box-shadow: 0 40px 80px rgba(11,74,104,0.24), 0 9px 0 #101820; transform: rotate(1.5deg); }
.tablet-camera { position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #65737c; }
.tablet-screen { height: 100%; overflow: hidden; border-radius: 20px; background: #f7fafc; }
.app-bar { height: 46px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; background: var(--white); border-bottom: 1px solid var(--border); }
.mini-brand { display: flex; align-items: center; }
.mini-brand img { width: 58px; height: 24px; object-fit: contain; }
.timer { padding: 5px 9px; color: #44616f; background: var(--sky-100); border-radius: 20px; font-size: 10px; font-weight: 750; }
.timer span { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--sky-500); }
.worksheet-title { padding: 18px 22px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.worksheet-title small, .worksheet-title strong { display: block; }
.worksheet-title small { margin-bottom: 3px; color: var(--sky-600); font-size: 8px; font-weight: 800; letter-spacing: 0.08em; }
.worksheet-title strong { font-size: 16px; line-height: 1.2; }
.progress-pill { padding: 6px 10px; border-radius: 20px; color: var(--green-deep); background: var(--green); font-size: 9px; font-weight: 800; }
.question-card { margin: 0 22px; min-height: 280px; padding: 22px; position: relative; border: 1px solid var(--border); border-radius: 18px; background: var(--white); box-shadow: 0 10px 25px rgba(30,74,96,0.06); }
.question-number { width: 30px; height: 30px; display: grid; place-items: center; float: left; margin-right: 10px; color: var(--sky-600); background: var(--sky-100); border-radius: 9px; font-weight: 800; }
.question-card p { margin-bottom: 24px; font-size: 13px; }
.fraction-shapes { display: flex; justify-content: center; gap: 8px; padding: 20px 0; clear: both; }
.fraction-shapes span { width: 52px; height: 52px; border: 2px solid var(--sky-600); border-radius: 10px; background: var(--sky-300); }
.fraction-shapes .empty { background: var(--white); }
.handwritten-answer { width: fit-content; margin: 14px auto 0; padding: 3px 13px; color: #176696; border-bottom: 2px solid #176696; font-family: "Bradley Hand", cursive; font-size: 18px; transform: rotate(-2deg); }
.tool-bar { height: 54px; display: flex; align-items: center; gap: 8px; padding: 8px 17px; }
.tool-bar button { min-width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; border-radius: 9px; color: #52616b; background: var(--white); }
.tool-bar button:first-child { color: var(--white); background: var(--sky-500); }
.tool-bar svg { width: 17px; height: 17px; }
.tool-spacer { flex: 1; }
.tool-bar .next-tool { padding: 0 14px; display: flex; gap: 7px; color: var(--white); background: var(--ink); font-size: 10px; font-weight: 750; }
.floating-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid rgba(16,24,32,0.09); border-radius: 15px; background: rgba(255,255,255,0.95); box-shadow: var(--shadow-sm); }
.floating-card small, .floating-card strong { display: block; white-space: nowrap; line-height: 1.35; }
.floating-card small { color: var(--muted); font-size: 9px; }
.floating-card strong { font-size: 12px; }
.mini-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--sky-600); background: var(--sky-100); border-radius: 10px; }
.mini-icon.success { color: var(--green-deep); background: var(--green); }
.mini-icon svg { width: 17px; height: 17px; stroke-width: 2.3; }
.floating-score { right: -16px; top: 26px; transform: rotate(2deg); }
.floating-saved { left: -35px; bottom: 15px; transform: rotate(-2deg); }
.family-illustration { position: absolute; inset: 10px 0 auto; height: 240px; z-index: 1; }
.person { position: absolute; }
.person-head { position: absolute; width: 72px; height: 80px; border: 3px solid var(--ink); border-radius: 48% 48% 45% 45%; background: #c98059; }
.person-hair { position: absolute; z-index: 2; width: 76px; height: 40px; border-radius: 45px 45px 12px 20px; background: var(--ink); }
.person-body { position: absolute; width: 150px; height: 155px; top: 68px; left: -39px; border: 3px solid var(--ink); border-radius: 70px 70px 22px 22px; background: var(--peach); }
.parent-person { top: 0; right: 95px; }
.child-person { top: 65px; left: 80px; transform: scale(0.78); }
.child-person .person-head { background: #e3aa82; }
.child-person .person-hair { height: 30px; border-radius: 46px 46px 8px 20px; }
.child-person .person-body { background: var(--yellow); }
.doodle-spark { position: absolute; right: 18px; top: 72px; width: 38px; color: var(--sky-500); z-index: 2; }
.doodle-spark svg { fill: currentColor; stroke: none; }

.proof-strip { position: relative; z-index: 3; padding: 22px 0 24px; background: var(--white); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-sm); overflow: hidden; }
.proof-grid > div { min-height: 104px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px 28px; border-right: 1px solid var(--border); }
.proof-grid > div:last-child { border-right: 0; }
.proof-icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; color: var(--sky-600); background: var(--sky-100); border-radius: 13px; }
.proof-icon svg { width: 22px; height: 22px; }
.proof-grid p { margin: 0; line-height: 1.4; }
.proof-grid strong, .proof-grid small { display: block; }
.proof-grid strong { font-size: 14px; }
.proof-grid small { color: var(--muted); font-size: 11px; }

.split-grid, .progress-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.section-copy > p, .center-heading > p, .section-heading-row > p, .benefit-copy > p { color: var(--ink-soft); font-size: 17px; }
.section-copy > p { max-width: 590px; }
.problem-section { background: var(--white); }
.problem-visual { min-height: 520px; position: relative; border-radius: var(--radius-lg); background: linear-gradient(145deg, #fff7f1, #f4fbff); }
.paper-stack { position: absolute; inset: 55px auto auto 65px; width: 300px; height: 280px; }
.paper { position: absolute; width: 220px; height: 275px; padding: 28px 22px; border: 1px solid #cfcbc7; background: #fffdf9; box-shadow: 0 16px 35px rgba(86,63,44,0.13); }
.paper span { display: block; margin-bottom: 25px; font-weight: 800; }
.paper i { display: block; height: 7px; margin: 13px 0; border-radius: 4px; background: #d9d8d4; }
.paper i:nth-child(3) { width: 70%; }
.paper-one { transform: rotate(-13deg); }
.paper-two { left: 60px; top: -8px; transform: rotate(7deg); }
.paper-three { left: 25px; top: 30px; transform: rotate(-2deg); }
.paper-three b { display: block; color: var(--peach-deep); font-family: "Bradley Hand", cursive; font-size: 60px; text-align: center; transform: rotate(9deg); }
.paper-scribble { position: absolute; left: -25px; bottom: -40px; width: 120px; color: var(--peach-deep); }
.paper-scribble path { stroke-width: 3; }
.digital-relief { position: absolute; right: 28px; bottom: 30px; width: 235px; padding: 20px; border-radius: 20px; color: var(--white); background: var(--ink); box-shadow: var(--shadow-lg); }
.relief-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.logo-chip { width: 70px; height: 34px; display: grid; place-items: center; padding: 5px 7px; border-radius: 10px; background: var(--white); overflow: hidden; }
.logo-chip img { width: 56px; height: 23px; object-fit: contain; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #63dda3; box-shadow: 0 0 0 5px rgba(99,221,163,0.12); }
.digital-relief p { margin-bottom: 2px; color: #b7c7d0; font-size: 11px; }
.digital-relief > strong { display: block; font-size: 17px; }
.relief-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 13px; border-top: 1px solid #384650; font-size: 10px; }
.relief-row b { padding: 4px 7px; border-radius: 8px; color: #8de8b9; background: rgba(99,221,163,0.12); }
.check-list { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.check-list li { padding-left: 30px; position: relative; color: #33444f; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 17px; height: 17px; border: 2px solid var(--sky-500); border-radius: 5px; box-shadow: inset 0 0 0 3px var(--white); background: var(--sky-500); }

.product-intro { background: var(--sky-50); }
.center-heading { max-width: 760px; margin: 0 auto 55px; text-align: center; }
.center-heading p { max-width: 690px; margin-inline: auto; }
.worksheet-showcase { overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: var(--white); box-shadow: var(--shadow-lg); }
.showcase-tabs { display: grid; grid-template-columns: repeat(6, 1fr); padding: 8px; gap: 5px; border-bottom: 1px solid var(--border); background: #f8fbfc; }
.showcase-tabs button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 14px; border: 0; border-radius: 12px; color: #53636e; background: transparent; font-size: 13px; font-weight: 750; cursor: pointer; transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.showcase-tabs button:hover { color: var(--ink); background: var(--white); }
.showcase-tabs button.active { color: var(--white); background: var(--ink); box-shadow: 0 7px 18px rgba(16,24,32,.16); }
.showcase-tabs i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #a789e7; }
.showcase-tabs button:nth-child(2) i { background: var(--sky-400); }
.showcase-tabs button:nth-child(3) i { background: #f39a70; }
.showcase-tabs button:nth-child(4) i { background: #52bd81; }
.showcase-tabs button:nth-child(5) i { background: #f2c73e; }
.showcase-tabs button:nth-child(6) i { background: #a789e7; }
.showcase-stage { min-height: 520px; background: var(--white); }
.showcase-slide { min-height: 520px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .65fr); }
.showcase-slide[hidden] { display: none; }
.showcase-slide.active { animation: showcase-in 280ms ease-out; }
@keyframes showcase-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.showcase-image { min-height: 520px; position: relative; overflow: hidden; background: linear-gradient(145deg, #dff4ff, #f1faff); }
.showcase-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset -1px 0 var(--border); }
.showcase-image > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.showcase-copy { padding: 52px 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.slide-count { margin-bottom: auto; color: #a8b8c2; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.slide-kicker { display: block; margin-bottom: 12px; color: var(--sky-600); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.showcase-copy h3 { font-size: clamp(1.75rem, 2.8vw, 2.55rem); }
.showcase-copy p { color: var(--ink-soft); font-size: 15px; }
.slide-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.slide-tags span { padding: 7px 9px; border: 1px solid var(--border); border-radius: 999px; color: #50616c; background: var(--sky-50); font-size: 10px; font-weight: 700; }
.showcase-controls { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 18px 11px 25px; border-top: 1px solid var(--border); }
.showcase-dots { display: flex; align-items: center; gap: 7px; }
.showcase-dots button { width: 34px; height: 34px; position: relative; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.showcase-dots button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 999px; background: #c2d0d7; transform: translate(-50%,-50%); transition: width 180ms ease, background 180ms ease; }
.showcase-dots button.active::after { width: 22px; background: var(--sky-500); }
.showcase-arrows { display: flex; gap: 7px; }
.showcase-arrows button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); background: var(--white); cursor: pointer; transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
.showcase-arrows button:hover { color: var(--white); border-color: var(--ink); background: var(--ink); transform: translateY(-2px); }
.showcase-arrows svg { width: 20px; height: 20px; stroke-width: 2.2; }
.template-library { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin: 0 18px 18px; padding: 26px 28px; border-radius: 20px; background: linear-gradient(135deg, #edf9ff, #f8fdff); }
.template-library .template-icon { width: 56px; height: 56px; display: grid; place-items: center; color: var(--sky-600); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); }
.template-library .template-icon svg { width: 27px; height: 27px; }
.template-library .slide-kicker { margin-bottom: 5px; }
.template-library h3 { margin-bottom: 6px; font-size: 1.25rem; }
.template-library p { margin-bottom: 0; color: var(--ink-soft); font-size: 12px; }

.worksheet-choice-slide { padding: 34px; display: grid; place-items: center; background: radial-gradient(circle at 16% 16%, rgba(255,255,255,.8), transparent 30%), linear-gradient(145deg, #dff4ff, #c9ecff); }
.choice-board { width: min(100%, 760px); padding: 23px; border: 1px solid rgba(8,119,170,.13); border-radius: 22px; background: rgba(255,255,255,.88); box-shadow: 0 24px 55px rgba(8,82,118,.15); }
.choice-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 0 4px; }
.choice-board-heading span { color: var(--sky-600); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.choice-board-heading strong { font-size: 13px; }
.choice-paths { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 13px; }
.choice-path { min-width: 0; min-height: 340px; display: flex; flex-direction: column; align-items: flex-start; padding: 23px; border: 1px solid var(--border); border-radius: 18px; background: var(--white); }
.choice-path.library-path { background: #f6fcf8; }
.choice-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 20px; color: var(--sky-600); border-radius: 14px; background: var(--sky-100); }
.library-path .choice-icon { color: var(--green-deep); background: var(--green); }
.choice-icon svg { width: 24px; height: 24px; }
.choice-path > small { margin-bottom: 6px; color: var(--sky-600); font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.library-path > small { color: var(--green-deep); }
.choice-path h4 { margin: 0 0 9px; font-size: 18px; line-height: 1.15; letter-spacing: -.025em; }
.choice-path p { margin-bottom: 14px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.file-types { margin-bottom: 17px; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .04em; }
.choice-path > a { min-height: 44px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: auto; padding: 10px 12px; border-radius: 11px; color: var(--white); background: var(--ink); font-size: 10px; font-weight: 800; transition: transform 180ms ease, background 180ms ease; }
.choice-path > a:hover { background: var(--sky-600); transform: translateY(-2px); }
.library-path > a:hover { background: var(--green-deep); }
.choice-or { width: 38px; height: 38px; align-self: center; display: grid; place-items: center; z-index: 2; margin-inline: -4px; color: var(--muted); border: 1px solid var(--border); border-radius: 50%; background: var(--white); font-size: 8px; font-weight: 850; box-shadow: var(--shadow-sm); }

.ai-checker-slide { padding: 42px; display: grid; place-items: center; background: radial-gradient(circle at 20% 20%, #d5f2ff, transparent 35%), linear-gradient(145deg, #e7f8ff, #c9ecff); }
.ai-window { width: min(100%, 700px); overflow: hidden; border: 7px solid var(--ink); border-radius: 22px; background: #f7fafb; box-shadow: 0 26px 55px rgba(8,82,118,.2); transform: rotate(-1deg); }
.ai-window-top { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 20px; border-bottom: 1px solid var(--border); background: var(--white); }
.ai-window-top small, .ai-window-top strong { display: block; }
.ai-window-top small { color: var(--sky-600); font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.ai-window-top strong { font-size: 13px; }
.ai-window-top > span { padding: 7px 10px; color: var(--green-deep); border-radius: 999px; background: var(--green); font-size: 9px; font-weight: 800; }
.ai-window-top i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--green-deep); }
.ai-window-body { display: grid; grid-template-columns: .55fr 1fr; align-items: center; gap: 20px; padding: 24px; }
.ai-score { width: 145px; height: 145px; display: grid; place-content: center; justify-self: center; position: relative; text-align: center; border-radius: 50%; background: conic-gradient(var(--sky-500) 0 92%, #d9e6ec 92% 100%); }
.ai-score::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #f7fafb; }
.ai-score strong, .ai-score span, .ai-score small { position: relative; z-index: 2; }
.ai-score strong { font-size: 42px; line-height: 1; }
.ai-score span { font-weight: 800; }
.ai-score small { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.ai-results { display: grid; gap: 7px; }
.ai-result { min-height: 50px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); }
.ai-result > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; }
.ai-result.correct > span { color: var(--green-deep); background: var(--green); }
.ai-result.review > span { color: var(--peach-deep); background: var(--peach); }
.ai-result svg { width: 15px; height: 15px; stroke-width: 2.5; }
.ai-result p { flex: 1; margin: 0; line-height: 1.25; }
.ai-result small, .ai-result strong { display: block; }
.ai-result small { color: var(--muted); font-size: 7px; }
.ai-result strong, .ai-result b { font-size: 10px; }
.ai-suggestion { padding: 10px 12px; color: #40535f; border-radius: 10px; background: var(--sky-100); }
.ai-suggestion small { color: var(--sky-600); font-size: 7px; font-weight: 850; letter-spacing: .08em; }
.ai-suggestion p { margin: 3px 0 0; font-size: 9px; line-height: 1.4; }
.ai-window-actions { min-height: 53px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 9px 15px; border-top: 1px solid var(--border); background: var(--white); }
.ai-window-actions span, .ai-window-actions b { padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 9px; }
.ai-window-actions b { display: inline-flex; align-items: center; gap: 5px; color: var(--white); border-color: var(--ink); background: var(--ink); }
.ai-window-actions svg { width: 13px; height: 13px; }

.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 70px; margin-bottom: 52px; }
.section-heading-row > div { max-width: 650px; }
.section-heading-row h2 { margin-bottom: 0; }
.section-heading-row > p { max-width: 430px; margin-bottom: 5px; }
.student-section { background: var(--white); }
.student-layout { display: grid; grid-template-columns: 0.38fr 0.62fr; gap: 22px; }
.workflow-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--sky-50); }
.workflow-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.workflow-list li { min-height: 86px; display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: 14px; color: #6b7984; }
.workflow-list li.active { color: var(--ink); background: var(--white); box-shadow: var(--shadow-sm); }
.workflow-list li > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; font-weight: 800; }
.workflow-list li.active > span { color: var(--white); border-color: var(--sky-500); background: var(--sky-500); }
.workflow-list strong, .workflow-list small { display: block; }
.workflow-list strong { color: inherit; font-size: 14px; }
.workflow-list small { font-size: 11px; }
.student-product { overflow: hidden; border: 8px solid #1b2730; border-radius: var(--radius-md); background: #f5f8fa; box-shadow: var(--shadow-lg); }
.student-topbar { min-height: 69px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 22px; background: var(--white); border-bottom: 1px solid var(--border); }
.student-topbar small, .student-topbar strong { display: block; }
.student-topbar small { color: var(--sky-600); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.student-topbar strong { font-size: 14px; }
.student-topbar > span { padding: 7px 10px; border-radius: 10px; background: var(--sky-100); font-size: 11px; font-weight: 800; }
.student-topbar i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sky-500); }
.student-canvas { min-height: 345px; margin: 20px; padding: 24px 32px; border-radius: 14px; background: var(--white); box-shadow: 0 4px 18px rgba(20,50,68,.06); }
.student-canvas p { font-size: 14px; }
.math-problem { margin: 26px 0 0 45px; font-size: 28px; font-weight: 700; letter-spacing: .08em; }
.math-problem span { padding: 2px 8px; color: #176696; border-bottom: 2px solid #176696; font-family: "Bradley Hand", cursive; }
.math-writing { width: 310px; max-width: 100%; margin: 10px 0 0 58px; color: #176696; }
.math-writing path { stroke-width: 2.2; }
.math-writing text { fill: currentColor; stroke: none; font-family: "Bradley Hand", cursive; font-size: 20px; }
.student-tools { min-height: 55px; display: flex; align-items: center; gap: 9px; padding: 9px 16px; color: #64727c; background: var(--white); border-top: 1px solid var(--border); font-size: 10px; }
.student-tools span { padding: 8px 10px; border-radius: 8px; }
.student-tools .selected { color: var(--white); background: var(--sky-500); }
.student-tools b { margin-left: auto; padding: 8px 14px; color: var(--white); background: var(--ink); border-radius: 8px; }
.student-features { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.student-features span { padding: 8px 13px; color: #40515d; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font-size: 12px; font-weight: 650; }

.ai-section { color: var(--white); background: var(--ink); overflow: hidden; }
.ai-section::before { content: ""; position: absolute; width: 460px; height: 460px; left: -160px; bottom: -200px; border-radius: 50%; background: rgba(79,187,233,.09); }
.ai-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 70px; }
.ai-section .section-copy > p { color: #bcc9d0; }
.kicker-dark { color: var(--sky-300); }
.control-note { display: flex; gap: 15px; margin-top: 30px; padding: 18px; border: 1px solid #394750; border-radius: 16px; background: #1b2730; }
.control-note > span { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: #93e2bb; background: rgba(99,221,163,0.1); border-radius: 12px; }
.control-note svg { width: 23px; height: 23px; }
.control-note strong { font-size: 14px; }
.control-note p { margin: 4px 0 0; color: #aebcc4; font-size: 12px; }
.status-flow { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: #aebcc4; font-size: 10px; font-weight: 750; }
.status-flow span { padding: 7px 9px; border: 1px solid #3b4b55; border-radius: 999px; }
.status-flow span:last-child { color: #93e2bb; border-color: rgba(147,226,187,.3); background: rgba(147,226,187,.08); }
.status-flow i { width: 12px; height: 1px; background: #566670; }
.review-panel { color: var(--ink); overflow: hidden; border: 1px solid #4b5b65; border-radius: 26px; background: #f7fafb; box-shadow: 0 35px 80px rgba(0,0,0,.28); }
.review-header { min-height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 20px; background: var(--white); border-bottom: 1px solid var(--border); }
.review-header small, .review-header strong { display: block; }
.review-header small { color: var(--sky-600); font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.review-header strong { font-size: 14px; }
.ready-label { padding: 7px 10px; color: var(--green-deep); background: var(--green); border-radius: 999px; font-size: 9px; font-weight: 800; }
.review-body { display: grid; grid-template-columns: .55fr 1fr; gap: 24px; padding: 28px; }
.score-ring { display: grid; place-items: center; }
.score-ring > div { width: 150px; height: 150px; display: grid; place-content: center; position: relative; text-align: center; border-radius: 50%; background: conic-gradient(var(--sky-500) 0 92%, #dbe9f0 92% 100%); }
.score-ring > div::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #f7fafb; }
.score-ring strong, .score-ring span, .score-ring small { position: relative; z-index: 2; }
.score-ring strong { display: inline; font-size: 43px; line-height: 1; }
.score-ring span { font-weight: 800; }
.score-ring small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.answer-review { display: grid; gap: 8px; }
.answer-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); }
.answer-row > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; }
.answer-row svg { width: 16px; height: 16px; stroke-width: 2.5; }
.answer-row.correct > span { color: var(--green-deep); background: var(--green); }
.answer-row.incorrect > span { color: var(--peach-deep); background: var(--peach); }
.answer-row div { flex: 1; }
.answer-row small, .answer-row strong { display: block; }
.answer-row small { color: var(--muted); font-size: 8px; }
.answer-row strong { font-size: 11px; }
.answer-row b { font-size: 11px; }
.feedback-box { padding: 12px; color: #3f525e; border-radius: 12px; background: var(--sky-100); }
.feedback-box small { color: var(--sky-600); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.feedback-box p { margin: 4px 0 0; font-size: 10px; line-height: 1.5; }
.review-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 20px; background: var(--white); border-top: 1px solid var(--border); }
.review-actions button { min-height: 38px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 9px; color: #40515d; background: var(--white); font-size: 10px; font-weight: 750; }
.review-actions .approve { display: inline-flex; align-items: center; gap: 6px; color: var(--white); border-color: var(--ink); background: var(--ink); }
.review-actions svg { width: 14px; height: 14px; }

.progress-section { background: var(--sky-50); }
.progress-grid { grid-template-columns: 1.1fr .9fr; }
.progress-board { overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: var(--white); box-shadow: var(--shadow-lg); }
.board-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 21px 24px; border-bottom: 1px solid var(--border); }
.board-header small, .board-header strong { display: block; }
.board-header small { color: var(--sky-600); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.board-header strong { font-size: 14px; }
.board-header > span { padding: 6px 9px; color: var(--muted); background: #f0f5f7; border-radius: 8px; font-size: 9px; font-weight: 750; }
.chart-wrap { height: 300px; display: grid; grid-template-columns: 45px 1fr; padding: 30px 35px 15px 20px; }
.chart-labels { height: 218px; display: flex; flex-direction: column; justify-content: space-between; color: #8b98a1; font-size: 9px; }
.bar-chart { height: 218px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 30px; padding: 0 18px; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(to bottom, transparent 0, transparent 72px, #edf3f6 73px); }
.bar-item { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bar { width: 55px; max-width: 85%; position: relative; display: block; border-radius: 10px 10px 3px 3px; background: linear-gradient(180deg, var(--sky-400), var(--sky-600)); }
.bar b { position: absolute; top: -29px; left: 50%; transform: translateX(-50%); font-size: 11px; }
.bar-68 { height: 68%; opacity: .55; }
.bar-81 { height: 81%; opacity: .75; }
.bar-92 { height: 92%; }
.bar-item small { position: absolute; bottom: -30px; color: var(--muted); white-space: nowrap; font-size: 9px; }
.best-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
.best-row > span { padding: 17px 24px; border-right: 1px solid var(--border); }
.best-row > span:last-child { border-right: 0; }
.best-row small, .best-row strong { display: block; }
.best-row small { color: var(--muted); font-size: 8px; letter-spacing: .08em; }
.best-row strong { color: var(--sky-600); font-size: 14px; }
.progress-points { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 28px; }
.progress-points span { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); color: #3f515d; font-size: 11px; font-weight: 700; }
.progress-points svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--sky-600); }

.how-section { background: var(--white); }
.steps-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; }
.steps-grid li { min-height: 310px; padding: 25px; position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); transition: transform 200ms ease, box-shadow 200ms ease; }
.steps-grid li:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.step-number { position: absolute; right: 20px; top: 16px; color: #d9e8ef; font-size: 34px; font-weight: 850; letter-spacing: -.05em; }
.step-icon { width: 55px; height: 55px; display: grid; place-items: center; margin: 62px 0 28px; color: var(--sky-600); border-radius: 17px; background: var(--sky-100); }
.steps-grid li:nth-child(2) .step-icon { color: var(--peach-deep); background: var(--peach); }
.steps-grid li:nth-child(3) .step-icon { color: #8b6a00; background: var(--yellow); }
.steps-grid li:nth-child(4) .step-icon { color: var(--green-deep); background: var(--green); }
.step-icon svg { width: 27px; height: 27px; }
.steps-grid p { margin-bottom: 0; color: var(--ink-soft); font-size: 14px; }

.benefits-section { background: linear-gradient(135deg, #f1faff, #e1f5ff); }
.benefit-switch { width: fit-content; margin: 0 auto 45px; padding: 5px; display: flex; gap: 3px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.7); }
.benefit-switch button { min-height: 44px; padding: 10px 22px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 750; cursor: pointer; transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.benefit-switch button.active { color: var(--white); background: var(--ink); box-shadow: 0 6px 16px rgba(16,24,32,.16); }
.benefit-panel { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 80px; }
.benefit-panel:not(.active) { display: none; }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; color: var(--sky-600); font-weight: 800; }
.text-link:hover span { transform: translateX(4px); }
.text-link span { transition: transform 180ms ease; }
.benefit-list { margin: 0; padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; border: 1px solid rgba(8,119,170,.12); border-radius: var(--radius-md); background: rgba(255,255,255,.72); list-style: none; box-shadow: var(--shadow-sm); }
.benefit-list li { min-height: 64px; display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 12px; background: var(--white); color: #334650; font-size: 12px; font-weight: 700; }
.benefit-list li span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: var(--green-deep); background: var(--green); }
.benefit-list svg { width: 15px; height: 15px; stroke-width: 2.5; }

.pricing-section { padding-bottom: 48px; }
.pricing-card { min-height: 280px; padding: 55px 65px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 50px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fffdf8; box-shadow: var(--shadow-sm); }
.pricing-card h2 { max-width: 640px; font-size: clamp(2.1rem, 3vw, 3.2rem); }
.pricing-card p { max-width: 640px; margin-bottom: 0; color: var(--ink-soft); }
.pricing-action { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.no-card { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--green-deep); font-size: 12px; font-weight: 750; }
.no-card svg { width: 18px; height: 18px; }

.final-cta { padding-top: 48px; }
.cta-card { min-height: 490px; display: grid; place-items: center; position: relative; overflow: hidden; border-radius: 38px; color: var(--white); background: linear-gradient(135deg, #0877aa, #0d8fc6 55%, #42b9e6); text-align: center; }
.cta-card::before, .cta-card::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.cta-card::before { width: 500px; height: 500px; left: -210px; bottom: -290px; }
.cta-card::after { width: 350px; height: 350px; right: -120px; top: -170px; }
.cta-copy { max-width: 750px; padding: 70px 20px; position: relative; z-index: 2; }
.cta-copy h2 { margin-bottom: 18px; }
.cta-copy p { max-width: 660px; margin: 0 auto 30px; color: #e5f7ff; font-size: 18px; }
.cta-copy .hero-actions { justify-content: center; }
.button-light { color: var(--ink); border-color: var(--white); background: var(--white); box-shadow: 0 7px 0 rgba(0,0,0,.12); }
.payment-note-light { margin: 20px auto 0; color: var(--white); }
.cta-dots { position: absolute; right: 65px; bottom: 50px; width: 90px; height: 90px; opacity: .3; background-image: radial-gradient(var(--white) 2px, transparent 2px); background-size: 15px 15px; }

.site-footer { padding: 78px 0 28px; color: var(--white); background: var(--ink); }
.footer-main { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; padding-bottom: 60px; }
.footer-brand { max-width: 365px; }
.footer-logo { width: fit-content; height: 64px; display: flex; align-items: center; margin-bottom: 18px; }
.footer-logo img { width: 170px; height: 48px; object-fit: contain; }
.footer-logo img { filter: brightness(0) invert(1); }
.footer-brand p { color: #aebcc4; }
.footer-brand > a { min-height: 44px; display: inline-flex; align-items: center; color: var(--sky-300); font-weight: 750; }
.footer-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; }
.footer-links div { display: flex; flex-direction: column; gap: 11px; }
.footer-links strong { margin-bottom: 6px; font-size: 13px; }
.footer-links a { min-height: 44px; display: flex; align-items: center; color: #aebcc4; font-size: 13px; transition: color 160ms ease; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 25px; color: #7f909a; border-top: 1px solid #2c3942; font-size: 11px; }
.footer-bottom p { margin: 0; }

/* Interior pages */
.subpage-main { padding-top: 80px; }
.page-hero { padding: 92px 0 78px; overflow: hidden; background: radial-gradient(circle at 88% 14%, rgba(255,231,138,.72), transparent 22%), radial-gradient(circle at 8% 88%, rgba(201,243,220,.7), transparent 24%), linear-gradient(135deg, #f8fdff, var(--sky-100)); }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 72px; }
.page-hero-copy { max-width: 670px; }
.page-hero h1 { margin-bottom: 22px; font-size: clamp(3rem, 5.5vw, 5rem); }
.page-hero h1 em { color: var(--sky-600); font-style: normal; }
.page-lead { max-width: 650px; margin-bottom: 30px; color: var(--ink-soft); font-size: 19px; line-height: 1.7; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 25px; color: var(--sky-600); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.page-hero-visual { min-height: 400px; position: relative; display: grid; place-items: center; }
.hero-panel { width: min(100%, 500px); padding: 24px; border: 1px solid rgba(8,119,170,.13); border-radius: 30px; background: rgba(255,255,255,.86); box-shadow: var(--shadow-lg); transform: rotate(1.5deg); }
.hero-panel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.hero-panel-top strong { font-size: 14px; }
.hero-panel-top span { padding: 5px 9px; border-radius: 99px; color: var(--green-deep); background: var(--green); font-size: 10px; font-weight: 800; }
.hero-panel-card { min-height: 88px; display: flex; align-items: center; gap: 15px; margin-top: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 17px; background: var(--white); }
.hero-panel-card > span, .page-icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--sky-600); background: var(--sky-100); }
.hero-panel-card:nth-child(3) > span { color: var(--green-deep); background: var(--green); }
.hero-panel-card:nth-child(4) > span { color: var(--peach-deep); background: var(--peach); }
.hero-panel-card svg, .page-icon svg { width: 24px; height: 24px; }
.hero-panel-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.hero-panel-card strong { display: block; color: var(--ink); font-size: 14px; }
.page-section { padding: 96px 0; }
.page-section-soft { background: var(--sky-50); }
.page-section-dark { color: var(--white); background: var(--ink); }
.page-heading { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.page-heading h2 { margin-bottom: 16px; font-size: clamp(2.25rem, 4vw, 3.7rem); }
.page-heading p { margin-bottom: 0; color: var(--muted); font-size: 17px; }
.page-section-dark .page-heading p { color: #b8c4ca; }
.page-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.page-card { padding: 30px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.page-card .page-icon { margin-bottom: 24px; }
.page-card h3 { font-size: 1.25rem; }
.page-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.page-card-grid.four { grid-template-columns: repeat(4, 1fr); }
.page-card-grid.two { grid-template-columns: repeat(2, 1fr); }
.page-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 75px; }
.page-copy p { color: var(--muted); font-size: 17px; }
.page-copy .check-list { margin-top: 26px; }
.metric-board { padding: 28px; border: 1px solid var(--border); border-radius: 28px; background: var(--white); box-shadow: var(--shadow-lg); }
.metric-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.metric-row:last-child { border-bottom: 0; }
.metric-row p { margin: 0; color: var(--muted); font-size: 13px; }
.metric-row strong { display: block; color: var(--ink); }
.metric-row > span { align-self: center; padding: 7px 10px; border-radius: 10px; color: var(--green-deep); background: var(--green); font-size: 12px; font-weight: 800; }
.worksheet-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.worksheet-gallery figure { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--white); box-shadow: var(--shadow-sm); }
.worksheet-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.worksheet-gallery figcaption { padding: 16px 18px; font-weight: 750; }
.step-list { counter-reset: steps; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0; list-style: none; }
.step-list li { counter-increment: steps; min-height: 280px; padding: 30px 26px; border: 1px solid var(--border); border-radius: 22px; background: var(--white); }
.step-list li::before { content: "0" counter(steps); display: block; margin-bottom: 44px; color: var(--sky-500); font-size: 13px; font-weight: 850; letter-spacing: .1em; }
.step-list p { margin: 0; color: var(--muted); font-size: 14px; }
.role-label { display: inline-flex; margin-bottom: 15px; padding: 6px 10px; border-radius: 8px; color: var(--sky-600); background: var(--sky-100); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.audience-card { min-height: 320px; position: relative; overflow: hidden; }
.audience-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -25px; bottom: -25px; border-radius: 50%; background: var(--sky-100); }
.audience-card:nth-child(2)::after { background: var(--green); }
.audience-card:nth-child(3)::after { background: var(--peach); }
.price-card { max-width: 760px; margin-inline: auto; padding: 46px; border: 1px solid var(--border); border-radius: 30px; background: var(--white); box-shadow: var(--shadow-lg); }
.price-card-top { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 30px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.price-card h2 { margin: 5px 0 8px; font-size: 2.4rem; }
.price-pill { padding: 8px 12px; border-radius: 99px; color: var(--green-deep); background: var(--green); font-size: 12px; font-weight: 850; white-space: nowrap; }
.price-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 25px; margin: 0 0 32px; padding: 0; list-style: none; }
.price-features li { display: flex; gap: 10px; color: var(--ink-soft); font-size: 14px; }
.price-features li::before { content: "✓"; color: var(--green-deep); font-weight: 900; }
.faq-list { max-width: 850px; margin-inline: auto; }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font-weight: 750; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--sky-100); font-size: 20px; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 720px; padding: 0 0 25px; color: var(--muted); }
.help-search { max-width: 680px; display: flex; gap: 10px; margin-top: 28px; padding: 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); }
.help-search input { min-width: 0; flex: 1; padding: 10px 12px; border: 0; outline: 0; font: inherit; }
.contact-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 35px; }
.contact-stack { display: grid; gap: 18px; }
.contact-form { padding: 34px; border: 1px solid var(--border); border-radius: 26px; background: var(--white); box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: grid; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 750; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); background: var(--white); font: inherit; }
.form-field textarea { min-height: 150px; resize: vertical; }
.contact-form .button { margin-top: 20px; }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 760px); align-items: start; justify-content: center; gap: 65px; }
.legal-nav { position: sticky; top: 110px; display: grid; gap: 9px; padding: 20px; border: 1px solid var(--border); border-radius: 18px; }
.legal-nav a { color: var(--muted); font-size: 13px; }
.legal-nav a:hover { color: var(--sky-600); }
.legal-content section { margin-bottom: 42px; scroll-margin-top: 110px; }
.legal-content h2 { margin-bottom: 12px; font-size: 1.65rem; }
.legal-content h3 { margin-top: 25px; font-size: 1.1rem; }
.legal-content p, .legal-content li { color: var(--ink-soft); }
.legal-content a { color: var(--sky-600); text-decoration: underline; }
.page-cta { padding: 82px 0; text-align: center; background: var(--ink); color: var(--white); }
.page-cta h2 { max-width: 760px; margin: 0 auto 16px; }
.page-cta p { max-width: 650px; margin: 0 auto 28px; color: #b8c4ca; }
.page-cta .button { color: var(--ink); background: var(--white); border-color: var(--white); box-shadow: none; }
.site-nav a[aria-current="page"]::after { right: 0; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Desktop story homepage */
.d-story-hero { min-height: 760px; position: relative; overflow: hidden; padding: 170px 0 105px; background: radial-gradient(circle at 90% 10%, rgba(255,231,138,.5), transparent 25%), linear-gradient(140deg, #f8fdff, var(--sky-100)); }
.d-story-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 70px; }
.d-story-hero-copy { max-width: 650px; }
.d-story-hero h1 { margin-bottom: 24px; font-size: clamp(4rem, 6vw, 6.2rem); }
.d-story-hero-copy > p { max-width: 620px; margin-bottom: 30px; color: var(--ink-soft); font-size: 19px; line-height: 1.75; }
.d-story-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.d-story-hero-visual { min-height: 455px; position: relative; display: grid; grid-template-columns: .72fr 52px 1.28fr; align-items: center; }
.d-paper-stack { height: 260px; position: relative; }
.d-paper-stack span { width: 190px; height: 125px; position: absolute; display: flex; align-items: start; padding: 22px; border: 1px solid var(--border); border-radius: 13px; color: var(--muted); background: var(--white); box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 800; }
.d-paper-stack span::after { content: ""; position: absolute; inset: 55px 20px auto; height: 32px; opacity: .7; background: repeating-linear-gradient(to bottom, var(--border) 0 2px, transparent 2px 10px); }
.d-paper-stack span:nth-child(1) { top: 8px; left: 0; transform: rotate(-7deg); }
.d-paper-stack span:nth-child(2) { top: 68px; left: 20px; transform: rotate(3deg); }
.d-paper-stack span:nth-child(3) { top: 127px; left: -6px; transform: rotate(-2deg); }
.d-transform-arrow { width: 48px; height: 48px; display: grid; place-items: center; z-index: 2; border-radius: 50%; color: var(--sky-600); background: var(--white); box-shadow: var(--shadow-sm); }
.d-transform-arrow svg { width: 23px; height: 23px; }
.d-organized-card { min-width: 0; padding: 28px; border: 1px solid rgba(8,119,170,.18); border-radius: 28px; background: rgba(255,255,255,.93); box-shadow: var(--shadow-lg); transform: rotate(1deg); }
.d-organized-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.d-organized-top > span { padding: 6px 9px; border-radius: 99px; color: var(--green-deep); background: var(--green); font-size: 10px; font-weight: 850; }
.d-organized-row { min-height: 86px; display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 15px; border: 1px solid var(--border); border-radius: 17px; }
.d-organized-row i { width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--sky-600); background: var(--sky-100); }
.d-organized-row i svg { width: 22px; height: 22px; }
.d-organized-row p, .d-organized-row small { margin: 0; }
.d-organized-row strong, .d-organized-row small { display: block; }
.d-organized-row strong { font-size: 14px; }
.d-organized-row small { color: var(--muted); font-size: 11px; }

.d-proof { border-block: 1px solid var(--border); background: var(--white); }
.d-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.d-proof-grid > div { min-height: 105px; display: flex; flex-direction: column; justify-content: center; padding: 20px 32px; border-right: 1px solid var(--border); }
.d-proof-grid > div:last-child { border: 0; }
.d-proof-grid strong { font-size: 16px; }
.d-proof-grid span { color: var(--muted); font-size: 12px; }

.d-story-section { padding: 112px 0; }
.d-story-heading { max-width: 780px; margin: 0 auto 52px; text-align: center; }
.d-story-heading h2 { margin-bottom: 17px; }
.d-story-heading > p { margin: 0 auto; color: var(--muted); font-size: 18px; }
.d-problem { background: var(--white); }
.d-problem-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.d-problem-grid li { min-height: 255px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border: 1px solid var(--border); border-radius: 21px; background: var(--sky-50); }
.d-problem-grid li > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: #91401e; background: var(--peach); }
.d-problem-grid li:nth-child(even) > span { color: var(--sky-600); background: var(--sky-100); }
.d-problem-grid svg { width: 24px; height: 24px; }
.d-problem-grid strong { display: block; margin-bottom: 5px; font-size: 17px; line-height: 1.25; }
.d-problem-grid p { margin: 0; color: var(--muted); font-size: 13px; }

.d-ai { color: var(--white); background: var(--ink); }
.d-ai-grid { display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 90px; }
.d-ai-copy .kicker { color: var(--sky-300); }
.d-ai-copy h2 { max-width: 650px; }
.d-ai-copy > p { max-width: 650px; color: #b7c4cb; font-size: 18px; }
.d-ai-copy > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0; padding: 0; list-style: none; }
.d-ai-copy > ul li { min-height: 60px; display: flex; align-items: center; padding: 13px 15px; border: 1px solid #33434c; border-radius: 14px; color: #d4dee3; font-size: 13px; }
.d-ai-copy > ul li::before { content: "✓"; margin-right: 9px; color: var(--sky-300); font-weight: 900; }
.d-control-note { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 14px; padding: 18px; border: 1px solid #35464f; border-radius: 17px; }
.d-control-note svg { width: 30px; height: 30px; color: var(--green); }
.d-control-note p { margin: 0; color: #b7c4cb; font-size: 13px; }
.d-control-note strong { display: block; color: var(--white); font-size: 14px; }
.d-ai-panel { padding: 30px; border-radius: 28px; color: var(--ink); background: var(--white); box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.d-ai-panel-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--border); font-weight: 800; }
.d-ai-panel-top b { padding: 6px 10px; border-radius: 99px; color: var(--green-deep); background: var(--green); font-size: 10px; }
.d-score { width: 155px; height: 155px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 27px auto; border: 13px solid var(--sky-200); border-top-color: var(--sky-500); border-radius: 50%; }
.d-score strong { font-size: 38px; line-height: 1; }
.d-score small { margin-top: 6px; color: var(--muted); font-size: 9px; }
.d-answer { min-height: 64px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 13px; margin-top: 10px; padding: 12px 15px; border-radius: 15px; background: var(--sky-50); }
.d-answer svg { width: 24px; height: 24px; }
.d-answer.correct svg { color: var(--green-deep); }
.d-answer.review svg { color: #9a5b00; }
.d-answer p { margin: 0; color: var(--muted); font-size: 11px; }
.d-answer strong { display: block; color: var(--ink); font-size: 13px; }
.d-ai-panel button { width: 100%; min-height: 52px; margin-top: 20px; border: 0; border-radius: 13px; color: var(--white); background: var(--ink); font-weight: 800; cursor: pointer; }

.d-experience { background: var(--white); }
.d-experience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.d-experience-grid article { min-height: 360px; padding: 31px; border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-sm); }
.d-experience-grid article > span { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 48px; border-radius: 16px; color: var(--sky-600); background: var(--sky-100); }
.d-experience-grid article:nth-child(2) > span { color: var(--green-deep); background: var(--green); }
.d-experience-grid article:nth-child(3) > span { color: #765700; background: var(--yellow); }
.d-experience-grid svg { width: 26px; height: 26px; }
.d-experience-grid h3 { font-size: 23px; }
.d-experience-grid ul { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.d-experience-grid li { display: flex; gap: 9px; color: var(--ink-soft); font-size: 13px; }
.d-experience-grid li::before { content: "✓"; color: var(--green-deep); font-weight: 900; }

.d-library { overflow: hidden; background: var(--sky-50); }
.d-library-heading .kicker { gap: 8px; }
.d-library-heading mark { padding: 5px 9px; border-radius: 7px; color: #5e4700; background: var(--yellow); font: inherit; letter-spacing: inherit; }
.d-filter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 20px; }
.d-filter-row span { min-height: 42px; display: flex; align-items: center; padding: 0 16px; border: 1px solid var(--border); border-radius: 99px; color: var(--ink-soft); background: var(--white); font-size: 12px; font-weight: 750; }
.d-library-actions { max-width: 650px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 auto 35px; }
.d-library-actions span { min-height: 46px; display: grid; place-items: center; border-radius: 12px; color: var(--sky-600); background: var(--sky-100); font-size: 11px; font-weight: 850; }
.d-worksheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.d-worksheet-grid article { display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: var(--white); box-shadow: var(--shadow-sm); }
.d-worksheet-grid img { width: 100%; height: 100%; min-height: 280px; object-fit: contain; background: var(--sky-100); }
.d-worksheet-grid article > div { display: flex; flex-direction: column; justify-content: center; padding: 28px; }
.d-worksheet-grid small { margin-bottom: 8px; color: var(--sky-600); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.d-worksheet-grid h3 { font-size: 22px; }
.d-worksheet-grid p { margin: 0; color: var(--muted); font-size: 13px; }

.d-progress { background: var(--white); }
.d-progress-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; gap: 22px; }
.d-progress-card, .d-progress-detail { padding: 30px; border: 1px solid var(--border); border-radius: 26px; background: var(--white); box-shadow: var(--shadow-sm); }
.d-progress-top { display: flex; justify-content: space-between; gap: 20px; }
.d-progress-top small, .d-progress-top strong { display: block; }
.d-progress-top small { color: var(--muted); font-size: 11px; }
.d-progress-top strong { font-size: 17px; }
.d-progress-top > span { align-self: center; padding: 7px 10px; border-radius: 10px; color: var(--green-deep); background: var(--green); font-size: 13px; font-weight: 850; }
.d-bars { height: 250px; display: flex; align-items: end; justify-content: space-around; gap: 18px; margin-top: 30px; padding: 0 18px 30px; border-bottom: 1px solid var(--border); }
.d-bars i { width: 54px; height: var(--h); position: relative; border-radius: 12px 12px 4px 4px; background: linear-gradient(var(--sky-400), var(--sky-600)); }
.d-bars i:last-child { background: linear-gradient(#4cc88d, var(--green-deep)); }
.d-bars span { position: absolute; top: calc(100% + 10px); left: 50%; color: var(--muted); font-size: 10px; font-style: normal; transform: translateX(-50%); white-space: nowrap; }
.d-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; border: 1px solid var(--border); border-radius: 16px; }
.d-metrics span { min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--border); }
.d-metrics span:last-child { border: 0; }
.d-metrics small { color: var(--muted); font-size: 10px; }
.d-metrics strong { font-size: 18px; }
.d-progress-detail { display: flex; flex-direction: column; gap: 12px; }
.d-progress-detail article { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; border: 1px solid var(--border); border-radius: 17px; }
.d-progress-detail article strong, .d-progress-detail article small { display: block; }
.d-progress-detail article small { color: var(--muted); font-size: 11px; }
.d-progress-detail article b { color: var(--sky-600); font-size: 20px; }
.d-progress-detail ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: auto 0 0; padding: 0; list-style: none; }
.d-progress-detail li { min-height: 70px; display: flex; align-items: center; padding: 13px; border-radius: 14px; color: var(--ink-soft); background: var(--sky-50); font-size: 11px; }
.d-progress-detail li::before { content: "✓"; margin-right: 8px; color: var(--green-deep); font-weight: 900; }

.d-requirements { background: var(--sky-50); }
.d-requirements-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; margin: 0; padding: 0; list-style: none; }
.d-requirements-grid li { min-height: 220px; padding: 26px; border: 1px solid var(--border); border-radius: 22px; background: var(--white); }
.d-requirements-grid li > span { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 42px; border-radius: 15px; color: var(--sky-600); background: var(--sky-100); }
.d-requirements-grid svg { width: 25px; height: 25px; }
.d-requirements-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.d-requirements-grid strong { display: block; margin-bottom: 7px; color: var(--ink); font-size: 17px; }

.d-final { padding: 105px 0; color: var(--white); background: var(--sky-600); text-align: center; }
.d-final .kicker { color: var(--sky-100); }
.d-final h2 { max-width: 900px; margin-inline: auto; }
.d-final p { max-width: 760px; margin: 0 auto; color: #d8f2ff; font-size: 18px; }
.d-final-actions { display: flex; justify-content: center; gap: 13px; margin-top: 32px; }
.d-button-light { color: var(--ink); background: var(--white); border-color: var(--white); box-shadow: none; }
.d-button-outline { color: var(--white); background: transparent; border-color: rgba(255,255,255,.72); box-shadow: none; }
.d-final > .container > small { display: block; margin-top: 15px; color: var(--sky-100); font-weight: 750; }

@media (max-width: 1080px) {
  .site-nav { gap: 18px; }
  .site-nav > a:not(.button) { font-size: 13px; }
  .brand-logo { width: 150px; }
  .hero-grid { gap: 25px; }
  .tablet { width: 500px; }
  .split-grid, .progress-grid { gap: 55px; }
  .paper-stack { left: 25px; }
  .digital-relief { right: 18px; }
  .ai-grid { gap: 45px; }
}

@media (max-width: 920px) {
  .section { padding: 88px 0; }
  .menu-toggle { display: block; position: relative; z-index: 2; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 80px 0 auto; height: calc(100dvh - 80px); display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 26px 20px 40px; background: rgba(255,255,255,.98); transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform 240ms ease-out, opacity 200ms ease-out, visibility 200ms; }
  .site-nav.open { transform: translateX(0); opacity: 1; visibility: visible; }
  .site-nav > a:not(.button) { min-height: 52px; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--border); font-size: 17px; }
  .site-nav > a:not(.button)::after { display: none; }
  .site-nav .sign-in { margin: 12px 0 8px; justify-content: center; border: 1px solid var(--border); border-radius: 12px; }
  .site-nav .button { width: 100%; min-height: 52px; }
  .hero { padding-top: 140px; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { max-width: 760px; margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .hero-note { justify-content: center; }
  .hero-visual { width: min(100%, 660px); margin: 20px auto 0; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-grid > div { justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--border); }
  .proof-grid > div:last-child { border-bottom: 0; }
  .split-grid, .progress-grid, .ai-grid, .benefit-panel { grid-template-columns: 1fr; }
  .problem-visual { width: min(100%, 650px); margin-inline: auto; }
  .problem-section .section-copy { max-width: 700px; margin-inline: auto; }
  .showcase-tabs { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .showcase-tabs::-webkit-scrollbar { display: none; }
  .showcase-tabs button { min-width: 135px; flex: 1 0 auto; scroll-snap-align: start; }
  .showcase-slide { grid-template-columns: 1fr; }
  .showcase-image { min-height: 470px; }
  .showcase-copy { min-height: 300px; padding: 38px 35px; }
  .slide-count { margin-bottom: 35px; }
  .template-library { grid-template-columns: auto 1fr; }
  .template-library .button { grid-column: 2; width: fit-content; }
  .section-heading-row { align-items: start; flex-direction: column; gap: 15px; }
  .student-layout { grid-template-columns: 1fr; }
  .workflow-list { grid-template-columns: repeat(2, 1fr); }
  .ai-section .section-copy { max-width: 700px; }
  .review-panel { width: min(100%, 720px); margin-inline: auto; }
  .progress-board { order: 2; width: min(100%, 720px); margin-inline: auto; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .benefit-panel { gap: 35px; }
  .pricing-card { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: .7fr 1.3fr; gap: 45px; }
  .subpage-main { padding-top: 80px; }
  .page-hero-grid, .page-split, .contact-grid { grid-template-columns: 1fr; }
  .page-hero-grid { gap: 35px; text-align: center; }
  .page-hero-copy, .page-lead { margin-inline: auto; }
  .breadcrumb, .page-hero-actions { justify-content: center; }
  .page-hero-visual { min-height: 340px; }
  .page-card-grid.four, .step-list, .worksheet-gallery { grid-template-columns: repeat(2, 1fr); }
  .page-card-grid { grid-template-columns: 1fr 1fr; }
  .legal-layout { grid-template-columns: 1fr; gap: 35px; }
  .legal-nav { position: static; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .section { padding: 72px 0; }
  .site-header { height: 72px; }
  .site-nav { top: 72px; height: calc(100dvh - 72px); }
  .brand { height: 52px; }
  .brand-logo { width: 142px; height: 44px; }
  .hero { min-height: 0; padding-top: 124px; padding-bottom: 80px; }
  .hero::after { height: 50px; }
  .eyebrow { font-size: 10px; }
  h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  h1 span::after { height: 6px; bottom: 2px; }
  h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .hero-lead { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .hero-note { text-align: left; }
  .hero-visual { min-height: 390px; margin-top: 28px; }
  .tablet { width: 100%; padding: 7px; border-radius: 22px; transform: rotate(0); box-shadow: 0 24px 50px rgba(11,74,104,.23), 0 6px 0 #101820; }
  .tablet-screen { border-radius: 14px; }
  .app-bar { height: 34px; padding: 0 10px; }
  .mini-brand img { width: 48px; height: 19px; }
  .worksheet-title { padding: 11px 13px 7px; }
  .worksheet-title strong { font-size: 12px; }
  .question-card { min-height: 196px; margin: 0 12px; padding: 14px; }
  .question-card p { font-size: 10px; }
  .question-number { width: 24px; height: 24px; font-size: 10px; }
  .fraction-shapes { padding: 9px 0; gap: 5px; }
  .fraction-shapes span { width: 36px; height: 36px; border-radius: 7px; }
  .handwritten-answer { margin-top: 6px; font-size: 13px; }
  .tool-bar { height: 42px; padding: 5px 10px; }
  .tool-bar button { min-width: 31px; height: 31px; }
  .floating-card { padding: 8px 10px; }
  .mini-icon { width: 29px; height: 29px; }
  .floating-score { right: -5px; top: 2px; }
  .floating-saved { left: -5px; bottom: 0; }
  .family-illustration { transform: scale(.78); transform-origin: 50% 0; }
  .doodle-spark { display: none; }
  .proof-grid > div { min-height: 90px; padding: 16px 20px; }
  .problem-visual { min-height: 450px; }
  .paper-stack { left: 26px; top: 40px; transform: scale(.8); transform-origin: left top; }
  .digital-relief { width: 218px; right: 16px; bottom: 24px; }
  .worksheet-showcase { border-radius: 22px; }
  .showcase-tabs button { min-width: 112px; min-height: 46px; padding-inline: 10px; font-size: 12px; }
  .showcase-stage, .showcase-slide { min-height: 0; }
  .showcase-image { min-height: 270px; }
  .worksheet-choice-slide { min-height: 620px; padding: 14px; }
  .choice-board { padding: 14px; border-radius: 18px; }
  .choice-board-heading { align-items: flex-start; flex-direction: column; gap: 2px; margin-bottom: 12px; }
  .choice-paths { grid-template-columns: 1fr; gap: 8px; }
  .choice-path { min-height: 238px; padding: 17px; }
  .choice-icon { width: 42px; height: 42px; margin-bottom: 13px; }
  .choice-path h4 { font-size: 17px; }
  .choice-path p { margin-bottom: 9px; }
  .file-types { margin-bottom: 11px; }
  .choice-or { width: 34px; height: 34px; justify-self: center; margin-block: -4px; }
  .showcase-copy { min-height: 325px; padding: 30px 22px; }
  .slide-count { margin-bottom: 28px; }
  .showcase-copy h3 { font-size: 1.85rem; }
  .showcase-copy p { font-size: 14px; }
  .showcase-controls { min-height: 66px; padding: 9px 10px 9px 15px; }
  .showcase-dots { gap: 1px; }
  .showcase-dots button { width: 28px; height: 38px; }
  .showcase-arrows button { width: 44px; height: 44px; }
  .template-library { grid-template-columns: 1fr; margin: 0 10px 10px; padding: 23px 20px; }
  .template-library .button { grid-column: auto; width: 100%; }
  .ai-checker-slide { min-height: 420px; padding: 14px; }
  .ai-window { border-width: 4px; border-radius: 16px; transform: none; }
  .ai-window-top { min-height: 58px; padding: 11px 12px; }
  .ai-window-top > span { max-width: 92px; text-align: center; }
  .ai-window-body { grid-template-columns: 1fr; gap: 14px; padding: 15px; }
  .ai-score { width: 105px; height: 105px; }
  .ai-score strong { font-size: 32px; }
  .ai-result { min-height: 42px; padding: 6px 8px; }
  .ai-window-actions { min-height: 45px; }
  .workflow-list { grid-template-columns: 1fr; }
  .workflow-list li { min-height: 74px; }
  .student-product { border-width: 5px; }
  .student-canvas { min-height: 270px; margin: 10px; padding: 18px; }
  .math-problem { margin-left: 12px; font-size: 21px; }
  .math-writing { margin-left: 10px; }
  .student-tools span:nth-child(2), .student-tools span:nth-child(3) { display: none; }
  .status-flow { align-items: flex-start; flex-direction: column; }
  .status-flow i { width: 1px; height: 8px; margin-left: 22px; }
  .review-body { grid-template-columns: 1fr; }
  .score-ring > div { width: 125px; height: 125px; }
  .review-actions { justify-content: stretch; }
  .review-actions button { flex: 1; }
  .chart-wrap { padding-right: 15px; padding-left: 12px; }
  .bar-chart { gap: 10px; padding-inline: 6px; }
  .bar { width: 42px; }
  .best-row { grid-template-columns: 1fr; }
  .best-row > span { border-right: 0; border-bottom: 1px solid var(--border); }
  .best-row > span:last-child { border-bottom: 0; }
  .progress-points { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid li { min-height: 250px; }
  .step-icon { margin-top: 42px; }
  .benefit-switch { width: 100%; }
  .benefit-switch button { flex: 1; padding-inline: 12px; }
  .benefit-list { grid-template-columns: 1fr; padding: 14px; }
  .pricing-card { padding: 38px 24px; }
  .final-cta { padding-top: 20px; }
  .cta-card { min-height: 540px; border-radius: 28px; }
  .cta-copy p { font-size: 16px; }
  .site-footer { padding-top: 62px; }
  .footer-main { grid-template-columns: 1fr; gap: 45px; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 35px 25px; }
  .footer-links a { min-height: 44px; display: flex; align-items: center; }
  .footer-brand > a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-bottom { flex-direction: column; }
  .subpage-main { padding-top: 72px; }
  .page-hero { padding: 64px 0 58px; }
  .page-hero h1 { font-size: clamp(2.6rem, 13vw, 4rem); }
  .page-lead { font-size: 16px; }
  .page-hero-actions { align-items: stretch; flex-direction: column; }
  .page-hero-actions .button { width: 100%; }
  .page-hero-visual { min-height: 310px; }
  .hero-panel { padding: 16px; border-radius: 22px; transform: none; }
  .page-section { padding: 72px 0; }
  .page-card-grid, .page-card-grid.four, .page-card-grid.two, .step-list, .worksheet-gallery { grid-template-columns: 1fr; }
  .page-card { padding: 25px; }
  .step-list li { min-height: 230px; }
  .price-card { padding: 28px 22px; }
  .price-card-top { flex-direction: column; }
  .price-features { grid-template-columns: 1fr; }
  .help-search { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .contact-form { padding: 24px 18px; }
  .legal-nav { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .d-story-hero-grid { gap: 40px; }
  .d-story-hero-visual { grid-template-columns: .68fr 44px 1.32fr; }
  .d-paper-stack span { width: 165px; }
  .d-problem-grid { grid-template-columns: repeat(3, 1fr); }
  .d-ai-grid { gap: 50px; }
  .d-worksheet-grid { grid-template-columns: 1fr; }
  .d-requirements-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
  .d-story-hero { padding-top: 135px; }
  .d-story-hero-grid, .d-ai-grid, .d-progress-grid { grid-template-columns: 1fr; }
  .d-story-hero-copy { max-width: 760px; margin-inline: auto; text-align: center; }
  .d-story-hero-copy > p, .d-story-hero-copy .payment-note { margin-inline: auto; }
  .d-story-actions { justify-content: center; }
  .d-story-hero-visual { width: min(100%, 720px); margin-inline: auto; }
  .d-proof-grid { grid-template-columns: 1fr; }
  .d-proof-grid > div { min-height: 82px; border-right: 0; border-bottom: 1px solid var(--border); }
  .d-story-section { padding: 88px 0; }
  .d-problem-grid { grid-template-columns: 1fr 1fr; }
  .d-ai-copy { max-width: 760px; }
  .d-ai-panel { width: min(100%, 600px); margin-inline: auto; }
  .d-experience-grid { grid-template-columns: 1fr; }
  .d-experience-grid article { min-height: 0; }
  .d-experience-grid article > span { margin-bottom: 28px; }
  .d-progress-detail { min-height: 380px; }
}

@media (max-width: 640px) {
  .d-story-hero { min-height: 0; padding: 125px 0 72px; }
  .d-story-hero h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
  .d-story-hero-copy > p { font-size: 16px; }
  .d-story-actions { flex-direction: column; align-items: stretch; }
  .d-story-actions .button { width: 100%; }
  .d-story-hero-visual { display: none; }
  .d-story-heading { margin-bottom: 36px; text-align: left; }
  .d-story-heading > p { font-size: 16px; }
  .d-problem-grid, .d-ai-copy > ul, .d-requirements-grid { grid-template-columns: 1fr; }
  .d-problem-grid li { min-height: 170px; }
  .d-ai-panel { padding: 22px; }
  .d-control-note { grid-template-columns: 34px 1fr; }
  .d-experience-grid article { padding: 25px; }
  .d-filter-row { flex-wrap: nowrap; justify-content: start; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .d-filter-row::-webkit-scrollbar { display: none; }
  .d-filter-row span { flex: 0 0 auto; }
  .d-library-actions { grid-template-columns: 1fr 1fr; }
  .d-worksheet-grid article { grid-template-columns: 1fr; }
  .d-worksheet-grid img { min-height: 0; height: auto; aspect-ratio: 800 / 533; }
  .d-worksheet-grid article > div { padding: 24px; }
  .d-progress-card, .d-progress-detail { padding: 22px 18px; }
  .d-bars { height: 210px; gap: 8px; padding-inline: 5px; }
  .d-bars i { width: 38px; }
  .d-progress-detail ul { grid-template-columns: 1fr; }
  .d-requirements-grid li { min-height: 180px; }
  .d-requirements-grid li > span { margin-bottom: 28px; }
  .d-final { padding: 78px 0; }
  .d-final p { font-size: 16px; }
  .d-final-actions { flex-direction: column; }
  .d-final-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}