:root {
  --carbon: #000000;
  --ecru: #F5F7F4;
  --chiffon: #FFE394;
  --rouge: #FF9182;
  --rusty: #E2C1BB;
  --denim: #BED6E3;
  --sage: #9CAD91;
  --suede: #D4C7AD;
  --ink: #1A1A1A;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  overflow-x: clip;
  max-width: 100vw;
}
html { scroll-behavior: smooth; }

body {
  font-family: "DM Sans", sans-serif;
  background: var(--ecru);
  color: var(--carbon);
  font-weight: 400;
  line-height: 1.5;
}

.display { font-family: "DM Sans", sans-serif; font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; }

/* Logo image */
.logo-img {
  height: 32px;
  width: auto;
  display: block;
}

.logo-img.light { filter: invert(1) brightness(1.1); }

/* NAV */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 18px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(245, 243, 238, 0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(10,10,10,0.06);
  transition: all 0.3s;
}

.nav-brand {
  cursor: pointer;
  transition: opacity 0.2s;
}
.nav-brand:hover { opacity: 0.7; }

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 15px;
  font-weight: 400;
}

.nav-links a {
  color: var(--carbon);
  text-decoration: none;
  position: relative;
  transition: opacity 0.2s;
  cursor: pointer;
}

.nav-links a:hover { opacity: 0.5; }
.nav-links a.active { font-weight: 600; }
.nav-links a.active::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--carbon);
}

.nav-cta {
  background: var(--chiffon);
  color: var(--carbon);
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background 0.25s ease;
}

.nav-cta:hover { background: #FFF1B8; }
.nav-cta::after { display: none !important; }

/* Page transitions */
.page {
  display: none;
  animation: fadeIn 0.5s ease;
}
.page.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================= */
/* HOME PAGE                     */
/* ============================= */

.hero {
  min-height: 100vh;
  padding: 140px 40px 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background: var(--ecru);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--chiffon) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -300px;
  left: -200px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--denim) 0%, transparent 70%);
  opacity: 0.4;
  pointer-events: none;
}

.hero-top {
  max-width: 1400px;
  margin: 40px auto 0;
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
  color: var(--carbon);
  opacity: 0.6;
}

.hero-title {
  font-size: clamp(40px, 10vw, 160px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 32px;
  max-width: 100%;
}

.hero-title em {
  font-style: italic;
  font-weight: 400;
}

.hero-subtitle {
  font-size: clamp(18px, 2vw, 22px);
  max-width: 640px;
  margin-bottom: 48px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink);
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  padding: 16px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary { background: var(--carbon); color: var(--ecru); }
.btn-primary:hover { background: var(--ink); transform: translateY(-2px); }
.btn-secondary { background: transparent; color: var(--carbon); border-color: var(--carbon); }
.btn-secondary:hover { background: var(--carbon); color: var(--ecru); }
.btn-chiffon { background: var(--chiffon); color: var(--carbon); }
.btn-chiffon:hover { background: var(--ecru); }
.btn .arrow { transition: transform 0.3s; }
.btn:hover .arrow { transform: translateX(4px); }

/* Audiences */
.audiences {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
  padding-top: 80px;
}

.audiences-label {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
  opacity: 0.6;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(10,10,10,0.1);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(10,10,10,0.1);
}

.audience-card {
  /* Cursor-tracked spotlight — each card advertises its accent color.
     JS updates --mx / --my on mousemove; CSS drives the rest. */
  --mx: 50%;
  --my: 50%;
  --accent: var(--chiffon);
  background: var(--ecru);
  padding: 40px;
  text-decoration: none;
  color: var(--carbon);
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s ease;
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent;
  text-align: left;
  font-family: inherit;
  width: 100%;
}

.audience-card:nth-child(1) { --accent: var(--chiffon); }
.audience-card:nth-child(2) { --accent: var(--denim);   }
.audience-card:nth-child(3) { --accent: var(--rusty);   }

/* Spotlight layer — a radial bloom that follows the cursor */
.audience-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    360px circle at var(--mx) var(--my),
    var(--accent) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.audience-card:hover {
  border-color: var(--accent);
}
.audience-card:hover::before { opacity: 0.6; }

.audience-card > * { position: relative; z-index: 1; }

/* On touch devices and reduced-motion, fall back to a static accent tint */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .audience-card::before {
    background: var(--accent);
    opacity: 0.15;
  }
  .audience-card:hover::before { opacity: 0.15; }
}

.audience-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.5;
}

.audience-title {
  font-family: "DM Sans", sans-serif;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 20px 0;
}

.audience-desc {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.8;
  margin-bottom: 24px;
}

.audience-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.audience-card:hover .arrow { transform: translateX(6px); }

/* Ecosystem */
.ecosystem {
  padding: 160px 40px;
  background: var(--carbon);
  color: var(--ecru);
  position: relative;
  overflow: hidden;
}

.ecosystem-inner { max-width: 1400px; margin: 0 auto; }

.section-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  margin-bottom: 100px;
  align-items: end;
}

.section-label {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.5;
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}

.section-intro {
  font-size: 20px;
  line-height: 1.5;
  opacity: 0.8;
  max-width: 500px;
}

.ecosystem-diagram {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 1 / 1.05;
}

.node {
  position: absolute;
  width: 220px;
  min-height: 220px;
  padding: 32px;
  border: 1px solid rgba(245, 243, 238, 0.2);
  border-radius: 24px;
  background: rgba(245, 243, 238, 0.03);
  backdrop-filter: blur(10px);
  transition: all 0.4s;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.node:hover {
  border-color: var(--node-accent);
}

/* Y-tree layout — bottom cards sit in the diagram corners so arms radiate
   at a proper ~40° diagonal instead of flat/horizontal. Top arm is shorter
   than the bottom two (purely vertical), but all three read as spokes. */
.node-1 { top: 0;      left: 50%;  transform: translateX(-50%); }
.node-2 { bottom: 2%;  left: 5%;   }
.node-3 { bottom: 2%;  right: 5%;  }

.node-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chiffon);
  margin-bottom: 12px;
}

.node-title {
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 8px;
}

.node-desc {
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.4;
}

/* ============================= */
/* ECOSYSTEM — 5-layer hub system */
/* ============================= */
/* Composition stack (bottom to top):
   1. Section warm radial gradient (lives on `.ecosystem`, see below)
   2. .eco-rings  — sonar pulse rings behind hub
   3. .connections — SVG paths + animated beams + data tokens + endpoint dots
   4. .knot-center-img — enlarged COORD knot with breathing halo
   5. .node.* — audience cards with accent stripe, LIVE dot, arrival glow */

/* --- Layer 2: Sonar rings -------------------------------------------- */
.eco-rings {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 0;
}
.eco-rings span {
  position: absolute;
  top: 50%; left: 50%;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border: 1px solid rgba(245, 243, 238, 0.18);
  border-radius: 50%;
  opacity: 0;
  animation: eco-ring-expand 5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.eco-rings span:nth-child(1) { animation-delay: 0s;    }
.eco-rings span:nth-child(2) { animation-delay: 0.83s; }
.eco-rings span:nth-child(3) { animation-delay: 1.66s; }
.eco-rings span:nth-child(4) { animation-delay: 2.5s;  }
.eco-rings span:nth-child(5) { animation-delay: 3.33s; }
.eco-rings span:nth-child(6) { animation-delay: 4.16s; }

@keyframes eco-ring-expand {
  0%   { transform: scale(0.6); opacity: 0.55; }
  60%  { opacity: 0.12;                        }
  100% { transform: scale(4.2); opacity: 0;    }
}

/* --- Layer 3: SVG connections, tokens, endpoint markers -------------- */
.connections {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.connections svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Static faint backbone — shows the connection always exists */
.connections .beam-static {
  fill: none;
  stroke: rgba(245, 243, 238, 0.12);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Animated beam: short bright segment that travels each path.
   Per-audience colour — zero JS, pure stroke-dashoffset. */
.connections .beam {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 20 300;
  stroke-dashoffset: 20;
  animation: beam-travel 4s ease-in-out infinite;
}

.connections .beam-consumers {
  stroke: var(--chiffon);
  filter: drop-shadow(0 0 6px rgba(255, 227, 148, 0.55));
  animation-delay: 0s;
}
.connections .beam-retailers {
  stroke: var(--sage);
  filter: drop-shadow(0 0 6px rgba(156, 173, 145, 0.55));
  animation-delay: 1.3s;
}
.connections .beam-designers {
  stroke: var(--rouge);
  filter: drop-shadow(0 0 6px rgba(255, 145, 130, 0.55));
  animation-delay: 2.7s;
}

/* Reverse beams — counter-flowing pulse on the same paths.
   animation-direction: reverse plays beam-travel keyframes backwards, so
   the bright segment appears to travel end → start. Delays are offset by
   half-cycle (2s) from each thread's forward beam to spread bunching. */
.connections .beam-reverse { animation-direction: reverse; }
.connections .beam-consumers.beam-reverse { animation-delay: 2s;   }
.connections .beam-retailers.beam-reverse { animation-delay: 3.3s; }
.connections .beam-designers.beam-reverse { animation-delay: 0.7s; }

@keyframes beam-travel {
  0%    { stroke-dashoffset: 20;   }
  50%   { stroke-dashoffset: -120; }
  100%  { stroke-dashoffset: -120; }
}

/* Data tokens — small solid dots traveling along the paths.
   Direction encodes semantics: Consumers → Hub (data in),
   Hub → Retailers / Designers (intelligence out). */
.data-token {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
}
.token-consumers { fill: var(--chiffon); }
.token-retailers { fill: var(--sage);    }
.token-designers { fill: var(--rouge);   }

/* Endpoint markers — carbon-filled circles at each connection point.
   Reads as "system diagram, not decoration." */
.endpoint-marker {
  fill: var(--carbon);
  stroke-width: 1.6;
}
.endpoint-hub {
  stroke: rgba(255, 227, 148, 0.55);
  filter: drop-shadow(0 0 3px rgba(255, 227, 148, 0.3));
}
.endpoint-consumers { stroke: rgba(255, 227, 148, 0.45); }
.endpoint-retailers { stroke: rgba(156, 173, 145, 0.45); }
.endpoint-designers { stroke: rgba(255, 145, 130, 0.45); }

/* --- Layer 4: Hub (enlarged knot + breathing halo) ------------------- */
.knot-center-img {
  position: absolute;
  top: 50%; left: 50%;
  width: 180px;
  height: 180px;
  background-image: url("assets/coord-knot.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: invert(1);
  opacity: 0.95;
  transform-origin: center;
  animation: knot-breathe 6s ease-in-out infinite;
  z-index: 2;
}

/* Soft chiffon halo behind the knot — the breath of the hub */
.knot-center-img::before {
  content: "";
  position: absolute;
  inset: -80px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 227, 148, 0.28) 0%,
    rgba(255, 227, 148, 0.08) 40%,
    transparent 70%
  );
  filter: blur(24px);
  animation: halo-pulse 6s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes knot-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    }
  50%      { transform: translate(-50%, -50%) scale(1.03); }
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1);    }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* --- Layer 5: Node enhancements ------------------------------------- */
.node {
  --node-accent: var(--chiffon);
  --node-accent-rgb: 255, 227, 148;
  z-index: 3;
  overflow: hidden;
}

.node-consumers { --node-accent: var(--chiffon); --node-accent-rgb: 255, 227, 148; }
.node-retailers { --node-accent: var(--sage);    --node-accent-rgb: 156, 173, 145; }
.node-designers { --node-accent: var(--rouge);   --node-accent-rgb: 255, 145, 130; }

/* Accent stripe on the edge facing the hub (top-center; for bottom nodes
   visually it reads the same since the card's inside-facing edge is the
   one that receives/emits data) */
.node-accent-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--node-accent);
  opacity: 0.8;
  z-index: 1;
}

/* Arrival glow — flashes when this thread's data token crosses the cycle
   boundary. Peaks at 0%/100% (seamless loop), dark through the middle.
   Delays align with each token's begin="..." attribute on animateMotion. */
.node-arrival-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(var(--node-accent-rgb), 0.55) 0%,
    rgba(var(--node-accent-rgb), 0.15) 35%,
    transparent 65%
  );
  opacity: 0;
  pointer-events: none;
  animation: node-arrival 4s ease-out infinite;
  z-index: 0;
}

.node-consumers .node-arrival-glow { animation-delay: 0s;   }
.node-retailers .node-arrival-glow { animation-delay: 1.3s; }
.node-designers .node-arrival-glow { animation-delay: 2.7s; }

@keyframes node-arrival {
  0%, 100% { opacity: 0.55; }
  8%       { opacity: 0;    }
  88%      { opacity: 0;    }
}

/* LIVE status pulse next to each node label */
.node-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--node-accent);
  margin-right: 10px;
  box-shadow: 0 0 6px rgba(var(--node-accent-rgb), 0.55);
  animation: live-pulse 2s ease-in-out infinite;
  vertical-align: 1px;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.5; transform: scale(0.75); }
}

/* Node content should sit above the arrival-glow layer */
.node > .node-label,
.node > .node-title,
.node > .node-desc { position: relative; z-index: 2; }

/* Respect reduced motion — keep the composition readable but kill motion */
@media (prefers-reduced-motion: reduce) {
  .eco-rings span,
  .connections .beam,
  .data-token animateMotion,
  .knot-center-img,
  .knot-center-img::before,
  .node-arrival-glow,
  .node-live-dot { animation: none; }
  .node-arrival-glow { opacity: 0; }
}

/* Mission */
.mission {
  padding: 160px 40px;
  background: var(--ecru);
  text-align: center;
}

.mission-inner { max-width: 900px; margin: 0 auto; }

.mission-quote {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 48px;
}

.mission-quote em { font-style: italic; }

.mission-attribution {
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ============================= */
/* FOR YOU PAGE                  */
/* ============================= */

.foryou-hero {
  min-height: 90vh;
  padding: 140px 40px 80px;
  background: var(--ecru);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.foryou-hero::before {
  content: "";
  position: absolute;
  top: 20%;
  right: -300px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--chiffon) 0%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}

.foryou-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  /* Left column anchors to the top of the grid row; the phone screenshot
     is tall enough to fill the row regardless, so it stays in place. */
  align-items: start;
  position: relative;
  z-index: 2;
}

/* Plain chiffon pill — static, no animation. */
.foryou-tag {
  display: inline-block;
  padding: 8px 16px;
  background: var(--chiffon);
  color: var(--carbon);
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
}

.foryou-title {
  font-size: clamp(56px, 7vw, 112px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 32px;
}

.foryou-title em { font-style: italic; font-weight: 400; }

.foryou-subtitle {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 40px;
  max-width: 500px;
}

.app-store-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.store-btn {
  padding: 14px 24px;
  background: var(--carbon);
  color: var(--ecru);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: all 0.2s;
}

.store-btn:hover { transform: translateY(-2px); }

.store-btn-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.store-btn-text { line-height: 1.1; }
.store-btn-small { font-size: 10px; opacity: 0.7; }
.store-btn-large { font-size: 16px; font-weight: 500; }

.phone-mockup {
  aspect-ratio: 9/18;
  max-width: 320px;
  margin: 0 auto;
  background: var(--carbon);
  border-radius: 40px;
  padding: 12px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.15);
  position: relative;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--ecru) 0%, var(--rusty) 100%);
  border-radius: 30px;
  padding: 40px 20px 20px;
  position: relative;
  overflow: hidden;
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 24px;
  background: var(--carbon);
  border-radius: 0 0 16px 16px;
  z-index: 10;
}

.phone-header-app {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 600;
}

.phone-title {
  font-family: "DM Sans", sans-serif;
  font-size: 28px;
  margin-bottom: 4px;
}

.phone-meta-app {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 20px;
}

