/* Motion, frosted header, trust line and closet setup. Loads after flow.css. */
:root{--ease-out:cubic-bezier(.2,.7,.2,1)}
html{overflow-x:clip}

/* Header stays in reach and turns frosted once the page scrolls. */
.site-header{position:sticky;top:0;z-index:40;isolation:isolate;border-bottom-color:transparent;transition:border-color .4s var(--ease-out)}
.site-header::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background:#FAFAF7EB;-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);opacity:0;transition:opacity .4s var(--ease-out);pointer-events:none}
.site-header.is-scrolled{border-bottom-color:#BBC5D855}
.site-header.is-scrolled::before{opacity:1}
html{scroll-padding-top:90px}

/* Trust line under each primary CTA. */
.trust-line{margin-top:14px;font-size:11px;line-height:1.5;color:#7C8490;letter-spacing:.1px}
.trust-line span{margin:0 8px;color:#8A909A}
.landing-intro>.trust-line,.campaign-content>.trust-line{margin-bottom:0;font-size:11px;line-height:1.5;color:#7C8490;max-width:none}
.campaign-content>.trust-line{font-size:11px;max-width:none;margin-top:14px}

/* Closet setup. */
.setup-page{display:grid;grid-template-columns:1.15fr 1fr;gap:90px;align-items:center;padding-top:105px;padding-bottom:115px;border-top:1px solid #CCD2DC80}
.setup-copy>.eyebrow{display:block;margin-bottom:30px}
.setup-copy h2{font-size:clamp(44px,4.8vw,72px);line-height:1.1;letter-spacing:-.055em;margin-bottom:28px;max-width:560px}
.setup-copy>p{max-width:440px;font-size:17px;line-height:1.8;color:var(--gray);margin-bottom:34px}
.setup-steps{list-style:none;margin:0;padding:0;max-width:420px;border-top:1px solid #CCD2DC}
.setup-steps li{display:flex;gap:18px;align-items:baseline;padding:15px 0;border-bottom:1px solid #CCD2DC;font-size:15px;color:#35445C}
.setup-steps li span{font-size:10px;letter-spacing:1px;color:#8A909A}

.setup-visual{position:relative;padding-bottom:30px;--phone:140px}
.setup-panel{margin-right:calc(var(--phone) - 2px);background:#FFFFFFD9;border:1px solid #DCE2EB;border-radius:14px;box-shadow:0 20px 60px #536A8D10;padding:22px}
.setup-panel-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;color:#28374F;margin-bottom:18px}
.setup-sync{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:400;color:#68758C;letter-spacing:.3px}
.setup-sync i{width:6px;height:6px;border-radius:50%;background:#7FB08A;box-shadow:0 0 0 3px #7FB08A26}
.setup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.setup-grid figure{margin:0;aspect-ratio:.82;border:1px solid #E0E4EB;border-radius:8px;background:#F4F6F9;padding:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.setup-grid img{width:100%;height:100%;object-fit:contain}
.setup-grid .slot-new{position:relative;border-style:dashed;background:transparent}
.setup-grid .slot-new::before{content:'+';position:absolute;color:#A9B0BB;font-size:20px;font-weight:300;transition:opacity .3s}
.setup-visual.in-view .slot-new{border-style:solid;background:#F4F6F9;transition:background .3s 1.45s}.setup-visual.in-view .slot-new::before{opacity:0;transition-delay:1.3s}
.setup-qr{display:flex;align-items:center;gap:18px;margin-top:20px;padding-top:20px;border-top:1px solid #E6EAF0}
.setup-qr svg{width:74px;height:74px;flex-shrink:0;fill:#28374F;background:#FFF;border:1px solid #E0E4EB;border-radius:8px;padding:6px}
.setup-qr p{font-size:14px;font-weight:500;color:#28374F;line-height:1.4}
.setup-qr small{display:block;font-size:12px;font-weight:400;color:#7C8490;margin-top:3px}
.setup-phone{position:absolute;right:0;top:50%;margin-top:-20px;width:var(--phone);translate:0 -50%;aspect-ratio:9/18.5;background:#1F2530;border-radius:26px;padding:7px;box-shadow:0 24px 50px #1F253033;display:flex;flex-direction:column}
.setup-phone-screen{position:relative;flex:1;border-radius:20px;overflow:hidden;background:#EEF1F5;display:flex;align-items:center;justify-content:center}
.setup-phone-screen img{width:78%;height:auto}
.setup-flash{position:absolute;inset:0;background:#FFF;opacity:0;pointer-events:none}
.setup-shutter{position:absolute;left:50%;bottom:18px;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:#FFFFFFE6;box-shadow:0 0 0 3px #FFFFFF59}
.setup-disclosure{position:absolute;left:0;bottom:4px;font-size:7px;letter-spacing:1.5px;color:#8A909A}

@media(min-width:761px){.setup-visual{order:-1}}

/* Reveal on scroll: only when JS is running and motion is welcome. */
@media(prefers-reduced-motion:no-preference){
 .js .landing-intro>*{animation:rise .7s var(--ease-out) both}
 .js .landing-intro>:nth-child(2){animation-delay:.08s}
 .js .landing-intro>:nth-child(3){animation-delay:.16s}
 .js .landing-intro>:nth-child(4){animation-delay:.22s}
 .js .walkthrough{animation:rise .8s var(--ease-out) .3s both}

 .js [data-reveal],.js [data-reveal-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i,0)*80ms)}
 .js [data-reveal].in-view,.js [data-reveal-stagger].in-view>*{opacity:1;transform:none}

 /* The phone takes a photo, then the piece lands in My Closet. */
 .js .setup-phone{transform:translate(24px,18px) rotate(4deg);opacity:0;transition:transform .7s var(--ease-out) .25s,opacity .5s var(--ease-out) .25s}
 .js .setup-visual.in-view .setup-phone{transform:rotate(-3deg);opacity:1}
 .js .setup-visual.in-view .setup-flash{animation:flash .5s ease-out 1.05s both}
 .js .slot-new img{opacity:0;transform:translateY(10px) scale(.9)}
 .js .setup-visual.in-view .slot-new{animation:slot-glow 1.4s var(--ease-out) 1.45s both}
 .js .setup-visual.in-view .slot-new img{animation:slot-in .6s var(--ease-out) 1.45s both}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes flash{0%{opacity:0}20%{opacity:.85}100%{opacity:0}}
@keyframes slot-in{to{opacity:1;transform:none}}
@keyframes slot-glow{0%{border-color:#E0E4EB;box-shadow:none}30%{border-color:#8BA2C7;box-shadow:0 0 0 4px #CBD8F166}100%{border-color:#E0E4EB;box-shadow:none}}

@media(max-width:1100px) and (min-width:761px){
 .setup-page{gap:50px}.setup-copy h2{font-size:46px}.setup-copy>p{font-size:15px}
 .setup-visual{--phone:118px}.setup-grid{gap:7px}.setup-panel{padding:16px}
}
@media(max-width:760px){
 .setup-page{grid-template-columns:1fr;gap:45px;padding-top:75px;padding-bottom:80px}
 .setup-copy h2{font-size:clamp(38px,10vw,53px)}.setup-copy>.eyebrow{margin-bottom:24px}.setup-copy>p{font-size:16px}
 .setup-visual{padding-bottom:36px}.setup-panel{margin-right:0;padding:14px}.setup-grid{gap:8px}
 .setup-qr svg{width:60px;height:60px}.setup-phone{position:relative;top:auto;margin:18px auto 0;translate:none;width:96px;border-radius:20px;padding:5px}.setup-phone-screen{border-radius:15px}.setup-shutter{width:22px;height:22px;margin-left:-11px;bottom:12px}
 .trust-line,.landing-intro>.trust-line,.campaign-content>.trust-line{font-size:10px}
}

/* Display serif for the big statements; Jost for everything else. */
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
:root{--display:'Cormorant Garamond',Georgia,serif}
.landing-intro h1,.solve-message h2,.setup-copy h2,.campaign-content h2{font-family:var(--display);font-weight:600;letter-spacing:-.015em}
.landing-intro h1{font-size:clamp(60px,7.2vw,112px);line-height:1}
.solve-message h2,.setup-copy h2{font-size:clamp(52px,5.6vw,86px);line-height:1.1;text-indent:-.06em}  /* pull the round S back onto the text edge */
.solve-message h2>span{font-weight:600}
.campaign-content h2{font-size:clamp(72px,9.6vw,150px);line-height:.98}
@media(max-width:1100px) and (min-width:761px){.solve-message h2,.setup-copy h2{font-size:54px}}
@media(max-width:760px){
 .landing-intro h1{font-size:clamp(46px,12vw,72px)}
 .solve-message h2,.setup-copy h2{font-size:clamp(44px,11.5vw,60px)}
 .campaign-content h2{font-size:clamp(60px,16vw,96px)}
}

/* Jost replaces Inter as the text and UI face. */
@font-face{font-family:Jost;src:url('assets/fonts/jost-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url('assets/fonts/jost-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url('assets/fonts/jost-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{--sans:Jost,Helvetica,Arial,sans-serif;--serif:var(--sans);--hand:var(--sans)}
/* Jost's x-height (.46) is shorter than Inter's (.52); lift it so text keeps its size. The display serif keeps its own proportions. */
body{font-size-adjust:.5}
.landing-intro h1,.solve-message h2,.setup-copy h2,.campaign-content h2{font-size-adjust:none}
/* The payoff line matches the body size; weight and colour carry the emphasis. */
.solve-message>.context-payoff{font-size:17px;line-height:1.8;letter-spacing:0}
@media(max-width:1100px) and (min-width:761px){.solve-message>.context-payoff{font-size:15px}}
@media(max-width:760px){.solve-message>.context-payoff{font-size:16px}}