/* Lapponica landing — warm dark glass, light type, a chat that builds the outfit. No build step. */

:root {
  --bg: #100e0c;
  --ink: #f3ece0;
  --ink-2: rgba(243, 236, 224, 0.68);
  --ink-3: rgba(243, 236, 224, 0.42);
  --line: rgba(255, 255, 255, 0.12);
  --cream: #efe6d3;
  --gold: #e9d3a3;
  --dark: #17130f;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 80rem;
  --nav-h: 4rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 300 clamp(1rem, 0.96rem + 0.2vw, 1.125rem) / 1.5 var(--font); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
canvas, img, svg { display: block; }
img { height: auto; }
b { font-weight: 500; }
s { color: var(--ink-3); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--cream); color: var(--dark); padding: 0.6rem 1rem; border-radius: 0.5rem; }
.skip:focus { top: 0.75rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; list-style: none; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* warm silk light behind hero, stage and close */
.silk {
  background:
    radial-gradient(60% 55% at 80% 6%, rgba(218, 194, 152, 0.34), transparent 70%),
    linear-gradient(112deg, transparent 26%, rgba(236, 221, 192, 0.1) 40%, transparent 53%),
    linear-gradient(100deg, transparent 54%, rgba(236, 221, 192, 0.07) 64%, transparent 76%),
    radial-gradient(80% 60% at 8% 100%, rgba(128, 104, 72, 0.34), transparent 70%),
    #12100e;
}
.glass {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 60px -30px rgba(0, 0, 0, 0.75);
}

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 300; }
h1 { font-size: clamp(2.7rem, 0.8rem + 4vw, 4.8rem); line-height: 1.06; letter-spacing: -0.04em; }
h2 { font-size: clamp(2.4rem, 1rem + 3.8vw, 4.6rem); line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; }
.soft { color: rgba(236, 224, 200, 0.55); }
.lede { max-width: 31rem; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.45; letter-spacing: -0.015em; color: var(--ink-2); text-wrap: pretty; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.5rem; border-radius: 980px;
  background: var(--cream); color: var(--dark); font-size: 1rem; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap;
  transition: background 0.25s, transform 0.25s var(--ease);
}
.btn:hover { background: #fbf4e4; }
.btn:active { transform: scale(0.98); }
.btn--sm { min-height: 2.2rem; padding: 0 1.1rem; font-size: 0.8125rem; }
.link { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; transition: text-decoration-color 0.25s; }
.link:hover { text-decoration-color: currentColor; }
.chip { display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: 980px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1rem; border-radius: 980px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); font-size: 0.8125rem; color: var(--ink); white-space: nowrap; }
.pill i { font-style: normal; }
.pill--cream { background: var(--cream); box-shadow: none; color: var(--dark); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav-h); padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  transition: background 0.3s, backdrop-filter 0.3s;
}
.nav.is-scrolled { background: rgba(16, 14, 12, 0.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nav .btn { justify-self: end; }
.brand { justify-self: start; font-size: 1.45rem; font-weight: 300; letter-spacing: -0.02em; }
.nav__links { display: flex; gap: clamp(1.4rem, 3vw, 2.8rem); font-size: 0.8125rem; }
.nav__links a { padding: 0.4rem 0; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 8px; text-decoration-thickness: 1px; opacity: 0.7; transition: opacity 0.2s, text-decoration-color 0.2s; }
.nav__links a:hover { opacity: 1; }
.nav__links a.is-current { opacity: 1; text-decoration-color: currentColor; }

/* ---------- hero: the entry state ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + 2rem) 0 clamp(3rem, 6vw, 5rem); overflow: clip; background: #0f0d0b; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; animation: lake 40s ease-in-out infinite alternate; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #0f0d0b 4%, rgba(15, 13, 11, 0.82) 28%, rgba(15, 13, 11, 0.12) 60%, rgba(15, 13, 11, 0.3)),
    linear-gradient(180deg, rgba(15, 13, 11, 0.75), transparent 24%, transparent 72%, #0f0d0b);
}
@keyframes lake { from { transform: scale(1.04); } to { transform: scale(1.12) translate3d(-1.5%, 0, 0); } }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__copy { display: grid; gap: 1.5rem; justify-items: start; max-width: 38rem; }
.hero__note { font-size: 0.875rem; color: var(--ink-3); max-width: 28rem; }
.hero__note .link { color: var(--ink-2); white-space: nowrap; }

.ask {
  display: flex; align-items: center; gap: 0.9rem; width: min(100%, 33rem); padding: 0.5rem; border-radius: 980px; color: var(--ink);
  background: rgba(20, 17, 14, 0.5); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 24px 50px -24px rgba(0, 0, 0, 0.85); transition: transform 0.3s var(--ease);
}
.ask:hover { transform: translateY(-2px); }
.ask__mic, .ask__send { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; }
.ask__mic { background: rgba(255, 255, 255, 0.08); color: var(--ink-2); }
.ask__send { background: var(--cream); color: var(--dark); }
.ask .ico { width: 1.2rem; height: 1.2rem; }
.ask__text { flex: 1; min-width: 0; font-size: 0.9375rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask__text.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.2em; background: var(--gold); animation: blink 0.9s steps(2, start) infinite; }

[data-rise] { animation: rise 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 110ms + 100ms); }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 1.4rem, 0); } }

/* ---------- showcase: a real-looking chat that builds the outfit ---------- */
.canvas { background: var(--bg); }
.canvas__track { height: 920vh; height: 920svh; }

.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(0.5rem, 1.6vh, 1rem);
  padding-bottom: clamp(0.8rem, 2.4vh, 1.8rem);
}

.stage__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; width: min(100% - 2 * var(--gutter), 78rem); margin-inline: auto; padding: calc(var(--nav-h) + clamp(0.2rem, 1vh, 0.8rem)) 0.2rem 0; }
.caps { display: grid; min-width: 0; }
.reset {
  flex: none; display: inline-flex; align-items: center; gap: 0.5rem; height: 2.4rem; padding: 0 1.05rem 0 0.85rem; border: 0; border-radius: 980px; cursor: pointer; font: inherit; font-size: 0.8125rem; color: var(--ink-2);
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: background 0.25s, color 0.25s;
}
.reset:hover { background: rgba(255, 255, 255, 0.14); color: var(--ink); }
.reset .ico { width: 1.05rem; height: 1.05rem; transition: rotate 0.6s var(--spring); }
.reset:hover .ico { rotate: -200deg; }
.cap {
  grid-area: 1 / 1; font-size: clamp(1.35rem, 0.85rem + 1.7vw, 2.2rem); line-height: 1.05; font-weight: 300; letter-spacing: -0.04em; text-wrap: balance;
  opacity: 0; transform: translate3d(0, 0.6rem, 0); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.cap.is-active { opacity: 1; transform: none; }

:root { --spring: cubic-bezier(0.34, 1.35, 0.5, 1); }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.012 1.5%, 0.05 3.2%, 0.17 6.6%, 0.52 13.6%, 0.79 19.6%, 0.93 24.4%, 1.02 29.5%, 1.07 35%, 1.08 39.5%, 1.06 45.5%, 1.02 54%, 1 62%, 0.995 71%, 1); }
}

/* the window */
.app {
  container: app / size; position: relative; width: min(100% - 2 * var(--gutter), 78rem); min-height: 0; margin-inline: auto;
  border-radius: 1.6rem; overflow: hidden; isolation: isolate; background: #100e0c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 50px 90px -40px rgba(0, 0, 0, 0.9);
}
.app__in { position: absolute; inset: 0; font-size: clamp(12px, calc(0.75cqw + 5.6px), 16.5px); line-height: 1.4; letter-spacing: -0.01em; }
.app__bg {
  position: absolute; inset: -4%; z-index: 0; animation: silk 30s ease-in-out infinite alternate;
  background: linear-gradient(180deg, rgba(14, 12, 10, 0.3), rgba(14, 12, 10, 0.6)), url("images/silk-wide.webp") center / cover;
}
@keyframes silk { from { transform: scale(1.02) translate3d(-1.5%, 0, 0); } to { transform: scale(1.1) translate3d(1.5%, -1%, 0); } }

.appbar { position: absolute; inset: 0 0 auto 0; z-index: 6; height: 3.6em; padding: 0 1.4em; display: flex; align-items: center; justify-content: space-between; }
.appbar__brand { font-size: 1.15em; font-weight: 300; letter-spacing: -0.02em; }
.appbar__tools { display: flex; align-items: center; gap: 0.6em; }
.ib { width: 2.2em; height: 2.2em; display: grid; place-items: center; color: var(--ink-2); }
.ib .ico { width: 1.15em; height: 1.15em; }
.avatar { width: 2.1em; height: 2.1em; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 0.9em; font-weight: 400; color: var(--dark); background: linear-gradient(145deg, #f6efdf, #cdbb95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.avatar--sm { width: 2em; height: 2em; font-size: 0.8em; }

/* Lapponica's orb: one element that glides to wherever the conversation needs it */
.orb {
  position: absolute; left: 0; top: 0; z-index: 2; width: 10em; height: 10em; pointer-events: none; mix-blend-mode: screen;
  opacity: var(--oo, 0); transform: translate3d(calc(var(--ox, 50%) - 5em), calc(var(--oy, 30%) - 5em), 0) scale(var(--os, 1));
  transition: transform 1.1s var(--spring), opacity 0.6s var(--ease); will-change: transform;
}
.orb img { width: 100%; height: 100%; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.05) rotate(2.5deg); } }
.anchor { display: block; flex: none; width: 4.4em; height: 4.4em; }
.anchor--big { width: 10em; height: 10em; }
.anchor--halo { position: absolute; inset: 0; margin: auto; width: min(25em, 62cqh); height: min(25em, 62cqh); border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 211, 163, 0.14), rgba(233, 211, 163, 0.05) 64%, transparent 72%); box-shadow: inset 0 0 0 1px rgba(233, 211, 163, 0.26), 0 0 7em rgba(233, 211, 163, 0.1); }
.anchor--halo::before, .anchor--halo::after { content: ""; position: absolute; border-radius: 50%; -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); }
.anchor--halo::before { inset: -7%; background: conic-gradient(from 0deg, transparent 0 55%, rgba(233, 211, 163, 0.85) 82%, transparent 100%); animation: spin 11s linear infinite; }
.anchor--halo::after { inset: -14%; background: conic-gradient(from 180deg, transparent 0 62%, rgba(255, 255, 255, 0.45) 86%, transparent 100%); animation: spin 17s linear infinite reverse; }
@keyframes spin { to { rotate: 1turn; } }

