@import url("./design-system/variable.css");
@import url("./theme.css");
@import url("./fonts.css");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: #fff; color: var(--ai-ink); font-family: var(--ai-font); font-size: 16px; line-height: 1.72; letter-spacing: 0; }
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--ai-heading); line-height: 1.3; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--ai-navy); outline-offset: 5px; }
[hidden] { display: none !important; }
::selection { background: var(--ai-mint); color: var(--ai-ink); }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.container { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: 112px; }
.section-heading { margin-bottom: 42px; }
.section-heading h2, .section > div > h2, .faq-section h2, .closing h2 { font-size: clamp(34px, 3.7vw, 52px); font-weight: 700; line-height: 1.3; }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 600 11px/1.5 var(--ai-sans); letter-spacing: 1.5px; margin-bottom: 23px; }
.section-number { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ai-border); border-radius: 50%; font: 500 11px var(--ai-sans); letter-spacing: 0; }
.section-copy { margin-top: 24px; color: var(--ai-muted); font-size: 18px; }
.small-copy { display: block; font-size: 13px; line-height: 1.8; color: #626873; margin-top: 12px; }
.accent-navy { color: var(--ai-navy); }
.accent-mint { color: var(--ai-mint); }
.split-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.split-heading > p { color: var(--ai-muted); font-size: 17px; margin-bottom: 5px; max-width: 470px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; border-radius: 999px; padding: 15px 25px; min-height: 52px; font-size: 14px; font-weight: 600; border: 1px solid transparent; line-height: 1.6; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #17191c12; }
.button-navy { background: var(--ai-navy); color: #fff; }
.button-mint { background: var(--ai-mint); color: var(--ai-ink); }
.button-glass { color: #fff; border-color: #ffffff40; background: #ffffff0b; backdrop-filter: blur(10px); }
.button-outline { color: var(--ai-navy); border-color: #d6dce5; background: #fff; }
.button-small { padding: 11px 19px; min-height: 44px; font-size: 13px; gap: 9px; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.icon-button { background: transparent; border: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.icon-button:hover { background: #f1f3f7; }
.text-link { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: transparent; color: var(--ai-navy); font-size: 14px; font-weight: 600; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.demo-badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 6px; background: #f1f3f7; color: #535b68; font-size: 10px; line-height: 1.6; font-weight: 500; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-mint); display: inline-block; flex-shrink: 0; }
.tile-icon { width: 45px; height: 45px; border-radius: 13px; display: grid; place-items: center; font: 600 23px var(--ai-heading); flex-shrink: 0; }
.mint { background: var(--ai-mint-soft); color: var(--ai-mint-text); }
.violet { background: var(--ai-violet-soft); color: var(--ai-violet-text); }
.pink { background: var(--ai-pink-soft); color: var(--ai-pink-text); }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 10px 20px; border-radius: 10px; background: #fff; color: var(--ai-navy); }
.skip-link:focus { top: 10px; }

.site-header { height: 92px; position: sticky; top: 0; z-index: 30; background: #ffffffeb; backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-inline: max(48px, calc((100vw - 1280px) / 2)); border-bottom: 1px solid #e8ebf180; }
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-crop { display: block; width: 143px; height: 46px; overflow: hidden; }
.brand-crop img { width: 160px; max-width: none; height: auto; margin-left: -5px; margin-top: -12px; }
.brand-by { border-left: 1px solid #dce0e5; padding-left: 12px; font: 12px var(--ai-sans); color: #525963; }
.desktop-nav { display: flex; gap: 26px; font-size: 13px; color: #4d5561; }
.desktop-nav a { padding-block: 8px; }
.desktop-nav a:hover { color: var(--ai-navy); }
.header-actions { display: flex; align-items: center; gap: 11px; }
.motion-toggle { color: #657181; }
.motion-toggle .icon { width: 17px; height: 17px; }
.menu-toggle { display: none; gap: 4px; }
.menu-toggle span { display: block; width: 20px; height: 1px; background: var(--ai-ink); }
.mobile-nav { position: absolute; top: 76px; left: 0; right: 0; padding: 16px 28px; display: grid; gap: 15px; background: #fff; border-bottom: 1px solid var(--ai-border); box-shadow: 0 14px 20px #17191c08; }

.hero { position: relative; width: min(1424px, calc(100% - 40px)); margin: 20px auto 0; min-height: 740px; overflow: hidden; border-radius: 28px; background: var(--ai-ink); color: #fff; isolation: isolate; }
.hero-world { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -3; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #101b2aed 0%, #142138b8 34%, #14213830 62%, transparent 100%), linear-gradient(0deg, #101b2ab0, transparent 28%); z-index: -2; }
.hero-copy { padding: 62px 0 112px 64px; max-width: 650px; }
.hero-eyebrow { color: #d3e4ec; font-size: 10px; letter-spacing: 2px; }
.hero h1 { font-size: clamp(46px, 4.6vw, 66px); line-height: 1.28; font-weight: 700; }
.hero-highlight { color: var(--ai-mint); position: relative; }
.hero-highlight::after { content: ""; position: absolute; height: 5px; background: var(--ai-mint); opacity: .5; bottom: -5px; left: 0; right: 0; transform: rotate(-3deg); border-radius: 100%; }
.hero-tagline { margin-top: 15px; font: 29px/1.3 var(--ai-heading); color: #fff; }
.hero-tagline em { color: #b89bf8; }
.hero-description { font-size: 17px; color: #d8e2ed; line-height: 1.8; margin: 26px 0 30px; }
.interest-picker { margin-top: 34px; }
.interest-picker > p { font-size: 12px; color: #f0f3f7; }
.interest-picker > p > span { color: #aebdce; margin-left: 7px; font-size: 10px; }
.interest-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-block: 11px; }
.interest-buttons button { border: 1px solid #ffffff30; background: #13213b55; color: #dde8f3; border-radius: 999px; padding: 7px 12px; font-size: 11px; transition: background .2s, border-color .2s; }
.interest-buttons button:hover, .interest-buttons button[aria-pressed="true"] { background: var(--ai-mint); border-color: var(--ai-mint); color: var(--ai-ink); }
.interest-picker .interest-caption { color: #bad7de; font-size: 11px; min-height: 20px; }
.hero-buddy { position: absolute; width: 190px; right: 34px; bottom: 80px; filter: drop-shadow(0 20px 26px #0008); animation: float 7s ease-in-out infinite; }
.hero-buddy span { position: absolute; left: -66px; bottom: -16px; white-space: nowrap; font: italic 14px var(--ai-heading); color: #e8f8fe; background: #193754ae; backdrop-filter: blur(10px); padding: 11px 16px; border: 1px solid #b3dbf133; border-radius: 14px; }
.hero-float { position: absolute; display: flex; align-items: center; gap: 12px; background: #effcffb3; backdrop-filter: blur(18px); border: 1px solid #ffffffa0; border-radius: 16px; padding: 14px 18px; color: #17344e; box-shadow: 0 12px 40px #0001; }
.hero-float-top { top: 48px; right: 40px; animation: float 8s ease-in-out infinite reverse; }
.hero-float small { display: block; font: 9px var(--ai-sans); letter-spacing: 1.5px; margin-bottom: 4px; }
.hero-float strong { font-size: 14px; font-weight: 600; }
.mini-orbit { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #3b879366; border-radius: 50%; font-size: 26px; }
.hero-bottom { position: absolute; bottom: 26px; left: 64px; right: 40px; display: flex; align-items: center; gap: 30px; font: 9px var(--ai-sans); letter-spacing: 1.5px; color: #a6b8ca; }
.hero-bottom a { margin-left: auto; display: flex; align-items: center; gap: 17px; font: 12px var(--ai-font); letter-spacing: 0; color: #e4eff6; }
.hero-bottom a span { font-size: 24px; }
.hero-art-label { font: 9px var(--ai-font); letter-spacing: 0; opacity: .8; }
.promise-strip { display: flex; align-items: center; justify-content: center; gap: 50px; padding: 32px 0; border-bottom: 1px solid var(--ai-border); }
.promise-strip > div { display: flex; gap: 17px; align-items: center; }
.promise-strip .icon { width: 25px; height: 25px; color: var(--ai-navy); }
.promise-strip span { font-size: 14px; font-weight: 600; }
.promise-strip small { display: block; font-size: 10px; font-weight: 400; color: #717985; }
.promise-strip .strip-arrow { font-size: 22px; color: #b3bfcc; font-weight: 400; }

.pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pain-card { display: flex; flex-direction: column; text-align: left; position: relative; border: 1px solid var(--ai-border); border-radius: 22px; background: #fff; padding: 22px; transition: transform .25s, border .25s, background .25s; }
.pain-card:hover { transform: translateY(-6px); border-color: #91a8c6; }
.pain-card[aria-pressed="true"] { border-color: var(--ai-navy); background: #f7faff; }
.pain-card > strong { font-size: 22px; line-height: 1.45; margin: 18px 0 12px; }
.pain-copy { font-size: 12px; color: #666d77; line-height: 1.8; }
.pain-link { display: flex; align-items: center; justify-content: space-between; gap: 7px; font: 11px var(--ai-sans); color: var(--ai-navy); margin-top: 25px; padding-top: 15px; border-top: 1px solid var(--ai-border); }
.pain-link .icon { width: 17px; height: 17px; }
.pain-check { position: absolute; right: 14px; top: 14px; width: 23px; height: 23px; border: 1px solid #c7d0da; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.pain-check .icon { width: 15px; height: 15px; opacity: 0; }
.pain-card[aria-pressed="true"] .pain-check { background: var(--ai-navy); border-color: var(--ai-navy); color: #fff; }
.pain-card[aria-pressed="true"] .pain-check .icon { opacity: 1; }
.pain-art { height: 116px; display: flex; align-items: center; justify-content: center; position: relative; font-family: var(--ai-heading); }
.vocab-art { background: radial-gradient(ellipse, #72cccb35, transparent 70%); }
.vocab-art span { padding: 10px; background: #eaf9f7; border: 1px solid #abd9d5; border-radius: 10px; box-shadow: 0 8px 15px #3a786410; color: #24529b; font-size: 17px; }
.vocab-art span:first-child { transform: rotate(-12deg) translateY(-13px); }
.vocab-art span:nth-child(2) { transform: rotate(8deg) translateY(12px); }
.pain-art i { font: italic 32px var(--ai-heading); position: absolute; right: 10px; top: 5px; }
.vocab-art i { color: var(--ai-mint-text); }
.grammar-art { gap: 12px; background: radial-gradient(ellipse, #b89bf827, transparent 70%); }
.grammar-art span { background: #f2eeff; padding: 12px 14px; color: var(--ai-violet-text); border-radius: 10px; border: 1px solid #d5c7f5; box-shadow: 0 8px 15px #6246d909; }
.grammar-art span:first-child { transform: rotate(-9deg) translateY(-8px); }
.grammar-art span:last-child { transform: rotate(9deg) translateY(15px); }
.grammar-art b { font-size: 30px; font-weight: 400; color: #20aeea; }
.road-art { background: radial-gradient(ellipse, #f59add26, transparent 70%); gap: 6px; }
.road-art > span { font-size: 20px; border: 1px solid #f0d4e6; padding: 11px; border-radius: 8px; color: var(--ai-pink-text); background: #fff7fc; transform: rotate(-6deg); }
.road-art > span:nth-child(2) { transform: rotate(8deg) translateY(13px); }
.road-art > span:nth-child(3) { transform: rotate(-8deg) translateY(-10px); }
.road-art i { color: var(--ai-pink-text); right: 5px; }
.insight-art { gap: 12px; align-items: flex-end; padding: 24px; background: radial-gradient(ellipse, #20aeea18, transparent 70%); }
.insight-art > span { width: 25px; background: #d6e9fa; border: 1px solid #aed2f1; border-radius: 7px 7px 0 0; height: 32px; }
.insight-art > span:nth-child(2) { height: 54px; }
.insight-art > span:nth-child(3) { height: 72px; background: #a8d1f2; }
.insight-art i { color: var(--ai-navy); }
.pain-recommendation { display: flex; gap: 12px; align-items: center; margin-top: 22px; font-size: 12px; color: #596776; background: #f7f9fb; border-radius: 12px; padding: 15px 18px; }
.pain-recommendation .icon { color: var(--ai-navy); width: 17px; height: 17px; }
.pain-recommendation a { color: var(--ai-navy); font-weight: 600; margin-left: auto; white-space: nowrap; }

.signature { padding-top: 95px; padding-bottom: 70px; background: #f3f6fa; }
.signature-heading { text-align: center; margin-bottom: 40px; }
.signature-heading .eyebrow { justify-content: center; }
.signature-heading p { color: #687383; margin: 22px 0 6px; }
.signature-heading .text-link { font-size: 12px; }
.story-scroll { height: 265vh; position: relative; }
.story-sticky { position: sticky; top: 108px; height: min(620px, calc(100vh - 140px)); display: grid; grid-template-columns: 36% 64%; align-items: center; }
.story-narrative { padding: 25px 45px 25px 0; }
.story-counter { font: 12px var(--ai-sans); color: var(--ai-navy); display: block; margin-bottom: 26px; letter-spacing: 2px; }
.story-narrative h3 { font-size: 35px; line-height: 1.4; }
.story-narrative > p { color: #6d7682; font-size: 14px; margin: 20px 0 30px; min-height: 80px; }
.story-steps { display: grid; gap: 6px; }
.story-steps button { text-align: left; background: transparent; border: 0; border-radius: 9px; font-size: 12px; padding: 8px 11px; color: #707b89; display: flex; align-items: center; gap: 12px; }
.story-steps button > span { font: 10px var(--ai-sans); color: #9da6b4; }
.story-steps button[aria-pressed="true"] { background: #fff; color: var(--ai-navy); box-shadow: 0 2px 7px #00000005; }
.story-steps button[aria-pressed="true"] span { color: var(--ai-navy); }
.scroll-cue { font-size: 10px; color: #778595; display: flex; gap: 20px; margin: 26px 11px 0; }
.story-stage { width: 100%; height: 100%; max-height: 580px; min-height: 440px; position: relative; background: radial-gradient(ellipse at 75% 25%, #f2eeff 0, transparent 52%), radial-gradient(ellipse at 20% 80%, #eaf9f7 0, transparent 48%), #fff; border: 1px solid #e2e7f0; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 60px -35px #18334f4d; }
.stage-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: absolute; inset: 25px 25px auto; font: 9px var(--ai-sans); letter-spacing: 1px; color: #657483; z-index: 4; }
.stage-topline > span:first-child { display: flex; gap: 8px; align-items: center; }
.stage-topline .demo-badge { letter-spacing: 0; font-family: var(--ai-font); }
.stage-path { position: absolute; inset: 65px 20px 25px; width: calc(100% - 40px); height: calc(100% - 90px); }
.stage-path path { stroke: #b5cedd; stroke-width: 1; fill: none; stroke-dasharray: 5 8; }
.stage-caption { position: absolute; top: 22%; left: 15%; font: italic 30px var(--ai-heading); color: #7b97a6; opacity: .7; }
.story-card { display: flex; align-items: center; gap: 13px; position: absolute; width: 275px; height: 99px; padding: 17px; border: 1px solid #fff; background: #ffffffeb; border-radius: 16px; box-shadow: 0 13px 35px #28466418, 0 0 0 1px #dce5ee80; z-index: 2; will-change: transform; }
.story-card small { display: block; color: #7a8291; font: 8px var(--ai-sans); letter-spacing: .7px; }
.story-card strong { display: block; font-size: 13px; margin-top: 4px; }
.story-card div > span { display: block; font-size: 9px; color: #808793; }
.card-status { margin-left: auto; font: 9px var(--ai-sans); color: #bec6cf; }
.story-card-v { left: 7%; top: 31%; transform: rotate(-10deg); }
.story-card-g { left: 51%; top: 45%; transform: rotate(9deg); }
.story-card-r { left: 16%; top: 65%; transform: rotate(-5deg); }
.stage-buddy { width: 115px; position: absolute; right: 23px; top: 75px; opacity: .95; }
.stage-tutor { position: absolute; inset: 24% 8% 22%; padding: 28px; background: #fff; border: 1px solid #e8e2f5; border-radius: 20px; box-shadow: 0 15px 40px #b89bf827; opacity: 0; z-index: 3; pointer-events: none; transform: translateY(20px); }
.stage-tutor > strong { display: block; font: 30px/1.5 var(--ai-heading); margin: 17px 0; }
mark { color: inherit; background: #d1efec; box-decoration-break: clone; -webkit-box-decoration-break: clone; border-radius: 5px; padding: 0 5px; }
.stage-tutor p { color: #6a6475; font-size: 13px; }
.tutor-mini { display: block; font-size: 10px; color: var(--ai-violet-text); margin-top: 17px; }
.stage-next { position: absolute; inset: 22% 12% 20%; background: #fff; box-shadow: 0 15px 50px #24647418; border-radius: 20px; padding: 28px; z-index: 4; opacity: 0; pointer-events: none; }
.stage-next .tile-icon { float: right; }
.stage-next small { font: 10px var(--ai-sans); letter-spacing: 1px; color: var(--ai-mint-text); }
.stage-next h4 { font-size: 27px; margin-top: 22px; line-height: 1.4; }
.stage-next p { font-size: 12px; color: #6c7882; margin-top: 15px; }
.next-chip { display: inline-flex; background: var(--ai-mint-soft); color: var(--ai-mint-text); border-radius: 999px; font-size: 10px; padding: 7px 12px; margin-top: 21px; }
.stage-footer { position: absolute; bottom: 23px; left: 26px; right: 26px; display: flex; align-items: center; gap: 16px; color: #8e9aac; font: 8px var(--ai-sans); letter-spacing: 1.4px; }
.stage-footer i { flex: 1; height: 1px; background: #d6e0e9; }
.story-static { display: none; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.story-static article { background: #fff; border: 1px solid #e3e9ef; border-radius: 20px; padding: 25px; }
.story-static article > span { font: 9px var(--ai-sans); color: var(--ai-navy); letter-spacing: 1px; }
.story-static h3 { font-size: 20px; margin: 15px 0; }
.story-static p { font-size: 13px; color: #657285; }

.trial-section { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 100px; }
.entry-options { display: grid; gap: 10px; margin: 30px 0 18px; }
.entry-options > * { display: flex; align-items: center; gap: 16px; padding: 14px 17px; border: 1px solid var(--ai-border); background: #fff; border-radius: 14px; text-align: left; }
.entry-options > *:hover { background: #f9fbfd; border-color: #bbccdd; }
.entry-options > * > .icon { margin-left: auto; width: 18px; height: 18px; }
.entry-options strong { display: block; font-size: 14px; }
.entry-options small { display: block; color: #79818d; font-size: 11px; }
.pass-wrap { position: relative; padding: 25px 38px; }
.pass-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse, #b89bf847, transparent 68%); }
.pass-card { position: relative; background: radial-gradient(at 80% 10%, #5c74ad 0, transparent 50%), linear-gradient(160deg, #24529b, #16263c 65%); padding: 28px 35px 0; border-radius: 25px; color: #fff; box-shadow: 0 25px 70px -20px #172b5355; transform: rotate(4deg); max-width: 380px; margin: auto; }
.pass-card::before, .pass-card::after { content: ""; position: absolute; width: 20px; height: 20px; background: #fff; border-radius: 50%; bottom: 49px; }
.pass-card::before { left: -10px; }.pass-card::after { right: -10px; }
.pass-top { display: flex; justify-content: space-between; align-items: center; font: 600 14px var(--ai-sans); }
.pass-top small { font: 9px var(--ai-sans); color: #c0d0e6; }
.pass-top .icon { color: var(--ai-mint); width: 27px; height: 27px; }
.pass-label { display: block; margin-top: 48px; font: 8px var(--ai-sans); letter-spacing: 2px; color: #b5c6de; }
.pass-card h3 { font: 55px/1.03 var(--ai-heading); margin: 12px 0 40px; }
.pass-card h3 em { color: var(--ai-mint); }
.pass-features { display: flex; gap: 21px; padding-bottom: 25px; }
.pass-features > span { font: 10px var(--ai-sans); }
.pass-features .icon { width: 19px; height: 19px; margin-bottom: 9px; color: #c3e9ef; }
.pass-bottom { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-top: 1px dashed #ffffff50; font: 8px var(--ai-sans); letter-spacing: 1px; color: #c1d0e4; }
.pass-bottom > span:last-child { color: var(--ai-mint); font-size: 16px; }
.pass-note { font-size: 10px; color: #7a808d; display: block; margin-top: 30px; text-align: center; }
.diagnostic-band { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 50px; padding: 38px; background: #f6f8fa; border: 1px solid #e8ebf0; border-radius: 24px; margin-bottom: 105px; }
.diagnostic-band .eyebrow { font-size: 9px; margin-bottom: 12px; }
.diagnostic-band h3 { font-size: 21px; }
.diagnostic-band p { font-size: 12px; color: #687481; margin-top: 15px; }
.diagnostic-band .text-link { font-size: 12px; margin-top: 14px; }
.diagnostic-tracks { display: flex; align-items: center; justify-content: center; gap: 12px; }
.diagnostic-tracks > div { background: #fff; border-radius: 15px; padding: 25px 18px; flex: 1; text-align: center; border: 1px solid #e5eaf0; }
.diagnostic-tracks > div > span { display: block; font: 30px var(--ai-heading); color: var(--ai-navy); }
.diagnostic-tracks strong { display: block; font: 11px var(--ai-sans); margin-top: 10px; }
.diagnostic-tracks small { font-size: 10px; color: #7d8996; }
.diagnostic-band .diagnostic-note { grid-column: 1 / -1; font-size: 10px; margin: 0; padding-top: 15px; border-top: 1px solid #e3e7ed; }

.learn-section { background: #faf9fc; }
.lesson-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.lesson-tabs button { border: 1px solid #dde5ef; background: #fff; color: #697282; display: flex; align-items: center; gap: 12px; font: 12px var(--ai-sans); padding: 13px 19px; border-radius: 999px; min-height: 44px; }
.lesson-tabs button > span { font: 17px var(--ai-heading); }
.lesson-tabs button[aria-selected="true"] { background: var(--ai-ink); color: #fff; border-color: var(--ai-ink); }
.study-room { border: 1px solid #e9e4f1; background: #fff; border-radius: 25px; box-shadow: 0 24px 80px -40px #24529b30; overflow: hidden; }
.study-topbar { display: flex; align-items: center; gap: 20px; padding: 18px 25px; background: #fff; border-bottom: 1px solid #e2eaf3; font: 9px var(--ai-sans); letter-spacing: 1px; color: #697689; }
.study-topbar > span:first-child { display: flex; align-items: center; gap: 8px; }
.study-topbar .demo-badge { letter-spacing: 0; font-family: var(--ai-font); }
.room-dots { margin-left: auto; color: #d0cadb; font-size: 9px; letter-spacing: 4px; }
.study-body { display: grid; grid-template-columns: 1.9fr 1fr; }
.learning-canvas { padding: 35px; }
.canvas-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 9px var(--ai-sans); color: #8b8397; }
.canvas-top > span:first-child { color: var(--ai-violet-text); letter-spacing: 1px; }
.canvas-top > span:last-child { font-family: var(--ai-font); }
.learning-canvas > h3 { font: 37px/1.5 var(--ai-heading); margin: 38px 0 15px; min-height: 108px; }
.learning-canvas > p:not(.lesson-feedback) { color: #797285; font-size: 13px; }
.concept-rule { padding: 21px 0; margin-top: 20px; border-block: 1px solid #eceaf1; }
.rule-label { display: block; color: #a09aaa; font: 8px var(--ai-sans); letter-spacing: 1.4px; margin-bottom: 12px; }
.concept-rule > div { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.concept-rule > div > span { padding: 5px 11px; color: var(--ai-violet-text); background: var(--ai-violet-soft); border-radius: 7px; font: 17px var(--ai-heading); }
.concept-rule i { font-style: normal; color: #a59eb1; }.concept-rule strong { font-size: 12px; font-weight: 500; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.lesson-question { margin-top: 24px; }
.lesson-question legend { padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
#lesson-answers, #sample-answers { display: grid; gap: 8px; }
#lesson-answers button, #sample-answers button { display: flex; align-items: center; text-align: left; gap: 12px; background: #fff; padding: 11px 13px; border: 1px solid #e3e5ec; border-radius: 10px; font-size: 12px; min-height: 46px; }
#lesson-answers button:hover, #sample-answers button:hover { background: #f7f9fc; border-color: #8fa7c7; }
#lesson-answers button > span { border: 1px solid #e2e5ec; color: #919aab; border-radius: 6px; padding: 2px 6px; font: 10px var(--ai-sans); }
#lesson-answers button[aria-pressed="true"], #sample-answers button[aria-pressed="true"] { background: var(--ai-mint-soft); border-color: var(--ai-mint); color: #24529b; }
.lesson-feedback { font-size: 12px; color: #6f6a7b; min-height: 40px; margin-top: 13px; line-height: 1.8; }
.lesson-feedback.correct { color: var(--ai-mint-text); }.lesson-feedback.retry { color: var(--ai-navy); }
.canvas-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 13px; padding-top: 17px; border-top: 1px solid #eeecf2; }
.canvas-bottom > span { font-size: 10px; color: #9894a3; }.canvas-bottom i { font-style: normal; margin-inline: 6px; }
.tutor-panel { border-left: 1px solid #e9e4f1; background: #f7f5fb; padding: 26px; display: flex; flex-direction: column; }
.tutor-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid #e6e0f0; }
.tutor-heading img { width: 53px; height: 53px; object-fit: contain; }
.tutor-heading h4 { font: 600 14px var(--ai-heading); }
.tutor-heading div > span { font: 7px var(--ai-sans); letter-spacing: 1.1px; color: #908599; }
.tutor-star { margin-left: auto; color: var(--ai-violet-text); font-size: 25px; }
.tutor-message { margin-top: 26px; border-radius: 0 16px 16px; background: #fff; padding: 20px; border: 1px solid #e9e3f4; }
.tutor-message > span { color: var(--ai-violet-text); font: 8px var(--ai-sans); letter-spacing: 1px; }
.tutor-message p { color: #5e566c; margin-top: 12px; font-size: 14px; line-height: 1.9; }
.hint-button { background: #f0ebfc; color: var(--ai-violet-text); border: 1px solid #e1d5f7; border-radius: 999px; align-self: flex-start; font-size: 11px; padding: 9px 14px; display: flex; align-items: center; gap: 8px; margin-top: 17px; }
.hint-button .icon { width: 16px; height: 16px; }
.hint-text { font-size: 12px; color: #695979; line-height: 1.9; padding: 15px 5px; }
.tutor-foot { display: flex; gap: 10px; align-items: flex-start; margin-top: auto; padding-top: 35px; color: #a499b3; }
.tutor-foot .icon { width: 18px; height: 18px; }.tutor-foot p { font-size: 10px; line-height: 1.8; }.tutor-foot p > span { font-size: 9px; }

.insight-section { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 90px; }
.insight-report { border: 1px solid #e3e5ec; border-radius: 25px; padding: 27px; background: #fff; box-shadow: 0 20px 70px -45px #54729580; }
.report-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 9px var(--ai-sans); letter-spacing: 1px; color: #8c8da3; border-bottom: 1px solid #edf0f4; padding-bottom: 20px; }
.report-heading .demo-badge { font-family: var(--ai-font); letter-spacing: 0; font-size: 8px; }
.report-summary { display: flex; gap: 16px; align-items: center; margin: 26px 0; }
.report-summary small { font: 8px var(--ai-sans); color: var(--ai-violet-text); letter-spacing: 1px; }
.report-summary h3 { font-size: 24px; line-height: 1.4; margin-top: 8px; }
.evidence-tabs { display: flex; background: #f5f6f9; border-radius: 9px; padding: 4px; }
.evidence-tabs button { background: transparent; border: 0; border-radius: 7px; padding: 8px; flex: 1; color: #9195a3; font-size: 11px; }
.evidence-tabs button[aria-pressed="true"] { background: #fff; box-shadow: 0 2px 5px #00000008; color: var(--ai-navy); }
.evidence-list > div { display: flex; align-items: center; gap: 13px; padding: 21px 0; border-bottom: 1px solid #eceef3; }
.evidence-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.evidence-dot.mint { background: var(--ai-mint); }.evidence-dot.violet { background: var(--ai-violet); }.evidence-dot.pink { background: var(--ai-pink); }
.evidence-list strong { display: block; font-size: 12px; font-weight: 600; }
.evidence-list small { display: block; font-size: 10px; margin-top: 5px; color: #8a91a1; }
.evidence-list .icon { margin-left: auto; width: 17px; height: 17px; color: #98a6b4; }.evidence-status { font-size: 8px; margin-left: auto; background: #f4f5f8; color: #959baa; padding: 4px; border-radius: 5px; white-space: nowrap; }
.evidence-details { margin-top: 18px; font-size: 11px; color: #7d8291; }
summary { cursor: pointer; list-style: none; }summary::-webkit-details-marker { display: none; }
.evidence-details summary { display: flex; justify-content: space-between; }
.evidence-details p { padding-top: 15px; font-size: 11px; line-height: 1.9; }
.check-list { list-style: none; padding: 0; margin: 28px 0; }
.check-list li { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 8px 0; }
.check-list .icon { width: 17px; height: 17px; color: var(--ai-mint-text); }
.editorial-quote { font-size: 21px; line-height: 1.65; padding-left: 20px; border-left: 3px solid var(--ai-mint); color: #56728b; margin-top: 34px; }

.people-section { background: var(--ai-ink); color: #fff; padding-block: 95px; }
.people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.people-visual { position: relative; min-height: 570px; border-radius: 28px; background: radial-gradient(ellipse at 50% 45%, #24529b85, #17191c00 68%); overflow: hidden; }
.people-visual > .eyebrow { position: absolute; top: 25px; left: 20px; color: #a3b4c9; font-size: 9px; z-index: 3; }
.people-visual > img { position: relative; margin: 25px auto 0; width: 92%; z-index: 2; filter: drop-shadow(0 20px 45px #20aeea28); }
.people-orbit { position: absolute; width: 93%; height: 80%; top: 8%; left: 4%; border: 1px solid #467cb544; border-radius: 50%; transform: rotate(-25deg); }
.people-note { position: absolute; bottom: 0; left: 5%; right: 5%; padding: 20px 25px; background: #ffffff0b; border: 1px solid #ffffff20; backdrop-filter: blur(20px); border-radius: 17px; z-index: 3; }
.people-note .demo-badge { background: #ffffff12; color: #cad7e5; font-size: 9px; margin-bottom: 10px; }
.people-note strong { display: block; font-size: 23px; line-height: 1.45; }.people-note > span:last-child { font-size: 11px; color: #aebbd0; display: block; margin-top: 9px; }
.people-copy .eyebrow { color: #b2bccb; }.people-copy .section-number { border-color: #ffffff30; }.people-copy h2 { font-size: 40px; line-height: 1.5; }.people-copy > p { color: #a6b2c4; margin: 22px 0 30px; font-size: 14px; }
.role-row { display: flex; gap: 20px; align-items: flex-start; border-top: 1px solid #ffffff15; padding: 23px 0; }
.role-avatar { border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; color: var(--ai-violet); background: #b89bf822; font-size: 28px; flex-shrink: 0; }.role-avatar.human { color: var(--ai-pink); background: #f59add22; }
.people-copy .accent-mint { color: var(--ai-pink); }
.evidence-tabs button[data-view="parent"][aria-pressed="true"] { background: var(--ai-pink-soft); color: var(--ai-pink-text); }
.role-row div > span { font: 8px var(--ai-sans); letter-spacing: .7px; color: #a0acc0; }.role-row h3 { font-size: 20px; margin-top: 9px; }.role-row p { font-size: 12px; color: #a6b2c4; margin-top: 12px; }
.light-link { color: var(--ai-mint); font-size: 12px; margin-top: 10px; }

.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.course-card { border: 1px solid var(--ai-border); border-radius: 24px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.course-card:hover { transform: translateY(-7px); box-shadow: 0 15px 45px #23416612; }
.course-art { height: 210px; position: relative; padding: 26px; overflow: hidden; }
.course-v .course-art { background: var(--ai-mint-soft); color: var(--ai-mint-text); }.course-g .course-art { background: var(--ai-violet-soft); color: var(--ai-violet-text); }.course-r .course-art { background: var(--ai-pink-soft); color: var(--ai-pink-text); }
.course-index { font: 9px var(--ai-sans); letter-spacing: 1.2px; display: block; }
.course-type { display: block; margin-top: 35px; font: 34px/1.1 var(--ai-heading); position: relative; z-index: 2; }
.course-art-glyph { font: 120px var(--ai-heading); position: absolute; right: -10px; bottom: -8px; opacity: .13; transform: rotate(-15deg); }
.course-copy { padding: 27px; }.course-copy h3 { font: 600 20px var(--ai-heading); }.course-copy > p { font-size: 12px; color: #6a7280; margin: 18px 0; line-height: 1.9; }.course-copy ul { list-style: none; padding: 0; margin: 20px 0; }.course-copy li { font-size: 11px; color: #6f7885; padding: 5px 0; }.course-copy li::before { content: "✓"; color: #8695aa; margin-right: 9px; }
.course-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ai-navy); width: 100%; padding: 17px 0 0; background: transparent; border: 0; border-top: 1px solid var(--ai-border); text-align: left; }.course-link .icon { width: 18px; height: 18px; }
.cohort-note { padding: 20px 24px; border: 1px solid var(--ai-border); border-radius: 15px; display: flex; align-items: center; gap: 15px; margin-top: 24px; }.cohort-note > .icon { color: var(--ai-navy); }.cohort-note strong { font-size: 12px; display: block; }.cohort-note p > span { font-size: 10px; color: #7c8493; display: block; margin-top: 4px; }.cohort-note a { font-size: 11px; color: var(--ai-navy); margin-left: auto; }
.trust-band { padding: 48px; border-radius: 24px; border: 1px solid #e7e9ec; background: #fcfcfc; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }.trust-band .eyebrow { font-size: 9px; margin-bottom: 13px; }.trust-band h3 { font-size: 23px; line-height: 1.5; }.trust-band p { font-size: 12px; color: #79828f; margin-top: 15px; }.trust-points { display: grid; gap: 12px; align-content: center; padding-left: 70px; }.trust-points > span { display: flex; gap: 13px; align-items: center; font-size: 12px; }.trust-points .icon { width: 18px; height: 18px; color: var(--ai-navy); }
.partner-line { display: flex; align-items: center; justify-content: center; gap: 50px; grid-column: 1 / -1; border-top: 1px solid #e5e7eb; padding-top: 30px; }.partner-line > span { font-size: 11px; color: #6c7583; }.partner-line small { font-size: 9px; color: #9a9fa9; }.partner-line img { object-fit: contain; max-height: 50px; width: auto; max-width: 150px; }

.talk-section { display: grid; grid-template-columns: 1fr .9fr; gap: 120px; align-items: center; }.talk-reasons { display: flex; gap: 10px; margin: 24px 0 30px; }.talk-reasons > span { font-size: 11px; padding: 6px 12px; border: 1px solid #dfe5ec; border-radius: 999px; color: #6a788d; }
.callback-card { border: 1px solid #e2e6ec; border-radius: 24px; padding: 28px; box-shadow: 0 20px 65px -40px #526d8a4d; }.callback-heading { display: flex; gap: 14px; align-items: center; }.callback-heading strong { font-size: 15px; display: block; }.callback-heading div > span { color: #8a91a0; font-size: 10px; display: block; margin-top: 4px; }
.calendar-preview { background: #f7f9fb; border-radius: 15px; padding: 22px; margin: 24px 0; }.calendar-preview > span:first-child { font: 8px var(--ai-sans); letter-spacing: 1px; color: #7f8c9b; }.calendar-preview > div { display: flex; justify-content: space-between; margin-top: 20px; gap: 10px; }.calendar-preview i { font: 8px var(--ai-sans); color: #a4acb9; width: 37px; text-align: center; }.calendar-preview b { font: 15px var(--ai-sans); width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: #6c7b8e; }.calendar-preview b.chosen { background: var(--ai-mint); color: #1c575d; }.time-preview { display: flex; align-items: center; gap: 9px; margin-top: 18px; background: #fff; border: 1px solid #e3e8ef; padding: 10px; border-radius: 8px; font: 12px var(--ai-sans); color: #435f7e; }.time-preview .icon { width: 16px; height: 16px; color: var(--ai-mint-text); }.time-preview small { margin-left: auto; font: 9px var(--ai-font); color: #969fad; }
.callback-card > .button { width: 100%; }.callback-card > .text-link { display: flex; margin: 12px auto 0; font-size: 11px; }.callback-note { text-align: center; color: #858d9c; font-size: 10px; margin-top: 12px; line-height: 1.9; }
.faq-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; padding: 50px 0 115px; }.faq-section h2 { font-size: 37px; }.faq-section .eyebrow { font-size: 9px; }.faq-list details { border-bottom: 1px solid #e7eaf0; }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 13px; padding: 20px 0; }.faq-list summary > span { font: 23px var(--ai-sans); color: #9ca7b6; }.faq-list details[open] summary > span { transform: rotate(45deg); }.faq-list p { color: #778391; font-size: 12px; padding: 0 25px 20px 0; line-height: 1.9; }
.closing { position: relative; text-align: center; border-radius: 28px; padding: 80px 40px 0; background: var(--ai-ink); color: #fff; overflow: hidden; isolation: isolate; }.closing-glow { position: absolute; inset: -20%; background: radial-gradient(ellipse at 50% 80%, #24529ba8, transparent 55%); z-index: -1; }.closing .eyebrow { justify-content: center; color: #afbed1; font-size: 9px; }.closing h2 { font-size: 43px; line-height: 1.5; }.closing p { color: #adbbce; font-size: 13px; margin: 20px 0 30px; }.closing .button-row { justify-content: center; }.closing-word { display: block; font: italic clamp(55px, 7.5vw, 105px)/1.1 var(--ai-heading); color: #ffffff10; margin: 32px 0 -20px; }
.site-footer { padding-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }.site-footer > div > p { font: italic 15px var(--ai-heading); color: #8d96a4; margin-top: 9px; }.site-footer > nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: center; gap: 24px; color: #7d8694; font-size: 10px; }.site-footer > nav button { border: 0; padding: 0; background: transparent; font-size: 10px; color: inherit; }.site-footer nav a:hover, .site-footer nav button:hover { color: var(--ai-navy); }.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #e7eaf0; padding: 22px 0; grid-column: 1 / -1; font: 8px var(--ai-sans); color: #9da5b1; }.footer-bottom a { font-family: var(--ai-font); }

.dialog { width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 48px); border: 1px solid #e3e8f0; border-radius: 24px; padding: 42px; box-shadow: 0 30px 100px #0003; overflow-y: auto; color: var(--ai-ink); }
.dialog::backdrop { background: #0f192b99; backdrop-filter: blur(8px); }
.dialog-close { position: absolute; top: 12px; right: 12px; }.dialog-close .icon { width: 20px; height: 20px; }.dialog > .eyebrow { font-size: 9px; margin: 0 40px 19px 0; }.dialog h2 { font-size: 29px; }.dialog-intro { color: #727d8c; font-size: 12px; margin-top: 17px; line-height: 1.9; }.dialog > p:not(.dialog-intro) { font-size: 12px; margin-top: 16px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; }.dialog-actions .button { font-size: 12px; min-height: 46px; padding: 12px 20px; }
.sample-progress { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid var(--ai-border); margin-top: 25px; padding-top: 21px; font-size: 11px; color: #728096; }.sample-context { margin: 23px 0; padding: 25px; background: #f6f8fb; border-radius: 13px; font: 21px/1.6 var(--ai-heading); color: #344c6a; }.sample-fieldset legend { font-size: 13px; margin-bottom: 13px; }.diagnostic-dialog .button:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.course-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }.course-detail-grid > div, .course-detail-scope { padding: 20px; background: #f5f8fb; border-radius: 14px; }.course-detail-grid h3, .course-detail-scope h3 { font-size: 14px; }.course-detail-grid p, .course-detail-scope p { font-size: 12px; color: #748194; margin-top: 12px; }.course-detail-scope { margin: 18px 0; background: var(--ai-violet-soft); }
.contact-dialog { width: min(850px, calc(100% - 32px)); }.contact-dialog form { margin-top: 25px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.contact-dialog label { font-size: 12px; color: #59687b; display: block; }.contact-dialog input:not([type="radio"]), .contact-dialog select, .contact-dialog textarea { width: 100%; display: block; border: 1px solid #d8e0eb; border-radius: 9px; padding: 10px 12px; margin-top: 7px; background: #fff; font-size: 13px; min-height: 45px; color: #334962; }.contact-dialog textarea { resize: vertical; }.message-label { margin-top: 18px; }.contact-mode { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ai-border); }.contact-mode legend { font-size: 12px; font-weight: 600; padding-top: 15px; }.contact-mode label { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; margin-right: 18px; }.contact-mode input { accent-color: var(--ai-navy); }.availability-note { color: #7e8a9b; font-size: 11px; margin: 22px 0 15px; }.availability-note strong { color: #556c85; font-size: 10px; font-weight: 500; }.date-strip { display: flex; gap: 8px; flex-wrap: wrap; }.date-strip button { background: #fff; border: 1px solid #dfe6ee; border-radius: 9px; padding: 9px 13px; font-size: 9px; color: #7f8a9c; min-width: 53px; }.date-strip button strong { display: block; font: 18px var(--ai-sans); margin-block: 4px; color: #4b607b; }.date-strip button[aria-pressed="true"] { border-color: var(--ai-mint); background: var(--ai-mint-soft); }.window-inputs { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px; margin-top: 16px; }.window-inputs .button { font-size: 11px; padding: 11px 16px; border-radius: 9px; min-height: 45px; }.selected-windows { list-style: none; padding: 0; margin: 14px 0; }.selected-windows li { display: flex; align-items: center; gap: 9px; border: 1px solid #d4e8e7; background: var(--ai-mint-soft); border-radius: 9px; padding: 10px 12px; font-size: 11px; margin-top: 7px; color: #406f71; }.selected-windows li button { margin-left: auto; font-size: 11px; border: 0; background: transparent; color: #608188; padding: 5px; }.form-feedback { font-size: 11px; color: var(--ai-navy); min-height: 20px; }.sharing-note { display: flex; gap: 12px; align-items: flex-start; padding: 17px; background: #f4f6f9; border-radius: 10px; font-size: 11px; color: #6a7b91; margin-top: 22px; }.sharing-note .icon { width: 17px; height: 17px; margin-top: 3px; }.sharing-note span { color: #8e98a7; font-size: 10px; }.brief-content { white-space: pre-wrap; overflow-wrap: anywhere; background: #f7f9fb; padding: 23px; border-radius: 13px; font-size: 13px; line-height: 1.9; color: #52667f; margin-top: 20px; }.notice { background: var(--ai-mint-soft); color: var(--ai-mint-text); border-radius: 12px; font-size: 12px; padding: 15px 18px; margin-top: 20px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (min-width: 901px) { .js-ready .story-static { display: none; } body:not(.js-ready) .story-scroll { display: none; } body:not(.js-ready) .story-static { display: grid; } }
@media (max-width: 1150px) {
  .container { width: calc(100% - 64px); }.site-header { padding-inline: 32px; }.desktop-nav { gap: 16px; font-size: 12px; }.brand-by { display: none; }.hero-copy { padding-left: 44px; }.hero h1 { font-size: 56px; }.hero-bottom { left: 44px; }.hero-buddy { width: 155px; }.hero-float-top { right: 25px; }.pain-card { padding: 18px; }.pain-card > strong { font-size: 20px; }.pain-art { height: 95px; }.vocab-art span { font-size: 14px; padding: 8px; }.story-narrative { padding-right: 25px; }.story-narrative h3 { font-size: 29px; }.story-card { width: 245px; height: 90px; padding: 13px; }.story-card .tile-icon { width: 38px; height: 38px; }.story-card-g { left: 44%; }.story-card small { font-size: 7px; }.stage-next { inset-inline: 7%; }.trial-section { gap: 50px; }.insight-section { gap: 50px; }.people-grid { gap: 45px; }.people-copy h2 { font-size: 34px; }.people-visual { min-height: 470px; }.talk-section { gap: 60px; }.faq-section { gap: 50px; }.learning-canvas { padding: 28px; }.tutor-panel { padding: 22px; }.learning-canvas > h3 { font-size: 32px; }.course-copy { padding: 22px; }.course-copy h3 { font-size: 18px; }
}
@media (max-width: 900px) {
  .desktop-nav { display: none; }.menu-toggle { display: grid; align-content: center; }.site-header { height: 76px; }.hero { min-height: 720px; }.hero-copy { max-width: 520px; padding-left: 35px; padding-top: 40px; }.hero h1 { font-size: 52px; }.hero-world { object-position: 57%; }.hero-shade { background: linear-gradient(90deg, #101b2af5 0%, #142138ab 55%, #14213810 100%), linear-gradient(0deg, #101b2ab0, transparent 40%); }.hero-float-top { display: none; }.hero-buddy { width: 145px; right: 25px; }.hero-buddy span { font-size: 11px; left: -45px; }.promise-strip { gap: 22px; }.promise-strip > div { gap: 10px; }.promise-strip .strip-arrow { font-size: 17px; }.promise-strip small { font-size: 9px; }.section { padding-block: 80px; }.split-heading { align-items: flex-start; flex-direction: column; gap: 25px; }.split-heading > p { font-size: 15px; }.section-heading h2, .section > div > h2 { font-size: 39px; }.pain-grid { grid-template-columns: repeat(2, 1fr); }.pain-card { padding: 25px; }.pain-card > strong { font-size: 22px; }.pain-art { height: 100px; }.signature { padding: 65px 0; }.story-scroll { display: none; }.story-static { display: grid; grid-template-columns: repeat(2, 1fr); }.signature-heading h2 { font-size: 38px; }.signature-heading p { font-size: 14px; }.trial-section { gap: 35px; }.pass-wrap { padding: 10px; }.pass-card { padding: 25px 25px 0; }.pass-card h3 { font-size: 45px; }.pass-features { gap: 16px; }.diagnostic-band { padding: 28px; gap: 20px; margin-bottom: 75px; }.diagnostic-band h3 { font-size: 19px; }.diagnostic-tracks { gap: 7px; }.diagnostic-tracks > div { padding: 22px 10px; }.diagnostic-tracks strong { font-size: 9px; }.study-body { grid-template-columns: 1.5fr 1fr; }.learning-canvas > h3 { font-size: 28px; }.canvas-top { flex-wrap: wrap; gap: 8px; }.learning-canvas { padding: 22px; }.canvas-bottom { align-items: flex-start; flex-direction: column; }.tutor-message { padding: 17px; }.tutor-message p { font-size: 12px; }.tutor-panel { padding: 17px; }.lesson-tabs { gap: 6px; }.lesson-tabs button { font-size: 10px; padding: 11px 15px; gap: 7px; }.insight-section { gap: 35px; }.insight-report { padding: 20px; }.report-heading { flex-wrap: wrap; gap: 8px; }.report-summary h3 { font-size: 20px; }.evidence-status { display: none; }.insight-section .section-copy { font-size: 15px; }.check-list li { font-size: 11px; }.editorial-quote { font-size: 17px; }.people-grid { gap: 30px; }.people-visual { min-height: 435px; }.people-copy h2 { font-size: 30px; }.people-copy > p { font-size: 12px; }.role-row { gap: 12px; }.role-row p { font-size: 11px; }.role-row h3 { font-size: 17px; }.course-grid { gap: 13px; }.course-art { height: 180px; padding: 20px; }.course-type { font-size: 29px; margin-top: 29px; }.course-copy { padding: 19px; }.course-copy h3 { font-size: 16px; }.course-copy > p { font-size: 11px; }.course-copy li { font-size: 10px; }.course-link { font-size: 11px; }.cohort-note a { font-size: 10px; }.trust-band { padding: 32px; gap: 20px; }.trust-points { padding-left: 15px; }.trust-band h3 { font-size: 21px; }.talk-section { gap: 40px; }.talk-section .section-copy { font-size: 15px; }.callback-card { padding: 23px; }.callback-heading strong { font-size: 13px; }.calendar-preview { padding: 18px; }.faq-section { gap: 35px; padding-bottom: 85px; }.faq-section h2 { font-size: 32px; }.faq-list summary { font-size: 12px; }.closing { padding: 60px 30px 0; }.closing h2 { font-size: 34px; }.site-footer > nav { gap: 15px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 86px; }.container { width: calc(100% - 36px); }.site-header { height: 72px; padding-inline: 17px; gap: 10px; }.brand-crop { width: 112px; height: 38px; }.brand-crop img { width: 127px; margin-top: -10px; margin-left: -5px; }.header-actions { gap: 4px; }.header-actions > .button { min-height: 38px; font-size: 10px; padding: 9px 12px; gap: 7px; }.header-actions > .button .icon { width: 14px; height: 14px; }.icon-button { width: 34px; height: 38px; }.motion-toggle { width: 30px; }.mobile-nav { top: 72px; }.hero { width: calc(100% - 20px); margin-top: 10px; border-radius: 21px; min-height: 900px; }.hero-world { height: 560px; top: auto; bottom: 0; object-position: 72%; }.hero-shade { background: linear-gradient(180deg, #101b2a 0%, #101b2a 31%, #101b2ae0 44%, #101b2a20 70%, #101b2a9c 100%); }.hero-copy { padding: 32px 24px 450px; max-width: none; }.hero-eyebrow { font-size: 8px; letter-spacing: 1.3px; margin-bottom: 22px; gap: 8px; }.hero h1 { font-size: clamp(37px, 10.5vw, 49px); line-height: 1.3; }.hero-tagline { font-size: 23px; margin-top: 13px; }.hero-description { font-size: 13px; margin: 23px 0; }.hero .button-row { flex-wrap: nowrap; gap: 8px; }.hero .button { min-height: 44px; padding: 11px 13px; font-size: 11px; gap: 7px; }.hero .button .icon { width: 16px; height: 16px; }.interest-picker { margin-top: 24px; }.interest-picker > p { font-size: 10px; }.interest-picker > p > span { font-size: 8px; margin-left: 5px; }.interest-buttons { gap: 5px; }.interest-buttons button { font-size: 9px; padding: 6px 10px; }.interest-picker .interest-caption { font-size: 9px; max-width: 300px; }.hero-buddy { width: 140px; right: 13px; bottom: 80px; }.hero-buddy span { font-size: 10px; padding: 8px 10px; left: -59px; }.hero-bottom { left: 25px; right: 22px; gap: 12px; bottom: 20px; }.hero-bottom > span:first-child { font-size: 6px; letter-spacing: 1px; }.hero-bottom a { font-size: 9px; gap: 10px; }.hero-art-label { position: absolute; bottom: 35px; left: 0; font-size: 8px; }.promise-strip { gap: 14px; justify-content: space-between; padding: 24px 3px; }.promise-strip > div { flex-direction: column; align-items: flex-start; gap: 9px; }.promise-strip .icon { width: 21px; height: 21px; }.promise-strip span { font-size: 11px; }.promise-strip small { font-size: 8px; }.promise-strip .strip-arrow { display: none; }.section { padding-block: 65px; }.eyebrow { font-size: 8px; letter-spacing: 1px; gap: 9px; margin-bottom: 18px; }.section-number { width: 24px; height: 24px; font-size: 9px; }.section-heading h2, .section > div > h2 { font-size: 33px; line-height: 1.4; }.section-heading { margin-bottom: 30px; }.split-heading { gap: 20px; }.split-heading > p { font-size: 12px; }.small-copy { font-size: 10px; margin-top: 9px; }.pain-grid { gap: 11px; }.pain-card { padding: 16px; border-radius: 16px; }.pain-art { height: 86px; }.pain-card > strong { font-size: 18px; margin: 13px 0 10px; }.pain-copy { font-size: 10px; }.pain-link { font-size: 8px; margin-top: 17px; padding-top: 12px; gap: 3px; }.pain-link .icon { width: 14px; height: 14px; }.vocab-art span { padding: 7px; font-size: 11px; }.grammar-art { gap: 4px; }.grammar-art span { font-size: 13px; padding: 8px; }.grammar-art b { font-size: 19px; }.road-art { gap: 4px; }.road-art > span { font-size: 14px; padding: 7px; }.pain-art i { font-size: 23px; top: 2px; right: 0; }.insight-art { padding: 18px; gap: 8px; }.insight-art > span { width: 20px; }.pain-check { width: 20px; height: 20px; top: 9px; right: 9px; }.pain-recommendation { align-items: flex-start; flex-wrap: wrap; font-size: 10px; gap: 9px; padding: 13px; }.pain-recommendation > p { flex: 1; }.pain-recommendation a { margin-left: 25px; width: 100%; }.signature { padding-block: 55px; }.signature-heading h2 { font-size: 32px; }.signature-heading .eyebrow { font-size: 7px; }.signature-heading p { font-size: 11px; }.signature-heading .text-link { font-size: 10px; }.story-static { gap: 10px; }.story-static article { padding: 19px 16px; border-radius: 15px; }.story-static article > span { font-size: 7px; letter-spacing: .6px; }.story-static h3 { font-size: 17px; margin: 12px 0; }.story-static p { font-size: 10px; }.trial-section { grid-template-columns: 1fr; gap: 35px; }.trial-section .section-copy { font-size: 13px; margin-top: 20px; }.entry-options { margin: 24px 0 13px; }.entry-options > * { padding: 12px; gap: 12px; }.entry-options strong { font-size: 12px; }.entry-options small { font-size: 10px; }.trial-section .text-link { font-size: 11px; }.pass-wrap { padding: 10px 33px; }.pass-card { max-width: 310px; }.pass-card h3 { font-size: 48px; margin-bottom: 34px; }.pass-label { margin-top: 30px; }.pass-note { font-size: 8px; }.diagnostic-band { grid-template-columns: 1fr; padding: 24px; border-radius: 18px; margin-bottom: 60px; gap: 20px; }.diagnostic-band h3 { font-size: 18px; }.diagnostic-band p { font-size: 11px; }.diagnostic-band .eyebrow { font-size: 8px; }.diagnostic-band .text-link { font-size: 11px; margin-top: 9px; }.diagnostic-tracks { gap: 10px; }.diagnostic-tracks > div { padding: 15px 10px; }.diagnostic-tracks strong { font-size: 10px; }.diagnostic-band .diagnostic-note { font-size: 9px; }.lesson-tabs { display: grid; grid-template-columns: 1fr; gap: 7px; }.lesson-tabs button { justify-content: flex-start; font-size: 12px; padding: 10px 16px; }.lesson-tabs button > span { width: 25px; }.study-room { border-radius: 18px; }.study-topbar { padding: 15px; flex-wrap: wrap; gap: 8px; font-size: 7px; }.study-topbar .demo-badge { font-size: 8px; }.room-dots { display: none; }.study-body { grid-template-columns: 1fr; }.learning-canvas { padding: 22px 18px; }.canvas-top { font-size: 8px; }.learning-canvas > h3 { font-size: 29px; margin-top: 28px; min-height: 0; }.learning-canvas > p:not(.lesson-feedback) { font-size: 11px; }.concept-rule { padding: 18px 0; }.concept-rule > div { gap: 7px; }.concept-rule > div > span { font-size: 15px; padding: 5px 9px; }.concept-rule strong { font-size: 10px; }.lesson-question legend { font-size: 12px; }#lesson-answers button { font-size: 11px; }.lesson-feedback { font-size: 10px; }.canvas-bottom { flex-direction: row; align-items: center; gap: 10px; }.canvas-bottom > span { font-size: 8px; }.canvas-bottom i { margin-inline: 2px; }.canvas-bottom .button { font-size: 10px; padding: 10px 13px; }.tutor-panel { border-left: 0; border-top: 1px solid #e9e4f1; padding: 20px; }.tutor-heading { padding-bottom: 15px; }.tutor-message { margin-top: 18px; }.tutor-foot { padding-top: 20px; }.insight-section { grid-template-columns: 1fr; gap: 35px; }.insight-section > div:last-child { grid-row: 1; }.insight-section .section-copy { font-size: 13px; }.check-list { margin-block: 22px; }.check-list li { font-size: 11px; }.editorial-quote { font-size: 18px; margin-top: 25px; }.insight-report { padding: 20px; }.report-heading { font-size: 8px; }.report-summary h3 { font-size: 23px; }.evidence-list strong { font-size: 11px; }.evidence-list small { font-size: 9px; }.evidence-details { font-size: 10px; }.people-section { padding-block: 60px; }.people-grid { grid-template-columns: 1fr; gap: 38px; }.people-copy { grid-row: 1; }.people-copy h2 { font-size: 32px; }.people-copy > p { font-size: 13px; }.role-row div > span { font-size: 7px; }.role-row h3 { font-size: 18px; }.role-row p { font-size: 11px; }.people-visual { min-height: 410px; max-width: 400px; width: 100%; margin: auto; }.people-visual > img { width: 91%; }.people-note { padding: 17px 20px; }.people-note strong { font-size: 21px; }.course-grid { grid-template-columns: 1fr; gap: 20px; }.course-card { border-radius: 20px; }.course-art { height: 195px; padding: 23px; }.course-type { font-size: 34px; }.course-art-glyph { font-size: 140px; }.course-copy { padding: 25px; }.course-copy h3 { font-size: 21px; }.course-copy > p { font-size: 12px; }.course-copy li { font-size: 11px; }.course-link { font-size: 12px; }.cohort-note { align-items: flex-start; flex-wrap: wrap; padding: 18px; gap: 11px; }.cohort-note > p { flex: 1; }.cohort-note strong { font-size: 11px; }.cohort-note p > span { font-size: 9px; }.cohort-note a { width: 100%; margin: 0 0 0 32px; font-size: 10px; }.trust-band { grid-template-columns: 1fr; padding: 26px; gap: 25px; }.trust-band h3 { font-size: 22px; }.trust-band p { font-size: 11px; }.trust-points { padding: 0; gap: 13px; }.trust-points > span { font-size: 11px; }.partner-line { gap: 20px; justify-content: flex-start; flex-wrap: wrap; padding-top: 23px; }.partner-line > span { width: 100%; font-size: 10px; }.partner-line img { max-width: 110px; max-height: 42px; }.talk-section { grid-template-columns: 1fr; gap: 32px; }.talk-section .section-copy { font-size: 13px; }.talk-reasons { gap: 7px; margin: 22px 0; }.talk-reasons > span { font-size: 10px; }.callback-card { padding: 24px; }.callback-heading strong { font-size: 14px; }.callback-heading div > span { font-size: 9px; }.callback-note { font-size: 9px; }.faq-section { grid-template-columns: 1fr; gap: 25px; padding: 15px 0 65px; }.faq-section h2 { font-size: 32px; }.faq-section .eyebrow { font-size: 8px; }.faq-list summary { font-size: 12px; padding-block: 17px; }.faq-list p { font-size: 11px; }.closing { padding: 45px 23px 0; border-radius: 22px; }.closing .eyebrow { font-size: 7px; letter-spacing: 1px; }.closing h2 { font-size: 27px; line-height: 1.5; }.closing p { font-size: 11px; margin: 19px 0 25px; }.closing .button-row { flex-direction: column; align-items: stretch; gap: 10px; }.closing .button { font-size: 12px; min-height: 45px; }.closing-word { font-size: 54px; margin: 28px 0 -12px; }.site-footer { grid-template-columns: 1fr; padding-top: 34px; gap: 24px; }.site-footer > nav { justify-content: flex-start; font-size: 9px; gap: 19px; }.site-footer > nav button { font-size: 9px; }.site-footer > div > p { font-size: 13px; }.footer-bottom { flex-wrap: wrap; gap: 12px; font-size: 7px; padding-block: 18px; }.footer-bottom > span:nth-child(2) { display: none; }.footer-brand .brand-by { display: block; font-size: 10px; }.dialog { padding: 30px 21px; border-radius: 18px; max-height: calc(100dvh - 24px); }.dialog h2 { font-size: 23px; }.dialog > .eyebrow { font-size: 7px; }.dialog-intro { font-size: 11px; }.dialog-actions { flex-wrap: wrap; gap: 9px; }.dialog-actions .button { flex: 1; font-size: 10px; padding: 10px 13px; }.sample-context { padding: 20px; font-size: 18px; }.sample-fieldset legend { font-size: 12px; }#sample-answers button { font-size: 11px; }.course-detail-grid { grid-template-columns: 1fr; gap: 12px; }.course-detail-grid h3, .course-detail-scope h3 { font-size: 13px; }.course-detail-grid p, .course-detail-scope p { font-size: 11px; }.form-grid { grid-template-columns: 1fr; gap: 15px; }.contact-dialog label { font-size: 11px; }.contact-mode label { font-size: 10px; }.date-strip { gap: 5px; }.date-strip button { min-width: 41px; padding: 8px; }.date-strip button strong { font-size: 15px; }.window-inputs { grid-template-columns: 1fr 1fr; gap: 10px; }.window-inputs .button { grid-column: 1 / -1; width: 100%; }.selected-windows li { font-size: 10px; }.brief-content { font-size: 11px; padding: 18px; }.notice { font-size: 10px; padding: 13px; }
}
@media (max-width: 360px) { .brand-crop { width: 90px; }.brand-crop img { width: 104px; margin-top: -8px; }.header-actions { gap: 2px; }.header-actions > .button { font-size: 9px; padding: 8px; }.header-actions > .button .icon { display: none; }.hero-copy { padding-inline: 20px; }.hero .button { font-size: 10px; padding: 10px 11px; }.pain-card { padding: 13px; }.pain-card > strong { font-size: 16px; }.pain-copy { font-size: 9px; }.canvas-bottom { flex-direction: column; align-items: flex-start; } }
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.motion-paused .story-scroll { display: none; }body.motion-paused .story-static { display: grid; }
@media (max-width: 640px) {
  .hero-description, .split-heading > p, .trial-section .section-copy, .insight-section .section-copy, .people-copy > p, .talk-section .section-copy { font-size: 14px; }
  .interest-picker > p, .interest-buttons button, .interest-picker .interest-caption, .pain-copy, .pain-recommendation, .story-static p, .entry-options small, .diagnostic-band p, .learning-canvas > p:not(.lesson-feedback), .concept-rule strong, .lesson-feedback, .check-list li, .evidence-list small, .role-row p, .course-copy > p, .course-copy li, .trust-band p, .trust-points > span, .callback-note, .faq-list p, .closing p, .dialog-intro, .course-detail-grid p, .course-detail-scope p, .selected-windows li, .notice { font-size: 12px; }
  .lesson-question legend, #lesson-answers button, .evidence-list strong, .faq-list summary, .sample-fieldset legend, #sample-answers button, .contact-dialog label, .brief-content { font-size: 14px; }
  .contact-dialog input:not([type="radio"]), .contact-dialog select, .contact-dialog textarea { font-size: 16px; }
  .pain-link { font-size: 10px; }
  .dialog-actions .button { font-size: 12px; }
  .talk-section > * { min-width: 0; }
  .talk-reasons { flex-wrap: wrap; }
  .calendar-preview > div { gap: 5px; }
  .calendar-preview i, .calendar-preview b { flex: 1; width: auto; min-width: 0; }
}
@media (max-width: 360px) { .story-static { grid-template-columns: 1fr; }.story-static h3 { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }.story-scroll { display: none !important; }.story-static { display: grid !important; } }