:root{--bg:oklch(0.991 0.006 78);--dark:oklch(0.225 0.016 52);--ink:oklch(0.25 0.013 54);--ink-soft:oklch(0.46 0.013 58);--brand:oklch(0.50 0.12 60);--brand-hover:oklch(0.43 0.11 58);--honey:oklch(0.82 0.13 82);--honey-deep:oklch(0.74 0.13 78);--line:oklch(0.89 0.009 72);--tint:oklch(0.966 0.012 78);--surface:oklch(0.979 0.008 78);--crisis-line:oklch(0.62 0.16 30);--ease:cubic-bezier(0.22, 1, 0.36, 1);--right:oklch(0.42 0.07 160);--wrong:var(--crisis-line);--serif:"Spectral",Georgia,"Times New Roman",serif;--sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-family:var(--sans);color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0;font-size:1.0625rem;line-height:1.5}button,input,select,textarea{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default}a{color:var(--blue);text-decoration:none;font-weight:700}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--brand);outline-offset:4px}h1,h2,h3,p{margin:0 0 16px}h1{font-size:1.875rem;line-height:1.2;letter-spacing:-.5px;font-weight:400}h2{font-size:1.4375rem;line-height:1.25;font-weight:400}h3{font-size:1.1875rem;font-weight:400}p{line-height:1.5}small,.muted{color:var(--muted)}small{font-size:0.75rem;line-height:1.5}.label{font-size:0.75rem;font-weight:700}.icon{display:inline-block;vertical-align:middle;flex-shrink:0}.btn{border:1.5px solid transparent;background:var(--honey);border-radius:999px;padding:13px 26px;min-height:52px;font-size:1rem;font-weight:700;display:inline-flex;justify-content:center;align-items:center;gap:9px;transition:transform .12s,background-color .2s,border-color .2s}.btn:hover:not(:disabled){background:var(--honey-deep)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{background:var(--paper);color:#b8b0a3;border-color:transparent}.btn.secondary,.btn.white{background:transparent;border-color:var(--ink);color:var(--ink)}.btn.danger{background:transparent;border-color:var(--terra);color:var(--terra)}.btn.good{background:transparent;border-color:var(--cedar);color:var(--cedar)}.btn.secondary:hover:not(:disabled),.btn.white:hover:not(:disabled),.btn.danger:hover:not(:disabled),.btn.good:hover:not(:disabled),.btn.track:hover:not(:disabled){background:var(--tint)}.feedback .btn.good,.feedback .btn.danger{background:var(--honey);border-color:transparent;color:var(--cocoa)}.feedback .btn.good:hover:not(:disabled),.feedback .btn.danger:hover:not(:disabled){background:var(--honey-deep)}.btn.block{width:100%}.link-button{background:none;border:0;color:var(--blue);font-weight:700;font-size:0.8125rem;padding:15px 6px}.icon-button{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:7px;color:#99958e}.row{display:flex;align-items:center;gap:14px}.between{justify-content:space-between}.stack{display:grid;gap:14px}.center{text-align:center}.card{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--cream);margin-bottom:18px}.card h3{margin-bottom:8px}.card p{font-size:0.875rem;color:var(--muted);margin-bottom:12px}.progress{height:3px;border-radius:999px;background:var(--line);overflow:hidden;flex:1}.progress>span{display:block;background:var(--brand);height:100%;border-radius:inherit;min-width:0;transition:width .4s}.brand{font-size:1.4375rem;letter-spacing:-.7px;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:9px}.brand-tile{width:34px;height:36px;border-radius:10px;background:var(--honey);display:inline-grid;place-items:center}.shell{max-width:1280px;margin:auto}.rail{position:fixed;bottom:0;left:0;right:0;background:var(--cream);border-top:1px solid var(--line);z-index:30;padding:9px 5px max(9px,env(safe-area-inset-bottom));display:flex;justify-content:space-around}.rail .brand{display:none}.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:0.6875rem;color:var(--muted);min-width:48px;padding:6px 2px;border:2px solid transparent;border-radius:12px;font-weight:700}.tab.active{color:var(--brand);background:var(--track-honey-soft);border-color:#f3d492}.tab .icon{width:27px;height:27px}.main{padding:0 18px 125px;max-width:650px;margin:auto}.main>h1{margin-top:28px}.right-column{display:none}.stats{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--cream);height:66px;border-bottom:1px solid var(--line);z-index:20;margin:0 -18px;padding:0 20px}.stat{background:none;border:0;display:flex;align-items:center;gap:6px;font-weight:700;font-size:1rem;padding:8px 0;color:var(--muted)}.stat.fire.on{color:#F28C28}.stat.gems{color:var(--blue)}.stat.hearts{color:#e76067}.stat.flag{color:var(--section)}.unit-head{position:sticky;top:66px;z-index:15;margin:15px 0 12px;border-radius:15px;background:var(--section);color:white;padding:19px 16px;display:flex;align-items:center;gap:12px;border:1px solid var(--line)}.unit-head.honey{color:#5e360a}.unit-head h2{font-size:1.25rem;margin:5px 0 0}.unit-head .label{opacity:.85;font-size:0.6875rem}.guide-btn{background:transparent;border:1px solid currentColor;border-radius:999px;padding:9px;color:inherit;flex-shrink:0}.path-intro{display:flex;justify-content:center;gap:8px;align-items:center;color:var(--muted);font-size:0.75rem;font-weight:500;padding:10px}.path{position:relative}.node{position:relative;display:grid;place-items:center;padding:0;border:0;background:none;color:inherit}.node:active{transform:translateY(1px)}.speech:after{content:'';position:absolute;width:12px;height:12px;transform:rotate(45deg);background:inherit;border-right:1px solid var(--line);border-bottom:1px solid var(--line);bottom:-8px;left:calc(50% - 7px)}.path-footer{font-size:0.75rem;color:var(--muted);text-align:center;line-height:1.6;padding:55px 24px 10px}.next-section{margin-top:30px;background:var(--tint);border-color:var(--line);color:var(--muted)}.quest{padding:14px 0;border-bottom:1px solid var(--line)}.quest:last-child{border-bottom:0}.quest .row{margin-bottom:11px}.quest p{font-size:0.875rem;font-weight:500;margin:0;color:var(--ink)}.quest small{display:block;margin-top:6px}.quest-icon{color:var(--honey)}.practice-card{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;width:100%;color:inherit;background:var(--cream);cursor:pointer}.practice-card.feature{background:var(--tint);border-color:var(--honey-deep)}.practice-card h2{margin:0 0 7px}.practice-card p{margin:0}.concept-row{padding:17px 0;border-bottom:1px solid var(--line);display:grid;gap:9px}.concept-row .progress>span{background:var(--cedar)}.league-hero{text-align:center;padding:28px 0 14px}.league-badge{color:#b67b49;margin-bottom:17px}.league-strip{display:flex;gap:12px;justify-content:center;color:#d7d3cd;margin-bottom:20px}.rank-row{display:flex;align-items:center;gap:15px;padding:14px 12px;border-radius:13px;margin:3px 0}.rank-row.self{background:var(--tint);border:1px solid var(--honey-deep)}.rank{width:24px;text-align:center;font-weight:700;color:var(--muted)}.avatar{width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:#ddeacf;color:#43644b;font-size:1.25rem;font-weight:700;flex-shrink:0}.avatar.a1{background:#efd8cb;color:#975c43}.avatar.a2{background:#d9e6f8;color:#4b649b}.avatar.a3{background:#eddbf3;color:#8d5e9e}.avatar.a4{background:#f8e4b5;color:#946b1e}.avatar.a5{background:#d5eeed;color:#467b80}.rank-name{flex:1;font-weight:500}
.rank-tag{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:9px;background:var(--tint);color:var(--muted);font-size:0.625rem;font-weight:700;vertical-align:middle}.rank-xp{white-space:nowrap;color:var(--muted);font-size:0.875rem}.zone{color:var(--green);text-align:center;padding:16px 0;border-top:1px dashed #b9d7b7;border-bottom:1px dashed #b9d7b7;font-size:0.6875rem;font-weight:700;margin:10px 0}.zone.down{color:var(--red);border-color:#eebdb9}.shop-row{display:flex;gap:17px;padding:22px 0;border-bottom:1px solid var(--line)}.shop-row>.icon{margin-top:7px;color:#55afbf}.shop-row .shop-copy{flex:1}.shop-copy h3{margin-bottom:6px}.shop-copy p{font-size:0.875rem;color:var(--muted)}.shop-copy .btn{min-height:43px;padding:9px 15px;color:var(--blue)}.promo{background:var(--tint);color:var(--ink);border:1px solid var(--line);overflow:hidden}.promo p{color:var(--ink-soft)}.promo .label{color:var(--brand)}.profile-hero{padding:25px 0}.profile-avatar{width:100px;height:100px;border-radius:28px;background:var(--tint);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:18px}.profile-hero h1{margin:0 0 5px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}.stat-tile{border:1px solid var(--line);border-radius:14px;padding:16px 12px;display:flex;align-items:center;gap:10px}.stat-tile strong{display:block;font-size:1.125rem}.stat-tile small{display:block;font-size:0.6875rem;margin-top:3px}.achievements{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 26px}.badge{border:1px solid var(--line);border-radius:16px;display:grid;justify-items:center;gap:7px;padding:15px 4px;text-align:center}.badge .icon{color:#cbb9d6}.badge.earned .icon{color:var(--honey)}.badge strong{font-size:0.6875rem}.badge small{font-size:0.625rem}.settings label{display:grid;gap:7px;font-weight:500;margin-bottom:20px}input,select,textarea{width:100%;padding:15px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:var(--bg);min-height:52px}input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--brand)}input[type=checkbox]{width:23px;height:23px;min-height:0;accent-color:var(--brand)}.settings label.row,.adult-check{display:flex;align-items:center;gap:12px}.email-kinds{margin:-8px 0 20px;padding-left:15px;border-left:1px solid var(--line)}.email-kinds label.row{margin-bottom:7px}.email-kinds .small-note{margin:0 0 15px}.privacy{font-size:0.8125rem;color:var(--muted);line-height:1.6;padding-top:35px}.splash{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px 24px 30px;text-align:center;gap:18px}.splash .brand{position:absolute;top:28px}.splash-art{margin-top:65px}.splash h1{max-width:470px;font-size:2rem}.splash p{color:var(--muted);max-width:350px;font-size:1.0625rem}.splash-actions{display:grid;gap:14px;width:100%;max-width:365px}.splash small{margin-top:16px}.onboard,.session-page{min-height:100svh;padding:22px 20px 120px;max-width:760px;margin:auto}.session-top{display:flex;gap:13px;align-items:center;margin-bottom:27px}.session-top .hearts{font-weight:700;color:#e76067;display:flex;gap:5px;align-items:center}.onboard .conversation{margin:0 auto 24px;max-width:600px}.conversation{display:flex;align-items:center;gap:12px;margin:22px 0}.speech{position:relative;border:1px solid var(--line);border-radius:16px;padding:17px 18px;line-height:1.5;font-size:1.0625rem;font-weight:400;flex:1}.speech:after{left:-8px;bottom:calc(50% - 7px);transform:rotate(135deg)}.choices{display:grid;gap:12px}.choice{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--cream);padding:15px;text-align:left;display:flex;align-items:center;gap:12px;font-weight:500;min-height:63px;line-height:1.4}.choice.selected{background:var(--tint);border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);color:var(--ink)}.choice .number{border:1px solid currentColor;border-radius:7px;width:25px;height:26px;display:grid;place-items:center;font-size:0.75rem;opacity:.55;flex-shrink:0}.choice strong{flex:1}.choice small{font-size:0.75rem;white-space:nowrap}.pinned{position:fixed;bottom:0;left:0;right:0;padding:18px 20px max(21px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--cream);z-index:35}.pinned-inner{max-width:640px;margin:auto}.pinned .btn{width:100%}.session-page{max-width:850px;padding-top:22px}.exercise-content{max-width:620px;margin:auto}.scenario{border:1px solid var(--line);background:var(--tint);border-radius:18px;padding:23px;font-size:1.125rem;line-height:1.6;margin:15px 0 24px}.scenario .label{color:var(--brand);margin-bottom:10px}.exercise-content .choices{margin-bottom:20px}.word-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:26px 0}.tile{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-weight:500;font-size:0.9375rem}.tile.used{color:transparent;background:var(--paper);border-color:var(--paper)}.answer-line{min-height:110px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;margin-top:28px}.match-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:12px;margin:24px 0}.match-col{display:grid;gap:12px}.match-card{min-height:104px;border:1px solid var(--line);border-radius:13px;background:var(--cream);padding:12px 9px;font-size:0.8125rem;line-height:1.4;font-weight:500}.match-card.selected{border-color:var(--brand);background:var(--tint)}.match-card.matched{background:var(--tint);color:#bfbbb3;border-color:var(--line)}.combo{font-size:0.75rem;text-align:center;color:#c17b13;font-weight:700;margin:-12px 0 15px;min-height:16px}.feedback{background:#dff0d8;border-color:#c0dfb6;color:#2c8035;animation:slide-up .2s ease-out}.feedback.wrong{background:#ffe2e0;border-color:#f0bab6;color:#ba3839}.feedback-inner{max-width:700px;margin:auto;display:flex;align-items:center;gap:17px}.feedback-copy{flex:1}.feedback h2{font-size:1.4375rem;margin-bottom:5px}.feedback p{font-size:0.875rem;margin:0;max-height:110px;overflow:auto;white-space:pre-line}.feedback .btn{margin-top:17px}.celebration{min-height:100svh;max-width:680px;margin:auto;padding:45px 22px 130px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.celebration h1{color:#ca922e;margin-top:18px}.celebration .stats-grid{width:100%;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.result-stat{border:1px solid var(--honey);border-radius:15px;overflow:hidden;animation:slide-up .5s both}.result-stat strong{display:block;padding:18px 3px;font-size:1.375rem}.week{display:flex;justify-content:center;gap:14px;margin:28px 0;isolation:isolate}.week-day{display:grid;gap:10px;font-size:0.75rem;color:var(--ink-soft);justify-items:center}.paywall{min-height:100svh;background:var(--bg);padding:20px 20px 40px}.paywall-inner{max-width:580px;margin:auto;border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:22px 20px 24px}.paywall h1{font-size:1.9375rem}.paywall .pip{display:block;margin:auto}.plus-title{font-size:0.75rem;font-weight:700;color:var(--brand);margin-bottom:15px}.features{width:100%;border-collapse:collapse;margin:24px 0}.features th{font-size:0.75rem;text-align:center;color:var(--brand)}.features th:first-child{width:66%;text-align:left}.features td{padding:10px 4px;border-bottom:1px solid var(--line);font-size:0.8125rem;line-height:1.4}.features td:not(:first-child){text-align:center;font-size:1.25rem;font-weight:700;color:var(--cedar)}.price-box{border:1px solid var(--line);border-radius:16px;background:var(--bg);padding:15px;text-align:center;margin:20px 0}.price-box strong{font-size:1.6875rem}.price-box p{margin:5px 0 0;font-size:0.8125rem}.paywall .link-button{width:100%;color:var(--brand)}.sheet-backdrop{position:fixed;inset:0;background:#221a1566;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding-top:25px}.sheet{background:var(--bg);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;padding:23px;max-height:92svh;overflow:auto;width:100%;max-width:600px;animation:slide-up .2s}.sheet .handle{height:4px;width:42px;border-radius:10px;background:var(--line);margin:-9px auto 19px}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.sheet-head h2{margin:0}.sheet .row>.btn{flex:1;padding:12px 8px}.sheet .btn{margin-top:8px}.sheet .pip{display:block;margin:auto}.guidebook{padding-bottom:20px}.guidebook p{font-size:0.9375rem}.guidebook h3{margin-top:26px}.guidebook .source{font-size:0.75rem;border-bottom:1px solid var(--line);padding:10px 0;overflow-wrap:anywhere}.guidebook .source span{color:#908879;display:block;margin-top:5px}.guide-note{padding:14px;border-radius:12px;background:var(--tint);border:1px solid var(--line);font-size:0.8125rem;margin:20px 0}.result-page{padding-top:26px}.result-page .result-body{font-size:0.9375rem;line-height:1.65}.result-page h1{font-size:1.6875rem}.result-page .dimension{margin:20px 0}.result-page .dimension strong{font-size:0.875rem}.result-page .dimension .progress{margin:8px 0}.result-page .dimension p{font-size:0.8125rem;color:var(--muted)}#poc{position:fixed;bottom:calc(66px + max(9px,env(safe-area-inset-bottom)));right:8px;z-index:45;border:1px solid var(--line);border-radius:999px;padding:5px 9px;background:var(--tint);color:var(--brand);font-size:0.5625rem;font-weight:700}body.fullscreen #poc{bottom:105px;right:8px}body.in-session #poc{display:none}#toast{position:fixed;top:15px;left:50%;transform:translateX(-50%);z-index:100;max-width:calc(100% - 30px);padding:14px 20px;background:var(--dark);color:#fff;border-radius:12px;display:none;font-size:0.875rem;line-height:1.4}#toast.show{display:block}#toast .toast-action{display:inline-block;vertical-align:middle;margin:10px 0 0 10px;padding:8px 13px;min-height:40px;border:1px solid #ffffff55;border-radius:999px;background:transparent;color:var(--honey);font-size:0.75rem;font-weight:700;white-space:nowrap}#toast .toast-action:active{background:#ffffff1a}.empty{padding:30px 8px;text-align:center}.empty h3{margin-top:14px}.empty p{font-size:0.875rem;color:var(--muted)}.profile-form{max-width:450px;width:100%;display:grid;gap:15px;margin:22px auto}.profile-form .adult-check{text-align:left;font-size:0.875rem;line-height:1.5}
/* PSY-1939 the sign-in code field under the link card */
.code-form{max-width:450px;width:100%;margin:18px auto 0;display:grid;gap:10px;text-align:left}
.code-row{display:flex;gap:10px;align-items:stretch}
.code-row input{flex:1;min-width:0;text-align:center;font-size:1.5rem;letter-spacing:6px;font-variant-numeric:tabular-nums;font-weight:700}
.code-row input::placeholder{letter-spacing:0;font-weight:400;font-size:1rem;color:var(--muted)}
.code-row .btn{flex:0 0 auto}
.code-form .key-hints{justify-content:center;margin:0}
.code-form .small-note{margin:0;text-align:center}
/* PSY-1944 the Help card on Settings and the Help sheet: six short sections, each with one link
   to the screen it describes, and the Report a problem box under them */
.help-card .row.between{align-items:flex-start;gap:12px}.help-card .key-hints{justify-content:center;margin:10px 0 0}
.help-section{padding:14px 0;border-bottom:1px solid var(--line)}.help-section h3{margin:0 0 6px;display:flex;align-items:center;gap:8px}.help-icon{display:inline-flex;width:32px;height:32px;border-radius:50%;background:var(--track-honey-soft);color:var(--brown);align-items:center;justify-content:center;flex:0 0 auto}.help-section p{margin:0 0 8px;font-size:0.9375rem;line-height:1.45}
.help-section .help-link{color:var(--brown);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;font:inherit;font-size:0.9375rem;font-weight:700;cursor:pointer;justify-self:start}
/* PSY-2157 the help pill on every screen: fixed above the bottom chrome (the tab bar by the constant
   below, a pinned footer by the height app.js measures into --help-bottom), under every sheet and
   the toast, outside the arrow ring. The prototype pill moves to the left so the two never meet. */
#app{--help-bottom:calc(14px + env(safe-area-inset-bottom))}
.help-entry{position:fixed;right:10px;bottom:var(--help-bottom);z-index:34;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 9px;border-radius:999px;border:1px solid var(--line);background:var(--cream);color:var(--ink);font-weight:700;font-size:0.6875rem;cursor:pointer}
.help-entry .icon{color:var(--brown)}.help-entry:hover{background:var(--track-honey-soft)}.help-entry:focus-visible{outline:3px solid var(--honey);outline-offset:2px}
@media(max-width:1023px){body:not(.fullscreen) #app{--help-bottom:calc(76px + max(9px,env(safe-area-inset-bottom)))}}
#poc,body.fullscreen #poc{left:8px;right:auto}
.help-section a[href^="tel:"]{color:inherit;font-weight:700}
.open-private{margin-top:6px}.skip-open{margin-top:4px;padding-left:0}
.report-form{display:grid;gap:10px;padding-top:16px}.report-form h3{margin:0}.report-form .small-note{margin:0}
.report-note{width:100%;min-height:84px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;font:inherit;font-size:1rem;line-height:1.4;color:var(--ink);background:var(--cream);resize:vertical}
.report-note:focus{outline:none;border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.report-row{align-items:center;gap:10px}.report-keys{justify-content:flex-start;margin:0}.report-sent{color:var(--green);font-weight:700}
/* PSY-2368 the question report: a quiet link under the Why on the checked sheet, and the four reasons as a stack of pills in the sheet it opens */
.report-item-row{width:100%;margin:6px 0 0;padding-left:57px}@media(min-width:700px){.report-item-row{padding-left:65px}}.feedback .report-item-link{color:inherit;opacity:.78;padding:4px 0;font-size:0.8125rem;justify-self:start}.feedback .report-item-link:focus-visible{opacity:1}.item-reasons{display:grid;gap:8px;margin:14px 0 10px}.item-reasons .btn{margin-top:0}
.code-peek{letter-spacing:3px;font-variant-numeric:tabular-nums}
.link-btn{background:none;border:0;padding:4px;color:var(--muted);font:inherit;font-size:0.8125rem;text-decoration:underline;cursor:pointer;justify-self:center}
.link-btn:hover,.link-btn:focus-visible{color:var(--ink)}
/* PSY-2276 Send it again, while its request is in flight: still readable, plainly not pressable */
.resend-btn[disabled]{text-decoration:none;opacity:.6;cursor:default}
/* PSY-2277 Did you mean: one flat note under the email field it is about, hidden while it holds
   nothing to ask, the corrected address in the ink and its two answers on one row */
.email-ask:empty{display:none}
.email-ask{display:grid;gap:10px;margin:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--tint);font-size:0.875rem;line-height:1.5;text-align:left}
.email-ask strong{overflow-wrap:anywhere}
.email-ask-row{flex-wrap:wrap;gap:10px}
/* PSY-2388 a refused field: the sentence under the box it is about, terracotta like a wrong answer,
   hidden while it holds nothing to say; the box itself takes the same line while it is marked */
.field-error:empty{display:none}
.field-error{margin:0;font-size:0.875rem;line-height:1.5;color:var(--terra);text-align:left}
input[aria-invalid="true"]{border-color:var(--terra)}
.email-ask .btn{min-height:44px;padding:10px 18px;font-size:0.9375rem}
.email-ask .link-btn{justify-self:start}
.email-ask-keys{margin:0;justify-content:flex-start}
.profile-create{padding-top:25px}.profile-create .privacy{margin-top:38vh}.toggle-line{display:flex;justify-content:space-between;align-items:center;margin:17px 0}.reading{line-height:1.65}.small-note{font-size:0.75rem;color:var(--muted);line-height:1.5}.sheet .no-trial{margin:14px 0 4px;padding:12px 14px;border-radius:12px;background:var(--tint);color:var(--ink);font-size:0.875rem;line-height:1.5}.section-menu{display:grid;gap:12px}.section-menu button{width:100%;text-align:left}.legendary-link{display:block;text-align:center;margin:8px auto 20px;color:var(--brand)}.storage-warning{display:flex;align-items:center;gap:8px;margin:8px 0 10px;padding:8px 12px;border-radius:12px;background:var(--tint);font-size:0.8125rem;font-weight:500;line-height:1.35;color:var(--ink)}.storage-warning .icon{width:16px;height:16px;flex:none;color:var(--brown)}.no-wrap{white-space:nowrap}
@media(min-width:700px){.onboard{padding-top:40px}.onboard .choices{max-width:530px;margin:auto}.pinned{padding:22px}.pinned-inner{display:flex;justify-content:flex-end}.pinned .btn{max-width:320px}.feedback .pinned-inner{display:block}.feedback .btn{display:flex;margin-left:auto}.session-page{padding-top:32px}.session-top{margin-bottom:45px}.exercise-content .choices{grid-template-columns:1fr 1fr}.exercise-content .choice{min-height:86px}.match-card{min-height:108px}.celebration{padding-top:50px}.sheet-backdrop{align-items:center;padding:30px}.sheet{max-height:85svh}.splash h1{font-size:2.4375rem}}
@media(min-width:1024px){.shell{display:grid;grid-template-columns:220px minmax(390px,610px) 320px;gap:28px;padding:0 28px 0 0}.rail{position:fixed;top:0;bottom:0;right:auto;width:220px;border-top:0;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:33px 15px}.rail .brand{display:flex;font-size:1.1875rem;margin:0 0 27px}.rail .brand-tile{width:28px;height:30px;font-size:1.25rem}.main{grid-column:2;width:100%;padding:0 0 70px;min-width:0}.stats{margin:0;padding:0 12px}.right-column{display:block;grid-column:3;padding-top:30px;position:sticky;top:0;align-self:start;max-height:100svh;overflow:auto;scrollbar-width:none}.right-column .card{padding:20px}.right-column .card h3{font-size:1.1875rem}.unit-head{margin-top:24px}#poc{bottom:20px}.main>h1{margin-top:30px}.stats-grid{gap:13px}.splash{flex-direction:row;gap:65px}.splash .brand{top:40px;left:55px}.splash-art{margin-top:0}.splash-copy{max-width:390px}.splash h1{font-size:2.1875rem}.splash-actions{max-width:none}.splash p{margin:0 auto 26px}.splash small{display:block}.right-column .quest p{font-size:0.75rem}.right-column .quest .icon{width:25px;height:25px}}
/* PSY-2762 the rail at 1280 and up sits where the centred shell starts, and 50% here is half the layout viewport: with a classic 15px scrollbar that is 632.5px, so the rail began 7.5px off the left edge (the wide-layout smoke scenario's one finding, read in a Chromium that draws the scrollbar, 5 November 2026). Never left of the edge. */
@media(min-width:1280px){.rail{left:max(0px,calc(50% - 640px))}.shell{grid-template-columns:230px minmax(430px,610px) 320px;gap:34px}.rail{width:230px}.unit-head{padding:21px}.main{padding-left:10px;padding-right:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@keyframes slide-up{from{transform:translateY(22px);opacity:0}to{transform:translateY(0);opacity:1}}

.streak-number{display:inline-block}.streak-number.counted{animation:count-up .4s ease-out}@keyframes count-up{from{transform:translateY(12px) scale(.8);opacity:.3}to{transform:translateY(0) scale(1);opacity:1}}

/* v2.1: tracks as courses, Duolingo path details */
.track-tile{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none}
.track-tile.small{width:34px;height:34px;border-radius:10px}
.stat.flag{padding:0}
.track-menu .choice{align-items:center}
.track-menu .choice.current{border-color:var(--brand);background:var(--tint)}
.track-menu .choice strong small{display:block;font-weight:500;color:var(--muted);font-size:0.75rem;margin-top:3px}
.unit-divider{display:flex;align-items:center;gap:12px;margin:30px 0 4px;color:var(--muted);font-weight:700;font-size:0.75rem}
.unit-divider::before,.unit-divider::after{content:'';flex:1;height:2px;background:var(--line)}
.jump-pill{border:1px solid var(--line);border-radius:999px;background:var(--cream);color:var(--brand);font-weight:700;font-size:0.6875rem;padding:7px 11px}

/* ===== v2.2 identity: Psychology.com Learn. Warm, editorial, unmistakably ours. ===== */
/* PSY-2220 Learn speaks the site's palette. The names below are the ones this stylesheet grew up with; each is an alias of a site token (line 1), so a colour changes in one place. --wrong is the site's crisis line (L 0.62): right for borders, dots and icons, too light for text or for white on it, so the text and fill roles (--terra, --red) deepen it with relative colour syntax instead of inventing a second red. --slate is the gem colour and comes from the slate plate. */
:root{--cocoa:var(--dark);--cream:var(--bg);--paper:var(--tint);--brown:var(--brand);--muted:var(--ink-soft);--cedar:var(--right);--green:var(--right);--terra:oklch(from var(--wrong) 0.48 c h);--red:var(--terra);--blue:var(--brand);--slate:var(--track-slate-dark);--section:var(--honey);--shadow:var(--honey-deep)}
h1,h2,h3,.splash h1,.celebration h1,.profile-hero h1,.paywall h1,.sheet-head h2,.unit-head h2,.speech{font-family:var(--serif);letter-spacing:-0.02em;line-height:1.15;text-wrap:balance}
h1,h2{font-weight:300}h3,.speech{font-weight:400}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.1875rem}.splash h1{font-size:2.375rem}
.label{font-weight:700;font-size:0.75rem}
.btn{border:1.5px solid transparent;border-radius:999px;background:var(--honey);color:var(--cocoa);box-shadow:none;text-transform:none;font-weight:700;font-size:1rem;padding:13px 26px}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{background:var(--paper);color:#b8b0a3;border-color:transparent}
.btn.secondary{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.white{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.small{padding:10px 18px;min-height:40px;font-size:0.875rem}
.link-button{color:var(--brown);text-transform:none;font-size:0.875rem;font-weight:700}
.card{border:1px solid var(--line);border-radius:16px;background:var(--cream)}
.choice,.tile,.match-card{border:1px solid var(--line);border-radius:14px;background:var(--cream);font-weight:500}
.choice.selected,.tile.selected,.match-card.selected{background:var(--tint);border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);color:var(--ink)}
.match-card.matched{background:var(--paper);color:#b8b0a3;border-color:var(--line);box-shadow:none}
.choice .number{border-radius:999px;border-color:var(--line);opacity:1;color:var(--muted);background:var(--paper)}
.speech{border:1px solid var(--line);border-radius:18px 18px 18px 6px;background:var(--paper);font-weight:400;font-size:1.125rem}
.progress{background:var(--line);height:3px}.progress>span{background:var(--brand)}
.feedback{background:var(--track-cedar-soft);border-color:#cfe0d5;color:var(--cedar)}
.feedback.wrong{background:var(--track-ember-soft);border-color:#f0cfc6;color:var(--terra)}
/* PSY-1813 the questionnaire sheet: plum, neither cedar (right) nor terracotta (wrong) */
.feedback.survey{background:var(--track-plum-soft);border-color:#dccbe0;color:var(--track-plum-dark)}
.combo{color:var(--brown)}
.stats{border-bottom:1px solid var(--line)}.stat{font-weight:700;color:var(--muted)}.stat.fire.on{color:#D9762B}.stat.gems{color:var(--slate)}.stat.hearts,.session-top .hearts{color:var(--terra)}.stat.energy,.session-top .energy{color:var(--brown)}
.rail{border-top:1px solid var(--line)}
.unit-head{border:1px solid var(--line);border-radius:20px;padding:20px 18px;overflow:hidden;color:#fff}
.unit-head.honey{color:var(--ink)}
.unit-head>*{position:relative;z-index:1}
.unit-head-link{text-decoration:none}
.guide-btn{border:1px solid var(--shadow,var(--line));border-radius:999px;background:color-mix(in srgb,var(--cream) 60%,transparent)}
.unit-head.honey .guide-btn{border-color:var(--shadow,var(--line));background:color-mix(in srgb,var(--cream) 60%,transparent)}
.unit-divider{color:var(--muted)}
.jump-pill{border-radius:999px;color:var(--brown);border:1px solid var(--line)}
.paywall{color:var(--ink)}.paywall h1{color:var(--ink)}.paywall .link-button{color:var(--brown)}.plus-title{color:var(--brown)}
.features th{color:var(--brown)}.price-box{border-color:var(--honey-deep);background:var(--bg)}
.result-stat{border-color:var(--line)}.celebration h1{color:var(--ink)}
.sheet{border-radius:20px 20px 0 0}@media(min-width:700px){.sheet{border-radius:20px;border-bottom:1px solid var(--line)}}
.review-card{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:var(--track-honey-soft);border-color:#f1d79a;margin-top:14px}.review-card strong{display:block}.review-card small{display:block;color:var(--muted)}.review-icon{color:var(--brown);flex:none}
.image-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}.image-choice{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--cream);padding:0;aspect-ratio:4/3}.image-choice img{width:100%;height:100%;object-fit:cover;display:block}.image-choice .number{position:absolute;left:10px;bottom:10px;background:var(--cream);border-radius:999px;width:26px;height:26px;display:grid;place-items:center;font-size:0.75rem;font-weight:700;color:var(--muted)}.image-choice.selected{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.listen-box,.speak-box{display:flex;gap:16px;align-items:center;border:1px solid var(--line);border-radius:20px;padding:18px;background:var(--paper);margin-bottom:20px;text-align:left}.listen-box small,.speak-box small{display:block;margin-top:4px;color:var(--muted)}.speak-box .exercise-prompt{margin:6px 0 0;font-style:italic}
.play-btn,.mic-btn{width:78px;height:78px;border-radius:999px;border:0;background:var(--honey);color:var(--cocoa);display:grid;place-items:center;flex:none}.mic-btn.live{background:var(--terra);color:var(--bg);box-shadow:0 0 0 8px #b5462f33}.mic-btn:disabled,.play-btn:disabled{background:var(--paper);color:#b8b0a3;box-shadow:none}
.course-grid{display:grid;gap:16px;margin-top:18px}.course-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--cream)}.course-card img,.course-art-tile{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.course-art-tile{display:grid;place-items:center;color:#fff}.course-body{padding:16px 18px 18px}.course-body h3{margin:6px 0 10px}.course-card.reviewed{border-color:var(--honey)}
/* PSY-1790 the guidebook hero: the course art over a drawn tile in the track colour, so a
   course whose file has not arrived yet still opens with a picture of something. */
.guide-hero{position:relative;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;margin:0 0 14px;display:grid;place-items:center;background:var(--honey);border:1px solid var(--honey-deep)}
.guide-hero .guide-tile{color:var(--cocoa);opacity:.9;line-height:0}
.guide-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.track-tile{border:1px solid rgba(0,0,0,.12);border-radius:14px}.track-tile.small{border-radius:10px}
.brand-tile{border-radius:10px}
@media(min-width:700px){.course-grid{grid-template-columns:1fr 1fr}}
.features td{color:var(--cedar)}.features td:not(:first-child){color:var(--cedar)}.features th:first-child{color:var(--brown)}

/* keyboard layer */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--honey);outline-offset:3px}
.key{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--line);border-radius:6px;background:var(--cream);font:700 0.6875rem/1 var(--sans);color:var(--muted);flex:none;text-transform:none}
.key.inv{border-color:#0002;background:#00000012;color:inherit;margin-left:10px;height:20px;min-width:20px;font-size:0.625rem}
.feedback .key.inv{border-color:#ffffff55;background:#00000026}
.tile .key{margin-right:8px;vertical-align:middle}
.match-card{position:relative}.match-card .key{position:absolute;top:7px;left:7px}
.choice .number{font-family:var(--sans);border-radius:6px}
.key-hints{display:none;gap:16px;flex-wrap:wrap;justify-content:center;font-size:0.75rem;color:var(--muted);margin:0 0 12px}
.key-hints span{display:inline-flex;align-items:center;gap:6px}
.path-keys{margin:12px 0 2px}
.kb-only{display:none}
.kb .kb-only{display:inline-grid}.kb .key-hints{display:flex}
@media(min-width:700px){.kb-only{display:inline-grid}.key-hints{display:flex}}
.key-table{display:grid;gap:10px;margin-top:8px}.key-row{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;font-size:0.875rem;padding:8px 0;border-bottom:1px solid var(--line)}.key-row em{font-style:normal;color:var(--muted);margin:0 2px}.key-row>span:first-child{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pinned-inner{flex-wrap:wrap}.key-hints{width:100%}
@media(min-width:700px){.pinned .key-hints{justify-content:flex-end}.feedback .key-hints{justify-content:flex-start;margin:6px 0 10px}}
/* room for the pinned footer plus key hints: nothing scrollable may hide under it */
.session-page,.onboard{padding-bottom:190px}
.kb .session-page,.kb .onboard{padding-bottom:240px}
@media(min-width:700px){.session-page,.onboard,.kb .session-page,.kb .onboard{padding-bottom:170px}}

/* sync indicator */
.sync-badge{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:0.75rem;font-weight:500;color:var(--cedar)}
.sync-badge.offline{color:var(--muted)}
.sync-badge .icon{width:14px;height:14px}
/* PSY-1940 the read-only pause under the stats bar */
.sync-paused{display:flex;align-items:center;gap:8px;margin:8px 0 10px;padding:8px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:0.8125rem;font-weight:500;line-height:1.35;color:var(--muted)}
.sync-paused .icon{width:16px;height:16px;flex:none;color:var(--brown)}
/* PSY-2159 the other true states share the line; the expired one wraps for its Sign in */
.sync-paused.sync-lost{flex-wrap:wrap}
.sync-signin{margin-left:auto;padding:6px 14px;border-radius:999px;border:1.5px solid var(--brown);background:var(--paper);color:var(--brown);font:inherit;font-size:0.8125rem;font-weight:500;cursor:pointer}
.sync-signin:hover{background:var(--line)}

/* legal pages: privacy.html, terms.html */
.legal-links{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 0}
.legal-links a{font-size:0.75rem;color:var(--muted);font-weight:700;text-decoration:underline}
.legal-page{max-width:640px;margin:0 auto;padding:40px 22px 90px}
.legal-page .brand{margin-bottom:30px}
.legal-page h1{margin-bottom:6px}
.legal-page .updated{color:var(--muted);margin-bottom:26px}
.legal-page h2{margin-top:32px}
.legal-page ul{margin:0 0 16px;padding-left:22px}
.legal-page li{margin-bottom:8px;line-height:1.6}
.legal-footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
/* PSY-2156 the essential or optional storage table in privacy.html: one row per key the browser can hold */
.storage-table{width:100%;border-collapse:collapse;font-size:0.875rem;line-height:1.5;margin:14px 0 20px}.storage-table th,.storage-table td{text-align:left;vertical-align:top;padding:8px 8px 8px 0;border-bottom:1px solid var(--line)}.storage-table th{font-size:0.75rem;color:var(--muted)}.storage-table code{font-size:0.8125rem;overflow-wrap:anywhere}.storage-table th:nth-child(2),.storage-table td:nth-child(2){min-width:170px}@media(max-width:560px){.storage-table thead{display:none}.storage-table tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}.storage-table td{display:block;border:0;padding:2px 0}.storage-table td:before{content:attr(data-label) ": ";color:var(--muted)}}
/* PSY-2145 the public withdrawal form (withdraw.html): the form in the settings skin, the status line in the feedback colors. */
.withdraw-page #withdraw-form{margin:18px 0 8px}
.withdraw-page #withdraw-form label{margin-bottom:14px}
.withdraw-status{min-height:24px;font-weight:700;line-height:1.5}
.withdraw-status.right{color:var(--cedar)}
.withdraw-status.wrong{color:var(--terra)}

/* PSY-1747 Choose where to start: the full-screen chooser after onboarding and the
   #courses view from then on. One card per unit, grouped by track. */
.chooser-page{min-height:100svh;padding:22px 20px 60px;max-width:900px;margin:auto}
.chooser-page>.brand{margin-bottom:26px}
.chooser h1{margin:18px 0 8px}
.chooser>.muted{max-width:560px}
.chooser-keys{justify-content:flex-start;margin:14px 0 4px}
.chooser-track{margin-top:30px}
.chooser-track-head{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.chooser-track-copy h2{margin:0;font-size:1.3125rem}
.chooser-track-copy small{color:var(--muted)}
.chooser-track .chip{margin-left:auto;flex:none;background:var(--honey);color:var(--cocoa);border-radius:999px;padding:5px 12px;font-size:0.6875rem;font-weight:700}
.chooser-track.recommended .chooser-track-head{border-bottom-color:var(--honey)}
.course-card-wrap{display:flex;flex-direction:column;gap:6px}
.course-card-wrap .card-guide{align-self:flex-start;padding:2px 4px;font-size:0.75rem}
button.course-card{display:block;width:100%;padding:0;text-align:left;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--cream);color:inherit;text-transform:none;font-weight:inherit}
button.course-card .course-art{display:block}
button.course-card .course-body{display:block}
button.course-card strong{display:block;font-family:var(--serif);font-weight:700;letter-spacing:-.2px;font-size:1.1875rem;margin:6px 0 10px}
button.course-card .course-detail,button.course-card .course-mark{display:block;color:var(--muted);margin-top:6px}
button.course-card .course-mark{color:var(--brown);font-weight:500}
button.course-card.questionnaire{border-color:#cdb2d6}
button.course-card:hover{border-color:var(--honey)}
.chooser-later{margin:30px 0 0}
@media(min-width:700px){.chooser-page{padding:30px 34px 70px}}

/* PSY-1711: the reminder time onboarding asks for once "Remind me to learn" is picked. */
.reminder-pick{display:grid;gap:9px;margin-top:20px;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:left}
.reminder-pick input{max-width:190px}
.ready-copy{display:grid;gap:12px;margin-top:18px;font-size:1.0625rem;line-height:1.45}.ready-copy p{margin:0}

.settings .card label.row{display:flex;margin-bottom:8px}
/* PSY-2624 Start a track over: the track list in the Settings sheet, one row a track with its progress and an outlined Reset */
.track-reset-list{margin:6px 0 14px}.track-reset-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.track-reset-row:last-child{border-bottom:0}.track-reset-copy{display:grid;gap:3px;min-width:0}.track-reset-copy small{color:var(--muted)}.track-reset-row.empty .track-reset-copy{color:var(--muted)}.track-reset-row .btn{min-height:42px;padding:8px 18px;flex-shrink:0}
/* PSY-1899 the usual finishing hour, offered under the reminder input: a clock, one line and
   the two answers, in a paper frame. */
/* PSY-2653 mail to the account's address has stopped: one line under Email, the reminder switch and on the profile */
.mail-stopped{display:flex;gap:8px;align-items:flex-start;margin:6px 0 12px;padding:8px 12px;border-radius:12px;background:var(--tint);color:var(--ink);font-size:0.8125rem;line-height:1.4}.mail-stopped .icon{width:14px;height:14px;flex:none;margin-top:2px;color:var(--wrong)}.profile-hero+.mail-stopped{margin-top:12px}
.usual-time{display:flex;gap:12px;align-items:flex-start;margin:-6px 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.usual-icon{color:var(--brown);flex:0 0 auto;margin-top:2px}
.usual-body{flex:1 1 auto}
.usual-body p{margin:0 0 8px}
.usual-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* PSY-1775 visual foundation: track themes, the illustrated path, chooser cards. Four
   accent pairs, one per track. Engine.sections carries the same hex values for the few
   inline styles; the classes below are what the banner, nodes, stats chip and chooser
   frame read. --ink is the text colour that sits on the accent, --soft the pale tint for
   ring tracks and chips, --tint the accent at partial opacity for the banner gradient. */
/* PSY-2220 the six tracks are plates: a pale tint of one hue each (L 0.93), a deep tone of the same hue for text and edges (AA on the plate and on the page), the site ink on top. The --section and --shadow pairs carry !important because app.js still writes the pre-restyle hex pair inline on every track element; the stylesheet owns the theme until that inline style goes. */
:root{--track-honey:oklch(0.93 0.045 82);--track-honey-dark:oklch(0.42 0.09 82);--track-honey-soft:oklch(0.965 0.025 82);--track-honey-ink:var(--ink);--track-honey-tint:oklch(0.93 0.045 82 / .66);--track-cedar:oklch(0.93 0.045 160);--track-cedar-dark:oklch(0.42 0.09 160);--track-cedar-soft:oklch(0.965 0.025 160);--track-cedar-ink:var(--ink);--track-cedar-tint:oklch(0.93 0.045 160 / .66);--track-slate:oklch(0.93 0.045 240);--track-slate-dark:oklch(0.42 0.09 240);--track-slate-soft:oklch(0.965 0.025 240);--track-slate-ink:var(--ink);--track-slate-tint:oklch(0.93 0.045 240 / .66);--track-plum:oklch(0.93 0.045 320);--track-plum-dark:oklch(0.42 0.09 320);--track-plum-soft:oklch(0.965 0.025 320);--track-plum-ink:var(--ink);--track-plum-tint:oklch(0.93 0.045 320 / .66);--track-ember:oklch(0.93 0.045 40);--track-ember-dark:oklch(0.42 0.09 40);--track-ember-soft:oklch(0.965 0.025 40);--track-ember-ink:var(--ink);--track-ember-tint:oklch(0.93 0.045 40 / .66);--track-teal:oklch(0.93 0.045 195);--track-teal-dark:oklch(0.42 0.09 195);--track-teal-soft:oklch(0.965 0.025 195);--track-teal-ink:var(--ink);--track-teal-tint:oklch(0.93 0.045 195 / .66);--track-olive:oklch(0.93 0.045 110);--track-olive-dark:oklch(0.42 0.09 110);--track-olive-soft:oklch(0.965 0.025 110);--track-olive-ink:var(--ink);--track-olive-tint:oklch(0.93 0.045 110 / .66)}
.track-honey{--section:var(--track-honey)!important;--shadow:var(--track-honey-dark)!important;--soft:var(--track-honey-soft);--on-section:var(--track-honey-ink);--wash:var(--track-honey-tint);--accent-text:var(--track-honey-dark)}
.track-cedar{--section:var(--track-cedar)!important;--shadow:var(--track-cedar-dark)!important;--soft:var(--track-cedar-soft);--on-section:var(--track-cedar-ink);--wash:var(--track-cedar-tint);--accent-text:var(--track-cedar-dark)}
.track-slate{--section:var(--track-slate)!important;--shadow:var(--track-slate-dark)!important;--soft:var(--track-slate-soft);--on-section:var(--track-slate-ink);--wash:var(--track-slate-tint);--accent-text:var(--track-slate-dark)}
.track-plum{--section:var(--track-plum)!important;--shadow:var(--track-plum-dark)!important;--soft:var(--track-plum-soft);--on-section:var(--track-plum-ink);--wash:var(--track-plum-tint);--accent-text:var(--track-plum-dark)}
/* PSY-1837 the two tracks added with Emotions and stress and Relationships. Ember is a
   burnt clay, teal a deep blue green: both stay apart from honey, cedar, slate and plum at
   tile size in the chooser and at node size on the path. */
.track-ember{--section:var(--track-ember)!important;--shadow:var(--track-ember-dark)!important;--soft:var(--track-ember-soft);--on-section:var(--track-ember-ink);--wash:var(--track-ember-tint);--accent-text:var(--track-ember-dark)}
.track-teal{--section:var(--track-teal)!important;--shadow:var(--track-teal-dark)!important;--soft:var(--track-teal-soft);--on-section:var(--track-teal-ink);--wash:var(--track-teal-tint);--accent-text:var(--track-teal-dark)}
/* PSY-2799 the seventh track, Landmark studies. Olive is a grey green at hue 110, between cedar (160)
   and honey (82) on the wheel and apart from both at tile size. */
.track-olive{--section:var(--track-olive)!important;--shadow:var(--track-olive-dark)!important;--soft:var(--track-olive-soft);--on-section:var(--track-olive-ink);--wash:var(--track-olive-tint);--accent-text:var(--track-olive-dark)}
/* stats chip: the track tile reads as a chip in the track colour */
.stats .stat.flag .track-tile.small{border-color:var(--shadow);color:var(--on-section)}
/* unit banner (PSY-2222): a flat plate with a 1px edge, the unit art at the right at 40 percent;
   without art, the plate with the unit's line icon ghosted at the right */
.unit-head{min-height:132px;padding:16px 16px 14px;border-radius:22px;align-items:flex-end;color:var(--on-section);background:var(--section);border:1px solid var(--shadow)}
.unit-head.has-art::after{content:none}
.unit-head .unit-art,.unit-head .unit-tint,.unit-head .unit-fallback{position:absolute;z-index:0;pointer-events:none}
.unit-head .unit-art{top:0;right:0;bottom:0;width:48%;height:100%;object-fit:cover;object-position:center;opacity:.4}
.unit-head .unit-tint{display:none}
.unit-head .unit-fallback{right:-22px;bottom:-34px;color:var(--on-section);opacity:.16;line-height:0}
.unit-head.has-art:not(.art-missing) .unit-fallback{opacity:0}
.unit-head-link{flex:1;min-width:0;color:inherit;text-decoration:none}
.unit-head h2{font-size:1.5rem;line-height:1.12;margin-top:4px}
.unit-head .label{opacity:.92}
.unit-meta{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:0.75rem;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.16);color:inherit}
.unit-head.honey .unit-meta{background:color-mix(in srgb,var(--cream) 60%,transparent)}
.unit-head .guide-btn{align-self:flex-end;color:inherit}
/* PSY-1722 the daily refresh node: one round node above the first unit, on its own short
   stretch of path, glowing until today's is done and cocoa with a check once it is */
.refresh-path{position:relative;display:flex;align-items:center;gap:18px;margin:14px 0 4px;padding:16px 18px;border-radius:22px}
.refresh-wrap{position:relative;flex:none;width:92px;height:92px;display:grid;place-items:center}
.node.refresh{position:relative;width:74px;height:74px;border:1px solid var(--honey-deep);border-radius:50%;background:var(--honey);color:var(--cocoa);overflow:visible;cursor:pointer}
.node.refresh::before{content:'';position:absolute;inset:-14px;border-radius:50%;border:3px solid var(--honey);opacity:.35;animation:refresh-glow .5s ease-out 1;pointer-events:none}
.node.refresh.done{background:var(--cocoa);color:var(--honey);border-color:var(--cocoa)}
.node.refresh.done::before{animation:none;opacity:0}
.node.refresh.done .ring-fill{stroke:var(--honey)}
.node.refresh:active{transform:translateY(1px)}
.refresh-copy{flex:1;min-width:0;text-align:left}.refresh-copy .label{color:var(--brown);margin-bottom:4px}.refresh-copy strong{display:block;font-family:var(--serif);font-size:1.1875rem;line-height:1.2}.refresh-copy small{display:block;color:var(--muted);margin-top:3px}
.refresh-pip{flex:none;line-height:0;align-self:flex-end;margin-bottom:-16px}
@keyframes refresh-glow{0%{transform:scale(.9);opacity:.45}70%{transform:scale(1.18);opacity:0}100%{transform:scale(1.18);opacity:0}}
@media(prefers-reduced-motion:reduce){.node.refresh::before{animation:none;opacity:.3;transform:none}}
body.reduce-motion .node.refresh::before{animation:none;opacity:.3;transform:none}
/* the path: a ruled sheet under the unit plate since PSY-2223 (the rows are set in that block
   near the end of this file); the ring colours and the node icon are shared with the refresh node */
.path-intro{position:relative;z-index:1}
.ring-track{stroke:var(--soft,#EFE9DC)}
.ring-fill{stroke:var(--section)}
.node .node-icon{display:grid;place-items:center;line-height:0;position:relative;z-index:1}
.node .ring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);pointer-events:none}
.node-badge{position:absolute;right:-5px;bottom:-3px;width:24px;height:24px;border-radius:50%;background:var(--cedar);color:var(--bg);display:grid;place-items:center;box-shadow:0 0 0 3px var(--cream);z-index:2}
.node-badge .icon{width:13px;height:13px}
/* chooser cards: track frame, drawn art tile under the card image, progress ring, meta chip,
   Pip peeking over the recommended card */
button.course-card{position:relative;border-top:4px solid var(--section);border-color:var(--line);border-top-color:var(--section)}
button.course-card:hover,button.course-card:focus-visible{border-color:var(--section)}
button.course-card .course-art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--section)}
.course-art-tile{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;color:var(--on-section);background:var(--section)}
.course-art-tile .icon{filter:drop-shadow(0 6px 12px rgba(0,0,0,.28))}
.course-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.course-ring{position:absolute;right:12px;bottom:10px;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--cream);border:1px solid var(--line)}
.course-ring .ring{position:absolute;inset:0}
.course-ring .ring-fill{stroke:var(--accent-text,var(--section))}
.course-ring b{position:relative;font-size:0.6875rem;font-weight:700;color:var(--ink);display:grid;place-items:center;line-height:0}
.pip-peek{position:absolute;left:8px;bottom:-16px;line-height:0;pointer-events:none;animation:peek .5s ease-in-out 1}
@keyframes peek{0%,100%{transform:translateY(10px)}50%{transform:translateY(0)}}
button.course-card .label{color:var(--accent-text,var(--shadow))}
button.course-card .course-detail.chip-meta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 11px;border-radius:999px;background:var(--soft);color:var(--accent-text,var(--shadow));font-size:0.75rem;font-weight:700}
.chooser-track{border-left:4px solid var(--section);padding-left:14px;border-radius:3px}
.chooser-track .chip{background:var(--section);color:var(--on-section)}
@media(min-width:1024px){.unit-head{min-height:150px}}
/* PSY-1776 Pip as a character, PSY-2226 Pip as an ink mark. One component (Art.Pip) everywhere,
   drawn in the ink through currentColor and never larger than the margin lane allows. Nothing
   idles and nothing loops: the dot sits still, the mark beside it is simply there, and the one
   motion left is the celebrating ring, drawn once in 320 ms (pip-mark) in honey, the only time
   Pip wears honey. Reduced motion turns that draw into the platform's short fade (pip-fade,
   below, which the rest of the stylesheet reuses). The blink, twitch, bounce, droop, tap,
   twinkle, breathe, float, puff, wag, cheer and nudge keyframes went with the fox. */
.pip{overflow:visible;flex-shrink:0;color:var(--ink);max-width:96px;max-height:96px}
.pip-celebrating .pip-ring{stroke:var(--honey);stroke-dasharray:100;stroke-dashoffset:0;animation:pip-mark .32s ease-out both}
@keyframes pip-mark{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* sizes: the margin lane. 64px on the splash (the static shell disc below matches), 40px on the
   check sheet on phones and 48px from 700px; every other slot takes the helper's own size, capped
   at 96px, so a call site that once asked for a 200px fox gets a mark that fits the margin */
.splash-art .pip{width:64px;height:64px}
.feedback-inner .pip{width:40px;height:40px}
.conversation{align-items:flex-end}
.feedback-inner{align-items:flex-end}
.path .streak-card{display:flex;align-items:center;gap:12px;text-align:left;width:calc(100% - 16px);max-width:380px;margin:0 auto 30px;background:var(--track-honey-soft);border-color:#f1d79a;padding:12px 16px;position:relative;z-index:2}
.streak-card .label{white-space:nowrap;margin-left:auto}
.streak-card div{flex:1}
.streak-card strong{display:block}
.streak-card small{display:block;color:var(--muted)}
/* PSY-1889 the streak-at-risk card: past the reminder time with no lesson done, the hours left
   on the learner's own clock, Pip thinking, the day chain and one pill into the next lesson. On
   the path it takes the sleepy card's place above the current node; on the Practice hub it sits
   under the heading at card width. Under the last hour the chain mark pulses once (scale and
   opacity, PSY-2228: 500 ms, no loop); reduced motion fades it in once instead. */
.streak-risk{display:flex;align-items:center;gap:10px;text-align:left;background:var(--track-honey-soft);border-color:#f1d79a;padding:12px 14px;margin:0 0 16px;position:relative;z-index:2}
.path .streak-risk{width:calc(100% - 16px);max-width:380px;margin:0 auto 30px}
.streak-risk>div{flex:1;min-width:0}
.streak-risk strong{display:block;font-size:0.9375rem;line-height:1.3}
.streak-risk .risk-time{font-weight:inherit;white-space:nowrap}
.streak-risk small{display:block;color:var(--muted);margin-top:2px}
.streak-risk .risk-mark{display:inline-flex;color:var(--ink);flex:none;line-height:0}
.streak-risk .risk-mark svg{display:block}
.streak-risk .pip{flex:none;width:56px;height:56px}
.streak-risk .risk-btn{flex:none;padding:10px 14px;font-size:0.75rem;white-space:nowrap}
.streak-risk .risk-btn .key.inv{margin-left:6px}
/* PSY-2640 the card is a grid (chain, Pip, the copy, Learn now) so the rest day pill, or the note when tokens are short, takes a full row under them; a wrapping flex row would push the copy down before shrinking it */
.streak-risk{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto}
.streak-risk .risk-rest{grid-column:1/-1;margin:0;padding:8px 14px;font-size:0.75rem;text-align:center}
.streak-risk .risk-rest .key.inv{margin-left:6px}
.streak-risk .risk-rest-note{grid-column:1/-1;margin:0;color:var(--muted);text-align:center}
.streak-risk.last-hour .risk-mark{animation:risk-pulse .5s ease-in-out 1}
@keyframes risk-pulse{50%{scale:1.25;opacity:.65}}
@media(max-width:699px){.streak-risk .pip{width:44px;height:44px}.streak-risk .risk-btn .key.inv{display:none}.streak-risk .risk-rest .key.inv{display:none}}
@media(prefers-reduced-motion:reduce){.streak-risk.last-hour .risk-mark{animation:pip-fade .3s ease-out both!important}}
body.reduce-motion .streak-risk.last-hour .risk-mark{animation:pip-fade .3s ease-out both!important}
/* PSY-2543 the next morning bonus. On the path the earned envelope sits above the units in the
   honey card the streak cards use, with the quest chest at 44px so the wobble, the lid swing and
   the reduced-motion fade already declared for .quest-chest are the ones that play here. The small
   card under the Today panel is quieter: the envelope at 34px, the name, the window in words and
   what is inside. The celebration stage seals the envelope and says nothing is owed yet. */
.morning-bonus{display:flex;align-items:center;gap:10px;text-align:left;background:var(--track-honey-soft);border-color:#f1d79a;padding:12px 14px;margin:0 0 16px;position:relative;z-index:2}
.morning-bonus>div{flex:1;min-width:0}
.morning-bonus strong{display:block;font-size:0.9375rem;line-height:1.3}
.morning-bonus small{display:block;color:var(--muted);margin-top:2px}
.morning-bonus .pip{flex:none;width:56px;height:56px}
.morning-bonus.opened{background:var(--paper)}
.morning-note{display:flex;align-items:center;gap:10px;text-align:left;padding:12px 14px;margin:12px 0 0}
.morning-note.ready{background:var(--track-honey-soft);border-color:#f1d79a}
.morning-note>div{flex:1;min-width:0}
.morning-note strong{display:block;font-size:0.8125rem;line-height:1.3}
.morning-note small{display:block;color:var(--muted);font-size:0.75rem;margin-top:2px}
.morning-note .morning-mark{flex:none;line-height:0}
.morning-note .morning-mark svg{display:block}
.morning-offer{text-align:center}
.morning-offer .morning-line{font-size:1.0625rem;line-height:1.35;margin:10px 0 6px}
.morning-offer .morning-seal{display:inline-flex;line-height:0;margin-top:14px}
.morning-offer .morning-seal svg{display:block}
/* PSY-2663 the evening bonus borrows every rule above; the ready card and the offer stage take the
   plum tint so the evening reads as the evening, and the sealed envelope sits under a small moon. */
.morning-bonus.owl:not(.opened),.morning-note.owl.ready{background:var(--track-plum-soft);border-color:var(--track-plum-tint)}
.morning-offer.owl-offer .morning-seal{position:relative}
.morning-offer.owl-offer .owl-moon{position:absolute;top:-16px;right:-22px;width:30px;height:30px;color:var(--track-honey-dark)}
.morning-offer.owl-offer .owl-moon svg{display:block;width:100%;height:100%}
@media(max-width:699px){.morning-bonus .pip{width:44px;height:44px}}
/* PSY-1895 the welcome back screen after a lapse: Pip happy, the streak that ended counting up, one primary step. */
.welcome-back{display:flex;flex-direction:column;justify-content:center;gap:16px;max-width:540px;text-align:center;padding-bottom:40px}
.welcome-back .welcome-pip{display:block;animation:welcome-in .5s ease-out both}
.welcome-back h1{margin:12px 0 4px;font-size:1.875rem}
.welcome-back .welcome-line{font-size:1.1875rem;line-height:1.45;margin:0 0 4px}
.welcome-back .welcome-line b{white-space:nowrap}
.welcome-back .welcome-count{color:#D9762B;font-weight:700}
.welcome-back .welcome-away{color:var(--muted);margin:0}
/* PSY-2821 the reason the learner gave for coming, said back under the days away */
.welcome-back .welcome-reason{color:var(--ink-soft);margin:8px 0 0;font-size:0.9375rem;text-wrap:balance}
.welcome-actions{display:grid;gap:12px;width:100%;max-width:420px;margin:6px auto 0}
.welcome-actions .btn{margin:0}
.welcome-actions .btn .key.inv{margin-left:8px}
.welcome-perk{display:flex;gap:14px;align-items:flex-start;text-align:left;background:var(--track-plum-soft);border-color:#d9c8e6;padding:16px;margin:0}
.welcome-perk>svg,.welcome-perk .welcome-mark{color:var(--track-plum-dark);flex:none;line-height:0}
.welcome-perk strong{display:block;font-size:0.9375rem;margin-bottom:4px}
.welcome-perk p{font-size:0.875rem;color:var(--muted);margin:0 0 6px;line-height:1.5}
.welcome-perk .link-button{color:var(--track-plum-dark);padding:6px 0 0;font-size:0.75rem}
.welcome-note{margin:0}
.welcome-actions>.link-button{color:var(--muted);padding:8px 6px}
.welcome-back .key-hints{justify-content:center}
@keyframes welcome-in{from{opacity:0;scale:.85;translate:0 12px}to{opacity:1;scale:1;translate:0 0}}
@media(max-width:699px){.welcome-back{padding-top:12px}.welcome-back h1{font-size:1.6875rem}.welcome-back .welcome-line{font-size:1.0625rem}.welcome-actions .btn .key.inv{display:none}}
@media(prefers-reduced-motion:reduce){.welcome-back .welcome-pip{animation:pip-fade .3s ease-out both!important}}
body.reduce-motion .welcome-back .welcome-pip{animation:pip-fade .3s ease-out both!important}
@media(min-width:700px){.feedback-inner .pip{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.pip-celebrating .pip-ring{animation:pip-fade .3s ease-out both!important}}
body.reduce-motion .pip-celebrating .pip-ring{animation:pip-fade .3s ease-out both!important}
@keyframes pip-fade{from{opacity:.4}to{opacity:1}}
/* PSY-1777 exercise screen, made minimal by PSY-1810. The screen runs top bar, ask, question,
   picture, answer cards, Check bar, with one serif size for the ask and the question, one sans
   size for the answers and one small label size for everything else. The track theme
   (.track-<theme> on .session-page) colours the selected state and the picture fallback.
   Motion is CSS only; the reduced-motion rule at the end turns each animation into a fade.
   The type scale and the spacing scale are the variables at the end of this file. */
.session-page{padding:14px 16px 190px}
.session-top{margin-bottom:10px}
/* PSY-1810 the ask is the only heading on the screen: one line in plain words that names the
   idea, in the serif size the question uses, with the idea chip beside it. The kind chip, its
   icon, the unit label and the count pill are gone. */
.session-kind{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--lq-step);margin:0 0 var(--lq-step);color:var(--ink)}
.session-kind .instruction{margin:0;flex:1 1 auto;min-width:60%;letter-spacing:-.2px}
/* PSY-1806 where the session sits, one line; PSY-2336 made it the context line, sized in the PSY-1810 block. */
.session-context{line-height:1.2;color:var(--muted);margin:0 0 var(--lq-step)}
/* PSY-1806 a story that is a quotation rather than a question gets the question said out loud
   after it, set apart from the quoted words so it does not read as part of them. */
.follow-ask{display:block;margin-top:var(--lq-step);color:var(--accent-text)}
.retry-note{color:var(--accent-text);margin:0 0 var(--lq-step)}
/* PSY-1817 an item that comes back is marked, and the counter beside it stays
   denominated in the distinct items of the lesson, so the total never grows. */
.retry-note .again-chip{display:inline-flex;align-items:center;gap:6px;margin-right:8px;padding:3px 10px;border-radius:999px;background:var(--soft);color:var(--brown);font-weight:700}
.retry-note .again-chip .icon{width:14px;height:14px}
/* art strip: the concept illustration, or the concept icon on the track gradient until it loads */
.art-strip{position:relative;aspect-ratio:3/1;border-radius:18px;overflow:hidden;margin:0 0 14px;background:var(--section);color:var(--on-section);border:1px solid var(--shadow)}
.art-strip .strip-fallback{position:absolute;inset:0;display:grid;place-items:center;opacity:.92;line-height:0}
.art-strip .strip-fallback .icon{filter:drop-shadow(0 6px 12px rgba(0,0,0,.28))}
.art-strip .strip-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.art-strip.has-art:not(.art-missing) .strip-fallback{opacity:0}
/* the question: one serif size, set at the end of this file, on phones and on desktop */
.question{line-height:1.3;font-weight:700;letter-spacing:-.2px}
.exercise-prompt{font-weight:700;line-height:1.4;white-space:pre-line}
.exercise-prompt.question{white-space:pre-line}
/* PSY-1810 a scenario is the situation in plain sans over the question in serif: no quote
   card, no corner mark and no decorative border around the question. */
.scene{color:var(--muted);line-height:1.5;margin:0 0 var(--lq-step)}
/* answer cards: icons for concept names, track colour when selected, pop or shake after the check */
.exercise-content .choices{gap:var(--lq-step);margin-bottom:var(--lq-step)}
.exercise-content .choice{transition:transform .12s,background-color .15s,border-color .15s,box-shadow .15s}
.choice:active,.tile:active,.match-card:active{transform:scale(.98)}
.choice-icon{width:36px;height:36px;border-radius:11px;background:var(--paper);display:grid;place-items:center;color:var(--accent-text);flex:none;line-height:0}
.choice-text{flex:1}
.choice.selected,.tile.selected,.match-card.selected{background:var(--soft);border-color:var(--accent-text,var(--brand));box-shadow:inset 0 0 0 1px var(--accent-text,var(--brand));color:var(--ink)}
.choice.selected .choice-icon{background:var(--section);color:var(--on-section)}
.choice.correct,.tile.correct{background:var(--track-cedar-soft);border-color:var(--cedar);box-shadow:inset 0 0 0 1px var(--cedar);color:var(--cedar);animation:card-pop .5s cubic-bezier(.3,1.4,.5,1) both}
.choice.wrong,.tile.wrong,.match-card.wrong{background:var(--track-ember-soft);border-color:var(--terra);box-shadow:inset 0 0 0 1px var(--terra);color:var(--terra);animation:card-shake .45s ease-in-out both}
.choice.reveal,.tile.reveal{border-color:var(--cedar);border-style:dashed;color:var(--cedar)}
.choice.correct .choice-icon{background:var(--cedar);color:var(--bg)}
.choice.wrong .choice-icon{background:var(--terra);color:var(--bg)}
.choice.correct .number,.choice.reveal .number{border-color:var(--cedar);color:var(--cedar)}
.choice.wrong .number{border-color:var(--terra);color:var(--terra)}
@keyframes card-pop{0%{transform:scale(1)}40%{transform:scale(1.05)}70%{transform:scale(.99)}100%{transform:scale(1)}}
@keyframes card-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
/* fill: the gap is a coloured underline that fills with the picked tile */
.fill-prompt .gap{display:inline-block;min-width:104px;border-bottom:2px solid var(--accent-text,var(--brand));color:var(--accent-text);padding:0 6px;text-align:center;line-height:1.15;vertical-align:baseline}
.fill-prompt .gap.filled{background:var(--soft);border-radius:8px 8px 0 0}
.tile{display:inline-flex;align-items:center;gap:6px}
.tile-icon{display:inline-grid;color:var(--accent-text);line-height:0}
.word-bank{margin:18px 0}
/* arrange: the bank empties into a dashed sentence line; the newest tile drops in */
.arrange-context{display:flex;align-items:center;gap:8px;color:var(--accent-text)}
.answer-line{min-height:96px;margin-top:12px;border:1px dashed var(--line);border-radius:16px;padding:12px;background:var(--paper)}
.answer-line.empty{align-items:center;justify-content:center}
.answer-hint{color:var(--muted);font-size:0.875rem;font-weight:500}
.answer-line.correct{border-color:var(--cedar);border-style:solid;background:var(--track-cedar-soft)}
.answer-line.wrong{border-color:var(--terra);border-style:solid;background:var(--track-ember-soft);animation:card-shake .45s ease-in-out both}
.answer-line .tile.placed{background:var(--cream)}
.tile.placed.latest{animation:tile-in .3s cubic-bezier(.3,1.4,.5,1) both}
@keyframes tile-in{from{transform:translateY(18px) scale(.7);opacity:0}to{transform:none;opacity:1}}
/* match: concept icons on the left column, a tick and a fade once a pair is solved */
.match-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;transition:transform .12s}
.match-icon{color:var(--accent-text);line-height:0}
.match-card .tick{position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:999px;background:var(--cedar);color:var(--bg);display:grid;place-items:center;line-height:0}
.match-card.matched{animation:pair-fade .5s ease-out both}
.match-card.matched .match-icon{opacity:.5}
@keyframes pair-fade{0%{background:var(--track-cedar-soft);border-color:var(--cedar);color:var(--cedar);transform:scale(1.03)}100%{transform:scale(1)}}
/* listen and speak: the speaker or microphone hero on the track plate with pulsing rings */
.media-hero{position:relative;display:flex;align-items:center;gap:16px;padding:18px;border-radius:20px;margin-bottom:16px;min-height:112px;overflow:hidden;background:var(--section);color:var(--on-section);border:1px solid var(--shadow);text-align:left}
.media-hero small{color:inherit;opacity:.85;display:block;margin-top:4px}
.media-hero .hero-copy{position:relative;z-index:1;flex:1;min-width:0}
.media-hero .exercise-prompt{color:inherit}
.media-hero .play-btn,.media-hero .mic-btn{position:relative;z-index:1;background:var(--cream);color:var(--ink);border:1px solid var(--shadow)}
.media-hero .mic-btn.live{background:var(--terra);color:var(--bg)}
.media-hero .mic-btn:disabled,.media-hero .play-btn:disabled{background:rgba(255,255,255,.35);color:rgba(255,255,255,.7);box-shadow:none}
.hero-rings{position:absolute;left:57px;top:50%;width:0;height:0;pointer-events:none}
.hero-rings i{position:absolute;left:-39px;top:-39px;width:78px;height:78px;border-radius:999px;border:2px solid rgba(255,255,255,.65);opacity:0}
.listen-box .hero-rings i{animation:hero-ring .5s ease-out 1}
.media-hero.live .hero-rings i{animation:hero-ring .5s ease-out 1}
.hero-rings i:nth-child(2){animation-delay:.5s}
.media-hero.live .hero-rings i:nth-child(2){animation-delay:.5s}
@keyframes hero-ring{from{transform:scale(1);opacity:.7}to{transform:scale(2.2);opacity:0}}
/* the check sheet: slides up, big serif title, the correct answer in a chip, the explanation in plain text */
.feedback{animation:sheet-up .32s cubic-bezier(.2,.9,.3,1.05) both;border-top:1px solid;border-radius:20px 20px 0 0}
/* PSY-2528 at 200 percent zoom on a phone the result sheet (a fixed footer) ran taller than the viewport and its title left the
   screen with no way to scroll to it. The sheet is capped at its containing block, the viewport, and scrolls inside itself; a
   percentage rather than a viewport unit because CSS zoom scales the fixed containing block and not svh. */
.exercise-bar.feedback{max-height:100%;overflow:auto;padding-bottom:0}
.exercise-bar.feedback .pinned-inner,.exercise-bar.feedback .bar-row{background:inherit}
.exercise-bar.feedback .bar-row{position:sticky;bottom:0;padding-bottom:max(21px,env(safe-area-inset-bottom))}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
.feedback h2{font-size:1.75rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;line-height:1.1}
.combo-chip{display:inline-flex;align-items:center;gap:4px;font:500 0.8125rem/1 var(--sans);color:var(--ink-soft);animation:combo-pop .32s cubic-bezier(.3,1.4,.5,1) both}
@keyframes combo-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.answer-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 8px}
.answer-chips .label{width:100%;font-size:0.625rem;color:var(--brand)}
.answer-chip{display:inline-block;background:var(--cream);border:1.5px solid var(--cedar);border-radius:12px;padding:6px 10px;font-weight:700;font-size:0.875rem;line-height:1.35;color:var(--cedar)}
.feedback p{font-size:0.9375rem;color:var(--ink);max-height:120px;line-height:1.45}
.feedback p strong{color:inherit}
/* PSY-2228 the run counter is a line in the margin, in words ("Three in a row"), no flame */
.combo{display:flex;justify-content:flex-start;align-items:center;gap:4px;margin:-2px 0 6px;font-weight:500;color:var(--ink-soft)}
.combo.lit{animation:combo-pop .32s cubic-bezier(.3,1.4,.5,1) both}
.combo-run:empty{display:none}
/* a new question slides in; a re-render for a selection does not */
.session-page.enter .exercise-content{animation:question-in .32s ease-out both}
@keyframes question-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* phones: the layout fills the screen and the Check bar stays pinned. PSY-2336: the key hints sit behind one chip, "? keys", at the right end of the bar on every width (the chooser and onboarding hint bars are untouched) */
.keys-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--cream);color:var(--muted);font:600 1rem/1 var(--sans);flex:none;text-transform:none;white-space:nowrap;cursor:pointer}
.keys-btn[aria-expanded="true"]{border-color:var(--brand);color:var(--brand)}
@media(max-width:699px){.exercise-bar .pinned-inner{display:flex;gap:10px;align-items:center}.exercise-bar .btn{flex:1;width:auto}.exercise-bar.feedback .pinned-inner{display:block}.combo{margin:-12px 0 4px;min-height:14px}.feedback h2{font-size:1.625rem}}
@media(min-width:700px){.art-strip{border-radius:22px}.choice-icon{width:42px;height:42px}.feedback h2{font-size:2rem}}
@media(prefers-reduced-motion:reduce){.feedback,.session-page.enter .exercise-content,.handoff-page .handoff-inner,.choice.correct,.tile.correct,.tile.placed.latest,.match-card.matched,.combo-chip,.combo.lit,.explain-body{animation:pip-fade .3s ease-out both!important}}
body.reduce-motion .feedback,body.reduce-motion .session-page.enter .exercise-content,body.reduce-motion .handoff-page .handoff-inner,body.reduce-motion .choice.correct,body.reduce-motion .tile.correct,body.reduce-motion .tile.placed.latest,body.reduce-motion .match-card.matched,body.reduce-motion .combo-chip,body.reduce-motion .combo.lit,body.reduce-motion .explain-body{animation:pip-fade .3s ease-out both!important}
/* PSY-1778 the celebration layer. Every reward screen is a sequence: elements that belong to a
   step carry .seq and data-at, app.js adds .shown as the step arrives (Enter hurries it, Esc
   skips to the end), and the CSS below animates each reveal. Lesson complete: confetti in the
   brand colours, Pip cheering, the XP counter, the accuracy ring drawing itself, the time chip,
   the combo line, then reward cards (a quest with its icon ring filling, all three quests as a
   small party, a learner passed on the board, the promotion zone shield, an achievement badge
   sliding in). Streak: the flame grows from an ember to a blaze, the number ticks up, the week
   lights day by day, an ice chip shows equipped freezes. Chest: it wobbles closed, the lid
   swings open, the gems burst and fly to the counter at the top. The reduced-motion rule at the
   end turns every reveal into a short fade and hides what only exists to move. */
.celebration{padding:40px 18px 170px;justify-content:flex-start;gap:0}
.celebration .seq,.celebrate-bar .seq{opacity:0;visibility:hidden}
.celebration .seq.shown,.celebrate-bar .seq.shown{opacity:1;visibility:visible;animation:seq-in .5s cubic-bezier(.2,.9,.3,1.05) both}
@keyframes seq-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.celebration .result-stat{animation:none}
.celebration h1{color:var(--ink)}
.skip-btn{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:var(--cream);color:var(--muted);font:700 0.75rem/1 var(--sans);padding:8px 10px 8px 12px;text-transform:none;transition:opacity .3s}
.celebration.seq-done .skip-btn{opacity:0;pointer-events:none}
.celebrate-bar .hint-go,.celebrate-bar.seq-done .hint-next,.celebrate-bar.seq-done .hint-skip{display:none}
.celebrate-bar.seq-done .hint-go{display:inline-flex}
.celebrate-bar .pinned-inner{display:flex;flex-direction:column;align-items:stretch}
.celebrate-bar .seq-continue{width:100%}
.celebrate-bar .seq-continue .btn{width:100%}
/* lesson complete */
.party{position:relative;z-index:1}
.party h1{font-size:2.125rem;margin:6px 0 6px}
.party .muted{margin-bottom:0}
/* PSY-2228 no DOM confetti: the ring drawing itself in 320 ms is the set piece of the lesson end,
   and Motion.confetti throws at most one 400 ms burst on its canvas. Three plain tiles, their
   labels in sentence case and in the ink, no coloured bands. */
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:440px;margin:18px auto 0}
.result-stat{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--cream)}
.result-stat label{display:block;font:500 0.8125rem/1 var(--sans);padding:10px 6px 8px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
/* PSY-1813 the Answered tile of a survey session, plum where a scored lesson's ring is cedar */
.result-stat.answered{border-color:var(--track-plum)}.result-stat.answered label{color:var(--track-plum-dark)}
.survey-ring .ring-track{stroke:var(--track-plum-soft)}.survey-ring .ring-fill{stroke:var(--track-plum)}.survey-ring .count{font-size:0.8125rem}
.result-stat strong{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 4px;font-size:1.375rem;min-height:82px;color:var(--ink);font-variant-numeric:tabular-nums}
.result-stat.xp strong .icon{color:var(--brown)}
.acc-ring{position:relative;width:64px;height:64px;display:grid;place-items:center}
.acc-ring .ring{position:absolute;inset:0}
.acc-ring .ring-track{stroke:var(--track-cedar-soft)}
.acc-ring .ring-fill{stroke:var(--cedar)}
.celebration .seq.shown .acc-ring .ring-fill{animation:ring-draw .32s var(--m-ease-slide) both}
@keyframes ring-draw{from{stroke-dashoffset:var(--c)}}
.acc-ring .count{position:relative;font-size:0.9375rem;font-weight:700}
/* PSY-1817 where the ring comes from: the items answered right the first time, out of the
   items of the lesson. */
.result-stat .stat-note{display:block;padding:0 6px 11px;font-size:0.625rem;font-weight:700;line-height:1.3;color:var(--muted)}
.result-stat.accuracy strong{min-height:70px;padding-bottom:5px}
.party .score-line{margin:8px 0 0;font-weight:700;color:var(--brown)}
.time-chip .icon{color:var(--slate)}
.combo-line{display:inline-flex;align-items:center;gap:8px;margin:16px auto 0;color:var(--ink-soft);font-weight:500;font-size:0.875rem}
.goal-line{display:block;margin-top:16px}
.count.counted{animation:count-pop .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes count-pop{50%{transform:scale(1.18)}}
/* reward cards */
.rewards{display:grid;gap:10px;width:100%;max-width:440px;margin:18px auto 0;text-align:left}
.reward-toast{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:var(--cream);position:relative;overflow:hidden}
.reward-copy{flex:1;min-width:0}
.reward-copy strong{display:block;font-size:0.9375rem;line-height:1.3}
.reward-copy small{display:block;color:var(--muted);margin-top:2px}
.reward-gems{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--slate);font-size:0.875rem;flex:none}
.reward-icon{position:relative;width:44px;height:44px;display:grid;place-items:center;color:var(--brown);flex:none}
.reward-icon .ring{position:absolute;inset:0}
.reward-icon .ring-track{stroke:var(--paper)}
.reward-icon .ring-fill{stroke:var(--honey)}
.celebration .seq.shown .quest-fill .ring-fill{animation:ring-draw .32s var(--m-ease-slide) both}
.reward-toast.quests-all{background:var(--track-honey-soft);border-color:#f1d79a}
.reward-toast.quests-all .reward-gems{color:var(--brown)}
.reward-toast.quests-all .pip{flex:none}
.mini-party{position:absolute;inset:0;pointer-events:none}
.reward-toast.pass .avatar{width:44px;height:44px;font-size:1.125rem}
.badge-art,.shield-art{flex:none}
.celebration .seq.shown.reward-toast.achievement{animation:badge-in .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes badge-in{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
.badge.earned .badge-art{width:45px;height:auto}
/* streak. PSY-2228: the flame is retired. The streak is the day chain (Art.chain), plotted dots on
   a ruled line in the ink, the current day filled; on the streak screen the dots arrive one after
   another (320 ms each, 30 ms apart, so the whole chain is on the line inside the cap) and the
   same mark sits in the streak sheet, the risk card, the freeze offer and the stats bar chip. The
   week is the same grammar: seven dots on a rule, a lit day filled, a frozen day carrying the
   snowflake, the day that met the goal ringed in honey. */
.chain-stage,.chain-mark{display:flex;justify-content:center;width:100%;max-width:300px;margin:14px auto 0;color:var(--ink);line-height:0}
.chain-stage .chain-art,.chain-mark .chain-art{width:100%;height:auto}
.chain-dot{transform-box:fill-box;transform-origin:center}
.celebration .seq.shown .chain-dot{animation:chain-in .32s var(--m-ease-pop) both;animation-delay:calc(var(--i,0) * 30ms)}
@keyframes chain-in{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
.streak-title{color:var(--ink);font-size:2.5rem;margin:8px 0 8px}
.streak-number{display:inline-block;font-variant-numeric:tabular-nums}
.week-wrap{display:grid;justify-items:center;gap:8px}
.stage-streak .week{margin:12px 0 4px}
.week-day b{position:relative;width:18px;height:18px;margin:0 auto;border:1px solid var(--ink-soft);border-radius:50%;background:var(--paper);color:var(--slate);display:grid;place-items:center;line-height:0}
.week-day b:before{content:'';position:absolute;top:50%;left:-12px;right:-12px;height:1px;background:var(--line);z-index:-1}
.week-day:first-child b:before{left:50%}.week-day:last-child b:before{right:50%}
.week-day.lit b{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.week-day.frozen b{border-color:#67adce}
.week-day.today span{color:var(--ink);font-weight:700}
.week-day.today b{box-shadow:0 0 0 2px var(--honey)}
.celebration .seq.shown .week-day.lit b,.celebration .seq.shown .week-day.frozen b{animation:day-light .32s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i,0) * 30ms)}
@keyframes day-light{from{scale:.4;opacity:0}to{scale:1;opacity:1}}
.ice-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--track-slate-soft);color:#2f6f8e;font-weight:700;font-size:0.8125rem}
.streak-pip small{display:block;margin-top:6px}
/* PSY-1724 the streak society: the tier flair beside a name, the next milestone card on both
   streak screens, the goal ring on a day that reached the daily goal and the perfect week, where
   all seven of the last days did. Nothing here moves on its own; the milestone card arrives with
   the celebration's own reveal, which the reduced-motion rule above already turns into a fade. */
.flair{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;padding:4px 14px 4px 6px;border-radius:999px;background:var(--track-honey-soft);border:1.5px solid #f1d79a;color:var(--brown);text-align:left}
.flair b{font-size:0.875rem;font-weight:700}
.flair small{color:var(--ink-soft);font-size:0.75rem}
.flair .badge-art{flex:none}
.milestone-card{display:flex;align-items:center;gap:13px;margin:14px auto 0;padding:12px 16px;max-width:430px;border:1px solid var(--line);border-radius:20px;background:var(--paper);text-align:left}
.milestone-ring{position:relative;display:grid;place-items:center;flex:none;color:#D9762B}
.milestone-ring .ring-fill{stroke:#D9762B}
.milestone-ring .ring-track{stroke:#f1e4cf}
.milestone-ring .icon{position:absolute}
.milestone-card .badge-art{flex:none}
.milestone-copy strong{display:block;font-size:0.9375rem;color:var(--ink)}
.milestone-copy small{display:block;color:var(--muted);font-size:0.8125rem}
.milestone-copy small.muted{font-size:0.75rem;margin-top:2px}
/* PSY-1890 the streak goal: the picker (four pill tiles with their keys), the ring card that
   takes over once a goal is set, the reached-goal card and the profile tile. The ring draws
   itself through the celebration's own reveal, and the reduced-motion rule above already turns
   every step into a fade; nothing here has an animation of its own. */
.goal-wrap{display:grid;justify-items:center;gap:8px;width:100%}
.goal-pick{width:100%;max-width:430px;margin:14px auto 0;padding:14px 16px 12px;border:1px solid var(--line);border-radius:20px;background:var(--paper);text-align:center}
.goal-pick h2{font-size:1.25rem;margin:0 0 4px}
.goal-pick p{margin:0 0 12px;font-size:0.875rem}
.goal-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.goal-option{position:relative;display:grid;justify-items:center;gap:2px;padding:12px 4px 10px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--ink);cursor:pointer;font:inherit}
.goal-option .key{position:absolute;top:6px;left:6px}
.goal-option b{font-size:1.625rem;line-height:1;color:#D9762B}
.goal-option small{font-size:0.6875rem;font-weight:700;color:var(--muted)}
.goal-option.suggested{border-color:#D9762B;background:var(--track-honey-soft)}
.goal-option:hover,.goal-option:focus-visible{border-color:#D9762B}
.goal-option:active{transform:translateY(1px)}
.goal-hint{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--muted);font-size:0.75rem}
.goal-card{display:flex;align-items:center;gap:13px;margin:14px auto 0;padding:12px 16px;max-width:430px;border:1.5px solid #f1d79a;border-radius:20px;background:var(--track-honey-soft);text-align:left}
.goal-card.done{border-color:#c9d9c1;background:var(--track-cedar-soft)}
.goal-ring{position:relative;display:grid;place-items:center;flex:none;color:#D9762B}
.goal-ring .ring-fill{stroke:#D9762B}
.goal-ring .ring-track{stroke:#f1e4cf}
.goal-ring .icon{position:absolute}
.goal-card.done .goal-ring{color:var(--cedar)}.goal-card.done .goal-ring .ring-fill{stroke:var(--cedar)}
.goal-copy strong{display:block;font-size:0.9375rem;color:var(--ink)}
.goal-copy small{display:block;color:var(--muted);font-size:0.8125rem}
.goal-count{font-variant-numeric:tabular-nums}
.goal-reached{display:grid;justify-items:center;position:relative;margin-top:6px}
.goal-reached h2{color:var(--ink);font-size:1.75rem;margin:8px 0 2px}
.goal-reached p{margin:0;font-size:0.9375rem}
.goal-skip,.goal-none{margin:12px 0 0;font-size:0.8125rem}
.celebrate-bar .hint-goal{display:none}
.celebrate-bar[data-step="goal"] .hint-goal{display:inline-flex}
.stat-tile.goal-tile{grid-column:auto}
.streak-best{margin:4px 0 0;color:var(--muted);font-size:0.9375rem}
.stat-tile.goal-tile .goal-ring{color:#D9762B}
/* PSY-1945 the freeze offer on the streak screen: a held card in the ice colours of the week
   row's chip, Pip thinking beside a flame with a snowflake at its foot, the two pill buttons,
   then the equipped card with the gem counter the gems fly to. The card arrives through the
   celebration's own reveal; the only motion of its own is the flight of the gems, which reuses
   the chest's keyframes, is hidden under reduced motion with the other particles, and counts
   the balance down as each one lands. */
.freeze-wrap{display:grid;justify-items:center;gap:8px;width:100%}
.freeze-offer{position:relative;display:grid;justify-items:center;gap:6px;width:100%;max-width:430px;margin:14px auto 0;padding:14px 16px 14px;border:1.5px solid #cfe1ea;border-radius:20px;background:var(--track-slate-soft);text-align:center}
.freeze-offer .pip{width:96px;height:96px}
.freeze-mark{position:relative;display:grid;place-items:center;color:var(--ink);line-height:0}
.freeze-snow{position:absolute;right:-8px;bottom:-4px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#2f6f8e;border:1px solid #cfe1ea}
.freeze-offer h2{font-size:1.375rem;margin:2px 0 0;color:var(--ink)}
.freeze-offer p{margin:0 0 8px;font-size:0.875rem;max-width:360px}
.freeze-actions{display:grid;gap:8px;width:100%;max-width:320px}
.freeze-actions .btn{display:flex;justify-content:center;gap:8px}
.freeze-hint{display:inline-flex;align-items:center;gap:6px;margin-top:4px;color:var(--muted);font-size:0.75rem}
.freeze-offer.done{border-color:#c9d9c1;background:var(--track-cedar-soft);padding-top:12px}
.freeze-offer.done .freeze-mark{color:var(--slate);margin-top:4px}
.freeze-offer.done .gem-counter{justify-self:end}
.freeze-offer.done .gem-flock{left:50%;top:50%}
.freeze-offer.done .gem-fly{animation:gem-fly .5s cubic-bezier(.5,0,.8,.4) both;animation-delay:calc(var(--i,0) * 70ms)}
.freeze-skip{margin:12px 0 0;font-size:0.8125rem}
.celebrate-bar .hint-freeze{display:none}
.celebrate-bar[data-step="freeze"] .hint-freeze{display:inline-flex}
.celebrate-bar[data-step="freeze"] .hint-next{display:none}
.week-day.goal b{box-shadow:0 0 0 2px var(--honey)}
.week.perfect{background:var(--track-honey-soft);border-radius:22px;padding:10px 12px}
.week.perfect .week-day.goal b{box-shadow:0 0 0 2px var(--brand)}
.week-perfect{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--track-honey-soft);border:1.5px solid #f1d79a;color:var(--brand);font-weight:700;font-size:0.8125rem}
.badge.society small:last-child{color:var(--brown)}
/* PSY-1725 the monthly badge gallery on the profile: one card a month in the same grid as the
   achievements, an earned month wearing the gold rosette on a honey card, and the month still
   running showing its own ring filling behind its line icon. */
.month-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 20px}
.month-badge{border:1px solid var(--line);border-radius:16px;display:grid;justify-items:center;gap:6px;padding:15px 4px;text-align:center}
.month-badge.earned{background:var(--track-honey-soft);border-color:#f1d79a}
.month-badge strong{font-size:0.75rem}
.month-badge small{font-size:0.625rem;color:var(--muted)}
.month-badge.earned small:last-child{color:var(--brown);font-weight:700}
.month-art{position:relative;display:grid;place-items:center;min-height:52px;color:#c8b49b}
.month-badge.earned .month-art{color:var(--honey)}
.month-art .ring-fill{stroke:var(--honey)}
.month-art .ring-track{stroke:#efe7d8}
.month-icon{position:absolute;line-height:0}
/* chest */
.stage-chest .celebrate-top{width:100%;display:flex;justify-content:flex-end;padding:0 4px;margin-bottom:8px;position:relative;z-index:2}
.gem-counter{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--cream);color:var(--slate);font-weight:700;font-size:1.125rem;font-variant-numeric:tabular-nums}
.gem-counter .label{color:var(--muted);font-size:0.625rem}
.gem-counter.bump{animation:count-pop .3s cubic-bezier(.3,1.4,.5,1)}
.gem-counter.landed{border-color:var(--honey-deep);box-shadow:inset 0 0 0 1px var(--honey-deep)}
.chest-copy h1{margin-top:4px}
.chest-box{position:relative;border:0;background:none;padding:10px;margin:34px auto 0;line-height:0;color:inherit;border-radius:24px}
.chest-art{overflow:visible}
.chest-box .chest-art{animation:chest-wobble .5s ease-in-out 1;transform-origin:50% 92%}
.celebration.opened .chest-box .chest-art{animation:chest-pop .5s cubic-bezier(.3,1.4,.5,1) both}
.chest-lid{transform-box:view-box;transform-origin:60px 40px}
.celebration.opened .chest-lid{animation:lid-open .5s cubic-bezier(.3,1.3,.5,1) both}
.chest-glow circle{transform-box:view-box;transform-origin:60px 52px}
.celebration.opened .chest-glow circle{animation:chest-glow .5s ease-out both}
.chest-gems{opacity:0}
.celebration.opened .chest-gems{animation:gems-rise .35s ease-out .15s both}
@keyframes chest-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}
@keyframes chest-pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes lid-open{to{transform:rotate(180deg)}}
@keyframes chest-glow{0%{opacity:0;transform:scale(.5)}40%{opacity:.55}100%{opacity:0;transform:scale(1.4)}}
@keyframes gems-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gem-flock{position:absolute;left:50%;top:42%;width:0;height:0;pointer-events:none}
.gem-fly{position:absolute;left:-10px;top:-10px;width:20px;height:20px;color:var(--slate);opacity:0;line-height:0}
.celebration.opened .gem-fly{animation:gem-burst .5s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 25ms)}
.celebration.flying .gem-fly{animation:gem-fly .5s cubic-bezier(.5,0,.8,.4) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes gem-burst{from{transform:translate(0,0) scale(.2);opacity:0}to{transform:translate(var(--bx,0px),var(--by,-40px)) scale(1);opacity:1}}
@keyframes gem-fly{from{transform:translate(var(--bx,0px),var(--by,-40px)) scale(1);opacity:1}to{transform:translate(var(--dx,0px),var(--dy,-220px)) scale(.45);opacity:0}}
.tap-hint{color:var(--muted);font-size:0.8125rem;margin:6px 0 0;display:inline-flex;align-items:center;gap:6px}
.celebration.opened .tap-hint{visibility:hidden}
.gem-line{display:inline-flex;align-items:center;gap:8px;color:var(--slate);font-size:1.875rem;font-weight:700;margin-top:8px}
@media(max-width:699px){.party h1{font-size:1.875rem}.result-stat strong{font-size:1.1875rem;min-height:76px}.stage-chest .chest-art{width:150px;height:135px}}
@media(min-width:700px){.celebration{padding-top:36px}.result-grid{max-width:520px}.rewards{max-width:520px}}
@media(prefers-reduced-motion:reduce){.celebration .seq.shown,.celebrate-bar .seq.shown,.celebration .seq.shown.reward-toast.achievement,.celebration .seq.shown .chain-dot,.celebration .seq.shown .week-day.lit b,.celebration .seq.shown .week-day.frozen b,.celebration.opened .chest-box .chest-art,.celebration.opened .chest-gems{animation:pip-fade .3s ease-out both!important}.celebration.opened .chest-lid{transform:rotate(-36deg) translate(-3px,-5px)}.celebration.opened .chest-gems{opacity:1}.gem-fly,.mini-party{display:none}}
body.reduce-motion .celebration .seq.shown,body.reduce-motion .celebrate-bar .seq.shown,body.reduce-motion .celebration .seq.shown.reward-toast.achievement,body.reduce-motion .celebration .seq.shown .chain-dot,body.reduce-motion .celebration .seq.shown .week-day.lit b,body.reduce-motion .celebration .seq.shown .week-day.frozen b,body.reduce-motion .celebration.opened .chest-box .chest-art,body.reduce-motion .celebration.opened .chest-gems{animation:pip-fade .3s ease-out both!important}body.reduce-motion .celebration.opened .chest-lid{transform:rotate(-36deg) translate(-3px,-5px)}body.reduce-motion .celebration.opened .chest-gems{opacity:1}body.reduce-motion .gem-fly,body.reduce-motion .mini-party{display:none}

/* PSY-1780 mini experiments. Five 30 second versions of classic studies share one screen shape:
   an intro card, one view per step kind (a spinning wheel, a number field, a colour word, three
   lines with a scripted room, a pair of options, a cinema scenario), then a reveal that sets the
   learner's own result beside the published pattern. The motion is the point of several of them,
   so every animation here is listed again in the reduced-motion rule at the end of this block,
   where it becomes a short fade and the wheel simply shows its number. */
.exp-intro{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px 20px;margin:4px 0 16px;text-align:center}
.exp-intro .exp-badge{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:20px;background:var(--section);color:var(--on-section);margin-bottom:14px;line-height:0;border:1px solid var(--shadow);animation:exp-pop .45s cubic-bezier(.3,1.4,.5,1) both}
.exp-intro h2{margin:0 0 10px}
.exp-intro p{margin:0 0 10px;font-size:0.9375rem}
.exp-intro .small-note{margin:0}
/* PSY-1812 the questionnaire recap card: the measure's parts as a ticked list, the result line set off in the track colour */
.recap-card{text-align:left}
.recap-card .exp-badge{display:grid;margin:0 auto 14px}
.recap-card h2{text-align:center}
.recap-parts{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.recap-parts li{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--cream);font-size:0.9375rem}
.recap-parts .recap-tick{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cedar);color:var(--bg);line-height:0;flex:none}
.recap-parts .recap-part{flex:1;font-weight:500}
.recap-parts b{color:var(--muted);font-weight:500;white-space:nowrap}
.recap-next{border-left:4px solid var(--section);padding:6px 12px;background:var(--paper);border-radius:0 12px 12px 0}
.recap-next strong{color:var(--ink)}
@keyframes exp-pop{from{transform:scale(.5) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
/* the wheel: ten wedges that spin three times and settle on the learner's random number */
.exp-wheel{position:relative;display:grid;place-items:center;margin:6px auto 12px;width:176px;height:176px}
.exp-wheel .wheel-art{display:block}
.exp-wheel .wheel-disc{transform-origin:60px 60px}
.exp-wheel.spun .wheel-disc{animation:wheel-spin .5s cubic-bezier(.16,.9,.25,1) both}
@keyframes wheel-spin{from{transform:rotate(0)}to{transform:rotate(var(--turn))}}
.exp-wheel .wheel-pointer{position:absolute;top:-6px;width:0;height:0;border:11px solid rgba(0,0,0,0);border-top-color:var(--brown);border-bottom:0}
.exp-wheel .wheel-number{position:absolute;font-size:1.625rem;font-weight:700;color:var(--brown);font-variant-numeric:tabular-nums}
.exp-wheel.spun .wheel-number{animation:exp-pop .3s cubic-bezier(.3,1.4,.5,1) .2s both}
/* the estimate field */
.exp-input{display:flex;align-items:center;gap:10px;margin:8px 0 12px}
.exp-input input{flex:1;min-width:0;font-size:1.375rem;font-weight:700;text-align:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--cream);color:var(--ink)}
.exp-input input:focus{border-color:var(--section);outline-offset:2px}
.exp-input span{font-size:1.375rem;font-weight:700;color:var(--accent-text)}
/* which step of the run is on screen */
.exp-meta{display:flex;justify-content:center;margin:0 0 12px}
.exp-progress{font-size:0.75rem;font-weight:700;color:var(--accent-text);background:var(--soft);border-radius:999px;padding:6px 14px}
/* Stroop: the word in its ink, then four swatches */
.exp-stroop{display:grid;place-items:center;min-height:132px;margin:0 0 16px;background:var(--paper);border:1px solid var(--line);border-radius:20px}
.stroop-word{font-size:2.875rem;font-weight:700;letter-spacing:2px;animation:stroop-in .28s cubic-bezier(.3,1.4,.5,1) both}
@keyframes stroop-in{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.exp-inks{grid-template-columns:1fr 1fr}
.choice.ink{min-height:62px}
.ink-swatch{width:26px;height:26px;border-radius:9px;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
/* Asch: a reference line, three comparisons, and four scripted voices answering first */
.exp-lines{display:flex;align-items:flex-end;justify-content:center;gap:26px;margin:0 0 14px;padding:16px 10px;background:var(--paper);border:1px solid var(--line);border-radius:20px;min-height:190px}
.exp-lines .line-set{display:flex;align-items:flex-end;gap:22px;padding-left:22px;border-left:1px dashed var(--line)}
.line-card{display:flex;flex-direction:column;align-items:center;gap:8px}
.line-card i{display:block;width:8px;height:var(--len);border-radius:4px;background:var(--ink);transform-origin:bottom;animation:line-grow .4s ease-out both}
.line-card.ref i{background:var(--accent-text)}
.line-card .label{color:var(--muted)}
@keyframes line-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.exp-room{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:0 0 14px}
.exp-room small{width:100%;text-align:center;margin-top:2px}
.room-voice{display:inline-flex;align-items:center;gap:6px;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;animation:voice-in .3s ease-out both;animation-delay:calc(var(--i) * .12s)}
.room-voice .avatar{width:30px;height:30px;font-size:0.875rem}
.room-voice b{font-size:1rem;color:var(--accent-text)}
@keyframes voice-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
/* the reveal: your run on the left, the published pattern on the right, the source underneath */
.exp-bars{margin:0 0 16px}
.exp-bar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;margin-bottom:10px}
.exp-bar-label{font-size:0.8125rem;font-weight:700;color:var(--muted)}
.exp-bar b{font-variant-numeric:tabular-nums;font-size:0.875rem;color:var(--accent-text)}
.exp-bar-track{grid-column:1 / -1;height:14px;border-radius:999px;background:var(--paper);overflow:hidden}
.exp-bar-track i{display:block;height:100%;width:var(--w);border-radius:999px;background:var(--shadow);animation:bar-grow .5s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i) * .14s)}
@keyframes bar-grow{from{width:0}to{width:var(--w)}}
.exp-reveal{display:grid;gap:12px;margin:0 0 14px}
.exp-col{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px 16px;animation:exp-slide .4s ease-out both}
.exp-col.theirs{animation-delay:.12s}
.exp-col .label{display:flex;align-items:center;gap:6px;color:var(--accent-text);margin-bottom:10px}
.exp-col.yours{border-color:var(--shadow);box-shadow:inset 0 0 0 1px var(--shadow)}
@keyframes exp-slide{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.exp-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:0.875rem}
.exp-row:first-of-type{border-top:0}
.exp-row span{color:var(--muted)}
.exp-row strong{text-align:right;font-variant-numeric:tabular-nums}
.exp-col.theirs .exp-row{flex-direction:column;align-items:flex-start;gap:3px}
.exp-col.theirs .exp-row strong{text-align:left;font-weight:500;color:var(--ink);line-height:1.45}
.exp-col.theirs .exp-row span{font-weight:700;color:var(--accent-text);font-size:0.8125rem}
.exp-note{margin-bottom:10px}
.exp-cite{font-style:italic}
.exercise-content .exp-intro .question,.exercise-content .exp-stroop+.small-note{margin-bottom:0}
@media(min-width:700px){.exp-reveal{grid-template-columns:1fr 1fr;align-items:start}.stroop-word{font-size:3.875rem}.exp-stroop{min-height:170px}.exp-wheel{width:210px;height:210px}}
@media(prefers-reduced-motion:reduce){.exp-intro .exp-badge,.exp-wheel.spun .wheel-disc,.exp-wheel.spun .wheel-number,.stroop-word,.line-card i,.room-voice,.exp-col{animation:pip-fade .3s ease-out both!important}.exp-bar-track i{animation:none!important;width:var(--w)}}
body.reduce-motion .exp-intro .exp-badge,body.reduce-motion .exp-wheel.spun .wheel-disc,body.reduce-motion .exp-wheel.spun .wheel-number,body.reduce-motion .stroop-word,body.reduce-motion .line-card i,body.reduce-motion .room-voice,body.reduce-motion .exp-col{animation:pip-fade .3s ease-out both!important}body.reduce-motion .exp-bar-track i{animation:none!important;width:var(--w)}

/* PSY-1712 onboarding polish: the step count beside the seven-step bar, the same bar on the
   chooser that closes onboarding, the Start here card on the chosen track, and the daily goal
   chip on the profile with a ring that fills as today's XP comes in. */
.step-count{flex:none;font-size:0.75rem;font-weight:700;color:var(--muted);white-space:nowrap}
.step-count small{font-size:inherit}
.chooser-page .onboard-progress{max-width:640px;margin:14px auto 4px}
.course-card-wrap.peek .course-card{border-color:var(--honey-deep);box-shadow:inset 0 0 0 1px var(--honey-deep)}
.start-here-bar{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;margin:14px 0 0;padding:12px 18px;box-sizing:border-box;border-radius:999px;background:var(--honey);color:var(--cocoa);font-size:0.9375rem;font-weight:700;transition:transform .12s,background-color .2s}
.start-here-bar .icon{flex:none}
.course-card-wrap.peek .course-card:hover .start-here-bar,.course-card-wrap.peek .course-card:focus-visible .start-here-bar{transform:translateY(-1px);background:var(--honey-deep)}
.course-card-wrap.peek .course-card:active .start-here-bar{transform:translateY(1px)}
.chooser-cue{margin:12px 0 0;color:var(--muted)}
.start-here-bar:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ink)}
.goal-chip{display:inline-flex;align-items:center;gap:9px;margin:2px 0 14px;padding:6px 14px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--cream);font-size:0.8125rem;font-weight:700;color:var(--ink);text-align:left}
.goal-chip strong{font-weight:700;color:var(--brown)}
.goal-chip .ring{flex:none}
.goal-chip .ring .ring-fill{transition:stroke-dashoffset .5s ease-out}
@media(prefers-reduced-motion:reduce){.start-here-bar:before{animation:none}.start-here-bar{transition:none}}
body.reduce-motion .start-here-bar:before{animation:none}body.reduce-motion .start-here-bar{transition:none}

/* PSY-1717 accessibility. A visually hidden live region for announcements; the heading a screen
   moves focus to shows no ring (it is not a control, and the focus-visible ring stays on every
   button, link and field); a pressed play or microphone button reads as such; and reduced motion
   switches off every pulse and particle explicitly, after every block above, so nothing later
   turns one back on. */
/* PSY-1721 Section overview: one full-screen list of a track's units, in order. */
.overview-page{min-height:100svh;padding:18px 18px 60px;max-width:760px;margin:auto}
.overview-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.overview-top .brand{margin:0}
.overview-head{position:relative;display:flex;align-items:center;gap:14px;padding:18px 16px;border-radius:24px;background:var(--section);color:var(--on-section,#fff);border:1px solid var(--shadow);overflow:hidden}
.overview-head.honey{color:var(--ink)}
.overview-head .overview-tile{background:rgba(255,255,255,.55)}
.overview-copy{flex:1;min-width:0}
.overview-copy .label{opacity:.9}
.overview-head h1{margin:2px 0 4px;font-size:1.625rem;line-height:1.1}
.overview-head p{margin:0;font-size:0.875rem;opacity:.92}
.overview-pip{flex:none;line-height:0;margin-right:-6px}
.overview-summary{display:flex;align-items:center;gap:14px;margin:16px 0 4px}
.overview-ring{position:static;width:56px;height:56px;flex:none;box-shadow:none;border:1px solid var(--line)}
.overview-ring b{font-size:0.75rem}
.overview-summary .stat-line{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:0.8125rem;color:var(--muted);font-weight:700}
.overview-summary .stat-line b{color:var(--ink);font-size:0.9375rem}
.overview-keys{justify-content:flex-start;margin:10px 0 2px}
.overview-units{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.overview-unit{display:grid;gap:8px}
.overview-unit .unit-row{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;width:100%;padding:12px;text-align:left;border:1px solid var(--line);border-radius:20px;background:var(--cream);color:inherit;text-transform:none;font-weight:inherit;transition:transform .12s ease,border-color .12s ease}
.overview-unit .unit-row:hover{border-color:var(--honey)}
.overview-unit .unit-row:active{transform:scale(.985)}
.overview-unit.complete .unit-row{border-color:var(--section)}
.overview-unit.current .unit-row{border-color:var(--honey-deep);background:var(--tint);box-shadow:inset 0 0 0 1px var(--honey-deep)}
.overview-unit.questionnaire .unit-row{border-color:#cdb2d6}
.overview-unit.questionnaire.complete .unit-row{border-color:var(--section)}
.unit-row-art{position:relative;width:76px;height:76px;border-radius:16px;overflow:visible;flex:none}
.unit-row-art .course-art-tile{border-radius:16px}
.unit-row-art .course-img{border-radius:16px}
.unit-row.art-missing .course-img{display:none}
.unit-row-ring{right:-8px;bottom:-8px;width:34px;height:34px}
.unit-row-ring b{font-size:0.625rem}
.unit-row-body{display:block;min-width:0}
.unit-row-body .label{color:var(--muted)}
.overview-unit.current .unit-row-body .label{color:var(--brown)}
.unit-row-body strong{display:block;font-family:var(--serif);font-weight:700;letter-spacing:-.2px;font-size:1.1875rem;line-height:1.15;margin:3px 0 7px}
.lesson-dots{display:flex;gap:5px;margin:0 0 8px}
.lesson-dots i{display:block;width:11px;height:11px;border-radius:50%;background:var(--paper);border:1px solid var(--line)}
.lesson-dots i.done{background:var(--section);border-color:var(--section)}
.lesson-dots i.next{background:var(--honey);border-color:#c9922e;animation:dot-pulse .5s ease-in-out 1}
@keyframes dot-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.unit-row-state{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:0.75rem;font-weight:700;color:var(--muted)}
.unit-row-state span{display:inline-flex;align-items:center;gap:4px}
.overview-unit.complete .unit-row-state span:nth-child(2){color:var(--green)}
.crown-mark .crown-icon{display:inline-flex;line-height:0;color:#a89e91}
.crown-mark.ready .crown-icon{color:#9768a7}
.crown-mark.earned{color:var(--brown)}
.crown-mark.earned .crown-icon{color:#C99A2E}
.overview-unit .jump-btn{justify-self:start;margin-left:14px;min-height:42px;padding:9px 16px;font-size:0.8125rem;display:inline-flex;align-items:center;gap:6px}
/* PSY-2812 Share on a finished unit's row, under the row like Jump here */
.overview-unit .unit-share{justify-self:start;margin-left:14px;padding:6px 6px;font-size:0.8125rem;display:inline-flex;align-items:center;gap:5px}
.overview-later{margin:28px 0 0}
.see-all{margin-left:8px}
.track.spot .unit-head{animation:spot-in .5s ease-out}
@keyframes spot-in{0%{box-shadow:0 0 0 6px #F3C96E99}100%{box-shadow:0 0 0 0 #F3C96E00}}
@media(min-width:700px){.overview-page{padding:30px 34px 70px}.overview-head{padding:22px 22px}.overview-head h1{font-size:1.875rem}.overview-unit .unit-row{grid-template-columns:96px 1fr}.unit-row-art{width:96px;height:96px}}
@media(prefers-reduced-motion:reduce){.overview-pip,.lesson-dots i.next,.track.spot .unit-head{animation:none!important}}
body.reduce-motion .overview-pip,body.reduce-motion .lesson-dots i.next,body.reduce-motion .track.spot .unit-head{animation:none!important}
.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}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,[data-focus][tabindex="-1"]:focus{outline:none}
.play-btn[aria-pressed="true"],.mic-btn[aria-pressed="true"]{box-shadow:0 0 0 4px rgba(255,255,255,.55)}
@media(prefers-reduced-motion:reduce){.intro-block{animation:pip-fade .3s ease-out both!important}}
body.reduce-motion .intro-block{animation:pip-fade .3s ease-out both!important}
@media(prefers-reduced-motion:reduce){.next-card{animation:pip-fade .3s ease-out both!important}}
body.reduce-motion .next-card{animation:pip-fade .3s ease-out both!important}
@media(prefers-reduced-motion:reduce){.track-done,.track-unit{animation:pip-fade .3s ease-out both!important}}
body.reduce-motion .track-done,body.reduce-motion .track-unit{animation:pip-fade .3s ease-out both!important}
@media(prefers-reduced-motion:reduce){.idea-chip.pulse{animation:none!important}}
body.reduce-motion .idea-chip.pulse{animation:none!important}
/* PSY-1807 the answer review. The check sheet's two labelled rows first: what the learner
   answered and what the answer was, the miss in terracotta, the correct one in cedar, then the
   Why under its own label. Then the review screen the celebration hands over to: the score, the
   accuracy ring and one card per item. A card's Why is closed on a phone and opens on Enter or a
   tap; from 700px up every Why is inline, so a desktop reader never opens ten of them. */
.answer-rows{display:grid;gap:5px;margin:2px 0 8px}
.answer-rows .answer-chips{margin:0}
.answer-chips.yours.miss .answer-chip{border-color:var(--terra);color:var(--terra);background:#fff}
.answer-chips.clue .answer-chip{border-color:var(--line);color:var(--cocoa);background:#fff;font-weight:500}
/* PSY-2526 the picked wrong option explained, one quiet sans line between Your answer and Correct answer */
.answer-rows .picked-note{font-size:0.8125rem;line-height:1.4;color:var(--ink);margin:0;max-height:none;overflow:visible}
.why-row{margin-top:4px}
.why-row .label{display:block;font-size:0.625rem;color:var(--brand);margin-bottom:2px}
.celebration.stage-review{justify-content:flex-start;text-align:left;padding:26px 18px 200px;overflow:visible}
.review-head{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:16px}
.review-pip{line-height:0;flex-shrink:0}
.review-headline{flex:1;min-width:0}
.review-score{font-size:1.5rem;margin:2px 0 6px;line-height:1.15;color:var(--ink);text-align:left}
.review-pct{color:var(--brown)}
.review-meta{display:flex;gap:14px;margin:0;color:var(--muted);font-size:0.8125rem;font-weight:700}
.review-meta span{display:inline-flex;align-items:center;gap:5px}
.review-ring{position:relative;display:grid;place-items:center;flex-shrink:0}
.review-ring .count{position:absolute;font-size:0.9375rem;font-weight:700;color:var(--ink)}
.review-list{list-style:none;display:grid;gap:10px;width:100%;margin:0;padding:0}
.review-item{border:1px solid var(--line);border-radius:14px;background:var(--cream);overflow:hidden;animation:slide-up .35s both}
.review-item.right{border-color:#cfe0d5}
.review-item.wrong{border-color:#f0cfc6}
.review-item.second{border-color:#e8d4a7}
.review-row{width:100%;display:flex;align-items:flex-start;gap:10px;padding:12px 13px;text-align:left;background:transparent;border:0;min-height:0}
.review-mark{flex-shrink:0;line-height:0;margin-top:2px}
.review-item.right .review-mark{color:var(--cedar)}
.review-item.wrong .review-mark{color:var(--terra)}
.review-item.second .review-mark{color:var(--brown)}
.review-copy{flex:1;min-width:0;display:grid;gap:4px}
.review-ask{font-weight:700;font-size:0.875rem;line-height:1.35;color:var(--ink)}
.review-ask span{display:block}
.review-ask span+span{margin-top:3px;font-weight:500}
.review-line{font-size:0.8125rem;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.review-line b{display:block;font-size:0.625rem;font-weight:700;color:var(--brand)}
.review-line.solution{color:var(--cedar);font-weight:700}
.review-item.right .review-line.yours{color:var(--cedar);font-weight:700}
.review-item.wrong .review-line.yours{color:var(--terra);font-weight:700}
.review-second{font-size:0.6875rem;font-weight:700;color:var(--brown)}
.review-toggle{flex-shrink:0;display:grid;justify-items:center;gap:4px;color:var(--muted)}
.review-why{display:none;padding:0 13px 13px 38px}
.review-item.open .review-why{display:block}
.review-why .label{display:block;margin:2px 0 3px;color:var(--brand)}
.review-why p{font-size:0.8125rem;line-height:1.5;margin:0;color:var(--ink)}
.review-note{width:100%;margin:14px 0 0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.result-cards{width:100%;display:grid;gap:14px;text-align:left;margin-top:14px}
.result-card{border:1px solid var(--line);border-radius:16px;background:var(--cream);padding:16px;animation:slide-up .4s both}
.result-card h2{font-size:1.25rem;margin:4px 0 9px;line-height:1.25}
.result-range{margin:0 0 10px;font-weight:700;color:var(--brown);font-size:0.875rem}
.result-means{margin:0 0 10px;font-size:0.875rem;line-height:1.55;color:var(--ink)}
.result-means b{display:block;font-size:0.625rem;color:var(--brand);margin-bottom:3px}
/* PSY-1761 the retest cadence under a result: a state measure names a waiting period, a profile
   measure says it has none. */
.result-retest{margin:0 0 10px;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.result-retest .label{display:block;margin-bottom:3px;color:var(--muted)}
.result-card .btn{margin-top:6px}
@media(min-width:700px){.celebration.stage-review{padding-top:36px}.review-score{font-size:2rem}.review-ask{font-size:0.9375rem}.review-line{font-size:0.875rem}.review-why{display:block;border-top:1px dashed var(--line);padding-top:10px;margin:0 13px 13px 38px;padding-left:0;padding-right:0}.review-toggle{display:none}}
/* PSY-1736 the report coupon card in the reading room and under a questionnaire result: what
   Plus covers, the code itself in a monospace block big enough to read off a phone, a copy
   button beside it and the way through to the questionnaires on the main site. */
.report-card{background:var(--track-honey-soft);border-color:#eed9ae}
.report-card .label{color:var(--brown)}
.report-card h3{margin-bottom:0}
.report-card.locked{background:var(--tint);border-color:var(--line)}
.report-card.used{background:var(--tint);border-color:#d9e0d3}
.report-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.report-code{flex:1;min-width:190px;margin:0;padding:13px 15px;border:2px dashed #d8b976;border-radius:13px;background:var(--cream);color:var(--ink);font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:1.0625rem;font-weight:700;letter-spacing:2px;text-align:center;overflow-wrap:anywhere}
.report-code.used{color:var(--muted);border-style:solid;border-color:var(--line);text-decoration:line-through}
.report-row .btn{min-height:50px;white-space:nowrap}
.report-link{display:inline-block;font-size:0.875rem;line-height:1.5}
.report-card .small-note{margin:12px 0 0}
@media(max-width:420px){.report-row .btn{width:100%}}
/* PSY-1787 the motion system. Three durations, two easings and a handful of classes that
   every screen, card, sheet, toast and counter in Learn shares, so nothing moves at a speed
   or on a curve of its own. Fast is a press, base is a screen or a card, slow is a ring or a
   celebration; out-back is for anything that pops, out-cubic for anything that slides.

   Every rule below animates opacity, translate and scale and nothing else, so a phone on a
   throttled processor composites the frame instead of laying the page out again, which is what
   keeps a path of five units smooth at 390px. The two entrance keyframes use the independent
   translate and scale properties rather than transform, because the elements they land on carry
   a transform of their own already (a path node wrap is offset along the winding path and a node
   is tilted), and an entrance written as transform would take that away for good. The one rule
   here that writes a length is the confetti canvas, which is a full screen overlay deaf to the
   pointer rather than anything in the layout.

   Reduced motion is answered twice, by the media query and by the "Reduce motion" switch in
   Settings, which motion.js mirrors onto the body as .reduce-motion. Both collapse all of it
   to one opacity fade of --m-quiet (120ms, under the 150ms the ticket asks for), stop every
   idle loop and hide every particle. */
:root{--m-fast:120ms;--m-base:200ms;--m-slow:360ms;--m-quiet:120ms;--m-step:20ms;--m-ease-pop:cubic-bezier(.34,1.56,.64,1);--m-ease-slide:cubic-bezier(.22,.61,.36,1)}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:none}}
@keyframes m-open{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes m-pop{from{opacity:0;scale:.82}70%{opacity:1;scale:1.04}to{opacity:1;scale:1}}
@keyframes m-toast{from{opacity:0;translate:0 -12px}to{opacity:1;translate:none}}
/* the four screen changes: a tab view cross-fades, a lesson slides up, a chooser card rises
   in its turn, a path node pops in on the first render of the path */
.m-in{animation:m-fade var(--m-base) var(--m-ease-slide) both}
.m-open{animation:m-open var(--m-base) var(--m-ease-slide) both}
.m-rise{animation:m-rise var(--m-base) var(--m-ease-slide) both;animation-delay:calc(var(--m-i,0)*var(--m-step))}
.m-pop{animation:m-pop var(--m-base) var(--m-ease-pop) both;animation-delay:calc(var(--m-i,0)*var(--m-step))}
/* the components: a press, a picked card, a sheet, a toast, a ring drawing itself */
.m-press,.btn,.choice,.tile,.match-card,.icon-button{transition:transform var(--m-fast) var(--m-ease-slide)}
.btn{transition:transform var(--m-fast) var(--m-ease-slide),border var(--m-fast) var(--m-ease-slide)}
.m-press:active:not(:disabled),.icon-button:active:not(:disabled){transform:scale(.94)}
.sheet{animation:slide-up var(--m-base) var(--m-ease-slide)}
#toast.show{animation:m-toast var(--m-base) var(--m-ease-slide) both}
.ring-fill.m-draw{animation:ring-draw var(--m-slow) var(--m-ease-slide) both}
/* the canvas the confetti helper draws on: one layer over everything, deaf to the pointer,
   removed from the page the moment the burst ends */
.m-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}
@media(prefers-reduced-motion:reduce){
 .m-in,.m-open,.m-rise,.m-pop,.sheet,#toast.show,.ring-fill.m-draw{animation:m-fade var(--m-quiet) linear both!important;animation-delay:0s!important}
 .m-press,.btn,.choice,.tile,.match-card,.icon-button{transition:none!important}
 .m-confetti{display:none!important}}
body.reduce-motion .m-in,body.reduce-motion .m-open,body.reduce-motion .m-rise,body.reduce-motion .m-pop,body.reduce-motion .sheet,body.reduce-motion #toast.show,body.reduce-motion .ring-fill.m-draw{animation:m-fade var(--m-quiet) linear both!important;animation-delay:0s!important}body.reduce-motion .m-press,body.reduce-motion .btn,body.reduce-motion .choice,body.reduce-motion .tile,body.reduce-motion .match-card,body.reduce-motion .icon-button{transition:none!important}body.reduce-motion .m-confetti{display:none!important}
/* the Settings switch, saying the same thing to a browser whose system preference is not set */
body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation-duration:var(--m-quiet)!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:var(--m-quiet)!important;transition-delay:0s!important;scroll-behavior:auto!important}
body.reduce-motion .m-in,body.reduce-motion .m-open,body.reduce-motion .m-rise,body.reduce-motion .m-pop,body.reduce-motion .sheet,body.reduce-motion #toast.show,body.reduce-motion .ring-fill.m-draw{animation-name:m-fade!important;animation-timing-function:linear!important}
body.reduce-motion .m-press,body.reduce-motion .btn,body.reduce-motion .choice,body.reduce-motion .tile,body.reduce-motion .match-card,body.reduce-motion .icon-button{transition:none!important}
body.reduce-motion .m-confetti,body.reduce-motion .gem-fly,body.reduce-motion .mini-party{display:none!important}
@media(prefers-reduced-motion:reduce){.review-item,.result-card{animation:pip-fade .3s ease-out both!important}}
body.reduce-motion .review-item,body.reduce-motion .result-card{animation:pip-fade .3s ease-out both!important}
@media(prefers-reduced-motion:reduce){.quest-chest.ready .chest-art,.quest.opened .chest-art{animation:none!important}}
body.reduce-motion .quest-chest.ready .chest-art,body.reduce-motion .quest.opened .chest-art{animation:none!important}
@media(prefers-reduced-motion:reduce){.stat.boost svg,.tourney-rail li.now,.strip-shield.raised,.zone.live,.rank-row.bump,.swap-from,.swap-to,.stat.fire.on svg,.stat.goal.burst:after,.stat.gems.bump .gem-count,.fan-card,.btn.pulse-once,.step-dots i.now,.node.current,.node.current::before,.start-bubble,.hero-rings i,.media-hero.live .hero-rings i,.start-here-bar:before,.pip-peek,.combo.lit,.pip-body,.pip-note{animation:none!important}.speak-btn .wave i,.hero-wave i{animation:none!important;height:9px}.match-bar i{transition:none!important}.gem-fly,.mini-party{display:none!important}}
body.reduce-motion .stat.boost svg,body.reduce-motion .tourney-rail li.now,body.reduce-motion .strip-shield.raised,body.reduce-motion .zone.live,body.reduce-motion .rank-row.bump,body.reduce-motion .swap-from,body.reduce-motion .swap-to,body.reduce-motion .stat.fire.on svg,body.reduce-motion .stat.goal.burst:after,body.reduce-motion .stat.gems.bump .gem-count,body.reduce-motion .fan-card,body.reduce-motion .btn.pulse-once,body.reduce-motion .step-dots i.now,body.reduce-motion .node.current,body.reduce-motion .node.current::before,body.reduce-motion .start-bubble,body.reduce-motion .hero-rings i,body.reduce-motion .media-hero.live .hero-rings i,body.reduce-motion .start-here-bar:before,body.reduce-motion .pip-peek,body.reduce-motion .combo.lit,body.reduce-motion .pip-body,body.reduce-motion .pip-note{animation:none!important}body.reduce-motion .speak-btn .wave i,body.reduce-motion .hero-wave i{animation:none!important;height:9px}body.reduce-motion .match-bar i{transition:none!important}body.reduce-motion .gem-fly,body.reduce-motion .mini-party{display:none!important}
button.course-card .start-here-bar{color:var(--cocoa);display:flex;margin:14px 0 0}
/* PSY-1723 the XP boost: the stats chip (honey on cream, the bolt pulsing while the boost runs), the quests card and the celebration line. */
.stat.boost{color:var(--brown);background:var(--track-honey-soft);border:1.5px solid #f1d79a;border-radius:999px;padding:5px 11px 5px 7px;gap:4px;font-size:0.9375rem}
.session-top .stat.boost{margin-left:auto;padding:4px 9px 4px 6px;font-size:0.8125rem}
/* PSY-1728 Pip in the top bar of a lesson. He rides inside the row the quit button already
   sets the height of, so the item below him never moves, and he reacts at a fraction of his usual
   amplitude: the big bounce and the droop belong to the check sheet, where there is room. Here it
   is one small nod, which reads at 32px without pushing anything. Under reduced motion the
   stylesheet's own rules take over: the global animation stop silences the nod, and the PSY-1776
   block turns each expression into a fade. */
.session-top .session-pip{display:inline-flex;flex:none;align-items:center;line-height:0}
/* PSY-2226: the chrome mark swaps its note with no motion of its own; the nudge went with the fox */
.stat.boost svg{animation:boost-pulse .5s ease-in-out 1;transform-origin:center}
.boost-count{font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:left}
@keyframes boost-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}
.boost-card .boost-icon{color:var(--brown)}
.boost-card.on{background:var(--track-honey-soft);border-color:#f1d79a}
.boost-card .pip{flex:none}
.combo-line.boost-line{background:var(--track-honey-soft);color:var(--brown);margin-left:10px}
/* PSY-1727 Explain more: a disclosure under the explanation; the guidebook paragraph slides in, scrolls inside the sheet, and never pushes Continue off the screen */
.explain-more{margin-top:6px}
.explain-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;color:inherit;font:700 0.75rem/1 var(--sans);cursor:pointer}
.explain-toggle .icon{flex:none}
.explain-toggle .key{border-color:currentColor;color:inherit;opacity:.8}
.explain-toggle[aria-expanded="true"] .icon{transform:rotate(-8deg)}
.explain-body{margin:8px 0 2px;padding:12px 14px;background:color-mix(in srgb,var(--cream) 72%,transparent);border:1.5px solid color-mix(in srgb,var(--cream) 90%,transparent);border-radius:14px;max-height:min(32svh,240px);overflow:auto;animation:explain-in .25s ease-out both}
.explain-body[hidden]{display:none}
.explain-body .label{font-size:0.625rem;margin-bottom:6px;color:inherit;opacity:.85}
.feedback .explain-body p{max-height:none;overflow:visible;margin:0 0 10px;font-size:0.875rem;line-height:1.5;white-space:normal}
.explain-sources .label{display:block;margin-top:4px}
.explain-sources .source{font-size:0.6875rem;line-height:1.4;color:var(--ink);opacity:.8;padding:3px 0;overflow-wrap:anywhere}
@keyframes explain-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}/* PSY-1730 follows, public pages and high-fives: the handle chip and follow counts on the
   profile, the people sheets, the public page (hero, tiles, badges, milestone rows with a
   high-five button), the received high-fives card, and the dot on the Profile tab. */
.social-row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:4px 0 8px;font-size:0.875rem;font-weight:500;color:var(--brown)}
.social-row .link-button{padding:0;font-size:0.875rem}
.handle-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--brown);font-size:0.8125rem;font-weight:700;text-decoration:none}
.handle-chip .icon{width:16px;height:16px}
.handle-chip.off{color:var(--muted)}
.handle-chip.empty{border-style:dashed;color:var(--muted);background:var(--cream)}
.handle-chip:hover,.handle-chip:focus-visible{border-color:var(--honey)}
.profile-hero small.muted{display:block;margin:0 0 6px;font-size:0.75rem}
.people{display:grid;gap:8px;max-height:60vh;overflow:auto;padding:2px}
.person{display:grid;grid-template-columns:45px 1fr;column-gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--cream);color:inherit;text-decoration:none;text-align:left}
.person .avatar{grid-row:1/3}
.person strong{font-size:0.9375rem}
.person small{color:var(--muted);font-size:0.75rem}
a.person:hover,a.person:focus-visible{border-color:var(--honey)}
.public-page{padding-bottom:12px}
.public-hero .btn{margin-top:8px}
.public-hero .profile-avatar{margin-bottom:14px}
.milestones{display:grid;gap:10px;margin:14px 0 22px}
.milestone{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--cream)}
.milestone .ms-icon{width:44px;height:44px;border-radius:14px;background:var(--track-honey-soft);color:var(--brown);display:grid;place-items:center;flex:none}
.milestone strong{flex:1;font-size:0.9375rem;min-width:0}
.milestone .btn{margin:0;padding:9px 14px;font-size:0.75rem;width:auto;flex:none}
.milestone.done .ms-icon{background:var(--track-cedar-soft);color:var(--cedar)}
.milestone.cheer .ms-icon{animation:card-pop .5s cubic-bezier(.3,1.4,.5,1) both}
.hf-card{margin:6px 0 22px;padding:14px 16px}
.hf-card .hf-pip{flex:none;line-height:0}
.hf-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.hf-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:var(--paper);font-size:0.875rem;line-height:1.4}
.hf-item.new{background:var(--track-honey-soft)}
.hf-item .icon{color:var(--brown);flex:none;width:22px;height:22px}
.hf-item span{flex:1;min-width:0}
.hf-item a{color:var(--brown);font-weight:700}
/* PSY-1857 Find people: the search row, a person row with its follow pill, the same pill on a
   league row, and the key hints under a board that offers a follow. */
.find-people{margin:6px 0 22px}
.find-people h2{margin-bottom:12px}
.find-label{color:var(--brown);margin:0 0 8px}
.find-row{display:flex;gap:8px;align-items:stretch;margin-bottom:12px}
.find-row .people-q{flex:1;min-height:48px;padding:10px 14px;border-radius:14px}
.find-row .find-btn{min-height:48px;padding:8px 14px;margin:0;flex:none}
.find-title{margin:14px 0 8px;font-size:1rem}
.find-note{margin:4px 0 0}
.find-empty{padding:16px 8px}
.find-empty p{margin:8px 0 0}
.person-row{display:flex;align-items:center;gap:10px}
.person-row .avatar{flex:none}
.person-row .person-name{flex:1;min-width:0;display:grid;gap:2px;color:inherit;text-decoration:none;font-weight:inherit}
.person-row .person-name strong{font-size:0.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-row .person-name small{color:var(--muted);font-size:0.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-row .person-name:hover strong,.person-row .person-name:focus-visible strong{color:var(--brown)}
.row-follow{flex:none;display:inline-flex;align-items:center;gap:5px;padding:7px 11px;min-height:36px;border:1.5px solid transparent;border-radius:999px;background:var(--honey);color:var(--cocoa);font-size:0.6875rem;font-weight:700;transition:transform .12s,border .12s}
.row-follow.on{background:var(--cream);border-color:var(--line);color:var(--brown)}
.row-follow .icon{width:16px;height:16px}
.row-follow:active{transform:translateY(2px);border-bottom-width:1px}
/* PSY-1938 block: the small ban button beside a follow pill, the link under a page's follow
   button, the confirm sheet and the Blocked people rows in Settings (terracotta, never honey). */
.row-block{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;min-height:36px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--cream);color:var(--muted)}
.row-block:hover,.row-block:focus-visible{color:var(--red);border-color:#f0b9b8}
.row-block:active{transform:translateY(2px);border-bottom-width:1px}
.row-block .icon{width:16px;height:16px}
.block-link{display:inline-flex;align-items:center;gap:6px;width:100%;justify-content:center;color:var(--muted);padding:10px 6px}
.block-link:hover,.block-link:focus-visible{color:var(--red)}
/* PSY-2426 report a person: the flag button beside Block on a person row, the link under a
   page's Block link, and the quiet word beside the day on a feed row, where the high-five pill
   leaves no room for a third round button. The reasons sheet reuses the PSY-2368 .item-reasons
   grid, because it is the same control with different words. The third control on a person row
   is paid for in the row above: a 32px pair and a 10px gap keep a name like Mara Okafor on one
   line at 390px, which a 36px pair and a 12px gap no longer do. */
.person-report-link{display:inline-flex;align-items:center;gap:6px;width:100%;justify-content:center;color:var(--muted);padding:2px 6px 10px}
.person-report-link:hover,.person-report-link:focus-visible{color:var(--red)}
.person-row .row-block{width:32px;min-height:32px}
.feed-row .feed-report{color:inherit;font-weight:700;padding:2px 0;font-size:inherit}
.feed-row .feed-report:hover,.feed-row .feed-report:focus-visible{color:var(--red)}
.block-sheet p{font-size:0.9375rem}
.blocked-list{margin-top:10px}
.blocked-row{border-color:#f0b9b8}
.blocked-row .feed-copy strong{font-size:0.9375rem}
.blocked-row .feed-copy small{color:var(--muted)}
.rank-row .row-follow{margin-left:2px;padding:6px 9px}
.rank-row .rank-link{color:inherit;font-weight:inherit}
.rank-row .rank-link:hover,.rank-row .rank-link:focus-visible{color:var(--brown)}
.league-keys{margin:14px 0 4px;justify-content:center}
/* PSY-2542 the two views of the week's board: a segmented control of two pills under the hero,
   the one showing filled with honey and carrying aria-pressed, the other reading as a button.
   Flat like every other surface here: one border, no shadow and no gradient. Under it the
   Following rows borrow .rank-row from the group board, so the two views read as one board. */
.board-views{display:flex;gap:8px;justify-content:center;margin:0 0 16px}
.board-view{flex:1;max-width:190px;min-height:44px;padding:11px 14px;border:1px solid var(--line);border-radius:999px;background:var(--cream);color:var(--ink);font-size:0.8125rem;font-weight:700;transition:background-color .15s,border-color .15s,color .15s}
.board-view.on{background:var(--honey);border-color:transparent;color:var(--cocoa)}
.board-view:active{transform:translateY(1px)}
.following-lead{text-align:center;margin:0 0 14px}
.following-empty{padding:16px 8px 6px}
.following-empty p{margin:10px 0 0}
.following-board{margin-top:4px}
/* PSY-1880 People you follow: the feed card on the profile, one row per thing a friend did this
   week with the animal avatar, a kind icon and the high-five pill; a row just high-fived pops. */
.feed-card{margin:6px 0 22px;padding:16px}
.feed-card .feed-pip{flex:none}
.feed-title{margin:0;font-size:1.375rem}
.feed-sub{margin:4px 0 0}
.feed-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.feed-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.feed-row .feed-avatar{flex:none;width:40px;height:40px}
.feed-row .feed-kind{flex:none;display:inline-flex;color:var(--brown)}
.feed-row .feed-copy{flex:1;min-width:0;display:grid;gap:2px}
.feed-row .feed-label{color:inherit;text-decoration:none;font-weight:700;font-size:0.9375rem;line-height:1.3}
.feed-row .feed-label:hover,.feed-row .feed-label:focus-visible{color:var(--brown)}
.feed-row small{color:var(--muted);font-size:0.75rem}
.feed-row.fived{border-color:var(--cedar)}
.feed-row.cheer{animation:feed-pop .5s ease}
@keyframes feed-pop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.feed-five:disabled{opacity:.9}
.feed-empty{padding:16px 8px 6px}
.feed-keys{margin:12px 0 0;justify-content:center}
/* PSY-1894 New followers: the notice above People you follow, a row per person on honey paper
   until it is followed back, then cedar like a given high-five. */
.follower-card{margin:6px 0 22px;padding:16px}
.follower-card .feed-pip{flex:none}
.follower-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--track-honey-soft)}
.follower-row.back{background:var(--paper);border-color:var(--cedar)}
.follower-row.cheer{animation:feed-pop .5s ease}
.follower-row .feed-avatar{flex:none;width:40px;height:40px}
.follower-row .feed-copy{flex:1;min-width:0;display:grid;gap:2px}
.follower-row .feed-label{color:inherit;text-decoration:none;font-weight:700;font-size:0.9375rem;line-height:1.3}
.follower-row .feed-label:hover,.follower-row .feed-label:focus-visible{color:var(--brown)}
.follower-row small{color:var(--muted);font-size:0.75rem}
.follow-back{flex:none}
.tab{position:relative}
.tab-dot{position:absolute;top:5px;right:8px;width:10px;height:10px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 2px var(--cream)}
@media(min-width:1024px){.tab-dot{top:auto;right:14px}}
.public-standalone{max-width:600px;margin:0 auto;padding:16px 18px 60px}
.public-standalone .brand{display:inline-flex;margin-bottom:10px}
.public-standalone .invite{margin-top:20px;padding:20px 18px}
.public-standalone .invite h3{margin:10px 0 4px}
.public-page .key-hints{margin-top:14px}
/* PSY-1731 the friends quest and the friend streaks, on the Quests screen. The quest card is
   the daily quest card grown up: Pip and the partner's initial side by side, the shared bar,
   and the gems it pays. A friend row is a name, one line saying whose turn it is, and the
   flame with the count, warm when today is already in for both of you. */
/* PSY-2723 the one line over the Friends box when an invite has landed */
.invite-landed{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--track-honey-soft);color:var(--ink)}
.friend-card{margin-bottom:18px}
.friend-card h3{margin:0}
.friend-card .btn{margin-top:14px}
.friend-quest{margin-bottom:18px}
.friend-quest .label{color:var(--brown)}
.friend-quest h3{margin:6px 0}
.friend-quest p{margin:0 0 12px}
.friend-quest small{display:block;margin-top:8px}
.friend-quest .btn{margin-top:14px}
.friend-quest.met,.friend-quest.won{background:var(--track-honey-soft);border-color:#f0d9a4}
.friend-pair{display:inline-flex;align-items:center;flex:none;line-height:0}
.friend-pair .avatar{width:38px;height:38px;font-size:1.0625rem;margin-left:-12px;border:2px solid var(--cream)}
.friend-gems{color:var(--blue);flex:none}
.friend-streaks{margin-bottom:18px}
.friend-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.friend-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;background:var(--paper)}
.friend-row.on{background:var(--track-honey-soft)}
.friend-row .avatar{width:38px;height:38px;font-size:1.0625rem}
.friend-who{flex:1;min-width:0;display:grid}
.friend-who strong,.friend-who a{font-size:0.9375rem}
.friend-who a{color:var(--brown)}
.friend-who small{color:var(--muted)}
.friend-flame{display:inline-flex;align-items:center;gap:4px;flex:none;font-weight:700;color:var(--muted)}
.friend-row.on .friend-flame{color:var(--ink)}
/* PSY-1823 one image set per course, on every lesson screen. The listen and speak hero takes the
   picture as its backdrop under the track tint, so the speaker and the microphone stay legible;
   the guidebook shows each chapter under its own scene; the lesson sheet on the path, the reward
   screens and the result page carry the unit or measure card with Pip standing in front of it.
   Every host is a data-art element, so a file that fails to load hides the frame (art-missing)
   instead of leaving a broken image. */
.media-hero .hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.media-hero .hero-tint{position:absolute;inset:0;background:var(--section);opacity:.72;z-index:0}
.media-hero.art-missing .hero-tint{display:none}
.media-hero .hero-rings{z-index:1}
.guide-scene{position:relative;width:100%;aspect-ratio:3/1;border-radius:14px;overflow:hidden;margin:24px 0 -12px;background:var(--paper)}
.guide-scene .guide-scene-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.guide-scene.art-missing{display:none}
.sheet-art{position:relative;width:100%;aspect-ratio:3/1;border-radius:16px;overflow:hidden;margin:0 0 -40px;background:var(--paper)}
.sheet-art .sheet-art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sheet-art.art-missing{display:none}
.sheet-art+.pip{position:relative;z-index:1}
.party-art{position:relative;width:min(100%,440px);aspect-ratio:3/1;border-radius:18px;overflow:hidden;margin:0 auto -64px;background:var(--paper)}
.party-art .party-art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.party-art.art-missing{display:none}
.party-art+.pip{position:relative;z-index:1}
.celebration .party{width:100%}
.stage-results .party-art,.result-page .party-art{margin-bottom:-48px}
/* PSY-1830 the unit intro screen and the concept card. Three short blocks under the unit art,
   Pip thinking beside the lead, one primary Start, the guidebook as the secondary; the blocks
   rise in one after another and reduced motion turns that into a fade. The idea chip sits on
   the intro (one per course) and on every item about a course concept. */
.intro-page{min-height:100vh;display:flex;flex-direction:column;background:var(--cream);padding-bottom:28px}
.intro-page .session-top{display:flex;align-items:center;gap:12px;padding:12px 16px}
.intro-kicker{color:var(--muted)}
.intro-hero{position:relative;margin:0 16px;aspect-ratio:2/1;border-radius:20px;overflow:hidden;background:var(--section);display:grid;place-items:center;color:var(--on-section,#fff);border:1px solid var(--shadow)}
.intro-hero .intro-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.intro-hero .intro-tint{position:absolute;inset:0;background:rgba(34,26,21,.12)}
.intro-hero.no-art .intro-tint,.intro-hero.art-missing .intro-tint{display:none}
.intro-hero .intro-fallback{position:relative;line-height:0;opacity:.9}
.intro-hero.has-art:not(.art-missing) .intro-fallback{display:none}
.intro-body{padding:18px 16px 0;max-width:560px;width:100%;margin:0 auto;box-sizing:border-box}
.intro-body h1{font-size:1.75rem;margin:6px 0 12px}
.intro-pip{margin-bottom:14px}
.intro-block{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;text-align:left;animation:intro-rise .45s ease-out both}
.intro-block+.intro-block{animation-delay:.1s}
.intro-block+.intro-block+.intro-block{animation-delay:.2s}
/* PSY-1761 the fourth block of a questionnaire unit intro: where the answers live and how often
   the measure is worth answering again. Quieter than the three that come before it. */
.intro-block.intro-privacy{background:var(--cream);border-style:dashed;animation-delay:.3s}
.intro-block.intro-privacy p{font-size:0.875rem;line-height:1.5;color:var(--muted)}
.intro-block .intro-icon{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--section);color:#fff;flex:none;line-height:0}
.track-honey .intro-block .intro-icon{color:var(--ink)}
.intro-block h2,.intro-block h3{font-size:0.75rem;color:var(--muted);margin:2px 0 4px;font-family:inherit}
.intro-block p{margin:0;font-size:1rem;line-height:1.45}
.intro-ideas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 14px}
.intro-ideas .label{width:100%;color:var(--muted)}
.idea-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:7px 12px;font-size:0.8125rem;font-weight:700;color:var(--brown);cursor:pointer;line-height:1;font-family:inherit}
.idea-chip:hover,.idea-chip:focus-visible{border-color:var(--section);background:var(--cream)}
.idea-chip.item-idea{margin:-4px 0 12px;max-width:100%}
/* PSY-1808 an idea the learner has not met yet: the chip pulses twice and then sits still. */
.idea-chip.pulse{border-color:var(--section);animation:idea-pulse .5s ease-out 1}
@keyframes idea-pulse{0%{box-shadow:0 0 0 0 rgba(147,79,0,.30)}70%{box-shadow:0 0 0 9px rgba(147,79,0,0)}100%{box-shadow:0 0 0 0 rgba(147,79,0,0)}}
.intro-actions{display:grid;gap:10px;margin-top:6px}
.intro-page .key-hints{margin-top:14px}
.lesson-line{color:var(--ink);font-size:0.9375rem;line-height:1.45;margin:8px 0 4px}
.idea-card{text-align:center}
.idea-gloss{font-size:1.0625rem;font-weight:700;color:var(--brown);margin:10px 0 2px}
.idea-card .intro-block{margin-top:10px}
@keyframes intro-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:700px){.intro-hero{margin:0 auto;width:min(100%,560px)}}
/* PSY-1831 the What's next card: the unit (or concept) card over a drawn fallback, Pip on the
   corner, the reason as a chip, the title, one line on what it teaches and the time it takes */
.stage-next{padding-top:22px}
.next-card{width:min(100%,520px);margin:0 auto;border:1px solid var(--line);border-radius:22px;background:var(--paper);overflow:hidden;text-align:left;animation:intro-rise .45s ease-out both}
.next-hero{position:relative;aspect-ratio:2/1;background:var(--section);display:grid;place-items:center;color:var(--on-section,#fff)}
.next-hero .next-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.next-hero .next-tint{position:absolute;inset:0;background:rgba(34,26,21,.12)}
.next-hero.no-art .next-tint,.next-hero.art-missing .next-tint{display:none}
.next-hero .next-fallback{position:relative;line-height:0;opacity:.9}
.next-hero.has-art:not(.art-missing) .next-fallback{display:none}
.next-pip{position:absolute;right:10px;bottom:-4px;line-height:0}
.next-body{padding:16px 18px 18px}
.next-why{display:inline-block;margin:0 0 8px;padding:5px 11px;border-radius:999px;background:var(--cream);color:var(--brown);font-size:0.8125rem;font-weight:700}
.next-body h1{font-size:1.625rem;margin:4px 0 8px;text-align:left}
.next-teaches{color:var(--ink);font-size:0.9375rem;line-height:1.45;margin:0 0 10px}
.next-meta{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.next-progress{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.next-progress .row{margin-bottom:6px;color:var(--muted);font-size:0.75rem}
.next-goal{display:flex;align-items:center;gap:6px;margin:12px 0 0;color:var(--green);font-size:0.8125rem;font-weight:700}
.next-league{display:flex;align-items:center;gap:6px;margin:10px 0 0;color:var(--brown);font-size:0.8125rem;font-weight:700}
.track-honey .next-hero{color:var(--ink)}
@media(min-width:700px){.next-body h1{font-size:1.875rem}}
/* PSY-1818 the path says what it is building toward: the lesson title sits under its node, so
   Meet the idea, Spot the pattern and Make it stick are read rather than hidden in an aria-label,
   and the unit blurb sits under the unit title, so the banner says what the unit teaches before
   anything is opened. The captions are wider than the old two-word ones, so the node rows carry a
   little more height to keep the words clear of the node below (the rows are PSY-2223 now). */
.unit-blurb{margin:7px 0 0;font-size:0.8125rem;line-height:1.35;font-weight:500;color:inherit;opacity:.94;max-width:32em}
.unit-head.honey .unit-blurb{opacity:1}
@media(min-width:700px){.unit-blurb{font-size:0.875rem}}
/* PSY-1819 the questionnaire teach card above the first statement of a part: the measure it
   belongs to, which part this is, how many statements it holds and the instruction they all
   answer. It is a card rather than a heading, so the ask below it stays the heading of the
   screen, and it keeps the lesson type scale (PSY-1810). */
.session-page .measure-card{display:flex;gap:10px;align-items:center;background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:0 0 10px}
.session-page .measure-card>div{min-width:0}
.session-page .measure-card strong{display:block;line-height:1.25}
.session-page .measure-card .measure-meta{display:block;margin:2px 0 4px;color:var(--brown);font-weight:700}
.session-page .measure-card p{margin:0;color:var(--muted);font-size:var(--lq-label);line-height:1.4}
.measure-badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--section);color:var(--on-section,#fff);flex-shrink:0;border:1px solid var(--shadow)}
.track-plum .measure-card{background:var(--track-plum-soft);border-color:#e3d0e8}
/* PSY-1732 Share your streak: the pill on the profile row, and the link box the fallback
   sheet shows when a device has neither the Web Share API nor a clipboard to write to. */
.social-row .share-btn{display:inline-flex;align-items:center;gap:6px}
/* PSY-2664 Invite a friend: the guest line under Follow on a public page opened from an invite, and the
   Invite button over Edit my page on the learner's own page */
.invite-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 4px;margin:10px 0 0;text-align:center}
.invite-line .link-button{padding:0}
.public-hero .btn+.btn{margin-top:10px}
.invite-why{margin:0 0 14px}
.share-link{font-size:0.9375rem;text-align:center;margin:16px 0 4px;background:var(--paper);color:var(--ink);font-weight:700}

/* PSY-1742 the type article. The profile's result list gets a second row under each result,
   the link into the article; the article itself reuses the result page's frame and adds the
   level cards (the source's own wording for each level or dimension, with the learner's own
   level lifted onto a honey tint) and the numbered steps the measure publishes. */
.result-row{margin-bottom:20px}
.article-link{align-items:center;gap:9px;margin:-6px 0 0;padding:11px 16px;border:1px solid var(--line);border-top:0;border-radius:0 0 15px 15px;background:var(--paper);font-size:0.8125rem;font-weight:700;color:var(--brown)}
.article-link svg{flex:none;vertical-align:middle;margin-right:2px}
.type-article h2{margin-top:32px}
.type-article .center{margin-bottom:22px}
.article-dimension{border:1px solid var(--line);border-radius:17px;padding:16px 17px}
.article-dimension>.row{margin-bottom:2px}
.article-dimension .level{margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
.article-dimension .level .label{display:block;color:var(--muted);font-size:0.625rem;margin-bottom:6px}
.article-dimension .level p{margin:5px 0 0}
.article-dimension .level.yours{background:var(--track-honey-soft);border:1.5px solid #E7C98B;border-radius:13px;padding:13px}
.article-dimension .level.yours .label{color:var(--brown)}
.article-steps{display:grid;gap:13px}
.step-card{display:flex;align-items:flex-start;gap:14px;margin:0}
.step-number{flex:none;width:31px;height:31px;border-radius:50%;background:var(--honey);color:#4A2A00;display:grid;place-items:center;font-size:0.875rem;font-weight:700}
.step-card strong{font-size:0.9375rem;display:block}
.step-card p{font-size:0.875rem;color:var(--muted);margin:6px 0 0}
/* PSY-1782 voice and audio. The speaker button is one 34px pill: a line speaker, and four
   bars that move only while the voice is running, so "playing" is visible without a word of
   copy. It is placed in the corner of the block it reads rather than stacked under it, so
   reading a scenario or a card out loud costs the lesson screen no height. */
.voiced{position:relative}
.voiced .scene,.voiced .claim-scene{padding-right:44px}
.speak-btn{position:absolute;top:0;right:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;width:34px;height:34px;padding:0;border-radius:999px;border:1px solid var(--line);background:var(--cream);color:var(--brown);line-height:0;z-index:2}
.speak-btn .icon{width:17px;height:17px}
.speak-btn .wave{display:none;align-items:flex-end;gap:2px;height:15px}
.speak-btn .wave i{display:block;width:3px;height:5px;border-radius:2px;background:currentColor;animation:voice-wave .5s ease-in-out 1}
.speak-btn .wave i:nth-child(2){animation-delay:.16s}
.speak-btn .wave i:nth-child(3){animation-delay:.32s}
.speak-btn .wave i:nth-child(4){animation-delay:.48s}
.speak-btn.playing{background:var(--honey);border-color:var(--brown);color:#4A2A00}
.speak-btn.playing .icon{display:none}
.speak-btn.playing .wave{display:inline-flex}
@keyframes voice-wave{0%,100%{height:4px}50%{height:15px}}
.teach-card,.idea-card{position:relative}
.teach-card .speak-btn,.idea-card .speak-btn{top:14px;right:14px}
.teach-card .question{padding-left:30px;padding-right:30px}
.why-row{position:relative}
.why-row .speak-btn{top:-4px;background:color-mix(in srgb,var(--cream) 70%,transparent)}
.why-row p{padding-right:42px}
.explain-body{position:relative}
.explain-body .speak-btn{top:10px;right:10px;background:color-mix(in srgb,var(--cream) 70%,transparent)}
.explain-body .label{padding-right:42px}
.explain-text{padding-right:42px}
.idea-card{position:relative}
/* the turtle: the same clue, slower, in the corner of the listening hero so the play button
   keeps the middle of the screen and the answer cards keep their room. */
.turtle-btn{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--cream) 82%,transparent);color:var(--ink);line-height:0}
.turtle-btn:active{transform:translateY(1px)}
/* the listening hero's own waveform: five bars beside the clue, drawn only while the clue
   runs and placed in the hero's corner, so it costs the answer cards below no room. */
.hero-wave{position:absolute;right:14px;bottom:12px;display:none;align-items:flex-end;gap:3px;height:15px;z-index:2;color:var(--on-section)}
.media-hero.live .hero-wave{display:flex}
.hero-wave i{display:block;width:4px;height:5px;border-radius:2px;background:currentColor;animation:voice-wave .5s ease-in-out 1}
.hero-wave i:nth-child(2){animation-delay:.14s}
.hero-wave i:nth-child(3){animation-delay:.28s}
.hero-wave i:nth-child(4){animation-delay:.42s}
.hero-wave i:nth-child(5){animation-delay:.5s}
/* PSY-1782 what the microphone heard, measured: Pip's face, a bar that fills to the score and
   the number beside it. A reading, not a verdict, so it is drawn in the honey of the chrome and
   never in the cedar or the terracotta a check uses. */
.match-read{display:flex;align-items:center;gap:10px;margin-top:8px}
.match-face{flex:none;line-height:0}
.match-meter{flex:1;min-width:0}
.match-bar{height:9px;border-radius:999px;background:rgba(255,255,255,.4);overflow:hidden}
.match-bar i{display:block;height:100%;border-radius:999px;background:var(--honey);transition:width .5s cubic-bezier(.2,.8,.3,1)}
.match-score{display:block;margin-top:4px;font-size:0.75rem;font-weight:700;opacity:.9}
/* PSY-1783 the stats bar: six live chips where three grey numbers used to sit. Nothing here
   sizes anything inside the lesson screen (the meter chip is the one piece the lesson header
   shares, and it takes its size from the PSY-1810 block below), and every animation is stopped
   by the reduced-motion rule at the top of this file and named again in the block at the end. */
.stats .stat{position:relative;gap:5px}
.stat.fire svg{color:#8E867B;transition:color .35s ease}
.stats .stat.fire.on{color:var(--brand)}
.stat.fire.on svg{color:var(--brand)}
/* PSY-2228 the chip draws the day chain (three dots on a rule) at 48 px; nothing flickers */
.stat.fire .chain-art{display:block;width:48px;height:auto}
/* the daily goal: today's XP inside a ring that fills toward the goal set in onboarding, and a
   single ripple the first time the goal is reached. */
.stat.goal{display:grid;place-items:center;width:34px;height:34px;padding:0;color:var(--brown)}
.stat.goal .ring{position:absolute;inset:0}
.stat.goal .ring-track{stroke:#EFE9DC}
.stat.goal .ring-fill{stroke:var(--honey);transition:stroke-dashoffset .5s ease-out}
.stat.goal .goal-xp{position:relative;font-size:0.75rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stat.goal.done .ring-fill{stroke:#D9762B}
.stat.goal.done .goal-xp{color:var(--brand)}
.stat.goal.burst:after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid #D9762B;animation:goal-burst .5s ease-out both}
@keyframes goal-burst{from{transform:scale(.55);opacity:.9}to{transform:scale(1.8);opacity:0}}
.stat.gems.bump .gem-count{animation:gem-bump .5s ease-out}
@keyframes gem-bump{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-4px) scale(1.25)}100%{transform:translateY(0) scale(1)}}
.gem-count{font-variant-numeric:tabular-nums}
/* the meter: a count on a phone, one icon a heart on a wide screen, and the wait for the next
   one ticking beside it while the meter is below full. */
.meter-count{display:inline-flex;align-items:center;gap:5px}
.meter-pips{display:none;align-items:center;gap:3px}
.meter-pips i{display:inline-flex;line-height:0}
.meter-pips i.off{color:#DCD5C7}
.stats .meter-next{font-style:normal;font-size:0.6875rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.sheet .meter-pips{display:inline-flex;justify-content:center;gap:5px;margin-bottom:10px;color:#e76067}
.sheet .meter-pips i.off{color:#DCD5C7}
/* the standing card on the Groups tab (the right column is the Today panel since PSY-2223) */
.quests-card,.league-card{position:relative}
.league-shield{display:inline-flex;flex:none}
/* PSY-1784 leagues and the profile, made visual: the shield strip, the animal avatars, the
   promotion screen and the illustrated medals. Motion here is small and every piece of it is
   named in the reduced-motion block at the end of this file. */
.league-strip{display:flex;gap:10px;justify-content:center;align-items:flex-end;margin-bottom:18px}
.strip-shield{display:inline-flex;flex:none;transform:translateY(4px)}
.strip-shield.passed{opacity:.45}
.strip-shield.raised{transform:translateY(-6px);animation:shield-raise .5s ease-in-out 1}
@keyframes shield-raise{0%,100%{transform:translateY(-6px)}50%{transform:translateY(-11px)}}
.league-clock{display:inline-flex;align-items:center;gap:6px;color:var(--brown)}
.league-distance{margin:10px auto 0;max-width:34ch;font-weight:700;color:var(--ink)}
/* PSY-2160 last week's results still owed: a pill under the clock and on the standing card */
.league-pending{display:inline-flex;align-items:center;gap:6px;margin:12px auto 0;padding:7px 14px;border-radius:999px;background:var(--tint);color:var(--ink-soft);font-size:0.8125rem;font-weight:700}
.league-card.standing .league-pending{margin:8px 0 0}
.league-hero h1{margin:10px 0 4px}
.rank-row .avatar,.reward-toast.pass .avatar,.rank-row .avatar-art{background:#FFF6E2;padding:0;overflow:hidden}
.avatar .avatar-art{width:100%;height:100%;display:block;border-radius:50%}
.avatar-art{color:var(--ink)}
.rank-row.bump{animation:rank-bump .5s ease-out}
@keyframes rank-bump{0%{transform:scale(1)}35%{transform:scale(1.04);background:#FFE6AC}100%{transform:scale(1)}}
.zone.live{animation:zone-live .5s ease-in-out 1}
@keyframes zone-live{0%,100%{border-color:#b9d7b7;background:transparent}50%{border-color:#7cb579;background:#eef7ec}}
.zone.down.live{animation-name:zone-live-down}
@keyframes zone-live-down{0%,100%{border-color:#eebdb9;background:transparent}50%{border-color:#dc9c98;background:#fbeeed}}
/* the Monday screen: the league that is over hands its shield to the new one */
.league-result{text-align:center;padding:10px 0 50px}
.league-result h1{margin:10px 0 6px}
.league-result p{margin:0 auto 6px;max-width:34ch}
.shield-swap{display:flex;align-items:center;justify-content:center;gap:10px;min-height:104px}
.swap-from{display:inline-flex;opacity:.5;animation:shield-out .5s ease-out both}
.swap-arrow{display:inline-flex;color:var(--muted)}
.swap-to{display:inline-flex;animation:shield-in .3s .2s cubic-bezier(.2,1.4,.5,1) both}
@keyframes shield-out{from{opacity:1;transform:none}to{opacity:.5;transform:translateX(-6px) scale(.86)}}
@keyframes shield-in{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
.league-result .pip{margin:0}
.league-keep{font-weight:700;color:var(--brown)}
.league-result .btn{max-width:320px;margin-left:auto;margin-right:auto}
/* PSY-2797 Share under Start the week, and the Share link on the board's Last week line */
.league-result .btn+.btn{margin-top:10px}
.league-share{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;vertical-align:middle}
/* the profile: the avatar and the picker behind it */
.avatar-button{position:relative;border:0;background:none;padding:0;cursor:pointer;border-radius:50%;line-height:0}
.avatar-face{display:inline-flex;width:94px;height:94px;border-radius:50%;background:#FFF1D5;border:3px solid var(--honey);overflow:hidden}
.avatar-button:focus-visible{outline:3px solid var(--brown);outline-offset:3px}
.avatar-edit{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--honey);color:var(--cocoa);display:grid;place-items:center;border:2px solid var(--cream)}
.hero-right{display:flex;align-items:flex-start;gap:6px}
.hero-pip{display:inline-flex;line-height:0}
.avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 6px}
.avatar-choice{display:grid;justify-items:center;gap:4px;padding:10px 4px;border:1px solid var(--line);border-radius:16px;background:var(--cream);cursor:pointer;font:inherit;color:inherit}
.avatar-choice small{font-size:0.75rem;font-weight:700}
.avatar-choice.selected{border-color:var(--honey);background:#FFF6E2}
.avatar-choice:focus-visible{outline:3px solid var(--brown);outline-offset:2px}
@media(min-width:700px){.avatar-grid{grid-template-columns:repeat(4,1fr)}}
/* the streak calendar: this month, one cell a day */
.streak-calendar{border:1px solid var(--line);border-radius:18px;padding:12px;margin:14px 0 26px}
.streak-calendar h3{margin:0}
.cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-head{margin:10px 0 4px;text-align:center;font-size:0.6875rem;font-weight:700;color:var(--muted)}
.cal-day{aspect-ratio:1;border-radius:11px;background:var(--tint);display:grid;place-items:center;position:relative;font-size:0.6875rem;font-weight:700;color:var(--muted);line-height:1}
.cal-day i{font-style:normal;transform:translateY(-4px)}
.cal-day svg{position:absolute;bottom:2px;opacity:.8}
.cal-day.empty{background:none}
/* a day still ahead is paler paper, not paler ink: the number keeps its contrast (axe) */
.cal-day.ahead{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.cal-day.lit{background:#FFE6AC;color:#8E3620}
.cal-day.frozen{background:var(--track-slate-soft);color:var(--slate)}
.cal-day.goal{box-shadow:inset 0 0 0 2px var(--honey)}
.cal-day.today{box-shadow:inset 0 0 0 2px var(--brown)}
/* PSY-2650 the month arrows either side of the name; the sheet's px spacing, no motion beyond the shared icon-button press */
.streak-calendar>.row{flex-wrap:wrap;row-gap:4px}.cal-nav{display:flex;align-items:center;gap:2px;min-width:0}.cal-nav h3{min-width:104px;text-align:center}.cal-arrow{padding:6px;border-radius:50%;color:var(--ink)}.cal-arrow:hover:not(:disabled){background:var(--tint)}.cal-arrow:disabled{color:var(--muted);opacity:.4}
/* the achievement medals: grey while the first tier is ahead, the tier's metal once it is in */
.badge.medal{position:relative;padding-top:18px}
.medal-art{position:relative;display:inline-grid;place-items:center;width:62px;height:62px}
.medal-ring{position:absolute;inset:0;display:inline-flex}
.badge.medal .badge-art{position:relative;z-index:1}
.badge.locked{background:var(--tint)}
.badge.locked strong{color:var(--muted)}
.medal-next{color:var(--brown);font-weight:700}
.badge.locked .medal-next{color:var(--muted)}
/* PSY-1785 the first sixty seconds. Three parts: the splash screen's fan of track paintings
   with one pulse on Start, the taste step (the anchoring mini experiment run before any
   question about the learner) and the illustrated question screen with its row of step dots.
   Every animation here is named in the reduced-motion block above, which keeps the last word. */
.splash-fan{position:relative;display:flex;justify-content:center;align-items:flex-end;width:100%;height:104px;margin:0 0 4px;pointer-events:none}
.fan-card{position:absolute;bottom:14px;width:66px;height:84px;border-radius:16px;overflow:hidden;background:var(--section);border:1px solid var(--line);display:grid;place-items:center;color:#fff;transform-origin:50% 120%;transform:translateX(calc(var(--i) * 46px)) rotate(calc(var(--i) * 6deg));animation:fan-in .5s cubic-bezier(.3,1.2,.5,1) both;animation-delay:calc(var(--k) * .07s)}
.fan-card .fan-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fan-card .fan-fallback{position:relative;line-height:0;opacity:.92}
.fan-card.has-art:not(.art-missing) .fan-fallback{display:none}
@keyframes fan-in{from{transform:translateX(0) rotate(0) translateY(14px);opacity:0}}
.btn.pulse-once{animation:btn-pulse .3s ease-out .2s 1 both}
@keyframes btn-pulse{0%{box-shadow:0 0 0 0 rgba(238,187,88,0)}40%{transform:scale(1.03);box-shadow:0 0 0 12px rgba(238,187,88,.28)}100%{transform:none;box-shadow:0 0 0 0 rgba(238,187,88,0)}}
/* the step dots: the bar keeps its role and its label, and loses its rail */
.progress.step-dots{display:flex;align-items:center;gap:7px;height:16px;background:none;overflow:visible}
.step-dots i{display:block;width:9px;height:9px;border-radius:999px;background:var(--line);flex:none;transition:background-color .3s,transform .3s}
.step-dots i.done{background:var(--section)}
.step-dots i.now{width:13px;height:13px;background:var(--section);box-shadow:0 0 0 4px var(--soft,var(--track-honey-soft));animation:dot-glow .5s ease-in-out 1}
@keyframes dot-glow{0%,100%{box-shadow:0 0 0 3px var(--soft,var(--track-honey-soft))}50%{box-shadow:0 0 0 7px var(--soft,var(--track-honey-soft))}}
/* the question screen: the picture above the question on a phone, beside it on a desktop */
.onboard-grid{display:grid;gap:14px}
.onboard-art{position:relative;order:-1;height:132px;border-radius:20px;overflow:hidden;background:var(--section);display:grid;place-items:center;color:var(--on-section,#fff);border:1px solid var(--shadow)}
.onboard-art .onboard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.onboard-art .onboard-tint{position:absolute;inset:0;background:rgba(34,26,21,.12)}
.onboard-art.no-art .onboard-tint,.onboard-art.art-missing .onboard-tint{display:none}
.onboard-art .onboard-fallback{position:relative;line-height:0;opacity:.92}
.onboard-art.has-art:not(.art-missing) .onboard-fallback{display:none}
.btn.track{background:transparent;border-color:var(--shadow);color:var(--accent-text,var(--ink))}
/* the taste step */
.onboard-taste .taste-body{max-width:600px;margin:0 auto}
.onboard-taste .question{font-size:1.1875rem;line-height:1.35;text-align:center;margin:0 0 12px}
.onboard-taste .exp-wheel{margin:0 auto 12px}
.onboard-taste .key-hints{margin-bottom:10px}
.onboard-taste .btn.secondary{margin-top:10px}
@media(min-width:700px){.onboard-grid{grid-template-columns:minmax(0,1fr) 230px;gap:24px;align-items:start}.onboard-art{order:0;height:240px;position:sticky;top:24px}.onboard-grid .choices{max-width:none;margin:0}.splash-fan{height:126px}.fan-card{width:84px;height:106px;transform:translateX(calc(var(--i) * 64px)) rotate(calc(var(--i) * 7deg))}.onboard-taste .question{font-size:1.375rem}}
/* PSY-1786 the guidebook as story cards. A scroll snapping row of cards, one a concept: the
   course art over a drawn tile, the name, the gloss, three key ideas, the example, the watch
   line, a speaker in the corner and a four question practice. The row is the swipe on a phone;
   the arrows, the dots and the keys 1 to 9 move it everywhere else. No animation is started
   here beyond the press and the slide between cards, both of which the reduced-motion block
   above already stops, and smooth scrolling is turned off with it. */
.guide-deck-wrap{margin:18px 0 8px}
.guide-deck{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.guide-deck::-webkit-scrollbar{display:none}
.guide-card{flex:0 0 100%;scroll-snap-align:center;border:1px solid var(--line);border-radius:20px;background:var(--paper);overflow:hidden;transition:border-color .18s ease}
.guide-card.current{border-color:var(--honey-deep)}
.guide-strip{position:relative;height:118px;display:grid;place-items:center;overflow:hidden;background:var(--honey)}
.guide-strip .guide-strip-tile{color:var(--cocoa);opacity:.9;line-height:0}
.guide-strip .guide-strip-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.guide-strip .guide-strip-tint{position:absolute;inset:0;background:rgba(34,26,21,.1)}
.guide-strip.no-art .guide-strip-tint{display:none}
.guide-card-body{position:relative;padding:16px 16px 18px}
.guide-card-body>.speak-btn{top:14px;right:14px;width:40px;height:40px}
.guide-count{display:block;color:var(--muted)}
.guide-name{font-size:1.3125rem;margin:7px 44px 4px 0}
.guide-gloss{font-size:0.9375rem;color:var(--muted);margin:0 0 15px;line-height:1.5}
.guide-keys{list-style:none;display:grid;gap:13px;margin:0 0 14px;padding:0}
.guide-key,.guide-beat{display:flex;gap:11px;align-items:flex-start}
.guide-beat-icon{flex-shrink:0;line-height:0;margin-top:2px;color:var(--brown)}
.guide-key p,.guide-beat p{margin:3px 0 0;font-size:0.875rem;line-height:1.55}
.guide-key .label,.guide-beat .label{color:var(--brand)}
.guide-beat{border-radius:14px;padding:12px 13px;margin-bottom:10px}
.guide-example{background:var(--track-honey-soft)}
.guide-watch{background:var(--tint)}
.guide-none{font-size:0.8125rem;color:var(--muted);background:var(--tint);border-radius:14px;padding:12px 13px;margin:0 0 10px;line-height:1.5}
.guide-card-actions .btn{margin-top:4px}
.guide-source{font-size:0.6875rem;line-height:1.5;color:var(--muted);margin:14px 0 0;padding-top:11px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.guide-source .label{display:block;margin-bottom:4px}
.guide-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px}
.guide-arrow{border:1px solid var(--line);border-radius:999px;width:40px;height:40px;color:var(--brown);background:var(--cream)}
.guide-dots{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.guide-dot{width:11px;height:11px;min-height:0;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--cream)}
.guide-dot.on{background:var(--honey);border-color:var(--brown);transform:scale(1.25)}
.guide-at{text-align:center;font-size:0.75rem;color:var(--muted);margin:8px 0 0}
.guide-hints{justify-content:center;margin:10px 0 0}
.guidebook .guide-chapters{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
@media(min-width:620px){.guide-card{flex-basis:calc(100% - 46px)}.guide-strip{height:150px}}
/* PSY-1788 the quest cards and the shop shelf.

   A quest card is a token (the quest's line icon in a coloured disc), the bar in the track
   colour, and the celebration's own chest at 44px: dim and shut while the goal is out of
   reach, shaking while it waits, swung open once the gems have landed, with a tick and a
   small party on the card that was just opened. The shop is a shelf of drawn objects with a
   price chip, a state chip for anything already held, and a lift under the pointer. Every
   animation here is one of the chest keyframes the celebration already defines. */
.quest{padding:16px 0;border-bottom:1px solid var(--line);position:relative}
.quest .progress>span{background:var(--shadow)}
.quest-icon{flex:none;line-height:0;color:inherit}
.quest-token .icon{width:24px;height:24px}
.quest.locked .quest-token{opacity:.72}
.quest-tick{color:var(--green);margin-left:auto;line-height:0}
.quest-chest{flex:none;line-height:0;position:relative;padding:2px;border:0;background:none;border-radius:12px;color:inherit;transition:transform .15s}
.quest-chest.locked{opacity:.4;filter:grayscale(.65)}
.quest-chest.ready .chest-art{animation:chest-wobble .5s ease-in-out 1;transform-origin:50% 92%}
.quest-chest.ready:active{transform:translateY(2px)}
.quest-chest.opened .chest-lid{transform:rotate(180deg)}
.quest.opened .chest-art{animation:chest-pop .5s cubic-bezier(.3,1.4,.5,1) both}
.chest-tick{position:absolute;right:-3px;bottom:0;width:20px;height:20px;border-radius:50%;background:var(--green);color:var(--bg);display:grid;place-items:center;line-height:0}
/* the puff over the chest that was just opened: six pieces out and gone, once, rather than the
   endless fall the celebration's own party uses. The colours come from the shared rules above. */
.quest .mini-party{position:absolute;inset:auto 36px 54px auto;width:1px;height:1px;pointer-events:none}
.quest .mini-party i{top:0;left:0;animation:quest-puff .5s cubic-bezier(.2,.8,.4,1) both}
.quest .mini-party i:nth-child(1){--px:-27px;--py:-20px}
.quest .mini-party i:nth-child(2){--px:0;--py:-34px}
.quest .mini-party i:nth-child(3){--px:27px;--py:-20px}
.quest .mini-party i:nth-child(4){--px:-19px;--py:2px}
.quest .mini-party i:nth-child(5){--px:19px;--py:2px}
.quest .mini-party i:nth-child(6){--px:0;--py:-46px}
@keyframes quest-puff{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--px,0),var(--py,-30px)) scale(1)}}
.quest-waiting{display:flex;align-items:center;gap:9px;margin:0 0 8px;padding:11px 14px;border:1.5px solid #f1d79a;border-radius:13px;background:var(--track-honey-soft);color:var(--brown);font-size:0.875rem;line-height:1.4}
.quest-waiting strong{color:var(--ink)}
.quest-waiting .icon{flex:none;color:var(--blue)}
.quest-empty{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 2px 4px}
.quest-empty .pip{flex:none}
.quest-empty strong{display:block;font-size:0.9375rem;margin-bottom:4px}
.quest-empty p{margin:0;font-size:0.875rem;color:var(--muted)}
.quest-list .key-hints{margin:16px 0 0;justify-content:flex-start}
.month-card .month-art{flex:none;line-height:0}
.month-count{align-items:baseline;gap:12px;margin-top:7px}
.month-days{white-space:nowrap;color:var(--track-plum-dark);font-weight:500}
/* PSY-2760 the plate within reach, under the day counter */
.month-reach{margin:10px 0 2px;font-size:.875rem;line-height:1.45;color:var(--track-plum-dark);font-weight:500}
.friend-pair .avatar{width:40px;height:40px;background:var(--tint)}
.friend-pair .avatar.mine{margin-left:0}
.gem-bank{color:var(--blue);margin:25px 0}
.bank-art{flex:none;line-height:0}
.shop-row{display:flex;gap:16px;padding:20px 12px;margin:0 -12px;border-bottom:1px solid var(--line);border-radius:16px;transition:background .16s}
.shop-shelf .shop-row:last-child{border-bottom:0}
.shop-art{flex:none;width:60px;line-height:0;margin-top:2px;transition:transform .18s ease}
.shop-copy{flex:1;min-width:0}
.shop-head{gap:10px;margin-bottom:6px}
.shop-head h3,.shop-head h2{margin:0}
.shop-name{font-size:1.1875rem;font-weight:400}
.shop-buy{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.shop-buy .btn{margin:0}
.shop-note{color:var(--muted)}
.price-chip{display:inline-flex;align-items:center;gap:6px}
.shop-state{display:inline-flex;align-items:center;gap:5px;flex:none;padding:4px 10px;border-radius:999px;background:var(--track-cedar-soft);border:1.5px solid #b3d2ad;color:var(--cedar);font-size:0.6875rem;font-weight:700;white-space:nowrap}
.shop-row.running .shop-state{background:var(--track-honey-soft);border-color:#f1d79a;color:var(--brown)}
.shop-row.full .shop-state{background:var(--tint);border-color:var(--line);color:var(--muted)}
@media(hover:hover){.shop-row:hover{background:var(--tint)}.shop-row:hover .shop-art{transform:translateY(-3px) rotate(-3deg)}.quest-chest.ready:hover{transform:translateY(-2px)}}
/* PSY-1733 the Diamond Tournament: the bracket panel above the weekly board, the three round
   rail, and the screen that says how a round ended. The rows borrow .rank-row from the league
   board on purpose, so a bracket reads as the same kind of thing as a cohort. Motion here is
   the rail's current round breathing, and it is named in the reduced-motion block above. */
.tourney{border:1px solid var(--line);border-radius:22px;background:var(--tint);padding:16px;margin:18px 0 22px}
.tourney-head{display:flex;align-items:center;gap:12px}
.tourney-cup{flex:none;line-height:0}
.tourney-copy{flex:1;min-width:0}
.tourney-copy h2{margin:2px 0 4px}
.tourney-copy p{margin:0;font-size:0.875rem}
.tourney-pip{flex:none;line-height:0}
.tourney-rail{display:flex;list-style:none;gap:6px;margin:14px 0 10px;padding:0}
.tourney-rail li{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 4px;border:1px solid var(--line);border-radius:999px;background:var(--cream);font-size:0.6875rem;font-weight:700;color:var(--muted)}
.tourney-rail li.passed{color:var(--brown);border-color:#e6d3ae}
.tourney-rail li.now{color:var(--cocoa);background:#FFE6AC;border-color:var(--honey);animation:tourney-now .5s ease-in-out 1}
@keyframes tourney-now{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.tourney-rail li svg{flex:none}
.tourney-board{margin-top:6px}
.tourney-row .rank{min-width:22px;text-align:center}
.tourney-row.out{opacity:.55}
.tourney-row.out .rank-name{text-decoration:line-through;text-decoration-color:#c9bfae}
.tourney-row .rank-tag{margin-left:6px}
.tourney .zone{margin:6px 0}
.tourney .small-note{margin-top:12px}
.tourney-result{text-align:center;border:1px solid var(--honey-deep);border-radius:22px;background:var(--tint);padding:18px 16px 14px;margin:18px 0}
.tourney-result h2{margin:6px 0 4px}
.tourney-result p{margin:0 auto 6px;max-width:34ch}
.tourney-result .btn{max-width:320px;margin:12px auto 0}
.tourney-result.down{border-color:var(--line);background:var(--paper)}
.badge.tourney-medal strong{color:var(--brown)}
/* PSY-1855 the grace banner: a quiet strip above the path and on the Plus screen while a failed
   renewal is being retried. Terracotta on paper rather than a red alarm, because nothing is lost
   yet, and the button sits in the strip so the fix is one tap from wherever the learner is. */
.grace-note{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;border:1px solid #e3c0b4;border-radius:17px;background:var(--track-ember-soft);padding:14px 16px;margin:14px 0}
.grace-icon{color:var(--terra);display:grid;place-items:center}
.grace-copy strong{display:block;font-size:0.9375rem;color:var(--terra)}
.grace-copy small{display:block;color:var(--muted);margin-top:3px}
.grace-note .grace-btn{grid-column:1/-1;width:100%;background:var(--terra);border-bottom-color:#7f2f1f;color:#fff}
.grace-keys{grid-column:1/-1;margin:0}
@media(min-width:760px){.grace-note{grid-template-columns:auto 1fr auto}.grace-note .grace-btn{grid-column:auto;width:auto}.grace-keys{grid-column:1/-1}}
.paywall .grace-note{margin:0 0 18px;text-align:left}
/* PSY-1858 installable Learn. The home screen card sits on the path under the stats, in the
   same warm paper as the fading-ideas card, with Pip on the left and two small buttons; it is
   drawn only while the browser holds an install prompt (install.js) and never inside the
   installed app. In standalone mode there is no browser chrome, so the status bar sits over
   our top edge and the home indicator over the bottom one; viewport-fit=cover already lets the
   page reach under both, and these rules keep the fixed pieces clear of them (the rail already
   pads its bottom with the same inset). */
.install-card{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:var(--track-honey-soft);border-color:#f1d79a;margin:0 0 14px;padding:16px 18px}
.install-pip{flex-shrink:0;display:inline-flex}
.install-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.install-copy strong{font-size:1rem;line-height:1.3}
.install-copy small{color:var(--muted)}
.install-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
@media(display-mode:standalone){body{padding-top:env(safe-area-inset-top)}#toast{top:calc(15px + env(safe-area-inset-top))}.sheet{padding-bottom:calc(23px + env(safe-area-inset-bottom))}.install-card{display:none}}
/* PSY-1859 the speed round: the record pill on the hub card, the clock bar that drains in the
   session top where the step bar usually sits (and refills a little on every right answer), and
   the clock and the solved tally on the combo line, in the lesson type scale. */
.speed-card .speed-best{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--track-honey-soft);color:var(--brown);font-weight:700;font-size:0.75rem}
.session-page .speed-bar{flex:1;display:flex;align-items:center;min-width:0}
.session-page .speed-bar .progress{width:100%;flex:1}
.session-page .speed-bar .progress span{transition:width .5s linear}
.session-page .speed-clock{font-weight:700;color:var(--brown);font-size:var(--lq-label);min-width:calc(var(--lq-step)*5);text-align:right}
.session-page .speed-clock.low{color:var(--red)}
.session-page .speed-tally{color:var(--muted);font-size:var(--lq-label);margin-left:var(--lq-step)}
/* PSY-2399 Ramp up: the record pill on the hub card (the speed round's pill is scoped to its own
   card, so a sibling needs its own rule), and the rest card between two checkpoints, which reuses
   the session page, the clock bar above it and the pinned bar below it. Flat, no animation: the
   screen arrives with the render. */
.pairs-card .pairs-best{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--track-honey-soft);color:var(--brown);font-weight:700;font-size:0.75rem}
.ramp-card .ramp-best{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--brown);font-weight:700;font-size:0.75rem}
.ramp-rest .rest-content{text-align:center}
.ramp-rest .rest-title{font-size:1.4375rem;margin:0}
.ramp-rest .rest-pip{margin:16px 0}
.ramp-rest .rest-line{margin:0 0 8px;font-size:1rem}
.ramp-rest .rest-paid{color:var(--cedar);font-weight:700}
.ramp-rest .rest-next{color:var(--muted);font-size:0.875rem;margin:0}
.ramp-rest .key-hints{justify-content:center}
/* PSY-2614 Study walk: the count pill on the hub card, and the card in front of each study, which
   takes the rest card's shape (one context line, one serif title, the sans for the rest). */
.studies-card .studies-best{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--brown);font-weight:700;font-size:0.75rem}
.study-card .rest-content{text-align:center}
.study-card .rest-title{font-size:1.4375rem;margin:0}
.study-card .rest-pip{margin:16px 0}
.study-card .rest-line{margin:0 0 8px;font-size:1rem}
.study-card .rest-next{color:var(--muted);font-size:0.875rem;margin:0}
.study-card .key-hints{justify-content:center}
/* PSY-2751 the second-tab screen: the session page in the track colour, centred, Pip thinking,
   two pill buttons. It arrives with the render; reduced motion turns the entrance to a fade. */
.handoff-page{display:flex;align-items:center;justify-content:center;text-align:center;min-height:60vh}
.handoff-inner{max-width:420px;animation:question-in .32s ease-out both}
.handoff-pip{margin:0 0 12px}
.handoff-title{font-size:1.4375rem;margin:0 0 8px}
.handoff-line{color:var(--muted);margin:0 0 20px}
.handoff-actions{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.handoff-keys{justify-content:center}
/* PSY-1893 listen and say it: the key pill on the hub card, and the card dimmed rather than
   hidden while fewer than four ideas have been met, so the hub reads the same on day one. */
.voice-card .voice-key{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--muted);font-weight:700;font-size:0.75rem}
.voice-card[disabled]{opacity:.62;cursor:not-allowed}
.voice-card[disabled] .voice-mark{color:var(--muted)!important}
/* PSY-2350 the chip on the hub card on a day the path's review is the listening kind: drawn after
   the mark so the card's markup before it is the same every other day, placed in the card's top
   corner so the row of copy and the mark keep their places. */
.voice-card{position:relative}
.voice-card .voice-today{position:absolute;top:12px;right:16px;color:var(--brand);font-size:0.6875rem}
/* PSY-1941 the box of a picture is known before the file arrives: every art image carries
   width and height from the manifest and its ratio as --art-ratio (app.js artImg), and this
   rule turns the ratio into aspect-ratio for the images that flow in the page; the ones pinned
   over a drawn fallback (inset: 0, width and height 100%) are sized by their host and keep it.
   The splash shell in index.html paints the brand, the headline and the line under it before
   a script has run, in the same place and size splash() draws them, so the first paint is the
   largest paint and the swap moves nothing. */
.art-img{aspect-ratio:var(--art-ratio,auto)}
.shell-pip{display:block;width:64px;height:64px;margin:auto;border-radius:50%;background:var(--honey);opacity:.28}
/* PSY-2119 the 18 or older screen: one box, big enough to be the thing on the screen, and the
   two ways on. The refusal screen reuses it. */
.age-gate .center{padding-top:30px}.age-gate h1{margin-top:18px}.age-gate .profile-form{gap:18px}.age-gate .adult-check{font-size:1.0625rem;font-weight:500;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--cream);cursor:pointer}.age-gate .adult-check:has(input:checked){border-color:#d7a038;background:var(--track-honey-soft);color:var(--brand)}.age-gate .adult-check input{flex-shrink:0}.age-gate .link-button{width:100%}.age-refused p{font-size:1.0625rem;line-height:1.6;max-width:460px;margin:0 auto}.age-refused p a{color:var(--blue);font-weight:500}
/* PSY-2223 the shell, the stats bar and the path in the site's own style. The tab bar is a row
   of line icons with sentence-case words under them on a phone and a list of rows in the rail on
   a desktop. The stats bar is one quiet line: the day chain, the points toward today's goal, the
   tries and the tokens, no flame and no row of hearts. The right column is one Today panel. A
   unit is a plate with an edge tab ("Unit 1") over a ruled sheet: numbered lesson rows, a filled
   dot once a row is done, an outlined dot ahead, the row up next marked in the margin and carrying
   the honey Start pill, the unit bonus and the mastery run as the last rows. Nothing here loops. */
.tab{border:0;border-radius:10px;gap:2px;padding:6px 3px;min-width:52px;font-size:0.6875rem;font-weight:500;color:var(--ink-soft);background:none}
.tab span{display:block}
.tab .icon,.tab svg{width:24px;height:24px}
.tab.active{color:var(--brand);background:none;font-weight:700}
@media(min-width:1024px){.tab{flex-direction:row;justify-content:flex-start;min-height:46px;padding:10px 14px;gap:14px;border-radius:12px;font-size:0.9375rem}.tab.active{color:var(--ink);background:var(--tint)}.tab:hover{background:var(--tint)}}
.stats{height:58px;gap:12px}
.stats .stat{font-size:0.9375rem;font-weight:500;color:var(--ink-soft);gap:5px}
.stats .stat.fire.on,.stats .stat.goal{color:var(--ink)}
.stats .stat.gems,.stats .stat.hearts,.stats .stat.energy{color:var(--ink-soft)}
.stats .stat.goal .ring-fill{stroke:var(--brand)}
.stats .meter-pips{display:none}
.unit-head{top:58px;padding-top:36px}
.right-column .card{margin-top:0}
.today-lines{display:grid;gap:12px;margin:6px 0 14px}
.today-line{display:flex;align-items:center;gap:12px;font-size:0.75rem;color:var(--ink-soft)}
.today-line b{display:block;font-size:0.9375rem;font-weight:700;color:var(--ink)}
.today-line small{display:block;font-size:0.75rem}
.today-line .ring,.today-icon{flex:none}
.today-icon{display:grid;place-items:center;width:30px;height:30px;color:var(--ink-soft)}
.today-line .ring-fill{stroke:var(--brand)}
.today-line .ring-track{stroke:var(--line)}
/* PSY-2365 the reset line under the goals, and the last-call tint on an open goal row: a flat tint, nothing moves */
.today-reset{margin:12px 0 0;font-size:0.75rem;color:var(--ink-soft)}
.right-column .today-reset{margin-top:10px}
.quest-list .today-reset{margin:14px 0 4px}
.today-reset.last-call{color:var(--brand);font-weight:700}
.quest.last-call{background:var(--tint);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:12px}
.quest.last-call .goal-mark{color:var(--brand)}
.league-card.standing{margin:14px 0 18px}
.league-card.standing .league-shield{width:40px;height:40px;line-height:0}
.league-card.standing p{margin:0}
.unit-head .unit-tab{position:absolute;top:0;left:0;z-index:2;padding:5px 14px 6px;border-radius:21px 0 12px 0;background:var(--shadow);color:var(--section);font-size:0.75rem;font-weight:700;line-height:1.2}
.track{margin-top:22px}
.path-keys+.track{margin-top:10px}
.unit-divider{display:flex;justify-content:flex-end;margin:0 0 -10px}
.unit-divider:empty{display:none}
.unit-divider:before,.unit-divider:after{content:none}
.path{margin:10px 0 0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.path:before{content:'';position:absolute;top:0;bottom:0;left:54px;border-left:1px solid var(--line);pointer-events:none}
.path-intro{position:relative;z-index:1;padding:9px 14px 9px 68px;justify-content:flex-start;font-size:0.75rem;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.path-node-wrap{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;min-height:64px;transform:none}
.path>*+.path-node-wrap{border-top:1px solid var(--line)}
.path-node-wrap.current{min-height:86px}
.node-num{grid-column:1;justify-self:center;font-family:var(--serif);font-size:1.125rem;line-height:1;color:var(--ink-soft);position:relative;z-index:1}
.path-node-wrap.current .node-num{color:var(--ink)}
.start-bubble{position:absolute;left:0;top:11px;width:54px;text-align:center;font-size:0.6875rem;font-weight:700;color:var(--brand);line-height:1.2;z-index:1}
.path-node-wrap .node{grid-column:2;display:grid;grid-template-columns:40px minmax(0,1fr) auto;place-items:center start;gap:12px;width:100%;min-height:64px;padding:10px 14px 10px 14px;text-align:left;border-radius:0;color:var(--ink)}
.path-node-wrap.current .node{padding:18px 14px}
.path-node-wrap .node:focus-visible{outline-offset:-3px}
@media(hover:hover){.path-node-wrap .node:not(.locked):hover{background:var(--tint)}}
.node-mark{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--shadow);background:var(--surface);color:var(--accent-text,var(--ink))}
.node.locked .node-mark{border:1px dashed var(--line);color:var(--muted);background:transparent}
.node.done .node-mark{background:var(--cocoa);color:var(--honey);border-color:var(--cocoa)}
.node.current .node-mark{background:var(--section);border-color:var(--shadow)}
.node.legendary:not(.locked):not(.done) .node-mark{background:var(--honey);border-color:var(--honey-deep);color:var(--cocoa)}
.node-mark .ring{inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px)}
.node.done .ring,.node.locked .ring,.node.chest .ring,.node .ring[data-progress="0"]{display:none}
.node-text{min-width:0;justify-self:stretch}
.node-caption{position:static;display:block;font-size:0.9375rem;font-weight:500;color:var(--ink);white-space:normal;line-height:1.3}
.lesson-caption{color:var(--ink)}
.node.locked .node-caption{color:var(--ink-soft)}
.node-sub{display:block;font-size:0.75rem;color:var(--ink-soft);margin-top:2px}
.node-go{display:inline-flex;align-items:center;justify-content:center;padding:7px 14px;border-radius:999px;background:var(--honey);color:var(--cocoa);font-size:0.8125rem;font-weight:700;white-space:nowrap}
.node-state{display:grid;place-items:center;color:var(--muted);line-height:0}
.node-mark .node-badge{right:-5px;bottom:-5px;width:18px;height:18px;box-shadow:0 0 0 2px var(--surface)}
.node-mark .node-badge .icon{width:10px;height:10px}
.path .streak-card,.path .streak-risk{width:auto;max-width:none;margin:12px 14px}
@media(min-width:700px){.node-caption{font-size:1rem}.path-node-wrap .node{padding-right:18px}}
/* PSY-2224 the Exchange, the paywall as a plain sheet, the mastery stamp and the unit bonus
   envelope. The stamp ink is an alias of --terra (the deepened site crisis line, the red-brown a rubber stamp prints in),
   read through currentColor so a pending stamp (.crown-mark.ready) can take the brand tone and
   a locked one the muted grey. The class names .crown-mark, .crown-icon, .chest-* and .shop-*
   are kept: the suites and the animations reach the elements through them. */
:root{--stamp-ink:var(--terra)}
.exchange-head{align-items:flex-end;gap:14px;margin:0 0 4px}
.exchange-head h1{margin:0}
.exchange-lead{margin:6px 0 0;color:var(--ink-soft);font-size:0.9375rem}
.exchange-balance{display:inline-flex;align-items:center;gap:6px;flex:none;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:0.875rem;white-space:nowrap}
.exchange-balance b{font-size:1rem}
.shop-shelf{margin:4px 0 24px}
.stamp-art{overflow:visible;color:var(--stamp-ink)}
.stamp-mark{line-height:0;color:var(--stamp-ink)}
.hero-stamp{display:block;margin:6px auto 2px}
.crown-mark .crown-icon{color:var(--muted)}
.crown-mark.ready .crown-icon{color:var(--brand)}
.crown-mark.earned .crown-icon{color:var(--stamp-ink)}
.paywall-top{min-height:36px}
.paywall-lede{display:flex;gap:14px;align-items:flex-start;margin:4px 0 18px}
.paywall-lede .pip{flex:none}
.paywall .plus-title{font-family:var(--serif);font-weight:300;font-size:1.875rem;letter-spacing:-0.02em;line-height:1.1;margin:0;color:var(--ink);text-transform:none}
.plus-what{margin:8px 0 0;font-size:1rem;line-height:1.5;color:var(--ink-soft)}
.features th{padding:0 4px 8px;font-size:0.75rem;font-weight:700;text-align:center;color:var(--brand);border-bottom:1px solid var(--line)}
.features th:first-child{text-align:left}
.features td:not(:first-child){text-align:center;line-height:0;width:84px}
.feature-check{display:inline-flex;color:var(--right)}
.bonus-art{display:inline-block;line-height:0}
.bonus-art.opened .chest-lid{transform:rotate(180deg)}
.bonus-art.opened .chest-gems{opacity:1}
/* PSY-2225 groups, Today, records, milestones and the month's plate. A group mark is a ring with
   the group's number and its stage word in the ink, the learner's own ring in honey; the two
   rules on the board (Moving up, Moving down) are the Profile Line's heavier threshold rule, 2px
   of ink with the words set small and no arrows; a record is a ruled row with its number; a
   month is a numbered plate. The .zone, .strip-shield, .shield-swap, .month-badge, .month-art,
   .quest-icon and .tourney-* names are kept: the suites and the animations reach the elements
   through them. */
.group-art{color:var(--ink);flex:none}
.group-art .group-ring{stroke:var(--ink);fill:none}
.group-art.own .group-ring{stroke:var(--honey)}
.group-art text{fill:var(--ink)}
.strip-shield.passed .group-art .group-ring{stroke:var(--line)}
.strip-shield.passed .group-art text{fill:var(--muted)}
.league-badge{color:var(--ink);margin-bottom:14px}
.league-strip{color:var(--ink)}
.swap-arrow{width:22px;height:2px;background:var(--ink);display:inline-block}
.zone{color:var(--ink);text-align:center;padding:9px 0 7px;margin:14px 0 6px;border-top:2px solid var(--ink);border-bottom:0;font-size:0.75rem;font-weight:700}
.zone.down{color:var(--ink);border-color:var(--ink)}
.records{margin:14px 0 26px;border-top:1px solid var(--line)}
.record-row{display:flex;align-items:center;gap:14px;padding:12px 2px;border-bottom:1px solid var(--line)}
.record-num{flex:none;min-width:52px;display:inline-flex;justify-content:center;font-family:var(--serif);font-size:1.625rem;line-height:1;color:var(--ink)}
.record-row.locked .record-num,.record-row.locked strong{color:var(--muted)}
.record-copy{flex:1;min-width:0}
.record-copy strong{display:block;font-size:0.9375rem}
.record-copy small{display:block;font-size:0.75rem;color:var(--muted);margin-top:2px}
.record-copy .record-next{color:var(--brown)}
.record-levels{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:0.6875rem;font-weight:700;color:var(--muted)}
.record-levels i{width:9px;height:9px;border:1.5px solid var(--ink);border-radius:50%;display:inline-block}
.record-levels i.on{background:var(--ink)}
.record-levels b{margin-left:4px}
/* PSY-2670 Share a record level: a quiet pill at the end of a reached record row and at the end
   of the achievement card on the lesson end. Icon and word on one line, the word hidden on a
   narrow phone where the row already carries a number, a name and three level dots (the button
   keeps its aria-label, so a screen reader hears the record and the level either way). */
.record-share{flex:none;display:inline-flex;align-items:center;gap:6px;color:var(--brown);font-size:0.75rem;padding:10px 8px}
.reward-toast .record-share{align-self:center}
@media(max-width:400px){.records .record-share{font-size:0}.records .record-share .icon{margin:0}}
.goal-mark{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.goal-mark b{font-family:var(--serif);font-size:1.125rem;line-height:1;min-width:14px;text-align:center}
.quest.opened .goal-mark{color:var(--muted)}
.plate-art{color:var(--ink);flex:none}
.plate-art .plate-rule{stroke:var(--line)}
.plate-art.full .plate-rule{stroke:var(--honey)}
.month-card{background:var(--surface);border-color:var(--line)}
.month-art,.month-badge.earned .month-art{color:var(--ink)}
.month-badge.earned{background:var(--tint);border-color:var(--line)}
.flair .icon{flex:none;color:var(--brand)}
.tourney-cup{color:var(--ink)}
.milestone-card.done .milestone-ring{color:var(--brand)}
.reward-icon.record-mark,.reward-icon.milestone-mark{display:inline-grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:50%;color:var(--ink);flex:none}
/* PSY-2124 the landing and the pricing page. index.html carries a static page for a visitor with no
   profile on this device: the hero is the splash's own first paint (brand, the mark's disc, the fan of
   track paintings, the headline, Start and I have an account) with the rest of the page under it, so
   the first paint is the largest paint whichever way the visit goes. plus.html is the same chrome
   around the paywall's table and the two prices. Both read on a phone first; the grid widens at the
   two breakpoints every other screen uses. Every colour is a token already in this file. */
/* PSY-2347 the rule is scoped to the main element: app.js puts the landing class on the body too, and the bare class selector gave the body a second 22px inset when the app booted, a 0.065 layout shift at about 4.3 s on the splash */
main.landing{max-width:1040px;margin:0 auto;padding:0 22px 30px}
.landing-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 0}
.landing-nav{display:flex;align-items:center;gap:20px}
.landing-nav a{font-weight:700;font-size:0.875rem;color:var(--ink)}
.landing-hero{min-height:calc(100svh - 80px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:34px 0 40px}
.landing-hero .splash-art{margin-top:0}
.landing-hero .splash-copy{display:flex;flex-direction:column;align-items:center;width:100%;max-width:560px}
.landing-hero h1{font-size:2.375rem}
.landing-hero .splash-copy>p{margin:0 0 6px;color:var(--ink-soft)}
.landing-actions{margin-top:10px}
/* PSY-2347 the shell keeps the Google button's row empty and invisible until the client id arrives, so the centred hero does not move when the button is drawn (no client id, the row stays empty) */
.google-slot{visibility:hidden}
/* PSY-2337 why a guest can start without an account: the sentence under Start on the splash and the landing (.splash p reaches every splash paragraph, so two classes), and the guest's line under the stats bar on the path */
.splash-actions .splash-why{margin:0;padding:0 6px;max-width:none;font-size:0.9375rem;line-height:1.45;color:var(--muted);text-wrap:balance}
/* PSY-2366 the agreement line under the button on each account door (app.js termsLine, index.html) */
.terms-line{margin:0;text-wrap:balance}.terms-line a{color:inherit;text-decoration:underline}.splash-copy .terms-line{margin:12px 0 0;padding:0 6px;max-width:365px}
/* <pip> */
/* Trial (Sacha): the calmer sign-in page (the global reduced-motion rule stills the shake). Pip stays, a SemiBold serif title, one honey main button (Learn's own yellow), the 18 or older box above it (olive when ticked, a gentle shake and soft red when Start is pressed without it), Google as the outlined second option, Log in as a quiet link and one line of small print */
.splash,.landing-hero,.landing-top{--signin-ink:var(--cocoa);color:var(--signin-ink)}
.splash .brand,.landing-top .brand,.landing-top .landing-nav a{color:var(--signin-ink)}
.splash h1,.landing-hero h1{font-weight:600;color:var(--signin-ink);letter-spacing:-0.025em;margin-bottom:8px}
.splash .splash-copy>p,.landing-hero .splash-copy>p{color:var(--ink-soft);font-weight:500;text-wrap:balance}
.splash-actions .btn[data-action="get-started"]{color:var(--signin-ink)}
.splash-actions .btn[data-action="get-started"]:hover{background:var(--honey-deep)}
.splash-actions .btn.google{color:var(--signin-ink);border:1px solid #d6cdbd}
.splash-actions .splash-why{color:var(--ink-soft);font-weight:500}
.splash-adult{justify-content:center;gap:10px;padding:10px 18px;border:1.5px solid #e6dccb;border-radius:999px;background:transparent;color:var(--signin-ink);font-weight:700;font-size:0.9375rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.splash-adult input{flex-shrink:0;width:20px;height:20px;margin:0;accent-color:#6b7c3f;cursor:pointer}
.splash-adult:has(input:checked){border-color:#6b7c3f;background:#eef0e3;color:#4d5a2b}
.splash-adult:has(input[aria-invalid="true"]){border-color:var(--terra);background:#f9e7e2;color:var(--terra)}
.splash-adult.shake{animation:card-shake .45s ease-in-out both}
.splash-actions #splash-adult-error{margin:-6px 0 0;text-align:center}
#splash-adult-error .under-18{padding:0;font:inherit;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;background:none;border:0;cursor:pointer}
.splash-login{margin:18px 0 0;font-size:1rem;font-weight:500;color:var(--ink-soft)}
.splash .splash-copy>p.splash-login,.landing-hero .splash-copy>p.splash-login{margin:18px 0 0;max-width:none}
.splash-login .link-button{padding:0;font:inherit;font-weight:700;color:var(--signin-ink);text-decoration:underline;text-underline-offset:3px;background:none;border:0;cursor:pointer}
.splash .terms-line,.landing-hero .terms-line{color:var(--ink-soft);font-weight:500;font-size:0.8125rem;line-height:1.6}
.splash .splash-copy>p.terms-line,.landing-hero .splash-copy>p.terms-line{margin:14px 0 0;max-width:300px}
.terms-line .under-18{padding:0;font:inherit;color:inherit;font-weight:400;text-decoration:underline;background:none;border:0;cursor:pointer}
@media(max-width:699px){.splash h1,.landing-hero h1{font-size:2rem}.landing-hero{gap:10px;padding-top:20px}}
body.reduce-motion .splash-adult.shake{animation:none}
/* Trial (Sacha): the Learn wordmark on the sign-in page, a small thin serif word between two hairlines, centered over the headline like a logo label, so a visitor sees which part of Psychology.com this is */
.splash .learn-word,.landing-hero .learn-word{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--serif);font-weight:300;font-size:1.0625rem;line-height:1;color:var(--cocoa);margin:0 0 10px}
.splash .learn-word::before,.splash .learn-word::after,.landing-hero .learn-word::before,.landing-hero .learn-word::after{content:"";width:28px;height:1px;background:var(--cocoa);opacity:.35}
/* Trial (Sacha): the fan on the sign-in page arcs, the outer cards lower; the cards keep their own thin line and corners */
.splash .splash-fan,.landing-hero .splash-fan{height:112px;margin:0 0 8px}
.splash .fan-card,.landing-hero .fan-card{width:70px;height:88px;bottom:22px;transform-origin:50% 100%;transform:translateX(calc(var(--i) * 41px)) translateY(calc(var(--i) * var(--i) * 3.2px)) rotate(calc(var(--i) * 8deg))}
@media(min-width:700px){.splash .splash-fan,.landing-hero .splash-fan{height:150px}.splash .fan-card,.landing-hero .fan-card{width:92px;height:116px;transform:translateX(calc(var(--i) * 62px)) translateY(calc(var(--i) * var(--i) * 4px)) rotate(calc(var(--i) * 8deg))}}
/* </pip> */
/* PSY-2360 the recovery screen: the splash shape with Pip sad, two lines and two stacked buttons */
.splash.recovery .splash-copy>p{margin:0 0 10px;color:var(--ink-soft)}
.splash.recovery .splash-actions{max-width:365px}
.guest-line{margin:14px 0 0;padding:0 2px;font-size:0.875rem;line-height:1.45;color:var(--muted);text-align:center;text-wrap:balance}
.guest-line a{color:var(--brand);font-weight:500;text-decoration:underline;text-underline-offset:2px}
/* PSY-2821 the reason line: on the path before the first lesson, and on the Ready screen */
.reason-line{margin:14px 0 0;padding:0 2px;font-size:0.875rem;line-height:1.45;color:var(--ink-soft);text-align:center;text-wrap:balance}
.ready-copy .reason-line{text-align:inherit;font-size:inherit;margin:0 0 16px;padding:0}
/* PSY-2349 the device zone line under the stats bar: one sentence and two answers, Esc keeps */
.zone-line{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.zone-line p{margin:0 0 8px;font-size:0.9375rem;line-height:1.45;color:var(--ink)}
.zone-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.zone-note{margin-top:-6px}
/* PSY-2358 the rest day notice under the stats bar and under the streak screen's week row: one flat row, the rest day mark, one sentence and two answers, Esc is Got it */
.freeze-used{display:flex;gap:12px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-align:left}
.freeze-used-mark{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--cream);color:var(--brown);line-height:0}
.freeze-used-copy{flex:1;min-width:0}
.freeze-used p{margin:0 0 8px;font-size:0.9375rem;line-height:1.45;color:var(--ink)}
.freeze-used-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.celebration .freeze-used{width:100%;max-width:430px;margin:12px auto 0}
/* PSY-2665 Pause instead, inside the cancel sheet: a tinted box between Keep Plus and Cancel Plus with three pills in a row. */
.pause-box{margin:14px 0 4px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:14px;background:var(--tint)}
.pause-box strong{display:block;font-size:1rem;margin-bottom:6px}
.pause-box .small-note{margin:0 0 10px}
.pause-choices{display:flex;gap:8px}
.pause-choices .btn{flex:1;min-height:44px;padding:9px 6px;margin-top:0;white-space:nowrap}
.plus-paused{margin-top:10px}
/* PSY-2649 the Plus ending card above the path and on the Practice hub: the install card's shape (Pip, two lines, two pills on one row), the honey surface, the Esc chip on Not now hidden on the phone like the S chip */
.plus-ending{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:var(--track-honey-soft);border-color:#f1d79a;margin:0 0 14px;padding:14px 16px}
.plus-ending .pip{flex:none;width:56px;height:56px}
.plus-ending-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.plus-ending-copy strong{font-size:1rem;line-height:1.3}
.plus-ending-copy small{color:var(--muted)}
.plus-ending-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.plus-ending-actions .key.inv{margin-left:6px}
@media(max-width:699px){.plus-ending .pip{width:44px;height:44px}.plus-ending-actions .key.inv{display:none}}
/* PSY-2532 the Pick up where you left off card: the same quiet notice shape as the rest day
   note, one row on the phone, Pip thinking at 32px beside the two lines */
.resume-card{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0 0;padding:12px 14px;text-align:left}
.resume-pip{flex:none;display:grid;place-items:center;width:36px;height:36px;line-height:0}
.resume-copy{flex:1;min-width:140px}
.resume-copy strong{display:block;font-size:0.9375rem;line-height:1.35}
.resume-copy small{display:block;margin-top:2px;font-size:0.8125rem;line-height:1.4;color:var(--muted)}
.resume-actions{display:flex;gap:14px;align-items:center;margin-left:auto}
/* PSY-2796 the trial ending card: the Plus ending card's shape, in the right column where the column shows (1024px and up) and above the path where it does not, so one copy is on screen at a time */
.trial-ending{margin:14px 0 0}
.right-column .trial-ending .pip{width:44px;height:44px}
@media(min-width:1024px){.main .trial-ending{display:none}}
/* PSY-2278 the notice the last inline script of index.html draws when app.js never finished booting */
.boot-note{margin:14px 0 0;padding:12px 16px;border-radius:14px;background:var(--paper);color:var(--ink);font-size:0.9375rem;line-height:1.5;max-width:420px}
.boot-note a{color:var(--ink);text-decoration:underline}
.landing-hero small{display:block;margin-top:16px;color:var(--muted)}
.shell-pip.dressed{background:none;opacity:1;width:auto;height:auto;border-radius:0}
.shell-pip.dressed .pip{width:64px;height:64px;display:block;margin:auto}
.landing-section{padding:48px 0 10px}
/* PSY-2344 the hero fills the landing's first screen; what sits below it is laid out as it comes near (the landing's first layout was a long task on a throttled phone, most of it these sections). The reserved height holds the scrollbar until a section is drawn once. The pricing page reads whole (innerText follows what is laid out). */
main.landing .landing-section,main.landing .landing-footer{content-visibility:auto;contain-intrinsic-size:auto 600px}
.landing-section h2{font-size:1.875rem;margin:0 0 12px}
.landing-lede{font-size:1.0625rem;line-height:1.55;color:var(--ink-soft);max-width:640px;margin:0}
.landing-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.landing-points li{padding:16px 18px;border-radius:16px;background:var(--surface);line-height:1.5;font-size:0.9375rem}
.landing-points b{display:block;font-family:var(--serif);font-weight:400;font-size:1.1875rem;margin-bottom:4px}
.track-grid{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.track-card{display:flex;gap:14px;align-items:center;padding:12px 14px 12px 12px;border-radius:18px;background:var(--surface)}
.track-card img{width:64px;height:81px;border-radius:12px;object-fit:cover;background:var(--section);flex:none}
/* PSY-2799 a track whose first unit has no fan crop yet draws its line icon on its colour instead */
.track-card .track-fallback{width:64px;height:81px;border-radius:12px;background:var(--section);flex:none;display:grid;place-items:center;color:#fff;line-height:0}
.track-card h3{margin:0;font-size:1.1875rem}
.track-card p{margin:3px 0 0;font-size:0.875rem;color:var(--ink-soft);line-height:1.4}
.track-card small{display:block;margin-top:5px;font-size:0.75rem;color:var(--muted)}
.preview-row{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));margin:22px 0}
.phone-shot{margin:0}
.phone-shot img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid var(--line);background:var(--surface)}
.phone-shot figcaption{font-size:0.8125rem;color:var(--muted);margin-top:8px;line-height:1.45}
.landing-section>p:last-child{line-height:1.6;max-width:640px}
.price-row{display:grid;gap:12px;margin:22px 0 10px;max-width:620px}
.price-row .price-box{margin:0}
.landing-cta{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 10px}
.faq{border-radius:16px;background:var(--surface);padding:0 18px;margin-top:10px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.375rem;line-height:1;color:var(--muted);transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 16px;line-height:1.55;font-size:0.9375rem}
.landing-footer{max-width:1040px;margin:0 auto;padding:10px 22px 60px;text-align:center;font-size:0.8125rem;color:var(--muted);line-height:1.6}
.landing-footer .path-footer{padding:6px 0}
.landing-footer .legal-links{justify-content:center;margin-top:14px}
.plus-page{max-width:720px;margin:0 auto;padding:0 22px 30px}
.plus-page .landing-top{padding-bottom:26px}
.plus-page h1{font-size:2.5rem;margin:16px 0 10px}
.plus-lede{font-size:1.125rem;color:var(--ink-soft);line-height:1.5;margin:0}
.plus-page .features{margin:26px 0}
.plan-grid{display:grid;gap:14px;margin:10px 0 20px}
.plan{border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.plan.annual{border-color:var(--honey-deep)}
.plan strong{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.1}
.plan p{margin:0;font-size:0.875rem;color:var(--ink-soft);line-height:1.5}
.plan .btn{margin-top:10px}
.plus-page h2{margin-top:36px;font-size:1.625rem}
.plus-page .plus-body p{line-height:1.6;margin:10px 0}
.plus-page .plus-body ul{margin:10px 0;padding-left:22px;line-height:1.6}
@media(min-width:700px){.landing-points{grid-template-columns:1fr 1fr}.track-grid{grid-template-columns:1fr 1fr}.price-row{grid-template-columns:1fr 1fr}.landing-hero h1{font-size:2.875rem}.landing-section{padding-top:64px}.landing-section h2{font-size:2.125rem}.plan-grid{grid-template-columns:1fr 1fr}.preview-row{max-width:620px}}
@media(min-width:1024px){.track-grid{grid-template-columns:repeat(3,1fr)}}
/* PSY-2363 the Track finished stage: the context line, Pip, the track's title (the one serif
   element on the screen), a row of full plates, one per unit, two count lines and the recommended
   next track as a plain row in that track's tint. The plates scale in once, 400 ms, staggered;
   the rest rises with the stage. Everything but the h1 is the sans. */
.stage-track{padding-top:22px}
.track-done{--lq-label:0.8125rem;--lq-step:8px;width:min(100%,520px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;animation:intro-rise .45s ease-out both}
.track-done .session-context{margin:0;font-family:var(--sans);font-size:var(--lq-label);color:var(--ink-soft)}
.track-done h1{margin:4px 0 0;font-size:2.125rem;line-height:1.1}
.track-done p,.track-done strong,.track-done .label,.track-done small{font-family:var(--sans)}
.track-units{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:6px 0 2px;color:var(--section)}
.track-unit{display:inline-flex;animation:plate-in .4s var(--m-ease-pop,ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}
.track-count{margin:0;font-size:1.0625rem;font-weight:500}
.track-days{margin:0;color:var(--ink-soft);font-size:0.9375rem}
.track-next{width:100%;display:flex;align-items:center;gap:14px;text-align:left;margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.track-next .track-next-mark{display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;color:var(--section);border:2px solid var(--section);flex:none}
.track-next .label{margin:0 0 2px}
.track-next strong{display:block;font-size:1.1875rem;font-weight:700}
.track-next p{margin:2px 0 0;font-size:0.9375rem;color:var(--ink-soft)}
.track-next-none{margin-top:12px;color:var(--ink-soft)}
/* PSY-2372 Share beside Continue on the stage: the link icon, the word and the key chip on one line */
.track-actions .btn.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px}
/* PSY-2812 Share under Continue on the unit bonus: the same two pill stack, the link icon beside the word */
.chest-actions{width:100%;max-width:340px;margin-inline:auto}
.chest-actions .btn+.btn{margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
@keyframes plate-in{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@media(max-width:699px){.track-done h1{font-size:1.75rem}.track-unit .plate-art{width:50px;height:39px}}
/* PSY-2336 one type family inside a lesson, a practice and a celebration (Seph, 14 Oct 2026, after
   walking Learn: "confusing compared to the real thing, all those fonts"): the sans for the ask,
   the question, the options, the feedback, the chips and the buttons. The serif display face keeps
   one element a screen at most, the celebration's title; nothing inside .session-page draws it. */
.session-page h1,.session-page h2,.session-page h3,.session-page .question,.session-page .exercise-prompt,.exercise-bar h2,.exercise-bar h3,.celebration h2,.celebration h3,.celebration .speech,.celebrate-bar h2{font-family:var(--sans)}
/* the "all keys" chip at the end of the hint bar is a button, so a tap opens the sheet too */
.key-hints .hint-all{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
/* the check sheet's button row: Continue (or the two self-mark buttons) with the keys chip at its right end */
.exercise-bar .bar-row{display:flex;align-items:center;gap:10px}
.exercise-bar .bar-row .btn{flex:1;width:auto;margin:0}
.exercise-bar .bar-row .self-mark{flex:1;margin-top:0}
@media(min-width:700px){.exercise-bar .bar-row{justify-content:flex-end}.exercise-bar .bar-row .btn{flex:0 1 320px}.exercise-bar .bar-row .self-mark{flex:0 1 420px}}
/* PSY-2369 while a phone keyboard is open under an answer box the bar sits on the visual viewport bottom: app.js writes --kb-inset on #app from visualViewport and clears it on every draw; unset, the bar sits where .pinned puts it. The page gains the same room under the bar, so a short item can still scroll its box above it */
.exercise-bar{bottom:var(--kb-inset,0px)}.session-page{margin-bottom:var(--kb-inset,0px)}
/* PSY-2400 how close the next record level is. Under a record on the profile: a flat rule the
   width of the share done, filled in the ink, with the count and the level it opens under it; a
   family with every level in wears the honey rule, like a full plate. On the lesson end: one
   quiet line under the reward cards, beside the daily goal line. No surface, no shadow and no
   corner radius beyond the rule's own cap (PSY-2222 flat surfaces); the type is in rem and the
   spacing in px, as everywhere else in this file (PSY-2364). */
.record-bar{display:block;height:4px;margin:7px 0 0;border-radius:999px;background:var(--line);overflow:hidden}
.record-bar i{display:block;height:100%;width:var(--w);background:var(--ink);border-radius:inherit}
.record-bar.full i{background:var(--honey)}
.record-copy .record-step{color:var(--ink-soft);font-size:0.6875rem;font-variant-numeric:tabular-nums}
.record-left{display:block;margin:14px auto 0;color:var(--ink-soft);font-size:0.8125rem;font-weight:500}
/* PSY-2398 the bypass link: the first child of the shell, of #app on the landing and of an exercise screen. Out of view until it has keyboard focus (no space taken, nothing for a pointer to hit), then a pill at the top left over the rail with the honey ring; its target, the main with id main, shows no ring of its own. The type is in rem and the spacing in px, as everywhere else in this file (PSY-2364). */
.skip-link{position:absolute;top:8px;left:8px;z-index:60;padding:12px 18px;border-radius:999px;background:var(--cream);color:var(--ink);font:700 1rem/1 var(--sans);text-decoration:none;transform:translateY(-200%);opacity:0;pointer-events:none}
.skip-link:focus{transform:none;opacity:1;pointer-events:auto;outline:3px solid var(--honey);outline-offset:3px}
main[tabindex="-1"]:focus{outline:none}
/* PSY-2439 the curriculum map (#curriculum), the transcript (#transcript) and the certificate of
   completion. The map is the section overview's shape one level up: a full-screen list of rows,
   the live ones in their track colour and the planned ones flat grey with no address behind them,
   so the difference is visible before the label is read. Three widths: the 390 phone the whole app
   is drawn for first, two columns from 760 and the roomier row from 1024. */
.map-page{min-height:100svh;padding:18px 18px 60px;max-width:1040px;margin:auto}
.map-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.map-top .brand{margin:0}
.map-head{position:relative;display:flex;align-items:center;gap:14px;padding:18px 16px;border-radius:24px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.map-mark{flex:none;background:var(--honey);border-color:var(--honey-deep)}
.map-copy-head{flex:1;min-width:0}
.map-copy-head .label{color:var(--brown)}
.map-head h1{margin:2px 0 4px;font-size:1.625rem;line-height:1.1}
.map-head p{margin:0;font-size:0.875rem;color:var(--muted)}
.map-pip{flex:none;line-height:0;margin-right:-6px}
.map-summary{display:flex;align-items:center;gap:14px;margin:16px 0 4px}
.map-total{position:static;width:56px;height:56px;flex:none;box-shadow:none;border:1px solid var(--line)}
.map-total b{font-size:0.75rem}
.map-summary .stat-line{display:flex;flex-direction:column;gap:4px;font-size:0.8125rem;color:var(--muted);font-weight:700}
.map-summary .stat-line b{color:var(--ink);font-size:0.9375rem}
.map-estimate{margin:6px 0 2px}
.map-keys{justify-content:flex-start;margin:10px 0 12px}
.map-page .btn{margin-bottom:6px}
.map-areas{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.map-area .map-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;width:100%;padding:14px 13px;text-align:left;border:1px solid var(--line);border-radius:20px;background:var(--cream);color:inherit;text-transform:none;font-weight:inherit;transition:transform .12s ease,border-color .12s ease}
.map-area button.map-row:hover{border-color:var(--honey)}
.map-area button.map-row:active{transform:scale(.99)}
.map-area .map-tile{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:var(--section,var(--paper));color:var(--on-section,var(--cocoa));border:1px solid var(--shadow,var(--line))}
.map-area .map-copy{display:block;min-width:0}
.map-copy .label{color:var(--brown)}
.map-copy strong{display:block;font-family:var(--serif);font-weight:700;letter-spacing:-.2px;font-size:1.1875rem;line-height:1.15;margin:3px 0 4px}
.map-copy small{display:block;font-size:0.8125rem;color:var(--muted);line-height:1.35}
.map-counts{margin:6px 0 7px;font-weight:700}
.map-copy .progress{margin:0 0 6px}
.map-done{margin-bottom:7px;font-weight:700}
.map-courses{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.map-courses span{font-size:0.75rem;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.map-note{margin-top:7px;font-style:italic}
.map-ring{position:static;width:46px;height:46px;flex:none;box-shadow:none;border:1px solid var(--line)}
.map-ring b{font-size:0.6875rem}
.map-area.coming .map-row{background:var(--paper);border-style:dashed}
.map-area.coming .map-tile{background:var(--line);border-color:#d8d0c1;color:var(--muted)}
.map-area.coming .map-copy strong{color:var(--muted)}
.map-area.coming .map-copy .label{color:var(--muted)}
.map-later{margin-top:18px}
.path-map{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 14px}
.path-map .link-button{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.path-map small{font-size:0.8125rem;color:var(--muted)}
/* The transcript sits inside the tab shell, so it is a list of plain rows rather than a screen. */
.transcript-head{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin:12px 0 18px}
.transcript-head .btn{grid-column:1/-1;margin:0}
.transcript-pip{line-height:0}
.transcript-head strong{display:block;font-family:var(--serif);font-size:1.1875rem}
.transcript-head small{display:block;font-size:0.8125rem;color:var(--muted)}
.transcript-totals{margin-top:4px;font-weight:700}
.transcript-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line)}
.transcript-main strong{display:block;font-size:1rem;line-height:1.25}
.transcript-main small{display:block;font-size:0.8125rem;color:var(--muted);margin-top:2px}
.transcript-score{font-weight:700}
.transcript-date{font-size:0.8125rem;color:var(--muted);font-weight:700;white-space:nowrap}
/* The certificate block, on the Track finished stage and on the transcript. */
.cert-card{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 13px;border:1px solid var(--honey-deep);border-radius:20px;background:var(--cream);margin:0 0 12px}
.cert-mark{line-height:0;color:var(--brown)}
.cert-body strong{display:block;font-family:var(--serif);font-size:1.1875rem;line-height:1.2;margin:3px 0 4px}
.cert-body small{display:block;font-size:0.8125rem;color:var(--muted)}
.cert-line{margin:8px 0 10px;font-size:0.8125rem;color:var(--ink)}
.cert-actions{display:flex;flex-wrap:wrap;gap:8px}
.cert-actions .btn{margin:0;flex:1 1 auto}
.cert-actions .btn .icon{margin-right:5px}
.cert-offer{margin:16px auto 0;max-width:420px;padding:12px 13px;border:1px solid var(--honey-deep);border-radius:18px;background:var(--cream);text-align:left}
.cert-offer .label{color:var(--brown)}
/* PSY-2531 the statistics page: five cards, one drawn element each. Bars and dots are plain
   elements sized by a custom property the page writes (--h, --y, --w as a fraction), so there is
   no chart library and nothing to load; the rings are Art.ring. Flat surfaces, 1px lines. */
.stats-more{margin:-14px 0 28px;text-align:right}
.stats-more .link-button{font-size:0.875rem;font-weight:700;color:var(--brand)}
.stats-cards{display:grid;gap:12px;margin:16px 0 22px}
.stats-card{border:1px solid var(--line);border-radius:18px;padding:16px 15px 14px;background:var(--cream)}
.stats-card .label{color:var(--brand)}
.stats-big{display:block;font-family:var(--serif);font-size:1.75rem;line-height:1.1;margin:6px 0 3px;color:var(--ink)}
.stats-card>small,.stats-row small{display:block;font-size:0.8125rem;line-height:1.45;color:var(--muted)}
.stats-note{margin:10px 0 0}
.stats-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.stats-ring{position:relative;display:inline-grid;place-items:center;width:64px;height:64px;color:var(--brand)}
.stats-ring .ring{grid-area:1/1}
.stats-ring b{grid-area:1/1;font-size:0.9375rem;color:var(--ink)}
.stats-dial b{line-height:0;color:var(--brown)}
.week-bars{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end;height:84px;margin:14px 0 6px;padding-bottom:1px;border-bottom:1px solid var(--line)}
.week-bars i{display:block;height:calc(var(--h,0)*100%);min-height:4px;border-radius:6px 6px 2px 2px;background:var(--honey)}
.week-bars i.now{background:var(--brand)}
.week-bars i.none{background:var(--tint)}
.week-labels{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;font-size:0.6875rem;font-weight:700;color:var(--muted);text-align:center}
.acc-line{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;height:84px;margin:14px 0 6px;border-bottom:1px solid var(--line)}
.acc-col{position:relative;display:block}
.acc-dot{position:absolute;left:50%;bottom:calc(var(--y,0)*100%);width:14px;height:14px;border-radius:50%;background:var(--honey);border:2px solid var(--cream);translate:-50% 50%}
.acc-dot.now{background:var(--brand)}
.acc-dot.none{background:var(--tint);border-color:var(--line)}
.month-bars{display:grid;gap:10px;margin:14px 0 2px}
.month-bars span{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.month-bars i{display:block;height:14px;border-radius:7px;background:var(--honey);width:max(14px,calc(var(--w,0)*100%));justify-self:start}
.month-bars span.now i{background:var(--brand)}
.month-bars small{font-size:0.75rem;font-weight:700;color:var(--muted);white-space:nowrap}
.guest-note{margin:0 0 6px;padding:0 2px;font-size:0.875rem;line-height:1.45;color:var(--muted);text-align:center}
.guest-note a{color:var(--brand);font-weight:500;text-decoration:underline}
.stats-keys{margin:0 0 18px}
.stats-empty{padding:26px 8px 20px}
@media(min-width:760px){
 .stats-cards{grid-template-columns:1fr 1fr}
 .stats-card:first-child{grid-column:1/-1}
}
@media(min-width:760px){
 .map-areas{grid-template-columns:1fr 1fr}
 .map-summary .stat-line{flex-direction:row;flex-wrap:wrap;gap:6px 16px}
 .transcript-head{grid-template-columns:auto 1fr auto}
 .transcript-head .btn{grid-column:auto;width:auto}
}
@media(min-width:1024px){
 .map-page{padding:24px 24px 70px}
 .map-area .map-row{padding:16px 15px}
 .map-copy strong{font-size:1.25rem}
}
/* PSY-2432 the printable field guide (#guide/<unit>): the unit notes as one plain page with real
   headings, a sources list and the browser's own print, which is the tagged document pdf.js
   cannot write. One column, reading width, the serif only on the title and the course names. */
.guide-actions{margin-top:22px}
.guide-print-note{margin-top:10px}
.print-page{max-width:720px}
.print-head{margin:8px 0 22px}
.print-head .print-pip{float:right;margin:0 0 8px 14px}
.print-head h1{font-family:var(--serif);font-size:2rem;line-height:1.15;margin:6px 0 10px}
.print-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;clear:both}
.print-actions .btn{flex:1 1 200px}
.print-head .key-hints{margin-top:12px}
.print-part{margin:0 0 26px}
.print-part h2{font-family:var(--serif);font-size:1.5rem;margin:26px 0 8px}
.print-part h3{font-size:1.0625rem;margin:18px 0 6px}
.print-part p{font-size:1.0625rem;line-height:1.55;margin:0 0 12px}
.print-sources{padding-left:18px;margin:0}
.print-sources li{margin:0 0 8px;font-size:0.9375rem}
.print-url{display:block;overflow-wrap:anywhere;color:var(--muted)}
.print-foot{margin-top:28px}
@media print{#poc,#toast,.help-entry,.print-tools,.print-pip{display:none}.print-page{max-width:none;min-height:0;padding:0}.print-part h2,.print-part h3{break-after:avoid}}
/* PSY-2619 the Concepts list on the Practice page: the name is a button that opens the idea sheet, drawn as text */
.concept-name{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}.concept-keys{margin:0 0 6px}
/* PSY-2706 the theory pages (/theories/ and the twelve pages under it). The reading shell is the
   pricing page's: one column at a comfortable measure, the serif on the headings and the sans on
   everything a reader reads in quantity. What is new is the numbered rule over a stage list, the
   question blocks a reader opens to see the answer, the source list and the offer card. No
   animation, no script, no image file: the one drawn element is inline and hidden from assistive
   technology, because the list under it says the same thing in words. */
.theory-page{max-width:720px;margin:0 auto;padding:0 22px 30px}
.theory-page .landing-top{flex-wrap:wrap;gap:10px 16px;padding-bottom:22px}
.theory-page .landing-nav{gap:16px}
.theory-crumb{color:var(--muted);margin:0 0 10px}
.theory-crumb a{color:var(--muted);text-decoration:underline}
.theory-page h1{font-size:2.25rem;margin:10px 0 12px}
.theory-lede{font-size:1.125rem;color:var(--ink-soft);line-height:1.55;margin:0 0 10px}
.theory-page .updated{color:var(--muted);font-size:0.8125rem;margin-bottom:28px}
.theory-body h2{margin:36px 0 12px;font-size:1.625rem}
.theory-body h3{margin:28px 0 8px}
.theory-body>p{line-height:1.65;margin:0 0 14px;max-width:640px}
.theory-rule{display:block;width:100%;max-width:304px;height:auto;margin:18px 0 20px}
.theory-rule line{stroke:var(--line);stroke-width:2}
.theory-rule circle{fill:var(--honey)}
.theory-rule text{font-family:var(--serif);font-size:0.9375rem;fill:var(--dark)}
.theory-steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:12px}
.theory-steps li{counter-increment:step;position:relative;padding:16px 18px 16px 58px;border-radius:16px;background:var(--surface)}
.theory-steps li::before{content:counter(step);position:absolute;left:16px;top:15px;width:28px;height:28px;border-radius:50%;background:var(--honey);color:var(--dark);font-family:var(--serif);font-size:1rem;display:grid;place-items:center}
.theory-steps h4{margin:0 0 4px;font-family:var(--sans);font-size:1.0625rem;font-weight:700;line-height:1.3}
.theory-steps p{margin:0;font-size:0.9375rem;line-height:1.55;color:var(--ink-soft)}
.theory-quiz{list-style:none;counter-reset:ask;margin:0;padding:0;display:grid;gap:14px}
.theory-quiz>li{counter-increment:ask;border:1px solid var(--line);border-radius:16px;padding:18px}
.q-ask{font-family:var(--serif);font-size:1.1875rem;line-height:1.3;margin:0 0 12px}
.q-ask::before{content:counter(ask) ". "}
.q-options{margin:0 0 10px;padding-left:24px;list-style:upper-alpha}
.q-options li{margin-bottom:6px;font-size:0.9375rem;line-height:1.5}
.q-answer summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;padding:6px 0;color:var(--brand);font-size:0.9375rem;font-weight:700}
.q-answer summary::-webkit-details-marker{display:none}
.q-answer summary::after{content:"+";font-size:1.25rem;line-height:1;color:var(--muted)}
.q-answer[open] summary::after{content:"-"}
.q-answer p{margin:6px 0 0;font-size:0.9375rem;line-height:1.6;color:var(--ink-soft)}
.q-answer b{color:var(--ink)}
.theory-sources{margin:0;padding-left:22px}
.theory-sources li{margin:0 0 10px;font-size:0.875rem;line-height:1.55;color:var(--ink-soft);overflow-wrap:anywhere}
.theory-offer{border:1px solid var(--honey-deep);border-radius:18px;background:var(--surface);padding:20px;margin:10px 0 0}
.theory-offer p{margin:0 0 14px;line-height:1.6}
.theory-offer .landing-cta{margin:0 0 12px}
.theory-offer .small-note{margin:0;font-size:0.75rem;color:var(--muted)}
.theory-list,.theory-more{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.theory-list li,.theory-more li{padding:16px 18px;border-radius:16px;background:var(--surface)}
.theory-list a,.theory-more a{display:block;font-family:var(--serif);font-size:1.1875rem;font-weight:400;letter-spacing:-.2px;color:var(--ink)}
.theory-list p,.theory-more p{margin:5px 0 0;font-size:0.875rem;line-height:1.5;color:var(--ink-soft)}
@media(min-width:700px){.theory-page h1{font-size:2.75rem}.theory-list,.theory-more{grid-template-columns:1fr 1fr}}
/* PSY-2756 WCAG 2.5.8 target size: the text chips the target-size smoke survey listed under 24px
   tall (the all-keys chip at the end of the hint bar, the Followers, Following, Share streak and
   Invite a friend links on the profile, the Notes link on a course card) reach 24px with a floor
   on their height alone, and the check boxes (23px, one under the rule, met by the fixed button
   over a scrolled Settings page) grow one pixel; the type, colour and spacing do not move. Every
   other target measured on the phone profile was 24x24 or larger on 5 November 2026. The block
   sits ahead of the PSY-1810 block, which allows no other px length after it. */
.key-hints .hint-all,.social-row .link-button,.invite-line .link-button,.course-card-wrap .card-guide{min-height:24px}
input[type=checkbox]{width:24px;height:24px}
/* <pip> */
/* Trial: Calm studio sign-in. Deep green, warm cream, Libre Caslon Text for the headline and DM Sans for everything else; one column at every width */
.calm-door,.calm-home,.home-nav,.calm-auth,.sheet:has(.calm-auth-top),body.landing{--calm-serif:'Libre Caslon Text',Georgia,serif;--calm-sans:'DM Sans',system-ui,-apple-system,sans-serif}
.calm-door{--calm-green:#1f3b2d;--calm-cream:#f6f2ea;--calm-ink:#1c2a22;--calm-soft:#5b5a52;--calm-line:#ded7c8;--calm-sun:#f6dcae;--signin-ink:var(--calm-ink);font-family:var(--calm-sans);color:var(--calm-ink)}
body.landing,body:has(main.calm-door){background:var(--calm-cream,#f6f2ea)}
body.landing .landing-top .brand-tile,main.calm-door .brand-tile{display:none}
body.landing .landing-top{justify-content:center;padding:14px 0 0;font-family:var(--calm-sans)}
body.landing .landing-top .brand,main.calm-door>.brand{gap:6px;font-family:var(--calm-sans);font-weight:700;font-size:0.875rem;color:#1f3b2d}
main.calm-door>.brand{position:static;display:flex;justify-content:center;margin:6px 0 4px}
/* Trial: the neuron mark beside the name; a small spark runs through it every few seconds, and stays still under reduced motion */
body.landing .landing-top .brand::before,main.calm-door>.brand::before{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='21' r='4.5' stroke='%231f3b2d' stroke-width='2.2' fill='none'/%3E%3Cpath d='M20 25.5V34.5' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 34.5L16.5 36.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 34.5L23.5 36.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M16.6 18.2L10.5 12' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M23.4 18.2L29.5 12' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 16.5V8' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 11.5L16.5 8.2' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 11.5L23.5 8.2' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12.8 14.3L8.5 15.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M27.2 14.3L31.5 15.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M15.6 22.5L9 24.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24.4 22.5L31 24.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Ccircle r='2.1' fill='%23e3a93b' opacity='0'%3E%3CanimateMotion path='M10.5 12L16.6 18.2L20 21L20 34.5' dur='4s' begin='0.6s' repeatCount='2' keyPoints='0;1;1' keyTimes='0;.25;1' calcMode='linear'/%3E%3Canimate attributeName='opacity' values='0;1;1;0;0' keyTimes='0;.03;.22;.25;1' dur='4s' begin='0.6s' repeatCount='2'/%3E%3C/circle%3E%3Ccircle r='2.1' fill='%23e3a93b' opacity='0'%3E%3CanimateMotion path='M31 24.5L24.4 22.5L20 21L20 34.5' dur='4s' begin='2.6s' repeatCount='2' keyPoints='0;1;1' keyTimes='0;.25;1' calcMode='linear'/%3E%3Canimate attributeName='opacity' values='0;1;1;0;0' keyTimes='0;.03;.22;.25;1' dur='4s' begin='2.6s' repeatCount='2'/%3E%3C/circle%3E%3C/svg%3E") center/contain no-repeat}
body.reduce-motion.landing .landing-top .brand::before,body.reduce-motion main.calm-door>.brand::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='21' r='4.5' stroke='%231f3b2d' stroke-width='2.2' fill='none'/%3E%3Cpath d='M20 25.5V34.5' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 34.5L16.5 36.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 34.5L23.5 36.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M16.6 18.2L10.5 12' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M23.4 18.2L29.5 12' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 16.5V8' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 11.5L16.5 8.2' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 11.5L23.5 8.2' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12.8 14.3L8.5 15.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M27.2 14.3L31.5 15.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M15.6 22.5L9 24.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24.4 22.5L31 24.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){body.landing .landing-top .brand::before,main.calm-door>.brand::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='21' r='4.5' stroke='%231f3b2d' stroke-width='2.2' fill='none'/%3E%3Cpath d='M20 25.5V34.5' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 34.5L16.5 36.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 34.5L23.5 36.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M16.6 18.2L10.5 12' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M23.4 18.2L29.5 12' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 16.5V8' stroke='%231f3b2d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 11.5L16.5 8.2' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 11.5L23.5 8.2' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12.8 14.3L8.5 15.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M27.2 14.3L31.5 15.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M15.6 22.5L9 24.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24.4 22.5L31 24.5' stroke='%231f3b2d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}}

@media(max-width:699px){body.landing .landing-nav{display:none}}
.landing-hero.calm-door{min-height:0;justify-content:flex-start;gap:0;padding:4px 0 28px}
.calm-door .splash-copy{width:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;text-align:left}
.calm-door .door-pic{position:relative;height:440px;background:#c9a77a url(assets/landing/sprout.webp) center/cover no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 440' preserveAspectRatio='none'%3E%3Cpath d='M0 46C70 6 150 0 210 22S300 50 335 18L335 418Q335 440 313 440L22 440Q0 440 0 418Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 440' preserveAspectRatio='none'%3E%3Cpath d='M0 46C70 6 150 0 210 22S300 50 335 18L335 418Q335 440 313 440L22 440Q0 440 0 418Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.calm-door .door-words{position:absolute;left:20px;right:20px;bottom:22px;color:#fff}
.calm-door .door-words h1,.landing-hero.calm-door .door-words h1{margin:0;font-family:var(--calm-serif);font-weight:400;font-size:2.625rem;line-height:1;letter-spacing:-0.03em;color:#fff;text-wrap:balance}
.calm-door .door-words h1 em{font-style:italic;color:var(--calm-sun)}
.calm-door .door-words p{margin:8px 0 0;font-size:0.9375rem;font-weight:500;color:#fff}
.calm-door .door-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;margin:16px 0 0;padding:0}
.calm-door .door-topics li{display:flex}
.calm-door .door-topic{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;border:0;border-radius:18px;background:#fff;font:inherit;font-size:0.75rem;font-weight:500;color:#4a4a42;cursor:pointer;transition:background .25s,color .25s,transform .15s}
.calm-door .door-topic:active{transform:scale(.95)}
.calm-door .door-topic[aria-pressed="true"]{background:#1f3b2d;color:#fff}
.calm-door .door-topic[aria-pressed="true"] svg *{fill:#f6f2ea;stroke:#f6f2ea}
.calm-door .door-topic:focus-visible{outline:2px solid #1f3b2d;outline-offset:2px}
.calm-door .door-taste{margin:0 4px;font-size:0.875rem;line-height:1.4;color:#6b6a62}
.calm-door .door-taste:empty{display:none}
.calm-door .door-taste.on{margin-top:16px}
.calm-door .door-taste.on{animation:m-fade .3s ease-out}
.calm-door .splash-actions{max-width:none;margin-top:24px;gap:12px}
.calm-door .splash-adult,.calm-door .splash-adult:has(input:checked){justify-content:flex-start;gap:12px;padding:0;border:0;border-radius:0;background:transparent;font-size:0.9375rem;font-weight:500;color:var(--calm-ink)}
.calm-door .splash-adult input{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:22px;height:22px;min-width:0;min-height:0;padding:0;margin:0;border:1.5px solid var(--calm-green);border-radius:7px;background:transparent;display:grid;place-items:center}
.calm-door .splash-adult input:checked{border-color:var(--calm-green);background:var(--calm-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat}
.calm-door .splash-adult input:focus-visible{outline:2px solid var(--calm-green);outline-offset:2px}
.calm-door .splash-adult input[aria-invalid="true"]{border-color:var(--terra)}
.calm-door .splash-adult:has(input[aria-invalid="true"]){border:0;background:transparent}
.calm-door .splash-actions #splash-adult-error{text-align:left}
.calm-door .splash-actions .btn[data-action="get-started"],.calm-door .splash-actions .btn[data-action="get-started"]:hover{background:var(--calm-green);border-color:var(--calm-green);color:#fff;border-radius:999px;min-height:56px;font-family:var(--calm-sans);font-weight:500;font-size:1rem}
.calm-door .splash-actions .btn.google{background:transparent;border:1.5px solid #cfc8b8;border-radius:999px;min-height:56px;color:var(--calm-ink);font-family:var(--calm-sans);font-weight:500}
.calm-door .splash-copy>p.splash-login{margin:14px 0 0;text-align:center;font-size:0.8125rem;font-weight:400;color:#6b6a62}
.calm-door .splash-login .link-button{color:var(--calm-green);font-weight:500}
.calm-door .splash-copy>p.terms-line{margin:10px auto 0;color:#6b6a62;font-weight:400}
@media(max-width:380px){.calm-door .door-words h1,.landing-hero.calm-door .door-words h1{font-size:2.375rem}}
/* Trial: the landing below the sign-in, in the Calm studio look: a small sentence case label, a serif title with one italic accent, white cards on the cream page, one column at every width */
body.landing main.landing .landing-section,body.landing .landing-footer{max-width:440px;margin:0 auto;padding:32px 0 8px;border-top:1px solid #e7e1d3;font-family:var(--calm-sans);color:#1c2a22}
body.landing main.landing .landing-section h2{margin:8px 0 16px;font-family:var(--calm-serif);font-weight:400;font-size:2rem;line-height:1.05;letter-spacing:-0.02em;color:#1c2a22}
body.landing main.landing .landing-section h2 em{font-style:italic;color:#1f3b2d}
body.landing .door-wave-pic{height:170px;margin:0 0 24px;background:#9fb3a3 url(assets/landing/price-shortcut.webp) center/cover no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 170' preserveAspectRatio='none'%3E%3Cpath d='M0 34C90 0 170 0 230 24S310 42 335 12L335 148Q335 170 313 170L22 170Q0 170 0 148Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 170' preserveAspectRatio='none'%3E%3Cpath d='M0 34C90 0 170 0 230 24S310 42 335 12L335 148Q335 170 313 170L22 170Q0 170 0 148Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
body.landing .door-k{margin:0;font-size:0.8125rem;font-weight:600;color:#56705f}
body.landing main.landing .landing-lede,body.landing main.landing .landing-section>p{font-size:1rem;line-height:1.5;color:#4a4a42}
body.landing .door-how{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:how}
body.landing .door-how li{counter-increment:how;display:grid;grid-template-columns:34px 1fr;align-items:center;column-gap:12px;padding:12px 14px;border-radius:18px;background:#fff;font-size:0.9375rem;color:#5b5a52}
body.landing .door-how li::before{content:counter(how);grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1f3b2d;color:#f6f2ea;font-family:var(--calm-serif);font-size:1.0625rem}
body.landing .door-how b{grid-column:2;color:#1c2a22;font-weight:600}
body.landing .door-src{font-size:0.8125rem;font-weight:500;color:#1f3b2d}
body.landing main.landing .door-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 24px;padding:0;list-style:none}
body.landing .door-strip{display:flex;justify-content:center;margin:6px 0 24px;padding:6px 0}
body.landing .door-strip img{width:78px;height:104px;flex:none;object-fit:cover;border-radius:14px;border:3px solid #f6f2ea;margin-left:-12px;background:#e7e1d3}
body.landing .door-strip img:first-child{margin-left:0;transform:rotate(-6deg) translateY(4px)}
body.landing .door-strip img:nth-child(2){transform:rotate(3deg) translateY(-7px);z-index:1}
body.landing .door-strip img:nth-child(3){transform:rotate(-2deg) translateY(6px);z-index:2}
body.landing .door-strip img:nth-child(4){transform:rotate(5deg) translateY(-4px);z-index:1}
body.landing .door-strip img:nth-child(5){transform:rotate(-4deg) translateY(5px)}
body.landing main.landing .door-tiles{gap:12px}
body.landing main.landing .door-tiles .track-card{display:flex;align-items:center;gap:10px;min-height:0;padding:10px 12px;border:0;border-radius:16px;background:#fff;text-align:left}
body.landing main.landing .door-tiles .track-card svg{flex:none}
body.landing main.landing .door-tiles .track-card h3{margin:0;font-family:var(--calm-sans);font-weight:500;font-size:0.875rem;line-height:1.2;color:#1c2a22}
body.landing main.landing .price-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body.landing main.landing .price-box{padding:16px;border:0;border-radius:18px;background:#fff;text-align:left}
body.landing main.landing .price-box:first-child{background:#1f3b2d;color:#f6f2ea}
body.landing main.landing .price-box:first-child .label,body.landing main.landing .price-box:first-child p{color:#e6ebe5}
body.landing main.landing .price-box strong{font-family:var(--calm-serif);font-weight:400;font-size:1.5rem}
body.landing main.landing .price-box .label,body.landing main.landing .price-box p{font-size:0.8125rem;color:#5b5a52}
body.landing main.landing .landing-cta .btn{border-radius:999px;min-height:56px;font-family:var(--calm-sans);font-weight:500}
body.landing main.landing .landing-cta .btn.secondary{border:1.5px solid #cfc8b8;background:transparent;color:#1c2a22}
body.landing main.landing .faq{padding:12px 0;border:0;border-bottom:1px solid #e7e1d3;border-radius:0;background:transparent}
body.landing main.landing .faq summary{font-family:var(--calm-serif);font-weight:400;font-size:1.1875rem;color:#1c2a22}
body.landing main.landing .faq p{font-size:0.9375rem;line-height:1.5;color:#5b5a52}
body.landing main.landing .door-final h2{font-size:2.25rem}
body.landing .door-neuron{width:88px;height:88px;margin:0 0 8px}
body.landing .door-neuron.wait .dn{stroke-dasharray:1;stroke-dashoffset:1}
body.landing .door-neuron.wait .dn-spark{visibility:hidden}
body.landing .door-neuron.in .dn{animation:trick-draw .45s ease-out forwards}
body.landing .door-neuron.in .dn-spark{visibility:visible}
body.reduce-motion .door-neuron .dn-spark{display:none}
@media (prefers-reduced-motion:reduce){body.landing .door-neuron .dn-spark{display:none}}
body.landing main.landing .door-final .btn{background:#1f3b2d;border-color:#1f3b2d;color:#fff}
body.landing .landing-footer{padding:20px 16px 28px;font-size:0.8125rem;color:#6b6a62}
body.landing .landing-footer a{color:#1f3b2d}
@media(max-width:480px){body.landing main.landing .landing-section,body.landing .landing-footer{margin:0}}
/* Trial: Mind journal, chosen by Seph on 27 October 2026. The sign-in page and the landing below it in Psychology.com's own colors (cream, honey, clay, ink) and type (Bricolage Grotesque for headlines, Hanken Grotesk for text). A photo with rounded corners instead of the wave, the P tile with Psychology.com, square topic tiles that alternate a hand-drawn picture and a photo, an ink button with a honey arrow */
.splash.calm-door,.landing-hero.calm-door,body.landing{--j-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;--j-sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;--j-paper:#fefcf8;--j-ink:#27201c;--j-ink-deep:#211c15;--j-soft:#5e5651;--j-honey:#eec46a;--j-honey-tint:#fce5bb;--j-clay-tint:#fce3c8;--j-linen:#f1ede2;--j-line:#e9e2d6;--j-ochre:#934f00}
:is(.splash,.landing-hero).calm-door{font-family:var(--j-sans);color:var(--j-ink)}
body.landing,body:has(main.splash.calm-door){background:var(--j-paper)}
body.landing .landing-top .brand-tile,main.splash.calm-door .brand-tile{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--j-honey);color:var(--j-ink-deep);font-family:var(--calm-serif);font-weight:700;font-size:1.0625rem}
body.landing .landing-top{justify-content:flex-start}
body.landing .landing-top .brand .brand-com,main.splash.calm-door>.brand .brand-com{color:#eec46a}
body.landing .landing-top .brand .brand-dot,main.splash.calm-door>.brand .brand-dot{margin:0 7px;color:var(--j-soft)}
body.landing .landing-top .brand .brand-learn,main.splash.calm-door>.brand .brand-learn{font-weight:600}
body.landing .landing-top .brand .brand-tile,main.splash.calm-door>.brand .brand-tile{display:none}
body.landing .landing-top .brand,main.splash.calm-door>.brand{gap:0;font-family:var(--j-display);font-weight:700;font-size:1.0625rem;letter-spacing:-0.01em;color:var(--j-ink)}
body.landing .landing-top .brand::before,main.splash.calm-door>.brand::before,body.reduce-motion.landing .landing-top .brand::before,body.reduce-motion main.splash.calm-door>.brand::before{content:none;display:none}
:is(.splash,.landing-hero).calm-door .door-pic{height:430px;border-radius:26px;overflow:hidden;background:#4a3b2c url(assets/landing/journal-window.webp) center 30%/cover no-repeat;-webkit-mask:none;mask:none}
:is(.splash,.landing-hero).calm-door .door-pic::after{content:"";position:absolute;inset:0;background:rgba(20,14,10,.3);border-radius:inherit}
:is(.splash,.landing-hero).calm-door .door-words{z-index:1;left:18px;right:18px;bottom:18px}
:is(.splash,.landing-hero).calm-door .door-words h1,:is(.splash,.landing-hero).calm-door .door-words h1{font-family:var(--j-display);font-weight:600;font-size:2.25rem;line-height:1.02;letter-spacing:-0.02em;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.35)}
:is(.splash,.landing-hero).calm-door .door-words h1 em{font-style:normal;color:#fff;box-shadow:inset 0 -0.38em 0 rgba(238,196,106,.85)}
:is(.splash,.landing-hero).calm-door .door-words p{font-family:var(--j-sans);font-size:0.875rem;text-shadow:0 1px 10px rgba(0,0,0,.4)}
:is(.splash,.landing-hero).calm-door .door-topics{margin:10px 0 0;gap:8px}
:is(.splash,.landing-hero).calm-door .door-topic{position:relative;aspect-ratio:1;justify-content:flex-end;align-items:flex-start;gap:0;padding:8px;border-radius:16px;overflow:hidden;background:var(--j-honey-tint);font-family:var(--j-sans);font-size:0.8125rem;font-weight:600;color:var(--j-ink)}
:is(.splash,.landing-hero).calm-door .door-topic svg{position:absolute;top:10px;left:50%;transform:translateX(-50%)}
:is(.splash,.landing-hero).calm-door .door-topics li:nth-child(3) .door-topic{background:var(--j-linen)}
:is(.splash,.landing-hero).calm-door .door-topics li:nth-child(2) .door-topic,:is(.splash,.landing-hero).calm-door .door-topics li:nth-child(4) .door-topic{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6);background:#3b3229 url(assets/landing/journal-people.webp) center/cover no-repeat}
:is(.splash,.landing-hero).calm-door .door-topics li:nth-child(4) .door-topic{background-image:url(assets/landing/journal-feelings.webp)}
:is(.splash,.landing-hero).calm-door .door-topic[aria-pressed="true"]{background-color:var(--j-ink-deep);color:#fff;box-shadow:0 0 0 3px var(--j-honey)}
:is(.splash,.landing-hero).calm-door .door-topic[aria-pressed="true"] svg *{fill:none;stroke:#fff}
:is(.splash,.landing-hero).calm-door .door-topic:focus-visible{outline:2px solid var(--j-ink);outline-offset:2px}
:is(.splash,.landing-hero).calm-door .door-taste{color:var(--j-soft)}
:is(.splash,.landing-hero).calm-door .splash-actions{margin-top:16px}
:is(.splash,.landing-hero).calm-door .splash-actions .btn[data-action="get-started"],:is(.splash,.landing-hero).calm-door .splash-actions .btn[data-action="get-started"]:hover{background:var(--j-ink-deep);border-color:var(--j-ink-deep);color:var(--j-paper);border-radius:18px;font-family:var(--j-sans);font-weight:600}
:is(.splash,.landing-hero).calm-door .btn[data-action="get-started"] span[aria-hidden="true"],body.landing main.landing .door-final .btn span[aria-hidden="true"]{display:inline-grid;place-items:center;width:30px;height:30px;margin-left:10px;border-radius:50%;background:var(--j-honey);color:var(--j-ink-deep)}
:is(.splash,.landing-hero).calm-door .splash-actions .btn.google{border-color:var(--j-line);border-radius:18px;color:var(--j-ink);font-family:var(--j-sans)}
:is(.splash,.landing-hero).calm-door .splash-copy>p.splash-login{color:var(--j-soft);font-family:var(--j-sans)}
:is(.splash,.landing-hero).calm-door .splash-login .link-button{color:var(--j-ink)}
:is(.splash,.landing-hero).calm-door .splash-adult input{border-color:var(--j-ink);border-radius:7px}
:is(.splash,.landing-hero).calm-door .splash-adult input:checked{border-color:var(--j-honey);background:var(--j-honey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211c15' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/16px no-repeat}
:is(.splash,.landing-hero).calm-door .splash-adult input:focus-visible{outline-color:var(--j-ink)}
@media(max-width:380px){:is(.splash,.landing-hero).calm-door .door-words h1,:is(.splash,.landing-hero).calm-door .door-words h1{font-size:2rem}}
body.landing main.landing .landing-section,body.landing .landing-footer{border-top-color:var(--j-line);font-family:var(--j-sans);color:var(--j-ink)}
body.landing main.landing .landing-section h2{font-family:var(--j-display);font-weight:600;font-size:1.75rem;line-height:1.08;letter-spacing:-0.02em;color:var(--j-ink)}
body.landing main.landing .landing-section h2 em{font-style:normal;color:var(--j-ink);box-shadow:inset 0 -0.36em 0 rgba(238,196,106,.6)}
body.landing .door-k{font-family:var(--j-sans);color:var(--j-ochre)}
body.landing main.landing .landing-lede,body.landing main.landing .landing-section>p{color:var(--j-soft)}
body.landing .door-how{grid-template-columns:repeat(3,1fr);gap:8px}
body.landing .door-how li{display:block;padding:12px;font-size:0.8125rem;line-height:1.35;color:#3d342d;background:var(--j-honey-tint)}
body.landing .door-how li:nth-child(2){background:var(--j-clay-tint)}
body.landing .door-how li:nth-child(3){background:var(--j-linen)}
body.landing .door-how li::before{display:block;width:auto;height:auto;margin-bottom:4px;border-radius:0;background:none;color:var(--j-ochre);font-family:var(--j-display);font-weight:600;font-size:1.625rem;text-align:left}
body.landing .door-how b{display:block;font-family:var(--j-display);font-weight:600;font-size:0.9375rem;color:var(--j-ink)}
body.landing .door-strip{display:none}
body.landing .dj-honey{background:var(--j-honey-tint)}
body.landing .dj-clay{background:var(--j-clay-tint)}
body.landing .dj-linen{background:var(--j-linen)}
body.landing main.landing .door-tiles .track-card{position:relative;display:grid;place-items:center;height:auto;aspect-ratio:4/3;min-height:0;padding:0;border:0;border-radius:16px;overflow:hidden;text-align:left}
body.landing main.landing .door-tiles .track-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.landing main.landing .door-tiles .tc-photo{background:#3b3229}
body.landing main.landing .door-tiles .tc-draw.dj-clay{background:var(--j-clay-tint)}
body.landing main.landing .door-tiles .tc-draw.dj-honey{background:var(--j-honey-tint)}
body.landing main.landing .door-tiles .tc-draw.dj-linen{background:var(--j-linen)}
body.landing main.landing .door-tiles .tc-draw svg{margin-top:-14px;width:60px;height:60px}
body.landing main.landing .door-tiles .track-card h3{position:absolute;left:10px;right:10px;bottom:8px;margin:0;font-family:var(--j-sans);font-weight:700;font-size:0.875rem;line-height:1.15;color:var(--j-ink)}
body.landing main.landing .door-tiles .tc-photo h3{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
body.landing .door-wave-pic{display:none}
body.landing main.landing .price-box{background:var(--j-linen)}
body.landing main.landing .price-box:first-child{background:var(--j-ink-deep);color:var(--j-paper)}
body.landing main.landing .price-box:first-child strong{color:var(--j-honey)}
body.landing main.landing .price-box strong{font-family:var(--j-display);font-weight:600}
body.landing main.landing .price-box .label,body.landing main.landing .price-box p{color:var(--j-soft)}
body.landing main.landing .landing-cta .btn{border-radius:18px;font-family:var(--j-sans);font-weight:600}
body.landing main.landing .landing-cta .btn.secondary{border-color:var(--j-line);color:var(--j-ink)}
body.landing main.landing .faq{border-bottom-color:var(--j-line)}
body.landing main.landing .faq summary{font-family:var(--j-display);font-weight:600;font-size:1rem;color:var(--j-ink)}
body.landing main.landing .faq p{color:var(--j-soft)}
body.landing .peek-card{display:flex;align-items:center;gap:14px;padding:16px;margin:0 0 14px;border-radius:20px;background:var(--j-honey-tint)}
body.landing .peek-card svg{flex:none}
body.landing .peek-note{margin:0;font-family:var(--j-display);font-weight:600;font-size:1.0625rem;line-height:1.3;color:var(--j-ink)}
body.landing .door-snail{display:flex;justify-content:center;margin:0 0 8px}
body.landing main.landing .door-final{text-align:center}
body.landing main.landing .door-final .btn{background:var(--j-ink-deep);border-color:var(--j-ink-deep);color:var(--j-paper)}
body.landing .landing-footer{color:var(--j-soft)}
body.landing .landing-footer a{color:var(--j-ink)}
/* Trial: the first trick, in the Calm studio look. Cream page, the question in Libre Caslon Text, a big number, a slider, and the neuron top right that grows as the slider moves */
.first-trick{--calm-serif:'Libre Caslon Text',Georgia,serif;--calm-sans:'DM Sans',system-ui,-apple-system,sans-serif;max-width:440px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;padding:16px 20px 0;background:#f6f2ea;color:#1c2a22;font-family:var(--calm-sans)}
body:has(main.first-trick){background:#f6f2ea}
.first-trick .trick-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #e7e1d3}
.first-trick .trick-k{margin-left:auto;font-size:0.8125rem;color:#6b6a62}
.first-trick .trick-neuron{color:#1f3b2d;flex:none}
.first-trick .trick-neuron .grow{stroke-dasharray:1;stroke-dashoffset:1;animation:trick-draw .45s ease-out forwards}
@keyframes trick-draw{to{stroke-dashoffset:0}}
.first-trick .trick-cover{height:130px;margin-top:14px;background:#9fb3a3 url(assets/landing/home-fast-or-slow.webp) center 60%/cover no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 18C60 46 140 50 200 26S290 0 335 40L335 108Q335 130 313 130L22 130Q0 130 0 108Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 18C60 46 140 50 200 26S290 0 335 40L335 108Q335 130 313 130L22 130Q0 130 0 108Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}

.first-trick .trick-q{margin:24px 0 0;font-family:var(--calm-serif);font-weight:400;font-size:1.875rem;line-height:1.12;letter-spacing:-0.02em;color:#1c2a22;text-wrap:balance}
.first-trick .trick-q em{font-style:italic}
.first-trick .trick-cents{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:32px}
.first-trick .trick-cents output{min-width:2.4ch;text-align:center;font-family:var(--calm-serif);font-size:3.875rem;line-height:1;border-bottom:2px solid #1c2a22;font-variant-numeric:tabular-nums}
.first-trick .trick-cents span{font-family:var(--calm-serif);font-size:1.5rem}
.first-trick .trick-hint{margin:12px 0 0;text-align:center;font-size:0.8125rem;color:#6b6a62}
.first-trick #trick-range{width:100%;margin:24px 0 0;accent-color:#1f3b2d;height:32px}
.first-trick .trick-actions{position:sticky;bottom:0;z-index:2;margin:auto -20px 0;padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;justify-items:center;background:#f6f2ea}
.first-trick .trick-actions .btn{width:100%;border-radius:999px;min-height:56px;background:#1f3b2d;border-color:#1f3b2d;color:#fff;font-family:var(--calm-sans);font-weight:500}
.first-trick .trick-actions .btn:disabled{opacity:.45}
.first-trick .trick-actions .btn.secondary{background:none;color:#1f3b2d}
.first-trick .trick-actions .link-button{padding:0;font:inherit;font-size:0.875rem;color:#56705f;text-decoration:underline;background:none;border:0;cursor:pointer}
.first-trick .trick-result{margin-top:24px}
.first-trick .trick-result h2{margin:0 0 8px;font-family:var(--calm-serif);font-weight:400;font-size:2.25rem;color:#1c2a22}
.first-trick .trick-result>p{margin:0;font-size:1rem;line-height:1.5;color:#4a4a42}
.first-trick .trick-sum{display:grid;gap:8px;margin-top:16px}
.first-trick .trick-sum p{margin:0;padding:12px 14px;border-radius:16px;background:#fff;font-size:0.9375rem;line-height:1.45;color:#4a4a42}
.first-trick .trick-sum b{color:#1c2a22}
.first-trick .trick-result>p.trick-src{margin:0 0 24px;padding-top:12px;font-size:0.6875rem;line-height:1.4;font-style:italic;color:#706f67}
body.reduce-motion .first-trick .trick-neuron .grow{animation:none;stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.first-trick .trick-neuron .grow{animation:none;stroke-dashoffset:0}}
/* Trial: Learn, Saved and Home after the first trick, in the same Calm studio look; every motion plays once and rests */
.first-trick .trick-h{margin:8px 0 0;font-family:var(--calm-serif);font-weight:700;font-size:2rem;line-height:1.08;letter-spacing:-0.02em;color:#1c2a22;text-wrap:balance}
.first-trick .trick-h.small{font-size:1.5rem;line-height:1.18}
.first-trick .trick-h em{font-style:italic;color:#1f3b2d}
.first-trick .trick-label{margin:24px 0 0;font-size:0.8125rem;font-weight:600;color:#56705f}
.first-trick .trick-p{margin:12px 0 0;font-size:1.0625rem;line-height:1.5;color:#3d3d36}
.first-trick .trick-p b{color:#1c2a22}
.first-trick>p.trick-src{margin:12px 0 0;font-size:0.6875rem;font-style:italic;color:#706f67}
.first-trick .trick-learn-pic{height:130px;margin-top:14px;background:#9fb3a3 url(assets/landing/learn-two-minds.webp) center 60%/cover no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 30C40 10 80 10 120 28S200 46 240 26S310 8 335 24L335 108Q335 130 313 130L22 130Q0 130 0 108Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 30C40 10 80 10 120 28S200 46 240 26S310 8 335 24L335 108Q335 130 313 130L22 130Q0 130 0 108Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.first-trick .trick-h+.trick-anim{margin-top:12px}
.first-trick .trick-anim{margin-top:12px;border-radius:22px;background:#fff;overflow:hidden}
.first-trick .trick-anim.two{padding:12px 16px}
.first-trick .trick-anim.two text{font-family:var(--calm-sans)}
.first-trick .ta-fast{animation:ta-run 1s ease-in-out alternate 10}
.first-trick .ta-slow{animation:ta-run 5s ease-in-out alternate 2}
@keyframes ta-run{to{transform:translateX(260px)}}
.first-trick .trick-anim.ten{display:flex;justify-content:center;align-items:center;gap:26px;height:120px}
.first-trick .ta-ten,.first-trick .ta-five{font-family:var(--calm-serif);font-weight:700;font-size:3.5rem;line-height:1}
.first-trick .ta-ten{position:relative;color:#9a978c}
.first-trick .ta-ten i{position:absolute;left:-6%;top:50%;height:5px;width:0;background:#b3473a;border-radius:4px;transform:rotate(-8deg);animation:ta-strike .3s .2s ease-out forwards}
.first-trick .ta-five{color:#1f3b2d;opacity:0;animation:ta-in .3s .45s ease-out forwards}
@keyframes ta-strike{to{width:112%}}
@keyframes ta-in{to{opacity:1}}
.first-trick .trick-anim.photo{border-radius:0;background:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 22C70 44 130 4 200 16S300 40 335 8L335 108Q335 130 313 130L22 130Q0 130 0 108Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 22C70 44 130 4 200 16S300 40 335 8L335 108Q335 130 313 130L22 130Q0 130 0 108Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.first-trick .trick-anim.photo span{display:block;height:130px;background:#9fb3a3 url(assets/landing/home-fast-or-slow.webp) center/cover no-repeat;animation:ta-drift .5s ease-out .2s forwards}
@keyframes ta-drift{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.first-trick .trick-opts{display:grid;gap:12px;margin-top:24px}
.first-trick .trick-opt{padding:15px 18px;border:1px solid #ded7c8;border-radius:16px;background:#fff;text-align:left;font-family:var(--calm-sans);font-size:1rem;font-weight:500;color:#1c2a22;cursor:pointer}
.first-trick .trick-opt.right{border-color:#1f3b2d;background:#1f3b2d;color:#fff}
.first-trick .trick-opt.wrong{border-color:#b3473a;color:#b3473a}
.first-trick .trick-opt:disabled{cursor:default;opacity:1}
.first-trick .trick-feedback{margin-top:16px;font-size:0.9375rem;line-height:1.5;color:#3d3d36}
.first-trick .trick-feedback b{color:#1c2a22}
.first-trick .trick-saved-pic{height:130px;margin-top:14px;background:#9fb3a3 url(assets/landing/saved-one-trick-down.webp) center/cover no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 16Q167 62 335 16L335 108Q335 130 313 130L22 130Q0 130 0 108Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 16Q167 62 335 16L335 108Q335 130 313 130L22 130Q0 130 0 108Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.first-trick .trick-saved-card{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding:14px 16px;border-radius:18px;background:#fff}
.first-trick .trick-saved-card b{font-family:var(--calm-serif);font-weight:400;font-size:1.1875rem;color:#1c2a22}
.first-trick .trick-saved-card span{font-size:0.75rem;font-style:italic;color:#706f67}
.first-trick .trick-spark,.calm-home .trick-spark{pointer-events:none}
body:has(main.calm-home){background:#f6f2ea}
.calm-home{max-width:440px;margin:0 auto;min-height:100svh;padding:18px 20px 100px;background:#f6f2ea;color:#1c2a22;font-family:var(--calm-sans)}
.calm-home .home-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.calm-home .home-hello{margin:0;font-family:var(--calm-serif);font-weight:700;font-size:2.125rem;line-height:1.1;color:#1c2a22}
.calm-home .home-neuron{padding:0;border:0;background:none;color:#1f3b2d;cursor:pointer}
.calm-home .home-neuron .trick-neuron{width:40px;height:40px}
.calm-home .home-lead{margin:8px 0 0;font-size:0.9375rem;color:#5b5a52}
.calm-home .home-hero{position:relative;display:block;width:100%;height:290px;margin-top:12px;padding:0;border:0;text-align:left;cursor:pointer;background:#9fb3a3 url(assets/landing/home-think-clearer.webp) center 55%/cover no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 280' preserveAspectRatio='none'%3E%3Cpath d='M0 30C45 6 95 0 150 20S255 54 335 4L335 258Q335 280 313 280L22 280Q0 280 0 258Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 280' preserveAspectRatio='none'%3E%3Cpath d='M0 30C45 6 95 0 150 20S255 54 335 4L335 258Q335 280 313 280L22 280Q0 280 0 258Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.calm-home .home-hero-words{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:6px;color:#fff}
.calm-home .home-k{font-size:0.75rem;font-weight:600}
.calm-home .home-hero b{font-family:var(--calm-serif);font-weight:400;font-size:2.5rem;line-height:1;letter-spacing:-0.03em}
.calm-home .home-hero b em{font-style:italic;color:#f6dcae}
.calm-home .home-sub{font-size:0.875rem;font-weight:500}
.calm-home .home-go{margin-top:6px;font-size:0.875rem;font-weight:600}
.calm-home .door-topics{margin-top:16px}
.calm-home .home-tot{margin-top:16px;padding:20px;border-radius:22px;background:#1f3b2d;color:#f6f2ea}
.calm-home .home-tot-head{display:flex;justify-content:space-between;align-items:baseline}
.calm-home .home-tot h2,.calm-home .home-plan h2{margin:0;font-family:var(--calm-serif);font-weight:700;font-size:1.375rem}
.calm-home .home-tot small{font-size:0.75rem;color:#e6ebe5}
.calm-home .home-tot p{margin:12px 0 0;font-size:1rem;line-height:1.45}
.calm-home .home-tot-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.calm-home .home-tot-btns button{min-height:48px;border:0;border-radius:999px;background:#f6f2ea;color:#1f3b2d;font-family:var(--calm-sans);font-size:0.9375rem;font-weight:500;cursor:pointer}
.calm-home .home-tot-btns button+button{background:#2f5241;color:#f6f2ea}
.calm-home .home-tot-note{color:#e6ebe5}
.calm-home .home-tot-topic{font-size:0.8125rem!important;font-weight:600;color:#f6dcae}
.calm-home .home-plan{margin-top:16px;padding:20px;border-radius:22px;background:#fff}
.calm-home .home-plan-head{display:flex;align-items:center;gap:14px}
.calm-home .home-plan-head text{font-family:var(--calm-sans)}
.calm-home .home-plan small{font-size:0.8125rem;color:#5b5a52}
.calm-home .home-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #efeae0;margin-top:10px}
.calm-home .home-row b{display:block;font-size:0.9375rem;font-weight:600;color:#1c2a22}
.calm-home .home-row small{font-size:0.8125rem;color:#5b5a52}
.calm-home .home-dot{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1f3b2d;color:#fff}
.calm-home .home-row.todo .home-dot{background:transparent;border:1.5px solid #cfc8b8}
.calm-home .home-row.todo b{color:#5b5a52}
.home-nav{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:space-around;max-width:440px;margin:0 auto;padding:10px 6px calc(14px + env(safe-area-inset-bottom,0px));background:#f6f2ea;border-top:1px solid #e7e1d3;--calm-sans:'DM Sans',system-ui,sans-serif;font-family:var(--calm-sans)}
.home-nav span,.home-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;border:0;background:none;font:inherit;font-size:0.6875rem;font-weight:500;color:#6b6a62;cursor:pointer}
.home-nav .on{color:#1f3b2d}
body:has(.home-nav) .help-entry{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body:has(main.first-trick) .help-entry{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
body:has(main.trick-saved .btn.secondary) .help-entry{bottom:calc(164px + env(safe-area-inset-bottom,0px))}
body.reduce-motion .first-trick .ta-fast,body.reduce-motion .first-trick .ta-slow{animation:none;transform:translateX(260px)}
body.reduce-motion .first-trick .ta-ten i{animation:none;width:112%}
body.reduce-motion .first-trick .ta-five{animation:none;opacity:1}
body.reduce-motion .first-trick .trick-anim.photo span{animation:none}
body.reduce-motion .trick-spark{display:none}
@media (prefers-reduced-motion:reduce){.first-trick .ta-fast,.first-trick .ta-slow{animation:none;transform:translateX(260px)}.first-trick .ta-ten i{animation:none;width:112%}.first-trick .ta-five{animation:none;opacity:1}.first-trick .trick-anim.photo span{animation:none}.trick-spark{display:none}}
.topic-page .topic-top{padding:2px 0 4px}
.topic-page .topic-top .link-button{padding:0;border:0;background:none;font:inherit;font-size:0.875rem;font-weight:500;color:#1f3b2d;cursor:pointer}
.topic-page .topic-pic{height:210px;margin-top:16px;background:#9fb3a3 url(assets/landing/topic-think-clearer.webp) center/cover no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 28C60 8 120 6 180 22S290 44 335 14L335 108Q335 130 313 130L22 130Q0 130 0 108Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 28C60 8 120 6 180 22S290 44 335 14L335 108Q335 130 313 130L22 130Q0 130 0 108Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.topic-page .topic-pic.soon{display:grid;place-items:center;padding-top:20px;background:#1f3b2d;color:#f6f2ea;font-size:0.875rem;font-weight:500}
.topic-page .topic-k{margin:24px 0 0;font-size:0.8125rem;font-weight:600;color:#56705f}
.topic-page .topic-h{margin:8px 0 0;font-family:var(--calm-serif);font-weight:700;font-size:2.25rem;line-height:1.05;color:#1c2a22}
.topic-page .topic-card{margin-top:24px;padding:20px;border-radius:22px;background:#fff}
.topic-page .topic-prog{display:grid;gap:12px;margin-bottom:24px}
.topic-page .topic-prog>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.topic-page .topic-prog b{font-family:var(--calm-serif);font-weight:700;font-size:1.25rem;color:#1c2a22}
.topic-page .topic-prog small{font-size:0.8125rem;color:#6b6a62}
.topic-page .topic-prog i{display:block;height:6px;border-radius:3px;background:#e7e1d3;overflow:hidden}
.topic-page .topic-prog i b{display:block;height:100%;border-radius:3px;background:#1f3b2d}
.topic-page .topic-path{display:grid;gap:24px;margin:0;padding:0;list-style:none}
.topic-page .topic-step{display:flex;align-items:center;gap:14px}
.topic-page .topic-step>div{flex:1;min-width:0}
.topic-page .topic-step b{display:block;font-size:0.9375rem;font-weight:600;color:#1c2a22}
.topic-page .topic-step small{font-size:0.8125rem;color:#6b6a62}
.topic-page .topic-step.locked b{color:#6b6a62}
.topic-page .topic-node{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#1f3b2d;color:#f6f2ea}
.topic-page .topic-node.pic{background:#9fb3a3 url(assets/landing/strip-fast-or-slow.webp) center/cover no-repeat;box-shadow:0 0 0 3px #fff,0 0 0 5px #1f3b2d}
.topic-page .topic-step.done .topic-node.pic{color:#fff}
.topic-page .topic-go{flex:none;min-height:36px;padding:0 16px;border:0;border-radius:999px;background:#1f3b2d;color:#fff;font-family:var(--calm-sans);font-size:0.8125rem;font-weight:500;cursor:pointer}
.calm-home .home-top-end{display:flex;align-items:center;gap:12px}
.calm-home .home-signin{min-height:36px;padding:0 14px;border:1px solid #1f3b2d;border-radius:999px;background:none;color:#1f3b2d;font-family:var(--calm-sans);font-size:0.875rem;font-weight:500;cursor:pointer}
/* Trial: the two account doors (Welcome back and Create a profile) in the Calm studio look: no Pip, the serif title, cream, one green button. The forms and their words are unchanged */
.sheet-backdrop:has(.calm-auth-top){padding:0;align-items:stretch;background:#f6f2ea}
.sheet:has(.calm-auth-top){position:relative;display:flex;flex-direction:column;width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;padding:18px max(20px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));background:#f6f2ea}
.sheet:has(.calm-auth-top)>*{order:3;width:100%;max-width:440px;margin-left:auto;margin-right:auto}
.sheet:has(.calm-auth-top) .handle{display:none}
.sheet:has(.calm-auth-top) .sheet-head{display:contents}
.sheet:has(.calm-auth-top) .sheet-head .icon-button{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));width:auto;margin:0;color:#1c2a22}
.sheet:has(.calm-auth-top) .calm-auth-pic{order:0;flex:none;height:160px;margin-top:40px;background:#e9d9bd url(assets/landing/sprout.webp) center 38%/cover no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 160' preserveAspectRatio='none'%3E%3Cpath d='M0 18C70 40 140 36 200 18S300 0 335 22L335 138Q335 160 313 160L22 160Q0 160 0 138Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 160' preserveAspectRatio='none'%3E%3Cpath d='M0 18C70 40 140 36 200 18S300 0 335 22L335 138Q335 160 313 160L22 160Q0 160 0 138Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.sheet:has(.calm-auth-top) .calm-auth-top{order:1;margin-top:22px;color:#1f3b2d}
.sheet:has(.calm-auth-top) .calm-auth-top .trick-neuron{width:40px;height:40px}
.sheet:has(.calm-auth-top) .sheet-head h2{order:2;width:100%;max-width:440px;margin:8px auto 0}
:is(.calm-auth,.sheet:has(.calm-auth-top)){font-family:var(--calm-sans);color:#1c2a22}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .sheet-head h2,:is(.calm-auth,.sheet:has(.calm-auth-top)) .center h1{font-family:var(--calm-serif);font-weight:700;font-size:2.25rem;line-height:1.08;color:#1c2a22;text-wrap:balance}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .calm-auth-lead,:is(.calm-auth,.sheet:has(.calm-auth-top)) .center .muted{margin-top:8px;margin-bottom:0;font-size:1.0625rem;line-height:1.5;color:#56554d}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .small-note{color:#6b6a62}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .profile-form{gap:14px;margin:20px auto 0;max-width:440px}
.sheet:has(.calm-auth-top)>p.small-note{margin-top:12px;text-align:center}
.sheet:has(.calm-auth-top) #login-form{margin-top:18px}
.sheet:has(.calm-auth-top) .btn.google+.small-note{margin-bottom:0}
.sheet:has(.calm-auth-top) #login-form>label{margin-bottom:-6px}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .btn.google+.small-note{margin-top:12px}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .profile-form input:not([type=checkbox]){min-height:52px;padding:0 16px;border:1px solid #cfc8b8;border-radius:14px;background:#fff;color:#1c2a22;font-family:var(--calm-sans);font-size:1rem}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .profile-form input:not([type=checkbox]):focus{border-color:#1f3b2d;outline:2px solid #1f3b2d;outline-offset:1px}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .btn{min-height:56px;border:1px solid #1f3b2d;border-radius:999px;background:#1f3b2d;color:#fff;font-family:var(--calm-sans);font-size:1rem;font-weight:500;box-shadow:none}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .btn.google{margin-top:28px;border:1.5px solid #cfc8b8;background:transparent;color:#1c2a22}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .adult-check{min-height:56px;padding:14px 18px;border:1px solid #cfc8b8;border-radius:14px;background:#fff;font-size:1rem;font-weight:500}
.calm-auth.profile-create{max-width:440px;margin:0 auto;padding:18px 20px 40px;background:#f6f2ea}
.calm-auth>.center{text-align:left}
.calm-auth>.center .calm-auth-top{margin-top:12px}
.calm-auth.profile-create>.center h1{margin-top:18px;font-size:2rem}
.calm-auth .profile-form+.profile-form{margin-top:0}
.calm-auth .profile-form .btn.google{margin-top:0}
.calm-auth .privacy{margin-top:40px}
body:has(main.calm-auth){background:#f6f2ea}
.calm-home .home-neuron .trick-neuron{width:32px;height:32px}
/* Trial: one spacing scale for the Calm studio screens (8, 12, 16, 24, 32) and the same 20px side margin everywhere */
body.landing main.landing{padding-left:20px;padding-right:20px}
body.landing .door-src{margin-top:12px}
.first-trick .trick-h+.trick-saved-pic{margin-top:24px}
/* Trial: Up next on Home and real units on the topic pages. A track without its own picture shows the deep green */
.calm-home .home-hero.plain,.topic-page .topic-pic.plain{background:#1f3b2d}
.calm-home .home-hero .home-sub{font-size:0.9375rem;line-height:1.4}
.calm-home .home-meta{font-size:0.8125rem;opacity:.9}
.calm-home .home-today{display:flex;align-items:center;gap:12px;width:100%;margin-top:16px;padding:12px;border:0;border-radius:22px;background:#fff;text-align:left;font:inherit;color:#1c2a22;cursor:pointer}
.calm-home .home-today-pic{flex:none;width:64px;height:64px;border-radius:16px;background:#9fb3a3 url(assets/landing/strip-fast-or-slow.webp) center/cover no-repeat}
.calm-home .home-today-words{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.calm-home .home-today .home-k{font-size:0.75rem;font-weight:600;color:#56705f}
.calm-home .home-today b{font-family:var(--calm-serif);font-weight:400;font-size:1.25rem;line-height:1.15}
.calm-home .home-today .home-sub{font-size:0.8125rem;color:#6b6a62}
.calm-home .home-today-go{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#1f3b2d;color:#fff;font-size:0.9375rem}
.topic-page .topic-node{font-size:0.9375rem;font-weight:600}
.topic-page .topic-step.open .topic-node{background:#e7e1d3;color:#1f3b2d}
/* Trial: the unit intro (#intro) in the Calm studio look: cream, the serif title, the unit picture with a wave edge, white cards, one green button. Its words, blocks and buttons are Seph's */
main.intro-page{--calm-serif:'Libre Caslon Text',Georgia,serif;--calm-sans:'DM Sans',system-ui,-apple-system,sans-serif;max-width:440px;margin:0 auto;padding:16px 20px 32px;background:#f6f2ea;color:#1c2a22;font-family:var(--calm-sans)}
body:has(main.intro-page){background:#f6f2ea}
main.intro-page .session-top{padding:0 48px 12px 0;border-bottom:1px solid #e7e1d3}
main.intro-page .intro-kicker{margin-left:auto;font-size:0.8125rem;font-weight:400;color:#6b6a62}
main.intro-page .intro-hero{margin:16px 0 0;aspect-ratio:auto;height:170px;border:0;border-radius:0;background:#9fb3a3;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 170' preserveAspectRatio='none'%3E%3Cpath d='M0 22C60 4 130 2 190 20S295 42 335 12L335 148Q335 170 313 170L22 170Q0 170 0 148Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 170' preserveAspectRatio='none'%3E%3Cpath d='M0 22C60 4 130 2 190 20S295 42 335 12L335 148Q335 170 313 170L22 170Q0 170 0 148Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
main.intro-page .intro-body{padding:24px 0 0;max-width:none}
main.intro-page .intro-body>.label{font-size:0.8125rem;font-weight:600;color:#56705f}
main.intro-page .intro-body h1{margin:8px 0 16px;font-family:var(--calm-serif);font-weight:700;font-size:2rem;line-height:1.08;letter-spacing:-0.02em;color:#1c2a22;text-wrap:balance}
main.intro-page .intro-block{gap:12px;margin-bottom:12px;padding:16px;border:0;border-radius:22px;background:#fff}
main.intro-page .intro-block .intro-icon{width:32px;height:32px;border-radius:0;background:none;color:#1f3b2d}
main.intro-page .intro-block .intro-icon svg{width:32px;height:32px}
main.intro-page .intro-block h2,main.intro-page .intro-block h3{font-size:0.8125rem;font-weight:600;color:#56705f}
main.intro-page .intro-block p{font-size:1rem;line-height:1.5;color:#3d3d36}
main.intro-page .intro-block.intro-privacy{background:transparent;border:1px dashed #cfc8b8}
main.intro-page .intro-actions{gap:12px;margin-top:24px}
main.intro-page .intro-actions .btn{min-height:56px;border:1px solid #1f3b2d;border-radius:999px;background:#1f3b2d;color:#fff;font-family:var(--calm-sans);font-size:1rem;font-weight:500;box-shadow:none}
main.intro-page .intro-actions .btn.secondary{background:transparent;color:#1f3b2d}
main.intro-page .speak-btn{color:#1f3b2d}
main.intro-page .intro-pip{display:block;margin:0 0 16px}
main.intro-page .intro-pip>svg{display:none}
main.intro-page .intro-pip .speech{position:static;margin:0;padding:0;border:0;background:none;box-shadow:none;font-family:var(--calm-sans);font-size:1.0625rem;line-height:1.5;color:#3d3d36}
main.intro-page .intro-pip .speech::before,main.intro-page .intro-pip .speech::after{display:none}
/* Trial: units with their own Calm studio picture (Anchors and estimates: the anchored boat) show it on Home and on their intro instead of the painted art */
.calm-home .home-hero.unit-u0{background-image:url(assets/landing/home-anchors.webp);background-size:cover;background-position:center}
main.intro-page:has([data-action="intro-next:u0"],[data-action^="intro-start:u0:"],[data-action="intro-guide:u0"]) .intro-hero{background:#9fb3a3 url(assets/landing/unit-anchors.webp) center 62%/cover no-repeat}
main.intro-page:has([data-action="intro-next:u0"],[data-action^="intro-start:u0:"],[data-action="intro-guide:u0"]) .intro-hero>*{display:none}
/* Trial: inside a lesson the app's own color and type tokens take the Calm studio values, so every exercise (the wheel, the chips, the answers, the sheet) draws in deep green, sage and cream with Libre Caslon and DM Sans. The track themes give way here */
main.session-page,main.session-page[class*="track-"],.exercise-bar,.exercise-bar[class*="track-"]{--bg:#f6f2ea;--dark:#1c2a22;--ink:#1c2a22;--ink-soft:#56554d;--brand:#1f3b2d;--brand-hover:#16301f;--honey:#9fb3a3;--honey-deep:#1f3b2d;--line:#e2dccf;--tint:#efeae0;--surface:#fff;--section:#9fb3a3!important;--shadow:#1f3b2d!important;--soft:#dfe6dc;--on-section:#1f3b2d;--wash:#eef1ea;--accent-text:#1f3b2d;--brown:#1f3b2d;--cocoa:#1c2a22;--cream:#f6f2ea;--muted:#56554d;--paper:#efeae0;--right:#6db083;--green:#6db083;--track-honey:#9fb3a3;--track-honey-dark:#1f3b2d;--track-honey-soft:#dfe6dc;--track-honey-ink:#1f3b2d;--track-honey-tint:#eef1ea;--track-cedar:#9fb3a3;--track-cedar-dark:#1f3b2d;--track-cedar-soft:#dfe6dc;--track-cedar-ink:#1f3b2d;--track-cedar-tint:#eef1ea;--track-slate:#9fb3a3;--track-slate-dark:#1f3b2d;--track-slate-soft:#dfe6dc;--track-slate-ink:#1f3b2d;--track-slate-tint:#eef1ea;--track-plum:#9fb3a3;--track-plum-dark:#1f3b2d;--track-plum-soft:#dfe6dc;--track-plum-ink:#1f3b2d;--track-plum-tint:#eef1ea;--track-ember:#9fb3a3;--track-ember-dark:#1f3b2d;--track-ember-soft:#dfe6dc;--track-ember-ink:#1f3b2d;--track-ember-tint:#eef1ea;--track-teal:#9fb3a3;--track-teal-dark:#1f3b2d;--track-teal-soft:#dfe6dc;--track-teal-ink:#1f3b2d;--track-teal-tint:#eef1ea;}
main.session-page .wheel-disc path:nth-child(odd){fill:#9fb3a3}
main.session-page .wheel-disc path:nth-child(even){fill:#f6f2ea}
main.session-page .wheel-art circle[stroke]{stroke:#1f3b2d}
main.session-page .wheel-art circle[fill="#FEFCF8"]{fill:#fff}
main.session-page .wheel-pointer{border-top-color:#1f3b2d}
main.session-page .wheel-number{color:#1f3b2d}
main.session-page .art-strip{border:0;border-radius:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 20C80 4 150 4 210 18S300 36 335 10L335 110Q335 130 315 130L20 130Q0 130 0 110Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 130' preserveAspectRatio='none'%3E%3Cpath d='M0 20C80 4 150 4 210 18S300 36 335 10L335 110Q335 130 315 130L20 130Q0 130 0 110Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
main.session-page:has(.session-neuron[data-unit="u0"]) .art-strip{background:#9fb3a3 url(assets/landing/unit-anchors.webp) center 62%/cover no-repeat}
main.session-page:has(.session-neuron[data-unit="u0"]) .art-strip>*{visibility:hidden}
.exercise-bar .feedback-inner>svg.pip{display:none}
.exercise-bar .why-row .label{color:#56705f}
/* Trial: lesson screens show the picture first and drop the small print a phone does not need (key hints, the report link) */
main.session-page .choices .choice,main.session-page .choices button{border-color:#e2dccf;background:#fff;box-shadow:none}
@media(hover:none){main.session-page .choices .number,main.session-page .choices .key{display:none}}
.exercise-bar .feedback-copy .key{display:none}
/* Trial: the lesson in the Calm studio look, starting with the card that opens a new kind of exercise: a deep green card, three brand shapes that pop in once (under 500ms in all), the kind's name in the serif. Words and buttons are Seph's */
@keyframes calm-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
body:has(main.session-page){background:#f6f2ea}
main.session-page{--calm-serif:'Libre Caslon Text',Georgia,serif;--calm-sans:'DM Sans',system-ui,-apple-system,sans-serif;background:#f6f2ea;color:#1c2a22}
main.session-page .session-top .session-pip{display:none}
main.session-page .session-top .progress{background:#e7e1d3}
main.session-page .session-top .progress span{background:#1f3b2d}
main.session-page .session-context{color:#6b6a62}
main.session-page:has(.card-kind) .session-kind .instruction{font-family:var(--calm-sans);font-size:var(--lq-label);font-weight:600;color:#56705f}
main.session-page .session-top .stat,main.session-page .session-top .boost{display:none}
main.session-page .session-neuron{margin-left:auto;flex:none;line-height:0;color:#1f3b2d}
main.session-page .session-neuron .trick-neuron{width:34px;height:34px}
main.session-page .exp-intro.card-kind{position:relative;overflow:hidden;margin-top:8px;padding:174px 24px 24px;border:0;border-radius:28px;background:#fff;color:#1c2a22;text-align:left}
main.session-page .exp-intro.card-kind::before{content:"";position:absolute;top:0;left:0;right:0;height:150px;background:#9fb3a3 url(assets/landing/price-shortcut.webp) center/cover no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 150' preserveAspectRatio='none'%3E%3Cpath d='M0 24C70 4 140 2 200 20S300 44 335 14L335 150L0 150Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 150' preserveAspectRatio='none'%3E%3Cpath d='M0 24C70 4 140 2 200 20S300 44 335 14L335 150L0 150Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;animation:calm-pop .3s ease-out both}
main.session-page:has(.session-neuron[data-unit="u0"]) .exp-intro.card-kind::before{background-image:url(assets/landing/unit-anchors.webp);background-position:center 62%}
main.session-page .exp-intro.card-kind .exp-badge{display:none}
main.session-page .exp-intro.card-kind .question{position:relative;width:auto;margin:0 0 16px;padding:0;font-family:var(--calm-serif);font-weight:700;font-size:2.125rem;line-height:1.05;letter-spacing:-0.02em;color:#1c2a22;text-align:left}
main.session-page .exp-intro.card-kind .card-line{position:relative;margin:0 0 12px;font-size:1rem;line-height:1.5;color:#3d3d36}
main.session-page .exp-intro.card-kind .card-line .label{display:block;margin-bottom:2px;font-size:0.8125rem;font-weight:600;color:#56705f}
main.session-page .exp-intro.card-kind p.card-line:nth-of-type(3){font-size:0.875rem;color:#6b6a62}
main.session-page .exp-intro.card-kind .speak-btn{position:absolute;top:16px;right:16px;color:#1f3b2d;background:#f6f2ea;z-index:1}
main.session-page .exp-intro.card-kind .exp-badge svg{display:none}
@media(hover:none){main.session-page .exp-intro.card-kind p.card-line:nth-of-type(2){display:none}.exercise-bar .keys-btn,.exercise-bar .btn .key{display:none}}
.exercise-bar{--calm-sans:'DM Sans',system-ui,-apple-system,sans-serif;--calm-serif:'Libre Caslon Text',Georgia,serif;background:#f6f2ea;border-top-color:#e7e1d3}
.exercise-bar .btn:not(.secondary){border:1px solid #1f3b2d;border-radius:999px;background:#1f3b2d;color:#fff;box-shadow:none}
.exercise-bar .btn:not(.secondary) .key.inv{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
/* Trial: the Calm studio lesson (Anchors and estimates, lesson 1): one thing per screen, the neuron in the top bar. The wheel's spin is the one motion over 500ms, checked in check.mjs */
main.calm-lesson{--calm-serif:'Libre Caslon Text',Georgia,serif;--calm-sans:'DM Sans',system-ui,-apple-system,sans-serif;max-width:440px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;padding:16px 20px 0;background:#f6f2ea;color:#1c2a22;font-family:var(--calm-sans)}
body:has(main.calm-lesson){background:#f6f2ea}
body:has(main.calm-lesson) .help-entry{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
body:has(main.calm-lesson .cl-done) .help-entry{bottom:calc(164px + env(safe-area-inset-bottom,0px))}
main.calm-lesson .cl-top{display:flex;align-items:center;gap:14px;padding-bottom:12px}
main.calm-lesson .cl-top .icon-button{color:#1c2a22}
main.calm-lesson .cl-bar{flex:1;height:6px;border-radius:3px;background:#e7e1d3;overflow:hidden}
main.calm-lesson .cl-bar i{display:block;height:100%;border-radius:3px;background:#1f3b2d;transition:width .4s ease}
main.calm-lesson .cl-neuron{flex:none;line-height:0;color:#1f3b2d}
main.calm-lesson .cl-neuron .trick-neuron{width:34px;height:34px}
main.calm-lesson .cl-screen{flex:1;display:flex;flex-direction:column;padding-top:8px;animation:calm-pop-in .35s ease-out}
@keyframes calm-pop-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main.calm-lesson .cl-k{margin:0;font-size:0.8125rem;font-weight:600;color:#56705f}
main.calm-lesson .cl-h{margin:8px 0 0;font-family:var(--calm-serif);font-weight:700;font-size:2.125rem;line-height:1.08;letter-spacing:-0.02em;color:#1c2a22;text-wrap:balance}
main.calm-lesson .cl-h em{font-weight:400}
main.calm-lesson .cl-sub{margin:10px 0 0;font-size:1.0625rem;line-height:1.5;color:#3d3d36}
main.calm-lesson .cl-src{display:block;margin:10px 0 0;font-size:0.75rem;font-style:italic;color:#6b6a62}
main.calm-lesson .cl-pic{height:170px;margin:4px 0 20px;background:#9fb3a3 url(assets/landing/unit-anchors.webp) center 62%/cover no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 170' preserveAspectRatio='none'%3E%3Cpath d='M0 24C60 4 130 2 190 20S295 44 335 12L335 148Q335 170 313 170L22 170Q0 170 0 148Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 170' preserveAspectRatio='none'%3E%3Cpath d='M0 24C60 4 130 2 190 20S295 44 335 12L335 148Q335 170 313 170L22 170Q0 170 0 148Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
main.calm-lesson .cl-actions{position:sticky;bottom:0;z-index:2;margin:auto -20px 0;padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;background:#f6f2ea}
main.calm-lesson .cl-actions .btn{min-height:56px;border:1px solid #1f3b2d;border-radius:999px;background:#1f3b2d;color:#fff;font-family:var(--calm-sans);font-size:1rem;font-weight:500;box-shadow:none}
main.calm-lesson .cl-actions .btn.secondary{background:transparent;color:#1f3b2d}
main.calm-lesson .cl-actions .btn:disabled{opacity:.4}
main.calm-lesson .cl-wheel-wrap{position:relative;display:block;width:250px;height:250px;margin:26px auto 0;padding:0;border:0;border-radius:50%;background:none;font:inherit;color:inherit}
main.calm-lesson button.cl-wheel-wrap{cursor:pointer}
main.calm-lesson button.cl-wheel-wrap:active .cl-hub b{transform:scale(.94)}
main.calm-lesson .cl-wheel{display:block;width:100%;height:100%;transition:transform 1.4s cubic-bezier(.15,.85,.25,1)}
main.calm-lesson .cl-wheel.still{transition:none}
main.calm-lesson .cl-wheel text{font-family:var(--calm-sans);font-size:0.8125rem;font-weight:600;fill:#1f3b2d}
main.calm-lesson .cl-pointer{position:absolute;top:-6px;left:50%;z-index:2;width:0;height:0;margin-left:-11px;border:11px solid transparent;border-top:16px solid #1f3b2d;border-bottom:0}
main.calm-lesson .cl-hub{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
main.calm-lesson .cl-hub b{transition:transform .15s;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #1f3b2d;font-family:var(--calm-serif);font-size:2rem;font-weight:700;color:#1f3b2d}
main.calm-lesson .cl-note{margin:18px 0 0;text-align:center;font-size:0.9375rem;color:#56554d}
main.calm-lesson .cl-said{margin:14px 0 0;font-size:1.0625rem;color:#3d3d36}
main.calm-lesson .cl-said b{font-family:var(--calm-serif);font-size:1.25rem;color:#1c2a22;box-shadow:inset 0 -0.4em 0 #f6dcae}
main.calm-lesson .cl-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:8px 14px;border-radius:999px;background:#fff;font-size:0.875rem;color:#56554d}
main.calm-lesson .cl-chip b{color:#1f3b2d}
main.calm-lesson .cl-big{display:flex;justify-content:center;align-items:baseline;gap:4px;margin:30px 0 0;font-family:var(--calm-serif);color:#1f3b2d}
main.calm-lesson .cl-big output{min-width:2ch;font-size:3.875rem;line-height:1;font-weight:700;text-align:center}
main.calm-lesson .cl-big span{font-size:2rem}
main.calm-lesson #cl-guess{width:100%;height:32px;margin:26px 0 0;accent-color:#1f3b2d}
main.calm-lesson .cl-ends{display:flex;justify-content:space-between;font-size:0.8125rem;color:#6b6a62}
main.calm-lesson .cl-line{position:relative;height:64px;margin:24px 6px 0}
main.calm-lesson .cl-line::before{content:"";position:absolute;left:0;right:0;top:30px;height:4px;border-radius:2px;background:#e7e1d3}
main.calm-lesson .cl-mark{position:absolute;top:16px;width:32px;height:32px;margin-left:-16px;border:4px solid #f6f2ea;border-radius:50%;transition:left .45s ease}
main.calm-lesson .cl-mark.w{background:#9fb3a3}
main.calm-lesson .cl-mark.y{background:#1f3b2d}
main.calm-lesson .cl-mark.r{background:#f6dcae;box-shadow:inset 0 0 0 2px #e3a93b}
main.calm-lesson .cl-key{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 0;padding:0;list-style:none}
main.calm-lesson .cl-key li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:18px;background:#fff;font-size:0.8125rem;color:#6b6a62}
main.calm-lesson .cl-key b{font-family:var(--calm-serif);font-size:1.375rem;color:#1c2a22}
main.calm-lesson .cl-key i{width:14px;height:14px;border-radius:50%}
main.calm-lesson .cl-key .kw{background:#9fb3a3}
main.calm-lesson .cl-key .ky{background:#1f3b2d}
main.calm-lesson .cl-key .kr{background:#f6dcae;box-shadow:inset 0 0 0 2px #e3a93b}
main.calm-lesson .cl-fact{margin:18px 0 0;padding:16px;border-radius:22px;background:#fff;font-size:0.9375rem;line-height:1.5;color:#3d3d36}
main.calm-lesson .cl-fact b{color:#1f3b2d}
main.calm-lesson .cl-opts{display:grid;gap:12px;margin:24px 0 0}
main.calm-lesson .cl-opt{padding:18px;border:1px solid #e2dccf;border-radius:20px;background:#fff;text-align:left;font-family:var(--calm-sans);font-size:1.0625rem;font-weight:500;color:#1c2a22;cursor:pointer;transition:transform .15s,background .2s,border-color .2s}
main.calm-lesson .cl-opt:active{transform:scale(.98)}
main.calm-lesson .cl-opt.ok{background:#e6efe8;border-color:#1f3b2d}
main.calm-lesson .cl-opt.no{background:#f7ebe6;border-color:#b8624a}
main.calm-lesson .cl-opt:disabled{cursor:default;color:#1c2a22}
main.calm-lesson .cl-fb{margin:16px 0 0;padding:16px;border-radius:20px;background:#1f3b2d;color:#f6f2ea;font-size:0.9375rem;line-height:1.5;animation:calm-pop-in .3s ease-out}
main.calm-lesson .cl-fb b{display:block;margin-bottom:4px;font-family:var(--calm-serif);font-size:1.25rem}
main.calm-lesson .cl-fb .cl-src{color:#cfd9d1}
main.calm-lesson .cl-done{text-align:center}
main.calm-lesson .cl-done .cl-k{margin-top:28px}
main.calm-lesson .cl-done-n{display:grid;place-items:center;width:150px;height:150px;margin:40px auto 0;border-radius:50%;background:#fff;color:#1f3b2d;animation:cl-pop .3s ease-out .15s both}
main.calm-lesson .cl-done-n .trick-neuron{width:96px;height:96px}
main.calm-lesson .cl-pic.cl-pic-lake{background-image:url(assets/landing/topic-think-clearer.webp);background-position:center}
main.calm-lesson .cl-pic-lake{margin-top:24px}
main.calm-lesson .cl-card{position:relative;overflow:hidden;margin-top:12px;padding:132px 20px 24px;border-radius:28px;background:#fff}
main.calm-lesson .cl-card::before,main.calm-lesson .cl-card::after{content:"";position:absolute;border-radius:50%;animation:calm-pop .3s ease-out both}
main.calm-lesson .cl-card::before{top:-40px;right:-30px;width:150px;height:150px;background:#9fb3a3}
main.calm-lesson .cl-card::after{top:40px;right:110px;width:52px;height:52px;background:#f6dcae;animation-delay:.1s}
main.calm-lesson .cl-card.cl-shape-1::before{background:#1f3b2d}
main.calm-lesson .cl-card.cl-shape-1::after{background:#f6dcae}
main.calm-lesson .cl-card.cl-shape-2::before{top:-60px;right:auto;left:-40px;background:#f6dcae}
main.calm-lesson .cl-card.cl-shape-2::after{right:40px;background:#1f3b2d}
main.calm-lesson .cl-card.cl-shape-3::before{width:120px;height:120px;top:-20px;right:30px;background:#9fb3a3;border-radius:28px;transform:rotate(18deg)}
main.calm-lesson .cl-card-k{position:absolute;top:26px;left:20px;z-index:1;padding:0 2px;font-family:var(--calm-serif);font-size:1.375rem;font-weight:700;line-height:1.2;color:#1c2a22;box-shadow:inset 0 -0.45em 0 #f6dcae}
main.calm-lesson .cl-scene{position:relative;margin:0;font-size:1.75rem;font-weight:400;line-height:1.4}
main.calm-lesson .cl-nb{white-space:nowrap}
main.calm-lesson .cl-ask{text-align:center;font-weight:500;color:#56705f}
main.calm-lesson .cl-num{display:inline-block;margin:2px 0;padding:0 10px;border:2px solid #9fb3a3;border-radius:14px;background:#fff;font-family:var(--calm-serif);font-size:inherit;font-weight:700;line-height:1.3;color:#1f3b2d;cursor:pointer;transition:transform .15s,background .2s,border-color .2s}
main.calm-lesson .cl-num:active{transform:scale(.96)}
main.calm-lesson .cl-num.ok{border-color:#1f3b2d;background:#1f3b2d;color:#f6f2ea}
main.calm-lesson .cl-num.no{border-color:#b8624a;background:#f7ebe6;color:#7a3a28}
main.calm-lesson .cl-num:disabled{cursor:default}
main.calm-lesson .cl-num:disabled:not(.ok):not(.no){opacity:.55}
main.calm-lesson .cl-step{display:flex;justify-content:space-between;align-items:center;gap:12px}
main.calm-lesson .cl-step b{flex:none;font-family:var(--calm-serif);font-size:1.25rem;color:#1f3b2d}
main.calm-lesson .cl-step:not(.ok) b{font-family:var(--calm-sans);font-size:0.875rem;font-weight:600;color:#56705f}
main.calm-lesson .cl-total{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 0;padding:16px 20px;border-radius:20px;background:#1f3b2d;color:#f6f2ea}
main.calm-lesson .cl-total span{font-size:0.9375rem}
main.calm-lesson .cl-total b{font-family:var(--calm-serif);font-size:2rem}
main.calm-lesson .cl-key-2{grid-template-columns:1fr 1fr;margin-top:24px}
main.calm-lesson .cl-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 0}
main.calm-lesson .cl-two .cl-opt{text-align:center}
main.calm-lesson p.cl-scene{font-family:var(--calm-serif);font-size:1.5rem;color:#1c2a22}
main.calm-lesson .cl-mini{margin:14px 0 0;font-size:0.9375rem;font-weight:500;text-align:center}
main.calm-lesson .cl-mini.ok{color:#1f3b2d}
main.calm-lesson .cl-mini.no{color:#8a3d2a}
main.calm-lesson .cl-pic.cl-pic-sm{height:120px;margin-bottom:18px}
main.calm-lesson .cl-moves{display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none;counter-reset:mv}
main.calm-lesson .cl-moves li{counter-increment:mv;display:flex;gap:14px;align-items:center;padding:16px;border-radius:22px;background:#fff;font-size:0.9375rem;line-height:1.45;color:#56554d}
main.calm-lesson .cl-moves li::before{content:counter(mv);flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#f6dcae;color:#1c2a22;font-family:var(--calm-serif);font-size:1.25rem;font-weight:700}
main.calm-lesson .cl-moves li span{flex:1;min-width:0}
main.calm-lesson .cl-moves b{display:block;font-family:var(--calm-serif);font-size:1.25rem;color:#1c2a22}
main.calm-lesson .cl-why{margin-top:10px}
main.calm-lesson .cl-why summary{display:inline-block;padding:2px 0;color:#f6dcae;font-size:0.9375rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;list-style:none}
main.calm-lesson .cl-why summary::-webkit-details-marker{display:none}
main.calm-lesson .cl-why[open] summary{margin-bottom:8px}
main.calm-lesson .cl-why p{margin:0;font-size:0.9375rem;line-height:1.5;color:#f6f2ea}
@keyframes cl-pop{0%{transform:scale(.7);opacity:.3}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
/* Trial: the quit question in the Calm studio look: cream, the serif title, no Pip, one green button and an outlined one */
.sheet:has([data-action="confirm-quit"]){--calm-serif:'Libre Caslon Text',Georgia,serif;--calm-sans:'DM Sans',system-ui,-apple-system,sans-serif;border:0;border-radius:28px 28px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));background:#f6f2ea;color:#1c2a22;font-family:var(--calm-sans)}
.sheet:has([data-action="confirm-quit"]) .handle{display:none}
.sheet:has([data-action="confirm-quit"]) .sheet-head h2{font-family:var(--calm-serif);font-weight:700;font-size:1.75rem;color:#1c2a22}
.sheet:has([data-action="confirm-quit"]) .sheet-head .icon-button{color:#1c2a22}
.sheet:has([data-action="confirm-quit"]) svg.pip{display:none}
.sheet:has([data-action="confirm-quit"]) p{margin:0 0 20px;font-size:1rem;line-height:1.5;color:#3d3d36}
.sheet:has([data-action="confirm-quit"]) .btn{min-height:56px;margin-top:12px;border:1px solid #1f3b2d;border-radius:999px;background:#1f3b2d;color:#fff;font-family:var(--calm-sans);font-size:1rem;font-weight:500;box-shadow:none}
.sheet:has([data-action="confirm-quit"]) .btn.secondary{background:transparent;color:#1f3b2d}
@media(min-width:700px){.sheet:has([data-action="confirm-quit"]){border-radius:28px}}
/* Trial: Calm studio on desktop, after Seph's own wide layout (a full width top bar, a page about 1040px wide, things side by side). Phones are unchanged. Large pictures keep a wave edge of fixed height so it does not stretch */
@media(min-width:900px){
body.landing .landing-top{max-width:1040px;margin:0 auto;justify-content:space-between;padding-top:24px}
.landing-hero.calm-door{padding:24px 0 48px}
.calm-door .splash-copy{max-width:1040px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:1fr repeat(5,auto) 1fr;column-gap:64px}
.calm-door .splash-copy>*{grid-column:2}
.calm-door .splash-copy>.door-pic{grid-column:1;grid-row:1/-1;height:600px}
.calm-door .splash-copy>.door-topics{grid-row:2;margin-top:0}
.calm-door .splash-copy>.door-taste{grid-row:3}
.calm-door .splash-copy>.splash-actions{grid-row:4}
.calm-door .splash-copy>.splash-login{grid-row:5}
.calm-door .splash-copy>.terms-line{grid-row:6}
.calm-door .door-words{left:32px;right:32px;bottom:32px}
.calm-door .door-words h1,.landing-hero.calm-door .door-words h1{font-size:3.5rem}
.calm-door .door-words p{font-size:1.0625rem}
body.landing main.landing .landing-section,body.landing .landing-footer{max-width:1040px;padding-top:48px}
body.landing main.landing .landing-section h2{font-size:2.5rem}
body.landing main.landing .landing-lede,body.landing .door-src{max-width:640px}
body.landing .door-how{grid-template-columns:repeat(3,1fr)}
body.landing .door-how li{align-items:start}
body.landing main.landing .door-tiles{grid-template-columns:repeat(3,1fr)}
body.landing .door-strip img{width:104px;height:136px}
body.landing .door-wave-pic{height:300px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 60' preserveAspectRatio='none'%3E%3Cpath d='M0 16C80 40 160 44 230 24S310 4 335 26L335 60L0 60Z'/%3E%3C/svg%3E") 0 0/100% 60px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10V10H0Z'/%3E%3C/svg%3E") 0 59px/100% calc(100% - 59px) no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 60' preserveAspectRatio='none'%3E%3Cpath d='M0 16C80 40 160 44 230 24S310 4 335 26L335 60L0 60Z'/%3E%3C/svg%3E") 0 0/100% 60px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10V10H0Z'/%3E%3C/svg%3E") 0 59px/100% calc(100% - 59px) no-repeat;border-radius:0 0 28px 28px}
body.landing main.landing .price-row{max-width:640px}
body.landing main.landing #plus>.small-note{max-width:640px;text-align:left}
body.landing main.landing .faq{max-width:720px}
body.landing main.landing .door-final{text-align:center}
body.landing main.landing .door-final .door-neuron{margin-left:auto;margin-right:auto}
body.landing main.landing .door-final .btn{max-width:360px;margin:16px auto 0}
.first-trick:has(.trick-cover,.trick-learn-pic,.trick-saved-pic){max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto repeat(10,auto) 1fr;column-gap:64px;align-content:start;padding-top:24px}
.first-trick:has(.trick-cover,.trick-learn-pic,.trick-saved-pic)>*{grid-column:2}
.first-trick:has(.trick-cover,.trick-learn-pic,.trick-saved-pic)>.trick-top{grid-column:1/-1;grid-row:1}
.first-trick:has(.trick-cover,.trick-learn-pic,.trick-saved-pic)>:is(.trick-cover,.trick-learn-pic,.trick-saved-pic){grid-column:1;grid-row:2/-1;align-self:start;position:sticky;top:24px;height:min(560px,calc(100svh - 120px));margin-top:24px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C70 6 150 4 210 22S300 46 335 18L335 60L0 60Z'/%3E%3C/svg%3E") 0 0/100% 60px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10V10H0Z'/%3E%3C/svg%3E") 0 59px/100% calc(100% - 59px) no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C70 6 150 4 210 22S300 46 335 18L335 60L0 60Z'/%3E%3C/svg%3E") 0 0/100% 60px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10V10H0Z'/%3E%3C/svg%3E") 0 59px/100% calc(100% - 59px) no-repeat;border-radius:0 0 28px 28px}
.first-trick:has(.trick-cover,.trick-learn-pic,.trick-saved-pic)>.trick-actions{position:static;margin:32px 0 48px;padding:0;justify-items:stretch}
.first-trick:has(.trick-cover,.trick-learn-pic,.trick-saved-pic) .trick-actions .link-button{justify-self:center}
.first-trick:has(.trick-learn-pic)>.trick-learn-pic{height:auto;aspect-ratio:3/2;background-position:center}
.first-trick:not(:has(.trick-cover,.trick-learn-pic,.trick-saved-pic)){max-width:640px;padding-top:24px}
.first-trick:not(:has(.trick-cover,.trick-learn-pic,.trick-saved-pic))>.trick-actions{position:static;margin:32px 0 48px;padding:0;justify-items:stretch}
.first-trick:not(:has(.trick-cover,.trick-learn-pic,.trick-saved-pic)) .trick-actions .link-button{justify-self:center}
.first-trick .trick-h{font-size:2.5rem}
.first-trick .trick-q{font-size:2.25rem}
.calm-home:not(.topic-page){max-width:1040px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto 1fr;gap:0 32px;align-content:start;padding:32px 32px 120px}
.calm-home:not(.topic-page)>*{grid-column:2}
.calm-home:not(.topic-page)>.home-top,.calm-home:not(.topic-page)>.home-lead{grid-column:1/-1}
.calm-home:not(.topic-page)>.home-hero{grid-column:1;grid-row:3/-1;align-self:start;height:560px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 60' preserveAspectRatio='none'%3E%3Cpath d='M0 36C50 14 120 10 180 26S290 40 335 8L335 60L0 60Z'/%3E%3C/svg%3E") 0 0/100% 60px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10V10H0Z'/%3E%3C/svg%3E") 0 59px/100% calc(100% - 59px) no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 60' preserveAspectRatio='none'%3E%3Cpath d='M0 36C50 14 120 10 180 26S290 40 335 8L335 60L0 60Z'/%3E%3C/svg%3E") 0 0/100% 60px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10V10H0Z'/%3E%3C/svg%3E") 0 59px/100% calc(100% - 59px) no-repeat;border-radius:0 0 28px 28px}
.calm-home:not(.topic-page)>.door-topics,.calm-home:not(.topic-page)>.home-tot,.calm-home:not(.topic-page)>.home-plan{margin-top:0;margin-bottom:16px}
.calm-home:not(.topic-page)>.door-topics{margin-top:0}
.calm-home:not(.topic-page)>.home-today{margin-top:24px;margin-bottom:16px}
.calm-home:not(.topic-page)>.home-tot{margin-top:0}
.calm-home .home-hello{font-size:2.75rem}
.calm-home .home-hero-words{left:32px;right:32px;bottom:32px}
.topic-page{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto repeat(4,auto) 1fr;column-gap:64px;align-content:start;padding:32px 32px 120px}
.topic-page>*{grid-column:2}
.topic-page>.topic-top{grid-column:1/-1}
.topic-page>.topic-pic{grid-column:1;grid-row:2/-1;align-self:start;position:sticky;top:24px;height:min(560px,calc(100svh - 160px));margin-top:24px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 60' preserveAspectRatio='none'%3E%3Cpath d='M0 16C80 40 160 44 230 24S310 4 335 26L335 60L0 60Z'/%3E%3C/svg%3E") 0 0/100% 60px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10V10H0Z'/%3E%3C/svg%3E") 0 59px/100% calc(100% - 59px) no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 60' preserveAspectRatio='none'%3E%3Cpath d='M0 16C80 40 160 44 230 24S310 4 335 26L335 60L0 60Z'/%3E%3C/svg%3E") 0 0/100% 60px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10V10H0Z'/%3E%3C/svg%3E") 0 59px/100% calc(100% - 59px) no-repeat;border-radius:0 0 28px 28px}
.topic-page>.topic-k{margin-top:24px}
.sheet:has(.calm-auth-top){display:grid;grid-template-columns:minmax(0,520px) minmax(0,400px);grid-template-rows:1fr repeat(7,auto) 1fr;column-gap:72px;justify-content:center;align-content:stretch}
.sheet:has(.calm-auth-top)>*{grid-column:2;max-width:none;margin-left:0;margin-right:0}
.sheet:has(.calm-auth-top) .calm-auth-pic{grid-column:1;grid-row:1/-1;align-self:center;height:min(600px,calc(100svh - 96px));margin:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C70 6 150 4 210 22S300 46 335 18L335 60L0 60Z'/%3E%3C/svg%3E") 0 0/100% 60px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10V10H0Z'/%3E%3C/svg%3E") 0 59px/100% calc(100% - 59px) no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C70 6 150 4 210 22S300 46 335 18L335 60L0 60Z'/%3E%3C/svg%3E") 0 0/100% 60px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10V10H0Z'/%3E%3C/svg%3E") 0 59px/100% calc(100% - 59px) no-repeat;border-radius:0 0 28px 28px}
.sheet:has(.calm-auth-top) .calm-auth-top{grid-column:2;grid-row:2;margin-top:0}
.sheet:has(.calm-auth-top) .sheet-head h2{grid-column:2;grid-row:3;max-width:none;margin:8px 0 0}
.sheet:has(.calm-auth-top)>.calm-auth-lead{grid-row:4}
.sheet:has(.calm-auth-top)>.btn.google{grid-row:5}
.sheet:has(.calm-auth-top)>.btn.google+.small-note{grid-row:6}
.sheet:has(.calm-auth-top)>#login-form{grid-row:7}
.sheet:has(.calm-auth-top)>p.small-note:last-child{grid-row:8}
}
@media(min-width:900px) and (max-width:1179px){.home-nav{max-width:1040px}}
@media(min-width:1180px){
.home-nav{left:24px;right:auto;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;gap:20px;width:88px;max-width:none;margin:0;padding:20px 0;border:1px solid #e7e1d3;border-radius:28px;background:#fff}
body:has(.home-nav) .help-entry{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}
/* Trial: the first trick in Mind journal (Seph chose it on 27 October 2026). Cream paper, ink text in Bricolage Grotesque and Hanken Grotesk, a honey progress bar instead of the neuron, a baseball photo with rounded corners, the ink button, honey for what is right, a hand-drawn snail for the slow mind */
.first-trick{--calm-serif:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;--calm-sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;background:#fefcf8;color:#27201c}
body:has(main.first-trick){background:#fefcf8}
.first-trick .trick-top{border-bottom:0;padding-bottom:4px;gap:12px}
.first-trick .trick-top .icon-btn,.first-trick .trick-top button{color:#27201c}
.first-trick .trick-k{margin-left:0;order:3;font-size:0.75rem;color:#5e5651;white-space:nowrap}
.first-trick .trick-prog{flex:1;height:6px;border-radius:3px;background:#efe8db;overflow:hidden}
.first-trick .trick-prog i{display:block;height:100%;border-radius:3px;background:#eec46a}
.first-trick .trick-prog .p1{width:14%}.first-trick .trick-prog .p2{width:28%}.first-trick .trick-prog .p3{width:42%}.first-trick .trick-prog .p4{width:57%}.first-trick .trick-prog .p5{width:71%}.first-trick .trick-prog .p6{width:86%}.first-trick .trick-prog .p7{width:100%}
.first-trick .trick-cover{height:150px;margin-top:14px;border-radius:22px;background:#3b3229 url(assets/landing/journal-ball.webp) center 45%/cover no-repeat;-webkit-mask:none;mask:none}
.first-trick .trick-q{margin-top:18px;font-family:var(--calm-serif);font-weight:600;font-size:1.6875rem;line-height:1.1;letter-spacing:-0.02em;color:#27201c}
.first-trick .trick-q em{font-style:normal;box-shadow:inset 0 -0.38em 0 rgba(238,196,106,.7)}
.first-trick .trick-cents output{font-family:var(--calm-serif);font-weight:600;border-bottom-color:#27201c}
.first-trick .trick-cents span{font-family:var(--calm-serif);font-weight:600}
.first-trick .trick-hint{color:#5e5651}
.first-trick #trick-range{accent-color:#27201c}
.first-trick .trick-actions{background:#fefcf8}
.first-trick .trick-actions .btn{border-radius:18px;background:#211c15;border-color:#211c15;color:#fefcf8;font-family:var(--calm-sans);font-weight:600}
.first-trick .trick-actions .btn.secondary{background:none;border:1.5px solid #e9e2d6;color:#27201c}
.first-trick .trick-actions .link-button{color:#27201c}
.first-trick.shown .trick-cover,.first-trick.shown .trick-q{display:none}
.first-trick .trick-said{margin:22px 0 4px;font-size:0.8125rem;font-weight:600;color:#93641f}
.first-trick .trick-result{margin-top:0}
.first-trick .trick-result h2{font-family:var(--calm-serif);font-weight:600;font-size:2rem;letter-spacing:-0.02em;color:#27201c}
.first-trick .trick-result>p{color:#3d342d}
.first-trick .trick-sum p{border:1.5px solid #e9e2d6;background:#fff;color:#3d342d}
.first-trick .trick-sum p:last-child{border-color:#fce5bb;background:#fce5bb}
.first-trick .trick-sum b{color:#27201c}
.first-trick .trick-snail{display:block;margin:14px auto 0}
.first-trick .trick-result>p.trick-src,.first-trick>p.trick-src{color:#5e5651}
.first-trick .trick-label{color:#93641f}
.first-trick .trick-h{font-family:var(--calm-serif);font-weight:600;color:#27201c}
.first-trick .trick-h em{font-style:normal;color:#27201c;box-shadow:inset 0 -0.36em 0 rgba(238,196,106,.6)}
.first-trick .trick-p{color:#3d342d}
.first-trick .trick-learn-pic{border-radius:22px;background:#3b3229 url(assets/landing/journal-thinking.webp) center 30%/cover no-repeat;-webkit-mask:none;mask:none}
.first-trick .trick-anim{border:1.5px solid #e9e2d6;border-radius:20px}
.first-trick .trick-anim.two circle.ta-fast{fill:#211c15}.first-trick .trick-anim.two circle.ta-slow{fill:#eec46a}
.first-trick .ta-five{color:#27201c}
.first-trick .trick-anim.photo{border:0;border-radius:20px;-webkit-mask:none;mask:none}
.first-trick .trick-anim.photo span{border-radius:20px;background:#3b3229 url(assets/landing/journal-ball.webp) center/cover no-repeat}
.first-trick .trick-opt{border:1.5px solid #e9e2d6;font-family:var(--calm-sans);color:#27201c}
.first-trick .trick-opt.right{border-color:#eec46a;background:#fce5bb;color:#27201c}
.first-trick .trick-opt.wrong{border-color:#934f00;color:#934f00}
.first-trick .trick-feedback{color:#3d342d}
.first-trick .trick-saved-pic{height:150px;border-radius:22px;background:#fce5bb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='82' viewBox='0 0 130 82' fill='none' stroke='%2327201c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 71C40 73 84 73 100 69'/%3E%3Cpath d='M100 69C112 67 119 59 117 48C116 42 109 41 106 47L99 61'/%3E%3Ccircle cx='60' cy='46' r='24.5'/%3E%3Cpath d='M57.0 46.0 L56.8 45.6 L56.7 45.2 L56.7 44.8 L56.7 44.3 L56.8 43.8 L56.9 43.4 L57.1 42.9 L57.4 42.4 L57.8 42.0 L58.2 41.6 L58.7 41.2 L59.2 40.9 L59.8 40.7 L60.4 40.5 L61.1 40.4 L61.8 40.4 L62.5 40.5 L63.2 40.7 L64.0 41.0 L64.6 41.4 L65.3 41.8 L65.9 42.4 L66.4 43.0 L66.9 43.8 L67.3 44.5 L67.6 45.4 L67.8 46.3 L67.9 47.2 L67.9 48.2 L67.7 49.2 L67.4 50.2 L67.0 51.1 L66.5 52.0 L65.9 52.9 L65.1 53.7 L64.3 54.4 L63.3 55.0 L62.3 55.5 L61.2 55.9 L60.0 56.1 L58.8 56.2 L57.6 56.2 L56.3 56.0 L55.1 55.7 L53.9 55.2 L52.7 54.5 L51.6 53.7 L50.7 52.8 L49.8 51.7 L49.0 50.6 L48.4 49.3 L47.9 47.9 L47.6 46.5 L47.4 45.0 L47.4 43.5 L47.7 42.0 L48.1 40.5 L48.6 39.0 L49.4 37.6 L50.3 36.3 L51.4 35.1 L52.7 34.0 L54.0 33.1 L55.6 32.3 L57.2 31.7 L58.8 31.3 L60.6 31.1 L62.4 31.1 L64.2 31.3 L65.9 31.7 L67.6 32.3 L69.3 33.2 L70.9 34.2 L72.3 35.5 L73.6 36.9 L74.7 38.5 L75.7 40.2 L76.4 42.1 L77.0 44.0 L77.2 46.0 L77.3 48.0 L77.1 50.1 L76.7 52.2 L76.0 54.2 L75.1 56.1 L73.9 57.9 L72.6 59.6 L71.0 61.1 L69.2 62.4 L67.3 63.6 L65.2 64.5 L63.0 65.1 L60.8 65.6 L58.5 65.7 L56.1 65.5 L53.8 65.1 L51.5 64.4 L49.3 63.4 L47.2 62.2 L45.3 60.7 L43.5 59.0 L42.0 57.1 L40.6 54.9 L39.5 52.7 L38.7 50.2 L38.2 47.7 L38.0 45.1 L38.0 42.5 L38.4 39.9 L39.1 37.4 L40.1 34.9 L41.4 32.5 L43.0 30.3 L44.9 28.3 L47.0 26.5 L49.3 24.9 L51.7 23.6 L54.4 22.6 L57.2 22.0 L60.0 21.6'/%3E%3Cpath d='M110 43L105 27M114 44L120 28'/%3E%3Ccircle cx='105' cy='25' r='2.6' fill='%2327201c'/%3E%3Ccircle cx='120.5' cy='26' r='2.6' fill='%2327201c'/%3E%3Cpath d='M24 12L14 32H25L16 52' stroke='%23934f00'/%3E%3C/svg%3E") center/150px auto no-repeat;-webkit-mask:none;mask:none}
.first-trick .trick-saved-card{border:1.5px solid #e9e2d6}
.first-trick .trick-saved-card b{font-family:var(--calm-serif);font-weight:600;color:#27201c}
/* Trial: Home in Mind journal. A two-column grid of cards: honey and clay notes with hand-drawn pictures, photo cards with the title on the photo, the track with numbered dots, This or that on linen with a mug photo; the bottom bar on cream with a honey mark under the open tab */
.calm-home.j-home{--calm-serif:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;--calm-sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;max-width:480px;padding:18px 16px 110px;background:#fefcf8;color:#27201c}
body:has(main.j-home){background:#fefcf8}
.j-home .jh-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.j-home .home-hello{margin:0;font-family:var(--calm-serif);font-weight:600;font-size:2.125rem;line-height:1;letter-spacing:-0.02em;color:#27201c}
.j-home .home-signin{border:1.5px solid #e9e2d6;border-radius:999px;padding:8px 14px;background:#fff;font-family:var(--calm-sans);font-size:0.875rem;font-weight:600;color:#27201c;cursor:pointer}
.j-home .jh-sub{margin:6px 0 16px;font-size:0.875rem;font-weight:500;color:#5e5651}
.j-home .jh-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.j-home .jh-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:170px;margin:0;padding:14px;border:0;border-radius:22px;overflow:hidden;text-align:left;font:inherit;color:#27201c;cursor:pointer}
.j-home .jh-wide{grid-column:1/-1;min-height:0;cursor:default}
.j-home .jh-honey{background:#fce5bb}.j-home .jh-clay{background:#fce3c8}.j-home .jh-linen{background:#f1ede2}.j-home .jh-paper{background:#fff;border:1.5px solid #e9e2d6}
.j-home .jh-note-h{display:block;width:100%;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid rgba(39,32,28,.14);font-size:0.8125rem;font-weight:600}
.j-home .jh-note-p{font-size:0.8125rem;line-height:1.35;color:#3d342d}
.j-home .jh-note svg{margin-top:auto;align-self:center;max-width:100%}
.j-home .jh-photo{justify-content:flex-end;background:#3b3229 center/cover no-repeat;color:#fff}
.j-home .jh-photo.unit-u0{background-image:url(assets/landing/journal-anchors.webp)}
.j-home .jh-photo.jh-plain{background:#fce5bb;color:#27201c}
.j-home .jh-people{background-image:url(assets/landing/journal-people.webp)}
.j-home .jh-feelings{background-image:url(assets/landing/journal-feelings.webp)}
.j-home .jh-photo::before{content:"";position:absolute;inset:0;background:rgba(20,14,10,.3)}
.j-home .jh-plain::before{display:none}
.j-home .jh-cap{position:relative;z-index:1;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.j-home .jh-plain .jh-cap{text-shadow:none}
.j-home .jh-cap b{display:block;font-family:var(--calm-serif);font-weight:600;font-size:1.1875rem;line-height:1.08;letter-spacing:-0.01em}
.j-home .jh-cap small{display:block;margin-top:4px;font-size:0.75rem;font-weight:500;color:inherit}
.j-home .jh-track{background:#fff;border:1.5px solid #e9e2d6}
.j-home .jh-track-head{display:flex;justify-content:space-between;align-items:flex-start;width:100%}
.j-home .jh-track h2,.j-home .jh-tot h2{margin:0;font-family:var(--calm-serif);font-weight:600;font-size:1.125rem;color:#27201c}
.j-home .jh-track small,.j-home .jh-tot small{font-size:0.75rem;color:#5e5651}
.j-home .jh-track .link-button{padding:0;border:0;background:none;font:inherit;font-size:0.8125rem;font-weight:600;color:#27201c;text-decoration:underline;cursor:pointer}
.j-home .jh-path{display:flex;align-items:center;gap:8px;width:100%;margin:10px 0 6px;padding:6px 6px;list-style:none;overflow-x:auto;box-sizing:border-box}
.j-home .jh-path li{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f1ede2;font-size:0.75rem;font-weight:700;color:#5e5651}
.j-home .jh-path li.now{background:#eec46a;color:#211c15;box-shadow:0 0 0 4px #fce5bb}
.j-home .jh-path li.done{background:#eec46a;color:#fefcf8}
.j-home .jh-path li.done svg{width:14px;height:14px;stroke:#27201c;stroke-width:3}
.j-home .jh-row{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 0;border-top:1px solid #efe8db;font-size:0.875rem;color:#5e5651}
.j-home .jh-row.now{color:#27201c}
.j-home .jh-row b{font-weight:600}
.j-home .jh-row button{border:0;border-radius:12px;padding:8px 14px;background:#211c15;color:#fefcf8;font:inherit;font-weight:700;font-size:0.8125rem;cursor:pointer}
.j-home .jh-row span{font-size:0.75rem}
.j-home .jh-tot-head{display:flex;gap:12px;align-items:center}
.j-home .jh-tot-pic{width:46px;height:46px;border-radius:50%;background:#3b3229 url(assets/landing/journal-mug.webp) center/cover no-repeat}
.j-home .jh-tot>p{margin:12px 0 10px;font-size:0.9375rem;line-height:1.4;color:#27201c}
.j-home .home-tot-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.j-home .home-tot-btns button{border:1.5px solid #27201c;border-radius:14px;padding:11px 8px;background:#fff;font:inherit;font-weight:600;font-size:0.875rem;color:#27201c;cursor:pointer}
.j-home .home-tot-btns button:last-child{background:#211c15;color:#fefcf8}
.j-home .home-tot-res b{box-shadow:inset 0 -0.42em 0 rgba(238,196,106,.6)}
.j-home .home-tot-note,.j-home .home-tot-topic{margin:6px 0 0;font-size:0.875rem;line-height:1.45;color:#3d342d}
.j-home .jh-ttl{font-family:var(--calm-serif);font-weight:600;font-size:1.125rem;line-height:1.1}
.j-home .jh-mut{margin-top:4px;font-size:0.75rem;color:#5e5651}
.j-home .jh-trick svg{margin-top:auto;align-self:flex-end}
.j-home .jh-card:focus-visible{outline:2px solid #27201c;outline-offset:2px}
body:has(main.j-home) .home-nav{background:#fefcf8;border-top-color:#e9e2d6}
body:has(main.j-home) .home-nav{--calm-sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif}
body:has(main.j-home) .home-nav span,body:has(main.j-home) .home-nav button{font-family:var(--calm-sans);color:#5e5651}
body:has(main.j-home) .home-nav .on{position:relative;color:#27201c;font-weight:700}
body:has(main.j-home) .home-nav .on::after{content:"";position:absolute;bottom:-7px;left:50%;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:#eec46a}
/* Trial: the Anchors lessons in Mind journal. Cream paper, ink, honey: a hand-drawn style wheel in honey, clay and white with an ink rim and a honey pointer, a honey progress bar without the neuron, headlines in Bricolage Grotesque with honey strokes, right answers in honey, wrong ones in ochre, feedback on ink */
main.calm-lesson{--calm-serif:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;--calm-sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;background:#fefcf8;color:#27201c}
body:has(main.calm-lesson){background:#fefcf8}
main.calm-lesson .cl-actions{background:#fefcf8}
main.calm-lesson .cl-top .icon-button{color:#27201c}
main.calm-lesson .cl-top{gap:10px}
main.calm-lesson .cl-top [data-action="trick-home"]{order:3}
main.calm-lesson .cl-top .cl-bar{order:2}
main.calm-lesson .cl-bar{background:#efe8db}
main.calm-lesson .cl-bar i{background:#eec46a}
main.calm-lesson .cl-k{color:#93641f}
main.calm-lesson .cl-h{font-weight:600;color:#27201c}
main.calm-lesson .cl-h em{font-style:normal;font-weight:600;box-shadow:inset 0 -0.36em 0 rgba(238,196,106,.6)}
main.calm-lesson .cl-sub{color:#3d342d}
main.calm-lesson .cl-src{color:#5e5651}
main.calm-lesson .cl-pic{height:170px;border-radius:22px;background:#3b3229 url(assets/landing/journal-anchors.webp) center 60%/cover no-repeat;-webkit-mask:none;mask:none}
main.calm-lesson .cl-pic.cl-pic-lake{background-image:url(assets/landing/journal-thinking.webp);background-position:center 30%}
main.calm-lesson .cl-actions .btn{border-color:#211c15;border-radius:18px;background:#211c15;color:#fefcf8;font-weight:600}
main.calm-lesson .cl-actions .btn.secondary{border:1.5px solid #e9e2d6;background:transparent;color:#27201c}
main.calm-lesson .cl-wheel text{fill:#27201c}
main.calm-lesson .cl-pointer{border-top-color:#eec46a}
main.calm-lesson .cl-hub b{box-shadow:0 0 0 2.6px #27201c;font-weight:600;color:#27201c}
main.calm-lesson .cl-note{color:#3d342d}
main.calm-lesson .cl-said{color:#3d342d}
main.calm-lesson .cl-said b{color:#27201c;box-shadow:inset 0 -0.4em 0 #fce5bb}
main.calm-lesson .cl-chip{border:1.5px solid #e9e2d6}
main.calm-lesson .cl-chip b{color:#27201c}
main.calm-lesson .cl-big{color:#27201c}
main.calm-lesson .cl-big output{font-weight:600}
main.calm-lesson #cl-guess{accent-color:#27201c}
main.calm-lesson .cl-ends{color:#5e5651}
main.calm-lesson .cl-line::before{background:#efe8db}
main.calm-lesson .cl-mark{border-color:#fefcf8}
main.calm-lesson .cl-mark.w,main.calm-lesson .cl-key .kw{background:#fce3c8;box-shadow:inset 0 0 0 2px #27201c}
main.calm-lesson .cl-mark.y,main.calm-lesson .cl-key .ky{background:#27201c}
main.calm-lesson .cl-mark.r,main.calm-lesson .cl-key .kr{background:#eec46a;box-shadow:none}
main.calm-lesson .cl-key li{border:1.5px solid #e9e2d6;color:#5e5651}
main.calm-lesson .cl-key b{font-weight:600;color:#27201c}
main.calm-lesson .cl-fact{border:1.5px solid #e9e2d6;color:#3d342d}
main.calm-lesson .cl-fact b{color:#27201c;box-shadow:inset 0 -0.38em 0 #fce5bb}
main.calm-lesson .cl-opt{border:1.5px solid #e9e2d6;color:#27201c}
main.calm-lesson .cl-opt.ok{background:#fce5bb;border-color:#eec46a}
main.calm-lesson .cl-opt.no{background:#fff;border-color:#934f00;color:#934f00}
main.calm-lesson .cl-opt:disabled{color:#27201c}
main.calm-lesson .cl-opt.no:disabled{color:#934f00}
main.calm-lesson .cl-fb{background:#211c15;color:#fefcf8}
main.calm-lesson .cl-fb b{font-weight:600}
main.calm-lesson .cl-fb .cl-src{color:#d9d0c3}
main.calm-lesson .cl-why summary{color:#eec46a}
main.calm-lesson .cl-why p{color:#fefcf8}
main.calm-lesson .cl-done-n{background:#fce5bb;color:#27201c}
main.calm-lesson .cl-done-n svg{width:110px;height:auto}
main.calm-lesson .cl-card{border:1.5px solid #e9e2d6}
main.calm-lesson .cl-card::before,main.calm-lesson .cl-card.cl-shape-1::before{background:#fce5bb}
main.calm-lesson .cl-card::after,main.calm-lesson .cl-card.cl-shape-1::after{background:#eec46a}
main.calm-lesson .cl-card.cl-shape-2::before{background:#fce3c8}
main.calm-lesson .cl-card.cl-shape-2::after{background:#27201c}
main.calm-lesson .cl-card.cl-shape-3::before{background:#f1ede2}
main.calm-lesson .cl-card-k{font-weight:600;color:#27201c;box-shadow:inset 0 -0.45em 0 #fce5bb}
main.calm-lesson p.cl-scene{color:#27201c}
main.calm-lesson .cl-ask{color:#93641f}
main.calm-lesson .cl-num{border:1.5px solid #e9e2d6;font-weight:600;color:#27201c}
main.calm-lesson .cl-num.ok{border-color:#eec46a;background:#fce5bb;color:#27201c}
main.calm-lesson .cl-num.no{border-color:#934f00;background:#fff;color:#934f00}
main.calm-lesson .cl-step b{color:#27201c}
main.calm-lesson .cl-step:not(.ok) b{color:#93641f}
main.calm-lesson .cl-total{background:#211c15;color:#fefcf8}
main.calm-lesson .cl-total b{color:#eec46a}
main.calm-lesson .cl-mini.ok{color:#27201c}
main.calm-lesson .cl-mini.no{color:#934f00}
main.calm-lesson .cl-moves li{border:1.5px solid #e9e2d6;color:#3d342d}
main.calm-lesson .cl-moves li::before{background:#fce5bb;color:#27201c}
main.calm-lesson .cl-moves b{font-weight:600;color:#27201c}
.j-home .home-hello em{font-style:normal;box-shadow:inset 0 -0.34em 0 rgba(238,196,106,.75)}
.j-home .jh-subrow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:6px 0 16px}
.j-home .jh-subrow .jh-sub{margin:0}
.j-home .jh-all{flex:none;padding:0;border:0;background:none;font:inherit;font-size:0.875rem;font-weight:700;color:#27201c;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.j-home .jh-cat{flex:none;display:grid;place-items:center;width:46px;height:46px;border:1.5px solid #e9e2d6;border-radius:50%;background:#fff;color:#27201c;cursor:pointer}
.j-home .jh-cat:focus-visible{outline:2px solid #27201c;outline-offset:2px}
.j-home .jh-plain .jl-draw{margin:8px 0 auto;align-self:center}
.j-home .jh-plain .jl-draw svg{width:76px;height:76px}
.j-home .jh-plain{justify-content:space-between}
.j-home .jh-row-tx{display:flex;flex-direction:column;gap:6px}
.j-home .jh-les{display:flex;align-items:center;gap:5px}
.j-home .jh-les i{width:18px;height:18px;border-radius:50%;background:#f1ede2;display:grid;place-items:center;color:#fefcf8}
.j-home .jh-les i.done{background:#eec46a}
.j-home .jh-les i.now{box-shadow:inset 0 0 0 1.5px #eec46a;background:#fefcf8}
.j-home .jh-les i svg{width:11px;height:11px;stroke-width:4}
.j-home .jh-les small{margin-left:4px;font-size:0.75rem;font-weight:500;color:#5e5651}
/* Trial: the library in Mind journal */
.j-lib .jl-lesson.done .jl-n{border-color:#eec46a;background:#eec46a;color:#fefcf8}
.j-lib .jl-lesson.done .jl-n svg{stroke-width:4}
.j-lib .jl-go:has(svg){background:#eec46a;color:#fefcf8}
.j-lib .home-hello{margin-top:6px}
.j-lib .jh-sub{margin:8px 0 26px}
.j-lib .jh-grid{gap:16px}
.j-lib .jh-card{min-height:184px}
.j-lib .jh-card .jh-mut{margin-top:6px}
.j-lib .jl-list{gap:12px}
.j-lib .jl-head{margin-bottom:6px}
.j-lib .jl-blurb{margin:16px 2px 22px}
.j-lib .jl-top{display:flex;justify-content:space-between;align-items:center;margin:-2px 0 12px;font-size:0.8125rem;font-weight:600;color:#5e5651}
.j-lib .jl-back{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid #e9e2d6;border-radius:50%;background:#fff;color:#27201c;cursor:pointer}
.j-lib .jl-top span:last-child{width:40px}
.j-lib .jl-draw{margin-top:auto;align-self:center}
:is(.j-home,.calm-lesson) .jp-thinking{background-image:url(assets/landing/journal-thinking.webp)}:is(.j-home,.calm-lesson) .jp-people{background-image:url(assets/landing/journal-people.webp)}:is(.j-home,.calm-lesson) .jp-memory{background-image:url(assets/landing/journal-memory.webp)}:is(.j-home,.calm-lesson) .jp-feelings{background-image:url(assets/landing/journal-feelings.webp)}:is(.j-home,.calm-lesson) .jp-know{background-image:url(assets/landing/journal-know.webp)}:is(.j-home,.calm-lesson) .jp-window{background-image:url(assets/landing/journal-window.webp)}:is(.j-home,.calm-lesson) .jp-anchors{background-image:url(assets/landing/journal-anchors.webp)}:is(.j-home,.calm-lesson) .jp-ball{background-image:url(assets/landing/journal-ball.webp)}:is(.j-home,.calm-lesson) .jp-mug{background-image:url(assets/landing/journal-mug.webp)}:is(.j-home,.calm-lesson) .jp-esteem{background-image:url(assets/landing/journal-esteem.webp)}:is(.j-home,.calm-lesson) .jp-c5{background-image:url(assets/landing/journal-c5.webp)}:is(.j-home,.calm-lesson) .jp-c6{background-image:url(assets/landing/journal-c6.webp)}:is(.j-home,.calm-lesson) .jp-c7{background-image:url(assets/landing/ch-snooze.jpg?v=4)}:is(.j-home,.calm-lesson) .jp-c8{background-image:url(assets/landing/journal-c8-pencils.jpg?v=4)}:is(.j-home,.calm-lesson) .jp-c9{background-image:url(assets/landing/journal-c9.webp)}:is(.j-home,.calm-lesson) .jp-c10{background-image:url(assets/landing/journal-c10.webp)}:is(.j-home,.calm-lesson) .jp-c12{background-image:url(assets/landing/journal-c12.webp)}:is(.j-home,.calm-lesson) .jp-c13{background-image:url(assets/landing/journal-c13.webp)}:is(.j-home,.calm-lesson) .jp-c14{background-image:url(assets/landing/journal-c14.webp)}:is(.j-home,.calm-lesson) .jp-c15{background-image:url(assets/landing/journal-c15.webp)}:is(.j-home,.calm-lesson) .jp-c16{background-image:url(assets/landing/journal-c16.webp)}:is(.j-home,.calm-lesson) .jp-c18{background-image:url(assets/landing/ch-regret.jpg?v=4)}:is(.j-home,.calm-lesson) .jp-c20{background-image:url(assets/landing/journal-c20.webp)}:is(.j-home,.calm-lesson) .jp-c21{background-image:url(assets/landing/journal-c21.webp)}:is(.j-home,.calm-lesson) .jp-c22{background-image:url(assets/landing/ch-billboards.jpg?v=4)}:is(.j-home,.calm-lesson) .jp-c23{background-image:url(assets/landing/journal-c23.webp)}:is(.j-home,.calm-lesson) .jp-c24{background-image:url(assets/landing/journal-c24.webp)}:is(.j-home,.calm-lesson) .jp-c25{background-image:url(assets/landing/journal-c25.webp)}:is(.j-home,.calm-lesson) .jp-c27{background-image:url(assets/landing/journal-c27.webp)}:is(.j-home,.calm-lesson) .jp-c28{background-image:url(assets/landing/journal-c28.webp)}:is(.j-home,.calm-lesson) .jp-c29{background-image:url(assets/landing/journal-c29.webp)}:is(.j-home,.calm-lesson) .jp-c30{background-image:url(assets/landing/journal-c30.webp)}:is(.j-home,.calm-lesson) .jp-c31{background-image:url(assets/landing/journal-c31.webp)}:is(.j-home,.calm-lesson) .jp-c32{background-image:url(assets/landing/journal-c32.webp)}:is(.j-home,.calm-lesson) .jp-c33{background-image:url(assets/landing/journal-c33.webp)}:is(.j-home,.calm-lesson) .jp-c34{background-image:url(assets/landing/journal-c34.webp)}:is(.j-home,.calm-lesson) .jp-sunk{background-image:url(assets/landing/journal-sunk.webp)}:is(.j-home,.calm-lesson) .jp-confirm{background-image:url(assets/landing/journal-confirm.webp)}:is(.j-home,.calm-lesson) .jp-hindsight{background-image:url(assets/landing/journal-hindsight.webp)}:is(.j-home,.calm-lesson) .jp-framing{background-image:url(assets/landing/journal-framing.webp)}:is(.j-home,.calm-lesson) .jp-knowing{background-image:url(assets/landing/journal-knowing.webp)}:is(.j-home,.calm-lesson) .jp-impressions{background-image:url(assets/landing/journal-impressions.webp)}
.j-lib .jl-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.j-lib .jl-unit{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:1.5px solid #e9e2d6;border-radius:18px;background:#fff;text-align:left;font:inherit;color:#27201c;cursor:pointer}
.j-lib .jl-unit.now{border-color:#eec46a;background:#fffaf0}
.j-lib .jl-th{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:14px;overflow:hidden}
.j-lib .jl-th svg{width:38px;height:38px}
.j-lib .jl-ph{background-color:#3b3229;background-position:center;background-size:cover;background-repeat:no-repeat}
.j-lib .jl-tx{flex:1;min-width:0}
.j-lib .jl-tx small{display:block;font-size:0.6875rem;font-weight:600;color:#93641f}
.j-lib .jl-tx b{display:block;font-family:var(--calm-serif);font-weight:600;font-size:0.9375rem;line-height:1.2;color:#27201c}
.j-lib .jl-tx span{font-size:0.75rem;color:#5e5651}
.j-lib .jl-go{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eec46a;color:#27201c}
.j-lib .jl-head{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:170px;padding:14px 16px;border-radius:22px;overflow:hidden;background-size:cover;background-position:center}
.j-lib .jl-head.jh-photo{color:#fff}
.j-lib .jl-head .jl-draw{position:absolute;top:14px;right:16px}
.j-lib .jl-head .jh-cap b{font-size:1.5rem}
.j-lib .jl-blurb{margin:12px 2px 14px;font-size:0.9375rem;line-height:1.45;color:#3d342d}
.j-lib .jl-lesson{display:flex;align-items:center;gap:12px;padding:12px;border:1.5px solid #e9e2d6;border-radius:18px;background:#fff;color:#5e5651}
.j-lib .jl-lesson.now{border-color:#fce5bb;background:#fce5bb;color:#27201c}
.j-lib .jl-lesson.done{color:#27201c}
.j-lib .jl-n{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1.5px solid currentColor;border-radius:50%;font-size:0.8125rem;font-weight:700}
.j-lib .jl-lesson button{flex:none;border:0;border-radius:12px;padding:8px 14px;background:#211c15;color:#fefcf8;font:inherit;font-size:0.8125rem;font-weight:700;cursor:pointer}
.j-lib .jl-lock{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f1ede2;color:#5e5651}
.j-lib .jl-note{margin:14px 2px 0;font-size:0.8125rem;color:#5e5651}
/* Trial: Welcome back and Create a profile in Mind journal. Cream paper, the window photo with rounded corners, Psychology.com · Learn in place of the neuron, Bricolage Grotesque headings, white fields with a soft line and an ink focus, the ink button */
.calm-auth,.sheet:has(.calm-auth-top){--calm-serif:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;--calm-sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif}
.sheet-backdrop:has(.calm-auth-top),.calm-auth.profile-create,body:has(main.calm-auth){background:#fefcf8}
.sheet:has(.calm-auth-top){background:#fefcf8}
:is(.calm-auth,.sheet:has(.calm-auth-top)){color:#27201c}
.sheet:has(.calm-auth-top) .sheet-head .icon-button{color:#27201c}
.sheet:has(.calm-auth-top) .calm-auth-pic{border-radius:22px;background:#3b3229 url(assets/landing/journal-window.webp) center 30%/cover no-repeat;-webkit-mask:none;mask:none}
.j-auth-brand{font-family:var(--calm-serif);font-weight:700;font-size:1rem;color:#27201c}
.j-auth-brand .brand-com{color:#eec46a}
.j-auth-brand .brand-dot{margin:0 6px;color:#5e5651}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .sheet-head h2,:is(.calm-auth,.sheet:has(.calm-auth-top)) .center h1{font-family:var(--calm-serif);font-weight:600;letter-spacing:-0.02em;color:#27201c}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .calm-auth-lead,:is(.calm-auth,.sheet:has(.calm-auth-top)) .center .muted{color:#3d342d}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .small-note{color:#5e5651}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .profile-form input:not([type=checkbox]){border:1.5px solid #e9e2d6;color:#27201c}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .profile-form input:not([type=checkbox]):focus{border-color:#27201c;outline-color:#27201c}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .btn{border-color:#211c15;border-radius:18px;background:#211c15;color:#fefcf8;font-weight:600}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .btn.google{border:1.5px solid #e9e2d6;background:#fff;color:#27201c}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .adult-check{border:1.5px solid #e9e2d6}
:is(.calm-auth,.sheet:has(.calm-auth-top)) .adult-check input{accent-color:#eec46a}
/* Trial: photos that carry text get a plain dark layer so the text reads without a shadow */
.j-home .jh-photo::before,.j-lib .jl-head.jh-photo::before{background-color:rgba(20,14,10,.3);}
:is(.splash,.landing-hero).calm-door .door-pic::after{background-color:rgba(20,14,10,.3);}
.j-lib .jl-ph,.j-home .jh-tot-pic,body.landing main.landing .door-tiles .tc-photo,:is(.splash,.landing-hero).calm-door .door-topics li:nth-child(2) .door-topic,:is(.splash,.landing-hero).calm-door .door-topics li:nth-child(4) .door-topic,.first-trick .trick-cover,.first-trick .trick-learn-pic,main.calm-lesson .cl-pic,.sheet:has(.calm-auth-top) .calm-auth-pic{position:relative}
.j-lib .jl-ph::after,.j-home .jh-tot-pic::after,body.landing main.landing .door-tiles .tc-photo::after,:is(.splash,.landing-hero).calm-door .door-topics li:nth-child(2) .door-topic::after,:is(.splash,.landing-hero).calm-door .door-topics li:nth-child(4) .door-topic::after,.first-trick .trick-cover::after,.first-trick .trick-learn-pic::after,main.calm-lesson .cl-pic::after,.sheet:has(.calm-auth-top) .calm-auth-pic::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
body.landing main.landing .door-tiles .tc-photo h3{z-index:1}
:is(.splash,.landing-hero).calm-door .door-topics .door-topic{isolation:isolate}
main.calm-lesson .cl-fb{margin-top:24px}
main.calm-lesson .cl-fact{margin-top:24px}
/* Trial: more air in Mind journal. Wider side margins, more room between the heading, the text and what follows, bigger gaps between cards */
main.calm-lesson{padding:16px 24px 0}
main.calm-lesson .cl-actions{margin:auto -24px 0;padding:16px 24px calc(20px + env(safe-area-inset-bottom,0px))}
main.calm-lesson .cl-screen{padding-top:16px}
main.calm-lesson .cl-h{margin-top:12px;line-height:1.12}
main.calm-lesson .cl-sub{margin-top:16px;line-height:1.55}
main.calm-lesson .cl-opts{gap:16px;margin-top:32px}
main.calm-lesson .cl-key{gap:12px;margin-top:24px}
main.calm-lesson .cl-wheel-wrap{margin-top:32px}
main.calm-lesson .cl-note{margin-top:24px}
main.calm-lesson .cl-big{margin-top:40px}
main.calm-lesson #cl-guess{margin-top:32px}
main.calm-lesson .cl-pic{margin:8px 0 28px}
main.calm-lesson .cl-src{margin-top:16px}
main.calm-lesson .cl-moves{gap:16px;margin-top:32px}
main.calm-lesson .cl-two{gap:16px;margin-top:24px}
main.calm-lesson .cl-total{margin-top:28px}
.first-trick{padding:16px 24px 0}
.first-trick .trick-actions{margin:auto -24px 0;padding:16px 24px calc(20px + env(safe-area-inset-bottom,0px))}
.first-trick .trick-cover,.first-trick .trick-learn-pic{margin-top:20px}
.first-trick .trick-q{margin-top:28px;line-height:1.14}
.first-trick .trick-cents{margin-top:40px}
.first-trick #trick-range{margin-top:32px}
.first-trick .trick-label{margin-top:32px}
.first-trick .trick-h{margin-top:12px}
.first-trick .trick-p{margin-top:16px;line-height:1.55}
.first-trick .trick-opts{gap:16px;margin-top:32px}
.first-trick .trick-feedback{margin-top:24px}
.first-trick .trick-sum{gap:12px;margin-top:24px}
.first-trick .trick-said{margin-top:28px}
.first-trick .trick-anim{margin-top:20px}
.calm-home.j-home{padding:22px 16px 112px}
.calm-home.j-home.j-lib{padding-top:20px}
/* Trial: less space around Home, and the honey cards closer together */
.j-home .jh-grid{gap:12px}
.j-home .jh-head{margin-bottom:2px}
.j-home .jh-sub{margin:8px 0 24px}
.j-home .jh-grid{gap:14px}
/* Trial: no shadow behind any text in Mind journal; text on photos stays readable through a darker photo instead */
.j-home *,.j-lib *,:is(.splash,.landing-hero).calm-door *,body.landing main.landing *,.first-trick *,main.calm-lesson *,.sheet:has(.calm-auth-top) *{text-shadow:none!important}
.j-home .jh-photo::before,.j-lib .jl-head.jh-photo::before,:is(.splash,.landing-hero).calm-door .door-pic::after{background-color:rgba(20,14,10,.46)}
:is(.splash,.landing-hero).calm-door .door-topics li:nth-child(2) .door-topic::after,:is(.splash,.landing-hero).calm-door .door-topics li:nth-child(4) .door-topic::after,body.landing main.landing .door-tiles .tc-photo::after{background-color:rgba(20,14,10,.5);z-index:-1}
body.landing main.landing .door-tiles .tc-photo{isolation:isolate}
:is(.splash,.landing-hero).calm-door .door-topics .door-topic{z-index:0}
/* Trial: a pencil grain on the hand-drawn pictures only (never on photos), so the lines look drawn by hand */
:is(.splash,.landing-hero).calm-door .door-topic svg,body.landing main.landing .door-tiles .tc-draw svg,body.landing .door-snail svg,body.landing .peek-card svg,.first-trick .trick-snail,.j-home .jh-note svg,.j-home .jh-trick svg,.j-lib .jl-draw svg,.j-lib .jl-th svg,main.calm-lesson .jg-stk svg,main.calm-lesson .cl-done-n svg{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27120%27%20height=%27120%27%3E%3Cfilter%20id=%27p%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%271.1%27%20numOctaves=%272%27%20stitchTiles=%27stitch%27/%3E%3CfeColorMatrix%20values=%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20-2.2%202.1%27/%3E%3C/filter%3E%3Crect%20width=%27120%27%20height=%27120%27%20filter=%27url(%23p)%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27120%27%20height=%27120%27%3E%3Cfilter%20id=%27p%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%271.1%27%20numOctaves=%272%27%20stitchTiles=%27stitch%27/%3E%3CfeColorMatrix%20values=%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20-2.2%202.1%27/%3E%3C/filter%3E%3Crect%20width=%27120%27%20height=%27120%27%20filter=%27url(%23p)%27/%3E%3C/svg%3E");-webkit-mask-size:120px;mask-size:120px}
body.landing main.landing .door-tiles .tc-photo::after{z-index:0}
body.landing main.landing .door-tiles .tc-photo h3{position:absolute;z-index:1}
/* Trial: chapter 2 game pieces in Mind journal */
main.calm-lesson .jg-nums{display:flex;justify-content:center;gap:10px;margin:22px 0 4px}
main.calm-lesson .jg-nums span,main.calm-lesson .jg-nums input{box-sizing:border-box;width:72px;height:72px;border-radius:20px;background:#fce5bb;display:grid;place-items:center;font-family:var(--calm-serif);font-weight:600;font-size:2.125rem;color:#27201c;text-align:center}
main.calm-lesson .jg-inp input{border:1.5px solid #27201c;background:#fff;padding:0}
main.calm-lesson .jg-inp input:focus{outline:2px solid #eec46a;outline-offset:2px}
main.calm-lesson .jg-c{text-align:center}
main.calm-lesson .jg-trips{display:grid;gap:8px;margin-top:16px}
main.calm-lesson .jg-trip{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1.5px solid #e9e2d6;border-radius:16px;background:#fff}
main.calm-lesson .jg-trip b{font-family:var(--calm-serif);font-weight:600;font-size:1.125rem}
main.calm-lesson .jg-trip .yes{padding:4px 10px;border-radius:10px;background:#fce5bb;font-size:0.8125rem;font-weight:700}
main.calm-lesson .jg-trip .no{padding:3px 9px;border:1.5px solid #934f00;border-radius:10px;font-size:0.8125rem;font-weight:700;color:#934f00}
main.calm-lesson .jg-h2{font-size:1.625rem}
main.calm-lesson .jg-scene{margin:20px 0 0;font-size:1.1875rem;line-height:1.9;color:#27201c}
main.calm-lesson .jg-tap{margin:0;padding:2px 8px;border:1.5px solid #e9e2d6;border-radius:10px;background:#fff;font:inherit;line-height:1.5;color:#27201c;text-align:left;cursor:pointer}
main.calm-lesson .jg-tap.ok{border-color:#eec46a;background:#fce5bb}
main.calm-lesson .jg-tap.no{border-color:#934f00;color:#934f00}
main.calm-lesson .jg-tap:disabled{cursor:default}
main.calm-lesson .jg-draw{display:flex;justify-content:center;margin-top:28px}
main.calm-lesson .jg-draw svg{-webkit-mask-image:inherit}
main.calm-lesson .jg-belief{margin-top:18px;padding:14px 16px;border-radius:18px;background:#f1ede2}
main.calm-lesson .jg-belief small{display:block;font-size:0.75rem;font-weight:600;color:#93641f}
main.calm-lesson .jg-belief p{margin:4px 0 0;font-size:1rem;line-height:1.45;color:#27201c}
main.calm-lesson .jg-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
main.calm-lesson .jg-person{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:150px;padding:16px;border:1.5px solid #e9e2d6;border-radius:20px;background:#fff;text-align:left;font:inherit;color:#27201c;cursor:pointer}
main.calm-lesson .jg-person b{font-family:var(--calm-serif);font-weight:600;font-size:1.25rem}
main.calm-lesson .jg-person span{font-size:0.9375rem;line-height:1.4;color:#3d342d}
main.calm-lesson .jg-person.ok{border-color:#eec46a;background:#fce5bb}
main.calm-lesson .jg-person.no{border-color:#934f00}
main.calm-lesson .jg-person.no b{color:#934f00}
main.calm-lesson .jg-person:disabled{cursor:default}
.first-trick .trick-where{margin:16px 0 0;font-size:0.8125rem;font-weight:600;color:#93641f}
.first-trick .trick-where+.trick-cover{margin-top:10px}
.first-trick.shown .trick-where{margin-top:20px}
/* Trial: the first game from Start is the Anchors lesson; it keeps the lesson look */
main.calm-lesson.first-trick{max-width:440px;padding:16px 24px 0;background:#fefcf8}
/* Trial: lesson 2 says plainly what to tap: a honey note with a hand-drawn arrow above the scene, dashed outlines on the tappable numbers, and two short pulses when the scene opens */
main.calm-lesson .cl-tapnote{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:14px 0 6px;padding:12px 14px 4px;border-radius:16px;background:#fce5bb;transform:rotate(-1deg)}
main.calm-lesson .cl-tapnote b{font-family:var(--calm-serif);font-weight:600;font-size:1.125rem;line-height:1.25;color:#27201c;padding-bottom:8px}
main.calm-lesson .cl-tapnote svg{flex:none;margin-bottom:-12px}
main.calm-lesson .cl-wait .cl-num{border:2px dashed #eec46a;animation:cl-nudge .45s ease-in-out .3s}
@keyframes cl-nudge{30%{transform:scale(1.1)}60%{transform:scale(.97)}}
body.reduce-motion main.calm-lesson .cl-wait .cl-num{animation:none}
@media (prefers-reduced-motion:reduce){main.calm-lesson .cl-wait .cl-num{animation:none}}
/* Trial: in the Mind journal lessons Help is a small life ring in the top bar, left of the close button, so it never sits on the answer box or the Continue button. It still opens the same sheet with the crisis lines first. */
body:has(main.calm-lesson) .help-entry{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));bottom:auto;right:calc(max(0px,(100vw - 440px)/2) + 74px);width:44px;height:44px;padding:0;justify-content:center;border:0;background:transparent}
body:has(main.calm-lesson) .help-entry span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body:has(main.calm-lesson) .help-entry .icon{color:#27201c}
main.calm-lesson .cl-top .cl-bar{margin-right:50px}
/* Trial: livelier question screens. Every answer list gets a colored letter circle (A, B, C) and the chapter 2 cases open with a small hand-drawn picture in a colored circle. */
main.calm-lesson .cl-opts:not(:has(.cl-step)){counter-reset:jo}
main.calm-lesson .cl-opts:not(:has(.cl-step))>.cl-opt{counter-increment:jo;display:flex;align-items:center;gap:14px}
main.calm-lesson .cl-opts:not(:has(.cl-step))>.cl-opt::before{content:counter(jo,upper-alpha);flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fce5bb;color:#27201c;font-family:var(--calm-serif);font-size:1rem;font-weight:700}
main.calm-lesson .cl-opts:not(:has(.cl-step))>.cl-opt:nth-child(2)::before{background:#fce3c8}
main.calm-lesson .cl-opts:not(:has(.cl-step))>.cl-opt:nth-child(3)::before{background:#f1ede2}
main.calm-lesson .cl-opts:not(:has(.cl-step))>.cl-opt.ok::before{background:#eec46a}
main.calm-lesson .cl-opts:not(:has(.cl-step))>.cl-opt.no::before{background:#fff;border:1.5px solid #934f00;color:#934f00}
main.calm-lesson .jg-case{display:flex;align-items:center;gap:14px;margin:14px 0 4px;padding:14px 16px;border-radius:20px;background:#f1ede2}
main.calm-lesson .jg-case p{margin:0;font-size:1.0625rem;line-height:1.45;color:#27201c}
main.calm-lesson .jg-stk{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#fce5bb}
main.calm-lesson .jg-stk svg{width:40px;height:40px}
main.calm-lesson .jg-stk-1{background:#fce3c8}
main.calm-lesson .jg-stk-2{background:#fefcf8}
/* Trial: on cards with a title the small dot is left out, so it never covers the title */
main.calm-lesson .cl-card:has(.cl-card-k)::after{display:none}
/* Trial: chapter 3 game pieces (the coin flip, the gone money, the fee) in Mind journal */
main.calm-lesson .jg-coin{display:grid;place-items:center;width:96px;height:96px;margin:18px auto 6px;border-radius:50%;background:#fce5bb}
main.calm-lesson .jg-coin svg{width:64px;height:64px}
main.calm-lesson .jg-flip{animation:jg-flip .5s ease-out 1 both}
@keyframes jg-flip{from{transform:rotateY(0)}to{transform:rotateY(720deg)}}
main.calm-lesson .jg-betrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
main.calm-lesson .jg-side{padding:14px;border-radius:20px;background:#f1ede2;text-align:center}
main.calm-lesson .jg-side.jg-win{background:#fce5bb}
main.calm-lesson .jg-side small{display:block;font-size:.8125rem;font-weight:700;color:#93641f}
main.calm-lesson .jg-side b{display:block;margin-top:2px;font-family:var(--calm-serif);font-size:1.875rem;font-weight:700;color:#27201c}
main.calm-lesson .jg-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
main.calm-lesson .jg-chip{height:48px;border:1.5px solid #e9e2d6;border-radius:16px;background:#fff;font-family:var(--calm-serif);font-size:1.0625rem;font-weight:700;color:#27201c;cursor:pointer}
main.calm-lesson .jg-chip.on{background:#eec46a;border-color:#eec46a}
main.calm-lesson .jg-bars{display:grid;gap:12px;margin:18px 0 4px}
main.calm-lesson .jg-bars div{display:flex;align-items:center;gap:10px;font-size:.875rem;font-weight:600;color:#27201c}
main.calm-lesson .jg-bars span{width:104px;flex:none}
main.calm-lesson .jg-bars i{display:block;height:26px;border-radius:8px;background:#211c15}
main.calm-lesson .jg-bars i.w{background:#eec46a}
main.calm-lesson .jg-scene2{margin-top:6px;padding:20px;border-radius:24px;border:1.5px solid #e9e2d6;background:#fff}
main.calm-lesson .jg-scene2 small{display:block;margin-bottom:8px;font-size:.75rem;font-weight:700;color:#93641f}
main.calm-lesson .jg-scene2 p{margin:0;font-family:var(--calm-serif);font-size:1.3125rem;font-weight:600;line-height:1.6;color:#27201c}
main.calm-lesson .jg-amt{display:inline-flex;align-items:baseline;gap:6px;margin:0 2px;padding:0 8px;border:1.5px dashed #93641f;border-radius:10px;background:#fefcf8;font:inherit;color:#27201c;cursor:pointer}
main.calm-lesson .jg-amt small{font-family:var(--calm-sans);font-size:.6875rem;font-weight:700;color:#27201c}
main.calm-lesson .jg-amt.ok{border:1.5px solid #eec46a;background:#eec46a;text-decoration:line-through}
main.calm-lesson .jg-amt.ok small{text-decoration:none}
main.calm-lesson .jg-amt.no{border:1.5px solid #934f00;color:#934f00}
main.calm-lesson .jg-amt.dim{border-style:solid;border-color:#e9e2d6}
main.calm-lesson .jg-fee{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:16px;padding:16px;border-radius:20px;background:#f1ede2}
main.calm-lesson .jg-fee small{font-size:.8125rem;font-weight:700;color:#93641f}
main.calm-lesson .jg-fee b{font-family:var(--calm-serif);font-size:2.25rem;font-weight:700;color:#27201c}
main.calm-lesson .jg-fee b.grown{animation:jg-grow .45s ease-out 1 both}
@keyframes jg-grow{from{transform:scale(.6)}to{transform:scale(1)}}
main.calm-lesson .jg-ledger{margin-top:12px;padding:4px 16px;border-radius:20px;border:1.5px solid #e9e2d6;background:#fff}
main.calm-lesson .jg-ledger div{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #e9e2d6;font-size:.9375rem;color:#27201c}
main.calm-lesson .jg-ledger div:last-child{border:0;font-weight:700}
main.calm-lesson .jg-same{margin:14px 0 0;font-family:var(--calm-serif);font-size:1.125rem;font-weight:700;color:#93641f}
main.calm-lesson .jg-h3{margin-top:6px;font-size:1.5rem}
/* Trial: the coin is a 3D coin with two faces; it tosses up, turns twice and lands, once per pick (450ms) */
main.calm-lesson .jg-coin3d{width:96px;height:96px;margin:18px auto 6px;perspective:600px}
main.calm-lesson .jg-coin-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(14deg)}
main.calm-lesson .jg-coin3d.go .jg-coin-in{animation:jg-toss .45s cubic-bezier(.3,.6,.4,1) 1 both}
main.calm-lesson .jg-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;border:2.5px solid #27201c;background:#eec46a;box-shadow:inset 0 0 0 7px #fce5bb;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-family:var(--calm-serif);font-size:2.25rem;font-weight:700;color:#27201c}
main.calm-lesson .jg-face.jg-back{transform:rotateY(180deg);background:#fce3c8;font-size:1.75rem}
@keyframes jg-toss{0%{transform:translateY(0) rotateX(14deg) rotateY(0)}50%{transform:translateY(-38px) rotateX(14deg) rotateY(380deg)}100%{transform:translateY(0) rotateX(14deg) rotateY(720deg)}}
/* Trial: the two answers side by side after the past changes */
main.calm-lesson .jg-cmp{margin-top:18px}
main.calm-lesson .jg-cmp b{color:#93641f}
/* Trial: chip pickers with three across */
main.calm-lesson .jg-chips.c3{grid-template-columns:repeat(3,1fr)}
/* Trial: the line test (a target and three lines, four voices) and the word flashes */
main.calm-lesson .jg-lines{display:flex;align-items:flex-end;justify-content:space-around;gap:10px;height:190px;margin:14px 0 8px;padding:14px 12px 10px;border-radius:20px;background:#f1ede2}
main.calm-lesson .jg-lines div{display:flex;flex-direction:column;align-items:center;gap:6px}
main.calm-lesson .jg-lines i{display:block;width:10px;border-radius:5px;background:#27201c}
main.calm-lesson .jg-lines .ref i{background:#eec46a}
main.calm-lesson .jg-lines small{font-size:.8125rem;font-weight:700;color:#93641f}
main.calm-lesson .jg-voices{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
main.calm-lesson .jg-voices span{padding:6px 10px;border-radius:12px;background:#fce3c8;font-size:.875rem;color:#27201c}
main.calm-lesson .jg-words{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 6px}
main.calm-lesson .jg-words span{padding:12px 16px;border-radius:16px;background:#fce5bb;font-family:var(--calm-serif);font-size:1.375rem;font-weight:700;color:#27201c}
/* Trial: the Stroop test word and the small trial counter */
main.calm-lesson .jg-stroop{display:grid;place-items:center;height:150px;margin:16px 0 8px;border-radius:20px;background:#fff;border:1.5px solid #e9e2d6}
main.calm-lesson .jg-stroop span{font-family:var(--calm-serif);font-size:2.75rem;font-weight:700}
main.calm-lesson .jg-sct{margin:12px 0 0;font-size:.8125rem;font-weight:700;color:#93641f;text-align:center}
main.calm-lesson .jg-c{text-align:center}
main.calm-lesson .jg-words.grid span{padding:8px 10px;font-size:1rem}
/* Trial: livelier lessons. Short animations that each play once (450ms or less): the heading marker draws in, answers pop or shake, feedback slides up, chips pop, result rows and words arrive in turn, and the snail bounces on a finished lesson. The global reduced motion rule switches them all off */
@keyframes jg-mark{from{box-shadow:inset 0 0 0 #fce5bb}to{box-shadow:inset 0 -.34em 0 #fce5bb}}
@keyframes jg-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes jg-pop{0%{transform:scale(.96)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes jg-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@keyframes jg-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes jg-bounce{0%{transform:translateY(0) scale(.9)}45%{transform:translateY(-14px) scale(1.04)}75%{transform:translateY(0) scale(.98)}100%{transform:none}}
main.calm-lesson .cl-h em{animation:jg-mark .45s ease-out .1s 1 both}
main.calm-lesson .cl-fb,main.calm-lesson .cl-mini{animation:jg-up .3s ease-out 1 both}
main.calm-lesson .cl-opt.ok,main.calm-lesson .jg-chip.on,main.calm-lesson .jg-person.ok,main.calm-lesson .jg-amt.ok{animation:jg-pop .35s ease-out 1 both}
main.calm-lesson .cl-opt.no,main.calm-lesson .jg-person.no,main.calm-lesson .jg-amt.no{animation:jg-shake .35s ease-out 1 both}
main.calm-lesson .jg-ledger div,main.calm-lesson .jg-words span,main.calm-lesson .cl-moves li,main.calm-lesson .cl-opts>.cl-opt:not(.ok):not(.no):not(:disabled){animation:jg-in .3s ease-out 1 both}
main.calm-lesson .jg-ledger div:nth-child(2),main.calm-lesson .jg-words span:nth-child(2),main.calm-lesson .cl-moves li:nth-child(2),main.calm-lesson .cl-opts>.cl-opt:nth-child(2):not(.ok):not(.no):not(:disabled){animation-delay:.06s}
main.calm-lesson .jg-ledger div:nth-child(3),main.calm-lesson .jg-words span:nth-child(3),main.calm-lesson .cl-moves li:nth-child(3),main.calm-lesson .cl-opts>.cl-opt:nth-child(3):not(.ok):not(.no):not(:disabled){animation-delay:.12s}
main.calm-lesson .jg-words span:nth-child(n+4),main.calm-lesson .cl-opts>.cl-opt:nth-child(4):not(.ok):not(.no):not(:disabled){animation-delay:.18s}
main.calm-lesson .cl-done .cl-done-n{animation:jg-bounce .5s ease-out .1s 1 both}
main.calm-lesson .jg-stroop span{animation:jg-pop .25s ease-out 1 both}
/* Trial: the first game keeps its Skip for now link under the main button */
main.calm-lesson .cl-actions .cl-skip{display:block;margin:12px auto 0;padding:8px 12px;border:0;background:none;font-family:var(--calm-sans);font-size:.9375rem;font-weight:600;color:#27201c;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Trial: each chapter's own photo on its explanation cards and as the round picture on finished lessons; tighter space between a story and its question */
main.calm-lesson .jg-ph{height:160px;margin:2px 0 18px;border-radius:22px;background:#3b3229 center/cover no-repeat;animation:jg-in .35s ease-out 1 both}
main.calm-lesson .cl-done-n.cl-done-ph{background-color:#fce5bb;background-position:center;background-size:cover;background-repeat:no-repeat;border:4px solid #fce5bb}
main.calm-lesson .jg-belief+.cl-h,main.calm-lesson .jg-case+.cl-h{margin-top:12px}
main.calm-lesson .jg-belief+.cl-h+.cl-opts,main.calm-lesson .jg-case+.cl-h+.cl-opts{margin-top:18px}
/* Trial: quick call cards keep the story close under their label */
main.calm-lesson .cl-card{padding-top:78px}
main.calm-lesson .cl-card .cl-scene{font-size:1.5rem}
/* Trial: the chapter photo wins over the plain round background on finished lessons and explanation cards */
main.calm-lesson .cl-done-ph.jp-thinking,main.calm-lesson .jg-ph.jp-thinking{background-image:url(assets/landing/journal-thinking.webp)}main.calm-lesson .cl-done-ph.jp-people,main.calm-lesson .jg-ph.jp-people{background-image:url(assets/landing/journal-people.webp)}main.calm-lesson .cl-done-ph.jp-memory,main.calm-lesson .jg-ph.jp-memory{background-image:url(assets/landing/journal-memory.webp)}main.calm-lesson .cl-done-ph.jp-feelings,main.calm-lesson .jg-ph.jp-feelings{background-image:url(assets/landing/journal-feelings.webp)}main.calm-lesson .cl-done-ph.jp-know,main.calm-lesson .jg-ph.jp-know{background-image:url(assets/landing/journal-know.webp)}main.calm-lesson .cl-done-ph.jp-window,main.calm-lesson .jg-ph.jp-window{background-image:url(assets/landing/journal-window.webp)}main.calm-lesson .cl-done-ph.jp-anchors,main.calm-lesson .jg-ph.jp-anchors{background-image:url(assets/landing/journal-anchors.webp)}main.calm-lesson .cl-done-ph.jp-ball,main.calm-lesson .jg-ph.jp-ball{background-image:url(assets/landing/journal-ball.webp)}main.calm-lesson .cl-done-ph.jp-mug,main.calm-lesson .jg-ph.jp-mug{background-image:url(assets/landing/journal-mug.webp)}main.calm-lesson .cl-done-ph.jp-esteem,main.calm-lesson .jg-ph.jp-esteem{background-image:url(assets/landing/journal-esteem.webp)}main.calm-lesson .cl-done-ph.jp-c5,main.calm-lesson .jg-ph.jp-c5{background-image:url(assets/landing/journal-c5.webp)}main.calm-lesson .cl-done-ph.jp-c6,main.calm-lesson .jg-ph.jp-c6{background-image:url(assets/landing/journal-c6.webp)}main.calm-lesson .cl-done-ph.jp-c7,main.calm-lesson .jg-ph.jp-c7{background-image:url(assets/landing/ch-snooze.jpg?v=4)}main.calm-lesson .cl-done-ph.jp-c8,main.calm-lesson .jg-ph.jp-c8{background-image:url(assets/landing/journal-c8-pencils.jpg?v=4)}main.calm-lesson .cl-done-ph.jp-c9,main.calm-lesson .jg-ph.jp-c9{background-image:url(assets/landing/journal-c9.webp)}main.calm-lesson .cl-done-ph.jp-c10,main.calm-lesson .jg-ph.jp-c10{background-image:url(assets/landing/journal-c10.webp)}main.calm-lesson .cl-done-ph.jp-c12,main.calm-lesson .jg-ph.jp-c12{background-image:url(assets/landing/journal-c12.webp)}main.calm-lesson .cl-done-ph.jp-c13,main.calm-lesson .jg-ph.jp-c13{background-image:url(assets/landing/journal-c13.webp)}main.calm-lesson .cl-done-ph.jp-c14,main.calm-lesson .jg-ph.jp-c14{background-image:url(assets/landing/journal-c14.webp)}main.calm-lesson .cl-done-ph.jp-c15,main.calm-lesson .jg-ph.jp-c15{background-image:url(assets/landing/journal-c15.webp)}main.calm-lesson .cl-done-ph.jp-c16,main.calm-lesson .jg-ph.jp-c16{background-image:url(assets/landing/journal-c16.webp)}main.calm-lesson .cl-done-ph.jp-c18,main.calm-lesson .jg-ph.jp-c18{background-image:url(assets/landing/ch-regret.jpg?v=4)}main.calm-lesson .cl-done-ph.jp-c20,main.calm-lesson .jg-ph.jp-c20{background-image:url(assets/landing/journal-c20.webp)}main.calm-lesson .cl-done-ph.jp-c21,main.calm-lesson .jg-ph.jp-c21{background-image:url(assets/landing/journal-c21.webp)}main.calm-lesson .cl-done-ph.jp-c22,main.calm-lesson .jg-ph.jp-c22{background-image:url(assets/landing/ch-billboards.jpg?v=4)}main.calm-lesson .cl-done-ph.jp-c23,main.calm-lesson .jg-ph.jp-c23{background-image:url(assets/landing/journal-c23.webp)}main.calm-lesson .cl-done-ph.jp-c24,main.calm-lesson .jg-ph.jp-c24{background-image:url(assets/landing/journal-c24.webp)}main.calm-lesson .cl-done-ph.jp-c25,main.calm-lesson .jg-ph.jp-c25{background-image:url(assets/landing/journal-c25.webp)}main.calm-lesson .cl-done-ph.jp-c27,main.calm-lesson .jg-ph.jp-c27{background-image:url(assets/landing/journal-c27.webp)}main.calm-lesson .cl-done-ph.jp-c28,main.calm-lesson .jg-ph.jp-c28{background-image:url(assets/landing/journal-c28.webp)}main.calm-lesson .cl-done-ph.jp-c29,main.calm-lesson .jg-ph.jp-c29{background-image:url(assets/landing/journal-c29.webp)}main.calm-lesson .cl-done-ph.jp-c30,main.calm-lesson .jg-ph.jp-c30{background-image:url(assets/landing/journal-c30.webp)}main.calm-lesson .cl-done-ph.jp-c31,main.calm-lesson .jg-ph.jp-c31{background-image:url(assets/landing/journal-c31.webp)}main.calm-lesson .cl-done-ph.jp-c32,main.calm-lesson .jg-ph.jp-c32{background-image:url(assets/landing/journal-c32.webp)}main.calm-lesson .cl-done-ph.jp-c33,main.calm-lesson .jg-ph.jp-c33{background-image:url(assets/landing/journal-c33.webp)}main.calm-lesson .cl-done-ph.jp-c34,main.calm-lesson .jg-ph.jp-c34{background-image:url(assets/landing/journal-c34.webp)}main.calm-lesson .cl-done-ph.jp-sunk,main.calm-lesson .jg-ph.jp-sunk{background-image:url(assets/landing/journal-sunk.webp)}main.calm-lesson .cl-done-ph.jp-confirm,main.calm-lesson .jg-ph.jp-confirm{background-image:url(assets/landing/journal-confirm.webp)}main.calm-lesson .cl-done-ph.jp-hindsight,main.calm-lesson .jg-ph.jp-hindsight{background-image:url(assets/landing/journal-hindsight.webp)}main.calm-lesson .cl-done-ph.jp-framing,main.calm-lesson .jg-ph.jp-framing{background-image:url(assets/landing/journal-framing.webp)}main.calm-lesson .cl-done-ph.jp-knowing,main.calm-lesson .jg-ph.jp-knowing{background-image:url(assets/landing/journal-knowing.webp)}main.calm-lesson .cl-done-ph.jp-impressions,main.calm-lesson .jg-ph.jp-impressions{background-image:url(assets/landing/journal-impressions.webp)}
main.calm-lesson .jg-case.plain{padding:16px 18px}
/* Trial: the quiet reward line on a finished lesson: points, tokens and the day chain, one row, no praise */
main.calm-lesson .jg-paid{display:inline-block;margin:6px auto 4px;padding:6px 12px;border-radius:12px;background:#f1ede2;font-size:.875rem;font-weight:700;color:#93641f;animation:jg-up .35s ease-out .2s 1 both}
main.calm-lesson .cl-done{text-align:center}
/* Trial: the journal. Notes on lined honey paper, the learner's own thought in handwriting, honey wax stamps per chapter, the day chain as a row of dots */
.j-home .jn-chain{display:flex;align-items:center;gap:6px;margin:6px 0 14px}
.j-home .jn-chain i{width:9px;height:9px;border-radius:50%;background:#e9e2d6}
.j-home .jn-chain i.on{background:#eec46a}
.j-home .jn-chain b{margin-left:6px;font-size:.875rem;color:#27201c}
.j-home .jn-latest{text-align:left;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24'%3E%3Crect y='23' width='8' height='1' fill='%23f0d59a'/%3E%3C/svg%3E")}
.j-home .jn-latest .jn-t{display:block;margin:4px 0 2px;font-family:var(--calm-serif);font-weight:700;font-size:1rem;color:#27201c}
.j-home .jn-latest .jn-more{display:block;margin-top:8px;font-size:.75rem;font-weight:700;text-decoration:underline;color:#27201c}
.j-home .jn-hand,.j-home .jn-latest .jn-hand{display:block;margin-top:6px;font-family:var(--jn-hand);font-size:1.3125rem;line-height:1.15;color:#27201c}
.j-home .jn-home-stamps{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
.j-home .jn-st-h b{display:block;font-family:var(--calm-serif);font-size:1.125rem;color:#27201c}
.j-home .jn-st-h small{font-size:.8125rem;color:#5e5651}
.j-home .jn-row{display:flex;flex-wrap:wrap;gap:6px}
.j-notes .jn-h{margin:10px 0 0;font-family:var(--calm-serif);font-size:2rem;font-weight:700;line-height:1.1;color:#27201c}
.j-notes .jn-h em{font-style:normal;box-shadow:inset 0 -.32em 0 #fce5bb}
.j-notes .jn-sub{margin:8px 0 6px;font-size:.9375rem;color:#5e5651}
.j-notes .jn-h2{margin:26px 0 10px;font-family:var(--calm-serif);font-size:1.25rem;font-weight:700;color:#27201c}
.j-notes .jn-pattern{margin:6px 0 14px;padding:14px 16px;border-radius:20px;background:#211c15;color:#fefcf8}
.j-notes .jn-pattern small{font-size:.75rem;font-weight:700;color:#eec46a}
.j-notes .jn-pattern p{margin:4px 0 0;font-size:.9375rem;line-height:1.45}
.j-notes .jn-note,.j-notes .jn-empty{margin:0 0 12px;padding:14px 16px;border-radius:20px;background:#fce5bb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24'%3E%3Crect y='23' width='8' height='1' fill='%23f0d59a'/%3E%3C/svg%3E");animation:jg-in .3s ease-out 1 both}
.j-notes .jn-note small{font-size:.75rem;font-weight:700;color:#93641f}
.j-notes .jn-note p{margin:4px 0 0;font-size:.9375rem;line-height:1.45;color:#27201c}
.j-notes .jn-tip b{color:#93641f}
.j-notes .jn-mine{margin-top:8px;padding-top:6px;border-top:1px dashed #e0c48a}
.j-notes .jn-mine small{display:flex;justify-content:space-between;align-items:center}
.j-notes .jn-mine .link-button,.j-notes .jn-acts .link-button{padding:0;border:0;background:none;font-size:.8125rem;font-weight:700;color:#27201c;text-decoration:underline;cursor:pointer}
.j-notes .jn-hand{margin:2px 0 0;font-family:var(--jn-hand);font-size:1.5rem;line-height:1.15;color:#27201c}
.j-notes .jn-acts{display:flex;align-items:center;gap:16px;margin-top:8px}
.j-notes .jn-lab{display:block;margin-top:10px;font-size:.75rem;font-weight:700;color:#93641f}
.j-notes #jn-thought{box-sizing:border-box;width:100%;margin-top:4px;padding:10px 12px;border:1.5px solid #e0c48a;border-radius:14px;background:#fefcf8;font-family:var(--jn-hand);font-size:1.5rem;line-height:1.2;color:#27201c}
.j-notes .jn-q{font-weight:700}
.j-notes .jn-stamps{margin-bottom:12px}
.j-notes .jn-stamps small{display:block;margin-bottom:6px;font-size:.8125rem;font-weight:700;color:#5e5651}
main.calm-lesson .jn-press{margin:24px auto 0;animation:jn-press .45s cubic-bezier(.2,.8,.3,1.2) .15s 1 both}
@keyframes jn-press{from{transform:scale(1.6) rotate(-14deg);opacity:0}to{transform:rotate(-6deg);opacity:1}}
main.calm-lesson .jn-saved{margin:18px 0 0;text-align:left}
main.calm-lesson .jn-saved b{font-size:.875rem;color:#27201c}
main.calm-lesson .jn-saved p{margin:8px 0 0;padding:12px 14px;border-radius:18px;background:#fce5bb;font-size:.9375rem;line-height:1.45;color:#27201c}
main.calm-lesson .jn-saved small{display:block;font-size:.75rem;font-weight:700;color:#93641f}
/* Trial: a stamp not earned yet shows faded and grey, then turns to color once the chapter is done */
.jn-seal.off{filter:grayscale(1);opacity:.32}
main.calm-lesson .jn-saved-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
main.calm-lesson .jn-open{padding:0;border:0;background:none;font-size:.875rem;font-weight:700;color:#27201c;text-decoration:underline;cursor:pointer}
/* Trial: a sunlit photo at the top of the journal (Unsplash License) */
.j-notes .jn-photo{height:190px;margin:4px 0 2px;border-radius:24px;background-size:cover;background-position:center 40%}
.j-home .jp-writing{background-image:url(assets/landing/journal-writing.webp)}
/* Trial: the learner can write a note of their own, in handwriting */
.j-notes .jn-notes-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 10px}
.j-notes .jn-notes-h .jn-h2{margin:0}
.j-notes .jn-own .jn-hand{margin-top:6px}
.j-notes .jn-write-top{margin:4px 0 6px}
/* Trial: notes as a list or a month calendar; a day with notes is a honey circle, the chosen day is dark */
.j-notes .jn-views{display:flex;gap:18px;margin:-2px 0 12px}
.j-notes .jn-views .link-button{padding:0 0 3px;border:0;border-bottom:2px solid transparent;background:none;font-size:.9375rem;font-weight:600;color:#5e5651;text-decoration:none;cursor:pointer}
.j-notes .jn-views .link-button.on{border-bottom-color:#eec46a;color:#27201c;font-weight:700}
.j-notes .jn-cal{margin:0 0 14px;padding:14px 14px 10px;border:1.5px solid #ece4d6;border-radius:20px;background:#fefcf8}
.j-notes .jn-cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.j-notes .jn-cal-h b{font-family:var(--calm-serif);font-size:1.0625rem;color:#27201c}
.j-notes .jn-cal-h .link-button{width:40px;height:40px;padding:0;border:0;background:none;font-size:1.5rem;line-height:1;color:#27201c;text-decoration:none;cursor:pointer}
.j-notes .jn-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.j-notes .jn-cal-g i{font-style:normal;font-size:.6875rem;font-weight:700;color:#93641f;padding-bottom:4px}
.j-notes .jn-cal-g span,.j-notes .jn-cal-g button{display:flex;align-items:center;justify-content:center;aspect-ratio:1;max-width:100%;border-radius:50%;font-size:.875rem;color:#8a817a}
.j-notes .jn-cal-g button{border:0;padding:0;background:#fce5bb;color:#27201c;font-weight:700;cursor:pointer}
.j-notes .jn-cal-g .today{box-shadow:inset 0 0 0 1.5px #c99a3b}
.j-notes .jn-cal-g button.on{background:#27201c;color:#fefcf8}
.j-notes .jn-cal-day{margin:4px 0 8px;font-size:.8125rem;font-weight:700;color:#5e5651}
/* Trial: a document the learner rates sits on its own white sheet, apart from the story */
main.calm-lesson .jg-rep{margin:10px 0 0;padding:14px 16px;border:1.5px solid #e0c48a;border-radius:16px;background:#fefcf8}
main.calm-lesson .jg-rep small{display:block;font-size:.75rem;font-weight:700;color:#93641f}
main.calm-lesson .jg-rep p{margin:4px 0 0;font-family:var(--calm-serif);font-size:1.0625rem;line-height:1.4;color:#27201c}
main.calm-lesson .jg-chips.c5{grid-template-columns:repeat(5,1fr)}
main.calm-lesson .jg-chips.c5 .jg-chip{min-height:72px;padding:0 2px;font-size:1.125rem}
main.calm-lesson .jg-hint{margin:6px 0 4px;font-size:.875rem;color:#5e5651}
/* Trial: the System 1 and System 2 dots from the first trick, reused on the Fast or slow card; the wrapper only borrows the first-trick dot rules */
main.calm-lesson .first-trick.jg-anim{min-height:0;max-width:none;margin:16px 0 0;padding:0;display:block;background:none}
.j-notes .jn-did{margin:0 0 12px;padding:12px 16px;border:1.5px solid #ece4d6;border-radius:20px;background:#fefcf8}
.j-notes .jn-did small{font-size:.75rem;font-weight:700;color:#93641f}
.j-notes .jn-did ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.j-notes .jn-did li{display:grid;grid-template-columns:22px 1fr;column-gap:8px}
.j-notes .jn-did li::before{content:"";grid-row:span 2;width:18px;height:18px;margin-top:2px;border-radius:50%;background:#eec46a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%2327201c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.j-notes .jn-did b{font-size:.9375rem;color:#27201c}
.j-notes .jn-did span{font-size:.8125rem;color:#5e5651}
/* Trial: the chapter finish screen */
main.calm-lesson .jg-ch{text-align:center}
main.calm-lesson .jg-cel{margin:8px 0 0;padding:24px 18px 20px;border-radius:28px;background:#fce5bb}
main.calm-lesson .jg-cel .jn-press{margin:0 auto}
main.calm-lesson .jg-cel .cl-k{margin-top:14px}
main.calm-lesson .jg-cel-row{display:flex;justify-content:center;flex-wrap:wrap;gap:3px;margin-top:16px}
main.calm-lesson .jg-cel .cl-h{font-size:2rem}
main.calm-lesson .jg-cel-row .now{animation:jg-pop .45s cubic-bezier(.2,.8,.3,1.2) .45s 1 both}
main.calm-lesson .jg-cel-n{margin:6px 0 0;font-size:.8125rem;font-weight:700;color:#93641f}
main.calm-lesson .jg-cel-pay{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 0;padding:14px 10px;border:1.5px solid #ece4d6;border-radius:20px;background:#fefcf8;animation:jg-up .4s ease-out .3s 1 both}
main.calm-lesson .jg-cel-pay div{display:flex;flex-direction:column;align-items:center}
main.calm-lesson .jg-cel-pay b{font-family:var(--calm-serif);font-size:1.5rem;line-height:1.1;color:#27201c}
main.calm-lesson .jg-cel-pay span{font-size:.75rem;font-weight:700;color:#5e5651}
main.calm-lesson .jg-cel-pay p{grid-column:1/-1;margin:6px 0 0;font-size:.8125rem;font-weight:700;color:#93641f}
main.calm-lesson .jg-recap{margin:18px 0 0;text-align:left}
main.calm-lesson .jg-recap h2{margin:0 0 10px;font-family:var(--calm-serif);font-size:1.125rem;color:#27201c}
main.calm-lesson .jg-recap ol{margin:0;padding:0;list-style:none;counter-reset:r;display:grid;gap:10px}
main.calm-lesson .jg-recap li{counter-increment:r;display:grid;grid-template-columns:30px 1fr;column-gap:10px;padding:12px 14px;border-radius:18px;background:#f6f2ea}
main.calm-lesson .jg-recap li::before{content:counter(r);grid-row:span 2;width:26px;height:26px;border-radius:50%;background:#eec46a;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;color:#27201c}
main.calm-lesson .jg-recap b{font-size:.9375rem;color:#27201c}
main.calm-lesson .jg-recap span{font-size:.875rem;line-height:1.4;color:#5e5651}
main.calm-lesson .jg-ch .jn-saved{text-align:left}
.j-notes .jn-tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:3;margin:14px -24px 14px;padding:10px 24px 0;gap:24px;border-bottom:1.5px solid #ece4d6;background:#fefcf8}
.j-notes .jn-tabs .link-button{padding:0 0 10px;font-size:1rem;margin-bottom:-1.5px}
.j-notes .jn-st-count{margin:0 0 12px;font-size:.875rem;font-weight:700;color:#93641f}
.j-notes .jn-earned{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 10px}
.j-notes .jn-earned-i{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.j-notes .jn-earned-i b{margin-top:6px;font-size:.8125rem;line-height:1.25;color:#27201c}
.j-notes .jn-earned-i small{margin-top:2px;font-size:.75rem;color:#5e5651}
.j-notes .jn-st-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.j-notes .jn-st-top .jn-st-count{margin:0}
.j-notes .jn-all{padding:0;border:0;background:none;font-size:.875rem;font-weight:700;color:#27201c;text-decoration:underline;cursor:pointer}
.j-home .jn-home-new{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left}
.j-home .jn-new-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;align-items:end}
.j-home .jn-new-i{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.j-home .jn-new-i b{margin-top:4px;font-size:.75rem;line-height:1.2;color:#27201c}
.j-home .jn-new-i small{font-size:.6875rem;color:#5e5651}
.j-notes .jn-home-stamps{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:8px 0 0;padding:14px 16px;border-radius:20px;background:#fce5bb;text-align:left}
.j-notes .jn-home-stamps .jn-st-h b{display:block;font-family:var(--calm-serif);font-size:1.125rem;color:#27201c}
.j-notes .jn-home-stamps .jn-st-h small{font-size:.8125rem;color:#5e5651}
.j-notes .jn-home-stamps .jn-row{display:flex;flex-wrap:wrap;gap:6px}
.j-notes .jn-write-top{margin:0 0 14px}
.jn-home-stamps .jn-st-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;width:100%}
.jn-home-stamps .jn-viewall{flex:none;padding:0;border:0;background:none;font:inherit;font-size:.8125rem;font-weight:700;color:#27201c;text-decoration:underline;cursor:pointer}
/* Trial: every done tick is a small, black tick */
.j-home .jh-les i.done svg{width:10px;height:10px;stroke:#27201c;stroke-width:3.4}
.j-home .jl-go svg,.j-home .jl-n svg{width:14px;height:14px;stroke:#27201c;stroke-width:3}
/* Trial: the habit bet. A dial with a filling track, then a timeline of where the volunteers landed */
main.calm-lesson .jg-dial{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 12px}
main.calm-lesson .jg-dial-b{width:56px;height:56px;border:1.5px solid #e0c48a;border-radius:50%;background:#fefcf8;font-size:1.75rem;line-height:1;color:#27201c;cursor:pointer}
main.calm-lesson .jg-dial-b[disabled]{opacity:.35;cursor:default}
main.calm-lesson .jg-dial-n{display:flex;flex-direction:column;align-items:center}
main.calm-lesson .jg-dial-n b{font-family:var(--calm-serif);font-size:3.5rem;line-height:1;color:#27201c;animation:jg-pop .3s ease-out 1}
main.calm-lesson .jg-dial-n span{margin-top:4px;font-size:.875rem;font-weight:700;color:#93641f}
main.calm-lesson .jg-fill{height:14px;border-radius:7px;background:#f1ede2;overflow:hidden}
main.calm-lesson .jg-fill i{display:block;height:100%;border-radius:7px;background:#eec46a;transition:width .3s ease-out}
main.calm-lesson .jg-tl-ax{position:relative;height:16px;margin-top:6px;font-size:.75rem;font-weight:700;color:#8a817a}
main.calm-lesson .jg-tl-ax span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
main.calm-lesson .jg-tl-ax span:first-child{transform:none}
main.calm-lesson .jg-tl-ax span:last-child{transform:translateX(-80%)}
main.calm-lesson .jg-tl{margin:18px 0 6px}
main.calm-lesson .jg-tl-bar{position:relative;height:96px;border-bottom:2px solid #e9e2d6}
main.calm-lesson .jg-tl-band{position:absolute;bottom:0;height:34px;border-radius:10px 10px 0 0;background:#fce5bb;transform-origin:left;animation:jg-grow .5s ease-out 1 both}
@keyframes jg-grow{from{transform:scaleX(0)}to{transform:none}}
main.calm-lesson .jg-tl-bar>span:not(.jg-tl-band){position:absolute;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
main.calm-lesson .jg-tl-bar>span:not(.jg-tl-band)::after{content:"";width:2px;background:currentColor}
main.calm-lesson .jg-tl-mid{color:#27201c}
main.calm-lesson .jg-tl-mid::after{height:46px}
main.calm-lesson .jg-tl-mid b{font-size:1rem}
main.calm-lesson .jg-tl-you{color:#93641f}
main.calm-lesson .jg-tl-you::after{height:72px}
main.calm-lesson .jg-tl-you b{white-space:nowrap;font-size:.8125rem}
main.calm-lesson .jg-tl-myth{color:#a49b92}
main.calm-lesson .jg-tl-myth::after{height:24px}
main.calm-lesson .jg-tl-myth s{font-size:.8125rem;font-weight:700}
main.calm-lesson .jg-tl-key{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:.8125rem;color:#5e5651}
main.calm-lesson .jg-tl-key i{width:18px;height:10px;border-radius:3px;background:#fce5bb}
main.calm-lesson .jg-mk{background:none;color:#27201c;font-weight:700;box-shadow:inset 0 -.38em 0 #fce5bb}
/* Trial: livelier questions (First impressions first) */
main.calm-lesson .jq-ph{height:140px;margin:0 0 14px;border-radius:24px;background:#3b3229 center/cover no-repeat;animation:jq-zoom .5s ease-out 1 both}
@keyframes jq-zoom{from{opacity:.3;transform:scale(1.06)}to{opacity:1;transform:none}}
main.calm-lesson .jq-coffee{background-image:url(assets/landing/q-coffee.webp)}
main.calm-lesson .jq-interview{background-image:url(assets/landing/q-interview.webp)}
main.calm-lesson .jq-kettle{background-image:url(assets/landing/q-kettle.webp)}
main.calm-lesson .jq-essays{background-image:url(assets/landing/q-essays.webp)}
main.calm-lesson .jq-vitamins{background-image:url(assets/landing/q-vitamins.webp)}
main.calm-lesson .jq-truck{background-image:url(assets/landing/q-truck.webp)}
main.calm-lesson .jq-party{background-image:url(assets/landing/q-party.webp)}
main.calm-lesson .jq-hose{background-image:url(assets/landing/q-hose.webp)}
main.calm-lesson .jq-fans{background-image:url(assets/landing/q-fans.webp)}
main.calm-lesson .jq-stock{background-image:url(assets/landing/q-stock.webp)}
main.calm-lesson .jq-exam{background-image:url(assets/landing/q-exam.webp)}
main.calm-lesson .jq-cooking{background-image:url(assets/landing/q-cooking.webp)}
main.calm-lesson .jq-doctor{background-image:url(assets/landing/q-doctor.webp)}
main.calm-lesson .jq-crowd{background-image:url(assets/landing/q-crowd.webp)}
main.calm-lesson .jq-math{background-image:url(assets/landing/q-math.webp)}
main.calm-lesson .jq-parking{background-image:url(assets/landing/q-parking.webp)}
main.calm-lesson .jq-chess{background-image:url(assets/landing/q-chess.webp)}
main.calm-lesson .jq-taxi{background-image:url(assets/landing/q-taxi.webp)}
main.calm-lesson .jq-sale{background-image:url(assets/landing/q-sale.webp)}
main.calm-lesson .jq-mug{background-image:url(assets/landing/q-mug1.webp)}
main.calm-lesson .jq-mug2{background-image:url(assets/landing/q-mug2.webp)}
main.calm-lesson .jq-road{background-image:url(assets/landing/q-road.webp)}
main.calm-lesson .jq-dairy{background-image:url(assets/landing/q-dairy.webp)}
main.calm-lesson .jq-tags{background-image:url(assets/landing/q-tags.webp)}
main.calm-lesson .jq-lamp{background-image:url(assets/landing/q-lamp.webp)}
main.calm-lesson .jq-meeting{background-image:url(assets/landing/q-meeting.webp)}
main.calm-lesson .jq-rent{background-image:url(assets/landing/q-rent.webp)}
main.calm-lesson .jq-road2{background-image:url(assets/landing/q-road2.webp)}
main.calm-lesson .jq-app{background-image:url(assets/landing/q-app.webp)}
main.calm-lesson .jq-concert{background-image:url(assets/landing/q-concert.webp)}
main.calm-lesson .jq-course{background-image:url(assets/landing/q-course.webp)}
main.calm-lesson .jq-book{background-image:url(assets/landing/q-book.webp)}
main.calm-lesson .jq-team{background-image:url(assets/landing/q-team.webp)}
main.calm-lesson .jq-mug3{background-image:url(assets/landing/q-mug3.webp)}
/* Trial: one warm, soft tone over every question photo, so they feel like one set */
main.calm-lesson :is(.jq-ph,.jg-ph){filter:saturate(1.08) sepia(.12) brightness(1.03)}
.j-home .jh-tot-pic.jt-0{background-image:url(assets/landing/q-coins.webp)}
.j-home .jh-tot-pic.jt-1{background-image:url(assets/landing/q-dairy.webp)}
.j-home .jh-tot-pic.jt-2{background-image:url(assets/landing/q-mug1.webp)}
.j-home .jh-tot-pic.jt-3{background-image:url(assets/landing/q-plane.webp)}
main.calm-lesson .jq-gym{background-image:url(assets/landing/q-gym.webp)}
main.calm-lesson .jq-bike{background-image:url(assets/landing/q-bike.webp)}
main.calm-lesson .jq-armchair{background-image:url(assets/landing/q-armchair.webp)}
main.calm-lesson.jq-fun :is(.cl-opts,.cl-two,.jg-chips)>[data-action]{animation:jq-drop .42s cubic-bezier(.2,.9,.3,1.3) 1 both}
main.calm-lesson.jq-fun :is(.cl-opts,.cl-two,.jg-chips)>[data-action]:nth-child(2){animation-delay:.07s}
main.calm-lesson.jq-fun :is(.cl-opts,.cl-two,.jg-chips)>[data-action]:nth-child(3){animation-delay:.14s}
main.calm-lesson.jq-fun :is(.cl-opts,.cl-two,.jg-chips)>[data-action]:nth-child(n+4){animation-delay:.2s}
@keyframes jq-drop{from{opacity:0;transform:translateY(18px) rotate(-1.5deg)}to{opacity:1;transform:none}}
main.calm-lesson.jq-fun :is(.cl-opts,.cl-two,.jg-chips)>[data-action]:active{transform:scale(.96) rotate(-1deg)}
main.calm-lesson.jq-dark .jg-case{background:#211c15;color:#fefcf8}
main.calm-lesson.jq-dark .jg-case p{color:#fefcf8}
main.calm-lesson.jq-dark .jg-case .jg-stk{background:#eec46a}
main.calm-lesson.jq-quote .cl-screen{display:flex;flex-direction:column}
main.calm-lesson.jq-quote .cl-screen>*{order:3}
main.calm-lesson.jq-quote .cl-screen>.cl-k{order:0}
main.calm-lesson.jq-quote .cl-screen>.cl-h{order:1;margin-top:4px}
main.calm-lesson.jq-quote .cl-screen>.jg-case{order:2;background:none;border-left:4px solid #eec46a;border-radius:0;padding:4px 0 4px 16px}
main.calm-lesson.jq-quote .cl-screen>.jg-case .jg-stk{display:none}
main.calm-lesson.jq-quote .cl-screen>.jg-case p{font-size:1.1875rem;line-height:1.45}
main.calm-lesson.jq-quote .cl-screen>.cl-actions{order:9}
main.calm-lesson.jq-tiles .cl-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
main.calm-lesson.jq-tiles .cl-opt{min-height:150px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left}
main.calm-lesson.jq-wave .cl-actions .btn[disabled]{opacity:1;background:#cfc6b8;color:#fefcf8}
/* Trial: the chapter cover */
main.calm-lesson .jc-cover{position:relative;height:min(430px,56vh);margin:4px 0 18px;border-radius:28px;overflow:hidden;background-color:#3b3229;background-position:center;background-size:cover;background-repeat:no-repeat;animation:jq-zoom .5s ease-out 1 both}
main.calm-lesson .jc-fade{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.25' stop-color='%23211c15' stop-opacity='0'/%3E%3Cstop offset='0.6' stop-color='%23211c15' stop-opacity='.62'/%3E%3Cstop offset='1' stop-color='%23211c15' stop-opacity='.92'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='10' height='100' fill='url(%23g)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
main.calm-lesson .jc-cover>div{position:absolute;left:22px;right:22px;bottom:22px;color:#fefcf8}
main.calm-lesson .jc-cover small{display:block;font-size:.8125rem;font-weight:700;color:#f6dcae}
main.calm-lesson .jc-cover h1{margin:6px 0 10px;font-family:var(--calm-serif);font-weight:700;font-size:2.375rem;line-height:1.02;color:#fefcf8}
main.calm-lesson .jc-cover h1 em{font-style:normal;box-shadow:inset 0 -.26em 0 rgba(238,196,106,.75)}
main.calm-lesson .jc-cover p{margin:0;font-size:1rem;line-height:1.4;color:#fefcf8}
main.calm-lesson .jc-meta{display:flex;gap:10px;align-items:center;margin:0 0 6px;font-size:.9375rem;font-weight:700;color:#5e5651}
main.calm-lesson .jc-meta i{width:5px;height:5px;border-radius:50%;background:#d9cfbf}
/* Trial: the keep-your-stamps sheet */
.jn-nudge{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(33,28,21,.45);animation:jg-in .3s ease-out 1 both}
.jn-nudge-card{width:100%;max-width:400px;padding:14px 14px 18px;border-radius:28px;background:#fefcf8;text-align:center;animation:jg-up .4s ease-out 1 both}
.jn-nudge .jn-row{display:flex;flex-wrap:nowrap;justify-content:center;gap:3px}
.jn-nudge-ph{height:150px;margin:-6px -4px 14px;border-radius:22px;background-color:#3b3229;background-position:center 35%;background-size:cover;background-repeat:no-repeat}
.jn-nudge .jn-nudge-ph.jn-sprout{height:140px;background-image:url(assets/landing/welcome-sprout-wide.webp);background-position:center 70%}
.jn-nudge h2{margin:14px 0 6px;font-family:var(--calm-serif);font-size:1.75rem;line-height:1.1;color:#27201c}
.jn-nudge h2 em{font-style:normal;box-shadow:inset 0 -.3em 0 #fce5bb}
.jn-nudge p{margin:0 0 16px;font-size:.9375rem;line-height:1.45;color:#27201c}
.jn-nudge-acts{display:grid;gap:10px}
/* Trial: the anchor-or-evidence round ends with the four notes and what each one was */
main.calm-lesson .cl3-sum{margin-top:14px}
main.calm-lesson .cl3-sum div{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
main.calm-lesson .cl3-sum span{font-size:.9375rem;line-height:1.4;color:#27201c}
main.calm-lesson .cl3-sum b{padding-left:22px;background:no-repeat left center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%2327201c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
main.calm-lesson .cl3-sum .no b{background-image:none;padding-left:0;color:#934f00}
/* Trial: questions and their answer fit on one phone screen. Smaller card, tighter answers, the same space above and below Your move */
main.calm-lesson .cl-card{padding-top:64px;padding-bottom:20px}
main.calm-lesson .cl-card-k{top:20px}
main.calm-lesson .cl-scene{font-size:1.5rem;line-height:1.35}
main.calm-lesson .cl-ask{margin:16px 0 0}
main.calm-lesson .cl-opts{gap:10px;margin-top:20px}
main.calm-lesson .cl-ask+.cl-opts{margin-top:16px}
main.calm-lesson .cl-opt{padding:14px 16px}
main.calm-lesson .cl-fb{margin-top:12px}
.sheet:has(.calm-auth-top) .calm-auth-pic{background-image:url(assets/landing/welcome-sprout-wide.webp);background-position:center 70%}
.j-home .jl-brand{font-family:var(--calm-serif);font-size:.875rem;font-weight:700;color:#27201c}
.j-home .jl-brand i{font-style:normal;color:#e3a93b}
/* Trial: the honey underline rides up into the letters a little, and stamps not earned yet stay a soft honey instead of grey */
.first-trick .trick-q em,.first-trick .trick-h em,main.calm-lesson .cl-h em,.j-home .home-hello em,.j-notes .jn-h em,.jn-nudge h2 em{box-shadow:inset 0 -0.5em 0 rgba(238,196,106,.55)}
main.calm-lesson .jc-cover h1 em{box-shadow:inset 0 -.42em 0 rgba(238,196,106,.7)}
.jn-seal.off{filter:saturate(.55);opacity:.42}
.jn-home-stamps .jn-row,.j-notes .jn-home-stamps .jn-row{flex-wrap:nowrap;gap:3px}
.j-home .jn-home-stamps{background:#fdf1d8}
.j-home .jn-latest{position:relative}
.j-home .jn-latest .jn-ic{display:block;align-self:center;margin:8px 0 2px}
.j-notes .jn-note{position:relative}
.j-notes .jn-note .jn-ic{float:right;margin:-4px -4px 4px 8px}
.jn-ic svg{display:block}
/* Trial: main buttons are honey with dark text, after Seph's note of 29 Oct that black is a poor color for a main call to action */
main.calm-lesson .cl-actions .btn:not(.secondary):not(.white),.first-trick .trick-actions .btn:not(.secondary):not(.white),:is(.calm-auth,.sheet:has(.calm-auth-top)) .btn:not(.secondary):not(.white):not(.google),.jn-nudge .btn:not(.secondary),.j-notes .btn:not(.secondary):not(.white){background:#eec46a;border-color:#eec46a;color:#211c15}
.j-home .jh-row button{background:#eec46a;color:#211c15}
main.calm-lesson .cl-actions .btn[disabled],.first-trick .trick-actions .btn[disabled],main.calm-lesson.jq-wave .cl-actions .btn[disabled]{background:#e9e2d6;border-color:#e9e2d6;color:#8a817a;opacity:1}
:root{--jn-hand:'Caveat','Bradley Hand','Segoe Print',cursive}
/* </pip> */
/* PSY-1810 the minimal lesson screen. Three type styles and one spacing scale, defined here as
   variables and used by every rule that dresses the exercise screen: --lq-ask is the ask and the
   question, in one serif size; --lq-answer is the answer text, in one sans size; --lq-label is
   the one small label size, used by the key hints, the small notes, the why line, the number on
   a card and the Check and Continue buttons. Nothing on the screen sets a size any other way.
   Spacing is whole steps of --lq-step (8px). No animation starts here, so the reduced-motion
   block above keeps the last word. */
.session-page,.exercise-bar{--lq-ask:1.25rem;--lq-answer:1.0625rem;--lq-control:1rem;--lq-label:0.8125rem;--lq-step:8px}
.session-page h1,.session-page h2,.session-page h3,.session-page .question,.session-page .exercise-prompt{font-size:var(--lq-ask)}
.session-page,.session-page p,.session-page li,.session-page b,.session-page strong,.session-page input,.session-page .choice,.session-page .tile,.session-page .match-card,.session-page .choice-text,.session-page .match-text,.session-page .scene,.session-page .arrange-context,.session-page .answer-hint,.session-page .exp-row,.session-page .media-hero .exercise-prompt{font-size:var(--lq-answer)}
.session-page small,.session-page .small-note,.session-page .label,.session-page .stat,.session-page .key,.session-page .number,.session-page .combo,.session-page .again-chip,.session-page .exp-progress,.exercise-bar:not(.feedback),.exercise-bar:not(.feedback) .key,.exercise-bar:not(.feedback) .key-hints{font-size:var(--lq-label)}
/* PSY-2336 the fourth style: the controls (Check, Continue, the idea chip, the keys chip) and the context line, one size */
.session-page .idea-chip,.exercise-bar .btn,.exercise-bar .keys-btn,.session-page .session-context{font-size:var(--lq-control)}
.session-page .session-context{font-weight:400;margin:0 0 calc(var(--lq-step)/2)}
.session-page .session-note{color:var(--ink-soft);line-height:1.4;margin:0 0 calc(var(--lq-step)*2)}
/* PSY-2336 a questionnaire statement is never scored, so its screen has no combo row to reserve space for: the row's height pays for the context line above the measure card on a phone */
.session-page[data-kind="survey"] .combo{display:none}
/* PSY-2336 the key hints are hidden until the chip or the ? key opens them, on every width */
.exercise-bar .key-hints{display:none}
.exercise-bar.hints-open .key-hints{display:flex;flex-wrap:wrap}
/* the order on the screen: top bar, ask, question, picture, answer cards, then the pinned bar */
.session-page{padding:var(--lq-step) calc(var(--lq-step)*2) calc(var(--lq-step)*22)}
.kb .session-page{padding-bottom:calc(var(--lq-step)*26)}
.session-top{gap:var(--lq-step);margin:0 0 var(--lq-step)}
.session-page .combo{margin:0 0 var(--lq-step);min-height:calc(var(--lq-step)*2)}
.exercise-content .question{margin:0 0 var(--lq-step)}
.session-page .idea-chip.item-idea{margin:0}
.session-page .art-strip{aspect-ratio:auto;height:calc(var(--lq-step)*12);margin:0 0 calc(var(--lq-step)*2)}
.exercise-content .choices{gap:var(--lq-step);margin:0}
.exercise-content .choice{min-height:calc(var(--lq-step)*7);padding:var(--lq-step) calc(var(--lq-step)*1.5);border-width:1px}
.session-page .word-bank{gap:var(--lq-step);margin:0 0 calc(var(--lq-step)*2)}
.session-page .tile{border-width:1px}
.session-page .answer-line{min-height:calc(var(--lq-step)*11);margin:0 0 calc(var(--lq-step)*2);padding:var(--lq-step)}
.session-page .arrange-context{margin:0 0 var(--lq-step)}
.session-page .match-grid{gap:var(--lq-step);margin:0}
.session-page .match-card{min-height:calc(var(--lq-step)*11);border-width:1px}
/* PSY-2658 a Timed pairs board is five pairs, one row taller than a grid: shorter cards so the board fits a phone */
.session-page.pairs-round .match-card{min-height:calc(var(--lq-step)*9)}
.session-page .media-hero{min-height:calc(var(--lq-step)*14);margin:0 0 calc(var(--lq-step)*2)}
.session-page .image-grid{gap:var(--lq-step);margin:0}
/* the open key hints are one line under the bar on a desktop width, in the label style, never wrapped; on a phone they wrap */
.exercise-bar:not(.feedback) .pinned-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lq-step)}
@media(min-width:700px){.exercise-bar.hints-open:not(.feedback) .key-hints{width:auto;max-width:none;flex-wrap:nowrap;white-space:nowrap;justify-content:center;gap:calc(var(--lq-step)*2);margin:var(--lq-step) 0 0}}
@media(max-width:699px){.exercise-bar:not(.feedback){padding:var(--lq-step) calc(var(--lq-step)*2) max(calc(var(--lq-step)*2),env(safe-area-inset-bottom))}}
@media(min-width:700px){.session-page,.exercise-bar{--lq-ask:1.375rem}.session-page{padding:calc(var(--lq-step)*3) calc(var(--lq-step)*3) calc(var(--lq-step)*22)}.session-page .art-strip{height:calc(var(--lq-step)*17.5)}.exercise-content .choice{min-height:calc(var(--lq-step)*9)}}
/* PSY-1822 the three screens the new kinds bring, dressed from the same scale as everything
   else on the lesson screen: the teach card (the mini experiment's intro panel, now an item
   kind of its own, with the part's picture at the top and its lines left aligned under a
   centred title), the contrast pair's two cases, the flawed conclusion a fix-the-reasoning item
   opens with, and the published figures a prediction reveals once the guess is in. */
.exp-intro.teach-card{text-align:left}
.teach-card h2{text-align:center}
.teach-card .art-strip{margin:0 0 calc(var(--lq-step)*2)}
.teach-card .card-line{margin:0 0 var(--lq-step)}
.teach-card .card-line .label{display:block;color:var(--accent-text);margin:0 0 calc(var(--lq-step)*.5)}
.teach-card .small-note{margin:var(--lq-step) 0 0}
/* PSY-1833 the tag a concept card wears: a new idea on the first meeting, a reminder on every
   later one. Small enough to sit over the title without taking a line of its own on a phone, and
   the track's pale tint under its own accent text, which clears 4.5:1 on all four tracks (the
   accent itself under that text is 3.5:1, which axe rightly fails). */
.teach-card .card-badge{display:inline-flex;align-items:center;gap:calc(var(--lq-step)*.6);margin:0 0 calc(var(--lq-step)*.75);padding:calc(var(--lq-step)*.25) calc(var(--lq-step)*1.25);border:1px solid var(--section);border-radius:calc(var(--lq-step)*12);background:var(--soft);color:var(--accent-text);font-size:var(--lq-label);font-weight:700;line-height:1.6}
.teach-card .card-badge svg{flex:none}
/* PSY-2210 an idea card teaches one named idea inside a course (the four horsemen, the warmth ratio) in front of the first item that names it; its Key idea tag is filled in the track colour so it reads apart from the outlined New idea and Reminder tags */
.teach-card.card-idea .card-badge{background:var(--section);border-color:var(--section);color:var(--on-section)}
.contrast-cases{display:grid;gap:var(--lq-step);margin:0 0 var(--lq-step)}
.contrast-case{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:var(--lq-step) calc(var(--lq-step)*1.5)}
.contrast-case .label{display:block;color:var(--accent-text);margin:0 0 calc(var(--lq-step)*.5)}
.contrast-case p{margin:0}
.claim-scene{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:var(--lq-step) calc(var(--lq-step)*1.5);margin:0 0 var(--lq-step)}
.predict-reveal{margin:var(--lq-step) 0}

/* PSY-1781 the three kinds that ask for something made rather than chosen. Everything here is
   built from the same three type styles and the same 8px step as the rest of the lesson screen:
   the story is one column of answer cards, the sort board is a hand of cards over two buckets,
   and the open answer is one box. Motion is a card lifting when it is picked up and dropping
   into a bucket, both of which the global reduced-motion rule already stops. */
.exercise-content .choices.spot-list{grid-template-columns:1fr}
.spot-list .choice{align-items:flex-start}
.spot-list .choice .number{margin-top:calc(var(--lq-step)*.25)}
.sort-hand{display:flex;flex-direction:column;gap:calc(var(--lq-step)*.75);min-height:calc(var(--lq-step)*7);margin:calc(var(--lq-step)*1.5) 0 0}
.sort-hand .tile,.bucket-cards .tile{font-size:var(--lq-label);padding:calc(var(--lq-step)*.75) var(--lq-step);line-height:1.4}
.sort-hand .answer-hint{color:var(--muted);font-size:var(--lq-label);align-self:center}
.sort-card{transition:transform .18s ease}
.sort-card.selected{transform:translateY(calc(var(--lq-step)*-.5))}
.sort-buckets{display:grid;grid-template-columns:1fr 1fr;gap:var(--lq-step)}
.sort-bucket{border:1px dashed var(--line);border-radius:20px;padding:var(--lq-step);display:flex;flex-direction:column;gap:calc(var(--lq-step)*.75);min-height:calc(var(--lq-step)*9)}
.sort-bucket .bucket-head{width:100%;text-align:center;background:var(--paper)}
.bucket-cards{display:flex;flex-direction:column;gap:calc(var(--lq-step)*.75)}
.bucket-cards .tile{width:100%;text-align:left;animation:tile-in .2s ease-out both}
.open-answer{margin-top:var(--lq-step);min-height:calc(var(--lq-step)*11);resize:vertical;font-family:inherit;font-size:var(--lq-answer);line-height:1.5}
.self-mark{display:grid;grid-template-columns:1fr 1fr;gap:var(--lq-step);margin-top:calc(var(--lq-step)*2)}
.self-mark .btn{margin-top:0}
/* PSY-2251 the marks behind the words are drawn in the ink: the token disc, the dot for a try, the
   bookmark for a rest day, the tick box for the pledge, the podium for a top finish. The chips that
   wore the old gem slate and ice blue read in the ink on the cream, and the shop objects are line
   marks, so nothing on the shelf is a coloured picture. */
.stat.gems,.stats .stat.gems,.gem-counter,.gem-fly,.reward-gems,.exchange-balance,.price-chip,.freeze-hint,.quest-waiting .icon,.shop-art,.stat-tile .icon{color:var(--ink)}
.stat.hearts,.session-top .hearts,.stat.energy,.session-top .energy{color:var(--ink-soft)}
.sheet .meter-pips{color:var(--ink)}
.ice-chip{background:var(--cream);color:var(--ink);border:1px solid var(--line)}
.freeze-snow{background:var(--surface);color:var(--ink);border-color:var(--line)}
/* PSY-2527 the dark scheme. The device setting is the switch, the way it is on the main site:
   there is no toggle in Settings and no scheme state to store. The block remaps the root tokens
   and nothing else, so every component that paints in a token follows on its own: a deep cocoa
   page, cream ink, the honey accent held at a lower lightness so the cocoa ink on a pill still
   reads, the cedar and the crisis line lifted until they hold AA as text on the dark page, and
   the six track plates turned into deep tones with their accent lifted to match. --cocoa stays
   dark on purpose: it is the ink on a honey fill and on the light answer cards, not the page ink.
   The block for forced colors below is the last word, as it has to be: a learner's own theme
   beats both schemes. */
@media(prefers-color-scheme:dark){
:root{--bg:oklch(0.205 0.012 52);--surface:oklch(0.245 0.013 54);--tint:oklch(0.285 0.014 58);--line:oklch(0.385 0.012 60);--ink:oklch(0.945 0.008 78);--ink-soft:oklch(0.775 0.012 70);--dark:oklch(0.305 0.016 52);--brand:oklch(0.80 0.10 70);--brand-hover:oklch(0.86 0.08 72);--honey:oklch(0.76 0.13 82);--honey-deep:oklch(0.68 0.13 78);--right:oklch(0.70 0.10 160);--crisis-line:oklch(0.70 0.14 30);--terra:oklch(from var(--wrong) 0.76 c h);--track-honey:oklch(0.315 0.045 82);--track-honey-dark:oklch(0.80 0.09 82);--track-honey-soft:oklch(0.265 0.028 82);--track-honey-tint:oklch(0.315 0.045 82 / .66);--track-cedar:oklch(0.315 0.045 160);--track-cedar-dark:oklch(0.80 0.09 160);--track-cedar-soft:oklch(0.265 0.028 160);--track-cedar-tint:oklch(0.315 0.045 160 / .66);--track-slate:oklch(0.315 0.045 240);--track-slate-dark:oklch(0.80 0.09 240);--track-slate-soft:oklch(0.265 0.028 240);--track-slate-tint:oklch(0.315 0.045 240 / .66);--track-plum:oklch(0.315 0.045 320);--track-plum-dark:oklch(0.80 0.09 320);--track-plum-soft:oklch(0.265 0.028 320);--track-plum-tint:oklch(0.315 0.045 320 / .66);--track-ember:oklch(0.315 0.045 40);--track-ember-dark:oklch(0.80 0.09 40);--track-ember-soft:oklch(0.265 0.028 40);--track-ember-tint:oklch(0.315 0.045 40 / .66);--track-teal:oklch(0.315 0.045 195);--track-teal-dark:oklch(0.80 0.09 195);--track-teal-soft:oklch(0.265 0.028 195);--track-teal-tint:oklch(0.315 0.045 195 / .66);--track-olive:oklch(0.315 0.045 110);--track-olive-dark:oklch(0.80 0.09 110);--track-olive-soft:oklch(0.265 0.028 110);--track-olive-tint:oklch(0.315 0.045 110 / .66)}
}
/* PSY-2655 more contrast (prefers-contrast: more, the device setting short of a forced theme). A
   learner who asks for more contrast keeps our palette, so the block names no colour of its own
   and declares no token of its own: it reassigns the ones the page already paints in, inside one
   :root, and every component that paints in a token follows. The soft ink behind every caption,
   note, stat and key chip becomes the page ink; the hairline behind every card, input, rail,
   sheet and divider becomes the soft ink; the six plate washes, the one translucent surface in the
   token set, become the plate itself. The few surfaces drawn in a literal are drawn again: the
   sheet backdrop in cocoa at full opacity, the toast's action pill with a solid rim, the course
   tile's border in the soft ink, the active tab's rim in the brand, the dimmed key chip at full
   opacity. The focus ring keeps its width (three eighths of the step, three pixels) and goes
   solid in the ink wherever the honey ring was, and the progress track takes a thin outline so
   the bar's full length shows beside its fill. Nothing moves and no font changes size. The block
   sits before the block for forced colors, which keeps the last word: a learner's own theme beats
   every scheme of ours, this one included. */
@media(prefers-contrast:more){
:root{--muted:var(--ink);--line:var(--ink-soft);--track-honey-tint:var(--track-honey);--track-cedar-tint:var(--track-cedar);--track-slate-tint:var(--track-slate);--track-plum-tint:var(--track-plum);--track-ember-tint:var(--track-ember);--track-teal-tint:var(--track-teal);--track-olive-tint:var(--track-olive)}
.muted,.small-note,small,.key,.keys-btn,.key-hints,.stat,.icon-button,.path-intro,.path-footer,.session-context{color:var(--ink)}
.card,.sheet,.key,.keys-btn,.track-tile,input,select,textarea{border-color:var(--ink-soft)}
.stats,.rail{border-color:var(--ink-soft)}
.explain-toggle .key{opacity:1}
.tab.active{border-color:var(--brand)}
.sheet-backdrop{background:var(--cocoa)}
#toast .toast-action{border-color:#fff}
.progress{outline:1px solid var(--ink-soft)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.help-entry:focus-visible{outline:calc(var(--lq-step,8px)*.375) solid var(--ink)}
}
/* PSY-2280 forced colors (Windows High Contrast, Chrome and Edge "forced colors"). The browser
   paints every background in Canvas and every run of text in CanvasText, so a state the page draws
   with a fill alone is gone: the picked card, the cedar and terracotta sheets, the bar's fill, a
   ring's arc, the lit day, a matched pair. This block draws each of them again as a line in the
   system colours (Highlight for the thing the learner picked and for focus, LinkText for a right
   answer, CanvasText for the rest, GrayText for what is spent), never in a colour of our own: the
   theme is the learner's, and a hex here would paint over it. Backgrounds are not set at all, the
   browser overrides them; the fills are borders, so they survive. The SVG marks are not forced by
   the browser (an ink set on the svg element itself stays whatever the stylesheet said, which on a
   dark theme is brown on black), so the Pip mark, the month plate and the avatar token keep their
   drawing (forced-color-adjust: none) with the ink put in CanvasText by hand, and the rings and
   group plate take CanvasText strokes. The one line weight, --fc-line, is a quarter step of the
   lesson scale (two pixels), written on :root with the step's 8px fallback so the rings and tokens off
   the lesson screen get the same line; --fc-in pulls an outline half a line inside its box.
   Nothing here moves, shouts or tracks. */
@media(forced-colors:active){
:root{--fc-line:calc(var(--lq-step,8px)*.25);--fc-in:calc(var(--fc-line)*-.5)}
.choice.selected,.tile.selected,.match-card.selected{outline:var(--fc-line) solid Highlight;outline-offset:var(--fc-in)}
.choice.correct,.tile.correct{outline:var(--fc-line) solid LinkText;outline-offset:var(--fc-in)}
.choice.wrong,.tile.wrong,.match-card.wrong{outline:var(--fc-line) solid CanvasText;outline-offset:var(--fc-in)}
.match-card.matched{outline:var(--fc-line) solid GrayText;outline-offset:var(--fc-in);color:GrayText}
.tile.used{visibility:hidden}
.feedback{outline:var(--fc-line) solid LinkText;outline-offset:calc(var(--fc-in)*2)}
.feedback.wrong{outline-color:CanvasText}
.progress{height:calc(var(--fc-line)*3);outline:1px solid CanvasText}
.progress>span{border:calc(var(--fc-line)*1.5) solid CanvasText}
.progress.step-dots{height:calc(var(--fc-line)*8);outline:none}
.step-dots i{border:1px solid GrayText}
.step-dots i.done,.step-dots i.now{border:calc(var(--fc-line)*2) solid CanvasText}
.ring-track{stroke:GrayText!important}
.ring-fill{stroke:CanvasText!important}
.goal-ring,.goal-chip,.acc-ring,.survey-ring,.milestone-ring,.month-art{color:CanvasText}
.week-day b{border:1px solid GrayText}
.week-day.lit b{border:calc(var(--fc-line)*2) solid CanvasText}
.week-day.today b,.week-day.goal b{outline:var(--fc-line) solid Highlight;outline-offset:1px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.help-entry:focus-visible{outline-color:Highlight}
.pip,.plate-art,.avatar-art{forced-color-adjust:none;color:CanvasText}
.avatar-art .avatar-token{stroke:CanvasText;stroke-width:2}
.avatar-art .avatar-initials{paint-order:stroke;stroke:Canvas;stroke-width:calc(var(--fc-line)*1.5);stroke-linejoin:round}
.group-art,.chain-stage,.chain-mark,.risk-mark{color:CanvasText}
.group-art .group-ring{stroke:CanvasText}
.week-bars i,.acc-dot,.month-bars i{border:1px solid CanvasText}
.week-bars i.now,.acc-dot.now,.month-bars span.now i{background:CanvasText}
/* PSY-2648 the fills the first pass left out: the current and locked marks on the path (and the
   done mark's cocoa coat), the Check bar before and after a check with its live button, the
   toast surface, the zone lines on the board and the chain dots. The same rule: a line in the
   system colours, the current node and its mark in Highlight, a locked mark in GrayText, the
   live button in ButtonText except while the focus ring (Highlight) is on it. */
.node.current{outline:var(--fc-line) solid Highlight;outline-offset:var(--fc-in)}
.node.current .node-mark{border-color:Highlight}
.node.done .node-mark{border:calc(var(--fc-line)*1.5) solid CanvasText}
.node.locked .node-mark{border-color:GrayText;color:GrayText;outline:1px solid GrayText;outline-offset:1px}
.node.locked .node-state{color:GrayText}
.exercise-bar{border-top:var(--fc-line) solid CanvasText}
.exercise-bar.feedback{border-top-color:LinkText}
.exercise-bar.feedback.wrong{border-top-color:CanvasText}
.exercise-bar .btn:not(:disabled):not(:focus-visible){outline:var(--fc-line) solid ButtonText;outline-offset:var(--fc-in)}
#toast{border:var(--fc-line) solid CanvasText}
.zone,.zone.down{color:CanvasText;border-color:CanvasText}
.chain-dot{stroke:CanvasText}
.chain-dot.now{fill:CanvasText}
}

/* <pip> */
/* Answer box: light, with a small circle on the right */
main.calm-lesson .cl-fb{position:relative;padding-right:76px;background:#fbe6d2;color:#27201c}
main.calm-lesson .cl-fb b{color:#27201c}
main.calm-lesson .cl-fb .cl-src{color:#5e5651}
main.calm-lesson .cl-fb a,main.calm-lesson .cl-fb button{color:#27201c}
main.calm-lesson .cl-fb::after{content:"";position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;background:#eec46a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327201c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.5 1 2.5h6c0-1 .2-1.7 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/26px no-repeat}

/* Lesson 4 stories: the question sits above the story and can wrap */
main.calm-lesson .cl-card:has(.cl-scene){padding-top:20px}
main.calm-lesson .cl-card:has(.cl-scene) .cl-card-k{position:relative;top:auto;left:auto;right:auto;display:block;width:auto;margin:0 0 12px;font-size:1.125rem;line-height:1.25;box-shadow:none}

/* Stories with two answers: the story first, then the question right above the buttons */
main.calm-lesson .jg-two-q{margin:18px 0 10px;font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-size:1.25rem;font-weight:600;line-height:1.2;color:#27201c}

main.calm-lesson .cl-card:has(.cl-scene)::after{display:none}
main.calm-lesson .cl-card:has(.cl-scene) .cl-scene{position:relative;z-index:1}

main.calm-lesson .jg-two-q{margin:20px 0}
main.calm-lesson .cl-card:has(.cl-scene){margin-bottom:0}
main.calm-lesson .jg-two-q+.cl-two{margin-top:0}

/* Questions with no instant answer say so */
main.calm-lesson .jg-later{margin:14px 0 0;font-size:.875rem;line-height:1.4;color:#5e5651;text-align:center}

/* Home: daily question */
.j-home .jh-daily{display:block;text-align:left}
.j-home .jh-daily h2{margin:0;font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-size:1.25rem;font-weight:600;color:#27201c}
.j-home .jh-daily small{display:block;margin-top:2px;color:#5e5651}
.j-home .jh-daily p{margin:12px 0 0;line-height:1.4;color:#27201c}

/* Discover: compact topics, then Courses */
.j-lib .jl-topics{gap:8px}
.j-lib .jl-topics .jh-card{min-height:92px;height:92px;padding:12px;aspect-ratio:auto}
.j-lib .jl-topics .jl-draw{display:none}
.j-lib .jl-topics .jh-ttl{font-size:1rem;line-height:1.15}
.j-lib .jl-topics .jh-mut,.j-lib .jl-topics small{font-size:.75rem}
.j-lib .jl-topics .jh-cap b{font-size:1rem;line-height:1.15}
.j-lib .jl-h2{margin:24px 0 10px;font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-size:1.5rem;font-weight:600;color:#27201c}
.j-lib .jl-course{display:block;width:100%;min-height:0;padding:16px;text-align:left}
.j-lib .jl-course .jh-ttl,.j-lib .jl-course .jh-mut{display:block}
.j-lib .jl-soon{display:inline-block;margin-top:8px;font-size:.8125rem;font-weight:700;color:#7c5316}

.j-lib .jl-h2 em{font-style:normal;background:linear-gradient(rgba(238,196,106,.5),rgba(238,196,106,.5)) 0 88%/100% .36em no-repeat}

/* Discover: topic icons back, small */
.j-lib .jl-topics .jh-card{position:relative}
.j-lib .jl-topics .jl-draw{display:block;position:absolute;right:10px;bottom:8px;margin:0}
.j-lib .jl-topics .jl-draw svg{display:block;width:34px;height:34px}
.j-lib .jl-topics .jh-ttl{padding-right:0}
/* Discover: courses */
.j-lib .jl-course-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px}
.j-lib .jl-course-h b{font-size:1.125rem;font-weight:700;color:#27201c}
.j-lib .jl-course-h span{font-size:.8125rem;font-weight:700;color:#7c5316}
.j-lib .jl-course-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.j-lib .jl-ct{display:block;padding:0;border:0;background:none;text-align:left;color:#27201c;font:inherit;cursor:pointer}
.j-lib .jl-ct-img{position:relative;display:block;height:104px;border-radius:18px;background-size:cover;background-position:center}
.j-lib .jl-ct-video{background-image:url(assets/landing/course-video.jpg?v=4)}
.j-lib .jl-ct-game{background-image:url(assets/landing/course-game.jpg?v=4)}
.j-lib .jl-ct-img i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;border-radius:50%;background:#eec46a}
.j-lib .jl-ct b{display:block;margin-top:8px;font-size:1rem;font-weight:700}
.j-lib .jl-ct small{display:block;font-size:.8125rem;color:#5e5651}

.j-lib .jl-topics .jl-draw{top:10px;right:10px;bottom:auto}
.j-lib .jl-topics .jh-ttl{padding-right:38px}

.j-notes .jn-photo.jp-writing{background-image:url(assets/landing/journal-rock.jpg?v=4);background-position:50% 45%}

/* Home: the chapter row shows the stamps instead of numbers */
.j-home .jh-stamprow{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:2px;width:100%;margin:12px 0 6px}
.j-home .jh-stamprow svg{flex:0 1 auto;min-width:0;max-width:30px;height:auto}

/* Home: stamps in the topic card, on the same honey panel as the Your stamps card */
.j-home .jh-stampbox{display:block;width:100%;margin:12px 0 8px;padding:12px;border:0;border-radius:18px;background:#fbedd0;cursor:pointer;box-sizing:border-box}
.j-home .jh-stampbox .jn-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}

.j-home .jh-stampbox{padding:8px}
.j-home .jh-stampbox .jn-row{flex-wrap:nowrap;gap:0;justify-content:space-between}
.j-home .jh-stampbox .jn-row>*{flex:0 1 35px;min-width:0;width:auto;max-width:35px;height:auto}

/* Home: a short positive thought, new every day */
.j-home .jh-thought{margin:10px 0 12px;padding:14px 16px;border-radius:20px;background:#fce5bb}
.j-home .jh-thought small{display:block;font-size:.75rem;font-weight:700;color:#7c5316}
.j-home .jh-thought p{margin:4px 0 0;font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-size:1.25rem;font-weight:600;line-height:1.2;color:#27201c}
/* Stamps are always one line */
.j-notes .jn-row,.j-home .jn-row{flex-wrap:nowrap;gap:2px;justify-content:space-between}
.j-notes .jn-row>*,.j-home .jn-row>*{flex:0 1 35px;min-width:0;max-width:35px;height:auto}

.j-home .jh-card.jh-thought{margin:0;display:block;text-align:left}

/* Today's thought as a handwritten note on lined paper */
.j-home .jh-card.jh-thought{padding:14px 18px 16px;border-radius:6px 20px 20px 20px;background:#fce5bb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='30'%3E%3Crect y='29' width='8' height='1' fill='%23f0d59a'/%3E%3C/svg%3E");transform:rotate(-1deg)}
.j-home .jh-thought small{font-size:.8125rem;line-height:1.3}
.j-home .jh-thought p{margin:6px 0 0;font-family:var(--jn-hand);font-size:1.875rem;font-weight:500;line-height:30px;color:#27201c}

/* Home: the topic card is honey like the old Your stamps card, with no box inside it */
.j-home .jh-track{background:#fbedd0;border-color:#fbedd0}
.j-home .jh-stampbox{padding:0;margin:12px 0 8px;background:none;border-radius:0}
/* Journal photo: only the girl, zoomed in */
.j-notes .jn-photo.jp-writing{background-size:230% auto;background-position:47% 20%}
.j-notes .jn-photo.jp-writing{background-size:210% auto;background-position:47% 8%}

/* Stamps sit close together, on one line */
.j-notes .jn-row,.j-home .jn-row,.j-home .jh-stampbox .jn-row{justify-content:flex-start;gap:3px}
/* Today's thought with the snail, which moves once when the card comes into view */
.j-home .jh-card.jh-thought{display:flex;align-items:center;gap:8px}
.j-home .jh-th-tx{flex:1 1 auto;min-width:0}
.j-home .jh-sn{flex:0 0 84px}
.j-home .jh-sn svg{display:block;width:84px;height:auto;margin:0;overflow:visible}
@keyframes jhHop{0%,100%{transform:translateY(0)}25%{transform:translateY(-7px)}50%{transform:translateY(0)}72%{transform:translateY(-3px)}}
@keyframes jhStalk{0%,100%{transform:rotate(0)}30%{transform:rotate(12deg)}65%{transform:rotate(-9deg)}}
.j-home .jh-sn.go svg{animation:jhHop .5s ease-out 1 both}
.j-home .jh-sn.go svg path:nth-of-type(4),.j-home .jh-sn.go svg circle:nth-of-type(2),.j-home .jh-sn.go svg circle:nth-of-type(3){transform-box:view-box;transform-origin:112px 46px;animation:jhStalk .5s ease-in-out 1 both}
@media (prefers-reduced-motion:reduce){.j-home .jh-sn.go svg,.j-home .jh-sn.go svg *{animation:none}}

.j-home .jh-card.jh-thought{flex-direction:row;min-height:0;height:auto;aspect-ratio:auto}
.j-home .jh-sn{flex:0 0 78px}
.j-home .jh-sn svg{width:78px}

/* Today's thought: a hand drawn circle draws itself around the last word, once */
.j-home .jh-sn{display:none}
.j-home .jh-circ{position:relative;display:inline-block;white-space:nowrap}
.j-home .jh-circ svg{position:absolute;left:-9px;top:-3px;width:calc(100% + 18px);height:calc(100% + 6px);overflow:visible;pointer-events:none}
.j-home .jh-circ path{fill:none;stroke:#93641f;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.j-home .jh-circ.go path{transition:stroke-dashoffset .5s ease-out;stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.j-home .jh-circ path{stroke-dashoffset:0}}

/* Words you are learning: tap for the meaning */
.jh-word{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline dotted #93641f 2px;text-underline-offset:3px;cursor:pointer}
.jh-word-def{margin:0 0 8px;font-size:1.0625rem;line-height:1.45;color:#27201c}

.sheet:has(.jh-word-def) .sheet-head h2,.sheet:has(.jh-fact-go) .sheet-head h2{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:600}

/* Trial: Who you are, taped cards in the journal */
.j-notes .jy{margin:6px 0 6px;overflow-x:clip;overflow-y:visible;padding:0 5px 6px;margin-inline:-5px}
.j-notes .jy .jn-h2{margin:0}
.j-notes .jn-tabs{gap:20px}
.j-notes .jy-sub{margin:4px 0 14px;font-size:.875rem;line-height:1.4;color:#5a5044}
.j-notes .jy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
.j-notes .jy-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:8px 8px 12px;background:#fffdf8;border:1px solid #eadfca;border-radius:22px;box-shadow:0 2px 6px rgba(39,32,28,.1)}
.j-notes .jy-card:nth-child(4n+1){transform:rotate(-1.2deg)}
.j-notes .jy-card:nth-child(4n+2){transform:rotate(1deg)}
.j-notes .jy-card:nth-child(4n+3){transform:rotate(.8deg)}
.j-notes .jy-card:nth-child(4n+4){transform:rotate(-.9deg)}
.j-notes .jy-tape{position:absolute;top:-8px;left:50%;width:58px;height:17px;margin-left:-29px;background:#eec46a;opacity:.75;transform:rotate(-2deg)}
.j-notes .jy-pic{aspect-ratio:4/3;border-radius:16px;background-size:cover;background-position:center}
.j-notes .jy-card small{margin:9px 2px 0;font-size:.6875rem;font-weight:700;line-height:1.25;color:#93641f}
.j-notes .jy-card b{margin:3px 2px 0;font-family:var(--jn-hand);font-size:1.4rem;font-weight:500;line-height:1.08;color:#27201c}
.j-notes .jy-card span{margin:4px 2px 0;font-size:.75rem;line-height:1.25;color:#5a5044}
.j-notes .jy-open{background:#fbf5e9;box-shadow:none;border-style:dashed;border-color:#d8c9a8}
.j-notes .jy-open .jy-pic{opacity:.5}
.j-notes .jy-open button{align-self:flex-start;margin:6px 2px 0;font-size:.8125rem;font-weight:700;color:#27201c}
@media (min-width:760px){.j-notes .jy-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.j-notes .jy-p-self-esteem{background-image:url(assets/landing/journal-esteem.webp)}
.j-notes .jy-p-imposter-syndrome{background-image:url(assets/landing/journal-know.webp)}
.j-notes .jy-p-attachment-style{background-image:url(assets/landing/journal-c12.webp)}
.j-notes .jy-p-big-five{background-image:url(assets/landing/journal-c13.webp)}
.j-notes .jy-p-locus-of-control{background-image:url(assets/landing/know-plants.jpg?v=4)}
.j-notes .jy-p-emotional-intelligence{background-image:url(assets/landing/journal-c14.webp)}
.j-notes .jy-p-burnout{background-image:url(assets/landing/journal-mug.webp)}
.j-notes .jy-p-values{background-image:url(assets/landing/journal-c15.webp)}
.j-notes .jy-p-16-personalities{background-image:url(assets/landing/journal-c16.webp)}
.j-notes .jy-p-highly-sensitive-person{background-image:url(assets/landing/journal-feelings.webp)}
.j-notes .jy-open button{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#eec46a;text-decoration-thickness:2px;padding:0}
@media (max-width:759px){.j-notes .jn-tabs{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}

/* Trial: the full type page */
.j-notes .jy-more{align-self:flex-start;margin:6px 2px 0;padding:0;font-size:.8125rem;font-weight:700;color:#27201c;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#eec46a;text-decoration-thickness:2px}
.j-notes.jy-page .jn-h2{margin:26px 0 10px}
.j-notes .jy-hero{background-size:cover!important;background-position:center!important}
.j-notes .jy-kicker{display:block;margin:14px 0 2px;font-size:.75rem;font-weight:700;color:#93641f}
.j-notes .jy-hand{margin:2px 0 6px;font-family:var(--jn-hand);font-size:1.75rem;line-height:1.1;color:#27201c}
.j-notes .jy-letters{display:flex;flex-direction:column;border:1.5px solid #ece4d6;border-radius:20px;background:#fff}
.j-notes .jy-letter{display:flex;align-items:center;gap:12px;padding:12px 14px}
.j-notes .jy-letter+.jy-letter{border-top:1px solid #ece4d6}
.j-notes .jy-letter i{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fce5bb;font-style:normal;font-weight:700;color:#27201c}
.j-notes .jy-letter div{flex:1;min-width:0}
.j-notes .jy-letter b{display:block;font-size:.9375rem;color:#27201c}
.j-notes .jy-letter span{display:block;font-size:.8125rem;line-height:1.3;color:#5a5044}
.j-notes .jy-letter em{font-style:normal;font-weight:700;font-size:.9375rem;color:#93641f}
.j-notes .jy-life{margin:0 0 10px;padding:12px 16px;border-radius:20px;background:#fdf1d8}
.j-notes .jy-life small{font-size:.75rem;font-weight:700;color:#93641f}
.j-notes .jy-life p{margin:3px 0 0;font-size:.9375rem;line-height:1.45;color:#27201c}
.j-notes .jy-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.j-notes .jy-two ul{margin:0;padding:0 0 0 18px;font-size:.9375rem;line-height:1.35;color:#27201c}
.j-notes .jy-two li{margin:0 0 7px}
.j-notes .jy-try{margin-top:16px}
.j-notes .jy-honest{margin:14px 0 24px;font-size:.8125rem;line-height:1.45;color:#5a5044}
.j-notes .jn-photo+.jn-h{margin-top:24px}
.j-notes .jn-h+.jn-sub{margin-top:10px}

/* Trial: no floating Help on the four main screens, a quiet Help link at the end of each page instead. It still opens the sheet with the crisis lines first */
body:has(.home-nav) .help-entry{display:none}
.j-help-line{margin:0;padding:6px 16px calc(96px + env(safe-area-inset-bottom,0px));text-align:center}
.j-help-line .link-button{font-size:.875rem;font-weight:600;color:#5a5044;text-decoration:underline;text-underline-offset:3px}

/* Trial: Who you are sits under the stamps: the type as the big card, the rest as small tiles, gray until done */
.j-notes .jy{margin:20px 0 4px;padding:0;margin-inline:0;overflow:visible}
.j-notes .jy .jn-h2{margin:0 0 12px}
.j-notes .jn-h{margin-top:4px}
.j-notes .jy-hero-card{position:relative;display:flex;gap:12px;align-items:stretch;padding:10px;background:#fffdf8;border:1px solid #eadfca;border-radius:22px;box-shadow:0 2px 6px rgba(39,32,28,.1)}
.j-notes .jy-hero-card .jy-pic{flex:0 0 42%;aspect-ratio:1/1;border-radius:16px}
.j-notes .jy-tx{display:flex;flex-direction:column;justify-content:center;min-width:0}
.j-notes .jy-tx small{font-size:.6875rem;font-weight:700;line-height:1.25;color:#93641f}
.j-notes .jy-tx b{margin-top:3px;font-family:var(--jn-hand);font-size:1.6rem;font-weight:500;line-height:1.05;color:#27201c}
.j-notes .jy-tx span{margin-top:4px;font-size:.8125rem;font-weight:700;color:#5a5044}
.j-notes .jy-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;margin-top:16px}
.j-notes .jy-tile{display:flex;flex-direction:column;align-items:stretch;min-width:0;margin:0;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit}
.j-notes .jy-tile .jy-pic{aspect-ratio:1/1;border-radius:16px}
.j-notes .jy-tile small{margin-top:6px;font-size:.6875rem;font-weight:700;line-height:1.2;color:#93641f}
.j-notes .jy-tile b{margin-top:2px;font-family:var(--jn-hand);font-size:1.0625rem;font-weight:500;line-height:1.05;color:#27201c}
.j-notes .jy-off{cursor:pointer}
.j-notes .jy-off .jy-pic{filter:grayscale(1);opacity:.45}
.j-notes .jy-off small{color:#6f675d}
.j-notes .jy-off span{margin-top:2px;font-size:.75rem;font-weight:600;color:#5a5044;text-decoration:underline;text-underline-offset:2px}
@media (min-width:760px){.j-notes .jy-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}.j-notes .jy-hero-card .jy-pic{flex-basis:220px}}

/* Trial: journal top: back arrow and title on one row, cover photo, stamps, the type card, then the tabs */
.j-notes .jl-top{display:flex;align-items:center;gap:6px}
.j-notes .jl-top .jn-h{margin:0;font-size:1.625rem}
.j-notes .jl-top+.jn-photo{margin-top:8px}
.j-notes .jn-photo+.jh-card,.j-notes .jn-photo+section{margin-top:14px}
.j-notes .jy-hero-off .jy-pic{filter:grayscale(1);opacity:.45}
.j-notes .jy-hero-off .jy-tape{display:none}
.j-notes .jy-tiles{margin-top:2px}
.j-notes .jl-top span{display:none}

/* Trial: more air between the journal stamps, light tape on every result, taller topic rectangles on Discover */
.j-notes .jn-row,.j-notes .jn-home-stamps .jn-row{gap:9px}
.j-notes .jn-home-stamps .jn-row>*{flex:none;width:32px;height:32px}
.j-notes .jy-tape{background:#fce5bb;opacity:1}
.j-notes .jy-tile{position:relative}
.j-notes .jy-tile .jy-tape{top:-6px;width:42px;height:13px;margin-left:-21px;transform:rotate(2deg)}
.j-notes .jy-tile:nth-child(even) .jy-tape{transform:rotate(-3deg)}
.j-notes .jy-tiles{row-gap:18px;margin-top:8px}
.j-lib .jl-topics .jh-card{min-height:152px}
.j-lib .jl-topics .jh-card:not(.jh-photo){display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left}
.j-lib .jl-topics .jh-card:not(.jh-photo) .jh-ttl{padding-right:0;margin-top:0}
.j-notes .jn-note p.jn-hand,.j-notes .jn-note .jn-hand{font-size:1.5rem;line-height:1.2}

/* Trial: the little character on Home */
.j-home .jh-head{align-items:flex-end}
.j-home .jh-buddy{position:relative;flex:none;width:58px;height:84px;margin:0 0 -6px auto;padding:0;border:0;background:none;cursor:pointer;overflow:hidden;transform-origin:50% 100%}
.j-home .jh-buddy span{position:absolute;inset:0;background:url(assets/landing/mascot-big.png) center bottom/contain no-repeat}
.j-home .jh-buddy .jb-shut{background-image:url(assets/landing/mascot-big-closed.png);opacity:0}
.j-home .jh-buddy.shut .jb-shut{opacity:1}.j-home .jh-buddy.shut .jb-open{opacity:0}
@keyframes jbRise{from{transform:translateY(100%)}to{transform:none}}
@keyframes jbHop{0%{transform:none}25%{transform:scale(1.04,.94)}55%{transform:translateY(-8px) scale(.97,1.04)}80%{transform:scale(1.03,.97)}100%{transform:none}}
.j-home .jh-buddy.rise span{animation:jbRise .5s cubic-bezier(.2,.8,.2,1) both}
.j-home .jh-buddy.hop span{animation:jbHop .5s ease-out both}
@media (prefers-reduced-motion:reduce){.j-home .jh-buddy span{animation:none!important}}

/* Trial: Pip examples */
.pip-walk{position:relative;height:150px;margin:22px 0 4px;overflow:hidden}
.pip-walk .pip-fig{position:absolute;left:0;bottom:8px;width:78px;height:130px;padding:0;border:0;background:none;cursor:pointer}
.pip-walk .pw{display:block;width:78px;height:130px;background:url(assets/landing/pip-walk.png?v=3) 0 0/858px 130px no-repeat}
.pip-ground{position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:2px;background:#c8952f;opacity:.45}
@keyframes pipX{from{transform:translateX(0)}to{transform:translateX(var(--to))}}
@keyframes pipSteps{from{background-position:0 0}to{background-position:-858px 0}}
.pip-walk.go .pip-fig{animation:pipX 2.7s linear both}
.pip-walk.go .pw{animation:pipSteps .9s steps(11) 3}
.pip-walk.done .pip-fig{animation:none;transform:translateX(var(--to))}
.pip-bubble{position:absolute;z-index:4;max-width:220px;padding:8px 12px;border:1.5px solid #ece4d6;border-radius:16px;background:#fff;font-size:.8125rem;font-weight:600;line-height:1.3;color:#27201c;display:none}
[data-pip].talk .pip-bubble{display:block}
.pip-walk .pip-bubble{right:84px;bottom:96px}
.j-notes .pip-peek{position:relative;margin-left:auto;align-self:flex-end}
.j-notes .pip-peek .pip-fig{position:relative;display:block;width:46px;height:64px;padding:0;border:0;background:none;cursor:pointer;overflow:hidden}
.j-notes .pip-peek .pip-fig span{position:absolute;inset:0;background:url(assets/landing/mascot-big.png) center bottom/contain no-repeat}
.j-notes .pip-peek .jb-shut{background-image:url(assets/landing/mascot-big-closed.png)!important;opacity:0}
.j-notes .pip-peek .pip-fig.shut .jb-shut{opacity:1}.j-notes .pip-peek .pip-fig.shut .jb-open{opacity:0}
.j-notes .pip-peek .pip-bubble{right:0;top:66px;white-space:nowrap}
@keyframes pipRise{from{transform:translateY(100%)}to{transform:none}}
@keyframes pipHop{0%{transform:none}30%{transform:translateY(-7px)}60%{transform:none}100%{transform:none}}
.j-notes .pip-peek .pip-fig.rise span{animation:pipRise .5s cubic-bezier(.2,.8,.2,1) both}
.pip-fig.hop{animation:pipHop .4s ease-out}
.pip-walk .pw.hop{animation:pipHop .4s ease-out}
@media (prefers-reduced-motion:reduce){.pip-walk .pip-fig,.pip-walk .pw,.pip-fig span,.pip-fig{animation:none!important}}
.j-notes .jl-top .pip-peek,.j-notes .jl-top .pip-peek span{display:block}
.j-notes .jl-top .pip-peek .pip-bubble{display:none}
.j-notes .jl-top .pip-peek.talk .pip-bubble{display:block}

/* Trial: Pip showcase in the journal */
.j-notes .pip-show{margin:6px 0 16px;padding:14px 14px 12px;border-radius:22px;background:#fdf1d8}
.j-notes .pip-show .pip-k{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#93641f}
.j-notes .pip-show .jn-h2{margin:2px 0 2px}
.j-notes .pip-sub{margin:0;font-size:.8125rem;color:#5a5044}
.j-notes .pip-show .pip-walk{margin:6px 0 4px;height:150px;overflow:visible}
.pip-hint{position:absolute;right:86px;bottom:104px;padding:6px 10px;border:1.5px solid #ece4d6;border-radius:14px;background:#fff;font-size:.8125rem;font-weight:700;color:#27201c;display:none}
.pip-walk.hint .pip-hint{display:block}
.pip-walk.talk .pip-hint{display:none}
.j-notes .pip-show .pip-bubble{right:86px;bottom:104px}
.j-notes .pip-moods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:8px}
.j-notes .pip-mood{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;border:0;border-radius:14px;background:#fffdf8;cursor:pointer;font:inherit}
.j-notes .pip-mood .pm{display:block;width:100%;height:58px;background-position:center bottom;background-size:contain;background-repeat:no-repeat}
.j-notes .pip-mood small{font-size:.6875rem;font-weight:600;color:#5a5044}
.pm-up{background-image:url(assets/landing/mascot-up.png)}.pm-calm{background-image:url(assets/landing/mascot-calm.png)}.pm-hug{background-image:url(assets/landing/mascot-hug.png)}.pm-mug{background-image:url(assets/landing/mascot-mug.png)}.pm-sleep{background-image:url(assets/landing/mascot-sleep.png)}
@keyframes pmPop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:none}}
.pm.pop{animation:pmPop .3s ease-out}

/* Trial: Pip showcase, walking on tap and moods that move */
.j-notes .pip-show{margin:26px 0 16px}
.pip-show .pip-fig{transition:transform 2.7s linear}
.pip-show .pw.walking{animation:pipSteps .9s steps(11) 3}
.pip-show .pip-walk.at-l .pip-hint,.pip-show .pip-walk.at-l .pip-bubble{left:86px;right:auto}
.pip-show .pip-walk.walking .pip-hint{display:none}
.j-notes .pip-mood .pm{position:relative}
.j-notes .pip-mood .pm-up{background-image:none}
.pm-l{position:absolute;inset:0;background:center bottom/contain no-repeat}
.pm-up-open{background-image:url(assets/landing/mascot-up.png)}
.pm-up-shut{background-image:url(assets/landing/mascot-up-closed.png?v=3);opacity:0}
.pm.shut .pm-up-shut{opacity:1}.pm.shut .pm-up-open{opacity:0}
.j-notes .pip-mood .pm-hug{background-image:url(assets/landing/mascot-hug-base.png)}
.pm-heart{position:absolute;right:6%;top:0;width:24%;height:26%;background:url(assets/landing/mascot-heart.png) center/contain no-repeat}
.pm,.pm-l{transform-origin:50% 100%}
@keyframes pmRise{from{transform:translateY(22%)}to{transform:none}}
@keyframes pmBreathe{0%,100%{transform:none}50%{transform:scale(1.04,1.07)}}
@keyframes pmHeart{0%{transform:none}50%{transform:translateY(-70%) scale(1.3)}100%{transform:translateY(-10%)}}
.pm-up.act{animation:pmRise .4s cubic-bezier(.2,.8,.2,1) both}
.pm-calm.act{animation:pmBreathe 1.3s ease-in-out 3}
.pm-hug.act .pm-heart{animation:pmHeart 1.1s ease-out both}
.pm-mug.act,.pm-sleep.act{animation:pmPop .3s ease-out}
@media (prefers-reduced-motion:reduce){.pip-show .pip-fig{transition:none}.pm,.pm *{animation:none!important}}
/* Trial: journal cover, hands on a notepad with photos (Unsplash 2Jv5KvC45uc, free license) */
.j-notes .jn-photo.jp-writing{background-image:url(assets/landing/journal-notepad.jpg?v=4);background-size:cover;background-position:40% 45%}
/* Trial: personality type picture, two front doors behind a garden gate (Unsplash kjTgMxn-88U, free license) */
.j-notes .jy-p-16-personalities{background-image:url(assets/landing/type-house.jpg?v=4);background-position:58% 40%}

/* Trial: a mood swaps in for the walking Pip */
.pip-show .pip-pose{position:absolute;left:0;bottom:8px;width:92px;height:130px;display:none;pointer-events:none}
.pip-show .pip-walk.posing .pip-pose{display:block}
.pip-show .pip-walk.posing .pip-fig{visibility:hidden}
.pip-show .pip-walk.posing .pip-hint,.pip-show .pip-walk.posing .pip-bubble{display:none}
.pip-show .pip-pose .pm{position:relative;display:block;width:100%;height:100%;background-position:center bottom;background-size:contain;background-repeat:no-repeat}
.pip-show .pip-pose .pm-calm{background-image:url(assets/landing/mascot-calm.png)}
.pip-show .pip-pose .pm-hug{background-image:url(assets/landing/mascot-hug-base.png)}
.pip-show .pip-pose .pm-mug{background-image:url(assets/landing/mascot-mug.png)}
.pip-show .pip-pose .pm-sleep{background-image:url(assets/landing/mascot-sleep.png)}
.pip-show .pip-pose .pm-sleep{width:140%}
.j-notes .pip-moods{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.j-notes .pip-mood.on{box-shadow:inset 0 0 0 2px #eec46a}
.pm-walk1{inset:auto!important;left:50%!important;bottom:0!important;height:100%;aspect-ratio:210/350;transform:translateX(-50%);background:url(assets/landing/pip-walk.png?v=3) 0 0/auto 100% no-repeat!important}
/* Trial: even padding in Your stamps: the row fills the card edge to edge, less air above it */
.j-notes .jn-home-stamps{padding:14px 16px 16px;row-gap:0}
.j-notes .jn-home-stamps .jn-st-top{margin-bottom:14px}
.j-notes .jn-home-stamps .jn-row{width:100%;margin:0!important;justify-content:space-between;gap:0}
/* Trial: Perception chapter photo, the Eiffel Tower over the rooftops (Unsplash wAScP0OY-yM, free license), Sacha's pick */
.jp-c9{background-image:url(assets/landing/ch-paris2.jpg?v=4)!important;background-position:50% 45%!important}

/* Trial: Pip on a lesson screen */
main.calm-lesson .cl-screen{position:relative}
.pip-case{position:relative;display:flex;justify-content:flex-end;margin-top:auto;padding:0 6px 0 0}
.pip-case+.cl-actions{margin-top:6px!important}
.pip-case .pip-fig{position:relative;width:70px;height:120px;padding:0;border:0;background:none;cursor:pointer;overflow:hidden}
.pip-case .pip-fig span{position:absolute;inset:0;background:url(assets/landing/mascot-up.png) center bottom/contain no-repeat}
.pip-case .pip-fig .jb-shut{background-image:url(assets/landing/mascot-up-closed.png?v=3);opacity:0}
.pip-case .pip-fig.shut .jb-shut{opacity:1}.pip-case .pip-fig.shut .jb-open{opacity:0}
.pip-case .pip-fig.rise span{animation:pipRise .5s cubic-bezier(.2,.8,.2,1) both}
.pip-case .pip-bubble{right:80px;top:14px;max-width:210px}
/* Trial: the answer box after a question is light honey, no pink and no lamp (Sacha chose option A) */
main.calm-lesson .cl-fb{background:#fdf1d8;border:0;padding-right:20px}
main.calm-lesson .cl-fb::after{display:none}

/* Trial: after you answer, a small label says which one was yours, and which was right */
main.calm-lesson .cl-opt .cl-otx{display:block}
main.calm-lesson .cl-opt .cl-yours{display:block;margin-top:3px;font-size:.6875rem;font-weight:700;letter-spacing:.02em;color:#93641f}
main.calm-lesson .cl-opt.no{border-color:#27201c;color:#27201c}
main.calm-lesson .cl-opts .cl-opt.no{color:#27201c!important;border-color:#27201c!important}
main.calm-lesson .cl-opts .cl-opt.no::before{color:#27201c!important;border-color:#27201c!important}

/* Trial: the B or 13 mark, the same drawing in a row of letters and a column of numbers */
main.calm-lesson .jg-words.bmark{gap:26px;margin:34px 0 10px;align-items:center}
main.calm-lesson .jg-words.bmark span{padding:0;border-radius:0;background:none;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:3.25rem;font-weight:500;line-height:1;color:#27201c}
main.calm-lesson .jg-words.bmark span:nth-child(2){letter-spacing:-.11em;padding-right:.11em;font-weight:600}
main.calm-lesson .jg-words.bmark span{font-weight:600}
main.calm-lesson .jg-words.bmark.col{flex-direction:column;gap:10px}
/* Trial: Memory and spaced practice chapter photo, a woman reading by the window (Unsplash, free license), instead of the flash cards */
.jp-c10{background-image:url(assets/landing/ch-memory.jpg?v=4)!important;background-position:50% 40%!important}

/* Trial: the Help icon in lessons only shows in the topics about feelings, Know yourself (3) and Emotions and stress (4) */
body:has(main.calm-lesson:not(.jl-s3):not(.jl-s4)) .help-entry{display:none}

/* Trial: a photo above a short story question, matching the person in it (free Unsplash photos) */
main.calm-lesson .jg-qpic{height:150px;margin:6px 0 12px;border-radius:20px;background-size:cover;background-position:center}
.qp-leo{background-image:url(assets/q/leo.jpg?v=4);background-position:50% 40%}
.qp-mia{background-image:url(assets/q/mia.jpg?v=4)}
.qp-tom{background-image:url(assets/q/tom.jpg?v=4);background-position:50% 55%}
.qp-ana{background-image:url(assets/q/ana.jpg?v=4);background-position:50% 45%}
main.calm-lesson .cl-card.with-pic::before,main.calm-lesson .cl-card.with-pic::after{display:none}
/* Trial: photos for story questions, batch 1 */
.qp-jonah1{background-image:url(assets/q/jonah1.jpg?v=4)}
.qp-jonah2{background-image:url(assets/q/jonah2.jpg?v=4)}
.qp-alex{background-image:url(assets/q/alex.jpg?v=4)}
.qp-mia{background-image:url(assets/q/mia.jpg?v=4)}
.qp-sam1{background-image:url(assets/q/sam1.jpg?v=4)}
.qp-lena{background-image:url(assets/q/lena.jpg?v=4)}
.qp-noor1{background-image:url(assets/q/noor1.jpg?v=4)}
.qp-noor2{background-image:url(assets/q/noor2.jpg?v=4)}
.qp-noor3{background-image:url(assets/q/noor3.jpg?v=4)}
.qp-sam2{background-image:url(assets/q/sam2.jpg?v=4)}
main.calm-lesson .jg-qpic+.jg-case .jg-stk{display:none}
main.calm-lesson .jg-qpic{height:118px;margin:4px 0 10px}
/* Trial: photos for story questions, batch 2 */
.qp-leo_gym{background-image:url(assets/q/leo_gym.jpg?v=4)}
.qp-maya_pkg{background-image:url(assets/q/maya_pkg.jpg?v=4)}
.qp-mara_event{background-image:url(assets/q/mara_event.jpg?v=4)}
.qp-mia_kettle{background-image:url(assets/q/mia_kettle.jpg?v=4)}
.qp-sam_budget{background-image:url(assets/q/sam_budget.jpg?v=4)}
.qp-ana_cut{background-image:url(assets/q/ana_cut.jpg?v=4)}
.qp-sam_train{background-image:url(assets/q/sam_train.jpg?v=4)}
.qp-leo_laugh{background-image:url(assets/q/leo_laugh.jpg?v=4)}
.qp-ana_guess{background-image:url(assets/q/ana_guess.jpg?v=4)}
.qp-tom_shoes{background-image:url(assets/q/tom_shoes.jpg?v=4)}
.qp-mia_review{background-image:url(assets/q/mia_review.jpg?v=4)}
.qp-maya_door{background-image:url(assets/q/maya_door.jpg?v=4)}
.qp-sam_report{background-image:url(assets/q/sam_report.jpg?v=4)}
.qp-ben_pill{background-image:url(assets/q/ben_pill.jpg?v=4)}
.qp-omar_belt{background-image:url(assets/q/omar_belt.jpg?v=4)}
.qp-priya_phone{background-image:url(assets/q/priya_phone.jpg?v=4)}
.qp-dan_boss{background-image:url(assets/q/dan_boss.jpg?v=4)}
.qp-leo_phone{background-image:url(assets/q/leo_phone.jpg?v=4)}
.qp-ana_smoke{background-image:url(assets/q/ana_smoke.jpg?v=4)}
.qp-tom_gym{background-image:url(assets/q/tom_gym.jpg?v=4)}
.qp-mia_lie{background-image:url(assets/q/mia_lie.jpg?v=4)}
.qp-eva_song{background-image:url(assets/q/eva_song.jpg?v=4)}
.qp-ben_blender{background-image:url(assets/q/ben_blender.jpg?v=4)}
.qp-tom_cafe{background-image:url(assets/q/tom_cafe.jpg?v=4)}
/* Trial: Discover topic tiles, bigger icon in the middle of the plain tiles, title and line closer */
.j-lib .jl-topics .jh-card:not(.jh-photo) .jl-draw{top:30%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}
.j-lib .jl-topics .jh-card:not(.jh-photo) .jl-draw svg{width:54px;height:54px}
.j-lib .jl-topics .jh-card .jh-ttl,.j-lib .jl-topics .jh-cap b{margin-bottom:1px}
.j-lib .jl-topics .jh-card .jh-mut,.j-lib .jl-topics .jh-card small{margin-top:1px}

/* Trial: Pip with today's thought at the top of Home */
.j-home .jh-pipth{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:#fdf1d8;text-align:left}
.j-home .jh-pipth .pip-fig{position:relative;flex:none;width:58px;height:96px;overflow:hidden}
.j-home .jh-pipth .pip-fig span{position:absolute;inset:0;background:url(assets/landing/mascot-up.png) center bottom/contain no-repeat}
.j-home .jh-pipth .pip-fig .jb-shut{background-image:url(assets/landing/mascot-up-closed.png?v=3);opacity:0}
.j-home .jh-pipth .pip-fig.shut .jb-shut{opacity:1}.j-home .jh-pipth .pip-fig.shut .jb-open{opacity:0}
.j-home .jh-pipth .pip-fig.rise span{animation:pipRise .5s cubic-bezier(.2,.8,.2,1) both}
.j-home .jh-pipth small{display:block;font-size:.75rem;font-weight:700;color:#93641f}
.j-home .jh-pipth p{margin:3px 0 0;font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-size:1.0625rem;font-weight:600;line-height:1.25;color:#27201c}
.j-home .jh-pipsrc{display:block;margin-top:5px;font-size:.6875rem;color:#6f675d}
.j-home .jh-card.jh-pipth{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;min-height:0!important;padding:12px 16px!important;gap:14px}
.j-home .jh-pipth .pip-fig{padding:0;border:0;background:none;cursor:pointer}

/* Trial: topics and courses as side scrolling rows of tall cards, like reels */
.j-lib .jl-rail{display:flex!important;flex-wrap:nowrap;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 10px;scrollbar-width:none;grid-template-columns:none}
.j-lib .jl-rail::-webkit-scrollbar{display:none}
.j-lib .jl-rail>*{flex:0 0 152px;width:152px;scroll-snap-align:start}
.j-lib .jl-topics.jl-rail .jh-card{min-height:0!important;height:270px;aspect-ratio:auto}
.j-lib .jl-course-row.jl-rail .jl-ct{flex-basis:152px}
.j-lib .jl-course-row.jl-rail .jl-ct-img{height:230px;aspect-ratio:auto}
.j-lib .jl-topics.jl-rail .jh-card:not(.jh-photo) .jl-draw{top:34%}
/* the course page */
.jl-coursepage .jl-cp-hero{display:block;height:180px;margin:6px 0 14px;border-radius:22px;background-size:cover;background-position:center}
.jl-coursepage .jl-cp-hero i{display:none}
.jl-coursepage .jl-cp-k{display:block;font-size:.75rem;font-weight:700;color:#93641f}
.jl-coursepage .jl-cp-pip{display:flex;align-items:center;gap:12px;margin:14px 0 16px;padding:12px 14px;border-radius:20px;background:#fdf1d8}
.jl-coursepage .jl-cp-pip .pip-fig{position:relative;flex:none;width:48px;height:80px}
.jl-coursepage .jl-cp-pip .pip-fig span{position:absolute;inset:0;background:url(assets/landing/mascot-up.png) center bottom/contain no-repeat}
.jl-coursepage .jl-cp-pip p{margin:0;font-size:.9375rem;line-height:1.35;color:#27201c}
.jl-coursepage .jl-cp-list .jl-lesson{opacity:.75}
.jl-coursepage .jl-cp-list small{display:block;font-size:.8125rem;color:#5a5044}
.j-lib .jl-rail{scroll-padding-inline:16px}

/* Trial: Pip reading on the course page, Sacha's 10 drawings played once, ending on the inspired one */
.jl-coursepage .pip-read{flex:none;width:72px;height:101px;padding:0;border:0;cursor:pointer;background:transparent url(assets/landing/pip-read.png?v=3) -648px 0/720px 101px no-repeat}
@keyframes pipRead{from{background-position:0 0}to{background-position:-720px 0}}
.jl-coursepage .pip-read.go{animation:pipRead 3s steps(10) 1}
@media (prefers-reduced-motion:reduce){.jl-coursepage .pip-read.go{animation:none;background-position:100% 0}}

.j-lib .jl-cs-sub{margin:-4px 0 10px;font-size:.8125rem;font-weight:700;color:#93641f}
.j-lib .jl-course-row.jl-rail .jl-ct-img{background-size:cover;background-position:center}
.j-lib .jl-course-row.jl-rail .jl-ct small{line-height:1.3}
.jl-coursepage .jl-cp-hero{background-size:cover;background-position:center}

/* Trial: course cards all the same size, with a watch and a play icon; the course page in two parts */
.j-lib .jl-course-row.jl-rail{align-items:flex-start}
.j-lib .jl-course-row.jl-rail .jl-ct{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.j-lib .jl-course-row.jl-rail .jl-ct-img{position:relative;display:block;width:100%;height:230px;flex:none}
.j-lib .jl-course-row.jl-rail .jl-ct b{margin-top:8px;min-height:2.5em;line-height:1.25}
.j-lib .jl-ct-ics{position:absolute;left:8px;bottom:8px;display:flex;gap:6px}
.j-lib .jl-ct-ics i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#eec46a}
.jl-coursepage .jl-cp-h{display:flex;align-items:center;gap:8px;margin:20px 0 2px;font-size:1.125rem}
.jl-coursepage .jl-cp-h i{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#eec46a}
.jl-coursepage .jl-cp-hs{margin:0 0 10px;font-size:.875rem;color:#5a5044}
.j-lib .jl-ct-ics i{position:static!important;transform:none!important;margin:0!important;inset:auto!important}
.j-lib .jl-course-row.jl-rail .jl-ct small{margin-top:2px}
.j-lib .jl-course-row.jl-rail .jl-ct b{min-height:0}
.jl-coursepage .jl-cp-h{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:700;color:#27201c}
.jl-coursepage .pip-read.done{animation:none;background-position:-648px 0}
.qp-mia{background-image:url(assets/q/mia.jpg?v=4)}
.qp-mia_cat{background-image:url(assets/q/mia_cat.jpg?v=4)}
/* Trial: Habits chapter photo, a woman running in warm evening light (Unsplash, free license), instead of the branded shoe */
.jp-c23{background-image:url(assets/landing/ch-habits.jpg?v=4)!important;background-position:50% 50%!important}
/* Trial: photos for story questions, batch 3 */
.qp-theo{background-image:url(assets/q/theo.jpg?v=4)}
.qp-maya_how{background-image:url(assets/q/maya_how.jpg?v=4)}
.qp-tom_sheet{background-image:url(assets/q/tom_sheet.jpg?v=4)}
.qp-omar_meet{background-image:url(assets/q/omar_meet.jpg?v=4)}
.qp-ana_ask{background-image:url(assets/q/ana_ask.jpg?v=4)}
.qp-ben_funny{background-image:url(assets/q/ben_funny.jpg?v=4)}
.qp-tom_report{background-image:url(assets/q/tom_report.jpg?v=4)}
.qp-mia_shoes{background-image:url(assets/q/mia_shoes.jpg?v=4)}
.qp-tom_snack{background-image:url(assets/q/tom_snack.jpg?v=4)}
.qp-ana_cookies{background-image:url(assets/q/ana_cookies.jpg?v=4)}
.qp-leo_resolve{background-image:url(assets/q/leo_resolve.jpg?v=4)}
.qp-ana_highlight{background-image:url(assets/q/ana_highlight.jpg?v=4)}
.qp-tom_cover{background-image:url(assets/q/tom_cover.jpg?v=4)}
.qp-mia_notes{background-image:url(assets/q/mia_notes.jpg?v=4)}
.qp-leo_explain{background-image:url(assets/q/leo_explain.jpg?v=4)}
.qp-lena_math{background-image:url(assets/q/lena_math.jpg?v=4)}
.qp-mia_alone{background-image:url(assets/q/mia_alone.jpg?v=4)}
.qp-tom_contacts{background-image:url(assets/q/tom_contacts.jpg?v=4)}
.qp-ana_hike{background-image:url(assets/q/ana_hike.jpg?v=4)}
.qp-leo_city{background-image:url(assets/q/leo_city.jpg?v=4)}
.qp-sam_cafe{background-image:url(assets/q/sam_cafe.jpg?v=4)}
.qp-kai_party{background-image:url(assets/q/kai_party.jpg?v=4)}
.qp-ana_friends{background-image:url(assets/q/ana_friends.jpg?v=4)}
.qp-tom_partner{background-image:url(assets/q/tom_partner.jpg?v=4)}
.qp-mia_breakup{background-image:url(assets/q/mia_breakup.jpg?v=4)}
.qp-tom_home{background-image:url(assets/q/tom_home.jpg?v=4)}
.qp-ana_night{background-image:url(assets/q/ana_night.jpg?v=4)}
.qp-leo_club{background-image:url(assets/q/leo_club.jpg?v=4)}
/* Trial: Remember it for good chapter photo, sharp (Unsplash, free license); the old one was only 500 pixels wide */
.jp-c24{background-image:url(assets/landing/ch-recall.jpg?v=4)!important;background-position:50% 50%!important}
/* Trial: Discover Pip walks mirrored, then looks up curious at the end */
.j-lib .pip-walk .pw{transform:scaleX(-1)}
.j-lib .pip-walk.done .pw{transform:none;animation:none!important;width:78px;height:130px;background:url(assets/landing/mascot-up.png) center bottom/contain no-repeat}

/* Trial: today's date at the top of the journal, with a calendar button to see notes per day */
.j-notes .jn-today{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 12px}
.j-notes .jn-today small{display:block;font-size:.8125rem;font-weight:700;color:#93641f}
.j-notes .jn-today b{display:block;font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-size:2rem;font-weight:700;line-height:1.05;color:#27201c}
.j-notes .jn-today b em{font-style:normal;color:#93641f}
.j-notes .jn-calbtn{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1.5px solid #ece4d6;background:#fff;cursor:pointer}
/* Trial: stamps to the left with even space between them */
.j-notes .jn-home-stamps .jn-row{justify-content:flex-start!important;gap:9px!important;flex-wrap:nowrap!important}
/* Trial: photos for story questions in Learn and remember, batch 4 */
.qp-lr_mira{background-image:url(assets/q/lr_mira.jpg?v=4)}
.qp-lr_ear{background-image:url(assets/q/lr_ear.jpg?v=4)}
.qp-lr_volunteer{background-image:url(assets/q/lr_volunteer.jpg?v=4)}
.qp-lr_map{background-image:url(assets/q/lr_map.jpg?v=4)}
.qp-lr_distract{background-image:url(assets/q/lr_distract.jpg?v=4)}
.qp-lr_words{background-image:url(assets/q/lr_words.jpg?v=4)}
.qp-lr_broken{background-image:url(assets/q/lr_broken.jpg?v=4)}
.qp-lr_glasses{background-image:url(assets/q/lr_glasses.jpg?v=4)}
.qp-lr_paris{background-image:url(assets/q/lr_paris.jpg?v=4)}
.qp-lr_cat{background-image:url(assets/q/lr_cat.jpg?v=4)}
.qp-lr_song{background-image:url(assets/q/lr_song.jpg?v=4)}
.qp-lr_dana{background-image:url(assets/q/lr_dana.jpg?v=4)}
.qp-lr_routine{background-image:url(assets/q/lr_routine.jpg?v=4)}
.qp-lr_cookie{background-image:url(assets/q/lr_cookie.jpg?v=4)}
.qp-lr_phone_bed{background-image:url(assets/q/lr_phone_bed.jpg?v=4)}
.qp-lr_cue{background-image:url(assets/q/lr_cue.jpg?v=4)}
.qp-lr_answer{background-image:url(assets/q/lr_answer.jpg?v=4)}
.qp-lr_grass{background-image:url(assets/q/lr_grass.jpg?v=4)}
.qp-lr_forgot{background-image:url(assets/q/lr_forgot.jpg?v=4)}
.qp-lr_manual{background-image:url(assets/q/lr_manual.jpg?v=4)}
.qp-lr_division{background-image:url(assets/q/lr_division.jpg?v=4)}
.qp-lr_guitar{background-image:url(assets/q/lr_guitar.jpg?v=4)}
.qp-lr_drive{background-image:url(assets/q/lr_drive.jpg?v=4)}
.qp-lr_slide{background-image:url(assets/q/lr_slide.jpg?v=4)}
.qp-lr_recipe{background-image:url(assets/q/lr_recipe.jpg?v=4)}
.qp-lr_example{background-image:url(assets/q/lr_example.jpg?v=4)}
/* Trial: photos for story questions in Emotions and stress, batch 5 */
.qp-es_honk{background-image:url(assets/q/es_honk.jpg?v=4)}
.qp-es_low{background-image:url(assets/q/es_low.jpg?v=4)}
.qp-es_sam{background-image:url(assets/q/es_sam.jpg?v=4)}
.qp-es_noor{background-image:url(assets/q/es_noor.jpg?v=4)}
.qp-es_name{background-image:url(assets/q/es_name.jpg?v=4)}
.qp-es_sunday{background-image:url(assets/q/es_sunday.jpg?v=4)}
.qp-es_dog{background-image:url(assets/q/es_dog.jpg?v=4)}
.qp-es_week{background-image:url(assets/q/es_week.jpg?v=4)}
.qp-es_pulse{background-image:url(assets/q/es_pulse.jpg?v=4)}
.qp-es_mouth{background-image:url(assets/q/es_mouth.jpg?v=4)}
.qp-es_breath{background-image:url(assets/q/es_breath.jpg?v=4)}
.qp-es_sugar{background-image:url(assets/q/es_sugar.jpg?v=4)}
.qp-es_selye{background-image:url(assets/q/es_selye.jpg?v=4)}
.qp-es_taylor{background-image:url(assets/q/es_taylor.jpg?v=4)}
.qp-es_call{background-image:url(assets/q/es_call.jpg?v=4)}
.qp-es_walk{background-image:url(assets/q/es_walk.jpg?v=4)}
.qp-es_speech{background-image:url(assets/q/es_speech.jpg?v=4)}
.qp-es_money{background-image:url(assets/q/es_money.jpg?v=4)}
.qp-es_drop{background-image:url(assets/q/es_drop.jpg?v=4)}
.qp-es_care{background-image:url(assets/q/es_care.jpg?v=4)}
.qp-es_plane{background-image:url(assets/q/es_plane.jpg?v=4)}
.qp-es_text{background-image:url(assets/q/es_text.jpg?v=4)}
.qp-es_weather{background-image:url(assets/q/es_weather.jpg?v=4)}
.qp-es_hours{background-image:url(assets/q/es_hours.jpg?v=4)}
.qp-es_voucher{background-image:url(assets/q/es_voucher.jpg?v=4)}
.qp-es_desk{background-image:url(assets/q/es_desk.jpg?v=4)}
.qp-es_project{background-image:url(assets/q/es_project.jpg?v=4)}
.qp-es_message{background-image:url(assets/q/es_message.jpg?v=4)}
.qp-es_lottery{background-image:url(assets/q/es_lottery.jpg?v=4)}
.qp-es_studied{background-image:url(assets/q/es_studied.jpg?v=4)}
.qp-es_lucky{background-image:url(assets/q/es_lucky.jpg?v=4)}
.qp-es_practice{background-image:url(assets/q/es_practice.jpg?v=4)}
.qp-es_boss{background-image:url(assets/q/es_boss.jpg?v=4)}
.qp-es_talk{background-image:url(assets/q/es_talk.jpg?v=4)}
.qp-es_smile{background-image:url(assets/q/es_smile.jpg?v=4)}
.qp-es_typo{background-image:url(assets/q/es_typo.jpg?v=4)}
.qp-es_myth1{background-image:url(assets/q/es_myth1.jpg?v=4)}
.qp-es_myth2{background-image:url(assets/q/es_myth2.jpg?v=4)}
.qp-es_quiz{background-image:url(assets/q/es_quiz.jpg?v=4)}
.qp-es_invite{background-image:url(assets/q/es_invite.jpg?v=4)}
.qp-es_critic{background-image:url(assets/q/es_critic.jpg?v=4)}
.qp-es_ok{background-image:url(assets/q/es_ok.jpg?v=4)}
.qp-es_annoyed{background-image:url(assets/q/es_annoyed.jpg?v=4)}
.qp-es_chest{background-image:url(assets/q/es_chest.jpg?v=4)}
.qp-es_lena{background-image:url(assets/q/es_lena.jpg?v=4)}
.qp-sam_train{background-image:url(assets/q/sam_train.jpg?v=4)}
.qp-priya_phone{background-image:url(assets/q/priya_phone.jpg?v=4)}
.qp-maya_how{background-image:url(assets/q/maya_how.jpg?v=4)}
.qp-es_low{background-image:url(assets/q/es_low.jpg?v=4)}
.qp-leo_city{background-image:url(assets/q/leo_city.jpg?v=4)}
.qp-leo_club{background-image:url(assets/q/leo_club.jpg?v=4)}
.qp-leo_laugh{background-image:url(assets/q/leo_laugh.jpg?v=4)}
/* Trial: photos for story questions */
.qp-tc_candidate{background-image:url(assets/q/tc_candidate.jpg?v=4)}
.qp-tc_charity{background-image:url(assets/q/tc_charity.jpg?v=4)}
.qp-tc_coder{background-image:url(assets/q/tc_coder.jpg?v=4)}
.qp-tc_deaths{background-image:url(assets/q/tc_deaths.jpg?v=4)}
.qp-tc_delivery{background-image:url(assets/q/tc_delivery.jpg?v=4)}
.qp-tc_dev{background-image:url(assets/q/tc_dev.jpg?v=4)}
.qp-tc_editor{background-image:url(assets/q/tc_editor.jpg?v=4)}
.qp-tc_essays{background-image:url(assets/q/tc_essays.jpg?v=4)}
.qp-tc_fee{background-image:url(assets/q/tc_fee.jpg?v=4)}
.qp-tc_fire{background-image:url(assets/q/tc_fire.jpg?v=4)}
.qp-tc_forecast{background-image:url(assets/q/tc_forecast.jpg?v=4)}
.qp-tc_hiring{background-image:url(assets/q/tc_hiring.jpg?v=4)}
.qp-tc_interview{background-image:url(assets/q/tc_interview.jpg?v=4)}
.qp-tc_library{background-image:url(assets/q/tc_library.jpg?v=4)}
.qp-tc_meeting{background-image:url(assets/q/tc_meeting.jpg?v=4)}
.qp-tc_myth_dk{background-image:url(assets/q/tc_myth_dk.jpg?v=4)}
.qp-tc_nadia{background-image:url(assets/q/tc_nadia.jpg?v=4)}
.qp-tc_notes{background-image:url(assets/q/tc_notes.jpg?v=4)}
.qp-tc_oven{background-image:url(assets/q/tc_oven.jpg?v=4)}
.qp-tc_photos{background-image:url(assets/q/tc_photos.jpg?v=4)}
.qp-tc_pump{background-image:url(assets/q/tc_pump.jpg?v=4)}
.qp-tc_scores{background-image:url(assets/q/tc_scores.jpg?v=4)}
.qp-tc_surgery{background-image:url(assets/q/tc_surgery.jpg?v=4)}
.qp-tc_teacher{background-image:url(assets/q/tc_teacher.jpg?v=4)}
.qp-tc_team{background-image:url(assets/q/tc_team.jpg?v=4)}
.qp-tc_tessa{background-image:url(assets/q/tc_tessa.jpg?v=4)}
.qp-tc_tip{background-image:url(assets/q/tc_tip.jpg?v=4)}
.qp-tc_tomato{background-image:url(assets/q/tc_tomato.jpg?v=4)}
.qp-tc_train{background-image:url(assets/q/tc_train.jpg?v=4)}
.qp-tc_window{background-image:url(assets/q/tc_window.jpg?v=4)}
.qp-tc_workshop{background-image:url(assets/q/tc_workshop.jpg?v=4)}
.qp-up_alarm{background-image:url(assets/q/up_alarm.jpg?v=4)}
.qp-up_app{background-image:url(assets/q/up_app.jpg?v=4)}
.qp-up_book{background-image:url(assets/q/up_book.jpg?v=4)}
.qp-up_card{background-image:url(assets/q/up_card.jpg?v=4)}
.qp-up_chairs{background-image:url(assets/q/up_chairs.jpg?v=4)}
.qp-up_chat{background-image:url(assets/q/up_chat.jpg?v=4)}
.qp-up_curb{background-image:url(assets/q/up_curb.jpg?v=4)}
.qp-up_faint{background-image:url(assets/q/up_faint.jpg?v=4)}
.qp-up_fall{background-image:url(assets/q/up_fall.jpg?v=4)}
.qp-up_game{background-image:url(assets/q/up_game.jpg?v=4)}
.qp-up_late{background-image:url(assets/q/up_late.jpg?v=4)}
.qp-up_lead{background-image:url(assets/q/up_lead.jpg?v=4)}
.qp-up_light{background-image:url(assets/q/up_light.jpg?v=4)}
.qp-up_plan{background-image:url(assets/q/up_plan.jpg?v=4)}
.qp-up_poster{background-image:url(assets/q/up_poster.jpg?v=4)}
.qp-up_shout{background-image:url(assets/q/up_shout.jpg?v=4)}
.qp-up_smoke{background-image:url(assets/q/up_smoke.jpg?v=4)}
.qp-up_spill{background-image:url(assets/q/up_spill.jpg?v=4)}
.qp-up_teen{background-image:url(assets/q/up_teen.jpg?v=4)}
.qp-up_tidy{background-image:url(assets/q/up_tidy.jpg?v=4)}
/* Trial: photos for story questions */
.qp-ky_577{background-image:url(assets/q/ky_577.jpg?v=4)}
.qp-ky_brave{background-image:url(assets/q/ky_brave.jpg?v=4)}
.qp-ky_review{background-image:url(assets/q/ky_review.jpg?v=4)}
.qp-ky_welcome{background-image:url(assets/q/ky_welcome.jpg?v=4)}
.qp-re_books{background-image:url(assets/q/re_books.jpg?v=4)}
.qp-re_chat{background-image:url(assets/q/re_chat.jpg?v=4)}
.qp-re_couple{background-image:url(assets/q/re_couple.jpg?v=4)}
.qp-re_dishes{background-image:url(assets/q/re_dishes.jpg?v=4)}
.qp-re_fault{background-image:url(assets/q/re_fault.jpg?v=4)}
.qp-re_forget{background-image:url(assets/q/re_forget.jpg?v=4)}
.qp-re_hobby{background-image:url(assets/q/re_hobby.jpg?v=4)}
.qp-re_lazy{background-image:url(assets/q/re_lazy.jpg?v=4)}
.qp-re_left{background-image:url(assets/q/re_left.jpg?v=4)}
.qp-re_magazine{background-image:url(assets/q/re_magazine.jpg?v=4)}
.qp-re_met{background-image:url(assets/q/re_met.jpg?v=4)}
.qp-re_older{background-image:url(assets/q/re_older.jpg?v=4)}
.qp-re_regret{background-image:url(assets/q/re_regret.jpg?v=4)}
.qp-re_review{background-image:url(assets/q/re_review.jpg?v=4)}
.qp-re_secret{background-image:url(assets/q/re_secret.jpg?v=4)}
.qp-re_self{background-image:url(assets/q/re_self.jpg?v=4)}
.qp-re_well{background-image:url(assets/q/re_well.jpg?v=4)}
.qp-re_while{background-image:url(assets/q/re_while.jpg?v=4)}
.qp-up_bag{background-image:url(assets/q/up_bag.jpg?v=4)}
.qp-up_bike1{background-image:url(assets/q/up_bike1.jpg?v=4)}
.qp-up_bike2{background-image:url(assets/q/up_bike2.jpg?v=4)}
.qp-up_bike3{background-image:url(assets/q/up_bike3.jpg?v=4)}
.qp-up_bike4{background-image:url(assets/q/up_bike4.jpg?v=4)}
.qp-up_brand{background-image:url(assets/q/up_brand.jpg?v=4)}
.qp-up_cancel{background-image:url(assets/q/up_cancel.jpg?v=4)}
.qp-up_cashier{background-image:url(assets/q/up_cashier.jpg?v=4)}
.qp-up_castro{background-image:url(assets/q/up_castro.jpg?v=4)}
.qp-up_cheese{background-image:url(assets/q/up_cheese.jpg?v=4)}
.qp-up_coffee{background-image:url(assets/q/up_coffee.jpg?v=4)}
.qp-up_deadline{background-image:url(assets/q/up_deadline.jpg?v=4)}
.qp-up_defend{background-image:url(assets/q/up_defend.jpg?v=4)}
.qp-up_fast{background-image:url(assets/q/up_fast.jpg?v=4)}
.qp-up_gift{background-image:url(assets/q/up_gift.jpg?v=4)}
.qp-up_goodbye{background-image:url(assets/q/up_goodbye.jpg?v=4)}
.qp-up_guide{background-image:url(assets/q/up_guide.jpg?v=4)}
.qp-up_idea{background-image:url(assets/q/up_idea.jpg?v=4)}
.qp-up_logo{background-image:url(assets/q/up_logo.jpg?v=4)}
.qp-up_mirror{background-image:url(assets/q/up_mirror.jpg?v=4)}
.qp-up_move{background-image:url(assets/q/up_move.jpg?v=4)}
.qp-up_neighbors{background-image:url(assets/q/up_neighbors.jpg?v=4)}
.qp-up_poli{background-image:url(assets/q/up_poli.jpg?v=4)}
.qp-up_reply{background-image:url(assets/q/up_reply.jpg?v=4)}
.qp-up_soup{background-image:url(assets/q/up_soup.jpg?v=4)}
.qp-up_stickers{background-image:url(assets/q/up_stickers.jpg?v=4)}
.qp-up_training{background-image:url(assets/q/up_training.jpg?v=4)}
.qp-up_trainlate{background-image:url(assets/q/up_trainlate.jpg?v=4)}
.qp-up_waiter1{background-image:url(assets/q/up_waiter1.jpg?v=4)}
.qp-up_waiter2{background-image:url(assets/q/up_waiter2.jpg?v=4)}
/* Trial: Discover Pip faces where he goes: mirrored, so he walks from right to left, then looks up */
@keyframes pipXrl{from{transform:translateX(var(--to))}to{transform:translateX(0)}}
.j-lib .pip-walk.go .pip-fig{animation:pipXrl 2.7s linear both}
.j-lib .pip-walk.done .pip-fig{animation:none;transform:translateX(0)}
.j-lib .pip-walk .pip-bubble{left:86px;right:auto}
/* Trial: The four horsemen chapter photo, sharp and warm (Unsplash 2a9680d5e323, free license), instead of the low-res sofa couple */
.jp-c31{background-image:url(assets/landing/ch-conflict.jpg)!important;background-position:50% 45%!important}
.qp-re_fault{background-image:url(assets/q/re_fault.jpg?v=5)}

/* Trial: Courses as two rows, Games then Videos; the title sits on the photo over a soft shade */
.j-lib .jl-cs-h{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font-size:1rem;font-weight:700;color:#27201c}
.j-lib .jl-cs-h i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#eec46a}
.j-lib .jl-cs2 .jl-ct2{position:relative;flex:0 0 152px;height:230px;border:0;border-radius:20px;padding:0;overflow:hidden;background-size:cover;background-position:center;text-align:left;cursor:pointer;scroll-snap-align:start}
.j-lib .jl-ct2::after{content:"";position:absolute;inset:40% 0 0 0;background:linear-gradient(to bottom,rgba(39,32,28,0),rgba(39,32,28,.72))}
.j-lib .jl-ct2-ic{position:absolute;left:10px;top:10px;z-index:1}
.j-lib .jl-ct2-ic i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#eec46a}
.j-lib .jl-ct2-tx{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;color:#fefcf8}
.j-lib .jl-ct2-tx b{display:block;font-size:1rem;line-height:1.2}
.j-lib .jl-ct2-tx small{display:block;margin-top:2px;font-size:.75rem;opacity:.9}
.j-lib .jl-cs-h{font-family:"Hanken Grotesk",system-ui,sans-serif}
.j-home .jh-pipth p.jh-piphand{font-family:var(--jn-hand);font-size:1.5rem;font-weight:500;line-height:1.15;color:#27201c}
.j-lib .jl-ct2-tx small{opacity:1;color:#fefcf8;font-weight:600}
.j-lib .jl-cs-h{margin-top:16px}
.jl-coursepage .jl-cp-more{margin:-2px 0 8px;font-size:.875rem;font-weight:600;color:#93641f}
/* Trial: the .com in the logo uses the exact colour of psychology.com (rgb 229 182 79) */
.brand-com,.j-auth-brand .brand-com,.jl-brand i,main.splash.calm-door>.brand .brand-com,.brand i,.j-brand i,.nx-brand i{color:#e5b64f!important}

/* Trial: course cards carry a short line and time; rows run to the screen edge */
.j-lib .jl-cs2 .jl-ct2{flex-basis:168px;height:250px}
.j-lib .jl-ct2::after{inset:35% 0 0 0}
.j-lib .jl-ct2-d{display:block;margin-top:4px;font-size:.8125rem;line-height:1.3;color:#fefcf8}
.j-lib .jl-ct2-tx small{margin-top:8px;padding-top:6px;border-top:1px solid rgba(254,252,248,.35)}
.j-lib .jl-cs2.jl-rail{margin-right:calc(-1 * max(16px,(100vw - 100%) / 2));padding-right:16px}

.j-lib .jl-cs-h{margin:18px 0 2px;font-size:1.0625rem}
.j-lib .jl-cs-p{margin:0 0 10px;font-size:.8125rem;color:#5a5044}
.j-lib .jl-ct2-play{position:absolute;left:50%;top:38%;z-index:1;display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(254,252,248,.28);border:1.5px solid rgba(254,252,248,.7);backdrop-filter:blur(2px)}
.j-lib .jl-ct2-play svg{margin-left:3px}
/* Trial: a quieter play button, small and soft, no ring */
.j-lib .jl-ct2-play{width:34px;height:34px;margin:-17px 0 0 -17px;border:0;background:rgba(254,252,248,.18);backdrop-filter:none}
.j-lib .jl-ct2-play svg{width:14px;height:14px;margin-left:2px;opacity:.85}
/* Trial: play button in the app's honey yellow, small */
.j-lib .jl-ct2-play{width:34px!important;height:34px!important;margin:-17px 0 0 -17px!important;border:0!important;background:#eec46a!important;backdrop-filter:none!important}
.j-lib .jl-ct2-play svg{width:13px;height:13px;margin-left:2px;opacity:1}
.j-lib .jl-ct2-play svg path{fill:#27201c}
.j-lib .jl-cs-h em{font-style:normal;box-shadow:inset 0 -0.34em 0 rgba(238,196,106,.75)}
.pm-l,.pm-up-open,.pm-up-shut{transition:none!important}
.pip-pose .pm.shut .pm-up-open{visibility:hidden}
.pip-pose .pm:not(.shut) .pm-up-shut{visibility:hidden}
.pip-pose .pm-up{background-image:none!important}
.j-lib .jl-cs-h{display:block}
.j-lib .jl-cs-h em{padding:0!important;margin:0!important}
/* Trial: plain topic tiles on Discover, title at the top and the icon at the bottom */
.j-lib .jl-topics .jh-card:not(.jh-photo){justify-content:flex-start!important}
.j-lib .jl-topics .jh-card:not(.jh-photo) .jl-draw{top:auto!important;bottom:16px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important}
.j-lib .jl-cs-h{font-family:var(--calm-serif);font-size:1.375rem;margin-top:26px}
/* Trial: a warm, sharp lamp photo (Unsplash, free license) */
.jq-lamp{background-image:url(assets/landing/q-lamp2.jpg)!important;background-position:50% 50%!important}

/* Trial (4 Nov): every hand drawing in Pip's ink, one warm brown and one line weight, so the snail, the bolt and the topic drawings sit with Pip. Stamps keep their own look */
:is(svg[stroke="#27201c"],svg[stroke="#93641f"],svg[stroke="#934f00" i],svg[stroke="#c99a3b"]):not(.jn-seal,.jn-st svg) :is(path,circle,ellipse,line,polyline,polygon,rect):not([stroke="none"]),
svg:not(.jn-seal,.jn-st svg) :is(path,circle,ellipse,line,polyline,polygon,rect):is([stroke="#27201c"],[stroke="#93641f"],[stroke="#934f00" i],[stroke="#c99a3b"]){stroke:#3d3123!important;stroke-width:1.8px!important;vector-effect:non-scaling-stroke}
svg:not(.jn-seal,.jn-st svg) :is(path,circle,ellipse,rect,polygon):is([fill="#27201c"],[fill="#93641f"],[fill="#934f00" i],[fill="#c99a3b"]){fill:#3d3123!important}

/* Trial (4 Nov): Home on a computer in two blocks. Left, your day: Pip's note, the latest note, up next and the topic. Right, play and explore: This or that, Fast or slow and the Did you know cards. A phone keeps one column */
.j-home .jh-col{display:contents}
@media(min-width:1024px){
html body main.calm-home.j-home:not(.topic-page){max-width:1040px!important;width:calc(100% - 48px)!important;margin-left:auto!important;margin-right:auto!important}
.j-home .jh-grid{grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.j-home .jh-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.j-home .jh-col-l{position:sticky;top:18px}
}
/* With the side menu (1180px and up) the two blocks start well clear of it */
@media(min-width:1180px){html body main.calm-home.j-home:not(.topic-page){max-width:1000px!important;width:calc(100% - 260px)!important;margin-left:max(180px,calc((100% - 1000px)/2 + 60px))!important;margin-right:auto!important}}

/* Trial (4 Nov): Pip reading on Discover, the same drawings as the course page a little larger, without a ground line */
.j-lib .pip-disc{display:flex;justify-content:flex-start;margin:22px 0 6px;padding:0 4px}
.j-lib .pip-disc .pip-read{flex:none;width:96px;height:135px;padding:0;border:0;cursor:pointer;background:transparent url(assets/landing/pip-read.png?v=3) 0 0/960px 135px no-repeat}
@keyframes pipReadD{from{background-position:0 0}to{background-position:-768px 0}}
.j-lib .pip-disc .pip-read.go{animation:pipReadD 2.4s steps(8) 1}
.j-lib .pip-disc .pip-read.done{animation:none;background-position:-672px 0}
@media (prefers-reduced-motion:reduce){.j-lib .pip-disc .pip-read.go{animation:none;background-position:-672px 0}}

/* Trial (4 Nov): no Help line under the main pages (it moves to Profile), less empty space at the bottom, Pip closer to the games */
.j-help-line{display:none!important}
main.calm-home.j-home{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}
.j-lib .pip-disc{margin:4px 0 0}

/* Trial (4 Nov): honey underline on one word in the journal headings, All topics beside the back arrow with Psychology.com at the foot of Discover, Calm Pip alone in the journal */
.j-notes .jn-today b em,.j-notes .jn-h2 em,.jn-st-h b em{font-style:normal;box-shadow:inset 0 -.32em 0 #fce5bb}
.j-lib .jl-top .home-hello{margin:0 auto 0 6px;font-size:1.75rem;line-height:1.1}
.j-lib .jl-top+.jh-sub{margin-top:2px}
.j-lib .jl-foot{margin:18px 0 0;text-align:center;font-size:.875rem;opacity:.75}
.pip-calm-only{margin:30px 0 6px;text-align:center}
.pip-calm-only .jn-h2{margin:0 0 6px}
.pip-calm-fig{position:relative;display:inline-block;width:120px;height:150px;padding:0;border:0;background:none;cursor:pointer}
.pip-calm-fig .pm-calm{position:absolute;inset:0;background:url(assets/landing/mascot-calm.png) center bottom/contain no-repeat;transform-origin:50% 100%}
.pip-calm-only .pip-bubble{position:static;margin:8px auto 0}
.j-home .jh-head+.jh-grid{margin-top:20px}
.j-notes .jn-today b em{color:inherit}
.j-notes .jn-st-h b em,.jn-home-stamps .jn-st-h b em{font-style:normal;box-shadow:inset 0 -.32em 0 #fce5bb!important}
/* Trial (4 Nov): main tabs have no back arrow, the title starts at the left edge */
.j-lib .jl-tab-top .home-hello{margin-left:0}
.jl-tab-top{justify-content:flex-start!important}

/* Trial (4 Nov): the check-in at the top of a new note */
.jn-feel{margin:0 0 14px}
.jn-feel-h{margin:0 0 10px;font-family:var(--calm-serif);font-size:1.25rem;font-weight:700;line-height:1.2;color:#27201c}
.jn-feel-h em{font-style:normal;box-shadow:inset 0 -.32em 0 #fce5bb}
.jn-feel-row{display:flex;align-items:center;gap:10px}
.jn-feel-row small{font-size:.75rem;font-weight:600;color:#6f675d}
.jn-feel-pip{flex:none;width:52px;height:52px;background:center bottom/contain no-repeat}
.jn-feel-pip.jf-low{background-image:url(assets/landing/mascot-sleep.png)}
.jn-feel-pip.jf-good{background-image:url(assets/landing/mascot-hug.png)}
#jn-feel{flex:1;min-width:0;accent-color:#e5b64f;height:28px}
.jn-feel-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.jn-tag{padding:6px 12px;border:1.5px solid #ecdcbc;border-radius:10px;background:#fefcf8;font:inherit;font-size:.8125rem;font-weight:600;color:#5a5044;cursor:pointer}
.jn-tag.on{background:#e5b64f;border-color:#e5b64f;color:#27201c}
.jn-feel-saved{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.jn-feel-saved span{padding:3px 9px;border-radius:8px;background:#fdf1d8;font-size:.75rem;font-weight:700;color:#93641f}
.jn-feel-saved span.t{background:#f6efe2;color:#5a5044;font-weight:600}
#jn-feel{-webkit-appearance:none;appearance:none;background:transparent}
#jn-feel::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:#fefcf8;border:1.5px solid #ecdcbc}
#jn-feel::-moz-range-track{height:8px;border-radius:8px;background:#fefcf8;border:1.5px solid #ecdcbc}
#jn-feel::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9.5px;border-radius:50%;background:#e5b64f;border:3px solid #fefcf8;box-shadow:0 1px 4px rgba(39,32,28,.25)}
#jn-feel::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#e5b64f;border:3px solid #fefcf8}
.jn-feel-pip{width:64px;height:64px}
/* Trial (4 Nov): the journal opens on today's date, no title row above it */
.j-notes>.sr-only+.jn-today,.j-notes .jn-today:first-of-type{margin-top:6px}
/* Trial (4 Nov): Discover opens straight on the topics, no title */
.j-lib>.sr-only:first-child+.jh-grid.jl-topics{margin-top:10px}
.j-lib .jl-disc-h{margin:4px 0 0}
.j-lib .jl-disc-sub{margin:6px 0 16px;max-width:30em}
/* Trial (4 Nov): warmer photos for Self-esteem and Big Five */
.j-notes .jy-p-self-esteem{background-image:url(assets/landing/jy-esteem2.jpg)!important;background-position:50% 40%}
.j-notes .jy-p-big-five{background-image:url(assets/landing/jy-bigfive2.jpg)!important}
/* Trial (4 Nov): the check-in on Home, under Hello */
.j-home .jh-feel{margin:10px 0 0}
.j-home .jh-feel p{margin:0 0 4px;font-size:1rem;font-weight:600;color:#5a5044}
.j-home .jh-feel .jn-feel-pip{padding:0;border:0;background-color:transparent;cursor:pointer;width:56px;height:56px}
#jh-feel{flex:1;min-width:0;-webkit-appearance:none;appearance:none;background:transparent;height:28px}
#jh-feel::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:#fdf1d8;border:1.5px solid #ecdcbc}
#jh-feel::-moz-range-track{height:8px;border-radius:8px;background:#fdf1d8;border:1.5px solid #ecdcbc}
#jh-feel::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9.5px;border-radius:50%;background:#e5b64f;border:3px solid #fefcf8;box-shadow:0 1px 4px rgba(39,32,28,.25)}
#jh-feel::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#e5b64f;border:3px solid #fefcf8}
.j-home .jh-feel input[type=range],.jn-feel input[type=range]{border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;min-height:0!important}
.j-home .jh-feel+.jh-grid{margin-top:14px}
/* Trial (4 Nov): one Pip beside the mood slider, changing with it: sad, quiet, calm, content, happy */
.jn-feel-pip{flex:none;width:64px;height:76px;background:center bottom/contain no-repeat}
.jn-feel-pip.jf-v0{background-image:url(assets/landing/pip-mood0.png)}
.jn-feel-pip.jf-v1{background-image:url(assets/landing/pip-mood1.png)}
.jn-feel-pip.jf-v2{background-image:url(assets/landing/pip-mood2.png)}
.jn-feel-pip.jf-v3{background-image:url(assets/landing/pip-mood3.png)}
.jn-feel-pip.jf-v4{background-image:url(assets/landing/pip-mood4.png)}
.jn-feel-word{flex:none;min-width:70px;text-align:right;font-size:.875rem;color:#93641f}
.j-notes .jn-checkin{margin:14px 0 16px;padding:14px 16px;border-radius:20px;background:#fdf1d8}
.j-notes .jn-checkin .jn-feel-h{font-size:1.125rem;margin-bottom:4px}
#jt-feel{flex:1;min-width:0;-webkit-appearance:none;appearance:none;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;height:28px}
#jt-feel::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:#fefcf8;border:1.5px solid #ecdcbc}
#jt-feel::-moz-range-track{height:8px;border-radius:8px;background:#fefcf8;border:1.5px solid #ecdcbc}
#jt-feel::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9.5px;border-radius:50%;background:#e5b64f;border:3px solid #fefcf8;box-shadow:0 1px 4px rgba(39,32,28,.25)}
#jt-feel::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#e5b64f;border:3px solid #fefcf8}

/* Trial (4 Nov): Home, the next chapter as a big photo across the width; the latest note and the topic as two small cards under it, the topic with small stamps and no chapter rows */
.j-home .jh-col-l>.jh-card.jh-photo,.j-home .jh-col-l>.jh-card.jh-plain{grid-column:1/-1!important;order:-1;height:min(60vh,520px)!important;min-height:340px!important;aspect-ratio:auto!important}
.j-home .jh-col-l>.jh-card.jh-photo .jh-cap b{font-size:1.875rem!important;line-height:1.1}
.j-home .jh-col-l>.jh-note{order:1}
.j-home .jh-col-l>.jh-track{grid-column:auto!important;order:2;padding:14px!important;display:flex;flex-direction:column;gap:8px}
.j-home .jh-col-l>.jh-track .jh-row{display:none!important}
.j-home .jh-col-l>.jh-track .jh-track-head{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.j-home .jh-col-l>.jh-track h2{font-size:1.0625rem!important;line-height:1.2}
.j-home .jh-col-l>.jh-track small{font-size:.75rem}
.j-home .jh-col-l>.jh-track .jh-stampbox{margin:2px 0 0}
.j-home .jh-col-l>.jh-track .jn-row{flex-wrap:wrap!important;gap:5px!important}
.j-home .jh-col-l>.jh-track .jn-row>*{flex:0 0 28px!important;max-width:28px!important}
.j-home .jh-col-l>.jh-track .link-button{order:9;margin-top:auto;font-size:.8125rem}
.j-home .jh-col-r>*{order:3}

/* Trial (4 Nov): the next chapter card on Home, built like the chapter start screen. No colour filter on photos, a lighter shade on Home photos */
.j-home .jh-cover .jc-fade{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.25' stop-color='%23211c15' stop-opacity='0'/%3E%3Cstop offset='0.6' stop-color='%23211c15' stop-opacity='.62'/%3E%3Cstop offset='1' stop-color='%23211c15' stop-opacity='.92'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='10' height='100' fill='url(%23g)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{grid-column:1/-1!important;order:-1;position:relative;display:block;width:100%;height:min(430px,56vh)!important;min-height:340px;padding:0;border:0;border-radius:28px;overflow:hidden;background-color:#3b3229;background-position:center;background-size:cover;background-repeat:no-repeat;text-align:left;cursor:pointer}
.j-home .jh-cover.jh-plain{background-color:#fdf1d8}
.j-home .jh-cover::before{display:none!important}
.j-home .jh-cov-tx{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:6px;color:#fefcf8}
.j-home .jh-cover.jh-plain .jh-cov-tx{color:#27201c}
.j-home .jh-cov-tx small{font-size:.8125rem;font-weight:700;color:#f6dcae}
.j-home .jh-cov-h{font-family:var(--calm-serif);font-weight:700;font-size:2.125rem;line-height:1.04}
.j-home .jh-cov-h em{font-style:normal;box-shadow:inset 0 -.38em 0 rgba(238,196,106,.7)}
.j-home .jh-cov-p{font-size:.9375rem;line-height:1.4}
.j-home .jh-cov-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;font-size:.8125rem;font-weight:700}
.j-home .jh-cov-go{padding:9px 18px;border-radius:999px;background:#e5b64f;color:#27201c;font-size:.875rem}
.j-home .jh-cover.jp-c5,main.calm-lesson .jp-c5,:is(.j-home,.calm-lesson) .jp-c5{background-image:url(assets/landing/ch-bystander.jpg)!important}
main.calm-lesson :is(.jq-ph,.jg-ph){filter:none!important}
.j-home .jh-photo::before,.j-lib .jl-head.jh-photo::before{background-color:rgba(20,14,10,.18)!important}
.j-home .jh-photo .jh-cap,.j-lib .jh-photo .jh-cap{text-shadow:0 1px 8px rgba(20,14,10,.45)}
/* Trial (4 Nov): Stamps tab, every stamp with its chapter name and whether it is stamped */
.j-notes .jn-stamps-list ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 18px;padding:0;list-style:none}
.j-notes .jn-stamps-list li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:#fbf5ea}
.j-notes .jn-stamps-list li.got{background:#fdf1d8}
.j-notes .jn-stamps-list li svg{flex:none;width:44px;height:44px}
.j-notes .jn-stamps-list li span{display:flex;flex-direction:column;gap:2px;min-width:0}
.j-notes .jn-stamps-list li b{font-size:.8125rem;line-height:1.2;color:#27201c}
.j-notes .jn-stamps-list li i{font-style:normal;font-size:.6875rem;font-weight:700;color:#93641f}
.j-notes .jn-stamps-list li:not(.got) i{color:#8a8178}
.j-notes .jn-stamps-list>small{font-size:.8125rem;font-weight:700;color:#5a5044}
.j-notes .jn-checkin{margin:0 0 12px}
.j-notes .jn-stamps-list b .jh-word{display:inline!important;padding:0!important;margin:0!important;border:0!important;background:none!important;font:inherit!important;color:inherit!important;text-decoration:none!important;box-shadow:none!important;pointer-events:none}
.j-notes .jn-stamps-list li b{text-align:left}.j-notes .jn-stamps-list b .jh-word{text-align:left!important}
/* Trial (4 Nov): Stamps tab as one roomy list, the name on the left and the state on the right */
.j-notes .jn-stamps-list ul{grid-template-columns:1fr!important;gap:8px!important}
.j-notes .jn-stamps-list li{padding:10px 14px!important;gap:14px!important}
.j-notes .jn-stamps-list li span{flex:1;flex-direction:row!important;align-items:center;justify-content:space-between;gap:10px!important}
.j-notes .jn-stamps-list li b{font-size:.9375rem!important;text-align:left!important}
.j-notes .jn-stamps-list li b .jh-word{display:inline!important;white-space:normal!important;text-align:left!important;vertical-align:baseline!important;width:auto!important}
.j-notes .jn-stamps-list li i{flex:none;font-size:.75rem!important}
.j-notes .jn-stamps-list li{padding:12px 22px 12px 16px!important}.j-notes .jn-stamps-list li span{gap:16px!important}
.j-notes .jn-stamps-list li b{font-size:.8125rem!important;font-weight:600!important;line-height:1.3!important}
/* Trial (4 Nov): In short, at the top of every chapter page */
.j-lib .jl-what{margin:16px 0 4px;padding:16px 18px;border-radius:20px;background:#fdf1d8}
.j-lib .jl-what small{display:block;margin-bottom:6px;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#93641f}
.j-lib .jl-what p{margin:0;font-family:var(--calm-serif);font-size:1.0625rem;font-weight:600;line-height:1.4;color:#27201c}
.j-lib .jl-what+.jl-blurb{margin-top:12px}
/* Trial (4 Nov): the self-esteem photo she liked replaces the old one everywhere */
.jp-esteem,:is(.j-home,.j-lib,.calm-lesson,.j-notes) .jp-esteem{background-image:url(assets/landing/jy-esteem2.jpg)!important}
/* Trial (4 Nov): the check-in back on Home, under Hello, with one Pip that changes */
.j-home .jh-feel{margin:10px 0 0}
.j-home .jh-feel p{margin:0 0 2px;font-size:1rem;font-weight:600;color:#5a5044}
.j-home .jh-feel .jn-feel-row{display:flex;align-items:center;gap:12px}
.j-home .jh-feel+.jh-grid{margin-top:12px}
/* Trial (4 Nov): the daily check-in on Home and in its sheet */
.j-home .jh-feel .ck-chips,.ck-sheet .ck-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.j-home .jh-feel .jn-tag,.ck-sheet .jn-tag{padding:7px 13px;border:1.5px solid #ecdcbc;border-radius:10px;background:#fefcf8;font:inherit;font-size:.875rem;font-weight:600;color:#5a5044;cursor:pointer}
.ck-sheet .jn-tag.on{background:#e5b64f;border-color:#e5b64f;color:#27201c}
.j-home .ck-done{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:18px;background:#fdf1d8}
.j-home .ck-done p{flex:1;margin:0;font-size:.9375rem;color:#27201c}
.j-home .ck-done .ck-pip{width:44px;height:52px}
.ck-pip{display:block;flex:none;width:96px;height:110px;background:center bottom/contain no-repeat}
.ck-sheet{display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.ck-sheet>.ck-pip{margin:0 auto 2px}
.ck-q{margin:0;font-family:var(--calm-serif);font-size:1.25rem;font-weight:700;color:#27201c}
.ck-note{margin:0;font-size:.9375rem;line-height:1.4;color:#5a5044}
.ck-help{display:flex;flex-direction:column;gap:8px}
.ck-opt{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:1.5px solid #ecdcbc;border-radius:16px;background:#fefcf8;text-align:left;font:inherit;cursor:pointer}
.ck-opt b{font-size:.9375rem;color:#27201c}
.ck-opt span{font-size:.8125rem;line-height:1.35;color:#6f675d}
.ck-acts{display:flex;align-items:center;gap:16px;margin-top:6px}
.ck-acts .btn{background:#e5b64f;color:#27201c;border:0}
.sheet:has(.ck-sheet) .sheet-head h2{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-weight:700!important;font-size:1.375rem!important;color:#27201c}.sheet:has(.ck-sheet){background:#fefcf8}
/* Trial (4 Nov): no pills in the check-in. One slider through eight feelings with Pip changing above it, a plain list for what is behind it, the feeling as a plain line on a note */
.ck-slide{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px}
.ck-face{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:34px}
.ck-face .ck-pip{width:84px;height:96px}
.ck-word{font-family:var(--calm-serif);font-size:1.25rem;font-weight:700;color:#27201c;text-transform:capitalize}
.ck-range{width:100%;-webkit-appearance:none;appearance:none;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;height:30px}
.ck-range::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:#fdf1d8;border:1.5px solid #ecdcbc}
.ck-range::-moz-range-track{height:8px;border-radius:8px;background:#fdf1d8;border:1.5px solid #ecdcbc}
.ck-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10.5px;border-radius:50%;background:#e5b64f;border:3px solid #fefcf8;box-shadow:0 1px 4px rgba(39,32,28,.25)}
.ck-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#e5b64f;border:3px solid #fefcf8}
.j-home .jh-feel{padding:14px 16px 10px;border-radius:20px;background:#fbf5ea}
.j-home .jh-feel>p:first-child{margin:0;font-family:var(--calm-serif);font-size:1.125rem;font-weight:700;color:#27201c}
.ck-hint{margin:0;text-align:center;font-size:.75rem;color:#8a8178}
.jn-feel .ck-range::-webkit-slider-runnable-track{background:#fefcf8}
.ck-list{display:flex;flex-direction:column;border-top:1px solid #efe5d3}
.ck-row{display:flex;align-items:center;justify-content:space-between;padding:13px 4px;border:0;border-bottom:1px solid #efe5d3;background:none;font:inherit;font-size:.9375rem;font-weight:600;color:#27201c;text-align:left;cursor:pointer}
.ck-row i{font-style:normal;width:22px;height:22px;border-radius:50%;border:1.5px solid #ddcfb6;display:flex;align-items:center;justify-content:center;font-size:.8125rem;color:#93641f}
.ck-row[data-action$="something else"] i{border:0}
.ck-row.on i{background:#e5b64f;border-color:#e5b64f}
.ck-row.on i::after{content:"";width:8px;height:5px;border-left:2px solid #27201c;border-bottom:2px solid #27201c;transform:rotate(-45deg) translate(1px,-1px)}
.jn-feel-saved{margin:4px 0 2px;font-size:.8125rem;font-weight:700;color:#93641f;display:block!important}
.ck-date{display:block;font-size:.75rem;font-weight:700;color:#93641f;margin-bottom:1px}
/* Trial (4 Nov): Home check-in as she liked it, sad Pip at the left end, a small happy Pip at the right; the personal note under the mood, two lines at most */
.j-home .ck-ends{display:flex;align-items:center;gap:10px;margin-top:6px}
.j-home .ck-ends .ck-range{flex:1;min-width:0}
.ck-end{flex:none;background:center bottom/contain no-repeat}
.ck-end-l{width:52px;height:60px;background-image:url(assets/landing/pip-mood0.png)}
.ck-end-r{width:36px;height:42px;background-image:url(assets/landing/pip-mood4.png)}
.j-home .ck-now{margin:2px 0 0;text-align:center;font-size:.75rem;color:#8a8178}
.j-home .ck-now .ck-word{font-size:1rem;margin-right:4px}
.j-home .ck-mine{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font-family:"Caveat","Hanken Grotesk",cursive;font-size:1.0625rem;line-height:1.25;color:#5a5044}
/* Trial (4 Nov): Home slider exactly as before: no card behind it, the two Pips at the same size */
.j-home .jh-feel:not(.ck-done){padding:0!important;background:none!important;border-radius:0}
.j-home .jh-feel:not(.ck-done)>p:first-child{font-family:inherit;font-size:1rem;font-weight:600;color:#5a5044}
.ck-end-l,.ck-end-r{width:56px!important;height:56px!important}
.ck-end-l{background-image:url(assets/landing/mascot-sleep.png)!important}
.ck-end-r{background-image:url(assets/landing/mascot-hug.png)!important}
/* Trial (4 Nov): one Pip beside the Home slider, changing with the feeling */
.j-home .ck-ends .ck-live{width:64px;height:76px}
.j-home .ck-ends .ck-word{flex:none;min-width:72px;text-align:right;font-family:inherit;font-size:.9375rem;color:#93641f}
.j-notes .jn-own .jn-feel{margin:6px 0 10px}
/* Trial (4 Nov): the same quiet slider in the journal, one small Pip on the right that changes */
.ck-ends{display:flex;align-items:center;gap:10px;margin-top:6px}
.ck-ends .ck-range{flex:1;min-width:0}
.ck-ends .ck-live{flex:none;width:64px;height:76px;background:center bottom/contain no-repeat}
.ck-ends .ck-word{flex:none;min-width:72px;text-align:right;font-family:inherit;font-size:.9375rem;color:#93641f}
.j-notes .jn-feel-h{font-size:1rem!important;font-weight:600!important;color:#5a5044!important;margin-bottom:0!important}
/* Trial (4 Nov): today's check-in on Home as a sticky note, honey paper with the same thin lines as the journal notes */
.j-home .ck-done{background-color:#fce5bb!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24'%3E%3Crect y='23' width='8' height='1' fill='%23f0d59a'/%3E%3C/svg%3E")!important;background-position:0 6px;border-radius:20px;padding:12px 16px!important;align-items:flex-start!important}
.j-home .ck-done .ck-pip{align-self:center}
.j-home .ck-done p{line-height:24px!important}
.j-home .ck-done .ck-date{line-height:24px}
.j-home .ck-done .ck-mine{line-height:24px!important;font-size:1.125rem!important;color:#27201c!important}
.j-home .ck-done .link-button{align-self:center}
/* Trial (4 Nov): the date on the same line as the mood */
.j-home .ck-done .ck-date{display:inline!important;margin:0 6px 0 0!important;font-size:.8125rem!important}
/* Trial (4 Nov): the check-in sits right under the next chapter card */
.j-home .jh-col-l>.jh-feel{grid-column:1/-1!important;order:0;margin:2px 0 4px!important}
.j-home .jh-col-l>.jh-feel.ck-done{margin:0!important}
/* Trial (4 Nov): journal exercises as round circles in a sideways row */
.j-notes .jx-row{display:flex;gap:14px;overflow-x:auto;margin:14px -16px 6px;padding:2px 16px 6px;scrollbar-width:none;scroll-snap-type:x proximity}
.j-notes .jx-row::-webkit-scrollbar{display:none}
.jx-c{flex:none;width:74px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;cursor:pointer;scroll-snap-align:start}
.jx-dot{width:66px;height:66px;border-radius:50%;background:#fdf1d8;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px #f0dfbd}
.jx-c.done .jx-dot{box-shadow:inset 0 0 0 3px #e5b64f}
.jx-dot i{display:block;width:48px;height:52px;background:center bottom/contain no-repeat}
.jx-c small{font-size:.6875rem;font-weight:600;line-height:1.2;text-align:center;color:#5a5044}
.jx-sheet{display:flex;flex-direction:column;gap:8px;padding-bottom:6px}
.jx-sheet>.ck-pip{margin:0 auto}
.jx-l{font-size:.8125rem;font-weight:700;color:#5a5044;margin-top:4px}
.jx-in{width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid #ecdcbc;border-radius:12px;background:#fefcf8;font:inherit;font-size:.9375rem;color:#27201c;resize:vertical}
.jx-link{align-self:flex-start;font-size:.8125rem}
.sheet:has(.jx-sheet) .sheet-head h2{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-weight:700!important;font-size:1.375rem!important;color:#27201c}
.sheet:has(.jx-sheet){background:#fefcf8}
/* Trial (4 Nov): the exercise circles hold round photos, in the journal and on Discover */
.jx-dot.jx-ph{background:#fdf1d8 center/cover no-repeat;box-shadow:none}
.jx-c.done .jx-dot.jx-ph{box-shadow:0 0 0 3px #fefcf8,0 0 0 5px #e5b64f}
.j-lib .jx-row{display:flex;gap:14px;overflow-x:auto;margin:8px -16px 6px;padding:4px 16px 6px;scrollbar-width:none}
.j-lib .jx-row::-webkit-scrollbar{display:none}
.jx-hero{display:block;width:96px;height:96px;margin:0 auto 4px;border-radius:50%;background:center/cover no-repeat}
/* Trial (4 Nov): a day in the calendar starts with the mood and what was done */
.j-notes .jn-daysum{display:flex;align-items:center;gap:12px;margin:6px 0 12px;padding:12px 16px;border-radius:18px;background:#fdf1d8}
.j-notes .jn-daysum .ck-pip{width:52px;height:60px}
.j-notes .jn-daysum div{display:flex;flex-direction:column;gap:3px}
.j-notes .jn-daysum b{font-size:.9375rem;color:#27201c}
.j-notes .jn-daysum span{font-size:.8125rem;color:#6f675d}
.j-notes .jn-cal-g .mood{box-shadow:inset 0 -3px 0 #e5b64f}
/* Trial (4 Nov): Pip tells the In short, with his little speech bubble */
.j-lib .jl-what-pip{display:flex;align-items:flex-end;gap:12px;padding:14px 16px 14px 10px}
.j-lib .jl-pip{flex:none;width:70px;height:96px;background:url(assets/landing/pip-f-talk.png) center bottom/contain no-repeat}
.j-lib .jl-what-pip>div{min-width:0}
.j-lib .jl-what-pip{align-items:flex-start!important}.j-lib .jl-pip{width:84px!important;height:112px!important;margin-top:-4px}.j-lib .jl-what-pip p{font-size:1rem!important}
.j-lib .jl-what-pip{align-items:flex-end!important}.j-lib .jl-pip{margin-top:0!important;margin-bottom:-2px}
/* Trial (4 Nov): the In short Pip blinks: the curious Pip with his open and closed eyes, and the speech bubble from her sheet */
.j-lib .jl-pip{position:relative;flex:none;width:84px!important;height:112px!important;padding:0;border:0;background:none!important;cursor:pointer;margin:0 0 -2px!important}
.j-lib .jl-pip i{position:absolute;display:block;background:center bottom/contain no-repeat}
.j-lib .jl-pip .jb-open,.j-lib .jl-pip .jb-shut{left:0;bottom:0;width:60px;height:92px}
.j-lib .jl-pip .jb-open{background-image:url(assets/landing/mascot-up.png)}
.j-lib .jl-pip .jb-shut{background-image:url(assets/landing/mascot-up-closed.png?v=3);opacity:0}
.j-lib .jl-pip.shut .jb-shut{opacity:1}.j-lib .jl-pip.shut .jb-open{opacity:0}
.j-lib .jl-pip .jl-bub{right:0;top:0;width:32px;height:37px;background-image:url(assets/landing/pip-bubble.png)}
/* Trial (4 Nov): while Pip reads, his bubble dots show honey */
.j-lib .jl-pip.talk .jl-bub{filter:none;outline:0}
.j-lib .jl-pip.talk::after{content:"";position:absolute;right:6px;top:41px;width:6px;height:6px;border-radius:50%;background:#e5b64f}
/* Trial (4 Nov): the date sits on the weekly journal photo; a small Change photo link at the top */
.j-notes .jn-cover{position:relative;margin-top:6px!important;background-size:cover!important;background-position:center!important}
.j-notes .jn-cover-shade{position:absolute;inset:0;border-radius:inherit;background:rgba(20,14,10,.16)}
.j-notes .jn-cover .jn-today{position:absolute;left:16px;right:14px;bottom:14px;margin:0!important;display:flex;align-items:flex-end;justify-content:space-between}
.j-notes .jn-cover .jn-today small,.j-notes .jn-cover .jn-today b{color:#fefcf8!important;text-shadow:0 1px 8px rgba(20,14,10,.5)}
.j-notes .jn-cover .jn-today b em{box-shadow:inset 0 -.32em 0 rgba(238,196,106,.75)!important;text-shadow:none}
.j-notes .jn-cover .jn-calbtn{background:#fefcf8!important}
.j-notes .jn-coverbtn{position:absolute;top:12px;right:14px;padding:0;border:0;background:none;font:inherit;font-size:.75rem;font-weight:700;color:#fefcf8;text-decoration:underline;text-underline-offset:3px;text-shadow:0 1px 6px rgba(20,14,10,.55);cursor:pointer}
.jn-cover-sheet{display:flex;flex-direction:column;gap:12px;padding-bottom:6px}
.jn-cover-pick{background:#e5b64f!important;color:#27201c!important;border:0;text-align:center;cursor:pointer}
.sheet:has(.jn-cover-sheet) .sheet-head h2{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-weight:700!important;font-size:1.375rem!important;color:#27201c}
.sheet:has(.jn-cover-sheet){background:#fefcf8}
/* Trial (4 Nov): a stamp row opens its chapter, to continue from there */
.j-notes .jn-stamps-list li{padding:0!important}
.j-notes .jn-st-go{display:flex;align-items:center;gap:14px;width:100%;padding:12px 18px 12px 16px;border:0;background:none;font:inherit;text-align:left;cursor:pointer;border-radius:16px}
.j-notes .jn-st-go svg{flex:none;width:44px;height:44px}
.j-notes .jn-st-go span{flex:1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.j-notes .jn-st-arrow{flex:none;font-style:normal;font-size:1.25rem;color:#93641f;margin-left:4px}
.j-notes .jn-cover .jn-today b{font-size:1.75rem!important;line-height:1.1!important;white-space:nowrap}
/* Trial (4 Nov): a tiny speaker next to In short reads it aloud */
.j-lib .jl-what small{display:flex!important;align-items:center;gap:6px}
.jl-say{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:#fefcf8;color:#93641f;cursor:pointer}
.jl-say.on{background:#e5b64f;color:#27201c}
.jl-say{background:rgba(254,252,248,.35)!important}.jl-say.on{background:rgba(229,182,79,.45)!important;color:#27201c}
/* Trial (4 Nov): one happy photo a day in the journal */
.j-notes .jn-happy{display:flex;align-items:center;gap:14px;width:100%;margin:12px 0 4px;padding:12px 14px;border:1.5px dashed #e8d3a6;border-radius:20px;background:#fefcf8;font:inherit;text-align:left;cursor:pointer;box-sizing:border-box}
.j-notes .jn-happy-plus{flex:none;width:52px;height:52px;border-radius:14px;background:#fdf1d8;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:400;color:#93641f}
.j-notes .jn-happy b{display:block;font-size:.9375rem;color:#27201c}
.j-notes .jn-happy small{display:block;margin-top:2px;font-size:.8125rem;line-height:1.35;color:#6f675d}
.j-notes .jn-happy.has{border:0;background:#fdf1d8;cursor:default}
.j-notes .jn-happy-ph{flex:none;width:72px;height:72px;border-radius:16px;background:center/cover no-repeat}
.j-notes .jn-happy.has small{font-family:var(--jn-hand);font-size:1.25rem;color:#27201c;margin:0 0 2px}
.j-notes .jn-happy-day{height:180px;margin:4px 0 12px;border-radius:20px;background:center/cover no-repeat}
/* Trial (4 Nov): at the top of Notes, two rounded cards side by side: Write a note and Add a happy photo */
.j-notes .jn-acts2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 14px}
.j-notes .jn-act2{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:96px;padding:14px;border:0;border-radius:18px;background:#fdf1d8;font:inherit;text-align:left;cursor:pointer}
.j-notes .jn-act2 b{font-size:.9375rem;color:#27201c}
.j-notes .jn-act2-ic{width:40px;height:40px;border-radius:12px;background:#fefcf8;display:flex;align-items:center;justify-content:center}
.j-notes .jn-act2-ph{width:100%;height:64px;border-radius:12px;background:center/cover no-repeat}
/* Trial (4 Nov): the two Notes cards compact, icon and text side by side, soft grey text */
.j-notes .jn-act2{flex-direction:row!important;align-items:center!important;gap:10px!important;min-height:0!important;padding:10px 12px!important;background:#fbf5ea!important}
.j-notes .jn-act2-ic{flex:none;width:34px!important;height:34px!important;border-radius:10px}
.j-notes .jn-act2-ic svg{width:18px;height:18px}
.j-notes .jn-act2-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.j-notes .jn-act2 b{font-size:.8125rem!important;font-weight:600!important;color:#5a5044!important}
.j-notes .jn-act2 small{font-size:.6875rem;line-height:1.3;color:#8a8178}
.j-notes .jn-act2-ph{flex:none;width:34px!important;height:34px!important;border-radius:10px}
/* Trial (4 Nov): your week in happy photos, and small round photos on the calendar days */
.j-notes .jn-week{margin:0 0 14px;padding:12px 14px;border-radius:18px;background:#fbf5ea}
.j-notes .jn-week-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.j-notes .jn-week-h b{font-size:.875rem;font-weight:600;color:#5a5044}
.j-notes .jn-week-h small{font-size:.75rem;color:#8a8178}
.j-notes .jn-week-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.j-notes .jn-wk{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;font:inherit;cursor:pointer}
.j-notes .jn-wk i{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:center/cover no-repeat;box-shadow:0 0 0 2px #fefcf8}
.j-notes .jn-wk.none i{background:none;box-shadow:inset 0 0 0 1.5px #e8dcc6}
.j-notes .jn-wk small{font-size:.6875rem;font-weight:600;color:#8a8178}
.j-notes .jn-cal-g .ph{background-size:cover!important;background-position:center!important;color:#fefcf8!important;text-shadow:0 1px 4px rgba(20,14,10,.7);font-weight:700;box-shadow:none!important}
.j-notes .jn-cal-g .ph.on{box-shadow:0 0 0 2px #fefcf8,0 0 0 4px #e5b64f!important}
/* Trial (4 Nov): the month collage, a month ago, and Pip's short reaction to a new happy photo */
.j-notes .jn-collage{margin:0 0 14px;padding:12px 14px;border-radius:18px;background:#fdf1d8}
.j-notes .jn-collage-g{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:64px;gap:5px;border-radius:14px;overflow:hidden}
.j-notes .jn-collage-g i{display:block;background:center/cover no-repeat;border-radius:6px}
.j-notes .jn-collage-g i.big{grid-column:span 2;grid-row:span 2}
.j-notes .jn-cal+.jn-collage{margin-top:14px}
.j-notes .jn-ago{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:10px 14px 10px 10px;border-radius:18px;background:#fbf5ea}
.j-notes .jn-ago i{flex:none;width:56px;height:56px;border-radius:14px;background:center/cover no-repeat}
.j-notes .jn-ago small{display:block;font-size:.6875rem;font-weight:700;color:#93641f}
.j-notes .jn-ago b{font-family:var(--jn-hand);font-size:1.25rem;font-weight:400;color:#27201c}
.j-notes .jn-act2{position:relative}
.jn-pip-pop{position:absolute;right:6px;top:-30px;width:44px;height:52px;background:url(assets/landing/mascot-hug.png) center bottom/contain no-repeat;animation:jnPipPop .45s cubic-bezier(.2,.8,.2,1) 1 both;pointer-events:none}
@keyframes jnPipPop{from{transform:translateY(10px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.jn-pip-pop{animation:none}}
.j-notes .jn-theme{margin:-4px 0 10px;font-size:.8125rem;color:#6f675d}
.j-notes .jn-theme em{font-style:normal;font-weight:700;color:#93641f}
/* Trial (4 Nov): Who you are as a compact row; Results two per row */
.j-notes .jy{margin-top:14px}
.j-notes .jy .jn-h2{font-size:1.0625rem!important;margin:0 0 8px!important}
.j-notes .jy-hero-card{display:flex!important;align-items:center!important;gap:14px!important;padding:10px 14px 10px 10px!important;min-height:0!important}
.j-notes .jy-hero-card .jy-pic{flex:none!important;width:76px!important;height:76px!important;min-height:0!important;border-radius:14px!important;aspect-ratio:auto!important}
.j-notes .jy-hero-card .jy-tx{padding:0!important;gap:2px!important}
.j-notes .jy-hero-card .jy-tx small{font-size:.6875rem!important}
.j-notes .jy-hero-card .jy-tx b{font-size:1.125rem!important;line-height:1.2!important}
.j-notes .jy-hero-card .jy-tx span{font-size:.75rem!important}
.j-notes .jy-hero-card .jy-more{font-size:.75rem!important;margin-top:2px!important}
.j-notes .jy-hero-card .jy-tape{width:44px!important;height:12px!important;top:-6px!important}
.j-notes .jy-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 12px!important}
@media (min-width:760px){.j-notes .jy-tiles{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
.j-notes .jy-tiles .jy-pic{aspect-ratio:4/3!important;height:auto!important;min-height:0!important}
/* Trial (4 Nov): Results as compact taped cards, the same shape as the personality type card */
.j-notes .jy-tiles{display:flex!important;flex-direction:column;gap:14px!important}
.j-notes .jy-row{position:relative;display:flex!important;align-items:center;gap:14px;width:100%;padding:10px 14px 10px 10px!important;border:1.5px solid #f0e6d4;border-radius:18px;background:#fefcf8;text-align:left;font:inherit;box-sizing:border-box}
.j-notes .jy-row .jy-pic{flex:none!important;width:76px!important;height:76px!important;aspect-ratio:auto!important;border-radius:14px!important;margin:0!important}
.j-notes .jy-row .jy-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.j-notes .jy-row .jy-tx small{font-size:.6875rem;font-weight:700;color:#93641f}
.j-notes .jy-row .jy-tx b{font-family:var(--jn-hand);font-size:1.25rem;font-weight:400;line-height:1.15;color:#27201c}
.j-notes .jy-row .jy-tx span{font-size:.75rem;color:#6f675d}
.j-notes .jy-row .jy-tape{position:absolute;left:28px;top:-6px;width:44px;height:12px}
.j-notes .jy-row.jy-off{cursor:pointer;border-style:dashed}
.j-notes .jy-row.jy-off .jy-tx b{color:#8a8178}
.j-notes .jy-row .jy-go{font-weight:700;color:#27201c!important;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#e5b64f}
.j-notes .jy-tiles .jy-row{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important}.j-notes .jy-row .jy-tx{align-items:flex-start!important;text-align:left!important;flex:1}
/* Trial (4 Nov): Pip in the games: the heart Pip beside a new stamp, the curious Pip on the chapter start screen */
main.calm-lesson .jn-press{position:relative}
main.calm-lesson .jg-pip-heart{position:absolute;right:-34px;bottom:-6px;width:64px;height:76px;background:url(assets/landing/mascot-hug.png) center bottom/contain no-repeat;animation:jnPipPop .45s cubic-bezier(.2,.8,.2,1) .5s 1 both}
@media (prefers-reduced-motion:reduce){main.calm-lesson .jg-pip-heart{animation:none}}
main.calm-lesson .jc-meta-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
main.calm-lesson .jc-pip{position:relative;flex:none;width:74px;height:98px;margin:-36px 0 0;padding:0;border:0;background:none;cursor:pointer}
main.calm-lesson .jc-pip i{position:absolute;display:block;background:center bottom/contain no-repeat}
main.calm-lesson .jc-pip .jb-open,main.calm-lesson .jc-pip .jb-shut{left:0;bottom:0;width:54px;height:82px}
main.calm-lesson .jc-pip .jb-open{background-image:url(assets/landing/mascot-up.png)}
main.calm-lesson .jc-pip .jb-shut{background-image:url(assets/landing/mascot-up-closed.png?v=3);opacity:0}
main.calm-lesson .jc-pip.shut .jb-shut{opacity:1}main.calm-lesson .jc-pip.shut .jb-open{opacity:0}
main.calm-lesson .jc-pip .jl-bub{right:0;top:0;width:28px;height:32px;background-image:url(assets/landing/pip-bubble.png)}
/* Trial (5 Nov): Pip stands on the left in the games, his bubble to his right */
.pip-case{justify-content:flex-start!important;padding:0 0 0 6px!important}
.pip-case .pip-bubble{right:auto!important;left:80px!important}
main.calm-lesson .jc-meta-row{flex-direction:row-reverse;justify-content:flex-end!important}
/* Trial (5 Nov): without the Help button the progress bar runs to the close button */
main.calm-lesson:not(.jl-s3):not(.jl-s4) .cl-top .cl-bar{margin-right:0!important}
/* Trial (5 Nov): Pip peeks over his little hill beside Hello, Sam (Pip version) */
.j-home .jh-head{align-items:flex-end}
.j-home .jh-head .pip-peek{position:relative;left:auto;bottom:auto;margin:0 auto -4px 10px;line-height:0;pointer-events:auto;animation:none}
.j-home .jh-head .pip-peek .pip-fig{position:relative;display:block;width:44px;height:60px;padding:0;border:0;background:none;cursor:pointer;overflow:hidden}
.j-home .jh-head .pip-peek .pip-fig span{position:absolute;inset:0;background:url(assets/landing/mascot-big.png) center bottom/contain no-repeat}
.j-home .jh-head .pip-peek .jb-shut{background-image:url(assets/landing/mascot-big-closed.png)!important;opacity:0}
.j-home .jh-head .pip-peek .pip-fig.shut .jb-shut{opacity:1}.j-home .jh-head .pip-peek .pip-fig.shut .jb-open{opacity:0}
.j-home .jh-head .pip-peek .pip-fig.rise span{animation:pipRise .5s cubic-bezier(.2,.8,.2,1) both}
.j-home .jh-head .pip-peek .pip-bubble{left:0;top:66px;white-space:nowrap}
/* the side menu on a computer starts level with the page title */
@media(min-width:1180px){.home-nav{top:58px!important;bottom:auto!important;transform:none!important}}
.j-home .jh-head .pip-peek .pip-fig{transform:scaleX(-1)}
/* Trial (5 Nov): Pip beside Hello leans a little to the left, a bit bigger, and sinks behind the chapter photo, as if peeking over it */
.j-home .jh-head{position:relative;z-index:0}
.j-home .jh-head .pip-peek{margin:0 auto -30px 6px!important;z-index:0}
.j-home .jh-head .pip-peek .pip-fig{width:58px!important;height:80px!important;transform:scaleX(-1) rotate(10deg)!important;transform-origin:50% 100%}
.j-home .jh-cover{position:relative;z-index:1}
/* Trial (5 Nov): the Hello Pip drawing is scaled down more than the slider Pip, so its lines get a touch of weight to match */
.j-home .jh-head .pip-peek .pip-fig span{filter:drop-shadow(0 0 .35px #3d3123) drop-shadow(0 0 .35px #3d3123)}
/* Trial (5 Nov): Pip beside Hello back on his visible hill, with his own fine lines */
.j-home .jh-head .pip-peek{margin:0 auto 2px 6px!important}
.j-home .jh-head .pip-peek .pip-fig span{filter:none!important}
/* Trial (5 Nov): Pip sits in the middle between Hello and the topics button, a little lower */
.j-home .jh-head .pip-peek{margin:0 auto -10px auto!important}
/* Trial (5 Nov): Pip's kind line beside the new stamp, and Pip on the sign-in page */
main.calm-lesson .jg-pip-say{position:absolute;right:-118px;bottom:66px;max-width:120px;padding:7px 10px;border:1.5px solid #ece4d6;border-radius:14px;background:#fff;font-size:.75rem;font-weight:600;line-height:1.3;color:#27201c;text-align:left;animation:jnPipPop .45s cubic-bezier(.2,.8,.2,1) .7s 1 both}
@media (prefers-reduced-motion:reduce){main.calm-lesson .jg-pip-say{animation:none}}
.lp-pip{display:flex;justify-content:center;margin:0 0 -18px;position:relative;z-index:2}
.lp-pip i{display:block;width:92px;height:92px;border-radius:50%;background:#fefcf8 url(assets/landing/mascot-big.png) center 70%/58px auto no-repeat;box-shadow:0 4px 14px rgba(20,14,10,.18)}
/* Trial (5 Nov): the Home title stays on one row, with Pip in the middle */
.j-home .jh-head .home-hello{white-space:nowrap}
@media (max-width:400px){.j-home .jh-head .home-hello{font-size:clamp(1.6rem,8vw,2rem)}}
/* Trial (5 Nov): the start-screen Pip stands fully under the chapter photo */
main.calm-lesson .jc-pip{margin:4px 0 0!important}
main.calm-lesson .jc-meta-row{align-items:center!important;margin-top:-6px}
/* Trial (5 Nov): on the sign-in photo Pip is drawn in white, with no circle behind him */
.lp-pip i{width:66px!important;height:84px!important;border-radius:0!important;background:url(assets/landing/mascot-big.png) center bottom/contain no-repeat!important;box-shadow:none!important;filter:brightness(0) invert(1)}
.lp-pip{margin:0 0 8px!important}
/* Trial (5 Nov): Hello and the menu button on one line, Pip between them */
.j-home .jh-head{align-items:center!important}
.j-home .jh-head .pip-peek{align-self:center!important;margin:0 auto!important}
.j-home .jh-head .jh-cat{position:relative;top:6px}
/* Trial (5 Nov): Pip now and then on a quiet lesson screen */
main.calm-lesson .pip-deco{display:flex;justify-content:flex-start;margin-top:auto;padding:0 0 0 6px}
main.calm-lesson .pip-deco i{display:block;width:62px;height:76px;background:center bottom/contain no-repeat;animation:jnPipPop .45s cubic-bezier(.2,.8,.2,1) .3s 1 both}
main.calm-lesson .pip-deco+.cl-actions{margin-top:6px!important}
@media (prefers-reduced-motion:reduce){main.calm-lesson .pip-deco i{animation:none}}
.j-home .jh-head .jh-cat{top:0!important}
/* Trial (5 Nov): the Hello Pip a little smaller, his hill tucked just behind the chapter photo */
.j-home .jh-head .pip-peek .pip-fig{width:46px!important;height:64px!important}
.j-home .jh-head .pip-peek{align-self:flex-end!important;margin:0 auto -16px!important}

/* Trial (5 Nov): Pip beside Hello at yesterday's size, close to the name, and he says hello once in a bubble */
.j-home .jh-head .pip-peek{align-self:flex-end!important;margin:0 auto -18px 10px!important;z-index:2}
.j-home .jh-head .pip-peek .pip-fig{width:58px!important;height:80px!important;transform:scaleX(-1) rotate(10deg)!important;transform-origin:50% 100%}
.j-home .jh-head .pip-peek .pip-bubble{left:62px;top:2px;width:178px;white-space:normal;animation:jnPipPop .45s cubic-bezier(.2,.8,.2,1) 1 both}

/* Trial (5 Nov): no Pip on the Home photo; the photo sits right under Hello */
.j-home .jh-head{margin-bottom:6px!important}
/* Trial (5 Nov): Pip introduces himself on Home, a plain row with a bubble, no card */
.jh-pipintro{display:flex;align-items:flex-end;gap:10px;padding:4px 2px 0}
.jh-pipintro .pip-fig{position:relative;flex:none;width:62px;height:84px;padding:0;border:0;background:none;cursor:pointer}
.jh-pipintro .pip-fig span{position:absolute;inset:0;background:url(assets/landing/mascot-big.png) center bottom/contain no-repeat}
.jh-pipintro .jb-shut{background-image:url(assets/landing/mascot-big-closed.png)!important;opacity:0}
.jh-pipintro .pip-fig.shut .jb-shut{opacity:1}.jh-pipintro .pip-fig.shut .jb-open{opacity:0}
.jh-pipintro .pip-fig.rise span{animation:pipRise .5s cubic-bezier(.2,.8,.2,1) both}
.jh-pi-b{position:relative;margin:0 0 30px;padding:10px 40px 10px 14px;border:1.5px solid #ece4d6;border-radius:18px 18px 18px 4px;background:#fff;font-size:.875rem;line-height:1.4;color:#5c5148;animation:jnPipPop .45s cubic-bezier(.2,.8,.2,1) .5s 1 both}
.jh-pi-b b{display:block;color:#27201c;font-weight:700}
.jh-pi-b .jl-say{position:absolute;top:8px;right:8px;background:#fdf1d8}
/* Trial (5 Nov): the check-in on Home is small */
.j-home .jh-feel{padding:10px 14px!important;font-size:.8125rem!important}
.j-home .jh-feel > p:first-child{font-size:.875rem!important;margin:0 0 4px!important}
.j-home .jh-feel.ck-done p{font-size:.8125rem!important;line-height:1.4!important}
.j-home .jh-feel .ck-pip{width:40px!important;height:48px!important}
.j-home .jh-feel .ck-mine{font-size:.875rem!important}

/* Trial (5 Nov): Pip walks in once under the first photo on Home, then says hello */
.j-home .jh-col-l>.jh-pipintro{grid-column:1/-1!important;order:0;align-items:flex-end;gap:6px;padding:0 2px;margin:-4px 0 0}
.jh-pipintro .pip-fig{width:66px!important;height:110px!important;overflow:visible}
.jh-pipintro .pw{display:block;width:66px;height:110px;background:url(assets/landing/pip-walk.png?v=3) 0 0/726px 110px no-repeat}
.jh-pipintro.walk .pip-fig{animation:jhPipIn 1.8s linear both}
.jh-pipintro.walk .pw{animation:jhPipStep .9s steps(11) 2}
.jh-pipintro.walk .jh-pi-b{animation-delay:1.8s}
.jh-pipintro .pw.hop{animation:pipHop .4s ease-out}
.jh-pi-b{margin:0 0 40px!important}
@keyframes jhPipIn{from{transform:translateX(-90px);opacity:0}12%{opacity:1}to{transform:translateX(0);opacity:1}}
@keyframes jhPipStep{from{background-position:0 0}to{background-position:-726px 0}}
@media (prefers-reduced-motion:reduce){.jh-pipintro .pip-fig,.jh-pipintro .pw,.jh-pi-b{animation:none!important}}

/* Trial (5 Nov): Pip's hello sits on the sign-up page under the first photo */
main.landing .lp-intro{max-width:520px;margin:18px auto 0;padding:0 20px;box-sizing:border-box}

/* Trial (5 Nov): on the sign-up page Pip and his hello share one sticky note, under the fast and slow mode study */
main.landing .lp-intro{grid-column:1/-1;display:flex;align-items:center;gap:12px;max-width:none;margin:14px 0 0;padding:14px 16px 12px 10px;border-radius:20px;background-color:#fce5bb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24'%3E%3Crect y='23' width='8' height='1' fill='%23f0d59a'/%3E%3C/svg%3E");background-position:0 8px;text-align:left;box-sizing:border-box}
main.landing .lp-intro p{margin:0;font-size:.9375rem;line-height:24px;color:#5c5148}
main.landing .lp-intro p b{display:block;color:#27201c;font-weight:700}
main.landing .lp-pip-fig{flex:none;width:64px;height:84px;padding:0;border:0;background:none;cursor:pointer}
main.landing .lp-pip-fig span{display:block;width:100%;height:100%;background:url(assets/landing/mascot-up.png) center bottom/contain no-repeat;transform:scaleX(-1)}
main.landing .lp-pip-fig span.hop{animation:pipHop .4s ease-out}

/* Trial (5 Nov): Anchors and estimates uses Sacha's white sailboat on calm sea (Unsplash ZFMJ5xECg2I) */
.jp-anchors,:is(.j-home,.calm-lesson) .jp-anchors,main.calm-lesson .cl-done-ph.jp-anchors,main.calm-lesson .jg-ph.jp-anchors,.j-home .jh-cover.jp-anchors{background-image:url(assets/landing/ch-anchors-sail2.jpg)!important}
main.calm-lesson .cl-pic{background-image:url(assets/landing/ch-anchors-sail2.jpg)!important}

/* Trial (5 Nov): sign-up page, the laughing photo and Pip's hello as two squares side by side; Pip talks and looks up at his words */
main.landing #trust .nx-pic .lp-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
main.landing #trust .nx-pic .lp-pair img{aspect-ratio:1/1!important;height:100%!important;border-radius:22px!important}
main.landing .lp-intro{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1/1;min-height:100%;margin:0;padding:14px 14px 8px;border-radius:22px;background-color:#fce5bb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='22'%3E%3Crect y='21' width='8' height='1' fill='%23f0d59a'/%3E%3C/svg%3E");background-position:0 12px;text-align:left;box-sizing:border-box;overflow:hidden}
main.landing .lp-intro p{margin:0;font-size:.8125rem;line-height:22px;color:#5c5148}
main.landing .lp-intro p b{display:block;color:#27201c;font-weight:700}
main.landing .lp-pip-fig{align-self:flex-start;flex:none;width:58px;height:66px;margin-top:4px;padding:0;border:0;background:none;cursor:pointer}
main.landing .lp-pip-fig span{display:block;width:100%;height:100%;background:url(assets/landing/pip-f-talk.png) left bottom/contain no-repeat;transform:none}
main.landing .lp-pip-fig span.hop{animation:pipHop .4s ease-out}
@media (min-width:900px){main.landing .lp-intro p{font-size:.9375rem;line-height:24px}main.landing .lp-pip-fig{width:76px;height:88px}}

/* Trial (5 Nov): in the free game Pip says hello once on the first screen, in the same sticky note */
main.calm-lesson .cl-pip-intro{display:flex;align-items:flex-end;gap:10px;margin:0 0 16px;padding:12px 14px 8px 8px;border-radius:20px;background-color:#fce5bb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='22'%3E%3Crect y='21' width='8' height='1' fill='%23f0d59a'/%3E%3C/svg%3E");background-position:0 10px;animation:jnPipPop .45s cubic-bezier(.2,.8,.2,1) .2s 1 both}
main.calm-lesson .cl-pip-intro p{margin:0;font-size:.875rem;line-height:22px;color:#5c5148}
main.calm-lesson .cl-pip-intro p b{display:block;color:#27201c;font-weight:700}
main.calm-lesson .cl-pip-intro .lp-pip-fig{flex:none;width:58px;height:66px;padding:0;border:0;background:none;cursor:pointer}
main.calm-lesson .cl-pip-intro .lp-pip-fig span{display:block;width:100%;height:100%;background:url(assets/landing/pip-f-talk.png) left bottom/contain no-repeat}
main.calm-lesson .cl-pip-intro .lp-pip-fig span.hop{animation:pipHop .4s ease-out}
main.landing .lp-pair{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px;width:100%}
main.landing .lp-pair img{width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover;border-radius:22px!important;margin:0!important}
main.landing .lp-pair .lp-intro{grid-column:auto!important;min-height:0!important;aspect-ratio:1/1;max-width:none;width:auto}
/* the two blocks share one height: the note sets it, the photo fills it */
main.landing .lp-pair{align-items:stretch}
main.landing .lp-pair img{aspect-ratio:auto!important;height:100%!important;min-height:0}
main.landing .lp-pair .lp-intro{aspect-ratio:auto!important;justify-content:flex-start;gap:6px}
main.landing .lp-pair .lp-pip-fig{width:56px;height:62px;margin-top:auto}
main.landing #trust .nx-pic .lp-pair img{aspect-ratio:auto!important;height:0!important;min-height:100%!important}

/* Trial (5 Nov): Pip's hello is handwritten, as if he wrote it on the note */
main.landing .lp-intro,main.calm-lesson .cl-pip-intro{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='28'%3E%3Crect y='27' width='8' height='1' fill='%23f0d59a'/%3E%3C/svg%3E")!important;background-position:0 12px!important}
main.landing .lp-intro p,main.calm-lesson .cl-pip-intro p{font-family:var(--jn-hand);font-size:1.25rem!important;font-weight:500;line-height:28px!important;color:#27201c!important}
main.landing .lp-intro p b,main.calm-lesson .cl-pip-intro p b{font-weight:600;color:#27201c}
main.landing .lp-pair .lp-intro p{font-size:1.125rem!important}
/* Trial (5 Nov): the sailboat photo sits a little higher so the boat shows above the text */
.j-home .jh-cover.jp-anchors{background-size:cover!important;background-position:center 80%!important}

main.calm-lesson .pip-deco{position:static!important;flex:none;margin:16px 0 8px!important}

/* Trial (5 Nov): Pip in the games is smaller, so his lines look finer */
.pip-case .pip-fig{width:50px!important;height:86px!important}
main.calm-lesson .pip-deco i{width:48px!important;height:60px!important}
.pip-case .pip-bubble{left:60px!important}
/* Trial (5 Nov): on the sign-up note Pip walks in once from the left, stops, and hops before he talks */
main.landing .lp-pip-fig{position:relative;overflow:visible}
main.landing .lp-pip-fig .lp-walk{position:absolute;left:0;bottom:0;width:40px;height:66px;background:url(assets/landing/pip-walk.png?v=3) 0 0/440px 66px no-repeat;opacity:0}
main.landing .lp-intro:not(.arrive) .lp-pip-fig span{opacity:0}
main.landing .lp-intro.arrive .lp-walk{animation:lpWalkIn 1.6s linear both,lpWalkStep .8s steps(11) 2,lpWalkOut .01s linear 1.6s both}
main.landing .lp-intro.arrive .lp-pip-fig span{animation:lpTalkIn .01s linear 1.6s both,pipHop .45s ease-out 1.65s 1}
@keyframes lpWalkIn{from{transform:translateX(-120px);opacity:1}to{transform:translateX(0);opacity:1}}
@keyframes lpWalkStep{from{background-position:0 0}to{background-position:-440px 0}}
@keyframes lpWalkOut{to{opacity:0}}
@keyframes lpTalkIn{from{opacity:0}to{opacity:1}}
main.landing .lp-pair .lp-intro{overflow:hidden}
@media (prefers-reduced-motion:reduce){main.landing .lp-intro .lp-walk{display:none}main.landing .lp-intro .lp-pip-fig span{opacity:1!important;animation:none!important}}

/* Trial (5 Nov): the check-in names the feeling in small letters under Pip, and the question is not bold */
.ck-pipw{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.ck-ends .ck-pipw .ck-word.ck-small{min-width:0!important;text-align:center!important;font-size:.6875rem!important;font-weight:500;line-height:1;color:#93641f}
.j-home .jh-feel > p:first-child{font-weight:400!important}

main.calm-lesson .cl-pic.jp-anchors,main.calm-lesson .cl-pic{background-position:center 54%!important}

/* Trial (5 Nov): on the sign-up page Pip walks across once, stops at the end and looks up; under the stamp card to the right, under the topics to the left */
main.landing .lp-walkline{position:relative;height:72px;margin:14px 0 0}
main.landing .lp-walkline .lw{position:absolute;bottom:0;width:44px;height:68px;left:-50px}
main.landing .lp-walkline.lw-l .lw{left:calc(100% + 6px)}
main.landing .lp-walkline i,main.landing .lp-walkline b{position:absolute;left:0;bottom:0;display:block}
main.landing .lp-walkline i{width:40px;height:66px;background:url(assets/landing/pip-walk.png?v=3) 0 0/440px 66px no-repeat}
main.landing .lp-walkline b{width:44px;height:62px;background:url(assets/landing/mascot-up.png) center bottom/contain no-repeat;opacity:0}
main.landing .lp-walkline.lw-l i{transform:scaleX(-1)}
main.landing .lp-walkline.lw-l b{transform:scaleX(-1)}
main.landing .lp-walkline.lw-r.go .lw{animation:lpCrossR 4s linear 1 both}
main.landing .lp-walkline.lw-l.go .lw{animation:lpCrossL 4s linear 1 both}
main.landing .lp-walkline.go i{animation:lpWalkStep .8s steps(11) 5,lpWalkOut .01s linear 4s both}
main.landing .lp-walkline.go b{animation:lpTalkIn .01s linear 4s both,pipHop .45s ease-out 4.05s 1}
@keyframes lpCrossR{from{left:-50px}to{left:calc(100% - 52px)}}
@keyframes lpCrossL{from{left:calc(100% + 6px)}to{left:8px}}
main.landing .lp-walkline{overflow:hidden}
@media (prefers-reduced-motion:reduce){main.landing .lp-walkline{display:none}}

/* Trial (5 Nov): in the sign-up note it is the Pip behind his little hill, and he blinks a few times */
main.landing .lp-intro .lp-hill{position:relative;width:62px!important;height:78px!important}
main.landing .lp-intro .lp-hill span{position:absolute;inset:0;background:url(assets/landing/mascot-big.png) left bottom/contain no-repeat!important;opacity:1!important;animation:none!important;transform:none!important}
main.landing .lp-intro .lp-hill .jb-shut{background-image:url(assets/landing/mascot-big-closed.png)!important;opacity:0!important}
main.landing .lp-intro .lp-hill.shut .jb-shut{opacity:1!important}main.landing .lp-intro .lp-hill.shut .jb-open{opacity:0!important}
main.landing .lp-intro.arrive .lp-hill{animation:pipRise .5s cubic-bezier(.2,.8,.2,1) both}
/* Trial (5 Nov): the Pip under the topics sits closer to the tiles and ends looking the other way */
main.landing .lp-walkline.lw-l{margin-top:-14px!important}
main.landing .lp-walkline.lw-l b{transform:none!important}
main.landing .lp-walkline.lw-l{margin-top:-30px!important}
main.landing .lp-walkline.lw-r b{transform:scaleX(-1)!important}

.j-home .jh-pipth .jh-pipmore{display:block;margin-top:6px;font-size:.8125rem}
body:has(#overlay .sheet) :is(#j-new,#j-skip,#j-skipq,#j-preview-tag){display:none!important}

/* Trial (5 Nov): This or that on Home is a photo card with white text, a light shade and a soft text shadow, no gradient */
.j-home .jh-tot.jh-tot-photo{position:relative;overflow:hidden;isolation:isolate;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px!important;border:0!important;background-color:#3b3229!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;color:#fefcf8}
.j-home .jh-tot.jh-tot-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(24,17,12,.34)}
.j-home .jh-tot-photo .jh-tot-pic{display:none!important}
.j-home .jh-tot-photo h2{color:#fefcf8!important;text-shadow:0 1px 8px rgba(20,14,10,.5)}
.j-home .jh-tot-photo small{color:#fdf1d8!important;text-shadow:0 1px 6px rgba(20,14,10,.5)}
.j-home .jh-tot-photo>p,.j-home .jh-tot-photo .home-tot-res,.j-home .jh-tot-photo .home-tot-note,.j-home .jh-tot-photo .home-tot-topic{color:#fefcf8!important;text-shadow:0 1px 8px rgba(20,14,10,.55)}
.j-home .jh-tot-photo>p{font-size:1.0625rem!important;font-weight:600;margin-top:auto!important}
.j-home .jh-tot-photo .home-tot-btns button{border:0!important;background:#fefcf8!important;color:#27201c!important}
.j-home .jh-tot-photo .home-tot-btns button:last-child{background:#eec46a!important;color:#211c15!important}
.j-home .jh-tot.jh-tot-photo.jt-0{background-image:url(assets/landing/q-coins.webp)!important}
.j-home .jh-tot.jh-tot-photo.jt-1{background-image:url(assets/landing/q-dairy.webp)!important}
.j-home .jh-tot.jh-tot-photo.jt-2{background-image:url(assets/landing/q-mug1.webp)!important}
.j-home .jh-tot.jh-tot-photo.jt-3{background-image:url(assets/landing/q-plane.webp)!important}
.j-home .jh-tot.jh-tot-photo.jt-4{background-image:url(assets/landing/q-rack.jpg)!important}
.j-home .jh-tot.jh-tot-photo.jt-5{background-image:url(assets/landing/q-holiday.jpg)!important}
.j-home .jh-tot.jh-tot-photo.jt-6{background-image:url(assets/landing/q-rain-warm.jpg)!important}

/* Trial (5 Nov): Fast or slow is a photo card too, white text with a light shade, no gradient */
.j-home .jh-daily.jh-fs-photo{position:relative;overflow:hidden;isolation:isolate;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px!important;border:0!important;background-color:#3b3229!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;color:#fefcf8}
.j-home .jh-daily.jh-fs-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(24,17,12,.38)}
.j-home .jh-fs-photo h2,.j-home .jh-fs-photo>p,.j-home .jh-fs-photo .home-tot-res,.j-home .jh-fs-photo .home-tot-note{color:#fefcf8!important;text-shadow:0 1px 8px rgba(20,14,10,.55)}
.j-home .jh-fs-photo small{color:#fdf1d8!important;text-shadow:0 1px 6px rgba(20,14,10,.5)}
.j-home .jh-fs-photo>p{font-size:1.0625rem!important;font-weight:600;margin-top:auto!important}
.j-home .jh-fs-photo .home-tot-btns button{border:0!important;background:#fefcf8!important;color:#27201c!important}
.j-home .jh-fs-photo .home-tot-btns button:last-child{background:#eec46a!important;color:#211c15!important}
.j-home .jh-daily.jh-fs-photo.fs-0{background-image:url(assets/landing/fs-0.jpg)!important}
.j-home .jh-daily.jh-fs-photo.fs-1{background-image:url(assets/landing/fs-1.jpg)!important}
.j-home .jh-daily.jh-fs-photo.fs-2{background-image:url(assets/landing/fs-2.jpg)!important}
.j-home .jh-daily.jh-fs-photo.fs-3{background-image:url(assets/landing/fs-3.jpg)!important}
.j-home .jh-daily.jh-fs-photo.fs-4{background-image:url(assets/landing/fs-4.jpg)!important}
.j-home .jh-daily.jh-fs-photo.fs-5{background-image:url(assets/landing/fs-5.jpg)!important}
.j-home .jh-daily.jh-fs-photo.fs-6{background-image:url(assets/landing/fs-6.jpg)!important}

/* Trial (5 Nov): Pip's walk at the end of Home, stops under the last card and looks up at it */
.j-home .jh-endwalk{grid-column:1/-1;position:relative;height:72px;margin:4px 0 0;overflow:hidden}
.j-home .jh-endwalk .lw{position:absolute;bottom:0;left:-50px;width:44px;height:68px}
.j-home .jh-endwalk i,.j-home .jh-endwalk b{position:absolute;left:0;bottom:0;display:block}
.j-home .jh-endwalk i{width:40px;height:66px;background:url(assets/landing/pip-walk.png?v=3) 0 0/440px 66px no-repeat}
.j-home .jh-endwalk b{width:44px;height:62px;background:url(assets/landing/mascot-up.png) center bottom/contain no-repeat;opacity:0;transform:scaleX(-1)}
.j-home .jh-endwalk.go .lw{animation:jhEndCross 3.4s linear 1 both}
.j-home .jh-endwalk.go i{animation:lpWalkStep .8s steps(11) 4,lpWalkOut .01s linear 3.4s both}
.j-home .jh-endwalk.go b{animation:lpTalkIn .01s linear 3.4s both,pipHop .45s ease-out 3.45s 1}
@keyframes jhEndCross{from{left:-50px}to{left:calc(50% + 8px)}}
@keyframes lpWalkStep{from{background-position:0 0}to{background-position:-440px 0}}
@keyframes lpWalkOut{to{opacity:0}}
@keyframes lpTalkIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.j-home .jh-endwalk{display:none}}

.j-home .jh-daynote .jn-ic{display:block;margin-top:auto;padding-top:10px}
.j-home .jh-daynote .jn-ic svg{width:44px;height:44px}
/* Trial (5 Nov): warm photos for the money question and for Conformity (Unsplash yIIFNiEKkYI and NEqEC7qa9FM) */
.jh-tot-pic.jt-0,.j-home .jh-tot.jh-tot-photo.jt-0{background-image:url(assets/landing/q-savings.jpg)!important}
.jp-c6,:is(.j-home,.calm-lesson) .jp-c6,main.calm-lesson .cl-done-ph.jp-c6,main.calm-lesson .jg-ph.jp-c6,.j-home .jh-cover.jp-c6,.jh-card.jh-photo.jp-c6{background-image:url(assets/landing/ch-conformity.jpg)!important}
/* Trial (5 Nov): the Home Pip runs all the way to the end of the screen, then looks up */
.j-home .jh-endwalk.go .lw{animation:jhEndRun 2.2s linear 1 both!important}
.j-home .jh-endwalk.go i{animation:lpWalkStep .45s steps(11) 5,lpWalkOut .01s linear 2.2s both!important}
.j-home .jh-endwalk.go b{animation:lpTalkIn .01s linear 2.2s both,pipHop .45s ease-out 2.25s 1!important}
.j-home .jh-endwalk b{transform:none!important}
@keyframes jhEndRun{from{left:-50px}to{left:calc(100% - 50px)}}

/* Trial (5 Nov): when Pip stops under the topics on the sign-up page, Psychology.com appears next to him */
main.landing .lp-walkline .lw-logo{position:absolute;left:64px;bottom:14px;display:flex;align-items:center;gap:7px;font-style:normal;font-weight:700;font-size:1.0625rem;color:#27201c;opacity:0}
main.landing .lp-walkline .lw-logo i{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#eec46a;font-style:normal;font-family:var(--calm-serif);font-size:.9375rem;color:#27201c}
main.landing .lp-walkline .lw-logo span{color:#b07a1f}
main.landing .lp-walkline.go .lw-logo{animation:jnPipPop .45s cubic-bezier(.2,.8,.2,1) 4.4s 1 both}

/* Trial (5 Nov): Seph wants done shown in green on the topic page */
.j-lib .jl-done-n,.j-lib .jl-unit .jl-tx .jl-done{color:#6db083!important;font-weight:700}
.j-lib .jl-go.jl-go-done{color:#6db083!important}
.j-lib .jl-go.jl-go-done svg{stroke:#6db083}
/* Trial (5 Nov): a finished chapter's tick is white on a green circle */
.j-lib .jl-go.jl-go-done{background:#6db083!important;color:#fefcf8!important;border-color:#6db083!important}
.j-lib .jl-go.jl-go-done svg,.j-lib .jl-go.jl-go-done svg *{stroke:#fefcf8!important}
/* Trial (5 Nov): Seph wants everything that is done to be green, with white ticks, across the whole app */
.j-lib .jl-lesson.done .jl-n{border-color:#6db083!important;background:#6db083!important;color:#fefcf8!important}
.j-lib .jl-lesson.done .jl-n svg,.j-lib .jl-lesson.done .jl-n svg *{stroke:#fefcf8!important}
.j-lib .jl-lesson.done .jl-tx span,.j-lib .jl-lesson.done small{color:#6db083!important;font-weight:700}
.j-home .jh-les i.done{background:#6db083!important;color:#fefcf8!important}
.j-home .jh-les i.done svg,.j-home .jh-les i.done svg *{stroke:#fefcf8!important}
.j-home .jh-path li.done{background:#6db083!important;color:#fefcf8!important}
.j-notes .jn-did li::before{background:#6db083 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefcf8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat!important}
.jx-c.done .jx-dot.jx-ph{box-shadow:0 0 0 3px #fefcf8,0 0 0 5px #6db083!important}
.jx-c.done .jx-dot{box-shadow:inset 0 0 0 3px #6db083!important}
/* Trial (5 Nov): pastel green circles; the word Done in a deeper sage of the same green so it stays readable */
.j-lib .jl-done-n,.j-lib .jl-unit .jl-tx .jl-done,.j-lib .jl-lesson.done .jl-tx span,.j-lib .jl-lesson.done small{color:#4f8d62!important}
/* Trial (5 Nov): Again on a finished lesson is honey with dark text, like the main buttons */
.j-lib .jl-lesson.done>button{background:#eec46a!important;color:#211c15!important;border-color:#eec46a!important}
/* Trial (5 Nov): the word Done is black; only the tick circles are green */
.j-lib .jl-done-n,.j-lib .jl-unit .jl-tx .jl-done,.j-lib .jl-lesson.done .jl-tx span,.j-lib .jl-lesson.done small{color:#27201c!important}
.j-lib .jl-what+.jl-list,.j-lib .jl-what~.jl-list{margin-top:18px!important}

/* Trial (5 Nov): the sheet behind a result in the journal */
.jy-res small{display:block;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#93641f}
.jy-res .jy-res-big{margin:6px 0 2px;font-family:var(--jn-hand);font-size:1.625rem;line-height:1.15;color:#27201c}
.jy-res .jy-res-n{margin:0 0 14px;font-size:.875rem;color:#5c5148}
.jy-res h3{margin:14px 0 8px;font-size:1rem}
.jy-ans{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.jy-ans li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:#fdf1d8}
.jy-ans span{font-size:.875rem;line-height:1.35;color:#3d342d}
.jy-ans b{font-size:.8125rem;color:#93641f}
.j-notes button.jy-tile{width:100%;font:inherit;text-align:left;cursor:pointer}
.jy-res h3{font-family:inherit!important;font-weight:700!important;color:#27201c}
.jy-res .jn-h2{margin:16px 0 10px!important;font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-size:17px!important;font-weight:700!important;color:#27201c}

/* Trial (5 Nov): full-screen photo from the journal */
#jn-lightbox{position:fixed;inset:0;z-index:100001;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 56px) 16px calc(env(safe-area-inset-bottom,0px) + 24px);background:rgba(20,15,11,.94);cursor:zoom-out;animation:jnLbIn .2s ease-out both}
#jn-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:18px}
#jn-lightbox button{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(254,252,248,.14);color:#fefcf8;cursor:pointer;display:grid;place-items:center}
#jn-lightbox p{margin:0;color:#fefcf8;font-size:.875rem;font-weight:600}
@keyframes jnLbIn{from{opacity:0}to{opacity:1}}
/* Trial (5 Nov): at the end of Home Pip turns around to face the page when he stops */
.j-home .jh-endwalk b{transform:scaleX(-1)!important}

#jn-lightbox img{cursor:default}
#jn-lightbox .lb-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px}
#jn-lightbox .lb-p,#jn-lightbox .lb-n{position:absolute;top:50%;transform:translateY(-50%)}
#jn-lightbox .lb-p{left:10px}#jn-lightbox .lb-n{right:10px;top:50%!important}
#jn-lightbox .lb-p:disabled,#jn-lightbox .lb-n:disabled{opacity:.25;cursor:default}
/* Trial (5 Nov): All photos, a page of every happy photo by month */
#jn-allph{position:fixed;inset:0;z-index:100000;overflow-y:auto;background:#fefcf8;padding:calc(env(safe-area-inset-top,0px) + 16px) max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 32px) max(20px,env(safe-area-inset-left,0px));box-sizing:border-box}
#jn-allph .ap-top{display:flex;align-items:center;gap:10px;max-width:560px;margin:0 auto}
#jn-allph .ap-back{width:40px;height:40px;border:0;background:none;color:#27201c;cursor:pointer;display:grid;place-items:center;margin-left:-8px}
#jn-allph .home-hello{margin:0}
#jn-allph .ap-n{max-width:560px;margin:4px auto 0;color:#5c5148;font-size:.9375rem}
#jn-allph .jn-h2{max-width:560px;margin:22px auto 10px!important;font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-size:17px!important;font-weight:700!important}
#jn-allph .ap-grid{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#jn-allph .ap-ph{aspect-ratio:1/1;max-width:100%;border:0;border-radius:12px;background:#efe6d6 center/cover no-repeat;cursor:zoom-in;padding:0}
.j-notes .jn-allph-go{margin:2px 0 8px;font-size:.8125rem}

.j-notes .jn-allph-line{margin:2px 0 14px;font-size:.875rem}
/* the All photos title is the same as the All topics title */
#jn-allph h1.home-hello{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-size:34px!important;font-weight:600!important;letter-spacing:-.68px!important;line-height:34px!important;color:#27201c}
#jn-allph h1.home-hello em{font-style:normal!important;font-family:inherit!important;box-shadow:inset 0 -17px 0 rgba(238,196,106,.55)}
/* Trial (5 Nov): without Pip, In short is a sticky note with lines and the text handwritten, like the notes in the journal */
.j-lib .jl-what:not(.jl-what-pip){background-color:#fce5bb!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='32'%3E%3Crect y='31' width='8' height='1' fill='%23f0d59a'/%3E%3C/svg%3E")!important;background-position:0 14px!important;padding:14px 18px 16px!important;border-radius:20px!important}
.j-lib .jl-what:not(.jl-what-pip) p{font-family:'Caveat','Bradley Hand','Segoe Print',cursive!important;font-size:1.5rem!important;font-weight:500!important;line-height:32px!important;letter-spacing:0!important;color:#27201c!important;margin:0!important}
.j-lib .jl-what:not(.jl-what-pip) small{line-height:32px}
.j-lib .jl-what+.jl-list,.j-lib .jl-what~.jl-list{margin-top:16px!important}
/* Trial (5 Nov): In short is quieter, so the lessons lead the page */
.j-lib .jl-what-pip p{font-size:.875rem!important;line-height:1.45!important;font-weight:600!important}
.j-lib .jl-what-pip{padding:12px 16px 12px 10px!important}
.j-lib .jl-what-pip .jl-pip{width:58px!important;height:78px!important}
.j-lib .jl-what:not(.jl-what-pip){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='26'%3E%3Crect y='25' width='8' height='1' fill='%23f0d59a'/%3E%3C/svg%3E")!important;background-position:0 10px!important;padding:10px 16px 12px!important}
.j-lib .jl-what:not(.jl-what-pip) p{font-size:1.1875rem!important;line-height:26px!important}
.j-lib .jl-what:not(.jl-what-pip) small{line-height:26px}
/* Trial (5 Nov): the chapter photo says what you will learn, like the chapter card on Home; In short is gone */
.j-lib .jl-head .jh-cap .jl-learn{display:block;margin-top:6px;font-size:.9375rem;line-height:1.4;font-weight:500;color:#fefcf8;text-shadow:0 1px 8px rgba(20,14,10,.55)}
.j-lib .jl-head{position:relative}
.j-lib .jl-head .jl-say-cov{position:absolute;top:12px;right:12px;width:34px;height:34px;background:rgba(254,252,248,.92)!important;color:#93641f}
.j-lib .jl-head+.jl-list,.j-lib .jl-head~.jl-list{margin-top:16px!important}

/* Trial (5 Nov): the chapter photo is the Home chapter card, a little smaller */
.j-lib .jl-head.jl-head-cov{position:relative;height:360px!important;min-height:0!important;border-radius:28px!important;overflow:hidden;padding:0!important;background-size:cover!important;background-position:center!important}
.j-lib .jl-head.jl-head-cov::before{background:none!important}
.j-lib .jl-head.jl-head-cov .jc-fade{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.25' stop-color='%23211c15' stop-opacity='0'/%3E%3Cstop offset='0.6' stop-color='%23211c15' stop-opacity='.62'/%3E%3Cstop offset='1' stop-color='%23211c15' stop-opacity='.92'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='10' height='100' fill='url(%23g)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.j-lib .jl-head.jl-head-cov .jh-cap{position:absolute!important;left:20px!important;right:20px!important;bottom:20px!important;top:auto!important;display:flex!important;flex-direction:column;gap:6px;padding:0!important;background:none!important}
.j-lib .jl-head.jl-head-cov .jh-cap small{font-size:13px!important;font-weight:700!important;color:#f6dcae!important;letter-spacing:normal!important;text-transform:none!important}
.j-lib .jl-head.jl-head-cov .jh-cap b{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-size:30px!important;font-weight:700!important;line-height:1.04!important;color:#fefcf8!important}
.j-lib .jl-head.jl-head-cov .jh-cap b em{font-style:normal;box-shadow:inset 0 -11.4px 0 rgba(238,196,106,.7)}
.j-lib .jl-head.jl-head-cov .jh-cap .jl-learn{margin-top:0!important;font-size:15px!important;line-height:21px!important;font-weight:400!important;color:#fefcf8!important;text-shadow:none!important}

/* same size, type and padding as the Home chapter card */
.j-lib .jl-head.jl-head-cov{height:min(430px,56vh)!important;min-height:340px!important;margin-top:16px!important}
.j-lib .jl-head.jl-head-cov .jh-cap b{font-size:34px!important;line-height:35.36px!important}
.j-lib .jl-head.jl-head-cov .jh-cap b em{box-shadow:inset 0 -12.92px 0 rgba(238,196,106,.7)!important}
.j-lib .jl-head.jl-head-cov .jh-cap .jl-meta{display:block;margin-top:12px;font-size:13px;font-weight:700;line-height:20px;color:#fefcf8}
.j-lib .jl-head.jl-head-cov .jh-cap .jl-meta{margin-top:6px!important}
/* Trial (5 Nov): the small ticks beside right answers in a lesson summary are green; the answers themselves stay honey */
main.calm-lesson .cl3-sum .ok b{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%236db083' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}

/* a lesson note can be tapped to open its chapter */
.j-notes article.jn-note.jn-go{cursor:pointer}

/* Trial (5 Nov): sorting games, cards into two or four piles */
main.calm-lesson .jg-piles4{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
main.calm-lesson .jg-piles4 .cl-opt,main.calm-lesson .cl-two .cl-opt{text-align:center;justify-content:center}
main.calm-lesson .jg-piles4 .cl-opt::before,main.calm-lesson .cl-two .cl-opt::before{display:none!important}
main.calm-lesson .jg-sortcard .cl-scene{font-size:1.125rem;line-height:1.4}
main.calm-lesson .cl3-sum div:last-child span{font-weight:400}
/* Trial (5 Nov): room between the lesson label and the photo under it */
main.calm-lesson .cl-k+.jg-qpic,main.calm-lesson .cl-k+.jg-ph{margin-top:12px!important}
main.calm-lesson .jg-qpic{margin-bottom:16px!important}
main.calm-lesson .jg-qpic{margin-bottom:12px!important}
main.calm-lesson .jg-qpic+.jg-case{margin-top:0!important}

/* Trial (5 Nov): Pip pops in once per screen, not again when you answer */
main.calm-lesson .pip-deco.still i{animation:none!important}
/* Trial (5 Nov): no black story box; a honey line on the left with the story next to it */
main.calm-lesson.jq-dark .jg-case,main.calm-lesson .jg-case{background:none!important;border-left:4px solid #eec46a;border-radius:0!important;padding:4px 0 4px 16px!important;color:#27201c!important}
main.calm-lesson.jq-dark .jg-case p,main.calm-lesson .jg-case p{color:#27201c!important}
/* Trial (5 Nov): every story box in a lesson has the honey line on the left, no filled box */
main.calm-lesson .jg-belief{background:none!important;border:0!important;border-left:4px solid #eec46a!important;border-radius:0!important;padding:4px 0 4px 16px!important;box-shadow:none!important}
main.calm-lesson .jg-belief p{color:#27201c!important}
/* Trial (5 Nov): less room between the progress bar and the lesson label */
main.calm-lesson .cl-top{padding-bottom:4px!important}
main.calm-lesson .cl-screen{padding-top:6px!important}

/* Trial (6 Nov): livelier games. Every move plays once, at most half a second, nothing loops */
@keyframes jgCardIn{from{opacity:0;transform:translateX(28px) rotate(1.5deg)}to{opacity:1;transform:none}}
@keyframes jgRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes jgRight{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes jgWrong{0%,100%{transform:none}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@keyframes jgTick{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes jgPress{0%{transform:scale(1)}50%{transform:scale(.96)}100%{transform:scale(1)}}
/* a new screen: photo, story and question rise in, one after the other */
main.calm-lesson:not(.jg-again) .jg-qpic,main.calm-lesson:not(.jg-again) .jg-ph{animation:jgRise .4s cubic-bezier(.2,.8,.2,1) both}
main.calm-lesson:not(.jg-again) .jg-case,main.calm-lesson:not(.jg-again) .jg-belief{animation:jgRise .4s cubic-bezier(.2,.8,.2,1) .06s both}
main.calm-lesson:not(.jg-again) .cl-screen>.cl-h{animation:jgRise .4s cubic-bezier(.2,.8,.2,1) .12s both}
/* tapping an answer: a soft press; then the right one gives a small lift, a wrong one a short shake */
main.calm-lesson .cl-opt:not(:disabled):active,main.calm-lesson .jg-chip:not(:disabled):active{animation:jgPress .18s ease-out}
main.calm-lesson .cl-opt.ok{animation:jgRight .38s ease-out 1 both!important}
main.calm-lesson .cl-opt.no{animation:jgWrong .32s ease-out 1 both!important}
/* the explanation slides up under the answers */
main.calm-lesson .cl-fb{animation:jgRise .35s cubic-bezier(.2,.8,.2,1) .08s both}
/* sorting games: each new card slides in, the right or not line pops, and the summary ticks pop in one by one */
main.calm-lesson .jg-sortcard,main.calm-lesson .cl-card{animation:jgCardIn .36s cubic-bezier(.2,.8,.2,1) both}
main.calm-lesson .cl-mini{animation:jgRise .3s ease-out both}
main.calm-lesson .cl3-sum .ok b{animation:jgTick .3s cubic-bezier(.2,.8,.2,1) both}
main.calm-lesson .cl3-sum div:nth-child(2) b{animation-delay:.06s}main.calm-lesson .cl3-sum div:nth-child(3) b{animation-delay:.12s}main.calm-lesson .cl3-sum div:nth-child(4) b{animation-delay:.18s}main.calm-lesson .cl3-sum div:nth-child(5) b{animation-delay:.24s}main.calm-lesson .cl3-sum div:nth-child(6) b{animation-delay:.3s}main.calm-lesson .cl3-sum div:nth-child(7) b{animation-delay:.36s}main.calm-lesson .cl3-sum div:nth-child(8) b{animation-delay:.42s}
/* the progress bar fills smoothly */
main.calm-lesson .cl-bar i{transition:width .45s cubic-bezier(.2,.8,.2,1)!important}
@media (prefers-reduced-motion:reduce){main.calm-lesson *{animation:none!important;transition:none!important}}
main.calm-lesson.jg-again .cl-card,main.calm-lesson.jg-again .jg-sortcard:not(.jg-new){animation:none!important}

/* Trial (6 Nov): in a sorting game the card flies toward the pile you tapped */
main.calm-lesson .jg-sortcard.fly-l{animation:none!important;transition:transform .3s cubic-bezier(.5,0,.75,0),opacity .3s ease-in;transform:translate(-60%,90px) rotate(-12deg) scale(.6);opacity:0}
main.calm-lesson .jg-sortcard.fly-r{animation:none!important;transition:transform .3s cubic-bezier(.5,0,.75,0),opacity .3s ease-in;transform:translate(60%,90px) rotate(12deg) scale(.6);opacity:0}
main.calm-lesson .jg-sortcard.fly-l.fly-d{transform:translate(-55%,150px) rotate(-12deg) scale(.55)}
main.calm-lesson .jg-sortcard.fly-r.fly-d{transform:translate(55%,150px) rotate(12deg) scale(.55)}

/* Trial (6 Nov): swipe and drag in sorting games */
main.calm-lesson .jg-sortcard{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
main.calm-lesson .jg-sortcard:active{cursor:grabbing}
main.calm-lesson .jg-swipe-hint{margin:10px 0 0;text-align:center;font-size:.8125rem;color:#93641f}
main.calm-lesson [data-action^="jg-sort:"].jg-target{background:#fce5bb!important;border-color:#eec46a!important;transform:scale(1.04);transition:transform .15s}
main.calm-lesson .jg-sortcard{position:relative;z-index:6}
main.calm-lesson .cl-actions .btn:disabled{background:#ebe4d8!important;color:#8a7f72!important;box-shadow:none!important;cursor:default}

/* Trial (6 Nov): hold to breathe */
.jx-breath{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px 0 6px}
.jx-hold{position:relative;width:210px;height:210px;border:0;border-radius:50%;background:none;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;display:grid;place-items:center;font:inherit}
.jx-hold i{position:absolute;inset:0;border-radius:50%;background:#fce5bb;box-shadow:inset 0 0 0 2px #eec46a;transform:scale(.55);transition:transform 6s cubic-bezier(.3,.1,.3,1)}
.jx-hold.in i{transform:scale(1);transition:transform 4s cubic-bezier(.3,.1,.3,1)}
.jx-hold.out i{transform:scale(.55)}
.jx-hold span{position:relative;max-width:150px;text-align:center;font-size:.9375rem;font-weight:600;line-height:1.3;color:#27201c}
.jx-hold:disabled{cursor:default}
.jx-bcount{margin:0;font-size:.875rem;color:#93641f;font-weight:600}

/* Trial (6 Nov): scratch to reveal */
main.calm-lesson .jg-scratch{position:relative;margin-top:6px;border-radius:16px}
main.calm-lesson .jg-scratch canvas{position:absolute;inset:-6px -8px;width:calc(100% + 16px);height:calc(100% + 12px);border-radius:16px;touch-action:none;cursor:pointer;transition:opacity .45s ease}
main.calm-lesson .jg-scratch.open canvas{opacity:0;pointer-events:none}
main.calm-lesson .jg-scratch .jg-scratch-show{position:relative;margin-top:10px;font-size:.8125rem}
main.calm-lesson .jg-scratch.open .jg-scratch-show{visibility:hidden}

main.calm-lesson .jg-scratch{margin-top:16px!important}
main.calm-lesson .jg-scratch canvas{inset:-8px -10px!important;width:calc(100% + 20px)!important;height:calc(100% + 16px)!important}
main.calm-lesson .jg-scratch+.jg-scratch-show{display:block;margin:16px 0 0;font-size:.8125rem}

/* Trial (6 Nov): drag into order */
main.calm-lesson .jg-order{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
main.calm-lesson .jg-ord{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 12px;border:1.5px solid #e9e2d6;border-radius:18px;background:#fff;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;animation:jgRise .35s cubic-bezier(.2,.8,.2,1) both}
main.calm-lesson .jg-ord:nth-child(2){animation-delay:.06s}main.calm-lesson .jg-ord:nth-child(3){animation-delay:.12s}
main.calm-lesson .jg-ord.lift{position:relative;z-index:5;cursor:grabbing;box-shadow:0 10px 24px rgba(39,32,28,.14);border-color:#eec46a;animation:none}
main.calm-lesson .jg-ord-n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fce5bb;font-weight:700;font-size:.875rem;color:#27201c}
main.calm-lesson .jg-ord-t{flex:1;min-width:0;font-size:1rem;line-height:1.4;color:#27201c}
main.calm-lesson .jg-ord-t small{display:block;font-size:.75rem;font-weight:700;color:#93641f;margin-bottom:2px}
main.calm-lesson .jg-ord-grip{flex:none;align-self:center;width:16px;height:2px;margin-bottom:12px;border-radius:1px;background:#cbbfa9;box-shadow:0 6px 0 #cbbfa9,0 12px 0 #cbbfa9}
main.calm-lesson .jg-order.checked .jg-ord{cursor:default}
main.calm-lesson .jg-order.checked .jg-ord.ok .jg-ord-n{background:#6db083;color:#fefcf8}

/* the scratch layer lines up with the text, the photo and the heading */
main.calm-lesson .jg-scratch canvas{inset:0!important;width:100%!important;height:100%!important;border-radius:14px!important}
main.calm-lesson .jg-scratch{margin-top:14px!important;min-height:96px}
main.calm-lesson .jg-scratch>.cl-sub{margin:0!important;padding:4px 0}
main.calm-lesson .jg-scratch+.jg-scratch-show{margin:12px 0 0!important}main.calm-lesson .jg-scratch-show+.cl-src{margin-top:8px!important}

/* Trial (6 Nov): the breathing flower. Six petals open and turn while you breathe in, close while you breathe out; the count runs in the middle */
.jx-hold i{display:none}
.jx-flower{position:absolute;inset:0;display:block;transform:rotate(0deg) scale(.5);transition:transform 6s cubic-bezier(.35,.1,.3,1)}
.jx-flower i{display:block!important;position:absolute;left:50%;top:50%;width:46%;height:46%;margin:-23% 0 0 -23%;border-radius:50%;background:rgba(238,196,106,.38);box-shadow:inset 0 0 0 1.5px rgba(214,165,70,.45);transform:rotate(var(--r)) translateY(0);transition:transform 6s cubic-bezier(.35,.1,.3,1)}
.jx-hold.in .jx-flower{transform:rotate(60deg) scale(1);transition:transform 4s cubic-bezier(.35,.1,.3,1)}
.jx-hold.in .jx-flower i{transform:rotate(var(--r)) translateY(-27%);transition:transform 4s cubic-bezier(.35,.1,.3,1)}
.jx-pip{position:absolute;left:50%;top:50%;width:64px;height:72px;margin:-40px 0 0 -32px;background:url(assets/landing/mascot-calm.png) center/contain no-repeat;transform:scale(.8);transition:transform 6s cubic-bezier(.35,.1,.3,1)}
.jx-hold.in .jx-pip{transform:scale(1.15);transition:transform 4s cubic-bezier(.35,.1,.3,1)}
.jx-num{position:absolute;left:0;right:0;top:50%;margin-top:-18px;font:700 30px "Bricolage Grotesque","Hanken Grotesk",sans-serif;color:#93641f;text-align:center;pointer-events:none}
.jx-hold:has(.jx-pip) .jx-num{margin-top:34px;font-size:22px}
.jx-hold span{position:absolute;left:0;right:0;bottom:-40px;margin:0 auto;max-width:240px}
.jx-breath{margin-bottom:44px!important}
@media (prefers-reduced-motion:reduce){.jx-flower,.jx-flower i,.jx-pip{transition:none!important}}
.jx-hold span{bottom:-34px!important}
.jx-breath .jx-bcount{margin-top:46px!important}
.jx-breath{margin-bottom:18px!important}
.jx-hold:has(.jx-pip) .jx-num{margin-top:52px!important;font-size:20px!important}.jx-hold.in .jx-pip{transform:translateY(-6px) scale(1.12)!important}
main.calm-lesson .cl-top>.icon-button:first-child{order:1!important}main.calm-lesson .cl-top>.cl-bar{order:2!important}main.calm-lesson .cl-top>.icon-button:last-child,main.calm-lesson .cl-top>.icon-button[aria-label="Close"]{order:3!important}

/* Trial (6 Nov): leaves on a stream */
.jx-stream{position:relative;height:150px;margin:14px 0 10px;border-radius:20px;overflow:hidden;background:#eaf0ea}
.jx-stream>i{position:absolute;left:-10%;width:120%;height:2px;border-radius:2px;background:rgba(95,122,74,.18);animation:jxWave 9s ease-in-out 1 both}
.jx-stream .w1{top:34%}.jx-stream .w2{top:58%;animation-delay:.6s}.jx-stream .w3{top:80%;animation-delay:1.2s}
@keyframes jxWave{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.jx-leaf{position:absolute;top:34px;left:-170px;width:150px;height:75px;animation:jxFloat 7s cubic-bezier(.35,.1,.4,1) 1 forwards}
.jx-leaf svg{position:absolute;inset:0}
.jx-leaf b{position:absolute;left:22px;right:22px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;line-height:1.2;color:#2f3f24;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@keyframes jxFloat{0%{left:-170px;transform:translateY(0) rotate(-4deg);opacity:0}10%{opacity:1}35%{transform:translateY(14px) rotate(3deg)}65%{transform:translateY(-6px) rotate(-3deg)}90%{opacity:1}100%{left:calc(100% + 20px);transform:translateY(10px) rotate(4deg);opacity:0}}
.jx-leafin{display:flex;flex-direction:column;gap:10px}
.jx-leafin .btn{align-self:stretch}
/* Trial (6 Nov): the good things jar */
.jx-jar{position:relative;width:120px;height:150px;margin:6px auto 4px}
.jx-jar svg{position:absolute;inset:0}
.jx-lights{position:absolute;left:26px;right:26px;bottom:10px;top:46px;overflow:hidden;border-radius:0 0 14px 14px}
.jx-lights i{position:absolute;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle,#fff3c8 0,#eec46a 55%,rgba(238,196,106,0) 72%);box-shadow:0 0 10px rgba(238,196,106,.9)}
.jx-lights i.drop{animation:jxDrop .7s cubic-bezier(.3,1.4,.5,1) 1 both}
@keyframes jxDrop{from{transform:translateY(-110px);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
.jx-jarn{text-align:center;margin:0 0 8px!important}
@media (prefers-reduced-motion:reduce){.jx-leaf,.jx-lights i,.jx-stream>i{animation:none!important}}

/* Trial (6 Nov): box breathing */
.jx-box{display:flex;flex-direction:column;align-items:center;gap:14px;margin:14px 0 6px}
.jx-sq{position:relative;width:200px;height:200px;border:2.5px solid #eec46a;border-radius:18px;background:#fdf6e6;display:grid;place-items:center}
.jx-phase{font:700 20px "Bricolage Grotesque","Hanken Grotesk",sans-serif;color:#27201c}
.jx-bdot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#eec46a;box-shadow:0 0 0 6px rgba(238,196,106,.25);left:0;top:0}
.jx-bdot.go{transition:left 4s linear,top 4s linear}
.jx-bdot.at-tl{left:0;top:0}.jx-bdot.at-tr{left:100%;top:0}.jx-bdot.at-br{left:100%;top:100%}.jx-bdot.at-bl{left:0;top:100%}
/* squeeze and let go */
.jx-ring{position:absolute;inset:14px;border-radius:50%;border:16px solid #eec46a;background:#fdf1d8;transition:inset 1.6s cubic-bezier(.3,.1,.3,1),border-width 1.6s}
.jx-sqz.in .jx-ring{inset:52px;border-width:26px;transition:inset 2s cubic-bezier(.3,.1,.3,1),border-width 2s}
.jx-sqz.out .jx-ring{transition:inset 3s cubic-bezier(.2,.8,.2,1),border-width 3s}
/* five things */
.jx-senses{text-align:center;margin:12px 0 6px}
.jx-sense-q{margin:0 0 14px;font:700 20px "Bricolage Grotesque","Hanken Grotesk",sans-serif;color:#27201c}
.jx-dots{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;min-height:48px}
.jx-dots i{width:46px;height:46px;border-radius:50%;border:2px dashed #e2c58b;background:#fefcf8;cursor:pointer;transition:background .25s,transform .25s}
.jx-dots i.on{border:2px solid #eec46a;background:#eec46a;transform:scale(1.08)}
/* Home stories */
.j-home .jh-col-l>.jh-stories{grid-column:1/-1!important;order:0;margin:4px 0 2px}
.j-home .jh-stories .jn-h2{margin:0 0 10px!important;font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-size:17px!important}
.jh-st-row{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.jh-st-row::-webkit-scrollbar{display:none}
.jh-st{flex:none;width:74px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;cursor:pointer}
.jh-st span{display:block;width:66px;height:66px;border-radius:50%;background:#efe6d6 center/cover no-repeat;box-shadow:0 0 0 3px #fefcf8,0 0 0 5.5px #eec46a}
.jh-st.done span{box-shadow:0 0 0 3px #fefcf8,0 0 0 5.5px #d9d1c4;opacity:.75}
.jh-st small{font-size:11.5px;line-height:1.25;text-align:center;color:#3d342d}
.jh-st-all span{display:grid!important;place-items:center;background:#fdf1d8!important;font-size:22px;color:#93641f;box-shadow:0 0 0 3px #fefcf8,0 0 0 5.5px #f0e2c4}
.j-home .jh-stories .jn-h2{font-weight:700!important;color:#27201c!important}.j-home .jh-stories .jn-h2 em{font-style:normal}.jh-st-row{padding:7px 4px 6px!important}
.jx-dots{margin-bottom:14px}.jx-senses .jx-bcount{margin-top:4px}

/* Trial (6 Nov): leaves on a stream, take two. A real stream photo; the worry is a small paper note that drifts away into the distance, rocks a little and fades */
.jx-stream{height:230px!important;background:#3b3229 url(assets/jx/stream.jpg) center 62%/cover no-repeat!important;border-radius:22px!important}
.jx-stream>i{display:none!important}
.jx-leaf{position:absolute!important;left:50%!important;top:auto!important;bottom:18px;width:auto!important;height:auto!important;max-width:200px;padding:9px 13px;border-radius:10px;background:#fefcf8;box-shadow:0 6px 16px rgba(20,14,10,.28);transform-origin:50% 100%;animation:jxAway 9s cubic-bezier(.25,.1,.3,1) 1 forwards!important}
.jx-leaf svg{display:none!important}
.jx-leaf b{position:static!important;transform:none!important;display:block!important;font:600 13px/1.3 "Hanken Grotesk",system-ui,sans-serif!important;color:#27201c!important;text-align:center;-webkit-line-clamp:3}
@keyframes jxAway{0%{transform:translate(-50%,30px) scale(1) rotate(-2deg);opacity:0}8%{transform:translate(-50%,0) scale(1) rotate(-2deg);opacity:1}30%{transform:translate(calc(-50% + var(--x)),-40px) scale(.82) rotate(2deg)}55%{transform:translate(calc(-50% - var(--x)),-80px) scale(.6) rotate(-2deg);opacity:.95}80%{transform:translate(calc(-50% + var(--x)),-108px) scale(.42) rotate(1deg);opacity:.6}100%{transform:translate(-50%,-124px) scale(.3) rotate(0);opacity:0}}
/* Trial (6 Nov): small exercises as full-screen stories */
#jx-story{position:fixed;inset:0;z-index:100002;background:#211c15;display:flex;flex-direction:column;animation:jxsIn .3s ease-out both}
@keyframes jxsIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
#jx-story .jxs-bg{position:absolute;inset:0;background:#3b3229 center/cover no-repeat}
#jx-story .jxs-top{position:relative;z-index:3;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 0}
#jx-story .jxs-bars{display:flex;gap:4px}
#jx-story .jxs-bars i{flex:1;height:3px;border-radius:2px;background:rgba(254,252,248,.45);overflow:hidden;position:relative;box-shadow:0 1px 4px rgba(20,14,10,.25)}
#jx-story .jxs-bars i.full{background:#fefcf8}
#jx-story .jxs-bars i.now::after{content:"";position:absolute;inset:0;background:#fefcf8;transform-origin:left;animation:jxsBar .6s ease-out both}
@keyframes jxsBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#jx-story .jxs-head{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
#jx-story .jxs-head b{font:700 20px "Bricolage Grotesque","Hanken Grotesk",sans-serif;color:#fefcf8;text-shadow:0 1px 10px rgba(20,14,10,.6)}
#jx-story .jxs-x{width:40px;height:40px;border:0;border-radius:50%;background:rgba(20,14,10,.3);color:#fefcf8;display:grid;place-items:center;cursor:pointer}
#jx-story .jxs-prev,#jx-story .jxs-next{position:absolute;top:100px;height:24%;width:32%;z-index:2;border:0;background:none;cursor:pointer}
#jx-story .jxs-prev{left:0}#jx-story .jxs-next{right:0}
#jx-story .jxs-card{position:relative;z-index:3;margin-top:auto;max-height:66%;overflow-y:auto;background:#fefcf8;border-radius:28px 28px 0 0;padding:22px 20px calc(env(safe-area-inset-bottom,0px) + 18px);box-sizing:border-box;animation:jxsCard .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes jxsCard{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
#jx-story .jxs-card .jx-sheet{max-width:520px;margin:0 auto}
#jx-story .jxs-card .ck-note{margin-top:0}
#jx-story .jx-stream{display:none}
#jx-story .jxs-float{position:absolute;left:0;right:0;top:0;bottom:66%;z-index:1;pointer-events:none;overflow:hidden}
#jx-story .jxs-float .jx-leaf{bottom:14px}
body.jx-story-on{overflow:hidden}
body.jx-story-on #j-new,body.jx-story-on #j-skip,body.jx-story-on #j-skipq,body.jx-story-on #j-preview-tag{display:none!important}
#jx-story .jxs-bg[style*="stream-"]{background-position:center 78%!important}
#jx-story .jxs-float{top:auto!important;height:46%}
#jx-story .jxs-float .jx-leaf{bottom:22px!important}
#jx-story .jx-leaf{animation:jxAwayS 9s cubic-bezier(.25,.1,.3,1) 1 forwards!important}
@keyframes jxAwayS{0%{transform:translate(-50%,24px) scale(1) rotate(-2deg);opacity:0}8%{transform:translate(-50%,0) scale(1) rotate(-2deg);opacity:1}35%{transform:translate(calc(-50% + var(--x)),-24px) scale(.72) rotate(2deg)}65%{transform:translate(calc(-50% - var(--x)),-48px) scale(.5) rotate(-2deg);opacity:.9}100%{transform:translate(-50%,-66px) scale(.28) rotate(0);opacity:0}}
/* Trial (6 Nov): All topics is the same size as the other Discover headings */
.j-lib h1.jl-disc-h{font-size:1.375rem!important;line-height:1.25!important;letter-spacing:normal!important;margin-top:8px!important}
.j-lib h1.jl-disc-h em{box-shadow:inset 0 -.36em 0 rgba(238,196,106,.55)!important}
/* Trial (6 Nov): the story card floats with room around it, light cream */
#jx-story .jxs-card{margin:0 12px calc(env(safe-area-inset-bottom,0px) + 12px)!important;border-radius:26px!important;background:#fdf8ee!important;padding:24px 22px 20px!important;box-shadow:0 10px 30px rgba(20,14,10,.18)}
#jx-story .jxs-card .jx-in{background:#fffdf8}
/* the worry rises into the sky in one soft S, then fades */
#jx-story .jxs-float{height:auto!important;top:0!important}
#jx-story .jx-leaf{animation:jxSky 11s linear 1 forwards!important}
@keyframes jxSky{0%{transform:translate(-50%,20px) scale(1);opacity:0}6%{transform:translate(-50%,0) scale(1);opacity:1}
 15%{transform:translate(calc(-50% + 34px),-60px) scale(.95) rotate(3deg)}
 28%{transform:translate(calc(-50% + 10px),-130px) scale(.88) rotate(1deg)}
 41%{transform:translate(calc(-50% - 30px),-200px) scale(.8) rotate(-3deg)}
 54%{transform:translate(calc(-50% - 8px),-265px) scale(.72) rotate(-1deg);opacity:1}
 67%{transform:translate(calc(-50% + 26px),-325px) scale(.62) rotate(3deg);opacity:.9}
 80%{transform:translate(calc(-50% + 6px),-380px) scale(.52) rotate(1deg);opacity:.65}
 92%{transform:translate(calc(-50% - 16px),-425px) scale(.44) rotate(-2deg);opacity:.3}
 100%{transform:translate(calc(-50% - 22px),-450px) scale(.4) rotate(-2deg);opacity:0}}
/* or it burns: the paper glows, darkens and crumbles upward, a few embers rise */
#jx-story .jx-leaf.burn,.jx-leaf.burn{animation:jxBurn 2.8s ease-in 1 forwards!important;overflow:visible}
@keyframes jxBurn{0%{transform:translate(-50%,10px);opacity:0;background:#fefcf8}10%{transform:translate(-50%,0);opacity:1;background:#fefcf8;box-shadow:0 6px 16px rgba(20,14,10,.28)}
 35%{background:#f6d6a0;box-shadow:0 0 0 2px #f0a640,0 0 26px 6px rgba(240,140,40,.55)}
 60%{background:#b0662a;color:#fefcf8;box-shadow:0 0 0 2px #e06a22,0 0 34px 10px rgba(230,110,30,.6);transform:translate(-50%,-6px) scale(.96) rotate(-1deg)}
 85%{background:#3b2a1c;opacity:.7;transform:translate(-50%,-22px) scale(.8) rotate(2deg);box-shadow:0 0 18px 4px rgba(200,90,30,.35)}
 100%{background:#2a1e14;opacity:0;transform:translate(-50%,-40px) scale(.6) rotate(3deg);box-shadow:none}}
.jx-leaf.burn b{animation:jxBurnT 2.8s ease-in 1 forwards}
@keyframes jxBurnT{0%,40%{color:#27201c}60%{color:#fefcf8}100%{color:transparent}}
.jx-ember{position:absolute;bottom:50%;width:5px;height:5px;border-radius:50%;background:#f7a440;box-shadow:0 0 6px 2px rgba(247,140,40,.8);opacity:0;animation:jxEmber 1.6s ease-out 1 forwards}
@keyframes jxEmber{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-90px) scale(.3)}}
.jx-leafin .btn.secondary{background:#fefcf8!important;color:#27201c!important;border:1.5px solid #e2d6bf!important}
@media (prefers-reduced-motion:reduce){.jx-ember{display:none}}
/* the All photos link is small, bottom right */
.j-notes .jn-col-all{display:block;margin:8px 0 0 auto;font-size:.75rem!important;font-weight:600;color:#93641f!important}
.j-notes .jn-allph-line{display:flex;justify-content:flex-end;margin:-4px 0 10px}
#jx-story .jxs-card{margin:auto 12px calc(env(safe-area-inset-bottom,0px) + 12px)!important}
@keyframes jxBurn{0%{transform:translate(-50%,10px);opacity:0;background:#fefcf8}10%{transform:translate(-50%,0);opacity:1;background:#fefcf8;box-shadow:0 6px 16px rgba(20,14,10,.28)}
 35%{background:#f6d6a0;box-shadow:0 0 0 2px #f0a640,0 0 26px 6px rgba(240,140,40,.55)}
 60%{background:#c0702c;box-shadow:0 0 0 2px #e06a22,0 0 34px 10px rgba(230,110,30,.6);transform:translate(-50%,-6px) scale(.94) rotate(-1deg)}
 78%{background:#7a3f1a;opacity:.6;transform:translate(-50%,-20px) scale(.7) rotate(2deg);box-shadow:0 0 22px 6px rgba(220,100,30,.45)}
 100%{background:#7a3f1a;opacity:0;transform:translate(-50%,-34px) scale(.35) rotate(4deg);box-shadow:none}}
.jx-ember{width:7px!important;height:7px!important}
.j-notes .jn-collage .jn-col-all{margin:10px 2px 0 auto!important;padding:0!important;line-height:1.2}.j-notes .jn-collage{padding-bottom:14px!important}
/* Trial (6 Nov): the story is one full image; the exercise is its own card in the middle, a little see-through, no text on the photo and no text shadows */
#jx-story .jxs-head b{display:none}
#jx-story .jxs-head{justify-content:flex-end}
#jx-story .jxs-card{margin:auto 18px!important;max-height:74%;border-radius:28px!important;background:rgba(253,248,238,.86)!important;box-shadow:0 12px 34px rgba(20,14,10,.16)!important;padding:22px 20px 18px!important}
#jx-story .jxs-t{margin:0 0 8px;font:700 21px "Bricolage Grotesque","Hanken Grotesk",sans-serif;color:#27201c;text-shadow:none}
#jx-story *{text-shadow:none!important}
#jx-story .jx-in{background:rgba(255,253,248,.92)!important}
#jx-story .jxs-prev,#jx-story .jxs-next{top:90px;bottom:auto;height:16%}
/* Trial (6 Nov): no shadows in the stories at all */
#jx-story .jxs-card{box-shadow:none!important}
#jx-story .jxs-x{background:rgba(254,252,248,.9)!important;color:#27201c!important;box-shadow:none!important}
#jx-story .jx-leaf{box-shadow:none!important;border:1px solid #eadfcb}
#jx-story .jxs-bars i{box-shadow:none!important}
#jx-story .jxs-bars i{background:rgba(254,252,248,.55)}
#jx-story .jxs-bg[style*="sky-"]{background-position:center center!important}
/* the story card is smaller, a bit more see-through, with more room around it */
#jx-story .jxs-card{margin:auto 30px!important;padding:20px 18px 16px!important;background:rgba(253,248,238,.78)!important;max-height:70%}
#jx-story .jxs-t{font-size:19px!important}
#jx-story .jxs-prev,#jx-story .jxs-next{top:80px!important;bottom:0!important;height:auto!important;width:30px!important}
/* text fields in stories are 16px so a phone does not zoom in when you type */
#jx-story input,#jx-story textarea,.jx-sheet input,.jx-sheet textarea{font-size:16px!important}
/* Leaves on a stream: the card sits at the bottom, the sky above it is open for the worry to rise */
#jx-story.jxs-k-worry .jxs-card{margin:auto 18px calc(env(safe-area-inset-bottom,0px) + 18px)!important}
/* Trial (6 Nov): the card is less see-through */
#jx-story .jxs-card{background:rgba(253,248,238,.92)!important}
/* Trial (6 Nov): burning for real. The paper burns away from the bottom up, a flame line climbs with it, embers rise */
#jx-story .jx-leaf.burn,.jx-leaf.burn{background:transparent!important;border:0!important;box-shadow:none!important;animation:jxBurnHold 3.2s linear 1 forwards!important}
@keyframes jxBurnHold{0%{transform:translate(-50%,8px);opacity:0}8%{transform:translate(-50%,0);opacity:1}90%{opacity:1}100%{transform:translate(-50%,-6px);opacity:0}}
.jx-leaf.burn .jx-paper{position:absolute;inset:0;border-radius:10px;background:#fefcf8;border:1px solid #eadfcb;animation:jxPaper 3.2s cubic-bezier(.45,0,.6,1) 1 forwards}
.jx-leaf.burn b{position:relative!important;z-index:1;animation:jxPaperT 3.2s cubic-bezier(.45,0,.6,1) 1 forwards!important}
@keyframes jxPaper{0%,18%{clip-path:inset(0 0 0 0);background:#fefcf8}35%{background:#f7e4c2}100%{clip-path:inset(0 0 100% 0);background:#e9c58e}}
@keyframes jxPaperT{0%,18%{clip-path:inset(0 0 0 0);color:#27201c}100%{clip-path:inset(0 0 100% 0);color:#5a3a1c}}
.jx-leaf.burn .jx-flame{position:absolute;left:-6px;right:-6px;bottom:-10px;height:22px;z-index:2;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,#fff2b0 0,#ffb53a 30%,#f2651d 58%,rgba(200,60,20,0) 75%);filter:blur(1.5px);opacity:0;animation:jxFlame 3.2s cubic-bezier(.45,0,.6,1) 1 forwards}
.jx-leaf.burn .jx-flame::before,.jx-leaf.burn .jx-flame::after{content:"";position:absolute;bottom:40%;width:16px;height:26px;border-radius:50% 50% 45% 45%;background:radial-gradient(ellipse at 50% 80%,#fff2b0 0,#ffa632 45%,rgba(240,90,20,0) 72%);transform-origin:50% 100%}
.jx-leaf.burn .jx-flame::before{left:22%;animation:jxLick .5s ease-in-out 6 alternate}
.jx-leaf.burn .jx-flame::after{left:62%;height:20px;animation:jxLick .45s ease-in-out .15s 7 alternate}
@keyframes jxLick{from{transform:scaleY(.7) skewX(-6deg)}to{transform:scaleY(1.25) skewX(6deg)}}
@keyframes jxFlame{0%,14%{opacity:0;bottom:-10px}22%{opacity:1}100%{opacity:.2;bottom:calc(100% - 8px)}}
/* Trial (7 Nov): the check-in is the first story on Home */
.jh-st-feel span.pip{background-color:#fdf1d8!important;background-size:72%!important;background-position:center 70%!important}
#jx-story .jxs-feel{margin:18px 0 8px}
#jx-story .jxs-feel .ck-ends{display:flex;align-items:center;gap:14px}
#jx-story .jxs-feel .ck-range{flex:1}
/* Trial (7 Nov): a calmer Home. One job: what to do today */
.j-home.jh-lean .jh-col-l>.jh-note,.j-home.jh-lean .jh-pipth,.j-home.jh-lean .jh-col-r>.jh-note,.j-home.jh-lean .jh-col-r>.jh-photo,.j-home.jh-lean .jh-cov-p{display:none!important}
.j-home.jh-lean.jh-day-0 .jh-daily,.j-home.jh-lean.jh-day-1 .jh-tot{display:none!important}
.j-home.jh-lean .jh-track .jh-row,.j-home.jh-lean .jh-track-head small{display:none!important}
.j-home.jh-lean .jh-col-l>.jh-track{grid-column:1/-1!important;padding:16px 18px!important;gap:10px}
.j-home.jh-lean .jh-track .jn-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.jh-st-pip span.pip{background-color:#fdf1d8!important;background-size:62%!important;background-position:center 75%!important}
#jx-story .jxs-hand{font-size:1.6rem!important;line-height:1.2;margin:4px 0 10px;color:#27201c}
/* Trial (7 Nov): the daily quote story */
#jx-story .jxs-k-quote .jxs-t,#jx-story.jxs-k-quote .jxs-t{display:none}
#jx-story .jxs-quote{margin:4px 0 10px;font:700 26px/1.2 "Bricolage Grotesque","Hanken Grotesk",sans-serif;color:#27201c;letter-spacing:-.01em}
#jx-story .jxs-qby{margin:0 0 18px;font-size:.9375rem;font-weight:600;color:#93641f}
.jh-ask{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit}
.jh-ask-pip{flex:none;width:52px;height:52px;background:center/contain no-repeat}
.jh-stories .jh-ask .jn-h2{margin:0!important}
.jh-ask{gap:8px;padding-left:4px}
.jh-ask-pip{width:46px;height:52px;background-position:left center}
.jh-ask{display:block;padding-left:0;margin:0 0 14px;cursor:default}
.jh-ask-sl{margin-top:4px}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{height:min(560px,68vh)!important;min-height:420px}
/* Trial (6 Nov): week dots */
.jh-week{display:flex;justify-content:space-between;margin:10px 0 0;padding:0 2px}
.jh-wd{display:flex;flex-direction:column;align-items:center;gap:5px}
.jh-wd i{display:block;width:26px;height:26px;border-radius:50%;border:1.5px solid #e7dccb;background:#fefcf8;box-sizing:border-box}
.jh-wd small{font-size:11.5px;line-height:1.25;color:#8a7d70}
.jh-wd.now small{color:#27201c;font-weight:700}
/* Trial (6 Nov): Calm pad */
.jx-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 14px}
.jx-padc{aspect-ratio:1;width:100%;border-radius:50%;border:0;padding:0;background:rgba(39,32,28,.08);cursor:pointer;-webkit-tap-highlight-color:transparent}
.jx-padc.lit{animation:jx-padlit 2.4s ease-out}
@keyframes jx-padlit{0%{background:var(--pad);transform:scale(1.06)}25%{background:var(--pad);transform:scale(1)}100%{background:rgba(39,32,28,.08)}}
.jx-padsets{display:flex;gap:18px;margin:0 0 6px}
.jx-padsets .link-button{padding:4px 0;color:#8a7d70}
.jx-padsets .link-button.on{color:#27201c;text-decoration:underline;text-underline-offset:4px}
.jx-pad{max-width:240px;margin:6px auto 14px;gap:10px}
.jx-padsets{justify-content:center}
.jx-pad{width:100%;box-sizing:border-box}
@media (max-height:720px){.jx-pad{max-width:176px;gap:8px;margin:2px auto 10px}}
/* Trial (7 Nov): premium feeling card on Home */
.jh-ask{--feel:#a9c9a4;display:block;margin:0 0 18px!important;padding:18px 18px 14px!important;border-radius:24px;background:color-mix(in srgb,var(--feel) 26%,#fefcf8);transition:background-color .6s ease}
.jh-ask .jn-h2{margin:0!important}
.jh-ask .ck-ends{gap:14px;margin-top:4px}
.jh-ask .ck-range{height:40px}
.jh-ask .ck-range::-webkit-slider-runnable-track{height:10px;border:0;border-radius:10px;background:linear-gradient(90deg,#93add0,#d77a6c,#b8b0d8,#e0937a,#cfc3b2,#a9c9a4,#f2b27e,#eec46a)!important}
.jh-ask .ck-range::-moz-range-track{height:10px;border:0;border-radius:10px;background:linear-gradient(90deg,#93add0,#d77a6c,#b8b0d8,#e0937a,#cfc3b2,#a9c9a4,#f2b27e,#eec46a)}
.jh-ask .ck-range::-webkit-slider-thumb{width:30px;height:30px;margin-top:-10px;background:#fefcf8;border:4px solid var(--feel);box-shadow:0 1px 3px rgba(39,32,28,.18)}
.jh-ask .ck-range::-moz-range-thumb{width:24px;height:24px;background:#fefcf8;border:4px solid var(--feel)}
.jh-ask .ck-ends .ck-live{width:72px!important;height:84px!important}
.jh-ask .ck-ends .ck-pipw .ck-word.ck-small{font-size:.8125rem!important;font-weight:700;color:#27201c;text-transform:capitalize}
.jh-ask .ck-ends>.ck-word{color:#27201c;text-transform:capitalize}
.jh-ask-said{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 0}
.jh-ask-said .ck-note{margin:0}
.jh-ask-said .link-button{flex:none;padding:6px 0}
.jh-ask .jh-week{margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(39,32,28,.08)}
.jh-ask .jh-wd i{border-color:rgba(39,32,28,.12)}
.jh-ask .jh-wd small{color:#6b6158}
/* Trial (7 Nov): the lesson card is the clearest thing on Home */
.j-home .jh-cov-tx small{font-size:1rem}
.j-home .jh-cov-meta{flex-direction:column;align-items:stretch;gap:14px;margin-top:10px;font-size:.9375rem}
.j-home .jh-cov-go{display:block;padding:15px 18px;font-size:1.0625rem;font-weight:700;text-align:center}
/* Trial (7 Nov): warm feeling colors that sit with the photos; Today title */
.jh-ask{--feel:#cdb98e;background:color-mix(in srgb,var(--feel) 24%,#fefcf8)}
.jh-ask .ck-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,#a8968a,#bf6a4e,#c9a07f,#d98a5c,#d9cbb6,#cdb98e,#eda46c,#e8b84f)!important}
.jh-ask .ck-range::-moz-range-track{background:linear-gradient(90deg,#a8968a,#bf6a4e,#c9a07f,#d98a5c,#d9cbb6,#cdb98e,#eda46c,#e8b84f)}
.j-home .jh-today{align-items:baseline}
.j-home .jh-today .ck-date{margin:0;font-size:.875rem}
/* Trial (7 Nov): the bar is the app's honey; only the card color changes */
.jh-ask .ck-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,#e5b64f var(--p,71%),#fefcf8 var(--p,71%))!important;border:1.5px solid #ecdcbc;box-sizing:border-box}
.jh-ask .ck-range::-moz-range-track{background:#fefcf8;border:1.5px solid #ecdcbc}
.jh-ask .ck-range::-moz-range-progress{background:#e5b64f;height:10px;border-radius:10px}
.jh-ask .ck-range::-webkit-slider-thumb{margin-top:-11.5px;background:#e5b64f;border:4px solid #fefcf8}
.jh-ask .ck-range::-moz-range-thumb{background:#e5b64f;border:4px solid #fefcf8}
/* Trial (7 Nov): story names stay on one line; no note card on Home */
.jh-st small{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j-home .jh-col-l>.jh-note{display:none!important}
.j-home .jh-col-l>.jh-track{grid-column:1/-1!important}
/* Trial (7 Nov): Sacha's boat photo for Anchors and estimates */
.jp-anchors,:is(.j-home,.calm-lesson) .jp-anchors,main.calm-lesson .cl-done-ph.jp-anchors,main.calm-lesson .jg-ph.jp-anchors,.j-home .jh-cover.jp-anchors{background-image:url(assets/landing/ch-anchors-boat.jpg)!important}
.j-home .jh-cover.jp-anchors{background-position:center 62%!important}
/* Trial (7 Nov): the chapter photo runs edge to edge from the top; Today and the date sit on it in white */
.j-home{position:relative}
.j-home .jh-today{position:absolute;z-index:2;top:calc(22px + env(safe-area-inset-top,0px));left:20px;right:20px;margin:0!important;pointer-events:none;color:#fefcf8}
.j-home .jh-today .home-hello,.j-home .jh-today .ck-date{color:#fefcf8!important}
.j-home .jh-today .home-hello em{box-shadow:none}
.j-home .jh-today+.jh-grid{margin-top:0}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{width:calc(100% + 32px)!important;margin:calc(-22px - env(safe-area-inset-top,0px)) -16px 0!important;height:min(660px,80vh)!important;border-radius:0 0 28px 28px!important}
.j-home .jh-cover::after{content:"";position:absolute;inset:0 0 auto 0;height:34%;background:linear-gradient(180deg,rgba(33,28,21,.55),rgba(33,28,21,0));pointer-events:none}
.j-home .jh-cov-tx{z-index:1}
/* Trial (7 Nov): stamps on the chapter photo; title above the stories; boat sits above the text */
.j-home .jh-cov-stamps{display:flex;gap:4px;margin:2px 0 4px}
.j-home .jh-cov-stamps>*{flex:none;width:30px;height:auto}
.j-home .jh-col-l>.jh-track{display:none!important}
.jh-stories .jh-st-h{margin:0 0 10px!important}
.j-home .jh-cover.jp-anchors{background-size:auto 150%!important;background-position:center 100%!important}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{border-radius:0!important}
.j-home .jh-today .j-auth-brand{color:#fefcf8;font-size:1.125rem}
/* Trial (7 Nov): smaller logo, quieter Start, photo and feeling card fit one screen */
.j-home .jh-today .j-auth-brand{font-size:.875rem}
.j-home .jh-cov-meta{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;font-size:.8125rem}
.j-home .jh-cov-go{display:inline-block;padding:10px 18px;font-size:.875rem;font-weight:700}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{height:max(400px,calc(100svh - 372px - env(safe-area-inset-bottom,0px)))!important;min-height:0!important}
.j-home .jh-cov-tx{bottom:18px}
.jh-ask{padding:14px 16px 12px!important;margin:12px 0 18px!important}
.jh-ask .ck-ends .ck-live{width:56px!important;height:64px!important}
.jh-ask .ck-range{height:34px}
.jh-ask .jh-week{margin-top:8px;padding-top:10px}
.jh-ask .jh-wd i{width:22px;height:22px}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{height:max(340px,calc(100svh - 318px - env(safe-area-inset-bottom,0px)))!important}
/* Trial (7 Nov): back to a block, logo small above it */
.j-home .jh-today{position:static;margin:0 0 12px!important;color:inherit;pointer-events:auto}
.j-home .jh-today .j-auth-brand{color:#27201c!important;font-size:.75rem}
.j-home .jh-today .j-auth-brand .brand-com{color:#d9a43c!important}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{width:100%!important;margin:0!important;border-radius:28px!important;height:max(340px,calc(100svh - 372px - env(safe-area-inset-bottom,0px)))!important}
.j-home .jh-cover::after{display:none}
/* the boat: the Home photo is cut so the boat sits above the text */
.jp-anchors,:is(.j-home,.calm-lesson) .jp-anchors,main.calm-lesson .cl-done-ph.jp-anchors,main.calm-lesson .jg-ph.jp-anchors{background-image:url(assets/landing/ch-anchors-boat2.jpg)!important}
.j-home .jh-cover.jp-anchors{background-image:url(assets/landing/ch-anchors-boat2-home.jpg)!important;background-size:cover!important;background-position:46% 0!important}
/* Trial (7 Nov): breathing block on Home */
.jh-breathe{position:relative;margin:0 0 18px;padding:18px 16px 16px;border-radius:24px;overflow:hidden;background:linear-gradient(rgba(253,248,238,.80),rgba(253,248,238,.86)),var(--bg) center/cover no-repeat;text-align:center}
.jh-breathe .jn-h2{margin:0 0 4px!important}
.jh-breathe .ck-note{margin:0 auto;max-width:30ch}
.jh-breathe .jx-breath{margin:10px 0 0!important}
.jh-breathe .jx-hold{width:190px;height:190px}
.jh-breathe .jx-breath .jx-bcount{margin-top:40px!important}
/* Trial (7 Nov): a colorful breathing flower that deepens while you breathe in */
.jx-flower i{background:rgba(238,196,106,.42);box-shadow:none;mix-blend-mode:multiply;transition:transform 6s cubic-bezier(.35,.1,.3,1),background-color 6s ease,filter 6s ease}
.jx-flower i:nth-child(1){background-color:rgba(238,196,106,.45)}
.jx-flower i:nth-child(2){background-color:rgba(242,169,107,.45)}
.jx-flower i:nth-child(3){background-color:rgba(233,150,140,.42)}
.jx-flower i:nth-child(4){background-color:rgba(214,130,106,.40)}
.jx-flower i:nth-child(5){background-color:rgba(246,200,154,.48)}
.jx-flower i:nth-child(6){background-color:rgba(226,176,120,.45)}
.jx-hold.in .jx-flower i{filter:saturate(1.7) brightness(1.02);transition:transform 4s cubic-bezier(.35,.1,.3,1),filter 4s ease}
.jx-hold.in .jx-flower i:nth-child(1){background-color:rgba(238,180,60,.62)}
.jx-hold.in .jx-flower i:nth-child(2){background-color:rgba(242,140,80,.6)}
.jx-hold.in .jx-flower i:nth-child(3){background-color:rgba(232,120,120,.56)}
.jx-hold.in .jx-flower i:nth-child(4){background-color:rgba(205,104,80,.52)}
.jx-hold.in .jx-flower i:nth-child(5){background-color:rgba(246,170,110,.6)}
.jx-hold.in .jx-flower i:nth-child(6){background-color:rgba(226,150,90,.58)}
/* Discover: stories on top */
.j-lib>.jl-stories{margin:0 0 22px}
.j-home .jh-cover.jp-anchors{background-position:center 0!important}
/* softer flower colors */
.jx-flower i{mix-blend-mode:normal}
.jx-hold.in .jx-flower i{filter:saturate(1.15)}
.jx-hold.in .jx-flower i:nth-child(1){background-color:rgba(238,190,90,.5)}
.jx-hold.in .jx-flower i:nth-child(2){background-color:rgba(242,165,110,.46)}
.jx-hold.in .jx-flower i:nth-child(3){background-color:rgba(236,150,145,.42)}
.jx-hold.in .jx-flower i:nth-child(4){background-color:rgba(214,140,115,.4)}
.jx-hold.in .jx-flower i:nth-child(5){background-color:rgba(246,190,140,.48)}
.jx-hold.in .jx-flower i:nth-child(6){background-color:rgba(230,170,110,.44)}
/* Trial (7 Nov): logo left, Sign in right as a plain text link */
.j-home .jh-today{display:flex;justify-content:space-between;align-items:center}
.j-home .jh-today .home-signin{min-height:0;padding:6px 0;border:0;border-radius:0;background:none;font-size:.875rem;font-weight:700;color:#27201c}
/* Trial (7 Nov): Sacha's red boat photo for Anchors and estimates */
.jp-anchors,:is(.j-home,.calm-lesson) .jp-anchors,main.calm-lesson .cl-done-ph.jp-anchors,main.calm-lesson .jg-ph.jp-anchors{background-image:url(assets/landing/ch-anchors-boat3.jpg)!important}
.j-home .jh-cover.jp-anchors{background-image:url(assets/landing/ch-anchors-boat3-home.jpg?v=2)!important;background-position:center 0!important}
/* Trial (7 Nov): feeling dial */
.ck-dialrow{display:flex;align-items:center;gap:16px;margin-top:10px}
.ck-dial{--a:247.5deg;position:relative;flex:none;width:164px;height:164px;border-radius:50%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;outline:none}
.ck-dial:focus-visible{box-shadow:0 0 0 3px #e5b64f}
.ck-dial-ring{position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(circle,transparent 54%,#000 55%);mask:radial-gradient(circle,transparent 54%,#000 55%);opacity:.9}
.ck-dial-mid{position:absolute;inset:24%;border-radius:50%;background:#fefcf8;display:grid;place-items:center;transition:transform .3s ease}
.ck-dial.held .ck-dial-mid{transform:scale(1.06)}
.ck-dial-mid .ck-dial-pip{width:64px;height:72px;background-position:center 60%}
.ck-dial-arm{position:absolute;inset:0;transform:rotate(var(--a));pointer-events:none}
.ck-dial-knob{position:absolute;left:50%;top:0;width:30px;height:30px;margin:4px 0 0 -15px;border-radius:50%;background:#fefcf8;border:4px solid #e5b64f;box-sizing:border-box}
.ck-dial-tx{min-width:0}
.ck-dial-word{display:block;font-family:var(--calm-serif);font-size:1.25rem;font-weight:700;color:#27201c;text-transform:capitalize;margin-bottom:4px}
.ck-dial-tx .ck-note{margin:0}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{height:max(320px,calc(100svh - 430px - env(safe-area-inset-bottom,0px)))!important}
.jh-ask{--feel:#e6b3a8}
/* no-Pip dial centre shows the feeling's color; stronger fade so the chapter line reads on bright skies */
.ck-dial-mid:empty{background:color-mix(in srgb,var(--feel,#e6b3a8) 55%,#fefcf8);transition:background-color .4s ease}
.j-home .jh-cover .jc-fade{background:linear-gradient(180deg,rgba(33,28,21,0) 8%,rgba(33,28,21,.5) 38%,rgba(33,28,21,.9) 100%)!important}
.j-home .jh-col-l>.jl-stories{grid-column:1/-1!important;margin:0 0 6px}
/* Trial (7 Nov): no logo on top; the photo is a bit taller; logo at the bottom of Home */
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{height:max(330px,calc(100svh - 392px - env(safe-area-inset-bottom,0px)))!important}
.j-home .jh-signout{margin:0 0 10px!important}
.j-home .jh-foot{text-align:center;margin:28px 0 0}
.j-home .jh-cov-go{white-space:nowrap}
@media (max-height:720px){.j-home .jh-cov-p{display:none}}
.j-home .jh-foot{font-size:.875rem;opacity:.75}
.ck-dial-mid{background:transparent}
.ck-dial-mid:empty{background:color-mix(in srgb,var(--feel,#e6b3a8) 55%,#fefcf8)}
/* Trial (7 Nov): even 16px spacing: top, sides and between the photo and the feeling card; photo uses the room */
.j-home:not(.j-lib){padding-top:16px}
.j-home .jh-col-l>.jh-stories:not(.jl-stories){margin:2px 0 2px!important}
.j-home .jh-col-l>.jh-stories:not(.jl-stories) .jh-ask{margin-top:0!important}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{height:max(330px,calc(100svh - 372px - env(safe-area-inset-bottom,0px)))!important}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{height:max(300px,calc(100svh - 396px - env(safe-area-inset-bottom,0px)))!important}
@media (max-height:720px){.ck-dial{width:132px;height:132px}.ck-dial-mid .ck-dial-pip{width:52px;height:58px}.ck-dial-knob{width:26px;height:26px;margin-left:-13px}}
/* Trial (7 Nov): the lesson photo starts right at the top, under the clock */
.j-home:not(.j-lib){padding-top:0}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{border-radius:0 0 28px 28px!important;height:max(300px,calc(100svh - 380px - env(safe-area-inset-bottom,0px)))!important}
.j-home .jh-signout+.jh-grid .jh-cover{border-radius:28px!important}
.j-home:not(.j-lib)>.jh-signout{padding-top:16px}
/* Trial (7 Nov): back to the block with round corners and 16px on top */
.j-home:not(.j-lib){padding-top:16px}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{border-radius:28px!important;height:max(300px,calc(100svh - 396px - env(safe-area-inset-bottom,0px)))!important}
.j-home:not(.j-lib)>.jh-signout{padding-top:0}
/* Trial (7 Nov): Instagram-like top. Plus (happy photo) left, logo in the middle, Sign in right; stories first, then the lesson */
.j-home .jh-ig{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin:-6px 0 6px}
.j-home .jh-ig-plus{width:40px;height:40px;margin-left:-8px;padding:0;border:0;background:none;color:#27201c;display:grid;place-items:center;cursor:pointer}
.j-home .jh-ig-logo{justify-self:center;font-size:.9375rem;color:#27201c}
.j-home .jh-ig .home-signin{justify-self:end;min-height:0;padding:6px 0;border:0;border-radius:0;background:none;font-size:.875rem;font-weight:700;color:#27201c;white-space:nowrap;cursor:pointer}
.j-home .jh-ig+.jh-grid{margin-top:0}
.j-home .jh-col-l>.jl-stories{order:-2;margin:0 0 2px!important}
.j-home .jh-col-l>.jl-stories .jh-st-h{display:none}
.j-home .jh-col-l>.jl-stories .jh-st-row{padding-top:4px!important}
.j-home .jh-col-l>.jh-cover,.j-home .jh-grid>.jh-cover{height:max(300px,calc(100svh - 520px - env(safe-area-inset-bottom,0px)))!important}
@media (max-height:900px){.j-home .jh-cov-p{display:none}}
/* Trial (7 Nov): honey plus, explained in a sheet; stories not clipped at the top */
.j-home .jh-ig-plus svg rect{fill:#e5b64f;stroke:#e5b64f}
.j-home .jh-ig-plus svg path{stroke:#27201c}
.jh-plus-sheet{display:grid;gap:10px}
.jh-plus-ph{display:block;width:100%;aspect-ratio:4/3;border-radius:18px;background:center/cover no-repeat}
.jh-plus-sheet .ck-note{margin:0}
.j-home .jh-col-l>.jl-stories .jh-st-row{padding-top:9px!important}
/* Trial (7 Nov): Latest courses on Home, the same cards as Discover, under Pip's note */
.j-home .jh-reels{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;display:block}
.j-home .jh-reels .jn-h2{margin:0 0 10px!important}
.j-home .jh-reels .j-lib{margin:0}
.j-home .jh-reels .jn-h2{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-size:17px!important;font-weight:700!important;color:#27201c!important}
.j-home .jh-reels .jn-h2 em{font-style:normal}
.sheet:has(.jh-plus-sheet) .sheet-head h2{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-weight:700!important;font-size:1.375rem!important;color:#27201c}
.sheet:has(.jh-plus-sheet){background:#fefcf8}
/* Trial (7 Nov): courses as reels: tall cards, title and one line only */
.j-home .jh-reels .jn-h2 em{box-shadow:inset 0 -.32em 0 #fce5bb}
.j-home .jh-reels .jl-cs2.jl-rail{gap:10px}
.j-home .jh-reels .jl-cs2 .jl-ct2{flex:0 0 46%!important;width:46%!important;min-width:0!important;height:auto!important;aspect-ratio:9/16;border-radius:20px}
.j-home .jh-reels .jl-ct2-tx{left:14px!important;right:14px!important;bottom:14px!important}
.j-home .jh-reels .jl-ct2-tx b{font-size:1.125rem}
.j-home .jh-reels .jl-ct2-d{font-size:.875rem;line-height:1.3}
.j-home .jh-reels .jl-ct2-tx small{display:none!important}
.j-home .jh-reels{overflow:visible!important}
/* Trial (7 Nov): smaller course reels on Home */
.j-home .jh-reels .jl-cs2 .jl-ct2{flex:0 0 31%!important;width:31%!important;border-radius:16px}
.j-home .jh-reels .jl-ct2-tx{left:10px!important;right:10px!important;bottom:10px!important}
.j-home .jh-reels .jl-ct2-tx b{font-size:.9375rem;line-height:1.15}
.j-home .jh-reels .jl-ct2-d{font-size:.75rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.j-home .jh-reels .jl-ct2-play{transform:scale(.72)}
/* Trial (7 Nov): course video feed, TikTok style */
body.jv-on{overflow:hidden}
#jv{position:fixed;inset:0;z-index:9000;background:#141210;color:#fefcf8}
#jv .jv-feed{height:100%;max-width:480px;margin:0 auto;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
#jv .jv-feed::-webkit-scrollbar{display:none}
#jv .jv-slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;cursor:pointer}
#jv .jv-ph{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1);transition:transform 18s linear}
#jv .jv-slide.on .jv-ph{transform:scale(1.08)}
#jv .jv-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.45) 0,rgba(20,18,16,0) 22%,rgba(20,18,16,0) 40%,rgba(20,18,16,.85) 100%)}
#jv .jv-info{position:absolute;left:18px;right:84px;bottom:calc(26px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px}
#jv .jv-info small{font-size:.8125rem;font-weight:700;color:#f6dcae}
#jv .jv-info b{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:1.25rem;line-height:1.2}
#jv .jv-cap{margin:6px 0 4px;min-height:5.4em;font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:1.375rem;font-weight:700;line-height:1.25}
#jv .jv-cap.jv-in{animation:jv-in .5s ease both}
#jv .jv-cap.jv-end{font-size:1rem;font-weight:600;color:#f6dcae}
@keyframes jv-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#jv .jv-bar{height:3px;border-radius:3px;background:rgba(254,252,248,.25);overflow:hidden}
#jv .jv-bar i{display:block;height:100%;width:0;background:#e5b64f;transition:width 4s linear}
#jv .jv-side{position:absolute;right:12px;bottom:calc(120px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px}
#jv .jv-readbtn{display:flex;flex-direction:column;align-items:center;gap:4px;width:58px;padding:10px 0 8px;border:0;border-radius:16px;background:rgba(20,18,16,.35);color:#fefcf8;font:700 .75rem "Hanken Grotesk",system-ui,sans-serif;cursor:pointer}
#jv .jv-pause{position:absolute;left:50%;top:45%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(20,18,16,.4);display:grid;place-items:center;opacity:0;transition:opacity .2s;pointer-events:none}
#jv .jv-slide.paused .jv-pause{opacity:1}
#jv .jv-x{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:14px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(20,18,16,.4);color:#fefcf8;display:grid;place-items:center;cursor:pointer}
@media (min-width:520px){#jv .jv-x{left:calc(50% - 240px + 14px)}}
#jv .jv-read{position:fixed;inset:0;z-index:3;background:rgba(20,18,16,.5);display:flex;justify-content:center;align-items:flex-end}
#jv .jv-read-in{width:100%;max-width:480px;max-height:86%;overflow-y:auto;background:#fefcf8;color:#27201c;border-radius:24px 24px 0 0;padding:20px 20px calc(28px + env(safe-area-inset-bottom,0px))}
#jv .jv-read-head{display:flex;justify-content:space-between;align-items:center}
#jv .jv-read-head b{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:1.375rem}
#jv .jv-read-x{width:40px;height:40px;border:0;background:none;font-size:28px;line-height:1;color:#27201c;cursor:pointer}
#jv .jv-read-sub{margin:4px 0 14px;color:#6b6158}
#jv .jv-read section{padding:14px 0;border-top:1px solid #ecdcbc}
#jv .jv-read small{font-size:.75rem;font-weight:700;color:#93641f}
#jv .jv-read h3{margin:2px 0 6px;font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:1.0625rem}
#jv .jv-read p{margin:0 0 6px;line-height:1.5}
@media (prefers-reduced-motion:reduce){#jv .jv-ph{transition:none}#jv .jv-cap.jv-in{animation:none}}
/* desktop: the course reels stay inside their column */
.j-home .jh-reels,.j-home .jh-reels .j-lib{min-width:0;max-width:100%}
.j-home .jh-reels .jl-cs2.jl-rail{min-width:0;max-width:100%;overflow-x:auto}
.j-home .jh-reels .jl-cs2 .jl-ct2{flex:0 0 min(31%,150px)!important;width:min(31%,150px)!important}
#jv .jv-read h3{font-weight:700}
/* Trial (7 Nov): Discover search bar */
html,body{overflow-x:clip}
.j-lib .jl-search{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:0 14px;height:44px;border-radius:14px;background:#f3ece0;color:#6b6158}
.j-lib .jl-search input{flex:1;min-width:0;height:100%;border:0!important;background:none!important;box-shadow:none!important;padding:0!important;font:inherit;font-size:16px;color:#27201c;outline:none}
.j-lib .jl-results{display:grid;gap:8px;margin:0 0 18px}
.j-lib .jl-res{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:0;border-radius:14px;background:#fbf5ea;text-align:left;font:inherit;cursor:pointer}
.j-lib .jl-res small{font-size:.75rem;font-weight:700;color:#93641f}
.j-lib .jl-res b{font-size:1rem;color:#27201c}
.j-lib .jl-none{margin:0;color:#6b6158}
.j-lib.jl-searching>*:not(.jl-search):not(.jl-results):not(nav){display:none!important}
.j-lib .jl-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.j-home .jh-reels .jl-cs2 .jl-ct2{aspect-ratio:3/4!important}
/* Trial (7 Nov): course cards between the two sizes */
.j-home .jh-reels .jl-cs2 .jl-ct2{flex:0 0 min(40%,180px)!important;width:min(40%,180px)!important;aspect-ratio:2/3!important}
.j-home .jh-reels .jl-ct2-tx b{font-size:1.0625rem}
.j-home .jh-reels .jl-ct2-d{font-size:.8125rem}
.j-home .jh-reels .jl-ct2-play{transform:scale(.85)}
@media (max-width:699px){.j-home .jh-reels .jl-cs2.jl-rail{margin-right:-16px!important;max-width:none;padding-right:16px}}
.j-home .jh-cov-stamps{margin:4px 0!important}
.j-home .jh-cov-stamps{margin:4px 0 -3px!important}
.j-home .jh-col-l>.jh-reels{grid-column:1/-1!important;margin:4px 0 6px}
.j-home .jh-col-l>.jh-reels{margin-top:-18px!important}
/* Trial (7 Nov): Today's course story */
#jx-story.jxs-k-course .jxs-t{display:none}
#jx-story .jxs-ck{margin:0 0 4px;font-size:.8125rem;font-weight:700;color:#93641f}
#jx-story .jxs-ct{margin:0 0 8px!important;font-size:24px!important}
.jh-st-course span{background-position:40% center!important}
/* Trial (7 Nov): the close X is small, see-through, white */
#jx-story .jxs-x,#jv .jv-x{width:36px!important;height:36px!important;background:transparent!important;color:#fefcf8!important;box-shadow:none!important}
#jv .jv-x{left:auto!important;right:10px}
@media (min-width:520px){#jv .jv-x{right:calc(50% - 240px + 10px)}}
/* Trial (7 Nov): the course story plays like a video, full screen */
#jx-story.jxs-k-course .jxs-bg::after{content:"";position:absolute;inset:0;background:rgba(20,14,10,.28)}
#jx-story.jxs-k-course .jxs-card{position:absolute!important;inset:0!important;margin:0!important;max-width:none!important;width:auto!important;padding:0!important;border-radius:0!important;background:none!important;pointer-events:none}
#jx-story.jxs-k-course .jx-sheet{height:100%}
#jx-story .jxv{position:relative;height:100%;color:#fefcf8}
#jx-story .jxv button{pointer-events:auto}
#jx-story .jxv-top{position:absolute;left:16px;right:70px;top:calc(48px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:2px}
#jx-story .jxv-top small{font-size:.8125rem;font-weight:700;color:#fefcf8;opacity:.85}
#jx-story .jxv-top b{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:1.25rem;font-weight:700;line-height:1.2}
#jx-story .jxv-mid{position:absolute;left:50%;top:46%;width:72px;height:72px;margin:-36px 0 0 -36px;border:0;border-radius:50%;background:rgba(20,14,10,.35);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .25s}
#jx-story .jxv.paused .jxv-mid{opacity:1}
#jx-story .jxv .jxv-i-play{display:none}
#jx-story .jxv.paused .jxv-i-play{display:block}
#jx-story .jxv.paused .jxv-i-pause{display:none}
#jx-story .jxv-cap{position:absolute;left:16px;right:16px;bottom:calc(64px + env(safe-area-inset-bottom,0px));margin:0;font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:1.25rem;font-weight:700;line-height:1.3;color:#fefcf8}
#jx-story .jxv-bot{position:absolute;left:8px;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px}
#jx-story .jxv-pp{width:36px;height:36px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
#jx-story .jxv-track{flex:1;min-width:0;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative}
#jx-story .jxv-track::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:4px;background:rgba(254,252,248,.35)}
#jx-story .jxv-track i{position:absolute;left:0;top:10px;height:4px;width:0;border-radius:4px;background:#e5b64f}
#jx-story .jxv-time{flex:none;font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}
#jx-story.jxs-k-course .jx-sheet{position:absolute!important;inset:0!important;height:auto!important;margin:0!important;padding:0!important}#jx-story.jxs-k-course .jxv{position:absolute;inset:0;height:auto}
#jx-story.jxs-k-course .jxv{position:fixed!important;inset:0!important;height:auto!important}
#jx-story.jxs-k-course .jxs-card{max-height:none!important;height:auto!important;transform:none!important;overflow:visible!important}#jx-story.jxs-k-course .jx-sheet{max-height:none!important;overflow:visible!important}
/* Trial (7 Nov): Discover, You and your friends */
.j-lib .jd-fr{margin-top:6px}
.j-lib .jd-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.j-lib .jd-rail::-webkit-scrollbar{display:none}
.j-lib .jd-card{position:relative;flex:0 0 min(82%,340px);aspect-ratio:4/5;max-width:100%;border-radius:20px;overflow:hidden;background-size:cover;background-position:center;scroll-snap-align:start}
.j-lib .jd-card::after{content:"";position:absolute;inset:35% 0 0 0;background:linear-gradient(to bottom,rgba(39,32,28,0),rgba(39,32,28,.78))}
.j-lib .jd-tx{position:absolute;left:16px;right:16px;bottom:16px;z-index:1;color:#fefcf8}
.j-lib .jd-tx small{display:block;font-size:.75rem;font-weight:600}
.j-lib .jd-tx b{display:block;margin-top:4px;font-size:1.125rem;line-height:1.2}
.j-lib .jd-tx span{display:block;margin-top:4px;font-size:.8125rem;line-height:1.3}
.j-lib .jd-btns{display:flex;align-items:center;gap:16px;margin-top:14px}
.j-lib .jd-btns .jh-cov-go{display:inline-block;padding:10px 18px;border:0;border-radius:999px;background:#e5b64f;color:#27201c;font:inherit;font-size:.875rem;font-weight:700;cursor:pointer;white-space:nowrap}
.j-lib .jd-inv{border:0;background:none;padding:10px 0;color:#fefcf8;font:inherit;font-size:.875rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.jd-sheet>p{margin:0 0 14px;line-height:1.45}
.jd-sheet .jn-h2{margin:22px 0 10px}
.jd-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.jd-list li{display:flex;gap:12px;align-items:flex-start}
.jd-list i{flex:0 0 40px;height:40px;border-radius:50%;background:#f6e3b4;color:#27201c;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:.8125rem}
.jd-list b{display:block}
.jd-list span{display:block;margin-top:2px;font-size:.875rem;line-height:1.4;color:#5a5044}
.jd-note{margin:14px 0 0;font-size:.8125rem;color:#5a5044}
@media (min-width:768px){.j-lib .jd-card{flex-basis:calc(50% - 6px);aspect-ratio:5/4}}
.j-lib .jd-tx small{color:#fefcf8!important;opacity:1!important}
.j-lib .jd-fr{margin-bottom:8px}
@media (min-width:768px){.j-lib .jd-card{aspect-ratio:16/9}}
.j-lib .jd-fr{margin-bottom:22px!important}
/* Trial (7 Nov): Discover, For right now */
.j-lib .jn-now{margin-bottom:6px}
.j-lib .jn-now-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.j-lib .jn-now-t{display:flex;align-items:flex-end;height:72px;padding:12px 14px;border:0;border-radius:18px;color:#27201c;font:inherit;text-align:left;cursor:pointer}
.j-lib .jn-now-t b{font-size:1rem}
@media (min-width:768px){.j-lib .jn-now-grid{grid-template-columns:repeat(4,1fr)}}
.jn-now-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.jn-now-list button{display:flex;align-items:center;gap:14px;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.jn-now-th{flex:0 0 72px;height:72px;border-radius:14px;background-size:cover;background-position:center}
.jn-now-list b{display:block}
.jn-now-list small{display:block;margin-top:2px;font-size:.875rem;color:#5a5044}
body.jn-playing{overflow:hidden}
#jn-play{position:fixed;inset:0;z-index:9100;background:#141210;color:#fefcf8}
#jn-play video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#jn-play::after{content:"";position:absolute;inset:0;background:rgba(20,14,10,.22);pointer-events:none}
#jn-play>*:not(video){z-index:1}
#jn-play .jn-p-top{position:absolute;left:16px;right:60px;top:calc(18px + env(safe-area-inset-top,0px))}
#jn-play .jn-p-top small{display:block;font-size:.75rem;font-weight:700}
#jn-play .jn-p-top b{display:block;margin-top:2px;font-size:1.125rem}
#jn-play .jn-p-x{position:absolute;right:10px;top:calc(12px + env(safe-area-inset-top,0px));width:36px;height:36px;border:0;background:transparent;color:#fefcf8;display:grid;place-items:center;cursor:pointer}
#jn-play .jn-p-pick{position:absolute;left:16px;right:16px;bottom:calc(32px + env(safe-area-inset-bottom,0px));text-align:center}
#jn-play .jn-p-pick p{margin:0 0 12px;font-weight:700}
#jn-play .jn-p-pick div{display:flex;justify-content:center;gap:10px}
#jn-play .jn-p-pick button{min-width:84px;padding:12px 14px;border:1.5px solid #fefcf8;border-radius:14px;background:rgba(20,14,10,.25);color:#fefcf8;font:inherit;font-weight:700;cursor:pointer}
#jn-play .jn-p-bot{position:absolute;left:8px;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px}
#jn-play .jn-p-bot[hidden],#jn-play .jn-p-pick[hidden],#jn-play .jn-p-end[hidden]{display:none}
#jn-play .jxv-pp{width:36px;height:36px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
#jn-play .jxv-track{flex:1;min-width:0;height:24px;position:relative}
#jn-play .jxv-track::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:4px;background:rgba(254,252,248,.35)}
#jn-play .jxv-track i{position:absolute;left:0;top:10px;height:4px;width:0;border-radius:4px;background:#e5b64f}
#jn-play .jxv-time{flex:none;font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}
#jn-play .jn-p-end{position:absolute;left:16px;right:16px;bottom:calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:14px}
#jn-play .jn-p-end b{font-size:1.125rem}
#jn-play .jh-cov-go{padding:12px 20px;border:0;border-radius:999px;background:#e5b64f;color:#27201c;font:inherit;font-weight:700;cursor:pointer}
/* Trial (7 Nov): Discover with less text. No sub-lines under headings; course and game cards show only the title */
.j-lib .jl-cs-p,.j-lib .jl-disc-sub{display:none!important}
.j-lib .jl-cs-h{margin-bottom:10px!important}
.j-lib .jl-cs2 .jl-ct2{flex:0 0 min(38%,170px)!important;height:auto!important;aspect-ratio:2/3}
.j-lib .jl-cs2 .jl-ct2-d,.j-lib .jl-cs2 .jl-ct2-tx small{display:none!important}
.j-lib .jl-cs2 .jl-ct2-tx b{font-size:1rem}
.j-lib .jd-tx span{display:none}
.j-lib .jd-card{aspect-ratio:1/1}
@media (min-width:768px){.j-lib .jd-card{aspect-ratio:16/9}}
#jn-play .jn-p-top small,#jn-play .jn-p-top b{color:#fefcf8!important;opacity:1!important}
/* Trial (7 Nov): Discover tidy. Music button beside search, smaller friends cards, even gaps between sections */
.j-lib .jl-top{display:flex;align-items:center;gap:10px}
.j-lib .jl-top .jl-search{flex:1;min-width:0;margin:0!important}
.j-lib .jl-music{flex:none;width:46px;height:46px;border:0;border-radius:50%;background:#f1ebe1;color:#27201c;display:grid;place-items:center;cursor:pointer}
.j-lib .jl-music.on{background:#e5b64f}
#jn-menu{position:fixed;z-index:9050;width:min(250px,calc(100vw - 32px));max-height:70vh;overflow:auto;padding:8px;border:1px solid #e8dfd0;border-radius:18px;background:#fefcf8;color:#27201c}
#jn-menu .jn-m-g{padding:6px 0}
#jn-menu .jn-m-g+.jn-m-g{border-top:1px solid #efe7da}
#jn-menu small{display:block;padding:4px 10px;font-size:.75rem;font-weight:700;color:#5a5044}
#jn-menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:42px;padding:8px 10px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
#jn-menu button i{display:grid;place-items:center;width:28px;height:28px;font-style:normal;color:#5a5044}
#jn-menu button i svg{width:16px;height:16px}
#jn-menu .jn-m-i.on{background:#f6e3b4;font-weight:700}
#jn-menu .jn-m-i.on i{color:#27201c}
#jn-menu .jn-m-watch{margin-top:4px;border-top:1px solid #efe7da;border-radius:0 0 12px 12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.j-lib .jd-card{flex-basis:min(76%,300px)!important;aspect-ratio:5/4!important}
.j-lib .jd-tx{left:14px;right:14px;bottom:14px}
.j-lib .jd-tx b{font-size:1rem}
.j-lib .jd-btns{margin-top:10px}
@media (min-width:768px){.j-lib .jd-card{flex-basis:min(40%,360px)!important;aspect-ratio:16/10!important}}
.j-lib .jl-stories{margin-top:22px!important}
.j-lib .jd-fr{margin:0!important}
.j-lib .jl-cs-h,.j-lib h1.jl-disc-h{margin:28px 0 12px!important}
.j-lib .jl-topics{margin-top:0!important}
.j-lib .jl-foot{margin-top:32px}
.j-lib .jl-music{width:44px;height:44px;border-radius:14px;background:#f3ece0;color:#3d3123}
/* Trial (7 Nov): Discover, no title over the stories; search text in normal weight */
.j-lib .jl-stories .jh-st-h{display:none!important}
.j-lib .jl-stories{margin-top:20px!important;padding-top:0!important}
.j-lib .jl-search input,.j-lib .jl-search input::placeholder{font-weight:400}
.j-lib .jl-cs2 .jl-ct2[data-action$=":video"] .jl-ct2-d{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:.8125rem;line-height:1.3}
.j-lib .jl-stories{margin-top:14px!important;margin-bottom:0!important}
.j-lib .jd-fr .jl-cs-h{margin-top:18px!important}
/* Trial (7 Nov): Calm sounds as four photo blocks, after Video courses */
.j-lib .jn-now-grid{grid-template-columns:1fr 1fr!important;gap:8px}
.j-lib .jn-now-t{position:relative;height:auto!important;aspect-ratio:4/3;overflow:hidden;background-size:cover;background-position:center;color:#fefcf8!important;padding:12px 14px!important}
.j-lib .jn-now-t::after{content:"";position:absolute;inset:40% 0 0 0;background:linear-gradient(to bottom,rgba(39,32,28,0),rgba(39,32,28,.6))}
.j-lib .jn-now-t b{position:relative;z-index:1;font-size:1rem}
@media (min-width:768px){.j-lib .jn-now-grid{grid-template-columns:repeat(4,1fr)!important}}
.j-lib .jn-now-t[data-action="jn-now:sleep"]{background-position:center 38%}
.j-lib .jn-now-t[data-action="jn-now:focus"]{background-position:center 85%}
/* Trial (7 Nov): profile picture top right on Home */
.j-home .jh-ig-me{justify-self:end;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.j-home .jh-ig-me span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f6e3b4 center/cover no-repeat;color:#27201c;font-weight:700;font-size:.9375rem}
.jh-me-sheet .jh-me-big{display:block;width:120px;height:120px;margin:0 auto 14px;border-radius:50%;background:center/cover no-repeat}
/* Trial (7 Nov): today's happy photo as a story, only the photo */
#jx-story.jxs-k-happy .jxs-card{display:none!important}
/* Trial (7 Nov): check-in, the exact word and who you were with */
.ck-wrow{text-align:left}
.ck-wrow span{display:flex;flex-direction:column;gap:2px}
.ck-wrow small{font-weight:400;font-size:.875rem;color:#5a5044;line-height:1.35}
.ck-why-name{margin-top:12px}
.ck-why-name .link-button{display:inline;padding:0;font-size:inherit}
.ck-q2{margin-top:18px}
.ck-who{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.ck-who button{padding:9px 14px;border:1.5px solid #e2d4bb;border-radius:12px;background:#fefcf8;color:#27201c;font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer}
.ck-who button.on{background:#f6e3b4;border-color:#e5b64f}
/* Trial (7 Nov): course cards, play button in the middle; Home's Latest courses keep the subtitle */
.j-lib .jl-ct2 .jl-ct2-play{left:50%!important;top:42%!important;right:auto!important;bottom:auto!important;margin:0!important;transform:translate(-50%,-50%)!important}
.j-home .jh-reels .jl-ct2-d{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px}
/* Trial (7 Nov): check-in times on the second visit, and What we noticed this week */
.ck-slot{margin:16px 0 0}
.ck-wk{display:flex;flex-direction:column;gap:10px}
.ck-wk p{margin:0}
.ck-wk .ck-opt{margin-top:4px}
.ck-wk .ck-note{margin:0}
/* Trial (7 Nov): Check-ins tab in the Journal, with the bell for reminder times */
.ck-set{display:flex;flex-direction:column;gap:12px}
.ck-set-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ck-set-row span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ck-set .btn{align-self:flex-start}
.ck-bell{flex:none}
@media (max-width:759px){.j-notes .jn-tabs{gap:10px;justify-content:space-between}}
.j-notes .jn-tabs .link-button{flex:none}
/* Trial (7 Nov): writing stories say where they went */
.jx-saved{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding-bottom:16px}
.jx-saved .ck-note{margin:0}
/* Trial (7 Nov): sounds play at once and loop; swipe or tap the sides for the next one */
#jn-play .jn-p-dots{position:absolute;left:16px;right:16px;top:calc(8px + env(safe-area-inset-top,0px));display:flex;gap:4px}
#jn-play .jn-p-dots i{flex:1;height:3px;border-radius:2px;background:rgba(254,252,248,.4)}
#jn-play .jn-p-dots i.on{background:#fefcf8}
#jn-play .jn-p-top{top:calc(24px + env(safe-area-inset-top,0px))}
#jn-play .jn-p-x{top:calc(18px + env(safe-area-inset-top,0px))}
#jn-play .jn-p-side{position:absolute;top:90px;bottom:90px;width:30%;border:0;background:transparent;padding:0;cursor:pointer}
#jn-play .jn-p-prev{left:0}
#jn-play .jn-p-next{right:0}
#jn-play .jn-p-hint{font-size:.75rem;font-weight:700;color:#fefcf8}
/* Trial (7 Nov): story cards sit higher on the screen; One slow minute is bigger and the count sits above the circle, away from the finger */
#jx-story .jxs-card{margin:max(84px,11vh) 30px auto!important}
#jx-story.jxs-k-worry .jxs-card{margin:auto 18px calc(env(safe-area-inset-bottom,0px) + 18px)!important}
#jx-story .jx-breath{margin-top:44px!important}
#jx-story .jx-hold{width:250px;height:250px}
#jx-story .jx-pip{width:84px;height:94px;margin:-52px 0 0 -42px}
#jx-story .jx-hold .jx-num,#jx-story .jx-hold:has(.jx-pip) .jx-num{top:-38px!important;margin-top:0!important;font-size:22px!important}
/* Trial (7 Nov): One slow minute fits on the screen, centered, with Done visible */
#jx-story.jxs-k-breath .jxs-card{margin:auto 24px!important;max-height:calc(100% - 96px)!important}
#jx-story.jxs-k-breath .jx-breath{margin-top:34px!important;margin-bottom:10px!important}
#jx-story.jxs-k-breath .jx-hold span{bottom:-30px!important}
#jx-story.jxs-k-breath .jx-breath .jx-bcount{margin-top:36px!important}
#jx-story.jxs-k-breath .ck-acts{margin-top:10px}
@media (max-height:720px){#jx-story.jxs-k-breath .jx-hold{width:210px;height:210px}#jx-story.jxs-k-breath .jxs-card{max-height:calc(100% - 72px)!important}}
/* Trial (7 Nov): course videos like Reels: picture, play button, timeline with the time */
#jv .jv-tl{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer}
#jv .jv-tl .jv-bar{flex:1;height:4px}
#jv .jv-bar i{transition:width .25s linear}
#jv .jv-time{flex:none;font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fefcf8}
#jv .jv-cap{font-size:1.125rem;min-height:4.2em}
#jv .jv-cap.jv-in{animation:none}
#jv .jv-pause{top:46%;width:76px;height:76px;margin:-38px 0 0 -38px;transition:none}
#jv .jv-pause svg{margin-left:4px}
/* Trial (8 Nov): the real Psychology.com wordmark on Home, as on psychology.com: Psychology.com in Hanken Grotesk 800, without the P tile */
@font-face{font-family:'PC Hanken';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59CxCis4.woff2) format('woff2')}
.pc-logo{display:inline-flex;align-items:center;gap:9px;justify-self:center;text-decoration:none}
.pc-logo .pc-tile{width:30px;height:30px;flex:0 0 auto;border-radius:7px;background:#ecc35e;background:oklch(.82 .13 82);display:inline-flex;align-items:center;justify-content:center;font-family:'PC Spectral',Spectral,Georgia,serif;font-weight:800;font-size:19px;line-height:1;color:#211c15}
.pc-logo .pc-name{font-family:'PC Hanken','Hanken Grotesk',system-ui,sans-serif;font-weight:800;font-size:1rem;letter-spacing:-.03em;line-height:1;color:#27201c}
.pc-logo .pc-name i{font-style:normal;font-weight:inherit;color:#e5b64f}
/* Trial (8 Nov): today's quote as a phone notification when the app opens */
#jpn{position:fixed;z-index:9200;left:10px;right:10px;top:calc(8px + env(safe-area-inset-top,0px));max-width:420px;margin:0 auto;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:0;border-radius:22px;background:#fefcf8;color:#27201c;box-shadow:0 8px 28px rgba(20,14,10,.18);text-align:left;font:inherit;cursor:pointer;transform:translateY(calc(-100% - 30px));transition:transform .9s cubic-bezier(.22,.7,.2,1)}
#jpn.in{transform:translateY(0)}
#jpn img{width:38px;height:38px;border-radius:9px;flex:none}
#jpn .jpn-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
#jpn .jpn-top{display:flex;justify-content:space-between;align-items:baseline}
#jpn .jpn-top b{font-size:.75rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#6f675d}
#jpn .jpn-top small{font-size:.75rem;color:#6f675d}
#jpn .jpn-t{font-size:.9375rem;font-weight:700}
#jpn .jpn-q{font-size:.875rem;line-height:1.35;color:#3d3123;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-reduced-motion:reduce){#jpn{transition:none}}

/* Quote story: the chapter is the main action, even padding */
#jx-story.jxs-k-quote .jxs-card{padding:22px!important}
#jx-story.jxs-k-quote .jxs-quote{margin-bottom:0}#jx-story.jxs-k-quote .jxs-qby{line-height:1.2;padding-top:2px}
#jx-story.jxs-k-quote .jxs-qby{margin:0 0 20px}
#jx-story.jxs-k-quote .ck-note{margin:0 0 16px;padding-top:18px;border-top:1px solid #e9e2d6}
#jx-story .jxs-ch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;margin:0;padding:14px 16px;border:0;border-radius:14px;background:#e5b64f;color:#27201c;font:inherit;text-align:left;cursor:pointer}
#jx-story .jxs-ch span{display:flex;flex-direction:column;gap:2px;min-width:0}
#jx-story .jxs-ch small{font-size:.8125rem;font-weight:600;color:#3d3123}
#jx-story .jxs-ch b{font-size:1rem;font-weight:700;line-height:1.25}
#jx-story .jxs-ch svg{flex:none}
#jx-story .jxs-qacts{margin-top:14px;justify-content:space-between}
#jx-story .jxs-qacts .link-button{padding-left:0;padding-right:0}
#jx-story .jxs-qsrc{display:block;margin-top:2px;font-weight:400;font-size:.8125rem;color:#6f675d}
/* Home logo: Psychology.com · Learn, Learn drawn like the app icon (heavy word on a honey bar) */
.pc-logo .pc-dot{margin:0 -3px;font-family:'PC Hanken','Hanken Grotesk',system-ui,sans-serif;font-weight:800;font-size:1rem;line-height:1;color:#5e5651}
.pc-logo .pc-learn{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;font-weight:800;font-size:1rem;letter-spacing:-.02em;line-height:1;color:#27201c;padding:0 1px;background:linear-gradient(rgba(238,196,106,.5),rgba(238,196,106,.5)) 0 88%/100% .36em no-repeat}
.pc-logo:has(.pc-learn){align-items:baseline}
/* First visit tour */
html.jt-lock,html.jt-lock body{overflow:hidden}
#jt{position:fixed;inset:0;z-index:9500}
#jt .jt-hole{position:fixed;box-shadow:0 0 0 200vmax rgba(33,28,21,.62);transition:left .35s,top .35s,width .35s,height .35s;pointer-events:none}
#jt .jt-card{position:fixed;left:16px;right:16px;max-width:380px;margin:0 auto;box-sizing:border-box;padding:18px;border-radius:22px;background:#fefcf8;color:#27201c}
#jt .jt-arrow{position:absolute;width:16px;height:16px;background:#fefcf8;transform:rotate(45deg)}
#jt .jt-arrow.up{top:-7px}
#jt .jt-arrow.down{bottom:-7px}
#jt .jt-row{display:flex;gap:12px;align-items:flex-start}
#jt .jt-pip{width:58px;height:auto;flex:none}
#jt .jt-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
#jt .jt-n{font-size:.8125rem;font-weight:600;color:#93641f}
#jt #jt-h{font-size:1.0625rem;font-weight:700}
#jt .jt-tx p{margin:2px 0 0;font-size:.9375rem;line-height:1.4;color:#3d3123}
#jt .jt-acts{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
#jt .jt-skip{padding-left:0}
@media (prefers-reduced-motion:reduce){#jt .jt-hole{transition:none}}
#jt.jt-hi .jt-arrow,#jt.jt-hi .jt-n{display:none}
#jt.jt-hi .jt-card{padding:26px 22px 20px}
#jt.jt-hi .jt-row{flex-direction:column;align-items:center;text-align:center;gap:10px}
#jt.jt-hi .jt-pip{width:84px}
#jt.jt-hi #jt-h{font-size:1.375rem}
#jt.jt-hi .jt-tx{align-items:center}
.pc-logo .pc-name,.pc-logo .pc-dot,.pc-logo .pc-learn{font-size:.8125rem!important}
.pc-logo .pc-dot{margin:0 -4px}
#jt .jt-hole{box-shadow:none;outline:200vmax solid rgba(33,28,21,.7)}
#jt .jt-pip{width:46px}
#jt.jt-hi .jt-pip{width:84px}
#jt .jt-pipb{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:0;border:0;background:none;cursor:pointer;font:inherit}
#jt .jt-tap{display:none;font-size:.75rem;font-weight:600;color:#93641f;white-space:nowrap}
#jt.jt-cansay .jt-tap{display:block}
#jt:not(.jt-hi) .jt-tap{display:none!important}
@keyframes jtHop{0%{transform:none}40%{transform:translateY(-6px)}100%{transform:none}}
#jt .jt-pipb.hop .jt-pip{animation:jtHop .4s ease-out}
#jt .jt-pip{width:auto!important;height:68px;max-width:92px;object-fit:contain}
#jt.jt-hi .jt-pip{height:132px;max-width:none}
/* Logo: Psychology.com in black, Learn in honey with a clear underline */
.pc-logo .pc-name i{color:#27201c!important}
.pc-logo .pc-learn{color:#27201c!important;text-decoration:none!important;padding:0 1px!important;background:linear-gradient(rgba(238,196,106,.75),rgba(238,196,106,.75)) 0 92%/100% .42em no-repeat!important}
/* Short videos: first time swipe hint */
#jv .jv-swipe{position:fixed;left:50%;top:22%;white-space:nowrap;text-align:center;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;background:none;color:#fefcf8;font-size:1rem;font-weight:700;pointer-events:none;transition:opacity .3s}
#jv .jv-swipe svg{animation:jvNudge 1.1s ease-in-out 4}
#jv .jv-swipe.out{opacity:0}
@keyframes jvNudge{0%,100%{transform:none}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){#jv .jv-swipe svg{animation:none}}

/* Daily habit draft: streak, tokens, daily pop-up, reward, Progress tab */
.jp-flame{width:22px;height:22px;display:block}
.jp-token{width:22px;height:22px;display:block}
.jp-avatar{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#fce5bb;color:#93641f;font:inherit;font-weight:800;font-size:.9375rem;display:grid;place-items:center;cursor:pointer;justify-self:end}
.jp-week{display:flex;justify-content:space-between;gap:4px;margin:14px 0 4px}
.jp-week span{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.jp-week i{width:34px;height:34px;border-radius:50%;background:#f6efe3;display:grid;place-items:center}
.jp-week span.on i{background:#fce5bb}
.jp-week span.today i{box-shadow:inset 0 0 0 2px #e5b64f}
.jp-week span.future i{background:none;box-shadow:inset 0 0 0 1.5px #e9e2d6}
.jp-week small{font-size:.75rem;font-weight:600;color:#5e5651}
.jp-week span.today small{color:#27201c;font-weight:800}
/* daily pop-up */
#jdp{position:fixed;inset:0;z-index:9300;background:rgba(33,28,21,.55);display:flex;align-items:flex-end;justify-content:center}
#jdp .jdp-card{position:relative;width:100%;max-width:480px;box-sizing:border-box;padding:26px 22px calc(env(safe-area-inset-bottom,0px) + 20px);border-radius:26px 26px 0 0;background:#fefcf8;color:#27201c;text-align:center;animation:jdpUp .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes jdpUp{from{transform:translateY(100%)}to{transform:none}}
#jdp .jdp-pip{height:112px;width:auto;display:block;margin:0 auto 6px}
#jdp .jdp-streak{position:absolute;top:22px;right:22px;display:flex;align-items:center;gap:4px;font-weight:800;font-size:1.0625rem}
#jdp h2{margin:4px 0 6px;font-size:1.375rem;font-weight:800}
#jdp p{margin:0 auto;max-width:320px;font-size:.9375rem;line-height:1.45;color:#3d3123}
#jdp .jdp-acts{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:16px}
#jdp .jdp-acts .btn{width:100%}
/* reward */
#jrw{position:fixed;inset:0;z-index:9400;background:#fce5bb;display:flex;align-items:center;justify-content:center;padding:24px 16px;box-sizing:border-box}
#jrw .jrw-in{width:100%;max-width:400px;text-align:center;color:#27201c}
#jrw .jrw-pip{height:170px;width:auto;display:block;margin:0 auto 8px;animation:jrwPop .6s cubic-bezier(.2,.8,.2,1.3) both}
@keyframes jrwPop{from{transform:scale(.6) translateY(20px);opacity:0}to{transform:none;opacity:1}}
#jrw h2{margin:0 0 6px;font-size:1.75rem;font-weight:800}
#jrw p{margin:0 0 18px;font-size:1rem;color:#3d3123}
#jrw .jrw-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#jrw .jrw-box{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 10px;border-radius:18px;background:#fefcf8}
#jrw .jrw-box .jp-flame,#jrw .jrw-box .jp-token{width:30px;height:30px}
#jrw .jrw-box b{font-size:1.75rem;font-weight:800;line-height:1.1}
#jrw .jrw-box small{font-size:.8125rem;font-weight:600;color:#5e5651}
#jrw .jp-week i{background:#fefcf8}
#jrw .jp-week span.on i{background:#fefcf8;box-shadow:inset 0 0 0 2px #e5b64f}
#jrw .jrw-acts{display:flex;flex-direction:column;gap:6px;margin-top:20px}
#jrw .jrw-acts .btn{width:100%}
@media (prefers-reduced-motion:reduce){#jdp .jdp-card,#jrw .jrw-pip{animation:none}}
/* Progress tab */
.j-prog{padding-bottom:110px}
.j-prog .jp-h1{margin:6px 0 14px;font-size:1.75rem;font-weight:800;letter-spacing:-.01em}
.j-prog .jp-card{padding:18px;border-radius:22px;background:#f6efe3;box-sizing:border-box}
.j-prog .jp-card h2{margin:0;font-size:1.0625rem;font-weight:700}
.j-prog .jp-card p{margin:4px 0 0;font-size:.875rem;line-height:1.4;color:#5e5651}
.j-prog .jp-streak{display:flex;gap:16px;align-items:center;background:#fce5bb}
.j-prog .jp-streak small{display:block;margin-top:6px;font-size:.8125rem;font-weight:700;color:#93641f}
.j-prog .jp-big{flex:none;width:86px;height:86px;border-radius:50%;background:#fefcf8;display:flex;flex-direction:column;align-items:center;justify-content:center}
.j-prog .jp-big .jp-flame{width:30px;height:30px}
.j-prog .jp-big b{font-size:1.5rem;font-weight:800;line-height:1}
.j-prog .jp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.j-prog .jp-num{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.j-prog .jp-num b{font-size:1.75rem;font-weight:800;line-height:1}
.j-prog .jp-num .jp-token{width:26px;height:26px}
.j-prog .jp-tok{background:#fce3c8}
.j-prog .jp-h2{margin:22px 0 10px!important}
.j-prog .jp-topics{display:flex;flex-direction:column;gap:14px}
.j-prog .jp-topic div{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.j-prog .jp-topic b{font-size:.9375rem}
.j-prog .jp-topic small{font-size:.8125rem;color:#5e5651;font-weight:600}
.j-prog .jp-bar{display:block;height:8px;border-radius:8px;background:#fefcf8;overflow:hidden}
.j-prog .jp-bar i{display:block;height:100%;background:#e5b64f;border-radius:8px}
#jdp h2,#jrw h2,.j-prog .jp-h1,.j-prog .jp-card h2,.j-prog .jp-num b,.j-prog .jp-big b,#jrw .jrw-box b,#jdp .jdp-streak b{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif}
#jdp .jdp-streak .jp-flame{width:24px;height:24px}
.jh-ig .jp-avatar{width:40px;height:40px;margin-right:-8px;background:none;border-radius:0}
.jh-ig .jp-avatar span{width:22px;height:22px;border-radius:50%;background:#fce5bb;color:#93641f;display:grid;place-items:center;font-size:.6875rem;font-weight:800;line-height:1}
/* Fix (9 Nov): Progress uses the app's own heading styles */
.j-prog .jn-h2{margin:22px 0 10px!important;font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-size:17px!important;font-weight:700!important;color:#27201c!important;letter-spacing:-.34px}
.j-prog .jn-h2 em{font-style:normal;box-shadow:inset 0 -.32em 0 #fce5bb}
.j-prog .jp-h1{font-size:22px!important;font-weight:600!important;letter-spacing:normal!important;line-height:27.5px;margin:8px 0 14px!important}
.j-prog .jp-num b,.j-prog .jp-big b,#jrw .jrw-box b{font-size:22px!important;font-weight:700!important}
#jdp h2,#jrw h2{font-size:22px!important;font-weight:700!important;letter-spacing:-.44px}
.nav-flame{display:block;width:22px;height:22px;background:currentColor;-webkit-mask:url(assets/pip/ic-flame.png) center/contain no-repeat;mask:url(assets/pip/ic-flame.png) center/contain no-repeat}
.home-nav .nav-flame,.home-nav span .nav-flame,.home-nav button .nav-flame{display:block!important;width:22px!important;height:22px!important;padding:0!important;margin:0 auto!important;background:currentColor!important;border-radius:0!important}
/* Home lesson card (9 Nov): a clear progress bar instead of the stamps; first lesson stands out */
.jh-cov-prog{display:flex;flex-direction:column;gap:7px;margin:6px 0 2px}
.jh-cov-segs{display:flex;gap:5px}
.jh-cov-segs i{flex:1;height:7px;border-radius:7px;background:rgba(254,252,248,.35)}
.jh-cov-segs i.done{background:#e5b64f}
.jh-cov-segs i.now{background:rgba(254,252,248,.35);box-shadow:inset 0 0 0 1.5px #e5b64f}
.jh-cov-pt{font-size:.8125rem;font-weight:700;color:#f6dcae}
.jh-cov-first .jh-cov-tx small{font-size:1rem;color:#fce5bb}
.jh-cov-first .jh-cov-meta{flex-direction:column;align-items:stretch;gap:0}
.jh-cov-first .jh-cov-meta>span:first-child{display:none}
.jh-cov-first .jh-cov-go{display:block;width:100%;box-sizing:border-box;padding:15px 18px;font-size:1.0625rem;text-align:center}
/* Progress v2 */
.j-prog .jp-hero{display:flex;align-items:flex-end;gap:10px;margin:0 0 14px}
.j-prog .jp-hero-pip{height:130px;width:auto;flex:none}
.j-prog .jp-say{position:relative;flex:1;margin-bottom:46px;padding:14px 16px;border-radius:18px;background:#fce5bb}
.j-prog .jp-say:before{content:'';position:absolute;left:-7px;bottom:16px;width:16px;height:16px;background:#fce5bb;transform:rotate(45deg);border-radius:3px}
.j-prog .jp-say p{position:relative;margin:0;font-size:.9375rem;line-height:1.4;font-weight:600;color:#27201c}
.j-prog .jp-sub{margin:-4px 0 10px;font-size:.875rem;color:#5e5651}
.j-prog .jp-chart p{margin:8px 0 0;font-size:.8125rem;color:#5e5651;text-align:center}
.j-prog .jp-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:130px}
.j-prog .jp-bars span{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}
.j-prog .jp-bars i{display:block;width:100%;max-width:30px;min-height:4px;border-radius:8px 8px 4px 4px;background:#fce5bb}
.j-prog .jp-bars span.today i{background:#e5b64f}
.j-prog .jp-bars b{font-size:.8125rem;font-weight:700;color:#27201c;min-height:1em}
.j-prog .jp-bars small{font-size:.75rem;font-weight:600;color:#5e5651}
.j-prog .jp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.j-prog .jp-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 6px 12px;border-radius:18px;background:#f6efe3;text-align:center}
.j-prog .jp-stat img{height:34px;width:auto;margin-bottom:4px}
.j-prog .jp-stat b{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:22px;font-weight:700;line-height:1.1}
.j-prog .jp-stat small{font-size:.75rem;font-weight:600;color:#5e5651;line-height:1.3}
.j-prog .jp-tok{display:flex;gap:14px;align-items:center}
.j-prog .jp-tok .jp-num{margin:0;flex:none}
.j-prog .jp-rw{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.j-prog .jp-rw-i{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:18px;background:#f6efe3;text-align:center}
.j-prog .jp-rw-i img{height:92px;width:auto;opacity:.28;margin-bottom:4px}
.j-prog .jp-rw-i b{font-size:.875rem;font-weight:700;color:#5e5651}
.j-prog .jp-rw-i small{font-size:.75rem;color:#5e5651;line-height:1.3}
.j-prog .jp-rw-i.got{background:#fce5bb}
.j-prog .jp-rw-i.got img{opacity:1}
.j-prog .jp-rw-i.got b{color:#27201c}
.j-prog .jp-rw-i.got small{color:#93641f;font-weight:700}
.j-prog .jp-topics2{display:flex;flex-direction:column;gap:10px}
.j-prog .jp-topic2{display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:#f6efe3}
.j-prog .jp-th{flex:none;width:56px;height:56px;border-radius:14px;background:#fce5bb center/cover no-repeat}
.j-prog .jp-topic2>div{flex:1;min-width:0}
.j-prog .jp-tt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.j-prog .jp-tt b{font-size:.9375rem}
.j-prog .jp-tt small{font-size:.8125rem;color:#5e5651;font-weight:600}
/* Short videos as tap-through cards (9 Nov) */
#jv .jv-shade{background:rgba(20,18,16,.42)!important}
#jv .jv-bars{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;display:flex;gap:4px;z-index:1}
#jv .jv-bars i{flex:1;height:3px;border-radius:3px;background:rgba(254,252,248,.35)}
#jv .jv-bars i.full,#jv .jv-bars i.now{background:#fefcf8}
#jv .jv-mid{position:absolute;left:28px;right:28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:#fefcf8}
#jv .jv-mid b{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:1.25rem;line-height:1.2;color:#f6dcae}
#jv .jv-mid .jv-cap{margin:0;min-height:0;font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:1.375rem;font-weight:700;line-height:1.3}
#jv .jv-next{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font-size:.875rem;font-weight:700;color:#f6dcae;opacity:0;transition:opacity .3s}
#jv .jv-slide.last .jv-next{opacity:1}
#jv .jv-x,#jv .jv-snd{top:calc(24px + env(safe-area-inset-top,0px))!important}
#jv .jv-snd{position:fixed;right:14px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(20,18,16,.4);color:#fefcf8;display:grid;place-items:center;cursor:pointer}
@media (min-width:520px){#jv .jv-snd{right:calc(50% - 240px + 14px)}}
#jv .jv-snd-off{display:none}
#jv.muted .jv-snd-on{display:none}
#jv.muted .jv-snd-off{display:block}
#jv .jv-ph{transition:none!important;transform:none!important}
#jv .jv-snd{right:60px!important;left:auto!important}
@media (min-width:520px){#jv .jv-snd{right:calc(50% - 240px + 60px)!important}}
#jv .jv-snd{background:none!important}
/* Pip tells you (9 Nov) */
#jv .jv-mid{gap:6px!important;top:auto!important;bottom:calc(70px + env(safe-area-inset-bottom,0px));transform:none!important}
#jv .jv-bub{position:relative;width:100%;max-width:340px;box-sizing:border-box;padding:18px 20px;border-radius:22px;background:#fefcf8;color:#27201c;text-align:left}
#jv .jv-bub:after{content:'';position:absolute;left:50%;bottom:-8px;width:18px;height:18px;margin-left:-9px;background:#fefcf8;transform:rotate(45deg);border-radius:3px}
#jv .jv-bub b{display:block;margin-bottom:6px;font-size:.875rem!important;font-weight:700;color:#e5b64f!important;font-family:inherit!important}
#jv .jv-bub .jv-cap{position:relative;font-size:1.25rem!important;line-height:1.3;color:#27201c;text-align:left}
#jv .jv-pip{height:170px;width:auto;margin-top:10px;filter:invert(1) brightness(1.15)}
#jv .jv-next{bottom:calc(22px + env(safe-area-inset-bottom,0px))!important}

/* Trial (9 Nov): Sacha's new Pip drawings everywhere, each pose matched to its moment (hint = think, note = idea, reading = read, calm = calm, Discover = look, walking = walk, feelings = their own pose) */
@keyframes pipBob{0%,100%{translate:0 0}50%{translate:0 -3px}}
.j-home .jh-buddy span{background:url(assets/pip/hi.png) center bottom/contain no-repeat!important}
.j-home .jh-buddy .jb-shut{background-image:url(assets/pip/hi-blink.png)!important}
.j-notes .pip-peek .pip-fig span{background:url(assets/pip/hi.png) center bottom/contain no-repeat!important}
.j-notes .pip-peek .pip-fig .jb-shut{background-image:url(assets/pip/hi-blink.png)!important}
.j-home .jh-head .pip-peek .pip-fig span{background:url(assets/pip/hi.png) center bottom/contain no-repeat!important}
.j-home .jh-head .pip-peek .pip-fig .jb-shut{background-image:url(assets/pip/hi-blink.png)!important}
.jh-pipintro .pip-fig span{background:url(assets/pip/hi.png) center bottom/contain no-repeat!important}
.jh-pipintro .pip-fig .jb-shut{background-image:url(assets/pip/hi-blink.png)!important}
main.landing .lp-intro .lp-hill span{background:url(assets/pip/hi.png) center bottom/contain no-repeat!important}
main.landing .lp-intro .lp-hill .jb-shut{background-image:url(assets/pip/hi-blink.png)!important}
main.landing .lp-pip-fig span{background:url(assets/pip/hi.png) center bottom/contain no-repeat!important;transform:none!important}
.lp-pip i{background:url(assets/pip/hi.png) center bottom/contain no-repeat!important}
.pip-case .pip-fig span{background:url(assets/pip/think.png) center bottom/contain no-repeat!important}
.pip-case .pip-fig .jb-shut{background-image:url(assets/pip/think.png)!important}
.j-home .jh-pipth .pip-fig span{background:url(assets/pip/idea.png) center bottom/contain no-repeat!important}
.j-home .jh-pipth .pip-fig .jb-shut{background-image:url(assets/pip/idea.png)!important}
.j-lib .jl-pip{background:url(assets/pip/teach.png) center bottom/contain no-repeat!important}
.j-lib .jl-pip .jb-open{background:url(assets/pip/teach.png) center bottom/contain no-repeat!important}
.j-lib .jl-pip .jb-shut{background:url(assets/pip/teach-blink.png) center bottom/contain no-repeat!important}
.jl-coursepage .jl-cp-pip .pip-fig span{background:url(assets/pip/read.png) center bottom/contain no-repeat!important}
.jl-coursepage .pip-read,.jl-coursepage .pip-read.go,.jl-coursepage .pip-read.done{background:url(assets/pip/read.png) center bottom/contain no-repeat!important;animation:none!important}
.j-lib .pip-disc .pip-read,.j-lib .pip-disc .pip-read.go,.j-lib .pip-disc .pip-read.done{background:url(assets/pip/read.png) center bottom/contain no-repeat!important;animation:none!important}
main.calm-lesson .jc-pip .jb-open{background:url(assets/pip/teach.png) center bottom/contain no-repeat!important}
main.calm-lesson .jc-pip .jb-shut{background:url(assets/pip/teach-blink.png) center bottom/contain no-repeat!important}
main.calm-lesson .cl-pip-intro .lp-pip-fig span{background:url(assets/pip/teach.png) center bottom/contain no-repeat!important}
.jx-pip{background-image:url(assets/pip/calm.png)!important}
.pip-calm-fig .pm-calm,.pm-calm,.pip-show .pip-pose .pm-calm{background-image:url(assets/pip/calm.png)!important}
.pm-mug,.pip-show .pip-pose .pm-mug{background-image:url(assets/pip/calm.png)!important}
.pm-sleep,.pip-show .pip-pose .pm-sleep{background-image:url(assets/pip/sleep.png)!important}
.pm-hug,.j-notes .pip-mood .pm-hug,.pip-show .pip-pose .pm-hug{background-image:url(assets/pip/heart.png)!important}
.pm-heart{display:none!important}
.pm-up,.pm-up-open,.pm-up-shut{background-image:url(assets/pip/look.png)!important}
.jn-pip-pop{background-image:url(assets/pip/heart.png)!important}
main.calm-lesson .jg-pip-heart{background-image:url(assets/pip/proud.png)!important}
.jn-feel-pip.jf-low{background-image:url(assets/pip/sad.png)!important}
.jn-feel-pip.jf-good{background-image:url(assets/pip/love.png)!important}
.jn-feel-pip.jf-v0{background-image:url(assets/pip/sad.png)!important}
.jn-feel-pip.jf-v1{background-image:url(assets/pip/sleep.png)!important}
.jn-feel-pip.jf-v2{background-image:url(assets/pip/calm.png)!important}
.jn-feel-pip.jf-v3{background-image:url(assets/pip/love.png)!important}
.jn-feel-pip.jf-v4{background-image:url(assets/pip/cheer.png)!important}
.ck-end-l{background-image:url(assets/pip/sad.png)!important}
.ck-end-r{background-image:url(assets/pip/cheer.png)!important}
main.landing .lp-walkline b,.j-home .jh-endwalk b{background-image:url(assets/pip/cheer.png)!important}
.j-lib .pip-walk.done .pw{background:url(assets/pip/look.png) center bottom/contain no-repeat!important}

/* 9 Nov: chapter title and label on one line (size set by jhFit) */
.jh-cover .jh-cov-h,.jh-cover .jh-cov-tx>small{white-space:nowrap;overflow:hidden;display:block;max-width:100%}
/* 9 Nov: One slow minute starts with one tap; a ring around Pip fills up over the four breaths */
.jx-prog{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);transform:rotate(-90deg);pointer-events:none}
.jx-prog circle{fill:none;stroke:#fce5bb;stroke-width:2.5}
.jx-prog .jx-prog-f{stroke:#e5b64f;stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:301.6}
.jx-breath .jx-bstart{margin-top:14px;min-width:160px}
/* 9 Nov: chapter stamps live on Progress, full width like the cards around them */
.j-prog .jn-home-stamps{display:block;width:100%;max-width:none;box-sizing:border-box;margin-left:0;margin-right:0;text-align:left}
/* 9 Nov: the progress ring sits close around Pip */
.jx-prog{inset:auto!important;left:50%!important;top:50%!important;width:118px!important;height:118px!important;margin:-64px 0 0 -59px}
.jx-prog circle{stroke-width:3.5}
/* 9 Nov: on short screens the story card can use more of the height */
@media (max-height:780px){#jx-story:not(.jxs-k-course):not(.jxs-k-worry) .jxs-card{margin:64px 24px auto!important;max-height:calc(100% - 80px)!important}}
/* 9 Nov: Progress opens on a cover photo like the Journal, and every block has the same 12px gap */
.j-prog .jp-cover{position:relative;height:190px;margin:6px 0 14px;border-radius:24px;overflow:hidden;background:#f1ede2 url(assets/landing/hero-sunset-wide.webp) center 60%/cover no-repeat}
.j-prog .jp-cover .jn-cover-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,14,10,.42),rgba(20,14,10,0) 60%)}
.j-prog .jp-cover-tx{position:absolute;left:16px;right:16px;bottom:14px}
.j-prog .jp-cover-tx small{display:block;font-size:.8125rem;font-weight:700;color:#fefcf8;text-shadow:0 1px 8px rgba(20,14,10,.5)}
.j-prog .jp-cover-tx h1{margin:2px 0 0;font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:1.75rem;font-weight:700;line-height:1.1;color:#fefcf8;text-shadow:0 1px 8px rgba(20,14,10,.5)}
.j-prog .jp-cover-tx h1 em{font-style:normal;box-shadow:inset 0 -.32em 0 rgba(238,196,106,.75);text-shadow:none}
.j-prog>section,.j-prog>.jh-card,.j-prog>.jh-week{margin-top:0!important;margin-bottom:12px!important}
.j-prog .jp-hero{margin-bottom:8px!important}
.j-prog .jn-h2{margin:24px 0 10px!important}
.j-prog .jp-sub{margin:-4px 0 10px!important}
/* 9 Nov: short video text sits in the middle of the screen */
#jv .jv-mid{top:50%!important;bottom:auto!important;transform:translateY(-38%)!important}
/* 9 Nov: breathing ring, medium size */
.jx-prog{width:160px!important;height:160px!important;margin:-85px 0 0 -80px}
/* 9 Nov: Pip in the corner of his note */
#jx-story.jxs-k-pipnote .jxs-card{position:relative}
#jx-story .jxs-npip{position:absolute;top:10px;right:12px;height:78px;width:auto;pointer-events:none}
#jx-story.jxs-k-pipnote .jxs-t{padding-right:76px;min-height:58px;box-sizing:border-box}
.jx-prog{z-index:2}
.j-prog .jp-say .jp-go{margin-top:10px}
.j-prog .jp-say{margin-bottom:30px}
/* 9 Nov: ring sits just around the flower when it is fully open */
.jx-prog{width:214px!important;height:214px!important;margin:-107px 0 0 -107px!important}
.jx-prog{width:228px!important;height:228px!important;margin:-114px 0 0 -114px!important}
/* 9 Nov: Your numbers without icons, just the number on a soft brand colour */
.j-prog .jp-stat{justify-content:center;min-height:92px;padding:14px 6px}
.j-prog .jp-stat b{font-size:28px!important;line-height:1.05}
.j-prog .jp-stat:nth-child(3n+1){background:#fce5bb}
.j-prog .jp-stat:nth-child(3n+2){background:#fce3c8}
.j-prog .jp-stat:nth-child(3n){background:#f1ede2}
/* 9 Nov: Pip note headline uses the same type as the quote story */
#jx-story .jxs-hand{font:700 26px/1.2 "Bricolage Grotesque","Hanken Grotesk",sans-serif!important;letter-spacing:-.01em;color:#27201c}
/* 9 Nov: Today's course story looks like the short videos: the text in a bubble in the middle, Pip below it */
#jx-story .jxv2{position:absolute;inset:0}
#jx-story .jxv2-shade{position:absolute;inset:0;background:rgba(20,18,16,.42)}
#jx-story .jxv2-mid{position:absolute;left:28px;right:28px;top:50%;transform:translateY(-38%);display:flex;flex-direction:column;align-items:center;gap:6px}
#jx-story .jxv2-bub{position:relative;width:100%;max-width:340px;box-sizing:border-box;padding:18px 20px;border-radius:22px;background:#fefcf8;color:#27201c;text-align:left}
#jx-story .jxv2-bub:after{content:'';position:absolute;left:50%;bottom:-8px;width:18px;height:18px;margin-left:-9px;background:#fefcf8;transform:rotate(45deg);border-radius:3px}
#jx-story .jxv2-bub b{display:block;margin-bottom:6px;font-size:.875rem;font-weight:700;color:#e5b64f}
#jx-story .jxv2-cap{position:relative;margin:0;font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:1.25rem;font-weight:700;line-height:1.3;color:#27201c}
#jx-story .jxv2-pip{height:170px;width:auto;margin-top:10px;filter:invert(1) brightness(1.15)}
.j-prog .jp-pipb{flex:none;padding:0;border:0;background:none;cursor:pointer}
.j-prog .jp-pipb.hop{animation:pipHop .4s ease-out}
/* 9 Nov: Shorts without Pip; the card sits in the middle of the screen */
#jv .jv-pip{display:none!important}
#jv .jv-bub:after{display:none}
#jv .jv-mid{top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
/* 9 Nov: Pip walking along the bottom of Home */
#jhwalk{position:fixed;left:0;z-index:40;pointer-events:none;transform:translateX(-70px)}
#jhwalk img{display:block;height:58px;width:auto;transform-origin:50% 100%}
/* 9 Nov: Sacha asked to remove the POC button */
#poc{display:none!important}
/* 9 Nov: no Next or Skip buttons in stories (tap to move on). Keep it in your journal is a soft honey row with a bookmark */
#jx-story .jxs-keep{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;margin:10px 0 0;padding:13px 16px;border:0;border-radius:14px;background:#fce5bb;color:#27201c;font:inherit;font-size:1rem;font-weight:700;cursor:pointer}
#jx-story .jxs-keep.kept{cursor:default}

/* 9 Nov: Check-ins tab uses the same few text styles as the Notes tab (card heading like "Your week in happy photos", small grey lines like jn-theme) */
.j-notes .ck-set .ck-set-row b,.j-notes .ck-wk .jn-week-h b{font-size:14px!important;font-weight:600!important;line-height:21px!important;color:rgb(90,80,68)!important}
.j-notes .ck-set .ck-set-row small{display:block;margin-top:2px;font-size:13px!important;line-height:19.5px!important;color:rgb(111,103,93)!important}
.j-notes .ck-wk>p:not(.jn-theme){margin:6px 0 0;font-size:15px!important;font-weight:400!important;line-height:22.5px!important;color:#27201c!important}
.j-notes .ck-wk>p:not(.jn-theme) b{font-size:15px!important;font-weight:700!important;line-height:22.5px!important;color:#27201c!important}
.j-notes .ck-wk .ck-opt b{font-size:15px!important;font-weight:700!important;line-height:22.5px!important}
.j-notes .ck-wk .ck-opt span{font-size:13px!important;line-height:19.5px!important;color:rgb(111,103,93)!important}
.j-notes .ck-wk .jn-theme{font-size:13px!important;line-height:19.5px!important;color:rgb(111,103,93)!important}
.j-notes .jn-empty p{font-size:15px!important;line-height:22.5px!important;color:#27201c!important}
/* 9 Nov: Pip on the journal cover */
.jn-cover .jn-pipbtn{flex:none;align-self:flex-end;margin:0 -4px -6px 0;padding:0;border:0;background:none;cursor:pointer}
.jn-cover .jn-pipbtn img{display:block;height:78px;width:auto;filter:invert(1) brightness(1.15)}
.jn-cover .jn-pipsay{position:absolute;right:14px;bottom:104px;z-index:2;max-width:220px;margin:0;padding:10px 12px;border-radius:16px;background:#fefcf8;color:#27201c;font-size:14px;font-weight:600;line-height:20px}
.jn-cover .jn-pipsay:after{content:'';position:absolute;right:32px;bottom:-6px;width:12px;height:12px;background:#fefcf8;transform:rotate(45deg);border-radius:2px}
.jn-cover .jn-pipbtn img{height:96px}
.jn-cover .jn-pipsay{bottom:116px}
/* 9 Nov: the two journal cards keep to two lines: title and one short line */
.jn-act2-t b,.jn-act2-t small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jn-act2-t{min-width:0}
/* 9 Nov: What we noticed lines sit close together */
.j-notes .ck-wk>p:not(.jn-theme){margin-top:0!important}
.j-notes .ck-wk>p:not(.jn-theme)+p:not(.jn-theme){margin-top:-6px!important}
/* 9 Nov: What we noticed shows the Home feelings circle, set to the feeling you had most. Display only */
.j-notes .ck-wk-dial{margin:4px 0 6px;pointer-events:none}
.j-notes .ck-wk-dial .ck-wk-k{display:block;font-size:13px;line-height:19.5px;color:rgb(111,103,93)}
.j-notes .ck-wk-dial .ck-note{margin:2px 0 0;font-size:13px;line-height:19.5px;color:rgb(111,103,93)}

/* 9 Nov: Save to your journal (Three good things and the other written exercises) is the same honey row with the journal pen as Keep it in your journal */
.ck-acts .jxs-keep{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;margin:10px 0 0;padding:13px 16px;border:0;border-radius:14px;background:#fce5bb;color:#27201c;font:inherit;font-size:1rem;font-weight:700;cursor:pointer}
/* 9 Nov: Pip's bubble when you tap him anywhere. Same text style and paper color as his bubble on the journal cover, with a thin line so it shows on cream */
.pip-say{position:fixed;z-index:1000;max-width:240px;margin:0;padding:10px 12px;border-radius:16px;background:#fefcf8;box-shadow:0 0 0 1px #e9e2d6;color:#27201c;font-size:14px;font-weight:600;line-height:20px;pointer-events:none}
.pip-say.pip-say-walk{position:absolute;left:-20px;bottom:66px;width:max-content;max-width:200px}
#jhwalk img{pointer-events:auto;cursor:pointer}
.j-home .jh-endwalk b{cursor:pointer}
/* 9 Nov: Pip in the corner of his note can be tapped, so he can speak */
#jx-story .jxs-npip{pointer-events:auto!important;z-index:2;cursor:pointer}
#jx-story .jxv2-pip{position:relative;z-index:2;cursor:pointer}
/* 9 Nov: Progress cover is a person walking along a ridge under a blue and pink sky (Unsplash fRggLY1DQTM, free) instead of the orange sunset */
.j-prog .jp-cover{background-image:url(assets/landing/progress-ridge.jpg);background-position:62% 55%}
/* 9 Nov: between Psychology.com and Learn, a small honey circle instead of the dot sign */
.pc-logo .pc-dot,.brand .brand-dot,.j-auth-brand .brand-dot{display:inline-block;width:6px;height:6px;margin:0 7px!important;border-radius:50%;background:#eec46a;font-size:0!important;line-height:0;color:transparent!important;vertical-align:middle;position:relative;top:-1px}
.pc-logo .pc-dot{margin:0 -1px!important;align-self:center;top:0}
/* 9 Nov: Pip turning a page at the bottom of the Journal (frames from assets/landing/pip-read.png) */
.jn-endread{display:flex;justify-content:center;margin:18px 0 4px}
.jn-endread i{display:block;width:90px;height:127px;background:url(assets/landing/pip-read.png?v=3) 0 0/900px 127px no-repeat;cursor:pointer}
.jn-endread.go i{animation:jnEndRead 3.2s steps(9) .3s 1 forwards}
@keyframes jnEndRead{from{background-position:0 0}to{background-position:-810px 0}}
@media (prefers-reduced-motion:reduce){.jn-endread.go i{animation:none;background-position:-810px 0}}
body.reduce-motion .jn-endread.go i{animation:none;background-position:-810px 0}
/* 9 Nov: mood circle in the Journal */
.jn-ask{margin:0 0 14px}
/* 9 Nov: new chapter stamps are pictures; not earned yet is faded */
img.jn-stamp2{display:block;object-fit:contain}
img.jn-stamp2.off{filter:none;opacity:.3}
/* 9 Nov: stamped rows keep the plain card color; the honey stamp itself shows it is done */
.j-notes .jn-stamps-list li.got{background:#fbf5ea}
/* 9 Nov: the Learn underline sits at the bottom of the word, like the date and titles */
.pc-logo .pc-learn{background:none!important;line-height:1.3!important;box-shadow:inset 0 -.32em 0 rgba(238,196,106,.75)}
/* 9 Nov: What we noticed, compact */
.ck-wk2{gap:8px}
.ck-wk2 .ck-wk-dial{margin:0}
.ck-wk2 .ck-wk-dial .ck-dial{zoom:.5;flex:none}
.ck-wk2 .ck-wk-dial .ck-dialrow{gap:14px;align-items:center}
.ck-wk2-days{display:flex;justify-content:space-between;padding:10px 12px;border-radius:14px;background:#fefcf8}
.ck-wk2-d{display:flex;flex-direction:column;align-items:center;gap:4px}
.ck-wk2-d i{display:block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #e9e2d6}
.ck-wk2-d i[style]{box-shadow:none}
.ck-wk2-d small{font-size:13px;line-height:19.5px;color:rgb(111,103,93)}
.ck-wk2-d.now small{font-weight:700;color:#27201c}
.ck-wk2 p.ck-wk2-l{margin:0!important;font-size:15px!important;line-height:22.5px!important;color:#27201c!important}
.ck-wk2-pt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:14px;background:#fefcf8}
.ck-wk2-pt p{margin:0;font-size:15px;line-height:22.5px;color:#27201c}
.ck-wk2-dots{flex:none;display:grid;grid-template-columns:repeat(4,8px);gap:3px;margin-top:6px}
.ck-wk2-dots i{display:block;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #e9e2d6}
.ck-wk2-dots i.on{background:#eec46a;box-shadow:none}
.ck-wk2 .ck-pt-h{margin-top:4px!important}
.ck-wk2-box{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:#fefcf8}
/* 9 Nov: What we noticed v3. Label 13/400 grey, value 15/700 ink, body 15/400 ink. Gap 10, boxes 12px 14px, radius 14 */
.j-notes .cw{display:flex;flex-direction:column;gap:10px}
.j-notes .cw .jn-week-h{margin:0}
.cw .cw-k{display:block;margin:0;font-size:13px;font-weight:400;line-height:19.5px;color:#6f675d}
.cw .cw-v{display:block;margin:0;font-size:15px;font-weight:700;line-height:22.5px;color:#27201c}
.cw .cw-b{margin:0;font-size:15px;font-weight:400;line-height:22.5px;color:#27201c}
.cw .cw-box{margin:0;padding:12px 14px;border:0;border-radius:14px;background:#fefcf8;text-align:left;font:inherit}
.cw-top{display:flex;align-items:center;gap:12px}
.cw-face{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fefcf8;box-shadow:inset 0 0 0 4px var(--feel)}
.cw-face i{display:block;width:36px;height:40px;background:center/contain no-repeat}
.cw-days{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center;gap:4px}
.cw-d{display:flex;flex-direction:column;align-items:center;gap:4px}
.cw-d i{display:block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #e9e2d6}
.cw-d i[style]{box-shadow:none}
.cw-d small{font-size:13px;line-height:19.5px;color:#6f675d}
.cw-d.now small{font-weight:700;color:#27201c}
.cw-keys{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding-top:10px;border-top:1px solid #e9e2d6}
.cw-keys span{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:19.5px;color:#27201c}
.cw-keys i{width:10px;height:10px;border-radius:50%}
.cw-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cw-grid .cw-box{display:flex;flex-direction:column;justify-content:space-between;gap:2px}
.cw .cw-sec{margin-top:4px}
.cw-pt{display:grid;grid-template-columns:44px 1fr;align-items:start;gap:10px}
.cw-dots{display:grid;grid-template-columns:repeat(3,10px);gap:4px;padding-top:6px}
.cw-dots i{display:block;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #e9e2d6}
.cw-dots i.on{background:#eec46a;box-shadow:none}
.cw .cw-ch{display:flex;flex-direction:column;gap:2px;width:100%;box-shadow:inset 0 0 0 1.5px #ecdcbc;cursor:pointer}
.cw .cw-foot{margin-top:2px}
/* 9 Nov: Progress cover is the man on a mountain top at sunset (Unsplash 6D6omiCxHWM, free), Sacha's pick */
.j-prog .jp-cover{background-image:url(assets/landing/journal-summit.jpg);background-position:center 55%}
.cw-pt{grid-template-columns:52px 1fr!important}
.cw-dots{grid-template-columns:repeat(4,10px)!important;gap:3px!important}
.j-notes .cw .jn-week-h small{font-size:13px;line-height:19.5px;color:#6f675d}
.cw-d.now small{font-weight:400!important;color:#27201c}
.cw-d.now i:not([style]){box-shadow:inset 0 0 0 1.5px #27201c}
/* 9 Nov: Pip on Progress stands on a small honey floor */
.j-prog .jp-pipb{position:relative}
.j-prog .jp-pipb .jp-hero-pip{position:relative;z-index:1}
.j-prog .jp-pipb::after{content:"";position:absolute;left:50%;bottom:-3px;width:84px;height:14px;margin-left:-42px;border-radius:50%;background:#eec46a;opacity:.55}
.j-prog .jp-pipb::after{bottom:2px;z-index:0}
.j-prog .jp-pipb::after{width:46px;height:8px;margin-left:-23px;bottom:4px;opacity:.85}
/* 9 Nov: chapter suggestion as a honey button; period date */
.cw .cw-go{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;margin:0;padding:12px 14px;border:0;border-radius:14px;background:#fce5bb;color:#27201c;font:inherit;font-size:15px;font-weight:700;line-height:22.5px;text-align:left;cursor:pointer}
.ck-per-in{display:block;width:100%;box-sizing:border-box;margin:6px 0 4px;padding:12px 14px;border:1.5px solid #e9e2d6;border-radius:14px;background:#fefcf8;color:#27201c;font:inherit;font-size:15px}
/* 9 Nov: check-in picture cards (same three text styles as What we noticed) */
.j-notes .ckc-h{margin:18px 0 10px;font-size:14px;font-weight:600;line-height:21px;color:#5a5044}
.j-notes .ckc{display:flex;align-items:flex-start;gap:12px;margin:0 0 10px;padding:12px 14px;border-radius:18px;background:#fbf5ea}
.ckc .cw-k{display:block;margin:0;font-size:13px;font-weight:400;line-height:19.5px;color:#6f675d}
.ckc .cw-v{display:block;margin:0;font-size:15px;font-weight:700;line-height:22.5px;color:#27201c}
.ckc .cw-b{margin:6px 0 0;font-size:15px;font-weight:400;line-height:22.5px;color:#27201c}
.ckc-m{flex:1;min-width:0}
.ckc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ckc-tags span{padding:2px 10px;border-radius:999px;background:#fefcf8;font-size:13px;line-height:19.5px;color:#27201c}
.ckc .ckc-ed{flex:none;font-size:13px}
.ckc-tags span{border-radius:8px!important}
.j-notes .ckc-h{font-family:'Hanken Grotesk',system-ui,sans-serif}
/* 9 Nov: Results in two columns: photo on top, words below */
.j-notes .jy-tiles{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
.j-notes .jy-tiles .jy-tile{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin:0!important;padding:10px!important;min-width:0}
.j-notes .jy-tiles .jy-tile .jy-pic{width:100%!important;height:auto!important;aspect-ratio:4/3;margin:0!important;flex:none}
.j-notes .jy-tiles .jy-tile .jy-tx{min-width:0;padding:0 2px 2px}
.j-notes .jy-tiles .jy-tile .jy-tx b{font-size:17px!important;line-height:1.2!important;overflow-wrap:anywhere}
.j-notes .jy-tiles .jy-tile .jy-pic{aspect-ratio:auto!important;height:96px!important;border-radius:12px}
.j-notes .jy-tiles .jy-tile .jy-tx b{font-size:inherit!important;line-height:inherit!important}
/* 9 Nov: tighter Results tiles */
.j-notes .jy-tiles .jy-tile .jy-tx b{line-height:1.15!important;margin-top:4px!important}
.j-notes .jy-tiles .jy-tile .jy-tx small{margin-top:0!important}
.j-notes .jy-tiles .jy-tile .jy-tx span{margin-top:6px!important}
.j-notes .jy-tiles .jy-tile{gap:8px!important}
/* 9 Nov: stamps sit on the page, no card behind them; the Stamps tab is a list with thin lines */
.jn-home-stamps,.j-prog .jn-home-stamps,.j-notes .jn-home-stamps{background:none!important;box-shadow:none!important;border:0!important;padding-left:0!important;padding-right:0!important}
.j-notes .jn-stamps-list ul{gap:0!important}
.j-notes .jn-stamps-list li,.j-notes .jn-stamps-list li.got{background:none!important;border-radius:0!important;padding:12px 0!important;border-bottom:1px solid #e9e2d6}
.j-notes .jn-stamps-list li:last-child{border-bottom:0}
.j-notes .jn-stamps-list li{padding:8px 0!important}
.j-notes .jn-stamps-list li .jn-st-go{padding-top:0!important;padding-bottom:0!important;min-height:0!important}
/* 9 Nov: Progress photo v2 */
.j-prog .jp-cover2{height:440px!important}
.j-prog .jp-cover2 .jn-cover-shade{background:linear-gradient(to top,rgba(20,14,10,.62),rgba(20,14,10,.18) 55%,rgba(20,14,10,0))!important}
.j-prog .jp-cov-pip{display:flex;align-items:flex-end;gap:12px;margin:0 0 16px}
.j-prog .jp-cov-pip .jp-pipb::after{display:none}
.j-prog .jp-cov-pip .jp-hero-pip{height:96px;filter:invert(1) brightness(1.15)}
.j-prog .jp-cov-pip .jp-say{flex:1;margin:0;padding:12px 14px;border:1.5px solid #fefcf8;border-radius:16px;background:none}
.j-prog .jp-cov-pip .jp-say p{margin:0;font-size:15px;font-weight:700;line-height:22.5px;color:#fefcf8}
.j-prog .jp-cov-pip .jp-say .jp-go{margin-top:10px}
.j-prog .jp-cover2 .jp-cov-st{margin-top:4px}
.j-prog .jn-home-stamps .jn-st-top{display:none!important}
.j-prog .jn-home-stamps{margin-top:2px}
.j-prog .jp-cov-pip .jp-say::before,.j-prog .jp-cov-pip .jp-say::after{display:none!important}
.j-prog .jp-cov-pip .jp-say{flex:0 1 auto;max-width:200px}
.j-prog .jp-cover2{background-position:center 85%!important}
.j-prog .jp-cover2{background-position:38% center!important}
.j-prog .jp-cover2{background-position:4% center!important}
/* 9 Nov: Progress photo v3. Date, title and stamps at the top left; Pip at the bottom left with his bubble above him */
.j-prog .jp-cover2 .jp-cover-tx{top:18px;bottom:auto!important;left:18px;right:18px}
.j-prog .jp-cover2 .jn-cover-shade{background:linear-gradient(to bottom,rgba(20,14,10,.5),rgba(20,14,10,0) 38%,rgba(20,14,10,0) 55%,rgba(20,14,10,.45))!important}
.j-prog .jp-cover2 .jp-cov-pip{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0}
.j-prog .jp-cover2 .jp-cov-pip .jp-say{order:-1;position:relative;max-width:230px}
.j-prog .jp-cover2 .jp-cov-pip .jp-say::after{content:""!important;display:block!important;position:absolute;left:30px;bottom:-8px;width:13px;height:13px;border-right:1.5px solid #fefcf8;border-bottom:1.5px solid #fefcf8;transform:rotate(45deg);background:none}
.j-prog .jp-cover2 .jp-cov-pip .jp-say::before{display:none!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-hero-pip{height:84px}
.j-prog .jp-cover2{background-position:30% center!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-say{max-width:196px}
.j-prog .jp-cover2{background-position:8% center!important}
/* 9 Nov: stamps row on the Progress photo, under the count; photo taller */
.j-prog .jp-cover2{height:520px!important}
.j-prog .jp-cov-stamps{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;border:0;background:none;cursor:pointer}
.j-prog .jp-cov-stamps .jn-st{display:block}
.j-prog .jp-cov-stamps img.jn-stamp2.off{filter:invert(1) brightness(1.2);opacity:.45}
.j-prog .jp-cover2{background-position:47% center!important}
.j-prog .jp-cover2{background-position:37% center!important}
/* 9 Nov: Progress photo, one 20px margin for everything, even spacing */
.j-prog .jp-cover2 .jp-cover-tx{top:20px!important;left:20px!important;right:20px!important;bottom:auto!important}
.j-prog .jp-cover2 .jp-cover-tx small{margin:0!important}
.j-prog .jp-cover2 .jp-cover-tx h1{margin:4px 0 0!important}
.j-prog .jp-cover2 .jp-cov-st{margin-top:6px!important}
.j-prog .jp-cover2 .jp-cov-stamps{margin-top:12px!important;gap:8px!important}
.j-prog .jp-cover2 .jp-cov-pip{left:20px!important;right:20px!important;bottom:20px!important;gap:12px!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-say{padding:14px 16px!important;border-radius:18px!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-say .jp-go{margin-top:12px!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-say::after{left:24px!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-pipb,.j-prog .jp-cover2 .jp-cov-pip>img{margin-left:-4px}
/* 9 Nov: Pip's bubble on Progress is round, with two small circles down to him instead of a triangle */
.j-prog .jp-cover2 .jp-cov-pip .jp-say{border-radius:30px!important;padding:16px 20px!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-say::after{content:""!important;display:block!important;position:absolute;left:30px!important;bottom:-14px;width:10px;height:10px;border:1.5px solid #fefcf8!important;border-radius:50%;transform:none!important;background:none}
.j-prog .jp-cover2 .jp-cov-pip .jp-say::before{content:""!important;display:block!important;position:absolute;left:24px;bottom:-24px;width:6px;height:6px;border:1.5px solid #fefcf8;border-radius:50%;background:none}
.j-prog .jp-cover2 .jp-cov-pip{gap:20px!important}
/* 9 Nov: Psychology.com and Learn a bit bigger in the top bar */
.pc-logo .pc-name,.pc-logo .pc-learn{font-size:.9375rem!important}
/* 9 Nov: Pip's bubble on the Journal cover matches Progress: round, white outline, white text, two small circles down to him */
.jn-cover .jn-pipsay{background:rgba(20,14,10,.18)!important;border:1.5px solid #fefcf8;border-radius:30px!important;padding:14px 18px!important;color:#fefcf8!important;font-size:15px!important;font-weight:700!important;line-height:22.5px!important;max-width:210px!important;bottom:124px!important}
.jn-cover .jn-pipsay::after{content:""!important;position:absolute;right:46px!important;left:auto!important;bottom:-14px!important;width:10px!important;height:10px!important;border:1.5px solid #fefcf8;border-radius:50%!important;background:none!important;transform:none!important}
.jn-cover .jn-pipsay::before{content:"";position:absolute;right:40px;bottom:-24px;width:6px;height:6px;border:1.5px solid #fefcf8;border-radius:50%;background:none}
.jn-cover .jn-pipsay{bottom:108px!important;top:auto!important;padding:12px 16px!important}
.jn-cover .jn-pipsay::after{bottom:-12px!important}
.jn-cover .jn-pipsay::before{bottom:-21px!important}
/* 9 Nov: Pip's bubbles are a playful, slightly uneven round shape */
.j-prog .jp-cover2 .jp-cov-pip .jp-say,.jn-cover .jn-pipsay{border-radius:58% 42% 52% 48% / 46% 54% 46% 54%!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-say{padding:20px 26px 22px!important}
.jn-cover .jn-pipsay{padding:16px 22px 18px!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-say,.jn-cover .jn-pipsay{border-radius:38px 26px 42px 30px / 30px 40px 28px 36px!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-say{padding:18px 22px 20px!important}
.jn-cover .jn-pipsay{padding:14px 20px 16px!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-say,.jn-cover .jn-pipsay{border-radius:52px 30px 56px 34px / 38px 52px 32px 46px!important}
/* 9 Nov: when Pip only talks (no button), his bubble is round, almost a circle */
.j-prog .jp-cover2 .jp-cov-pip .jp-say:not(:has(.jp-go)),.jn-cover .jn-pipsay{border-radius:50%!important;text-align:center}
.j-prog .jp-cover2 .jp-cov-pip .jp-say:not(:has(.jp-go)){padding:26px 30px!important;max-width:200px}
.jn-cover .jn-pipsay{padding:20px 28px!important;max-width:200px!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-say:not(:has(.jp-go))::after{left:40px!important}
.j-prog .jp-cover2 .jp-cov-pip .jp-say:not(:has(.jp-go))::before{left:30px!important}
.jn-cover .jn-pipsay{max-width:250px!important;padding:16px 28px!important}
.jn-cover .jn-pipsay{max-width:280px!important;padding:14px 30px!important}
/* 9 Nov: the stamps count sits closer to the stamps than to the title */
.j-prog .jp-cover2 .jp-cov-st{margin-top:16px!important}
.j-prog .jp-cover2 .jp-cov-stamps{margin-top:6px!important}
/* 9 Nov: Home stamps sit on the page, no card behind them */
.j-home:not(.j-notes):not(.j-prog) .jh-track{background:none!important;box-shadow:none!important;border:0!important;padding-left:0!important;padding-right:0!important}
/* 9 Nov: stamps light up during the tour */
.jp-cov-stamps img.jt-lit{animation:jtLit .35s ease-out}
@keyframes jtLit{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.jp-cov-stamps img.jt-lit{animation:none}}
/* 9 Nov: stamps count belongs to the stamps: 18px above it, 6px below */
.j-prog .jp-cover2 .jp-cover-tx small.jp-cov-st{display:block;margin:18px 0 0!important}
.j-prog .jp-cover2 .jp-cover-tx small.jp-cov-st{font-size:12px!important;line-height:18px!important;font-weight:600!important;opacity:.9}
/* 9 Nov: the three big titles share one size: Home chapter title, Your progress, the Journal date (28px Bricolage 700; Home still shrinks a long title to fit one line) */
.j-prog .jp-cover-tx h1,.j-notes .jn-cover .jn-today b{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif!important;font-size:1.75rem!important;font-weight:700!important;line-height:1.1!important}
main.j-home .jh-cover .jh-cov-h{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;font-size:1.75rem;font-weight:700;line-height:1.1}
/* 9 Nov: the profile button is a honey circle with a black letter, like the + */
.jp-avatar span{background:#eec46a!important;color:#27201c!important;font-weight:700!important;width:26px!important;height:26px!important}
/* 9 Nov: Learn's honey line overlaps the bottom third of the word, like the logo and 'progress' */
.pc-logo .pc-learn{line-height:1!important;padding:0 2px!important;box-shadow:inset 0 -.34em 0 rgba(238,196,106,.75)!important;background:none!important}
.pc-logo .pc-learn{display:inline-block!important;box-shadow:none!important;background:linear-gradient(rgba(238,196,106,.8),rgba(238,196,106,.8)) 0 calc(100% - .16em)/100% .34em no-repeat!important}
.jp-signin-acts{display:flex;flex-direction:column;gap:10px;margin:16px 0 6px}
.jp-signin-acts .btn.google{display:flex;align-items:center;justify-content:center;gap:10px;background:#fefcf8}
/* 9 Nov: Your numbers on one band from screen edge to screen edge, no separate tiles; thin lines between */
.j-prog .jp-stats{width:100vw;margin-left:calc(50% - 50vw)!important;margin-right:0!important;box-sizing:border-box;padding:6px 12px!important;border-radius:0!important;background:#fce5bb!important;gap:0!important;max-width:none!important}
.j-prog .jp-stat,.j-prog .jp-stat:nth-child(3n+1),.j-prog .jp-stat:nth-child(3n+2),.j-prog .jp-stat:nth-child(3n){background:none!important;border-radius:0!important;box-shadow:none!important;min-height:88px}
html,body{overflow-x:hidden}
/* 9 Nov: Progress photo from screen edge to screen edge */
.j-prog .jp-cover2{width:100vw;margin-left:calc(50% - 50vw)!important;margin-right:0!important;margin-top:0!important;border-radius:0!important;max-width:none!important}
/* 9 Nov: Progress opens on a full-screen photo: from the very top to the menu */
.j-prog .jp-cover2 .jp-cover-tx{top:calc(20px + env(safe-area-inset-top,0px))!important}
/* 9 Nov: Your numbers smaller and calmer: one yellow band, no lines */
.j-prog .jp-stats{padding:14px 12px!important;row-gap:14px!important}
.j-prog .jp-stat{min-height:0!important;padding:4px 4px!important;gap:2px}
.j-prog .jp-stat b{font-size:22px!important;line-height:1.1!important}
.j-prog .jp-stat small{font-size:12px!important;line-height:1.3!important}
/* 9 Nov: more room at the sides of Your numbers, and above and below the week dots */
.j-prog .jp-stats{padding:16px 20px!important}
.j-prog .jp-week{margin-top:22px!important;margin-bottom:22px!important}
/* 9 Nov: numbers in deep honey on a linen band */
.j-prog .jp-stats{background:#f1ede2!important}
.j-prog .jp-stat b{color:#c99a3b!important}
/* 9 Nov: All photos sits in the happy photos card, top right; not on its own below */
.jn-collage .jn-col-all{display:none!important}
.jn-week-h .jn-wk-all{font-size:13px;font-weight:700;color:#93641f;padding:0}
main:has(.jn-wk-all) .jn-allph-line{display:none!important}
/* 9 Nov: Progress photo starts at the very top of the page, with more room above the date */
.j-prog .jp-cover2{margin-top:-16px!important}
.j-prog .jp-cover2 .jp-cover-tx{top:calc(36px + env(safe-area-inset-top,0px))!important}
/* 9 Nov: each number in a white circle, honey number, label below */
.j-prog .jp-stats{row-gap:16px!important;padding:20px 16px!important}
.j-prog .jp-stat{display:flex!important;flex-direction:column;align-items:center;gap:6px!important}
.j-prog .jp-stat b{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fefcf8;color:#c99a3b!important;font-size:20px!important;line-height:1!important}
.j-prog .jp-stat b .jp-of{font-size:12px;font-weight:700;margin-left:1px}
.j-prog .jp-stat b{grid-auto-flow:column;align-items:baseline;align-content:center}
.j-prog .jp-stat b{display:flex!important;align-items:center;justify-content:center}
.j-prog .jp-stat b .jp-of{margin:4px 0 0 1px}
/* 9 Nov: Your numbers v3: one ring for chapters, the rest a short list. No tiles, no band */
.j-prog .jp-nums{display:grid;grid-template-columns:112px 1fr;align-items:center;column-gap:18px;row-gap:18px;margin:4px 0 8px}
.jp-ring{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#eec46a calc(var(--p)*1%),#f1ede2 0)}
.jp-ring>div{width:88px;height:88px;border-radius:50%;background:#fefcf8;display:flex;flex-direction:column;align-items:center;justify-content:center}
.jp-ring b{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;font-size:28px;font-weight:700;line-height:1;color:#27201c}
.jp-ring small{font-size:13px;line-height:19.5px;color:#6f675d}
.jp-ring-tx b{display:block;font-size:15px;font-weight:700;line-height:22.5px;color:#27201c}
.jp-ring-tx small{display:block;font-size:13px;line-height:19.5px;color:#6f675d}
.j-prog .jp-list{grid-column:1/-1;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.j-prog .jp-list li{display:flex;align-items:baseline;gap:8px}
.j-prog .jp-list b{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;font-size:20px;font-weight:700;line-height:1.1;color:#c99a3b;min-width:34px}
.j-prog .jp-list span{font-size:13px;line-height:19.5px;color:#6f675d}
/* 9 Nov: Pip's chapter reward */
.jg-reward{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:6px 0 10px}
.jg-rw-pip{height:96px;width:auto;animation:pipHop .5s ease-out .5s 1 both}
.jg-rw-say{position:relative;margin:0 0 40px;padding:12px 18px;border:1.5px solid #27201c;border-radius:50%;font-size:15px;font-weight:700;line-height:22.5px;color:#27201c;max-width:190px;text-align:center}
.jg-rw-say::after{content:"";position:absolute;left:-12px;bottom:6px;width:9px;height:9px;border:1.5px solid #27201c;border-radius:50%}
@media (prefers-reduced-motion:reduce){.jg-rw-pip{animation:none}}
/* 9 Nov: heart coin for pips, star coin for tokens */
img.jp-coin{display:block;object-fit:contain}
.jp-week i:has(img.jp-coin){background:none!important;box-shadow:none!important;overflow:visible}
.jp-week i img.jp-coin{width:118%;height:118%;margin:-9%}
img.jp-token.jp-coin{width:44px;height:44px}
.jp-tok img.jp-token.jp-coin,img.jp-token.jp-coin{width:40px!important;height:40px!important}
.j-prog .jp-nums{padding:0 14px}
.j-prog .jp-list b{min-width:0!important}
.j-prog .jp-list li{gap:6px!important}
.j-prog .jp-list span{white-space:nowrap}
.j-prog .jp-list{column-gap:12px!important}
/* 9 Nov: every stamp has the honey fill; not earned yet is faded */
img.jn-stamp2.off{opacity:.38!important;filter:none!important}
.j-prog .jp-cov-stamps img.jn-stamp2.off{filter:none!important;opacity:.55!important}
/* 9 Nov: reward Pips hop once */
.j-prog .jp-rw.hopped .jp-rw-i.got img{animation:pipHop .5s ease-out both}
@media (prefers-reduced-motion:reduce){.j-prog .jp-rw.hopped .jp-rw-i.got img{animation:none}}
/* 9 Nov: stamps have no fill inside (the color behind shows through); only on the Progress photo they keep it */
img.jn-stamp2.off{opacity:.35!important}
/* 9 Nov: Journal cover from screen edge to screen edge, from the top */
.j-notes .jn-cover{width:100vw;margin-left:calc(50% - 50vw)!important;margin-right:0!important;margin-top:-16px!important;border-radius:0!important;max-width:none!important;box-sizing:border-box}
.j-notes .jn-cover .jn-today{padding-left:4px;padding-right:4px}
.j-notes .jn-cover{margin-top:6px!important}
/* 9 Nov: Pip's rewards use the hand-stamped icons (first row of the stamp sheet) */
.j-prog .jp-rw-i img.jp-rw-stamp{width:72px!important;height:72px!important;object-fit:contain;margin:6px auto 8px}
.j-prog .jp-rw-i:not(.got) img.jp-rw-stamp{opacity:.35;filter:none!important}
/* 9 Nov: in a full-screen app the Progress photo runs up behind the status bar; the text stays below it (safe area) */
.j-prog .jp-cover2{margin-top:calc(-16px - env(safe-area-inset-top,0px))!important;height:calc(520px + env(safe-area-inset-top,0px))!important}
.j-prog .jp-cover2 .jp-cover-tx{top:calc(36px + env(safe-area-inset-top,0px))!important}
/* 9 Nov: Learn's line sits lower: only its top third overlaps the bottom of the letters */
.pc-logo .pc-learn{padding-bottom:.12em!important;background-position:0 calc(100% - .02em)!important;background-size:100% .3em!important}
/* 9 Nov: Profile screen */
.j-prof .jpf-h{margin:18px 0 14px}
.jpf-me{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.jpf-av{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#eec46a;color:#27201c;font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;font-size:28px;font-weight:700}
.jpf-me b{display:block;font-size:20px;font-weight:700;line-height:1.2;color:#27201c}
.jpf-me small{display:block;font-size:13px;line-height:19.5px;color:#6f675d}
.jpf-sign{margin:0 0 22px;padding:16px;border-radius:18px;background:#fbf5ea}
.jpf-sign p{margin:0 0 12px;font-size:15px;line-height:22.5px;color:#27201c}
.jpf-sec{margin:20px 0 4px;font-size:13px;font-weight:700;line-height:19.5px;color:#6f675d;letter-spacing:.02em}
.jpf-list{display:flex;flex-direction:column}
.jpf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 0;border:0;border-bottom:1px solid #e9e2d6;background:none;font:inherit;text-align:left;color:#27201c;cursor:pointer}
.jpf-row:last-child{border-bottom:0}
.jpf-row b{display:block;font-size:15px;font-weight:700;line-height:22.5px}
.jpf-row small{display:block;font-size:13px;line-height:19.5px;color:#6f675d}
.jpf-row svg{flex:none;color:#93641f}
.jpf-tog{flex:none;position:relative;width:44px;height:26px;border-radius:13px;background:#e9e2d6;transition:background .2s}
.jpf-tog::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fefcf8;transition:left .2s}
.jpf-tog.on{background:#eec46a}.jpf-tog.on::after{left:21px}
.jpf-note{margin:22px 0 8px;font-size:13px;line-height:19.5px;color:#6f675d}
.j-prof .jpf-h{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif!important;font-size:1.75rem!important;font-weight:700!important;line-height:1.1!important;color:#27201c}
.j-prof .jpf-h em{font-style:normal;box-shadow:inset 0 -.32em 0 rgba(238,196,106,.75)}
.j-prof .jpf-sec{font-family:'Hanken Grotesk',system-ui,sans-serif!important}
/* 9 Nov: profile picture and notifications */
.jpf-av{position:relative;border:0;padding:0;cursor:pointer;background-size:cover!important;background-position:center!important}
.jpf-av.pic{background-color:#f1ede2}
.jpf-cam{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fefcf8;box-shadow:0 0 0 2px #fefcf8,0 1px 4px rgba(39,32,28,.18)}
.jp-avatar span.pic{background-size:cover!important;background-position:center!important}
.jpf-note-s{margin:8px 0 0!important}
/* 9 Nov: Home chapter card runs from screen edge to screen edge (left and right only) */
main.j-home:not(.j-notes):not(.j-prog):not(.j-prof) .jh-cover{width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:0!important;border-radius:0!important;max-width:none!important;box-sizing:border-box}
/* 9 Nov: no hearts in the week row; a done day is just a honey circle */
.j-prog .jp-week .jp-flame{display:none!important}
/* 9 Nov: Start your first lesson is the same small button as Start lesson 1 */
.j-home .jh-cov-first .jh-cov-go{display:block!important;width:auto!important;padding:10px 18px!important;font-size:14px!important;font-weight:700!important;line-height:21px!important;text-align:center}
.j-home .jh-cov-first .jh-cov-meta{display:flex!important;justify-content:space-between!important;align-items:center!important}
/* 9 Nov: no week row under the Progress photo */
.j-prog .jp-week{display:none!important}
/* 9 Nov: By topic on one band from screen edge to screen edge, rows without their own boxes */
.j-prog .jp-topics2{width:100vw;margin-left:calc(50% - 50vw)!important;box-sizing:border-box;padding:18px 30px!important;gap:16px!important;background:#f6efe3;border-radius:0}
.j-prog .jp-topic2{padding:0!important;border-radius:0!important;background:none!important}
/* 10 Nov: Start your first lesson sits on the left of the card */
.j-home .jh-cov-first .jh-cov-meta{justify-content:flex-start!important}
.j-home .jh-cov-first .jh-cov-meta>span:first-child:empty{display:none}
.j-home .jh-cov-first .jh-cov-meta{display:flex!important;justify-content:flex-start!important;text-align:left!important}
.j-home .jh-cov-first .jh-cov-go{margin:0!important;align-self:flex-start}
/* 10 Nov: chapters done as a progress bar; four numbers below in 2 by 2 */
.j-prog .jp-nums{display:block!important}
.jp-chbar{margin:0 0 16px}
.jp-chbar-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.jp-chbar-h b{font-size:15px;font-weight:700;line-height:22.5px;color:#27201c}
.jp-chbar-h small{font-size:13px;line-height:19.5px;color:#6f675d}
.jp-chbar-t{display:block;height:10px;border-radius:5px;background:#f1ede2;overflow:hidden}
.jp-chbar-t i{display:block;height:100%;border-radius:5px;background:#eec46a;min-width:10px}
/* 10 Nov: Your numbers on one clay band from edge to edge; numbers in white circles */
.j-prog .jp-nums{width:100vw!important;margin-left:calc(50% - 50vw)!important;box-sizing:border-box;padding:22px 30px!important;background:#fce3c8;margin-top:4px!important;margin-bottom:8px!important}
.j-prog .jp-chbar-t{background:#fefcf8}
.j-prog .jp-list{gap:14px 16px!important;margin-top:4px!important}
.j-prog .jp-list li{align-items:center!important;gap:10px!important}
.j-prog .jp-list b{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#fefcf8;font-size:17px!important;line-height:1!important;min-width:44px!important}
.j-prog .jp-list span{white-space:normal!important;line-height:18px!important}
/* 10 Nov: all stories done is a real celebration: confetti once, the Heart stamp pressed big, Pip cheering and talking */
#jrw{overflow:hidden}
#jrw .jrw-conf{position:absolute;inset:0;pointer-events:none}
#jrw .jrw-conf i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:jrwFall 2.4s cubic-bezier(.3,.6,.4,1) both}
@keyframes jrwFall{0%{top:-20px;opacity:1}80%{opacity:1}100%{top:105%;opacity:0;transform:rotate(540deg)}}
#jrw .jrw-in{position:relative}
#jrw .jrw-top{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:0 0 14px}
#jrw .jrw-stamp{display:flex;flex-direction:column;align-items:center;gap:6px}
#jrw .jrw-stamp img{width:130px;height:130px;animation:jrwPress .7s cubic-bezier(.2,.8,.2,1.2) .25s both}
@keyframes jrwPress{0%{transform:scale(1.8) rotate(-12deg);opacity:0}60%{transform:scale(.92) rotate(2deg);opacity:1}100%{transform:none;opacity:1}}
#jrw .jrw-stamp small{font-size:13px;line-height:19.5px;color:#5e5651}
#jrw .jrw-stamp small b{color:#27201c}
#jrw .jrw-pipsay{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:22px}
#jrw .jrw-pipsay p{position:relative;margin:0;padding:12px 16px;max-width:150px;border:1.5px solid #27201c;border-radius:50%;font-size:14px;font-weight:700;line-height:19px;color:#27201c;background:#fefcf8}
#jrw .jrw-pipsay img{height:84px;width:auto;animation:pipHop .5s ease-out 1s 2 both}
#jrw .jrw-row{margin-top:8px}
@media (prefers-reduced-motion:reduce){#jrw .jrw-conf{display:none}#jrw .jrw-stamp img,#jrw .jrw-pipsay img{animation:none}}
/* 10 Nov: on the first tour card, Pip and "Tap me to hear me speak" zoom in and out three times so people see it; then they stop */
#jt.jt-hi .jt-tap{display:inline-block;animation:jtPulse .9s ease-in-out .5s 3 both;font-weight:700}
@keyframes jtPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){#jt.jt-hi .jt-tap{animation:none}}
/* 10 Nov: your own profile picture shows in the Home top right (the honey circle no longer covers it) */
.jp-avatar span.pic{background:var(--av) center/cover no-repeat!important;color:transparent!important}
/* 10 Nov: Your day on Home (any number of tasks), Journal > Done, Pip's thank-you and the all-done moment */
.td-card{padding:18px 16px 12px!important;border-radius:22px;background:#fce5bb!important}
.td-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.td-head .jn-h2{margin:0!important}
.td-head small{font-size:.8125rem;font-weight:700;color:#93641f}
.td-list{list-style:none;margin:0;padding:0}
.td-t{display:flex;align-items:flex-start;gap:12px;padding:11px 2px;border-top:1px solid rgba(147,100,31,.14);max-height:160px;transition:opacity .5s ease,transform .6s cubic-bezier(.3,.7,.2,1),max-height .5s ease .45s,padding .5s ease .45s}
.td-t:first-child{border-top:0}
.td-tick{flex:none;position:relative;width:26px;height:26px;margin-top:-1px;padding:0;border-radius:50%;border:1.7px solid #27201c;background:#fefcf8;cursor:pointer}
.td-tick:before{content:'';position:absolute;inset:-1.7px;border-radius:50%;background:#eec46a;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.td-tick svg{position:absolute;inset:0;margin:auto;width:16px;height:16px}
.td-tick path{fill:none;stroke:#27201c;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .35s ease .18s}
.td-tx{flex:1;min-width:0}
.td-tx p{margin:0;font-size:1rem;font-weight:500;line-height:1.35;color:#27201c;overflow-wrap:anywhere;transition:color .3s}
.td-tx small{display:inline-block;margin-top:3px;font-size:.75rem;font-weight:700;color:#93641f}
.td-t.done .td-tick{border-color:#eec46a}
.td-t.done .td-tick:before{transform:scale(1)}
.td-t.done .td-tick path{stroke-dashoffset:0}
.td-t.done .td-tx p{color:#5e5651}
.td-t.gone{opacity:0;transform:translateY(-14px) scale(.98);max-height:0;padding-top:0;padding-bottom:0;border-top-color:transparent}
.td-stuck{display:flex;width:100%;gap:10px;align-items:center;margin-top:8px;padding:10px 12px;border:0;border-radius:14px;background:#fefcf8;font:inherit;color:inherit;text-align:left;cursor:pointer}
.td-stuck img{height:46px;flex:none}
.td-stuck span{font-size:.8125rem;line-height:1.35;color:#5e5651}
.td-stuck b{display:block;font-size:.875rem;color:#27201c}
.td-add{display:flex;align-items:center;gap:12px;padding:10px 2px 4px;border-top:1px solid rgba(147,100,31,.14);cursor:text}
.td-list:empty+.td-add{border-top:0;padding-top:4px}
.td-plus{flex:none;width:26px;height:26px;border-radius:50%;border:1.7px dashed #93641f;display:grid;place-items:center;color:#93641f;font-size:1.125rem;font-weight:600;line-height:1}
.td-add input{flex:1;min-width:0;padding:4px 0;border:0;background:transparent;font:inherit;font-size:1rem;font-weight:500;color:#27201c;outline:none}
.td-add input::placeholder{color:#93641f;opacity:.85}
.td-more{display:flex;align-items:center;gap:8px;width:100%;margin-top:6px;padding:10px 0 2px;border:0;border-top:1px solid rgba(147,100,31,.14);background:none;font:inherit;font-size:.8125rem;font-weight:700;color:#93641f;text-align:left;cursor:pointer}
.td-donel{list-style:none;margin:4px 0 0;padding:0}
.td-donel li,.td-jday li{display:flex;align-items:center;gap:10px;padding:5px 2px;font-size:.875rem;color:#5e5651}
.td-mini{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#eec46a}
.td-mini svg{width:11px;height:11px}
.td-mini path{fill:none;stroke:#27201c;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.td-jday{margin:0 0 10px;padding:14px 16px;border-radius:18px;background:#f1ede2}
.td-jday small{display:block;margin-bottom:4px;font-size:.8125rem;font-weight:600;color:#5e5651}
.td-jday b{font-size:.9375rem}
.td-jday ul{list-style:none;margin:6px 0 0;padding:0}
.td-jday li{font-size:.9375rem;color:#27201c}
#td-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:flex-end;gap:8px;width:min(368px,calc(100% - 32px));transform:translate(-50%,170%);transition:transform .5s cubic-bezier(.2,.9,.25,1.15);pointer-events:none}
#td-toast.in{transform:translate(-50%,0)}
#td-toast img{height:88px;flex:none}
#td-toast p{margin:0 0 28px;padding:12px 16px;border-radius:18px;background:#fefcf8;border:1.5px solid #27201c;font-size:.9375rem;font-weight:600;line-height:1.35;color:#27201c;box-shadow:0 8px 24px rgba(39,32,28,.12)}
#td-all{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(254,252,248,0);transition:background .5s}
#td-all.in{background:rgba(254,252,248,.95)}
.td-all-in{padding:24px;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .5s .15s,transform .6s cubic-bezier(.2,.9,.25,1.1) .15s}
#td-all.in .td-all-in{opacity:1;transform:none}
.td-all-in img{height:170px}
.td-all-in h3{margin:14px 0 6px;font-family:var(--j-display);font-size:1.5rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#27201c}
.td-all-in h3 em{font-style:normal;box-shadow:inset 0 -.32em 0 #fce5bb}
.td-all-in p{margin:0 0 20px;font-size:.9375rem;color:#5e5651}
.td-petal{position:fixed;top:-20px;z-index:71;width:10px;height:14px;border-radius:60% 60% 60% 0;background:#eec46a;opacity:.9;pointer-events:none;animation:tdFall 2.8s cubic-bezier(.3,.2,.5,1) forwards}
@keyframes tdFall{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:0}}
.td-card .jn-h2{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-size:17px!important;font-weight:700!important;letter-spacing:-.34px!important;line-height:1.15!important;color:#27201c!important}
.td-card .jn-h2 em{font-style:normal!important;box-shadow:none!important;background:none!important}
.td-head{gap:12px}
/* 10 Nov: Your daily little tasks: same 16px gap as the other cards above and below, Pip with his line, plus drawn in the circle */
.td-card{margin:-18px 0 34px!important}
.td-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.td-pip{height:58px;width:auto;flex:none;margin:-4px 0 -2px}
.td-ht{flex:1;min-width:0}
.td-ht p{margin:3px 0 0;font-size:.875rem;line-height:1.35;color:#5e5651}
.td-head>small{align-self:flex-start;margin-top:2px;white-space:nowrap}
.td-plus{font-size:0!important}
.td-plus svg{width:14px;height:14px;display:block}
.td-plus path{fill:none;stroke:#93641f;stroke-width:2;stroke-linecap:round}
.td-card{margin-bottom:20px!important}
.td-card .td-add{width:100%;box-sizing:border-box;margin:0}
.td-card .td-list{display:block;width:100%;align-self:stretch}
.td-card{display:flex;flex-direction:column;align-items:stretch}
/* 10 Nov: the feelings circle in the Journal is smaller than on Home */
.jn-ask .ck-dial{zoom:.74}
.jn-ask .jh-ask{padding:12px 16px 10px!important}
/* 10 Nov: Pip's minute video story */
#jx-story .jxs-video{display:block;width:100%;max-height:62vh;border-radius:16px;background:#27201c;object-fit:contain}
/* 10 Nov: save the video; Saved in Profile */
#jx-story .jxs-savevid.kept{background:#fefcf8;box-shadow:inset 0 0 0 1.5px #eec46a}
.jpf-saved{display:flex;gap:12px;overflow-x:auto;padding:4px 0 6px}
.jpf-sv{flex:none;display:flex;flex-direction:column;gap:6px;width:110px;padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.jpf-sv span{position:relative;display:block;width:110px;height:160px;border-radius:14px;background:#27201c center/cover no-repeat}
.jpf-sv span i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(254,252,248,.9);color:#27201c;font-style:normal;font-size:13px}
.jpf-sv b{font-size:13px;font-weight:700;line-height:17px;color:#27201c}
/* 10 Nov: Pip's video in Shorts and its full-screen Reel */
.jl-ct2.jl-ct2-vid{position:relative;overflow:hidden;background:#27201c}
.jl-ct2.jl-ct2-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.jl-ct2.jl-ct2-vid .jl-ct2-tx{position:relative;z-index:1}
#jreel{position:fixed;inset:0;z-index:9500;background:#000}
#jreel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#jreel .jreel-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(20,14,10,.35);color:#fefcf8;cursor:pointer}
#jreel .jreel-side{position:absolute;right:12px;bottom:calc(120px + env(safe-area-inset-bottom,0px));z-index:2;display:flex;flex-direction:column;gap:14px}
#jreel .jreel-save{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;color:#fefcf8;font:inherit;cursor:pointer}
#jreel .jreel-save svg{width:30px;height:30px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
#jreel .jreel-save.kept svg,#jreel .jreel-save.on svg{fill:#eec46a;stroke:#eec46a}
#jreel .jreel-save small{font-size:12px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5)}
#jreel .jreel-tx{position:absolute;left:18px;right:80px;bottom:calc(36px + env(safe-area-inset-bottom,0px));z-index:2;color:#fefcf8;text-shadow:0 1px 6px rgba(0,0,0,.5)}
#jreel .jreel-tx b{display:block;font-size:17px;font-weight:700}
#jreel .jreel-tx span{display:block;font-size:14px;opacity:.9}
#jreel .jreel-paused{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;border-radius:50%;background:rgba(20,14,10,.4);color:#fefcf8;font-style:normal;font-size:24px;place-items:center;pointer-events:none}
#jreel.paused .jreel-paused{display:grid}
/* 10 Nov: Pip's video story fills the whole screen, like a Reel */
#jx-story.jxs-k-mindful{background:#000!important}
#jx-story.jxs-k-mindful .jxs-card{position:fixed!important;inset:0!important;max-width:none!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;border-radius:0!important;background:#000!important;box-shadow:none!important;z-index:1}
#jx-story.jxs-k-mindful .jxs-t{display:none!important}
#jx-story.jxs-k-mindful .jxs-video{position:absolute;inset:0;width:100%!important;height:100%!important;max-height:none!important;border-radius:0!important;object-fit:cover!important}
#jx-story.jxs-k-mindful .jxs-savevid{position:absolute;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:auto!important;z-index:2}
#jx-story.jxs-k-mindful .jxs-top{position:relative;z-index:3}
/* 10 Nov: Pip's video story truly edge to edge: no scale-in, no inset */
#jx-story.jxs-k-mindful,#jx-story.jxs-k-mindful .jxs-card{transform:none!important;animation:none!important}
#jx-story.jxs-k-mindful .jxs-card{top:0!important;left:0!important;right:0!important;bottom:0!important}
#jx-story.jxs-k-mindful .jxs-card .jx-sheet{position:absolute;inset:0;margin:0!important;padding:0!important}
#jx-story.jxs-k-mindful .jxs-bg{display:none}
/* (k118) mindful video truly full screen, beats the short-screen card margin */
#jx-story.jxs-k-mindful.jxs-k-mindful.jxs-k-mindful .jxs-card{margin:0!important;max-height:none!important;inset:0!important;width:auto!important;height:auto!important;border-radius:0!important;padding:0!important}
/* (k119) reel: no title on Pip's video, first-time swipe-up hint */
#jreel .jreel-hint{left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;pointer-events:none}
/* (k120) Pip reel hint = same as the other shorts' hint */
#jreel .jv-swipe{position:fixed;left:50%;top:22%;white-space:nowrap;text-align:center;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;background:none;color:#fefcf8;font-size:1rem;font-weight:700;pointer-events:none;transition:opacity .3s}
#jreel .jv-swipe svg{animation:jvNudge 1.1s ease-in-out 4}
#jreel .jv-swipe.out{opacity:0}
@media (prefers-reduced-motion:reduce){#jreel .jv-swipe svg{animation:none}}
/* (k121) This or that + Fast or slow photo cards edge to edge on phones */
@media (max-width:699px){.j-home .jh-card.jh-tot-photo,.j-home .jh-card.jh-fs-photo{width:calc(100% + 32px)!important;max-width:none!important;margin-left:-16px!important;margin-right:-16px!important;border-radius:0!important}}
/* (k122) example under the empty tasks field */
.td-eg{display:block;margin:0 0 0 40px;font-size:.8125rem;font-weight:600;color:#5e5651}
.td-add:has(input:not(:placeholder-shown))+.td-eg{display:none}
/* (k124) Things I'm working on: add-habit sheet */
.hb-sheet .hb-picks{margin-bottom:12px}
.hb-own{display:block;margin:0 0 18px}
.hb-own input{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid rgba(147,100,31,.25);border-radius:14px;background:#fefcf8;font:inherit;font-size:1rem;font-weight:500;color:#27201c;outline:none}
.hb-own input::placeholder{color:#93641f;opacity:.85}
.hb-own input:focus{border-color:#93641f}
.hb-sheet .hb-goals{margin-bottom:8px}
/* 10 Nov: Profile row icons (soft honey circle, ink line) and the Saved list */
.jpf-row{justify-content:flex-start}
.jpf-row .jpf-rt{flex:1;min-width:0}
.jpf-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fce5bb;color:#27201c}
.jpf-ic svg{display:block}
.jpf-saved{margin-top:12px}
/* 10 Nov: the Anchors chapter card on Home plays a calm video of a boat at anchor (Pexels, Christopher Schultz), once, then rests on its last frame */
.jh-cover{position:relative;overflow:hidden}
.jh-cover .jh-cov-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.jh-cover .jc-fade{z-index:0}
.jh-cover .jh-cov-tx{z-index:1}
.jh-cover .jh-cov-vid{object-position:50% 45%}
/* 10 Nov: each Short plays a calm video of people behind its cards (Pexels), looping softly; the photos stay underneath as a fallback */
#jv .jv-bgvid{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;background:#211c15}
#jv .jv-feed{position:relative;z-index:1}
#jv .jv-slide .jv-ph{opacity:0}
.hb-sheet .hb-many{margin:-4px 0 10px}
/* 10 Nov: Attention chapter photo = a woman reading, fully focused (Unsplash JaH62ihQLuE), instead of the coloured pencils */
:is(.j-home,.calm-lesson) .jp-c8,main.calm-lesson .cl-done-ph.jp-c8,main.calm-lesson .jg-ph.jp-c8,.jp-c8{background-image:url(assets/landing/ch-attention.jpg)!important;background-position:center 35%!important}
/* (k-tabs 10 Nov) Journal tabs: one row that scrolls sideways, even spacing */
.j-home .jn-views.jn-tabs{gap:26px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-right:16px!important;scroll-padding:0 16px}
.j-home .jn-views.jn-tabs::-webkit-scrollbar{display:none}
.j-home .jn-views.jn-tabs>button{flex:0 0 auto!important;white-space:nowrap}
.j-home .jn-views.jn-tabs::after{content:"";flex:0 0 1px}
#jv .jv-bgvid{transition:opacity .26s ease}
#jv .jv-bgvid.swap{opacity:.15}
/* 10 Nov (Sacha): Shorts on Home much bigger, about half the screen tall each, in a row that scrolls sideways */
.j-home .jh-reels .jl-cs2.jl-rail{gap:12px;scroll-snap-type:none!important}
.j-home .jh-reels .jl-cs2 .jl-ct2{flex:0 0 calc(min(50svh,460px) * 9 / 16)!important;width:calc(min(50svh,460px) * 9 / 16)!important;height:min(50svh,460px)!important;aspect-ratio:auto!important;border-radius:20px;scroll-snap-align:none}
.j-home .jh-reels .jl-ct2-tx{left:16px!important;right:16px!important;bottom:16px!important}
.j-home .jh-reels .jl-ct2-tx b{font-size:1.125rem;line-height:1.2}
.j-home .jh-reels .jl-ct2-d{font-size:.875rem;line-height:1.3}
.j-home .jh-reels .jl-ct2-play{transform:none}
/* 10 Nov: Profile calmer. No row icons; each group sits in one soft card like the sign-in card */
.j-prof .jpf-ic{display:none!important}
.j-prof .jpf-list{background:#fbf5ea;border-radius:18px;padding:0 16px}
.j-prof .jpf-row{padding:13px 0;border-bottom-color:#efe6d6}
.j-prof .jpf-row>svg{color:#b9a98f}
.j-prof .jpf-sec{margin:26px 0 8px 4px}
.j-prof .jpf-note-s{margin:8px 4px 0!important}
.j-prof .jpf-note{margin-left:4px;margin-right:4px}
/* 10 Nov: Anchors and estimates photo keeps its own pink and blue. Neutral dark shade instead of the warm brown one */
.jp-anchors .jc-fade{background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.38) 60%,rgba(0,0,0,.62) 100%)!important}
.j-home .jh-cover.jp-anchors::after{background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,0))!important}

/* 10 Nov (Sacha): This or that is the one daily question on Home now, taller so the photo breathes */
.j-home .jh-tot.jh-tot-photo{min-height:380px}
/* 10 Nov (Sacha): the first story circle adds today's photo; the + on top opens your tasks; Shorts needs no title */
.jh-st-add span{display:grid!important;place-items:center;background:#fdf1d8!important;font-size:28px;font-weight:300;line-height:1;color:#93641f;box-shadow:0 0 0 3px #fefcf8,0 0 0 5.5px #eec46a}
.j-home .jh-reels .jn-h2{display:none!important}
/* 10 Nov (Sacha): every block on Home sits the same 16px apart */
.j-home .jh-grid{gap:16px!important;row-gap:16px!important}
.j-home .jh-col{gap:16px!important;row-gap:16px!important}
main.j-home .jh-grid .jh-col>*{margin-top:0!important;margin-bottom:0!important}
main.j-home .jh-grid .jh-col>.jh-stories>.jh-ask{margin-bottom:0!important}
main.j-home .jh-grid .jh-col>.jh-reels{margin:-2px 0 -10px!important}
main.j-home .jh-grid .jh-col>.jh-stories:not(.jl-stories){margin:0!important}
/* 10 Nov (Sacha): + centered in the photo circle; tasks pop-up */
.jh-st-add span{display:flex!important;align-items:center;justify-content:center;font-size:0!important}
.jh-st-add span svg{display:block}
.sheet:has(.td-sheet) .sheet-head h2{visibility:hidden}
.td-sheet .td-card{margin:0!important;box-shadow:none!important}
.j-home .jh-ig-note svg path:first-child{fill:#e5b64f;stroke:#e5b64f}
.j-home .jh-ig-note svg path:nth-child(2){fill:#fce5bb;stroke:#27201c}
.jh-st.jh-st-add{width:86px}
.jh-st.jh-st-add small{overflow:visible}
/* 10 Nov (Sacha): the add circle's honey disc sits inside a cream gap, so it looks the same size as the photo circles */
.jh-st-add span{background:#fdf1d8!important;box-shadow:inset 0 0 0 5px #fefcf8,0 0 0 3px #fefcf8,0 0 0 5.5px #eec46a!important}
.jh-st-add span svg{width:22px;height:22px}
.jh-st.jh-st-add{width:74px}
/* 10 Nov (Sacha): no layers over the Home chapter video or photo, it shows in its own colors */
.j-home .jh-cover .jc-fade{display:none!important}
.j-home .jh-cover::before,.j-home .jh-cover::after{display:none!important;background:none!important}
.j-home .jh-cover .jh-cov-vid{filter:none!important;opacity:1!important}
/* 10 Nov: Pip's video slide in Shorts, with an Instagram-style caption */
#jv .jv-pv{position:relative;background:#27201c;overflow:hidden}
#jv .jv-pv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#jv .jv-pv-shade{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55));pointer-events:none}
#jv .jv-pvcap{position:absolute;left:16px;right:16px;bottom:calc(58px + env(safe-area-inset-bottom,0px));color:#fefcf8;font-size:14px;line-height:20px}
#jv .jv-pvcap b{display:block;font-size:15px;font-weight:700;line-height:22px}
#jv .jv-pvcap p{margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#jv .jv-pvcap.open p{display:block;-webkit-line-clamp:unset;max-height:46vh;overflow-y:auto}
#jv .jv-pvcap.open{background:rgba(20,18,16,.6);margin:0 -12px;padding:12px;border-radius:14px}
#jv .jv-pvcap button{border:0;background:none;padding:2px 0;font:inherit;font-weight:700;color:#fefcf8;opacity:.85;cursor:pointer}
#jv .jv-pv.paused::after{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(254,252,248,.9);color:#27201c;font-size:22px}
/* 10 Nov (Sacha): one iPad layout for iPad and desktop. The phone app in one wider centred column (760px), photos inside the column with round corners, the menu as a bottom bar. Replaces the old computer layout (two blocks, side menu) for the app tabs */
@media(min-width:700px){
html body main.calm-home.j-home:not(.topic-page){display:block!important;max-width:760px!important;width:auto!important;margin-left:auto!important;margin-right:auto!important;padding:24px 32px 120px!important}
html body main.calm-home.j-home:not(.topic-page)>*{grid-column:auto}
.j-home .jh-grid{grid-template-columns:1fr 1fr!important;gap:14px!important;align-items:start}
.j-home .jh-col{display:contents!important}
.j-home .jh-col-l{position:static!important}
main.j-home:not(.j-notes):not(.j-prog):not(.j-prof) .jh-cover,.j-notes .jn-cover,.j-prog .jp-cover2,.j-prog .jp-stats{width:100%!important;margin-left:0!important;margin-right:0!important;border-radius:28px!important}
.j-prog .jp-cover2{margin-top:8px!important}
.home-nav,body:has(main.j-home) .home-nav{left:0!important;right:0!important;top:auto!important;bottom:0!important;transform:none!important;flex-direction:row!important;justify-content:space-around!important;gap:0!important;width:auto!important;max-width:none!important;margin:0!important;padding:10px max(16px,calc(50% - 360px)) calc(14px + env(safe-area-inset-bottom,0px))!important;border:0!important;border-top:1px solid #e9e2d6!important;border-radius:0!important;background:#fefcf8!important}
}
/* 10 Nov (Sacha): never show the phone's own play button on the Home chapter video; if it can't play yet, its first frame shows */
.jh-cov-vid{pointer-events:none}
.jh-cov-vid::-webkit-media-controls,.jh-cov-vid::-webkit-media-controls-panel,.jh-cov-vid::-webkit-media-controls-overlay-play-button,.jh-cov-vid::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none;opacity:0!important}
/* 10 Nov (Sacha): daily tasks icon = honey clipboard with a tick */
.j-home .jh-ig-note svg rect.cb-board{fill:#e5b64f!important;stroke:#e5b64f!important}
.j-home .jh-ig-note svg rect.cb-clip{fill:#fce5bb!important;stroke:#27201c!important}
.j-home .jh-ig-note svg path{fill:none!important;stroke:#27201c!important}
/* 10 Nov (Sacha): a slight shade under the text on the Home chapter card, so the text is always readable */
.j-home .jh-cover .jc-fade{display:block!important;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.32) 55%,rgba(0,0,0,.5) 100%)!important}
/* 10 Nov: the preview test buttons hide while a short or Pip's video is open, so they never cover the caption */
body.jv-on #j-new,body.jv-on #j-eye,body.jv-on #j-skip,body.jv-on #j-skipq,body.jreel-on #j-new,body.jreel-on #j-eye,body.jreel-on #j-skip,body.jreel-on #j-skipq{display:none!important}
/* 10 Nov (Sacha): calmer photos for the chapters where the Home text was hard to read (free Unsplash) */
.jp-confirm,:is(.j-home,.calm-lesson) .jp-confirm,main.calm-lesson .cl-done-ph.jp-confirm,main.calm-lesson .jg-ph.jp-confirm,.j-home .jh-cover.jp-confirm,.j-home .jh-photo.jp-confirm{background-image:url(assets/landing/ch2-confirm.jpg)!important}
.j-home .jh-cover.jp-confirm{background-size:cover!important;background-position:center 40%!important}
.jp-sunk,:is(.j-home,.calm-lesson) .jp-sunk,main.calm-lesson .cl-done-ph.jp-sunk,main.calm-lesson .jg-ph.jp-sunk,.j-home .jh-cover.jp-sunk,.j-home .jh-photo.jp-sunk{background-image:url(assets/landing/ch2-sunk.jpg)!important}
.j-home .jh-cover.jp-sunk{background-size:cover!important;background-position:center 40%!important}
.jp-hindsight,:is(.j-home,.calm-lesson) .jp-hindsight,main.calm-lesson .cl-done-ph.jp-hindsight,main.calm-lesson .jg-ph.jp-hindsight,.j-home .jh-cover.jp-hindsight,.j-home .jh-photo.jp-hindsight{background-image:url(assets/landing/ch2-hindsight.jpg)!important}
.j-home .jh-cover.jp-hindsight{background-size:cover!important;background-position:center 40%!important}
.jp-framing,:is(.j-home,.calm-lesson) .jp-framing,main.calm-lesson .cl-done-ph.jp-framing,main.calm-lesson .jg-ph.jp-framing,.j-home .jh-cover.jp-framing,.j-home .jh-photo.jp-framing{background-image:url(assets/landing/ch2-framing.jpg)!important}
.j-home .jh-cover.jp-framing{background-size:cover!important;background-position:center 40%!important}
.jp-c5,:is(.j-home,.calm-lesson) .jp-c5,main.calm-lesson .cl-done-ph.jp-c5,main.calm-lesson .jg-ph.jp-c5,.j-home .jh-cover.jp-c5,.j-home .jh-photo.jp-c5{background-image:url(assets/landing/ch2-c5.jpg)!important}
.j-home .jh-cover.jp-c5{background-size:cover!important;background-position:center 40%!important}
.jp-c6,:is(.j-home,.calm-lesson) .jp-c6,main.calm-lesson .cl-done-ph.jp-c6,main.calm-lesson .jg-ph.jp-c6,.j-home .jh-cover.jp-c6,.j-home .jh-photo.jp-c6{background-image:url(assets/landing/ch2-c6.jpg)!important}
.j-home .jh-cover.jp-c6{background-size:cover!important;background-position:center 40%!important}
.jp-c7,:is(.j-home,.calm-lesson) .jp-c7,main.calm-lesson .cl-done-ph.jp-c7,main.calm-lesson .jg-ph.jp-c7,.j-home .jh-cover.jp-c7,.j-home .jh-photo.jp-c7{background-image:url(assets/landing/ch2-c7.jpg)!important}
.j-home .jh-cover.jp-c7{background-size:cover!important;background-position:center 40%!important}
.jp-c9,:is(.j-home,.calm-lesson) .jp-c9,main.calm-lesson .cl-done-ph.jp-c9,main.calm-lesson .jg-ph.jp-c9,.j-home .jh-cover.jp-c9,.j-home .jh-photo.jp-c9{background-image:url(assets/landing/ch2-c9.jpg)!important}
.j-home .jh-cover.jp-c9{background-size:cover!important;background-position:center 40%!important}
.jp-impressions,:is(.j-home,.calm-lesson) .jp-impressions,main.calm-lesson .cl-done-ph.jp-impressions,main.calm-lesson .jg-ph.jp-impressions,.j-home .jh-cover.jp-impressions,.j-home .jh-photo.jp-impressions{background-image:url(assets/landing/ch2-impressions.jpg)!important}
.j-home .jh-cover.jp-impressions{background-size:cover!important;background-position:center 40%!important}
.jp-c18,:is(.j-home,.calm-lesson) .jp-c18,main.calm-lesson .cl-done-ph.jp-c18,main.calm-lesson .jg-ph.jp-c18,.j-home .jh-cover.jp-c18,.j-home .jh-photo.jp-c18{background-image:url(assets/landing/ch2-c18.jpg)!important}
.j-home .jh-cover.jp-c18{background-size:cover!important;background-position:center 40%!important}
.jp-c22,:is(.j-home,.calm-lesson) .jp-c22,main.calm-lesson .cl-done-ph.jp-c22,main.calm-lesson .jg-ph.jp-c22,.j-home .jh-cover.jp-c22,.j-home .jh-photo.jp-c22{background-image:url(assets/landing/ch2-c22.jpg)!important}
.j-home .jh-cover.jp-c22{background-size:cover!important;background-position:center 40%!important}
.jp-c24,:is(.j-home,.calm-lesson) .jp-c24,main.calm-lesson .cl-done-ph.jp-c24,main.calm-lesson .jg-ph.jp-c24,.j-home .jh-cover.jp-c24,.j-home .jh-photo.jp-c24{background-image:url(assets/landing/ch2-c24.jpg)!important}
.j-home .jh-cover.jp-c24{background-size:cover!important;background-position:center 40%!important}
.jp-c25,:is(.j-home,.calm-lesson) .jp-c25,main.calm-lesson .cl-done-ph.jp-c25,main.calm-lesson .jg-ph.jp-c25,.j-home .jh-cover.jp-c25,.j-home .jh-photo.jp-c25{background-image:url(assets/landing/ch2-c25.jpg)!important}
.j-home .jh-cover.jp-c25{background-size:cover!important;background-position:center 40%!important}
/* 10 Nov (Sacha): text shorts look like Pip's video. No white card, the words in white handwriting on the video, a small white Pip */
#jv .jv-slide:not(.jv-pv) .jv-bub{background:none!important;box-shadow:none!important;border:0!important;padding:0 8px!important;max-width:330px!important;text-align:center!important;color:#fefcf8!important}
#jv .jv-slide:not(.jv-pv) .jv-bub b{display:block;font-family:'Hanken Grotesk',system-ui,sans-serif!important;font-size:13px!important;font-weight:700!important;letter-spacing:.02em;color:#fefcf8!important;opacity:.85}
#jv .jv-slide:not(.jv-pv) .jv-cap{font-family:'Caveat',cursive!important;font-weight:500!important;font-size:2.125rem!important;line-height:1.15!important;color:#fefcf8!important;min-height:3.6em!important;text-shadow:0 2px 3px rgba(39,32,28,.7)}
#jv .jv-slide:not(.jv-pv) .jv-pip{display:block!important;width:84px!important;height:auto!important;margin:0 auto 10px!important;filter:brightness(0) invert(1) drop-shadow(0 2px 2px rgba(39,32,28,.5))!important;order:-1}
#jv .jv-slide:not(.jv-pv) .jv-mid{flex-direction:column!important}
#jv .jv-slide:not(.jv-pv) .jv-cap,#jv .jv-slide:not(.jv-pv) .jv-bub *{text-align:center!important}
/* 10 Nov (Sacha): Pip's gold scratch card on Home */
.j-home .jh-scratch{background:#fefcf8;border:1.5px solid #e9e2d6;padding:18px 16px 16px}
.j-home .jh-scratch h2{margin:0;font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;font-size:1.25rem;font-weight:700;color:#27201c}
.j-home .jh-scratch>small{display:block;margin:2px 0 12px;font-size:13px;color:#6f675d}
.jh-scratch .sc-box{position:relative;aspect-ratio:4/4.4;border-radius:18px;overflow:visible}
.jh-scratch .sc-note{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px 24px;border-radius:18px;background:#fce5bb;overflow:hidden;text-align:center}
.jh-scratch .sc-pip{width:92px;height:92px;object-fit:contain}
.jh-scratch .sc-q{margin:0;font-family:'Caveat',cursive;font-weight:500;font-size:1.9rem;line-height:1.15;color:#27201c}
.jh-scratch .sc-from{font-family:'Caveat',cursive;font-size:1.4rem;color:#93641f}
.jh-scratch .sc-from::before{content:""}
.jh-scratch .sc-foil{position:absolute;inset:0;width:100%;height:100%;border-radius:18px;touch-action:none;cursor:grab;transition:opacity .6s ease,transform .6s ease;z-index:2}
.jh-scratch .sc-foil.gone{opacity:0;transform:scale(1.03);pointer-events:none}
.jh-scratch .sc-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;padding:8px 14px;font-family:'Caveat',cursive;font-size:1.6rem;color:#7a5418;transition:opacity .3s}
.jh-scratch .sc-hint.out{opacity:0}
.jh-scratch .sc-shine{position:absolute;inset:-20% auto -20% -60%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,250,235,.85),rgba(255,255,255,0));transform:skewX(-18deg);opacity:0;pointer-events:none}
.jh-scratch.sc-wow .sc-shine{animation:sc-shine 1.1s .25s ease-out 1 forwards}
@keyframes sc-shine{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
.jh-scratch.sc-wow .sc-pip{animation:sc-pop .7s cubic-bezier(.3,1.6,.5,1) 1}
@keyframes sc-pop{0%{transform:scale(.7)}100%{transform:scale(1)}}
.jh-scratch .sc-spark{position:absolute;left:50%;top:42%;width:0;height:0;z-index:4;pointer-events:none}
.jh-scratch .sc-spark b{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#eec46a;box-shadow:0 0 6px #fce5bb;opacity:0}
.jh-scratch.sc-wow .sc-spark b{animation:sc-fly .9s var(--d) ease-out 1 forwards}
@keyframes sc-fly{0%{opacity:1;transform:translate(0,0) scale(.6)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}
.jh-scratch .sc-acts{margin-top:14px}
.jh-scratch .sc-acts .btn{width:100%}
.j-home .jh-card.jh-scratch{display:block!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important}
.jh-scratch .sc-box{display:block;width:100%!important;height:auto}
/* 10 Nov (Sacha): Shorts feed. Swipe up through Pip's videos and polls */
#jfeed{position:fixed;inset:0;z-index:9500;background:#000}
#jfeed .jf-scroll{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
#jfeed .jf-scroll::-webkit-scrollbar{display:none}
#jfeed .jf-item{position:relative;height:100vh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;max-width:480px;margin:0 auto}
#jfeed .jf-item>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#jfeed .jf-shade{position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55));pointer-events:none}
#jfeed .jf-shade-all{top:0;height:auto;background:rgba(0,0,0,.32)}
#jfeed .jf-x{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(20,14,10,.35);color:#fefcf8;cursor:pointer}
#jfeed .jf-save{position:absolute;right:12px;bottom:calc(110px + env(safe-area-inset-bottom,0px));z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:#fefcf8;font:700 12px 'Hanken Grotesk',system-ui,sans-serif;cursor:pointer}
#jfeed .jf-save.on svg,#jfeed .jf-save.kept svg{fill:#eec46a;stroke:#eec46a}
#jfeed .jf-paused{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(254,252,248,.9);color:#27201c;font-style:normal;font-size:22px}
#jfeed .jf-vid.paused .jf-paused{display:grid}
#jfeed .jf-cap{position:absolute;left:16px;right:16px;bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:2;color:#fefcf8;font-size:14px;line-height:20px;cursor:pointer}
#jfeed .jf-cap b{display:block;font-size:15px;line-height:22px}
#jfeed .jf-cap p{margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#jfeed .jf-cap.open{background:rgba(20,18,16,.6);margin:0 -12px;padding:12px;border-radius:14px}
#jfeed .jf-cap.open p{display:block;max-height:46vh;overflow-y:auto}
#jfeed .jf-more{font-weight:700;opacity:.85}
#jfeed .jf-poll-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 26px;text-align:center;color:#fefcf8}
#jfeed .jf-pip{width:84px;filter:brightness(0) invert(1) drop-shadow(0 2px 2px rgba(39,32,28,.5))}
#jfeed .jf-poll-in small{font:700 13px 'Hanken Grotesk',system-ui,sans-serif;letter-spacing:.02em;opacity:.9}
#jfeed .jf-q{margin:0 0 8px;font-family:'Caveat',cursive;font-weight:500;font-size:2.1rem;line-height:1.15;text-shadow:0 2px 3px rgba(39,32,28,.7)}
#jfeed .jf-opts{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px}
#jfeed .jf-opt{min-height:54px;border:0;border-radius:16px;background:#fefcf8;color:#27201c;font:700 16px 'Hanken Grotesk',system-ui,sans-serif;cursor:pointer;transition:background .25s,transform .15s}
#jfeed .jf-opt:active{transform:scale(.98)}
#jfeed .jf-poll.done .jf-opt{opacity:.75}
#jfeed .jf-poll.done .jf-opt.me{opacity:1;box-shadow:0 0 0 3px #eec46a}
#jfeed .jf-poll.done .jf-opt.right{opacity:1;background:#eec46a}
#jfeed .jf-res{margin:8px 0 0;max-width:330px;font-size:15px;line-height:22px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
#jfeed .jreel-hint{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:3}
body.jreel-on #j-new,body.jreel-on #j-eye,body.jreel-on #j-skip,body.jreel-on #j-skipq{display:none!important}
#jfeed .jv-swipe{position:fixed;left:50%;top:22%;white-space:nowrap;text-align:center;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;background:none;color:#fefcf8;font-size:1rem;font-weight:700;pointer-events:none;transition:opacity .3s}#jfeed .jv-swipe.out{opacity:0}
#jfeed .jf-poll-in small{font-size:15px!important;color:#fce5bb;opacity:1!important;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.j-home .jh-card.jh-scratch{padding:14px!important}.jh-scratch .sc-hint{font-size:2.2rem!important}

/* 10 Nov: Rest with Pip. The rest opens full screen over the app; on Discover the three cards sit side by side like on Home */
.rest-ov{position:fixed;inset:0;z-index:2147483000;background:#1c1712}
.rest-ov iframe{display:block;width:100%;height:100%;border:0}
html.rest-open,html.rest-open body{overflow:hidden}
.j-home .jh-rest .jl-cs-p{margin:-4px 0 10px}
.jl-cs2.jl-rest{gap:10px}
.jl-cs2.jl-rest .jl-ct2{flex:0 0 31%!important;width:31%!important;min-width:0!important;height:auto!important;aspect-ratio:9/16!important;border-radius:16px}
.jl-cs2.jl-rest .jl-ct2-tx{left:10px!important;right:10px!important;bottom:10px!important}
.jl-cs2.jl-rest .jl-ct2-tx b{font-size:.9375rem;line-height:1.15}
.jl-cs2.jl-rest .jl-ct2-d{font-size:.75rem;line-height:1.25}
.jl-cs2.jl-rest .jl-ct2-play{transform:scale(.72)}
.jh-scratch .sc-hint{white-space:nowrap!important;left:50%!important;transform:translate(-50%,-50%)!important;width:auto!important}
/* 10 Nov: Rest with Pip keeps its heading (the Shorts heading is hidden) and shows its three cards side by side */
.j-home .jh-rest.jh-reels .jn-h2{display:block!important;margin:0 0 4px!important}
.j-home .jh-rest .jl-cs2.jl-rail{gap:10px;overflow-x:visible}
.j-home .jh-rest .jl-cs2 .jl-ct2,.jl-cs2.jl-rest .jl-ct2{flex:0 0 calc((100% - 20px)/3)!important;width:calc((100% - 20px)/3)!important;min-width:0!important;height:auto!important;aspect-ratio:9/16!important;border-radius:16px}
.j-home .jh-rest .jl-ct2-tx{left:10px!important;right:10px!important;bottom:10px!important}
.j-home .jh-rest .jl-ct2-tx b{font-size:.9375rem;line-height:1.15}
.j-home .jh-rest .jl-ct2-d{font-size:.75rem;line-height:1.25}
.j-home .jh-rest .jl-ct2-play{transform:scale(.72)}
/* 10 Nov (Sacha): Rest with Pip as meditation cards, like the Results cards (photo on top, card under it) */
.rest-k{display:block;margin:0 0 2px;font:700 12px 'Hanken Grotesk',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#93641f}
.rest-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:12px -16px 0;padding:0 16px 6px;scrollbar-width:none}
.rest-cards::-webkit-scrollbar{display:none}
.rest-cards .rest-card{flex:0 0 46%;scroll-snap-align:start;background:#fefcf8;border:1.5px solid #e9e2d6;border-radius:18px;color:#27201c}
.rest-cards .rest-pic{position:relative;height:150px!important;border-radius:12px;background-size:cover;background-position:center}
.rest-cards .rest-play{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#eec46a}
.rest-cards .jy-tx small{display:block;font-size:12px;color:#6f675d}
.rest-cards .jy-tx b{display:block;font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;font-size:18px!important;font-weight:700}
.rest-cards .jy-tx span{display:block;font-size:13px;color:#6f675d}
/* 10 Nov (Sacha): rest cards like her example, big landscape photo, title top left, clock and minutes bottom left */
.rr-list{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.rr-card{position:relative;display:block;width:100%;aspect-ratio:16/8.4;border:0;border-radius:22px;overflow:hidden;background:#3b3229 center/cover no-repeat;color:#fefcf8;text-align:left;cursor:pointer;font:inherit;padding:0}
.rr-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,0) 65%,rgba(0,0,0,.3) 100%)}
.rr-card b{position:absolute;left:20px;top:18px;right:40%;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:1.75rem;font-weight:500;line-height:1.15}
.rr-card span{position:absolute;left:20px;bottom:16px;display:flex;align-items:center;gap:8px;font:600 15px 'Hanken Grotesk',system-ui,sans-serif}
.j-home .rr-list{grid-column:1/-1!important;width:100%!important}
.j-home .rr-card{width:100%!important;min-height:0!important;height:auto!important;aspect-ratio:16/8.4!important;margin:0!important}
.rr-card b{font-size:1.6rem!important;font-weight:500!important;letter-spacing:0!important;color:#fefcf8!important}
.rr-card span{color:#fefcf8!important}
/* 10 Nov: "How are you feeling today?" on Home as compact as the one in the Journal */
.jh-stories .jh-ask .ck-dial{zoom:.74}
.jh-stories .jh-ask{padding:12px 16px 10px!important}
.jh-stories .jh-ask .jn-h2{margin-bottom:6px!important}
.jh-stories .jh-ask .jh-week{margin-top:6px!important;padding-top:8px!important}
.jh-stories .jh-ask .jh-wd i{width:18px;height:18px}
/* 10 Nov: Little tasks in the Journal, a full-width button under Write a note and Happy photo; it opens the same pop-up as on Home */
.j-notes .jn-acts2{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
.j-notes .jn-acts2 .jn-act2{flex-direction:column!important;align-items:flex-start!important;gap:8px!important;padding:10px!important}
.j-notes .jn-acts2 .jn-act2-ic{background:#fefcf8!important;border:1.5px solid var(--j-honey,#eec46a);box-sizing:border-box}
.j-notes .jn-acts2 .jn-act2-t{width:100%}
/* 10 Nov (Sacha): top logo is only Psychology.com, no dot and no Learn */
.pc-logo .pc-dot,.pc-logo .pc-learn,.pc-logo .brand-dot{display:none!important}
/* 10 Nov (Sacha): Shorts tiles show the short itself, playing silently, with no title and no dark overlay */
.jl-ct2.jl-ct2-bare::after,.jl-ct2.jl-ct2-bare::before,.j-lib .jl-ct2.jl-ct2-bare::after{display:none!important;content:none!important}
.jl-ct2.jl-ct2-bare .jl-ct2-tx{display:none!important}
/* 10 Nov (Sacha): scratch card full width between tasks and rest; rest cards in two rows: 10 min wide, then 3 and 20 side by side */
@media (max-width:699px){.j-home .jh-card.jh-scratch{width:calc(100% + 32px)!important;max-width:none!important;margin-left:-16px!important;margin-right:-16px!important;border-radius:0!important;border-left:0!important;border-right:0!important}}
.rr-list{display:grid!important;grid-template-columns:1fr 1fr;gap:12px}
.rr-list .rr-card:first-child{grid-column:1/-1}
.rr-list .rr-card:not(:first-child){aspect-ratio:1/1.05!important}
.rr-list .rr-card:not(:first-child) b{font-size:1.3rem!important;left:16px;top:14px;right:12px}
.rr-list .rr-card:not(:first-child) span{left:16px;bottom:14px}
/* 10 Nov (Sacha): scratch card full width between tasks and rest; rest cards in two rows */
@media (max-width:699px){.j-home .jh-card.jh-scratch{width:calc(100% + 32px)!important;max-width:none!important;margin-left:-16px!important;margin-right:-16px!important;border-radius:0!important;border-left:0!important;border-right:0!important}}
.j-home .jh-scratch{grid-column:1/-1!important}
.rr-list{display:grid!important;grid-template-columns:1fr 1fr;gap:12px}
.rr-list .rr-card:first-child{grid-column:1/-1}
.rr-list .rr-card:not(:first-child){aspect-ratio:1/1.05!important}
.rr-list .rr-card:not(:first-child) b{font-size:1.3rem!important;left:16px;top:14px;right:12px}
.rr-list .rr-card:not(:first-child) span{left:16px;bottom:14px}
/* 10 Nov (Sacha): Shorts as tiles like Instagram: three across, each tile is the real short playing silently. A tap opens the swipe-up feed at that short */
.jsg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0}
.j-lib .jsg .jl-ct2.jsg-t,.jsg .jl-ct2.jsg-t{position:relative;display:block;width:100%!important;height:auto!important;flex:none!important;aspect-ratio:9/16;min-width:0;margin:0;padding:0;border:0;border-radius:10px;overflow:hidden;background-color:#27201c;background-size:cover;background-position:center;cursor:pointer;text-align:left}
.jsg .jl-ct2.jsg-t video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.jsg .jl-ct2.jsg-t .jl-ct2-tx{position:absolute!important;left:8px!important;right:8px!important;bottom:8px!important;z-index:1}
.jsg .jl-ct2.jsg-t .jl-ct2-tx b{font-size:.8125rem;line-height:1.2}
.j-home .jh-reels .jsg{margin-top:0}
/* 10 Nov (Sacha): Shorts grid like Instagram reels: square corners, thin gaps, mixed sizes (a tall tile in every block of five), no titles */
.jsg{gap:2px!important;grid-auto-flow:row dense}
.j-lib .jsg .jl-ct2.jsg-t,.jsg .jl-ct2.jsg-t{border-radius:0!important;aspect-ratio:3/4}
.j-lib .jsg .jl-ct2.jsg-tall,.jsg .jl-ct2.jsg-tall{grid-row:span 2;aspect-ratio:auto;height:100%!important}
.jsg .jsg-tall.jsg-r{grid-column:3}
.jsg .jsg-tall.jsg-l{grid-column:1}
.j-home .jh-reels .jsg{margin-left:-16px;margin-right:-16px}
@media(min-width:700px){.j-home .jh-reels .jsg{margin-left:0;margin-right:0}}
/* 10 Nov (Sacha): the tiles touch each other, like Instagram's Reels search: a hairline between them, edge to edge on a phone */
.jsg{gap:1px!important}
@media(max-width:699px){main.j-lib .jsg{margin-left:-16px;margin-right:-16px}}
/* 10 Nov (Sacha): one landscape video on Home where the three rest cards were. Same width and corners as the cards around it, no text on it */
.j-home .jh-land{grid-column:1/-1;position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:20px;overflow:hidden;background:#27201c url(assets/now/ocean.jpg) center/cover;cursor:pointer}
.j-home .jh-land video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* 10 Nov (Sacha): careful with padding, no stray lines. On Home every card sits on the same 16px edges with the same 20px corners: the scratch card and This or that no longer run from screen edge to screen edge, and the scratch card has no border lines */
@media (max-width:699px){.j-home .jh-card.jh-scratch,.j-home .jh-card.jh-tot-photo,.j-home .jh-card.jh-fs-photo{width:100%!important;margin-left:0!important;margin-right:0!important;border-radius:20px!important}}
.j-home .jh-card.jh-scratch{border:0!important}
.j-home .jh-card.jh-scratch{padding:0!important;background:none!important;box-shadow:none!important}
/* 10 Nov (Sacha): the guided meditation video on Home says what it is. Text styles copied from the Home chapter photo (honey label, Bricolage title), no new type */
.j-home .jh-land::after{content:"";position:absolute;inset:45% 0 0 0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 100%);pointer-events:none}
.j-home .jh-land-tx{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:flex;flex-direction:column;text-align:left}
.j-home .jh-land-tx small{font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;font-size:16px;font-weight:700;line-height:24px;color:#f6dcae}
.j-home .jh-land-tx b{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:28px;font-weight:700;line-height:30.8px;color:#fefcf8}
/* 10 Nov (Sacha): Discover rest cards had their own type. Now: the big card uses the Home chapter photo title, the two small ones the Discover topic photo title; the minutes line is the chapter photo's honey label */
.rr-card b,.rr-list .rr-card:first-child b{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-size:28px!important;font-weight:700!important;line-height:30.8px!important;letter-spacing:normal!important;color:#fefcf8!important}
.rr-list .rr-card:not(:first-child) b{font-size:16px!important;font-weight:600!important;line-height:18.4px!important;letter-spacing:-.16px!important}
.rr-card span{font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif!important;font-size:16px!important;font-weight:700!important;line-height:24px!important;color:#f6dcae!important}
/* 10 Nov (Sacha): the forest stream instead of the ocean; "meditation" gets the same honey underline as the chapter titles */
.j-home .jh-land{background-image:url(assets/now/forest.jpg)}
.j-home .jh-land-tx b em{font-style:normal;box-shadow:inset 0 -.38em 0 rgba(238,196,106,.7)}
/* 10 Nov (Sacha): the scratch card a little less high */
.jh-scratch .sc-box{aspect-ratio:4/3!important}
/* 10 Nov (Sacha picked clip 8): pink sky over a calm sea (Pexels 4739662, from the Rest with Pip clips), original colors */
.j-home .jh-land{background-image:url(assets/now/meditate-sea.jpg)}
/* 10 Nov (Sacha): a quiet "Swipe up for the next one" in the Shorts feed, now and then. The feed's own small text style, no pill, no glass */
#jfeed .jf-next{position:absolute;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:2;text-align:center;font:700 13px 'Hanken Grotesk',system-ui,sans-serif;color:#fefcf8;text-shadow:0 1px 3px rgba(0,0,0,.6);opacity:0;transition:opacity .6s;pointer-events:none}
#jfeed .jf-next.on{opacity:.9}
/* 10 Nov (Sacha): guided meditation video a bit taller, above Scratch me */
.j-home .jh-land{aspect-ratio:4/3!important}

/* 10 Nov (Sacha): guided meditation and Scratch me side by side in one row. Same heights; small titles reuse the Discover topic photo title */
.j-home .jh-pair{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;width:100%}
.j-home .jh-pair .jh-land{grid-column:auto!important;width:auto!important;aspect-ratio:auto!important;height:100%;min-height:0;margin:0!important}
.j-home .jh-pair .jh-land-tx{left:12px;right:12px;bottom:12px}
.j-home .jh-pair .jh-land-tx small{font-size:13px;line-height:18px}
.j-home .jh-pair .jh-land-tx b{font-size:16px;font-weight:600;line-height:18.4px;letter-spacing:-.16px}
.j-home .jh-pair .jh-card.jh-scratch{width:auto!important;margin:0!important;grid-column:auto!important}
.j-home .jh-pair .jh-scratch .sc-box{aspect-ratio:4/5}
.j-home .jh-pair .jh-scratch .sc-note{padding:14px 12px}
.j-home .jh-pair .jh-scratch .sc-q{font-size:1.35rem}
.j-home .jh-pair .jh-scratch .sc-from{font-size:1.15rem}
.j-home .jh-pair .jh-scratch .sc-hint{font-size:1.6rem!important}
.j-home .jh-pair .jh-scratch .sc-box{aspect-ratio:1/1!important;height:auto!important}
.j-home .jh-pair .jh-scratch .sc-note{padding:10px!important;gap:4px!important}
.j-home .jh-pair .jh-scratch .sc-q{font-size:1.2rem!important;line-height:1.1!important}
.j-home .jh-pair .jh-scratch .sc-from{font-size:1.05rem!important}
/* 10 Nov (Sacha): the pair is taller (3:4), and guided meditation is a card: the moving photo on top, the words below on honey tint, like the Home cards */
.j-home .jh-pair .jh-scratch .sc-box{aspect-ratio:3/4!important}
.j-home .jh-pair .jh-land{display:flex!important;flex-direction:column;aspect-ratio:3/4!important;height:auto!important;padding:8px!important;background:var(--j-honey-tint,#fce5bb)!important;border-radius:20px}
.j-home .jh-pair .jh-land::after{display:none}
.j-home .jh-pair .jh-land video{position:relative!important;inset:auto!important;flex:1 1 auto;min-height:0;height:auto!important;border-radius:14px;background:#27201c url(assets/now/meditate-sea.jpg) center/cover}
.j-home .jh-pair .jh-land-tx{position:static!important;padding:10px 6px 4px}
.j-home .jh-pair .jh-land-tx small{color:#93641f!important}
.j-home .jh-pair .jh-land-tx b{color:#27201c!important}
/* 10 Nov (Sacha): taller still (2:3), and the meditation card on linen so it is not the same honey as Your daily little tasks */
.j-home .jh-pair .jh-scratch .sc-box,.j-home .jh-pair .jh-land{aspect-ratio:2/3!important}
.j-home .jh-pair .jh-land{background:var(--j-linen,#f1ede2)!important}

/* 10 Nov (Sacha): Try our guided meditation row on Home. Big cards (about 3/4 of the screen wide), photo 3:4 on top, words below on linen; Scratch me back to its own full row */
.j-home .jh-med{grid-column:1/-1;margin:0;min-width:0}
.j-home .jh-med .jn-h2{display:block!important;margin:0 0 10px!important;font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif!important;font-size:17px!important;font-weight:700!important;color:#27201c!important}
.j-home .jh-med .jn-h2 em{font-style:normal}
.jh-med-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scroll-padding:0 16px;scrollbar-width:none}
.jh-med-row::-webkit-scrollbar{display:none}
.jh-med-c{flex:0 0 74%;max-width:340px;scroll-snap-align:start;display:flex;flex-direction:column;margin:0;padding:8px;border:0;border-radius:20px;background:var(--j-linen,#f1ede2);text-align:left;font:inherit;color:#27201c;cursor:pointer}
.jh-med-ph{position:relative;display:block;width:100%;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#27201c center/cover no-repeat}
.jh-med-ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.jh-med-tx{display:flex;flex-direction:column;padding:10px 6px 4px}
.jh-med-tx small{font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;font-size:13px;font-weight:700;line-height:18px;color:#93641f}
.jh-med-tx b{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:16px;font-weight:600;line-height:18.4px;letter-spacing:-.16px;color:#27201c}

/* 10 Nov (Sacha): meditation cards in white frames; the honey underline (same as the chapter titles) under "meditation" and under each card title */
.jh-med-c{background:var(--j-paper,#fefcf8)!important;box-shadow:inset 0 0 0 1.5px var(--j-line,#e9e2d6)}
.j-home .jh-med .jn-h2 em,.jh-med-tx b em{font-style:normal;box-shadow:inset 0 -.38em 0 rgba(238,196,106,.7)}

/* 10 Nov (Sacha): words on the video itself in white (chapter photo label + title styles), one word underlined in honey; narrower cards; no heading */
.jh-med2 .jh-med-c{flex:0 0 60%!important;max-width:280px!important;padding:6px!important}
.jh-med2 .jh-med-ph{aspect-ratio:3/4}
.jh-med2 .jh-med-tx{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;padding:0}
.jh-med2 .jh-med-tx small{font-size:13px;line-height:18px;color:#f6dcae}
.jh-med2 .jh-med-tx b{font-size:22px;font-weight:700;line-height:24px;letter-spacing:normal;color:#fefcf8}
.jh-med2 .jh-med-tx b em{font-style:normal;box-shadow:inset 0 -.38em 0 rgba(238,196,106,.7)}
/* 10 Nov (Sacha): no frame or outline, just the video with round corners, a little taller like the Shorts */
.jh-med2 .jh-med-c{padding:0!important;background:none!important;box-shadow:none!important;border-radius:20px!important}
.jh-med2 .jh-med-ph{aspect-ratio:2/3!important;border-radius:20px!important}
/* 10 Nov (Sacha): more room around the words on the meditation videos */
.jh-med2 .jh-med-tx{left:20px!important;right:20px!important;bottom:24px!important}
.jh-med2 .jh-med-tx small{margin-bottom:4px}
/* 10 Nov (Sacha): the old Learn loading screens (P tile, "Setting out your lessons", old mascot) flashed on every open. They show nothing now, just the paper background, until her Home appears */
main.splash.engine-building,main.splash.bank-loading:not(.bank-failed){background:#fefcf8!important}
main.splash.engine-building *,main.splash.bank-loading:not(.bank-failed) *{visibility:hidden!important;animation:none!important}
/* 10 Nov (Sacha): after ticking a task, Pip stayed peeking at the bottom of the screen. When the message is away it is now fully off screen and invisible */
#td-toast{opacity:0;visibility:hidden;transform:translate(-50%,calc(100% + 160px))!important;transition:transform .5s cubic-bezier(.2,.9,.25,1.15),opacity .3s ease,visibility 0s linear .5s!important}
#td-toast.in{opacity:1;visibility:visible;transform:translate(-50%,0)!important;transition:transform .5s cubic-bezier(.2,.9,.25,1.15),opacity .2s ease,visibility 0s!important}
/* 10 Nov (Sacha): play/pause for Pip's videos is one small round button in the bottom left corner, nothing big in the middle */
.jvp{position:absolute;left:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:4;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#fefcf8;color:#27201c;cursor:pointer}
#jfeed .jf-vid .jf-paused{display:none!important}
#jfeed .jf-vid .jf-cap{left:68px!important}
#jx-story.jxs-k-mindful .jvp{position:fixed}
#jx-story.jxs-k-mindful .jvp{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
/* 11 Nov (Sacha): Learn more under a daily line or after a poll in the Shorts feed: plain text link in the feed's honey label color, no pill */
#jfeed .jf-learn{display:inline-block;margin:10px auto 0;padding:6px 4px;border:0;background:none;color:#fce5bb;font:700 15px 'Hanken Grotesk',system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;pointer-events:auto}
/* 11 Nov (Sacha): the close X has no round circle behind it */
#jfeed .jf-x{background:none!important;box-shadow:none!important}
/* 11 Nov (Sacha): the first "Tap to read on" moves gently three times, then stays still */
@keyframes jfNudge{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}70%{transform:translateY(0)}}
#jfeed .jf-next.nudge,#jx-story .jxs-taphint.nudge{animation:jfNudge .9s ease-in-out 3}
#jx-story .jxs-taphint{position:absolute;left:0;right:0;top:calc(62px + env(safe-area-inset-top,0px));z-index:5;text-align:center;font:700 13px 'Hanken Grotesk',system-ui,sans-serif;color:#fefcf8;opacity:0;transition:opacity .5s;pointer-events:none}
#jx-story .jxs-taphint.on{opacity:.95}
@media (prefers-reduced-motion:reduce){#jfeed .jf-next.nudge,#jx-story .jxs-taphint.nudge{animation:none}}
/* 11 Nov (Sacha): Coming soon topic cards look like the others but are not buttons */
.j-lib .jl-topics .jl-soon{cursor:default}
.j-lib .jl-topics .jl-soon .jh-ttl{color:#27201c!important}
.j-lib .jl-topics .jl-soon .jh-mut{font-weight:400!important}

/* 11 Nov (Sacha): heading "Guided meditation" back above the three, "meditation" underlined in honey */
.j-home .jh-med2 .jn-h2{display:block!important;margin:0 0 10px!important}
.j-home .jh-med2 .jn-h2 em{font-style:normal;box-shadow:inset 0 -.38em 0 rgba(238,196,106,.7)}
/* 11 Nov (Sacha): a Shorts tile is a small copy of its card in the feed: same shade, Pip, label, words and answer buttons, sized to the tile (cqw = share of the tile width; the feed card is 375px wide) */
.jl-ct2.jsr{container-type:inline-size}
.jsr-mini{position:absolute;inset:0;z-index:1;pointer-events:none}
.jsr-shade{position:absolute;inset:0;background:rgba(0,0,0,.32)}
.jsr-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.7cqw;padding:0 7cqw;text-align:center;color:#fefcf8}
.jsr-in img{width:22.4cqw;filter:brightness(0) invert(1) drop-shadow(0 2px 2px rgba(39,32,28,.5))}
.jsr-in small{font:700 4cqw 'Hanken Grotesk',system-ui,sans-serif;color:#fce5bb}
.jsr-in b{font-family:'Caveat',cursive;font-weight:500;font-size:8.96cqw;line-height:1.15;text-shadow:0 2px 3px rgba(39,32,28,.7)}
.jsr-opts{display:flex;flex-direction:column;gap:2.7cqw;width:100%;margin-top:2.1cqw}
.jsr-opts i{display:block;font-style:normal;padding:4.2cqw 2cqw;border-radius:4.27cqw;background:#fefcf8;color:#27201c;font:700 4.27cqw 'Hanken Grotesk',system-ui,sans-serif}

/* 11 Nov (Sacha): Journal > Statistics */
.st{display:flex;flex-direction:column;gap:10px}
.st .jn-week-h{margin-bottom:0}
.st-bars{gap:10px!important}
.st-row{display:grid;grid-template-columns:76px 1fr 24px;align-items:center;gap:10px;font-size:14px;color:#27201c}
.st-l{font-weight:600}
.st-n{text-align:right;font-size:14px}
.st-bar{position:relative;display:block;height:10px;border-radius:5px;background:#f1ede2;overflow:hidden}
.st-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.st-split-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:8px}
.st-bar-split{height:12px;background:#d98a5c}
.st-bar-split i{background:#e8b84f}
.st-split-k{display:flex;gap:16px;margin-top:8px;font-size:13px;color:#6f675d}
.st-split-k span{display:flex;align-items:center;gap:6px}
.st-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.st-good{background:#e8b84f}.st-hard{background:#d98a5c}
.st-two,.st-four{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-go span{display:flex;flex-direction:column}
.st-go .cw-k{font-weight:400}
.st-tip{gap:2px}
.st .st-two .cw-box,.st .st-four .cw-box,.st .st-split .cw-box,.st .st-tip{display:flex;flex-direction:column;justify-content:space-between;gap:2px}
.st .st-go{display:flex!important;align-items:center;justify-content:space-between;text-align:left}
.st .st-go .cw-k{display:block}
/* 11 Nov (Sacha): calm sounds play with a small bar at the bottom of the app, like Spotify's mini player. Ink background, cream text, existing type */
#jn-bar{position:fixed;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:4px;max-width:416px;margin:0 auto;padding:6px 6px 6px 6px;border-radius:14px;background:#27201c;color:#fefcf8}
#jn-bar .jnb-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
#jn-bar .jnb-pic{flex:none;width:40px;height:40px;border-radius:8px;background:#3d3123 center/cover no-repeat}
#jn-bar .jnb-tx{min-width:0;display:flex;flex-direction:column}
#jn-bar .jnb-tx b{font:700 14px/1.25 'Hanken Grotesk',system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jn-bar .jnb-tx small{font:400 12px/1.3 'Hanken Grotesk',system-ui,sans-serif;color:#fce5bb}
#jn-bar .jnb-b{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;color:#fefcf8;cursor:pointer}
body.jn-bar-on main.calm-home{padding-bottom:180px!important}
@media(min-width:700px){#jn-bar{max-width:736px}}

/* 11 Nov (Sacha): tick button to add a task; shows once something is typed */
.td-addgo{flex:none;display:none;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#e5b64f;color:#27201c;cursor:pointer}
.td-addgo svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.td-add:has(input:not(:placeholder-shown)) .td-addgo{display:grid}
/* 11 Nov (Sacha): Progress "Continue lesson 3" always stays on one line */
.j-prog .jp-go{white-space:nowrap!important;width:auto!important;max-width:none!important}
/* 11 Nov (Sacha): pips and tokens under Your numbers, the week row between them */
.j-prog .jp-pips{margin-top:18px}
.j-prog .jp-pips+.jp-week{margin:10px 0 12px}
/* 11 Nov (Sacha): a small calendar icon in the top right of the Journal photo, no circle */
.j-notes .jn-cover{position:relative}
.j-notes .jn-calmini{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:3;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;color:#fefcf8;cursor:pointer}
/* 11 Nov (Sacha): What we noticed shows the patterns only after More */
.cw .cw-more>summary{list-style:none;display:inline-block;margin:12px 0 2px;cursor:pointer}
.cw .cw-more>summary::-webkit-details-marker{display:none}
.cw .cw-more[open]>summary{display:none}
/* 11 Nov: Pip's speech bubble on the Journal photo leaves room for the calendar icon in the corner */
.j-notes .jn-cover .jn-pipsay{left:auto!important;right:56px!important;width:auto!important;max-width:calc(100% - 72px)!important}
/* 11 Nov (Sacha): the Coming soon topics stay closed behind one link under All topics */
.j-lib .jl-soonbox{margin:10px 0 4px}
.j-lib .jl-soonbox>summary{list-style:none;display:inline-block;cursor:pointer}
.j-lib .jl-soonbox>summary::-webkit-details-marker{display:none}
.j-lib .jl-soonbox[open]>summary{display:none}
.j-lib .jl-soonbox .jl-topics-soon{margin-top:0}
.j-lib .jl-soonbox>summary.jl-soonbtn{display:inline-flex;align-items:center;width:auto!important;margin-top:4px}
/* 11 Nov (Sacha): less space between the squares on Discover */
.j-lib .jh-grid.jl-topics{gap:10px!important}
.j-lib .rr-list{gap:10px!important}
.j-lib .jl-soonbox .jl-topics-soon{margin-top:10px!important}
/* 11 Nov (Sacha): What we noticed takes much less space: one line, the week dots, then More/Less */
.cw .cw-top-s{display:flex;align-items:center;gap:10px;margin:6px 0 8px!important}
.cw .cw-top-s .cw-face{width:38px!important;height:38px!important;flex:none}
.cw .cw-top-s .cw-b{margin:0}
.cw .cw-days-s{margin:0 0 2px}
.cw .cw-extra{margin-top:8px}
.cw .cw-extra .cw-keys{margin:0 0 6px}
.cw .cw-tg{display:inline-block;margin:8px 0 0;padding:0}
/* 11 Nov (Sacha): Pips and Tokens in a row of two right under the Progress photo */
.j-prog .jp-pt2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 4px}
.j-prog .jp-pt2 .jp-card{margin:0!important;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px!important}
.j-prog .jp-pt2 .jp-num{display:flex;align-items:center;gap:6px}
.j-prog .jp-pt2 h2{margin:0}
.j-prog .jp-pt2 p{margin:0}
/* 11 Nov (Sacha): More/Less sits on the "You mostly felt" line, no row of its own */
.cw .cw-top-s .cw-tg{margin:0 0 0 auto!important;flex:none;font-size:14px}
/* Pips and Tokens icons the same size so the two cards line up */
.j-prog .jp-pt2 .jp-num svg,.j-prog .jp-pt2 .jp-num img{width:30px!important;height:30px!important;flex:none}
.j-prog .jp-pt2 .jp-num b{line-height:30px}

/* 11 Nov (Sacha): Profile cover photo */
.j-prof .jpf-cover{position:relative;height:190px;margin:0 -16px;background:#f1ede2 center/cover no-repeat}
.jpf-cv-btn{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:#fefcf8;cursor:pointer}
.j-prof .jpf-me-cov{position:relative;flex-direction:column;align-items:flex-start;gap:8px;margin-top:-40px}
.j-prof .jpf-me-cov .jpf-av{width:84px;height:84px;font-size:34px;box-shadow:0 0 0 4px #fefcf8}
.jpf-cv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.jpf-cv-pick{aspect-ratio:4/3;border:0;border-radius:12px;background:#f1ede2 center/cover no-repeat;cursor:pointer;padding:0}
.jpf-cv-pick.on{box-shadow:0 0 0 3px #e5b64f}
.j-prof .jpf-cover{margin-top:-16px}
.j-prof .jpf-cover{background-position:center 35%!important}

/* 11 Nov (Sacha): today's sound under Scratch me */
.j-home .jh-snd{grid-column:1/-1;display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:0;padding:12px 14px;border:0;border-radius:20px;background:var(--j-honey-tint,#fce5bb);color:#27201c;font:inherit;text-align:left;cursor:pointer}
.jh-snd-pp{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e5b64f;color:#27201c}
.jh-snd .s{display:none}.jh-snd.on .s{display:block}.jh-snd.on .p{display:none}
.jh-snd-t{flex:1;display:flex;flex-direction:column}
.jh-snd-t small{font-size:13px;font-weight:700;line-height:18px;color:#93641f}
.jh-snd-t b{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;font-size:16px;font-weight:600;line-height:18.4px;color:#27201c}
.jh-snd-w{display:flex;align-items:flex-end;gap:3px;height:18px}
.jh-snd-w i{width:3px;height:6px;border-radius:2px;background:#93641f;opacity:.5}
.jh-snd.on .jh-snd-w i{opacity:1}
.jh-snd.on .jh-snd-w i:nth-child(1){height:10px}.jh-snd.on .jh-snd-w i:nth-child(2){height:16px}.jh-snd.on .jh-snd-w i:nth-child(3){height:8px}.jh-snd.on .jh-snd-w i:nth-child(4){height:13px}

/* 11 Nov (Sacha): Today's sound looks exactly like the Calm sounds bar (dark brown) */
.j-home .jh-snd2{grid-column:1/-1;display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;margin:0;padding:6px 6px 6px 6px;border-radius:14px;background:#27201c;color:#fefcf8;cursor:pointer}
.jh-snd2 .jnb-pic{flex:none;width:40px;height:40px;border-radius:8px;background:#3d3123 center/cover no-repeat}
.jh-snd2 .jnb-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.jh-snd2 .jnb-tx b{font:700 14px/1.25 'Hanken Grotesk',system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jh-snd2 .jnb-tx small{font:400 12px/1.3 'Hanken Grotesk',system-ui,sans-serif;color:#fce5bb}
.jh-snd2 .jnb-b{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;color:#fefcf8;cursor:pointer}

/* 11 Nov (Sacha): Pip's bubble at the end of Home */
.j-home .jh-endwalk{height:84px!important}
.j-home .jh-endwalk .jh-bub{position:absolute;right:50px;bottom:34px;white-space:nowrap;margin:0;padding:8px 12px;border:1.5px solid #27201c;border-radius:16px 16px 4px 16px;background:#fefcf8;color:#27201c;font:600 14px/1.2 'Hanken Grotesk',system-ui,sans-serif;cursor:pointer;opacity:0;pointer-events:none}
.j-home .jh-endwalk .jh-bub span{color:#93641f;font-size:11px;margin-left:4px}
.j-home .jh-endwalk.go .jh-bub{animation:jhBubIn .35s ease-out 3.5s 1 both;pointer-events:auto}
@keyframes jhBubIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.j-home .jh-endwalk .jh-bub{opacity:1;pointer-events:auto}}
/* 11 Nov (Sacha): the end-of-Home bubble in the same style as Pip's other bubbles (soft hand-drawn outline, two little circles trailing to Pip, no box). Ink outline because it sits on the paper, not on a photo */
.j-home .jh-endwalk{height:110px!important}
.j-home .jh-endwalk .jh-bub{right:58px!important;bottom:46px!important;padding:14px 20px 15px!important;border:1.5px solid #27201c!important;border-radius:52px 30px 56px 34px / 38px 52px 32px 46px!important;background:transparent!important;font:700 15px/1.3 'Hanken Grotesk',system-ui,sans-serif!important;color:#27201c!important;overflow:visible}
.j-home .jh-endwalk .jh-bub::after{content:"";position:absolute;right:-12px;bottom:-10px;width:10px;height:10px;border:1.5px solid #27201c;border-radius:50%}
.j-home .jh-endwalk .jh-bub::before{content:"";position:absolute;right:-22px;bottom:-22px;width:6px;height:6px;border:1.5px solid #27201c;border-radius:50%}
.j-home .jh-endwalk .jh-bub span{display:none}

/* 11 Nov (Sacha): Journal spacing: the same 14px between the photo, What we noticed, the personality card and the tabs */
.j-notes .jn-feelwk{margin-top:14px!important}
.j-notes .jn-feelwk .jn-week{margin-bottom:0!important}
.j-notes .jy{margin-top:14px!important;margin-bottom:0!important}
/* small Hide on the personality card once the test is done */
.jy-hero-card{position:relative}
.jy-hide{position:absolute;top:10px;right:12px;z-index:2;margin:0;padding:2px 4px;border:0;background:none;font:600 12px/1.2 'Hanken Grotesk',system-ui,sans-serif;color:#6f675d;cursor:pointer}
/* Today's sound: thinner */
.j-home .jh-snd2{padding:4px 8px 4px 4px!important;gap:10px}
.jh-snd2 .jnb-pic{width:30px!important;height:30px!important;border-radius:6px!important}
.jh-snd2 .jnb-b{width:32px!important;height:32px!important}
.jh-snd2 .jnb-b svg{width:18px;height:18px}
.jh-snd2 .jnb-tx{flex-direction:row!important;align-items:baseline;gap:8px}
.jh-snd2 .jnb-tx small{white-space:nowrap}

/* 11 Nov (Sacha): the calendar icon sits top left, just above "Today · Wednesday", away from Pip */
.jn-calmini2{display:grid;place-items:center;width:34px;height:34px;margin:0 0 6px -2px;padding:0;border:0;border-radius:50%;background:rgba(254,252,248,.92);color:#27201c;cursor:pointer}
/* 11 Nov (Sacha): bubble lines as thin as Pip's own drawing */
.j-home .jh-endwalk .jh-bub{border-width:1px!important;font-weight:600!important}
.j-home .jh-endwalk .jh-bub::after,.j-home .jh-endwalk .jh-bub::before{border-width:1px!important}

/* 11 Nov (Sacha): Today's sound is exactly the Calm sounds bar (same size as #jn-bar) */
.j-home .jh-snd2{padding:6px!important;gap:4px!important}
.jh-snd2 .jnb-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.jh-snd2 .jnb-pic{width:40px!important;height:40px!important;border-radius:8px!important}
.jh-snd2 .jnb-tx{flex-direction:column!important;align-items:flex-start!important;gap:0!important}
.jh-snd2 .jnb-b{width:40px!important;height:40px!important}
.jh-snd2 .jnb-b svg{width:20px;height:20px}
/* 11 Nov (Sacha): the calendar on the Journal photo is a white outline icon, no circle behind it */
.jn-calmini2{background:none!important;color:#fefcf8!important;width:auto!important;height:auto!important;margin:0 0 8px 0!important;padding:2px!important;justify-content:start}
.jn-calmini2 svg{width:24px;height:24px}

/* 11 Nov (Sacha): Journal buttons calmer: icon on the left, title on the right, no small line under it */
.j-notes .jn-acts2 .jn-act2{flex-direction:row!important;align-items:center!important;gap:8px!important;padding:10px!important}
.j-notes .jn-acts2 .jn-act2 small{display:none!important}
.j-notes .jn-acts2 .jn-act2-t{width:auto!important;flex:1}
.j-notes .jn-acts2 .jn-act2-t b{white-space:normal!important;line-height:1.2!important;font-size:.8125rem!important}

/* 11 Nov (Sacha): no Read more; the whole personality card opens it */
.jy-hero-card.jy-tap{cursor:pointer}
/* 11 Nov (Sacha): story bars on Shorts you tap through: one thin bar per screen, done ones cream, the one you read honey, the rest faint */
#jfeed .jf-bars{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:14px;right:64px;z-index:3;display:flex;gap:4px;pointer-events:none}
#jfeed .jf-bars i{flex:1;height:3px;border-radius:2px;background:rgba(254,252,248,.35)}
#jfeed .jf-bars i.done{background:#fefcf8}
#jfeed .jf-bars i.now{background:#eec46a}

/* 11 Nov (Sacha): swiping up or down over Scratch me scrolls the page instead of scratching */
.jh-scratch .sc-foil{touch-action:pan-y!important}
/* light scroll bar */
#j-sb{position:fixed;z-index:100001;width:3px;border-radius:2px;background:rgba(39,32,28,.22);pointer-events:none;opacity:0;transition:opacity .2s}

/* 11 Nov (Sacha): scratching works in any direction again; the page scroll on a quick flick is done in code */
.jh-scratch .sc-foil{touch-action:none!important}
#j-sb{background:#eec46a!important;width:4px!important}

/* 11 Nov (Sacha): page scrolls smoothly over the card; scratching is sideways */
.jh-scratch .sc-foil{touch-action:pan-y!important}
/* 11 Nov (Sacha): on desktop nothing runs to the edges of the screen; sideways rows and wide blocks stay inside the column */
@media (min-width:700px){
 .jl-cs2,.j-lib .jl-cs2,.jl-course-row.jl-cs2{margin-left:0!important;margin-right:0!important;width:auto!important;max-width:100%!important;padding-left:0!important;padding-right:0!important;scroll-padding:0!important}
 .jh-med-row{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;scroll-padding:0!important}
 .jp-nums,.jp-topics2{margin-left:0!important;margin-right:0!important;width:auto!important;max-width:100%!important;padding-left:0!important;padding-right:0!important}
}
@media (min-width:700px){
 .j-prog .jp-nums,.j-prog .jp-topics2{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding:22px 30px!important;border-radius:20px!important}
}
/* 11 Nov (Sacha): the Journal photo starts at the very top of the screen, like the Profile cover */
.j-notes .jn-cover{margin-top:-16px!important}

/* 11 Nov (Sacha): Shorts words sit in a soft, slightly see-through dark box (no blur); the small label is honey yellow; never a shadow behind text */
#jfeed .jf-tbx{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;box-sizing:border-box;margin:0 6px;padding:14px 18px 16px;border-radius:22px;background:rgba(39,32,28,.35)}
#jfeed .jf-tbx .jf-q{margin:0!important}
#jfeed .jf-poll-in small,#jfeed .jf-tbx small{color:#eec46a!important}
#jfeed .jf-q,#jfeed .jf-poll-in small,#jfeed .jf-src,#jfeed .jf-res,#jfeed .jf-opt,#jfeed *{text-shadow:none!important}
/* 11 Nov (Sacha): Pip and the words sit a little higher and stay centred, also on the web app */
#jfeed .jf-poll-in{padding-bottom:14vh!important;box-sizing:border-box}
#jfeed .jf-tbx{align-self:center;width:auto;max-width:min(420px,100%)}
#jfeed .jf-poll-in > *{align-self:center}
/* 11 Nov (Sacha): Pip's bubble on the reward screens has no white fill, just the outline, with one big and one small circle down to Pip (stories and Shorts) */
#jrw .jrw-pipsay{gap:26px!important}
#jrw .jrw-pipsay p{background:none!important}
#jrw .jrw-pipsay p::after{content:"";position:absolute;left:50%;bottom:-17px;width:11px;height:11px;margin-left:-4px;border:1.5px solid #27201c;border-radius:50%;background:none}
#jrw .jrw-pipsay p::before{content:"";position:absolute;left:50%;bottom:-29px;width:6px;height:6px;margin-left:6px;border:1.5px solid #27201c;border-radius:50%;background:none}
/* 11 Nov (Sacha): the first time in the Shorts, the swipe-up arrow moves a few times so people know to scroll up */
@keyframes jfSwipeUp{0%,100%{transform:translateY(0)}45%{transform:translateY(-10px)}}
#jfeed .jf-firstswipe svg{animation:jfSwipeUp 1s ease-in-out .4s 3}
#jfeed .jf-end{background:#27201c}
@media (prefers-reduced-motion:reduce){#jfeed .jf-firstswipe svg{animation:none}}
#jfeed .jreel-hint.jf-firstswipe{top:auto!important;bottom:calc(70px + env(safe-area-inset-bottom,0px))!important}
/* 11 Nov (Sacha): the story bar you are on fills with honey like a loading bar */
#jfeed .jf-bars i{position:relative;overflow:hidden}
#jfeed .jf-bars i.now{background:rgba(254,252,248,.35)!important}
#jfeed .jf-bars i.now::after{content:"";position:absolute;inset:0;background:#eec46a;transform-origin:left center;transform:scaleX(var(--f,0))}
/* 11 Nov (Sacha): the Shorts reward has one box (tokens); it fills the row */
#jrw .jrw-row .jrw-box:only-child{grid-column:1/-1;flex:1 1 100%}

/* 11 Nov (Sacha): Pip in What we noticed is a button that opens the mood circle */
.cw-face-btn{padding:0;border:0;cursor:pointer;font:inherit}
.ck-pop .jh-stories{margin:0}
.ck-pop .jh-ask{background:none!important;padding:4px 0 8px!important}
/* 11 Nov (Sacha): Pip in "What we noticed": no white circle behind him, a slightly bigger ring, Pip fully inside it */
.cw .cw-top-s .cw-face{width:48px!important;height:48px!important;background:none!important;box-shadow:inset 0 0 0 3px var(--feel)!important;overflow:hidden}
.cw .cw-top-s .cw-face i{width:30px!important;height:32px!important;background-size:contain!important;background-position:center!important}

/* 11 Nov: Seph's logo A. One logo: a honey Learn tag, slanted, on the left of Psychology.com, so it reads "Learn Psychology.com" */
.pc-logo.pc-tagged{align-items:center;gap:0}
.pc-logo.pc-tagged .pc-tag{display:inline-block;position:relative;z-index:0;top:-.5em;margin-right:-.34em;padding:.2em .42em .24em;border-radius:4px;background:#eec46a;color:#27201c;font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;font-weight:800;font-size:.75rem;letter-spacing:-.01em;line-height:1;transform:rotate(-7deg);box-shadow:0 1px 2px rgba(39,32,28,.18)}
.pc-logo.pc-tagged .pc-name{position:relative;z-index:1}
.pc-logo.pc-tagged .pc-name i{color:#e5b64f!important}

/* 11 Nov: on Seph's real server the preview test buttons are gone */
.j-server #j-new,.j-server #poc{display:none!important}

/* 11 Nov: logo options for logo-compare.html (B flat tag, C underline, D outlined tag); A is the live one */
html.logo-b .pc-logo.pc-tagged .pc-tag,html.logo-d .pc-logo.pc-tagged .pc-tag{top:0;margin-right:5px;transform:none;box-shadow:none;font-size:.8125rem;padding:.22em .4em .26em}
html.logo-d .pc-logo.pc-tagged .pc-tag{background:none;border:1.5px solid #eec46a;padding:.18em .38em .22em}
html.logo-c .pc-logo.pc-tagged{align-items:baseline}
html.logo-c .pc-logo.pc-tagged .pc-tag{top:0;margin-right:4px;transform:none;box-shadow:none;border-radius:0;font-size:.9375rem;padding:0 1px .12em;background:linear-gradient(rgba(238,196,106,.8),rgba(238,196,106,.8)) 0 calc(100% - .02em)/100% .3em no-repeat}
html.in-frame #j-new,html.in-frame #poc{display:none!important}
html.in-frame #toast{display:none!important}
/* 11 Nov: Home screens shown side by side on logo-compare.html: no pop-ups, toasts or test buttons inside them */
html.in-frame #overlay,html.in-frame #toast{display:none!important}html.in-frame body{overflow:auto!important}
html.in-frame #jdp{display:none!important}

/* 11 Nov (Sacha): every spin-the-wheel uses the colors of How are you feeling today */
.wheel-disc path:nth-child(1),main.session-page .wheel-disc path:nth-child(1){fill:#e8b84f!important;stroke:#27201c;stroke-width:.6}
.wheel-disc path:nth-child(2),main.session-page .wheel-disc path:nth-child(2){fill:#eda46c!important;stroke:#27201c;stroke-width:.6}
.wheel-disc path:nth-child(3),main.session-page .wheel-disc path:nth-child(3){fill:#e6b3a8!important;stroke:#27201c;stroke-width:.6}
.wheel-disc path:nth-child(4),main.session-page .wheel-disc path:nth-child(4){fill:#d9cbb6!important;stroke:#27201c;stroke-width:.6}
.wheel-disc path:nth-child(5),main.session-page .wheel-disc path:nth-child(5){fill:#d98a5c!important;stroke:#27201c;stroke-width:.6}
.wheel-disc path:nth-child(6),main.session-page .wheel-disc path:nth-child(6){fill:#c9a07f!important;stroke:#27201c;stroke-width:.6}
.wheel-disc path:nth-child(7),main.session-page .wheel-disc path:nth-child(7){fill:#bf6a4e!important;stroke:#27201c;stroke-width:.6}
.wheel-disc path:nth-child(8),main.session-page .wheel-disc path:nth-child(8){fill:#a8968a!important;stroke:#27201c;stroke-width:.6}
.wheel-disc path:nth-child(9),main.session-page .wheel-disc path:nth-child(9){fill:#e6b3a8!important;stroke:#27201c;stroke-width:.6}
.wheel-disc path:nth-child(10),main.session-page .wheel-disc path:nth-child(10){fill:#eda46c!important;stroke:#27201c;stroke-width:.6}
.wheel-art circle[stroke],main.session-page .wheel-art circle[stroke]{stroke:#27201c!important}
.exp-wheel .wheel-pointer,main.session-page .wheel-pointer{border-top-color:#27201c!important}
.exp-wheel .wheel-number,main.session-page .wheel-number{color:#27201c!important}

/* 11 Nov (Sacha): period question and dates sheets */
.jp-per-acts{display:grid;gap:10px;margin-top:16px}
.jp-per-day{display:block;width:100%;min-height:52px;margin-top:12px;padding:0 14px;border:1.5px solid #e9e2d6;border-radius:14px;background:#fff;font:inherit;font-size:1.0625rem;color:#27201c}
.jp-per-q2{margin-top:22px}
.jp-per-lens{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 18px}
/* 11 Nov: the tab you are on is a button now (back to top); it looks the same as before */
.j-nav button.on{cursor:pointer}

/* 11 Nov (Sacha): notes without Edit/Delete links. Hold for the options and a color; color dots when writing */
.jn-note[data-hold]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.jn-cols{display:flex;gap:10px;margin:12px 0 4px}
.jn-colb{width:32px;height:32px;border-radius:50%;border:1.5px solid #e9e2d6;padding:0;cursor:pointer}
.jn-colb.on{box-shadow:0 0 0 2px #fefcf8,0 0 0 4px #27201c}
.jn-hold .ck-q{margin-bottom:4px}
.jn-hold-acts{display:grid;gap:10px;margin-top:18px}

/* 12 Nov Seph: the statement is the thing to read, the question is small */
main.calm-lesson .jg-belief p{font-family:var(--calm-serif);font-weight:600;font-size:1.5rem!important;line-height:1.25!important;letter-spacing:-0.01em}
main.calm-lesson .jg-belief+.cl-h{font-size:1.125rem;line-height:1.3;margin-top:18px}

/* On the real site (the Learn server answers) the preview test tools never show */
.j-server #j-eye,.j-server #j-eye-tip,.j-server #j-skip,.j-server #j-skipq,.j-server #j-preview-tag,.j-server #j-new,.j-server #poc{display:none!important}

/* 13 Nov: Continue with Google at the end of the first game is white, never black */
main.calm-lesson .cl-actions .btn.google{display:flex;align-items:center;justify-content:center;gap:10px;background:#fefcf8;border:1.5px solid #e9e2d6;color:#27201c}

/* 13 Nov: Go to the app now on the landing, under the sign-in buttons, colored like Log in */
main.landing .landing-hero .splash-login.ln-go{margin:16px 0 18px}main.landing .landing-hero .ln-go .ln-go-app{font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Pip port (13 Nov 2026): the account screen (#settings) is the old app's and stays reachable from Pip's Profile. With Pip as the app the old app's own chrome does not belong on it: the tab bar (nav.rail, a side rail on a wide screen), the status strip with the streak, points and tries counters (.stats) and the wide screen's Today column (.right-column), whose links all lead to old screens. The plan screen (#plus) draws none of the three. The floating Help button stays. */
.shell:has(>.main>.settings)>.rail,.shell:has(>.main>.settings)>.right-column,.shell:has(>.main>.settings)>.main>.stats{display:none}

/* Pip port (13 Nov 2026): Plus is not on sale (SALES in functions/api/learn/_shared/price.js), and the page at /plus says only that. While that holds no menu sends a visitor there: the Plus link in the landing's menu and in its footer (index.html, href="plus") and the same link in the menu of the theory pages (href="../plus") are not drawn. The markup is as it was. This rule goes when sales reopen; the Pip port check on the pricing page names it. */
.landing-nav a[href="plus"],.landing-nav a[href="../plus"],.legal-links a[href="plus"]{display:none}
/* </pip> */