/* Shared visual finish. Content remains usable without animation or JavaScript. */
:root{--ease-out:cubic-bezier(.2,.7,.25,1);--shadow-soft:0 8px 28px #17283808;--shadow-lift:0 18px 40px #17283812}
::selection{background:#dfbaa3;color:#172838}
html{scroll-padding-top:0}
[id]{scroll-margin-top:110px}
body{overflow-wrap:break-word}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
button.button{border:1px solid transparent}
.button:disabled{opacity:.45;transform:none;box-shadow:none}
:is(input,select,textarea):focus-visible{outline:2px solid #b97c60;outline-offset:3px}
.site-header{position:sticky;top:0;z-index:30;background:#f7f5f0f2;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:box-shadow .25s,border-color .25s}
.site-header.is-scrolled{box-shadow:0 5px 25px #1728380c;border-bottom-color:#d9d9d299}
.header-inner{gap:30px}
.brand-mark{display:flex;align-items:center;justify-content:center;border-radius:5px;box-shadow:0 3px 8px #17283812;transition:background .25s}
.brand:hover .brand-mark{background:#345067}
.nav{gap:23px}
.nav a{position:relative;padding:8px 0}
.nav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
.nav a:hover:after,.nav a[aria-current]:after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--navy)}
.header-cta,.button,.ghost-button,.small-action{border-radius:6px}
.header-cta{transition:background .2s,box-shadow .2s,transform .2s}
.header-cta:hover{background:#2b4357;box-shadow:0 5px 15px #17283818}
.header-cta.is-signed-in .account-name{color:#fff}
.button{transition:transform .22s var(--ease-out),background .22s,box-shadow .22s}
.button-dark:hover,.home-links a:hover{background:#2b4357;box-shadow:0 7px 18px #17283818}
.button-light:hover{background:#fff;box-shadow:0 7px 25px #0002}
.button:active,.header-cta:active{transform:translateY(0) scale(.98)}
.text-link{transition:color .2s,border-color .2s}
.text-link:hover{color:#b97c60}
.hero,.sub-hero,.cabinet-hero{position:relative;background:radial-gradient(ellipse at 15% 0%,#65737b25,transparent 60%),linear-gradient(125deg,#1e3445,#122433);isolation:isolate}
.hero:before,.sub-hero:before,.cabinet-hero:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(115deg,transparent 70%,#ffffff03 70.1%,transparent 70.25%)}
.hero-grid{min-height:640px}
.hero-copy{padding-top:74px;padding-right:36px;padding-bottom:32px}
.hero-visual{min-height:560px;margin:28px 0 28px 20px;border-radius:14px;box-shadow:0 20px 55px #07152238;background:#263e4a}
.hero-visual>img{position:absolute;inset:0;object-position:center 27%}
.hero-visual:after{inset:40% 0 0;background:linear-gradient(transparent,rgba(9,20,30,.8))}
.visual-caption{left:28px;right:28px;bottom:28px}
.caption-label{letter-spacing:.16em}
.hero-bottom{border-top:1px solid #72828d40;margin-top:40px;padding-top:20px}
.hero h1,.sub-hero h1,.section h2{ text-wrap:balance }
.hero-lead,.section-intro{line-height:1.8}
.sub-hero{padding:74px 0 80px}
.sub-hero .sub-actions{margin-top:28px}
.section-heading .eyebrow,.home-feature-head .eyebrow{margin-bottom:19px}
.metrics{border-radius:10px;border:1px solid var(--line);background:#ffffff42;overflow:hidden}
.metrics>div:first-child{padding-left:26px}
.metrics strong{font-size:56px}
.metrics>div{transition:background .25s}
.metrics>div:hover{background:#fff9}
.filter{min-height:39px;transition:background .2s,color .2s,box-shadow .2s}
.filter.is-active{box-shadow:0 4px 10px #17283818}
.course-grid,.teacher-grid,.feature-card-grid,.proof-strip{gap:18px}
.course-card,.teacher-card,.feature-card,.proof-card{border-radius:12px;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s}
.course-card{position:relative;overflow:hidden;background:#fffdf8}
.course-card:before{content:'';position:absolute;top:0;left:25px;right:25px;height:3px;background:var(--copper);transform:scaleX(.16);transform-origin:left;transition:transform .35s var(--ease-out)}
.course-card:hover:before,.course-card:focus-within:before{transform:scaleX(1)}
.course-card:hover,.teacher-card:hover,.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:#c8b4a5}
.course-card h3{margin-top:32px}
.course-grid:has(.course-card[hidden]){grid-template-columns:minmax(0,680px)}
.course-grid:has(.course-card[hidden]) .course-card{min-height:300px}
.course-grid:has(.course-card[hidden]) .course-card h3{margin:22px 0 16px}
.card-tags span,.demo-badge{border-radius:4px}
.card-arrow,.feature-arrow{transition:color .2s,translate .25s}
.course-card:hover .card-arrow{translate:3px -3px;color:var(--copper)}
.feature-card:hover .feature-arrow{color:#a56e52;translate:3px 0}
.teacher-card img{border-bottom:1px solid #e5e2d9}
.teacher-card-content{padding:24px}
.teacher-card h3{line-height:1.13}
.teacher-card p{min-height:66px}
.teacher-card a{padding-bottom:4px;transition:color .2s}
.teacher-card a:hover{color:#a56e52}
.team-note{border-radius:8px;border:1px solid #dedbd0}
.materials-photo{border-radius:12px;box-shadow:0 18px 40px #17283812}
.materials-photo img{transition:transform .7s var(--ease-out)}
.materials-photo:hover img{transform:scale(1.025)}
.step>span{display:flex;align-items:center;justify-content:center;width:43px;height:43px;border:1px solid #8a77665c;border-radius:50%;font-size:20px}
.step h3{margin-top:4px}
.signature{border-left:2px solid var(--copper);padding-left:17px}
.proof-card small{line-height:1.6}
.proof-card strong{margin-top:12px}
.contact-card,.detail-cta,.practice-box,.quiz-form,.quiz-result{border-radius:12px}
.contact-card{box-shadow:0 20px 50px #0002;border-top:3px solid #bd896c}
.home-links a{border-radius:6px;transition:background .2s,transform .2s,box-shadow .2s}
.home-links a:hover{transform:translateY(-2px)}
.faq summary{transition:color .2s;padding:22px 0}
.faq[open] summary{color:#a16d52}
.faq summary:after{transition:transform .2s}
.quiz-form label,.practice-option{border-radius:7px;transition:background .2s,border-color .2s}
.practice-option:hover{background:#f7f5f0}
.quiz-form label:has(input:checked){box-shadow:inset 3px 0 #b97c60}
.auth-panel,.auth-aside,.dashboard-panel{border-radius:12px;box-shadow:var(--shadow-soft)}
.auth-aside{background:linear-gradient(135deg,#eee7dd,#e9ebe4)}
.auth-aside h2{font-size:32px;line-height:1.18}
.auth-tabs{display:flex;background:#f0f1ec;border-radius:8px;padding:5px;width:fit-content}
.auth-tabs button{border:0;border-radius:5px;background:transparent;padding:11px 15px;font-size:12px;transition:background .2s,color .2s,box-shadow .2s}
.auth-tabs button.active{box-shadow:0 3px 7px #17283812}
.demo-notice{border-radius:0 8px 8px 0;background:#efe6dcaa}
.demo-accounts{border-radius:8px;border:1px solid #dedfd8}
.field input,.field select,.mini-form input,.mini-form textarea,.workbench-block textarea{border-radius:6px;background:#fdfdfa;transition:border-color .2s,box-shadow .2s}
.field input:hover,.field select:hover{border-color:#9eaaa7}
.field input:focus,.field select:focus{border-color:var(--copper);box-shadow:0 0 0 3px #b97c6012}
.dashboard-head{padding:8px 0 20px;border-bottom:1px solid var(--line)}
.dashboard-head h2{font-size:36px}
.dashboard-grid{align-items:start;gap:22px}
.dashboard-panel{padding:28px}
.dashboard-panel h3{letter-spacing:-.025em}
.relationship-panel{border-top:3px solid #b78a70}
.teacher-pick{border-radius:9px;padding:9px;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}
.teacher-pick img{border-radius:5px}
.teacher-pick span{display:block;line-height:1.4;padding:3px 2px}
.teacher-pick:hover:not(:disabled){transform:translateY(-3px);border-color:#ac8670;box-shadow:0 5px 14px #17283810}
.teacher-pick.selected{border:2px solid #a77c60;background:#f7f0e7;padding:8px}
.assigned-teacher img{box-shadow:0 6px 18px #17283815}
.cabinet-shortcuts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;padding:2px 0}
.cabinet-shortcuts a{padding:10px 16px;font-size:12px;font-weight:700;border:1px solid #d5d9d4;border-radius:100px;background:#ffffffa6;transition:background .2s,border-color .2s}
.cabinet-shortcuts a:hover{background:#fff;border-color:#a67b62}
.slot-grid{gap:9px}
.slot-grid .slot{border-radius:7px;min-height:62px}
.slot-grid .slot.planned{box-shadow:inset 0 -2px #57997430}
.lesson-row,.queue-item{border-radius:7px}
.lesson-row{background:#fcfcf9;padding:16px}
.lesson-row-actions button,.queue-actions button{border-radius:5px;transition:background .2s,border-color .2s}
.lesson-row-actions button:hover{background:#eee9e0}
.lesson-list{max-height:625px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c0c8c1 transparent;padding-right:4px;overscroll-behavior:contain}
.status-pill{border-radius:100px;padding:6px 9px;font-size:9px}
.empty-state{border:1px dashed #d6dcd5;border-radius:8px;background:#f5f6f1;color:#66736b}
.workbench-block{border-radius:9px;background:#fafbf7}
.workbench-block h4{margin-bottom:12px}
.mini-form button,.roster-person{border-radius:5px;transition:background .2s}
.mini-form button:hover{background:#2b4357}
.word-picture{width:48px;height:48px;display:grid;place-items:center;background:#f2e9de;border-radius:10px;font-size:26px}
.note-archive button{border-radius:5px}
.homework-item{padding:15px 0}
.homework-item input{width:16px;height:16px;flex:none;margin:0;cursor:pointer}
.acceptance-notice{border-radius:0 7px 7px 0}
.analytics-demo{border-radius:8px;line-height:1.6}
.exercise-menu button{border-radius:9px}
.exercise-main{border-radius:13px;box-shadow:var(--shadow-soft)}
.exercise-main-head h3{letter-spacing:-.03em}
.exercise-line,.step-card{border-radius:9px}
.exercise-line{padding:12px 18px}
.exercise-line-copy select,.exercise-line-copy input{border-radius:4px 4px 0 0}
.answer-buttons button{border-radius:7px;min-height:48px}
.answer-buttons button.correct{animation:answer-settle .3s var(--ease-out)}
.exercise-progress{border-radius:10px}
.exercise-progress i{border-radius:inherit}
.exercise-finish{border-radius:10px}
.exercise-next{border-radius:10px;background:linear-gradient(120deg,#e9e5db,#e7ebe3)}
.site-footer{border-top:1px solid #dfe0d8}
.footer-links a{transition:color .2s}
.footer-links a:hover{color:#a16d52;text-decoration:none}
.menu-toggle span{transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.motion-reveal{animation:soft-enter .65s var(--ease-out) both}
@keyframes soft-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes answer-settle{from{transform:scale(.96)}to{transform:scale(1)}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out .16s ease both}
::view-transition-new(root){animation:page-in .22s ease both}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0}to{opacity:1}}
@media(hover:none){.course-card:hover,.teacher-card:hover,.feature-card:hover,.teacher-pick:hover:not(:disabled){transform:none}}
@media(max-width:1100px){.header-inner{gap:20px}.nav{gap:17px}.hero-copy{padding-right:22px}.hero-visual{margin-left:10px}.course-grid,.teacher-grid{gap:16px}.hero h1{font-size:clamp(46px,5vw,64px)}}
@media(max-width:1050px){
  .header-inner{min-height:72px}.header-cta{margin-left:auto}.menu-toggle{display:flex;flex-direction:column;gap:4px;order:3;background:none;border:0;padding:10px}
  .menu-toggle span{width:20px;height:2px;background:var(--navy)}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#f7f5f0;border-bottom:1px solid var(--line);padding:14px 24px 24px;box-shadow:0 15px 20px #17283810;flex-direction:column;align-items:stretch;gap:0}
  .nav.is-open{display:flex;animation:soft-enter .2s var(--ease-out)}
  .nav a{padding:13px 7px;border-bottom:1px solid #ddded6}.nav a:after{display:none}.nav a[aria-current]{color:#a16d52}
}
@media(max-width:760px){
  [id]{scroll-margin-top:92px}.header-inner{min-height:68px;gap:15px}.nav{padding-inline:18px;background:#f7f5f0}
  .hero-grid{min-height:0}.hero-copy{padding:52px 0 30px}.hero h1{font-size:clamp(45px,9.8vw,65px)}
  .hero-bottom{margin-top:32px;padding-top:17px;font-size:10px}.hero-visual{min-height:0;height:440px;margin:0 0 24px;border-radius:12px}
  .hero-visual>img{object-position:center 27%}.sub-hero{padding:58px 0 62px}.sub-actions{gap:22px}.sub-actions .text-link{line-height:1.5}
  .metrics>div{padding:22px 17px!important}.metrics strong{font-size:48px}.metrics>div{min-height:180px}
  .dashboard-head h2{font-size:30px}.dashboard-panel{padding:22px}.dashboard-grid{gap:16px}.cabinet-shortcuts{gap:7px}.cabinet-shortcuts a{padding:9px 13px;font-size:11px}
  .cabinet-hero{padding:42px 0}.lesson-list{max-height:460px}.exercise-line{padding:10px}.auth-aside{padding:28px}.auth-aside h2{font-size:29px}
}
@media(max-width:520px){.hero-visual{height:375px}.hero h1{font-size:45px}.hero-actions{gap:22px}.metrics p{font-size:11px}.metrics strong{font-size:44px}.assigned-teacher{gap:16px}.assigned-teacher h3{font-size:25px}.dashboard-panel{padding:19px}.auth-tabs button{padding:10px 12px}.exercise-line{gap:7px}.exercise-line .exercise-visual{width:52px;height:62px}.step-card{padding:18px}.exercise-main-head h3{font-size:30px}.exercise-footer .button{font-size:12px;gap:14px}.step-card .exercise-visual{height:160px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-reveal,.answer-buttons button.correct,.nav.is-open{animation:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}.materials-photo:hover img{transform:none}}
