/* ==========================================================================
   BESTUFF — Motion + commerce layer
   --------------------------------------------------------------------------
   MOBILE FIRST, same as styles.css, whose tokens it uses.

   Motion primitives first, then checkout, payment, tracking, quiz, combo,
   spin-to-win, prose and 404.

   Every animation moves `transform` or `opacity` only — those composite on
   the GPU and never trigger layout.

   The pointer-driven luxury effects (cursor glow, card tilt, magnetism, hero
   spotlight) live in styles.css and motion.js, and are gated behind
   `(hover: hover) and (pointer: fine)`. They are switched off on touch — not
   as a performance excuse but because tilting a card under a thumb moves the
   add button between press and release, and the tap misses.
   ========================================================================== */

/* ==========================================================================
   1. MOTION
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 750ms var(--ease-out), transform 750ms var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

[data-reveal-stagger] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.is-revealed [data-reveal-stagger] { opacity: 1; transform: none; }

/* Each word sits in an overflow-hidden box and rises from behind its own
   bottom edge — a mask, not a fade. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Descenders (g, y, p) would be clipped by a tight mask, so the box is
     grown and pulled back by the same amount. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.split-word__inner {
  display: inline-block;
  transform: translate3d(0, 115%, 0);
  transition: transform 900ms var(--ease-out);
}
[data-split-text].is-revealed .split-word__inner { transform: none; }

/* The disc that arcs from a product into the bag. */
.fly-puck {
  position: fixed;
  z-index: var(--z-burst);
  pointer-events: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.fly-puck img { width: 76%; height: 76%; object-fit: contain; mix-blend-mode: multiply; }

.mist-burst { position: fixed; inset: 0; z-index: var(--z-burst); pointer-events: none; }
.mist-burst span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 199, 144, 0.9), rgba(224, 199, 144, 0));
}

/* Reduced motion: resolved instantly to the final state, never left
   invisible or half-transformed. */
.reduced-motion [data-reveal],
.reduced-motion [data-reveal-stagger] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.reduced-motion .split-word__inner { transform: none !important; }

/* ==========================================================================
   2. TOASTS
   ========================================================================== */
.toast-container {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h) + 14px);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  width: 100%;
  max-width: 420px;
  padding: 13px 20px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ivory);
  background: var(--charcoal);
  border-radius: 100px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.95);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--spring);
}
.toast.is-in { opacity: 1; transform: none; }
.toast--error { background: var(--danger); }

@media (min-width: 900px) {
  .toast-container { left: 50%; right: auto; bottom: 26px; transform: translateX(-50%); }
  .toast { width: max-content; }
}

/* ==========================================================================
   3. SIGNATURE COMBO
   ========================================================================== */
.combo-section { padding-block: 28px; }
.combo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.combo__bottles { display: flex; justify-content: center; align-items: flex-end; gap: 4px; }
.combo__bottle {
  flex: 1;
  max-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 10px;
  /* The outer two sit back so the trio reads as a set on a shelf. */
  transform: translateY(var(--offset, 0)) scale(var(--scale, 1));
  transition: transform var(--med) var(--ease);
}
.combo__bottle:nth-child(1), .combo__bottle:nth-child(3) { --offset: 10px; --scale: 0.92; }
.combo__bottle img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; mix-blend-mode: multiply; }
.combo__bottle span { font-size: 0.6rem; font-weight: 500; color: var(--muted); text-align: center; }

.combo__title { font-family: var(--display); font-size: clamp(1.6rem, 7vw, 2.2rem); font-weight: 400; margin-bottom: 6px; }
.combo__desc { color: var(--muted); margin-bottom: 14px; line-height: 1.7; font-size: 0.92rem; }
.combo__list { margin-bottom: 14px; }
.combo__list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 0.86rem; color: var(--charcoal-2); }
.combo__list b { color: var(--faint); font-weight: 400; }
.combo__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.combo__was { font-size: 1rem; color: var(--faint); text-decoration: line-through; }
.combo__now { font-family: var(--display); font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 500; line-height: 1; color: var(--gold-deep); }
.combo__save { padding: 5px 12px; border-radius: 100px; background: var(--ivory-2); color: var(--ok); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.combo__note { font-size: 0.72rem; color: var(--faint); margin-top: 12px; line-height: 1.6; }
.combo__oos { color: var(--danger); font-size: 0.86rem; }

@media (min-width: 900px) {
  .combo-section { padding-block: 60px; }
  .combo { flex-direction: row; align-items: center; gap: 50px; padding: 40px; }
  .combo__bottles, .combo__detail { flex: 1; }
  .combo__bottle { max-width: 150px; }
}

/* ==========================================================================
   4. SPIN TO WIN
   ========================================================================== */
/* Opened deliberately from a button — an auto-modal could land on top of
   whatever the visitor had just tapped. */
.spin-fab {
  position: fixed;
  left: 12px;
  bottom: calc(var(--tabbar-h) + 14px);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 100px;
  background: var(--charcoal);
  color: var(--ivory);
  font-size: 0.68rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--spring);
}
.spin-fab.is-in { opacity: 1; transform: none; }
.spin-fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.spin-fab__pulse { position: absolute; inset: -3px; border-radius: 100px; border: 1px solid var(--charcoal); opacity: 0; animation: fab-pulse 3.4s var(--ease) infinite; pointer-events: none; }
@keyframes fab-pulse { 0% { opacity: 0.4; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.2); } }
.reduced-motion .spin-fab__pulse { animation: none; }

.spin-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-spin);
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(22, 21, 15, 0.7);
  opacity: 0;
  /* Non-negotiable for anything covering the viewport. Without it a
     transparent overlay still swallows every click underneath — invisible,
     silent, and indistinguishable from "the site is broken". */
  pointer-events: none;
  overflow-y: auto;
  transition: opacity var(--med) var(--ease);
}
.spin-overlay.is-open { opacity: 1; pointer-events: auto; }

.spin-modal {
  position: relative;
  width: 100%;
  max-width: 390px;
  padding: 26px 20px 20px;
  text-align: center;
  background: var(--ivory);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(0.96);
  transition: transform var(--med) var(--spring);
}
.spin-overlay.is-open .spin-modal { transform: none; }
.spin-modal__close { position: absolute; top: 8px; right: 10px; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.6rem; line-height: 1; color: var(--muted); border-radius: 50%; }
.spin-modal .eyebrow { justify-content: center; }
.spin-modal .eyebrow::before { display: none; }
.spin-modal__title { font-family: var(--display); font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 300; line-height: 1.08; margin-bottom: 6px; }
.spin-modal__title em { font-style: italic; font-weight: 400; color: var(--gold-deep); }
.spin-modal__sub { font-size: 0.8rem; color: var(--muted); margin-bottom: 18px; }

