@font-face{font-family:Fraunces;src:url('assets/fonts/Fraunces-Italic.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap}@font-face{font-family:Manrope;src:url('assets/fonts/Manrope-Regular.ttf');font-weight:400;font-display:swap}@font-face{font-family:Manrope;src:url('assets/fonts/Manrope-SemiBold.ttf');font-weight:600 800;font-display:swap}
:root{--cream:#fff0d7;--paper:#fff6e6;--ink:#26251f;--orange:#ff741f;--teal:#50b9b3;--pale:#e1f2ed;--rule:#c3c8b8}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 Manrope,Arial,sans-serif}body:has(dialog[open]){overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.35}a{color:inherit;text-underline-offset:5px}button,a,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #197c82;outline-offset:5px}img{max-width:100%}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,.brand,.choice-name strong,.product-copy h3,.alternate-art h3,.interpretation h3{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:850;font-variation-settings:"opsz" 80,"SOFT" 0,"WONK" 0;line-height:1.04;letter-spacing:-.035em;word-spacing:.035em}h2{font-size:clamp(44px,5.4vw,78px)}h3{font-size:24px}.icon{width:20px;height:20px;display:inline-block;object-fit:contain;flex-shrink:0;vertical-align:middle}.icon.small{width:13px;height:13px}.rotate{transform:rotate(180deg)}.icon-button{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #999b8d;border-radius:50%;background:transparent}.icon-button:hover:not(:disabled){background:var(--pale);border-color:var(--ink)}.skip{position:fixed;top:-100px;left:20px;background:white;padding:12px;z-index:100}.skip:focus{top:12px}.header{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;gap:70px;padding:28px 5%}.brand{font-size:42px;text-decoration:none;letter-spacing:-2px;line-height:1.1}.desktop-nav{display:flex;gap:32px}.desktop-nav button{border:0;background:none;display:flex;align-items:center;gap:12px;padding:10px 0}.header-end{margin-left:auto;display:flex;gap:28px;align-items:center}.header-end a{text-decoration:none}.header-end a:hover,.desktop-nav button:hover{text-decoration:underline;text-underline-offset:6px}.mobile-menu{display:none}.hero{min-height:820px;height:min(100svh,1000px);position:relative;overflow:hidden}.hero-art{position:absolute;inset:0;will-change:transform;transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1.018);animation:sun-breathe 12s ease-in-out infinite alternate}.hero-art img{display:block;width:100%;height:100%;object-fit:cover}.hero-copy{position:relative;z-index:1;max-width:840px;padding:230px 0 80px 5%}.hero h1{font-size:clamp(70px,7vw,106px);line-height:.99}.intro{font-size:20px;max-width:465px;margin:30px 0}.button{background:var(--orange);border:1px solid transparent;border-radius:3px;min-height:54px;padding:15px 26px;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;color:#201e19;font-weight:600;text-decoration:none;transition:transform .2s,background .2s,box-shadow .2s}.button:hover{background:#ff873b;transform:translateY(-2px);box-shadow:0 5px 0 #322b2020}.button:active{transform:translateY(0)}.availability{font-size:13px;line-height:1.65;margin-top:23px}.scroll-cue{position:absolute;bottom:35px;left:5%;padding:15px}.scroll-cue .icon{height:26px}.section{padding:75px 5%;scroll-margin-top:0}.eyebrow{text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:2.5px;margin-bottom:20px}.discovery{display:grid;grid-template-columns:43% 57%;grid-template-rows:auto auto;min-height:860px;column-gap:0;background:var(--paper)}.discovery-heading{grid-column:1;grid-row:1;align-self:start;padding-right:30px}.discovery-heading h2{font-size:clamp(46px,5.3vw,78px)}.choices{grid-row:2;grid-column:1;padding:30px 35px 0 0}.choose-hint{font-size:13px;margin:0 0 12px}.tabs{display:grid;gap:12px}.tabs button{display:flex;width:100%;align-items:center;gap:17px;min-height:94px;text-align:left;padding:17px 18px;background:transparent;border:1px solid #b9bbae;border-radius:7px;transition:border-color .2s,background .2s,transform .2s}.tabs button:hover{border-color:#303f37;background:#ffffff70;transform:translateX(3px)}.tabs button[aria-selected=true]{border:2px solid var(--orange);background:#fff0e1;padding:16px 17px}.tabs button[aria-selected=true] .number{color:#b14506}.choice-name strong{font-size:26px;letter-spacing:-.8px}.choice-name small{display:block;font-size:12px;line-height:1.45;margin-top:7px}.number{font-size:16px}.chevron{margin-left:auto;width:14px}.product-stage{grid-column:2;grid-row:1/3;align-self:start;display:flex;align-items:center;justify-content:center;height:500px;overflow:hidden;border-radius:15px;background:#fff8ea}.vessel{width:100%;max-width:660px;mix-blend-mode:multiply;transition:opacity .2s,transform .6s}.product-stage:hover .vessel{transform:rotate(-1deg) translateY(-3px)}.product-copy{grid-column:2;grid-row:2;align-self:end;padding:25px 0 0 20px;min-height:200px}.product-copy h3{font-size:48px}.product-copy>p{margin:15px 0 23px;font-size:17px;max-width:600px}.actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.text-link{border:0;background:none;text-decoration:underline;text-underline-offset:5px;padding:10px 0;display:inline-flex;align-items:center;gap:14px;font-weight:600}.alternate-art{padding:35px;max-width:560px}.alternate-art h3{font-size:65px}.alternate-art p:last-child{max-width:390px;margin-top:25px}.product-stage[data-product=report]{background:#e3efea}.product-stage[data-product=daily]{background:#ffe6c7}.product-stage[data-product=ai]{background:#f8e8db}
.example{position:relative;display:grid;grid-template-columns:50% 50%;grid-template-rows:540px auto;background:var(--cream);overflow:hidden}.example-heading{position:relative;z-index:1;pointer-events:none}.example-heading h2{font-size:clamp(48px,5.5vw,82px)}.example-question{font-size:22px;margin-top:45px}.sample-label{font-size:12px;color:#595c51;line-height:1.6;margin-top:10px}.demo-scene{position:relative;align-self:center;height:530px;display:flex;align-items:center;justify-content:center}.demo-vessel{width:110%;max-width:none;mix-blend-mode:multiply;transform-origin:50% 90%;transition:opacity .4s}.demo-scene[data-step="1"] .demo-vessel{animation:shake .9s ease-in-out 2}.draw-slot{position:absolute;left:36%;top:-65px;width:45px;height:225px;overflow:hidden;z-index:2;mix-blend-mode:multiply;pointer-events:none}.draw-slot img{position:absolute;height:360px;width:auto;max-width:none;left:50%;transform:translate(-50%,260px);transition:transform 1s cubic-bezier(.2,.8,.2,1)}.demo-scene[data-step="1"] .draw-slot img{transform:translate(-50%,0);transition-delay:.8s}.demo-scene[data-step="2"] .demo-vessel{opacity:.09}.interpretation{position:absolute;inset:45px 20px 35px 0;background:var(--paper);border-left:3px solid var(--teal);padding:30px}.interpretation h3{font-size:42px}.interpretation>p:not(.eyebrow){margin-top:20px;max-width:420px}.story-bottom{grid-column:1/-1;text-align:center;padding-top:12px;position:relative;z-index:2}.step-controls{display:flex;align-items:center;justify-content:center;gap:35px}.steps{display:flex;justify-content:center;gap:55px}.step{display:flex;align-items:center;gap:10px;min-height:44px;background:none;border:none;font-size:14px;border-bottom:2px solid transparent;padding:6px 0}.step span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #737b6d;border-radius:50%}.step.active{border-bottom-color:var(--orange);font-weight:600}.step.active span{background:var(--orange);border-color:var(--orange)}.story-caption{margin:22px 0;font-size:15px}.questions{padding-top:45px;padding-bottom:38px}.faq-panel{display:grid;grid-template-columns:minmax(0,39fr) minmax(0,61fr);gap:35px;padding:42px;background:var(--pale);border-radius:20px}.faq-intro h2{font-size:46px;white-space:nowrap}.faq-intro>p{font-size:16px;margin-top:15px}.faq-intro .button{margin-top:25px}.help-links{display:grid;gap:12px;margin-top:22px}.help-links a{width:fit-content}.help-links .icon{margin-left:8px}.faq-list{border-left:1px solid #c9ddd4;padding-left:30px}.faq-list details{border-bottom:1px solid #bcd4c9}.faq-list details:last-child{border-bottom:0}summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:15px}summary::-webkit-details-marker{display:none}.faq-list summary{font-size:18px;font-weight:600;min-height:65px}.faq-list p{padding:0 25px 20px 0;font-size:15px;max-width:680px}.footer{padding:0 5% 28px}.footer-main{border-top:1px solid var(--rule);padding:30px 0;display:grid;grid-template-columns:17% 27% 17% 19% 20%;gap:0}.footer-brand{display:flex;flex-direction:column;align-items:start;gap:15px}.footer-brand .brand{font-size:36px}.footer-group{padding:0 15px;border-left:1px solid #d7d4c4}.footer-group summary{font-size:14px;font-weight:600;margin-bottom:12px;cursor:default}.footer-group summary img{display:none}.footer-group a,.footer-group button{display:block;font-size:12px;line-height:1.8;text-align:left;text-decoration:none;padding:0;background:none;border:0;min-height:24px}.footer-group a:hover,.footer-group button:hover{text-decoration:underline}.footer-brand>a:last-child{font-size:13px}.footer-legal{border-top:1px solid var(--rule);padding-top:22px;display:flex;justify-content:space-between;gap:25px;font-size:11px;align-items:center}.footer-legal>div{display:flex;gap:25px}.footer-legal p{text-align:right}.motion-toggle{position:fixed;bottom:12px;right:14px;z-index:4;background:#fff9ec;border:1px solid #b7b9a9;border-radius:20px;font-size:11px;padding:7px 12px;box-shadow:0 2px 10px #25251f0d}
dialog{border:1px solid #d7d1c1;border-radius:15px;color:var(--ink);background:var(--paper);padding:28px;width:min(950px,92vw);max-height:88svh;overflow:auto}dialog::backdrop{background:#17231bd0}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:30px}.dialog-head h2{font-size:42px}.dialog-head .eyebrow{margin:0}.menu-columns{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:30px}.menu-columns h3{font-size:15px;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}.menu-columns a,.menu-columns button{display:block;background:none;border:0;padding:10px 0;text-align:left;text-decoration:none;min-height:44px}.menu-columns strong,.menu-columns span{display:block}.menu-columns span{font-size:12px}.menu-columns a:hover,.menu-columns button:hover{text-decoration:underline}.menu-columns strong{font-size:19px}.menu-columns section{scroll-margin-top:20px}#info-dialog{max-width:580px}#info-dialog h2{font-size:46px}#info-body{margin:24px 0}#info-actions{margin:20px 0}.paused *{animation-play-state:paused!important}.paused .hero-art{transform:none!important}.paused .draw-slot img{transition-duration:.01ms}
@keyframes sun-breathe{from{filter:brightness(.99)}to{filter:brightness(1.025)}}@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
@media(min-width:1700px){.hero-copy{padding-top:260px}.hero h1{font-size:112px}.hero-art img{object-position:center 45%}}
@media(max-width:1100px) and (min-width:701px){.header{gap:35px}.hero-copy{max-width:680px}.hero h1{font-size:72px}.intro{max-width:400px;font-size:18px}.choice-name strong{font-size:22px}.tabs button{gap:12px;padding:13px;min-height:98px}.choices{padding-right:20px}.product-stage{height:470px}.product-copy{padding-left:15px}.actions{gap:10px}.button{gap:15px;padding:14px 18px}.faq-panel{padding:28px;gap:20px;grid-template-columns:minmax(0,40fr) minmax(0,60fr)}.faq-intro h2{font-size:35px}.faq-list{padding-left:20px}.steps{gap:18px}.step-controls{gap:15px}.footer-main{grid-template-columns:16% 28% 16% 19% 21%}}
@media(max-width:700px){html{scroll-padding-top:12px}.header{padding:21px 22px}.brand{font-size:35px}.desktop-nav,.signin,.support{display:none}.mobile-menu{display:inline-flex;background:none;border:0;border-radius:0;width:44px;height:44px}.header-end{gap:0}.hero{height:850px;min-height:0;max-height:none}.hero-art{animation:none;transform:none;top:64px}.hero-art img{object-fit:contain;object-position:center top;height:auto;width:110%;max-width:none;margin-left:-5%}.hero-copy{padding:470px 22px 35px;max-width:none}.hero h1{font-size:49px;letter-spacing:-2.1px;line-height:1.01}.intro{font-size:15px;margin:20px 0;max-width:360px;line-height:1.6}.hero-copy .button{width:100%;min-height:52px}.availability{font-size:11px;margin-top:18px}.scroll-cue{display:none}.section{padding:45px 20px}.eyebrow{font-size:10px;margin-bottom:15px;letter-spacing:2px}.discovery{grid-template-columns:1fr;grid-template-rows:auto 280px auto auto;min-height:0}.discovery-heading{grid-row:1;grid-column:1;padding:0}.discovery-heading h2{font-size:46px;line-height:1.04}.product-stage{grid-row:2;grid-column:1;height:280px;margin:12px -12px 0;border-radius:0}.product-stage .vessel{height:300px;width:auto;max-width:none}.choices{grid-row:3;grid-column:1;padding:20px 0 0}.choose-hint{font-size:11px;margin-bottom:9px}.tabs{grid-template-columns:1fr 1fr;gap:8px}.tabs button{position:relative;gap:5px;padding:12px 23px 12px 10px;min-height:104px;align-items:flex-start}.tabs button[aria-selected=true]{padding:11px 22px 11px 9px}.tabs button:hover{transform:none}.number{display:none}.choice-name strong{font-size:21px;line-height:1.02;letter-spacing:-.6px}.choice-name small{font-size:10px;line-height:1.4;margin-top:7px}.tabs .chevron{position:absolute;right:7px;top:15px;width:10px}.product-copy{grid-row:4;grid-column:1;padding:24px 0 0;min-height:0}.product-copy h3{font-size:36px}.product-copy>p{font-size:14px;margin:12px 0 20px;line-height:1.55}.actions{gap:12px;justify-content:center}.actions .button{width:100%}.actions .text-link{font-size:14px}.alternate-art{padding:20px}.alternate-art h3{font-size:40px}.alternate-art p:last-child{font-size:13px;margin-top:15px}.example{display:flex;flex-direction:column;padding-top:50px}.example-heading h2{font-size:43px}.example-question{font-size:17px;margin-top:24px}.sample-label{font-size:11px}.demo-scene{height:330px;width:100%;margin:10px 0 0}.demo-vessel{width:110%;max-width:430px}.draw-slot{top:-20px;left:35%;width:30px;height:145px}.draw-slot img{height:260px}.interpretation{inset:10px 0;padding:25px 20px}.interpretation h3{font-size:32px}.interpretation>p:not(.eyebrow){font-size:13px;margin-top:13px}.story-bottom{padding-top:10px}.step-controls{gap:10px;justify-content:space-between}.step-controls>.icon-button{width:44px;height:44px;flex-shrink:0}.steps{gap:7px;align-items:start;flex:1;justify-content:space-evenly}.step{flex-direction:column;gap:5px;text-align:center;font-size:10px;line-height:1.4;padding-bottom:6px;max-width:75px;min-height:76px}.step span{width:25px;height:25px}.story-caption{font-size:12px;margin:18px auto;max-width:320px;min-height:38px}.story-bottom>.button{width:100%}.questions{padding:22px 16px}.faq-panel{display:flex;flex-direction:column;gap:0;padding:25px 20px;border-radius:20px;position:relative}.faq-intro{display:contents}.faq-intro h2{order:0;font-size:34px;white-space:normal;letter-spacing:-1.3px}.faq-intro>p{order:1;font-size:14px;margin-top:10px;margin-bottom:18px}.faq-list{order:2;border-left:0;padding-left:0}.faq-intro>.button{order:3;font-size:14px;min-height:49px;margin-top:23px}.help-links{order:4;margin-top:20px;gap:12px;font-size:14px}.faq-list summary{font-size:14px;min-height:54px;line-height:1.45;padding:12px 0}.faq-list p{font-size:12px;line-height:1.6;padding-right:0;padding-bottom:18px}.footer{padding:0 22px 50px}.footer-main{display:block;padding:22px 0 0}.footer-brand{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:15px}.footer-brand .brand{font-size:32px}.footer-group{padding:0;border-left:0;border-top:1px solid #c6ccbd}.footer-group summary{cursor:pointer;min-height:46px;font-size:13px;margin:0}.footer-group summary img{display:block}.footer-group a,.footer-group button{min-height:40px;font-size:12px;padding:7px 0 7px 8px}.footer-group[open]{padding-bottom:12px}.footer-legal{display:block;padding-top:21px}.footer-legal>div{gap:25px;font-size:11px}.footer-legal p{text-align:left;margin-top:20px;font-size:9px;line-height:1.7}.motion-toggle{font-size:10px;bottom:7px;right:10px;padding:5px 9px}.menu-columns{display:block}.menu-columns section{margin-bottom:28px}dialog{padding:22px;width:calc(100% - 24px);max-height:90svh}.dialog-head{margin-bottom:22px;gap:15px}.dialog-head h2{font-size:33px}.dialog-head .icon-button{flex-shrink:0}.menu-columns a,.menu-columns button{min-height:44px}#info-dialog h2{font-size:36px}}
@media(max-width:370px){.hero{height:820px}.hero-copy{padding-top:445px}.hero h1{font-size:44px}.intro{font-size:14px}.discovery-heading h2{font-size:42px}.choice-name strong{font-size:19px}.example-heading h2{font-size:39px}.faq-panel{padding:23px 16px}.faq-intro h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-art{transform:none!important}}

/* S11: editorial hero, selection directory, centered interaction, compact answers. */
.example{display:flex;flex-direction:column;align-items:center;padding-top:65px;padding-bottom:42px;isolation:isolate}
.example-heading{text-align:center;pointer-events:auto}
.example-heading h2{font-size:clamp(46px,4.5vw,66px);line-height:1.07}
.example-heading h2 br{display:none}
.example-heading h2 br::after{content:" "}
.example-heading .eyebrow{margin-bottom:16px}
.question-prompt{text-align:center;margin-top:22px;z-index:2}
.question-prompt .sample-label{margin:0 0 6px;font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.question-prompt .example-question{font-size:22px;margin:0}
.demo-scene{width:min(620px,100%);height:420px;margin:15px 0 0;flex-shrink:0}
.puppet-stage{position:absolute;inset:0;isolation:isolate;mix-blend-mode:multiply}
.vessel-rig{position:absolute;width:68%;left:2%;bottom:0;transform-origin:49% 90%;z-index:1}
.demo-vessel{display:block;width:100%;max-width:none;mix-blend-mode:multiply;transform:none;animation:none!important}
.demo-mascot{position:absolute;width:28%;right:14%;bottom:20px;z-index:2;mix-blend-mode:multiply;transform-origin:50% 94%;will-change:transform}
.draw-slot{left:47%;top:0;width:34px;height:150px;z-index:2}
.draw-slot img{height:300px;transform:translate(-50%,200px)}
.demo-scene[data-step="1"] .vessel-rig{animation:vessel-pushed 1.6s ease-in-out 2}
.demo-scene[data-step="1"] .mascot-upper{animation:companion-push 1.6s ease-in-out 2}
.demo-scene[data-step="1"] .draw-slot img{transform:translate(-50%,0);transition-delay:2.8s}
.demo-scene[data-step="2"] .puppet-stage{opacity:.12}
.demo-scene[data-step="2"] .demo-vessel{opacity:1}
.interpretation{inset:15px 60px 15px;padding:28px 34px;text-align:left;z-index:4;border-radius:8px}
.interpretation h3{font-size:38px}
.interpretation>p:not(.eyebrow){font-size:15px;margin-top:16px}
.example .story-bottom{width:100%;padding-top:2px}
.example .steps{gap:32px}
.example .story-caption{margin:13px 0 16px}
.example .step-controls{gap:26px}
.example .sample-label{margin-top:9px}
@keyframes companion-push{0%,12%,100%{transform:skewX(0)}30%,70%{transform:skewX(5deg)}48%,88%{transform:skewX(1deg)}}
@keyframes vessel-pushed{0%,15%,100%{transform:rotate(0)}33%,73%{transform:rotate(-4deg)}52%,91%{transform:rotate(1.5deg)}}
.faq-panel{display:flex;flex-direction:column;gap:0;padding:32px 42px}
.faq-intro{display:contents}
.faq-intro h2{order:0;text-align:center;font-size:42px}
.faq-intro>p{order:1;text-align:center;margin:10px 0 22px}
.faq-list{order:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 38px;border:0;padding:0}
.faq-list details{border-bottom:1px solid #bcd4c9}
.faq-list details:last-child{border-bottom:1px solid #bcd4c9}
.faq-list summary{font-size:16px;min-height:58px}
.faq-list p{font-size:14px;padding-bottom:18px}
.faq-intro>.button{order:3;align-self:center;margin-top:24px}
.help-links{order:4;display:flex;justify-content:center;gap:30px;margin-top:17px;font-size:13px}
@media(max-width:700px){
 .example{padding:42px 20px 30px}
 .example-heading h2{font-size:40px;line-height:1.08}
 .example-heading h2 br{display:block}
 .question-prompt{margin-top:20px;max-width:310px}
 .question-prompt .example-question{font-size:17px;line-height:1.5}
 .demo-scene{height:290px;margin:20px -8px 4px;width:calc(100% + 16px)}
 .vessel-rig{width:78%;left:0}
 .demo-mascot{width:31%;right:4%;bottom:10px}
 .draw-slot{left:47%;top:-7px;width:24px;height:98px}
 .draw-slot img{height:220px}
 .example .step-controls{gap:8px}
 .example .steps{gap:6px}
 .example .story-caption{margin:12px 0;min-height:36px}
 .example .step{max-width:72px;font-size:10px}
 .example .interpretation{inset:0 4px;padding:18px 20px;overflow:auto}
 .interpretation h3{font-size:29px}
 .interpretation .eyebrow{margin-bottom:8px;font-size:9px}
 .interpretation>p:not(.eyebrow){font-size:12px;margin-top:10px}
 .interpretation .text-link{font-size:12px;padding:7px 0}
 .faq-panel{padding:25px 20px}
 .faq-intro h2{text-align:left;font-size:34px}
 .faq-intro>p{text-align:left;margin:10px 0 15px;font-size:14px}
 .faq-list{display:block}
 .faq-list summary{font-size:14px;min-height:54px}
 .faq-list p{font-size:12px}
 .faq-intro>.button{align-self:stretch}
 .help-links{display:flex;flex-direction:column;gap:13px;font-size:14px}
}

.demo-mascot{aspect-ratio:2/3;will-change:auto}
.demo-mascot img{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply}
.mascot-legs{clip-path:inset(62% 0 0 0)}
.mascot-upper{clip-path:inset(0 0 38% 0);transform-origin:50% 62%}

/* S12: one chooser, one complete walkthrough. */
.experience-hub{padding:36px 5% 25px;background:var(--cream);position:relative}
.hub-heading{text-align:center;margin-bottom:12px}
.hub-heading h2{font-size:clamp(40px,3.5vw,50px)}
.hub-heading .eyebrow{margin-bottom:14px}
.hub-heading .choose-hint{margin:16px 0 0;font-size:14px}
.product-chooser{position:sticky;top:0;z-index:3;background:var(--cream);padding:15px 0;max-width:1150px;margin:0 auto}
.product-chooser .tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.product-chooser .tabs button{min-height:90px;padding:15px;gap:10px}
.product-chooser .tabs button[aria-selected=true]{padding:14px}
.product-chooser .tabs button:hover{transform:translateY(-2px)}
.product-chooser .number{display:none}
.product-chooser .choice-name strong{font-size:25px;line-height:1.05}
.product-chooser .choice-name small{font-size:11px;margin-top:8px}
.product-chooser .chevron{width:11px}
#product-panel{outline-offset:8px}
.experience-hub .example{padding:24px 0 12px;background:var(--cream)}
.experience-hub .example-heading h3{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:850;letter-spacing:-.035em;word-spacing:.035em;font-size:clamp(35px,3vw,43px);line-height:1.12}
.experience-hub .example-heading h3 br{display:none}
.experience-hub .example-heading .eyebrow{font-size:11px;letter-spacing:1.6px}
.experience-hub .question-prompt{margin-top:20px}
.experience-hub .example .demo-scene{margin-top:10px;width:min(520px,100%);height:350px}
#pending-experience{max-width:900px;margin:0 auto;padding:55px 20px;text-align:center;min-height:650px}
#pending-experience h3{font:italic 850 clamp(36px,4vw,56px)/1.1 Fraunces,Georgia,serif;letter-spacing:-.035em}
#pending-description{max-width:610px;margin:22px auto;font-size:18px}
.walkthrough-pending{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:40px 20px;margin:38px auto;max-width:600px}
.pending-label{font-weight:600;font-size:17px;margin-bottom:12px}
#pending-note{max-width:440px;margin:0 auto;color:#5b5a4e;font-size:15px}
#pending-actions{justify-content:center}
@media(max-width:700px){
 .experience-hub{padding:36px 20px 15px}
 .hub-heading{margin-bottom:12px}
 .hub-heading h2{font-size:39px;max-width:330px;margin:auto}
 .hub-heading .choose-hint{font-size:12px;margin-top:13px}
 .product-chooser{padding:10px 0}
 .product-chooser .tabs{grid-template-columns:1fr 1fr;gap:7px}
 .product-chooser .tabs button{min-height:85px;padding:10px 22px 10px 10px}
 .product-chooser .tabs button[aria-selected=true]{padding:9px 21px 9px 9px}
 .product-chooser .choice-name strong{font-size:20px}
 .product-chooser .choice-name small{font-size:9px;margin-top:6px}
 .product-chooser .tabs button:hover{transform:none}
 .experience-hub .example{padding-top:27px}
 .experience-hub .example-heading h3{font-size:35px}
 .experience-hub .example-heading h3 br{display:block}
 .experience-hub .example-heading .eyebrow{font-size:9px;letter-spacing:1px}
 .experience-hub .question-prompt .example-question{font-size:16px}
 #pending-experience{padding:34px 0;min-height:570px}
 #pending-experience h3{font-size:37px}
 #pending-description{font-size:15px;margin:20px auto}
 .walkthrough-pending{padding:30px 10px;margin:26px auto}
 #pending-note{font-size:13px}
 .pending-label{font-size:15px}
}

@media(max-width:700px){.experience-hub .example .demo-scene{width:calc(100% + 16px);height:290px}}
@media(max-width:700px){
 .product-chooser{position:static}
 .product-chooser .choice-name strong{font-size:18px;display:block;line-height:1.05}
 .product-chooser .tabs button{min-height:77px}
 .hub-heading h2{font-size:35px}
 .experience-hub .example-heading h3{font-size:30px}
 .experience-hub .example{padding-top:22px}
}
@media(max-width:700px){.hub-heading h2{max-width:285px}}