/* Separate hybrid review only. Shared styles, original integrated page and assets remain intact. */
:root{--hybrid-section:64px;--hybrid-secondary:48px}
/* A larger headline occupies its own reserved original footprint. No hero grid changes. */
#hero h1{position:relative;height:calc(clamp(48px,4.5vw,70px) * 3.39);font-size:96px;line-height:1.05}
#hero h1 .hybrid-title{position:absolute;bottom:0;left:0;display:block;color:inherit;white-space:nowrap}
#try.shopper-try h2,#scan .copy h2,#fit .fit-intro h2{font:400 var(--hybrid-section)/1.08 Anton,sans-serif;letter-spacing:-.015em;text-transform:none;margin:0 0 28px}
#try.shopper-try .copy p,#scan .copy p,#fit .fit-intro p,#closing p{font:400 16px/1.65 Poppins,sans-serif}
html #try.shopper-try{padding-block:88px;background:#24484D;color:#F2F0EA;border:0}
#try.shopper-try .editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:88px;row-gap:28px;align-items:start}
#try.shopper-try .copy{grid-column:1;grid-row:1;max-width:540px}
#try.shopper-try .copy p{max-width:510px;color:#F2F0EA}
#try .outfit-selector{display:contents}
#try .outfit-stage{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;width:min(100%,510px);aspect-ratio:1120/1720}
#try .outfit-controls{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0;max-width:440px}
#try .outfit-controls button{flex-direction:row;justify-content:flex-start;gap:22px;width:100%;min-height:94px;padding:8px 14px 8px 0;border:0;border-bottom:1px solid #a7ccd445;color:#F2F0EA;font:500 15px/1.5 Poppins,sans-serif;text-align:left}
#try .outfit-controls button img{width:48px;height:76px}
#try .outfit-controls button[aria-pressed=true]{background:transparent;border-color:#209DA7;color:#F2F0EA;box-shadow:inset 4px 0 #209DA7;padding-left:14px}
#try .outfit-controls button:hover{background:#10272b38}
#try .outfit-controls button:focus-visible{outline:3px solid #A7CCD4;outline-offset:3px}
/* A's offset text/phone composition, with the approved sentence-case typography. */
html #scan.scan{padding-block:88px;background:#F2F0EA;color:#10272B}
#scan .editorial{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:min-content min-content 1fr;column-gap:24px;row-gap:24px;align-items:start}
#scan .copy{display:contents}
#scan .copy h2{grid-column:1/8;grid-row:1;max-width:620px;margin:0}
#scan .copy p{grid-column:1/6;grid-row:2;max-width:500px;color:#24484D;margin:0}
#scan .copy p+p{grid-row:3;margin:0}
#scan .scan-phone{grid-column:8/13;grid-row:1/4;padding-top:40px;justify-self:end;align-self:start}
#scan .scan-phone img{height:720px;width:auto;max-width:100%;object-fit:contain}
/* One compact garment/control composition below the two-column introduction. */
html #fit.fit{padding-block:72px;background:#10272B;color:#F2F0EA;border:0}
#fit>.wrap{display:block}
#fit .fit-intro{display:grid;grid-template-columns:1fr 1fr;gap:88px;max-width:none;margin:0 0 32px;align-items:start}
#fit .fit-intro h2{max-width:530px;margin:0}
#fit .fit-intro p{max-width:540px;color:inherit}
#fit .dress-demo{display:grid;grid-template-columns:minmax(0,340px) 180px;grid-template-rows:1fr auto auto 1fr;column-gap:36px;row-gap:14px;width:min(100%,556px);margin:0 auto;align-items:center;justify-content:center}
#fit .dress-stage{grid-column:1;grid-row:1/5;width:100%;aspect-ratio:387/766}
#fit .dress-size-label{grid-column:2;grid-row:2;margin:0;text-align:left;color:#A7CCD4;font:600 12px/1.5 Poppins,sans-serif;letter-spacing:.1em}
#fit .dress-sizes{grid-column:2;grid-row:3;display:flex;gap:8px;margin:0}
#fit .dress-sizes button{width:54px;min-height:54px;padding:10px 8px;border:1px solid #A7CCD4;color:inherit;background:transparent;font:500 18px/1.5 Poppins,sans-serif}
#fit .dress-sizes button[aria-pressed=true]{background:#209DA7;border-color:#209DA7;color:#10272B}
html[data-fit-tone=neutral] #fit{background:#F2F0EA;color:#10272B}
html[data-fit-tone=neutral] #fit .dress-size-label{color:#24484D}
html[data-fit-tone=neutral] #fit .dress-sizes button{border-color:#24484D}
html[data-fit-tone=neutral] #fit .dress-sizes button[aria-pressed=true]{border-color:#209DA7}
/* Restrained original centred closing, using the approved 64/52/42 section scale. */
#closing{padding-block:88px;background:#F2F0EA;color:#10272B}
#closing h2{font:400 var(--hybrid-section)/1.08 Anton,sans-serif;letter-spacing:-.015em;max-width:1000px}
#closing .closing-grid{gap:24px}
#closing .closing-grid>div{max-width:640px}
#closing p{color:#24484D}
#closing .primary{font-weight:500}
body>.wrap{width:100%;padding-inline:max(40px,calc((100vw - 1280px)/2));background:#F2F0EA;color:#10272B}
html[data-fit-tone=neutral] #closing,html[data-fit-tone=neutral] body>.wrap{background:#10272B;color:#F2F0EA;--ink:#F2F0EA;--secondary:#A7CCD4;--line:#a7ccd440}
html[data-fit-tone=neutral] #closing p{color:#F2F0EA}
html[data-fit-tone=neutral] .approved-footer{color:#F2F0EA;--ink:#F2F0EA;--secondary:#A7CCD4;--line:#a7ccd440}
@media(min-width:761px) and (max-width:1100px){
 :root{--hybrid-section:52px}
 #hero h1{font-size:66px;height:calc(clamp(40px,4.6vw,51px) * 3.39)}
 #try.shopper-try .editorial{column-gap:40px}
 #try .outfit-stage{width:min(100%,430px)}
 #scan .scan-phone img{height:600px}
 #fit .fit-intro{gap:40px}
}
@media(max-width:800px){
 html #try.shopper-try,html #scan.scan{padding-block:56px}
 #try.shopper-try .editorial{display:flex;flex-direction:column;gap:24px;align-items:stretch}
 #try.shopper-try .copy{max-width:620px}
 #try.shopper-try .copy p{max-width:620px}
 #try .outfit-controls{order:2;flex-direction:row;max-width:none;gap:12px}
 #try .outfit-controls button{flex:1;flex-direction:column;justify-content:center;gap:8px;min-height:110px;padding:6px 4px 10px;font-size:12px;text-align:center;border-bottom:3px solid #a7ccd445}
 #try .outfit-controls button img{width:42px;height:64px}
 #try .outfit-controls button[aria-pressed=true]{box-shadow:none;border-bottom-color:#209DA7;padding:6px 4px 10px;background:#10272b38}
 #try .outfit-stage{order:3;width:min(100%,440px);align-self:center}
 #scan .editorial{grid-template-columns:1fr;gap:24px}
 #scan .copy h2{grid-column:1;grid-row:1;max-width:600px}
 #scan .scan-phone{grid-column:1;grid-row:2;justify-self:end;padding-top:0;padding-right:8%;}
 #scan .scan-phone img{height:auto;width:min(330px,70vw)}
 #scan .copy p{grid-column:1;grid-row:3;max-width:600px}
 #scan .copy p+p{grid-row:4;max-width:600px}
 html #fit.fit{padding-block:56px}
 #fit .fit-intro{gap:28px;margin-bottom:28px}
 #fit .dress-demo{grid-template-columns:minmax(0,280px) 180px;width:min(100%,496px);column-gap:28px}
 #closing{padding-block:64px}
}
@media(max-width:760px){
 :root{--hybrid-section:42px}
 #hero h1{font-size:clamp(40px,11.28vw,52px);line-height:1.05;height:calc(clamp(30px,8.7vw,58px) * 3.45)}
 #try.shopper-try h2,#scan .copy h2,#fit .fit-intro h2{font-size:42px;line-height:1.08}
 #try.shopper-try h2{margin-bottom:24px}
 #try.shopper-try .copy p,#scan .copy p,#fit .fit-intro p,#closing p{font-size:16px;line-height:1.65}
 #try .outfit-controls{gap:8px}
 #try .outfit-controls button{font-size:11px}
 #try .outfit-stage{width:min(100%,360px)}
 #fit .fit-intro{display:block;margin-bottom:24px}
 #fit .fit-intro h2{margin-bottom:24px}
 #fit .fit-intro p+p{margin-top:16px}
 #fit .dress-demo{grid-template-columns:1fr;grid-template-rows:auto auto auto;width:min(100%,280px);gap:0}
 #fit .dress-stage{grid-column:1;grid-row:1}
 #fit .dress-size-label{grid-column:1;grid-row:2;text-align:center;margin-top:14px}
 #fit .dress-sizes{grid-column:1;grid-row:3;justify-content:center;margin-top:10px;gap:12px}
 #fit .dress-sizes button{width:64px;min-height:50px}
 #closing h2{font-size:42px;line-height:1.08;max-width:350px}
 body>.wrap{padding-inline:20px}
}
@media(max-width:360px){#fit .dress-demo{width:min(100%,250px)}#scan .scan-phone{padding-right:0}#try .outfit-controls{gap:5px}#try .outfit-controls button{font-size:10px}}
/* Preserve the original hero's two-colour headline emphasis. */
html[data-hybrid] #hero h1 .hybrid-title{color:var(--hero-ink)}
@media(min-width:801px){#try.shopper-try .editorial{grid-template-rows:min-content 1fr}#try .outfit-controls{align-self:start}}
/* Closing is subordinate to the narrative sections: the shared 52px tier, 42px mobile. */
#closing h2{font-size:52px}
@media(max-width:760px){#closing h2{font-size:42px}}
/* Contain the footer's existing top margin within its closing-matched background. */
body>.wrap{display:flow-root}