/* Four screen-sized chapters. Brand tokens and controls come from brand.css. */
.page-section{min-height:100svh;box-sizing:border-box}
.hero.page-section{min-height:calc(100svh - 96px);grid-template-columns:47% 53%;padding:55px 0 75px;gap:0}
.hero-copy{padding-right:42px}
.hero h1{font-size:clamp(42px,4.5vw,68px);line-height:1.1;letter-spacing:-.06em;font-weight:500;margin:0 0 30px;max-width:570px}
.hero-support{color:var(--gray);font-size:15px;line-height:1.75;margin-bottom:30px}
.hero-support p+p{margin-top:4px}
.hero-proof{padding-left:20px}
.demo-disclosure{font-size:8px;color:#7C8490;letter-spacing:1.3px;margin-top:14px}
.how-page,.solve-page{display:grid;grid-template-columns:1fr 1.2fr;gap:100px;align-items:center;padding-top:105px;padding-bottom:105px;border-top:1px solid #CCD2DC80}
.section-intro{align-self:start;padding-top:16px}
.section-intro h2{font-size:clamp(44px,5vw,72px);line-height:1.1;margin-bottom:25px}
.section-intro>p{font-size:18px;line-height:1.6;color:var(--gray)}
.step-tabs{display:flex;border-bottom:1px solid #CCD2DC;gap:28px}
.step-tabs button{display:flex;gap:9px;align-items:baseline;font-size:16px;font-weight:500;color:#8A909A;padding:15px 0 18px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.step-tabs button>span{font-size:10px;font-weight:400;letter-spacing:1px}
.step-tabs button[aria-selected=true]{color:#28374F;border-color:#8BA2C7}
.step-tabs button:hover{color:#28374F}
.step-panels{margin-top:32px}
.step-panels [hidden]{display:none!important}
.step-visual{height:290px;background:#E9ECEF70;border:1px solid #DCE2EB;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.step-panels [role=tabpanel]>p{font-size:18px;line-height:1.65;color:var(--gray);margin-top:24px;min-height:30px}
.step-cta{margin-top:30px}
.find-visual{gap:25px;background:linear-gradient(135deg,#CBD8F140,#FAFAF7,#E9ECEF70)}
.mini-store{width:205px;height:244px;background:#FFFFFFD9;border:1px solid #D8DEE7;border-radius:7px;overflow:hidden}
.mini-browser{height:23px;background:#E9ECEF;display:flex;align-items:center;gap:4px;padding:0 9px}.mini-browser i{width:3px;height:3px;border-radius:50%;background:#A5AEBE}.mini-browser span{height:9px;background:#FFFFFFC9;width:100px;border-radius:2px;margin-left:8px}
.mini-store>img{height:167px;width:100%;object-fit:contain;padding:12px}
.mini-store-lines{padding:5px 20px;display:grid;gap:5px}.mini-store-lines i{height:3px;background:#DAE0E9;border-radius:3px;width:65%}.mini-store-lines i:nth-child(2){width:43%}.mini-store-lines i:nth-child(3){width:30%;height:12px;background:#CBD8F1;border-radius:20px;margin-top:3px}
.visual-transfer{color:#788CA9}.visual-transfer .icon{width:25px;height:25px}.visual-app{width:64px;height:64px;box-shadow:0 8px 24px #7389AD10;border-radius:14px}
.choose-visual{gap:15px;padding:25px;background:#F0F2F6}
.choose-visual figure{width:30%;height:205px;display:flex;align-items:center;justify-content:center;background:#FFFFFFD9;border:1px solid #DCE2EB;border-radius:8px;padding:12px}
.choose-visual img{width:100%;height:100%;object-fit:contain}
.see-visual{background:linear-gradient(135deg,#CBD8F130,#FAFAF7,#F7E1DB30)}
.see-visual>img{height:260px;width:auto;object-fit:contain;border-radius:4px}
.solve-page{grid-template-columns:1.15fr 1fr;gap:105px}
.solve-page h2{font-size:clamp(45px,5vw,74px);line-height:1.12;letter-spacing:-.055em;max-width:650px}
.solve-copy>.eyebrow{display:block;margin-bottom:28px}
.solve-copy>p{font-size:18px;line-height:1.8;color:var(--gray);margin-bottom:25px}
.solve-copy>.solve-value{font-size:22px;line-height:1.5;letter-spacing:-.025em;color:#35445C;margin-top:42px;margin-bottom:32px}
.campaign-page{display:flex;align-items:center;text-align:center;background:var(--silk) center/cover no-repeat;border-top:1px solid #DCE2EB;padding:95px 0}
.campaign-content{display:flex;align-items:center;flex-direction:column}
.campaign-content>.eyebrow{margin-bottom:48px}
.campaign-content h2{font-size:clamp(64px,8.5vw,132px);font-weight:500;line-height:1.03;letter-spacing:-.065em;max-width:1100px;margin-bottom:35px}
.campaign-content>p{font-size:18px;line-height:1.7;color:var(--gray);max-width:500px;margin-bottom:35px}
footer{border-top:1px solid #CCD2DC70;min-height:120px;padding-top:30px;padding-bottom:30px;justify-content:space-between}
@media(max-width:1100px) and (min-width:761px){
 .hero h1{font-size:44px}.hero-copy{padding-right:30px}.hero-support{font-size:13px}.how-page,.solve-page{gap:55px}.step-tabs{gap:22px}.step-tabs button{font-size:14px}.step-visual{height:270px}.find-visual{gap:17px}.mini-store{width:175px}.visual-app{width:50px;height:50px}.choose-visual{padding:18px;gap:10px}.solve-page h2{font-size:48px}.solve-copy>p{font-size:16px}.solve-copy>.solve-value{font-size:20px}
}
@media(max-width:760px){
 .hero.page-section{min-height:calc(100svh - 85px);grid-template-columns:1fr;padding-top:42px;padding-bottom:65px}.hero-copy{padding-right:0}.hero h1{font-size:clamp(37px,10vw,54px);margin-bottom:25px}.hero-support{font-size:14px;margin-bottom:25px}.hero-proof{padding:0;margin-top:40px}
 .how-page,.solve-page{grid-template-columns:1fr;gap:40px;padding-top:75px;padding-bottom:75px}.section-intro{padding:0}.section-intro h2{font-size:44px;margin-bottom:18px}.section-intro>p{font-size:16px}
 .step-tabs{gap:26px}.step-tabs button{font-size:15px}.step-panels{margin-top:25px}.step-visual{height:260px}.find-visual{gap:18px}.mini-store{width:155px;height:220px}.mini-store>img{height:145px}.visual-app{width:50px;height:50px}.choose-visual{gap:10px;padding:15px}.choose-visual figure{height:185px;padding:8px}.see-visual>img{height:230px}.step-panels [role=tabpanel]>p{font-size:16px;margin-top:20px;min-height:53px}.step-cta{margin-top:22px}
 .solve-page h2{font-size:clamp(40px,10.8vw,55px)}.solve-copy>.eyebrow{margin-bottom:22px}.solve-copy>p{font-size:16px}.solve-copy>.solve-value{font-size:21px;margin-top:32px;margin-bottom:28px}
 .campaign-page{padding:90px 0;min-height:90svh}.campaign-content>.eyebrow{margin-bottom:38px}.campaign-content h2{font-size:clamp(55px,15vw,86px);margin-bottom:28px}.campaign-content>p{font-size:16px;margin-bottom:30px;max-width:310px}footer{min-height:100px}
}
@media(prefers-reduced-motion:reduce){.step-tabs button{transition:none}}

/* The introduction flows into one timeline-synchronised product demonstration. */
.hero-story{position:relative;isolation:isolate;padding-bottom:105px}
.hero-story::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--silk) top center/100% auto no-repeat;pointer-events:none}
.landing-intro{min-height:calc(100svh - 96px - 150px);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding-top:50px;padding-bottom:60px}
.landing-intro h1{font-size:clamp(52px,6.3vw,96px);font-weight:500;line-height:1.06;letter-spacing:-.06em;max-width:1100px;margin:0 0 27px}
.landing-intro>p{font-size:17px;line-height:1.7;color:var(--gray);margin-bottom:30px}
.walkthrough{max-width:1000px;scroll-margin-top:20px}
.demo-steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #BBC5D880;margin-bottom:26px;gap:0}
.demo-steps button{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;color:#8A909A;font-size:17px;font-weight:400;padding:12px 0 19px;transition:color .3s}
.demo-steps .step-number{font-size:12px;color:inherit}
.demo-steps button[aria-pressed=true]{color:#28374F}
.demo-steps button>i{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#8BA2C7;transform:scaleX(var(--step-progress,0));transform-origin:left center;transition:transform .25s linear;opacity:0}
.demo-steps button[aria-pressed=true]>i{opacity:1}
.demo-steps button:hover{color:#28374F}
.walkthrough .demo-frame{width:min(100%,680px);aspect-ratio:760/720;margin:0 auto;border-radius:14px;box-shadow:0 20px 65px #536A8D10}
.demo-caption{min-height:34px;text-align:center;margin-top:25px;color:var(--gray);font-size:16px;line-height:1.7}
.demo-caption p[hidden]{display:none}
.demo-caption p:not([hidden]){animation:caption-in .35s ease both}
.walkthrough .demo-disclosure{text-align:center;margin-top:12px;font-size:7px;letter-spacing:1.5px;color:#8A909A}
@keyframes caption-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px) and (min-width:761px){.landing-intro h1{font-size:clamp(50px,6.3vw,72px)}.landing-intro>p{font-size:15px}.walkthrough .demo-frame{width:min(100%,620px)}}
@media(max-width:760px){
 .hero-story{padding-bottom:75px}.hero-story::before{background-size:auto 1000px;background-position:center top}
 .landing-intro{min-height:calc(100svh - 85px - 150px);padding-top:40px;padding-bottom:50px}.landing-intro h1{font-size:clamp(38px,10.2vw,65px);line-height:1.1;margin-bottom:24px}.desktop-break{display:none}.landing-intro>p{font-size:14px;max-width:290px;line-height:1.7;margin-bottom:25px}
 .demo-steps{margin-bottom:22px}.demo-steps button{font-size:14px;gap:8px;padding-bottom:18px}.demo-steps .step-number{font-size:10px}.walkthrough .demo-frame{width:100%;border-radius:10px}.demo-caption{font-size:14px;min-height:48px;margin-top:22px}.walkthrough .demo-disclosure{font-size:6px;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){.demo-steps button,.demo-steps button>i{transition:none}.demo-caption p:not([hidden]){animation:none}}

.hero-story::before{background-image:linear-gradient(to bottom,#FAFAF700 0%,#FAFAF700 42%,#FAFAF7 78%),var(--silk);background-size:100% 100%,100% auto;background-position:center top;background-repeat:no-repeat}
@media(max-width:760px){.hero-story::before{background-size:100% 100%,auto 1000px}}
.walkthrough .demo-frame{width:min(100%,680px,calc((100svh - 210px)*1.055556))}
@media(max-width:760px){.walkthrough .demo-frame{width:100%;aspect-ratio:760/900}}
/* Compact chrome and a visual wardrobe-context contrast. */
.site-header{height:70px}.site-header .brand-wordmark{width:120px}.site-header nav{font-size:11px;gap:24px}.nav-install{padding:8px 13px;gap:8px}
.chrome-icon{width:19px;height:19px;flex-shrink:0;display:block}.nav-install .chrome-icon{width:15px;height:15px}.button.install{gap:10px}
.landing-intro{min-height:calc(100svh - 70px - 150px)}
.solve-page{grid-template-columns:1.1fr 1fr;gap:80px}
.solve-message>.eyebrow{display:block;margin-bottom:30px}
.solve-message h2{font-size:clamp(44px,4.8vw,72px);line-height:1.12;letter-spacing:-.055em;margin-bottom:30px}.solve-message h2>span{color:#9199A5;font-weight:400}
.solve-message>p{max-width:460px;font-size:17px;line-height:1.8;color:var(--gray);margin-bottom:22px}
.solve-message>.context-payoff{color:#35445C;font-size:20px;line-height:1.5;letter-spacing:-.025em;margin-bottom:30px;font-weight:500}
.context-visual{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:center}
.context-visual figcaption{font-size:8px;letter-spacing:1.7px;color:#748096;margin-bottom:14px;text-align:center}
.context-piece>div{border:1px solid #E0E4EB;background:#FFF9;border-radius:10px;padding:20px 10px;aspect-ratio:.85}
.context-piece img{width:100%;height:100%;object-fit:contain}
.context-outfit>div:first-of-type{border:1px solid #DCE3EE;background:#F0F3F8;border-radius:10px;overflow:hidden}
.context-outfit>div>img{width:100%;height:auto}
.context-clothes{display:flex;justify-content:center;gap:12px;margin-top:14px}
.context-clothes img{width:48px!important;height:58px!important;object-fit:contain;background:#FFF;border:1px solid #E0E4EB;border-radius:6px;padding:5px}
@media(max-width:1100px) and (min-width:761px){.solve-page{gap:45px}.solve-message h2{font-size:46px}.solve-message>p{font-size:15px}.context-visual{gap:15px}}
@media(max-width:760px){.site-header{height:60px}.site-header .brand-wordmark{width:100px}.site-header nav{font-size:9px;gap:16px}.landing-intro{min-height:calc(100svh - 60px - 150px)}.solve-page{grid-template-columns:1fr;gap:45px}.solve-message h2{font-size:clamp(38px,10vw,53px)}.solve-message>.eyebrow{margin-bottom:24px}.solve-message>p{font-size:16px}.solve-message>.context-payoff{font-size:20px}.context-visual{max-width:450px;margin:0 auto;gap:20px;width:100%}.context-piece>div{padding:15px 8px}}

/* The film uses a desktop browser composition on every screen. */
.walkthrough .demo-frame{width:min(100%,1100px,calc((100svh - 210px)*1.777778));aspect-ratio:16/9}
@media(max-width:760px){.walkthrough .demo-frame{width:100%;aspect-ratio:16/9}}