.spin-stage { position: relative; width: min(250px, 72vw); aspect-ratio: 1; margin: 0 auto 18px; }
.spin-pointer {
  position: absolute;
  top: -4px; left: 50%;
  z-index: 3;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 17px solid var(--charcoal);
}
.spin-wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--charcoal);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: conic-gradient(
    var(--paper) 0deg 60deg, var(--sand) 60deg 120deg,
    var(--paper) 120deg 180deg, var(--sand) 180deg 240deg,
    var(--paper) 240deg 300deg, var(--sand) 300deg 360deg
  );
}
.spin-seg { position: absolute; inset: 0; transform: rotate(var(--rot)); }
.spin-seg::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 50%; background: var(--line); }
/**
 * The label is a SPOKE: anchored at the wheel's centre and rotated about it by
 * half a wedge, so it lands on its own bisector. Rotating a label about its
 * own centre spun the glyphs in place without moving them along the radius —
 * which is why the text used to bleed across neighbouring wedges.
 */
.spin-seg__label {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 80px;
  height: 50%;
  margin-left: -40px;
  transform-origin: 50% 100%;
  transform: rotate(30deg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 13px;
  text-align: center;
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.spin-seg__label.is-win { color: var(--gold-deep); font-size: 0.74rem; }
.spin-hub { position: absolute; top: 50%; left: 50%; z-index: 2; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--charcoal); }

.spin-result { animation: result-in 450ms var(--ease-out); }
@keyframes result-in { from { opacity: 0; transform: translateY(12px); } }
.spin-result__label { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.spin-result__prize { font-family: var(--display); font-size: clamp(1.6rem, 8vw, 2.2rem); font-weight: 500; line-height: 1.1; margin-bottom: 12px; }
.spin-result.is-win .spin-result__prize { color: var(--gold-deep); }
.spin-result.is-miss .spin-result__prize { color: var(--muted); font-size: 1.2rem; font-weight: 400; }
.spin-code { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; margin-bottom: 10px; background: var(--paper); border: 1px dashed var(--line-2); border-radius: 12px; }
.spin-code code { font-family: var(--body); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.16em; color: var(--gold-deep); }
.spin-result__note { font-size: 0.74rem; color: var(--faint); margin-bottom: 14px; line-height: 1.6; }
.spin-skip { margin-top: 14px; display: inline-block; font-size: 0.76rem; }
.reduced-motion .spin-wheel { transition: none !important; }

@media (min-width: 900px) {
  .spin-fab { left: 22px; bottom: 22px; padding: 12px 20px 12px 14px; font-size: 0.74rem; }
}

/* ==========================================================================
   4b. ASSISTANT
   ========================================================================== */
.chat-fab {
  position: fixed;
  right: 12px;
  bottom: calc(var(--tabbar-h) + 14px);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 11px 14px;
  border-radius: 100px;
  background: var(--charcoal);
  color: var(--ivory);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--spring),
              background var(--fast) var(--ease);
}
.chat-fab.is-in { opacity: 1; transform: none; }
.chat-fab:hover { background: var(--gold-deep); }
.chat-fab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chat-fab.is-open span { display: none; }
.chat-fab.is-open { padding: 13px; }

.chat-panel {
  position: fixed;
  left: 10px; right: 10px;
  bottom: calc(var(--tabbar-h) + 10px);
  z-index: var(--z-spin);
  display: flex;
  flex-direction: column;
  max-height: min(72dvh, 560px);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--spring);
}
.chat-panel.is-in { opacity: 1; transform: none; }

.chat-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--charcoal);
  color: var(--ivory);
}
.chat-panel__who { display: flex; align-items: center; gap: 11px; }
.chat-avatar {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-grad);
  color: #241d10;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
}
.chat-panel__who b { display: block; font-size: 0.9rem; font-weight: 600; }
.chat-panel__who span { display: block; font-size: 0.68rem; color: rgba(252, 250, 245, 0.6); }
.chat-panel__close { width: 34px; height: 34px; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; color: rgba(252, 250, 245, 0.7); border-radius: 50%; }
.chat-panel__close:hover { color: var(--ivory); background: rgba(255, 255, 255, 0.1); }

.chat-log {
  flex: 1 1 auto;
  /* Without min-height:0 a flex child refuses to shrink below its content and
     the composer gets pushed off the bottom instead of the log scrolling. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  animation: msg-in 320ms var(--ease-out);
}
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
.reduced-motion .chat-msg { animation: none; }
.chat-msg--assistant { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.chat-msg--user { align-self: flex-end; background: var(--charcoal); color: var(--ivory); border-bottom-right-radius: 5px; }

.chat-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.chat-typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line-2);
  animation: typing 1.2s ease-in-out infinite;
}
.chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }

.chat-suggestions { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 16px 12px; }
.chat-chip {
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.74rem;
  color: var(--charcoal-2);
  transition: all var(--fast) var(--ease);
}
.chat-chip:hover { border-color: var(--gold); color: var(--gold-deep); }

.chat-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--paper); }
.chat-form input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 12px 16px;
  background: var(--ivory);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  color: var(--charcoal);
  font-size: 16px; /* stops iOS zooming on focus */
}
.chat-form input:focus { outline: none; border-color: var(--gold); }
.chat-send {
  width: var(--tap); height: var(--tap);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--ivory);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--spring);
}
.chat-send svg { width: 18px; height: 18px; fill: currentColor; }
.chat-send:hover { background: var(--gold-deep); }
.chat-send:active { transform: scale(0.9); }
.chat-send:disabled { opacity: 0.45; pointer-events: none; }

.chat-foot { padding: 0 16px 12px; font-size: 0.66rem; color: var(--faint); text-align: center; background: var(--paper); }
.chat-foot a { color: var(--gold-deep); font-weight: 500; border-bottom: 1px solid var(--line-2); }

@media (min-width: 700px) {
  .chat-fab { right: 22px; bottom: 22px; }
  .chat-panel {
    left: auto;
    right: 22px;
    bottom: 84px;
    width: 400px;
    max-height: min(70vh, 620px);
  }
}

/* ==========================================================================
   5. CHECKOUT
   ========================================================================== */
.checkout { padding-top: 20px; padding-bottom: 44px; }
.checkout__head { margin-bottom: 22px; }

.checkout-progress { margin-bottom: 24px; }
.checkout-progress__track { position: relative; height: 2px; background: var(--line); }
.checkout-progress__fill { position: absolute; inset: 0; background: var(--gold-deep); transform: scaleX(0); transform-origin: left; transition: transform 650ms var(--ease-out); }
.checkout-progress__dots { display: flex; justify-content: space-between; margin-top: 9px; }
.checkout-progress__dots li { display: flex; align-items: center; gap: 7px; font-size: 0.64rem; font-weight: 500; color: var(--faint); transition: color var(--med) var(--ease); }
.checkout-progress__dots li span { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-2); transition: all var(--med) var(--spring); }
.checkout-progress__dots li.is-current, .checkout-progress__dots li.is-done { color: var(--gold-deep); }
.checkout-progress__dots li.is-current span { background: var(--gold-deep); border-color: var(--gold-deep); transform: scale(1.4); }
.checkout-progress__dots li.is-done span { background: var(--gold-deep); border-color: var(--gold-deep); }

.checkout__grid { display: flex; flex-direction: column; gap: 22px; }
/* Summary first on a phone: seeing what you're paying for before the form is
   the right order on a small screen. */
.checkout__summary { order: -1; padding: 20px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.checkout__summary h2 { font-family: var(--display); font-size: 1.25rem; font-weight: 500; margin-bottom: 14px; }

.checkout-step { animation: step-in 480ms var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translate3d(18px, 0, 0); } }
.reduced-motion .checkout-step { animation: none; }
.checkout-step h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 400; margin-bottom: 18px; }
.checkout-step__actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.checkout-step__actions .btn { flex: 1; }

