/* ============================================================
   VORO — Waitlist site styles
   Sleek, clean, accessible (everyday-upgrade positioning, not
   premium). Tokens from voro-design-guidelines.
   Each section is namespaced (.s-*) to map 1:1 to a Shopify
   section later. No build step, no framework. Swiper via CDN.
   ============================================================ */

:root {
  /* Palette */
  --primary: #111111;
  --on-primary: #f7f4ef;
  --background: #f7f4ef;
  --surface: #ffffff;
  --surface-muted: #e6e2da;
  --surface-dark: #1c1c1a;
  --border: #d4cfc6;
  --text: #151515;
  --text-muted: #6b6760;
  --clay: #a97963;
  --stone: #b7b2a8;
  --sage: #a6aea3;
  --cocoa: #4a332c;
  --blush: #cfa0a1;
  --oxblood: #8b3f36;

  /* Launch colorways */
  --navy: #1d2a3a;
  --charcoal: #2e2d2b;
  --white-cw: #f7f5ef;
  --pistachio-shell: #cabb9c;

  /* Shape */
  --r-sm: 4px;
  --r-md: 8px;
  --r-full: 9999px;

  /* Rhythm */
  --gutter: 16px;
  --section-y: 72px;

  /* Motion (Rhode's collection-slider curve) */
  --ease-luxe: cubic-bezier(.76, 0, .24, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }

h1 {
  font-size: clamp(44px, 7.2vw, 92px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 500; line-height: 1.12; }
h3 { font-size: 19px; font-weight: 600; line-height: 1.25; }

.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }

.eyebrow {
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.section-lead { max-width: 640px; margin-top: 16px; color: var(--text-muted); font-size: 18px; }

section { padding: var(--section-y) 0; border-top: 1px solid var(--border); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid var(--primary);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: #000; }
.btn--secondary { background: transparent; color: var(--text); }
.btn--secondary:hover { background: var(--surface-muted); }
.btn--light { background: var(--on-primary); color: var(--primary); border-color: var(--on-primary); }
.btn--block { width: 100%; }

/* ---------- Announcement ticker ---------- */
.s-ticker {
  overflow: hidden;
  background: var(--surface-dark);
  color: var(--on-primary);
  padding: 9px 0;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: voro-ticker 36s linear infinite;
}
.ticker__group {
  display: flex;
  align-items: center;
  flex: none;
}
.ticker__group > span {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__dot { margin: 0 18px; opacity: 0.45; }
@keyframes voro-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Header ---------- */
.s-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(247, 244, 239, 0.86);
  backdrop-filter: saturate(140%) blur(8px);
}
.s-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
}
.wordmark {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-decoration: none;
  color: var(--primary);
}
.s-header .btn { min-height: 40px; padding: 0 16px; }

/* ---------- Hero ---------- */
.s-hero { border-top: 0; padding-top: 40px; }
.s-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
  gap: 52px;
  align-items: center;
}
.s-hero__copy h1 { max-width: 12ch; }
.s-hero__sub { max-width: 46ch; margin-top: 22px; color: var(--text-muted); font-size: 20px; }

/* Per-word staggered rise on the headline */
.hero-h1 .hw {
  display: inline-block;
  opacity: 1;
  transform: none;
  animation: none;
}
@keyframes voro-word-rise {
  to { opacity: 1; transform: translateY(0); }
}

.waitlist-form { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; max-width: 480px; }
.waitlist-form .btn { width: 100%; }
.waitlist-form input[type="email"],
.waitlist-form input[type="text"] {
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: inherit;
  color: var(--text);
}
.waitlist-form input[type="email"]:focus,
.waitlist-form input[type="text"]:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.ref-applied { margin: -2px 0 0; color: var(--oxblood); font-size: 13px; font-weight: 600; }
.form-note { margin-top: 14px; color: var(--text-muted); font-size: 13px; letter-spacing: 0.02em; }
.form-success { margin-top: 14px; color: var(--oxblood); font-size: 14px; font-weight: 600; }

.s-hero__media {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-muted);
  aspect-ratio: 4 / 5;
}
.s-hero__media .swiper,
.s-hero__media .swiper-wrapper,
.s-hero__media .swiper-slide { height: 100%; }
.s-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Pre-init fallback for FADE sliders: only the first slide shows until Swiper
   boots (or forever, if the CDN never loads). Horizontal carousels degrade to
   stacked cards on their own. */
