/* Mathsy v3 · framework-free, responsive landing page */
:root {
  /* Aliases allow this static prototype to keep working alone, while the
     Next app supplies the canonical tokens from mathsy-design-system.css. */
  --cream:var(--mathsy-cream,#F0E6D6); --paper:var(--mathsy-paper,#F7F0E5); --ink:var(--mathsy-ink,#221E1C); --blue:var(--mathsy-blue,#2B4B9B);
  --red:var(--mathsy-red,#C0362C); --gold:var(--mathsy-gold,#E3AE38); --muted:var(--mathsy-muted,#686158); --line:var(--mathsy-line,#221e1c30);
  --serif:var(--mathsy-font-serif,Georgia,'Times New Roman',serif); --sans:var(--mathsy-font-sans,Arial,Helvetica,sans-serif);
  --mono:var(--mathsy-font-mono,'SFMono-Regular',Consolas,'Liberation Mono',monospace);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; color:var(--ink); background:var(--cream); font:16px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
.mathsy-v3-page { background-color:var(--cream); background-image:var(--mathsy-weave); }
body.dialog-open { overflow:hidden; }
::selection { color:var(--cream); background:var(--red); }
a { color:inherit; text-decoration:none; }
button,input,summary { font:inherit; }
button { color:inherit; cursor:pointer; }
button,a,input { -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; }
svg { max-width:100%; }
p,h1,h2,h3,figure { margin:0; }
h1,h2,h3 { font-weight:400; }
button,a,input,summary { touch-action:manipulation; }
:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
[hidden] { display:none !important; }
em { font-family:var(--serif); font-weight:400; }
.container { width:calc(100% - 112px); max-width:1240px; margin-inline:auto; }
.nowrap { white-space:nowrap; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-100px; left:16px; padding:12px 18px; background:var(--ink); color:var(--cream); z-index:100; }
.skip-link:focus { top:12px; }
.section-label { font:12px/1.5 var(--sans); color:var(--muted); letter-spacing:.04em; }

/* Three navigation links, with one paired country/language control on the far right. */
.site-header { position:relative; z-index:30; }
.nav-row { display:grid; grid-template-columns:1fr auto 1fr; gap:36px; align-items:center; min-height:94px; border-bottom:1px solid var(--line); }
.brand { justify-self:start; }
.brand img { width:172px; height:auto; }
.main-nav { display:flex; align-items:center; gap:35px; }
.nav-link { display:flex; align-items:center; padding:15px 0; min-height:46px; font-size:14px; font-weight:700; white-space:nowrap; }
.nav-link:hover { color:var(--red); }
.locale-picker { position:relative; justify-self:end; }
.locale-toggle { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 14px; background:transparent; border:1px solid var(--line); border-radius:25px; font-size:13px; }
.locale-toggle:hover,.locale-toggle[aria-expanded=true] { background:var(--paper); border-color:#221e1c60; }
.locale-toggle img { border-radius:2px; width:24px; height:18px; object-fit:contain; }
.chevron { width:13px; height:13px; margin-left:7px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .18s; }
[aria-expanded=true] .chevron { transform:rotate(180deg); }
.locale-menu { position:absolute; right:0; top:calc(100% + 12px); width:342px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--paper); box-shadow:0 16px 42px #221e1c21; }
.locale-menu-label { padding:8px 12px 11px; color:var(--muted); font-size:11px; }
.locale-option { width:100%; min-height:70px; display:flex; align-items:center; gap:13px; text-align:left; padding:12px; background:none; border:0; border-radius:6px; }
.locale-option:hover { background:#e8dfd0; }
.locale-option[aria-checked=true] { background:#eae1d3; }
.locale-option > span:nth-child(2) { flex:1; min-width:0; }
.locale-option strong { display:block; font-weight:500; font-size:15px; line-height:1.4; }
.locale-option small { display:block; font-size:10px; color:var(--muted); margin-top:3px; line-height:1.5; }
.locale-option img { border-radius:2px; flex-shrink:0; }
.selection-dot { width:13px; height:13px; border:1px solid #aaa193; border-radius:50%; position:relative; }
[aria-checked=true] .selection-dot { border-color:var(--blue); }
[aria-checked=true] .selection-dot::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--blue); }
.locale-menu-note { margin-top:6px; padding:11px 12px 6px; border-top:1px solid var(--line); font-size:11px; line-height:1.5; color:var(--muted); }

/* Quiet hero: just the idea, illustration and two actions. */
.hero { display:grid; grid-template-columns:1.2fr 1fr; gap:52px; align-items:center; padding-block:67px 66px; min-height:514px; }
h1 { font:88px/1.045 var(--serif); letter-spacing:-4.3px; }
h1 em { color:var(--red); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:12px; }
.hero-description { margin-top:30px; color:var(--muted); font-size:17px; line-height:1.85; max-width:440px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:13px 24px; border:1px solid transparent; border-radius:28px; font-size:13px; line-height:1.45; text-align:center; transition:background .18s,color .18s,border-color .18s; }
.button.primary { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.button.primary:hover { background:var(--blue); border-color:var(--blue); }
.button.outline { background:transparent; border-color:#221e1c80; }
.button.outline:hover { background:var(--paper); border-color:var(--ink); }
.button.cream { background:var(--cream); color:var(--ink); }
.button.cream:hover { background:var(--gold); }
.button.small { font-size:12px; min-height:44px; padding:10px 17px; }
.hero-figure { width:100%; max-width:480px; justify-self:end; }
#hero-proof { display:block; width:100%; height:auto; }

/* Bookshelf: native swipe/trackpad/keyboard scrolling, optional text-only controls. */
.textbooks-section { padding-block:35px 27px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.books-heading { display:flex; align-items:center; justify-content:space-between; gap:26px; margin-bottom:26px; }
.books-heading h2 { font:37px/1.15 var(--serif); letter-spacing:-1.1px; }
.books-description { margin-top:8px; color:var(--muted); font-size:13px; }
.books-actions { display:flex; align-items:center; gap:22px; }
.carousel-controls { display:flex; gap:8px; }
.carousel-button { padding:10px 15px; min-height:44px; background:transparent; border:1px solid var(--line); border-radius:23px; font-size:12px; }
.carousel-button:hover:not(:disabled) { background:var(--ink); border-color:var(--ink); color:var(--cream); }
.carousel-button:disabled { opacity:.35; cursor:default; }
.books-notice { color:var(--muted); font-size:12px; line-height:1.6; border-left:2px solid var(--red); padding-left:12px; margin:-7px 0 22px; }
.book-track { display:flex; gap:31px; overflow-x:auto; overflow-y:hidden; padding:9px 3px 23px; scroll-snap-type:x mandatory; scroll-padding-inline:3px; scrollbar-width:thin; scrollbar-color:#AEA392 #221e1c08; overscroll-behavior-x:contain; touch-action:pan-x pan-y; }
.book-track::-webkit-scrollbar { height:5px; }
.book-track::-webkit-scrollbar-track { background:#221e1c0b; }
.book-track::-webkit-scrollbar-thumb { background:#AEA392; border-radius:5px; }
.book-track.dragging { cursor:grabbing; scroll-snap-type:none; }
.book-card { flex:0 0 213px; width:213px; display:block; padding:0; border:0; border-radius:0; background:none; text-align:left; scroll-snap-align:start; user-select:none; -webkit-user-select:none; }
.book-object { display:block; position:relative; width:calc(100% - 5px); margin-bottom:20px; isolation:isolate; transition:transform .2s; }
.book-object::after { content:''; position:absolute; z-index:-1; inset:4px -5px -4px 5px; background:repeating-linear-gradient(to right,#d5c9b9 0px,#ede4d6 1px,#ede4d6 2px); border:1px solid #C5B9A9; border-radius:1px 4px 4px 1px; box-shadow:3px 7px 12px #221e1c16; }
.book-object img { display:block; width:100%; height:auto; aspect-ratio:300/420; border-radius:2px; -webkit-user-drag:none; }
.book-card:hover .book-object { transform:translateY(-5px); }
.book-card:hover .book-caption { color:var(--red); }
.book-caption { display:block; font-size:13px; line-height:1.5; }
.book-sample { display:block; margin-top:5px; font-size:10px; color:var(--muted); }

/* Preserve the mathematical video showcase from v2. */
.section-pad { padding-block:77px 79px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:35px; }
.section-heading h2 { font:61px/1.055 var(--serif); letter-spacing:-2.6px; }
.section-heading h2 em { color:var(--red); }
.section-heading-aside { width:292px; flex-shrink:0; padding-bottom:4px; }
.section-heading-aside p { color:var(--muted); font-size:14px; line-height:1.8; margin-bottom:15px; }
.text-link { display:inline-flex; align-items:center; justify-content:space-between; min-height:38px; padding:6px 0; color:inherit; background:none; border:0; border-bottom:1px solid currentColor; font-size:13px; line-height:1.5; }
.text-link:hover { color:var(--red); }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:23px; }
.video-card { display:block; min-width:0; border:0; padding:0; background:none; text-align:left; border-radius:0; }
.video-cover { display:block; position:relative; overflow:hidden; aspect-ratio:720/440; background:#1B211F; border-radius:3px; }
.video-cover img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.video-card:hover .video-cover img { transform:scale(1.035); }
.play-button { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:51px; height:51px; border:1px solid #f0e6d69c; border-radius:50%; color:var(--cream); background:#f0e6d619; backdrop-filter:blur(4px); transition:background .2s,color .2s; }
.play-button svg { width:23px; height:23px; fill:currentColor; margin-left:-1px; }
.video-card:hover .play-button { background:var(--cream); color:var(--ink); }
.preview-badge { position:absolute; bottom:12px; right:12px; padding:4px 7px; color:#eee6d9; background:#161a17dc; border:1px solid #f0e6d630; border-radius:2px; font:9px/1.5 var(--sans); }
.video-meta { display:block; margin:17px 0 8px; font:10px/1.5 var(--sans); color:var(--muted); }
.video-title { display:block; font:23px/1.2 var(--serif); letter-spacing:-.55px; }

/* One-to-one is now a destination, not a line above the footer. */
.tutoring-section { background:#E8DECE; border-block:1px solid var(--line); padding-block:78px; }
.tutoring-layout { display:grid; grid-template-columns:1fr 1.12fr; gap:72px; align-items:center; }
.tutoring-copy .section-label { margin-bottom:19px; }
.tutoring-copy h2 { font:56px/1.08 var(--serif); letter-spacing:-2px; }
.tutoring-copy h2 em { color:var(--red); }
.tutoring-description { margin-top:24px; font-size:15px; color:var(--muted); line-height:1.85; max-width:465px; }
.tutoring-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; margin-top:31px; }
.tutoring-actions .text-link { font-size:12px; }
.tutor-photo-card { overflow:hidden; background:var(--paper); border-radius:8px; box-shadow:0 13px 24px #221e1c0c; }
.tutor-photo { height:320px; overflow:hidden; }
.tutor-photo img { width:100%; height:100%; object-fit:cover; object-position:46% center; }
.tutor-caption { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:20px 27px 22px; }
.tutor-caption p { display:grid; gap:3px; }
.tutor-caption strong { color:var(--red); font:30px/1 var(--serif); letter-spacing:-1px; }
.tutor-caption span { color:var(--muted); font-size:11px; line-height:1.45; }
.tutor-caption a { flex:none; color:var(--ink); border-bottom:1px solid currentColor; font-size:10px; white-space:nowrap; }

/* Editorial article section; original destinations, localised preview copy. */
.article-layout { display:grid; grid-template-columns:1.12fr 1fr; gap:54px; }
.article-feature-image { overflow:hidden; background:#D8DEDF; }
.article-feature-image img { width:100%; height:auto; transition:transform .6s; }
.article-feature:hover img { transform:scale(1.025); }
.article-meta { display:block; font:10px/1.5 var(--sans); color:var(--muted); }
.article-feature > .article-meta { margin:20px 0 12px; }
.article-feature h3 { font:30px/1.23 var(--serif); letter-spacing:-.75px; max-width:550px; }
.article-feature > p { margin-top:12px; font-size:13px; color:var(--muted); line-height:1.7; }
.article-list { display:flex; flex-direction:column; justify-content:space-between; }
.article-row { display:grid; grid-template-columns:1fr 123px; gap:24px; padding:22px 0; border-top:1px solid var(--line); }
.article-row:first-child { padding-top:0; border-top:0; }
.article-row:last-child { padding-bottom:0; }
.article-row img { width:123px; height:123px; object-fit:cover; }
.article-row h3 { margin-top:9px; font:24px/1.2 var(--serif); letter-spacing:-.6px; }
.article-row .text-link { margin-top:9px; min-height:30px; padding:0; border:0; font-size:11px; }
.article-row:hover h3,.article-feature:hover h3 { color:var(--red); }
.destination-note { display:block; margin-top:10px; font-size:11px; color:var(--muted); }

/* Keep the community a substantial part of Mathsy. */
.community-section { background:var(--ink); color:var(--cream); padding-block:55px; }
.community-layout { display:grid; grid-template-columns:1.16fr 1fr; align-items:center; gap:40px; }
.community-copy h2 { font:63px/1.06 var(--serif); letter-spacing:-2.3px; }
.community-copy h2 em { color:var(--gold); }
.community-copy > p { max-width:390px; margin-top:24px; color:#C9C0B4; font-size:14px; line-height:1.85; }
.community-copy .button { margin-top:27px; gap:14px; }
.discord-icon { width:20px; height:20px; flex-shrink:0; }
.community-discord-widget { width:100%; max-width:410px; height:500px; justify-self:end; border:0; border-radius:8px; background:#313338; box-shadow:0 18px 48px rgba(0,0,0,.24); }
.community-section :focus-visible { outline-color:var(--gold); }
.site-footer { border-top:1px solid var(--line); }
.footer-row { display:flex; align-items:center; gap:28px; padding-block:28px; }
.footer-brand img { height:auto; }
.copyright { color:var(--muted); font-size:11px; }
.footer-nav { display:flex; gap:26px; margin-left:auto; }
.footer-nav a { display:inline-block; padding-block:12px; color:var(--muted); font-size:12px; }
.footer-nav a:hover { color:var(--red); }

/* Native modal dialogs: keyboard focus, Escape and working preview controls. */
dialog { max-width:calc(100vw - 32px); max-height:calc(100dvh - 36px); color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:6px; padding:24px; overscroll-behavior:contain; }
/* The app-wide reset sets every element's margin to zero, so restore the
   native dialog centring explicitly for the top-layer lesson player. */
dialog[open] { position:fixed; top:50%; left:50%; margin:0; transform:translate(-50%,-50%); }
dialog::backdrop { background:#221e1ca6; backdrop-filter:blur(5px); }
.video-dialog { width:860px; }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.close-dialog { width:44px; height:44px; flex-shrink:0; border:1px solid var(--line); border-radius:50%; background:none; font-size:25px; line-height:1; }
.close-dialog:hover { color:var(--cream); background:var(--ink); }
.video-stage { width:100%; aspect-ratio:720/440; overflow:hidden; background:#1B211F; }
.video-stage svg,.video-stage video { display:block; width:100%; height:100%; }
.video-dialog-copy { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-top:23px; }
.video-dialog-copy h2 { font:32px/1.15 var(--serif); letter-spacing:-1px; }
.video-dialog-copy p { max-width:510px; margin-top:10px; color:var(--muted); font-size:12px; line-height:1.7; }
.video-dialog-copy > .button { flex-shrink:0; }
.demo-controls { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:22px; padding-top:14px; border-top:1px solid var(--line); }
.demo-controls label { display:flex; align-items:center; gap:15px; font-size:12px; }
.demo-controls input { width:160px; accent-color:var(--red); }
.prototype-note { margin-top:16px; font-size:11px; line-height:1.6; color:var(--muted); }
.book-dialog { width:770px; }
.book-dialog-layout { display:grid; grid-template-columns:170px 1fr; gap:32px; align-items:start; }
.book-dialog-layout > img { width:170px; height:auto; border-radius:2px; }
.book-dialog h2 { font:31px/1.2 var(--serif); letter-spacing:-.7px; margin:6px 0 14px; }
.book-dialog h3 { font:21px/1.25 var(--serif); margin:18px 0 10px; }
.book-dialog-notice { font-size:12px; color:var(--muted); line-height:1.7; }
.book-dialog ul { padding-left:19px; margin:0; font-size:13px; line-height:1.85; }
.sample-lesson { border-top:1px solid var(--line); margin-top:28px; padding-top:16px; }
.sample-lesson summary { cursor:pointer; min-height:36px; font-size:13px; }
.sample-lesson-body > p { font-size:13px; line-height:1.75; color:var(--muted); }
.sample-lesson-body > .sample-formula { margin-top:20px; padding:18px; background:var(--paper); color:var(--blue); border-radius:4px; font:22px/1.6 var(--serif); text-align:center; }
.noscript-note { padding:16px; text-align:center; font-size:13px; background:var(--paper); }

@media (max-width:1200px) {
 .container { width:calc(100% - 80px); }
 .nav-row { gap:25px; }
 .main-nav { gap:27px; }
 .hero { gap:32px; padding-block:53px; min-height:450px; }
 h1 { font-size:clamp(57px,6.8vw,80px); letter-spacing:-3.5px; }
 .hero-description { font-size:15px; max-width:410px; }
 .hero-actions { gap:10px; }
 .hero-actions .button { padding-inline:19px; font-size:12px; }
 .section-heading h2 { font-size:56px; }
 .tutoring-layout { gap:45px; }
 .tutoring-copy h2 { font-size:49px; }
 .tutor-photo { height:300px; }
 .tutor-caption { padding:20px 23px; }
 .tutoring-actions { gap:19px; }
 .article-layout { gap:36px; }
 .article-row { grid-template-columns:1fr 108px; gap:20px; }
 .article-row img { width:108px; height:115px; }
 .article-row h3 { font-size:22px; }
 .community-copy h2 { font-size:56px; }
}
@media (max-width:900px) {
 .container { width:calc(100% - 56px); }
 .nav-row { gap:18px; min-height:84px; }
 .brand img { width:139px; }
 .main-nav { gap:19px; }
 .nav-link { font-size:12px; }
 .locale-toggle { font-size:12px; gap:8px; padding-inline:11px; }
 .chevron { margin-left:1px; }
 .hero { gap:20px; grid-template-columns:1.2fr 1fr; padding-block:45px; min-height:398px; }
 h1 { font-size:clamp(46px,6.5vw,60px); letter-spacing:-2.8px; }
 h1 em { text-underline-offset:8px; }
 .hero-description { font-size:14px; margin-top:24px; line-height:1.75; }
 .hero-actions { margin-top:24px; }
 .hero-actions .button { font-size:11px; padding:10px 15px; min-height:44px; }
 .books-heading h2 { font-size:33px; }
 .book-card { flex-basis:196px; width:196px; }
 .book-track { gap:27px; }
 .section-pad { padding-block:62px; }
 .section-heading { gap:26px; }
 .section-heading h2 { font-size:49px; letter-spacing:-2px; }
 .section-heading-aside { width:233px; }
 .section-heading-aside p { font-size:13px; }
 .video-grid { gap:18px; }
 .video-title { font-size:20px; }
 .preview-badge { font-size:8px; bottom:8px; right:8px; }
 .play-button { width:43px; height:43px; }
 .tutoring-section { padding-block:62px; }
 .tutoring-layout { gap:30px; }
 .tutoring-copy h2 { font-size:44px; letter-spacing:-1.7px; }
 .tutoring-description { font-size:14px; }
 .tutoring-actions { gap:10px; margin-top:25px; }
 .tutor-photo { height:274px; }
 .tutor-caption-title { font-size:23px; }
 .article-layout { gap:27px; }
 .article-feature h3 { font-size:25px; }
 .article-row { grid-template-columns:1fr 88px; gap:16px; padding-block:19px; }
 .article-row img { width:88px; height:96px; }
 .article-row h3 { font-size:20px; }
 .article-meta { font-size:9px; }
 .community-copy h2 { font-size:48px; }
 .community-copy > p { font-size:13px; }
 .community-section { padding-block:45px; }
}
@media (max-width:680px) {
 .container { width:calc(100% - 40px); }
 .nav-row { grid-template-columns:1fr auto; gap:0 18px; min-height:0; padding-top:18px; }
 .brand img { width:139px; }
 .locale-picker { grid-column:2; grid-row:1; }
 .main-nav { grid-column:1/-1; justify-content:center; gap:31px; margin-top:13px; }
 .nav-link { font-size:12px; padding-block:14px 17px; }
 .locale-toggle { min-height:40px; padding:9px 12px; }
 .locale-menu { width:min(342px,calc(100vw - 40px)); }
 .hero { grid-template-columns:1fr; gap:21px; padding-block:42px 30px; min-height:0; }
 h1 { font-size:clamp(51px,10.2vw,69px); letter-spacing:-2.6px; }
 .hero-description { font-size:15px; line-height:1.75; margin-top:25px; max-width:410px; }
 .hero-actions { margin-top:23px; gap:10px; }
 .hero-actions .button { font-size:12px; min-height:45px; padding-inline:18px; }
 .hero-figure { width:76%; max-width:330px; justify-self:center; }
 .textbooks-section { padding-top:26px; padding-bottom:23px; }
 .books-heading { align-items:flex-start; gap:15px; margin-bottom:18px; }
 .books-heading h2 { font-size:31px; letter-spacing:-.9px; }
 .books-description { margin-top:7px; font-size:12px; max-width:200px; }
 .books-actions { padding-top:0; }
 .carousel-controls { gap:6px; }
 .carousel-button { font-size:10px; min-height:40px; padding:9px 10px; }
 .book-card { flex-basis:182px; width:182px; }
 .book-track { gap:24px; margin-right:-20px; padding-right:20px; scroll-padding-right:20px; }
 .book-caption { font-size:12px; }
 .books-notice { font-size:11px; margin-top:2px; }
 .section-pad { padding-block:46px; }
 .section-heading { align-items:flex-start; flex-direction:column; gap:20px; margin-bottom:25px; }
 .section-heading h2 { font-size:43px; letter-spacing:-1.8px; }
 .section-heading-aside { width:100%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 22px; padding-bottom:0; }
 .section-heading-aside p { width:100%; max-width:330px; margin:0; font-size:13px; }
 .text-link { font-size:12px; min-height:34px; }
 .video-grid { grid-template-columns:1fr; gap:27px; }
 .video-cover { aspect-ratio:720/410; }
 .video-title { font-size:24px; }
 .video-meta { font-size:11px; margin:13px 0 6px; }
 .preview-badge { font-size:9px; padding:4px 8px; bottom:12px; right:12px; }
 .play-button { width:53px; height:53px; }
 .tutoring-section { padding-block:45px; }
 .tutoring-layout { grid-template-columns:1fr; gap:31px; }
 .tutoring-copy h2 { font-size:44px; letter-spacing:-1.7px; }
 .tutoring-copy .section-label { margin-bottom:15px; }
 .tutoring-description { margin-top:21px; font-size:15px; }
 .tutoring-actions { gap:23px; margin-top:25px; }
 .tutoring-actions .button { min-height:48px; font-size:12px; padding-inline:20px; }
 .tutor-photo { height:238px; }
 .tutor-caption { align-items:flex-start; flex-direction:column; padding:20px 22px; }
 .article-layout { grid-template-columns:1fr; gap:31px; }
 .article-feature h3 { font-size:28px; }
 .article-feature > p { font-size:13px; }
 .article-row { grid-template-columns:1fr 97px; padding-block:22px; gap:20px; }
 .article-row img { width:97px; height:107px; }
 .article-row h3 { font-size:23px; }
 .article-meta { font-size:10px; }
 .article-row .text-link { min-height:32px; font-size:12px; }
 .destination-note { margin-top:0; width:100%; }
 .community-layout { grid-template-columns:1fr; gap:18px; }
 .community-copy h2 { font-size:46px; letter-spacing:-1.8px; }
 .community-copy > p { font-size:14px; margin-top:21px; }
 .community-copy .button { margin-top:24px; }
 .community-discord-widget { justify-self:center; max-width:350px; height:500px; }
 .footer-row { flex-wrap:wrap; gap:15px; padding-block:24px; justify-content:space-between; }
 .footer-brand img { width:125px; }
 .copyright { font-size:10px; }
 .footer-nav { justify-content:center; gap:33px; margin:0; width:100%; }
 .footer-nav a { font-size:11px; }
 dialog { padding:17px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); }
 .video-dialog-copy { flex-direction:column; gap:18px; align-items:flex-start; }
 .video-dialog-copy h2 { font-size:28px; }
 .demo-controls { flex-direction:column; align-items:flex-start; gap:17px; }
 .demo-controls label { justify-content:space-between; width:100%; gap:12px; }
 .demo-controls input { width:45%; }
 .book-dialog-layout { grid-template-columns:106px 1fr; gap:19px; }
 .book-dialog-layout > img { width:106px; }
 .book-dialog h2 { font-size:24px; margin-top:0; }
 .book-dialog h3 { font-size:19px; }
 .book-dialog ul { font-size:12px; }
 .sample-lesson-body > .sample-formula { font-size:19px; overflow-wrap:anywhere; }
}
@media (max-width:380px) {
 .container { width:calc(100% - 32px); }
 .main-nav { gap:23px; }
 .brand img { width:127px; }
 .locale-menu { width:calc(100vw - 32px); }
 .hero { padding-top:35px; }
 h1 { font-size:49px; letter-spacing:-2.4px; }
 .hero-actions { gap:9px; }
 .hero-actions .button { padding-inline:14px; font-size:11px; }
 .books-heading { flex-direction:column; gap:13px; }
 .books-description { max-width:none; }
 .book-track { margin-right:-16px; padding-right:16px; }
 .tutoring-copy h2 { font-size:40px; }
 .tutoring-actions { gap:14px; }
 .tutoring-actions .button { font-size:11px; padding-inline:17px; }
 .article-row h3 { font-size:21px; }
 .book-dialog-layout { grid-template-columns:80px 1fr; gap:15px; }
 .book-dialog-layout > img { width:80px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none !important; transition:none !important; }
}
@media print {
 .locale-picker,.hero-actions,.carousel-controls,dialog,.video-cover .play-button,.skip-link,.noscript-note { display:none !important; }
 body { background:white; color:black; }
 .container { width:100%; }
 .book-track { overflow:visible; flex-wrap:wrap; }
 section { break-inside:avoid; }
 .community-section { background:white; color:black; }
}

/* TikTok reel treatment: duplicated, continuously translating Specframe track. */
.videos-section .section-heading-aside { align-self: end; }
.tiktok-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}
.mathsy-reel {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
.video-grid {
  display: flex;
  width: max-content;
  gap: 24px;
  padding: 0 0 14px;
  animation: mathsy-video-scroll 46s linear infinite;
}
.video-card {
  flex: 0 0 min(440px, 76vw);
}
.mathsy-reel:hover .video-grid,
.mathsy-reel:focus-within .video-grid { animation-play-state: paused; }
@keyframes mathsy-video-scroll {
  to { transform: translateX(calc(-33.333333% - 8px)); }
}
.video-cover { position: relative; }
.video-cover > img { transition: opacity .25s ease; }
.video-inline {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}
@media (prefers-reduced-motion: reduce) {
  .mathsy-reel { overflow-x: auto; }
  .video-grid { width: auto; padding-left: 24px; padding-right: 24px; animation: none; }
  .video-card:nth-child(n+5) { display: none; }
}
.video-inline + img { position: relative; z-index: 0; opacity: .18; }
.video-cover .play-button, .video-cover .preview-badge { z-index: 2; }
/* A gentle, continuous proof motion keeps the hero alive without hijacking it. */
#hero-proof .by-sq, #hero-proof .by-tri { transform-box: fill-box; }
#hero-proof .by-sq-yellow { transform-origin: top; animation: by-fold-y 620ms 260ms cubic-bezier(.2,.8,.25,1) both; }
#hero-proof .by-sq-blue { transform-origin: right; animation: by-fold-x 620ms 430ms cubic-bezier(.2,.8,.25,1) both; }
#hero-proof .by-sq-red { transform-origin: 28.6% 78.6%; animation: by-fold-r 700ms 600ms cubic-bezier(.2,.8,.25,1) both; }
#hero-proof .by-tri { animation: by-tri-in 520ms cubic-bezier(.2,.8,.25,1) both; }
@keyframes by-tri-in { from { opacity: 0; transform: scale(.86); } }
@keyframes by-fold-y { from { transform: scaleY(0); } }
@keyframes by-fold-x { from { transform: scaleX(0); } }
@keyframes by-fold-r { from { opacity: .2; transform: scale(.04) rotate(-14deg); } }