.pay-method__option { display: flex; gap: 12px; padding: 16px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; }
.pay-method__option.is-selected { border-color: var(--gold-deep); background: var(--ivory-2); }
.pay-method__option input { accent-color: var(--gold-deep); margin-top: 3px; }
.pay-method__body { display: flex; flex-direction: column; gap: 4px; }
.pay-method__body span { font-size: 0.82rem; color: var(--muted); }

.checkout-assurance { margin-top: 18px; padding: 16px; background: var(--paper); border-left: 3px solid var(--gold-deep); border-radius: var(--radius-sm); }
.checkout-assurance p { font-size: 0.84rem; color: var(--muted); line-height: 1.7; margin-bottom: 7px; }
.checkout-assurance p:last-child { margin-bottom: 0; }
.checkout-assurance b { color: var(--charcoal); }

.summary-lines { margin-bottom: 16px; }
.summary-line { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.summary-line img { width: 48px; height: 56px; object-fit: contain; mix-blend-mode: multiply; }
.summary-line__name { font-family: var(--display); font-size: 0.98rem; font-weight: 500; }
.summary-line__qty { font-size: 0.72rem; color: var(--faint); }
.summary-line__total { font-size: 0.9rem; font-weight: 500; }

.summary-totals > div, .order-totals > div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 0.85rem; }
.summary-totals dt, .order-totals dt { color: var(--muted); }
.summary-totals dd, .order-totals dd { margin: 0; }
.summary-totals__grand, .order-totals__grand { margin-top: 8px; padding-top: 12px !important; border-top: 1px solid var(--line); }
.summary-totals__grand dt, .order-totals__grand dt { color: var(--charcoal) !important; font-size: 0.95rem; font-weight: 500; }
.summary-totals__grand dd, .order-totals__grand dd { font-family: var(--display); font-size: 1.45rem; font-weight: 500; }

.summary-zone { margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--ivory-2); font-size: 0.76rem; color: var(--ok); }
.summary-note { margin-top: 14px; font-size: 0.72rem; color: var(--faint); line-height: 1.65; }
.summary-note b { color: var(--charcoal-2); }

@media (min-width: 900px) {
  .checkout { padding-top: 40px; padding-bottom: 80px; }
  .checkout__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr); gap: 56px; align-items: start; }
  .checkout__summary { order: 0; position: sticky; top: calc(var(--chrome-h) + 20px); padding: 26px; }
  .checkout-progress { margin-bottom: 40px; }
}

/* ==========================================================================
   6. PAYMENT
   ========================================================================== */
.pay { padding-top: 20px; padding-bottom: 44px; min-height: 70vh; }
.pay__head { margin-bottom: 20px; }
.pay-grid { display: flex; flex-direction: column; gap: 20px; }
.pay-main { padding: 20px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }

.pay-amount { text-align: center; margin-bottom: 18px; }
.pay-amount .eyebrow { justify-content: center; }
.pay-amount .eyebrow::before { display: none; }
.pay-amount__value { font-family: var(--display); font-size: clamp(2.4rem, 13vw, 3.6rem); font-weight: 500; line-height: 1; color: var(--gold-deep); }
.pay-amount__order { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }

.pay-timer { position: relative; width: 100px; height: 100px; margin: 0 auto 22px; }
.pay-timer__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.pay-timer__track, .pay-timer__fill { fill: none; stroke-width: 3; }
.pay-timer__track { stroke: var(--line); }
.pay-timer__fill {
  stroke: var(--gold-deep);
  stroke-linecap: round;
  /* 2πr for r=45 ≈ 283 — one full circumference, swept by dashoffset. */
  stroke-dasharray: 283;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke var(--med) ease;
}
.pay-timer__text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pay-timer__text span { font-family: var(--display); font-size: 1.4rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pay-timer__text small { display: block; font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.pay-timer.is-urgent .pay-timer__fill { stroke: var(--danger); }
.pay-timer.is-urgent .pay-timer__text span { color: var(--danger); }

.pay-methods h3 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; }
/* On desktop a `upi://` link does nothing, so the QR is promoted above the
   app buttons by reversing the order. */
.pay-methods.is-desktop { display: flex; flex-direction: column-reverse; }

.upi-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.upi-app { display: flex; flex-direction: column; gap: 3px; min-height: var(--tap); padding: 13px 14px; background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color var(--med) var(--ease), transform var(--fast) var(--ease); }
.upi-app:active { transform: scale(0.98); }
.upi-app:hover { border-color: var(--gold-deep); }
.upi-app__name { font-weight: 600; font-size: 0.88rem; }
.upi-app__go { font-size: 0.68rem; font-weight: 500; color: var(--gold-deep); }

.pay-qr { margin-bottom: 22px; text-align: center; }
.pay-qr__card { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; background: var(--ivory); border: 1px solid var(--line); border-radius: 16px; }
.pay-qr__card img { width: min(220px, 62vw); height: auto; border-radius: 8px; }
.pay-qr__vpa { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pay-qr__vpa code { padding: 4px 10px; background: var(--paper); border-radius: 6px; font-size: 0.88rem; font-weight: 500; }

.pay-utr { padding: 20px 16px; background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius); }
.pay-utr h3 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.pay-utr .hint { margin-bottom: 16px; }
.pay-utr .hint b { color: var(--charcoal); }
.pay-utr input[type="text"] { font-size: 1.05rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }

.pay-side { padding: 20px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.pay-side h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 500; margin-bottom: 14px; }
.pay-steps { counter-reset: paystep; margin-bottom: 18px; }
.pay-steps li { counter-increment: paystep; display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.pay-steps li::before { content: counter(paystep); font-family: var(--display); font-size: 1rem; font-weight: 500; color: var(--gold-deep); }
.pay-steps b { display: block; font-weight: 600; font-size: 0.88rem; }
.pay-steps span { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 3px; line-height: 1.55; }

.pay-honest { padding: 14px; background: var(--ivory); border-left: 3px solid var(--gold-deep); border-radius: var(--radius-sm); margin-bottom: 16px; }
.pay-honest p { font-size: 0.78rem; color: var(--muted); line-height: 1.65; margin-bottom: 7px; }
.pay-honest p:last-child { margin-bottom: 0; }
.pay-honest b { color: var(--charcoal); }
.pay-help { display: inline-block; font-size: 0.82rem; font-weight: 500; color: var(--gold-deep); border-bottom: 1px solid var(--line-2); padding-bottom: 3px; }

.pay-state { max-width: 540px; margin: 0 auto; padding: 26px 16px; text-align: center; }
.pay-state h2 { font-family: var(--display); font-size: clamp(1.5rem, 7vw, 2.2rem); font-weight: 400; margin: 12px 0; }
.pay-state h2 span { color: var(--gold-deep); }
.pay-state p { color: var(--muted); line-height: 1.75; margin: 0 auto 10px; }
.pay-state__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.pay-state__note { font-size: 0.74rem; color: var(--faint); margin-top: 18px; }
.pay-state--error h2, .pay-state--expired h2 { color: var(--danger); }

.pay-tick { width: 72px; height: 72px; margin: 0 auto; }
.pay-tick svg { width: 100%; height: 100%; }
.pay-tick circle { fill: none; stroke: var(--gold-deep); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw-circle 650ms var(--ease-out) forwards; }
.pay-tick path { fill: none; stroke: var(--gold-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw-tick 400ms var(--ease-out) 480ms forwards; }
@keyframes draw-circle { to { stroke-dashoffset: 0; } }
@keyframes draw-tick { to { stroke-dashoffset: 0; } }
.reduced-motion .pay-tick circle, .reduced-motion .pay-tick path { animation: none; stroke-dashoffset: 0; }
.pay-tick.is-confirmed circle, .pay-tick.is-confirmed path { stroke: var(--ok); }

.pay-loading { text-align: center; padding: 44px 0; color: var(--faint); }
.pay-loading .skeleton { max-width: 420px; margin: 0 auto 16px; }

@media (min-width: 700px) {
  .upi-apps { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .pay-state__actions { flex-direction: row; justify-content: center; }
}
@media (min-width: 900px) {
  .pay { padding-top: 40px; padding-bottom: 80px; }
  .pay-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.85fr); gap: 46px; align-items: start; }
  .pay-main { padding: 34px; }
  .pay-side { position: sticky; top: calc(var(--chrome-h) + 20px); padding: 26px; }
}

/* ==========================================================================
   7. TRACKING
   ========================================================================== */
.track { padding-top: 20px; padding-bottom: 44px; min-height: 70vh; }
.track__head { margin-bottom: 24px; }
.track-form { padding: 22px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.track-form input#track-code { text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--display); font-size: 1.1rem; font-weight: 500; }

#saved-orders { margin-top: 24px; }
#saved-orders h2 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px; }
.saved-orders li { border-bottom: 1px solid var(--line); }
.saved-orders a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; }
.saved-orders b { font-family: var(--display); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.06em; }
.saved-orders span { font-size: 0.74rem; color: var(--faint); }

.track-help { margin-top: 30px; }
.track-help h2 { font-family: var(--display); font-size: 1.25rem; font-weight: 500; margin-bottom: 6px; }
.track-help p { color: var(--muted); font-size: 0.88rem; line-height: 1.75; }
.track-help a { color: var(--gold-deep); font-weight: 500; border-bottom: 1px solid var(--line-2); }

.order-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.order-card__head { padding: 22px 18px; border-bottom: 1px solid var(--line); background: var(--ivory-2); }
.order-card__code { font-family: var(--display); font-size: clamp(1.7rem, 8vw, 2.2rem); font-weight: 500; letter-spacing: 0.04em; color: var(--gold-deep); margin: 5px 0 4px; }
.order-card__placed { font-size: 0.76rem; color: var(--faint); }
.order-card__status { margin-top: 12px; }
.order-card__status p { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }

.status-pill { display: inline-block; padding: 6px 14px; border-radius: 100px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--sand); color: var(--muted); }
.status-pill--confirmed, .status-pill--packed { background: var(--ivory-2); color: var(--ok); }
.status-pill--shipped { background: #e6edf5; color: #2b5378; }
.status-pill--delivered { background: var(--gold-deep); color: #fff; }
.status-pill--payment_submitted, .status-pill--pending_payment { background: var(--ivory-2); color: var(--warn); }
.status-pill--rejected, .status-pill--cancelled, .status-pill--expired, .status-pill--refunded { background: #f6e8e8; color: var(--danger); }

.order-alert { padding: 18px; border-bottom: 1px solid var(--line); background: var(--ivory); }
.order-alert b { display: block; margin-bottom: 4px; }
.order-alert p { font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; }
.order-alert--action { border-left: 3px solid var(--warn); }
.order-alert--rejected, .order-alert--cancelled, .order-alert--expired { border-left: 3px solid var(--danger); }

.order-courier { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.order-courier code { display: block; margin-top: 4px; font-size: 0.9rem; font-weight: 600; color: var(--gold-deep); }

.tl { position: relative; padding: 22px 18px; }
.tl__rail { position: absolute; left: 32px; top: 42px; bottom: 42px; width: 2px; background: var(--line); }
.tl__rail-fill { display: block; width: 100%; height: 100%; background: var(--gold-deep); transform: scaleY(var(--tl-progress, 0)); transform-origin: top; transition: transform 1300ms var(--ease-out); }
.tl-stage { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 12px 0; }
.tl-stage__marker { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); font-size: 0.75rem; transition: all var(--med) var(--spring); }
.tl-stage__marker i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.tl-stage__body b { display: block; font-weight: 600; }
.tl-stage__body p { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }
.tl-stage__body time { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--faint); }
.tl-stage.is-done .tl-stage__marker { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.tl-stage.is-current .tl-stage__marker { border-color: var(--gold-deep); transform: scale(1.12); }
.tl-stage.is-current .tl-stage__marker i { background: var(--gold-deep); animation: stage-pulse 2s ease-in-out infinite; }
@keyframes stage-pulse { 50% { transform: scale(1.7); opacity: 0.4; } }
.reduced-motion .tl-stage.is-current .tl-stage__marker i { animation: none; }
.tl-stage.is-current .tl-stage__body b { color: var(--gold-deep); }
.tl-stage.is-upcoming, .tl-stage.is-void { opacity: 0.45; }
.tl-stage.is-void .tl-stage__body b { text-decoration: line-through; }

.order-items, .order-events, .review-prompt { padding: 20px 18px; border-top: 1px solid var(--line); }
.order-items h2, .order-events h2, .review-prompt h2 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; }
.order-items li { display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.order-items img { width: 50px; height: 58px; object-fit: contain; mix-blend-mode: multiply; }
.order-items b { display: block; font-weight: 600; }
.order-items span { font-size: 0.76rem; color: var(--faint); }
.order-items__total { font-weight: 500; }
.order-totals { margin: 14px 0; }
.order-events li { display: grid; gap: 3px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 0.84rem; }
.order-events time { color: var(--faint); font-size: 0.74rem; }
.order-events p { color: var(--muted); }
.order-card__foot { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-top: 1px solid var(--line); background: var(--ivory-2); }

.review-form { padding: 16px; background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.review-form__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-form__head img { width: 38px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
.review-form input, .review-form textarea { width: 100%; min-height: var(--tap); padding: 11px 13px; margin-bottom: 9px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--charcoal); }
.review-form textarea { min-height: 76px; resize: vertical; }
.review-form__thanks { color: var(--ok); font-size: 0.9rem; }
.rating-input { display: flex; gap: 4px; margin-bottom: 12px; }
.rating-star { padding: 4px; font-size: 1.7rem; line-height: 1; color: var(--line-2); transition: color var(--fast) var(--ease), transform var(--med) var(--spring); }
.rating-star.is-on { color: var(--warn); }
.rating-star:active { transform: scale(1.2); }

@media (min-width: 700px) {
  .order-card__head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px; }
  .order-card__status { text-align: right; margin-top: 0; }
  .order-courier { flex-direction: row; align-items: center; justify-content: space-between; }
  .order-events li { grid-template-columns: 160px 1fr; gap: 16px; }
  .order-card__foot { flex-direction: row; justify-content: space-between; }
  .order-items, .order-events, .review-prompt, .order-alert, .order-courier, .tl { padding-inline: 26px; }
  .tl__rail { left: 40px; }
}
@media (min-width: 900px) {
  .track { padding-top: 40px; padding-bottom: 80px; }
  .track-form, #saved-orders { max-width: 460px; }
  .order-card { max-width: 860px; margin-inline: auto; }
}

/* ==========================================================================
   8. QUIZ
   ========================================================================== */
.quiz { position: relative; padding-top: 26px; padding-bottom: 44px; }
.quiz__mist { display: none; }
.quiz__head { text-align: center; margin-bottom: 24px; }
.quiz__head .eyebrow { justify-content: center; }
.quiz__head .eyebrow::before { display: none; }

.quiz-card { max-width: 640px; margin: 0 auto; padding: 22px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
.quiz-card--results { max-width: 1080px; text-align: center; }
.quiz-card__meta { display: flex; align-items: center; gap: 14px; font-size: 0.66rem; font-weight: 500; color: var(--faint); margin-bottom: 18px; }
.quiz-progress { flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.quiz-progress span { display: block; height: 100%; background: var(--gold-deep); transform-origin: left; transition: transform 620ms var(--ease-out); }
.quiz-card__title { font-family: var(--display); font-size: clamp(1.5rem, 6.5vw, 2.1rem); font-weight: 400; line-height: 1.14; margin-bottom: 6px; }
.quiz-card__hint { color: var(--muted); font-size: 0.86rem; margin-bottom: 20px; }

.quiz-options { display: grid; gap: 9px; }
.quiz-option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  min-height: var(--tap);
  padding: 15px 18px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background var(--med) var(--ease), border-color var(--med) var(--ease), transform var(--fast) var(--ease);
  animation: option-in 480ms var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 65ms);
}
@keyframes option-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
.reduced-motion .quiz-option { animation: none; }
.quiz-option:active { transform: scale(0.985); }
.quiz-option:hover { border-color: var(--gold-deep); background: var(--ivory-2); }
.quiz-option.is-chosen { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.quiz-option b { font-weight: 600; font-size: 0.98rem; }
.quiz-option span { font-size: 0.8rem; color: var(--muted); }
.quiz-option.is-chosen span { color: rgba(255, 255, 255, 0.75); }
.quiz-back { margin-top: 18px; display: inline-block; }

.quiz-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; text-align: left; }
.quiz-card__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (min-width: 700px) { .quiz-results { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 900px) { .quiz { padding-top: 46px; padding-bottom: 80px; } .quiz-card { padding: 36px; } }

/* ==========================================================================
   9. PROSE / 404
   ========================================================================== */
.prose { max-width: 68ch; padding-top: 20px; padding-bottom: 44px; }
.prose h1 { font-family: var(--display); font-size: clamp(1.9rem, 8vw, 3rem); font-weight: 400; margin-bottom: 8px; }
.prose h2 { font-family: var(--display); font-size: 1.3rem; font-weight: 500; color: var(--gold-deep); margin: 30px 0 8px; }
.prose p, .prose li { color: var(--muted); line-height: 1.85; }
.prose p { margin-bottom: 12px; }
.prose ul { list-style: disc; padding-left: 22px; margin: 12px 0; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--gold-deep); }
.prose b { color: var(--charcoal); }
.prose a { color: var(--gold-deep); font-weight: 500; border-bottom: 1px solid var(--line-2); }
.prose__updated { font-size: 0.74rem; color: var(--faint); margin-bottom: 26px; }

.not-found { min-height: 62vh; display: grid; place-content: center; text-align: center; padding: 26px 16px 44px; }
.not-found .eyebrow { justify-content: center; }
.not-found .eyebrow::before { display: none; }
.not-found h1 { font-family: var(--display); font-size: clamp(4rem, 24vw, 9rem); font-weight: 300; line-height: 0.9; color: var(--gold-deep); }
.not-found p { color: var(--muted); margin: 12px 0 24px; }

@media (min-width: 900px) { .prose { padding-top: 40px; padding-bottom: 80px; } }


/* ===========================================================================
   Delivery card — the animated distance/ETA block under the pincode field
   ---------------------------------------------------------------------------
   Written mobile-first: every rule here is the phone layout, and the single
   min-width block at the bottom is the only thing desktop adds. That ordering
   is deliberate — most of this store's traffic is a phone on mobile data, and
   a mobile-first sheet means those visitors download the rules they use rather
   than the overrides they don't.

   Only `transform` and `opacity` are animated, so every transition stays on the
   compositor and off the main thread. The one exception is the free-shipping
   bar's width, which is cheap because it is a single small element.
   ========================================================================= */

.delivery-mount { margin-top: 12px; }

.deliv {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(168deg, var(--paper) 0%, var(--ivory) 100%);
  padding: 16px 14px 14px;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity var(--med) var(--ease-out), transform var(--med) var(--spring);
}
.deliv.is-shown { opacity: 1; transform: none; }
.deliv.is-free { border-color: var(--gold-light); }

/* --- the route ---------------------------------------------------------- */

.deliv__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.deliv__from, .deliv__to {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 8.5em;
  line-height: 1.25;
}
.deliv__to { text-align: right; color: var(--charcoal); font-weight: 600; }

.deliv__route { width: 100%; height: 44px; overflow: visible; }
.deliv__route-track {
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}
.deliv__route-line {
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  /* 320 comfortably exceeds the path length, so one value covers both the
     dash and the offset without measuring the path at runtime. */
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1100ms var(--ease-out);
}
.deliv.is-drawn .deliv__route-line { stroke-dashoffset: 0; }

.deliv__dot { fill: var(--paper); stroke: var(--gold); stroke-width: 2; }
.deliv__dot--to { opacity: 0; transition: opacity 200ms var(--ease) 900ms; }
.deliv.is-drawn .deliv__dot--to { opacity: 1; }

.deliv__parcel {
  fill: var(--paper);
  stroke: var(--gold-deep);
  stroke-width: 1.5;
  opacity: 0;
  offset-path: path("M14 30 Q 150 2 286 30");
  offset-distance: 0%;
}
.deliv.is-drawn .deliv__parcel {
  animation: deliv-travel 1100ms var(--ease-out) forwards;
}
@keyframes deliv-travel {
  0%   { opacity: 0; offset-distance: 0%; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}

/* --- the numbers -------------------------------------------------------- */

.deliv__stats {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
  margin: 14px 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.deliv__stat { display: flex; flex-direction: column; gap: 2px; }
.deliv__stat--fee { text-align: right; }

.deliv__num {
  font-family: var(--display);
  font-size: 2.1rem;
  line-height: 1;
  font-weight: 400;
  color: var(--charcoal);
  /* Stops the count-up from reflowing the row on every tick. */
  font-variant-numeric: tabular-nums;
}
.deliv__num--fee { color: var(--gold-deep); }
.deliv.is-free .deliv__num--fee {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--ok);
}
.deliv__unit {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- eta + cutoff ------------------------------------------------------- */

.deliv__eta {
  font-size: 0.86rem;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  gap: 8px;
}
.deliv__eta b { font-weight: 600; }
.deliv__eta-icon { font-size: 1rem; }

.deliv__cutoff {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  gap: 8px;
}
.deliv__cutoff--calm { color: var(--muted); }
.deliv__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  animation: deliv-pulse 1.9s ease-in-out infinite;
}
@keyframes deliv-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.45; }
}

/* --- free shipping progress --------------------------------------------- */

.deliv__free { margin-top: 12px; }
.deliv__free-bar {
  height: 5px;
  border-radius: 99px;
  background: var(--sand);
  overflow: hidden;
}
.deliv__free-bar i {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: 99px;
  background: var(--gold-grad);
  transform-origin: left;
  animation: deliv-fill 900ms var(--ease-out) both;
}
@keyframes deliv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.deliv__free-text { margin-top: 6px; font-size: 0.76rem; color: var(--muted); }
.deliv__free-text b { color: var(--gold-deep); font-weight: 600; }
.deliv__free-won { margin-top: 10px; font-size: 0.8rem; color: var(--ok); font-weight: 500; }

.deliv__fine {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--hair);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--faint);
}

/* --- not serviceable ---------------------------------------------------- */

.deliv--no { border-color: #e6d3a8; background: #fdf8ec; }
.deliv__no-title { font-weight: 600; color: var(--warn); font-size: 0.9rem; }
.deliv__no-body { margin-top: 5px; font-size: 0.8rem; color: var(--muted); line-height: 1.55; }
.deliv__no-cta {
  display: inline-block;
  margin-top: 10px;
  min-height: var(--tap);
  line-height: var(--tap);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-deep);
}

/* --- pending ------------------------------------------------------------ */

.deliv--pending { opacity: 1; transform: none; }
.deliv--pending .deliv__from { color: var(--faint); }

/* --- bigger pincode field ----------------------------------------------- */
/* Not six separate boxes: splitting it breaks autocomplete="postal-code",
   which on a phone is the difference between one tap and six keystrokes. */

#pincode {
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  min-height: var(--tap);
}