.hero-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child),
.tester-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; }

/* ---------- Referred traffic banner ---------- */
.referral-banner {
  padding: 10px 0;
  border-top: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.referral-banner[hidden] { display: none !important; }
.referral-banner__inner {
  display: flex;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
}
.referral-banner p {
  color: var(--text-muted);
  font-size: 14px;
}
.referral-banner strong { color: var(--text); }
.referral-banner a {
  flex: none;
  color: var(--oxblood);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.referral-banner a:hover { text-decoration: underline; }

/* ---------- How to use (scroll-driven steps) ---------- */
.s-howto { padding: 0; }
.howto-track { height: 240vh; }
.howto-pin {
  position: sticky;
  top: 62px; /* under the sticky header */
  height: calc(100vh - 62px);
  display: flex;
  align-items: center;
}
.howto-pin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.howto-list { margin: 34px 0 0; padding: 0; list-style: none; }
.howto-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  opacity: 0.35;
  transition: opacity .45s var(--ease-luxe);
}
.howto-item:last-child { border-bottom: 1px solid var(--border); }
.howto-item.is-active { opacity: 1; }
.howto-item__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  transition: background .45s var(--ease-luxe), color .45s var(--ease-luxe), border-color .45s var(--ease-luxe);
}
.howto-item.is-active .howto-item__num {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.howto-item h3 { font-size: 18px; }
.howto-item p { margin-top: 4px; color: var(--text-muted); font-size: 14px; }
.howto-media {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #ffffff;
}
.howto-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  opacity: 0;
  transition: opacity .45s var(--ease-luxe);
}
.howto-media__img.is-active { opacity: 1; }

/* Static fallback (mobile + reduced motion): no pin, swipeable image row */
@media (max-width: 840px), (prefers-reduced-motion: reduce) {
  .howto-track { height: auto; }
  .howto-pin { position: static; height: auto; display: block; padding: var(--section-y) 0; }
  .howto-pin__grid { grid-template-columns: 1fr; gap: 30px; }
  .howto-item { opacity: 1; }
  .howto-media {
    display: flex;
    gap: 12px;
    max-width: none;
    aspect-ratio: auto;
    max-height: none;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .howto-media__img {
    position: static;
    opacity: 1;
    width: 70%;
    flex: none;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    scroll-snap-align: center;
  }
}

/* ---------- Manifesto (parallax statement) ---------- */
.s-manifesto {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 80vh;
  padding: var(--section-y) 0;
  border-top: 0;
  overflow: hidden;
  background: var(--surface-dark);
  color: var(--on-primary);
}
.manifesto-bg { position: absolute; inset: 0; }
.manifesto-bg img {
  width: 100%;
  height: 130%;
  margin-top: -15vh;
  object-fit: cover;
  opacity: 0.5;
  will-change: transform;
}
.s-manifesto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(17,17,17,0.45), rgba(17,17,17,0.62));
}
.manifesto-inner { position: relative; z-index: 1; }
.s-manifesto p {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.14;
  text-align: center;
}
.s-manifesto .accent { color: var(--blush); }

/* ---------- Section heads ---------- */
.section-head { margin-bottom: 36px; max-width: 760px; }

