/* BestUm: a calmer product canvas, clear choices, and a guided booking demo. */
:root { --night: #101e36; --paper: #fafaf6; --ink: #1b2c43; --muted: #667487; }
html { scroll-padding-top: 114px; }
.header-wrap { position: sticky; top: 0; z-index: 20; background: #101e36f5; backdrop-filter: blur(18px); }
.header { height: 86px; border-bottom-color: #ffffff12; }
.header .nav a { position: relative; font-size: 14px; }
.nav a::after { content: ''; position: absolute; height: 3px; left: 50%; right: 50%; bottom: 1px; background: var(--lime); border-radius: 2px; transition: left .2s, right .2s; }
.nav a[aria-current]::after { left: 0; right: 0; }
.header-wrap.is-scrolled { box-shadow: 0 6px 24px #07132918; }
.hero-wrap { background: radial-gradient(ellipse at 80% 64%, #244a8f55, transparent 57%), var(--night); }
.hero-wrap::after { opacity: .055; background-size: 24px 24px; }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 56px; padding-top: 84px; }
.hero-copy { padding-bottom: 78px; }
.hero-eyebrow { margin-bottom: 26px; letter-spacing: .12em; color: #c3cfdf; }
.hero h1 { font-size: clamp(58px, 5.15vw, 76px); line-height: 1.1; letter-spacing: -.066em; }
.hero h1 .hero-title-line { display: block; color: #fcfdfb; white-space: nowrap; }
.hero h1 .hero-title-accent { color: #bcd0ef; }
.hero-lead { font-size: 17px; color: #b9c9df; max-width: 450px; margin-top: 28px; }
.hero-actions { margin-top: 30px; gap: 24px; }
.hero-actions .button { padding-inline: 22px; box-shadow: 0 3px 0 #a3be63; }
.hero-actions .button:active { box-shadow: 0 1px 0 #a3be63; }
.hero-personas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 30px; }
.hero-personas > span { color: #8fa3bf; font-size: 14px; margin-right: 5px; }
.hero-personas button { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 9px 12px; border: 1px solid #ffffff16; border-radius: 9px; background: transparent; color: #a2b4cc; font-size: 14px; transition: background .2s, border-color .2s, color .2s; }
.hero-personas .icon { width: 15px; height: 15px; }
.hero-personas button:hover { color: white; border-color: #ffffff45; }
.hero-personas button.is-active { background: #263852; border-color: #5f7591; color: white; }
.hero-scene { padding: 16px 0 114px; }
.scene-orbit, .scene-spark { display: none; }
.floating-label { top: -13px; left: auto; right: 24px; transform: none; border-radius: 8px; background: #223754; padding: 8px 12px; font-size: 14px; }
.week-window { transform: none; border-radius: 17px; box-shadow: 0 32px 80px #020a1b50, 0 0 0 9px #ffffff04; border-color: #ffffff60; }
.window-bar { padding: 12px 17px; background: #fbfcff; font-size: 14px; }
.window-dots { gap: 4px; }
.window-dots i { width: 4px; height: 4px; }
.week-workspace { display: grid; grid-template-columns: 70px minmax(0, 1fr); }
.week-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 21px 7px 14px; background: #f4f6f9; border-right: 1px solid #e7ebf1; }
.rail-brand { font-size: 24px; font-weight: 800; letter-spacing: -.08em; color: var(--ink); line-height: 1; margin-bottom: 8px; }
.rail-brand > span { color: var(--blue); }
.rail-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 54px; min-height: 52px; border-radius: 8px; color: #98a4b6; }
.rail-item .icon { width: 19px; height: 19px; }
.rail-item small { font-size: 14px; line-height: 1; }
.rail-selected { color: var(--blue); background: #e5eafd; }
.rail-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e0e7f1; font-size: 14px; font-weight: 600; color: #5c7295; margin-top: auto; }
.week-content { min-width: 0; padding: 25px 22px 20px; }
.week-content .section-topline h2 { font-size: 26px; letter-spacing: -.05em; }
.section-topline .micro { font-size: 14px; margin-bottom: 4px; }
.week-days { gap: 4px; margin: 23px 0 20px; }
.week-days button { min-height: 54px; border-radius: 8px; font-size: 14px; }
.week-days button span { font-size: 15px; }
.mini-lesson { border-radius: 9px; min-height: 94px; padding: 16px 13px; gap: 11px; position: relative; }
.mini-lesson::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: #899de8; }
.mini-lesson.peach::before { background: #dab38d; }
.mini-lesson h3 { font-size: 20px; }
.mini-lesson .micro, .mini-lesson p { font-size: 14px; }
.mini-lesson .lesson-icon, .mini-lesson .lesson-icon .icon { width: 28px; height: 28px; }
.week-bottom { font-size: 14px; margin-top: 19px; padding-top: 15px; }
.notification-float { transform: none; left: 104px; right: -12px; bottom: 12px; padding: 14px 16px; border-radius: 12px; background: #fcfdfd; box-shadow: 0 12px 34px #03102724; }
.notification-float strong { font-size: 14px; }
.notification-float p { font-size: 14px; }
.notification-float .notification-meta { font-size: 14px; }
.hero-bottom { padding-block: 20px; }

/* Segmented controls have a single moving selection surface. */
.format-tabs, .profile-tabs { position: relative; isolation: isolate; width: fit-content; max-width: 100%; padding: 5px; border-radius: 13px; background: #e9eced; gap: 4px; }
.format-tabs::before, .profile-tabs::before { content: ''; position: absolute; left: var(--tab-left, 5px); top: 5px; bottom: 5px; width: var(--tab-width, 98px); border-radius: 9px; background: white; box-shadow: 0 2px 5px #18273d10; z-index: -1; transition: left .25s var(--ease), width .25s var(--ease); }
.format-tabs button, .profile-tabs button { border: 0; border-radius: 8px; background: transparent; color: #6a7687; }
.format-tabs button { font-size: 14px; padding: 11px 20px; }
.format-tabs button.is-active, .profile-tabs button.is-active { color: var(--ink); background: transparent; border-color: transparent; }
.format-tabs button:hover, .profile-tabs button:hover { color: var(--ink); }
.profile-tabs { margin-top: 24px; margin-bottom: 20px; border-radius: 11px; }
.profile-tabs button { padding-inline: 12px; min-height: 42px; }
.profile-tabs::before { width: var(--tab-width, 44px); border-radius: 7px; }
.intro { padding-block: 94px 80px; }
.intro-grid { gap: 100px; }
.intro h2 { font-size: clamp(40px, 4.15vw, 60px); }
.intro-copy p { font-size: 16px; }
.journey-line { margin-top: 52px; padding-block: 23px; }
.formats { padding-bottom: 94px; }
.section-heading { margin-bottom: 36px; }
.format-panel { border-radius: 22px; min-height: 430px; }
.format-copy { padding: 40px 46px; }
.format-art { padding-block: 54px 65px; background: #e9edf8; }
.format-device { box-shadow: 0 22px 40px #18345b20; transform: rotate(-2deg); border-radius: 14px; }
.format-device .math-board { background: #f5f7fc; }
.art-ring { border-color: #b0bdd855; }
.art-ring::before, .art-ring::after { border-color: #b0bdd830; }
.art-note { box-shadow: 0 6px 16px #1728440c; border: 1px solid #ffffff70; }
.note-math { transform: rotate(-7deg); }
.note-english { transform: rotate(5deg); }
.location-scene { display: none; width: 100%; max-width: 380px; position: relative; }
.location-scene svg { width: 100%; height: auto; }
.location-caption { position: absolute; left: 0; right: 0; bottom: -14px; text-align: center; font-size: 14px; color: #a08671; }
.format-art:not([data-format-art="online"]) .format-device,
.format-art:not([data-format-art="online"]) .art-note { display: none; }
.format-art:not([data-format-art="online"]) .location-scene { display: block; }

.format-art[data-format-art="home"] .location-caption { color: #70896d; }

/* The demo now explains a choice of day and time, and keeps it through all steps. */
.demo-box { padding: 52px; border-radius: 26px; background: #14253f; }
.demo-heading { margin-bottom: 36px; }
.demo-heading h2 { font-size: clamp(36px, 3.5vw, 50px); }
.demo-heading .eyebrow { margin-bottom: 22px; }
.demo-layout { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.demo-navigation { min-width: 0; }
.demo-steps { gap: 10px; }
.demo-steps > button { padding: 22px 14px; border-radius: 11px; min-height: 94px; }
.demo-steps > button.is-active { background: #243b5b; border-color: #426082; }
.demo-steps > button.is-complete .step-number { background: #dcf799; color: #1b2c43; border-color: #dcf799; }
.step-number { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #53647e; border-radius: 50%; font-size: 14px; transition: background .2s, color .2s; }
.demo-note { margin-top: 25px; font-size: 14px; color: #9aacbf; }
.demo-panel { padding: 25px 28px; min-height: 565px; border-radius: 17px; }
.demo-panel-top { border: 0; margin: 0; padding: 0; }
.demo-progress { height: 3px; background: #e8edf4; border-radius: 3px; overflow: hidden; margin: 19px 0 22px; }
.demo-progress > span { display: block; height: 100%; width: 33.333%; background: #2855ef; border-radius: 3px; transition: width .25s var(--ease); }
.demo-panel [data-demo-view] { min-width: 0; }
.demo-panel h3 { font-size: 29px; letter-spacing: -.05em; }
.demo-field { margin-top: 21px; }
.demo-field legend { font-size: 14px; }
.choice { border-radius: 8px; min-height: 45px; font-size: 14px; }
.choice.is-active { border-color: #849de3; background: #f0f3fd; box-shadow: none; }
.demo-availability { display: grid; gap: 7px; }
.demo-days, .demo-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.demo-days button, .demo-times button { min-height: 39px; border-radius: 7px; border: 1px solid #e0e6ef; background: #fff; color: #7a879a; font-size: 14px; transition: background .2s, border-color .2s, color .2s; }
.demo-times button { font-size: 14px; }
.demo-days button.is-active { background: #1c304b; color: #fff; border-color: #1c304b; }
.demo-times button.is-active { background: #edf2fd; color: #2855ef; border-color: #8fa8ea; }
.demo-days button:hover, .demo-times button:hover { border-color: #8fa8ea; }
.demo-next { margin-top: 24px; min-height: 48px; border-radius: 9px; }
.demo-panel-bottom { margin-top: 19px; padding-top: 12px; }
.demo-calendar-date { margin-top: 36px; }
.demo-lesson { margin-top: 16px; padding-block: 25px; }
.demo-hint { margin-top: 24px; }
.demo-panel [data-demo-view="1"] .demo-next { margin-top: auto; }
.demo-panel [data-demo-view="1"] .demo-hint { margin-bottom: 24px; }
.demo-message { margin-top: 30px; padding: 23px; border-radius: 12px; }
.demo-panel [data-demo-view="2"] .demo-next { margin-top: auto; }
.demo-panel [data-demo-view="2"] .demo-message { margin-bottom: 26px; }
.family-section { background: #f0ece3; padding-block: 96px; }
.family-board { transform: none; border-color: #e3dfd4; box-shadow: 0 20px 55px #81715a10; padding: 30px; }
.family-lessons { min-height: 234px; }
.family-lesson { border-radius: 10px; background: #fff; border-color: #e7e6e2; }
.family-lesson h4 { font-size: 20px; }
.family-lesson p { font-size: 14px; }
.family-label { max-width: 370px; font-size: 14px; }
.payment-section { padding-block: 94px; }
.payment-art { min-height: 440px; background: #eaf0e5; border-radius: 20px; }
.receipt { transform: rotate(-1.5deg); box-shadow: 0 18px 34px #35503314; transition: transform .3s var(--ease), box-shadow .3s; }
.receipt.is-paid { transform: rotate(0); box-shadow: 0 22px 42px #4b714e1c; }
.payment-star { font-size: 58px; opacity: .7; }
.faq-section { padding-block: 84px; }
.faq-list summary { font-size: 14px; padding-block: 26px; }
.faq-list details[open] { background: #ffffff; }
.faq-list details { padding-inline: 12px; border-radius: 8px; transition: background .2s; }
.final-section { padding-block: 74px; background: #deefb5; }
.final-inner h2 { font-size: clamp(64px, 7vw, 96px); }
.final-inner h2 > span { color: #718d49; }
.final-arrow { opacity: .7; }
.footer { padding-block: 32px; }

@media (max-width: 1150px) {
  .hero { gap: 0 36px; padding-top: 62px; }
  .hero h1 { font-size: clamp(48px, 5.2vw, 62px); }
  .hero-lead { font-size: 15px; }
  .hero-actions { gap: 16px; }
  .hero-actions .button { padding-inline: 16px; }
  .hero-personas { margin-top: 24px; }
  .week-workspace { grid-template-columns: 58px minmax(0, 1fr); }
  .rail-item { width: 46px; }
  .week-content { padding: 20px 17px 17px; }
  .week-content .section-topline h2 { font-size: 23px; }
  .mini-lesson { min-height: 88px; gap: 8px; padding-inline: 11px; }
  .mini-lesson h3 { font-size: 17px; }
  .mini-lesson .micro, .mini-lesson p { font-size: 14px; }
  .mini-lesson .lesson-icon, .mini-lesson .lesson-icon .icon { width: 25px; height: 25px; }
  .notification-float { left: 65px; right: -5px; }
  .demo-box { padding: 38px; }
  .demo-layout { gap: 38px; }
  .demo-panel { padding: 24px; }
  .demo-steps > button { padding-inline: 10px; gap: 11px; }
  .demo-steps strong { font-size: 15px; }
  .family-board { padding: 24px; }
  .family-lesson h4 { font-size: 18px; }
  .family-lesson p { font-size: 14px; }
}
@media (max-width: 900px) and (min-width: 741px) {
  .header { height: 78px; }
  .hero { gap: 0 26px; padding-top: 52px; }
  .hero h1 { font-size: 43px; }
  .hero-copy { padding-bottom: 55px; }
  .hero-personas > span { flex-basis: 100%; margin-bottom: 2px; }
  .hero-actions .button { font-size: 14px; }
  .hero .demo-link { font-size: 14px; }
  .hero-actions { gap: 12px; }
  .week-rail { display: none; }
  .week-workspace { display: block; }
  .notification-float { left: 20px; padding: 13px; }
  .week-content .section-topline h2 { font-size: 22px; }
  .demo-box { padding: 28px; }
  .demo-layout { gap: 24px; }
  .demo-panel { padding: 21px; }
  .demo-steps strong { font-size: 14px; }
  .demo-steps small { font-size: 14px; }
  .step-number { width: 26px; height: 26px; }
  .demo-steps > button { gap: 8px; }
  .demo-steps > button > .icon { display: none; }
  .choice { font-size: 14px; gap: 5px; }
  .demo-panel h3 { font-size: 25px; }
  .family-board { padding: 19px; }
  .family-lesson h4 { font-size: 17px; }
  .family-lesson p { font-size: 14px; }
}
@media (max-width: 740px) {
  html { scroll-padding-top: 92px; }
  .header { height: 73px; }
  .hero { display: block; padding-top: 38px; }
  .hero-copy { padding-bottom: 0; }
  .hero-eyebrow { font-size: 14px; margin-bottom: 24px; }
  .hero h1 { font-size: clamp(39px, 10.7vw, 66px); line-height: 1.14; letter-spacing: -.065em; }
  .hero h1 .hero-title-line { white-space: nowrap; }
  .hero-lead { margin-top: 22px; font-size: 15px; line-height: 1.75; max-width: 450px; }
  .hero-actions { gap: 22px; margin-top: 25px; }
  .hero-actions .button { padding: 15px 19px; font-size: 14px; min-height: 51px; }
  .hero .demo-link { font-size: 14px; }
  .hero-personas { margin-top: 24px; gap: 6px; }
  .hero-personas > span { font-size: 14px; margin-right: 2px; }
  .hero-personas button { min-height: 42px; padding: 10px 11px; font-size: 14px; }
  .hero-personas .icon { width: 14px; height: 14px; }
  .hero-scene { width: min(100%, 460px); margin: 45px auto 0; padding: 8px 0 102px; }
  .floating-label { top: -17px; right: 12px; padding: 6px 9px; font-size: 14px; border-radius: 6px; }
  .messenger-mark { width: 17px; height: 17px; font-size: 14px; }
  .week-window { border-radius: 13px; box-shadow: 0 22px 42px #020a1b30, 0 0 0 5px #ffffff04; }
  .window-bar { padding: 10px 15px; font-size: 14px; }
  .week-workspace { grid-template-columns: 46px minmax(0, 1fr); }
  .week-rail { display: flex; gap: 9px; padding: 20px 4px 13px; }
  .rail-brand { font-size: 21px; margin-bottom: 9px; }
  .rail-item { width: 36px; min-height: 43px; }
  .rail-item .icon { width: 17px; height: 17px; }
  .rail-item small { display: none; }
  .rail-avatar { width: 20px; height: 20px; font-size: 14px; }
  .week-content { padding: 19px 13px 15px; }
  .week-content .section-topline h2 { font-size: 21px; }
  .section-topline .micro { font-size: 14px; }
  .week-content .tag { padding: 4px 6px; font-size: 14px; }
  .week-days { gap: 4px; margin: 17px 0; }
  .week-days button { min-height: 46px; font-size: 14px; padding-block: 6px; }
  .week-days button span { font-size: 14px; }
  .mini-lesson { min-height: 86px; padding: 14px 10px; gap: 8px; }
  .mini-lesson h3 { font-size: 16px; }
  .mini-lesson .micro, .mini-lesson p { font-size: 14px; }
  .mini-lesson .lesson-icon, .mini-lesson .lesson-icon .icon { width: 24px; height: 24px; }
  .lesson-dot { width: 4px; height: 4px; }
  .week-bottom { font-size: 14px; gap: 5px; margin-top: 16px; padding-top: 13px; }
  .week-bottom .icon { width: 11px; height: 11px; }
  .notification-float { left: 50px; right: -4px; bottom: 8px; padding: 12px; gap: 8px; border-radius: 10px; }
  .notification-logo { width: 28px; height: 28px; border-radius: 8px; }
  .notification-logo img { width: 23px; height: 23px; }
  .notification-float strong { font-size: 14px; }
  .notification-float p { font-size: 14px; }
  .notification-meta, .notification-meta span { font-size: 14px; }
  .notification-check { width: 20px; height: 20px; }
  .notification-check .icon { width: 12px; height: 12px; }
  .hero-bottom { font-size: 14px; padding-block: 17px; }
  .intro { padding-block: 57px 52px; }
  .intro-grid { gap: 23px; }
  .intro h2 { font-size: 39px; }
  .intro-copy p { font-size: 14px; line-height: 1.85; }
  .journey-line { margin-top: 29px; padding-block: 20px; }
  .section-heading { margin-bottom: 27px; }
  .formats { padding-bottom: 56px; }
  .format-tabs { gap: 0; padding: 4px; width: 100%; }
  .format-tabs::before { top: 4px; bottom: 4px; }
  .format-tabs button { flex: 1; flex-shrink: 1; justify-content: center; padding: 11px 7px; gap: 5px; min-height: 45px; font-size: 14px; }
  .format-tabs .icon { width: 16px; height: 16px; }
  .format-panel { border-radius: 16px; }
  .format-art { min-height: 294px; padding: 38px 32px 58px; }
  .format-copy { padding: 27px 24px; }
  .location-scene { max-width: 320px; }
  .location-caption { font-size: 14px; bottom: 5px; }
  .demo-section { padding-bottom: 56px; }
  .demo-box { border-radius: 0; padding: 42px 20px; }
  .demo-heading { margin-bottom: 22px; }
  .demo-heading h2 { font-size: 34px; }
  .demo-heading .eyebrow { margin-bottom: 20px; }
  .demo-badge { margin-top: 18px; }
  .demo-layout { display: block; }
  .demo-navigation { margin-bottom: 24px; }
  .demo-steps { gap: 7px; }
  .demo-steps > button { padding: 13px 10px; min-height: 106px; gap: 10px; }
  .demo-steps strong { font-size: 14px; }
  .step-number { width: 24px; height: 24px; border-radius: 50%; font-size: 14px; }
  .demo-note { margin: 14px 0 0; font-size: 14px; line-height: 1.8; }
  .demo-panel { padding: 22px; min-height: 585px; }
  .demo-panel h3 { font-size: 27px; }
  .demo-progress { margin-block: 17px 20px; }
  .demo-field { margin-top: 21px; }
  .demo-field legend { font-size: 14px; }
  .choice { min-height: 46px; font-size: 14px; }
  .demo-days button, .demo-times button { min-height: 44px; font-size: 14px; }
  .demo-panel-bottom { padding-top: 9px; margin-top: 15px; }
  .demo-next { min-height: 48px; font-size: 14px; }
  .demo-message { padding: 22px 18px; }
  .family-section { padding-block: 58px; }
  .family-grid { gap: 30px; }
  .family-copy h2 { font-size: 41px; }
  .family-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.85; }
  .family-label { font-size: 14px; margin-top: 20px; }
  .family-board { padding: 22px 17px; border-radius: 15px; }
  .profile-tabs { gap: 0; padding: 4px; width: 100%; margin-top: 21px; margin-bottom: 19px; }
  .profile-tabs::before { top: 4px; bottom: 4px; }
  .profile-tabs button { padding: 8px; font-size: 14px; flex: 1; justify-content: center; }
  .profile-tabs button:first-child { flex: .65; }
  .family-lesson { gap: 10px; padding: 17px 10px; }
  .family-lesson h4 { font-size: 18px; }
  .family-lesson p { font-size: 14px; }
  .family-day { padding-right: 10px; }
  .family-lessons { min-height: 227px; }
  .payment-section { padding-block: 58px; }
  .payment-art { min-height: 408px; }
  .payment-points h3 { font-size: 21px; }
  .payment-points p { font-size: 14px; }
  .payment-star { font-size: 44px; }
  .faq-section { padding-block: 56px; gap: 26px; }
  .faq-heading h2 { font-size: 37px; }
  .faq-list details { padding-inline: 6px; }
  .faq-list summary { font-size: 14px; padding-block: 23px; }
  .final-section { padding-block: 52px; }
  .final-inner h2 { font-size: clamp(47px, 10.4vw, 65px); }
  .final-bottom { margin-top: 25px; }
  .footer { padding-block: 28px 106px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 38px; }
  .hero-actions { gap: 15px; }
  .hero-actions .button { padding-inline: 15px; font-size: 14px; }
  .hero .demo-link { font-size: 14px; }
  .hero-personas button { padding-inline: 9px; font-size: 14px; }
  .week-workspace { grid-template-columns: 41px minmax(0, 1fr); }
  .week-content { padding-inline: 11px; }
  .week-content .section-topline h2 { font-size: 20px; }
  .mini-lesson h3 { font-size: 15px; }
  .mini-lesson .lesson-icon, .mini-lesson .lesson-icon .icon { width: 21px; height: 21px; }
  .notification-float { left: 43px; }
  .notification-float p { font-size: 14px; }
  .intro h2 { font-size: 36px; }
  .demo-box { padding-inline: 16px; }
  .demo-heading h2 { font-size: 31px; }
  .demo-steps strong { font-size: 14px; }
  .demo-panel { padding: 20px; }
  .choice { font-size: 14px; }
  .family-copy h2 { font-size: 38px; }
  .profile-tabs button { font-size: 14px; padding-inline: 7px; }
  .family-lesson h4 { font-size: 16px; }
  .family-lesson p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .format-tabs::before, .profile-tabs::before { transition: none; }
  .receipt, .receipt.is-paid { transform: none; }
}

/* Reading first: fewer annotations, real text sizes, and room for the UI. */
.header .nav a { font-size: 14px; }
.button-header, .header .button-header { font-size: 14px; }
.eyebrow, .hero-eyebrow, .hero .hero-eyebrow { font-size: 12px; }
.micro, .tag { font-size: 12px; }
.hero { padding-top: 58px; }
.hero-copy { padding-bottom: 40px; }
.hero-personas > span, .hero-personas button { font-size: 14px; }
.hero-personas button { min-height: 44px; padding: 10px 14px; }
.hero-scene { padding: 16px 0 20px; }
.window-bar { font-size: 12px; }
.week-content { padding: 22px; }
.week-content .section-topline h2 { font-size: 26px; }
.week-content .tag { font-size: 12px; }
.week-rail { gap: 16px; }
.rail-item { min-height: 44px; }
.rail-avatar { font-size: 12px; }
.week-days { margin-block: 22px 18px; }
.week-days button { font-size: 12px; min-height: 58px; color: #526078; }
.week-days button.is-active { color: white; }
.week-days button span { font-size: 17px; }
.mini-lesson { min-height: 111px; padding: 17px 14px; }
.mini-lesson h3 { font-size: 21px; line-height: 1.2; margin-top: 4px; }
.mini-lesson .micro, .mini-lesson p { font-size: 14px; line-height: 1.5; color: #53627a; }
.mini-lesson p { margin-top: 4px; }
.week-bottom { font-size: 12px; color: #5b6880; }
.notification-float { position: relative; left: auto; right: auto; bottom: auto; margin: 16px 0 0 70px; padding: 16px; }
.notification-float strong { font-size: 16px; line-height: 1.35; }
.notification-float p { font-size: 14px; line-height: 1.5; color: #5b6880; margin-top: 5px; }
.hero-bottom { font-size: 14px; }
.format-tabs button { font-size: 15px; min-height: 48px; }
.format-art:not([data-format-art="online"]) { padding: 35px 16px 62px; }
.location-scene { max-width: 540px; }
.location-illustration { width: 100%; height: auto; }
.home-illustration { display: none; }
.format-art[data-format-art="home"] .teacher-illustration { display: none; }
.format-art[data-format-art="home"] .home-illustration { display: block; }
.format-art:not([data-format-art="online"]) .art-ring,
.format-art:not([data-format-art="online"]) .art-dot { display: none; }
.art-caption { font-size: 14px; }
.math-board > span { font-size: 15px; }
.device-footer { font-size: 13px; }
.subject-tags > span { font-size: 13px; }
.format-copy > p { font-size: 17px; }
.demo-badge { font-size: 13px; }
.demo-steps strong { font-size: 18px; }
.demo-steps > button { min-height: 88px; }
.demo-note { font-size: 14px; line-height: 1.65; }
.step-number { font-size: 13px; }
.demo-field legend { font-size: 14px; }
.choice, .demo-days button, .demo-times button { font-size: 15px; min-height: 46px; }
.demo-panel { min-height: 620px; }
.demo-calendar-date { font-size: 16px; gap: 14px; flex-wrap: wrap; }
.demo-calendar-date .tag { font-size: 12px; }
.demo-lesson p, .demo-hint, .message-link { font-size: 15px; line-height: 1.6; }
.demo-lesson { gap: 12px; }
.demo-message > p { font-size: 17px; }
.message-sender, .message-sender > span { font-size: 13px; }
.reset-button, .demo-counter { font-size: 14px; }
.demo-next { font-size: 15px; }
.family-copy > p:not(.eyebrow) { font-size: 17px; }
.profile-tabs button { font-size: 14px; min-height: 46px; }
.owner-label, .family-day, .family-day strong { font-size: 14px; }
.family-lesson p { font-size: 14px; line-height: 1.5; margin-top: 5px; }
.family-lesson h4 { font-size: 21px; }
.family-lesson > .icon { display: none; }
.family-board-bottom { font-size: 14px; justify-content: flex-end; }
.payment-points > article > span { font-size: 14px; }
.payment-points p, .receipt > p, .receipt-status, .receipt-result { font-size: 15px; }
.receipt-note { font-size: 13px; }
.faq-list summary { font-size: 18px; }
.faq-list details > p { font-size: 16px; }
.footer p { font-size: 14px; }
.mobile-cta > span { font-size: 14px; }
.mobile-cta .button, .receipt .button, .final-actions .button { font-size: 15px; }
.dialog-content > .eyebrow, .messenger-option small { font-size: 14px; }
.text-link { font-size: 16px; }

/* Four acts, one natural scroll. Static by default and with reduced motion. */
.scroll-story { position: relative; background: #eeeef9; color: #1b2c43; margin-bottom: 88px; }
.story-pin { position: relative; overflow: clip; }
.story-inner { padding-block: 44px; }
.story-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.story-top .eyebrow { margin: 0; font-size: 12px; }
.story-top > a { display: flex; align-items: center; gap: 16px; font-size: 14px; flex-shrink: 0; padding-block: 12px; border-bottom: 1px solid currentColor; }
.story-top > a:hover { opacity: .65; }
.story-panel { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 64px; padding-block: 70px; }
.story-kicker { font-size: 14px; font-weight: 500; display: block; margin-bottom: 28px; }
.story-copy h2 { font-size: clamp(46px, 5.1vw, 74px); line-height: 1.08; letter-spacing: -.06em; }
.story-copy h2 em { font-style: normal; color: #5366bc; }
.story-copy p { font-size: 18px; line-height: 1.65; margin-top: 28px; color: #576781; }
.story-art { position: relative; display: grid; place-items: center; min-width: 0; height: 440px; isolation: isolate; }
.story-card { width: min(370px, 100% - 40px); padding: 25px; border: 1px solid #ffffff90; border-radius: 22px; box-shadow: 0 30px 75px #2736501c; background: #fff; color: #1b2c43; position: relative; }
.story-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: #65748a; }
.story-book { width: 105px; height: 105px; display: grid; place-items: center; color: #5366bc; background: #eceefc; border-radius: 24px; margin-block: 35px 26px; }
.story-book .icon { width: 62px; height: 62px; stroke-width: 1.5; }
.subject-card h3 { font-size: 33px; }
.subject-card > p { font-size: 15px; color: #65748a; margin-top: 12px; }
.story-card-foot { border-top: 1px solid #e5e9f1; margin-top: 27px; padding-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.story-dot { width: 7px; height: 7px; border-radius: 50%; background: #779459; }
.story-orbit { position: absolute; width: 460px; height: 460px; border: 1px solid #8494c53b; border-radius: 50%; z-index: -1; }
.orbit-two { width: 570px; height: 570px; opacity: .5; }
.story-formula { position: absolute; font-size: 50px; font-weight: 500; letter-spacing: -.07em; color: #8997ca; z-index: 1; }
.formula-one { left: 0; top: 10px; transform: rotate(-12deg); }
.formula-two { right: 0; bottom: 25px; transform: rotate(10deg); }
.calendar-card { transform: rotate(-3deg); }
.story-date { display: flex; flex-direction: column; align-items: flex-start; margin-block: 30px 28px; }
.story-date > span { font-size: 17px; }
.story-date > strong { font-size: 112px; line-height: 1.2; font-weight: 500; letter-spacing: -.08em; }
.story-calendar-lesson { display: flex; align-items: center; gap: 15px; border-top: 1px solid #dce3ee; padding-top: 22px; }
.story-calendar-lesson > .icon { width: 35px; height: 35px; color: #5366bc; }
.story-calendar-lesson h3 { font-size: 23px; }
.story-calendar-lesson p { font-size: 14px; color: #65748a; margin-top: 6px; }
.story-check { display: grid; place-items: center; width: 34px; height: 34px; background: #e9f2e4; color: #557f50; border-radius: 50%; flex-shrink: 0; margin-left: auto; }
.story-check .icon { width: 18px; height: 18px; }
.story-stamp { position: absolute; bottom: -5px; right: -6px; padding: 18px 23px; font-size: 16px; color: #fff; background: #344b39; display: flex; align-items: center; gap: 12px; border-radius: 12px; transform: rotate(5deg); box-shadow: 0 12px 32px #344b3920; }
.story-stamp .icon { width: 20px; height: 20px; }
.story-phone { width: min(330px, 100% - 44px); border: 7px solid #263a5a; border-radius: 37px; background: #e7edf7; padding: 12px 15px 30px; box-shadow: 0 26px 65px #020c2030; transform: rotate(5deg); }
.story-phone-top { width: 72px; height: 7px; border-radius: 10px; background: #263a5a; margin: 0 auto 26px; }
.story-phone-brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 650; color: #1b2c43; }
.story-phone-brand .tag { margin-left: auto; }
.story-bubble { margin-top: 23px; padding: 22px 18px; background: #fff; color: #1b2c43; border-radius: 15px 15px 15px 3px; }
.story-bell { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #eceefc; color: #5366bc; margin-bottom: 20px; }
.story-bubble h3 { font-size: 25px; line-height: 1.15; }
.story-bubble p { font-size: 16px; margin-top: 12px; color: #65748a; }
.story-link-label { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e5e9f1; display: flex; align-items: center; gap: 10px; font-size: 15px; color: #5366bc; }
.story-link-label > .icon { width: 24px; height: 24px; }
.story-delivered { display: flex; justify-content: flex-end; gap: 8px; align-items: center; font-size: 13px; color: #65748a; margin-top: 20px; }
.story-delivered > .icon { width: 16px; height: 16px; }
.story-classroom { position: relative; width: min(470px, 100%); border-radius: 18px; padding: 20px; color: #1b2c43; background: #fff; box-shadow: 0 30px 75px #2736501c; transform: rotate(-3deg); }
.story-board { margin-top: 20px; border-radius: 9px; padding: 30px 25px 12px; background: #1f3559; color: #dcf799; }
.story-board > span { font-size: 33px; letter-spacing: -.04em; }
.story-board > svg { width: 100%; height: 160px; margin-top: 12px; }
.story-lesson-bottom { display: flex; align-items: center; gap: 12px; font-size: 16px; margin-top: 17px; }
.story-lesson-bottom .story-check { margin-left: 0; }
.story-art-lesson .formula-one { font-size: 90px; color: #5b7b49; top: -14px; left: auto; right: -20px; }
.story-bottom { display: none; }
.has-scroll-story .scroll-story { height: 240svh; --story-header: 86px; --story-progress: 0; }
.has-scroll-story .story-pin { position: sticky; top: var(--story-header); height: calc(100svh - var(--story-header)); min-height: 570px; background: #eeeef9; transition: background .55s, color .55s; }
.has-scroll-story .story-inner { height: 100%; display: flex; flex-direction: column; padding-block: 26px 32px; }
.has-scroll-story .story-panels { flex: 1; min-height: 0; display: grid; }
.has-scroll-story .story-panel { grid-area: 1 / 1; padding-block: 25px; visibility: hidden; pointer-events: none; opacity: 0; }
.has-scroll-story .story-panel.is-current { visibility: visible; opacity: var(--scene-opacity, 1); }
.has-scroll-story .story-copy { transform: translateY(var(--scene-y, 0)); }
.has-scroll-story .story-art { transform: translateY(calc(var(--scene-y, 0px) * 1.2)) scale(var(--scene-scale, 1)) rotate(var(--scene-rotate, 0deg)); }
.has-scroll-story .story-orbit { transform: scale(calc(.95 + var(--story-progress) * .15)); }
.has-scroll-story .story-bottom { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.story-chapters { list-style: none; padding: 0; margin: 0; display: flex; gap: 32px; flex: 1; max-width: 780px; }
.story-chapters li { position: relative; border-top: 2px solid #8996b14d; padding-top: 14px; flex: 1; font-size: 14px; color: #64728a; transition: color .4s, border-color .4s; }
.story-chapters li > span { font-size: 12px; margin-right: 8px; opacity: .7; }
.story-chapters li.is-current { color: #1b2c43; border-color: #5366bc; }
.story-chapters li.is-past { border-color: #5366bc70; }
.story-scroll-cue { font-size: 13px; display: flex; align-items: center; gap: 20px; }
.story-scroll-cue > span { font-size: 24px; }
.has-scroll-story [data-story-stage="1"] .story-pin { background: #e9eddf; }
.has-scroll-story [data-story-stage="1"] .story-copy h2 em { color: #627d50; }
.has-scroll-story [data-story-stage="2"] .story-pin { background: #142541; color: #fff; }
.has-scroll-story [data-story-stage="2"] .story-copy h2 em { color: #bdccf4; }
.has-scroll-story [data-story-stage="2"] .story-copy p { color: #b4c4dd; }
.has-scroll-story [data-story-stage="2"] .story-chapters li { color: #9baac2; }
.has-scroll-story [data-story-stage="2"] .story-chapters li.is-current { color: #fff; border-color: #c5d1ff; }
.has-scroll-story [data-story-stage="3"] .story-pin { background: #dfeecc; }
.has-scroll-story [data-story-stage="3"] .story-copy h2 em { color: #668650; }
.scroll-reveal { opacity: 0; transform: translateY(34px) scale(.985); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.65,.2,1); }
.scroll-reveal.is-revealed { opacity: 1; transform: none; }

@media (min-width: 741px) and (max-width: 1100px) {
  .story-panel { gap: 26px; }
  .story-copy h2 { font-size: clamp(43px, 5.2vw, 60px); }
  .story-copy p { font-size: 16px; }
  .story-card { padding: 22px; width: min(340px, 100% - 20px); }
  .story-chapters { gap: 18px; }
  .story-chapters li { font-size: 13px; }
  .story-scroll-cue { display: none; }
  .family-lesson { padding-inline: 12px; gap: 12px; }
  .family-day { padding-right: 12px; }
  .family-lesson h4 { font-size: 19px; }
  .choice { font-size: 14px; }
  .choice .icon { display: none; }
}
@media (min-width: 741px) and (max-width: 1000px) {
  .hero { display: block; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: 62px; }
  .hero-lead { font-size: 18px; max-width: 560px; }
  .hero-scene { width: 570px; max-width: 100%; margin: 42px auto 0; }
  .hero-bottom { margin-top: 25px; }
  .has-scroll-story .scroll-story { --story-header: 78px; }
  .story-art { height: 400px; }
  .story-book { margin-block: 25px; width: 80px; height: 80px; }
  .subject-card h3 { font-size: 28px; }
  .story-date > strong { font-size: 96px; }
  .story-calendar-lesson h3 { font-size: 20px; }
  .story-calendar-lesson > .icon { display: none; }
  .story-phone { width: min(300px, 100%); }
  .story-phone-brand .tag { display: none; }
}
@media (max-width: 740px) {
  .header .button-header { font-size: 12px; padding: 10px; }
  .hero { padding-top: 34px; }
  .hero-lead { font-size: 17px; line-height: 1.65; }
  .hero-actions { gap: 18px; }
  .hero-actions .button, .hero .demo-link { font-size: 14px; }
  .hero-actions .button { padding-inline: 17px; }
  .hero-personas > span { flex-basis: 100%; margin: 0 0 2px; }
  .hero-scene { margin-top: 30px; padding: 8px 0 20px; }
  .week-workspace { display: block; }
  .week-rail { display: none; }
  .week-content { padding: 20px 17px; }
  .week-content .section-topline h2 { font-size: 25px; }
  .week-days { margin-block: 18px; }
  .week-days button { font-size: 12px; min-height: 56px; }
  .week-days button span { font-size: 17px; }
  .mini-lesson { min-height: 108px; gap: 12px; padding-inline: 14px; }
  .mini-lesson h3 { font-size: 21px; }
  .mini-lesson .micro, .mini-lesson p { font-size: 14px; }
  .mini-lesson .lesson-icon, .mini-lesson .lesson-icon .icon { width: 27px; height: 27px; }
  .week-bottom { font-size: 12px; }
  .notification-float { margin: 14px 0 0 16px; padding: 15px; gap: 10px; }
  .notification-float strong { font-size: 16px; }
  .notification-float p { font-size: 14px; }
  .notification-check { display: none; }
  .hero-bottom { font-size: 13px; }
  .format-tabs { gap: 0; }
  .format-tabs button { font-size: 13px; line-height: 1.4; padding: 11px 9px; }
  .format-tabs .icon { display: none; }
  .format-copy > p { font-size: 16px; }
  .format-copy .button { font-size: 14px; }
  .art-caption { font-size: 13px; }
  .format-art:not([data-format-art="online"]) { min-height: 300px; padding-inline: 10px; }
  .demo-heading h2 { font-size: 33px; }
  .demo-steps { gap: 6px; }
  .demo-steps > button { min-height: 105px; padding: 12px 9px; }
  .demo-steps strong { font-size: 13px; }
  .step-number { font-size: 12px; }
  .demo-note { font-size: 14px; }
  .demo-panel { min-height: 640px; padding: 22px 18px; }
  .demo-panel h3 { font-size: 28px; }
  .demo-field legend { font-size: 14px; }
  .choice { font-size: 14px; }
  .choice .icon { display: none; }
  .demo-days button, .demo-times button { font-size: 15px; }
  .demo-next { font-size: 14px; }
  .demo-hint { font-size: 14px; }
  .demo-lesson h4 { font-size: 24px; }
  .demo-message { padding-inline: 18px; }
  .message-link { font-size: 14px; }
  .profile-tabs button { font-size: 13px; padding: 9px 8px; }
  .profile-tabs button .avatar { display: none; }
  .family-copy > p:not(.eyebrow) { font-size: 16px; }
  .family-lesson { padding: 18px 12px; gap: 12px; }
  .family-lesson h4 { font-size: 20px; }
  .family-lesson p, .owner-label, .family-day, .family-day strong { font-size: 13px; }
  .family-day { padding-right: 12px; }
  .family-lessons { min-height: 275px; }
  .payment-points p, .receipt > p { font-size: 15px; }
  .payment-art { padding-inline: 22px; }
  .receipt { width: 310px; padding-inline: 22px; }
  .receipt-note { font-size: 13px; }
  .receipt-status { font-size: 14px; }
  .faq-list summary { font-size: 17px; }
  .faq-list details > p { font-size: 16px; }
  .final-actions .button, .mobile-cta .button { font-size: 14px; }
  .footer p { font-size: 13px; }
  .scroll-story { margin-bottom: 60px; }
  .story-inner { padding-block: 28px; }
  .story-top { gap: 20px; }
  .story-top .eyebrow { font-size: 11px; letter-spacing: .06em; max-width: 190px; }
  .story-top > a { font-size: 12px; gap: 8px; }
  .story-panel { grid-template-columns: minmax(0, 1fr); gap: 15px; padding-block: 36px; }
  .story-kicker { margin-bottom: 15px; font-size: 12px; }
  .story-copy h2 { font-size: clamp(34px, 9.5vw, 49px); line-height: 1.07; }
  .story-copy p { font-size: 16px; line-height: 1.55; margin-top: 16px; }
  .story-art { height: 320px; width: 100%; max-width: 380px; margin: auto; }
  .story-card { width: min(300px, 100% - 40px); padding: 20px; border-radius: 17px; }
  .story-card-top { font-size: 13px; }
  .story-card-top .tag { font-size: 12px; }
  .story-book { margin-block: 20px 18px; width: 70px; height: 70px; border-radius: 18px; }
  .story-book .icon { width: 43px; height: 43px; }
  .subject-card h3 { font-size: 28px; }
  .subject-card > p { font-size: 14px; margin-top: 10px; }
  .story-card-foot { margin-top: 20px; padding-top: 16px; font-size: 13px; }
  .story-formula { font-size: 38px; }
  .formula-one { top: -1px; }
  .formula-two { bottom: 8px; }
  .story-orbit { width: 340px; height: 340px; }
  .orbit-two { width: 430px; height: 430px; }
  .story-date { margin-block: 15px; }
  .story-date > strong { font-size: 76px; line-height: 1.1; }
  .story-date > span { font-size: 15px; }
  .story-calendar-lesson { padding-top: 16px; gap: 10px; }
  .story-calendar-lesson h3 { font-size: 20px; }
  .story-calendar-lesson p { font-size: 13px; }
  .story-calendar-lesson > .icon { width: 26px; height: 26px; }
  .story-check { width: 28px; height: 28px; }
  .story-stamp { bottom: -7px; right: 3px; font-size: 14px; padding: 13px 17px; }
  .story-phone { width: 274px; max-width: calc(100% - 30px); padding: 10px 13px 18px; border-width: 6px; border-radius: 28px; }
  .story-phone-top { margin-bottom: 15px; width: 59px; height: 5px; }
  .story-phone-brand { font-size: 16px; }
  .story-phone-brand img { width: 26px; height: 26px; }
  .story-phone-brand .tag { font-size: 12px; padding: 3px 6px; }
  .story-bubble { margin-top: 14px; padding: 17px; }
  .story-bell { width: 32px; height: 32px; margin-bottom: 12px; border-radius: 8px; }
  .story-bell .icon { width: 20px; height: 20px; }
  .story-bubble h3 { font-size: 23px; }
  .story-bubble p { font-size: 15px; margin-top: 9px; }
  .story-link-label { margin-top: 15px; padding-top: 12px; font-size: 14px; }
  .story-delivered { margin-top: 12px; font-size: 12px; }
  .story-classroom { padding: 17px; border-radius: 15px; width: calc(100% - 12px); }
  .story-board { padding: 22px 20px 10px; margin-top: 15px; }
  .story-board > span { font-size: 27px; }
  .story-board > svg { height: 135px; margin-top: 0; }
  .story-lesson-bottom { font-size: 14px; margin-top: 12px; }
  .story-art-lesson .formula-one { font-size: 66px; right: -5px; }
  .has-scroll-story .scroll-story { height: 230svh; --story-header: 73px; }
  .has-scroll-story .story-pin { min-height: 570px; }
  .has-scroll-story .story-inner { padding-block: 12px 22px; }
  .has-scroll-story .story-top { min-height: 44px; }
  .has-scroll-story .story-panel { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 22px; padding-block: 15px; }
  .has-scroll-story .story-art { height: 320px; flex-shrink: 0; }
  .has-scroll-story .story-bottom { gap: 0; }
  .story-chapters { gap: 12px; }
  .story-chapters li { font-size: 12px; padding-top: 12px; }
  .story-chapters li > span { display: none; }
  .story-scroll-cue { display: none; }
}
@media (max-width: 380px) {
  .hero-actions { gap: 8px; }
  .hero-actions .button { font-size: 13px; padding-inline: 13px; gap: 8px; }
  .hero .demo-link { font-size: 13px; gap: 6px; }
  .hero .play-circle { width: 28px; height: 28px; }
  .header .button-header { font-size: 11px; }
  .week-content { padding-inline: 14px; }
  .mini-lesson { gap: 10px; padding-inline: 11px; }
  .mini-lesson h3 { font-size: 20px; }
  .format-tabs button { font-size: 12px; padding-inline: 5px; }
  .demo-steps strong { font-size: 12px; }
  .demo-panel { padding-inline: 17px; }
  .choice { font-size: 13px; padding-inline: 6px; }
  .letter-icon { display: none; }
  .profile-tabs button { font-size: 12px; }
  .family-lesson { padding-inline: 10px; gap: 10px; }
  .family-lesson h4 { font-size: 19px; }
  .family-day { padding-right: 10px; }
  .story-chapters { gap: 8px; }
  .story-chapters li { font-size: 11px; }
}
@media (max-height: 800px) and (min-height: 660px) {
  .has-scroll-story .story-inner { padding-block: 12px 20px; }
  .has-scroll-story .story-copy h2 { font-size: clamp(34px, 4.8vw, 64px); }
  .has-scroll-story .story-kicker { margin-bottom: 16px; }
  .has-scroll-story .story-copy p { margin-top: 16px; }
}
@media (max-height: 800px) and (min-height: 660px) and (max-width: 740px) {
  .has-scroll-story .story-copy h2 { font-size: 34px; }
  .has-scroll-story .story-copy p { font-size: 15px; margin-top: 12px; }
  .has-scroll-story .story-kicker { margin-bottom: 10px; }
  .has-scroll-story .story-panel { gap: 12px; padding-block: 10px; }
  .has-scroll-story .story-art { height: 288px; }
  .has-scroll-story .story-top { min-height: 36px; }
  .has-scroll-story .story-top .eyebrow { display: none; }
  .has-scroll-story .story-top > a { margin-left: auto; padding-block: 8px; }
  .has-scroll-story .story-bottom { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; transform: none; }
  .story-card, .story-classroom, .story-phone, .story-stamp { transform: none; }
}
@media print {
  .has-scroll-story .scroll-story { height: auto; }
  .has-scroll-story .story-pin { position: static; height: auto; }
  .has-scroll-story .story-panels { display: block; }
  .has-scroll-story .story-panel { visibility: visible; opacity: 1; break-inside: avoid; }
  .has-scroll-story .story-copy, .has-scroll-story .story-art { transform: none; }
  .scroll-reveal { opacity: 1; transform: none; }
}

@media (max-width: 740px) {
  .hero-copy { padding-bottom: 0; }
  .footer { padding-bottom: 30px; }
}

.hero-bottom > .formats-shortcut { width: auto; height: auto; min-height: 44px; border: 0; border-radius: 0; text-decoration: underline; text-underline-offset: 4px; }