/* ===========================================================================
   Desktop — the only thing that widens is the card's internal spacing.
   ========================================================================= */

@media (min-width: 760px) {
  .deliv { padding: 20px 18px 16px; }
  .deliv__num { font-size: 2.5rem; }
  .deliv__from, .deliv__to { font-size: 0.7rem; max-width: 11em; }
  .deliv__route { height: 52px; }
}

/* Motion off: the same information, no movement. */
@media (prefers-reduced-motion: reduce) {
  .deliv,
  .deliv__route-line,
  .deliv__dot--to { transition: none; }
  .deliv__parcel,
  .deliv__pulse,
  .deliv__free-bar i { animation: none; }
  .deliv__parcel { opacity: 0; }
  .deliv__route-line { stroke-dashoffset: 0; }
  .deliv__dot--to { opacity: 1; }
}


/* ===========================================================================
   Launch sequence — curtain, confetti, welcome card, social proof
   ---------------------------------------------------------------------------
   All of this is temporary furniture. It is painted on top of a page that is
   already rendered and usable, never in place of one, so if any of it fails to
   run the shop underneath is untouched.
   ========================================================================= */

/* --- Curtain ------------------------------------------------------------- */

/* Deliberately NOT red theatre velvet. Scarlet drapes would be the obvious
   reading of "curtain" and they would fight every other colour on the site —
   the whole identity is warm monochrome. These are the same near-black the
   footer uses, lit so the folds catch gold. It still reads instantly as a
   curtain, because what says "curtain" is the pleating and the way it gathers,
   not the colour. */