.wardrobe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.wardrobe-item {
  aspect-ratio: 1;
  background: var(--ecru);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.wardrobe-item:nth-child(2) { background: var(--denim); }
.wardrobe-item:nth-child(4) { background: var(--sage); }
.wardrobe-item:nth-child(7) { background: var(--chiffon); }
.wardrobe-item:nth-child(5) { background: var(--rouge); }

/* Features */
.features {
  padding: 120px 40px;
  background: var(--ecru);
}

.features-inner { max-width: 1400px; margin: 0 auto; }

.features-header {
  max-width: 800px;
  margin-bottom: 80px;
}

.features-title {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 24px;
}

.verbs {
  padding: 32px 0;
  border-top: 1px solid rgba(10,10,10,0.1);
  border-bottom: 1px solid rgba(10,10,10,0.1);
  margin-bottom: 80px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.verbs-track {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.verbs:hover .verbs-track { animation-play-state: paused; }

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.verb {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 300;
  font-style: italic;
  opacity: 0.3;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.verb:hover { opacity: 1; }

.verb-sep {
  display: flex;
  align-items: center;
  opacity: 0.3;
  font-size: 32px;
  padding: 0 4px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Feature card — magic-card spotlight (cursor-follow bloom) + accent border.
   Each of the 6 cards has its own accent via CSS custom properties, matching
   the colored icon tile it already wore. JS in script.js updates --mx/--my. */
.feature-card {
  --mx: 50%;
  --my: 50%;
  --accent: var(--chiffon);
  --accent-rgb: 255, 227, 148;
  padding: 40px 32px;
  background: var(--ecru);
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 20px;
  transition: border-color 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.feature-card:nth-child(1) { --accent: var(--chiffon); --accent-rgb: 255, 227, 148; }
.feature-card:nth-child(2) { --accent: var(--denim);   --accent-rgb: 190, 214, 227; }
.feature-card:nth-child(3) { --accent: var(--sage);    --accent-rgb: 156, 173, 145; }
.feature-card:nth-child(4) { --accent: var(--rusty);   --accent-rgb: 226, 193, 187; }
.feature-card:nth-child(5) { --accent: var(--rouge);   --accent-rgb: 255, 145, 130; }
.feature-card:nth-child(6) { --accent: var(--suede);   --accent-rgb: 212, 199, 173; }

/* Spotlight layer — radial bloom follows the cursor in the card's accent */
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    340px circle at var(--mx) var(--my),
    rgba(var(--accent-rgb), 0.45) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.feature-card:hover::before { opacity: 1; }

.feature-card > * { position: relative; z-index: 1; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .feature-card::before {
    background: rgba(var(--accent-rgb), 0.12);
    opacity: 1;
  }
}

/* Eyebrow number — small uppercase tag at the top of each card,
   tinted to the accent colour so the card's identity is signalled early. */
.feature-num {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  opacity: 0.85;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Icon tile — now holds an inline stroke SVG, not an emoji */
.feature-icon {
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--chiffon);
  border-radius: 14px;
  color: var(--carbon);
}

.feature-icon svg {
  display: block;
  width: 26px;
  height: 26px;
}

.feature-card:nth-child(2) .feature-icon { background: var(--denim); }
.feature-card:nth-child(3) .feature-icon { background: var(--sage); }
.feature-card:nth-child(4) .feature-icon { background: var(--rusty); }
.feature-card:nth-child(5) .feature-icon { background: var(--rouge); }
.feature-card:nth-child(6) .feature-icon { background: var(--suede); }

.feature-name {
  font-family: "DM Sans", sans-serif;
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.feature-desc {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.75;
}

/* Marketplace */
.marketplace {
  padding: 120px 40px;
  background: var(--carbon);
  color: var(--ecru);
}

.marketplace-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.marketplace-title {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 32px;
}

.marketplace-desc {
  font-size: 18px;
  opacity: 0.8;
  line-height: 1.5;
  margin-bottom: 40px;
}

.brand-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

/* Brand chip — icon + label, per-chip accent, cursor-tracked spotlight.
   Same magic-card pattern as audience cards and feature cards. JS in
   script.js updates --mx / --my in pixels on pointermove. */
.brand-chip {
  --mx: 50%;
  --my: 50%;
  --accent: var(--chiffon);
  --accent-rgb: 255, 227, 148;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(245, 243, 238, 0.05);
  border: 1px solid rgba(245, 243, 238, 0.1);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  isolation: isolate;
}

.brand-chip:nth-child(1) { --accent: var(--chiffon); --accent-rgb: 255, 227, 148; }
.brand-chip:nth-child(2) { --accent: var(--rouge);   --accent-rgb: 255, 145, 130; }
.brand-chip:nth-child(3) { --accent: var(--rusty);   --accent-rgb: 226, 193, 187; }
.brand-chip:nth-child(4) { --accent: var(--denim);   --accent-rgb: 190, 214, 227; }
.brand-chip:nth-child(5) { --accent: var(--sage);    --accent-rgb: 156, 173, 145; }
.brand-chip:nth-child(6) { --accent: var(--suede);   --accent-rgb: 212, 199, 173; }

/* Spotlight layer — accent bloom follows the cursor */
.brand-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    200px circle at var(--mx) var(--my),
    rgba(var(--accent-rgb), 0.45) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.brand-chip:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.brand-chip:hover::before { opacity: 1; }

.brand-chip > * { position: relative; z-index: 1; }

.brand-chip-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.brand-chip-label {
  line-height: 1.1;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .brand-chip::before {
    background: rgba(var(--accent-rgb), 0.12);
    opacity: 1;
  }
}

/* ============================= */
/* FOR RETAIL PAGE              */
/* ============================= */

.retail-hero {
  min-height: 90vh;
  padding: 140px 40px 80px;
  background: var(--ecru);
  position: relative;
  overflow: hidden;
}

.retail-hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--rusty) 0%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}

.retail-hero-inner {
  max-width: 1400px;
  margin: 40px auto 0;
  width: 100%;
  position: relative;
  z-index: 2;
}

.retail-tag {
  display: inline-block;
  padding: 8px 16px;
  background: var(--rusty);
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
}

.retail-title {
  font-size: clamp(48px, 7vw, 120px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 32px;
  max-width: 1100px;
}

.retail-title em { font-style: italic; font-weight: 400; }

.retail-subtitle {
  font-size: clamp(18px, 2vw, 22px);
  max-width: 700px;
  line-height: 1.5;
  margin-bottom: 48px;
}

/* Pillars */
.pillars-section {
  padding: 120px 40px;
  background: var(--ecru);
}

.pillars-header {
  max-width: 1400px;
  margin: 0 auto 80px;
}

.pillars {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Pillar card — cursor-tracked spotlight + corner-glow on hover.
   Each pillar advertises its accent color via CSS vars; JS sets --mx/--my. */
.pillar {
  --mx: 50%;
  --my: 50%;
  --accent: var(--chiffon);
  --accent-rgb: 255, 227, 148;
  padding: 40px 28px;
  background: var(--carbon);
  color: var(--ecru);
  border-radius: 20px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.4s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pillar:nth-child(1) { --accent: var(--chiffon); --accent-rgb: 255, 227, 148; }
.pillar:nth-child(2) { --accent: var(--sage);    --accent-rgb: 156, 173, 145; }
.pillar:nth-child(3) { --accent: var(--denim);   --accent-rgb: 190, 214, 227; }
.pillar:nth-child(4) { --accent: var(--rouge);   --accent-rgb: 255, 145, 130; }

/* Cursor-tracked spotlight — small radial bloom following the pointer */
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    380px circle at var(--mx) var(--my),
    rgba(var(--accent-rgb), 0.32) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

/* Corner glow — big soft colour wash on hover (kept from original design) */
.pillar::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -40%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 0;
}

.pillar:hover::before { opacity: 1; }
.pillar:hover::after  { opacity: 0.15; }
.pillar:hover         { transform: translateY(-6px); }

.pillar > * { position: relative; z-index: 1; }

/* Pillar top row — icon on the left, number on the right */
.pillar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pillar-icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  flex-shrink: 0;
}

.pillar-number {
  font-family: "DM Sans", sans-serif;
  font-size: 56px;
  font-weight: 300;
  opacity: 0.3;
  line-height: 1;
}

.pillar-name {
  font-family: "DM Sans", sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  margin: 24px 0 16px;
}

.pillar-desc {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.75;
}

/* Modules */
.modules {
  padding: 120px 40px;
  background: var(--carbon);
  color: var(--ecru);
}

.modules-inner { max-width: 1400px; margin: 0 auto; }

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(245, 243, 238, 0.1);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 60px;
}

.module-item {
  /* Each tile advertises its accent via a CSS variable. Variant classes
     below only override --accent and --accent-rgb; all stripe/glow/number
     rules derive from those, so every tile inherits the same treatment.
     JS (script.js) updates --mx / --my on pointermove to drive the
     cursor-tracked bloom in ::after (same pattern as the other cards). */
  --mx: 50%;
  --my: 50%;
  --accent: var(--chiffon);
  --accent-rgb: 255, 227, 148;
  background: var(--carbon);
  padding: 28px;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.module-item:hover { background: var(--ink); }

/* Accent stripe — applies to every tile */
.module-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.8;
}

/* Cursor-tracked spotlight — same "magnifier" pattern as feature cards,
   pillars, brand chips, etc. Replaces the old fixed corner glow so every
   card on the site shares the same hover behaviour. */
.module-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    280px circle at var(--mx) var(--my),
    rgba(var(--accent-rgb), 0.38) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
.module-item:hover::after { opacity: 1; }

.module-item > * { position: relative; z-index: 1; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .module-item::after {
    background: rgba(var(--accent-rgb), 0.1);
    opacity: 1;
  }
}

/* Variant classes — each just swaps the accent color */
.module-item--chiffon { --accent: var(--chiffon); --accent-rgb: 255, 227, 148; }
.module-item--rouge   { --accent: var(--rouge);   --accent-rgb: 255, 145, 130; }
.module-item--rusty   { --accent: var(--rusty);   --accent-rgb: 226, 193, 187; }
.module-item--denim   { --accent: var(--denim);   --accent-rgb: 190, 214, 227; }
.module-item--sage    { --accent: var(--sage);    --accent-rgb: 156, 173, 145; }
.module-item--suede   { --accent: var(--suede);   --accent-rgb: 212, 199, 173; }

.module-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.module-name {
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.module-desc {
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* Numbers */
.numbers {
  padding: 100px 40px;
  background: var(--chiffon);
}

.numbers-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.stat {
  padding: 20px 0;
  border-top: 1px solid rgba(10,10,10,0.2);
}

.stat-number {
  font-family: "DM Sans", sans-serif;
  font-size: 72px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 12px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.7;
  line-height: 1.4;
}

/* Process */
.process {
  padding: 120px 40px;
  background: var(--ecru);
}

.process-inner { max-width: 1400px; margin: 0 auto; }

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
}

/* Process timeline — connector above the 3 phase cards.
   Three static carbon dots at each card's horizontal centre (16.66 / 50 /
   83.33 %) connected by a thin rule. A brighter chiffon "beam" dot travels
   the length on a 6s cycle, reinforcing the Discovery → Calibration → Live
   progression. Hidden when the grid collapses to 1-column on mobile. */
.process-timeline {
  position: relative;
  height: 14px;
  margin: 40px 0 48px;
  pointer-events: none;
}

.process-timeline-track {
  position: absolute;
  left: 16.66%;
  right: 16.66%;
  top: 50%;
  transform: translateY(-50%);
  height: 1.5px;
  background: rgba(10, 10, 10, 0.14);
}

.process-timeline-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--carbon);
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.process-timeline-beam {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--chiffon);
  border-radius: 50%;
  top: 50%;
  left: 16.66%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(255, 227, 148, 0.85),
              0 0 22px rgba(255, 227, 148, 0.35);
  animation: process-beam-travel 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  z-index: 2;
}

@keyframes process-beam-travel {
  0%    { left: 16.66%; opacity: 0; }
  8%    { opacity: 1; }
  50%   { left: 50%;    opacity: 1; }
  92%   { left: 83.33%; opacity: 1; }
  100%  { left: 83.33%; opacity: 0; }
}

@media (max-width: 1024px) {
  .process-timeline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .process-timeline-beam { animation: none; }
}

/* Phase card — icon + accent stripe + magic-card spotlight.
   One accent per phase echoes the timeline-dot above and the card hover. */
.process-step {
  --mx: 50%;
  --my: 50%;
  --accent: var(--chiffon);
  --accent-rgb: 255, 227, 148;
  padding: 40px 32px;
  background: var(--ecru);
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.process-step:nth-child(1) { --accent: var(--chiffon); --accent-rgb: 255, 227, 148; }
.process-step:nth-child(2) { --accent: var(--denim);   --accent-rgb: 190, 214, 227; }
.process-step:nth-child(3) { --accent: var(--sage);    --accent-rgb: 156, 173, 145; }

/* Cursor-tracked spotlight */
.process-step::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    360px circle at var(--mx) var(--my),
    rgba(var(--accent-rgb), 0.35) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

/* Accent stripe at top edge */
.process-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.85;
  z-index: 1;
}

.process-step:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.process-step:hover::before { opacity: 1; }

.process-step > * { position: relative; z-index: 1; }

/* Icon at top of card — tinted to the phase accent */
.process-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  display: block;
  margin-bottom: 20px;
}

/* Phase eyebrow now inherits the accent colour */
.process-phase {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 16px;
}

.process-week {
  font-family: "DM Sans", sans-serif;
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.process-name {
  font-family: "DM Sans", sans-serif;
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 16px;
}

.process-items {
  list-style: none;
  padding: 0;
}

.process-items li {
  padding: 12px 0;
  border-top: 1px solid rgba(10,10,10,0.08);
  font-size: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Brand Shape 5 (triangle) replaces the old checkmark bullet */
.process-items li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 4px;
  background: url("assets/shapes/shape-5-chiffon.png") center/contain no-repeat;
  flex-shrink: 0;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .process-step::before {
    background: rgba(var(--accent-rgb), 0.1);
    opacity: 1;
  }
}

/* Retail CTA */
.retail-cta {
  padding: 120px 40px;
  background: var(--carbon);
  color: var(--ecru);
  text-align: center;
}

.retail-cta-inner { max-width: 900px; margin: 0 auto; }

.retail-cta-title {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}

.retail-cta-desc {
  font-size: 18px;
  opacity: 0.8;
  line-height: 1.5;
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================= */
/* FOR DESIGNERS PAGE           */
/* ============================= */

.designers-hero {
  min-height: 90vh;
  padding: 140px 40px 80px;
  background: var(--ecru);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.designers-hero::before {
  content: "";
  position: absolute;
  top: -200px;
  left: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--sage) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.designers-hero::after {
  content: "";
  position: absolute;
  bottom: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--rusty) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.designers-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

.designers-tag {
  display: inline-block;
  padding: 8px 16px;
  background: var(--sage);
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
  color: var(--carbon);
}

.designers-title {
  font-size: clamp(48px, 7vw, 120px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 32px;
  max-width: 1100px;
}

.designers-title em { font-style: italic; font-weight: 400; }

.designers-subtitle {
  font-size: clamp(18px, 2vw, 22px);
  max-width: 700px;
  line-height: 1.5;
  margin-bottom: 48px;
}

/* Three propositions */
.props {
  padding: 120px 40px;
  background: var(--ecru);
}

.props-inner { max-width: 1400px; margin: 0 auto; }

.prop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 80px;
}

/* Prop card — magic-card spotlight + per-card accent + icon at top.
   JS in script.js updates --mx / --my on pointermove. */
.prop {
  --mx: 50%;
  --my: 50%;
  --accent: var(--sage);
  --accent-rgb: 156, 173, 145;
  padding: 48px 36px;
  background: var(--ecru);
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 24px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.prop:nth-child(1) { --accent: var(--sage);    --accent-rgb: 156, 173, 145; }
.prop:nth-child(2) { --accent: var(--rusty);   --accent-rgb: 226, 193, 187; }
.prop:nth-child(3) { --accent: var(--chiffon); --accent-rgb: 255, 227, 148; }

/* Top accent stripe */
.prop::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  z-index: 1;
}

/* Cursor-tracked spotlight */
.prop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mx) var(--my),
    rgba(var(--accent-rgb), 0.32) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.prop:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  border-color: var(--accent);
}
.prop:hover::after { opacity: 1; }

.prop > * { position: relative; z-index: 1; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .prop::after {
    background: rgba(var(--accent-rgb), 0.1);
    opacity: 1;
  }
}

/* Icon at top of prop card — tinted to the accent */
.prop-icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}

.prop-num {
  font-family: "DM Sans", sans-serif;
  font-size: 72px;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  opacity: 0.32;
  margin-bottom: 20px;
}

.prop-name {
  font-family: "DM Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.prop-desc {
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 24px;
  opacity: 0.85;
}

.prop-highlight {
  padding: 12px 16px;
  background: rgba(10,10,10,0.04);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}

/* Batch demand callout */
.batch-demand {
  padding: 120px 40px;
  background: var(--carbon);
  color: var(--ecru);
}

.batch-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.batch-mockup {
  background: rgba(245,243,238,0.03);
  border: 1px solid rgba(245,243,238,0.1);
  border-radius: 20px;
  padding: 32px;
  backdrop-filter: blur(10px);
}

.batch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(245,243,238,0.1);
}

.batch-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--chiffon);
  text-transform: uppercase;
}

.batch-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  opacity: 0.7;
}

.batch-live::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--sage);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.demand-item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(245,243,238,0.08);
}

.demand-item:last-child { border: none; }

.demand-count {
  font-family: "DM Sans", sans-serif;
  font-size: 28px;
  font-weight: 300;
  color: var(--chiffon);
  margin-bottom: 4px;
}

.demand-desc {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.4;
}

.demand-meta {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 6px;
}

/* Pricing tiers */
.pricing {
  padding: 120px 40px;
  background: var(--ecru);
}

.pricing-inner { max-width: 1400px; margin: 0 auto; }

.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 60px;
}

/* Tier card — magic-card spotlight, per-tier accent, accent-tinted
   checkmark bullets, audience eyebrow. JS sets --mx/--my on pointermove. */
.tier {
  --mx: 50%;
  --my: 50%;
  --accent: var(--chiffon);
  --accent-rgb: 255, 227, 148;
  padding: 40px 28px;
  background: var(--ecru);
  border: 1px solid rgba(10,10,10,0.12);
  border-radius: 20px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.tier:nth-child(1) { --accent: var(--denim);   --accent-rgb: 190, 214, 227; }
.tier:nth-child(2) { --accent: var(--chiffon); --accent-rgb: 255, 227, 148; }
.tier:nth-child(3) { --accent: var(--sage);    --accent-rgb: 156, 173, 145; }
.tier:nth-child(4) { --accent: var(--rouge);   --accent-rgb: 255, 145, 130; }

/* Cursor-tracked spotlight — border-radius: inherit clips the gradient
   to the card's rounded corners without clipping the Most Popular pill
   (which is positioned outside the card via top: -12px). */
.tier::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    320px circle at var(--mx) var(--my),
    rgba(var(--accent-rgb), 0.42) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.tier:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.tier:hover::before { opacity: 1; }

.tier > * { position: relative; z-index: 1; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .tier::before {
    background: rgba(var(--accent-rgb), 0.1);
    opacity: 1;
  }
}

/* Featured tier — carbon fill + soft chiffon aura glowing around it.
   Contained via box-shadow, non-animated, does not clip the spotlight. */
.tier.featured {
  background: var(--carbon);
  color: var(--ecru);
  border-color: var(--carbon);
  box-shadow: 0 0 80px -10px rgba(255, 227, 148, 0.45),
              0 18px 32px -16px rgba(10, 10, 10, 0.2);
}
.tier.featured:hover {
  border-color: var(--accent);
  box-shadow: 0 0 96px -8px rgba(255, 227, 148, 0.6),
              0 22px 40px -18px rgba(10, 10, 10, 0.25);
}

.tier.featured .tier-price { color: var(--chiffon); }

.tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: var(--chiffon);
  color: var(--carbon);
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 2;
}

/* Audience eyebrow — formerly tier-price-meta, now elevated to the top.
   Tinted to the tier's accent colour. */
.tier-audience {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.95;
  margin-bottom: 18px;
  line-height: 1.4;
}

.tier-name {
  font-family: "DM Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 12px;
}

.tier-price {
  font-family: "DM Sans", sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.tier-features {
  list-style: none;
  margin-bottom: 32px;
}

.tier-features li {
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* Accent-tinted checkmark replaces the old plus sign */
.tier-features li::before {
  content: "\2713";
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.4;
}

.tier-btn {
  display: block;
  margin-top: auto;
  padding: 12px 20px;
  text-align: center;
  background: var(--ecru);
  border: 1px solid var(--carbon);
  color: var(--carbon);
  border-radius: 100px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.tier.featured .tier-btn {
  background: var(--chiffon);
  border-color: var(--chiffon);
  color: var(--carbon);
}

.tier-btn:hover {
  background: var(--carbon);
  color: var(--ecru);
}

.tier.featured .tier-btn:hover {
  background: var(--ecru);
  border-color: var(--ecru);
}

/* ============================= */
/* ABOUT PAGE                    */
/* ============================= */

.about-hero {
  min-height: 70vh;
  padding: 140px 40px 80px;
  background: var(--ecru);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.about-hero::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--denim) 0%, transparent 70%);
  opacity: 0.4;
  pointer-events: none;
}

.about-hero::after {
  content: "";
  position: absolute;
  bottom: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--chiffon) 0%, transparent 70%);
  opacity: 0.4;
  pointer-events: none;
}

.about-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

.about-tag {
  display: inline-block;
  padding: 8px 16px;
  background: var(--rusty);
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
}

.about-title {
  font-size: clamp(48px, 7vw, 120px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 32px;
  max-width: 1100px;
}

.about-title em { font-style: italic; font-weight: 400; }

.about-subtitle {
  font-size: clamp(18px, 2vw, 22px);
  max-width: 700px;
  line-height: 1.5;
}

.about-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.core-team {
  padding: 120px 40px;
  background: var(--ecru);
}

.founder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 60px;
}

.founder-card {
  padding: 40px;
  background: var(--ecru);
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: start;
  transition: all 0.3s;
}

.founder-card:hover {
  border-color: var(--carbon);
  transform: translateY(-4px);
}

/* Legacy .founder-photo circle-monogram rule removed — the class is now
   used exclusively by the <img> founder headshots, which are styled square
   by the .founder-photo rule further down. */

.founder-role {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 8px;
}

.founder-name {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.founder-bio {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.8;
}

.team-section {
  padding: 120px 40px;
  background: var(--carbon);
  color: var(--ecru);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.team-card {
  padding: 32px 28px;
  background: rgba(245,243,238,0.03);
  border: 1px solid rgba(245,243,238,0.1);
  border-radius: 20px;
  transition: all 0.3s;
}

.team-card:hover {
  border-color: var(--chiffon);
  transform: translateY(-4px);
}

.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;  /* round — matches the original team-avatar treatment */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--carbon);
  margin-bottom: 20px;
}
/* Monogram initials — sit behind the photo as graceful fallback. */
.team-avatar-mono {
  position: relative;
  z-index: 0;
}
/* Real headshot — fills the 80px square, covers the initials. */
.team-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  z-index: 1;
  border-radius: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.team-card:hover .team-photo { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .team-photo { transition: none; }
  .team-card:hover .team-photo { transform: none; }
}

.team-role {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chiffon);
  margin-bottom: 8px;
}

.team-name {
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.team-desc {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.7;
}

.advisors-section {
  padding: 120px 40px;
  background: var(--ecru);
}

.advisors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.advisor-card {
  padding: 32px 28px;
  background: var(--ecru);
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 20px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.advisor-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--chiffon);
}

.advisor-card:nth-child(2)::before { background: var(--denim); }
.advisor-card:nth-child(3)::before { background: var(--sage); }
.advisor-card:nth-child(4)::before { background: var(--rusty); }
.advisor-card:nth-child(5)::before { background: var(--rouge); }
.advisor-card:nth-child(6)::before { background: var(--suede); }

.advisor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  border-color: var(--carbon);
}

.advisor-name {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.advisor-role {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}

.advisor-prev {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 16px;
}

.advisor-desc {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.75;
  padding-top: 16px;
  border-top: 1px solid rgba(10,10,10,0.08);
}

.approach {
  padding: 120px 40px;
  background: var(--carbon);
  color: var(--ecru);
  text-align: center;
}

.approach-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.approach-title {
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 32px;
}

.approach-desc {
  font-size: 18px;
  opacity: 0.8;
  line-height: 1.5;
  margin-bottom: 64px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.approach-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 64px;
  text-align: left;
}

.approach-point {
  padding: 32px 24px;
  background: rgba(245,243,238,0.03);
  border: 1px solid rgba(245,243,238,0.1);
  border-radius: 16px;
}

.approach-num {
  font-size: 40px;
  font-weight: 300;
  color: var(--chiffon);
  margin-bottom: 16px;
  line-height: 1;
}

.approach-point h4 {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 12px;
}

.approach-point p {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.75;
}

.hiring {
  padding: 120px 40px;
  background: var(--ecru);
  position: relative;
  overflow: hidden;
}

.hiring::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--chiffon) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.hiring::after {
  content: "";
  position: absolute;
  bottom: -300px;
  left: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--sage) 0%, transparent 70%);
  opacity: 0.3;
  pointer-events: none;
}

.hiring-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}

.hiring-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--carbon);
  color: var(--ecru);
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 32px;
}

.hiring-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--sage);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.hiring-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 24px;
}