/* scenes */
.scene {
  position: absolute; inset: 3.6em 0 0 0; z-index: 3; opacity: 0; visibility: hidden; transform: translate3d(0, 1.4em, 0) scale(0.99);
  transition: opacity 0.5s var(--ease), transform 0.9s var(--ease), visibility 0s linear 0.5s;
}
.scene.in:not(.out) { opacity: 1; visibility: visible; transform: none; transition-delay: 0.1s, 0.1s, 0s; }
.scene.out { transform: translate3d(0, -1.4em, 0) scale(0.99); }
.scene > * { min-width: 0; }

/* cued elements rise in; the cue system adds .in, .out and .on as scroll passes their moment */
.js .x { opacity: 0; translate: 0 1em; scale: 0.985; transition: opacity 0.55s var(--ease), translate 0.85s var(--spring), scale 0.85s var(--spring); }
.js .scene.in:not(.out) .x:not([data-cue]) { opacity: 1; translate: 0 0; scale: 1; transition-delay: calc(var(--i, 0) * 90ms + 160ms); }
.js .x.in { opacity: 1; translate: 0 0; scale: 1; }

/* chat */
.thread { display: flex; flex-direction: column; gap: 0.9em; padding: 1em 1.8em 0; }
.thread--top { padding-top: 0.6em; }
.msg { display: grid; align-items: start; }
.msg--ai { grid-template-columns: 4.4em minmax(0, 1fr); }
.msg--ai .anchor { margin-top: -0.6em; margin-left: -0.5em; }
.msg--you { grid-template-columns: auto 2em; grid-template-rows: auto auto; justify-content: end; align-items: center; gap: 0.15em 0.7em; }
.msg--you .bubble { grid-row: 1 / 3; }
.msg--you .avatar { grid-column: 2; grid-row: 1; align-self: end; }
.msg--you time { grid-column: 2; grid-row: 2; align-self: start; font-size: 0.68em; text-align: center; color: var(--ink-3); }
.js .msg--you.x { translate: 0 7em; scale: 0.9; }
.js .msg--you.x.in { translate: 0 0; scale: 1; }

.bubble { position: relative; width: fit-content; max-width: min(34em, 100%); padding: 0.85em 1.15em; border-radius: 1.2em; font-size: 0.98em; line-height: 1.4; }
.bubble p { position: relative; z-index: 1; }
.msg--you .bubble { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.msg--ai .bubble::before { /* starts as the small typing pill, then grows into the message */
  content: ""; position: absolute; left: 0; top: 0; width: 4.4em; height: 2.7em; border-radius: 1.35em; background: rgba(20, 17, 14, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: width 0.7s var(--spring), height 0.7s var(--spring), border-radius 0.7s var(--ease);
}
.msg--ai .bubble.streaming::before { width: 100%; height: 100%; border-radius: 1.2em; }
.dots { position: absolute; z-index: 1; left: 1.25em; top: 1.15em; display: inline-flex; gap: 0.3em; opacity: 0; transition: opacity 0.25s; }
.dots b { width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--gold); animation: dot 1.1s ease-in-out infinite; }
.dots b:nth-child(2) { animation-delay: 0.15s; }
.dots b:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 50% { transform: translateY(-0.28em); opacity: 0.4; } }
.bubble.in:not(.streaming) .dots { opacity: 1; }
.t__g { opacity: 0; }
.t.is-typing .t__v::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--gold); animation: blink 0.9s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* composer */
.composer {
  position: absolute; left: 50%; bottom: 1.2em; z-index: 7; width: min(46em, calc(100% - 3em)); height: 4em; padding: 0 0.7em 0 0.75em; display: flex; align-items: center; gap: 0.9em;
  border-radius: 980px; background: rgba(20, 17, 14, 0.58); transform: translateX(-50%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1.4em 2.6em -1.4em rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  transition: bottom 1s var(--spring), width 1s var(--spring), opacity 0.5s var(--ease), transform 0.8s var(--spring);
}
[data-scene="4"] .composer, [data-scene="6"] .composer { opacity: 0; transform: translate(-50%, 1.6em); pointer-events: none; }
.cmp__mic, .cmp__send { flex: none; width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: 50%; }
.cmp__mic { background: rgba(255, 255, 255, 0.08); color: var(--ink-2); }
.cmp__send { background: var(--cream); color: var(--dark); transition: scale 0.35s var(--spring); }
.composer.sending .cmp__send { scale: 0.86; }
.cmp__mic .ico, .cmp__send .ico { width: 1.15em; height: 1.15em; }
.cmp__text { position: relative; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 1.04em; letter-spacing: -0.015em; }
.cmp__ph { color: var(--ink-3); }
.composer.typing .cmp__ph, .composer.has-text .cmp__ph { display: none; }
.caret { display: none; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.2em; background: var(--gold); animation: blink 0.9s steps(2, start) infinite; }
.composer.typing .caret { display: inline-block; }

/* 2 — clarifying questions */
.s2 .thread { width: 58%; }
.pick { display: grid; gap: 0.9em; padding-left: 4.4em; }
.pick__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55em; }
.pick__row label { min-width: 7.6em; font-size: 0.82em; color: var(--ink-3); }
.opt-chip { position: relative; padding: 0.5em 1.15em; border-radius: 980px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-size: 0.9em; line-height: 1.2; white-space: nowrap; transition: background 0.35s, color 0.35s, box-shadow 0.35s, scale 0.6s var(--spring); }
.opt-chip--sm { padding: 0.38em 0.9em; font-size: 0.8em; }
.opt-chip.on { background: var(--cream); color: var(--dark); box-shadow: none; scale: 1.06; }
.opt-chip.on::after, .sw.on::after, .opt.on::after, .acc.on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: ripple 0.95s ease-out 1; }
@keyframes ripple { from { box-shadow: 0 0 0 0 rgba(239, 230, 211, 0.6); } to { box-shadow: 0 0 0 1em rgba(239, 230, 211, 0); } }
.sw { position: relative; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); transition: scale 0.6s var(--spring), box-shadow 0.35s; }
.sw.on { scale: 1.12; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 0.2em var(--dark), 0 0 0 0.34em var(--cream); }
.sw--red { --c: #c0272d; } .sw--copper { --c: #b8734a; } .sw--stone { --c: #bdb097; } .sw--navy { --c: #2a3142; } .sw--graphite { --c: #3b3937; } .sw--cream { --c: #efe6d3; } .sw--black { --c: #1c1a18; }

.strip { position: absolute; right: 0; top: 2.2em; width: 54%; height: calc(100% - 2.2em); perspective: 1500px; perspective-origin: 0% 50%; pointer-events: none; }
.shot {
  position: absolute; left: var(--l); top: var(--t); width: var(--w); aspect-ratio: var(--ar); border-radius: 0.9em; overflow: hidden; transform-origin: left center;
  transform: rotateY(var(--ry)) rotateZ(var(--rz)); box-shadow: 0 1.5em 2.5em -1em rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.25); animation: drift 7s ease-in-out infinite alternate;
}
.shot:nth-child(2) { animation-delay: -1.5s; } .shot:nth-child(3) { animation-delay: -3s; } .shot:nth-child(4) { animation-delay: -4.5s; } .shot:nth-child(5) { animation-delay: -2.2s; } .shot:nth-child(6) { animation-delay: -5.5s; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--model { z-index: 2; }
.float { position: absolute; z-index: 3; filter: drop-shadow(0 0.7em 0.8em rgba(0, 0, 0, 0.6)); animation: drift 6s ease-in-out infinite alternate; --dy: -0.7em; }
.float--hat { left: 66%; top: 36%; width: 17%; rotate: 8deg; }
.float--shoes { left: 56%; top: 74%; width: 26%; rotate: -6deg; animation-delay: -2s; }
@keyframes drift { to { translate: 0 var(--dy); } }

/* 3 — three outfit sets: boxless outfits on glass discs, the chosen one framed */
.s3 { display: flex; flex-direction: column; }
.panes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pane-s { position: absolute; top: 12%; width: 12%; height: 56%; object-fit: cover; border-radius: 1em; filter: brightness(0.62) saturate(1.1); outline: 1px solid rgba(255, 255, 255, 0.2); transform: perspective(900px) rotateY(var(--ry)); }
.pane-s--l1 { left: -3%; --ry: 34deg; } .pane-s--l2 { left: 7%; top: 8%; height: 64%; --ry: 28deg; }
.pane-s--r1 { right: -3%; --ry: -34deg; } .pane-s--r2 { right: 7%; top: 8%; height: 64%; --ry: -28deg; }
.deck { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: stretch; gap: 1.2em; padding: 1.4em 4em 5.2em; }
.slot {
  flex: 0 1 22em; min-width: 0; transform: perspective(1500px) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0em)) scale(var(--sc, 1));
  transition: transform 1s var(--spring), opacity 0.6s var(--ease);
}
.slot--l { --ry: 12deg; --tz: -1em; } .slot--r { --ry: -12deg; --tz: -1em; }
.slot--c.on { --sc: 1.05; --tz: 1em; }
.deck:has(.slot--c.on) .slot:not(.slot--c) { opacity: 0.85; }
.set { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 1.7em; transition: background 0.8s var(--ease), box-shadow 0.8s var(--ease); }
.slot.on .set { background: linear-gradient(160deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04)); box-shadow: 0 0 0 1.5px rgba(233, 211, 163, 0.95), 0 0 3.6em -0.4em rgba(233, 211, 163, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.set__art { position: relative; flex: 1; min-height: 0; }
.set__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 1.7em; opacity: 0; transition: opacity 0.9s var(--ease); -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.slot.on .set__bg { opacity: 0.55; }
.set__fg { position: absolute; z-index: 2; left: 50%; bottom: 1.2em; height: calc(100% - 1.4em); width: auto; max-width: 94%; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 0.9em 0.9em rgba(0, 0, 0, 0.5)); }
.pedestal { position: absolute; z-index: 1; left: 50%; bottom: 0.2em; width: 86%; aspect-ratio: 3.8; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07) 72%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 2.4em rgba(233, 211, 163, 0.12); }
.set__info { position: relative; z-index: 4; display: grid; gap: 0.2em; padding: 0.9em 1.2em 1.1em; }
.set__name b { display: block; font-size: 1.2em; font-weight: 400; }
.set__name span { color: var(--ink-2); font-size: 0.95em; }
.set__blurb { color: var(--ink-3); font-size: 0.8em; }
.set__buy { display: flex; align-items: center; gap: 0.7em; margin-top: 0.35em; }
.price { font-size: 1.5em; font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price s { margin-left: 0.2em; font-size: 0.55em; letter-spacing: 0; }
.off { margin-left: auto; padding: 0.4em 0.9em; border-radius: 980px; background: var(--cream); color: var(--dark); font-size: 0.78em; white-space: nowrap; }
.go { flex: none; width: 2.2em; height: 2.2em; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.go .ico { width: 1em; height: 1em; }
.nav-arrow { position: absolute; z-index: 5; top: 46%; width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: 50%; background: rgba(20, 17, 14, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav-arrow--l { left: 1.4em; } .nav-arrow--r { right: 1.4em; }
.nav-arrow .ico { width: 1.1em; height: 1.1em; }

/* 4 — refine one piece */
.s4 { display: grid; grid-template-columns: minmax(0, 1fr) 23%; gap: 1.4em; padding-right: 1.8em; }
.s4__main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.s4 .thread { align-items: stretch; }
.options { flex: 1; min-height: 0; display: grid; grid-template-columns: 0.78fr 1fr 1fr 1fr; gap: 1em; padding: 1em 0 6.4em 1.8em; }
.opt {
  position: relative; display: flex; flex-direction: column; min-height: 0; padding: 0.75em; border-radius: 1.2em; background: rgba(20, 17, 14, 0.52);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: box-shadow 0.6s var(--ease), translate 0.85s var(--spring), scale 0.85s var(--spring), opacity 0.5s;
}
.options:has(.opt.on) .opt:not(.on):not(.opt--pin) { opacity: 0.62; }
.opt.on { box-shadow: 0 0 0 1.5px var(--gold), 0 0 3em -0.5em rgba(233, 211, 163, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.js .opt.x.in.on { translate: 0 -0.5em; scale: 1.03; }
.opt__tag { font-size: 0.78em; color: var(--ink-3); }
.opt--pin img { flex: 1; min-height: 0; width: 100%; margin-top: 0.4em; object-fit: contain; filter: drop-shadow(0 0.8em 0.8em rgba(0, 0, 0, 0.5)); }
.pinbadge { position: absolute; top: -0.5em; right: -0.5em; width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--dark); }
.pinbadge svg { width: 0.9em; height: 0.9em; fill: currentColor; }
.opt__art { position: relative; flex: 1; min-height: 0; }
.opt__pants { position: absolute; inset: 0; margin: auto; height: 100%; width: auto; max-width: 84%; object-fit: contain; filter: drop-shadow(0 0.8em 0.8em rgba(0, 0, 0, 0.45)); }
.opt__bag { position: absolute; right: -0.3em; bottom: 0; width: 38%; filter: drop-shadow(0 0.4em 0.5em rgba(0, 0, 0, 0.55)); }
.opt__name { margin-top: 0.4em; font-size: 0.86em; color: var(--ink-2); }
.opt__price { font-size: 1.3em; font-weight: 400; letter-spacing: -0.02em; }
.opt__meta { display: flex; align-items: center; gap: 0.35em; margin-top: 0.15em; font-size: 0.7em; color: var(--ink-3); }
.opt__meta i { width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.opt__meta span { margin-left: 0.4em; letter-spacing: 0.12em; }
.tick { position: absolute; top: 0.6em; right: 0.6em; width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--dark); scale: 0; transition: scale 0.7s var(--spring) 0.1s; }
.tick .ico { width: 1em; height: 1em; stroke-width: 2.2; }
.opt.on .tick { scale: 1; }

.preview {
  position: relative; align-self: stretch; margin: 0.6em 0 6.8em; border-radius: 1.6em; overflow: hidden; transform: perspective(1400px) rotateY(-8deg); transform-origin: left center;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2em 3em -1.5em rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.preview img { position: absolute; left: 50%; top: 3%; height: 82%; width: auto; max-width: 96%; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.5)); transition: opacity 0.9s var(--ease), filter 0.9s var(--ease); }
.preview__b { opacity: 0; filter: blur(10px) drop-shadow(0 1em 1em rgba(0, 0, 0, 0.5)); }
.preview.on .preview__a { opacity: 0; filter: blur(10px) drop-shadow(0 1em 1em rgba(0, 0, 0, 0.5)); }
.preview.on .preview__b { opacity: 1; filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.5)); }
.sweep { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.34) 50%, transparent 70%) 130% 0 / 250% 100% no-repeat; }
.preview.on .sweep { animation: sweep 1.2s ease-out 1; }
@keyframes sweep { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 0; background-position: -30% 0; } }
.upd { position: absolute; z-index: 4; left: 50%; bottom: 0.9em; translate: -50% 0; height: 2.9em; padding: 0 1.1em; display: grid; border: 0; border-radius: 980px; overflow: hidden; background: rgba(20, 17, 14, 0.82); color: var(--ink); font: inherit; font-size: 0.82em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); white-space: nowrap; transition: background 0.4s, color 0.4s, scale 0.4s var(--spring); }
.upd__a, .upd__b { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; transition: opacity 0.4s, translate 0.6s var(--spring); }
.upd .ico { width: 1.05em; height: 1.05em; }
.upd__b { opacity: 0; translate: 0 100%; }
.upd.on { background: var(--cream); color: var(--dark); scale: 1.04; }
.upd.on .upd__a { opacity: 0; translate: 0 -100%; }
.upd.on .upd__b { opacity: 1; translate: 0 0; }

