@font-face { font-family: 'Instrument Serif'; src: url(assets/fonts/serif.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; src: url(assets/fonts/serif-italic.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Ionicons; src: url(assets/fonts/ionicons.woff2?v=2) format('woff2'); font-display: block; }
@font-face { font-family: Inter; font-weight: 400; src: url(assets/fonts/inter-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Inter; font-weight: 500; src: url(assets/fonts/inter-500.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Inter; font-weight: 600; src: url(assets/fonts/inter-600.woff2) format('woff2'); font-display: swap; }

/* The app's own palette (app/src/constants/theme.ts); the page moves through it as the phone goes down. */
:root {
  --ink: #0E0E0E; --paper: #FFFFFF; --warm: #F5F3EF; --night: #0B0B0B;
  --line-l: #E6E3DD; --line-d: #26241F;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --gut: clamp(16px, 2.2vw, 32px);
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: Inter, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
body[data-tone='paper'] { --bg: var(--paper); --fg: var(--ink); --fg2: #6E6B66; --fg3: #A09C95; --line: var(--line-l); }
body[data-tone='warm'] { --bg: var(--warm); --fg: var(--ink); --fg2: #6E6B66; --fg3: #A09C95; --line: #DDD9D1; }
body[data-tone='ink'] { --bg: var(--night); --fg: #F4F2EE; --fg2: #A8A39B; --fg3: #6E6A63; --line: var(--line-d); }

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
body {
  background: var(--bg); color: var(--fg); font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  transition: background-color .7s linear, color .7s linear;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ol, ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--ink); color: #fff; }
em { font-style: italic; }

/* --- Type ------------------------------------------------------------------------------------------------------- */
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.022em; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(50px, 5.5vw, 92px); }
h2 { font-size: clamp(44px, 5.2vw, 88px); }
.eyebrow { font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.lede { font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.42; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; max-width: 34em; }
.note { font-size: 12px; line-height: 1.45; color: var(--fg3); max-width: 38em; }

/* --- Nav -------------------------------------------------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gut); pointer-events: none; color: var(--fg); transition: opacity .35s, transform .5s var(--ease), color .7s linear;
}
.nav > * { pointer-events: auto; }
.nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg); opacity: 0; transition: opacity .3s, background-color .7s linear; }
.nav.solid::before { opacity: 1; }
.nav.off { opacity: 0; transform: translateY(-10px); }
.nav.off > * { pointer-events: none; }
.nav-logo svg { width: 62px; height: 23px; fill: currentColor; }
.nav-cta {
  font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 17px;
  background: var(--fg); color: var(--bg); border-radius: 999px; transition: background-color .7s linear, color .7s linear, opacity .2s;
}
.nav-cta:hover { opacity: .78; }

/* --- Store buttons ---------------------------------------------------------------------------------------------- */
.stores { display: flex; gap: 8px; flex-wrap: nowrap; }
.store {
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px 0 22px;
  background: var(--ink); color: #fff; border-radius: 999px; transition: transform .5s var(--ease);
}
.store:hover { transform: translateY(-2px); }
.store svg { width: 21px; height: 25px; fill: currentColor; flex: none; }
.store small { display: block; font-size: 10px; letter-spacing: .02em; opacity: .66; line-height: 1.25; }
.store b { display: block; font-weight: 600; font-size: 15.5px; letter-spacing: -.015em; line-height: 1.2; white-space: nowrap; }
.stores-inv .store { background: #fff; color: var(--ink); }

/* --- The stage -------------------------------------------------------------------------------------------------- */
.scene { position: relative; height: 1200vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sec { position: relative; padding: clamp(84px, 11vw, 172px) var(--gut); }

.wall { position: absolute; inset: 0; z-index: 1; }
.tile { position: absolute; overflow: hidden; }
.tile img { position: absolute; max-width: none; height: auto; will-change: transform; }
.veil { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; fill: var(--paper); pointer-events: none; }
.js .wall { animation: rise 1.6s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: scale(1.08); } }

.hero-copy {
  position: absolute; inset: auto var(--gut) 0; z-index: 3; padding-bottom: 72px;
  display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 26px; color: var(--ink); will-change: transform, opacity;
}
.hero-text h1 { font-size: clamp(46px, 4.3vw, 74px); }
@media (min-width: 760px) { .hero-text { margin-bottom: 16px; } }
.hero-side { display: grid; }
.js .hero-text > *, .js .hero-side > * { animation: up 1.1s var(--ease) both; }
.js .hero-side > :nth-child(1) { animation-delay: .14s; }
@keyframes up { from { opacity: 0; transform: translateY(26px); } }

.flow { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.flow-line { position: absolute; left: 50%; top: 45%; z-index: 7; width: min(84vw, 900px); margin: 0 0 0 calc(min(84vw, 900px) / -2); text-align: center; font-family: var(--serif); font-size: clamp(36px, 4.8vw, 82px); line-height: 1; letter-spacing: -.022em; translate: 0 -50%; pointer-events: none; opacity: 0; color: var(--ink); text-wrap: balance; }

.mveil, .ops { display: none; }
@keyframes nudge { 50% { translate: 0 6px; } }
.hint { position: absolute; left: 50%; bottom: 16px; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; }
.idle-hint { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 30; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .86); color: #0E0E0E; box-shadow: 0 2px 14px rgba(0, 0, 0, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.idle-hint.on { opacity: 1; visibility: visible; }
.idle-hint i { margin-top: -5px; }
.hint i, .idle-hint i { width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; animation: nudge 1.6s ease-in-out infinite; }
.rm .hint i, .rm .idle-hint i { animation: none; }

/* What is on the phone dresses the page: the garment being looked at, enormous. */
.panel { position: absolute; inset: 0 40vw 0 0; z-index: 3; overflow: hidden; background: #15130f; clip-path: inset(0 100% 0 0); visibility: hidden; }
.panel-imgs { position: absolute; inset: 0; }
.panel-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; clip-path: inset(100% 0 0 0); transform: scale(1.09); transition: clip-path 1s cubic-bezier(.7, 0, .15, 1), transform 3.4s var(--ease); z-index: 1; }
.panel-imgs img.was { clip-path: inset(0); transform: none; z-index: 1; transition: transform 3.4s var(--ease); }
.panel-imgs img.on { clip-path: inset(0); transform: none; z-index: 2; }
.panel::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(rgba(0, 0, 0, .34), transparent 22%, transparent 42%, rgba(0, 0, 0, .72)); }
.panel-cap { position: absolute; left: clamp(var(--gut), 4vw, 64px); top: 76px; z-index: 4; color: #fff; font-size: 13px; line-height: 1.4; letter-spacing: -.005em; }
.panel-cap b { display: block; font-weight: 600; font-size: 11px; letter-spacing: .14em; }
.chap.chap-photo { top: auto; bottom: clamp(26px, 6vh, 60px); left: clamp(var(--gut), 4vw, 64px); color: #fff; transform: translateY(26px); }
.chap.chap-photo.on { transform: none; }
.chap-photo h2 { font-size: clamp(44px, 5.4vw, 92px); margin-bottom: 16px; }
.chap-photo .lede { color: rgba(255, 255, 255, .86); margin: 0; }
.nav-logo { transition: color .3s; }
.nav.over .nav-logo { color: #fff; }
@media (max-width: 759px) {
  .flow-line { font-size: min(8.7vw, 36px); } .nav.over-r .nav-logo { color: #fff; } }

.pn { position: absolute; top: 0; bottom: 0; z-index: 3; overflow: hidden; background: #15130f; visibility: hidden; }
.pn.r { left: 40vw; right: 0; }
.pn.l { left: 0; right: 40vw; }
.pn::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(rgba(0, 0, 0, .3), transparent 18%, rgba(0, 0, 0, .34) 44%, rgba(0, 0, 0, .86) 76%); }
#pn-deck::after { background: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .2) 14%, rgba(0, 0, 0, .68) 42%, rgba(0, 0, 0, .9)); }
.pn .panel-imgs img { object-position: 50% 12%; }
#pn-scan { z-index: 4; border-bottom-width: 2px; }
.chap-photo .note { color: rgba(255, 255, 255, .72); }

/* Night: the hour itself is the picture, and the phone lights the room. */
.lk, .pw { position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity .6s; pointer-events: none; overflow: hidden; }
.stage[data-chap='lock'] .lk, .stage[data-chap='prod'] .pw { opacity: 1; }
.lk-giant { position: absolute; left: -1.5vw; top: 50%; transform: translateY(-53%); font-family: var(--serif); font-size: 36vw; line-height: 1; letter-spacing: -.03em; color: #1c1a17; white-space: nowrap; font-feature-settings: 'lnum'; }
.lk-glow { position: absolute; left: 75%; top: 50%; width: 92vh; height: 92vh; margin: -46vh 0 0 -46vh; border-radius: 50%; background-size: cover; background-position: 50% 15%; filter: blur(70px) saturate(1.3); opacity: .42; }

/* The price: a number you could read from across the street, on a line as wide as the page. */
.chap.chap-price { top: clamp(58px, 9vh, 92px); transform: translateY(26px); }
.chap.chap-price.on { transform: none; }
.chap-price h2 { font-size: clamp(38px, 3.9vw, 64px); margin-bottom: 8px; max-width: 13em; }
.pr-giant { font-family: var(--serif); font-size: clamp(90px, 15.5vw, 280px); line-height: .92; letter-spacing: -.035em; margin-left: -.03em; font-feature-settings: 'lnum', 'tnum'; white-space: nowrap; }
.chap-price .lede { margin: 12px 0 0; max-width: 27em; }
.pw-chart { position: absolute; left: 0; right: 0; bottom: 7vh; height: 21vh; }
.pw-chart svg { width: 100%; height: 100%; overflow: visible; }
.pw-chart .area { fill: #E9E6E0; opacity: .5; }
.pw-chart .line { stroke-width: 2; }
#pw-c { position: absolute; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px var(--warm); }
.pw-axis { position: absolute; left: var(--gut); right: var(--gut); bottom: 2.6vh; display: flex; justify-content: space-between; font-size: 12px; color: var(--fg3); font-feature-settings: 'tnum'; }
.nav.over-r .nav-cta { background: #fff; color: var(--ink); }

/* --- The words beside the phone --------------------------------------------------------------------------------- */
.chaps { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .4s; }
.chaps.show { opacity: 1; }
.chap { position: absolute; top: 50%; width: min(43vw, 660px); opacity: 0; transform: translateY(calc(-50% + 26px)); transition: opacity .35s, transform .8s var(--ease); }
.chap.on { opacity: 1; transform: translateY(-50%); transition-delay: .12s; }
.chap.l { left: clamp(var(--gut), 5.5vw, 100px); }
.chap.r { right: clamp(var(--gut), 5.5vw, 100px); }
.chap h2 { margin-bottom: 20px; }
.chap .lede { margin-bottom: 16px; }

.bars { position: relative; margin-bottom: 14px; }
.bars li { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 12px; height: clamp(26px, 3.8vh, 36px); border-top: 1px solid var(--line); font-size: 13.5px; transition: transform .7s var(--ease); }
.bars i { display: block; height: 4px; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); transition: transform .8s var(--ease); }
.bars span:last-child { text-align: right; font-size: 12.5px; font-feature-settings: 'tnum'; color: var(--fg2); }

.av-steps { position: relative; height: clamp(230px, 36vh, 340px); }
.av-step { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .8s var(--ease); }
.av-step.on { opacity: 1; transform: none; }
.av-step h2 { margin-bottom: 18px; }
.av-ticks { display: flex; gap: 5px; margin-bottom: 12px; max-width: 260px; }
.av-ticks i { flex: 1; height: 2px; background: var(--line-d); transition: background-color .4s; }
.av-ticks i.on { background: #F4F2EE; }



/* --- The phone. 1em = 10 points of the app, so every number below is the one in app/src (theme.ts and each screen). --- */
.phone {
  --pw: min(350px, 42.5svh); position: absolute; left: 50%; top: 50%; z-index: 5; width: var(--pw); height: calc(var(--pw) * 2.144);
  margin: calc(var(--pw) * -1.072) 0 0 calc(var(--pw) * -.5); border-radius: calc(var(--pw) * .15); background: #0a0a0a; padding: calc(var(--pw) * .027);
  box-shadow: 0 0 0 1px #2d2c2a inset, 0 40px 80px -30px rgba(0, 0, 0, .35), 0 20px 40px -24px rgba(0, 0, 0, .3); will-change: transform;
}
.screen {
  --t: #0E0E0E; --t2: #6E6B66; --t3: #A09C95; --el: #F5F3EF; --hl: #E6E3DD;
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * .125); background: #fff; color: var(--t);
  font: 400 calc(var(--pw) * .946 / 39)/1.3 var(--sans); letter-spacing: 0;
}
.screen p { margin: 0; }
.status { position: absolute; inset: 0 0 auto; z-index: 7; display: flex; justify-content: space-between; align-items: center; padding: 1.2em 2.8em 0; height: 5.4em; background: #fff; transition: color .4s; }
.screen.dark .status { color: #fff; background: none; }
.status b { font-weight: 600; font-size: 1.5em; letter-spacing: -.01em; }
.status .di { position: absolute; top: 1.1em; left: 50%; width: 11.6em; height: 3.3em; margin-left: -5.8em; border-radius: 2em; background: #000; }
.status i { width: 2.5em; height: 1.2em; border: 1px solid currentColor; border-radius: .35em; position: relative; }
.status i::after { content: ''; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: currentColor; border-radius: .15em; }
.scr { position: absolute; inset: 0; background: #fff; padding-top: 5.4em; overflow: hidden; transition: transform .7s var(--ease), opacity .5s; will-change: transform; }
.scr.after { transform: translateX(100%); pointer-events: none; }
.scr.before { transform: translateX(-28%); opacity: 0; pointer-events: none; }
.scroller { will-change: transform; }
.ion { font: normal 2.2em/1 Ionicons; display: inline-block; font-style: normal; letter-spacing: 0; }

/* Type: Type in theme.ts */
.hero { font: 400 4em/1.1 var(--serif); letter-spacing: -.015em; }
.display { font: 400 3.2em/1.125 var(--serif); letter-spacing: -.0125em; }
.title { font: 400 2.4em/1.167 var(--serif); letter-spacing: -.008em; }
.heading { font-weight: 600; font-size: 1.5em; line-height: 1.33; letter-spacing: -.0067em; }
.body { font-size: 1.4em; line-height: 1.5; }
.bodyM { font-weight: 500; font-size: 1.4em; line-height: 1.43; }
.small { font-size: 1.2em; line-height: 1.33; }
.smallM { font-weight: 500; font-size: 1.2em; line-height: 1.33; }
.label { font-weight: 600; font-size: 1.05em; line-height: 1.33; letter-spacing: .124em; text-transform: uppercase; }
.price { font-weight: 500; font-size: 1.4em; line-height: 1.29; display: block; }
.price s { font-weight: 400; font-size: .86em; color: var(--t3); margin-left: .2em; }
.sec2 { color: var(--t2); } .ter { color: var(--t3); }
.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hair { border: 0; border-top: 1px solid var(--hl); margin: 0; }
.mark { display: block; flex: none; width: 3.4em; height: 3.4em; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--hl); }
.mark img, .ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.btn { display: flex; align-items: center; justify-content: center; gap: .8em; height: 5em; background: var(--t); color: #fff; border-radius: .2em; font-weight: 600; font-size: 1em; letter-spacing: .124em; text-transform: uppercase; }
.btn .ion { font-size: 1.5em; }
.chips { display: flex; gap: .8em; padding: 1.6em 1.6em .4em; overflow: hidden; }
.chip { flex: none; display: flex; align-items: center; height: 3.4em; padding: 0 1.4em; border: 1px solid var(--hl); border-radius: 1.7em; font-weight: 500; font-size: 1em; }
.chip.on { background: var(--t); color: #fff; border-color: var(--t); }
.badge { position: absolute; top: 1.2em; left: 1.2em; background: rgba(255, 255, 255, .94); padding: .4em .7em; font-size: .95em; line-height: 1.26; }
.tabs { position: absolute; inset: auto 0 0; z-index: 3; display: flex; justify-content: space-around; padding: .7em .6em 2.6em; background: rgba(255, 255, 255, .94); border-top: 1px solid var(--hl); }
.tabs b { display: flex; flex-direction: column; align-items: center; gap: .2em; font-weight: 500; color: var(--t3); }
.tabs .ion { font-size: 2.3em; }
.tabs small { font-size: 1em; }
.tabs .on { color: var(--t); }

/* feed */
.f-top { display: flex; align-items: center; justify-content: space-between; padding: .8em 1.6em .8em; }
.f-logo { width: 7.2em; height: 2.98em; fill: currentColor; color: var(--t); }
.f-top .ion { font-size: 2.4em; }
.f-brands { display: flex; gap: 1.4em; padding: 0 1.6em 1.6em; overflow: hidden; }
.f-b { flex: none; width: 6.8em; display: flex; flex-direction: column; align-items: center; }
.ring { display: block; width: 6.8em; height: 6.8em; padding: .3em; border: .2em solid var(--t); border-radius: 50%; }
.add { display: flex; align-items: center; justify-content: center; width: 5.8em; height: 5.8em; margin-top: .5em; border: 1px dashed var(--hl); border-radius: 50%; }
.f-b small { font-size: 1.1em; margin-top: .55em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card { margin-bottom: 2.4em; }
.b-head { display: flex; align-items: center; gap: 1em; padding: 1.4em 1.6em 1.2em; }
.b-tx { flex: 1; min-width: 0; }
.b-head .label { font-size: 1.1em; }
.b-head .ion { font-size: 1.6em; color: var(--t3); }
.b-head .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles { display: flex; gap: .8em; padding: 0 1.6em; overflow: hidden; }
.f-tile { flex: none; width: 15.2em; }
.f-tile img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--el); display: block; margin-bottom: .8em; }
.f-tile .small { margin-bottom: .2em; }
.more { display: flex; align-items: center; justify-content: center; gap: .8em; margin: 1.6em 1.6em 0; height: 4.4em; border: 1px solid var(--hl); }
.more .ion { font-size: 1.4em; }
.ph { position: relative; }
.ph > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--el); }
.dots { position: absolute; left: 0; right: 0; bottom: 1em; display: flex; gap: .5em; justify-content: center; }
.dots i { width: .6em; height: .6em; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.dots i.on { width: 1.8em; border-radius: .3em; background: #fff; }
.acts { display: flex; align-items: center; gap: 1.8em; padding: .8em 1em 0 1.6em; }
.acts span { flex: 1; }
.acts .ion { font-size: 2.3em; }
.info { padding: .4em 1.6em 0; display: grid; gap: .4em; }
.p-row { display: flex; align-items: baseline; gap: .8em; }
.off0 { font-size: 1em; }
.info b { font-weight: 500; color: var(--t); }

/* deck */
#scr-deck { padding-left: 1.6em; padding-right: 1.6em; }
.d-head { padding-top: 1.6em; }
.d-row { display: flex; align-items: center; gap: 1.6em; }
.steps { flex: 1; display: grid; gap: .8em; }
.steps-bar { display: flex; gap: .4em; }
.steps-bar i { flex: 1; height: .2em; background: var(--hl); }
.steps-bar i.on { background: var(--t); }
.d-skip { font-weight: 500; font-size: 1.2em; color: var(--t2); }
.d-head .display { margin-top: .5em; }
.d-head .body { margin-top: .57em; min-height: 3em; }
.deck { position: relative; margin-top: .6em; aspect-ratio: 4 / 5; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.card-d { position: absolute; inset: 0; border-radius: 1.8em; overflow: hidden; background: var(--el); cursor: grab; will-change: transform; }
.card-d img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; display: block; }
.card-d.behind { pointer-events: none; }
.stamp { position: absolute; top: 1.71em; padding: .57em 1.14em; border-radius: .57em; background: rgba(14, 14, 14, .75); color: #fff; opacity: 0; }
.stamp.y { left: 1.52em; } .stamp.n { right: 1.52em; }
.finger { position: absolute; left: 50%; top: 55%; width: 6em; height: 6em; margin: -3em; border-radius: 50%; background: rgba(255, 255, 255, .34); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 .4em 1.6em rgba(0, 0, 0, .25); pointer-events: none; }
.d-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2em 1.6em 3em; background: #fff; }
.d-btns { display: flex; align-items: center; justify-content: center; gap: 2.2em; }
.d-small { width: 4.4em; height: 4.4em; display: flex; align-items: center; justify-content: center; font-size: 1em; }
.d-small .ion { font-size: 2em; }
.d-round { width: 6.4em; height: 6.4em; border-radius: 50%; border: 1px solid var(--t3); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1em; color: var(--t); transition: transform .2s; }
.d-round .ion { font-size: 3em; }
.d-round.yes { background: var(--t); border-color: var(--t); color: #fff; }
.d-round.yes .ion { font-size: 2.8em; }
.d-round:active { transform: scale(.93); }
.d-sure { display: flex; align-items: center; gap: .8em; margin-top: 1.6em; }
.d-sure i { flex: 1; height: .3em; border-radius: .2em; background: var(--hl); overflow: hidden; }
.d-sure u { display: block; height: 100%; width: 0; background: var(--t); transition: width .4s; }
.d-bar .btn { margin-top: .8em; }

/* lock */
#scr-lock { background: #15130f; color: #fff; padding-top: 5.4em; }
.lock-bg { position: absolute; inset: 0; background-size: cover; background-position: 50% 15%; filter: brightness(.58) saturate(.96); }
.lock-time { position: relative; text-align: center; padding-top: .6em; }
.lock-time span { display: block; font-size: 1.9em; font-weight: 500; opacity: .9; }
.lock-time strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 9em; line-height: 1; letter-spacing: -.01em; font-feature-settings: 'lnum'; }
.lock-stack { position: absolute; inset: 19em 1em auto; display: flex; flex-direction: column-reverse; gap: .8em; }
.ntf { display: none; grid-template-columns: auto 1fr auto; gap: 1em; align-items: center; background: rgba(245, 243, 239, .92); color: var(--t); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 1.1em 1.2em; border-radius: 1.9em; transform-origin: 50% 0; }
.ntf.on { display: grid; }
.ntf.new { animation: ntfin .75s cubic-bezier(.2, 1.3, .3, 1) both; }
@keyframes ntfin { from { opacity: 0; transform: translateY(-1.6em) scale(.9); } }
.ntf-i { width: 3.8em; height: 3.8em; border-radius: .9em; background: #111; color: #fff; font-weight: 600; font-size: 1em; letter-spacing: -.03em; display: flex; align-items: center; justify-content: center; }
.ntf-h { display: flex; justify-content: space-between; gap: .6em; font-size: 1.3em; line-height: 1.25; }
.ntf-h b { font-weight: 600; }
.ntf-h span { color: #6e6b66; font-size: .85em; white-space: nowrap; }
.ntf p { font-size: 1.25em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ntf > img { width: 3.8em; height: 4.8em; object-fit: cover; object-position: 50% 15%; border-radius: .6em; }

/* lens */
#scr-lens { display: flex; flex-direction: column; }
.l-bar { flex: none; height: 4.8em; display: flex; align-items: center; justify-content: space-between; padding: 0 1.8em; }
.l-win { flex: 1; min-height: 0; overflow: hidden; }
#l-list { will-change: transform; }
.l-stage { position: relative; height: 41.7em; background: #111; display: flex; justify-content: center; overflow: hidden; }
.l-photo { position: relative; height: 100%; aspect-ratio: 4 / 5; }
.l-photo > img { width: 100%; height: 100%; object-fit: cover; }
.l-marks { position: absolute; inset: 0; opacity: 0; }
.l-dot { position: absolute; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; box-shadow: 0 .2em .6em rgba(0, 0, 0, .3); }
.l-dot i { width: .8em; height: .8em; border-radius: 50%; background: #0E0E0E; }
.l-dot.on { background: #0E0E0E; border: .2em solid #fff; }
.l-dot.on i { background: #fff; }
.l-box { position: absolute; }
.l-box i { position: absolute; width: 2.2em; height: 2.2em; border: 0 solid #fff; }
.l-box i:nth-child(1) { left: 0; top: 0; border-width: .3em 0 0 .3em; border-top-left-radius: .6em; }
.l-box i:nth-child(2) { right: 0; top: 0; border-width: .3em .3em 0 0; border-top-right-radius: .6em; }
.l-box i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 .3em .3em; border-bottom-left-radius: .6em; }
.l-box i:nth-child(4) { right: 0; bottom: 0; border-width: 0 .3em .3em 0; border-bottom-right-radius: .6em; }
.ln-scan { position: absolute; left: 0; right: 0; top: 0; height: 24%; opacity: 0; background: linear-gradient(transparent, rgba(255, 255, 255, .1)); border-bottom: 2px solid rgba(255, 255, 255, .9); will-change: transform; }
.l-wait { position: absolute; left: 0; right: 0; top: 41.7em; padding: 2.4em 3.2em 0; text-align: center; display: grid; gap: .8em; }
.l-tip { display: flex; align-items: center; gap: .8em; margin: 1.2em 1.6em 0; padding: 1em 1.2em; background: var(--el); }
.l-tip p { flex: 1; }
.l-tip .ion { font-size: 1.6em; color: var(--t2); }
.l-title { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; padding: 1.6em 1.6em .8em; }
.l-title .small { white-space: nowrap; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .2em; }
.ph34 { position: relative; }
.ph34 > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--el); }
.ph34 .badge { top: .8em; left: .8em; }
.sv { position: absolute; top: .8em; right: .8em; width: 3.2em; height: 3.2em; border-radius: 50%; background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; }
.sv .ion { font-size: 1.7em; }
.g-i { padding: .8em 1em 1.8em; display: grid; gap: .3em; }
.g-i .label { font-size: 1em; }

/* product */
#scr-prod { padding: 0; }
.screen.clear .status { background: none; }
.p-photo { position: relative; }
.p-photo > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--el); }
.count { position: absolute; right: 1.2em; bottom: 1.2em; padding: .2em .8em; border-radius: 1em; background: rgba(0, 0, 0, .6); color: #fff; font-weight: 500; font-size: 1.1em; }
.p-b { width: 3.6em; height: 3.6em; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; }
.p-b .ion { font-size: 1.9em; }
.p-b.lens { position: absolute; left: 1.6em; bottom: 1.2em; }
.p-bar { position: absolute; left: 0; right: 0; top: 5.4em; z-index: 4; display: flex; align-items: center; gap: .8em; padding: .6em 1.6em; transition: background-color .2s; }
.p-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.p-bar.solid { background: #fff; border-bottom: 1px solid var(--hl); top: 0; padding-top: 6em; }
.p-bar.solid .p-b { background: none; }
.p-bar.solid .p-t { opacity: 1; }
.p-brand { display: flex; align-items: center; gap: 1em; padding: 1.4em 1.6em .6em; }
.p-brand .label { flex: 1; }
.p-brand .ion { font-size: 1.6em; color: var(--t3); }
.p-info { padding: 0 1.6em 2.4em; display: grid; gap: .6em; }
.p-now { display: flex; align-items: center; gap: .7em; margin-top: 1em; }
.big { font-weight: 500; font-size: 2.2em; line-height: 1.2; }
.p-now s { color: var(--t3); font-size: 1.4em; }
.off { background: var(--t); color: #fff; padding: .3em .6em; font-size: .95em; }
.p-alert, .p-fit { display: flex; align-items: center; gap: .6em; }
.p-alert .ion, .p-fit .ion { font-size: 1.5em; }
.sect { margin: 0 1.6em; padding: 2.4em 0; border-top: 1px solid var(--hl); }
.s-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.4em; }
.swatches { display: flex; flex-wrap: wrap; gap: .8em; }
.swatch { display: flex; align-items: center; gap: .8em; height: 4.8em; padding: 0 1.4em 0 .4em; border: 1px solid var(--hl); font-size: 1em; }
.swatch { font-size: 1em; } .swatch img { width: 3em; height: 3.8em; object-fit: cover; background: var(--el); }
.swatch.on { border-color: var(--t); }
.sizes { display: flex; flex-wrap: wrap; gap: .8em; }
.sizes button { position: relative; min-width: 5.2em; height: 4.8em; padding: 0 1.2em; border: 1px solid var(--hl); font-weight: 500; font-size: 1em; }
.sizes button .dot { position: absolute; bottom: .6em; left: 50%; margin-left: -.25em; }
.sizes button.on { background: var(--t); color: #fff; border-color: var(--t); }
.sizes button.on .dot { background: #fff; }
.dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--t); vertical-align: .1em; }
.s-h .small .dot { font-size: 1em; margin-right: .3em; }
.spark-t { margin-top: .8em; height: 1.5em; }
.spark { position: relative; height: 5.6em; touch-action: pan-y; cursor: ew-resize; }
.spark svg, .pw-chart svg { width: 100%; height: 100%; overflow: visible; display: block; }
.spark .area { fill: #E9E6E0; opacity: .5; }
.spark .line, .pw-chart .line { fill: none; stroke: var(--t, var(--ink)); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#ch-c { position: absolute; width: .9em; height: .9em; margin: -.45em 0 0 -.45em; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 .2em #fff; pointer-events: none; }
.s-ends { display: flex; justify-content: space-between; margin: .4em 0; }
.p-foot { position: absolute; inset: auto 0 0; z-index: 5; padding: 1.2em 1.6em 2.6em; background: #fff; border-top: 1px solid var(--hl); display: grid; gap: .6em; text-align: center; }

.hero { padding: 1em 1.6em 0; }
.chips.pills { padding: 1.2em 1.6em; }

/* --- Bajar ------------------------------------------------------------------------------------------------------ */
.sec-bajar { padding-bottom: 0; overflow: hidden; background: var(--night); color: #F4F2EE; --fg2: #A8A39B; }
.dudas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px) clamp(28px, 5vw, 80px); margin-bottom: clamp(84px, 11vw, 160px); }
.duda h3 { font: 400 clamp(24px, 2.2vw, 32px)/1.12 var(--serif); letter-spacing: -.012em; margin-bottom: 10px; }
.duda p { color: var(--fg2); font-size: 15px; max-width: 30em; }
@media (min-width: 760px) {
  .duda { text-align: center; }
  .duda p { margin-inline: auto; }
}
.screen img:not([src*="logos"]) { background: #EFEDE8; }
@media (max-width: 759px) {
  body { transition: none; }
  /* Layers cost memory by the screen's density: only what really moves on its own gets one. */
  .phone, .scr, .scroller, #l-list, .tile img, .hero-copy { will-change: auto; }
}
.bj-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(34px, 6vw, 96px); align-items: end; margin-bottom: clamp(60px, 9vw, 130px); }
.bj-top h2 { font-size: clamp(50px, 8.2vw, 148px); line-height: .94; }
.bj-side { display: grid; gap: 22px; justify-items: start; }
.bj-side .lede { color: #F4F2EE; }
@media (min-width: 760px) {
  .bj-top { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 30px; }
  .bj-side { justify-items: center; }
  .bj-side .stores { justify-content: center; }
}
.qr { display: flex; align-items: center; gap: 14px; font-size: 13px; line-height: 1.3; color: #A8A39B; }
.qr svg { width: 92px; height: 92px; padding: 8px; background: #fff; box-sizing: content-box; flex: none; }
.sec-bajar .bj-word { display: block; width: calc(100% + 2 * var(--gut) - 16px); height: auto; margin: 0 calc(var(--gut) * -1 + 8px) -9.5%; fill: #F4F2EE; color: #F4F2EE; }
.foot { background: var(--night); color: #6E6A63; display: flex; flex-wrap: wrap; gap: 6px 26px; padding: 22px var(--gut); font-size: 12px; border-top: 1px solid var(--line-d); position: relative; }
.foot-r { margin-left: auto; }
.foot a { margin: -12px 0; padding: 12px 0; color: #A8A39B; transition: color .2s; }
.foot a:hover { color: #F4F2EE; }

/* --- Reveal ----------------------------------------------------------------------------------------------------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s, transform 1.2s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.w > span { display: inline-block; transform: translateY(112%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 34ms); }
.in .w > span { transform: none; }

/* --- A phone in hand: the words on top, the phone whole underneath ------------------------------------------------ */
@media (max-width: 759px) {
  body { font-size: 14px; }
  .sec { padding-top: 76px; padding-bottom: 76px; }
  .hero-copy { justify-items: stretch; text-align: left; gap: 16px; padding-bottom: calc(50px + env(safe-area-inset-bottom)); z-index: 4; }
  .hero-copy h1 { font-size: clamp(50px, 14.5vw, 72px); }
  .hero-side { padding-bottom: 0; }
  .stores { display: grid; grid-template-columns: 1fr 1fr; }
  .store { justify-content: center; height: 52px; padding: 0 10px; gap: 8px; }
  .store svg { width: 18px; height: 21px; }
  .store b { font-size: 13.5px; }

  /* The stage is only the hero and the burst. */
  .chaps, .panel, .pn, .lk, .pw, #phone { display: none; }
  .nav { padding: 10px var(--gut); }
  .nav-logo svg { width: 54px; height: 20px; }
  .nav-cta { padding: 8px 13px; font-size: 10px; }

  /* A normal page: each section has its headline, its picture and the phone on it. */
  #lvh { position: absolute; top: 0; width: 0; height: 100vh; height: 100lvh; pointer-events: none; }
  #mstory { position: relative; z-index: 2; margin-top: -100svh; }
  .st { position: sticky; top: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100lvh; padding: 44px 0 0; border-radius: 26px 26px 0 0; overflow: hidden; box-shadow: 0 -18px 44px rgba(0, 0, 0, .22); transform-origin: 50% 100%; will-change: transform; }
  .st::after { content: ''; position: absolute; inset: 0; z-index: 5; background: #000; opacity: var(--c, 0); pointer-events: none; }
  .st-stage { flex: 1; align-items: center; }
  .sec-bajar { position: relative; z-index: 3; }
  .st-warm { background: var(--warm); }
  .st-paper { background: #fff; }
  .st-ink { background: var(--night); color: #F4F2EE; }
  .st-text { padding: 14px var(--gut) 24px; }
  .st-text h2 { font-size: clamp(36px, 10.4vw, 48px); line-height: 1; margin-bottom: 12px; }
  .st-text .lede { font-size: 15px; line-height: 1.4; color: #6E6B66; max-width: none; }
  .st-ink .st-text .lede { color: #A8A39B; }
  .st-text .pr-giant { font-size: 24vw; margin: 4px 0 8px -.03em; line-height: 1; }
  .st-stage { position: relative; overflow: hidden; display: flex; justify-content: center; padding: 28px 0; }
  .st-stage.blank { padding-top: 8px; }
  .st-bg { position: absolute; inset: 0; background: #15130f; overflow: hidden; }
  .blank .st-bg { background: none; }
  .st-bg .panel-imgs { position: absolute; inset: 0; }
  .st-bg .panel-imgs img { object-position: 50% 14%; }
  .st-bg .panel-imgs img:not([src]) { visibility: hidden; }
  .st-bg #pn-scan { z-index: 3; }
  .st-bg #pw-chart { position: absolute; left: 0; right: 0; top: 4%; height: 30%; bottom: auto; }
  .st-bg #lk-glow { left: 50%; top: 50%; width: 120vw; height: 120vw; margin: -60vw 0 0 -60vw; }
  .phone.m { position: relative; left: auto; top: auto; margin: 0; flex: none; z-index: 2; --pw: min(78vw, calc((100svh - 100px) / 2.144)); box-shadow: 0 0 0 1px #2d2c2a inset, 0 26px 60px -18px rgba(0, 0, 0, .55); }
  .phone.m .scr { transition: none; }

  /* Keep going. */
  .hint { bottom: calc(2px + env(safe-area-inset-bottom)); }

  .dudas { grid-template-columns: 1fr; }
  .bj-top { grid-template-columns: 1fr; }
  .bj-side { justify-items: stretch; }
  .qr { display: none; }
  .foot-r { margin-left: 0; }
}
@media (max-width: 759px) and (max-height: 700px) {
  .op h2 { font-size: clamp(38px, 11vw, 46px); }
  .op .lede { font-size: 14.5px; }
}

/* --- No motion: the same story, in steps ---------------------------------------------------------------------------- */
.rm html, html.rm { scroll-behavior: auto; }
.rm *, .rm *::before, .rm *::after { animation: none !important; transition: none !important; }
.rm .rv, .rm .w > span { opacity: 1; transform: none; }
.rm .st { position: relative; margin-bottom: 0 !important; }

/* --- No JS: what it says, in a column ------------------------------------------------------------------------------- */
html:not(.js) .scene { height: auto; }
html:not(.js) .stage { position: relative; height: auto; overflow: visible; }
html:not(.js) .wall, html:not(.js) .veil, html:not(.js) .phone { display: none; }
html:not(.js) .hero-copy, html:not(.js) .chap { position: static; width: auto; opacity: 1; transform: none; padding: 40px var(--gut); }
html:not(.js) .chaps { position: static; opacity: 1; }
html:not(.js) .av-steps { height: auto; }
html:not(.js) .w > span { transform: none; }
.btn[hidden] { display: none; }
.body b.bodyM { font-size: 1em; }
.p-info .title { font-size: 2.9em; line-height: 1.14; }