.hiring-desc {
  font-size: 18px;
  line-height: 1.55;
  opacity: 0.8;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hiring-form {
  margin-bottom: 48px;
}

.hiring-fields {
  display: flex;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.hiring-input {
  flex: 1;
  min-width: 240px;
  padding: 16px 24px;
  border: 1px solid rgba(10,10,10,0.15);
  border-radius: 100px;
  background: var(--ecru);
  font-family: inherit;
  font-size: 15px;
  color: var(--carbon);
  transition: border-color 0.2s;
}

.hiring-input:focus {
  outline: none;
  border-color: var(--carbon);
}

.hiring-input::placeholder {
  color: rgba(10,10,10,0.4);
}

.hiring-success {
  display: none;
  padding: 16px 24px;
  background: var(--sage);
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  color: var(--carbon);
  max-width: 520px;
  margin: 0 auto;
}

.hiring-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
}

.hiring-area {
  padding: 8px 16px;
  background: rgba(10,10,10,0.04);
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
}

/* ============================= */
/* FOOTER                       */
/* ============================= */

footer {
  padding: 80px 40px 40px;
  background: var(--carbon);
  color: var(--ecru);
}

.footer-inner { max-width: 1400px; margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(245, 243, 238, 0.1);
}

.footer-brand .logo-img { height: 40px; margin-bottom: 24px; }

.footer-brand p {
  font-size: 14px;
  opacity: 0.6;
  max-width: 340px;
  line-height: 1.6;
}

.footer-col h4 {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 20px;
  opacity: 0.5;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }

.footer-col a {
  color: var(--ecru);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.8;
  transition: opacity 0.2s;
  cursor: pointer;
}

.footer-col a:hover { opacity: 1; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  opacity: 0.5;
}
.footer-bottom .legal-links {
  display: flex;
  gap: 22px;
}
.footer-bottom .legal-links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-bottom .legal-links a:hover { text-decoration: underline; }

/* ============================= */
/* RESPONSIVE                   */
/* ============================= */

@media (max-width: 1024px) {
  .audience-grid { grid-template-columns: 1fr; }
  .section-header { grid-template-columns: 1fr; gap: 40px; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
  .numbers-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .foryou-hero-inner { grid-template-columns: 1fr; }
  .marketplace-inner { grid-template-columns: 1fr; }
  .prop-grid { grid-template-columns: 1fr; }
  .batch-inner { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .founder-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .advisors-grid { grid-template-columns: repeat(2, 1fr); }
  .approach-points { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  nav { padding: 14px 20px; }
  .nav-links { display: none; }
  .hero, .foryou-hero, .retail-hero, .designers-hero, .about-hero { padding: 100px 20px 60px; }
  .ecosystem, .mission, .features, .marketplace, .pillars-section, .modules, .process, .retail-cta, .props, .batch-demand, .pricing, .core-team, .team-section, .advisors-section, .approach, .hiring { padding: 80px 20px; }
  .pillars { grid-template-columns: 1fr; }
  .modules-grid { grid-template-columns: 1fr; }
  .numbers-inner { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .brand-list { grid-template-columns: repeat(2, 1fr); }
  .founder-card { grid-template-columns: 1fr; text-align: center; }
  .founder-photo { margin: 0 auto; }
  .team-grid { grid-template-columns: 1fr; }
  .advisors-grid { grid-template-columns: 1fr; }
}

/* ============================= */
/* MOTION — scroll reveal, blobs */
/* ============================= */

/* Scroll reveal (BlurFade-inspired) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform, filter;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Number ticker — uses tabular figures so counting up does not jitter */
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* Hero gradient blob drift (21st.dev ElegantShape-inspired) */
.hero::before, .foryou-hero::before, .retail-hero::before,
.designers-hero::before, .about-hero::before, .hiring::before,
.contact-hero::before {
  animation: drift-a 14s ease-in-out infinite;
}
.hero::after, .designers-hero::after, .about-hero::after, .hiring::after,
.contact-hero::after {
  animation: drift-b 18s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-20px, 22px) scale(1.04); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(24px, -18px) scale(1.05); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .verbs-track { animation: none; }
  .hero::before, .hero::after,
  .foryou-hero::before,
  .retail-hero::before,
  .designers-hero::before, .designers-hero::after,
  .about-hero::before, .about-hero::after,
  .hiring::before, .hiring::after,
  .contact-hero::before, .contact-hero::after {
    animation: none;
  }
}

/* ============================= */
/* BATCH 2 — typography + reveal */
/* ============================= */

.hero-title em,
.foryou-title em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em;
}

/* Tighter display letter-spacing at larger viewports */
@media (min-width: 1200px) {
  .hero-title, .foryou-title, .retail-title,
  .designers-title, .about-title {
    letter-spacing: -0.04em;
  }
}
@media (min-width: 1600px) {
  .hero-title, .foryou-title, .retail-title,
  .designers-title, .about-title {
    letter-spacing: -0.055em;
  }
}

/* Word-by-word reveal on hero load (blur-fade pattern) */
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--word-delay, 0ms);
  will-change: opacity, transform, filter;
}
.is-revealed .word-reveal {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Mission quote scroll-fill reveal (text-reveal pattern).
   Each word sits at low opacity until the user scrolls through the section. */
.scroll-word {
  display: inline-block;
  opacity: calc(0.18 + 0.82 * var(--word-progress, 0));
  transition: opacity 0.2s linear;
}
.scroll-word.with-space::after { content: "\00a0"; }

@media (prefers-reduced-motion: reduce) {
  .word-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .scroll-word { opacity: 1; }
}

/* ============================= */
/* FOR YOU — hero + marketplace  */
/* ============================= */

.foryou-hero-visual,
.marketplace-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Marketplace screenshot (shot-shop) keeps the floating single-image look */
.hero-shot {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(10, 10, 10, 0.18));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes shot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero-shot { animation: shot-float 8s ease-in-out infinite; }

.hero-shot-light {
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
}

/* ============================= */
/* HERO ACCORDION (For You)      */
/* ============================= */
/* Row of 4 panels. Active panel wide, others collapse to a thin strip with
   a vertical label. Hover or focus to switch. Replaces the Batch 3 single
   screenshot AND the removed showcase strip — one interactive hero
   surface that reveals all four feature screens. */

.accordion {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 460px;
  height: 560px;
}

.accordion-panel {
  position: relative;
  flex: 0 0 56px;
  height: 100%;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--ecru);
  transition:
    flex-basis 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
}

.accordion-panel.is-active {
  flex: 1 1 260px;
  border-color: rgba(10, 10, 10, 0.15);
}

.accordion-panel:focus-visible {
  outline: 2px solid var(--carbon);
  outline-offset: 3px;
}

.accordion-panel picture,
.accordion-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/* Overlay scrim.
   Closed panels carry a strong top-to-bottom gradient so the image dims into
   atmosphere and the vertical label reads white with high contrast. The
   active panel keeps only a soft bottom-fade so the app screenshot stays
   bright. Both states use the same 3-stop structure so the browser can
   interpolate the gradient smoothly during the open/close transition. */
.accordion-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;  /* sits above <img>, below the label */
  background: linear-gradient(
    to bottom,
    rgba(12, 12, 12, 0.42) 0%,
    rgba(12, 12, 12, 0.72) 50%,
    rgba(12, 12, 12, 0.92) 100%
  );
  transition: background 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.accordion-panel.is-active::after {
  background: linear-gradient(
    to bottom,
    rgba(12, 12, 12, 0.00) 0%,
    rgba(12, 12, 12, 0.10) 50%,
    rgba(12, 12, 12, 0.46) 100%
  );
}
/* Hover tease — lighten the scrim on closed panels to hint "clickable". */
.accordion-panel:not(.is-active):hover::after {
  background: linear-gradient(
    to bottom,
    rgba(12, 12, 12, 0.28) 0%,
    rgba(12, 12, 12, 0.58) 50%,
    rgba(12, 12, 12, 0.80) 100%
  );
}

/* Vertical label when collapsed; horizontal bottom-left when active.
   Closed = white (high contrast against the dark overlay),
   Active = carbon (reads against the bright un-overlaid image).
   The shared `transition: all` handles the colour interpolation during
   open/close, so the label brightens/dims in sync with the scrim. */
.accordion-label {
  position: absolute;
  left: 50%;
  bottom: 80px;
  z-index: 2;  /* sits above the dark overlay scrim */
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);  /* belt-and-braces legibility */
  transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.accordion-panel.is-active .accordion-label {
  left: 24px;
  bottom: 20px;
  color: var(--carbon);
  text-shadow: none;
  transform: translateX(0) rotate(0);
}

/* Responsive — below the hero's 2-col threshold, the accordion stacks
   vertically and each panel expands downward instead of sideways. */
@media (max-width: 1024px) {
  .accordion {
    max-width: 520px;
    margin: 0 auto;
  }
}
@media (max-width: 640px) {
  /* Mobile swipe carousel.
     The desktop accordion pattern (one wide + three thin vertical strips)
     can't work on a narrow portrait viewport — collapsed strips become
     useless wide-and-short slivers and the expanded panel crops the
     portrait screenshot into an unreadable horizontal band. Mobile
     switches to a horizontal scroll-snap strip where every screenshot
     is shown in full at native iPhone aspect, and the user swipes.
     All "is-active" size changes are neutralised on mobile so the JS
     toggle (which still fires on click) is a visual no-op here. */
  /* Parent must allow its grid/flex column to shrink below the
     carousel's natural content width — without min-width:0 the hero
     visual expands to fit 4×230px of slides and breaks layout. */
  .foryou-hero-visual { min-width: 0; width: 100%; }

  .accordion {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    height: auto;
    gap: 14px;
    padding: 4px 4px 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .accordion::-webkit-scrollbar { display: none; }

  .accordion-panel,
  .accordion-panel.is-active {
    flex: 0 0 230px;
    width: 230px;
    height: auto;
    aspect-ratio: 900 / 1955;
    scroll-snap-align: center;
    border-radius: 22px;
  }

  .accordion-panel img {
    object-position: center top;
  }

  /* Uniform scrim across all slides — every screenshot is a "feature" on mobile */
  .accordion-panel::after,
  .accordion-panel.is-active::after {
    background: linear-gradient(
      to bottom,
      rgba(12, 12, 12, 0.00) 0%,
      rgba(12, 12, 12, 0.12) 55%,
      rgba(12, 12, 12, 0.62) 100%
    );
  }

  .accordion-label,
  .accordion-panel.is-active .accordion-label {
    left: 18px;
    bottom: 16px;
    transform: none;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  }

  .hero-shot { max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shot { animation: none; transition: none; }
  .accordion-panel,
  .accordion-label { transition: none; }
}

/* ============================= */
/* BATCH 4 — dot pattern on dark */
/* ============================= */

/* Subtle dot texture on carbon sections — enterprise B2B signature (Linear,
   Vercel, Stripe). Uses radial-gradient instead of SVG. Very low opacity. */
.ecosystem,
.modules,
.marketplace,
.team-section,
.approach,
.retail-cta,
.batch-demand,
footer {
  background-image: radial-gradient(
    circle,
    rgba(245, 243, 238, 0.055) 1px,
    transparent 1.5px
  );
  background-size: 24px 24px;
  background-position: 0 0;
}

/* Keep carbon color under the pattern. Explicit background-color declarations
   already exist via the `background: var(--carbon)` shorthand above, but those
   set background-image to none. Restore the carbon color here. */
.ecosystem       { background-color: var(--carbon); }
.modules         { background-color: var(--carbon); }
.marketplace     { background-color: var(--carbon); }
.team-section    { background-color: var(--carbon); }
.approach        { background-color: var(--carbon); }
.retail-cta      { background-color: var(--carbon); }
.batch-demand    { background-color: var(--carbon); }
footer           { background-color: var(--carbon); }

/* ============================= */
/* TARGETED — glare + spotlight  */
/* ============================= */

/* Glare-hover sweep on primary buttons (port of magicui glare-hover).
   Pure CSS — a diagonal highlight travels across the button on hover.
   Enterprise-subtle: slow, narrow, low opacity. */
.btn-primary,
.btn-chiffon {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-primary::before,
.btn-chiffon::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    -45deg,
    transparent 55%,
    var(--glare-color, rgba(255, 255, 255, 0.22)) 70%,
    transparent 85%
  );
  background-size: 250% 250%;
  background-position: -120% -120%;
  background-repeat: no-repeat;
  transition: background-position 800ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.btn-primary:hover::before,
.btn-chiffon:hover::before {
  background-position: 120% 120%;
}

/* On chiffon (yellow bg) use ecru glare; on carbon use white */
.btn-chiffon { --glare-color: rgba(245, 243, 238, 0.5); }

/* Button text sits above the glare */
.btn > *,
.nav-cta > *,
.btn { z-index: 1; }
.btn::before { z-index: 0; }

/* Magnetic behaviour on primary CTAs — JS sets --mag-x / --mag-y from
   cursor distance. Transform overrides the existing .btn:hover translateY
   so the two behaviours don't fight. */
[data-magnetic] {
  transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-primary[data-magnetic]:hover,
.btn-chiffon[data-magnetic]:hover,
.nav-cta[data-magnetic]:hover {
  transform: translate3d(var(--mag-x, 0), calc(var(--mag-y, 0) - 2px), 0);
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .btn-primary::before,
  .btn-chiffon::before { display: none; }
  [data-magnetic] { transform: none; }
}

/* ============================= */
/* ECOSYSTEM — warm halo backdrop */
/* ============================= */
/* Layer a subtle chiffon radial (centered on the hub) on top of the
   existing carbon + dot-pattern backdrop. Reads as warmth emanating
   from the COORD centre; stays below the SVG + nodes in z-order. */
.ecosystem {
  background-image:
    radial-gradient(
      ellipse 55% 50% at 50% 55%,
      rgba(255, 227, 148, 0.05) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle,
      rgba(245, 243, 238, 0.055) 1px,
      transparent 1.5px
    );
  background-size: 100% 100%, 24px 24px;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  background-color: var(--carbon);
}

/* ============================= */
/* ECOSYSTEM — per-node polish   */
/* ============================= */
/* Consumer node sits above the hub, so its hub-facing edge is the BOTTOM.
   Flip the accent bar + arrival glow for that one node. */
.node-consumers .node-accent-bar {
  top: auto;
  bottom: 0;
}
.node-consumers .node-arrival-glow {
  background: radial-gradient(
    circle at 50% 100%,
    rgba(var(--node-accent-rgb), 0.55) 0%,
    rgba(var(--node-accent-rgb), 0.15) 35%,
    transparent 65%
  );
}

/* Node label inherits the accent (no per-audience hex here — CSS vars do it) */
.node-consumers .node-label,
.node-retailers .node-label,
.node-designers .node-label {
  color: var(--node-accent);
}

/* ============================= */
/* APP STORE BADGE — official    */
/* ============================= */
/* Apple's official "Download on the App Store" badge, wrapped in an <a>.
   Per Apple guidelines: preserve aspect ratio, minimum clear-space, no
   visual modifications to the artwork itself. Hover gets the same subtle
   lift as other CTAs on the site. */
.app-store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 9px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.25s ease;
}
.app-store-badge img {
  display: block;
  height: 56px;
  width: auto;
}
.app-store-badge:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}
.app-store-badge:focus-visible {
  outline: 2px solid var(--carbon);
  outline-offset: 4px;
}

/* ============================= */
/* NAV CTA — two-colour beam     */
/* ============================= */
/* @property lets us animate the conic-gradient's `from` angle smoothly,
   which CSS won't do on a custom property unless its syntax is declared. */
@property --nav-beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Border-beam on the chiffon Get-the-app pill. Two arc segments in the
   conic gradient (rouge, denim) sit 180° apart so they rotate together —
   each beam swaps to the position the other one just left, the two colours
   "switching" places as the wheel spins. */
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.75px;
  background: conic-gradient(
    from var(--nav-beam-angle),
    transparent 0deg,
    var(--rouge) 18deg,
    transparent 38deg,
    transparent 180deg,
    var(--denim) 198deg,
    transparent 218deg,
    transparent 360deg
  );
  /* mask-composite trick — render the gradient ONLY in the padding ring,
     leaving the chiffon body of the pill clean. */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: nav-cta-beam 5s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes nav-cta-beam {
  to { --nav-beam-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta::before { animation: none; opacity: 0; }
}

/* ============================= */
/* DESIGNERS — UK map + feed     */
/* ============================= */
/* The Batch Demand mockup pairs an inline dotted UK map with a streaming
   demand feed. JS rotates a pool of items into the feed every few seconds
   and tags one of the map markers as "active" — that marker pulses in the
   chiffon accent to visually link the data row to its geography. */

/* Demand feed — items animate in from the top, oldest pushed off the bottom */
.demand-feed {
  position: relative;
  min-height: 280px;
}

.demand-feed .demand-item {
  animation: demand-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes demand-in {
  0%   { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .demand-feed .demand-item { animation: none; }
}

/* ============================================================
   ABOUT PAGE — TIER 1 + 2 ENHANCEMENTS
   ============================================================ */

/* -------- Founder dossier cards -------- */
.founder-card {
  --accent: var(--chiffon);
  --accent-rgb: 255, 227, 148;
  --accent-b: var(--rusty);
  --accent-b-rgb: 226, 193, 187;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  position: relative;
  overflow: hidden;
  --mx: 50%;
  --my: 50%;
}
.founder-card[data-accent="chiffon-rusty"] {
  --accent: var(--chiffon);       --accent-rgb: 255, 227, 148;
  --accent-b: var(--rusty);       --accent-b-rgb: 226, 193, 187;
}
.founder-card[data-accent="denim-sage"] {
  --accent: var(--denim);         --accent-rgb: 190, 214, 227;
  --accent-b: var(--sage);        --accent-b-rgb: 156, 173, 145;
}

.founder-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    380px circle at var(--mx) var(--my),
    rgba(var(--accent-rgb), 0.55) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
.founder-card:hover::before { opacity: 0.4; }
.founder-card:hover {
  border-color: rgba(var(--accent-rgb), 0.65);
}
.founder-card > * { position: relative; z-index: 1; }

.founder-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.08);
  background:
    radial-gradient(circle at 22% 18%, rgba(var(--accent-rgb), 0.95), transparent 58%),
    radial-gradient(circle at 82% 86%, rgba(var(--accent-b-rgb), 0.95), transparent 58%),
    #efece4;
}
.founder-photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  pointer-events: none;
}

/* When a real headshot is present, the photo owns the whole square frame.
   Kill the radial-gradient backdrop and the noise overlay so nothing tints
   the photo's corners. Monogram + decoration stay in the rule above as
   graceful fallback if the image fails to load. */
.founder-photo-frame:has(.founder-photo) {
  background: #efece4;
}
.founder-photo-frame:has(.founder-photo)::before {
  display: none;
}
.founder-monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 130px;
  letter-spacing: -0.06em;
  color: rgba(10, 10, 10, 0.82);
  line-height: 1;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.1);
}

/* Real headshot — layered on top of the monogram. Monogram remains as a
   graceful fallback if the image fails to decode. Cutout photos already
   carry a chiffon halo, so cover-fit fills the frame edge-to-edge. */
.founder-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.founder-card:hover .founder-photo {
  transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .founder-photo { transition: none; }
  .founder-card:hover .founder-photo { transform: none; }
}
.founder-linkedin {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;  /* sits above the layered headshot */
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(10, 10, 10, 0.32);
  color: var(--ecru);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.22s ease, transform 0.22s ease;
  z-index: 2;
}
.founder-linkedin:hover {
  background: rgba(10, 10, 10, 0.7);
  transform: translateY(-1px);
}
.founder-linkedin svg { width: 15px; height: 15px; }

.founder-card { cursor: pointer; }
.founder-card:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.9);
  outline-offset: 4px;
}
.founder-card .founder-linkedin { cursor: pointer; }

.founder-expandable {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease 0.05s,
    margin-top 0.3s ease;
  margin-top: 0;
}
.founder-card[data-expanded="true"] .founder-expandable {
  max-height: 720px;
  opacity: 1;
  margin-top: 18px;
}

.founder-chevron {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.05);
  border: 1px solid rgba(10, 10, 10, 0.08);
  color: var(--carbon);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.2s ease,
              border-color 0.2s ease;
  pointer-events: none;
  z-index: 2;
}
.founder-chevron svg { width: 16px; height: 16px; display: block; }

.founder-card:hover .founder-chevron {
  background: rgba(10, 10, 10, 0.08);
  border-color: rgba(10, 10, 10, 0.14);
}
.founder-card[data-expanded="true"] .founder-chevron {
  transform: rotate(180deg);
  background: rgba(var(--accent-rgb), 0.35);
  border-color: rgba(var(--accent-rgb), 0.6);
}

.founder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .founder-expandable,
  .founder-chevron { transition: none; }
}

/* -------- Side-expanding founder cards (accordion, one open at a time) -------- */
.founder-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  grid-template-columns: unset;
  flex-wrap: wrap;
}

.founder-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  grid-template-columns: unset;
  padding: 24px;
  gap: 0;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.founder-card:hover { transform: none; }

.founder-card .founder-main {
  width: 312px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.founder-card .founder-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 18px;
}

.founder-card .founder-role {
  margin-bottom: 4px;
}

.founder-card .founder-name {
  margin-bottom: 0;
  font-size: 26px;
}

/* Detail panel — width-based horizontal expansion.
   max-height is clamped to 0 when collapsed so the panel's text (wrapping
   char-by-char at width 0) can't inflate the card's intrinsic height. */
