/* Shared page families: real product evidence, comfortable reading, clear actions. */
:root{--page-gap:clamp(32px,5vw,88px);--page-ink:#181b22;--page-blue:#315cf6;--page-mist:#edf1fa}
main{overflow:clip}
.page-crumbs{padding-top:24px;font-size:13px;line-height:1.5;color:#626978}
.page-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;list-style:none;padding:0;margin:0}
.page-crumbs li{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.page-crumbs a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}
.page-crumbs a:hover{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.page-crumbs [aria-current="page"]{color:var(--ink);overflow-wrap:anywhere}
.breadcrumb-separator{width:12px;height:12px;flex:0 0 12px;color:#7b8290}
.mega-columns .eyebrow>a{display:inline-flex;padding:0;border:0;font:inherit;color:inherit}
.mega-columns .eyebrow>a:hover{color:var(--cobalt)}
.refined-hero{padding-block:52px 76px;min-height:0}
.refined-hero.with-visual{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--page-gap);align-items:center}
.refined-hero.without-visual{max-width:1760px}.refined-hero.without-visual>div{max-width:1020px}
.refined-hero h1{font-size:clamp(42px,4.65vw,80px);line-height:1.06;letter-spacing:-.055em;margin:0 0 25px;text-wrap:balance}
.refined-hero .hero-lead{font-size:18px;line-height:1.65;max-width:570px;margin:0 0 30px}
.refined-hero .hero-actions:empty{display:none}.refined-hero .tag{margin-bottom:22px}
.hero-actions,.section-actions{display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap}
.button-primary{background:#315cf6;color:#fff;border:1px solid #315cf6}
.button-secondary{background:#edf0f5;color:#181b22;border:1px solid #e1e5ed}
.button-secondary:hover{background:#e1e6ef;border-color:#d2d9e4}
.text-link{background:transparent;border:0}
.button:focus-visible,.text-link:focus-visible{outline:3px solid #315cf6;outline-offset:4px}
.section-actions .text-link{margin:0}.refined-hero .button,.section-actions .button{min-height:50px}
.product-image,.editorial-illustration,.garment-portrait{margin:0;border-radius:20px;overflow:hidden;background:#f6f6f6;min-width:0}
.product-image img{width:100%;display:block;height:auto;object-fit:contain}
.product-image.portrait{aspect-ratio:1}.product-image.portrait img{height:100%;object-fit:cover}
.editorial-illustration{aspect-ratio:4/3;background:var(--page-mist)}.editorial-illustration img{width:100%;height:100%;display:block}
.garment-portrait{height:clamp(360px,38vw,630px);display:grid;place-items:center;background:#f2f4f8}
.garment-portrait>img{width:100%;height:100%;object-fit:cover}
.garment-portrait>.catalogue-drawing{width:55%;height:75%}
.refined-hero .actual-capture{width:100%}.refined-hero .actual-capture.full-capture{aspect-ratio:4/3;background:#f6f6f6}
.refined-hero .actual-capture.full-capture img{object-fit:contain}
.look-study{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}.look-study img{width:100%;height:460px;object-fit:cover;border-radius:18px;background:#f6f6f6}
.future-feature{background:var(--page-mist);border-radius:24px;padding:clamp(30px,4vw,65px)}
.future-feature h2{font-size:clamp(30px,3vw,46px);line-height:1.1;margin-bottom:22px}.future-feature p{color:var(--muted);font-size:17px;line-height:1.7}
.benefit-section{border-top:1px solid var(--line)}
.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.benefit-grid:has(>article:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 60px}
.benefit-grid article{border-top:2px solid var(--cobalt);padding-top:26px;min-width:0}
.benefit-grid h3{font-size:clamp(24px,2.3vw,35px);line-height:1.15;letter-spacing:-.035em;margin:0 0 18px}
.benefit-grid p{font-size:17px;line-height:1.7;color:var(--muted);max-width:580px;margin-bottom:22px}
.benefit-grid .text-link{font-size:14px}
.evidence-block{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--page-gap);align-items:center;border-top:1px solid var(--line)}
.evidence-block h2{font-size:clamp(34px,3.5vw,58px);line-height:1.1;letter-spacing:-.045em;margin-bottom:24px}
.evidence-block p{font-size:18px;line-height:1.7;color:var(--muted);margin-bottom:30px}
.evidence-block>.product-image,.evidence-block>.actual-capture{width:100%}
.editorial-reading{padding-block:40px 80px;border-top:1px solid var(--line)}
.editorial-reading>h2{font-size:clamp(34px,3.6vw,58px);margin:20px 0 50px}
.editorial-columns{display:grid;grid-template-columns:minmax(0,820px) minmax(240px,330px);gap:clamp(50px,7vw,130px);justify-content:space-between;align-items:start}
.editorial-columns .prose{max-width:820px;min-width:0;font-size:17px;line-height:1.85}
.editorial-columns .prose h2{font-size:clamp(28px,2.7vw,39px);line-height:1.18;letter-spacing:-.04em;margin-top:58px;margin-bottom:22px;text-wrap:balance}
.editorial-columns .prose>h2:first-child{margin-top:0}
.editorial-columns .prose h3{font-size:25px;line-height:1.3;margin-top:34px}
.editorial-columns .prose p{margin-bottom:22px;color:#4e5665}
.editorial-columns .prose li{margin-bottom:10px;color:#4e5665}
.editorial-columns .prose dl{margin:0 0 40px}
.editorial-columns .prose .definition-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,3fr);column-gap:32px;row-gap:10px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.editorial-columns .prose .definition-row:first-child{border-top:1px solid var(--line)}
.editorial-columns .prose dt{margin:0;font-size:19px;line-height:1.5;font-weight:600;letter-spacing:-.02em;scroll-margin-top:120px;overflow-wrap:anywhere}
.editorial-columns .prose dd{grid-column:2;margin:0;color:#4e5665;font-size:17px;line-height:1.75;overflow-wrap:anywhere}
@media(max-width:600px){.editorial-columns .prose .definition-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:22px 0}.editorial-columns .prose dd{grid-column:1;font-size:16px}.editorial-columns .prose dt{font-size:18px}}

.editorial-columns .prose table{font-size:14px;width:100%;border-collapse:collapse}
.editorial-columns .prose :is(td,th){font-size:14px;padding:16px 14px;line-height:1.5}
.editorial-columns .prose th{background:var(--page-mist);font-weight:600}
.editorial-columns .table-scroll{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:12px;margin:30px 0}
.editorial-columns .prose caption{text-align:left;font-size:13px;line-height:1.6;padding:16px;color:var(--muted)}
.editorial-columns .prose :is(.reserve,.encart){border-left:3px solid var(--cobalt);padding:20px 24px;background:var(--page-mist);border-radius:0 10px 10px 0;margin:30px 0}
.editorial-aside{position:sticky;top:112px;min-width:0}
.context-cta{background:var(--page-mist);padding:22px;border-radius:18px}
.context-cta .product-image{margin:-7px -7px 24px;border-radius:12px}
.context-cta h2{font-size:27px;line-height:1.16;letter-spacing:-.035em;margin:0 0 24px}
.context-cta .button{font-size:13px;padding:13px 16px;min-height:46px;max-width:100%}
.editorial-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.editorial-card{position:relative;display:flex;flex-direction:column;padding:30px;border:1px solid var(--line);border-radius:16px;background:#f6f8fc;min-width:0;transition:background 180ms ease,border-color 180ms ease}
.editorial-card h3{font-size:27px;line-height:1.2;letter-spacing:-.035em;margin:0 0 18px}
.editorial-card p{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 22px}
.editorial-card>span{font-size:28px;color:var(--cobalt);margin-top:auto;align-self:flex-end}
.editorial-card:hover{background:#edf2ff;border-color:#b4c4f8}
.workspace-tabs{min-width:0}
.workspace-tabs .pill-tabs{width:max-content;max-width:100%;overscroll-behavior-x:contain}
.workspace-tabs .pill-tabs [role="tab"]{flex-shrink:0}
.feature-pill-content{display:none;padding:0 26px 26px}
.feature-pill [aria-selected="true"]+.feature-pill-content{display:block}
.feature-pill-content p{display:block!important;padding:0!important;margin:0 0 18px;font-size:15px;line-height:1.75}
.feature-pill-content .text-link{font-size:14px;gap:15px;line-height:1.5}
.pricing-section{padding-top:35px}.pricing-section .plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pricing-section .plan-card{padding:30px 24px;display:flex;flex-direction:column}
.pricing-section .plan-card h3{font-size:34px;margin:0 0 16px;letter-spacing:-.035em}
.pricing-section .plan-card p{min-height:52px;font-size:15px;line-height:1.6}
.pricing-section .plan-card dl{flex:1}.pricing-section .plan-card .button{justify-content:space-between;font-size:13px;padding:14px 16px}
.contact-note{border-top:1px solid var(--line)}.contact-note h2{font-size:36px;margin-bottom:20px}.contact-note p{font-size:18px;color:var(--muted);max-width:600px}
.brand-assets-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:25px}.brand-assets-grid>div{min-height:310px;display:grid;place-items:center;background:var(--page-mist);border-radius:18px;padding:40px}.brand-assets-grid img{max-width:100%;object-fit:contain}
.brand-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.brand-palette>div>span{display:block;height:180px;border:1px solid var(--line);border-radius:14px;margin-bottom:20px}.brand-palette h3{font-size:24px}.brand-palette p{font-size:14px;color:var(--muted)}
/* One floating contents dock per page. Overflow stays inside its scroll strip. */
.section-dock{max-width:min(960px,calc(100% - 40px));gap:0;padding:6px;overflow:visible}
.dock-links{display:flex;min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;gap:3px}
.dock-links::-webkit-scrollbar{display:none}
.dock-links>a{flex-shrink:0;max-width:205px;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.dock-scroll{display:grid;place-items:center;flex:0 0 34px;width:34px;min-height:38px;border:0;border-radius:24px;color:var(--ink);background:none;font-size:20px;cursor:pointer}
.dock-scroll[hidden]{display:none}.dock-scroll:disabled{opacity:.3;cursor:default}
.dock-scroll:focus-visible,.dock-links>a:focus-visible{outline:2px solid var(--cobalt);outline-offset:-3px}
.section-dock{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 220ms ease,visibility 0s linear 220ms}
.section-dock[data-visible]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 220ms ease,visibility 0s linear 0s}
.section-dock:not([data-visible]),.section-dock[data-footer]:focus-within{opacity:0;visibility:hidden;pointer-events:none}
@media(min-width:1700px){.refined-hero.with-visual{grid-template-columns:1fr 1.05fr}}
@media(max-width:1100px){
 .refined-hero h1{font-size:52px}.refined-hero.with-visual{gap:35px}.refined-hero .hero-lead{font-size:17px}
 .editorial-columns{grid-template-columns:minmax(0,1fr) 270px;gap:45px}.context-cta{padding:18px}.context-cta h2{font-size:25px}
 .pricing-section .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .editorial-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.benefit-grid{gap:24px}
}
@media(max-width:900px){
 .refined-hero.with-visual{grid-template-columns:1fr;gap:35px}.refined-hero>div:first-child{max-width:720px}.refined-hero .product-image.portrait{aspect-ratio:4/3}.refined-hero .actual-capture{max-height:630px}
 .editorial-columns{grid-template-columns:1fr}.editorial-aside{position:static;max-width:600px}.context-cta{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:center;padding:24px}.context-cta .product-image{grid-row:span 2;margin:0}.context-cta .button{justify-self:start}.context-cta h2{margin-top:0}
 .evidence-block{grid-template-columns:1fr;gap:35px}.evidence-block>div:last-child{max-width:640px}
 .benefit-grid{grid-template-columns:1fr;gap:30px}.benefit-grid:has(>article:nth-child(4)){grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
 .page-crumbs{padding-top:22px;font-size:12px}.refined-hero{padding-block:32px 52px}.refined-hero h1{font-size:42px;line-height:1.07;letter-spacing:-.045em}.refined-hero .hero-lead{font-size:16px;line-height:1.7;margin-bottom:25px}
 .refined-hero .hero-actions{gap:18px}.refined-hero .button{font-size:13px;padding:13px 19px}.hero-actions .text-link,.section-actions .text-link{font-size:13px}
 .product-image,.editorial-illustration,.garment-portrait{border-radius:14px}.garment-portrait{height:400px}.look-study img{height:330px}
 .benefit-grid:has(>article:nth-child(4)){grid-template-columns:1fr}.benefit-grid h3{font-size:27px}.benefit-grid p{font-size:16px}
 .evidence-block h2{font-size:35px}.evidence-block p{font-size:16px}.editorial-reading{padding-block:30px 55px}.editorial-reading>h2{font-size:33px;margin-bottom:32px}
 .editorial-columns .prose{font-size:16px;line-height:1.8}.editorial-columns .prose h2{font-size:29px;margin-top:40px}.editorial-columns .prose :is(td,th){font-size:13px;padding:12px;min-width:110px}.editorial-columns .prose :is(.reserve,.encart){padding:18px}
 .context-cta{grid-template-columns:1fr;padding:24px}.context-cta .product-image{grid-row:auto;max-height:190px;overflow:hidden;margin-bottom:24px}.context-cta h2{font-size:27px;margin-bottom:22px}
 .editorial-card-grid{grid-template-columns:1fr}.editorial-card{padding:26px}.editorial-card h3{font-size:26px}
 .feature-pill-content{padding:0 18px 22px}.feature-pill-content p{font-size:15px}.feature-pill-content .text-link{font-size:13px}
 .pricing-section .plan-grid{grid-template-columns:1fr}.pricing-section .plan-card{padding:28px}.pricing-section .plan-card p{min-height:0}
 .brand-assets-grid{grid-template-columns:1fr}.brand-assets-grid>div{min-height:220px}.brand-palette{grid-template-columns:repeat(2,1fr)}.brand-palette>div>span{height:140px}
 .dock-links>a{max-width:165px;font-size:11px;padding:12px 15px}.section-dock{max-width:calc(100% - 24px)}.dock-scroll{flex-basis:28px;width:28px;font-size:18px}
 .home .hero-actions .text-link{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.editorial-card,.section-dock,.section-dock[data-visible]{transition:none}.dock-links{scroll-behavior:auto}}

/* Pinned feature story, with the actual atelier captures. */
.scroll-workflow .section-head{margin-bottom:42px}
.scroll-workflow-layout{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:clamp(32px,4vw,72px);align-items:start}
.scroll-workflow[data-pinned] .scroll-workflow-sticky{position:sticky;top:112px}
.scroll-workflow[data-pinned] .scroll-feature-media{width:100%;max-height:var(--workflow-media-height,calc(100svh - 380px))}
.scroll-feature-list{display:grid;gap:16px}
.scroll-feature{border:1px solid var(--line);border-radius:18px;background:#f2f3f7;overflow:hidden;transition:background 200ms ease}
.scroll-feature[data-active]{background:#fff}
.scroll-feature h3{margin:0;font:500 clamp(21px,2vw,30px)/1.15 var(--display);letter-spacing:-.04em}
.scroll-feature h3 button{display:block;width:100%;padding:24px 26px;text-align:left;color:var(--muted);background:none;border:0;font:inherit;letter-spacing:inherit;cursor:pointer}
.scroll-feature[data-active] h3 button{color:var(--ink)}
.scroll-feature-copy{padding:0 26px 24px}
.scroll-feature-copy p{font-size:clamp(14px,1.15vw,18px);line-height:1.65;margin:0 0 18px;color:var(--muted)}
.scroll-feature-copy .text-link{padding:0;min-height:36px}
.scroll-feature-progress{display:block;height:2px;background:#e6e9f2;margin-top:22px;overflow:hidden}
.scroll-feature-progress>span{display:block;height:100%;background:var(--cobalt);transform:scaleX(0);transform-origin:left}
.scroll-feature-media{position:relative;aspect-ratio:16/10;max-height:calc(100svh - 190px);min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#f5f5f5}
.scroll-feature-visual{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 250ms ease,visibility 0s linear 250ms}
.scroll-feature-visual[data-active]{opacity:1;visibility:visible;transition:opacity 250ms ease,visibility 0s}
.scroll-feature-visual .actual-capture{width:100%;height:100%;border:0;border-radius:0;aspect-ratio:auto}
.scroll-feature-visual .actual-capture img,.scroll-feature-visual .actual-capture video{width:100%;height:100%;object-fit:contain}
.scroll-workflow:not([data-pinned]) .scroll-feature-progress{display:none}
@media(min-width:961px) and (max-height:850px){
 .scroll-workflow[data-pinned] .scroll-workflow-sticky{top:104px}
 .scroll-workflow[data-pinned] .section-head{margin-bottom:20px}
 .scroll-workflow[data-pinned] .section-head h2{font-size:36px;line-height:1.08;margin:0}
 .scroll-workflow[data-pinned] .scroll-feature-list{gap:10px}
 .scroll-workflow[data-pinned] .scroll-feature h3{font-size:22px}
 .scroll-workflow[data-pinned] .scroll-feature h3 button{padding:16px 24px}
 .scroll-workflow[data-pinned] .scroll-feature-copy{padding:0 24px 18px}
 .scroll-workflow[data-pinned] .scroll-feature-copy p{font-size:14px;line-height:1.5;margin-bottom:12px}
 .scroll-workflow[data-pinned] .scroll-feature-copy .text-link{min-height:32px}
 .scroll-workflow[data-pinned] .scroll-feature-progress{margin-top:16px}
}
@media(max-width:960px){.scroll-workflow-layout{grid-template-columns:1fr;gap:24px}.scroll-feature-list{gap:10px}.scroll-feature h3 button{padding:18px 22px}.scroll-feature-copy{padding:0 22px 20px}.scroll-feature-media{max-height:none;aspect-ratio:4/3}.scroll-feature-copy p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.scroll-feature-visual,.scroll-feature-visual[data-active]{transition:none}}

/* Shared menu surface; content travels in the direction of the hovered item. */
.mega-menu{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,22vw,340px);align-items:start;gap:32px}
.mega-links,.mega-links .mega-columns,.mega-links .mega-columns>div{min-width:0}
.mega-links .mega-columns{gap:24px}
.menu-cta{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#edf1fa}
.menu-cta>img{display:block;width:100%;height:190px;object-fit:cover;background:#f5f5f5}
.menu-cta-copy{padding:22px}
.menu-cta h2{font-size:clamp(23px,1.8vw,29px);line-height:1.15;letter-spacing:-.035em;margin:0 0 20px}
.menu-cta .button[data-button-style]{--action-height:46px;--action-pad:18px;--action-icon:28px;font-size:13px;max-width:100%}
.menu-cta .button-content{gap:14px}
@media(min-width:961px) and (max-width:1180px){.mega-menu{gap:24px;padding:24px}.mega-links .mega-columns{gap:18px}.mega-links .mega-columns a{font-size:13px;gap:8px}.menu-cta-copy{padding:18px}}
@media(max-width:960px){.mega-menu{grid-template-columns:1fr;gap:24px}.mega-links .mega-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-cta{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center}.menu-cta>img{height:100%;min-height:170px}.menu-cta-copy{padding:20px}.menu-cta h2{font-size:24px}}
@media(max-width:480px){.menu-cta{grid-template-columns:100px minmax(0,1fr)}.menu-cta-copy{padding:16px}.menu-cta h2{font-size:21px;margin-bottom:16px}.menu-cta .button[data-button-style]{--action-pad:14px;--action-icon:24px;font-size:12px}.menu-cta .button-content{gap:8px}}
.mega-surface,.menu-backdrop{display:none}
@media(min-width:961px){
 .mega-surface{display:block;position:absolute;top:83px;left:var(--gutter);right:var(--gutter);max-width:1760px;margin-inline:auto;background:var(--paper);border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;box-shadow:0 20px 35px #181a2110;pointer-events:none;opacity:0;transform-origin:top;transition:opacity 200ms ease;z-index:0}
 .site-header[data-menu-open] .mega-surface{opacity:1}
 .site-header[data-directional-nav] .mega-menu{background:transparent;border:0;box-shadow:none;z-index:1;transform-origin:top;overflow-x:hidden}
 .nav-item[data-active] .mega-menu{z-index:2}
 .site-header[data-directional-nav] .nav-item:not([data-active]) .mega-menu{pointer-events:none}
 .menu-backdrop{display:block;position:fixed;inset:84px 0 0;background:#181a2126;z-index:29;opacity:0;visibility:hidden;transition:opacity 200ms ease,visibility 0s linear 200ms}
 body:has(.site-header[data-menu-open]) .menu-backdrop{opacity:1;visibility:visible;transition-delay:0s}
}
@media(prefers-reduced-motion:reduce){.mega-surface,.menu-backdrop{transition:none}}

/* Osmo 014 / 025: Clothix variants. Icons are decorative; each action has one accessible name. */
:root{--action-ease:cubic-bezier(.23,1,.32,1);--action-wipe:cubic-bezier(.32,.72,0,1)}
body .button[data-button-style]{touch-action:manipulation;--action-height:56px;--action-pad:24px;--action-icon:32px;display:inline-grid;position:relative;isolation:isolate;gap:0;padding:0;border:0;border-radius:999px;min-height:var(--action-height);background:transparent;color:var(--ink);font-family:var(--body);font-weight:600;line-height:1.25;text-decoration:none;vertical-align:middle;transform:none;transition:none;-webkit-tap-highlight-color:transparent}
body .button[data-button-style] span{font-size:inherit;line-height:inherit;letter-spacing:inherit}
body .button[data-button-style]:hover{background:transparent;transform:none}
body .button[data-button-style]:focus-visible{outline:3px solid var(--cobalt);outline-offset:5px}
body .button[data-button-style] .button-label{font:inherit;transform:none;min-width:0;text-align:center}
.button[data-button-style] .button-surface{position:absolute;inset:0;border-radius:inherit;background:var(--action-primary-bg,var(--cobalt));transition:transform 250ms var(--action-ease);z-index:0}
.button[data-button-style] .button-content{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 10px 8px var(--action-pad);min-height:var(--action-height);color:var(--action-primary-fg,#fff);position:relative;z-index:1;transform:none}
.button[data-button-style] .button-icon{display:grid;flex:0 0 var(--action-icon);width:var(--action-icon);height:var(--action-icon);position:relative;transform:none;transition:transform 150ms var(--action-ease)}
.button[data-button-style] .button-icon>span{grid-area:1/1;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;transition:transform 250ms var(--action-ease),opacity 200ms ease}
.button[data-button-style] .button-icon svg{width:15px;height:15px}
.button[data-button-style] .button-icon-default{background:white;color:var(--cobalt);transform:rotate(0deg);opacity:1}
.button[data-button-style] .button-icon-hover{background:var(--ink);color:white;transform:rotate(-102deg) scale(.9);opacity:0}
.button[data-button-style] .button-clip{display:grid;overflow:clip;border-radius:inherit;min-height:var(--action-height);width:100%;transform:none;transition:transform 150ms var(--action-ease);background:var(--action-secondary-bg,#e2e6ee);box-shadow:inset 0 0 0 1px var(--action-secondary-border,#b8c1d0)}
.button[data-button-style] .button-default,.button[data-button-style] .button-hover{grid-area:1/1;display:grid;place-items:center;min-height:var(--action-height);padding:14px var(--action-pad);border-radius:inherit}
.button[data-button-style] .button-default{color:var(--action-secondary-fg,var(--ink));transform:none;transition:transform 250ms var(--action-wipe)}
.button[data-button-style] .button-hover{background:var(--action-secondary-hover-bg,var(--ink));color:var(--action-secondary-hover-fg,#fff);transform:translateX(calc(-100% - 1px));transition:transform 250ms var(--action-wipe)}
.button[data-button-style] .button-hover .button-label{transform:translateX(-1em);transition:transform 250ms var(--action-wipe)}
.button[data-button-style]:active .button-icon{transform:scale(1.1)}
.button[data-button-style]:active .button-clip{transform:scale(.97)}
body .nav-account .button[data-button-style]{--action-height:44px;--action-icon:28px;--action-pad:18px}
body .context-cta .button[data-button-style],body .config-settings .button[data-button-style]{--action-height:46px;--action-icon:28px;--action-pad:16px}
body .plan-card .button[data-button-style]{--action-height:50px;--action-pad:18px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .button[data-button-style="014"]:hover .button-surface{transform:scale(1.035,1.075)}
 .button[data-button-style="014"]:hover .button-icon-default{transform:rotate(102deg) scale(.9);opacity:0}
 .button[data-button-style="014"]:hover .button-icon-hover{transform:rotate(0deg) scale(1);opacity:1}
 .button[data-button-style="025"]:hover .button-default{transform:translateX(1em) scale(.9)}
 .button[data-button-style="025"]:hover .button-hover{transform:translateX(0)}
 .button[data-button-style="025"]:hover .button-hover .button-label{transform:translateX(0)}
}
@media(max-width:600px){body .button[data-button-style]{touch-action:manipulation;--action-height:52px;--action-pad:20px;--action-icon:30px}.button[data-button-style] .button-content{gap:14px}}
@media(prefers-reduced-motion:reduce){.button[data-button-style] *{transition:none!important}.button[data-button-style]:active .button-icon,.button[data-button-style]:active .button-clip{transform:none}}

/* A single closing composition, with explicit button colours for its dark surface. */
.closing{position:relative;overflow:clip;background:#181a21;color:#fcfcfd;--action-secondary-bg:#e2e6ee;--action-secondary-fg:#181a21;--action-secondary-border:#b8c1d0;--action-secondary-hover-bg:#fff;--action-secondary-hover-fg:#181a21}
.closing-inner{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,4vw,72px);min-height:540px;padding-block:76px}
.closing-copy{position:relative;z-index:1;min-width:0}
.closing h2{font:500 clamp(44px,4.65vw,82px)/1.04 var(--display);letter-spacing:-.055em;text-wrap:balance;max-width:850px;margin:0 0 38px;color:#fcfcfd}
.closing-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.closing-brand-mark{display:block;position:relative;justify-self:center;width:clamp(360px,39vw,660px);aspect-ratio:1;color:#315cf6;opacity:1;transform:rotate(-8deg);perspective:1100px;pointer-events:none;margin-block:-56px;margin-right:-80px}
.closing-brand-mark svg{display:block;width:100%;height:100%;filter:drop-shadow(0 16px 30px #070d291f)}
.closing-logo-stack{display:grid;width:100%;height:100%;transform-style:preserve-3d}
.closing-logo-stack>svg{grid-area:1/1;backface-visibility:hidden;filter:none}
.closing-logo-stack>svg:not(:first-child){opacity:0}
@media(prefers-reduced-motion:reduce){.closing-logo-stack{transform:none!important}.closing-logo-stack>svg:not(:first-child){display:none}}
.closing .button[data-button-style]:focus-visible{outline-color:#fff}
/* Harmonise section rhythm instead of stacking two large blank margins. */
:root{--section-space:clamp(64px,6.25vw,100px)}
main>.section{padding-block:var(--section-space)}
main>.section.wrap+.section.wrap{padding-top:40px}
main>.page-intro+.section{padding-top:42px}
.refined-hero{padding-block:44px 64px}
.refined-hero.without-visual{padding-bottom:40px}
.section-head{margin-bottom:36px}
.section-head h2{margin-bottom:0;text-wrap:balance}
.hero-actions,.section-actions,.closing-actions{row-gap:16px}
.pricing-section .plan-card p{min-height:0}
.pricing-section .plan-card dl{margin-block:22px}
.pricing-section .plan-card{gap:0}
main>.section.wrap:last-of-type{padding-bottom:var(--section-space)}
@media(min-width:1700px){.closing-inner{min-height:620px}}
@media(max-width:960px){
 .closing-inner{min-height:470px;gap:20px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding-block:64px}
 .closing h2{font-size:clamp(40px,5.4vw,54px)}
 .closing-brand-mark{width:clamp(320px,44vw,430px);margin-right:-80px}
}
@media(max-width:600px){
 .closing-inner{grid-template-columns:1fr;min-height:0;padding-block:52px 0;gap:18px}
 .closing h2{font-size:clamp(38px,10.7vw,52px);line-height:1.06;margin-bottom:28px;max-width:100%}
 .closing-actions{gap:12px;align-items:stretch}
 .closing-brand-mark{width:min(94vw,380px);margin:-4px -30px -62px 0;justify-self:end}
 main>.section.wrap+.section.wrap{padding-top:20px}
 main>.page-intro+.section{padding-top:24px}
 .refined-hero{padding-block:32px 40px}.refined-hero.without-visual{padding-bottom:24px}
 .section-head{margin-bottom:28px}
}


/* Cascading garment selection around one stationary mannequin. */
.garment-carousel{background:#fff;overflow:hidden;min-width:0}
.garment-cascade{position:relative;height:560px;overflow:hidden;touch-action:pan-y;isolation:isolate}
.garment-carousel .config-stage{position:absolute;top:0;left:22%;width:56%;height:100%;margin:0;background:#fff;z-index:20;pointer-events:none}
.garment-carousel .config-stage canvas{cursor:default;pointer-events:none}
.garment-carousel .config-stage:after{content:"";position:absolute;inset:auto 0 0;height:40px;background:linear-gradient(transparent,#fff);z-index:3;pointer-events:none}
.garment-slide{position:absolute;left:0;top:16%;height:68%;width:56%;border:0;padding:22px 0;background:#f3f4f6;clip-path:inset(0 48% round 12px);transform:translateX(-120%);opacity:0;transition:transform 650ms var(--ease-out),clip-path 650ms var(--ease-out),opacity 250ms ease;cursor:pointer}
.garment-slide img{width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.garment-slide[data-slot="0"]{opacity:0!important;pointer-events:none}
.garment-carousel[data-instant] .garment-slide{transition:none}
.garment-carousel:focus-visible{outline:none}.garment-carousel:focus-visible .garment-cascade{outline:2px solid var(--cobalt);outline-offset:-3px}
@media(min-width:1600px){.garment-cascade{height:640px}}
@media(max-width:600px){.garment-cascade{height:440px}.garment-carousel .config-stage{left:16%;width:68%}.garment-slide{top:22%;height:56%;padding:12px 0}}
@media(prefers-reduced-motion:reduce){.garment-slide{transition:none}}

/* Three centred rows: elapsed-time progress, garment name, then navigation. */
.garment-carousel-nav{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:18px}
.garment-carousel-nav [data-model-name]{font-size:17px;font-weight:500;line-height:1.4;text-align:center}
.garment-carousel-arrows{display:flex;align-items:center;justify-content:center;gap:16px}
.garment-carousel-arrows button{display:grid;place-items:center;width:48px;height:48px;background:#f0f2f5;border:1px solid #e1e4ea;border-radius:50%;padding:13px}
.garment-carousel-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.garment-autoplay{display:flex;align-items:center;gap:10px;width:110px;height:24px;padding:4px 0;background:transparent;border:0;border-radius:0;color:var(--muted)}
.garment-timer{height:3px;flex:1;background:#e7e9ee;border-radius:2px;overflow:hidden}
.garment-timer>span{display:block;height:100%;background:var(--cobalt);transform:scaleX(0);transform-origin:left}
.garment-autoplay svg{width:12px;height:12px;flex:none}
.garment-autoplay svg[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.garment-carousel-arrows button:hover{background:#e6ebff;color:var(--cobalt)}}