.curtain {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100%;
  z-index: 2000;
  /* Takes the tap, and the tap dismisses it. Letting touches fall through to
     the page meant a phone scrolled the shop around behind a full-screen
     curtain, which looked like a fault rather than an intro. See launch.js. */
  pointer-events: auto;
  cursor: pointer;
  /* The panels bunch and overhang their own box as they gather; without this
     they would push out a horizontal scrollbar for the length of the reveal. */
  overflow: hidden;

  /* Fold rhythms, as variables because they have to shrink on a phone.
     They are pixel periods, so at 390px wide a 56px pleat gives barely three
     folds per drape and the fabric reads as wide stripes. The mobile override
     at the bottom of this block retunes all four. */
  --pleat: 56px;    /* main fold period */
  --pleat-b: 71px;  /* second, deliberately non-harmonic, period */
  --pleat-v: 38px;  /* the valance, gathered harder than the drop */
  --scallop: 52px;  /* one scallop across */
  --scallop-h: 20px;/* how far it hangs */
}

.curtain__panel {
  position: absolute;
  top: 0;
  width: 52vw;
  height: 100%;
  will-change: transform;
  background-color: #17150f;

  /* Four stacked layers, front to back, are what make this fabric instead of a
     dark rectangle:
       1. a fine weave, so the surface isn't glassy under the highlights;
       2. a SECOND fold period set against the main one — two regular rhythms
          interfering produce an irregular one, and irregular is the entire
          difference between hanging cloth and corrugated metal;
       3. the main pleats: dark trough, gold-lit crest, dark trough;
       4. light from above, so the hem is the darkest part of the drop.
     The stops are fractions of the period so retuning it moves the whole fold
     rather than sliding the highlight off one edge of it. */
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.028) 0 2px,
      rgba(0, 0, 0, 0.05) 2px 5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.38) 0px,
      rgba(0, 0, 0, 0) calc(var(--pleat-b) * 0.48),
      rgba(0, 0, 0, 0.38) var(--pleat-b)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.74) 0px,
      rgba(0, 0, 0, 0.2) calc(var(--pleat) * 0.232),
      rgba(224, 199, 144, 0.115) calc(var(--pleat) * 0.482),
      rgba(0, 0, 0, 0.24) calc(var(--pleat) * 0.732),
      rgba(0, 0, 0, 0.74) var(--pleat)
    ),
    linear-gradient(180deg, #3a3529 0%, #232019 30%, #191610 70%, #0e0c09 100%);
}

/* Pulled a little past each edge so the two drapes overlap in the middle and no
   hairline of the page shows through the seam before they open. */
.curtain__panel--l { left: -1vw; transform-origin: left center; }
.curtain__panel--r { right: -1vw; transform-origin: right center; }

/* The shadow each drape casts on the other where they meet. This is what makes
   the middle read as two overlapping sheets rather than one dark wall. */
.curtain__panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14vw;
}
.curtain__panel--l::after { right: 0; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.78)); }
.curtain__panel--r::after { left: 0;  background: linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,0.78)); }

/* Opening.
   A curtain does not slide away flat — it GATHERS, and the pleats bunch up
   tighter as it goes. Scaling the panel down on X while it travels compresses
   the pleat gradient by exactly the same factor, so the folds crowd together on
   their own. That one detail is most of the illusion.
   The 14% keyframe is the pull taking up the slack before the drape actually
   moves; without that beat it reads as a sliding door. */