/* 5 — item details */
.s5 { padding: 0 1.8em 1.4em; }
.s5__grid { height: 100%; display: grid; grid-template-columns: 5em minmax(0, 1.2fr) minmax(0, 0.85fr) minmax(0, 0.6fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0.6em 1.6em; }
.rail { display: flex; flex-direction: column; justify-content: center; gap: 0.7em; }
.rail li { width: 4.6em; height: 4.6em; display: grid; place-items: center; padding: 0.5em; border-radius: 0.95em; background: rgba(20, 17, 14, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.rail li.on { box-shadow: inset 0 0 0 1.5px var(--gold); }
.rail img { max-width: 100%; max-height: 100%; object-fit: contain; }
.s5__hero { position: relative; display: grid; place-items: center; min-height: 0; }
.shirt { position: relative; z-index: 1; max-width: 86%; max-height: 90%; object-fit: contain; filter: drop-shadow(0 1.2em 1.2em rgba(0, 0, 0, 0.5)); transition: filter 0.9s var(--ease); }
.s5:has(.sw--cream.on) .shirt { filter: grayscale(1) brightness(2.7) contrast(0.78) sepia(0.32) drop-shadow(0 1.2em 1.2em rgba(0, 0, 0, 0.5)); }
.s5__info { display: flex; flex-direction: column; justify-content: center; gap: 0.7em; min-width: 0; }
.s5__title { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.s5__title h4 { font-size: 2em; font-weight: 300; letter-spacing: -0.035em; line-height: 1.1; }
.heart { width: 2.3em; height: 2.3em; display: grid; place-items: center; color: var(--ink-2); }
.heart .ico { width: 1.2em; height: 1.2em; }
.s5__info .price { font-size: 1.7em; line-height: 1.1; }
.rating { display: flex; align-items: center; gap: 0.4em; font-size: 0.92em; color: var(--gold); }
.rating svg { width: 1em; height: 1em; fill: currentColor; }
.rating span { color: var(--ink-3); }
.swatch-row, .size-row { display: flex; gap: 0.7em; }
.size-row span { width: 3.1em; height: 2.6em; display: grid; place-items: center; border-radius: 0.75em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); font-size: 0.9em; transition: background 0.35s, color 0.35s, box-shadow 0.35s, scale 0.6s var(--spring); }
.size-row span.on { background: var(--cream); color: var(--dark); box-shadow: none; scale: 1.05; }
.addbtn { position: relative; height: 3.3em; margin-top: 0.3em; display: grid; border: 0; border-radius: 980px; overflow: hidden; background: var(--cream); color: var(--dark); font: inherit; transition: scale 0.5s var(--spring), box-shadow 0.5s; }
.addbtn__a, .addbtn__b { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; transition: opacity 0.4s, translate 0.6s var(--spring); }
.addbtn .ico { width: 1.1em; height: 1.1em; stroke-width: 2.1; }
.addbtn__b { opacity: 0; translate: 0 100%; }
.addbtn.on { scale: 1.03; box-shadow: 0 0 0 0.45em rgba(239, 230, 211, 0.22); }
.addbtn.on .addbtn__a { opacity: 0; translate: 0 -100%; }
.addbtn.on .addbtn__b { opacity: 1; translate: 0 0; }
.s5__model { min-height: 0; margin: 0 0 0.4em; overflow: hidden; border-radius: 1.4em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1.6em 2.4em -1.2em rgba(0, 0, 0, 0.8); }
.s5__model img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.s5__tabs { grid-column: 1 / -1; padding: 0.9em 1.3em 1em; border-radius: 1.2em; background: rgba(20, 17, 14, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.4em 1.7em; font-size: 0.84em; color: var(--ink-3); }
.tabs li { position: relative; padding-bottom: 0.45em; transition: color 0.3s; }
.tabs li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--cream); scale: 0 1; transition: scale 0.5s var(--spring); }
.tabs li.on { color: var(--ink); }
.tabs li.on::after { scale: 1 1; }
.tabs__body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4em; align-items: center; margin-top: 0.7em; }
.tabs__body > p { grid-area: 1 / 1; max-width: 34em; font-size: 0.86em; color: var(--ink-2); transition: opacity 0.45s var(--ease), translate 0.6s var(--spring); }
.tabs__p--2 { opacity: 0; translate: 0 0.5em; }
.tabs__p--2.on { opacity: 1; translate: 0 0; }
.tabs__p--2.on ~ .tabs__p--1, .tabs__body:has(.tabs__p--2.on) .tabs__p--1 { opacity: 0; translate: 0 -0.5em; }
.feats { grid-area: 1 / 2; display: flex; gap: 1.4em; }
.feats li { display: grid; justify-items: center; gap: 0.35em; font-size: 0.68em; color: var(--ink-3); text-align: center; }
.feats .ico { width: 2.2em; height: 2.2em; padding: 0.55em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: var(--ink-2); }

/* 6 — dynamic offers */
.s6 { display: flex; flex-direction: column; padding-bottom: 5.2em; }
.fbt__title { margin-top: auto; padding: 1em 1.8em 0.6em; font-size: 1.05em; font-weight: 400; }
.fbt { flex: 0 0 auto; margin-bottom: auto; display: grid; grid-template-columns: minmax(0, 1fr) 16em; grid-template-rows: 19em; gap: 1.2em; padding: 0 1.8em; }
.fbt__cards { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.acc {
  position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0.9em; border-radius: 1.2em; background: rgba(20, 17, 14, 0.52);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow 0.6s var(--ease);
}
.acc.on { box-shadow: 0 0 0 1.5px var(--gold), 0 0 3em -0.5em rgba(233, 211, 163, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.acc img { flex: 1; min-height: 0; width: 100%; object-fit: contain; filter: drop-shadow(0 0.8em 0.8em rgba(0, 0, 0, 0.5)); }
.acc__name { margin-top: 0.5em; font-size: 0.92em; color: var(--ink-2); }
.acc__price { font-size: 1.3em; font-weight: 400; letter-spacing: -0.02em; }
.acc__price s { font-size: 0.6em; }
.acc__add { position: relative; display: grid; margin-top: 0.6em; padding: 0.6em; border-radius: 0.85em; overflow: hidden; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-size: 0.85em; text-align: center; transition: background 0.4s, color 0.4s; }
.acc__a, .acc__b { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; transition: opacity 0.35s, translate 0.55s var(--spring); }
.acc__b { opacity: 0; translate: 0 100%; }
.acc__b .ico { width: 1em; height: 1em; stroke-width: 2.1; }
.acc.on .acc__add { background: var(--cream); color: var(--dark); box-shadow: none; }
.acc.on .acc__a { opacity: 0; translate: 0 -100%; }
.acc.on .acc__b { opacity: 1; translate: 0 0; }
.ticket {
  position: relative; display: flex; flex-direction: column; gap: 0.15em; padding: 1.2em 1.3em 1em; border-radius: 1.2em; overflow: hidden;
  background: linear-gradient(150deg, rgba(233, 211, 163, 0.3), rgba(233, 211, 163, 0.08)); box-shadow: inset 0 0 0 1px rgba(233, 211, 163, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.s6:has(.acc.on) .ticket { animation: tick 1.1s var(--ease) 1; }
@keyframes tick { 35% { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 3.5em -0.2em rgba(233, 211, 163, 0.75); } }
.ticket__k { font-size: 0.8em; color: var(--ink-2); }
.ticket__big { font-size: 2.9em; font-weight: 300; letter-spacing: -0.045em; line-height: 1; }
.ticket__sub { margin-top: 0.5em; font-size: 0.82em; color: var(--ink-2); }
.ticket__pct { position: absolute; right: 1.1em; top: 3.2em; width: 3.6em; height: 2.4em; display: grid; place-items: center; rotate: -14deg; border-radius: 0.5em; box-shadow: inset 0 0 0 1.5px rgba(233, 211, 163, 0.6); color: var(--gold); }
.ticket__pct .ico { width: 1.4em; height: 1.4em; }
.ticket__t { display: flex; align-items: center; gap: 0.45em; margin-top: auto; padding-top: 0.8em; border-top: 1px dashed rgba(233, 211, 163, 0.45); font-size: 0.84em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ticket__t .ico { width: 1.2em; height: 1.2em; }

/* 7 — live set update, then the cart */
.s7 { padding: 0 1.8em 1.4em; }
.s7__grid { height: 100%; display: grid; grid-template-columns: 5em minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 1.8em; align-items: stretch; }
.s7__stage { position: relative; min-height: 0; }
.tube { position: absolute; inset: 0 10% 3% 10%; border-radius: 2.6em; background: linear-gradient(100deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.09)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 1.4em 0 2.2em -1.8em rgba(255, 255, 255, 0.4), 0 2em 3em -1.5em rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.disc { position: absolute; left: 50%; bottom: 3%; width: 82%; aspect-ratio: 3.4; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07) 72%, transparent); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3), 0 0 4em rgba(233, 211, 163, 0.22); }
.disc::after { content: ""; position: absolute; inset: -12%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(233, 211, 163, 0.3); }
.s7__set { position: absolute; z-index: 2; inset: 0 0 5% 0; margin: auto; height: 90%; width: auto; max-width: 70%; object-fit: contain; filter: drop-shadow(0 1.2em 1.2em rgba(0, 0, 0, 0.5)); }
.s7__belt { position: absolute; z-index: 3; left: 12%; bottom: 8%; width: 20%; filter: drop-shadow(0 0.6em 0.7em rgba(0, 0, 0, 0.55)); }
.js .s7__belt { opacity: 0; scale: 0.3; rotate: -30deg; translate: 3em -3em; transition: opacity 0.5s var(--ease), scale 1s var(--spring), rotate 1s var(--spring), translate 1s var(--spring); }
.js .s7__belt.in { opacity: 1; scale: 1; rotate: 0deg; translate: 0 0; }
.s7__side { position: relative; display: grid; align-items: center; min-width: 0; }
.s7__side > * { grid-area: 1 / 1; }
.js .x.out { opacity: 0; translate: 0 -1em; scale: 0.97; pointer-events: none; }
.summary {
  display: grid; gap: 0.5em; padding: 1.2em 1.3em; border-radius: 1.4em; background: linear-gradient(150deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2em 3em -1.5em rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.summary header { display: flex; align-items: flex-start; justify-content: space-between; line-height: 1.25; }
.summary header > span { display: flex; flex-direction: column; }
.summary header b { font-size: 1.05em; font-weight: 400; }
.summary header span span { color: var(--ink-2); font-size: 0.9em; }
.chev .ico { width: 1.1em; height: 1.1em; color: var(--ink-2); }
.lines { margin: 0.3em 0; }
.lines li { display: flex; justify-content: space-between; gap: 1em; padding: 0.4em 0; font-size: 0.9em; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
.lines em, .sum em, .disc-line em { font-style: normal; font-variant-numeric: tabular-nums; }
.js .lines .line--new { max-height: 0; padding-block: 0; opacity: 0; overflow: hidden; transition: max-height 0.7s var(--spring), padding 0.7s var(--spring), opacity 0.5s var(--ease), background 1.6s var(--ease); }
.js .lines .line--new.in { max-height: 2.6em; padding-block: 0.4em; opacity: 1; animation: flash 1.8s var(--ease) 1; }
@keyframes flash { 0%, 30% { background: rgba(233, 211, 163, 0.28); } 100% { background: rgba(233, 211, 163, 0); } }
.sum { display: flex; justify-content: space-between; font-size: 0.9em; color: var(--ink-2); }
.disc-line { display: flex; justify-content: space-between; padding: 0.5em 0.9em; border-radius: 0.8em; background: rgba(239, 230, 211, 0.92); color: var(--dark); font-size: 0.86em; }
.total { font-size: 2em; font-weight: 300; letter-spacing: -0.04em; line-height: 1.1; }
.total em { font-style: normal; font-variant-numeric: tabular-nums; }
.addcart { height: 3.2em; margin-top: 0.3em; display: flex; align-items: center; justify-content: center; gap: 0.5em; border: 0; border-radius: 980px; background: var(--cream); color: var(--dark); font: inherit; transition: scale 0.5s var(--spring), box-shadow 0.5s; }
.addcart .ico { width: 1.1em; height: 1.1em; }
.addcart.on { scale: 0.97; box-shadow: 0 0 0 0.5em rgba(239, 230, 211, 0.25); }

.done { display: grid; justify-items: center; align-content: center; gap: 1.1em; text-align: center; }
.cartpill {
  display: flex; align-items: center; gap: 1em; min-width: 17.5em; padding: 1em 1.2em 1em 1.3em; border-radius: 980px; text-align: left;
  background: linear-gradient(150deg, rgba(44, 37, 30, 0.88), rgba(20, 17, 14, 0.88)); box-shadow: inset 0 0 0 1.5px rgba(233, 211, 163, 0.45), 0 0 3em -0.5em rgba(233, 211, 163, 0.35), 0 2em 3em -1.5em rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.cartpill.on { animation: pillpop 0.9s var(--spring) 1; }
@keyframes pillpop { 0% { scale: 0.94; } 100% { scale: 1; } }
.cartpill__bag { flex: none; width: 2.6em; height: 2.6em; display: grid; place-items: center; }
.cartpill__bag .ico { width: 1.8em; height: 1.8em; stroke-width: 1.3; }
.cartpill p { display: grid; line-height: 1.3; }
.cartpill b { font-weight: 400; }
.cartpill p span { font-size: 0.85em; color: var(--ink-2); }
.cartpill__ok { margin-left: auto; flex: none; width: 2.2em; height: 2.2em; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--dark); scale: 0; transition: scale 0.7s var(--spring) 0.15s; }
.cartpill__ok .ico { width: 1.1em; height: 1.1em; stroke-width: 2.2; }
.cartpill.on .cartpill__ok { scale: 1; }
.bundle { display: flex; justify-content: center; }
.bundle span { width: 3em; height: 3em; margin-left: -0.7em; display: grid; place-items: center; padding: 0.5em; border-radius: 50%; background: rgba(20, 17, 14, 0.85); box-shadow: inset 0 0 0 1.5px rgba(233, 211, 163, 0.42), 0 0.6em 1em -0.4em rgba(0, 0, 0, 0.7); scale: 0; transition: scale 0.7s var(--spring) calc(var(--i) * 70ms + 0.3s); }
.bundle span:first-child { margin-left: 0; }
.bundle img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bundle.on span { scale: 1; }
.checkout { display: inline-flex; align-items: center; gap: 0.6em; height: 3.2em; padding: 0 0.5em 0 1.5em; border-radius: 980px; background: var(--cream); color: var(--dark); white-space: nowrap; }
.checkout .ico { width: 1.1em; height: 1.1em; }
.checkout__ext { width: 2.3em; height: 2.3em; margin-left: 0.4em; display: grid; place-items: center; border-radius: 50%; background: var(--dark); color: var(--cream); }
.checkout__ext .ico { width: 1em; height: 1em; }
.s8__note { color: var(--ink-3); font-size: 0.82em; max-width: 20em; }

/* narrow windows: one column, the carousel peeks, side panels fold away */
@container app (max-width: 640px) {
  .app__bg { background: linear-gradient(180deg, rgba(14, 12, 10, 0.3), rgba(14, 12, 10, 0.6)), url("images/silk-tall.webp") center / cover; }
  .appbar { padding: 0 1em; }
  .thread { padding: 0.8em 1.1em 0; }
  .s2 .thread { width: 100%; }
  .strip, .panes { display: none; }
  .pick { padding-left: 0; }
  .pick__row label { flex: 0 0 100%; }
  .composer { width: calc(100% - 1.6em); bottom: 0.8em; }

  .deck { padding: 2.4em 0 5.6em; gap: 0; }
  .slot { flex: 0 0 62%; margin-inline: -10%; --ry: 0deg; }
  .slot--l { --ry: 18deg; --tz: -3em; } .slot--r { --ry: -18deg; --tz: -3em; }
  .slot--l, .slot--r { z-index: 0; opacity: 0.7; }
  .slot--c { z-index: 1; --sc: 1.02; }
  .nav-arrow { display: none; }
  .set__blurb { display: none; }
  .set__info { padding: 0 0.9em 0.9em; }
  .price { font-size: 1.3em; }
  .go { display: none; }

  .s4 { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; padding-right: 0; gap: 0; }
  .s4__main { display: contents; }
  .s4 .thread { grid-row: 1; }
  .options { grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); padding: 0.8em 1.1em 0.6em; gap: 0.6em; }
  .opt--pin { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 0.8em; padding: 0.45em 0.8em; }
  .opt--pin img { flex: none; width: 2.8em; height: 2.8em; margin: 0; }
  .opt { padding: 0.55em; }
  .opt__meta span { display: none; }
  .preview { grid-row: 3; height: 5.6em; margin: 0 1.1em 6em; transform: none; display: flex; align-items: center; }
  .preview img { left: 0.6em; top: 0.4em; height: calc(100% - 0.8em); transform: none; }
  .upd { left: auto; right: 0.9em; bottom: 50%; translate: 0 50%; }

  .s5 { padding: 0 1.1em 1em; }
  .s5__grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .rail, .s5__tabs, .s5__model { display: none; }
  .s5__title h4 { font-size: 1.6em; }

  .s6 { padding-bottom: 4.6em; }
  .fbt { flex: 1; min-height: 0; margin-bottom: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 0 1.1em; gap: 0.8em; }
  .fbt__title { padding-inline: 1.1em; }
  .fbt__cards { gap: 0.6em; }
  .acc { padding: 0.55em; }
  .acc__add { padding: 0.4em; }
  .ticket { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.2em 1em; padding: 0.8em 1em; }
  .ticket__k, .ticket__pct { display: none; }
  .ticket__big { font-size: 2em; }
  .ticket__sub { margin: 0; }
  .ticket__t { flex: 0 0 100%; margin: 0; padding-top: 0.5em; }

  .s7 { padding: 0 1.1em 1em; }
  .s7__grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 0.85fr) auto; gap: 0.6em; }
  .rail { display: none; }
  .s7__side { align-self: end; }
  .summary { padding: 1em 1.1em; gap: 0.35em; }
  .lines li { padding-block: 0.26em; font-size: 0.88em; }
  .total { font-size: 1.6em; }
  .cartpill { min-width: 0; width: 100%; }
}
@container app (max-width: 640px) and (max-height: 640px) {
  .set__info .set__name span, .opt__name { display: none; }
}

/* ---------- technology (dark) ---------- */
.graph {
  background: radial-gradient(60% 36rem at 50% 30rem, rgba(190, 160, 110, 0.16), transparent 70%), #0d0b09;
  padding: clamp(5rem, 11vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
}
.graph__algos { margin-top: clamp(2.5rem, 5vw, 4rem); color: var(--ink-3); font-size: 0.9375rem; }

/* ---------- technology: integrate in three steps (scan -> graph -> chat) ---------- */
:where(.integ) button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
:where(.integ) button:disabled { cursor: default; }
.integ { display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); }
.integ__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.9rem 2.5rem; }
.integ__for { margin-bottom: 0.6rem; font-size: 0.9375rem; color: var(--gold); }
.integ h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1.05; letter-spacing: -0.04em; }
.integ__sub { max-width: 27rem; color: var(--ink-2); text-wrap: pretty; }
.integ__grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem; }

.ig-card {
  flex: 1.25 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border-radius: 1.5rem;
  background: rgba(243, 236, 224, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.ig-card--graph { flex: 2.1 1 24rem; }
.ig-card--chat { flex: 1.4 1 18rem; }
.ig-card__head { display: flex; align-items: flex-start; gap: 0.75rem; }
.ig-card__head p { margin-top: 0.2rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.ig-card h4, .integ__facts h4 { margin: 0; }
.ig-card h4 { font-size: 1.125rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; }
.ig-num { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--dark); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; }

.ig-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ig-chip { position: relative; display: inline-flex; align-items: center; min-height: 2.125rem; padding: 0 0.75rem; border-radius: 999px; background: rgba(243, 236, 224, 0.08); color: var(--ink); font-size: 0.8125rem; line-height: 1; transition: background 0.25s, color 0.25s; }
.ig-chip::after { content: ''; position: absolute; inset: -0.3rem; }
.ig-chip:hover { background: rgba(243, 236, 224, 0.16); }
.ig-chip[aria-pressed="true"] { background: var(--cream); color: var(--dark); }

/* 1 · scan */
.ig-scan { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.ig-note { font-size: 0.8125rem; color: var(--ink-2); }
.ig-rows { position: relative; flex: 1; display: flex; }
.ig-items { flex: 1; display: flex; flex-direction: column; gap: 0.375rem; }
.ig-item { flex: 1 1 0; min-height: 2.75rem; max-height: 4rem; display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0.75rem 0.375rem 0.5rem; border-radius: 0.875rem; background: rgba(243, 236, 224, 0.05); }
.ig-thumb { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; display: grid; place-items: center; background: rgba(239, 230, 211, 0.94); }
.ig-thumb img { width: 84%; height: 84%; object-fit: contain; }
.ig-item__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.875rem; line-height: 1.25; }
.ig-item__t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-item__t i { font-style: normal; font-size: 0.78rem; color: var(--ink-2); }
.ig-tick { flex: none; width: 1rem; height: 1rem; color: var(--gold); stroke-width: 2.2; }
.ig-sweep { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 14px rgba(233, 211, 163, 0.7); }
.ig-read { display: grid; gap: 0.5rem; margin-top: auto; }
.ig-read p { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--gold); }
.ig-read .ico { width: 1rem; height: 1rem; stroke-width: 2.2; }
.ig-read ul { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; font-size: 0.8125rem; color: var(--ink-2); }

.integ.is-armed .ig-scan:not(.is-play) .ig-tick { opacity: 0; }
.ig-scan.is-play .ig-sweep { animation: ig-sweep 2.2s ease-in-out both; }
.ig-scan.is-play .ig-tick { animation: ig-tick 0.45s var(--ease) calc(0.3s + var(--i) * 0.36s) both; }
@keyframes ig-sweep { 0% { top: 0; opacity: 0; } 8%, 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes ig-tick { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

/* 2 · graph */
.ig-graph { position: relative; width: 100%; aspect-ratio: 480 / 340; container-type: inline-size; }
.ig-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ig-edges path { fill: none; stroke: rgba(243, 236, 224, 0.13); stroke-width: 1; transition: stroke 0.3s; }
.ig-edges path.is-lit { stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 4 5; animation: ig-flow 1.1s linear infinite; }
@keyframes ig-flow { to { stroke-dashoffset: -9; } }
.ig-node { position: absolute; transform: translate(-50%, -50%); transition: filter 0.35s, box-shadow 0.35s, background 0.35s, transform 0.35s var(--ease); }
.ig-node::after { content: ''; position: absolute; inset: -7px; }
.ig-node:hover { transform: translate(-50%, -50%) scale(1.07); }
.ig-node.is-dim { filter: brightness(0.5) saturate(0.6); }
.ig-c { padding: 0.45em 0.95em; border-radius: 999px; background: #26211b; color: var(--ink); font-size: clamp(10px, 2.3cqw, 12px); line-height: 1.1; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(243, 236, 224, 0.16); }
.ig-c.is-lit { background: #3a3226; box-shadow: inset 0 0 0 1px var(--gold), 0 0 18px rgba(233, 211, 163, 0.22); }
.ig-p { width: clamp(30px, 8.4cqw, 44px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; background: rgba(239, 230, 211, 0.94); }
.ig-p img { width: 84%; height: 84%; object-fit: contain; pointer-events: none; }
.ig-p.is-lit { box-shadow: 0 0 0 2px var(--gold), 0 0 20px rgba(233, 211, 163, 0.3); }
.ig-q { width: clamp(68px, 19.5cqw, 98px); padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 2px; text-align: left; border-radius: 14px; background: var(--cream); color: var(--dark); box-shadow: 0 0 22px rgba(233, 211, 163, 0.2); }
.ig-q small { font-size: clamp(9px, 2cqw, 11px); line-height: 1; color: #5c5347; }
.ig-q span { font-size: clamp(10px, 2.35cqw, 12.5px); line-height: 1.2; font-weight: 500; }
.ig-readout { min-height: 2.5rem; font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* 3 · chat and sale */
.ig-chat { flex: 1; display: flex; flex-direction: column; gap: 0.875rem; padding: 0.875rem; border-radius: 1.125rem; background: var(--dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ig-chat__who { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-2); }
.ig-orb { width: 1rem; height: 1rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8e8, #e9d3a3 45%, #6a5a3c 100%); }
.ig-thread { display: flex; flex-direction: column; gap: 0.875rem; }
.ig-msg--you { align-self: flex-end; max-width: 86%; padding: 0.55rem 0.875rem; border-radius: 1.125rem 1.125rem 0.25rem 1.125rem; background: rgba(243, 236, 224, 0.13); font-size: 0.875rem; line-height: 1.4; }
.ig-reply { position: relative; min-height: 1.4rem; font-size: 0.9rem; line-height: 1.45; }
.ig-dots { position: absolute; left: 0; top: 0.3rem; display: flex; gap: 5px; opacity: 0; }
.ig-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(243, 236, 224, 0.6); animation: ig-bob 0.9s ease-in-out infinite; }
.ig-dots i:nth-child(2) { animation-delay: 0.12s; }
.ig-dots i:nth-child(3) { animation-delay: 0.24s; }
@keyframes ig-bob { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-4px); opacity: 1; } }
.ig-pin { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; color: var(--ink-2); }
.ig-pin .ig-thumb { width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; }
.ig-prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(5.1rem, 100%), 1fr)); gap: 0.5rem; }
.ig-prod { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ig-pimg { aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; border-radius: 0.75rem; background: rgba(239, 230, 211, 0.94); }
.ig-pimg img { width: 88%; height: 88%; object-fit: contain; }
.ig-prod__t { flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 0.8125rem; line-height: 1.3; }
.ig-prod__t small { font-size: 0.75rem; color: var(--ink-2); }
.ig-add { position: relative; width: 100%; min-height: 2.75rem; border-radius: 999px; background: rgba(243, 236, 224, 0.1); color: var(--ink); font-size: 0.8125rem; transition: background 0.25s, color 0.25s; }
.ig-add:hover { background: rgba(243, 236, 224, 0.2); }
.ig-add[aria-pressed="true"] { background: var(--gold); color: var(--dark); }
.ig-add:disabled:not([aria-pressed="true"]) { opacity: 0.4; }
.ig-cartbar { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding-top: 0.25rem; }
.ig-cartbar p { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-2); }
.ig-cartbar .ico { width: 1.1rem; height: 1.1rem; }
.ig-co { min-height: 2.75rem; padding: 0 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; background: var(--cream); color: var(--dark); font-size: 0.875rem; font-weight: 500; transition: opacity 0.25s, background 0.25s; }
.ig-co:disabled { opacity: 0.35; }
.ig-co.is-done { opacity: 1; background: var(--gold); }
.ig-co__ok { display: none; width: 1rem; height: 1rem; stroke-width: 2.2; }
.ig-co.is-done .ig-co__ok { display: block; }
.ig-composer { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.375rem 0.375rem 0.375rem 1rem; border-radius: 999px; background: rgba(243, 236, 224, 0.07); font-size: 0.85rem; color: var(--ink-2); }
.ig-send { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--dark); }
.ig-send .ico { width: 1rem; height: 1rem; stroke-width: 2.2; }

.integ.is-armed .ig-thread:not(.is-play) .ig-rise { opacity: 0; }
.ig-thread.is-play .ig-rise { animation: ig-rise 0.55s var(--ease) var(--d, 0s) both; }
.ig-thread.is-play .ig-dots { animation: ig-dots 0.95s ease both; }
@keyframes ig-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ig-dots { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }

.integ__facts { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; padding-top: 0.5rem; }
.integ__facts li { flex: 1 1 16rem; display: flex; align-items: flex-start; gap: 0.75rem; }
.integ__facts .ico { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: var(--gold); stroke-width: 1.6; }
.integ__facts h4 { font-size: 0.9375rem; font-weight: 400; }
.integ__facts p { margin-top: 0.125rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); }

/* ---------- close + footer ---------- */
.cta { padding: clamp(5.5rem, 13vw, 11rem) 0; }
.cta__in { display: grid; gap: 1.5rem; justify-items: start; }
.cta h2 { font-size: clamp(2.8rem, 0.8rem + 6vw, 6rem); }
.cta .btn { margin-top: 0.4rem; }

.footer { padding: 1.6rem 0 2rem; box-shadow: inset 0 1px 0 var(--line); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); background: #0d0b09; }
.footer__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; }
.footer__in p:last-child { max-width: 46rem; }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translate3d(0, 1.4rem, 0); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--d, 0) * 120ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  :root { --nav-h: 3.6rem; }
  .nav { display: flex; justify-content: space-between; }
  .nav__links { display: none; }
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: 1fr; }
  .canvas__track { height: 800vh; height: 800svh; }
  .hero__bg::after { background: linear-gradient(180deg, rgba(15, 13, 11, 0.35), rgba(15, 13, 11, 0.7) 58%, #0f0d0b); }
  .hero__bg img { object-position: 70% 50%; }
  .stage__head { align-items: center; }
  .reset span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- try it: the conversation, hands on ---------- */
.try { padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 7rem); background: radial-gradient(60% 30rem at 50% 0, rgba(190, 160, 110, 0.1), transparent 70%), var(--bg); }
.try__head { display: grid; gap: 1.2rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.try__stage { max-width: 82rem; }
:where(.cv) button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
.cv button:disabled { cursor: default; }
.cv {
  position: relative; isolation: isolate; display: flex; flex-direction: column; height: var(--cvh); scroll-margin-top: 1.5rem;
  /* The chat is as tall as the screen allows below the nav. --chrome is the bar plus the dock; the tallest photo that still fits the
     thread is what is left (--pic), minus the set card's caption for the sets (--pic-set), so a picture is always seen whole. */
  --cvh: clamp(36rem, calc(100svh - 6.5rem), 58rem); --chrome: 16.5rem;
  --pic: max(14rem, calc(var(--cvh) - var(--chrome) - 2.5rem)); --pic-set: max(11rem, calc(var(--pic) - 12.6rem));
  border-radius: clamp(1.4rem, 3vw, 2.2rem); overflow: hidden; background: #0f0d0b; color: var(--ink);
  container: cv / inline-size; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.cv__bg {
  position: absolute; inset: 0; z-index: -1; opacity: 0.3; transition: opacity 1.2s var(--ease);
  background: #0f0d0b url(images/silk-wide.webp) center / cover no-repeat;
}
.cv[data-state="welcome"] .cv__bg { opacity: 0.72; }
.cv__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.8rem, 2cqw, 1.2rem) clamp(1rem, 3cqw, 1.7rem); }
.cv__brand { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.125rem; letter-spacing: -0.02em; }
.cv__brand img { width: 1.9rem; height: 1.9rem; mix-blend-mode: screen; }
.cv__tools { display: flex; gap: 0.5rem; }
.cv__tool { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.9rem; border-radius: 999px; background: rgba(243, 236, 224, 0.1); font-size: 0.875rem; transition: background 0.25s, opacity 0.25s; }
.cv__tool[hidden] { display: none; }
.cv__tool:hover:not(:disabled) { background: rgba(243, 236, 224, 0.2); }
.cv__tool:disabled { opacity: 0.5; }
.cv__tool .ico { width: 1.15rem; height: 1.15rem; }
.cv__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: var(--gold); color: var(--dark); font-size: 0.75rem; font-weight: 500; }
.cv__count[hidden] { display: none; }

/* welcome: the empty canvas before the first message */
.cv__welcome { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 0.5rem 1.5rem 2rem; text-align: center; overflow: hidden; }
.cv__welcome h3 { font-size: clamp(2rem, 1rem + 4cqw, 3.5rem); line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; }
.cv__welcome p { max-width: 32rem; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.cv__orb { width: 5.5rem; height: 5.5rem; mix-blend-mode: screen; animation: cv-float 6s ease-in-out infinite; }
.cv[data-state="chat"] .cv__welcome { display: none; }
.cv[data-state="welcome"] .cv__thread { display: none; }
.cv__welcome.is-out { animation: cv-out 0.25s var(--ease) both; }
@keyframes cv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.5rem); } }
@keyframes cv-out { to { opacity: 0; transform: translateY(-0.6rem); } }
@keyframes cv-rise { from { opacity: 0; transform: translateY(0.9rem); } to { opacity: 1; transform: none; } }
/* backwards, not both: a finished animation must not leave a stacking context behind, or the orb's screen blend breaks */
.cv-rise { animation: cv-rise 0.6s var(--ease) backwards; }