.founder-detail {
  box-sizing: border-box;
  width: 0;
  max-height: 0;
  padding: 0;
  margin-left: 0;
  border-left: 0 solid rgba(10, 10, 10, 0.1);
  overflow: hidden;
  opacity: 0;
  flex-shrink: 0;
  transition:
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-left-width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease 0.1s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.founder-card[data-expanded="true"] .founder-detail {
  width: 360px;
  max-height: 800px;
  padding: 8px 0 8px 24px;
  margin-left: 24px;
  border-left-width: 1px;
  opacity: 1;
}

.founder-detail .founder-bio {
  text-align: left;
  font-size: 13.5px;
  line-height: 1.65;
  margin-bottom: 0;
}

.founder-detail .founder-chips {
  justify-content: flex-start;
  margin-top: 18px;
}

/* Chevron: right-arrow in collapsed, rotates 180° (left-arrow) when expanded */
.founder-card .founder-chevron {
  position: static;
  align-self: center;
  bottom: auto;
  right: auto;
  margin-top: 16px;
}
.founder-card[data-expanded="true"] .founder-chevron {
  margin-top: 16px;
}

/* Scale monogram for the wider (photo fills main column width) frame */
.founder-card .founder-monogram {
  font-size: 150px;
}

/* --- Mobile: revert to vertical stacking and vertical expansion --- */
@media (max-width: 860px) {
  .founder-grid {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .founder-card {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
  }
  .founder-detail {
    width: 100%;
    max-height: 0;
    border-left: 0;
    border-top: 0 solid rgba(10, 10, 10, 0.1);
    padding: 0;
    margin: 0;
    transition:
      max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      padding 0.45s ease,
      margin-top 0.45s ease,
      border-top-width 0.3s ease,
      opacity 0.3s ease 0.1s;
  }
  .founder-card[data-expanded="true"] .founder-detail {
    width: 100%;
    max-height: 900px;
    margin-top: 18px;
    margin-left: 0;
    padding: 18px 0 0 0;
    border-top-width: 1px;
    border-left: 0;
  }
  .founder-card .founder-monogram { font-size: 120px; }
}
.founder-chip {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--carbon);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* -------- Team card — compact + LinkedIn on hover -------- */
.team-card {
  --accent: var(--chiffon);
  --accent-rgb: 255, 227, 148;
  --mx: 50%;
  --my: 50%;
  position: relative;
  overflow: hidden;
}
.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    300px circle at var(--mx) var(--my),
    rgba(var(--accent-rgb), 0.5) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
.team-card:hover::before { opacity: 0.35; }
.team-card > * { position: relative; z-index: 1; }

.team-linkedin {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(245, 243, 238, 0.55);
  background: rgba(245, 243, 238, 0.04);
  border: 1px solid rgba(245, 243, 238, 0.08);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}
.team-card:hover .team-linkedin,
.team-linkedin:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.team-linkedin:hover {
  color: var(--ecru);
  background: rgba(245, 243, 238, 0.08);
  border-color: rgba(245, 243, 238, 0.2);
}
.team-linkedin svg { width: 14px; height: 14px; }

/* -------- Pedigree wall — monochrome logo marquee -------- */
.pedigree-wall {
  margin: 48px 0 56px;
  text-align: center;
}
.pedigree-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.42);
  margin-bottom: 26px;
}
.pedigree-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.pedigree-track {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: pedigree-scroll 50s linear infinite;
}
.pedigree-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  flex-shrink: 0;
  opacity: 0.72;
  transition: opacity 0.25s ease;
}
.pedigree-logo:hover { opacity: 1; }
.pedigree-logo img {
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Per-logo tuning — square/vertical marks get more height, wide marks get max-width */
.pedigree-logo[data-logo="ey"]      img { height: 34px; max-width: 140px; }
.pedigree-logo[data-logo="asos"]    img { height: 26px; max-width: 120px; }
.pedigree-logo[data-logo="matalan"] img { height: 34px; max-width: 110px; }
.pedigree-logo[data-logo="very"]    img { height: 46px; max-width: 130px; }
.pedigree-logo[data-logo="edited"]  img { height: 48px; max-width: 68px; }  /* stacked */
.pedigree-logo[data-logo="google"]  img { height: 30px; max-width: 100px; }
.pedigree-logo[data-logo="puma"]    img { height: 28px; max-width: 120px; }
.pedigree-logo[data-logo="on"]      img { height: 46px; max-width: 42px; }  /* square mark */
.pedigree-logo[data-logo="mclaren"] img { height: 26px; max-width: 160px; }

.pedigree-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.18);
  flex-shrink: 0;
}

@keyframes pedigree-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pedigree-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 32px;
  }
  .pedigree-viewport { mask-image: none; -webkit-mask-image: none; }
}

/* -------- Advisor card — head restructure + beam sweep -------- */
.advisor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.advisor-head .advisor-name {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.advisor-card .advisor-prev {
  margin-bottom: 0;
  flex-shrink: 0;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.04);
  border: 1px solid rgba(10, 10, 10, 0.14);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.68);
  white-space: nowrap;
  opacity: 1;
}

.advisor-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 15%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0) 85%,
    transparent 100%
  );
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
.advisor-card:hover::after {
  opacity: 1;
  animation: advisor-beam 1.4s linear infinite;
}
@keyframes advisor-beam {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .advisor-card:hover::after { animation: none; opacity: 0; }
}

/* -------- Approach — icons + proof-stat + spotlight -------- */
.approach-point {
  --accent: var(--chiffon);
  --accent-rgb: 255, 227, 148;
  --mx: 50%;
  --my: 50%;
  position: relative;
  overflow: hidden;
}
.approach-point[data-accent="chiffon"] { --accent: var(--chiffon); --accent-rgb: 255, 227, 148; }
.approach-point[data-accent="denim"]   { --accent: var(--denim);   --accent-rgb: 190, 214, 227; }
.approach-point[data-accent="sage"]    { --accent: var(--sage);    --accent-rgb: 156, 173, 145; }

.approach-point::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    320px circle at var(--mx) var(--my),
    rgba(var(--accent-rgb), 0.45) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
.approach-point:hover::before { opacity: 0.32; }
.approach-point:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  transform: translateY(-3px);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.approach-point > * { position: relative; z-index: 1; }

.approach-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}
.approach-point .approach-num {
  color: var(--accent);
  font-size: 32px;
  margin-bottom: 12px;
}
.approach-stat {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(245, 243, 238, 0.1);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.75);
}

/* -------- Mobile adjustments -------- */
@media (max-width: 900px) {
  .founder-card { grid-template-columns: 1fr; }
  .founder-photo-frame { max-width: 220px; margin: 0 auto; }
  .founder-chips { justify-content: center; }
  .pedigree-logo { height: 44px; }
  .pedigree-logo[data-logo="edited"] img { height: 38px; max-width: 54px; }
  .pedigree-logo[data-logo="very"]   img { height: 36px; }
  .pedigree-logo[data-logo="on"]     img { height: 36px; max-width: 32px; }
  .pedigree-track { gap: 40px; }
  .advisor-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   MOBILE BURGER NAV + FULL-SCREEN OVERLAY
   Visible ≤640px. Duplicates the main nav links in a typography-driven
   overlay. Body scroll locks when open; Escape / backdrop / link click all close.
   ============================================================ */
.nav-burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  position: relative;
  z-index: 1001;
  margin: -10px;
}

@media (max-width: 640px) {
  .nav-burger { display: flex; }
}

/* ============================================================
   ECOSYSTEM DIAGRAM — mobile fallback
   Y-tree positioning collapses on narrow viewports, so stack the
   hub + 3 cards vertically. SVG connections hidden (Y-tree geometry
   makes no sense when stacked).
   ============================================================ */
@media (max-width: 860px) {
  .ecosystem-diagram {
    max-width: 420px;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0 0;
  }
  .ecosystem-diagram .connections { display: none; }
  .ecosystem-diagram .knot-center-img {
    position: static;
    width: 140px;
    height: 140px;
    margin: 0 auto 12px;
    transform: none;
    top: auto;
    left: auto;
  }
  .ecosystem-diagram .node {
    position: static;
    width: 100%;
    max-width: 320px;
    min-height: 0;
    transform: none !important;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 auto;
  }
  /* Consumer card's accent bar sits at the TOP edge on desktop (flipped
     because hub is below it). With the vertical stack, hub is now ABOVE,
     so restore the accent bar to the top on all three cards. */
  .ecosystem-diagram .node-consumers .node-accent-bar {
    top: 0;
    bottom: auto;
  }
  .ecosystem-diagram .node-consumers .node-arrival-glow {
    background: radial-gradient(
      circle at 50% 0%,
      rgba(var(--node-accent-rgb), 0.55) 0%,
      rgba(var(--node-accent-rgb), 0.15) 35%,
      transparent 70%
    );
  }
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--carbon);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease,
              background 0.25s ease;
}

body.nav-open .nav-burger span { background: var(--ecru); }
body.nav-open .nav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .nav-burger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
body.nav-open .nav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  justify-content: center;
  padding: 96px 28px 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}

body.nav-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-overlay-inner {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.nav-overlay-links {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
  /* Override the site-wide nav { position: fixed; ... } rule */
  position: static;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}

.nav-overlay-links a {
  color: var(--ecru);
  font-family: "DM Sans", sans-serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease,
              color 0.2s ease;
}

body.nav-open .nav-overlay-links a {
  transform: translateY(0);
  opacity: 1;
}

body.nav-open .nav-overlay-links a:nth-child(1) { transition-delay: 0.08s; }
body.nav-open .nav-overlay-links a:nth-child(2) { transition-delay: 0.14s; }
body.nav-open .nav-overlay-links a:nth-child(3) { transition-delay: 0.20s; }
body.nav-open .nav-overlay-links a:nth-child(4) { transition-delay: 0.26s; }
body.nav-open .nav-overlay-links a:nth-child(5) { transition-delay: 0.32s; }

.nav-overlay-links a.active {
  color: var(--chiffon);
}
.nav-overlay-links a.active::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chiffon);
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(255, 227, 148, 0.55);
}

.nav-overlay-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 16px 24px;
  margin-top: 24px;
  background: var(--chiffon);
  color: var(--carbon);
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease,
              background 0.2s ease;
}

body.nav-open .nav-overlay-cta {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.42s;
}

.nav-overlay-cta:hover { background: #ffdd8a; }

.nav-overlay-footer {
  margin-top: auto;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

body.nav-open .nav-overlay-footer {
  opacity: 0.55;
  transition-delay: 0.52s;
}

.nav-overlay-footer span {
  color: var(--ecru);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  .nav-overlay-links a,
  .nav-overlay-cta,
  .nav-overlay-footer,
  .nav-burger span { transition-duration: 0.01ms !important; }
}

/* ============================================================
   HOME V2 HERO — ported from design handoff
   All rules scoped under body.home-v2 to avoid affecting other pages.
   Only omits: the Tweaks dev panel, the v-dark variant.
   ============================================================ */
.home-v2 { overflow-x: hidden; }

.home-v2 { background: var(--ecru); }

/* ---------- Nav ---------- */
.home-v2 .nav {
  padding: 20px 48px;
  background: rgba(245, 247, 244, 0.82);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 100;
}
.home-v2 .nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.home-v2 .nav-brand .mark { width: 26px; height: 26px; }
.home-v2 .nav-brand .wm {
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 14px;
}
.home-v2 .nav-links {
  display: flex;
  gap: 40px;
  align-items: center;
}
.home-v2 .nav-link {
  font-size: 14px;
  text-decoration: none;
  color: var(--carbon);
  position: relative;
  padding: 6px 0;
  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-v2 .nav-link:hover { opacity: 0.5; }
.home-v2 .nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: currentColor;
}
/* .home-v2 nav-cta uses the shared yellow chiffon .nav-cta styling
   defined near the top of this file (line ~88). No override needed. */

/* ---------- Hero ---------- */
.home-v2 .hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 48px 72px;
  overflow: hidden;
  background: transparent;
  color: var(--carbon);
}
.home-v2 .hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  min-height: calc(100vh - 212px);
  position: relative;
  z-index: 2;
}

/* Ambient radial glows */
.home-v2 .glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
.home-v2 .glow.a {
  top: -280px;
  left: -220px;
  width: 780px;
  height: 780px;
  background: radial-gradient(circle, #FFE394 0%, transparent 68%);
  opacity: 0.55;
  animation: hv2-drift-a 22s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
}
.home-v2 .glow.b {
  bottom: -300px;
  right: -200px;
  width: 820px;
  height: 820px;
  background: radial-gradient(circle, #BED6E3 0%, transparent 68%);
  opacity: 0.5;
  animation: hv2-drift-b 26s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
}
.home-v2 .glow.c {
  top: 40%;
  left: 42%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, #E2C1BB 0%, transparent 70%);
  opacity: 0.22;
  animation: hv2-drift-c 30s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
}
@keyframes hv2-drift-a { to { transform: translate(120px, 80px); } }
@keyframes hv2-drift-b { to { transform: translate(-80px, -100px); } }
@keyframes hv2-drift-c { to { transform: translate(-140px, 60px); } }

/* Fine grid overlay */
.home-v2 .grid-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10, 10, 10, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 10, 10, 0.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
}

/* ---------- Left column ---------- */
.home-v2 .eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}
.home-v2 .eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--carbon);
  animation: hv2-blink 2.2s ease-in-out infinite;
}
@keyframes hv2-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(1.35); }
}
.home-v2 .eyebrow-text {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.62);
}

.home-v2 .hero .display {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-size: clamp(56px, 8.4vw, 132px);
  margin: 0;
}
.home-v2 .hero .display em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.home-v2 .word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  animation: hv2-word-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hv2-word-in { to { opacity: 1; filter: blur(0); transform: none; } }

.home-v2 .lead {
  max-width: 540px;
  margin: 36px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transform: translateY(12px);
  animation: hv2-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}
@keyframes hv2-fade-up { to { opacity: 1; transform: none; } }

.home-v2 .cta-row {
  margin-top: 44px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(12px);
  animation: hv2-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}
.home-v2 .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}
.home-v2 .btn .arrow { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.home-v2 .btn:hover .arrow { transform: translateX(5px); }
.home-v2 .btn-primary { background: var(--carbon); color: #F5F7F4; }
.home-v2 .btn-primary:hover {
  transform: translateY(-2px);
  background: #1a1a1a;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}
.home-v2 .btn-secondary {
  background: transparent;
  color: var(--carbon);
  border: 1px solid var(--carbon);
}
.home-v2 .btn-secondary:hover {
  background: var(--carbon);
  color: #F5F7F4;
  transform: translateY(-2px);
}

/* Metric strip */
.home-v2 .metrics {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 56px;
  align-items: start;
  opacity: 0;
  transform: translateY(12px);
  animation: hv2-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) 1.25s forwards;
}
.home-v2 .metric .k {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 44px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--carbon);
}
.home-v2 .metric .k em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.55em;
  margin-left: 6px;
  letter-spacing: -0.01em;
}
.home-v2 .metric .lbl {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}

/* ---------- Right column: animated SVG centerpiece ---------- */
.home-v2 .stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.home-v2 .stage svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.home-v2 .knot-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.home-v2 .knot-mark img {
  width: 28%;
  filter: invert(0);
  animation: hv2-breathe 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes hv2-breathe {
  0%, 100% { transform: scale(1);     opacity: 0.95; }
  50%      { transform: scale(1.035); opacity: 1;    }
}

/* Sonar rings */
.home-v2 .sonar {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: hv2-sonar 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
  width: 160px;
  height: 160px;
}
.home-v2 .sonar.s1 { animation-delay: 0s; }
.home-v2 .sonar.s2 { animation-delay: 1.4s; }
.home-v2 .sonar.s3 { animation-delay: 2.8s; }
@keyframes hv2-sonar {
  0%   { opacity: 0.45; transform: translate(-50%, -50%) scale(0.6); }
  70%  { opacity: 0; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(2.6); }
}

/* Rotating outer tick ring */
.home-v2 .stage .stage-spin {
  transform-origin: 300px 300px;
  animation: hv2-spin 40s linear infinite;
}
@keyframes hv2-spin { to { transform: rotate(360deg); } }

/* Floating node labels around the knot */
.home-v2 .node-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  opacity: 0;
  animation: hv2-pop-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  color: var(--carbon);
  /* Override the ecosystem section's .node-label rules (same class name) */
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}
@keyframes hv2-pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.home-v2 .node-label .chip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.home-v2 .node-label .num {
  color: rgba(0, 0, 0, 0.45);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  margin-right: 4px;
}
.home-v2 .node-label em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
  margin-left: 4px;
}
.home-v2 .node-label.nl1 { top: 9%; left: 2%;  animation-delay: 1.2s;  }
.home-v2 .node-label.nl2 { top: 9%; right: 2%; animation-delay: 1.45s; }
.home-v2 .node-label.nl3 {
  bottom: 9%;
  left: 2%;
  animation-delay: 1.7s;
}

/* ============================================================
   HERO VENN DIAGRAM — three audience circles connected to COORD
   ============================================================
   Geometry (in .stage 560x560 square):
   - Equilateral triangle of circle centers, side ≈ 192px
   - Top (For You / chiffon)     center (280, 169)
   - BL  (For Retail / denim)    center (184, 335)
   - BR  (For Designers / sage)  center (376, 335)
   - Circles radius = 160, d/r ≈ 1.2 (tight Venn, small triple overlap)
   - COORD knot sits at (280, 280) — where all three meet
   In the .venn-beams SVG (viewBox 600x600), coords scale by 600/560.
*/
.home-v2 .hero-venn {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  isolation: isolate;
}

/* Thesis caption below the Venn */
.home-v2 .venn-caption {
  max-width: 540px;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.75);
  text-align: center;
  text-wrap: balance;
}
.home-v2 .venn-caption em {
  font-style: normal;
  font-weight: 500;
}
.home-v2 .v-you       { color: #B8891A; }   /* dim chiffon for readability */
.home-v2 .v-retail    { color: #3D6A85; }   /* dim denim */
.home-v2 .v-designers { color: #5F7B56; }   /* dim sage */
.home-v2 .v-close {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.92);
}

/* Glossary aside — editorial footnote defining "Decision Intelligence"
   (retailer-facing jargon the action list flagged for first-use definition).
   Visually subordinate to the thesis caption above: smaller, muted, with a
   small leading dot that echoes the eyebrow dots used elsewhere on the page. */
.home-v2 .venn-glossary {
  max-width: 540px;
  margin: 20px auto 0;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.58);
  text-align: center;
  text-wrap: balance;
}
.home-v2 .venn-glossary strong {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.86);
  letter-spacing: 0.005em;
}
.home-v2 .venn-glossary-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--br-chiffon, var(--chiffon));
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Ambient dot field — soft radial-fade behind everything */
.home-v2 .venn-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

/* The three audience circles — blend to produce overlap colors */
.home-v2 .venn-circle {
  position: absolute;
  width: 57.1%;          /* 320 / 560 */
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: multiply;
  transform-origin: center;
  will-change: transform;
  z-index: 1;
  pointer-events: auto;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-v2 .venn-circle--you {
  top: 1.6%;
  left: 21.4%;
  background: radial-gradient(circle at 38% 32%,
    rgba(255, 227, 148, 0.95) 0%,
    rgba(255, 227, 148, 0.70) 35%,
    rgba(255, 227, 148, 0.32) 70%,
    rgba(255, 227, 148, 0) 96%);
  animation: venn-breathe-a 6s ease-in-out infinite;
}
.home-v2 .venn-circle--retail {
  top: 31.3%;
  left: 4.3%;
  background: radial-gradient(circle at 62% 34%,
    rgba(190, 214, 227, 0.90) 0%,
    rgba(190, 214, 227, 0.62) 35%,
    rgba(190, 214, 227, 0.28) 70%,
    rgba(190, 214, 227, 0) 96%);
  animation: venn-breathe-b 7.2s ease-in-out infinite 0.6s;
}
.home-v2 .venn-circle--designers {
  top: 31.3%;
  right: 4.3%;
  background: radial-gradient(circle at 38% 34%,
    rgba(156, 173, 145, 0.85) 0%,
    rgba(156, 173, 145, 0.58) 35%,
    rgba(156, 173, 145, 0.26) 70%,
    rgba(156, 173, 145, 0) 96%);
  animation: venn-breathe-c 8.4s ease-in-out infinite 1.2s;
}

@keyframes venn-breathe-a {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes venn-breathe-b {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.028); }
}
@keyframes venn-breathe-c {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Circle label pills — two-line: role (caps) + intelligence tag (italic) */
.home-v2 .venn-label {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 16px 9px;
  border-radius: 18px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.08);
  mix-blend-mode: normal;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  opacity: 0;
  animation: venn-label-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.home-v2 .venn-role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.78);
}
.home-v2 .venn-tag {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.55);
}
.home-v2 .venn-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(0, 0, 0, 0.42);
}
.home-v2 .venn-circle--you .venn-label {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 1.0s;
}
.home-v2 .venn-circle--retail .venn-label {
  bottom: 6%;
  left: -4%;
  animation-delay: 1.2s;
}
.home-v2 .venn-circle--designers .venn-label {
  bottom: 6%;
  right: -4%;
  animation-delay: 1.4s;
}
@keyframes venn-label-in {
  from { opacity: 0; transform: translateY(6px) translateX(var(--xshift, 0)); }
  to   { opacity: 1; transform: translateY(0) translateX(var(--xshift, 0)); }
}
.home-v2 .venn-circle--you .venn-label {
  --xshift: -50%;
}

/* Hover: highlight one audience, dim the other two */
.home-v2 .hero-venn:hover .venn-circle { opacity: 0.55; }
.home-v2 .hero-venn .venn-circle:hover { opacity: 1; transform: scale(1.05); }

/* Animated beams — each audience flows data into the COORD hub */
.home-v2 .venn-beams {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.home-v2 .beam {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 14 180;
  stroke-dashoffset: 194;
  filter: drop-shadow(0 0 3px currentColor);
}
.home-v2 .beam--you {
  stroke: #E0B830;
  color: #FFE394;
  animation: beam-travel 3.6s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.home-v2 .beam--retail {
  stroke: #7EA6BD;
  color: #BED6E3;
  animation: beam-travel 4.0s cubic-bezier(0.42, 0, 0.58, 1) infinite 1.2s;
}
.home-v2 .beam--designers {
  stroke: #7E9775;
  color: #9CAD91;
  animation: beam-travel 4.4s cubic-bezier(0.42, 0, 0.58, 1) infinite 2.4s;
}
@keyframes beam-travel {
  0%   { stroke-dashoffset: 194; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Central COORD hub */
.home-v2 .venn-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;            /* ~123px on 560 stage */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.home-v2 .venn-knot {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: venn-knot-breathe 5.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.18));
}
@keyframes venn-knot-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.home-v2 .venn-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(10, 10, 10, 0.22);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.home-v2 .venn-ripple--1 { animation: venn-ripple 4.2s ease-out infinite; }
.home-v2 .venn-ripple--2 { animation: venn-ripple 4.2s ease-out infinite 1.4s; }
.home-v2 .venn-ripple--3 { animation: venn-ripple 4.2s ease-out infinite 2.8s; }
@keyframes venn-ripple {
  0%   { transform: translate(-50%, -50%) scale(0.55); opacity: 0.5; }
  70%  { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(3.6);  opacity: 0; }
}


/* Reduced motion — freeze to static Venn snapshot */
@media (prefers-reduced-motion: reduce) {
  .home-v2 .venn-circle,
  .home-v2 .venn-knot,
  .home-v2 .venn-ripple,
  .home-v2 .beam,
  .home-v2 .venn-label {
    animation: none !important;
  }
  .home-v2 .venn-label { opacity: 1; }
  .home-v2 .beam {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.4;
  }
}

/* Narrow viewports — the Decision Intelligence / Demand Intelligence subtag
   is wider than the mobile circles; hide it and let the numbered role keep
   the slot on its own. */
@media (max-width: 640px) {
  .home-v2 .venn-tag { display: none; }
  .home-v2 .venn-role { font-size: 11px; letter-spacing: 0.06em; }
}

/* Live stat card */
.home-v2 .live-card {
  position: absolute;
  bottom: 14%;
  right: -8px;
  width: 220px;
  padding: 16px 18px;
  background: rgba(10, 10, 10, 0.92);
  color: #F5F7F4;
  border-radius: 18px;
  border: 1px solid rgba(245, 247, 244, 0.08);
  opacity: 0;
  animation: hv2-pop-in 1s cubic-bezier(0.22, 1, 0.36, 1) 1.9s forwards;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}
.home-v2 .live-card .row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 247, 244, 0.55);
}
.home-v2 .live-card .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFE394;
  animation: hv2-blink 2s infinite;
}
.home-v2 .live-card .big {
  margin-top: 10px;
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.home-v2 .live-card .big em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  color: #FFE394;
  font-weight: 400;
}
.home-v2 .live-card .sub {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(245, 247, 244, 0.7);
}