/* ---------- Referral teaser (ladder strip) ---------- */
.s-referral .section-head { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; max-width: none; }
.tier-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.tier-mini {
  padding: 30px 22px 32px;
  border-left: 1px solid var(--border);
}
.tier-mini:first-child { border-left: 0; }
.tier-mini__count { font-size: clamp(34px, 4vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.tier-mini__unit { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tier-mini__reward { margin-top: 14px; font-size: 15px; font-weight: 600; }

/* ---------- Carry contexts (drag carousel) ---------- */
.carry-swiper { overflow: hidden; cursor: grab; }
.carry-swiper:active { cursor: grabbing; }
.carry-swiper .swiper-slide { width: min(320px, 80vw); height: auto; }
.carry-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.carry-card__media { aspect-ratio: 4 / 3; background: var(--surface-muted); overflow: hidden; }
.carry-card__media img { width: 100%; height: 100%; object-fit: cover; }
.carry-card__body { padding: 16px 18px 20px; }
.carry-card__body h3 { font-size: 16px; }
.carry-card__body p { margin-top: 6px; color: var(--text-muted); font-size: 14px; }
.carry-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chip {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- ICP proof grid ---------- */
.s-icps { background: var(--surface); }
.icp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.icp-card {
  min-height: 230px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--background);
}
.icp-card__tag {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.icp-card h3 {
  max-width: 25ch;
  font-size: 20px;
}
.icp-card p:not(.icp-card__tag) {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 15px;
}

/* Blurred drag cursor (Rhode collection-slider pattern), desktop pointer only */
.drag-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: -43px 0 0 -43px;
  border: 1px solid rgba(247, 244, 239, 0.45);
  border-radius: var(--r-full);
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(6px);
  color: var(--on-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .25s var(--ease-luxe), transform .25s var(--ease-luxe);
  pointer-events: none;
}
.drag-cursor.is-active { opacity: 1; transform: scale(1); }
@media (pointer: coarse) { .drag-cursor { display: none; } }

/* ---------- Personas (hover-expand split) ---------- */
.s-personas { padding: 0; border-top: 1px solid var(--border); }
.persona-split { display: flex; min-height: 78vh; }
.persona-half {
  position: relative;
  flex: 1;
  overflow: hidden;
  transition: flex .8s var(--ease-luxe);
}
@media (hover: hover) and (pointer: fine) {
  .persona-half:hover { flex: 1.45; }
}
.persona-half > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-luxe);
}
.persona-half:hover > img { transform: scale(1.04); }
.persona-half::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(17,17,17,0) 38%, rgba(17,17,17,0.72));
}
.persona-half__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 34px clamp(22px, 3.4vw, 46px) 38px;
  color: var(--on-primary);
}
.persona-half__overlay .eyebrow { color: var(--blush); margin-bottom: 10px; }
.persona-half__overlay h2 { max-width: 14ch; font-size: clamp(24px, 2.6vw, 34px); }
.persona-half__sub { margin-top: 12px; font-size: 14px; color: rgba(247, 244, 239, 0.78); }

/* ---------- Colorways (interactive selector) ---------- */
.colorways__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.colorways__media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  aspect-ratio: 4 / 5;
  background: var(--surface-muted);
}
.colorways__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .55s var(--ease-luxe);
}
.colorways__img.is-active { opacity: 1; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 0; }
.swatch {
  display: flex;
  width: 92px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.swatch__dot {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  border: 1px solid rgba(17,17,17,0.12);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.35);
  transition: transform .3s var(--ease-luxe), outline-color .3s var(--ease-luxe);
  outline: 2px solid transparent;
  outline-offset: 3px;
}
.swatch:hover .swatch__dot { transform: scale(1.07); }
.swatch.is-active .swatch__dot,
.swatch[aria-pressed="true"] .swatch__dot { outline-color: var(--primary); }
.swatch__name { font-size: 13px; font-weight: 600; color: var(--text); }
.swatch--navy .swatch__dot { background: var(--navy); }
.swatch--charcoal .swatch__dot { background: var(--charcoal); }
.swatch--white .swatch__dot { background: var(--white-cw); }
.swatch--pistachio .swatch__dot { background: var(--pistachio-shell); }

