@import url('/chloe-assets/figma-fonts-1112/fonts.css');
/* Chloe/en: original Figma serif / Inter, one shared five-level type scale. */
body{--title:"OPTITimes-Roman","Songti SC","Noto Serif CJK SC",serif;--text:"Chloe Figma Inter","PingFang SC","Microsoft YaHei",sans-serif;--editorial-size:clamp(32px,4.21793vw,48px);font-family:var(--text)}
:is(button,input,textarea,select){font-family:var(--text)}
:is(h1,h2,h3,.wordmark){font-family:var(--title);font-weight:500;letter-spacing:0}
.section-heading{max-width:none;text-align:left;margin-inline:0}
.section-heading p{margin-inline:0}
body :is(h2.editorial-heading,.figma-section-heading h2,.cw-index-title-text){font-family:var(--title);font-size:var(--editorial-size);font-weight:500;line-height:1.2;letter-spacing:0}
.editorial-heading>span{display:block}
body :is(.editorial-kicker,.figma-section-heading .figma-eyebrow,.cw-index .cw-index-eyebrow){display:block;font-family:"OPTITimesRoman-Italic","Songti SC",serif;font-size:clamp(18px,1.75747vw,20px);font-style:italic;font-weight:400;line-height:1.5;margin:0 0 4px;letter-spacing:0}
body .photo-cta h2{color:#fff}
:is(.section-heading p,.value-grid p,.steps p,.case-summary p){font-family:var(--text);font-size:16px;line-height:1.625}
:is(.media-label,.product-name,.case-tag,.text-link,.text-button){font-family:var(--text);font-size:14px;line-height:1.5}
#services .product-view-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));height:100%;gap:2px}
#services .product-view-cell{display:block;position:relative;min-height:0;min-width:0;border:0;padding:0;overflow:hidden;background:transparent}
#services .product-view-cell img{display:block;width:100%;height:100%;object-fit:contain}
/* One product/input label and one result label, on the images rather than extra rows. */
#one-product .outfit-matched-image{position:relative}
#one-product .media-overlay{position:absolute;left:12px;bottom:12px;z-index:2;padding:5px 9px;background:rgba(255,255,255,.92);color:#111;font-family:var(--text);font-size:13px;line-height:1.4;pointer-events:none}
#one-product .outfit-grid{margin-top:0}
@media(max-width:767px){:is(.section-heading p,.value-grid p,.steps p,.case-summary p){font-size:15px}:is(.media-label,.product-name,.case-tag,.text-link,.text-button){font-size:13px}#one-product .media-overlay{left:6px;bottom:6px;padding:4px 6px;font-size:11px}}

/* A shared section scale also wins over the older image-CTA selectors. */
body h2.editorial-heading{font-size:var(--editorial-size)!important;line-height:1.2!important}
#wf-scroll #hd .h{font-size:calc(var(--editorial-size)*var(--wf-copy-inverse,1));line-height:1.2}
#wf-scroll #hd .k{font-size:calc(clamp(18px,1.75747vw,20px)*var(--wf-copy-inverse,1));line-height:1.5}

/* Keep the compact title unbroken when the workflow drawing scales on tablets. */
#wf-scroll #hd{width:max-content;max-width:100%}

/* The visible 1:2 photos, rather than the taller old container, define the frame. */
#one-product .outfit-results .outfit-matched-image{height:auto!important;aspect-ratio:1/2;max-height:var(--outfit-scroll-image,calc(100svh - 160px))}