/* chips and buttons */
.cv__chips, .cv-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cv__chips--c { justify-content: center; margin-top: 0.4rem; }
.cv-chip { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; background: rgba(243, 236, 224, 0.1); color: var(--ink); font-size: 0.9375rem; font-weight: 400; transition: background 0.25s, color 0.25s, opacity 0.25s; }
.cv-chip:hover:not(:disabled) { background: rgba(243, 236, 224, 0.2); }
.cv-chip[aria-pressed="true"] { background: var(--cream); color: var(--dark); }
.cv-chip:disabled:not([aria-pressed="true"]) { opacity: 0.5; }
.cv-chip--lg { min-height: 3rem; padding: 0 1.35rem; font-size: 1rem; }
.cv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.5rem; border-radius: 999px; background: var(--cream); color: var(--dark); font-size: 0.9375rem; font-weight: 400; transition: background 0.25s, opacity 0.25s, transform 0.25s var(--ease); }
.cv-btn:hover:not(:disabled) { background: #fbf4e4; transform: translateY(-1px); }
.cv-btn:disabled { opacity: 0.45; }
.cv-btn--ghost { background: rgba(243, 236, 224, 0.1); color: var(--ink); }
.cv-btn--ghost:hover:not(:disabled) { background: rgba(243, 236, 224, 0.2); }
.cv-btn.is-done { background: var(--gold); opacity: 1; }

/* thread */
.cv__thread { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem clamp(1rem, 3cqw, 1.75rem) 2rem; scrollbar-width: thin; scrollbar-color: rgba(243, 236, 224, 0.2) transparent; }
.cv__thread:focus-visible { outline-offset: -3px; }
.cv__col { max-width: 62rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1.9rem; }
.cv-m { display: flex; flex-direction: column; gap: 1.1rem; }
/* the last turn leaves above the new one: out of flow where it stands, it tilts back in depth and fades, then is removed */
.cv__col { position: relative; }
.cv-m.is-gone { position: absolute; left: 0; right: 0; pointer-events: none; transform-origin: 50% 0; animation: cv-leave 0.56s cubic-bezier(0.45, 0, 0.55, 1) both; }
@keyframes cv-leave { to { opacity: 0; transform: perspective(1400px) translateY(-1.4rem) translateZ(-180px) rotateX(9deg) scale(0.97); } }
.cv-u { align-self: flex-end; max-width: min(80%, 34rem); padding: 0.8rem 1.35rem; border-radius: 1.5rem 1.5rem 0.4rem 1.5rem; background: rgba(243, 236, 224, 0.13); font-size: 1.0625rem; line-height: 1.45; font-weight: 400; overflow-wrap: anywhere; }
.cv-ai { display: flex; align-items: flex-start; gap: 0.85rem; }
.cv-av { flex: none; width: 2.4rem; height: 2.4rem; mix-blend-mode: screen; }
.cv-aitext { flex: 1; min-width: 0; padding-top: 0.3rem; font-size: 1.1875rem; line-height: 1.55; text-wrap: pretty; }
.cv-aitext .g { opacity: 0; }
.cv-dots { display: inline-flex; align-items: center; gap: 0.4rem; height: 1.8rem; }
.cv-dots i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ink); opacity: 0.35; animation: cv-dot 1s ease-in-out infinite; }
.cv-dots i:nth-child(2) { animation-delay: 0.15s; } .cv-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cv-dot { 0%, 100% { opacity: 0.3; transform: none; } 50% { opacity: 1; transform: translateY(-0.2rem); } }
.cv-blk { display: flex; flex-direction: column; gap: 1.1rem; }
.cv-grp { display: flex; flex-direction: column; gap: 0.6rem; }
.cv-lbl { font-size: 0.875rem; color: var(--ink-2); font-weight: 400; }
.cv-eyebrow { font-size: 0.9375rem; font-weight: 400; color: var(--gold); }
.cv-price { font-size: 1.375rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.cv-was { font-size: 0.9375rem; color: var(--ink-3); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.cv-tag { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.75rem; border-radius: 999px; background: var(--cream); color: var(--dark); font-size: 0.8125rem; font-weight: 500; }

/* the picture is a stage of layers at different depths: the scene far back, a glass disc, the outfit forward, badges nearest.
   Tilting the stage (pointer, or the rail's fan) moves the layers against each other. Nothing on the stage may clip it
   (overflow, filter or opacity on a parent would flatten the depth), so the rounded frame is cut on the scene layer alone. */
.cv-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 1.75rem; perspective: 1100px; perspective-origin: 50% 38%; transition: transform 0.8s var(--spring); }
.cv-flip { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; transition: transform 0.95s var(--spring); }
.cv-face { position: absolute; inset: 0; border-radius: inherit; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; }
.cv-tilt { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.55s var(--ease); }
.cv-tilt > * { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cv-bg { inset: 0; border-radius: inherit; overflow: hidden; background: #1a1612; transform: translateZ(-26px) scale(1.05); box-shadow: 0 1.6rem 2.6rem -1.2rem rgba(0, 0, 0, 0.75); transition: box-shadow 0.6s var(--ease); }
.cv-bg > * { position: absolute; }
.cv-scene { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.62; }
.cv-shade { inset: 0; background: rgba(16, 14, 12, 0.3); }
.cv-disc { left: 12%; right: 12%; bottom: 6%; height: 12%; border-radius: 50%; transform: translateZ(22px); background: radial-gradient(closest-side, rgba(243, 236, 224, 0.3), rgba(243, 236, 224, 0.04) 70%, transparent); }
.cv-fig { left: 6%; top: 3%; width: 88%; height: 86%; object-fit: contain; transform: translateZ(58px); filter: drop-shadow(0 1.1rem 0.9rem rgba(0, 0, 0, 0.42)); }
.cv-glare { inset: 0; border-radius: inherit; transform: translateZ(66px); pointer-events: none; opacity: 0; transition: opacity 0.4s; background: radial-gradient(60% 50% at var(--gx, 30%) var(--gy, 20%), rgba(255, 244, 222, 0.22), transparent 70%); }
.cv-media:hover .cv-glare { opacity: 1; }
.cv-swapA .cv-fig { animation: cv-swapA 0.9s var(--spring); } .cv-swapB .cv-fig { animation: cv-swapB 0.9s var(--spring); }
@keyframes cv-swapA { from { opacity: 0.1; transform: translateZ(58px) rotateY(-84deg) scale(0.9); } to { opacity: 1; transform: translateZ(58px); } }
@keyframes cv-swapB { from { opacity: 0.1; transform: translateZ(58px) rotateY(-84deg) scale(0.9); } to { opacity: 1; transform: translateZ(58px); } }
.cv-regen { inset: 0; border-radius: inherit; transform: translateZ(100px) scale(0.91); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; background: rgba(16, 14, 12, 0.72); font-size: 0.9375rem; font-weight: 400; animation: cv-fade 0.35s var(--ease) backwards; }
.cv-regen[hidden] { display: none; }
/* no screen blend here: inside a 3D stage it has nothing to blend with, so the orb's black square is feathered away with a mask instead */
.cv-regen img { width: 4.5rem; height: 4.5rem; -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); animation: cv-float 1.4s ease-in-out infinite; }
@keyframes cv-fade { from { opacity: 0; } }
.cv-hit { inset: 0; border-radius: inherit; transform: translateZ(70px); cursor: pointer; }
.cv-hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cv-rank { left: 0.75rem; top: 0.45rem; transform: translateZ(98px); font-size: 2.7rem; font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--cream); text-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.7); pointer-events: none; }
.cv-pick { left: 0.8rem; top: 0.8rem; transform: translateZ(98px); padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--gold); color: var(--dark); font-size: 0.8125rem; font-weight: 500; pointer-events: none; }
.cv-ring { right: 0.7rem; top: 0.7rem; width: 3.4rem; height: 3.4rem; border-radius: 50%; transform: translateZ(98px); display: grid; place-items: center; background: rgba(16, 14, 12, 0.66); box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.13); color: var(--ink); font-size: 0.9375rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.cv-ring svg { position: absolute; inset: 0.15rem; width: calc(100% - 0.3rem); height: calc(100% - 0.3rem); transform: rotate(-90deg); }
.cv-ring circle { fill: none; stroke-width: 3.2; }
.cv-ring .trk { stroke: rgba(243, 236, 224, 0.18); }
.cv-ring .bar { stroke: var(--cream); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--off, 100); animation: cv-draw 1.1s var(--ease) var(--rd, 0s) backwards; }
.cv-ring.is-hero .bar { stroke: var(--gold); }
.cv-ring b { position: relative; font-weight: 400; }
.cv-ring b::after { content: "%"; font-size: 0.6em; opacity: 0.7; }
.cv-ring:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@keyframes cv-draw { from { stroke-dashoffset: 100; } }
/* the flip side: the maths behind a rank or a likeness */
.cv-face--back { transform: rotateY(180deg); transform-style: flat; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem 1.1rem 0.9rem; overflow: hidden; background: linear-gradient(160deg, rgba(36, 31, 25, 0.97), rgba(17, 14, 11, 0.99)); box-shadow: inset 0 0 0 1px rgba(243, 236, 224, 0.14); }
.cv-card.is-flipped .cv-flip { transform: rotateY(180deg); }
.cv-back__t { font-size: 1rem; color: var(--gold); letter-spacing: -0.01em; }
.cv-meters { display: flex; flex-direction: column; gap: 0.6rem; }
.cv-meters li { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; font-size: 0.8125rem; color: var(--ink-2); }
.cv-meters b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.cv-meters i { grid-column: 1 / -1; position: relative; height: 0.3rem; border-radius: 99px; background: rgba(243, 236, 224, 0.12); overflow: hidden; }
.cv-meters i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--v)); background: linear-gradient(90deg, var(--gold), var(--cream)); transition: transform 0.9s var(--spring) calc(0.35s + var(--n) * 0.09s); }
.cv-card:not(.is-flipped) .cv-meters i::after { transform: scaleX(0); transition-delay: 0s; }
.cv-back__n { font-size: 0.75rem; line-height: 1.45; color: var(--ink-3); }
.cv-back__x { align-self: flex-start; margin-top: auto; min-height: 2rem; padding: 0 0.85rem; border-radius: 999px; background: rgba(243, 236, 224, 0.12); font-size: 0.8125rem; color: var(--ink); transition: background 0.25s; }
.cv-back__x:hover { background: rgba(243, 236, 224, 0.22); }