/* ---------- Specs (dark band) ---------- */
.s-specs { background: var(--surface-dark); color: var(--on-primary); border-top: 0; }
.s-specs .eyebrow { color: rgba(247, 244, 239, 0.6); }
.specs-band { display: flex; flex-wrap: wrap; gap: 18px 56px; margin-top: 18px; }
.spec-item { display: flex; flex-direction: column; gap: 8px; }
.spec-item__word {
  font-size: clamp(32px, 4.4vw, 58px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.spec-item__label { font-size: 13px; color: #c5beb3; }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.price-grid--single {
  max-width: 460px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
}
.price-card {
  position: relative;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: transform .35s var(--ease-luxe), box-shadow .35s var(--ease-luxe);
}
.price-card:hover { transform: translateY(-4px); }
.price-card--feature { border-color: var(--primary); animation: voro-pulse-border 3.2s ease-in-out infinite; }
@keyframes voro-pulse-border {
  0%, 100% { box-shadow: 0 0 0 1px var(--primary); }
  50%      { box-shadow: 0 0 0 3px var(--primary); }
}
.price-card__flag {
  position: absolute; right: 18px; top: 18px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--oxblood);
}
.price-card__name { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.price-card__price { margin-top: 14px; font-size: 36px; font-weight: 600; }
.price-card__price small { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.price-card__desc { margin-top: 10px; color: var(--text-muted); font-size: 14px; }
.pricing-note { margin-top: 24px; color: var(--text-muted); font-size: 14px; }

/* ---------- Referral tiers (full cards — used on referral.html) ---------- */
.tier-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 8px; }
.tier {
  padding: 22px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.tier__count { font-size: 30px; font-weight: 600; }
.tier__count span { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.tier__reward { margin-top: 10px; font-size: 15px; line-height: 1.35; }

/* ---------- Testers (fade quote slider) ---------- */
.testers-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
}
.testers-quotes { min-width: 0; }
.tester-swiper { overflow: hidden; }
.tester-slide__quote {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.3;
}
.tester-slide__name { margin-top: 26px; font-weight: 700; }
.tester-slide__role { margin-top: 4px; color: var(--text-muted); font-size: 13px; }
.tester-swiper .swiper-pagination {
  position: static;
  margin-top: 26px;
  text-align: left;
}
.tester-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 10px 0 0 !important;
  background: var(--text-muted);
  opacity: 0.4;
  transition: opacity .3s ease, background .3s ease;
}
.tester-swiper .swiper-pagination-bullet-active { background: var(--primary); opacity: 1; }
.testers-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-muted);
}
.testers-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .55s var(--ease-luxe);
}
.testers-photo__img.is-active { opacity: 1; }

/* ---------- FAQ (accordion) ---------- */
.faq-acc { max-width: 760px; border-top: 1px solid var(--border); }
.faq-d { border-bottom: 1px solid var(--border); }
.faq-d summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 2px;
  font-size: 18px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq-d summary::-webkit-details-marker { display: none; }