/* Garment swatches */
.home-v2 .swatch {
  position: absolute;
  width: 54px;
  height: 72px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  animation: hv2-pop-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.home-v2 .swatch::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.18), transparent 70%);
}
.home-v2 .sw1 { top: 22%; left: 8%;   background: #FFE394; animation-delay: 2.1s; }
.home-v2 .sw2 { top: 62%; left: 12%;  background: #BED6E3; animation-delay: 2.3s; }
.home-v2 .sw3 { top: 28%; right: 12%; background: #E2C1BB; animation-delay: 2.5s; }

/* Scroll cue */
.home-v2 .scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 500;
  opacity: 0;
  animation: hv2-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards;
}
.home-v2 .scroll-cue .line {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: currentColor;
  position: relative;
  overflow: hidden;
}
.home-v2 .scroll-cue .line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--carbon);
  transform: translateX(-100%);
  animation: hv2-slide-line 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes hv2-slide-line {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%);  }
  100% { transform: translateX(100%);  }
}

/* Responsive */
@media (max-width: 960px) {
  .home-v2 .hero-inner { grid-template-columns: 1fr; gap: 64px; }
  .home-v2 .stage { margin: 0 auto; max-width: 520px; }
  .home-v2 .metrics { grid-template-columns: repeat(3, auto); gap: 28px; margin-top: 48px; }
  .home-v2 .nav-links .nav-link { display: none; }
  .home-v2 .nav-cta { display: none; }
  .home-v2 .scroll-cue { display: none; }
  .home-v2 .live-card { right: 0; bottom: 12%; }
}

/* Reduced-motion: freeze decorative loops; keep entry animations quick. */
/* ---------- Tier 1 enhancements: parallax + card shine ---------- */
/* Cursor parallax on the stage — swatches + knot drift with pointer.
   Uses the `translate` property so it composes cleanly with the
   existing entry animations (which animate `transform`). */
.home-v2 .stage { --px: 0; --py: 0; }
.home-v2 .swatch,
.home-v2 .knot-mark img,
.home-v2 .venn-circle,
.home-v2 .venn-hub,
.home-v2 .venn-beams {
  transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: translate;
}
.home-v2 .sw1 { translate: calc(var(--px) * -10px) calc(var(--py) * -6px); }
.home-v2 .sw2 { translate: calc(var(--px) * 8px)   calc(var(--py) * -8px); }
.home-v2 .sw3 { translate: calc(var(--px) * -6px)  calc(var(--py) * 6px);  }
.home-v2 .knot-mark img { translate: calc(var(--px) * 3px) calc(var(--py) * 3px); }

/* Venn parallax — each circle drifts in a different direction (adds depth) */
.home-v2 .venn-circle--you       { translate: calc(var(--px) * -8px)  calc(var(--py) * -5px); }
.home-v2 .venn-circle--retail    { translate: calc(var(--px) * 10px)  calc(var(--py) * -6px); }
.home-v2 .venn-circle--designers { translate: calc(var(--px) * -10px) calc(var(--py) * 6px);  }
.home-v2 .venn-hub               { translate: calc(var(--px) * 4px)   calc(var(--py) * 4px);  }
.home-v2 .venn-beams             { translate: calc(var(--px) * 2px)   calc(var(--py) * 2px);  }

/* Traveling shine across the top edge of the live-demand card. */
.home-v2 .live-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 227, 148, 0.9) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 260% 100%;
  animation: hv2-card-shine 5.5s linear infinite;
  pointer-events: none;
  border-radius: 18px 18px 0 0;
}
@keyframes hv2-card-shine {
  0%   { background-position: 160% 0; }
  100% { background-position: -160% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .glow,
  .home-v2 .sonar,
  .home-v2 .stage .stage-spin,
  .home-v2 .knot-mark img,
  .home-v2 .eyebrow-dot,
  .home-v2 .live-card .dot,
  .home-v2 .live-card::after,
  .home-v2 .scroll-cue .line::after {
    animation: none !important;
  }
  .home-v2 .swatch,
  .home-v2 .knot-mark img { transition: none; translate: 0 0 !important; }
  .home-v2 .stage svg animateMotion,
  .home-v2 .stage svg animate {
    display: none;
  }
  .home-v2 .word,
  .home-v2 .lead,
  .home-v2 .cta-row,
  .home-v2 .metrics,
  .home-v2 .node-label,
  .home-v2 .live-card,
  .home-v2 .swatch,
  .home-v2 .scroll-cue {
    animation-duration: 0.2s !important;
    animation-delay: 0s !important;
  }
}

/* ============================================================
   HOME V2 — SECTIONS 02-08 (below the hero)
   Ported from design_handoff_homepage. All scoped under .home-v2.
   Use hv2-* prefixes for classes that would collide with the
   existing site ({.section,.section-header,.container,etc}).
   ============================================================ */

/* Brand variable aliases — the handoff uses --br-* names but this
   site's existing tokens use the legacy short names. Define --br-*
   on .home-v2 so every rule below resolves correctly. */
.home-v2 {
  --br-carbon: var(--carbon);
  --br-ecru: #F5F7F4;
  --br-chiffon: var(--chiffon);
  --br-rusty: var(--rusty);
  --br-powder: var(--denim);
  --br-tweed: var(--sage);
  --br-muted: var(--suede);
  --br-dusty: var(--rouge);
  --font-sans: "DM Sans", sans-serif;
  --font-display: "DM Sans", sans-serif;
  --font-accent: "DM Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-mid: 0.35s;
  --radius-pill: 100px;
  --border-1: rgba(0, 0, 0, 0.1);
  --border-2: rgba(0, 0, 0, 0.06);
}

/* Section base */
.home-v2 .hv2-section { position: relative; padding: 140px 48px; }
.home-v2 .hv2-section.dark { background: var(--br-carbon); color: var(--br-ecru); }
.home-v2 .hv2-section.tight { padding: 64px 48px; }
.home-v2 .hv2-container { max-width: 1440px; margin: 0 auto; position: relative; }

.home-v2 .hv2-section-head {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  margin-bottom: 88px;
  align-items: end;
}
.home-v2 .hv2-eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.home-v2 .hv2-section.dark .hv2-eyebrow,
.home-v2 .hv2-section.dark .hv2-section-head .hv2-eyebrow { color: rgba(245, 247, 244, 0.55); }
.home-v2 .hv2-eyebrow::before {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.home-v2 .hv2-eyebrow.with-dot::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--br-tweed);
  animation: hv2-blink 2s infinite;
}
.home-v2 .mission-eyebrow { color: rgba(245, 247, 244, 0.5); }
.home-v2 .mission-eyebrow::before { background: currentColor; }
.home-v2 .cta-card-eyebrow { color: rgba(245, 247, 244, 0.55); }
.home-v2 .cta-card-eyebrow::before { background: currentColor; }
.home-v2 .hv2-section-head h2 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(44px, 5.6vw, 84px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 18px 0 0;
}
.home-v2 .hv2-section-head h2 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.home-v2 .hv2-intro {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.65);
  max-width: 560px;
}
.home-v2 .hv2-section.dark .hv2-intro { color: rgba(245, 247, 244, 0.65); }

/* ---------- Audiences grid ---------- */
.home-v2 .audiences {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.home-v2 .aud-card,
.home-v2 .aud-card * { text-decoration: none; color: inherit; }
.home-v2 .aud-card {
  color: var(--br-carbon);
  --accent: var(--br-chiffon);
  position: relative;
  padding: 40px 36px 44px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.4s;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
/* Subtle woven-texture grain — ties cards to the "fabric of conscious fashion" brand voice.
   SVG fractalNoise rendered at low opacity; stitchTiles keeps the seams invisible. */
.home-v2 .aud-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.09;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.home-v2 .aud-card > * { position: relative; z-index: 1; }
.home-v2 .aud-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), var(--accent) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: -1;
}
.home-v2 .aud-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.home-v2 .aud-card:hover::after { opacity: 0.38; }
.home-v2 .aud-card .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--br-carbon);
  font-weight: 600;
  align-self: flex-start;
}
/* Numbered eyebrow — big carbon numeral, accent rule, mono caption.
   Replaces the old flat 3px stripe across the top with a more deliberate,
   editorial "section marker" anchored inside the card. */
.home-v2 .aud-card .num-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.home-v2 .aud-card .num-big {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 46px;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--br-carbon);
  font-feature-settings: "tnum" 1;
}
.home-v2 .aud-card .num-rule {
  width: 36px;
  height: 3px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0.4);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-v2 .aud-card:hover .num-rule { transform: scaleX(1); }
.home-v2 .aud-card .num-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 500;
}
.home-v2 .aud-card h3 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 28px 0 16px;
}
.home-v2 .aud-card h3 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
}
.home-v2 .aud-card p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.64);
  margin: 0;
  flex: 1;
}
.home-v2 .aud-card .stats {
  display: flex;
  gap: 20px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.home-v2 .aud-card .stat { flex: 1; }
.home-v2 .aud-card .stat .v {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.home-v2 .aud-card .stat .v em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 400;
  font-size: 0.7em;
  margin-left: 4px;
}
.home-v2 .aud-card .stat .l {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}
.home-v2 .aud-card .go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 24px;
}
.home-v2 .aud-card .go .go-text {
  position: relative;
  display: inline-block;
}
.home-v2 .aud-card .go .go-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  background: var(--accent-strong, var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-v2 .aud-card:hover .go .go-text::after { transform: scaleX(1); }
.home-v2 .aud-card .go .arr { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.home-v2 .aud-card:hover .go .arr { transform: translate(3px, -3px); }

/* Audience card mini visuals */
/* Shape marker — inline SVG tinted to match the card's accent.
   Fixes the prior mismatch where rusty/sage cards wore denim/suede shapes. */
.home-v2 .aud-card .aud-shape {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 38px;
  height: 38px;
  pointer-events: none;
  z-index: 2;
  fill: var(--accent);
  opacity: 0.95;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform: rotate(-6deg);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.04));
}
.home-v2 .aud-card:hover .aud-shape {
  transform: rotate(8deg) scale(1.14);
}
.home-v2 .aud-vis {
  position: relative;
  height: 88px;
  margin-top: 28px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
/* For You — wardrobe composition (stacked bar + labels) */
.home-v2 .aud-vis.you {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.02);
}
.home-v2 .aud-vis.you .wardrobe-bar {
  display: flex;
  height: 22px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.home-v2 .aud-vis.you .wardrobe-bar .seg {
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  animation: hv2-seg-grow 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hv2-seg-grow { to { transform: scaleX(1); } }
.home-v2 .aud-vis.you .wardrobe-labels {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1;
}
.home-v2 .aud-vis.you .wardrobe-labels em {
  font-style: normal;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  margin-right: 3px;
}

/* For Retail — forecast vs actual sparkline */
.home-v2 .aud-vis.retail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px 8px;
}
.home-v2 .aud-vis.retail .spark {
  width: 100%;
  height: 44px;
  display: block;
}
.home-v2 .aud-vis.retail .spark .ac-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: hv2-line-draw 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.home-v2 .aud-vis.retail .spark .ac-dot {
  opacity: 0;
  animation: hv2-dot-fade 0.3s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}
@keyframes hv2-line-draw { to { stroke-dashoffset: 0; } }
@keyframes hv2-dot-fade { to { opacity: 1; } }
.home-v2 .aud-vis.retail .spark-ax {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1;
}
.home-v2 .aud-vis.retail .spark-ax .pill {
  padding: 3px 7px;
  border-radius: 100px;
  background: rgba(143, 58, 51, 0.12);
  color: #6E2E28;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* For Designers — live demand feed */
.home-v2 .aud-vis.des {
  display: flex;
  align-items: center;
  padding: 10px 12px;
}
.home-v2 .aud-vis.des .demand-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.home-v2 .aud-vis.des .drow {
  display: grid;
  grid-template-columns: 8px 74px 34px 1fr;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateX(-6px);
  animation: hv2-drow-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.home-v2 .aud-vis.des .drow:nth-child(1) { animation-delay: 0.25s; }
.home-v2 .aud-vis.des .drow:nth-child(2) { animation-delay: 0.4s; }
.home-v2 .aud-vis.des .drow:nth-child(3) { animation-delay: 0.55s; }
@keyframes hv2-drow-in { to { opacity: 1; transform: none; } }
.home-v2 .aud-vis.des .ddot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9CAD91;
  box-shadow: 0 0 0 3px rgba(156, 173, 145, 0.22);
}
.home-v2 .aud-vis.des .dcity {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1;
}
.home-v2 .aud-vis.des .dcount {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--br-carbon);
  text-align: right;
  line-height: 1;
  letter-spacing: -0.01em;
}
.home-v2 .aud-vis.des .ddesc {
  font-size: 10.5px;
  color: rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

/* Designer card live chip — floats over the top-right of the demand feed */
.home-v2 .aud-vis.des { position: relative; }
.home-v2 .aud-vis.des .live-chip {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 6px;
  border-radius: 100px;
  background: rgba(85, 107, 71, 0.12);
  color: #3F5137;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}
.home-v2 .aud-vis.des .live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6F8B5E;
  box-shadow: 0 0 0 0 rgba(111, 139, 94, 0.6);
  animation: hv2-live-pulse 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes hv2-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(111, 139, 94, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(111, 139, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 139, 94, 0); }
}

/* Ticker row lifecycle — enter from bottom, leave by fading up */
.home-v2 .aud-vis.des .drow {
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-v2 .aud-vis.des .drow.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  animation: none !important;
}
.home-v2 .aud-vis.des .drow.is-entering {
  opacity: 0;
  transform: translateY(10px);
  animation: none !important;
}

/* Hover data-reveal — replay the micro-vis animations on card hover.
   JS toggles .is-replaying on the .aud-vis so the animations re-run. */
.home-v2 .aud-vis.is-replaying .wardrobe-bar .seg,
.home-v2 .aud-vis.is-replaying .spark .ac-line,
.home-v2 .aud-vis.is-replaying .spark .ac-dot,
.home-v2 .aud-vis.is-replaying .drow {
  animation-iteration-count: 1;
}

/* ---------- Pedigree marquee (light band, native-colour logos) ---------- */
.home-v2 .pedigree-section { background: var(--br-ecru); }
.home-v2 .pedigree { position: relative; overflow: hidden; }
.home-v2 .pedigree-head {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 40px;
  font-weight: 500;
}
.home-v2 .pedigree-head em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0.05em;
  margin: 0 4px;
  text-transform: none;
}
.home-v2 .pedigree-track {
  display: flex;
  gap: 64px;
  align-items: center;
  animation: hv2-marquee 42s linear infinite;
  width: max-content;
}
.home-v2 .pedigree-track img.pedigree-logo {
  height: 32px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.72;
  flex-shrink: 0;
  transition: opacity 0.25s ease;
}
.home-v2 .pedigree-track img.pedigree-logo:hover { opacity: 1; }

/* Per-logo tuning — matches the about.html pedigree wall treatment */
.home-v2 .pedigree-logo[data-logo="ey"]      { height: 34px; max-width: 140px; }
.home-v2 .pedigree-logo[data-logo="asos"]    { height: 26px; max-width: 120px; }
.home-v2 .pedigree-logo[data-logo="matalan"] { height: 34px; max-width: 110px; }
.home-v2 .pedigree-logo[data-logo="very"]    { height: 46px; max-width: 130px; }
.home-v2 .pedigree-logo[data-logo="edited"]  { height: 48px; max-width: 68px;  }
.home-v2 .pedigree-logo[data-logo="google"]  { height: 30px; max-width: 100px; }
.home-v2 .pedigree-logo[data-logo="mclaren"] { height: 26px; max-width: 160px; }
.home-v2 .pedigree-logo[data-logo="on"]      { height: 46px; max-width: 42px;  }
.home-v2 .pedigree-logo[data-logo="puma"]    { height: 28px; max-width: 120px; }

@keyframes hv2-marquee { to { transform: translateX(-50%); } }
.home-v2 .pedigree::before,
.home-v2 .pedigree::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  z-index: 2;
  pointer-events: none;
}
.home-v2 .pedigree::before { left: 0; background: linear-gradient(to right, var(--br-ecru), transparent); }
.home-v2 .pedigree::after  { right: 0; background: linear-gradient(to left, var(--br-ecru), transparent); }

/* ---------- Engines ---------- */
.home-v2 .engines-wrap { position: relative; }
.home-v2 .engine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(245, 247, 244, 0.12);
  border: 1px solid rgba(245, 247, 244, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.home-v2 .engine {
  --accent: var(--br-chiffon);
  position: relative;
  padding: 40px 32px 44px;
  background: var(--br-carbon);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  isolation: isolate;
}
.home-v2 .engine::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}
.home-v2 .engine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--accent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
  pointer-events: none;
}
.home-v2 .engine:hover::after { opacity: 0.14; }
.home-v2 .engine > :not(.modules) {
  position: relative;
  z-index: 2;
}
.home-v2 .engine .num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(245, 247, 244, 0.4);
  margin-bottom: 24px;
}
.home-v2 .engine .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(245, 247, 244, 0.15);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 28px;
}
.home-v2 .engine h4 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--br-ecru);
}
.home-v2 .engine h4 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.home-v2 .engine p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(245, 247, 244, 0.6);
  margin: 0;
  flex: 1;
}
.home-v2 .engine .modules {
  /* Pin to bottom of card so dividers align across sibling cards regardless
     of paragraph wrap. The combination of auto margin-top and flex:0 0 auto
     forces modules to sit at the card's bottom at its natural content size —
     p keeps flex:1 above but modules no longer absorbs the free space. */
  margin-top: auto;
  flex: 0 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(245, 247, 244, 0.1);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 247, 244, 0.45);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  line-height: 1.5;
  min-height: 56px;
}
/* ---------- Live Demand feed ---------- */
.home-v2 .demand {
  background: var(--br-ecru);
  padding: 140px 48px;
  position: relative;
  overflow: hidden;
}
.home-v2 .demand .glow-d {
  position: absolute;
  top: -200px;
  right: -100px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--br-tweed) 0%, transparent 70%);
  opacity: 0.25;
  pointer-events: none;
}
.home-v2 .demand-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}
.home-v2 .demand-copy h2 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(42px, 5.2vw, 76px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 18px 0 28px;
}
.home-v2 .demand-copy h2 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
}
.home-v2 .demand-copy p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.65);
  max-width: 500px;
  margin: 0 0 36px;
}
.home-v2 .demand-copy .stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  max-width: 460px;
}
.home-v2 .demand-copy .stats-row .k {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 38px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.home-v2 .demand-copy .stats-row .k em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
  font-size: 0.45em;
  margin-left: 6px;
}
.home-v2 .demand-copy .stats-row .l {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}
.home-v2 .demand-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.home-v2 .demand-panel .dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.home-v2 .dp-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-v2 .dp-title .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: hv2-blink 2s infinite;
}
.home-v2 .dp-title em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
}
.home-v2 .dp-meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.45);
}
.home-v2 .dp-feed {
  height: 360px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.home-v2 .dp-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: hv2-feed-scroll 32s linear infinite;
}
@keyframes hv2-feed-scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.home-v2 .demand-panel:hover .dp-track { animation-play-state: paused; }
.home-v2 .dp-row {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.home-v2 .dp-row .tcount {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.home-v2 .dp-row .tbody {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.75);
}
.home-v2 .dp-row .tbody em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}
.home-v2 .dp-row .tbody .meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
}
/* Chip now doubles as a photo frame. Background color stays as a graceful
   fallback if the <img> fails or is still decoding. Slightly larger (48×64)
   so the garment actually reads at real product-page scale. */
.home-v2 .dp-row .chip {
  width: 48px;
  height: 64px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}
.home-v2 .dp-row .chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-v2 .dp-row:hover .chip img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .home-v2 .dp-row .chip img { transition: none; }
  .home-v2 .dp-row:hover .chip img { transform: none; }
}

