:root{--bg:#fbfcff;--ink:#262827;--muted:#767873;--purple:#713ee8;--lavender:#ede4ff;--lime:#c5f871;--border:#e3e5df;--font:'Be Vietnam Pro','Segoe UI',sans-serif;--ease:cubic-bezier(.22,1,.36,1)} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:112px}body{margin:0;color:var(--ink);background:var(--bg);font-family:var(--font);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:not-allowed}::selection{background:var(--lime);color:var(--ink)}:focus-visible{outline:3px solid var(--purple);outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.25}svg{display:block}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}.container{width:calc(100% - 112px);max-width:1280px;margin-inline:auto}.section{padding-block:116px}.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:1.7px;line-height:1.5}.section-index{color:#93968e;font-weight:500;letter-spacing:0;margin-right:8px}.purple-text{color:var(--purple)}.muted-text{color:#93968f}h2{font-size:clamp(36px,3.65vw,50px);font-weight:600;letter-spacing:-2px;line-height:1.3}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:55px;padding:15px 24px;border-radius:9px;font-size:14px;font-weight:600;border:1px solid transparent;line-height:1.5;transition:background .25s,transform .3s var(--ease),box-shadow .3s}.button .icon{width:19px;height:19px;transition:transform .3s var(--ease)}.button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #26282714}.button:hover .icon{transform:translate(2px,-2px)}.button-dark{background:var(--ink);color:white}.button-dark:hover{background:#41453b}.button-lime{background:var(--lime);color:var(--ink)}.button-lime:hover{background:#e2f7b1}.button-small{min-height:43px;padding:10px 17px;border-radius:7px;font-size:14px;gap:18px}.text-link{display:inline-flex;align-items:center;gap:13px;font-size:14px;font-weight:600}.text-link>.icon{transition:transform .25s}.text-link:hover>.icon{transform:translateX(5px)}.status-dot{width:7px;height:7px;border-radius:50%;background:#91ad53;flex-shrink:0}.small-tag{font-size:14px;letter-spacing:1.1px;font-weight:700}.tiny-label{font-size:14px;font-weight:700;letter-spacing:1px;line-height:1.5}.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}[hidden]{display:none!important}.skip-link{position:fixed;z-index:100;top:-60px;left:20px;background:var(--ink);color:white;padding:12px 20px;border-radius:5px}.skip-link:focus{top:10px}.scroll-progress{height:3px;position:fixed;top:0;left:0;background:var(--purple);width:100%;transform:scaleX(0);transform-origin:left;z-index:50;pointer-events:none} /* A quiet header; an expressive first screen. */ .site-header{position:sticky;top:0;z-index:30;background:#fbfcffed;backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}.site-header.scrolled{border-bottom-color:var(--border);box-shadow:0 3px 14px #00000003}.nav-wrap{height:88px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:35px;font-weight:800;letter-spacing:-2px;line-height:1}.brand-dot{color:var(--purple);margin-left:-8px}.brand-mark{display:block;position:relative;width:30px;height:31px;margin-right:3px}.brand-mark i{position:absolute;width:12px;height:29px;background:var(--purple);transform:skew(-25deg);left:15px;top:1px;border-radius:2px}.brand-mark i:first-child{transform:skew(25deg);background:#262827;left:3px}.desktop-nav{display:flex;gap:33px;margin-left:65px}.desktop-nav a{font-size:14px;font-weight:600;color:#666a62;position:relative;padding-block:8px}.desktop-nav a::after{content:'';height:2px;background:var(--purple);position:absolute;bottom:0;left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .25s}.desktop-nav a:hover,.desktop-nav a.active{color:var(--ink)}.desktop-nav a:hover::after,.desktop-nav a.active::after{transform:scaleX(1)}.nav-actions{display:flex;align-items:center;gap:14px}.menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:6px;width:42px;height:42px;border:1px solid var(--border);border-radius:7px;background:transparent}.menu-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .25s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}.mobile-nav{padding:12px 24px 24px;border-top:1px solid var(--border)}.mobile-nav a{display:block;padding:11px 0;font-weight:600} .hero{display:grid;grid-template-columns:1.05fr 1fr;position:relative;min-height:690px;align-items:center;column-gap:26px;padding-top:38px;padding-bottom:100px}.hero-copy{position:relative;z-index:3;padding-top:3px}.hero-eyebrow{font-size:14px;letter-spacing:1.5px;gap:10px;margin-bottom:27px}.hero-eyebrow .status-dot{box-shadow:0 0 0 5px #c5f87150}.hero h1{font-size:clamp(54px,5.65vw,79px);line-height:1.13;letter-spacing:-3.6px;font-weight:600;position:relative;width:max-content;max-width:100%}.title-spark{position:absolute;right:-65px;bottom:23px;width:43px;height:43px;stroke:#84945e;stroke-width:3;animation:spark-turn 15s linear infinite}.hero-description{font-size:14px;color:#72756f;line-height:1.95;margin-top:25px;max-width:390px}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:28px}.hero-actions .button{gap:22px}.play-circle{display:grid;place-items:center;width:31px;height:31px;border:1px solid #cdd0c6;border-radius:50%}.play-circle .icon{width:13px;height:13px;fill:currentColor;stroke-width:0;margin-left:2px}.hero-note{display:flex;align-items:center;gap:9px;margin-top:26px;font-size:14px;color:#85887f}.mini-check{width:16px;height:16px;display:grid;place-items:center;border:1px solid #bbc3aa;border-radius:50%;color:#718553}.mini-check .icon{width:10px;height:10px}.hero-bottom{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:space-between;align-items:center;color:#868980}.hero-bottom>span{display:flex;align-items:center;gap:15px;font-size:14px;letter-spacing:.3px}.hero-bottom>span .icon{width:15px;height:15px}.scroll-cue{display:flex;align-items:center;gap:11px;font-size:14px;letter-spacing:1.6px;font-weight:600}.mouse{display:block;width:17px;height:24px;border:1px solid #aeb3a6;border-radius:10px;position:relative}.mouse i{position:absolute;left:7px;top:5px;width:1px;height:5px;background:#747b68;animation:scroll-hint 2s ease infinite} .hero-visual{height:520px;position:relative;isolation:isolate;transform:translateY(1px)}.visual-grid{position:absolute;inset:5% -6% -2%;background-image:linear-gradient(#d9ded32d 1px,transparent 1px),linear-gradient(90deg,#d9ded32d 1px,transparent 1px);background-size:35px 35px;mask-image:radial-gradient(ellipse at center,#000 0,transparent 68%);z-index:-2}.visual-halo{position:absolute;width:440px;height:440px;left:11%;top:8%;border-radius:50%;background:radial-gradient(circle at 40% 38%,#d6c7f078,#eee6fa6b 50%,#e7ecd733 69%,transparent 70%);filter:blur(1px);z-index:-1;animation:halo-breathe 8s ease-in-out infinite}.orbit{position:absolute;border:1px solid #a0ac8f57;border-radius:50%;z-index:-1}.orbit-one{width:510px;height:410px;left:0;top:14%;transform:rotate(-30deg)}.orbit-two{width:480px;height:490px;left:6%;top:5%;border-color:#c3b1e357;transform:rotate(22deg)}.floating-symbol{position:absolute;font-weight:500;line-height:1;z-index:1}.symbol-plus{font-size:56px;left:4%;top:12%;color:#a68acc;transform:rotate(-14deg);animation:float-symbol 7s ease-in-out infinite}.symbol-pi{font-family:Georgia,serif;font-size:33px;right:1%;bottom:14%;color:#778755;transform:rotate(14deg);animation:float-symbol 8s ease-in-out -3s infinite}.orb{position:absolute;border-radius:50%;box-shadow:inset -4px -4px 9px #00000010;z-index:3}.orb-lime{width:31px;height:31px;top:5%;right:20%;background:radial-gradient(circle at 30% 25%,#f0ffb7,#c9de8a);animation:float-symbol 5s ease-in-out infinite}.orb-purple{width:16px;height:16px;bottom:9%;right:34%;background:radial-gradient(circle at 30% 25%,#d9c6ff,#a18bbc);animation:float-symbol 6s ease-in-out -2s infinite}.learning-window{position:absolute;width:88%;max-width:460px;left:7%;top:25%;background:#fff;border:1px solid #dfdce4;border-radius:13px;box-shadow:0 30px 65px #493f5f18,0 4px 12px #3d354b08;transform:perspective(1200px) rotateY(-8deg) rotateX(3deg) rotate(-5deg);transition:transform .6s var(--ease);will-change:transform}.window-bar{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid #efedf3;background:#faf9fc;border-radius:13px 13px 0 0;font-size:14px;color:#aaa5b2}.window-bar>.icon{width:12px;height:12px;color:#9785b1}.window-dots{display:flex;gap:4px}.window-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#e1dce9}.window-dots i:first-child{background:#c5b7d7}.window-content{padding:22px 22px 0}.window-greeting{display:flex;align-items:center;justify-content:space-between}.window-greeting .tiny-label{color:#91918d;font-size:14px;letter-spacing:1px}.window-greeting h3{font-size:19px;font-weight:700;letter-spacing:-.65px;margin-top:7px}.wave{color:#b69bda;margin-left:7px}.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e9e3f5;font-size:14px;color:var(--purple);font-weight:700}.daily-goal{margin-top:18px;padding:15px;border-radius:8px;background:#f0ebf9;display:flex;align-items:center;justify-content:space-between;position:relative}.daily-goal>div{padding-left:35px}.goal-icon{position:absolute;left:13px;top:19px;display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#ddcef4;color:#8060b9}.goal-icon .icon{width:17px;height:17px}.daily-goal strong{font-size:14px;font-weight:700}.daily-goal p{font-size:14px;color:#9688a8;margin-top:3px}.goal-arrow{color:#9074b4}.window-section-title{display:flex;justify-content:space-between;margin-top:21px;margin-bottom:6px;font-size:14px}.window-section-title>span{font-size:14px;color:#96938e}.mock-course{display:grid;grid-template-columns:42px 1fr 27px;gap:10px;align-items:center;padding:12px 0}.mock-course+.mock-course{border-top:1px solid #f0eeec}.course-symbol{height:40px;width:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}.course-symbol>span{font-size:14px;margin-left:1px;font-weight:500}.course-purple{background:#efe8f9;color:#9873cc}.course-lime{background:#e9f2d4;color:#849752;font-size:16px}.mock-course strong{display:block;font-size:14px;line-height:1.5}.mock-course>div>span{font-size:14px;color:#a6a29d}.mock-progress{height:3px;border-radius:4px;background:#f0ecef;margin-top:5px;width:90%}.mock-progress span{display:block;width:60%;height:100%;background:#c0a5e2;border-radius:4px}.mock-progress.green span{width:35%;background:#c8d894}.course-percent{font-size:14px;color:#a6a29d}.window-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ece9ef;margin-top:4px;padding:13px 0;font-size:14px;color:#aaa49e}.window-footer>span{display:flex;align-items:center;gap:5px}.window-footer i{width:4px;height:4px;background:#b2c583;border-radius:50%}.window-footer .icon{width:10px;height:10px;color:var(--purple)}.float-card{position:absolute;z-index:4;background:#fff;border:1px solid #e9e9e2;box-shadow:0 12px 36px #34342d0e;border-radius:10px;animation:float-card 6s ease-in-out infinite}.achievement-card{display:flex;align-items:center;gap:10px;padding:16px 17px;right:1%;top:14%;transform:rotate(5deg);min-width:214px;--float-angle:5deg}.achievement-icon{display:grid;place-items:center;width:33px;height:33px;background:#e8f3d2;border-radius:50%;color:#708f45}.achievement-icon .icon{width:18px;height:18px;stroke-width:2}.achievement-card strong{display:block;font-size:14px}.achievement-card div>span{display:block;font-size:14px;color:#99998f;margin-top:3px}.card-confetti{font-size:20px;color:#c2a1e8;margin-left:2px}.progress-card{width:190px;padding:16px 17px;bottom:2%;left:-1%;--float-angle:4deg;animation-delay:-3s}.progress-card>.tiny-label{font-size:14px;color:#9c9d92}.progress-card-top{display:flex;justify-content:space-between;margin-top:4px;font-size:14px}.progress-card-top>span{color:#82964f;background:#eff4e2;display:grid;place-items:center;width:21px;height:21px;border-radius:50%}.mini-chart{width:100%;height:54px;margin-top:13px;overflow:visible}.chart-line{stroke-dasharray:220;stroke-dashoffset:220;animation:draw-chart 2.5s var(--ease) .8s forwards} .principles-strip{border-block:1px solid var(--border);background:#f3f5ef}.principles{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-block:30px}.principles>span{font-size:14px;color:#888c80;line-height:1.8}.principles>span strong{color:#52594a;font-weight:600}.principles>div{display:flex;align-items:center;gap:13px;font-size:14px;color:#606658;font-weight:500}.principles .icon{color:#8e987e;width:21px;height:21px} /* Editorial grid, with native vector product illustrations. */ .section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:42px}.section-heading h2{margin-top:22px}.section-heading>p{max-width:330px;font-size:14px;color:var(--muted);line-height:1.9;padding-bottom:7px}.feature-grid{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:18px}.feature-card{min-height:428px;border:1px solid var(--border);border-radius:13px;padding:27px;position:relative;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}.feature-card:hover{transform:translateY(-7px);box-shadow:0 18px 36px #363c270a}.feature-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:27px}.feature-icon{width:31px;height:31px;display:grid;place-items:center;border:1px solid #c8c1d638;border-radius:7px;background:#ffffff60}.feature-icon .icon{width:18px;height:18px}.feature-top .small-tag{font-size:14px;color:#777772}.feature-card h3{font-size:24px;letter-spacing:-.8px;font-weight:600}.feature-card>p{font-size:14px;color:#7b7c74;margin-top:13px;line-height:1.9;max-width:270px}.feature-main{background:#eeebf5}.feature-feedback{background:#f1f3e9}.feature-progress{background:#fbfcff}.exercise-illustration{padding:19px;background:#fff;border:1px solid #ded9ea;border-radius:9px;transform:rotate(-3deg);margin:27px -4px -80px;box-shadow:0 12px 20px #6555840c;transition:transform .5s var(--ease)}.feature-main:hover .exercise-illustration{transform:rotate(0deg) translateY(-9px)}.exercise-label{display:flex;justify-content:space-between;font-size:14px;letter-spacing:1px;color:#9a90ac}.exercise-label>span{letter-spacing:0}.exercise-illustration>strong{display:block;font-size:14px;margin-top:13px;margin-bottom:11px}.mini-answer{display:flex;align-items:center;gap:9px;padding:8px 10px;margin-top:5px;border:1px solid #ece9f1;border-radius:5px;font-size:14px;color:#a097af}.mini-answer>span{color:#85808b;font-size:14px}.mini-answer>i{width:9px;height:9px;border-radius:50%;border:1px solid #e4dceb;margin-left:auto}.mini-answer.selected{background:#f3eefb;border-color:#c3a9e6;color:#9474c4}.mini-answer.selected>span{color:#796089}.mini-answer .icon{margin-left:auto;width:10px;height:10px}.feedback-illustration{display:flex;align-items:center;flex-direction:column;margin:32px 0 26px}.feedback-circle{position:relative;width:89px;height:89px;border-radius:50%;display:grid;place-items:center;background:#d8e9b6;box-shadow:inset 0 0 0 9px #e3efcc;isolation:isolate}.feedback-circle>.icon{width:34px;height:34px;stroke-width:2.4;color:#879b61}.circle-orbit{width:126px;height:98px;border:1px solid #bac89780;position:absolute;left:-18px;top:-5px;border-radius:50%;transform:rotate(-23deg);z-index:-1}.circle-star{position:absolute;top:-10px;right:-15px;font-size:31px;color:#99ad6a;animation:spark-turn 12s linear infinite}.feedback-label{font-size:14px;background:#fff;border:1px solid #e2e9d5;border-radius:15px;padding:5px 13px;transform:rotate(-5deg);margin-top:-4px;z-index:1;color:#728259}.feature-feedback h3{margin-top:8px}.bar-chart{height:142px;display:flex;align-items:flex-end;gap:10px;padding-top:15px;margin-top:19px;position:relative}.bar-chart::before{content:'';position:absolute;inset:0 0 19px;background:repeating-linear-gradient(to top,#e7e9e3 0,#e7e9e3 1px,transparent 1px,transparent 35px);z-index:0}.bar-chart>div{display:flex;align-items:center;flex-direction:column;justify-content:flex-end;height:100%;flex:1;z-index:1}.bar-chart i{display:block;height:var(--bar);width:100%;background:#d9d0e7;border-radius:5px 5px 0 0;min-height:12px;transform-origin:bottom}.bar-chart>div:nth-child(5) i{background:#bca2dc}.bar-chart>div:nth-child(6) i{background:#9b79c8}.bar-chart span{font-size:14px;color:#9f9f96;line-height:1;margin-top:8px} /* The scroll story keeps its narrative in view, without taking over scrolling. */ .journey{background:#262b27;color:#f6f7ee;position:relative;overflow:clip}.journey::before{content:'';position:absolute;width:600px;height:600px;left:-350px;top:150px;background:radial-gradient(circle,#5c69592b,transparent 70%);pointer-events:none}.journey-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start}.journey-sticky{position:sticky;top:155px;padding-top:105px;padding-bottom:70px}.journey .eyebrow{color:#adb6a5;font-size:14px}.journey .section-index{color:#697664}.journey h2{font-size:clamp(37px,4vw,55px);letter-spacing:-2px;line-height:1.3;margin-top:25px}.journey h2>span{color:var(--lime)}.journey-sticky>p{font-size:14px;color:#9ba696;margin-top:24px;line-height:1.9}.journey-counter{display:flex;align-items:center;gap:13px;margin-top:43px}.journey-counter>span:first-child{color:var(--lime);font-size:37px;font-weight:500;letter-spacing:-2px;line-height:1}.journey-counter>span:nth-child(2){font-size:14px;color:#707e6c}.journey-line{height:1px;width:100px;background:#475041;margin-left:8px}.journey-line i{height:1px;background:var(--lime);display:block;width:33.33%;transition:width .5s}.journey-steps{padding:100px 0 110px}.journey-step{display:grid;grid-template-columns:34px 1fr;gap:23px;padding:35px 0 60px;border-bottom:1px solid #424a3e;opacity:.48;transition:opacity .65s}.journey-step:first-child{padding-top:5px}.journey-step:last-child{border-bottom:0;padding-bottom:0}.journey-step.is-active{opacity:1}.step-number{display:grid;place-items:center;align-self:start;width:32px;height:32px;border:1px solid #526049;border-radius:50%;color:#9bb77d;font-size:14px;transition:background .5s,color .5s}.is-active .step-number{background:var(--lime);color:#34412a;border-color:var(--lime)}.step-content h3{font-size:22px;letter-spacing:-.6px;font-weight:500;margin-top:1px}.step-content>p{font-size:14px;color:#a5af9e;line-height:1.9;margin-top:13px;max-width:375px}.step-preview{background:#30372e;border:1px solid #424c3b;border-radius:10px;padding:23px;margin-top:25px}.subject-preview>.tiny-label{color:#a4b099;font-size:14px}.subject-preview>div{display:flex;gap:12px;margin-top:15px}.subject-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;border-radius:7px;min-height:98px;font-size:14px;gap:12px;color:#3e4337}.subject-tile b{font-size:24px;font-weight:600}.purple-tile{background:#d0c0e8}.lime-tile{background:#d7e7b1}.peach-tile{background:#e8d4bb}.solution-preview>div{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}.solution-check{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#495f39;color:#cfe4a1}.solution-check .icon{width:14px;height:14px}.solution-preview>p{display:flex;align-items:center;justify-content:space-between;font-size:15px;background:#394330;border:1px solid #4a573e;border-radius:5px;padding:16px 13px;margin:19px 0 12px;color:#dce8ca;gap:8px}.solution-preview>p span{color:#778d65;font-size:14px}.solution-preview>p b{color:var(--lime);font-weight:600}.solution-preview>span{font-size:14px;color:#8e9c83}.recap-preview strong{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:500;margin-top:8px}.recap-preview strong>.icon{color:var(--lime);width:18px;height:18px}.recap-preview .tiny-label{color:#8e9e80;font-size:14px}.recap-dots{display:flex;gap:13px;margin-top:25px}.recap-dots>span{height:36px;flex:1;background:#46563a;color:#c7dea0;border-radius:6px;display:grid;place-items:center}.recap-dots .icon{width:17px;height:17px}.recap-dots>span.recap-next{background:var(--lime);color:#495738;font-size:18px} /* Three perspectives, one deliberately small tab interaction. */ .role-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:7px;background:#edeFE9;border:1px solid #e8eae4;border-radius:10px;margin-bottom:18px;max-width:570px}.role-tabs button{display:flex;justify-content:space-between;align-items:center;padding:11px 18px;border:1px solid transparent;border-radius:6px;background:transparent;font-size:14px;font-weight:600;color:#8d9185;transition:color .3s,background .3s,box-shadow .3s}.role-tabs button>span{font-size:14px;font-weight:500;opacity:.5}.role-tabs button[aria-selected=true]{background:#fff;border-color:#e2e6db;color:#3d4733;box-shadow:0 2px 5px #2f3c1d06}.role-panel{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:50px;border:1px solid var(--border);border-radius:13px;background:#f1f3ed;min-height:410px}.role-copy>.small-tag{color:#8d9b7a;font-size:14px}.role-copy h3{font-size:27px;line-height:1.4;font-weight:600;letter-spacing:-1px;margin-top:17px;max-width:400px}.role-copy>p{font-size:14px;color:#7e8677;line-height:1.9;margin-top:18px;max-width:340px}.role-copy ul{padding:0;list-style:none;margin:23px 0 27px}.role-copy li{display:flex;align-items:center;gap:10px;font-size:14px;margin-top:9px;color:#616c57}.role-copy li>.icon{color:#8ca46c;width:14px;height:14px}.role-copy .text-link{font-size:14px}.role-copy .text-link>.icon{width:17px;height:17px}.role-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:310px;isolation:isolate}.role-orbit{position:absolute;width:360px;height:320px;max-width:110%;border:1px solid #d8decf;border-radius:50%;transform:rotate(-25deg);z-index:-1}.role-card{width:300px;max-width:100%;padding:22px;background:#fff;border:1px solid #e2e6dc;border-radius:11px;box-shadow:0 20px 40px #364a260a;transform:rotate(4deg);transition:transform .6s var(--ease)}.role-panel:hover .role-card{transform:rotate(1deg) translateY(-4px)}.role-card-header{display:flex;align-items:center;gap:9px}.role-avatar{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#e9e1f5;color:#8b6db5;font-size:14px;font-weight:700}.role-card-header strong{font-size:14px;display:block}.role-card-header div>span{font-size:14px;display:block;color:#9da093;margin-top:2px}.role-card-header>.icon{margin-left:auto;width:16px;height:16px;color:#b3bc9f}.role-card-banner{background:#f1f6e7;padding:14px;margin-top:17px;border-radius:7px}.role-card-banner>span{font-size:14px;letter-spacing:1px;color:#96a37f}.role-card-banner strong{display:block;font-size:14px;margin-top:6px;font-weight:600}.role-mini-progress{height:4px;background:#e0e8d3;border-radius:4px;margin-top:11px}.role-mini-progress span{display:block;width:66%;background:#b9cf8e;height:100%;border-radius:4px}.role-task{display:flex;align-items:center;gap:8px;font-size:14px;padding-top:14px;color:#7c8472}.task-checkbox{display:grid;place-items:center;width:16px;height:16px;border:1px solid #e0e5d7;border-radius:4px}.task-checkbox.checked{background:#eef4e2;color:#93aa70;border-color:#dce7ca}.task-checkbox>.icon{width:10px;height:10px}.role-task>span:last-child{margin-left:auto;color:#c2c5bb;font-size:14px}.role-card-foot{display:flex;gap:6px;align-items:center;border-top:1px solid #edf0e7;padding-top:14px;margin-top:18px;font-size:14px;color:#959e8b}.role-card-foot .status-dot{width:4px;height:4px} /* A working exercise, rather than a screenshot of an exercise. */ .demo-section{background:#efedf5;border-top:1px solid #e6e0ef;border-bottom:1px solid #e6e0ef}.demo-section .section-heading>p{color:#8a8197}.demo-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:88px;align-items:start;padding-top:15px}.demo-intro{padding:16px 0}.demo-badge{display:inline-flex;align-items:center;gap:7px;background:#e2d9ef;color:#8668ac;padding:5px 10px;border-radius:5px;letter-spacing:1px;font-size:14px;font-weight:700}.demo-badge>.icon{width:9px;height:9px;fill:currentColor;stroke-width:0}.demo-intro h3{font-size:27px;line-height:1.4;font-weight:600;letter-spacing:-1px;margin-top:19px}.demo-intro>p{font-size:14px;color:#8d8497;margin-top:16px;line-height:1.9;max-width:285px}.subject-buttons{display:flex;flex-direction:column;gap:9px;margin-top:29px;max-width:288px}.subject-button{display:flex;align-items:center;padding:12px 15px;gap:13px;border:1px solid #ddd5e8;border-radius:7px;background:transparent;font-size:14px;font-weight:500;color:#84778e;transition:background .3s,border-color .3s,transform .3s}.subject-button>span{width:27px;height:27px;border-radius:5px;background:#e5def0;display:grid;place-items:center;color:#a389c0;font-size:14px}.subject-button .icon{margin-left:auto;width:15px;height:15px;opacity:.4}.subject-button.active{background:white;border-color:#bfa4e0;color:#544065;box-shadow:0 3px 8px #76559c05}.subject-button.active>.icon{color:#9874bb;opacity:1}.subject-button:hover{transform:translateX(3px);border-color:#bfa4e0}.demo-intro>.demo-disclaimer{font-size:14px;color:#a196ac;display:flex;gap:9px;line-height:1.8;margin-top:22px}.demo-disclaimer>.icon{width:15px;height:15px;stroke-width:1.2;margin-top:3px}.quiz-card{background:#fff;border:1px solid #e1d8ec;border-radius:13px;padding:30px;box-shadow:0 16px 32px #63428208;min-height:492px}.quiz-header{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:14px;letter-spacing:.7px;color:#8f7ba2;font-weight:700}.quiz-header>span:last-child{color:#a399ad;letter-spacing:0;font-weight:500}.quiz-progress{height:3px;background:#f0ebf7;border-radius:3px;margin-top:13px;margin-bottom:27px}.quiz-progress>span{display:block;width:0;height:100%;border-radius:3px;background:#aa8acc;transition:width .5s}.quiz-question-label{font-size:14px;letter-spacing:1px;color:#aaa0b2;font-weight:600}.quiz-card h3{font-size:22px;font-weight:600;letter-spacing:-.6px;line-height:1.5;margin-top:11px}.quiz-card h3:focus{outline:none}#quiz-options{display:flex;flex-direction:column;gap:8px;margin:20px 0 0;padding:0;border:0}.quiz-option{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e8e3ed;border-radius:6px;font-size:14px;color:#7e7288;position:relative;cursor:pointer;transition:border-color .2s,background .2s;min-height:46px}.quiz-option input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}.quiz-option:has(input:focus-visible){outline:3px solid var(--purple);outline-offset:2px}.option-letter{display:grid;place-items:center;width:20px;height:20px;font-size:14px;background:#f7f4fa;border-radius:4px;color:#9b86b0;flex-shrink:0}.option-radio{width:13px;height:13px;flex-shrink:0;border:1px solid #d9cce5;border-radius:50%;margin-left:auto}.quiz-option:has(input:checked){background:#f5effb;border-color:#b596d6;color:#725091}.quiz-option:has(input:checked) .option-radio{border:4px solid #a580c5;background:white}.quiz-option:hover{border-color:#bca1d5}.quiz-option.is-correct{background:#f2f7ea;border-color:#b7cc99;color:#667b4e}.quiz-option.is-correct .option-letter{background:#e2edcd;color:#7f985f}.quiz-option.is-correct .option-radio{border:4px solid #a6bd85;background:white}.quiz-option.is-wrong{background:#faf0ed;border-color:#d9ac9b;color:#9a6957}.quiz-option.is-wrong .option-radio{border:4px solid #d0a18e;background:white}.quiz-option:has(input:disabled),.quiz-option input:disabled{cursor:default}.quiz-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px}.quiz-actions .button{font-size:14px;min-height:43px;padding:10px 15px;gap:14px;border-radius:6px}.quiz-actions .button>.icon{width:14px;height:14px}.quiz-actions .button:disabled{background:#c7c3cb;box-shadow:none;transform:none}.hint-button{background:transparent;border:0;padding:4px 0;display:flex;align-items:center;gap:7px;color:#9e86b3;font-size:14px}.hint-button>.icon{width:14px;height:14px}.hint-button:hover{color:var(--purple)}.quiz-hint{font-size:14px;color:#8e7857;background:#fbf6eb;border:1px solid #ece0c7;border-radius:6px;padding:12px 14px;margin-top:14px}.quiz-feedback{background:#f2f6ed;border:1px solid #d9e3c9;border-radius:6px;padding:14px;margin-top:14px;font-size:14px;color:#788768;line-height:1.9}.quiz-feedback strong{display:block;font-size:14px;color:#63764e;margin-bottom:4px}.quiz-feedback.incorrect{background:#faf4ee;border-color:#e8d8c7;color:#9b8270}.quiz-feedback.incorrect strong{color:#967154}.quiz-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f0ecf4;padding-top:17px;margin-top:24px;font-size:14px;color:#b0a5bb}.quiz-footer>span:first-child{display:flex;align-items:center;gap:5px}.quiz-footer .icon{width:12px;height:12px}.quiz-footer>span:last-child{font-size:14px;font-weight:800;letter-spacing:-.7px;color:#b0a3be}.quiz-results{text-align:center;padding-block:12px 0}.result-spark{width:57px;height:57px;display:grid;place-items:center;border-radius:50%;background:#ede5f8;color:#9e7cc6;margin-inline:auto;margin-bottom:15px}.result-spark>.icon{width:30px;height:30px}.quiz-results>.eyebrow{font-size:14px;color:#9a85af}.quiz-results>h3{margin-top:9px}.quiz-results>p{font-size:14px;color:#a290b1;margin-top:9px}.result-score{display:flex;justify-content:center;align-items:baseline;gap:8px;margin-block:14px}.result-score>strong{font-size:50px;line-height:1.2;letter-spacing:-2px;color:#9170b5;font-weight:600}.result-score>span{font-size:14px;color:#aa9bb6}.result-review{text-align:left;margin:18px 0 25px}.result-review>div{display:flex;gap:9px;align-items:start;padding:9px 0;border-bottom:1px solid #efeaf4;font-size:14px;color:#8d7c9b}.result-review .review-status{width:16px;height:16px;background:#eef5e4;border-radius:50%;display:grid;place-items:center;color:#8ba56b;flex-shrink:0;font-size:14px}.result-review .review-status.wrong{background:#faeee7;color:#be8a6e}.result-review .review-answer{display:block;font-size:14px;color:#af9ebc}.quiz-results>.button{font-size:14px;min-height:43px} /* Company, useful answers, and a clear next action. */ .about-layout{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}.about-art{position:relative;aspect-ratio:1.14;background:#e5e9de;border:1px solid #dee3d4;border-radius:13px;overflow:hidden;display:grid;place-items:center;isolation:isolate}.about-grid{position:absolute;inset:0;background-image:linear-gradient(#c8d0bc4d 1px,transparent 1px),linear-gradient(90deg,#c8d0bc4d 1px,transparent 1px);background-size:43px 43px;mask-image:radial-gradient(circle at center,black,transparent 80%);z-index:-1}.about-art::before,.about-art::after{content:'';position:absolute;width:70%;aspect-ratio:1;border:1px solid #bec9ac80;border-radius:50%;transform:rotate(-25deg) scaleY(.6);z-index:-1}.about-art::after{transform:rotate(40deg) scaleY(.6);width:84%;border-color:#cbd4bd80}.large-brand-mark{width:150px;height:162px;position:relative;transform:rotate(-8deg);filter:drop-shadow(10px 18px 10px #545e4120);transition:transform .7s var(--ease)}.about-art:hover .large-brand-mark{transform:rotate(0deg) scale(1.06)}.large-brand-mark i{display:block;position:absolute;top:0;left:65px;width:57px;height:155px;background:linear-gradient(135deg,#acbd91,#7b8e60);transform:skew(-24deg);border-radius:8px}.large-brand-mark i:first-child{left:0;transform:skew(24deg);background:linear-gradient(130deg,#d0c1e5,#b298d0)}.about-copy h2{margin-top:21px;font-size:clamp(33px,3.1vw,42px)}.about-copy>p{font-size:14px;color:#85877e;line-height:2;margin-top:23px;max-width:400px}.about-copy>p+p{margin-top:14px}.about-values{display:flex;flex-direction:column;gap:9px;margin-top:25px}.about-values>span{display:flex;align-items:center;gap:9px;font-size:14px;color:#72805f}.about-values .icon{width:14px;height:14px}.faq-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;padding-block:12px 115px}.faq-heading>.eyebrow{font-size:14px;color:#909787}.faq-heading h2{font-size:31px;letter-spacing:-1.2px;margin-top:22px;line-height:1.45}.faq-list details{border-bottom:1px solid var(--border)}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 0;font-size:14px;font-weight:500;cursor:pointer;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-plus{display:block;width:14px;height:14px;position:relative;flex-shrink:0}.faq-plus::before,.faq-plus::after{content:'';position:absolute;left:1px;right:1px;top:6px;height:1px;background:#9a9f91;transition:transform .25s}.faq-plus::after{transform:rotate(90deg)}details[open] .faq-plus::after{transform:rotate(0)}.faq-list details>p{font-size:14px;color:#8a8e81;line-height:1.9;padding:0 35px 22px 0}.faq-list details>p a{color:var(--purple);text-decoration:underline;text-underline-offset:3px}.cta-section{padding:61px 66px;position:relative;display:flex;justify-content:space-between;align-items:center;background:#292c29;border-radius:15px;color:#f1f5eb;overflow:hidden;isolation:isolate;gap:30px}.cta-section .eyebrow{font-size:14px;letter-spacing:1.5px;color:#9eab91}.cta-section h2{font-size:51px;line-height:1.24;font-weight:500;letter-spacing:-2px;margin-top:20px}.cta-section h2 span{color:var(--lime)}.cta-section p{font-size:14px;color:#9ba58f;margin-top:17px}.cta-section>.button{margin-top:35px;z-index:2;font-size:14px;min-height:51px;gap:22px}.cta-star{position:absolute;right:27%;top:21%;width:69px;height:69px;stroke:#b2c690;stroke-width:1.3;animation:spark-turn 30s linear infinite;opacity:.6;z-index:-1}.cta-orbit{position:absolute;right:0;top:-38%;width:500px;height:500px;border:1px solid #4a554037;border-radius:50%;transform:rotate(30deg) scaleY(.7);z-index:-1}.cta-orbit::after{content:'';position:absolute;inset:48px;border:1px solid #4a554040;border-radius:50%}.site-footer{padding-top:57px}.footer-main{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding-bottom:35px}.footer-brand>.brand{font-size:29px}.footer-brand .brand-mark{transform:scale(.8);transform-origin:left;margin-right:-2px}.footer-brand>p{font-size:14px;color:#93988a;margin-top:13px}.footer-company{display:flex;flex-direction:column;padding-top:7px;gap:8px}.footer-company strong{font-size:14px;letter-spacing:.2px;font-weight:600}.footer-company>span{font-size:14px;color:#9a9e91}.footer-main>nav{display:flex;gap:20px;font-size:14px;color:#7b8370;padding-top:8px}.footer-main>nav a:hover{color:var(--purple)}.footer-bottom{display:flex;align-items:center;gap:30px;padding:22px 0;border-top:1px solid var(--border);font-size:14px;color:#a0a497}.footer-bottom>span:nth-child(2){margin-left:auto}.privacy-button{border:0;background:transparent;display:flex;align-items:center;gap:5px;font-size:14px;padding:4px 0;color:#888f7d}.privacy-button>.icon{width:10px;height:10px}.back-top{width:27px;height:27px;border:1px solid var(--border);display:grid;place-items:center;border-radius:50%;font-size:14px;color:#737e63}.privacy-dialog{width:calc(100% - 40px);max-width:550px;border:1px solid #e4e0eb;border-radius:15px;padding:38px;background:var(--bg);color:var(--ink);box-shadow:0 30px 80px #00000025}.privacy-dialog::backdrop{background:#1e241d80;backdrop-filter:blur(5px)}.privacy-dialog .eyebrow{font-size:14px;color:#a08cb4}.privacy-dialog h2{font-size:28px;letter-spacing:-.8px;margin-top:17px}.privacy-dialog>p{font-size:14px;line-height:1.9;color:#7a8172;margin-top:18px}.privacy-dialog .button{margin-top:24px;font-size:14px;min-height:45px}.dialog-close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:26px;color:#8a9181;padding:5px 10px}.noscript-message{position:fixed;bottom:0;left:0;right:0;z-index:60;background:#ede7f5;color:#705589;padding:10px 20px;font-size:14px;text-align:center} /* Movement has hierarchy: entrance, scroll, then quiet ambient details. */ .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease)}.js .reveal.is-visible{opacity:1;transform:translateY(0)}.feature-grid>.reveal:nth-child(2){transition-delay:.09s}.feature-grid>.reveal:nth-child(3){transition-delay:.18s}.hero-copy{animation:hero-in 1s var(--ease) both}.hero-visual{animation:visual-in 1.2s var(--ease) .15s both}.role-panel.is-switching .role-copy,.role-panel.is-switching .role-card{animation:tab-in .45s var(--ease) both}.is-visible .bar-chart i{animation:grow-bar 1.1s var(--ease) both}.is-visible .bar-chart>div:nth-child(2) i{animation-delay:.07s}.is-visible .bar-chart>div:nth-child(3) i{animation-delay:.14s}.is-visible .bar-chart>div:nth-child(4) i{animation-delay:.21s}.is-visible .bar-chart>div:nth-child(5) i{animation-delay:.28s}.is-visible .bar-chart>div:nth-child(6) i{animation-delay:.35s}.quiz-card.is-changing #quiz-body{animation:tab-in .4s var(--ease)} @keyframes hero-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes visual-in{from{opacity:0;transform:translateY(25px) scale(.95)}to{opacity:1;transform:translateY(1px) scale(1)}}@keyframes float-card{0%,100%{transform:translateY(0) rotate(var(--float-angle))}50%{transform:translateY(-10px) rotate(calc(var(--float-angle) - 1deg))}}@keyframes float-symbol{0%,100%{translate:0 0}50%{translate:0 -12px}}@keyframes spark-turn{to{rotate:360deg}}@keyframes halo-breathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:1}}@keyframes scroll-hint{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(5px);opacity:1}}@keyframes draw-chart{to{stroke-dashoffset:0}}@keyframes grow-bar{from{transform:scaleY(.05)}to{transform:scaleY(1)}}@keyframes tab-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}} /* Tablet and mobile keep all the content and working interactions. */ @media(min-width:1600px){.hero{min-height:740px;column-gap:55px}.hero-visual{height:560px}.learning-window{top:26%}.achievement-card{top:15%}} @media(max-width:1199px){.container{width:calc(100% - 80px)}.hero{column-gap:15px;min-height:660px}.hero h1{font-size:65px;letter-spacing:-3px}.hero-description{font-size:14px}.hero-actions{gap:17px}.hero-actions>.button{font-size:14px;padding-inline:18px}.hero-actions>.text-link{font-size:14px;gap:8px}.hero-visual{height:480px}.visual-halo{width:350px;height:350px;top:12%;left:9%}.orbit-one{width:390px;height:350px}.orbit-two{width:390px;height:390px}.achievement-card{min-width:192px;padding:13px;right:-2%;top:17%}.achievement-card strong{font-size:14px}.progress-card{width:159px;bottom:4%;left:-2%}.learning-window{top:28%;left:5%;width:93%}.window-content{padding:17px 17px 0}.window-greeting h3{font-size:17px}.desktop-nav{margin-left:15px;gap:25px}.title-spark{right:-47px;width:31px;height:31px;bottom:21px}.feature-card{padding:23px;min-height:418px}.feature-card h3{font-size:22px}.feature-card>p{font-size:14px}.feature-top .small-tag{font-size:14px}.journey-layout{gap:55px}.role-panel{gap:35px;padding:37px}.role-copy h3{font-size:25px}.demo-layout{gap:65px}.about-layout{gap:50px}.footer-main>nav{gap:15px}.footer-company strong{font-size:14px}.cta-section{padding:55px}} @media(max-width:959px){.container{width:calc(100% - 56px)}.nav-wrap{height:78px}.desktop-nav{gap:19px;margin-left:0}.desktop-nav a{font-size:14px}.nav-actions .button{font-size:14px;padding-inline:13px;gap:10px}.brand{font-size:30px}.brand-mark{transform:scale(.85);margin-right:-1px}.hero{min-height:630px;column-gap:10px}.hero h1{font-size:54px;letter-spacing:-2.5px}.hero-description{font-size:14px;max-width:300px}.hero-actions{align-items:flex-start;gap:17px;flex-direction:column;margin-top:24px}.hero-note{font-size:14px;margin-top:21px}.hero-eyebrow{font-size:14px;margin-bottom:24px;letter-spacing:1px}.hero-visual{height:455px}.learning-window{top:28%;left:4%;width:96%}.visual-halo{width:310px;height:310px;top:20%;left:6%}.orbit-one{width:330px;height:300px;top:18%}.orbit-two{width:325px;height:370px;top:10%}.window-bar{font-size:14px;padding:10px 12px}.window-content{padding:14px 13px 0}.window-greeting h3{font-size:14px}.window-greeting .tiny-label{font-size:14px}.avatar{width:25px;height:25px;font-size:14px}.daily-goal{margin-top:14px;padding:11px}.daily-goal strong{font-size:14px}.daily-goal p{font-size:14px}.goal-icon{width:22px;height:22px;top:15px;left:10px}.daily-goal>div{padding-left:29px}.window-section-title{margin-top:15px;font-size:14px}.window-section-title>span{font-size:14px}.mock-course{grid-template-columns:34px 1fr 21px;padding:10px 0;gap:8px}.course-symbol{width:33px;height:33px;font-size:18px}.course-lime{font-size:14px}.mock-course strong{font-size:14px}.mock-course>div>span{font-size:14px}.course-percent{font-size:14px}.window-footer{font-size:14px;padding:10px 0}.achievement-card{top:16%;right:0;min-width:170px;padding:11px;gap:7px}.achievement-icon{width:27px;height:27px}.achievement-card strong{font-size:14px}.achievement-card div>span{font-size:14px}.progress-card{bottom:4%;left:-4%;width:144px;padding:13px}.progress-card-top{font-size:14px}.symbol-plus{font-size:44px;top:15%;left:3%}.symbol-pi{font-size:25px;right:-2%;bottom:10%}.orb-lime{top:10%;width:25px;height:25px}.hero-bottom{bottom:25px}.principles{gap:15px;padding-block:25px}.principles>span{font-size:14px}.principles>div{font-size:14px;gap:8px}.principles .icon{width:18px;height:18px}.section{padding-block:88px}.section-heading{gap:40px;margin-bottom:34px}.section-heading>p{font-size:14px;max-width:270px}h2{font-size:37px;letter-spacing:-1.5px}.feature-grid{gap:12px}.feature-card{padding:18px;min-height:387px}.feature-card h3{font-size:19px;letter-spacing:-.5px}.feature-card>p{font-size:14px}.feature-top{gap:8px;margin-bottom:22px}.feature-top .small-tag{font-size:14px;letter-spacing:.6px}.feature-icon{width:26px;height:26px}.feature-icon>.icon{width:16px;height:16px}.exercise-illustration{padding:13px;margin-top:25px}.exercise-illustration>strong{font-size:14px}.mini-answer{font-size:14px;padding:8px 6px;gap:6px}.mini-answer>span{font-size:14px}.feedback-illustration{margin:27px 0 22px}.bar-chart{gap:7px;height:125px;margin-top:26px}.journey-layout{gap:40px;grid-template-columns:.95fr 1.05fr}.journey-sticky{top:125px;padding-top:85px}.journey h2{font-size:40px}.journey-steps{padding:85px 0}.journey-step{gap:15px;grid-template-columns:28px 1fr}.step-number{width:28px;height:28px}.step-content h3{font-size:19px}.step-content>p{font-size:14px}.step-preview{padding:18px}.subject-preview>div{gap:8px}.subject-tile{min-height:78px;font-size:14px;gap:8px}.subject-tile b{font-size:20px}.solution-preview>p{font-size:14px;gap:4px;padding:13px 9px}.role-panel{padding:30px;gap:27px}.role-copy h3{font-size:22px}.role-copy>p{font-size:14px}.role-copy li{font-size:14px}.role-card{width:260px;padding:19px}.role-orbit{width:270px;height:275px}.demo-layout{grid-template-columns:.75fr 1.25fr;gap:36px}.demo-intro h3{font-size:23px}.demo-intro>p{font-size:14px}.quiz-card{padding:24px}.quiz-card h3{font-size:19px}.quiz-header{font-size:14px}.quiz-actions .button{font-size:14px;gap:9px;padding:10px 12px}.hint-button{font-size:14px;gap:5px}.about-layout{gap:35px}.about-copy h2{font-size:33px}.about-copy>p{font-size:14px;margin-top:18px}.about-values>span{font-size:14px}.faq-section{gap:40px;padding-bottom:88px}.faq-heading h2{font-size:26px}.faq-list summary{font-size:14px}.cta-section{padding:43px}.cta-section h2{font-size:43px}.cta-star{right:31%;width:48px;height:48px}.footer-main{flex-wrap:wrap}.footer-main>nav{width:100%;justify-content:flex-end;padding-top:0;margin-top:-10px}.footer-bottom{gap:18px;font-size:14px}.privacy-button{font-size:14px}} @media(max-width:699px){html{scroll-padding-top:95px}.container{width:calc(100% - 40px)}.nav-wrap{height:72px;gap:15px}.brand{font-size:31px;gap:8px}.desktop-nav{display:none}.menu-toggle{display:flex}.nav-actions{gap:9px}.nav-actions .button{font-size:14px;min-height:37px;padding:9px 11px;gap:8px}.nav-actions .button>.icon{width:14px;height:14px}.menu-toggle{width:37px;height:37px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:38px;padding-bottom:70px;min-height:0;gap:0}.hero-copy{padding-top:0}.hero-eyebrow{font-size:14px;margin-bottom:22px;letter-spacing:1.2px}.hero h1{font-size:clamp(49px,10.8vw,71px);letter-spacing:-2.7px;line-height:1.15}.title-spark{right:-48px;bottom:21px;width:32px;height:32px}.hero-description{font-size:14px;max-width:370px;margin-top:23px;line-height:1.9}.hero-actions{flex-direction:row;align-items:center;gap:20px;margin-top:25px}.hero-actions .button{font-size:14px;min-height:46px;padding:12px 16px;gap:13px}.hero-actions .text-link{font-size:14px;gap:7px}.play-circle{width:26px;height:26px}.hero-note{font-size:14px;margin-top:20px}.hero-visual{height:450px;max-width:440px;width:100%;margin:17px auto 0}.learning-window{width:84%;left:9%;top:27%;max-width:none}.window-content{padding:17px 17px 0}.window-bar{padding:12px 13px;font-size:14px}.window-greeting h3{font-size:16px}.window-greeting .tiny-label{font-size:14px}.daily-goal strong{font-size:14px}.daily-goal{padding:13px;margin-top:16px}.daily-goal p{font-size:14px}.goal-icon{top:17px}.window-section-title{font-size:14px;margin-top:16px}.mock-course strong{font-size:14px}.mock-course{padding:11px 0}.window-footer{font-size:14px;padding:12px 0}.achievement-card{top:15%;right:0;min-width:182px;padding:12px}.achievement-card strong{font-size:14px}.achievement-card div>span{font-size:14px}.progress-card{width:157px;left:1%;bottom:1%;padding:13px}.progress-card-top{font-size:14px}.mini-chart{height:42px;margin-top:10px}.visual-halo{width:330px;height:330px;left:8%;top:13%}.orbit-one{width:94%;height:335px;left:2%;top:16%}.orbit-two{width:90%;height:375px;left:4%;top:8%}.symbol-plus{top:14%;left:5%;font-size:43px}.symbol-pi{right:2%;bottom:7%;font-size:28px}.orb-lime{top:5%;right:24%;width:26px;height:26px}.orb-purple{bottom:0;right:23%}.hero-bottom{bottom:17px}.hero-bottom>span{font-size:14px;gap:8px}.scroll-cue{font-size:14px;gap:8px;letter-spacing:1px}.mouse{width:14px;height:20px}.mouse i{left:6px;height:4px;top:4px}.principles{display:grid;grid-template-columns:1fr 1fr;gap:20px 15px;padding-block:25px}.principles>span{font-size:14px}.principles>div{font-size:14px;gap:8px}.principles .icon{width:17px;height:17px}.section{padding-block:68px}.section-heading{display:block;margin-bottom:28px}.section-heading h2{margin-top:17px}h2{font-size:35px;line-height:1.35;letter-spacing:-1.5px}.eyebrow{font-size:14px;letter-spacing:1.3px;gap:5px}.section-index{margin-right:5px}.section-heading>p{max-width:350px;margin-top:20px;font-size:14px;padding:0}.feature-grid{grid-template-columns:1fr;gap:14px}.feature-card{padding:25px;min-height:0}.feature-card h3{font-size:26px}.feature-card>p{font-size:14px;max-width:300px}.feature-top{margin-bottom:23px}.feature-top .small-tag{font-size:14px;letter-spacing:1px}.feature-icon{width:30px;height:30px}.feature-icon>.icon{width:18px;height:18px}.feature-main{min-height:425px}.exercise-illustration{max-width:310px;min-height:180px;padding:18px;margin:28px auto -55px;transform:rotate(-3deg)}.exercise-label{font-size:14px}.exercise-illustration>strong{font-size:14px;margin-top:16px}.mini-answer{padding:10px;gap:10px;font-size:14px}.mini-answer>span{font-size:14px}.feature-feedback{display:grid;grid-template-columns:1.1fr 1fr;column-gap:15px;padding-bottom:28px}.feature-feedback .feature-top{grid-column:1/-1}.feature-feedback .feedback-illustration{grid-column:2;grid-row:2/4;align-self:center;margin:0}.feature-feedback h3{grid-column:1;grid-row:2;font-size:23px;margin:0}.feature-feedback>p{grid-column:1;grid-row:3;font-size:14px;margin-top:13px}.feedback-circle{width:76px;height:76px}.circle-orbit{width:112px;height:90px;left:-16px}.feedback-label{font-size:14px;padding:5px 9px}.feature-progress{display:grid;grid-template-columns:1.1fr 1fr;column-gap:25px}.feature-progress .feature-top{grid-column:1/-1}.feature-progress h3{grid-column:1;font-size:23px}.feature-progress>p{grid-column:1;font-size:14px}.feature-progress .bar-chart{grid-column:2;grid-row:2/4;height:133px;margin:0;align-self:center;gap:6px}.journey-layout{display:block}.journey-sticky{position:relative;top:0;padding-top:66px;padding-bottom:0}.journey h2{font-size:41px;margin-top:20px}.journey h2 br:nth-child(2){display:none}.journey-sticky>p{font-size:14px;margin-top:21px}.journey-counter{position:absolute;right:3px;bottom:0;gap:8px}.journey-counter>span:first-child{font-size:27px}.journey-counter>span:nth-child(2){font-size:14px}.journey-line{width:37px;margin-left:0}.journey-steps{padding:43px 0 66px}.journey-step{padding:30px 0 35px;gap:15px;grid-template-columns:28px 1fr}.journey-step:first-child{padding-top:0}.step-content h3{font-size:21px}.step-content>p{font-size:14px;max-width:none}.step-preview{margin-top:20px;padding:19px}.subject-preview>.tiny-label{font-size:14px;letter-spacing:.5px}.subject-tile{min-height:83px;font-size:14px;gap:10px}.subject-tile b{font-size:22px}.solution-preview>div{font-size:14px}.solution-preview>p{font-size:14px;padding:14px 11px}.solution-preview>span{font-size:14px}.recap-preview strong{font-size:14px}.recap-dots{gap:10px;margin-top:20px}.role-tabs{max-width:none;gap:4px;padding:5px}.role-tabs button{font-size:14px;padding:10px 11px}.role-tabs button>span{font-size:14px}.role-panel{grid-template-columns:1fr;gap:25px;padding:27px;min-height:0}.role-copy h3{font-size:25px;letter-spacing:-.8px}.role-copy>p{font-size:14px;max-width:none}.role-copy li{font-size:14px;gap:8px}.role-visual{min-height:290px;margin-top:4px;margin-bottom:10px}.role-card{width:270px;padding:20px}.role-orbit{height:282px;width:295px}.demo-layout{grid-template-columns:1fr;gap:25px;padding-top:0}.demo-intro{padding:0}.demo-intro h3{display:none}.demo-intro>p{font-size:14px;max-width:330px;margin-top:11px}.subject-buttons{display:flex;flex-direction:row;max-width:none;gap:7px;margin-top:18px}.subject-button{flex:1;padding:10px 7px;gap:6px;font-size:14px;justify-content:center}.subject-button>span{width:22px;height:22px;font-size:14px}.subject-button>.icon{display:none}.demo-intro>.demo-disclaimer{font-size:14px;margin-top:13px;display:block}.demo-disclaimer>.icon{display:none}.demo-disclaimer br{display:none}.quiz-card{padding:23px;min-height:466px}.quiz-header{font-size:14px;gap:10px}.quiz-header>span:first-child{max-width:190px}.quiz-card h3{font-size:20px;line-height:1.5}.quiz-question-label{font-size:14px}.quiz-option{font-size:14px;padding:12px;min-height:47px}.quiz-actions{gap:12px}.hint-button{font-size:14px}.quiz-actions .button{font-size:14px;padding:11px 12px;gap:9px;min-height:42px}.quiz-feedback{font-size:14px}.quiz-feedback strong{font-size:14px}.quiz-hint{font-size:14px}.quiz-footer{font-size:14px}.quiz-footer>span:last-child{font-size:14px}.about-layout{grid-template-columns:1fr;gap:32px}.about-art{aspect-ratio:1.3}.about-copy h2{font-size:35px}.about-copy>p{font-size:14px;max-width:none}.about-values>span{font-size:14px}.faq-section{grid-template-columns:1fr;gap:22px;padding-block:0 65px}.faq-heading h2{font-size:29px;line-height:1.4;margin-top:17px}.faq-heading>.eyebrow{font-size:14px}.faq-list summary{font-size:14px;padding-block:20px;gap:15px}.faq-list details>p{font-size:14px;padding-right:15px}.cta-section{flex-direction:column;align-items:flex-start;padding:33px;gap:24px;border-radius:12px}.cta-section h2{font-size:43px;margin-top:20px}.cta-section p{font-size:14px;max-width:230px;line-height:1.8}.cta-section>.button{margin-top:0;min-height:46px;font-size:14px;padding:12px 17px;gap:20px}.cta-star{right:10%;top:45%;width:47px;height:47px;opacity:.35}.cta-orbit{right:-245px;top:-65px}.site-footer{padding-top:43px}.footer-main{display:grid;grid-template-columns:1fr;gap:23px;padding-bottom:27px}.footer-brand>.brand{font-size:29px}.footer-brand>p{font-size:14px;margin-top:10px}.footer-company{gap:5px;padding:0}.footer-company strong{font-size:14px}.footer-company>span{font-size:14px}.footer-main>nav{margin:0;justify-content:flex-start;gap:23px;font-size:14px;flex-wrap:wrap}.footer-bottom{display:grid;grid-template-columns:1fr auto;gap:14px;padding-block:20px;font-size:14px}.footer-bottom>span:nth-child(2){margin:0;grid-row:2;grid-column:1}.privacy-button{grid-column:1;grid-row:3;font-size:14px;justify-self:start}.back-top{grid-column:2;grid-row:1/3;align-self:start}.privacy-dialog{padding:30px 25px}.privacy-dialog>p{font-size:14px}.privacy-dialog h2{font-size:26px}.js .reveal{transform:translateY(20px)}.feature-grid>.reveal:nth-child(n){transition-delay:0}} @media(max-width:359px){.container{width:calc(100% - 32px)}.hero h1{font-size:47px;letter-spacing:-2.4px}.title-spark{right:-32px;width:24px;height:24px}.hero-actions{gap:13px}.hero-actions .text-link{font-size:14px}.hero-actions .button{font-size:14px;padding-inline:13px}.hero-visual{height:413px}.learning-window{width:90%;left:4%;top:28%}.achievement-card{right:-2%;font-size:14px;top:15%}.window-greeting h3{font-size:14px}.visual-halo{width:280px;height:280px}.orbit-two{height:340px}.progress-card{width:133px;bottom:0;padding:11px}.quiz-card{padding:18px}.quiz-actions{gap:8px}.quiz-actions .button{font-size:14px;gap:6px}.hint-button{font-size:14px}.quiz-option{font-size:14px}.feature-card{padding:22px}.role-panel{padding:23px}.cta-section{padding:28px}.cta-section h2{font-size:39px}} /* Decorative orbits stay inside the page; reading copy keeps a comfortable size. */ html,body{overflow-x:clip} .role-panel{overflow:clip} .learning-window{font-size:14px;line-height:1.6} .role-card{font-size:14px;line-height:1.6} .hero-description{font-size:clamp(16px,1.08vw,18px);max-width:435px} .desktop-nav a{font-size:14px} .section-heading>p{font-size:clamp(16px,1vw,18px)} .feature-card>p,.role-copy>p,.demo-intro>p,.about-copy>p,.step-content>p{font-size:clamp(16px,1vw,18px)} .role-copy li{font-size:clamp(16px,.95vw,18px)} .journey-sticky>p{font-size:14px} .demo-intro>.demo-disclaimer{font-size:14px} .quiz-card h3{font-size:24px} .quiz-option{font-size:14px;min-height:49px} .quiz-feedback,.quiz-hint{font-size:14px} .quiz-feedback strong{font-size:14px} .quiz-actions .button{font-size:14px} .hint-button{font-size:14px} .faq-list summary{font-size:14px} .faq-list details>p{font-size:14px}.footer-company strong{font-size:14px}.footer-company>span{font-size:14px} .footer-main>nav{font-size:14px} .footer-bottom{font-size:14px} .privacy-button{font-size:14px} /* Text contrast stays clear against the restrained pastel palette. */ .muted-text{color:#83897c} .section-heading>p{color:#697065} .feature-card>p{color:#677060} .role-copy>p{color:#66715c} .demo-intro>p,.demo-section .section-heading>p{color:#766782} .subject-button{color:#766383} .quiz-option{color:#766581} .quiz-feedback{color:#5e704f} .quiz-feedback.incorrect{color:#81634f} .quiz-hint{color:#80673e} .hint-button{color:#826196} .about-copy>p,.faq-list details>p{color:#697063} .quiz-results>p{color:#796586} .result-review>div{color:#786586} .result-review .review-answer{color:#897096} .demo-intro>.demo-disclaimer{color:#887692} @media(max-width:959px) and (min-width:700px){.desktop-nav a{font-size:14px}.feature-card>p{font-size:14px}.feature-card{min-height:425px}.quiz-actions .button{font-size:14px}.hint-button{font-size:14px}.quiz-card h3{font-size:20px}.footer-bottom{font-size:14px}.privacy-button{font-size:14px}} @media(max-width:699px){.hero-visual{overflow:clip;overflow-clip-margin:20px}.title-spark{right:-33px;width:28px;height:28px}.hero-description{font-size:14px;max-width:370px}.feature-card>p{font-size:14px}.section-heading>p{font-size:14px}.feature-feedback>p,.feature-progress>p{font-size:14px}.journey-sticky>p{font-size:14px}.quiz-card h3{font-size:21px}.quiz-option{font-size:14px}.quiz-actions .button{font-size:14px}.hint-button{font-size:14px}.demo-intro>.demo-disclaimer{font-size:14px}.footer-company strong{font-size:14px}.footer-company>span{font-size:14px}.footer-main>nav{font-size:14px}.footer-bottom{font-size:14px}.privacy-button{font-size:14px}.about-copy>p{font-size:14px}.faq-list summary{font-size:14px}.faq-list details>p{font-size:14px}} @media(max-width:359px){.title-spark{right:0;width:24px;height:24px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .reveal{opacity:1;transform:none}.chart-line{stroke-dashoffset:0}.learning-window{will-change:auto}.journey-step{opacity:1}.hero-visual{transform:none}} @media print{.site-header,.hero-visual,.hero-bottom,.journey-counter,.cta-section,.privacy-button,.back-top{display:none}.container{width:100%;max-width:none}.section{padding-block:30px}.hero{min-height:0;padding-bottom:30px}.hero h1{font-size:45px}.js .reveal{opacity:1;transform:none}.journey{color:black;background:white}.journey-layout{display:block}.journey-sticky{position:relative;top:0;padding-top:30px}.journey-step{opacity:1;break-inside:avoid}.journey h2>span{color:#666}.journey-steps{padding-block:30px}.role-panel,.about-layout{gap:30px}.faq-section{padding-bottom:30px}body{background:white}.feature-card{break-inside:avoid}.demo-intro{display:none}.demo-layout{display:block}.quiz-card{break-inside:avoid}} /* Be Vietnam Pro: readable type, lively accents, and room for every label. */ :root { --bg: #fbfcff; --ink: #202b3a; --muted: #626e7e; --purple: #713ee8; --lavender: #ede4ff; --lime: #c5f871; --mint: #63e6be; --border: #e0e5ef; --font: 'Be Vietnam Pro', 'Segoe UI', sans-serif; } body { font-size: 17px; } h1, h2, h3 { font-weight: 600; } p { text-wrap: pretty; } .eyebrow, .small-tag, .tiny-label { font-size: 14px; font-weight: 600; letter-spacing: .6px; } .section-index { color: #718096; } .muted-text { color: #758398; } .button { font-size: 16px; min-height: 56px; padding: 15px 23px; border-radius: 10px; } .button-dark { background: var(--purple); box-shadow: 0 6px 18px #713ee817; } .button-dark:hover { background: #5e2dd1; box-shadow: 0 10px 25px #713ee825; } .button-small { font-size: 14px; min-height: 46px; padding: 11px 16px; gap: 13px; } .button-lime { background: var(--lime); box-shadow: 0 8px 25px #b1f45e20; } .button-lime:hover { background: #d5ff91; } .text-link { font-size: 16px; } .status-dot { background: #17bd83; } .site-header { background: #fbfcfff2; } .desktop-nav { gap: 27px; margin-left: 20px; } .desktop-nav a { font-size: 15px; color: #59687c; } .brand-mark i:first-child { background: #26bf96; } .brand-dot { color: var(--purple); } .hero { min-height: 840px; padding-top: 48px; padding-bottom: 110px; column-gap: 40px; } .hero h1 { font-size: clamp(54px, 5.05vw, 72px); line-height: 1.18; letter-spacing: -3px; } .hero-eyebrow { font-size: 14px; letter-spacing: .8px; color: #5b398a; margin-bottom: 25px; } .hero-eyebrow .status-dot { box-shadow: 0 0 0 5px #63e6be24; } .title-spark { stroke: #19b58b; right: -45px; width: 34px; height: 34px; } .hero-description { font-size: 18px; line-height: 1.9; color: #647084; max-width: 490px; } .hero-actions { gap: 24px; flex-wrap: wrap; } .hero-actions .button, .hero-actions .text-link { font-size: 16px; } .hero-note { font-size: 14px; line-height: 1.8; color: #69758a; align-items: flex-start; max-width: 430px; } .hero-note .mini-check { margin-top: 5px; flex-shrink: 0; color: #149b73; border-color: #75cbb3; } .hero-bottom { bottom: 27px; color: #6d7d93; gap: 20px; } .hero-bottom > span, .scroll-cue { font-size: 14px; letter-spacing: .2px; } .scroll-cue { gap: 9px; } .hero-visual { height: 650px; } .visual-halo { width: 470px; height: 470px; top: 12%; left: 8%; background: radial-gradient(circle at 30% 35%, #d6bbff95, #e6d8ff75 50%, #c3f7e870 68%, transparent 70%); } .visual-grid { background-image: linear-gradient(#a7bfdd24 1px, transparent 1px), linear-gradient(90deg, #a7bfdd24 1px, transparent 1px); } .orbit-one { width: 530px; height: 500px; top: 11%; border-color: #78d2b05e; } .orbit-two { width: 500px; height: 570px; top: 5%; border-color: #b19cec66; } .symbol-plus { color: #a077f2; left: 2%; top: 8%; } .symbol-pi { color: #20b790; font-family: var(--font); } .orb-lime { background: radial-gradient(circle at 30% 25%, #f0ffb7, #b7ee56); top: 2%; right: 18%; } .orb-purple { background: radial-gradient(circle at 30% 25%, #dfcbff, #9467ec); } .learning-window { width: 88%; max-width: 490px; left: 8%; top: 16%; font-size: 14px; line-height: 1.6; border-color: #ded4f4; box-shadow: 0 30px 65px #6f4fb51a, 0 4px 12px #522b9708; } .window-bar { font-size: 14px; color: #827393; padding: 12px 14px; background: #f8f5ff; gap: 12px; } .window-bar > .icon { width: 17px; height: 17px; } .window-content { padding: 20px 20px 0; } .window-greeting { gap: 12px; } .window-greeting .tiny-label { font-size: 14px; color: #7e6e96; letter-spacing: 0; } .window-greeting h3 { font-size: 23px; letter-spacing: -.7px; margin-top: 7px; } .avatar { width: 39px; height: 39px; font-size: 18px; flex-shrink: 0; color: #713ee8; background: #ede3ff; } .daily-goal { background: #f0e6ff; padding: 17px 13px; gap: 8px; } .daily-goal > div { padding-left: 34px; } .daily-goal strong { font-size: 15px; color: #593190; line-height: 1.5; } .daily-goal p { font-size: 14px; color: #85699f; line-height: 1.65; } .goal-icon { top: 20px; left: 12px; background: #dac3ff; color: #8146d7; } .goal-arrow { color: #713ee8; font-size: 21px; } .window-section-title { font-size: 15px; gap: 12px; margin-top: 22px; } .window-section-title > span { font-size: 14px; color: #7e6e96; white-space: nowrap; } .mock-course { grid-template-columns: 40px minmax(0, 1fr) 35px; gap: 11px; padding: 16px 0; } .mock-course strong { font-size: 15px; line-height: 1.5; } .mock-course > div > span { font-size: 14px; color: #7f7390; display: block; margin-top: 4px; } .course-symbol { width: 40px; height: 43px; } .course-purple { color: #884ade; background: #ead9ff; } .course-lime { color: #119671; background: #d5f8ed; } .course-percent { font-size: 14px; color: #8b7c9b; } .mock-progress { height: 5px; margin-top: 9px; } .mock-progress span { background: #ab72f1; } .mock-progress.green span { background: #46cfa5; } .window-footer { font-size: 14px; color: #80758e; gap: 16px; padding-block: 13px; } .window-footer > span:last-child { white-space: nowrap; } .window-footer .icon { width: 15px; height: 15px; } .achievement-card { padding: 15px; min-width: 0; max-width: 300px; gap: 10px; top: 4%; right: 0; border-color: #d9eee5; } .achievement-card strong { font-size: 15px; } .achievement-card div > span { font-size: 14px; line-height: 1.6; color: #739080; } .achievement-icon { width: 36px; height: 36px; flex-shrink: 0; color: #12a16f; background: #daf8e8; } .progress-card { width: 216px; padding: 17px; bottom: 0; left: -2%; border-color: #e5d7fa; } .progress-card > .tiny-label { font-size: 14px; color: #8a6ca5; letter-spacing: 0; } .progress-card-top { font-size: 16px; margin-top: 5px; } .progress-card-top > span { background: #e4fcd2; color: #69a52e; } .mini-chart { height: 60px; margin-top: 16px; } .chart-line { stroke: #8b4ce8; } .principles-strip { background: #edfbf6; border-color: #dcefe7; } .principles { padding-block: 32px; gap: 25px; flex-wrap: wrap; } .principles > span, .principles > div { font-size: 15px; } .principles > span { color: #618276; } .principles > span strong { color: #2b7560; } .principles > div { gap: 11px; color: #4b7466; } .principles .icon { color: #21a580; } .section-heading { gap: 60px; } .section-heading > p { font-size: 17px; line-height: 1.85; max-width: 390px; color: #627087; } .feature-card { min-height: 510px; padding: 27px; border-radius: 15px; } .feature-main { background: #eee5ff; border-color: #e0d2f7; } .feature-feedback { background: #def9ed; border-color: #cfeee0; } .feature-progress { background: #eaf3ff; border-color: #dbe6f7; } .feature-top { gap: 12px; margin-bottom: 27px; align-items: flex-start; } .feature-top .small-tag { font-size: 14px; color: #647189; letter-spacing: .3px; } .feature-icon { width: 35px; height: 35px; flex-shrink: 0; background: #ffffff80; } .feature-card h3 { font-size: 27px; } .feature-card > p { font-size: 16px; line-height: 1.8; color: #667089; max-width: none; } .exercise-illustration { padding: 20px; margin: 25px 0 -85px; } .exercise-label { font-size: 14px; letter-spacing: 0; color: #8b6da6; gap: 14px; } .exercise-illustration > strong { font-size: 15px; margin-top: 14px; } .mini-answer { font-size: 14px; padding: 10px; gap: 9px; } .mini-answer > span { font-size: 14px; line-height: 1.6; } .mini-answer > i, .mini-answer .icon { flex-shrink: 0; } .mini-answer.selected { background: #f3e9ff; border-color: #b984ee; } .feedback-label { font-size: 14px; padding: 5px 14px; color: #18865f; } .feedback-circle { background: #81e4b8; box-shadow: inset 0 0 0 9px #b1f1d3; } .feedback-circle > .icon { color: #198f67; } .circle-star { color: #19ad85; } .bar-chart { height: 150px; gap: 10px; margin-top: 26px; } .bar-chart i { background: #bdd5f8; } .bar-chart > div:nth-child(5) i { background: #a887ef; } .bar-chart > div:nth-child(6) i { background: #7b4ddd; } .bar-chart span { font-size: 14px; color: #7186a2; } .journey { background: #1c2e38; } .journey-layout { gap: 70px; } .journey .eyebrow { font-size: 14px; color: #a8cbc7; } .journey .section-index { color: #88b3ac; } .journey-sticky > p { font-size: 17px; color: #b1c6cd; } .journey h2 { font-size: clamp(37px, 3.7vw, 52px); } .journey-counter > span:nth-child(2) { font-size: 16px; } .journey-step { border-color: #405362; opacity: .68; } .journey-step.is-active { opacity: 1; } .step-number { font-size: 14px; border-color: #607e80; color: #b8e6c9; } .step-content h3 { font-size: 25px; } .step-content > p { font-size: 16px; line-height: 1.85; color: #aec6cf; max-width: none; } .step-preview { background: #263c46; border-color: #3e5860; padding: 22px; } .subject-preview > .tiny-label { font-size: 14px; color: #a3c9c6; letter-spacing: .3px; } .subject-tile { font-size: 14px; min-height: 113px; color: #334254; text-align: center; line-height: 1.5; padding: 10px 6px; } .purple-tile { background: #d2b7ff; } .lime-tile { background: #aef1d0; } .peach-tile { background: #ffdba9; } .solution-preview > div { font-size: 15px; align-items: flex-start; } .solution-check { flex-shrink: 0; background: #387562; } .solution-preview > p { font-size: 16px; flex-wrap: wrap; background: #284c4b; border-color: #3c6860; } .solution-preview > p span { font-size: 14px; } .solution-preview > span { font-size: 14px; color: #9ac2bb; } .recap-preview .tiny-label { font-size: 14px; color: #98c1bd; } .recap-preview strong { font-size: 17px; } .role-tabs { max-width: 660px; } .role-tabs button { font-size: 16px; color: #7e7995; padding: 13px 18px; } .role-tabs button > span { font-size: 14px; } .role-tabs button[aria-selected=true] { color: #7040b0; border-color: #dcd0ee; } .role-panel { background: #f0f5ff; border-color: #dce5f5; gap: 55px; padding: 45px; } .role-copy > .small-tag { font-size: 14px; color: #8363a6; } .role-copy h3 { font-size: 29px; letter-spacing: -.9px; max-width: none; } .role-copy > p { font-size: 17px; line-height: 1.85; color: #627087; max-width: none; } .role-copy li { font-size: 15px; line-height: 1.8; color: #5b7187; align-items: flex-start; } .role-copy li > .icon { margin-top: 6px; color: #21b58b; } .role-copy .text-link { font-size: 16px; color: var(--purple); } .role-visual { min-height: 420px; } .role-orbit { width: 390px; height: 400px; border-color: #cddcf0; } .role-card { font-size: 14px; width: 350px; padding: 23px; border-color: #dce6f4; } .role-card-header { align-items: flex-start; gap: 10px; } .role-avatar { width: 36px; height: 36px; font-size: 17px; flex-shrink: 0; background: #e9ddff; color: #8b4de1; } .role-card-header strong { font-size: 16px; } .role-card-header div > span { font-size: 14px; color: #8390a7; line-height: 1.65; } .role-card-header > .icon { color: #a580e5; margin-top: 7px; } .role-card-banner { background: #e1faf0; padding: 17px; } .role-card-banner > span { font-size: 14px; color: #268869; letter-spacing: 0; } .role-card-banner strong { font-size: 16px; } .role-mini-progress { height: 6px; background: #c2ecde; } .role-mini-progress span { background: #3ad0a2; } .role-task { font-size: 15px; padding-top: 18px; color: #6d7f91; gap: 9px; } .role-task > span:last-child { font-size: 14px; color: #9c8faf; } .task-checkbox { width: 19px; height: 19px; flex-shrink: 0; } .task-checkbox.checked { background: #def8ee; border-color: #b4e8d6; color: #23ac80; } .role-card-foot { font-size: 14px; color: #5e8d84; line-height: 1.7; align-items: flex-start; } .role-card-foot .status-dot { margin-top: 9px; flex-shrink: 0; } .demo-section { background: #f1ebff; border-color: #e4d9f7; } .demo-layout { gap: 70px; grid-template-columns: .8fr 1.2fr; } .demo-badge { font-size: 14px; color: #7643ba; background: #e3d3ff; letter-spacing: .5px; padding: 6px 10px; } .demo-badge > .icon { width: 13px; height: 13px; } .demo-intro h3 { font-size: 29px; } .demo-intro > p { font-size: 17px; color: #786789; max-width: none; } .subject-buttons { max-width: 330px; } .subject-button { font-size: 16px; padding: 14px 16px; color: #806894; border-color: #d9c6f0; } .subject-button > span { width: 33px; height: 33px; background: #e2d0fa; color: #9959de; font-size: 17px; } .subject-button.active { border-color: #ad7de9; color: #743ab4; box-shadow: 0 6px 14px #713ee80b; } .subject-button.active > .icon { color: #9454dd; } .demo-intro > .demo-disclaimer { font-size: 14px; color: #77558c; line-height: 1.8; } .demo-disclaimer > .icon { width: 18px; height: 18px; } .quiz-card { min-height: 590px; padding: 30px; border-radius: 15px; border-color: #dfcbf6; } .quiz-header { font-size: 14px; color: #8354a4; letter-spacing: .2px; align-items: flex-start; } .quiz-header > span:first-child { max-width: 280px; } .quiz-header > span:last-child { font-size: 14px; flex-shrink: 0; color: #9a81af; } .quiz-progress { height: 4px; margin-bottom: 28px; } .quiz-progress > span { background: #ae6bea; } .quiz-question-label { font-size: 14px; color: #9175a7; letter-spacing: .2px; } .quiz-card h3 { font-size: 25px; line-height: 1.6; } .quiz-option { font-size: 16px; min-height: 57px; padding: 13px 15px; gap: 12px; color: #776181; } .option-letter { font-size: 14px; width: 26px; height: 26px; background: #f4ebff; color: #9770b9; } .quiz-option:has(input:checked) { background: #f3e7ff; border-color: #ab73de; } .quiz-actions { gap: 17px; align-items: center; } .quiz-actions .button { font-size: 15px; min-height: 48px; padding: 12px 16px; gap: 12px; } .hint-button { font-size: 14px; gap: 7px; color: #8854b6; } .hint-button > .icon { width: 18px; height: 18px; } .quiz-hint, .quiz-feedback, .quiz-feedback strong { font-size: 16px; } .quiz-footer { font-size: 14px; color: #846597; gap: 15px; } .quiz-footer > span:last-child { font-size: 18px; } .quiz-results > .eyebrow { font-size: 14px; color: #9e69c4; } .quiz-results > p { font-size: 16px; } .result-score > span { font-size: 16px; } .result-review > div { font-size: 15px; line-height: 1.8; gap: 11px; } .result-review .review-answer { font-size: 14px; margin-top: 5px; } .result-review .review-status { width: 20px; height: 20px; font-size: 14px; margin-top: 4px; } .quiz-results > .button { font-size: 16px; } .about-art { background: #def9ed; border-color: #ceefdf; } .large-brand-mark i { background: linear-gradient(135deg, #74e4bc, #24b98d); } .large-brand-mark i:first-child { background: linear-gradient(130deg, #d8bbff, #a16ae8); } .about-copy > p { font-size: 17px; color: #637288; line-height: 1.9; max-width: none; } .about-values > span { font-size: 15px; color: #237b64; } .about-values .icon { width: 18px; height: 18px; } .faq-section { gap: 55px; } .faq-heading > .eyebrow { font-size: 14px; color: #8970a7; } .faq-list summary { font-size: 17px; padding-block: 24px; line-height: 1.7; gap: 22px; } .faq-list details > p { font-size: 16px; line-height: 1.9; color: #637288; } .cta-section { background: linear-gradient(120deg, #30204d, #252641); padding: 62px; } .cta-section .eyebrow { font-size: 14px; color: #b1abce; letter-spacing: .8px; } .cta-section h2 { font-size: 51px; } .cta-section p { font-size: 17px; color: #b9b6ce; line-height: 1.9; } .cta-section > .button { font-size: 16px; } .cta-star { stroke: #b7f573; } .footer-main { flex-wrap: wrap; gap: 32px; } .footer-brand > p { font-size: 15px; color: #73849d; } .footer-company strong, .footer-company > span { font-size: 14px; line-height: 1.8; } .footer-company { max-width: 365px; } .footer-company > span { color: #65728b; } .footer-main > nav { font-size: 15px; gap: 20px; color: #708299; } .footer-bottom { flex-wrap: wrap; font-size: 14px; gap: 20px; color: #64728a; } .footer-bottom > span:nth-child(2) { margin-left: 0; } .privacy-button { font-size: 14px; color: #775d94; margin-left: auto; } .back-top { width: 34px; height: 34px; font-size: 17px; } .privacy-dialog > p { font-size: 16px; line-height: 1.9; } .privacy-dialog .eyebrow { font-size: 14px; } .privacy-dialog .button { font-size: 16px; } .noscript-message { font-size: 16px; } @media (max-width: 1199px) { .desktop-nav { gap: 20px; } .desktop-nav a { font-size: 14px; } .hero { min-height: 860px; column-gap: 25px; } .hero h1 { font-size: 60px; letter-spacing: -2.6px; } .hero-description { font-size: 17px; } .hero-actions { flex-direction: column; align-items: flex-start; gap: 19px; } .hero-visual { height: 660px; } .learning-window { width: 96%; left: 2%; top: 18%; } .window-greeting h3 { font-size: 20px; } .window-greeting .tiny-label { line-height: 1.6; } .visual-halo { width: 360px; height: 440px; left: 2%; } .orbit-one { width: 405px; height: 510px; } .orbit-two { width: 410px; height: 560px; } .achievement-card { right: -1%; top: 6%; } .progress-card { left: -3%; bottom: -1%; width: 215px; } .principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; } .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } .feature-main { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; min-height: 350px; } .feature-main .feature-top { grid-column: 1 / -1; } .feature-main h3, .feature-main > p { grid-column: 1; } .feature-main .exercise-illustration { grid-column: 2; grid-row: 2 / 4; margin: 0 0 -55px; align-self: start; } .feature-feedback, .feature-progress { min-height: 520px; } .role-panel { padding: 35px; gap: 35px; } .role-copy h3 { font-size: 26px; } .role-card { width: 330px; padding: 19px; } .demo-layout { gap: 40px; } .quiz-card { padding: 25px; } .quiz-actions { flex-wrap: wrap; } .about-layout { gap: 45px; } .footer-main > nav { width: 100%; justify-content: flex-start; margin-top: 0; } } @media (max-width: 959px) { .desktop-nav { display: none; } .menu-toggle { display: flex; } .nav-actions .button { font-size: 14px; min-height: 46px; padding: 11px 15px; gap: 10px; } .hero { grid-template-columns: 1fr 1fr; min-height: 860px; } .hero h1 { font-size: 49px; letter-spacing: -2px; } .hero-eyebrow { font-size: 14px; letter-spacing: 0; line-height: 1.8; } .hero-description { font-size: 16px; } .hero-actions .button, .hero-actions .text-link { font-size: 15px; } .title-spark { right: 0; bottom: 12px; width: 25px; height: 25px; } .hero-visual { height: 720px; } .learning-window { width: 98%; top: 18%; left: 2%; transform: rotate(-3deg); } .window-content { padding: 18px 16px 0; } .window-greeting .tiny-label { display: none; } .window-greeting h3 { font-size: 20px; margin-top: 0; } .avatar { width: 30px; height: 30px; font-size: 16px; } .window-bar { gap: 8px; font-size: 14px; } .window-bar > .icon { display: none; } .daily-goal > div { padding-left: 0; } .goal-icon { display: none; } .daily-goal { padding: 15px 12px; } .window-section-title > span { display: none; } .mock-course { grid-template-columns: 35px minmax(0, 1fr); gap: 9px; } .course-symbol { width: 35px; height: 39px; } .course-percent { display: none; } .mock-course strong { font-size: 14px; } .window-footer > span:first-child { display: none; } .window-footer { justify-content: flex-end; } .progress-card { bottom: 3%; left: 0; width: 208px; } .achievement-card { max-width: 270px; top: 7%; right: -1%; } .achievement-card .card-confetti { display: none; } .visual-halo { width: 300px; height: 530px; } .orbit-one, .orbit-two { width: 310px; height: 620px; } .symbol-plus { font-size: 44px; } .hero-bottom > span { display: none; } .section-heading { display: block; } .section-heading > p { font-size: 17px; max-width: 580px; margin-top: 24px; } .journey-layout { gap: 35px; } .journey h2 { font-size: 36px; letter-spacing: -1.6px; } .journey-sticky { top: 105px; } .step-content h3 { font-size: 22px; } .step-content > p { font-size: 16px; } .step-preview { padding: 16px; } .subject-preview > div { flex-wrap: wrap; } .subject-tile { font-size: 14px; min-width: 65px; padding-inline: 4px; } .subject-tile b { font-size: 23px; } .solution-preview > p { font-size: 16px; gap: 9px; } .role-panel { grid-template-columns: 1fr; padding: 36px; gap: 25px; } .role-copy h3 { font-size: 29px; } .role-visual { margin-block: 5px 25px; } .role-card { width: 370px; } .demo-layout { grid-template-columns: 1fr; gap: 30px; } .demo-intro { padding: 0; } .demo-intro h3 { display: none; } .subject-buttons { max-width: none; flex-direction: row; } .subject-button { flex: 1; } .demo-intro > .demo-disclaimer { margin-top: 15px; } .quiz-card { max-width: none; } .quiz-actions { flex-wrap: nowrap; } .quiz-actions .button { font-size: 16px; } .hint-button { font-size: 14px; } .about-layout { grid-template-columns: 1fr; gap: 35px; } .about-art { aspect-ratio: 1.8; } .about-copy h2 { font-size: 40px; } .faq-section { grid-template-columns: 1fr; gap: 28px; } .faq-heading h2 { font-size: 35px; } .cta-section { padding: 40px; gap: 30px; } .cta-section h2 { font-size: 43px; } .cta-section > .button { font-size: 15px; padding: 14px 18px; } .cta-star { display: none; } } @media (max-width: 699px) { html { scroll-padding-top: 93px; } body { font-size: 16px; } .nav-wrap { height: 78px; gap: 10px; } .nav-actions { gap: 8px; } .nav-actions .button { font-size: 14px; min-height: 43px; padding: 11px 12px; } .menu-toggle { width: 43px; height: 43px; flex-shrink: 0; } .hero { min-height: 0; padding-top: 37px; padding-bottom: 78px; gap: 0; } .hero h1 { font-size: clamp(41px, 10.5vw, 62px); letter-spacing: -2px; line-height: 1.22; } .hero-eyebrow { letter-spacing: .2px; margin-bottom: 24px; font-size: 14px; } .hero-description { font-size: 17px; max-width: none; margin-top: 25px; line-height: 1.85; } .hero-actions { flex-direction: column; gap: 20px; margin-top: 27px; } .hero-actions .button { font-size: 16px; min-height: 54px; padding: 14px 20px; gap: 19px; } .hero-actions .text-link { font-size: 16px; gap: 12px; } .play-circle { width: 30px; height: 30px; } .hero-note { font-size: 14px; margin-top: 23px; max-width: none; } .title-spark { right: 0; bottom: 17px; width: 25px; height: 25px; } .hero-visual { height: 655px; max-width: 440px; margin-top: 45px; overflow-clip-margin: 20px; } .learning-window { width: 92%; left: 4%; top: 17%; font-size: 14px; transform: rotate(-3deg); } .window-content { padding: 17px 16px 0; } .window-bar { font-size: 14px; padding: 11px 12px; } .window-dots { gap: 3px; } .window-greeting h3 { font-size: 20px; margin-top: 0; } .window-greeting .tiny-label { display: none; } .daily-goal strong { font-size: 15px; } .daily-goal p { font-size: 14px; line-height: 1.65; } .daily-goal { margin-top: 17px; } .window-section-title { font-size: 15px; } .mock-course { padding-block: 15px; } .mock-course strong, .mock-course > div > span { font-size: 14px; } .course-percent { display: none; } .achievement-card { top: 4%; right: 0; max-width: 290px; padding: 13px; } .achievement-card strong { font-size: 15px; } .achievement-card div > span { font-size: 14px; } .achievement-icon { width: 34px; height: 34px; } .progress-card { width: 207px; padding: 15px; left: 0; bottom: 4%; } .progress-card-top { font-size: 16px; } .mini-chart { height: 49px; } .visual-halo { width: 300px; height: 510px; top: 13%; left: 6%; } .orbit-one { width: 95%; height: 555px; top: 11%; } .orbit-two { width: 95%; height: 605px; top: 5%; } .symbol-plus { top: 7%; left: 4%; font-size: 35px; } .symbol-pi { right: 2%; bottom: 7%; font-size: 30px; } .orb-lime { top: 0; right: 23%; } .orb-purple { bottom: 1%; right: 20%; } .hero-bottom { bottom: 16px; } .hero-bottom > span { display: none; } .scroll-cue { font-size: 14px; } .principles { gap: 25px 19px; } .principles > span, .principles > div { font-size: 14px; line-height: 1.8; } .principles > div { align-items: flex-start; } .principles .icon { margin-top: 5px; width: 19px; height: 19px; } .section { padding-block: 72px; } .section-heading { margin-bottom: 30px; } .section-heading > p { font-size: 16px; margin-top: 21px; max-width: none; } h2 { font-size: 33px; letter-spacing: -1.2px; line-height: 1.45; } .section-heading h2 { margin-top: 20px; } .feature-grid { grid-template-columns: 1fr; gap: 18px; } .feature-card { padding: 26px; display: block; min-height: 0; } .feature-main { grid-column: auto; min-height: 555px; } .feature-card h3 { font-size: 27px; } .feature-card > p { font-size: 16px; line-height: 1.85; margin-top: 16px; } .feature-top { margin-bottom: 23px; } .feature-top .small-tag { font-size: 14px; } .exercise-illustration { padding: 17px; margin: 28px auto -65px; max-width: 350px; min-height: 0; } .exercise-label, .exercise-illustration > strong, .mini-answer, .mini-answer > span { font-size: 14px; } .mini-answer { padding: 10px 8px; gap: 8px; } .feedback-illustration { margin: 30px 0 29px; } .feedback-circle { width: 90px; height: 90px; } .circle-orbit { width: 125px; height: 101px; left: -18px; } .feedback-label { font-size: 14px; padding: 5px 13px; } .bar-chart { height: 160px; margin-top: 32px; gap: 9px; } .bar-chart span{ font-size: 14px; } .journey-sticky { padding-top: 69px; } .journey h2 { font-size: 36px; } .journey-sticky > p { font-size: 16px; } .journey-counter { position: relative; right: auto; bottom: auto; margin-top: 26px; } .journey-counter > span:first-child { font-size: 35px; } .journey-counter > span:nth-child(2) { font-size: 16px; } .journey-line { width: 105px; margin-left: 5px; } .journey-steps { padding-top: 40px; } .journey-step { gap: 12px; grid-template-columns: 28px minmax(0, 1fr); } .step-content h3 { font-size: 22px; } .step-content > p { font-size: 16px; line-height: 1.85; } .step-number { font-size: 14px; } .step-preview { padding: 17px; } .subject-preview > .tiny-label { font-size: 14px; letter-spacing: 0; } .subject-preview > div { gap: 7px; flex-wrap: nowrap; } .subject-tile { font-size: 14px; min-width: 0; min-height: 110px; padding: 9px 4px; gap: 8px; } .subject-tile b { font-size: 24px; } .solution-preview > div { font-size: 14px; } .solution-preview > p { font-size: 16px; padding: 14px 10px; gap: 9px; } .solution-preview > span { font-size: 14px; } .recap-preview .tiny-label { font-size: 14px; } .recap-preview strong { font-size: 17px; line-height: 1.65; align-items: flex-start; gap: 10px; } .role-tabs { padding: 5px; gap: 5px; } .role-tabs button { font-size: 14px; padding: 11px 8px; justify-content: center; } .role-tabs button > span { display: none; } .role-panel { padding: 26px; gap: 25px; } .role-copy > .small-tag { font-size: 14px; } .role-copy h3 { font-size: 27px; } .role-copy > p { font-size: 16px; } .role-copy li { font-size: 15px; } .role-copy .text-link { font-size: 16px; } .role-visual { min-height: 440px; margin-block: 8px 45px; } .role-card { width: 100%; max-width: 340px; padding: 18px; } .role-card-header strong, .role-card-banner strong { font-size: 16px; } .role-card-header div > span, .role-card-banner > span { font-size: 14px; } .role-avatar { width: 30px; height: 30px; font-size: 16px; } .role-card-header > .icon { display: none; } .role-task { font-size: 14px; gap: 8px; } .role-task > span:last-child { font-size: 14px; } .role-card-foot { font-size: 14px; } .role-orbit { width: 330px; height: 400px; } .demo-layout { gap: 28px; } .demo-badge { font-size: 14px; } .demo-intro > p { font-size: 16px; } .subject-buttons { flex-wrap: wrap; gap: 9px; } .subject-button { font-size: 14px; min-width: 96px; padding: 11px 9px; gap: 7px; } .subject-button > span { font-size: 15px; width: 25px; height: 28px; flex-shrink: 0; } .subject-button > .icon { display: none; } .demo-intro > .demo-disclaimer { font-size: 14px; line-height: 1.85; } .quiz-card { padding: 23px; min-height: 560px; } .quiz-header { font-size: 14px; flex-wrap: wrap; gap: 9px; } .quiz-header > span:first-child { max-width: none; width: 100%; } .quiz-header > span:last-child { font-size: 14px; } .quiz-question-label { font-size: 14px; line-height: 1.7; } .quiz-card h3 { font-size: 22px; line-height: 1.55; } .quiz-option { font-size: 16px; padding: 12px; min-height: 57px; gap: 10px; } .option-letter { font-size: 14px; width: 24px; height: 24px; } .quiz-actions { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 25px; } .hint-button { font-size: 14px; align-self: flex-start; } .quiz-actions .button { font-size: 16px; min-height: 49px; padding: 13px 15px; gap: 13px; } .quiz-feedback, .quiz-feedback strong, .quiz-hint { font-size: 16px; } .quiz-footer { font-size: 14px; align-items: flex-start; gap: 15px; } .quiz-footer > span:first-child { line-height: 1.7; } .quiz-footer > span:first-child > .icon { display: none; } .quiz-footer > span:last-child { font-size: 18px; } .quiz-results > .eyebrow { font-size: 14px; } .result-review > div { font-size: 15px; } .result-review .review-answer { font-size: 14px; } .quiz-results > .button { font-size: 16px; } .about-art { aspect-ratio: 1.2; } .about-copy h2 { font-size: 34px; } .about-copy > p { font-size: 16px; } .about-values > span { font-size: 15px; align-items: flex-start; } .about-values .icon { margin-top: 4px; } .faq-heading > .eyebrow { font-size: 14px; } .faq-heading h2 { font-size: 30px; } .faq-list summary { font-size: 16px; line-height: 1.8; } .faq-list details > p { font-size: 16px; line-height: 1.85; } .cta-section { padding: 31px; } .cta-section .eyebrow { font-size: 14px; letter-spacing: .2px; } .cta-section h2 { font-size: 41px; } .cta-section p { font-size: 16px; max-width: none; } .cta-section > .button { font-size: 16px; min-height: 53px; padding: 14px 20px; } .footer-brand > p { font-size: 15px; } .footer-company strong, .footer-company > span { font-size: 14px; } .footer-main > nav { font-size: 15px; gap: 19px; } .footer-bottom { font-size: 14px; gap: 17px; } .privacy-button { font-size: 14px; margin-left: 0; } .privacy-dialog .eyebrow { font-size: 14px; } .privacy-dialog > p { font-size: 16px; } .privacy-dialog .button { font-size: 16px; } } @media (max-width: 359px) { .brand { font-size: 27px; } .brand-mark { transform: scale(.75); margin-right: -5px; } .nav-actions .button { padding-inline: 9px; gap: 7px; } .nav-actions .button > .icon { display: none; } .hero h1 { font-size: 36px; letter-spacing: -1.6px; } .hero-description { font-size: 16px; } .hero-visual { height: 665px; } .learning-window { width: 96%; left: 2%; } .window-content { padding-inline: 13px; } .window-greeting h3 { font-size: 18px; } .achievement-card { max-width: 270px; } .progress-card { width: 196px; } .principles { grid-template-columns: 1fr; gap: 19px; } .feature-card { padding: 22px; } .feature-card h3 { font-size: 25px; } .exercise-illustration { padding: 13px; } .journey-step { grid-template-columns: 1fr; gap: 16px; } .journey h2 { font-size: 32px; } .role-panel { padding: 21px; } .role-copy h3 { font-size: 25px; } .role-card { padding: 16px; } .role-avatar { display: none; } .role-card-header { gap: 0; } .role-task > span:last-child { display: none; } .subject-buttons { flex-direction: column; } .subject-button { justify-content: flex-start; padding-inline: 15px; font-size: 16px; } .subject-button > span { width: 29px; } .quiz-card { padding: 20px; } .quiz-card h3 { font-size: 21px; } .quiz-option { font-size: 16px; } .cta-section { padding: 26px; } .cta-section h2 { font-size: 36px; } } @media (prefers-reduced-motion: reduce) { .journey-step { opacity: 1; } .learning-window { transform: rotate(-3deg); } }