/*
 * استایلا landing v2 — sticker-collage app-install page.
 *
 * Tokens below are the STDS values from the design handoff, copied rather than
 * imported. Nothing keeps them in step with mobile/src/theme/tokens.ts or with
 * landing/public/styles.css automatically; if a brand colour moves, it moves in
 * all three by hand.
 *
 * Two conventions worth knowing before editing:
 *
 * 1. Layout uses logical properties (padding-inline, inset-inline-start)
 *    because the page is RTL. The hero collage and the swipe card are the
 *    deliberate exceptions — they use physical top/right/left, because those
 *    are compositions at fixed pixel coordinates, not text flow, and a
 *    collage that mirrors itself is a different collage.
 *
 * 2. Red is restricted, by client decision, to exactly two places: the «تو»
 *    highlight in the H1 and the dot in the wordmark. The reject stamp and the
 *    hover state on the ✕ button are the agreed extensions of that. Do not add
 *    a third.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --ink: #121926;
  --ink-soft: #12192614;
  --red: #f53d46;
  --gold: #c9a24b;
  --gold-dark: #8f6b23;
  --navy: #17245f;
  --navy-light: #2b3a67;
  --terra: #c07a54;
  --terra-dark: #8a4a2e;
  --char: #4b5565;
  --char-dark: #202939;

  --cream: #f0eee9;
  --sand: #e7e3da;
  --peek: #dcd8cf;
  --line: #cdd5df;
  --line-soft: #e3e8ef;

  --t1: #121926;
  --t2: #364152;
  --t3: #4b5565;
  --t4: #697586;
  --t5: #9aa4b2;
  --on-dark: #cdd5df;

  --ok: #13b476;
  --ok-dark: #0c8f5d;
  --red-dark: #d92d20;

  --r-pill: 9999px;
  --r-xl: 28px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 14px;

  --sh-btn: 0 6px 0 #00000047;
  --sh-sticker: 3px 3px 0 var(--ink);
  --sh-card: 0 8px 12px 6px rgba(54, 65, 82, .15);

  --wrap: 1240px;
  --pad: 24px;
}

@font-face {
  font-family: 'IRANSansX';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/IRANSansXVF.woff2') format('woff2-variations');
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* `clip`, not `hidden`: the marquee and the collage both bleed past the
     viewport on purpose, and `hidden` on the root turns the whole document
     into a scroll container, which kills the sticky nav. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--t1);
  font-family: 'IRANSansX', Vazirmatn, system-ui, sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

/* The UA sheet's `[hidden] { display: none }` is a type-selector-strength rule,
   so any class here that sets `display` silently beats it. main.js toggles
   .hidden on the demo's play/done panels and on the swipe card's photo vs
   glyph, and without this the hidden one keeps rendering — the placeholder
   garment icon sits on top of the model photo. */
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: var(--ink); text-decoration: none; }

:where(a, button, input):focus-visible {
  outline: 2.5px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 16px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  font-size: 14px;
  font-weight: 700;
}
.skip:focus { inset-block-start: 0; }