/* ranked results: a rail of cards. Wide enough, the whole line-up shows; otherwise it scrolls and the cards swing like a cover-flow. */
.cv-res { position: relative; display: flex; flex-direction: column; gap: 0.7rem; }
.cv-res__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
.cv-res__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.7rem; font-size: 0.9375rem; }
.cv-res__t b { font-weight: 400; color: var(--gold); }
.cv-res__t span { font-size: 0.8125rem; color: var(--ink-3); }
.cv-q { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cv-q span { padding: 0.2rem 0.65rem; border-radius: 999px; background: rgba(243, 236, 224, 0.09); font-size: 0.75rem; color: var(--ink-2); }
.cv-rail { --card-w: calc(var(--pic-set) * 5 / 6); display: flex; gap: 1.5rem; list-style: none; padding: 1.1rem 1.25rem 1rem; margin: -1.1rem -1.25rem -0.4rem; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; perspective: 1500px; }
.cv-rail::-webkit-scrollbar { display: none; }
.cv-rail.is-over { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.2rem, #000 calc(100% - 3.2rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 2.2rem, #000 calc(100% - 3.2rem), transparent 100%); }
.cv-rail.is-over.at-start { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3.2rem), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3.2rem), transparent 100%); }
.cv-rail.is-over.at-end { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.2rem, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 2.2rem, #000 100%); }
.cv-rail > :first-child { margin-left: auto; } .cv-rail > :last-child { margin-right: auto; }
/* three ranked cards share the column when it is wide enough, whatever the height allows */
@container cv (min-width: 40rem) { .cv-res--rank .cv-rail { --card-w: min(calc(var(--pic-set) * 5 / 6), calc((min(62rem, 100cqw - 2 * clamp(1rem, 3cqw, 1.75rem)) - 3rem) / 3)); } }
.cv-card { flex: 0 0 var(--card-w); width: var(--card-w); scroll-snap-align: center; animation: cv-deal 1.05s var(--spring) var(--dl, 0s) backwards; }
.cv-co { display: flex; flex-direction: column; gap: 0.8rem; transform-origin: 50% 55%; }
.cv-card .cv-media { aspect-ratio: 5 / 6; }
.cv-card__head { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cv-card .cv-eyebrow { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-card__name { font-size: 1.4rem; line-height: 1.12; letter-spacing: -0.02em; }
.cv-why { font-size: 0.8125rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-card__foot { display: flex; flex-direction: column; gap: 0.55rem; }
.cv-card__acts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cv-card .cv-btn { min-height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }
.cv-card .cv-price { font-size: 1.2rem; }
.cv-card.is-picked .cv-media { transform: translateZ(40px) scale(1.04); }
.cv-card.is-picked .cv-bg { box-shadow: 0 0 0 2px var(--gold), 0 1.8rem 3rem -1rem rgba(233, 211, 163, 0.38); }
.cv-card[data-hero] .cv-bg { box-shadow: 0 0 0 1px rgba(233, 211, 163, 0.6), 0 2rem 3.4rem -1.4rem rgba(233, 211, 163, 0.34); }
.cv-card.is-ref .cv-bg { box-shadow: 0 0 0 1px rgba(233, 211, 163, 0.6), 0 2rem 3.4rem -1.4rem rgba(233, 211, 163, 0.34); }
/* the cards are dealt out of depth, one after another; in a "more like this" they come out from behind the pick */
@keyframes cv-deal { from { opacity: 0; transform: translate3d(0, 2.2rem, -300px) rotateX(26deg) rotateY(calc(var(--i, 0) * -9deg + 9deg)) scale(0.9); } }
.cv-res--similar .cv-card:not(:first-child) { animation-name: cv-spawn; }
@keyframes cv-spawn { from { opacity: 0; transform: translate3d(calc(var(--i, 1) * -104%), 0, -260px) rotateY(-32deg) scale(0.7); } }
/* the search: a ring of the catalog turns, a beam sweeps it, then it folds away as the ranked cards arrive */
.cv-scan { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; perspective: 900px; pointer-events: none; animation: cv-scan-out 0.6s var(--ease) 1.2s forwards; }
.cv-scan__ring { --r: clamp(6rem, 20cqw, 10.5rem); position: relative; width: 3.8rem; height: 5.1rem; transform-style: preserve-3d; animation: cv-ring 1.5s cubic-bezier(0.4, 0.05, 0.25, 1) both; }
.cv-scan__ring i { position: absolute; inset: 0; border-radius: 0.6rem; background-size: cover; background-position: center; box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.55); -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: rotateY(calc(var(--n) * 30deg)) translateZ(var(--r)); }
.cv-scan__beam { position: absolute; left: 18%; right: 18%; top: 28%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 1.4rem 0.2rem rgba(233, 211, 163, 0.45); animation: cv-beam 1.1s var(--ease) 0.25s both; }
.cv-scan__t { display: grid; font-size: 0.9375rem; color: var(--ink-2); text-align: center; }
.cv-scan__t span { grid-area: 1 / 1; }
.cv-scan__t span:first-child { animation: cv-t1 1.2s linear both; } .cv-scan__t span:last-child { animation: cv-t2 1.2s linear both; }
@keyframes cv-ring { from { transform: rotateY(-240deg) scale(0.5); opacity: 0; } 16% { opacity: 1; } 45% { transform: rotateY(-100deg) scale(1); } to { transform: rotateY(150deg) scale(1.04); } }
@keyframes cv-beam { from { transform: translateY(-3rem); opacity: 0; } 15%, 85% { opacity: 1; } to { transform: translateY(4.4rem); opacity: 0; } }
@keyframes cv-scan-out { to { opacity: 0; transform: scale(0.82) translateY(-0.6rem); } }
@keyframes cv-t1 { 0%, 55% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes cv-t2 { 0%, 55% { opacity: 0; } 70%, 100% { opacity: 1; } }

.cv-pr { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }

/* a product card: photo, itemised rows, totals */
.cv-prod { display: flex; flex-wrap: wrap; gap: 2rem; align-items: stretch; }
.cv-prod__media { flex: 1 1 15rem; max-width: min(26rem, calc(var(--pic) * 4 / 5)); min-width: 0; }
.cv-prod__body { flex: 1.4 1 20rem; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; }
.cv-title { font-size: clamp(1.9rem, 1.2rem + 1.8cqw, 2.6rem); line-height: 1.05; letter-spacing: -0.035em; }
.cv-sub { font-size: 1rem; color: var(--ink-2); margin-bottom: 0.4rem; }
.cv-rows { margin-top: 0.4rem; }
.cv-rows li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; font-size: 1rem; font-weight: 400; border-top: 1px solid rgba(243, 236, 224, 0.1); font-variant-numeric: tabular-nums; }
.cv-rows li.is-add { color: var(--gold); }
.cv-sum { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 0 0.4rem; border-top: 1px solid rgba(243, 236, 224, 0.1); font-size: 0.9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cv-sum div { display: flex; justify-content: space-between; gap: 1rem; }
.cv-sum .tot { font-size: 1.6rem; color: var(--ink); font-weight: 400; }
.cv-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }

/* pants and accessories */
.cv-pin { display: inline-flex; align-items: center; gap: 0.75rem; align-self: flex-start; padding: 0.4rem 1.1rem 0.4rem 0.4rem; border-radius: 1.4rem; background: rgba(243, 236, 224, 0.1); font-size: 0.9375rem; font-weight: 400; }
.cv-pin img { width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: rgba(239, 230, 211, 0.94); object-fit: contain; padding: 0.25rem; }
.cv-pin span { color: var(--ink-2); }
.cv-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr)); gap: 1rem; }
.cv-pc { display: flex; flex-direction: column; gap: 0.75rem; }
.cv-pc__img { position: relative; aspect-ratio: 1 / 1; border-radius: 1.5rem; background: rgba(239, 230, 211, 0.94); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cv-pc__img img { width: 82%; height: 82%; object-fit: contain; }
.cv-pc__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cv-pc__name { font-size: 1.125rem; font-weight: 400; }
.cv-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; padding: 1.1rem 1.6rem; border-radius: 1.75rem; background: rgba(233, 211, 163, 0.14); }
.cv-offer__big { font-size: 2.1rem; letter-spacing: -0.03em; color: var(--gold); }
.cv-offer__t { flex: 1 1 12rem; display: flex; flex-direction: column; gap: 0.15rem; font-size: 1rem; font-weight: 400; }
.cv-offer__t span { font-size: 0.875rem; color: var(--ink-2); font-weight: 300; }
.cv-clock { font-size: 1.4rem; font-weight: 400; font-variant-numeric: tabular-nums; }