/* ---------- Mission block ---------- */
.home-v2 .mission { position: relative; }
.home-v2 .mission .m-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.home-v2 .mission h2 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(48px, 7vw, 108px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 32px 0 0;
}
.home-v2 .mission h2 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--br-chiffon);
}
.home-v2 .mission .attr {
  margin-top: 44px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 247, 244, 0.45);
  font-weight: 500;
}
.home-v2 .mission .attr em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  color: rgba(245, 247, 244, 0.7);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 14px;
}
.home-v2 .mission-flow {
  position: absolute;
  bottom: -18%;
  right: -10%;
  transform: rotate(10deg);
  width: min(640px, 50%);
  height: auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.home-v2 .mission .m-inner { position: relative; z-index: 2; }
.home-v2 .mission .glow-m {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 1000px;
  pointer-events: none;
  background: radial-gradient(circle, var(--br-chiffon) 0%, transparent 55%);
  opacity: 0.12;
}

/* ---------- Contact CTA band ---------- */
.home-v2 .cta-band {
  background: var(--br-ecru);
  padding: 120px 48px 100px;
  position: relative;
  overflow: hidden;
}
.home-v2 .cta-band-inner {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}
.home-v2 .cta-flow {
  position: absolute;
  bottom: -18%;
  right: -8%;
  width: 48%;
  height: auto;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
  transform: rotate(8deg) scaleX(-1);
}
.home-v2 .cta-band-inner { position: relative; z-index: 2; }
.home-v2 .cta-band .glow-cta {
  position: absolute;
  top: -180px;
  left: -120px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--br-rusty) 0%, transparent 68%);
  opacity: 0.5;
}
.home-v2 .cta-band .glow-cta.b {
  top: auto;
  bottom: -220px;
  left: auto;
  right: -120px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, var(--br-powder) 0%, transparent 70%);
  opacity: 0.4;
}
.home-v2 .cta-band h2 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(44px, 5.4vw, 78px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 18px 0 28px;
}
.home-v2 .cta-band h2 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
}
.home-v2 .cta-band p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.68);
  max-width: 520px;
  margin: 0 0 36px;
}
.home-v2 .cta-card {
  background: var(--br-carbon);
  color: var(--br-ecru);
  padding: 40px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.home-v2 .cta-card h3 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 16px 0 16px;
}
.home-v2 .cta-card h3 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  color: var(--br-chiffon);
  font-weight: 400;
}
.home-v2 .cta-card p {
  color: rgba(245, 247, 244, 0.65);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px;
}
.home-v2 .cta-card .btn-chiffon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  background: var(--br-chiffon);
  color: var(--br-carbon);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-v2 .cta-card .btn-chiffon:hover { transform: translateY(-2px); }

/* ---------- Footer ---------- */
.home-v2 .hv2-footer {
  background-color: var(--br-carbon);  /* color only — keeps the shared dot pattern */
  color: var(--br-ecru);
  padding: 80px 48px 36px;
  border-top: 1px solid rgba(245, 247, 244, 0.1);
}
.home-v2 .hv2-footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(245, 247, 244, 0.1);
}
.home-v2 .hv2-footer-brand .logo-img {
  height: 40px;
  margin-bottom: 24px;
}
.home-v2 .hv2-footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 247, 244, 0.55);
  max-width: 340px;
  margin: 0 0 24px;
}
.home-v2 .hv2-footer-brand p em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  color: rgba(245, 247, 244, 0.85);
}
.home-v2 .hv2-footer-brand .app-store img { height: 40px; }
.home-v2 .hv2-footer-col h5 {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 247, 244, 0.5);
  margin: 0 0 18px;
  font-weight: 600;
}
.home-v2 .hv2-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-v2 .hv2-footer-col a {
  color: var(--br-ecru);
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.2s;
}
.home-v2 .hv2-footer-col a:hover { opacity: 0.55; }
.home-v2 .hv2-footer-bottom {
  max-width: 1440px;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(245, 247, 244, 0.45);
  padding-top: 24px;
}
.home-v2 .hv2-footer-bottom .meta {
  display: flex;
  gap: 28px;
}
.home-v2 .hv2-footer-bottom .meta a {
  color: inherit;
  text-decoration: none;
}

/* Tighten the gap between the audience cards and the pedigree carousel */
.home-v2 .hv2-section[data-screen-label="02 Audiences"] { padding-bottom: 56px; }

/* Responsive */
@media (max-width: 820px) {
  .home-v2 .hv2-section { padding: 96px 24px; }
  .home-v2 .hv2-section[data-screen-label="02 Audiences"] { padding-bottom: 48px; }
  .home-v2 .hv2-section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
  .home-v2 .audiences { grid-template-columns: 1fr; }
  .home-v2 .engine-grid { grid-template-columns: repeat(2, 1fr); }
  .home-v2 .demand { padding: 96px 24px; }
  .home-v2 .demand-inner { grid-template-columns: 1fr; gap: 48px; }
  .home-v2 .cta-band { padding: 96px 24px; }
  .home-v2 .cta-band-inner { grid-template-columns: 1fr; gap: 40px; }
  .home-v2 .hv2-footer { padding: 64px 24px 36px; }
  .home-v2 .hv2-footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Pedigree marquee: the 180px edge fades were devouring narrow viewports
     (at 390px they consumed 92% of the screen). Scale fade + inter-logo gap
     down so at least 2–3 logos are visible at full opacity. */
  .home-v2 .pedigree::before,
  .home-v2 .pedigree::after { width: 48px; }
  .home-v2 .pedigree-track { gap: 40px; }
}

@media (max-width: 820px) {
  /* Narrow engine cards: the default 32px horizontal padding left only 98px
     of content width, which forced "ATTRIBUTION" in Engine 01 to wrap to
     an extra line vs. the other cards' shorter last words — dividers
     stopped aligning within a row. Reduce padding + tighten modules
     typography so all 4 tag strings wrap to the same line count. */
  .home-v2 .engine { padding: 32px 20px 36px; }
  .home-v2 .engine .modules {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  /* Breathing room between the body paragraph and the divider — on mobile
     the paragraph fills almost the whole card, so margin-top: auto on
     modules collapses to zero. A margin-bottom on p establishes a floor. */
  .home-v2 .engine p { margin-bottom: 28px; }
}

@media (max-width: 640px) {
  /* On narrow viewports the absolute-positioned LIVE chip on the Designers
     audience card visually lands on top of the first demand row's
     description ("Denim workwear"). Promote it out of absolute flow and
     into a right-aligned header row above the feed — keeps the live
     affordance, eliminates the overlap. */
  .home-v2 .aud-vis.des {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .home-v2 .aud-vis.des .live-chip {
    position: static;
    align-self: flex-end;
  }
}

@media (max-width: 480px) {
  /* Phone-tight fades + tighter per-logo max-widths so the widest marks
     (McLaren 160px, EY 140px) no longer sit mostly inside the fade zone. */
  .home-v2 .pedigree::before,
  .home-v2 .pedigree::after { width: 28px; }
  .home-v2 .pedigree-track { gap: 32px; }
  .home-v2 .pedigree-logo[data-logo="ey"]      { max-width: 110px; }
  .home-v2 .pedigree-logo[data-logo="mclaren"] { max-width: 120px; }
  .home-v2 .pedigree-logo[data-logo="asos"]    { max-width: 100px; }
  .home-v2 .pedigree-logo[data-logo="puma"]    { max-width: 100px; }
  .home-v2 .pedigree-logo[data-logo="very"]    { max-width: 104px; }
  .home-v2 .pedigree-logo[data-logo="matalan"] { max-width: 96px;  }
  .home-v2 .pedigree-logo[data-logo="google"]  { max-width: 90px;  }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .aud-vis.you .wardrobe-bar .seg,
  .home-v2 .aud-vis.retail .spark .ac-line,
  .home-v2 .aud-vis.retail .spark .ac-dot,
  .home-v2 .aud-vis.des .drow,
  .home-v2 .aud-vis.des .live-dot,
  .home-v2 .pedigree-track,
  .home-v2 .dp-track,
  .home-v2 .dp-title .dot {
    animation: none !important;
  }
  .home-v2 .aud-vis.you .wardrobe-bar .seg { transform: none; }
  .home-v2 .aud-vis.retail .spark .ac-line { stroke-dashoffset: 0; }
  .home-v2 .aud-vis.retail .spark .ac-dot { opacity: 1; }
  .home-v2 .aud-vis.des .drow { opacity: 1; transform: none; }
}

/* ============================================================
   FOR-YOU V2 — full page port (keeps existing hero accordion)
   ============================================================ */

/* Brand aliases (same mapping as .home-v2) */
.foryou-v2 {
  --br-carbon: var(--carbon);
  --br-ecru: #F5F7F4;
  --br-chiffon: var(--chiffon);
  --br-rusty: var(--rusty);
  --br-powder: var(--denim);
  --br-tweed: var(--sage);
  --br-muted: var(--suede);
  --br-dusty: var(--rouge);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--br-ecru);
}

/* Nav — reuse the same styling as home-v2 */
.foryou-v2 .nav {
  padding: 20px 48px;
  background: rgba(245, 247, 244, 0.82);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 100;
}
.foryou-v2 .nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.foryou-v2 .nav-brand .mark { width: 26px; height: 26px; }
.foryou-v2 .nav-brand .wm { font-weight: 600; letter-spacing: 0.22em; font-size: 14px; }
.foryou-v2 .nav-links { display: flex; gap: 40px; align-items: center; }
.foryou-v2 .nav-link { font-size: 14px; text-decoration: none; color: var(--carbon); position: relative; padding: 6px 0; transition: opacity 0.2s var(--ease-out); }
.foryou-v2 .nav-link:hover { opacity: 0.5; }
.foryou-v2 .nav-link.active::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: 24px; height: 2px; background: currentColor; }
/* .foryou-v2 nav-cta uses the shared yellow chiffon .nav-cta styling
   defined near the top of this file. No override needed. */

/* ---------- Hero ---------- */
.foryou-v2-hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 48px 80px;
  overflow: hidden;
  background: transparent;
  color: var(--carbon);
}
.foryou-v2-hero .hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
  min-height: calc(100vh - 220px);
  position: relative;
  z-index: 2;
}
.foryou-v2-hero .glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
.foryou-v2-hero .glow.a {
  top: -260px; left: -200px; width: 720px; height: 720px;
  background: radial-gradient(circle, var(--br-chiffon) 0%, transparent 68%);
  opacity: 0.52;
  animation: fyv2-drift-a 22s var(--ease-out) infinite alternate;
}
.foryou-v2-hero .glow.b {
  bottom: -300px; right: -220px; width: 780px; height: 780px;
  background: radial-gradient(circle, var(--br-rusty) 0%, transparent 68%);
  opacity: 0.5;
  animation: fyv2-drift-b 26s var(--ease-out) infinite alternate;
}
.foryou-v2-hero .glow.c {
  top: 38%; left: 44%; width: 460px; height: 460px;
  background: radial-gradient(circle, var(--br-tweed) 0%, transparent 70%);
  opacity: 0.2;
  animation: fyv2-drift-c 30s var(--ease-out) infinite alternate;
}
@keyframes fyv2-drift-a { to { transform: translate(120px, 80px); } }
@keyframes fyv2-drift-b { to { transform: translate(-80px, -100px); } }
@keyframes fyv2-drift-c { to { transform: translate(-140px, 60px); } }

.foryou-v2-hero .grid-lines {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10, 10, 10, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 10, 10, 0.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
}

.foryou-v2-hero .eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.foryou-v2-hero .eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--carbon); animation: fyv2-blink 2.2s ease-in-out infinite; }
@keyframes fyv2-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(1.35); } }
.foryou-v2-hero .eyebrow-text { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: rgba(0, 0, 0, 0.62); }

.foryou-v2-hero .display {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.96;
  font-size: clamp(52px, 7.4vw, 116px);
  margin: 0;
}
.foryou-v2-hero .display em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.foryou-v2 .word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  animation: fyv2-word-in 0.9s var(--ease-out) forwards;
}
@keyframes fyv2-word-in { to { opacity: 1; filter: blur(0); transform: none; } }

.foryou-v2-hero .lead {
  max-width: 520px;
  margin: 32px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transform: translateY(12px);
  animation: fyv2-fade-up 0.9s var(--ease-out) 0.9s forwards;
}
@keyframes fyv2-fade-up { to { opacity: 1; transform: none; } }

.foryou-v2-hero .cta-row {
  margin-top: 40px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0;
  transform: translateY(12px);
  animation: fyv2-fade-up 0.9s var(--ease-out) 1.05s forwards;
}
.foryou-v2-hero .app-store-badge img { height: 52px; display: block; }
.foryou-v2-hero .app-store-badge { transition: transform 0.2s var(--ease-out); text-decoration: none; }
.foryou-v2-hero .app-store-badge:hover { transform: translateY(-2px); }
.foryou-v2 .btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 100px;
  font-size: 14px; font-weight: 500;
  text-decoration: none; border: 1px solid var(--carbon);
  color: var(--carbon); background: transparent;
  cursor: pointer; transition: all 0.2s var(--ease-out);
}
.foryou-v2 .btn-outline:hover { background: var(--carbon); color: #F5F7F4; transform: translateY(-2px); }
.foryou-v2 .btn-outline .arrow { transition: transform 0.2s var(--ease-out); }
.foryou-v2 .btn-outline:hover .arrow { transform: translateX(4px); }

.foryou-v2-hero .metrics {
  margin-top: 68px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 56px;
  opacity: 0;
  transform: translateY(12px);
  animation: fyv2-fade-up 1s var(--ease-out) 1.25s forwards;
}
.foryou-v2-hero .metric .k {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 42px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.foryou-v2-hero .metric .k em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.52em;
  margin-left: 6px;
}
.foryou-v2-hero .metric .lbl {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}

.foryou-v2-hero .foryou-hero-visual {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: 100%;
  max-width: 660px;
}

.foryou-v2-hero .scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 500;
  opacity: 0;
  animation: fyv2-fade-up 1s var(--ease-out) 1.8s forwards;
  z-index: 3;
}
.foryou-v2-hero .scroll-cue .line {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: currentColor;
  position: relative;
  overflow: hidden;
}
.foryou-v2-hero .scroll-cue .line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--carbon);
  transform: translateX(-100%);
  animation: fyv2-slide-line 2.4s var(--ease-out) infinite;
}
@keyframes fyv2-slide-line {
  0% { transform: translateX(-100%); }
  60% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ---------- Shared section frame ---------- */
.foryou-v2-section {
  position: relative;
  padding: 140px 48px;
  overflow: hidden;
  background: var(--br-ecru);
  color: var(--carbon);
}
.foryou-v2-section.dark { background: var(--carbon); color: var(--br-ecru); }
.foryou-v2-section.day-section {
  background: linear-gradient(180deg, transparent, rgba(226, 193, 187, 0.08), transparent);
}
.foryou-v2-container {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.foryou-v2 .sec-head {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  margin-bottom: 88px;
  align-items: end;
}
.foryou-v2 .sec-head h2 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.98;
  font-size: clamp(44px, 5.2vw, 84px);
  margin: 20px 0 0;
}
.foryou-v2 .sec-head h2 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
}
.foryou-v2 .sec-head .intro {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.7);
  max-width: 620px;
}
.foryou-v2-section.dark .sec-head h2 { color: var(--br-ecru); }
.foryou-v2-section.dark .sec-head .intro { color: rgba(245, 247, 244, 0.7); }
.foryou-v2-section.dark .eyebrow,
.foryou-v2-section.dark .eyebrow-hair { color: rgba(245, 247, 244, 0.65); }
.foryou-v2-section.dark .sec-head h2 em { color: var(--br-chiffon); }

.foryou-v2 .eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.62);
}
.foryou-v2 .eyebrow-hair { display: inline-flex; align-items: center; gap: 14px; }
.foryou-v2 .eyebrow-hair::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

/* ---------- 02 · Verb marquee ---------- */
.foryou-v2 .verb-band {
  padding: 40px 0;
  overflow: hidden;
  background: var(--carbon);
  color: var(--br-ecru);
  position: relative;
}
.foryou-v2 .verb-band::before,
.foryou-v2 .verb-band::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 3;
  pointer-events: none;
}
.foryou-v2 .verb-band::before { left: 0; background: linear-gradient(90deg, var(--carbon), transparent); }
.foryou-v2 .verb-band::after { right: 0; background: linear-gradient(-90deg, var(--carbon), transparent); }
.foryou-v2 .verb-track {
  display: flex;
  gap: 64px;
  align-items: center;
  white-space: nowrap;
  animation: fyv2-verb-scroll 34s linear infinite;
  width: max-content;
}
@keyframes fyv2-verb-scroll { to { transform: translateX(-50%); } }
.foryou-v2 .verb-track .v {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 6vw, 84px);
  letter-spacing: -0.02em;
}
.foryou-v2 .verb-track .dot {
  width: 28px; height: 28px;
  background: url("assets/shapes/shape-4-chiffon.png") center/contain no-repeat;
  flex: none;
}

/* ---------- 03 · Features grid ---------- */
.foryou-v2 .feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.foryou-v2 .feat {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
/* Fabric-noise grain — repurposed from the old flat top-stripe for brand cohesion
   with the home audience cards. Same SVG noise, same opacity, same blend. */
.foryou-v2 .feat::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.08;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.foryou-v2 .feat > * { position: relative; z-index: 1; }
.foryou-v2 .feat::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), var(--accent), transparent 40%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.foryou-v2 .feat:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.foryou-v2 .feat:hover::after { opacity: 0.32; }

/* Legacy .num (kept for any cards that still use it — harmless). */
.foryou-v2 .feat .num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(0, 0, 0, 0.4);
}

/* Numbered eyebrow — big display numeral + accent rule that grows on hover.
   Matches the home audience-card grammar for site-wide cohesion. */
.foryou-v2 .feat .num-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 4px;
}
.foryou-v2 .feat .num-big {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 40px;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--br-carbon);
  font-feature-settings: "tnum" 1;
}
.foryou-v2 .feat .num-rule {
  width: 32px;
  height: 2.5px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0.45);
  transition: transform 0.55s var(--ease-out);
}
.foryou-v2 .feat:hover .num-rule { transform: scaleX(1); }

/* Icon badge — saturation bumped (55% → 70%) so badges register as present,
   not ghosted. Subtle accent ring at hover to hint interaction. */
.foryou-v2 .feat .ico {
  margin: 20px 0 16px;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 70%, white);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 85%, black 10%);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.foryou-v2 .feat:hover .ico {
  transform: rotate(-4deg) scale(1.04);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 90%, black 15%);
}
.foryou-v2 .feat h3 {
  margin: 0 0 10px;
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.foryou-v2 .feat h3 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
}
.foryou-v2 .feat p {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.65);
}
.foryou-v2 .feat .minivis {
  height: 78px;
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.03);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
/* F1 · Digital wardrobe — composition bar with category labels */
.foryou-v2 .mv-wardrobe {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 14px 14px;
}
.foryou-v2 .mv-wbar {
  display: flex;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.foryou-v2 .mv-wbar .mv-seg {
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  animation: fyv2-mv-seg 1s var(--ease-out) forwards;
}
@keyframes fyv2-mv-seg { to { transform: scaleX(1); } }
.foryou-v2 .mv-wlabels {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 9px;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1;
}
.foryou-v2 .mv-wlabels span em {
  font-style: normal;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  margin-right: 3px;
}

/* F2 · AI stylist — outfit recipe (three pieces + harmony pill) */
.foryou-v2 .mv-recipe {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 8px 12px;
}
.foryou-v2 .mv-piece {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  transform: translateX(-6px);
  animation: fyv2-mv-piece-in 0.5s var(--ease-out) forwards;
}
.foryou-v2 .mv-piece:nth-child(1) { animation-delay: 0.15s; }
.foryou-v2 .mv-piece:nth-child(2) { animation-delay: 0.28s; }
.foryou-v2 .mv-piece:nth-child(3) { animation-delay: 0.41s; }
@keyframes fyv2-mv-piece-in { to { opacity: 1; transform: none; } }
.foryou-v2 .mv-piece .mv-swatch {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.foryou-v2 .mv-piece .mv-piece-name {
  font-size: 10.5px;
  color: rgba(0, 0, 0, 0.82);
  line-height: 1;
  letter-spacing: -0.005em;
}
.foryou-v2 .mv-recipe-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  opacity: 0;
  animation: fyv2-mv-piece-in 0.5s var(--ease-out) 0.56s forwards;
}
.foryou-v2 .mv-harmony {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1;
}
.foryou-v2 .mv-harmony em {
  font-style: normal;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--br-carbon);
  letter-spacing: -0.01em;
  margin-left: 2px;
}
.foryou-v2 .mv-ctx {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 6px;
  border-radius: 100px;
  background: rgba(226, 193, 187, 0.35);
  color: #6E2E28;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.foryou-v2 .mv-ctx-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #8F3A33;
}

/* F4 scan viewport keeps centered layout */
.foryou-v2 .mv-scan {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* F3 · Virtual try-on — split-frame: flat-lay → arrow → on-figure + fit metric */
.foryou-v2 .mv-tryon-split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding: 6px 14px 8px;
  column-gap: 10px;
  row-gap: 4px;
}
.foryou-v2 .tryon-flat,
.foryou-v2 .tryon-worn {
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(4px);
  animation: fyv2-tryon-in 0.55s var(--ease-out) forwards;
}
.foryou-v2 .tryon-flat { animation-delay: 0.15s; }
.foryou-v2 .tryon-worn { animation-delay: 0.45s; }
.foryou-v2 .tryon-flat svg { width: 34px; height: 28px; display: block; }
.foryou-v2 .tryon-worn svg { width: 32px; height: 42px; display: block; }
@keyframes fyv2-tryon-in { to { opacity: 1; transform: none; } }

.foryou-v2 .tryon-arrow {
  color: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  opacity: 0;
  animation: fyv2-tryon-arrow 0.5s var(--ease-out) 0.3s forwards,
             fyv2-tryon-arrow-pulse 2.4s ease-in-out 0.9s infinite;
}
.foryou-v2 .tryon-arrow svg { width: 20px; height: 10px; display: block; }
@keyframes fyv2-tryon-arrow { to { opacity: 1; } }
@keyframes fyv2-tryon-arrow-pulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.foryou-v2 .tryon-fit {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1;
  opacity: 0;
  animation: fyv2-tryon-in 0.5s var(--ease-out) 0.75s forwards;
}
.foryou-v2 .tryon-fit .tryon-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
}
.foryou-v2 .tryon-fit .tryon-pct {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--br-carbon);
  letter-spacing: -0.01em;
  text-transform: none;
}
.foryou-v2 .tryon-fit .tryon-word {
  opacity: 0.65;
}

