/* Shopify try-on landing page: app-integrated black-and-white design.
   Uses only My AI Model Manager theme tokens so the landing page stays aligned
   with the shared public shell, navigation, footer, and theme system. */
.st-body { background:var(--surface-page); color:var(--ink); }
.st-wrap { margin:0 auto; max-width:1240px; padding-left:20px; padding-right:20px; }
.st-narrow { margin:0 auto; max-width:790px; padding-left:20px; padding-right:20px; }
.st-hero { background:var(--surface-page); padding:24px 0 74px; }
.st-hero-grid { background:var(--brand-fill); color:var(--ink-inverse); display:grid; grid-template-columns:1fr 1fr; min-height:600px; padding:0; }
.st-hero-copy { display:flex; flex-direction:column; justify-content:center; padding:72px 76px; }
.st-kicker-row,.st-section-meta,.st-section-caption { align-items:center; color:var(--ink-muted); display:flex; font-size:.68rem; font-weight:800; gap:12px; letter-spacing:.12em; text-transform:uppercase; }
.st-kicker-row { color:var(--veil-strong); }.st-pill,.st-outline-label { border:1px solid var(--line-strong); border-radius:50px; display:inline-flex; font-size:.66rem; font-weight:800; letter-spacing:.12em; line-height:1; padding:8px 10px; text-transform:uppercase; }.st-pill { border-color:var(--veil); color:var(--ink-inverse); }
.st-overline { color:var(--veil-strong); font-size:.68rem; font-weight:800; letter-spacing:.15em; margin:22px 0 14px; text-transform:uppercase; }
.st-hero h1,.st-intro h2,.st-split-heading h2,.st-proof-heading h2,.st-manifesto h2,.st-final-cta h2,.st-faq-section h2 { font-size:clamp(2.65rem,5.6vw,5rem); font-weight:900; letter-spacing:-.075em; line-height:.96; margin:0; }.st-hero h1 em,.st-split-heading h2 em,.st-manifesto h2 em { font-style:normal; }
.st-hero-lede { color:var(--veil-strong); font-size:.98rem; line-height:1.64; margin:24px 0 28px; max-width:470px; }.st-cta-row { align-items:center; display:flex; flex-wrap:wrap; gap:18px; }.st-btn { align-items:center; border-radius:50px; display:inline-flex; font-size:.9rem; font-weight:800; gap:8px; justify-content:center; padding:13px 20px; text-decoration:none; transition:background .16s ease,transform .16s ease; white-space:nowrap; }.st-btn--light { background:var(--surface-page); color:var(--ink); }.st-btn--light:hover { background:var(--surface-sunken); color:var(--ink); transform:translateY(-1px); }.st-text-link { border-bottom:1px solid var(--veil); color:var(--ink-inverse); font-size:.86rem; font-weight:700; padding-bottom:5px; text-decoration:none; }.st-hero-note { align-items:center; color:var(--veil); display:flex; font-size:.65rem; font-weight:700; gap:11px; letter-spacing:.06em; line-height:1.45; margin:30px 0 0; max-width:340px; text-transform:uppercase; }.st-hero-note span { background:var(--veil-strong); height:1px; min-width:34px; }
.st-hero-art { min-height:600px; overflow:hidden; position:relative; }.st-hero-art:after,.st-manifesto-image:after { background:linear-gradient(180deg,transparent 50%,var(--scrim-soft)); content:""; inset:0; position:absolute; pointer-events:none; }.st-hero-art>img { filter:grayscale(1) contrast(1.08); height:100%; object-fit:cover; object-position:center 32%; position:absolute; width:100%; }.st-hero-type { bottom:26px; color:var(--ink-inverse); font-size:clamp(3.2rem,5vw,5rem); font-weight:900; letter-spacing:-.12em; line-height:.72; position:absolute; right:25px; z-index:1; }.st-mini-artifact { background:var(--surface-overlay); bottom:-35px; box-shadow:var(--shadow-lg); color:var(--ink); left:-27px; padding:15px; position:absolute; width:260px; z-index:2; }.st-mini-head,.st-mini-foot { align-items:center; display:flex; font-size:.62rem; font-weight:800; justify-content:space-between; letter-spacing:.08em; text-transform:uppercase; }.st-mini-head span:first-child { align-items:center; display:flex; gap:5px; }.st-mini-head span:last-child { color:var(--ink-muted); font-size:.58rem; }.st-mini-product { align-items:center; border-bottom:1px solid var(--line); border-top:1px solid var(--line); display:flex; gap:11px; margin:12px 0; padding:12px 0; }.st-mini-product b,.st-mini-product small { display:block; }.st-mini-product b { font-size:.78rem; }.st-mini-product small { color:var(--ink-muted); font-size:.62rem; margin-top:3px; }.st-mini-coat { background:var(--brand-fill); display:block; height:40px; position:relative; width:36px; }.st-mini-coat:before { background:var(--brand-fill); border-radius:50%; content:""; height:12px; left:12px; position:absolute; top:-7px; width:12px; }
.st-ticker { align-items:center; border-bottom:1px solid var(--line); border-top:1px solid var(--line); color:var(--ink); display:flex; gap:21px; overflow:hidden; padding:17px max(20px,calc((100vw - 1240px)/2)); white-space:nowrap; }.st-ticker span { font-size:1rem; font-weight:800; letter-spacing:-.03em; }.st-ticker i { background:var(--brand-fill); border-radius:50%; display:block; height:5px; min-width:5px; }
.st-intro { background:var(--surface-page); padding:110px 0 102px; }.st-section-meta { border-bottom:1px solid var(--line); justify-content:space-between; padding-bottom:14px; }.st-intro-grid { display:grid; gap:9vw; grid-template-columns:1.25fr .75fr; margin-top:48px; }.st-intro h2 { font-size:clamp(2.55rem,4.8vw,4.5rem); }.st-intro-grid p { color:var(--ink-soft); font-size:.96rem; line-height:1.72; margin:0; }.st-intro-grid a { border-bottom:1px solid var(--ink); color:var(--ink); display:inline-flex; font-size:.76rem; font-weight:800; gap:7px; margin-top:24px; padding-bottom:6px; text-decoration:none; text-transform:uppercase; }
.st-import-section { background:var(--surface-raised); padding:95px 0 46px; }.st-split-heading,.st-proof-heading { display:grid; gap:34px; grid-template-columns:90px 1.1fr .7fr; margin-bottom:50px; }.st-section-number { font-size:1.35rem; font-weight:800; }.st-split-heading h2 { font-size:clamp(2.55rem,4.8vw,4.4rem); margin-top:18px; }.st-split-heading p,.st-proof-heading p { align-self:end; color:var(--ink-soft); font-size:.92rem; line-height:1.7; margin:0; padding-bottom:5px; }
.st-import-artifact { background:var(--surface-overlay); box-shadow:var(--shadow-md); overflow:hidden; }.st-artifact-top { align-items:center; border-bottom:1px solid var(--line); display:flex; font-size:.67rem; font-weight:900; justify-content:space-between; letter-spacing:.08em; padding:12px 16px; text-transform:uppercase; }.st-artifact-top span { align-items:center; display:flex; gap:7px; }.st-artifact-top span:last-child { color:var(--ink-muted); }.st-artifact-top span:last-child i { color:var(--status-success); }.st-artifact-body { padding:clamp(21px,3.5vw,50px); }.st-artifact-heading { align-items:start; display:flex; gap:20px; justify-content:space-between; }.st-artifact-heading span,.st-tryon-product>span { color:var(--ink-muted); display:block; font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.st-artifact-heading h3 { font-size:clamp(1.62rem,3vw,2.7rem); letter-spacing:-.06em; line-height:.96; margin:10px 0 0; }.st-artifact-heading>b { background:var(--surface-sunken); border-radius:50px; font-size:.64rem; font-weight:800; padding:9px 10px; text-transform:uppercase; }.st-url-row { display:flex; gap:10px; margin-top:29px; }.st-url-row>div { align-items:center; background:var(--surface-sunken); border:1px solid var(--line); display:flex; flex:1; font-size:.82rem; font-weight:700; gap:10px; padding:14px; }.st-url-row>div span { flex:1; }.st-check { color:var(--status-success); }.st-url-row>a { align-items:center; background:var(--brand-fill); color:var(--brand-ink); display:flex; font-size:.72rem; font-weight:800; gap:7px; padding:0 17px; text-decoration:none; text-transform:uppercase; }.st-product-meta { color:var(--ink-muted); display:flex; font-size:.61rem; font-weight:800; justify-content:space-between; letter-spacing:.06em; margin:23px 0 13px; text-transform:uppercase; }.st-product-grid { display:grid; gap:10px; grid-template-columns:repeat(4,1fr); }.st-product { background:var(--surface-page); border:1px solid var(--line); min-height:190px; padding:13px; position:relative; }.st-product.st-active { border:1.5px solid var(--ink); box-shadow:3px 3px 0 var(--brand-fill); }.st-product-shape { background:var(--brand-fill); display:block; height:93px; margin:14px auto 12px; position:relative; width:70px; }.st-shape-coat { clip-path:polygon(27% 0,47% 0,55% 8%,77% 21%,68% 100%,31% 100%,22% 21%,42% 8%); }.st-shape-trouser { clip-path:polygon(14% 0,86% 0,79% 100%,53% 100%,50% 40%,47% 100%,21% 100%); }.st-shape-bag { border-radius:3px 3px 8px 8px; height:55px; margin-top:34px; }.st-shape-bag:before { border:9px solid var(--brand-fill); border-bottom:0; border-radius:999px 999px 0 0; content:""; height:25px; left:17px; position:absolute; top:-19px; width:36px; }.st-shape-shirt { clip-path:polygon(25% 0,44% 0,50% 10%,56% 0,75% 0,100% 18%,77% 38%,74% 100%,26% 100%,23% 38%,0 18%); }.st-product b,.st-product small { display:block; }.st-product b { font-size:.7rem; }.st-product small { color:var(--ink-muted); font-size:.61rem; font-weight:700; margin-top:3px; }.st-product em { align-items:center; border:1px solid var(--line-strong); display:flex; height:17px; justify-content:center; position:absolute; right:10px; top:10px; width:17px; }.st-active em { background:var(--brand-fill); border-color:var(--brand-fill); color:var(--brand-ink); }.st-artifact-bottom { align-items:center; background:var(--brand-fill); color:var(--brand-ink); display:flex; font-size:.64rem; font-weight:800; justify-content:space-between; letter-spacing:.08em; padding:13px 16px; text-transform:uppercase; }.st-artifact-bottom a { align-items:center; background:var(--surface-page); color:var(--ink); display:flex; font-size:.63rem; font-weight:900; gap:8px; padding:8px 10px; text-decoration:none; }.st-section-caption { justify-content:space-between; margin-top:21px; }
.st-tryon-section { background:var(--brand-fill); color:var(--ink-inverse); padding:95px 0 105px; }.st-split-heading--dark p { color:var(--veil-strong); }.st-tryon-artifact { background:var(--surface-raised); box-shadow:0 12px 32px var(--scrim); color:var(--ink); display:grid; grid-template-columns:38% 62%; overflow:hidden; }.st-tryon-aside { border-right:1px solid var(--line); }.st-tryon-aside .st-artifact-top { background:var(--surface-overlay); }.st-tryon-aside .st-artifact-top>b { align-items:center; background:var(--brand-fill); border-radius:50%; color:var(--brand-ink); display:flex; font-size:.63rem; height:21px; justify-content:center; width:21px; }.st-tryon-product { padding:27px 27px 0; }.st-tryon-product h3 { font-size:2.5rem; letter-spacing:-.07em; line-height:.85; margin:14px 0; }.st-tryon-product>b { font-size:.72rem; }.st-large-garment { align-items:center; display:flex; height:280px; justify-content:center; position:relative; }.st-coat-main { background:var(--brand-fill); clip-path:polygon(29% 0,45% 0,50% 7%,55% 0,71% 0,100% 21%,78% 41%,73% 100%,27% 100%,22% 41%,0 21%); display:block; height:203px; position:relative; width:190px; }.st-coat-neck { background:var(--surface-raised); clip-path:polygon(34% 0,66% 0,50% 35%); height:56px; left:50%; position:absolute; top:38px; transform:translateX(-50%); width:65px; }.st-coat-belt { background:var(--fill-mid); height:7px; left:50%; position:absolute; top:145px; transform:translateX(-50%); width:152px; }.st-direction-picker { border-top:1px solid var(--line); padding:13px; }.st-direction-picker>span { color:var(--ink-muted); display:block; font-size:.61rem; font-weight:800; letter-spacing:.1em; margin-bottom:10px; text-transform:uppercase; }.st-direction-picker>div { display:grid; grid-template-columns:repeat(3,1fr); }.st-direction-picker b { border:1px solid var(--line); font-size:.62rem; margin-left:-1px; padding:9px 3px; text-align:center; }.st-direction-picker b:first-child { background:var(--brand-fill); border-color:var(--brand-fill); color:var(--brand-ink); }.st-tryon-stage { background:var(--brand-fill); color:var(--ink-inverse); min-height:540px; padding:16px; position:relative; }.st-stage-top { align-items:center; color:var(--veil-strong); display:flex; font-size:.61rem; font-weight:800; justify-content:space-between; letter-spacing:.11em; text-transform:uppercase; }.st-stage-top span:last-child { align-items:center; display:flex; gap:4px; }.st-stage-image { height:390px; margin-top:14px; overflow:hidden; position:relative; }.st-stage-image img { filter:grayscale(1) contrast(1.12); height:100%; object-fit:cover; object-position:center 36%; width:100%; }.st-corner { border-color:var(--ink-inverse); border-style:solid; height:35px; position:absolute; width:35px; }.st-corner--tl { border-width:1px 0 0 1px; left:12px; top:12px; }.st-corner--br { border-width:0 1px 1px 0; bottom:12px; right:12px; }.st-stage-image>span { background:var(--surface-page); bottom:0; color:var(--ink); font-size:.58rem; font-weight:900; letter-spacing:.1em; padding:8px 10px; position:absolute; right:0; text-transform:uppercase; }.st-style-prompt { background:var(--surface-overlay); bottom:16px; box-shadow:7px 7px 0 var(--fill-mid-strong); color:var(--ink); max-width:355px; padding:15px; position:absolute; right:16px; }.st-style-prompt>span { align-items:center; display:flex; font-size:.61rem; font-weight:900; gap:6px; letter-spacing:.08em; text-transform:uppercase; }.st-style-prompt p { font-size:.94rem; font-weight:700; letter-spacing:-.03em; line-height:1.12; margin:11px 0 14px; }.st-style-prompt>div { border-top:1px solid var(--line); display:flex; padding-top:10px; }.st-style-prompt a { align-items:center; color:var(--ink); display:flex; font-size:.6rem; font-weight:900; gap:5px; text-decoration:none; text-transform:uppercase; }.st-style-prompt a+a { border-left:1px solid var(--line); margin-left:12px; padding-left:12px; }
.st-proof-section { background:var(--surface-page); padding:100px 0; }.st-proof-heading { margin-bottom:60px; }.st-proof-heading h2 { font-size:clamp(2.45rem,4.8vw,4.3rem); }.st-proof-grid { display:grid; gap:12px; grid-template-columns:repeat(3,1fr); }.st-proof-card { min-height:420px; overflow:hidden; padding:25px; position:relative; }.st-proof-card>span { font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.st-proof-card h3 { font-size:1.8rem; font-weight:800; letter-spacing:-.055em; line-height:.98; margin:46px 0 18px; max-width:310px; }.st-proof-card p { font-size:.78rem; line-height:1.65; margin:0; max-width:320px; }.st-proof-card--dark { background:var(--brand-fill); color:var(--brand-ink); }.st-proof-card--dark p { color:var(--veil-strong); }.st-proof-card--dark small { bottom:25px; color:var(--veil); font-size:.58rem; font-weight:800; left:25px; letter-spacing:.08em; position:absolute; text-transform:uppercase; }.st-proof-card--soft { background:var(--surface-raised); }.st-proof-card--soft>img { bottom:0; filter:grayscale(1) contrast(1.1); height:130px; object-fit:cover; position:absolute; right:0; width:145px; }.st-proof-card--image { padding:0; }.st-proof-card--image>img { filter:grayscale(1) contrast(1.05); height:100%; object-fit:cover; position:absolute; width:100%; }.st-proof-card--image>div { background:var(--surface-overlay); bottom:0; left:0; max-width:84%; padding:20px 22px; position:absolute; }.st-proof-card--image h3 { font-size:1.4rem; margin:9px 0 8px; }.st-proof-card--image p { font-size:.68rem; }
.st-manifesto { background:var(--surface-raised); display:grid; grid-template-columns:1fr 1fr; min-height:580px; }.st-manifesto-image { min-height:580px; overflow:hidden; position:relative; }.st-manifesto-image>img { filter:grayscale(1) contrast(1.07); height:100%; object-fit:cover; object-position:center; position:absolute; width:100%; }.st-manifesto-copy { align-items:start; display:flex; flex-direction:column; justify-content:center; padding:clamp(45px,7vw,110px); }.st-manifesto h2 { font-size:clamp(2.55rem,4.8vw,4.5rem); margin:21px 0 27px; }.st-manifesto-copy>p { color:var(--ink-soft); font-size:.92rem; line-height:1.72; margin:0; max-width:430px; }.st-manifesto-copy>div { border-top:1px solid var(--line-strong); display:grid; gap:18px; grid-template-columns:1fr 1fr; margin-top:42px; padding-top:14px; width:100%; }.st-manifesto-copy>div span { display:flex; flex-direction:column; gap:5px; }.st-manifesto-copy b { font-size:.63rem; letter-spacing:.05em; text-transform:uppercase; }.st-manifesto-copy small { color:var(--ink-muted); font-size:.7rem; line-height:1.4; }
.st-faq-section { background:var(--surface-page); padding:100px 0; }.st-head-center { margin:0 auto 44px; max-width:600px; text-align:center; }.st-head-center .st-outline-label { margin-bottom:18px; }.st-head-center h2 { font-size:clamp(2.4rem,4vw,3.8rem); }.st-head-center p { color:var(--ink-soft); font-size:.92rem; line-height:1.6; margin:15px 0 0; }.st-faq-section .mk-faq-item { border-color:var(--line); }.st-final-cta { background:var(--brand-fill); color:var(--brand-ink); padding:0 0 44px; }.st-final-grid { align-items:end; border-top:1px solid var(--veil); display:grid; gap:35px; grid-template-columns:.6fr 1.2fr auto; padding-top:72px; }.st-final-grid>span { align-self:start; color:var(--veil-strong); font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.st-final-cta h2 { font-size:clamp(2.6rem,4.8vw,4.5rem); }.st-final-cta p { color:var(--veil-strong); font-size:.92rem; line-height:1.6; margin:18px 0 0; max-width:390px; }
@media (max-width:940px) { .st-hero-grid,.st-manifesto { grid-template-columns:1fr; }.st-hero-copy { min-height:auto; padding:56px 54px; }.st-hero-art { min-height:500px; }.st-intro-grid,.st-split-heading,.st-proof-heading { gap:24px; grid-template-columns:1fr; }.st-proof-grid { grid-template-columns:1fr 1fr; }.st-proof-card--image { grid-column:span 2; }.st-tryon-artifact { grid-template-columns:1fr; }.st-tryon-aside { border-bottom:1px solid var(--line); border-right:0; }.st-tryon-stage { min-height:560px; }.st-manifesto-copy { padding:60px 8vw; }.st-final-grid { grid-template-columns:1fr; }.st-final-grid .st-btn { width:max-content; } }
@media (max-width:620px) { .st-hero { padding:12px 0 55px; }.st-wrap { padding-left:20px; padding-right:20px; }.st-hero-copy { padding:40px 25px; }.st-kicker-row { font-size:.56rem; }.st-hero h1 { font-size:3rem; }.st-hero-art { min-height:430px; }.st-mini-artifact { bottom:-26px; left:-10px; width:230px; }.st-hero-type { bottom:18px; right:12px; }.st-ticker { gap:15px; padding:14px 20px; }.st-intro,.st-proof-section,.st-faq-section { padding:76px 0; }.st-intro-grid { margin-top:34px; }.st-import-section,.st-tryon-section { padding:74px 0 40px; }.st-split-heading h2 { font-size:2.55rem; }.st-artifact-body { padding:20px 14px; }.st-artifact-heading { flex-direction:column; gap:12px; }.st-url-row { flex-direction:column; }.st-url-row>a { justify-content:center; min-height:46px; }.st-product-meta { gap:12px; line-height:1.4; }.st-product-grid { grid-template-columns:1fr 1fr; }.st-product { min-height:168px; }.st-section-caption { flex-direction:column; gap:8px; line-height:1.5; }.st-large-garment { height:230px; }.st-tryon-stage { min-height:525px; padding:11px; }.st-stage-image { height:350px; }.st-style-prompt { bottom:11px; max-width:calc(100% - 22px); right:11px; }.st-proof-grid { grid-template-columns:1fr; }.st-proof-card,.st-proof-card--image { grid-column:auto; min-height:360px; }.st-manifesto-image { min-height:410px; }.st-manifesto-copy { padding:55px 20px; }.st-manifesto h2 { font-size:3.1rem; }.st-final-grid { padding-top:50px; }.st-final-cta h2 { font-size:3.2rem; } }