/* cart */
.cv-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2rem; padding: 1.4rem; border-radius: 2rem; background: rgba(243, 236, 224, 0.09); }
.cv-tiles { display: flex; gap: 0.6rem; }
.cv-tile { width: 4.5rem; height: 4.5rem; border-radius: 1.25rem; background: rgba(239, 230, 211, 0.94); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cv-tile img { width: 86%; height: 86%; object-fit: contain; }
.cv-cart__t { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 0.25rem; }
.cv-cart__t b { font-size: 1.75rem; letter-spacing: -0.03em; font-weight: 300; }
.cv-cart__t span { font-size: 0.9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cv-cart__go { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.cv-cart__go span { font-size: 0.875rem; color: var(--ink-3); max-width: 18rem; }

/* dock: suggestions and composer */
.cv__dock { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 1.2rem clamp(1rem, 3cqw, 1.75rem) 1.1rem; background: linear-gradient(to top, rgba(15, 13, 11, 0.82) 55%, rgba(15, 13, 11, 0)); }
.cv__sug { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 62rem; }
.cv__sug:empty { display: none; }
.cv__composer { width: 100%; max-width: 47rem; display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.4rem 0.4rem 1.6rem; border-radius: 999px; background: rgba(243, 236, 224, 0.12); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: background 0.25s, box-shadow 0.25s; }
.cv__composer:focus-within { background: rgba(243, 236, 224, 0.17); box-shadow: 0 0 0 1px rgba(233, 211, 163, 0.55); }
.cv__ask { flex: 1; min-width: 0; height: 2.75rem; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 400; outline: none; }
.cv__ask::placeholder { color: rgba(243, 236, 224, 0.62); font-weight: 300; }
.cv__send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--cream); color: var(--dark); transition: opacity 0.25s, transform 0.25s var(--ease); }
.cv__send:hover:not(:disabled) { transform: scale(1.06); }
.cv__send:disabled { opacity: 0.35; }
.cv__send .ico { width: 1.2rem; height: 1.2rem; }
.cv__fine { font-size: 0.75rem; color: rgba(243, 236, 224, 0.58); text-align: center; }

@container cv (max-width: 40rem) {
  .cv__bg { background-image: url(images/silk-tall.webp); }
  .cv__tool span { display: none; }
  .cv-aitext { font-size: 1.0625rem; }
  .cv-prod { gap: 1.25rem; }
  .cv-prod__media { max-width: none; flex-basis: 100%; }
  .cv-prod__media .cv-media { aspect-ratio: 4 / 4.2; max-width: calc(var(--pic) * 4 / 4.2); margin-inline: auto; }
  .cv-u { max-width: 90%; }
  .cv__composer { padding-left: 1.2rem; }
  .cv__sug { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100%; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cv__sug::-webkit-scrollbar { display: none; }
  .cv__sug .cv-chip { flex: none; }
}
/* short screens: a slimmer bar and dock hand the height to the conversation */
@media (max-height: 50rem) {
  .cv { --chrome: 13.9rem; --pic-set: max(11rem, calc(var(--pic) - 7.2rem)); }
  .cv-res__head, .cv-card .cv-eyebrow, .cv-why, .cv-card .cv-was, .cv-card .cv-tag { display: none; }
  .cv-card .cv-btn { padding: 0 0.8rem; font-size: 0.8125rem; min-height: 2.3rem; }
  .cv-card__name { font-size: 1.2rem; }
  .cv-co { gap: 0.55rem; }
  .cv__bar { padding-block: 0.6rem; }
  .cv__dock { padding-top: 0.8rem; padding-bottom: 0.7rem; gap: 0.5rem; }
}
@media (max-height: 34rem) and (orientation: landscape) { .cv { --cvh: 32rem; } }