/* F4 polish — FOUND label fades in mid-scan */
.foryou-v2 .mv-scan-found {
  position: absolute;
  left: 10px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 7px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1;
  opacity: 0;
  transform: translateY(4px);
  animation: fyv2-mv-found 2.4s var(--ease-out) infinite;
}
.foryou-v2 .mv-scan-found .mv-scan-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--br-powder);
  box-shadow: 0 0 0 2px rgba(190, 214, 227, 0.45);
}
.foryou-v2 .mv-scan-found .mv-scan-label em {
  font-style: normal;
  font-weight: 700;
  color: var(--br-carbon);
  text-transform: none;
  letter-spacing: 0;
}
@keyframes fyv2-mv-found {
  0%, 42%   { opacity: 0; transform: translateY(4px); }
  55%, 86%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(-2px); }
}

/* F5 · Marketplace chips with counts */
.foryou-v2 .mv-chips {
  position: absolute;
  inset: 10px 10px 10px 10px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.foryou-v2 .mv-chips span {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.07);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 0.01em;
  line-height: 1.15;
  opacity: 0;
  transform: translateY(4px) scale(0.95);
  animation: fyv2-mv-chip-in 0.45s var(--ease-out) forwards;
}
.foryou-v2 .mv-chips span:nth-child(1) { animation-delay: 0.08s; }
.foryou-v2 .mv-chips span:nth-child(2) { animation-delay: 0.16s; }
.foryou-v2 .mv-chips span:nth-child(3) { animation-delay: 0.24s; }
.foryou-v2 .mv-chips span:nth-child(4) { animation-delay: 0.32s; }
.foryou-v2 .mv-chips span:nth-child(5) { animation-delay: 0.40s; }
.foryou-v2 .mv-chips span:nth-child(6) { animation-delay: 0.48s; }
@keyframes fyv2-mv-chip-in { to { opacity: 1; transform: none; } }
.foryou-v2 .mv-chips span em {
  font-style: normal;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-weight: 600;
  color: var(--br-carbon);
  margin-left: 3px;
  letter-spacing: 0;
}

/* F6 · Wardrobe insights — cost-per-wear micro-dashboard */
.foryou-v2 .mv-cpw {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px 6px;
}
.foryou-v2 .mv-cpw-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.foryou-v2 .mv-cpw-big {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--br-carbon);
  line-height: 0.9;
  font-feature-settings: "tnum" 1;
}
.foryou-v2 .mv-cpw-sym {
  font-size: 15px;
  vertical-align: baseline;
  margin-right: 1px;
  color: rgba(0, 0, 0, 0.55);
}
.foryou-v2 .mv-cpw-unit {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 400;
  margin-left: 3px;
  letter-spacing: 0.02em;
  font-style: italic;
}
.foryou-v2 .mv-cpw-trend {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(138, 111, 40, 0.14);
  color: #6A5418;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.foryou-v2 .mv-cpw-arrow {
  font-size: 10px;
  line-height: 1;
  position: relative;
  top: 1px;
}
.foryou-v2 .mv-cpw-since {
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.04em;
}
.foryou-v2 .mv-cpw-spark {
  width: 100%;
  height: 22px;
  display: block;
}
.foryou-v2 .mv-cpw-spark .mv-cpw-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: fyv2-cpw-draw 1.4s var(--ease-out) 0.2s forwards;
}
.foryou-v2 .mv-cpw-spark .mv-cpw-dot {
  opacity: 0;
  animation: fyv2-cpw-dot 0.3s var(--ease-out) 1.4s forwards;
}
@keyframes fyv2-cpw-draw { to { stroke-dashoffset: 0; } }
@keyframes fyv2-cpw-dot { to { opacity: 1; } }

/* ---------- 04 · Day in outfits ---------- */
.foryou-v2 .day-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.foryou-v2 .day-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.foryou-v2 .day-card .timebar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}
.foryou-v2 .day-card .timebar .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.foryou-v2 .day-phone {
  width: 240px;
  height: 480px;
  border-radius: 40px;
  background: var(--carbon);
  padding: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
}
.foryou-v2 .day-phone .screen {
  width: 100%;
  height: 100%;
  border-radius: 34px;
  background: var(--br-ecru);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px 16px 16px;
  position: relative;
}
.foryou-v2 .day-phone .screen::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 20px;
  background: var(--carbon);
  border-radius: 14px;
}
.foryou-v2 .day-phone h4 {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.foryou-v2 .day-phone h4 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
  font-size: 14px;
  margin-left: 2px;
}
.foryou-v2 .day-phone .sub {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 4px;
  margin-bottom: 14px;
}
.foryou-v2 .day-phone .look {
  flex: 1;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-rows: 1.3fr 1fr 0.9fr;
  gap: 5px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
}
.foryou-v2 .day-phone .look .piece {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.foryou-v2 .day-phone .tags {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.foryou-v2 .day-phone .tags span {
  font-size: 8px;
  padding: 3px 6px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.05);
  font-weight: 500;
}
.foryou-v2 .day-card h3 {
  margin: 22px 0 8px;
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.foryou-v2 .day-card h3 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
}
.foryou-v2 .day-card p {
  margin: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.5;
  max-width: 280px;
}

/* ---------- 05 · Cost per wear ---------- */
.foryou-v2 .cpw {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
}
.foryou-v2 .cpw-examples {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.foryou-v2 .cpw-example {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.foryou-v2 .cpw-example.chiffon { background: rgba(255, 227, 148, 0.25); }
.foryou-v2 .cpw-example.powder  { background: rgba(190, 214, 227, 0.25); }
.foryou-v2 .cpw-example.rusty   { background: rgba(226, 193, 187, 0.2); }
.foryou-v2 .cpw-example .swatch {
  width: 46px;
  height: 60px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex: none;
  position: relative;
  overflow: hidden;
}
.foryou-v2 .cpw-example .swatch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.foryou-v2 .cpw-example .body { flex: 1; }
.foryou-v2 .cpw-example .title { font-size: 14px; font-weight: 600; }
.foryou-v2 .cpw-example .meta {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 2px;
}
.foryou-v2 .cpw-example .meta em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
}
.foryou-v2 .cpw-example .badge {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.foryou-v2 .cpw-example .badge.is-hero { color: var(--br-tweed); }
.foryou-v2 .cpw-example .badge.is-watch { color: var(--br-rusty); }

.foryou-v2 .cpw-panel {
  background: var(--carbon);
  color: var(--br-ecru);
  border-radius: 28px;
  padding: 48px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2);
}
.foryou-v2 .cpw-panel::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--br-chiffon), transparent 65%);
  opacity: 0.25;
}
.foryou-v2 .cpw-panel .eye {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 247, 244, 0.55);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.foryou-v2 .cpw-panel .eye .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--br-chiffon);
  box-shadow: 0 0 10px var(--br-chiffon);
}
.foryou-v2 .cpw-big {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(72px, 8vw, 120px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0;
}
.foryou-v2 .cpw-big .pound {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--br-chiffon);
  font-size: 0.7em;
  margin-right: 6px;
}
.foryou-v2 .cpw-sub {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-size: 22px;
  color: rgba(245, 247, 244, 0.7);
  margin-top: 8px;
}
.foryou-v2 .cpw-controls {
  margin-top: 40px;
  display: grid;
  gap: 22px;
}
.foryou-v2 .cpw-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px;
}
.foryou-v2 .cpw-row label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 247, 244, 0.55);
  font-weight: 500;
}
.foryou-v2 .cpw-row .val {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.foryou-v2 .cpw-row .val em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(245, 247, 244, 0.5);
  font-size: 14px;
  margin-left: 4px;
}
.foryou-v2 .cpw input[type=range] {
  grid-column: 1 / -1;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: rgba(245, 247, 244, 0.15);
  outline: none;
  border-radius: 2px;
  margin-top: 12px;
}
.foryou-v2 .cpw input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--br-chiffon);
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}
.foryou-v2 .cpw input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.foryou-v2 .cpw input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--br-chiffon);
  border: none;
  cursor: pointer;
}
.foryou-v2 .cpw-foot {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 247, 244, 0.1);
  font-size: 12px;
  color: rgba(245, 247, 244, 0.55);
  line-height: 1.55;
}
.foryou-v2 .cpw-foot em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  color: rgba(245, 247, 244, 0.85);
  font-weight: 400;
}

/* ---------- 06 · Marketplace tiers ---------- */
.foryou-v2 .tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 12px;
  background: rgba(245, 247, 244, 0.12);
  border: 1px solid rgba(245, 247, 244, 0.12);
  border-radius: 20px;
  overflow: hidden;
}
.foryou-v2 .tier {
  position: relative;
  padding: 44px 36px 40px;
  background: var(--carbon);
  color: var(--br-ecru);
  isolation: isolate;
  overflow: hidden;
  transition: background 0.3s var(--ease-out);
}
.foryou-v2 .tier::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.foryou-v2 .tier::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--accent), transparent 40%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.foryou-v2 .tier:hover::before { transform: scaleX(1); }
.foryou-v2 .tier:hover::after { opacity: 0.16; }
.foryou-v2 .tier .num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(245, 247, 244, 0.4);
}
.foryou-v2 .tier h4 {
  margin: 22px 0 10px;
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.foryou-v2 .tier h4 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.foryou-v2 .tier p {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(245, 247, 244, 0.65);
}
.foryou-v2 .tier .count {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(245, 247, 244, 0.5);
  text-transform: uppercase;
  padding-top: 16px;
  border-top: 1px solid rgba(245, 247, 244, 0.1);
}
.foryou-v2 .tier .count strong {
  color: var(--br-ecru);
  font-weight: 600;
}

/* ---------- 07 · Mission ---------- */
.foryou-v2-mission {
  padding: 160px 48px;
  text-align: center;
  background: var(--carbon);
  color: var(--br-ecru);
  position: relative;
  overflow: hidden;
}
.foryou-v2-mission .glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, var(--br-chiffon), transparent 65%);
  opacity: 0.1;
  pointer-events: none;
}
.foryou-v2-mission .foryou-v2-container { max-width: 1100px; }
.foryou-v2-mission .eye {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 247, 244, 0.55);
  margin-bottom: 32px;
}
.foryou-v2-mission h2 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-size: clamp(44px, 6.4vw, 96px);
  margin: 0;
}
.foryou-v2-mission h2 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--br-chiffon);
}
.foryou-v2-mission .foot {
  margin-top: 48px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 247, 244, 0.55);
}

/* ---------- 08 · CTA band ---------- */
.foryou-v2-cta {
  position: relative;
  padding: 140px 48px;
  overflow: hidden;
  background: var(--br-ecru);
}
.foryou-v2-cta .glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.foryou-v2-cta .glow.a {
  top: -160px; left: -140px;
  width: 540px; height: 540px;
  background: radial-gradient(circle, var(--br-rusty), transparent 65%);
  opacity: 0.5;
  animation: fyv2-drift-a 24s var(--ease-out) infinite alternate;
}
.foryou-v2-cta .glow.b {
  bottom: -160px; right: -140px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--br-powder), transparent 65%);
  opacity: 0.5;
  animation: fyv2-drift-b 26s var(--ease-out) infinite alternate;
}
.foryou-v2-cta .cta-inner {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 80px;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.foryou-v2-cta h2 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(44px, 5.4vw, 80px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 20px 0 0;
}
.foryou-v2-cta h2 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
}
.foryou-v2-cta p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.7);
  max-width: 540px;
  margin: 28px 0 36px;
}
.foryou-v2-cta .cta-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.foryou-v2-cta .app-store-badge img { height: 52px; display: block; }
.foryou-v2-cta .cta-card {
  background: var(--carbon);
  color: var(--br-ecru);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}
.foryou-v2-cta .cta-card .eye {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 247, 244, 0.55);
  margin-bottom: 14px;
}
.foryou-v2-cta .cta-card h3 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  line-height: 1.1;
}
.foryou-v2-cta .cta-card h3 em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--br-chiffon);
}
.foryou-v2-cta .cta-card p {
  font-size: 14px;
  color: rgba(245, 247, 244, 0.7);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: none;
}
.foryou-v2-cta .btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  background: var(--br-chiffon);
  color: var(--carbon);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s var(--ease-out);
}
.foryou-v2-cta .btn-pill:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ---------- 09 · Footer ---------- */
.foryou-v2-footer {
  background-color: var(--carbon);  /* color only — keeps the shared dot pattern */
  color: var(--br-ecru);
  padding: 80px 48px 36px;
  border-top: 1px solid rgba(245, 247, 244, 0.1);
}
.foryou-v2-footer .footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
}
.foryou-v2-footer .footer-brand .mark {
  width: 28px;
  filter: invert(1);
  margin-bottom: 18px;
  display: block;
}
.foryou-v2-footer .footer-brand .wm {
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 14px;
  margin-bottom: 18px;
}
.foryou-v2-footer .footer-brand p {
  font-size: 13px;
  color: rgba(245, 247, 244, 0.6);
  line-height: 1.55;
  max-width: 260px;
  margin: 0 0 22px;
}
.foryou-v2-footer .footer-brand p em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  color: rgba(245, 247, 244, 0.85);
  font-weight: 400;
}
.foryou-v2-footer .footer-brand .apps img { height: 40px; opacity: 0.85; display: block; }
.foryou-v2-footer .footer-col h6 {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 247, 244, 0.5);
  font-weight: 500;
}
.foryou-v2-footer .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.foryou-v2-footer .footer-col a {
  color: var(--br-ecru);
  text-decoration: none;
  font-size: 13px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.foryou-v2-footer .footer-col a:hover { opacity: 0.55; }
.foryou-v2-footer .footer-bottom {
  max-width: 1440px;
  margin: 64px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(245, 247, 244, 0.1);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(245, 247, 244, 0.5);
}
.foryou-v2-footer .footer-bottom .r {
  display: flex;
  gap: 24px;
}
.foryou-v2-footer .footer-bottom a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .foryou-v2 .nav-links .nav-link,
  .foryou-v2 .nav-links .nav-cta { display: none; }
  .foryou-v2-hero .hero-inner,
  .foryou-v2 .cpw,
  .foryou-v2-cta .cta-inner { grid-template-columns: 1fr; gap: 56px; }
  .foryou-v2 .sec-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; }
  .foryou-v2 .feat-grid,
  .foryou-v2 .day-grid,
  .foryou-v2 .tiers-grid { grid-template-columns: 1fr; }
  .foryou-v2 .tiers-grid { border-radius: 16px; }
  .foryou-v2-hero .metrics { gap: 28px; }
  .foryou-v2-section { padding: 96px 24px; }
  .foryou-v2-hero { padding: 120px 24px 72px; }
  .foryou-v2-cta { padding: 96px 24px; }
  .foryou-v2-mission { padding: 96px 24px; }
  .foryou-v2-footer { padding: 64px 24px 28px; }
  .foryou-v2-footer .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .foryou-v2-footer .footer-bottom { flex-direction: column; gap: 12px; }
  .foryou-v2-hero .scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .foryou-v2 .glow,
  .foryou-v2 .eyebrow-dot,
  .foryou-v2 .verb-track,
  .foryou-v2 .mv-wbar .mv-seg,
  .foryou-v2 .mv-piece,
  .foryou-v2 .mv-recipe-foot,
  .foryou-v2 .mv-scan-found,
  .foryou-v2 .mv-chips span,
  .foryou-v2 .tryon-flat,
  .foryou-v2 .tryon-worn,
  .foryou-v2 .tryon-arrow,
  .foryou-v2 .tryon-fit,
  .foryou-v2 .mv-cpw-spark .mv-cpw-line,
  .foryou-v2 .mv-cpw-spark .mv-cpw-dot,
  .foryou-v2-hero .scroll-cue .line::after {
    animation: none !important;
  }
  .foryou-v2 .mv-wbar .mv-seg { transform: none; }
  .foryou-v2 .mv-piece,
  .foryou-v2 .mv-recipe-foot,
  .foryou-v2 .mv-scan-found,
  .foryou-v2 .mv-chips span,
  .foryou-v2 .tryon-flat,
  .foryou-v2 .tryon-worn,
  .foryou-v2 .tryon-arrow,
  .foryou-v2 .tryon-fit { opacity: 1; transform: none; }
  .foryou-v2 .mv-cpw-spark .mv-cpw-line { stroke-dashoffset: 0; }
  .foryou-v2 .mv-cpw-spark .mv-cpw-dot { opacity: 1; }
  .foryou-v2 .word,
  .foryou-v2-hero .lead,
  .foryou-v2-hero .cta-row,
  .foryou-v2-hero .metrics,
  .foryou-v2-hero .scroll-cue {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
}

/* ============================================================
   BRAND SHAPE BADGES — Shape 2 scallop sits subtly behind key stats
   ============================================================ */
.stat-badge {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.stat-badge::before {
  content: "";
  position: absolute;
  inset: -0.14em -0.32em;
  background-image: url("assets/shapes/shape-2-chiffon.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}
.stat-badge--rouge::before { background-image: url("assets/shapes/shape-2-rouge.png"); }

/* ============================================================
   POLICY PAGES — Privacy Policy / Terms & Conditions
   Editorial legal-document layout: large Fraunces-italic title,
   metadata dl, sticky numbered TOC on the left, generous single-
   column body on the right. Scroll-spy highlights the TOC entry
   for the section currently in view.
============================================================ */
.policy-page { background: var(--ecru); }

.policy {
  max-width: 1200px;
  margin: 0 auto;
  padding: 140px 48px 80px;
}

/* --- Head ---------------------------------------------------- */
.policy-head {
  margin-bottom: 72px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
}
.policy-head::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -180px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--chiffon) 0%, transparent 66%);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.policy-head-inner { position: relative; z-index: 1; max-width: 840px; }

.policy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 28px;
}
.policy-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--carbon);
}

.policy-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(54px, 8vw, 96px);
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--carbon);
  margin: 0 0 28px;
}
.policy-title em {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
}

.policy-intro {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.72);
  max-width: 640px;
  margin: 0 0 40px;
}

.policy-meta {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 32px 48px;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  justify-content: start;
}
.policy-meta div { display: flex; flex-direction: column; gap: 4px; }
.policy-meta dt {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}
.policy-meta dd {
  margin: 0;
  font-size: 14px;
  color: var(--carbon);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.policy-meta dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s ease;
}
.policy-meta dd a:hover { border-bottom-color: var(--carbon); }

/* --- Layout -------------------------------------------------- */
.policy-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 80px;
  align-items: flex-start;
}

/* --- Table of Contents --------------------------------------- */
.policy-toc {
  position: sticky;
  top: 100px;
  align-self: start;
}
.policy-toc-inner {
  padding: 4px 0;
}
.policy-toc-label {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.48);
  font-weight: 500;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.policy-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.policy-toc-list li { margin: 0; }
.policy-toc-list a {
  display: block;
  padding: 8px 0 8px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.56);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease, padding 0.25s ease;
  font-feature-settings: "tnum" 1;
}
.policy-toc-list a:hover {
  color: var(--carbon);
  border-left-color: rgba(0, 0, 0, 0.2);
}
.policy-toc-list a.is-current {
  color: var(--carbon);
  border-left-color: var(--carbon);
  font-weight: 500;
  padding-left: 18px;
}

/* --- Article body -------------------------------------------- */
.policy-body {
  font-family: "DM Sans", sans-serif;
  color: rgba(0, 0, 0, 0.82);
  font-size: 16px;
  line-height: 1.72;
  max-width: 680px;
  font-feature-settings: "kern" 1, "liga" 1;
}
.policy-body > section {
  padding: 48px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  scroll-margin-top: 96px;
}
.policy-body > section:first-child { padding-top: 0; }
.policy-body > section:last-child { border-bottom: none; }

.policy-body h2 {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--carbon);
  margin: 0 0 20px;
  position: relative;
}
.policy-body h2::before {
  content: counter(policy-section, decimal-leading-zero);
  counter-increment: policy-section;
  position: absolute;
  left: -72px;
  top: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.35);
}
.policy-body { counter-reset: policy-section; }

.policy-body p {
  margin: 0 0 18px;
}
.policy-body p:last-child { margin-bottom: 0; }

.policy-body em {
  font-style: italic;
  color: var(--carbon);
  font-weight: 500;
}

.policy-body a {
  color: var(--carbon);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.policy-body a:hover {
  border-bottom-color: var(--carbon);
  background: rgba(255, 227, 148, 0.28);
}

.policy-body ul,
.policy-body ol {
  margin: 0 0 22px;
  padding: 0 0 0 24px;
}
.policy-body li {
  margin-bottom: 10px;
  padding-left: 6px;
}
.policy-body ul li::marker {
  color: rgba(0, 0, 0, 0.35);
  font-size: 0.85em;
}

.policy-address {
  margin-top: 24px;
  padding: 18px 22px;
  background: rgba(0, 0, 0, 0.035);
  border-left: 2px solid var(--carbon);
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.7);
}

/* Sub-section headings (for "a. Information You Provide Voluntarily" etc) */
.policy-body h3 {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: var(--carbon);
  margin: 36px 0 14px;
}

/* Label-level headings (Technical Measures:, How We Notify You:, etc) */
.policy-body h4 {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--carbon);
  margin: 22px 0 8px;
}

.policy-body strong { color: var(--carbon); font-weight: 600; }