.sprite { position: absolute; width: 0; height: 0; }
.sprite .ln { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ic {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}
.ic .ln, .ln { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic.gold { color: var(--gold); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-16px) rotate(var(--r, 0deg)); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes rise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }

/* Section entrances are scroll-driven, not IntersectionObserver-driven, and
   that is deliberate — the same reasoning as landing/. An observer only fires
   when an element *crosses* a threshold, so a deep link to #faq or a restored
   scroll position leaves everything it skipped at opacity 0 forever. A view()
   timeline is a function of scroll position, so it lands on the right state
   from any entry point; where it is unsupported the content is simply
   visible, which is why the rule is inside @supports. */
@supports (animation-timeline: view()) {
  .rise {
    animation: rise both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: #f0eee9f2;
  backdrop-filter: blur(10px);
  border-block-end: 1px solid rgba(18, 25, 38, .08);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
}

.brand { display: flex; align-items: center; gap: 8px; }
.brand span { font-size: 24px; font-weight: 900; }
.brand .dot {
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--red);
  margin-block-start: 7px;
}
.brand-sm span { font-size: 17px; color: #fff; }
.brand-sm .dot { width: 5px; height: 5px; margin-block-start: 5px; }

.nav-links { display: flex; gap: 28px; font-size: 14px; font-weight: 600; }
.nav-links a { color: var(--t2); }
.nav-links a:hover { color: var(--ink); }

.nav-cta {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.nav-cta:hover { color: #fff; opacity: .9; }

/* ── Shared bits ─────────────────────────────────────────────────────────── */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: #fff;
  /* Explicit, not inherited. Two of these sit inside the ink band, where the
     inherited colour is white — and white on the sticker's white fill is an
     empty pill. */
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}
.sticker .ic { font-size: 16px; }
.sticker-tilt { transform: rotate(2deg); }
.sticker-hard { transform: rotate(-2deg); box-shadow: var(--sh-sticker); font-weight: 800; padding: 8px 18px; }
.sticker-gold { background: var(--gold); border-color: var(--gold); transform: rotate(-2deg); font-weight: 800; padding: 8px 18px; }
.sticker-white { border-color: #fff; transform: rotate(2deg); font-weight: 800; padding: 8px 18px; }
.sticker-ink { background: var(--ink); border-color: var(--ink); color: #fff; transform: rotate(2deg); font-weight: 800; padding: 8px 18px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: #ffffffe6;
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
}
.chip-ink { background: #121926e6; color: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-md);
  padding: 17px 30px;
  font-size: 18px;
  font-weight: 800;
  box-shadow: var(--sh-btn);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.btn .ic { font-size: 20px; }
.btn:hover { color: #fff; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #00000047; }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 6px 0 #00000073; padding: 18px 34px; font-size: 19px; }
.btn-white:hover { color: var(--ink); }
.btn-block { display: flex; justify-content: center; width: 100%; padding: 15px 0; font-size: 15px; border-radius: var(--r-sm); box-shadow: none; }

.ghost {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t4);
}
.ghost:hover { color: var(--ink); }

/* ── SMS install-link field (mocked) ─────────────────────────────────────── */
.sms { margin: 0; }
.sms-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px 6px 6px 18px;
  transition: border-color .15s ease-out;
}
.sms-pill:focus-within { border-color: var(--ink); }
.sms-pill.is-bad { border-color: var(--red); }
.sms-pill-dark { background: #ffffff14; border-color: #ffffff40; }
.sms-pill-dark:focus-within { border-color: #fff; }

.sms-input {
  flex: 1;
  min-width: 0;
  width: 132px;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
}
.sms-input::placeholder { color: var(--t5); }
.sms-pill-dark .sms-input { color: #fff; }

.sms-go {
  flex: none;
  border: 0;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  border-radius: 11px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 700;
}
.sms-go:hover { opacity: .9; }
.sms-go-white { background: #fff; color: var(--ink); }

/* Honeypot. Clipped to nothing rather than display:none — a bot that parses
   CSS skips hidden fields, and one that does not still fills this and gets a
   success reply that stores nothing.
   Clipped, and specifically NOT nudged off-screen with a big negative inset:
   this page is RTL, so inset-inline-start is `right`, and a field sitting
   9999px to the physical right extends the document that far sideways. The
   RTL scroll origin then starts at the far edge of that empty strip and the
   page renders as a blank cream field. This pattern has no layout footprint
   at all, so the direction question never arises. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}

.sms-note, .store-note {
  min-height: 0;
  margin-block-start: 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--t3);
}
.sms-note:empty, .store-note:empty { margin-block-start: 0; }
.sms-note.is-ok { color: var(--ok-dark); }
.sms-note.is-bad { color: var(--red-dark); }
.sms-note-dark, .store-note-dark { color: var(--on-dark); }
.sms-note-dark.is-ok { color: #4fd6a0; }
.sms-note-dark.is-bad { color: #ff8a8f; }

.stores { display: flex; gap: 8px; margin-block-start: 16px; flex-wrap: wrap; }
.store {
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
}
.store:hover { border-color: var(--ink); color: var(--ink); }
.stores-dark { justify-content: center; margin-block-start: 18px; }
.stores-dark .store { background: none; border-color: #ffffff40; color: var(--on-dark); }
.stores-dark .store:hover { border-color: #fff; color: #fff; }
.store-note-dark { text-align: center; }

/* ── 1. Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background-image: radial-gradient(rgba(18, 25, 38, .07) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.hero-in {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 60px 80px;
  min-height: 640px;
}
.hero-copy { width: 560px; flex: none; }

h1 {
  font-size: 76px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin-block-start: 18px;
}
.mark {
  display: inline-block;
  background: var(--red);
  color: #fff;
  border-radius: var(--r-md);
  padding-inline: 18px;
  transform: rotate(-2deg);
  margin-inline: 10px;
}

.lede {
  font-size: 18px;
  font-weight: 600;
  color: var(--t3);
  line-height: 2;
  margin-block-start: 20px;
  max-width: 500px;
}

.cta-row { display: flex; gap: 12px; margin-block-start: 30px; align-items: flex-start; flex-wrap: wrap; }
.cta-row .btn { margin-block-start: 0; }
.cta-center { justify-content: center; align-items: flex-start; }

/* Collage. Fixed 670×620 composition scaled as one unit rather than reflowed —
   the tilts and overlaps ARE the design, and a flow layout that keeps the
   cards apart is a different picture. Physical top/right below for the same
   reason. */
.hero-visual { flex: 1; min-width: 0; display: flex; justify-content: center; }
.collage {
  position: relative;
  flex: none;
  width: 670px;
  height: 620px;
  transform: scale(var(--s, 1));
  transform-origin: center center;
  /* transform does not shrink the layout box, so a scaled-down collage would
     otherwise reserve its full 670×620 and leave a band of dead cream above
     and below it on every phone. These pull the box back to the size the
     collage actually occupies on screen. */
  margin-block: calc((620px * var(--s, 1) - 620px) / 2);
  margin-inline: calc((670px * var(--s, 1) - 670px) / 2);
}

.cc {
  position: absolute;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 12px 6px rgba(54, 65, 82, .18);
  animation: floaty var(--dur, 5s) ease-in-out var(--d, 0s) infinite;
  display: flex;
  align-items: flex-end;
  padding: 18px;
}
.cc-foot b { display: block; color: #fff; font-size: 22px; font-weight: 800; margin-block-start: 10px; }

.cc-navy { top: 80px; right: 50px; width: 260px; height: 370px; background: linear-gradient(160deg, var(--navy-light), var(--navy)); }
.cc-gold { top: 290px; right: 450px; width: 220px; height: 300px; background: linear-gradient(160deg, var(--gold), var(--gold-dark)); --dur: 5.5s; }
.cc-gold .cc-foot b { font-size: 20px; }

.cc-photo {
  top: 26px; right: 230px; width: 290px; height: 420px;
  overflow: hidden; padding: 0;
  --dur: 6s;
  box-shadow: 0 8px 12px 6px rgba(54, 65, 82, .2);
}
.cc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cc-photo-chip { position: absolute; bottom: 14px; right: 14px; font-size: 13px; padding: 6px 14px; }

.cc-tryon { position: absolute; top: 4px; right: 160px; z-index: 2; transform: rotate(-6deg); font-size: 14px; font-weight: 800; padding: 9px 18px; box-shadow: var(--sh-sticker); }

/* The handoff puts the heart badge at bottom:110/right:60 and the spinning
   ring at top:380/right:10 — which makes them very nearly concentric, so the
   heart lands on the ring's own centre arrow and the ring's ink text runs
   across the navy card, where it is unreadable. Both are pulled clear here:
   the ring drops below the navy card's rotated bottom edge, the heart moves
   left to sit beside it. Every element the handoff lists is still present and
   still in the bottom-right cluster; only the two collisions are gone.
   Flagged for the designer — see landing2/README.md. */
.cc-heart {
  position: absolute;
  bottom: 78px; right: 178px;
  width: 64px; height: 64px;
  border-radius: var(--r-pill);
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 30px;
  transform: rotate(8deg);
  box-shadow: 0 5px 0 #00000047;
}

.cc-spin { position: absolute; top: 470px; right: 8px; width: 140px; height: 140px; }
.cc-spin-svg { width: 140px; height: 140px; animation: spin 14s linear infinite; }
/* direction:ltr is load-bearing. Chromium lays out no text at all along a
   <textPath> when the inherited direction is rtl — the run collapses to a
   ~20px blob at the path origin. The glyphs themselves still shape and order
   right-to-left, because this only sets the paragraph direction and the whole
   string is one Arabic-script bidi run; it just tells the path which end to
   start from. */
.cc-spin-svg text {
  direction: ltr;
  font-size: 15.5px;
  font-weight: 800;
  fill: var(--ink);
  font-family: 'IRANSansX', sans-serif;
}
.cc-spin-arrow { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; color: var(--ink); }

/* ── 2. Marquee ──────────────────────────────────────────────────────────── */
.marquee {
  background: var(--ink);
  padding-block: 15px;
  overflow: hidden;
  transform: rotate(-1.2deg) scale(1.02);
}
/* direction:ltr on the track, and only on the track. The strip is two copies
   of the same list translated 0 → −50%, which loops seamlessly only if the
   second copy sits in the direction of travel. Under rtl the track is anchored
   to the right edge and its copies run leftward, so translating left drags
   everything off and leaves a bare ink band behind it. Anchoring the track
   left restores the prototype's motion; each phrase inside is still its own
   Arabic-script run and shapes right-to-left as written. */
.marquee-track { direction: ltr; display: flex; gap: 28px; width: max-content; animation: mq 20s linear infinite; }
.marquee-set { display: flex; gap: 28px; font-size: 18px; font-weight: 800; color: #fff; white-space: nowrap; }

/* ── Section shells ──────────────────────────────────────────────────────── */
.sec { position: relative; }
.split-in {
  display: flex;
  align-items: center;
  gap: 70px;
  padding-block: 110px 90px;
}
.band-ink { background: var(--ink); color: #fff; }
.band-ink .split-in { padding-block: 100px; }
.band-sand { background: var(--sand); }
.band-sand .split-in { padding-block: 100px; }

.col { flex: 1; min-width: 0; }
.col-fixed { flex: none; }

h2 { font-size: 46px; font-weight: 900; line-height: 1.5; margin-block-start: 16px; }
.body { font-size: 16.5px; font-weight: 600; color: var(--t3); line-height: 2.1; margin-block-start: 16px; max-width: 460px; }
.body-dim { color: var(--on-dark); }

.bullets { display: flex; flex-direction: column; gap: 12px; margin-block-start: 24px; font-size: 14.5px; font-weight: 600; color: var(--t2); }
.bullets li { display: flex; align-items: center; gap: 10px; }
.bullets .ic { font-size: 20px; }

/* ── 3. Swipe demo ───────────────────────────────────────────────────────── */
.demo { width: 420px; }

.meter { display: flex; align-items: center; gap: 10px; padding: 0 6px 12px; }
.meter-label { font-size: 12px; font-weight: 700; color: var(--t2); flex: none; }
.meter-track { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--peek); position: relative; overflow: hidden; }
.meter-fill {
  position: absolute;
  inset-block: 0;
  right: 0;                     /* physical: the meter fills right-to-left */
  width: 0%;
  border-radius: var(--r-pill);
  background: var(--ink);
  transition: width .3s ease-out;
}
.meter-num { font-size: 12px; font-weight: 800; flex: none; }

.deck { position: relative; height: 470px; touch-action: pan-y; }
.deck-peek {
  position: absolute;
  top: 12px; right: -10px; left: -10px;
  height: 446px;
  border-radius: var(--r-lg);
  background: var(--sand);
  border: 1px solid var(--peek);
  transition: transform .32s ease-out;
}

.card {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.card.is-dragging { cursor: grabbing; }
.card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 72px; color: #ffffff59; }
.card-scrim { position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(180deg, transparent, rgba(9, 12, 21, .6)); }
.card-count { position: absolute; top: 14px; right: 14px; font-size: 11.5px; font-weight: 700; padding: 5px 13px; }
.card-foot { position: absolute; bottom: 18px; inset-inline: 18px; }
.card-foot b { display: block; font-size: 24px; font-weight: 800; color: #fff; }
.card-foot span { display: block; font-size: 12px; color: #ffffffbf; margin-block-start: 4px; }

.stamp {
  position: absolute;
  top: 22px; left: 18px;        /* physical: the stamp sits opposite the counter */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: rotate(-10deg);
  background: #ffffffe6;
  border-radius: 10px;
  padding: 5px 14px;
  font-size: 18px;
  font-weight: 800;
  opacity: 0;
  transition: opacity .12s ease-out;
  pointer-events: none;
}
.stamp-like { border: 3px solid var(--ok); color: var(--ok-dark); }
.stamp-nope { border: 3px solid var(--red); color: var(--red-dark); }

.deck-btns { display: flex; align-items: center; justify-content: center; gap: 18px; padding-block-start: 20px; }
.round {
  width: 62px; height: 62px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  cursor: pointer;
  border: 0;
  transition: transform .12s ease-out, border-color .12s ease-out, color .12s ease-out;
}
.round:active { transform: scale(.94); }
.round-ghost { border: 1.5px solid var(--line); background: #fff; color: var(--t4); box-shadow: 0 1px 3px 1px rgba(54, 65, 82, .1); }
.round-ghost:hover { border-color: var(--red); color: var(--red); }
.round-ink { background: var(--ink); color: #fff; box-shadow: 0 2px 6px 2px rgba(54, 65, 82, .1); }

.demo-done {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 34px 30px;
  box-shadow: 0 8px 12px 6px rgba(54, 65, 82, .12);
  text-align: center;
}
.done-badge {
  display: inline-flex;
  width: 60px; height: 60px;
  border-radius: var(--r-pill);
  background: var(--ink-soft);
  align-items: center; justify-content: center;
  font-size: 30px;
}
.done-title { font-size: 24px; font-weight: 900; margin-block-start: 14px; }
.done-chips { display: flex; gap: 8px; justify-content: center; margin-block-start: 14px; flex-wrap: wrap; }
.done-chips span { background: var(--ink-soft); border-radius: var(--r-pill); padding: 6px 15px; font-size: 13px; font-weight: 700; }
.done-sub { font-size: 14px; font-weight: 600; color: var(--t4); line-height: 2; margin-block-start: 14px; }
.demo-done .btn { margin-block-start: 18px; }

/* ── 4. Stylist chat ─────────────────────────────────────────────────────── */
.chat {
  width: 440px;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 22px;
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  transform: rotate(2deg);
}
.chat-head { display: flex; align-items: center; gap: 10px; padding-block-end: 14px; border-block-end: 1px solid #f2f5f8; }
.chat-avatar { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--ink); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; flex: none; }
.chat-name { font-size: 14px; font-weight: 800; }
.chat-state { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ok-dark); font-weight: 600; }
.live { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--ok); animation: pulse 1.6s ease-in-out infinite; }

.chat-body { display: flex; flex-direction: column; gap: 12px; padding-block-start: 16px; }
.bub { font-size: 13px; font-weight: 600; line-height: 1.9; padding: 12px 14px; }
.bub-bot { background: #f8fafc; border: 1px solid #f2f5f8; border-radius: 14px 4px 14px 14px; color: var(--t2); max-width: 85%; }
.bub-me { background: var(--ink); color: #fff; border-radius: 4px 14px 14px 14px; max-width: 80%; align-self: flex-end; }

.looks { display: flex; gap: 8px; }
.look { flex: 1; height: 86px; border-radius: 12px; display: flex; align-items: flex-end; padding: 8px; }
.look b { background: #ffffffe6; border-radius: 6px; padding: 2px 8px; font-size: 9.5px; font-weight: 800; }
.look-navy { background: linear-gradient(160deg, var(--navy-light), var(--navy)); }
.look-char { background: linear-gradient(160deg, var(--char), var(--char-dark)); }
.look-gold { background: linear-gradient(160deg, var(--gold), var(--gold-dark)); }

.typing { display: flex; gap: 5px; align-items: center; padding: 4px 2px; }
.typing i { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--line); animation: pulse 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }

.prompts { display: flex; gap: 10px; margin-block-start: 24px; flex-wrap: wrap; }
.prompt { border: 1px solid #ffffff40; border-radius: var(--r-pill); padding: 9px 18px; font-size: 13px; font-weight: 600; }
.prompt-on { background: #ffffff1f; border-color: #fff; font-weight: 700; }

/* ── 5. Try-on ───────────────────────────────────────────────────────────── */
.stats { display: flex; gap: 14px; margin-block-start: 26px; max-width: 460px; }
.stat { background: #fff; border-radius: var(--r-md); padding: 16px 20px; flex: 1; }
.stat b { display: block; font-size: 28px; font-weight: 900; }
.stat span { display: block; font-size: 12px; font-weight: 600; color: var(--t4); margin-block-start: 4px; line-height: 1.7; }

.tryon { width: 440px; }
.tryon-card { position: relative; height: 520px; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-card); }
.tryon-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tryon-scrim { position: absolute; inset: auto 0 0 0; height: 140px; background: linear-gradient(180deg, transparent, rgba(9, 12, 21, .55)); }
.tryon-badge { position: absolute; top: 14px; right: 14px; background: #121926cc; font-size: 12px; font-weight: 700; padding: 6px 14px; }
.tryon-foot { position: absolute; bottom: 16px; right: 16px; border-radius: 10px; padding: 7px 14px; font-size: 11.5px; font-weight: 700; }

.thumbs { display: flex; gap: 10px; padding-block-start: 14px; }
.thumb { flex: 1; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; text-align: center; }
.thumb .sw { display: block; height: 74px; border-radius: var(--r-sm); border: 2.5px solid transparent; transition: border-color .15s ease-out; }
.thumb span:last-child { display: block; font-size: 11px; font-weight: 700; color: var(--t4); margin-block-start: 7px; transition: color .15s ease-out; }
.thumb.is-on .sw { border-color: var(--ink); }
.thumb.is-on span:last-child { color: var(--ink); }
.thumb:hover .sw { border-color: var(--line); }
.thumb.is-on:hover .sw { border-color: var(--ink); }

.sw-min { background: linear-gradient(160deg, #e9e4dc, #cfc7b8); }
.sw-navy { background: linear-gradient(160deg, var(--navy-light), var(--navy)); }
.sw-terra { background: linear-gradient(160deg, var(--terra), var(--terra-dark)); }
.sw-gold { background: linear-gradient(160deg, var(--gold), var(--gold-dark)); }

/* ── 6. Closet ───────────────────────────────────────────────────────────── */
.grid { width: 460px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile {
  aspect-ratio: 145 / 130;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #ffffff8c;
  font-size: 30px;
  overflow: hidden;
}
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tile b { font-size: 12px; font-weight: 800; }
.tile-navy { background: linear-gradient(160deg, var(--navy-light), var(--navy)); transform: rotate(-2deg); }
.tile-photo { transform: rotate(1.5deg); }
.tile-terra { background: linear-gradient(160deg, var(--terra), var(--terra-dark)); transform: rotate(-1deg); }
.tile-gold { background: linear-gradient(160deg, var(--gold), var(--gold-dark)); transform: rotate(2deg); }
.tile-ink { background: var(--ink); color: #fff; transform: rotate(-1.5deg); font-size: 26px; }
.tile-char { background: linear-gradient(160deg, var(--char), var(--char-dark)); transform: rotate(1deg); }

/* ── 7. FAQ ──────────────────────────────────────────────────────────────── */
.faq-in { max-width: 840px; margin-inline: auto; padding: 110px var(--pad) 90px; }
.faq-title { font-size: 44px; font-weight: 900; text-align: center; margin: 0; }
.faq-list { display: flex; flex-direction: column; gap: 12px; margin-block-start: 36px; }

.fq { background: #fff; border-radius: 18px; border: 1.5px solid var(--line-soft); overflow: hidden; transition: border-color .25s ease-out; }
.fq.is-open { border-color: var(--ink); }
.fq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
  padding: 20px 24px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink);
}
.fq-ic { font-size: 22px; color: var(--t4); flex: none; }
/* max-height, not height:auto — the collapse has to be animatable. The value
   is set from scrollHeight in main.js rather than a fixed 220px so a long
   answer on a narrow phone cannot be clipped mid-sentence. */
.fq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease-out; }
.fq-a p { padding: 0 24px 20px; font-size: 14px; font-weight: 600; color: var(--t3); line-height: 2.1; }

/* ── 8. Closing CTA + footer ─────────────────────────────────────────────── */
.close { background: var(--ink); color: #fff; overflow: hidden; }
.close-in { padding-block: 100px 90px; text-align: center; }
.close-h { font-size: 70px; font-weight: 900; line-height: 1.4; }
.close-sub { font-size: 17px; font-weight: 600; color: var(--on-dark); line-height: 2; margin-block-start: 18px; }

.foot { border-block-start: 1px solid #ffffff1f; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; font-size: 12px; font-weight: 600; color: var(--t5); }
.foot-links { display: flex; gap: 22px; }
.foot-links a { color: var(--t5); }
.foot-links a:hover { color: #fff; }

/* ── Responsive ──────────────────────────────────────────────────────────── *
 * The handoff is a fixed 1240 desktop grid and says so; most of this page's
 * traffic will be a phone in Tehran, so the stacked pass below is the layout
 * that actually ships, not a fallback. The collage scales as one unit (see
 * .collage) instead of reflowing — steps are chosen so the 670px stage clears
 * the viewport minus its 24px gutters at each width.
 * -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .hero-copy { width: 480px; }
  .collage { --s: .9; }
  h1 { font-size: 66px; }
}

@media (max-width: 1040px) {
  .hero-copy { width: 420px; }
  .collage { --s: .78; }
  h1 { font-size: 58px; }
  .split-in { gap: 48px; }
  .nav-links { gap: 20px; font-size: 13px; }
}

/* Stacked from here down. */
@media (max-width: 960px) {
  .nav-links { display: none; }

  .hero-in,
  .split-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 44px;
  }
  .hero-in { padding-block: 44px 64px; min-height: 0; }
  .split-in { padding-block: 80px; }
  .band-ink .split-in,
  .band-sand .split-in { padding-block: 72px; }

  /* Chat mock and closet grid lead in the prototype; on a phone the words
     have to come first or the section opens on decoration. */
  .band-ink .split-in,
  .band-sand .split-in { flex-direction: column-reverse; }

  .hero-copy,
  .col,
  .col-fixed { width: 100%; max-width: 520px; margin-inline: auto; }
  .lede, .body, .stats { max-width: none; }

  .hero-visual { width: 100%; }
  .collage { --s: .95; }

  h1 { font-size: 52px; }
  h2 { font-size: 38px; }
  .faq-title { font-size: 36px; }
  .close-h { font-size: 46px; }
  .close-in { padding-block: 72px 64px; }
  .faq-in { padding-block: 80px 64px; }

  .chat { width: 100%; max-width: 440px; transform: rotate(1.5deg); }
  .grid, .demo, .tryon { width: 100%; }

  .foot-in { flex-direction: column; gap: 14px; text-align: center; }
}

@media (max-width: 719px) { .collage { --s: .87; } }
@media (max-width: 659px) { .collage { --s: .8; } }

@media (max-width: 579px) {
  .collage { --s: .7; }
  h1 { font-size: 42px; }
  .mark { padding-inline: 13px; margin-inline: 6px; }
  h2 { font-size: 32px; }
  .faq-title { font-size: 30px; }
  .close-h { font-size: 36px; }
  .lede { font-size: 16px; }
  .body { font-size: 15.5px; }

  /* Full-width CTA and SMS pill: two half-width controls side by side leave
     the phone field too narrow to read the number back. */
  .cta-row { gap: 14px; }
  .cta-row > .btn,
  .cta-row > .sms { width: 100%; }
  .cta-row > .btn { justify-content: center; }
  .sms-input { width: auto; }

  .stats { flex-direction: column; }
  .deck { height: 420px; }
  .deck-peek { height: 396px; }
  .tryon-card { height: 440px; }
  .thumb .sw { height: 58px; }
  .fq-q { padding: 18px; font-size: 15.5px; }
  .fq-a p { padding: 0 18px 18px; }
  .faq-in { padding-inline: 18px; }
  .wrap { padding-inline: 18px; }
}

@media (max-width: 499px) { .collage { --s: .62; } }
@media (max-width: 419px) {
  .collage { --s: .52; }
  h1 { font-size: 36px; }
  .close-h { font-size: 31px; }
  .btn { padding: 15px 24px; font-size: 16px; }
  .btn-white { padding: 16px 26px; font-size: 17px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── *
 * Everything decorative stops. The card fly-out and the FAQ collapse are the
 * two exceptions worth keeping short rather than removing: both communicate
 * that an input landed, and with no transition at all the card teleports and
 * the answer appears from nowhere.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .marquee-track,
  .cc,
  .cc-spin-svg,
  .live,
  .typing i { animation: none !important; }

  .marquee { transform: rotate(-1.2deg); }
  .rise { animation: none !important; opacity: 1 !important; transform: none !important; }

  .btn, .round, .thumb .sw, .deck-peek { transition: none; }
}