@keyframes drape-left {
  0%   { transform: translateX(0)     scaleX(1);    }
  14%  { transform: translateX(-2.5%) scaleX(0.94); }
  58%  { transform: translateX(-40%)  scaleX(0.63); }
  100% { transform: translateX(-101%) scaleX(0.50); }
}
@keyframes drape-right {
  0%   { transform: translateX(0)     scaleX(1);    }
  14%  { transform: translateX(2.5%)  scaleX(0.94); }
  58%  { transform: translateX(40%)   scaleX(0.63); }
  100% { transform: translateX(101%)  scaleX(0.50); }
}
/* Duration must stay in step with SLIDE in launch.js. */
.curtain.is-open .curtain__panel--l { animation: drape-left  1400ms cubic-bezier(0.62, 0, 0.2, 1) forwards; }
.curtain.is-open .curtain__panel--r { animation: drape-right 1400ms cubic-bezier(0.62, 0, 0.2, 1) forwards; }

/* --- Valance (the pelmet across the top) --------------------------------- */

/* Two elements, and the split is load-bearing.

   The gold trim is a drop-shadow that follows the scalloped silhouette, so one
   hard offset shadow traces every curve — drawing that edge by hand would mean
   maintaining the scallop geometry in two places and keeping them in step.
   But CSS applies `filter` BEFORE `mask` on the same element, so a filter here
   would see the plain rectangle and lay a straight gold line across the bottom.
   Masking the inner element and filtering its parent puts them back in the
   order this needs: mask the shape first, then shadow the shape that results. */
.curtain__valance {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12vh;
  min-height: 72px;
  z-index: 2;
  filter:
    drop-shadow(0 3px 0 rgba(176, 141, 87, 0.9))
    drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
  transition: transform 900ms cubic-bezier(0.62, 0, 0.2, 1);
  will-change: transform;
}
.curtain__valance-inner {
  position: absolute;
  inset: 0;
  background-color: #17150f;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.7) 0px,
      rgba(0, 0, 0, 0.18) calc(var(--pleat-v) * 0.237),
      rgba(224, 199, 144, 0.13) calc(var(--pleat-v) * 0.5),
      rgba(0, 0, 0, 0.22) calc(var(--pleat-v) * 0.763),
      rgba(0, 0, 0, 0.7) var(--pleat-v)
    ),
    linear-gradient(180deg, #443e2f 0%, #2a2620 55%, #16130e 100%);

  /* Scalloped bottom edge, in two mask layers: a solid block for everything
     above the scallop band, and a row of half-ellipses hanging below it. */
  -webkit-mask:
    radial-gradient(calc(var(--scallop) / 2) var(--scallop-h) at 50% 0%, #000 99%, transparent 100%)
      0 100% / var(--scallop) var(--scallop-h) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--scallop-h)) no-repeat;
  mask:
    radial-gradient(calc(var(--scallop) / 2) var(--scallop-h) at 50% 0%, #000 99%, transparent 100%)
      0 100% / var(--scallop) var(--scallop-h) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--scallop-h)) no-repeat;
}
.curtain.is-open .curtain__valance { transform: translateY(-104%); }

/* --- Stage light ---------------------------------------------------------- */

/* A soft key light drifting across the velvet. Static drapes look painted; the
   moving highlight is what makes the fabric look like it's in a room. */
.curtain__glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(46vw 62vh at 50% 40%, rgba(232, 212, 168, 0.17), rgba(232, 212, 168, 0) 68%);
  animation: curtain-glow 5200ms ease-in-out infinite;
}
@keyframes curtain-glow {
  0%, 100% { transform: translateX(-12%); opacity: 0.72; }
  50%      { transform: translateX(12%);  opacity: 1; }
}
.curtain.is-open .curtain__glow { opacity: 0; transition: opacity 500ms linear; }

/* --- Trailer cards -------------------------------------------------------- */

/* Boxed between the valance and the Powered-by mark rather than filling the
   screen, so the copy can never end up centred underneath either of them. */
.curtain__cards {
  position: absolute;
  top: max(10vh, 60px);
  left: 0;
  right: 0;
  bottom: max(14vh, 96px);
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 10px 7vw;
  text-align: center;
}
.curtain__card {
  /* Every card in the same cell, so they cross-fade in place instead of
     shifting the composition between beats. */
  grid-area: 1 / 1;
  opacity: 0;
  /* The blur is the trailer grammar — titles resolve INTO focus rather than
     fading up. It is the cheapest possible way to buy "cinema". */
  filter: blur(7px);
  transform: translateY(15px) scale(0.985);
  transition:
    opacity 460ms var(--ease),
    filter 520ms var(--ease),
    transform 700ms var(--ease);
}
.curtain__card.is-on {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.curtain__eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--champagne);
  opacity: 0.85;
}
.curtain__line {
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.75rem, 7.4vw, 3.4rem);
  line-height: 1.16;
  color: #f1e8d6;
}
.curtain__rule {
  width: 0;
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width 1000ms var(--ease);
}
.curtain__card.is-on .curtain__rule { width: min(240px, 48vw); }

.curtain__logo {
  display: block;
  height: clamp(46px, 13vw, 74px);
  margin: 0 auto 20px;
}
.curtain__wordmark {
  font-family: var(--display);
  font-size: clamp(2.4rem, 12vw, 4.4rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #f6efe0;
}

/* The cards leave ahead of the drapes so the reveal isn't read through text. */
.curtain.is-open .curtain__cards {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 440ms var(--ease), transform 900ms var(--ease);
}

/* --- Powered by ---------------------------------------------------------- */

.curtain__powered {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px));
  z-index: 5;
  text-align: right;
  line-height: 1.1;
  opacity: 0;
  animation: curtain-fade-in 700ms var(--ease) 500ms forwards;
}
.curtain__powered small {
  display: block;
  font-size: clamp(0.56rem, 2.3vw, 0.68rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--champagne);
  opacity: 0.72;
}
.curtain__powered b {
  display: block;
  margin-top: 5px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 6.2vw, 2.5rem);
  letter-spacing: 0.03em;
  color: #efe4cb;
}
@keyframes curtain-fade-in { to { opacity: 1; } }
.curtain.is-open .curtain__powered { opacity: 0; animation: none; transition: opacity 320ms linear; }

/* --- Skip ---------------------------------------------------------------- */

/* Top right, because bottom right now belongs to the Powered-by mark — and
   because that is where a video puts it, which is the thing this is imitating. */
.curtain__skip {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  /* Above the valance, which would otherwise cover it outright. */
  z-index: 6;
  /* The one thing in here that takes a click. */
  pointer-events: auto;
  min-height: 38px;
  padding: 9px 17px;
  background: rgba(12, 10, 8, 0.55);
  border: 1px solid rgba(227, 211, 176, 0.34);
  border-radius: 99px;
  color: #ded3bb;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0;
  animation: curtain-fade-in 400ms var(--ease) 900ms forwards;
}
.curtain.is-open .curtain__skip { opacity: 0; animation: none; transition: opacity 220ms linear; }

.curtain.is-gone { opacity: 0; transition: opacity 600ms var(--ease); }

/* --- Curtain: small screens ---------------------------------------------- */