/* Inline callouts — Important / Note / Disclaimer blocks */
.policy-body .policy-note {
  margin: 20px 0;
  padding: 14px 20px;
  background: rgba(255, 227, 148, 0.22);
  border-left: 3px solid rgba(138, 111, 40, 0.55);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.82);
}
.policy-body .policy-note.is-warning {
  background: rgba(226, 193, 187, 0.22);
  border-left-color: #8F3A33;
}
.policy-body .policy-note strong { color: var(--carbon); }

/* Data Controller panel — sits between the head and the TOC/body layout */
.policy-controller {
  max-width: 1200px;
  margin: -40px auto 72px;
  padding: 0 48px;
}
.policy-controller-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  padding: 28px 36px;
  background: rgba(0, 0, 0, 0.035);
  border-left: 3px solid var(--carbon);
  border-radius: 0 14px 14px 0;
}
.policy-controller-label {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 12px;
  font-weight: 500;
}
.policy-controller p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.78);
}
.policy-controller p strong { color: var(--carbon); font-weight: 600; }
.policy-controller-address {
  font-size: 13px;
  line-height: 1.7;
  color: var(--carbon);
  font-weight: 500;
  border-left: 1px dashed rgba(0, 0, 0, 0.16);
  padding-left: 32px;
  align-self: center;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .policy-controller { padding: 0 24px; margin-bottom: 48px; }
  .policy-controller-inner { grid-template-columns: 1fr; gap: 20px; padding: 22px 22px; }
  .policy-controller-address {
    padding-left: 0;
    border-left: none;
    padding-top: 16px;
    border-top: 1px dashed rgba(0, 0, 0, 0.16);
    white-space: normal;
  }
}

/* --- Responsive --------------------------------------------- */
@media (max-width: 960px) {
  .policy { padding: 96px 24px 64px; }
  .policy-head { margin-bottom: 48px; }
  .policy-layout { grid-template-columns: 1fr; gap: 48px; }
  .policy-toc { position: static; }
  .policy-toc-inner {
    padding: 20px 22px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }
  .policy-toc-list a { font-size: 12px; }
  .policy-body { max-width: none; }
  .policy-body h2::before { position: static; display: block; margin-bottom: 6px; }
  .policy-meta { grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
}
@media (max-width: 560px) {
  .policy-title { font-size: 48px; }
  .policy-body h2 { font-size: 24px; }
  .policy-meta { grid-template-columns: 1fr; }
}
.stat-badge--chiffon::before { background-image: url("assets/shapes/shape-2-chiffon.png"); }

/* ============================================================
   COOKIE CONSENT BANNER — pinned bottom, slides up, dismisses
   to localStorage. Minimal, monochrome, brand-aligned.
============================================================ */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  max-width: 820px;
  margin: 0 auto;
  background: var(--carbon, #0A0A0A);
  color: #F5F7F4;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
.cookie-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 18px 22px;
}
.cookie-banner__copy {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(245, 247, 244, 0.82);
}
.cookie-banner__copy a {
  color: #F5F7F4;
  border-bottom: 1px solid rgba(245, 247, 244, 0.45);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.cookie-banner__copy a:hover { border-bottom-color: #F5F7F4; }
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-banner__btn {
  appearance: none;
  border: none;
  padding: 10px 18px;
  border-radius: 100px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.cookie-banner__btn--primary {
  background: var(--chiffon, #FFE394);
  color: #0A0A0A;
}
.cookie-banner__btn--primary:hover { background: #FFF1B8; transform: translateY(-1px); }
.cookie-banner__btn--secondary {
  background: transparent;
  color: rgba(245, 247, 244, 0.78);
  box-shadow: inset 0 0 0 1px rgba(245, 247, 244, 0.2);
}
.cookie-banner__btn--secondary:hover { color: #F5F7F4; box-shadow: inset 0 0 0 1px rgba(245, 247, 244, 0.4); }

@media (max-width: 640px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; }
  .cookie-banner__inner { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .cookie-banner__actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: opacity 0.2s ease; transform: none; }
}

/* ============================================================
   RETAIL V4 — Decision Intelligence page
   Body class .retail-v4. Every selector below is scoped under it,
   and every component class is r-* prefixed. Reuses the site's
   global brand tokens (--carbon, --ecru, --chiffon, --rusty,
   --denim, --sage, --suede). Adds a small set of retail-only
   utility tokens (ink shades, rule, ecru-deep, gap scale).
   ============================================================ */

.retail-v4 {
  --r-ink-60: #4A4A4A;
  --r-ink-40: #6B6B6B;
  --r-ink-20: #9B9B9B;
  --r-rule: #D9D5CC;
  --r-ecru-deep: #EDEAE2;
  --r-gap-s: 8px;
  --r-gap-m: 16px;
  --r-gap-l: 32px;
  --r-gap-xl: 64px;
  --r-gap-xxl: 128px;
  --r-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  font-size: 18px;
  line-height: 1.55;
}

/* Container — narrower than the site's 1440 standard for editorial register */
.retail-v4 .r-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--r-gap-l);
}

/* ---------- Section labels ---------- */
.retail-v4 .r-sec-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r-ink-60);
  margin-bottom: var(--r-gap-m);
  display: flex;
  align-items: center;
  gap: 12px;
}
.retail-v4 .r-sec-label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--carbon);
}
.retail-v4 .r-num { font-variant-numeric: tabular-nums; }

/* ---------- Typography ---------- */
.retail-v4 .r-display {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(56px, 9vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 400;
}
.retail-v4 .r-display em { font-style: italic; font-weight: 400; }

.retail-v4 .r-section {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: var(--r-gap-l);
}
.retail-v4 .r-section em { font-style: italic; }

.retail-v4 .r-lede {
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--r-ink-60);
  max-width: 68ch;
}
.retail-v4 .r-body {
  font-size: 18px;
  line-height: 1.6;
  color: var(--r-ink-60);
  max-width: 68ch;
}

/* ---------- Hero ---------- */
.retail-v4 .r-hero {
  padding: var(--r-gap-xxl) 0 var(--r-gap-xl);
}
.retail-v4 .r-hero .r-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--r-gap-l);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--r-ink-40);
}
.retail-v4 .r-hero .r-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--carbon);
  border-radius: 50%;
}
.retail-v4 .r-hero .r-sub {
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--r-ink-60);
  max-width: 64ch;
  margin: var(--r-gap-l) 0 var(--r-gap-xl);
  line-height: 1.5;
}
.retail-v4 .r-hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Buttons (prefixed; do not collide with site .btn) ---------- */
.retail-v4 .r-btn-primary,
.retail-v4 .r-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s var(--r-ease-out), background 0.2s var(--r-ease-out), color 0.2s var(--r-ease-out);
}
.retail-v4 .r-btn-primary {
  background: var(--carbon);
  color: var(--ecru);
  border: 1px solid var(--carbon);
}
.retail-v4 .r-btn-ghost {
  background: transparent;
  color: var(--carbon);
  border: 1px solid var(--carbon);
}
.retail-v4 .r-btn-primary:hover,
.retail-v4 .r-btn-ghost:hover { transform: translateY(-2px); }
.retail-v4 .r-btn-primary .arrow,
.retail-v4 .r-btn-ghost .arrow { transition: transform 0.2s var(--r-ease-out); }
.retail-v4 .r-btn-primary:hover .arrow,
.retail-v4 .r-btn-ghost:hover .arrow { transform: translateX(3px); }

/* ---------- Generic block frame ---------- */
.retail-v4 .r-block {
  padding: var(--r-gap-xxl) 0;
  border-top: 1px solid var(--r-rule);
}
.retail-v4 .r-block.r-no-rule { border-top: 0; }

/* ---------- 01 · Problems (5 col) ---------- */
.retail-v4 .r-problems {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--r-gap-m);
  margin-top: var(--r-gap-xl);
}
.retail-v4 .r-problem {
  background: var(--r-ecru-deep);
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.retail-v4 .r-problem .r-icon {
  width: 32px;
  height: 32px;
  color: var(--carbon);
  margin-bottom: 4px;
}
.retail-v4 .r-problem .r-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.retail-v4 .r-problem h4 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}
.retail-v4 .r-problem p {
  font-size: 14px;
  color: var(--r-ink-60);
  line-height: 1.5;
}

/* ---------- 02 / 07 · Gap cols (3 col verdict cards) ---------- */
.retail-v4 .r-gap-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r-gap-l);
  margin-top: var(--r-gap-xl);
}
.retail-v4 .r-gap-card {
  background: var(--r-ecru-deep);
  border-radius: 16px;
  padding: var(--r-gap-l);
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-m);
  transition: transform 0.3s var(--r-ease-out), box-shadow 0.3s var(--r-ease-out);
}
.retail-v4 .r-gap-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
}
.retail-v4 .r-gap-card .r-gn {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r-ink-40);
}
.retail-v4 .r-gap-card h3 {
  font-family: "DM Sans", sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.retail-v4 .r-gap-card h3 em { font-style: italic; }
.retail-v4 .r-gap-card p {
  font-size: 16px;
  color: var(--r-ink-60);
  line-height: 1.55;
}
.retail-v4 .r-verdict {
  margin-top: auto;
  padding-top: var(--r-gap-m);
  border-top: 1px solid var(--r-rule);
  font-size: 13px;
  font-weight: 500;
  color: var(--carbon);
}

/* ---------- 04 · Pillars ---------- */
.retail-v4 .r-pillar-intro {
  padding: var(--r-gap-xxl) 0 var(--r-gap-l);
  border-top: 1px solid var(--r-rule);
}
.retail-v4 .r-pillar { padding: var(--r-gap-s) 0; }
.retail-v4 .r-pillar:first-of-type { padding-top: 0; }

.retail-v4 .r-pillar-panel {
  border-radius: 20px;
  padding: var(--r-gap-l);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: var(--r-gap-l);
  align-items: center;
  border: 1.5px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 28px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--r-ease-out), box-shadow 0.4s var(--r-ease-out);
}
.retail-v4 .r-pillar-panel:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 18px 40px rgba(0, 0, 0, 0.07);
}

/* Subtle translucent shine wash on the top edge */
.retail-v4 .r-pillar-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%);
  pointer-events: none;
  border-radius: inherit;
}
.retail-v4 .r-pillar-panel > * { position: relative; z-index: 1; }

/* Alternating layout — flips media side */
.retail-v4 .r-pillar.r-flip .r-pillar-panel {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
}
.retail-v4 .r-pillar.r-flip .r-pillar-panel .r-pillar-media { order: 2; }

/* Pillar media (capability still — embedded label, dark-toned photography) */
.retail-v4 .r-pillar-media {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: var(--carbon);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.retail-v4 .r-pillar-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* Pillar content */
.retail-v4 .r-pillar-content .r-pn {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--carbon);
}
.retail-v4 .r-pillar-content h3 {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--carbon);
  margin-bottom: var(--r-gap-m);
}
.retail-v4 .r-pillar-content h3 em { font-style: italic; }

/* Inside coloured pillars the .r-lede / .r-body inherit pillar-coloured ink, not site ink */
.retail-v4 .r-pillar-content .r-lede {
  font-size: 16px;
  font-weight: 500;
  color: var(--carbon);
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
  max-width: none;
}
.retail-v4 .r-pillar-content .r-body {
  font-size: 14px;
  color: var(--carbon);
  opacity: 0.78;
  line-height: 1.55;
  margin-bottom: 10px;
  max-width: none;
}
.retail-v4 .r-pillar-note {
  margin-top: var(--r-gap-m);
  padding-top: var(--r-gap-m);
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  font-size: 13px;
  line-height: 1.5;
  color: var(--carbon);
  opacity: 0.78;
}
.retail-v4 .r-pillar-note .r-k {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  display: block;
  margin-bottom: 4px;
  opacity: 0.85;
}

/* Feed chips inside pillar 02 */
.retail-v4 .r-feed-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--r-gap-m);
  padding-top: var(--r-gap-m);
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
.retail-v4 .r-feed-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--carbon);
  backdrop-filter: blur(2px);
}

/* Pillar tonal rhythm — uses existing brand palette tokens */
.retail-v4 .r-pillar-01 .r-pillar-panel { background: var(--chiffon); border-color: #C9A340; }
.retail-v4 .r-pillar-02 .r-pillar-panel { background: var(--denim);   border-color: #5A7A8E; }
.retail-v4 .r-pillar-03 .r-pillar-panel { background: var(--rusty);   border-color: #B07A6E; }
.retail-v4 .r-pillar-04 .r-pillar-panel { background: var(--sage);    border-color: #6B7E5F; }
.retail-v4 .r-pillar-05 .r-pillar-panel { background: var(--suede);   border-color: #9F8B6E; }

/* ---------- 05 · Personas ---------- */
.retail-v4 .r-personas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--r-gap-l);
  margin-top: var(--r-gap-xl);
}
.retail-v4 .r-persona {
  background: var(--r-ecru-deep);
  border-radius: 16px;
  padding: var(--r-gap-l);
  position: relative;
  transition: transform 0.3s var(--r-ease-out), box-shadow 0.3s var(--r-ease-out);
}
.retail-v4 .r-persona:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.retail-v4 .r-persona .r-corner-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--r-ink-40);
  margin-bottom: var(--r-gap-m);
}
.retail-v4 .r-persona .r-icon {
  width: 28px;
  height: 28px;
  color: var(--carbon);
  margin-bottom: var(--r-gap-m);
}
.retail-v4 .r-persona .r-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.retail-v4 .r-persona h3 {
  font-family: "DM Sans", sans-serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: var(--r-gap-m);
  line-height: 1.1;
}
.retail-v4 .r-persona h3 em { font-style: italic; }
.retail-v4 .r-persona p {
  font-size: 16px;
  color: var(--r-ink-60);
  line-height: 1.55;
}
/* Persona tonal variants — slightly distinct ecru tones per role */
.retail-v4 .r-p-buy   { background: #E8E5DC; }
.retail-v4 .r-p-trade { background: #EAE5D3; }
.retail-v4 .r-p-merch { background: #E3E6DE; }
.retail-v4 .r-p-cfo   { background: #E6DEDC; }

/* ---------- 06 · Rules ---------- */
.retail-v4 .r-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r-gap-m);
  margin-top: var(--r-gap-xl);
}
.retail-v4 .r-rule {
  background: var(--ecru);
  border: 1px solid var(--r-rule);
  border-radius: 14px;
  padding: var(--r-gap-l);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s var(--r-ease-out), transform 0.3s var(--r-ease-out);
}
.retail-v4 .r-rule:hover {
  border-color: var(--carbon);
  transform: translateY(-2px);
}
.retail-v4 .r-rule .r-rn {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--r-ink-40);
}
.retail-v4 .r-rule .r-icon {
  width: 28px;
  height: 28px;
  color: var(--carbon);
}
.retail-v4 .r-rule .r-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.retail-v4 .r-rule h4 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.retail-v4 .r-rule p {
  font-size: 15px;
  color: var(--r-ink-60);
  line-height: 1.55;
}

/* ---------- 08 · Modules ---------- */
.retail-v4 .r-modules-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--r-gap-l);
  flex-wrap: wrap;
  margin-bottom: var(--r-gap-l);
}
.retail-v4 .r-modules-intro-aside {
  font-size: 14px;
  color: var(--r-ink-40);
  max-width: 36ch;
  text-align: right;
}
.retail-v4 .r-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--r-gap-s);
  margin-top: var(--r-gap-l);
}
.retail-v4 .r-module {
  background: var(--ecru);
  border: 1px solid var(--r-rule);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.2s var(--r-ease-out), background 0.2s var(--r-ease-out), transform 0.2s var(--r-ease-out);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
}
.retail-v4 .r-module:hover {
  border-color: var(--carbon);
  background: var(--r-ecru-deep);
  transform: translateY(-1px);
}
.retail-v4 .r-module .r-top {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--r-ink-40);
}
.retail-v4 .r-module h3 {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.retail-v4 .r-module p {
  font-size: 13px;
  color: var(--r-ink-60);
  line-height: 1.5;
}

/* ---------- Callouts (lemon · denim · pink) ---------- */
.retail-v4 .r-callout {
  padding: var(--r-gap-xl);
  border-radius: 20px;
  margin-top: var(--r-gap-xl);
}
.retail-v4 .r-callout-lemon { background: var(--chiffon); }
.retail-v4 .r-callout-denim { background: var(--denim); }
.retail-v4 .r-callout-pink  { background: var(--rusty); }
.retail-v4 .r-callout h2 {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: var(--r-gap-m);
}
.retail-v4 .r-callout h2 em { font-style: italic; }
.retail-v4 .r-callout p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--carbon);
  max-width: 68ch;
}

/* ---------- 09 · Outcomes ---------- */
.retail-v4 .r-outcomes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--r-gap-l);
  margin-top: var(--r-gap-xl);
}
.retail-v4 .r-outcome {
  background: var(--r-ecru-deep);
  border-radius: 14px;
  padding: 24px 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.retail-v4 .r-outcome-big {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(40px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 12px;
}
.retail-v4 .r-outcome-unit {
  font-size: 0.5em;
  margin-left: 4px;
  font-weight: 400;
}
.retail-v4 .r-outcome-lbl {
  font-size: 15px;
  color: var(--r-ink-60);
  line-height: 1.4;
}
.retail-v4 .r-disclaimer {
  font-size: 13px;
  color: var(--r-ink-40);
  margin-top: var(--r-gap-l);
  font-style: italic;
}

/* ---------- 10 · Phases ---------- */
.retail-v4 .r-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r-gap-m);
  margin-top: var(--r-gap-xl);
}
.retail-v4 .r-phase {
  border-radius: 16px;
  padding: var(--r-gap-l);
  background: var(--r-ecru-deep);
}
.retail-v4 .r-phase .r-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--r-gap-m);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--r-rule);
}
.retail-v4 .r-phase .r-head .r-n {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.retail-v4 .r-phase .r-head .r-wk {
  font-size: 13px;
  color: var(--r-ink-40);
}
.retail-v4 .r-phase h3 {
  font-family: "DM Sans", sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--r-gap-m);
}
.retail-v4 .r-phase ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
}
.retail-v4 .r-phase li {
  font-size: 15px;
  color: var(--r-ink-60);
  padding-left: 16px;
  position: relative;
}
.retail-v4 .r-phase li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--carbon);
}

/* ---------- Closing CTA (carbon band) ---------- */
.retail-v4 .r-closing {
  padding: var(--r-gap-xxl) 0;
  background: var(--carbon);
  color: var(--ecru);
  text-align: left;
  margin-top: 0;
}
.retail-v4 .r-closing h2 {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -0.03em;
  line-height: 1;
  font-weight: 400;
  max-width: 16ch;
  margin-bottom: var(--r-gap-l);
}
.retail-v4 .r-closing h2 em { font-style: italic; }
.retail-v4 .r-closing p {
  color: #C9C7C0;
  max-width: 56ch;
  margin-bottom: var(--r-gap-xl);
}
.retail-v4 .r-closing .r-btn-primary {
  background: var(--chiffon);
  color: var(--carbon);
  border-color: var(--chiffon);
}
.retail-v4 .r-closing .r-btn-primary:hover {
  background: #FFF1B8;
  border-color: #FFF1B8;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .retail-v4 .r-problems { grid-template-columns: repeat(3, 1fr); }
  .retail-v4 .r-modules { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .retail-v4 .r-pillar-panel {
    grid-template-columns: 1fr;
    gap: var(--r-gap-m);
    padding: var(--r-gap-l);
  }
  .retail-v4 .r-pillar.r-flip .r-pillar-panel { grid-template-columns: 1fr; }
  .retail-v4 .r-pillar.r-flip .r-pillar-panel .r-pillar-media { order: 0; }
  .retail-v4 .r-pillar-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 860px) {
  .retail-v4 .r-gap-cols { grid-template-columns: 1fr; }
  .retail-v4 .r-rules { grid-template-columns: 1fr; }
  .retail-v4 .r-outcomes { grid-template-columns: repeat(2, 1fr); }
  .retail-v4 .r-phases { grid-template-columns: 1fr; }
  .retail-v4 .r-modules-intro-aside { text-align: left; }
}
@media (max-width: 720px) {
  .retail-v4 .r-problems { grid-template-columns: 1fr; }
  .retail-v4 .r-personas { grid-template-columns: 1fr; }
  .retail-v4 .r-modules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .retail-v4 .r-wrap { padding: 0 20px; }
  .retail-v4 .r-block { padding: 80px 0; }
  .retail-v4 .r-pillar-intro { padding: 80px 0 24px; }
  .retail-v4 .r-hero { padding: 100px 0 48px; }
  .retail-v4 .r-callout { padding: 36px 28px; }
  .retail-v4 .r-callout h2 { font-size: clamp(24px, 6vw, 32px); }
  .retail-v4 .r-callout p { font-size: 16px; }
  .retail-v4 .r-closing { padding: 80px 0; }
  .retail-v4 .r-modules-intro { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 500px) {
  .retail-v4 .r-outcomes { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .retail-v4 .r-modules { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .retail-v4 .r-pillar-panel,
  .retail-v4 .r-persona,
  .retail-v4 .r-rule,
  .retail-v4 .r-module,
  .retail-v4 .r-gap-card,
  .retail-v4 .r-btn-primary,
  .retail-v4 .r-btn-ghost {
    transition: none;
  }
  .retail-v4 .r-pillar-panel:hover,
  .retail-v4 .r-persona:hover,
  .retail-v4 .r-rule:hover,
  .retail-v4 .r-module:hover,
  .retail-v4 .r-gap-card:hover,
  .retail-v4 .r-btn-primary:hover,
  .retail-v4 .r-btn-ghost:hover { transform: none; }
}