/* Public learning landing page */
body:has(.landing-page:not([hidden])) { background: #f7f5ef; }
html:has(.landing-page:not([hidden])) { overflow-x:hidden; overflow-y:auto; }
body:has(.landing-page:not([hidden])) { height:auto; min-height:100%; overflow:visible; }
body:has(#landingPage:not([hidden])) #tabBar { display:none!important; }
.landing-page { --landing-ink:#24352d; --landing-muted:#6d776f; --landing-paper:#f7f5ef; --landing-green:#315e48; --landing-lime:#d9e5b9; --landing-orange:#e9a176; display:block; overflow:hidden; color:var(--landing-ink); background:var(--landing-paper); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.landing-page[hidden] { display:none; }
.landing-page * { box-sizing:border-box; }
.landing-page button,.landing-page a { font:inherit; }
.landing-nav { width:min(1240px,calc(100% - 72px)); height:88px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(36,53,45,.1); }
.landing-brand { display:inline-flex; align-items:center; gap:11px; color:var(--landing-ink); text-decoration:none; font-size:18px; font-weight:700; letter-spacing:-.065em; }
.brand-accent { color:#779174; font-weight:500; }
.landing-brand-mark { display:block; width:29px; height:29px; flex:none; object-fit:cover; border-radius:8px; }
.landing-nav-links { display:flex; align-items:center; gap:39px; margin-left:60px; }
.landing-nav-links a { color:#727b74; text-decoration:none; font-size:12px; font-weight:550; transition:color .2s; }.landing-nav-links a:hover { color:var(--landing-green); }
.landing-nav-actions { display:flex; align-items:center; gap:20px; }
.landing-nav-actions button,.cta-login button { border:0; cursor:pointer; }
.landing-login { color:var(--landing-ink); background:none; font-size:12px!important; font-weight:600!important; }.landing-signup { padding:12px 17px; color:white; border-radius:9px; background:#315e48; font-size:12px!important; font-weight:600!important; box-shadow:0 5px 14px rgba(49,94,72,.14); transition:transform .2s,background .2s; }.landing-signup:hover,.hero-primary:hover,.feature-cta:hover { background:#244b38; transform:translateY(-2px); }.landing-signup span { margin-left:10px; font-size:16px; }
.landing-hero { position:relative; width:min(1240px,calc(100% - 72px)); min-height:590px; margin:auto; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; padding:47px 0 72px; }
.hero-copy { position:relative; z-index:2; padding:22px 0 8px 25px; }
.landing-eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 22px; color:#66826a; font-size:10px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:#d58c67; box-shadow:0 0 0 4px rgba(213,140,103,.14); }
.hero-copy h1,.section-heading h2,.feature-copy h2,.landing-cta h2 { margin:0; color:#273a30; font-family:Fraunces,Georgia,serif; font-size:clamp(57px,6.7vw,88px); font-weight:400; line-height:.99; letter-spacing:-.065em; }
.hero-copy h1 em,.section-heading h2 em,.feature-copy h2 em,.landing-cta h2 em { color:#779174; font-weight:400; }
.hero-description { max-width:415px; margin:24px 0 28px; color:#727b74; font-size:14px; line-height:1.85; }
.hero-actions { display:flex; align-items:center; gap:23px; }
.hero-primary,.feature-cta { min-height:49px; padding:0 19px; color:#fff; border:0; border-radius:9px; background:#315e48; cursor:pointer; font-size:12px!important; font-weight:600!important; box-shadow:0 7px 16px rgba(49,94,72,.16); transition:transform .2s,background .2s; }
.hero-primary span,.feature-cta span { margin-left:14px; font-size:17px; vertical-align:-1px; }
.hero-secondary { display:flex; align-items:center; gap:9px; color:#546259; font-size:12px; font-weight:600; text-decoration:none; }.play-icon { display:grid; width:27px; height:27px; place-items:center; border:1px solid #cbd2c8; border-radius:50%; color:#57745f; font-size:8px; padding-left:2px; }
.hero-proof { display:flex; align-items:center; gap:12px; margin-top:36px; }.proof-avatars { display:flex; padding-left:4px; }.proof-avatars span { display:grid; width:24px; height:24px; margin-left:-4px; place-items:center; border:2px solid var(--landing-paper); border-radius:50%; background:#b9c7a8; color:#304438; font-size:8px; font-weight:700; }.proof-avatars span:nth-child(2){background:#e5b398}.proof-avatars span:nth-child(3){background:#d7cba1}.hero-proof p { margin:0; color:#879087; font-size:10px; }.hero-proof strong { color:#59655c; font-weight:650; }
.hero-art-wrap { position:relative; display:flex; min-height:477px; align-items:center; justify-content:center; }.hero-art { position:relative; z-index:1; width:min(100%,620px); height:auto; filter:drop-shadow(0 28px 35px rgba(58,70,52,.12)); }.art-orbit { position:absolute; border:1px solid rgba(121,145,116,.17); border-radius:50%; }.art-orbit-one { width:460px; height:460px; }.art-orbit-two { width:355px; height:355px; border-style:dashed; opacity:.8; }.floating-note { position:absolute; z-index:2; display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid rgba(46,69,51,.08); border-radius:12px; background:rgba(255,255,252,.9); box-shadow:0 12px 30px rgba(49,61,45,.1); backdrop-filter:blur(12px); }.floating-note strong,.floating-note small { display:block; }.floating-note strong { color:#35443a; font-size:10px; }.floating-note small { margin-top:4px; color:#8a9189; font-size:9px; }.note-chat { top:93px; left:8px; }.note-reels { right:-4px; bottom:98px; }.note-icon { display:grid; width:29px; height:29px; place-items:center; border-radius:9px; font-size:15px; }.note-icon-chat { color:#587f5e; background:#e5eddb; }.note-icon-reel { color:#b96f4d; background:#f9e8dc; }.art-sparkle { position:absolute; z-index:2; color:#d68d68; }.sparkle-one { top:47px; right:76px; font-size:22px; }.sparkle-two { bottom:80px; left:60px; font-size:17px; color:#91a570; }.hero-scroll-cue { position:absolute; bottom:23px; left:25px; display:flex; align-items:center; gap:11px; color:#9ba198; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }.hero-scroll-cue span { width:24px; height:1px; background:#c2c9bd; }
.landing-how { padding:105px 36px 119px; background:#fffefa; }.section-heading { max-width:520px; margin:0 auto 64px; text-align:center; }.section-heading .landing-eyebrow { justify-content:center; margin-bottom:16px; }.section-heading h2,.feature-copy h2 { font-size:clamp(44px,5vw,62px); }.section-heading>p:last-child { max-width:410px; margin:18px auto 0; color:#828a82; font-size:13px; line-height:1.7; }
.learning-steps { display:grid; width:min(1040px,100%); grid-template-columns:repeat(3,1fr); gap:24px; margin:auto; }.learning-step { position:relative; min-height:279px; padding:25px 24px 24px; border:1px solid #efeee7; border-radius:14px; background:#fff; }.step-number { position:absolute; top:23px; right:22px; color:#a2aa9f; font-family:Fraunces,Georgia,serif; font-size:13px; }.step-illustration { position:relative; height:131px; margin-bottom:20px; }.step-bubble { position:absolute; padding:10px 12px; border-radius:11px; font-size:9px; }.bubble-question { top:16px; left:7px; color:#5d6c61; background:#f1f2e9; }.bubble-answer { right:10px; bottom:12px; color:#fff; background:#668269; box-shadow:0 8px 18px #66826929; }.step-spark { position:absolute; top:62px; left:46%; color:#d49a69; font-size:20px; }.step-map { display:block; }.map-node { position:absolute; z-index:2; display:grid; min-width:77px; height:31px; padding:0 8px; place-items:center; border:1px solid #e5e9dc; border-radius:8px; background:#fff; color:#647364; font-size:8px; }.map-center { top:48px; left:50%; transform:translateX(-50%); color:#fff; border-color:#65846a; background:#65846a; }.map-one { top:4px; left:11px; }.map-two { right:0; bottom:5px; }.map-line { position:absolute; top:40px; left:65px; width:67px; height:30px; border-top:1px solid #c9d3bf; border-right:1px solid #c9d3bf; transform:rotate(18deg); }.map-line-two { top:66px; left:52%; width:81px; height:35px; border-top:0; border-right:0; border-bottom:1px solid #c9d3bf; border-left:1px solid #c9d3bf; transform:rotate(-15deg); }.step-cards { perspective:400px; }.mini-card { position:absolute; top:15px; left:37px; width:174px; height:103px; border-radius:10px; }.card-back { transform:rotate(8deg) translate(12px,3px); background:#e9efdf; }.card-front { display:flex; flex-direction:column; justify-content:space-between; padding:13px; transform:rotate(-4deg); color:#526357; border:1px solid #ebeee4; background:#fffcf4; box-shadow:0 8px 19px #45534617; }.card-front span { color:#a5ad98; font-size:7px; letter-spacing:.1em; }.card-front b { max-width:143px; font-family:Fraunces,Georgia,serif; font-size:12px; font-weight:500; line-height:1.2; }.card-front i { color:#a1a69b; font-size:7px; font-style:normal; }.learning-step h3 { margin:0 0 9px; color:#34443a; font-family:Fraunces,Georgia,serif; font-size:20px; font-weight:500; letter-spacing:-.03em; }.learning-step>p { max-width:260px; margin:0; color:#818981; font-size:11px; line-height:1.65; }
.landing-feature { display:grid; width:min(1030px,calc(100% - 72px)); grid-template-columns:1fr 1fr; gap:100px; align-items:center; margin:40px auto 112px; padding:64px 35px; }.feature-art { position:relative; min-height:350px; display:grid; place-items:center; border-radius:45% 55% 53% 47%/53% 45% 55% 47%; background:#e9ecdf; }.feature-art img { width:112%; max-width:500px; }.feature-sticker { position:absolute; right:5px; bottom:34px; display:grid; width:83px; height:83px; place-content:center; transform:rotate(9deg); border-radius:50%; background:#e8a27c; color:white; font-family:Fraunces,Georgia,serif; font-size:12px; line-height:1.25; text-align:center; box-shadow:0 7px 19px #b4775540; }.feature-copy .landing-eyebrow { margin-bottom:16px; }.feature-copy h2 { font-size:clamp(41px,4.4vw,55px); }.feature-copy>p:not(.landing-eyebrow) { margin:18px 0 20px; color:#7c857d; font-size:12px; line-height:1.8; }.feature-copy ul { display:grid; gap:13px; margin:0 0 27px; padding:0; list-style:none; }.feature-copy li { color:#667168; font-size:11px; }.feature-copy li span { display:inline-grid; width:17px; height:17px; margin-right:8px; place-items:center; border-radius:50%; color:#547451; background:#e5ecdc; font-size:10px; }
.landing-cta { position:relative; overflow:hidden; padding:84px 24px 79px; background:#e9eddf; text-align:center; }.landing-cta .landing-eyebrow { justify-content:center; margin-bottom:18px; }.landing-cta h2 { font-size:clamp(47px,5.5vw,68px); }.landing-cta .hero-primary { margin-top:27px; }.cta-login { margin:17px 0 0; color:#818b80; font-size:10px; }.cta-login button { padding:0; color:#46694e; background:none; font-size:10px; font-weight:700; text-decoration:underline; text-underline-offset:2px; }.cta-doodle { position:absolute; top:26px; right:calc(50% - 300px); color:#cf916e; font-size:30px; transform:rotate(12deg); }
.landing-footer { display:flex; width:min(1240px,calc(100% - 72px)); min-height:94px; align-items:center; justify-content:space-between; margin:auto; flex-wrap:wrap; gap:12px; }.landing-footer .landing-brand { font-size:15px; }.landing-footer .landing-brand-mark { width:25px; height:25px; border-radius:7px; }.landing-footer p,.landing-footer>span { color:#9ba198; font-size:9px; }.landing-footer-links { display:flex; align-items:center; gap:8px; }.landing-footer-link { background:none; border:none; padding:0; color:#828a82; font-size:10px; font-weight:500; cursor:pointer; text-decoration:none; transition:color .15s ease; font-family:inherit; }.landing-footer-link:hover { color:#3b5042; text-decoration:underline; text-underline-offset:2px; }.landing-footer-dot { color:#b5bdb3; font-size:8px; }
@media(max-width:900px){.landing-nav,.landing-hero,.landing-footer{width:calc(100% - 48px)}.landing-nav-links{gap:20px;margin-left:0}.landing-hero{grid-template-columns:1fr 1fr;min-height:550px}.hero-copy{padding-left:0}.hero-art-wrap{min-height:400px}.art-orbit-one{width:350px;height:350px}.art-orbit-two{width:275px;height:275px}.note-chat{left:-12px}.note-reels{right:-7px}.learning-steps{gap:14px}.learning-step{padding:20px 17px}.landing-feature{gap:55px;width:calc(100% - 72px);padding-right:10px;padding-left:10px}}
@media(max-width:640px){.landing-nav{width:calc(100% - 36px);height:72px}.landing-brand{font-size:16px}.landing-nav-links{display:none}.landing-nav-actions{gap:15px}.landing-signup{padding:10px 12px}.landing-hero{width:calc(100% - 40px);grid-template-columns:1fr;padding:58px 0 60px}.hero-copy{padding:0}.hero-copy h1{font-size:clamp(58px,15vw,80px)}.hero-description{max-width:420px;font-size:13px}.hero-art-wrap{min-height:330px;margin:13px -7px 2px}.hero-art{width:min(100%,435px)}.art-orbit-one{width:310px;height:310px}.art-orbit-two{width:242px;height:242px}.note-chat{top:32px;left:0}.note-reels{right:0;bottom:34px}.sparkle-one{top:4px;right:42px}.sparkle-two{bottom:22px;left:34px}.hero-scroll-cue{left:0;bottom:15px}.landing-how{padding:76px 20px 78px}.section-heading{margin-bottom:38px}.section-heading h2{font-size:49px}.learning-steps{max-width:420px;grid-template-columns:1fr;gap:12px}.learning-step{min-height:242px;padding:20px 22px}.step-illustration{height:113px;margin-bottom:15px}.landing-feature{width:calc(100% - 40px);grid-template-columns:1fr;gap:35px;margin:5px auto 72px;padding:25px 0}.feature-art{min-height:290px;width:100%}.feature-art img{width:105%}.feature-copy h2{font-size:47px}.landing-cta{padding:69px 18px 66px}.landing-cta h2{font-size:53px}.cta-doodle{right:15%;top:21px}.landing-footer{width:calc(100% - 40px);min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px 0;text-align:center}.landing-footer p{margin:0}.landing-footer-links{margin:4px 0}}
@media(max-width:360px){.landing-nav-actions{gap:9px}.landing-login{font-size:11px!important}.landing-signup{font-size:11px!important;padding:9px}.hero-actions{gap:14px}.hero-primary{padding:0 13px}.hero-secondary{font-size:11px}.floating-note{padding:9px}.landing-hero{width:calc(100% - 32px)}}
@media(prefers-reduced-motion:reduce){.landing-page *{scroll-behavior:auto!important;transition:none!important}}

/* Keep the existing account screens consistent with the new public page. */
#authContainer { padding:24px; background:rgba(28,41,33,.56)!important; backdrop-filter:blur(9px); transition:opacity .18s ease; }
#authContainer .auth-screen { max-height:calc(100vh - 48px); overflow-y:auto; color:#304136; border:1px solid rgba(255,255,255,.72); border-radius:18px; background:#fffdf7; box-shadow:0 28px 80px rgba(22,36,26,.24); }
#authContainer .auth-screen { background:#fffdf7!important; }
#authContainer .auth-header h1 { color:#304136; }
#authContainer .auth-header p { color:#788178; }
#authContainer .auth-field label { color:#58665b; }
#authContainer .auth-field input { color:#304136; border-color:#e2e5dc; background:#fff; }
#authContainer .auth-close-button { position:sticky; z-index:2; top:0; float:right; display:grid; width:32px; height:32px; margin:-11px -11px 0 0; padding:0; place-items:center; border:1px solid #e8e9e1; border-radius:50%; color:#667267; background:#fffefa; cursor:pointer; font-size:24px; line-height:1; }
#authContainer .auth-close-button:hover { color:#315e48; background:#f0f3e9; }
@media(max-width:760px){.landing-hero{grid-template-columns:1fr;min-height:auto;padding-top:57px;padding-bottom:62px}.hero-copy{max-width:560px}.hero-art-wrap{min-height:385px;margin-top:8px}.hero-art{width:min(100%,510px)}.art-orbit-one{width:370px;height:370px}.art-orbit-two{width:292px;height:292px}.note-chat{left:calc(50% - 245px)}.note-reels{right:calc(50% - 250px)}.hero-scroll-cue{bottom:19px}.hero-copy h1{font-size:clamp(62px,10vw,79px)}}