@media (max-width: 560px) {
  .curtain {
    --pleat: 32px;
    --pleat-b: 43px;
    --pleat-v: 24px;
    --scallop: 34px;
    --scallop-h: 14px;
  }
  /* The overlap shadow is a share of the drape, not a fixed slab — at 14vw of a
     phone it swallowed most of the panel and the middle went flat black. */
  .curtain__panel::after { width: 22vw; }
  .curtain__cards {
    top: max(8vh, 50px);
    bottom: max(16vh, 100px);
  }
  .curtain__line { margin-top: 12px; }
  .curtain__rule { margin-top: 16px; }
  .curtain__logo { margin-bottom: 14px; }
  .curtain__skip { letter-spacing: 0.16em; padding: 8px 14px; }
  .curtain__powered {
    left: 0;
    right: 0;
    margin-inline: auto;
    text-align: center;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
    padding-inline: 16px;
  }
  .curtain__powered small {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
  }
  .curtain__powered b {
    font-size: 1.45rem;
    margin-top: 3px;
  }
}

/* Phone held sideways: almost no vertical room, so the valance and the type
   both have to give. Keyed to height, not width — a short window on a laptop
   has exactly the same problem. */
@media (max-height: 480px) {
  .curtain__valance { height: 56px; min-height: 0; }
  .curtain__cards {
    top: 62px;
    bottom: 74px;
  }
  .curtain__line { font-size: clamp(1.15rem, 4.4vh, 1.7rem); margin-top: 8px; }
  .curtain__wordmark { font-size: clamp(1.6rem, 7.5vh, 2.4rem); }
  .curtain__logo { height: clamp(28px, 9vh, 40px); margin-bottom: 8px; }
  .curtain__rule { margin-top: 12px; }
  .curtain__powered b { font-size: clamp(1.1rem, 5vh, 1.5rem); }
}

/* --- Confetti ------------------------------------------------------------ */

.confetti {
  position: fixed;
  inset: 0;
  z-index: 1990;
  pointer-events: none;
}

/* --- Welcome card -------------------------------------------------------- */

.launch-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 2010;

  /* Flex with `margin: auto` on the card, NOT grid place-items: center.
     A centred grid item that outgrows its container overflows equally in both
     directions, so the top of the card ends up above the scroll origin and
     cannot be reached at all — on a phone in landscape that hides the close
     button and the copy with it. Flex centring by auto margins keeps the
     overflow scrollable. */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));

  background: rgba(30, 28, 24, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.launch-overlay.is-in { opacity: 1; }

.launch-card {
  position: relative;
  /* auto, not 0 — this is what keeps a too-tall card scrollable. */
  margin: auto;
  width: 100%;
  max-width: 440px;
  /* flex would otherwise squash it to fit rather than letting it scroll. */
  flex: none;
  padding: 38px 22px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  transform: translateY(16px) scale(0.97);
  transition: transform 420ms var(--spring);
}
.launch-overlay.is-in .launch-card { transform: none; }

.launch-card__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: var(--tap);
  height: var(--tap);
  font-size: 1.5rem;
  line-height: 1;
  background: none;
  border: 0;
  color: var(--faint);
}
.launch-card__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.launch-card__title {
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 2.8rem);
  font-weight: 300;
  line-height: 1.05;
  margin: 10px 0 14px;
  color: var(--charcoal);
}
.launch-card__body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
}
.launch-card__proof {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--gold-deep);
}
.launch-card__proof b { font-family: var(--display); font-size: 1.25rem; }

.launch-card__cta {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: 22px;
  padding: 13px 20px;
  background: var(--charcoal);
  color: var(--ivory);
  border: 0;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: transform 200ms var(--spring);
}
.launch-card__cta:hover { transform: translateY(-2px); }

.launch-card__skip {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: 6px;
  background: none;
  border: 0;
  font-size: 0.78rem;
  color: var(--faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Social proof strip -------------------------------------------------- */

/* A band, not a line of small print.
   The count is the only genuinely earned number on this page — it is a launch
   base plus real completed orders and nothing else — so it is set like the
   figure it is: display face, gold, and big enough to be the thing you read.
   No stars, no ratings, no row of stock-photo faces. Every one of those would
   be a claim we cannot back, sitting directly under a headline whose whole
   argument is that we publish evidence rather than adjectives. */
.social-proof {
  padding: 22px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Warm light spilling from the top edge, fading out before the bottom, so
     the band lifts off the page without needing a heavier fill. */
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(224, 199, 144, 0.22), rgba(224, 199, 144, 0) 62%),
    var(--paper);
}

.social-proof__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 620px;
  margin-inline: auto;
}
/* Hairlines running out from the block on both sides — the editorial device
   the rest of the site uses to set a thing apart without boxing it in. */
.social-proof__inner::before,
.social-proof__inner::after {
  content: "";
  flex: 1 1 auto;
  max-width: 74px;
  height: 1px;
}
.social-proof__inner::before { background: linear-gradient(90deg, transparent, var(--line)); }
.social-proof__inner::after  { background: linear-gradient(270deg, transparent, var(--line)); }

.social-proof__stat {
  display: flex;
  align-items: flex-start;
  flex: none;
  line-height: 1;
}
.social-proof__stat b {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.5rem, 11vw, 3.5rem);
  line-height: 0.86;
  color: var(--gold-deep);
  /* Tabular figures: the number counts up on load, and proportional digits
     would jitter the whole line sideways on every frame. */
  font-variant-numeric: tabular-nums;
}
.social-proof__stat i {
  font-style: normal;
  font-family: var(--display);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  line-height: 1;
  margin-left: 3px;
  color: var(--gold);
}

.social-proof__copy { text-align: left; }
.social-proof__copy strong {
  display: block;
  font-size: clamp(0.76rem, 3.2vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.social-proof__copy > span {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: clamp(0.72rem, 3vw, 0.78rem);
  color: var(--muted);
}

.social-proof__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
  animation: proof-pulse 2.2s ease-in-out infinite;
}
@keyframes proof-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}

/* Narrow phones: the hairlines are the first thing to go, because they are
   decoration competing with the copy for a 320px line. */
@media (max-width: 400px) {
  .social-proof { padding: 18px 14px; }
  .social-proof__inner { gap: 11px; }
  .social-proof__inner::before,
  .social-proof__inner::after { display: none; }
}

@media (min-width: 760px) {
  .launch-card { padding: 46px 40px 32px; }
  /* Was a font-size, which the band no longer uses — every part of it now sets
     its own. Room is the thing worth giving it on a wide screen. */
  .social-proof { padding: 30px 16px; }
  .social-proof__inner { gap: 20px; }
  .social-proof__inner::before,
  .social-proof__inner::after { max-width: 110px; }
}

/* Same short-window case as the curtain: give back the vertical padding and
   shrink the headline, so the card still fits between the two thumbs holding
   the phone sideways. */
@media (max-height: 480px) {
  .launch-card { padding: 24px 20px 18px; }
  .launch-card__title { font-size: clamp(1.5rem, 8vh, 2rem); margin: 6px 0 10px; }
  .launch-card__body { font-size: 0.84rem; line-height: 1.5; }
  .launch-card__proof { margin-top: 10px; }
  .launch-card__cta { margin-top: 14px; }
}

/* Motion off: no curtain, no confetti, no springs — the card just appears. */
@media (prefers-reduced-motion: reduce) {
  .curtain, .confetti { display: none !important; }
  .launch-overlay, .launch-card { transition: none; }
  .launch-card { transform: none; }
  .social-proof__dot { animation: none; }
}