/* Shared styles of the search landing pages in public/pages (docs/seo-plan.md). Same type, colours and buttons as the
   landing; the one moving part is the before/after slider. Lime only on the main button. */
@font-face{font-family:Satoshi;src:url("/assets/fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url("/assets/fonts/satoshi-500.woff2") format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:Satoshi;src:url("/assets/fonts/satoshi-700.woff2") format("woff2");font-weight:650 900;font-display:swap}
@font-face{font-family:Satoshi;src:url("/assets/fonts/onest-cyrillic.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Satoshi;src:url("/assets/fonts/onest-cyrillic.woff2") format("woff2");font-weight:500 600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Satoshi;src:url("/assets/fonts/onest-cyrillic.woff2") format("woff2");font-weight:650 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{--black:#000;--ink:#1d1d1f;--grey:#6e6e73;--mist:#f5f5f7;--line:#d2d2d7;--lime:#D4F25A;--sans:Satoshi,Arial,sans-serif;--gutter:max(22px,calc((100vw - 1200px) / 2));--r:28px;--ease:cubic-bezier(.28,.11,.32,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:60px}
body{margin:0;background:#fff;color:var(--ink);font:17px/1.47 var(--sans);letter-spacing:-.022em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;text-wrap:balance}
ol,ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.dark :focus-visible{outline-color:#fff}
.skip{position:absolute;left:12px;top:-60px;z-index:40;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:15px}
.skip:focus{top:8px}
.in-wrap{padding:0 var(--gutter)}
.band{padding:clamp(80px,10vw,140px) 0}
.mist{background:var(--mist)}
.dark{background:var(--black);color:#f5f5f7}
.center{text-align:center}
.h2{font-size:clamp(34px,4.4vw,60px);line-height:1.06;letter-spacing:-.015em}
.lead{max-width:34em;margin-top:18px;font-size:clamp(18px,1.5vw,21px);line-height:1.42;font-weight:500;color:var(--grey)}
.center .lead{margin-inline:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:999px;font:500 17px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),filter .2s}
.btn:active{transform:scale(.96)}
.btn-main{background:var(--lime);color:#000}
.btn-main:hover{filter:brightness(1.05)}
.btn-sm{height:34px;padding:0 16px;font-size:14px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:32px}
.center .cta{justify-content:center}
.note{font-size:15px;color:var(--grey)}
.dark .note{color:rgba(255,255,255,.6)}
.note sup{line-height:0}
.note sup a{text-decoration:none}

.nav{position:sticky;top:0;z-index:30;height:52px;background:rgba(251,251,253,.8);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:100%;padding:0 var(--gutter)}
.brand{font:700 21px/1 var(--sans);letter-spacing:-.04em;text-decoration:none}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px}
.nav-links a:not(.btn){padding:12px 0;text-decoration:none;opacity:.8}
.nav-links a:not(.btn):hover{opacity:1}

/* Hero: the claim on the left, the proof on the right — drag the divider between the phone photo and the frame. */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,6vw,96px);padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(72px,9vw,128px)}
.hero h1{font-size:clamp(44px,5.8vw,84px);line-height:1.02;letter-spacing:-.02em}
.compare{position:relative;width:min(100%,480px);justify-self:end;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:#e8e8ed;isolation:isolate;box-shadow:0 30px 80px rgba(0,0,0,.12);--x:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.compare .after{z-index:2;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.compare .tag{position:absolute;top:14px;z-index:5;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:500;pointer-events:none}
.compare .tag-after{left:14px;background:var(--ink);color:#fff}
.compare .tag-before{right:14px;background:rgba(255,255,255,.92)}
.compare input{position:absolute;inset:0;z-index:6;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.knob{position:absolute;top:0;bottom:0;left:var(--x);z-index:5;width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.knob::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.compare input:focus-visible ~ .knob::after{outline:2px solid var(--ink);outline-offset:3px}
.compare-note{margin-top:12px;font-size:15px;color:var(--grey);text-align:center}
.hero-proof{justify-self:end;width:min(100%,480px)}

/* One model across the card: four frames of the same dress. */
.series{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,64px)}
.series figure{margin:0}
.series img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 28%;border-radius:20px;background:#e8e8ed}
.series figcaption{margin-top:10px;font-size:15px;color:var(--grey)}

/* Steps are a real sequence, so they are numbered. */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(40px,5vw,64px);counter-reset:step}
.steps li{counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:40px;height:40px;margin-bottom:18px;border-radius:50%;background:var(--ink);color:#fff;font-weight:600}
.steps h3{font-size:22px;line-height:1.25}
.steps p{margin-top:8px;color:var(--grey)}

.formats{max-width:820px;margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.formats div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.formats dt{font-weight:600;font-size:19px}
.formats dd{margin:0;color:var(--grey)}
.small{margin-top:18px;font-size:15px;color:var(--grey)}

.faq{max-width:820px;margin:clamp(36px,5vw,56px) auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-size:clamp(18px,1.5vw,22px);font-weight:600;letter-spacing:-.01em;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--grey);border-bottom:2px solid var(--grey);transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.faq details p{padding:0 40px 24px 0;color:var(--grey);max-width:40em}
@media (prefers-reduced-motion:no-preference){
.faq{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
.faq details[open]::details-content{block-size:auto}
}

.foot{padding:28px 0 calc(28px + env(safe-area-inset-bottom));font-size:14px;line-height:1.5;color:var(--grey)}
.foot-note{margin-bottom:14px}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.foot a{text-decoration:none;color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}

@media (max-width:900px){
.hero{grid-template-columns:1fr}
.hero-proof{justify-self:center}
.steps{grid-template-columns:1fr}
}
@media (max-width:734px){
.nav-in{padding-inline:16px;gap:12px}
.nav-links{gap:12px}
.in-wrap{padding:0 16px}
.hero h1{font-size:clamp(36px,10vw,52px)}
.series{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px 4px;scrollbar-width:none}
.series::-webkit-scrollbar{display:none}
.series figure{flex:0 0 62%;scroll-snap-align:start}
.formats div{grid-template-columns:1fr;gap:6px}
.faq details p{padding-right:0}
}
@media (max-width:380px){.nav-prices{display:none}}