.faq-d__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  transition: transform .35s var(--ease-luxe), background .35s var(--ease-luxe), color .35s var(--ease-luxe);
}
.faq-d[open] .faq-d__icon {
  transform: rotate(45deg);
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.faq-d__body { padding: 0 44px 22px 2px; }
.faq-d__body p { color: var(--text-muted); font-size: 15px; line-height: 1.55; }
.faq-d[open] .faq-d__body { animation: voro-acc-open .4s var(--ease-luxe) both; }
@keyframes voro-acc-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Image placeholders (pending renders / generations) ---------- */
.img-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 12px;
  background: var(--surface-muted);
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------- Final CTA ---------- */
.s-cta { background: var(--surface-dark); color: var(--on-primary); border-top: 0; }
.s-cta__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.s-cta h2 { max-width: 16ch; }
.s-cta .section-lead { color: #c5beb3; }
.s-cta .waitlist-form input[type="email"],
.s-cta .waitlist-form input[type="text"] { background: #2a2a27; border-color: #3a3a36; color: var(--on-primary); }
.s-cta .ref-applied { color: var(--blush); }
.s-cta__media { overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 5; background: #2a2a27; }
.s-cta__media img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }

/* ---------- Footer ---------- */
.s-footer { padding: 32px 0; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 13px; }
.s-footer__inner { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; }
.s-footer a { text-decoration: none; }
.s-footer a:hover { text-decoration: underline; }

/* ============================================================
   Referral / thank-you page
   ============================================================ */
.s-thanks { border-top: 0; padding-top: 56px; }
.thanks-head { max-width: 620px; }
.thanks-head .eyebrow { color: var(--oxblood); }
.thanks-position { margin-top: 16px; font-size: 18px; color: var(--text-muted); }
.thanks-position strong { color: var(--text); }
.share-mission {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.share-mission p {
  color: var(--text-muted);
  font-size: 15px;
}
.share-mission strong { color: var(--text); }

/* ---------- Shareable 9:16 asset (the centerpiece) ---------- */
.share-asset {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-top: 40px;
}
.share-asset__frame {
  position: relative;
  flex: none;
  width: 300px;
  max-width: 72vw;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-dark);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(17, 17, 17, 0.18);
  transition: transform .2s ease;
  will-change: transform;
}
.share-asset__frame img { width: 100%; height: 100%; object-fit: cover; }
.share-asset__loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--on-primary); font-size: 14px; letter-spacing: 0.04em;
}
.share-asset__loading[hidden] { display: none; }
.share-asset__panel { flex: 1; min-width: 0; max-width: 420px; }
.share-asset__title { font-size: 22px; font-weight: 600; }
.share-asset__hint { margin-top: 8px; color: var(--text-muted); font-size: 15px; }
.share-asset__actions { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.share-asset__minor { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.share-card {
  margin-top: 36px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.ref-link-row { display: flex; gap: 10px; margin-top: 8px; }
.ref-link-row input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--background); font: inherit; font-weight: 600; color: var(--text);
}
.share-label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }

.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.share-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.share-btn:hover { background: var(--surface-muted); }
.share-btn svg { width: 18px; height: 18px; flex: none; }
.share-native { margin-top: 14px; }

.share-layout { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 28px; align-items: start; }
.qr-wrap { text-align: center; }
.qr-box {
  display: grid; place-items: center;
  padding: 14px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.qr-box img, .qr-box canvas { width: 100%; height: auto; max-width: 180px; }
.qr-caption { margin-top: 10px; font-size: 13px; color: var(--text-muted); }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  padding: 12px 20px; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary);
  font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Progress tracker */
.s-progress { border-top: 1px solid var(--border); }
.progress-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; }
.progress-count { font-size: 15px; color: var(--text-muted); }
.progress-count strong { color: var(--text); font-size: 17px; }
.progress-bar { position: relative; height: 6px; margin: 22px 0 30px; background: var(--surface-muted); border-radius: var(--r-full); }
.progress-bar__fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--primary); border-radius: var(--r-full); transition: width 1.1s var(--ease-luxe); }
.progress-grid { display: grid; grid-template-columns: 1.55fr 0.45fr; gap: 36px; align-items: start; }
.rewards-visual {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  aspect-ratio: 4 / 5;
  background: var(--surface-muted);
}
.rewards-visual img { width: 100%; height: 100%; object-fit: cover; }
.tier-ladder--track .tier { transition: border-color .2s ease, background .2s ease; }
.tier-ladder--track .tier.is-reached { border-color: var(--primary); background: var(--surface); animation: voro-tier-unlock .6s var(--ease-luxe); }
.tier-ladder--track .tier.is-next { border-color: var(--oxblood); }
@keyframes voro-tier-unlock {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.tier__status { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.tier.is-reached .tier__status { color: var(--oxblood); }
.tier.is-next .tier__status { color: var(--oxblood); }
.demo-row { margin-top: 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.demo-row[hidden] { display: none !important; }
.demo-note { font-size: 12px; color: var(--text-muted); }

/* Confetti burst (one-time celebration on the referral page) */
.confetti-bit {
  position: fixed;
  z-index: 90;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Referral list — who's joined through this link (masked emails) */
.referrals { margin: 4px 0 30px; }
.referrals[hidden] { display: none !important; }
.referrals__title { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.referrals__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.referrals__item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.referrals__email { font-size: 15px; color: var(--text); word-break: break-all; }
.referrals__when { flex: none; font-size: 13px; color: var(--text-muted); }
.referrals__note { margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.referrals__empty {
  padding: 14px 2px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
}
.referrals__empty[hidden] { display: none !important; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .colorways__grid { grid-template-columns: 1fr; }
  .s-cta__grid { grid-template-columns: 1fr; }
  .share-layout { grid-template-columns: 1fr; }
  .qr-wrap { max-width: 220px; }
  .testers-layout { grid-template-columns: 1fr; gap: 28px; }
  .testers-photo { max-width: 420px; }
  .progress-grid { grid-template-columns: 1fr; }
  .rewards-visual { max-width: 380px; }
  .icp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 840px) {
  :root { --section-y: 56px; }
  .s-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .s-hero__media { aspect-ratio: 4 / 4; }
  .tier-strip { grid-template-columns: repeat(2, 1fr); border: 0; gap: 12px; }
  .tier-mini { border: 1px solid var(--border); border-radius: var(--r-md); }
  .tier-mini:first-child { border-left: 1px solid var(--border); }
  .price-grid { grid-template-columns: 1fr; }
  .persona-split { flex-direction: column; min-height: 0; }
  .persona-half { min-height: 56vh; }
  .specs-band { gap: 22px 36px; }
  .icp-grid { grid-template-columns: 1fr; }
  .icp-card { min-height: 0; }
}

@media (max-width: 560px) {
  .share-grid { grid-template-columns: repeat(2, 1fr); }
  .s-header .wordmark { font-size: 18px; }
  .tier-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .share-asset { flex-direction: column; gap: 24px; align-items: stretch; }
  .share-asset__frame { width: 280px; align-self: center; }
  .share-asset__panel { max-width: none; text-align: center; }
}

/* ---------- Creator Partners (referral page) ---------- */
.creator-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 30px;
  max-width: 560px;
}
/* display:flex above outranks the bare [hidden] attribute, so guard it
   explicitly — otherwise form.hidden=true never visually hides the form. */
.creator-form[hidden] { display: none !important; }
.creator-form input,
.creator-form select,
.creator-form textarea {
  min-width: 0;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: inherit;
  color: var(--text);
}
.creator-form input,
.creator-form select { height: 46px; }
.creator-form textarea { padding: 12px 14px; resize: vertical; }
.creator-form input:focus,
.creator-form select:focus,
.creator-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.creator-form select:invalid { color: var(--text-muted); }
.creator-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 560px) {
  .creator-form__row { grid-template-columns: 1fr; }
}
.creator-form__note { margin-top: 4px; color: var(--text-muted); font-size: 13px; letter-spacing: 0.02em; }
.creator-form__error { margin: -2px 0 0; color: var(--oxblood); font-size: 13px; font-weight: 600; }
.creator-form .is-invalid { border-color: var(--oxblood); outline: 2px solid var(--oxblood); outline-offset: 1px; }
.creator-success {
  margin-top: 30px;
  max-width: 560px;
  padding: 22px 24px;
  border: 1px solid var(--primary);
  border-radius: var(--r-sm);
}
.creator-success[hidden] { display: none !important; }
.creator-success__title { margin-bottom: 6px; font-weight: 600; }
.creator-success p:last-child { color: var(--text-muted); font-size: 15px; }

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* --- Keyframes --- */
@keyframes voro-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes voro-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes voro-slide-from-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes voro-slide-from-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- Scroll reveal system --- */
[data-reveal] {
  opacity: 0;
  animation-delay: var(--reveal-delay, 0ms);
}
[data-reveal="slideUp"].revealed {
  animation: voro-slide-up .55s var(--ease-luxe) both;
}
[data-reveal="fade"].revealed {
  animation: voro-fade-in .55s ease both;
}
[data-reveal="slideLeft"].revealed {
  animation: voro-slide-from-left .6s var(--ease-luxe) both;
}
[data-reveal="slideRight"].revealed {
  animation: voro-slide-from-right .6s var(--ease-luxe) both;
}

/* --- Hero entrance (CSS-only, no JS, fires on load) --- */
.hero-enter {
  opacity: 1;
  animation: none;
}
.hero-enter--media { animation-name: none; }
.hero-enter--1 { animation-delay:   0ms; }
.hero-enter--3 { animation-delay: 260ms; }
.hero-enter--4 { animation-delay: 370ms; }
.hero-enter--5 { animation-delay: 460ms; }
.hero-enter--media { animation-delay: 150ms; }

/* --- Header scroll shadow --- */
.s-header { transition: box-shadow .25s ease, background .25s ease; }
.s-header.is-scrolled {
  box-shadow: 0 1px 12px rgba(17,17,17,.08);
  background: rgba(247,244,239,.97);
}

/* --- Image hover zoom --- */
.carry-card__media img,
.colorways__media img,
.testers-photo__img,
.s-cta__media img {
  transition: transform .5s var(--ease-luxe), opacity .55s var(--ease-luxe);
  will-change: transform;
}
.carry-card:hover .carry-card__media img,
.testers-photo:hover .testers-photo__img,
.colorways__media:hover .colorways__img.is-active {
  transform: scale(1.045);
}

/* --- Reduced motion: static, fully visible, no autoplay-driven UI --- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .hero-enter, .hero-h1 .hw {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .ticker__track { animation: none; }
  .price-card--feature { animation: none; box-shadow: 0 0 0 1px var(--primary); }
  .persona-half, .persona-half > img, .price-card { transition: none; }
  .drag-cursor { display: none; }
  .manifesto-bg img { transform: none !important; }
  .s-cta__media img { transform: none !important; height: 100%; }
}