/* ------------------------------------------------------------------
   OSLO — light editorial, black accent sections

   PERF CONTRACT (see .cursor/rules/elite-storefront-perf.mdc + npm run check:perf)
   - No scroll-driven body classes for sticky bars / motion pause
   - No feTurbulence live grain; no heavy site-header backdrop blur
   - Desktop zoom 1.25 is intentional; don't double-scale with tokens
   ------------------------------------------------------------------ */

:root {
  /* Kanva-inspired OSLO — clean white paper */
  --paper: #ffffff;
  --paper-soft: #f5f5f5;
  --ink: #1a1c18;
  --obsidian: #1a1c18;
  --midnight: #252922;
  --hairline: rgba(26, 28, 24, 0.12);
  --hairline-light: rgba(255, 255, 255, 0.12);
  --white: #ffffff;
  --pure: #ffffff;
  --muted: rgba(26, 28, 24, 0.6);
  --muted-light: rgba(255, 255, 255, 0.6);
  /* Classic gold CTAs (Add to cart, sticky bar, tried CTA) */
  --star-gold: #f6cc3a;
  --btn-gold: #f0c84d;
  --btn-gold-hover: #ebc044;
  --btn-gold-hi: #f8e4a0;
  --btn-gold-lo: #e0b036;
  --accent-lime: #8b9468;
  --accent-olive: #757d5c;
  --accent-deep: #3d4a3e;
  --footer-bg: #1a1c18;
  --surface: #ffffff;
  --surface-soft: #eae9e1;
  --radius-card: 16px;
  --radius-lg: 24px;
  --radius-pill: 500px;
  --serif: "Sentient", "PT Serif", Georgia, "Times New Roman", serif;
  --sans: "Figtree", "Inter", -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  /* Static soft noise tile (no SVG feTurbulence — that froze Recalc Style while scrolling). */
  --grain: none;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  touch-action: manipulation; /* no double-tap / pinch zoom */
  -ms-touch-action: manipulation;
  background: var(--paper, #ffffff);
}

/* Smooth scroll + main-thread stalls = sticky/frozen finger scroll on phones. */
@media (max-width: 899px) {
  html {
    scroll-behavior: auto;
    background: #fff;
  }
}

html,
body {
  overscroll-behavior: none;
}

img,
video,
svg,
canvas {
  touch-action: manipulation;
}

/* Desktop: layout ratios like 125% browser zoom — mobile untouched.
   Off while checkmate is open: chessboard.js drag uses pageX/offset and breaks under CSS zoom. */
@media (min-width: 1021px) {
  html:not(.checkmate-open):not(.king-walk-open) {
    zoom: 1.25;
  }

  /* Kanva capsule pages stay at 1× — zoom + position:fixed overlaps content */
  html:has(body.home-page.kanva-home):not(.checkmate-open):not(.king-walk-open),
  html:has(body.pdp-page):not(.checkmate-open):not(.king-walk-open),
  html:has(body.pdp-page.kanva-home):not(.checkmate-open):not(.king-walk-open),
  html:has(.site-header--kanva):not(.checkmate-open):not(.king-walk-open) {
    zoom: 1 !important;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Live site only ? discourages casual copy/save (dev/localhost stays open) */
html.protect-content,
html.protect-content body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html.protect-content input,
html.protect-content textarea,
html.protect-content select,
html.protect-content [contenteditable="true"],
html.protect-content [contenteditable="plaintext-only"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

html.protect-content img,
html.protect-content .ph,
html.protect-content [data-upload],
html.protect-content .pdp-main,
html.protect-content .home-hero-media {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

html.protect-content .checkmate-popup img,
html.protect-content body > img.piece-417db {
  /* chessboard.js uses touch/mouse tracking, not native HTML drag */
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
  touch-action: none;
}

::selection { background: var(--ink); color: var(--pure); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: inherit;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }

button { font-family: var(--sans); }

/* ---------- announcement bar ---------- */

.announce-bar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 36px;
  background: var(--obsidian);
  color: var(--white);
}

.announce-track {
  display: flex;
  width: max-content;
  animation: announce-scroll 56s linear infinite;
}

.announce-group {
  display: flex;
  flex-shrink: 0;
}

.announce-group span {
  padding: 0 48px;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

@keyframes announce-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.announce-timer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
  background: var(--obsidian);
  box-shadow: 0 0 16px 16px var(--obsidian);
}

.announce-timer-label {
  margin-right: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.timer-box {
  display: inline-flex;
  justify-content: center;
  min-width: 26px;
  padding: 3px 5px;
  background: #23262c;
  color: var(--pure);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* ---------- mobile nav drawer (Ekster-style floating panel) ---------- */

.nav-drawer {
  position: fixed;
  inset: 0;
  /* Above kanva capsule (100) and PDP pinned header (1000) */
  z-index: 1100;
  display: none;
  pointer-events: none;
}

.nav-drawer.is-open {
  pointer-events: auto;
}

@media (max-width: 820px) {
  .nav-drawer:not([hidden]) {
    display: block;
  }
}

body.nav-drawer-open {
  overflow: hidden;
}

/* Drawer has its own chrome — hide the floating capsule so it can't stack on top */
body.nav-drawer-open .site-header {
  visibility: hidden;
  pointer-events: none;
}

.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 12, 0.55);
  opacity: 0;
  transition: opacity 0.32s ease;
}

.nav-drawer.is-open .nav-drawer-backdrop {
  opacity: 1;
}

.nav-drawer-panel {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: max(10px, env(safe-area-inset-left, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px 18px 22px;
  background: #fff;
  color: var(--ink);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  transform: translate3d(0, -12px, 0) scale(0.98);
  opacity: 0;
  transition:
    transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.28s ease;
}

.nav-drawer.is-open .nav-drawer-panel {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

.nav-drawer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 8px;
}

.nav-drawer-close {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.nav-drawer-close svg {
  width: 22px;
  height: 22px;
}

.nav-drawer-logo {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  font-size: 17px;
  letter-spacing: 0.28em;
}

.nav-drawer-logo img {
  height: 29px;
  width: auto;
  max-width: min(182px, 42vw);
}

.nav-drawer-top-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-drawer-locale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.nav-drawer-locale-root {
  position: relative;
}

/* Escape drawer overflow so the currency panel is usable on mobile */
.nav-drawer-locale-root .locale-panel {
  position: fixed;
  top: max(68px, calc(env(safe-area-inset-top, 0px) + 58px));
  right: max(18px, env(safe-area-inset-right, 0px));
  left: auto;
  z-index: 1110;
  width: min(300px, calc(100vw - 36px));
}

.nav-drawer-locale .locale-flag-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.nav-drawer-cart {
  width: 40px;
  height: 40px;
}

.nav-drawer-primary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 2px 18px;
}

.nav-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-decoration: none;
}

.nav-drawer-link:hover {
  opacity: 0.7;
}

.nav-drawer-link-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.nav-drawer-link-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

.nav-drawer-link--game {
  padding-top: 12px;
  padding-bottom: 12px;
}

.nav-drawer-link--board {
  justify-content: flex-start;
  gap: 8px;
}

.nav-drawer-link--board:hover {
  opacity: 1;
}

.nav-drawer-link--board .nav-drawer-board-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--ink);
  line-height: 1;
}

.nav-drawer-link--board .nav-drawer-board-arrow svg {
  width: 16px;
  height: 16px;
  margin-left: 0;
}

.nav-drawer-link--board:hover .nav-drawer-board-arrow,
.nav-drawer-link--board:focus-visible .nav-drawer-board-arrow {
  transform: translateX(2px);
}

.nav-drawer-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

.nav-drawer-feature {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 16 / 10;
  text-decoration: none;
  color: #fff;
  background: #1a1d22;
  cursor: pointer;
  isolation: isolate;
}

.nav-drawer-feature-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: inherit;
  overflow: hidden;
  background-color: #1a1d22;
  background-image: url('../images/uploads/nav-menu-feature.webp');
  background-size: cover;
  background-position: center center;
  pointer-events: auto;
}

.nav-drawer-feature-media.has-upload,
.nav-drawer-feature-media[data-upload].has-upload {
  background-size: cover !important;
  background-position: center center !important;
}

.nav-drawer-feature-media .seo-upload-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 0;
  pointer-events: none;
  background: transparent;
}

.nav-drawer-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

.nav-drawer-feature-label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 3;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  pointer-events: none;
}

/* Live: hidden. Edit: full-card native file target (iOS-safe, no programmatic click). */
.nav-drawer-feature-file {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  border: 0;
  cursor: pointer;
  display: none;
  font-size: 0;
}

body.dev-mode.dev-editing .nav-drawer-feature {
  cursor: pointer;
  outline: 2px dashed rgba(37, 99, 235, 0.75);
  outline-offset: 2px;
}

body.dev-mode.dev-editing .nav-drawer-feature-file {
  display: block;
  pointer-events: auto !important;
}

body.dev-mode.dev-editing .nav-drawer-feature-media[data-upload] {
  cursor: pointer;
  pointer-events: none !important;
  z-index: 0;
}

body.dev-mode.dev-editing .nav-drawer-feature::after {
  z-index: 2;
  pointer-events: none !important;
}

body.dev-mode.dev-editing .nav-drawer-feature-label {
  z-index: 6;
  pointer-events: auto !important;
  cursor: text;
  outline: 1px dashed rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

body.dev-mode.dev-editing .nav-drawer-feature-media .upload-hint {
  display: block !important;
  z-index: 5;
  opacity: 1;
  pointer-events: auto !important;
}

.nav-drawer-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  padding: 22px 2px 8px;
}

.nav-drawer-secondary a {
  color: #3a3a3a;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav-drawer-secondary a:hover {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer-backdrop,
  .nav-drawer-panel {
    transition: none;
  }
}

/* ---------- site header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 14px var(--gutter);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid transparent;
  border-bottom-color: var(--hairline);
  border-radius: 0;
  box-shadow: none;
  transform: translateZ(0);
  transition:
    top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-radius 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease,
    width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Floating white pill once you leave the top */
.site-header.is-scrolled {
  top: 10px;
  margin-left: max(12px, env(safe-area-inset-left, 0px));
  margin-right: max(12px, env(safe-area-inset-right, 0px));
  width: auto;
  max-width: calc(100vw - 24px);
  padding: 10px 18px;
  border-radius: 18px;
  border-color: rgba(11, 12, 14, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 10px 36px rgba(11, 12, 14, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

/* Desktop scrolled: hug content — logo left, links mid, actions right */
@media (min-width: 821px) {
  /* Board = Meet the Board CTA duplicate — hide from mid nav */
  .site-nav a[href="/filter"] {
    display: none;
  }

  .site-header {
    grid-template-columns: auto auto auto;
    gap: clamp(20px, 2.4vw, 36px);
  }

  .site-header > .wordmark {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    grid-column: 1;
    justify-self: start;
  }

  .site-header > .site-nav {
    grid-column: 2;
    justify-self: center;
    flex-wrap: nowrap;
    min-width: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .site-header > .site-actions {
    grid-column: 3;
    justify-self: end;
    flex-shrink: 0;
    padding-left: 0;
  }

  .site-header.is-scrolled {
    width: fit-content;
    max-width: calc(100vw - 32px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    grid-template-columns: auto minmax(0, auto) auto;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    padding: 10px 18px 10px 22px;
    border-radius: 999px;
    overflow: visible;
  }

  .site-header.is-scrolled > .site-actions {
    gap: 12px;
    flex-shrink: 0;
  }

  .site-nav {
    gap: clamp(14px, 1.6vw, 24px);
    min-width: 0;
  }

  .site-nav a {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  /* Compact pill: Reviews + Contact only */
  .site-header.is-scrolled .site-nav-top-only {
    display: none;
  }

  /* Always show Meet the Board on desktop — never let the pill squeeze it away */
  .site-actions .nav-cta {
    display: inline-flex !important;
    flex-shrink: 0;
    font-size: 9px;
    letter-spacing: 0.14em;
    padding: 10px 16px;
  }
}

.site-header > .nav-toggle {
  display: none;
}

.wordmark {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}

.wordmark img {
  display: block;
  height: 34px;
  width: auto;
  max-width: min(218px, 46vw);
}

.site-header > .site-nav {
  grid-column: 2;
  justify-self: center;
}

.site-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.site-nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 6px 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.site-nav-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--ink);
  transition: right 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-nav-group.is-open .site-nav-trigger::after,
.site-nav-trigger.is-current::after,
.site-nav-trigger:hover::after {
  right: 0;
}

.site-nav-caret {
  width: 8px;
  height: 5px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.25s ease;
}

.site-nav-group.is-open .site-nav-caret {
  transform: rotate(180deg);
}

.site-nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 11.5rem;
  padding: 0.55rem 0.65rem;
  background: #fff;
  border: 1px solid rgba(13, 14, 16, 0.1);
  box-shadow: 0 12px 32px rgba(13, 14, 16, 0.1);
}

.site-nav-menu[hidden] {
  display: none !important;
}

.site-nav-menu a {
  display: block;
  padding: 0.55rem 0.35rem;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.72;
}

.site-nav-menu a:hover,
.site-nav-menu a[aria-current="page"] {
  opacity: 1;
}

.site-nav-menu a::after {
  display: none;
}

.site-nav-sub {
  display: none;
}

.nav-drawer-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-drawer-link--parent {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.nav-drawer-chevron--down {
  transition: transform 0.25s ease;
}

.nav-drawer-group[data-open] .nav-drawer-chevron--down {
  transform: rotate(180deg);
}

.nav-drawer-subs {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 0.35rem;
}

.nav-drawer-subs[hidden] {
  display: none !important;
}

.nav-drawer-link--sub {
  padding: 8px 2px 12px 14px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0.72;
}

.nav-drawer-link--sub:hover,
.nav-drawer-link--sub[aria-current="page"] {
  opacity: 1;
}

.site-nav a {
  position: relative;
  flex: 0 0 auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  opacity: 1;
  font-weight: 500;
  padding: 6px 0;
  white-space: nowrap;
  transition: opacity 0.3s, color 0.3s;
}

.site-nav a.site-nav-game {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.site-nav-game-label {
  display: block;
}

.site-nav-game-tag {
  display: none;
}

/* Guess Their Elo — no emoji prefix in nav */

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--ink);
  transition: right 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-nav a:hover::after { right: 0; }

.site-actions {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  background: var(--accent-lime);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s;
}

.nav-cta:hover { transform: translateY(-1px); filter: brightness(0.95); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4.5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.7px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.3s ease, opacity 0.3s ease;
}

.nav-toggle span:nth-child(3) {
  width: 11px;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(6.2px) rotate(45deg);
  width: 18px;
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-6.2px) rotate(-45deg);
  width: 18px;
}

.locale-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.85;
  transition: opacity 0.3s;
  position: relative;
  max-width: none;
}

.locale-select:hover { opacity: 1; }

.locale-select svg { width: 9px; height: 9px; flex-shrink: 0; }

.locale-root {
  position: relative;
}

.locale-select-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.locale-flag {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.locale-flag-img {
  display: block;
  width: 18px;
  height: 13px;
  min-width: 18px;
  min-height: 13px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(13, 14, 16, 0.12);
  background: rgba(13, 14, 16, 0.06);
}

/* Round flag chip in the floating header (Ekster-style) */
.site-header .locale-flag-img {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.locale-currency-option .locale-flag-img,
.locale-currency-trigger .locale-flag-img {
  width: 20px;
  height: 15px;
  min-width: 20px;
  min-height: 15px;
  border-radius: 2px;
}

.site-header .locale-select-text {
  font-size: 10px;
  letter-spacing: 0.06em;
}

.locale-select-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.locale-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: min(300px, calc(100vw - 32px));
  padding: 14px;
  background: var(--pure);
  border: 1px solid var(--hairline-light);
  box-shadow: 0 12px 40px rgba(13, 14, 16, 0.12);
  text-align: start;
}

.locale-panel-section + .locale-panel-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-light);
}

.locale-panel-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.locale-lang-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.locale-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: start;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.locale-lang-btn .locale-flag-img,
.locale-lang-btn .locale-flag {
  flex-shrink: 0;
}

.locale-lang-btn:hover {
  border-color: var(--hairline-light);
  background: rgba(13, 14, 16, 0.03);
}

.locale-lang-btn.is-active {
  border-color: var(--ink);
  background: rgba(13, 14, 16, 0.06);
  font-weight: 500;
}

.locale-currency-select {
  width: 100%;
  border: 1px solid var(--hairline-light);
  background: var(--pure);
  color: var(--ink);
  font-size: 12px;
  padding: 9px 10px;
  cursor: pointer;
}

.locale-currency-picker {
  position: relative;
}

.locale-currency-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--hairline-light);
  background: var(--pure);
  color: var(--ink);
  font-size: 12px;
  padding: 9px 10px;
  cursor: pointer;
  text-align: start;
}

.locale-currency-trigger svg {
  width: 9px;
  height: 9px;
  margin-inline-start: auto;
  flex-shrink: 0;
}

.locale-currency-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.locale-currency-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--hairline-light);
  background: var(--pure);
  box-shadow: 0 10px 28px rgba(13, 14, 16, 0.12);
}

.locale-currency-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  padding: 9px 10px;
  cursor: pointer;
  text-align: start;
}

.locale-currency-option:hover,
.locale-currency-option.is-active {
  background: rgba(13, 14, 16, 0.04);
}

.locale-currency-option-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.locale-currency-option-text strong {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.locale-currency-option-text em {
  font-style: normal;
  color: var(--muted);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

html[dir="rtl"] .locale-panel {
  right: auto;
  left: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  opacity: 0.8;
  transition: opacity 0.3s;
}

.icon-btn:hover { opacity: 1; }

.icon-btn svg { width: 19px; height: 19px; }

/* ---------- floating purchase ---------- */

.float-purchase {
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 36px);
  z-index: 70;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 26px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--pure);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 18px 46px rgba(11, 12, 14, 0.28);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s, background 0.3s;
}

.float-purchase:hover { transform: translateY(-3px); }

.float-purchase-price {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
  opacity: 0.7;
}

.float-purchase-price .price-currency {
  font-size: 0.55em;
  vertical-align: top;
  margin-right: 0.04em;
}

.float-purchase.is-hidden {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}

/* ---------- sticky add-to-cart bar (product page) ---------- */

.sticky-cart {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  padding: 10px clamp(14px, 3vw, 28px) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(13, 14, 16, 0.1);
  box-shadow: 0 -8px 28px rgba(13, 14, 16, 0.06);
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}

.sticky-cart.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sticky-cart-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sticky-cart-product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sticky-cart-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  background-color: #fff;
  background-image: url("../images/uploads/thumb-1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(13, 14, 16, 0.1);
}

.sticky-cart-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sticky-cart-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-cart-price {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: -0.02em;
  line-height: 1;
}

.sticky-cart-price .price-currency {
  font-size: 0.55em;
  vertical-align: top;
  margin-right: 0.04em;
}

.sticky-cart-btn {
  flex-shrink: 0;
  border: 1px solid rgba(196, 150, 40, 0.42);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(
      165deg,
      var(--btn-gold-hi) 0%,
      var(--btn-gold) 48%,
      var(--btn-gold-lo) 100%
    );
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 22px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1.5px 0 rgba(168, 118, 18, 0.28),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.28),
    inset -1.5px 0 0 rgba(168, 118, 18, 0.16),
    0 1px 0 rgba(160, 120, 20, 0.18),
    0 8px 22px rgba(200, 150, 30, 0.2);
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
}

.sticky-cart-btn:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1.5px 0 rgba(168, 118, 18, 0.26),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.3),
    inset -1.5px 0 0 rgba(168, 118, 18, 0.14),
    0 1px 0 rgba(160, 120, 20, 0.16),
    0 12px 28px rgba(200, 150, 30, 0.26);
}

.sticky-cart-btn[disabled] {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

/* Sticky bar visible → reserve bottom space without body.classList toggle-on-scroll.
   Never reintroduce body.has-sticky-cart from JS scroll handlers (check:perf). */
body:has([data-home-sticky-cta].is-visible),
body:has([data-atlas-sticky-cta].is-visible),
body:has([data-sticky-cart].is-visible) {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* Home sticky Meet the Board — mobile only (hidden on desktop) */
.sticky-cart--home {
  display: block;
}

.sticky-cart--home .sticky-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

body.nav-drawer-open .sticky-cart--home {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 900px) {
  .home-page .sticky-cart--home[data-home-sticky-cta] {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .sticky-cart {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .sticky-cart-title {
    font-size: 13px;
  }

  .sticky-cart-btn {
    padding: 13px 16px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .sticky-cart-thumb {
    width: 40px;
    height: 40px;
  }
}

/* ---------- placeholders (cinematic photography stand-ins) ---------- */

.ph {
  position: relative;
  overflow: hidden;
  background: var(--midnight);
  border: 1px solid rgba(11, 12, 14, 0.06);
}

/* Crawlable SEO layer ? visually identical to CSS background-image cover */
.seo-upload-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 0;
  border: 0;
  display: block;
}

.ph:not(.has-upload)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(rgba(255, 255, 255, 0.035) 0% 25%, transparent 0% 50%)
    50% / 112px 112px;
  opacity: 0.45;
}

.ph:not(.has-upload)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%, rgba(13, 14, 16, 0.06));
  opacity: 0.55;
  mix-blend-mode: normal;
  pointer-events: none;
}

.ph-tag {
  position: absolute;
  left: 18px;
  top: 14px;
  bottom: auto;
  z-index: 2;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.r-45 { aspect-ratio: 4 / 5; }
.r-34 { aspect-ratio: 3 / 4; }
.r-11 { aspect-ratio: 1 / 1; }
.r-widescreen { aspect-ratio: 21 / 9; }

.ph-hero  { background: radial-gradient(120% 90% at 30% 10%, #23262e 0%, #101216 45%, #07080a 100%); }
.ph-a     { background: radial-gradient(100% 80% at 70% 0%, #2a2620 0%, #14120f 55%, #0a0908 100%); }
.ph-b     { background: radial-gradient(110% 90% at 20% 20%, #1e242e 0%, #0f1319 55%, #08090c 100%); }
.ph-c     { background: radial-gradient(100% 100% at 80% 90%, #26221c 0%, #121110 60%, #090808 100%); }
.ph-d     { background: radial-gradient(120% 80% at 50% 0%, #232323 0%, #121212 55%, #0a0a0a 100%); }
.ph-e     { background: radial-gradient(100% 90% at 30% 100%, #1c2130 0%, #101320 55%, #080a10 100%); }
.ph-f     { background: radial-gradient(90% 90% at 60% 30%, #2b241d 0%, #15110d 60%, #0a0806 100%); }
.ph-g     { background: radial-gradient(110% 100% at 10% 40%, #202730 0%, #11151b 55%, #090b0e 100%); }
.ph-wide  { background: radial-gradient(80% 130% at 50% 50%, #262a33 0%, #12141a 55%, #08090b 100%); }

/* ---------- home landing (body.home-page) ---------- */

.home-page .home-hero {
  --hero-slide-ms: 5200ms;
  position: relative;
  min-height: 28rem;
  height: auto;
  color: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #0b0c0e;
}

.home-page .home-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-page .home-hero-slides {
  position: absolute;
  inset: 0;
}

.home-page .home-hero-slide,
.home-page .home-hero-media {
  position: absolute;
  inset: 0;
  border: none;
  margin: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
  contain: paint;
}

.home-page .home-hero-slide.is-active,
.home-page .home-hero-media.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  pointer-events: auto;
}

/* Live storefront: single still hero on all viewports (no carousel) */
.home-page .home-hero:not(.is-hero-editing) .home-hero-slide:not([data-hero-slide="0"]),
.home-page .home-hero:not(.is-hero-editing) .home-hero-media:not([data-hero-slide="0"]) {
  display: none;
}

.home-page .home-hero:not(.is-hero-editing) .home-hero-slide[data-hero-slide="0"],
.home-page .home-hero:not(.is-hero-editing) .home-hero-media[data-hero-slide="0"] {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.home-page .home-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
  pointer-events: none;
  -webkit-touch-callout: none;
}

/* Hero video element - shown only when a slot actually has video */
.home-page .home-hero.has-hero-video .home-hero-video,
.home-page .home-hero-media.has-video .home-hero-video,
.home-page .home-hero-slide.has-video .home-hero-video {
  display: block;
}

/* Kill native mobile play overlays */
.home-page .home-hero-video::-webkit-media-controls,
.home-page .home-hero-video::-webkit-media-controls-panel,
.home-page .home-hero-video::-webkit-media-controls-play-button,
.home-page .home-hero-video::-webkit-media-controls-start-playback-button,
.home-page .home-hero-video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

.home-page .home-hero-media.has-video.has-upload,
.home-page .home-hero-slide.has-video.has-upload {
  background-image: none !important;
}

.home-page .home-hero-desktop-media {
  display: none;
}

.home-page .home-hero-grid {
  display: none;
}

.home-page .home-hero-slide .ph-tag,
.home-page .home-hero-media .ph-tag {
  display: none;
}

.home-page .home-hero-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(8, 9, 11, 0.82) 0%,
      rgba(8, 9, 11, 0.42) 34%,
      rgba(8, 9, 11, 0.12) 58%,
      transparent 78%
    ),
    linear-gradient(
      to right,
      rgba(8, 9, 11, 0.55) 0%,
      rgba(8, 9, 11, 0.22) 38%,
      transparent 68%
    );
}

.home-page .home-hero-content {
  position: relative;
  z-index: 3;
  width: min(100%, 90rem);
  max-width: 1440px;
  margin: 0 auto;
  padding:
    calc(var(--header-offset, 64px) + 1.5rem)
    var(--gutter)
    clamp(3rem, 7vw, 3.75rem);
  display: flex;
  align-items: flex-end;
  min-height: inherit;
  box-sizing: border-box;
  pointer-events: none;
}

.home-page .home-hero-copy {
  position: relative;
  width: 100%;
  max-width: 38.125rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  pointer-events: auto;
}

.home-page .home-hero-eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--pure);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}

.home-page .home-hero-copy h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--pure);
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}

.home-page .home-hero-lede {
  margin: 0;
  max-width: 36ch;
  color: rgba(244, 243, 239, 0.82);
  font-size: 14px;
  line-height: 1.5;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.home-page .home-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.home-page .btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 24px;
  background: var(--pure);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}

.home-page .btn-light:hover { transform: translateY(-2px); }

/* Progress segments retired with carousel — kept in DOM for edit tooling hooks */
.home-page .home-hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: none;
  gap: 6px;
  padding: 0 var(--gutter) 12px;
  pointer-events: auto;
}

.home-page .home-hero-progress-seg {
  appearance: none;
  flex: 1 1 0;
  position: relative;
  height: 3px;
  padding: 10px 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.home-page .home-hero-progress-seg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.28);
  border-radius: 1px;
}

.home-page .home-hero-progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 0%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 1px;
  transform-origin: left center;
}

.home-page .home-hero-progress-seg.is-active .home-hero-progress-fill {
  animation: home-hero-progress var(--hero-slide-ms) linear forwards;
}

.home-page .home-hero-progress-seg.is-done .home-hero-progress-fill {
  width: 100%;
  animation: none;
}

.home-page .home-hero.is-hero-paused .home-hero-progress-seg.is-active .home-hero-progress-fill,
.home-page .home-hero.is-hero-editing .home-hero-progress-seg.is-active .home-hero-progress-fill {
  animation-play-state: paused;
}

@keyframes home-hero-progress {
  from { width: 0%; }
  to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-hero-progress-seg.is-active .home-hero-progress-fill {
    animation: none;
    width: 100%;
  }
}

/* Desktop: shorter boxed inset hero — single still */
@media (min-width: 900px) {
  .home-page .home-hero.has-hero-video {
    --hero-media-size: min(42svh, 420px);
    display: block;
    position: relative;
    width: min(100% - 2 * var(--gutter), 1240px);
    max-width: 1240px;
    margin: 28px auto 0;
    border-radius: 18px;
    height: var(--hero-media-size);
    min-height: 340px;
    padding: 0;
    box-sizing: border-box;
    background: #0b0c0e;
    color: var(--white);
    overflow: hidden;
  }

  .home-page .home-hero.has-hero-video .home-hero-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    z-index: 1;
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
  }

  .home-page .home-hero.has-hero-video .home-hero-stage::after {
    display: none;
  }

  .home-page .home-hero.has-hero-video .home-hero-slide,
  .home-page .home-hero.has-hero-video .home-hero-media {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
  }

  .home-page .home-hero.has-hero-video .home-hero-slide[data-hero-slide="0"],
  .home-page .home-hero.has-hero-video .home-hero-media[data-hero-slide="0"] {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
  }

  .home-page .home-hero.has-hero-video .home-hero-progress {
    display: none !important;
  }

  .home-page .home-hero.has-hero-video .home-hero-grid {
    display: none !important;
  }

  /* Edit mode: one desktop hero upload target, not a 4-up filmstrip */
  body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slides {
    display: block !important;
    grid-template-columns: none !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    gap: 0 !important;
  }

  body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slide {
    display: none !important;
  }

  body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slide[data-hero-slide="0"] {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
  }

  .home-page .home-hero.has-hero-video .home-hero-fade {
    display: block;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(
        to right,
        rgba(11, 12, 14, 0.78) 0%,
        rgba(11, 12, 14, 0.48) 28%,
        rgba(11, 12, 14, 0.16) 52%,
        transparent 72%
      ),
      linear-gradient(
        to top,
        rgba(11, 12, 14, 0.45) 0%,
        rgba(11, 12, 14, 0.14) 32%,
        transparent 58%
      );
  }

  .home-page .home-hero.has-hero-video .home-hero-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 0;
    height: 100%;
    align-items: flex-end;
    padding: 24px clamp(28px, 3.5vw, 48px) clamp(32px, 4vh, 44px);
  }

  .home-page .home-hero.has-hero-video .home-hero-copy {
    width: min(100%, 400px);
    max-width: 400px;
    margin-left: 0;
    gap: 12px;
  }

  .home-page .home-hero.has-hero-video .home-hero-eyebrow {
    font-size: 0.9rem;
  }

  .home-page .home-hero.has-hero-video .home-hero-copy h1 {
    font-size: clamp(26px, 2.8vw, 40px);
    max-width: 14ch;
    line-height: 1.08;
  }

  .home-page .home-hero.has-hero-video .home-hero-lede {
    max-width: 32ch;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(244, 243, 239, 0.78);
  }

  .home-page .home-hero.has-hero-video .btn-light {
    background: var(--pure);
    color: var(--ink);
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 13px;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }

  .home-page .home-hero.has-hero-video .home-hero-cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 2px;
  }

  .home-page .home-hero.has-hero-video .home-hero-progress {
    padding: 0 clamp(28px, 3.5vw, 48px) 14px;
  }

  .home-page .home-hero.has-hero-video .home-scroll {
    display: none;
  }

  .home-page .home-hero.has-hero-video .home-hero-slide .ph-tag,
  .home-page .home-hero.has-hero-video .home-hero-media .ph-tag {
    display: none;
  }
}

/* Mobile: shorter full-bleed hero */
@media (max-width: 899px) {
  .home-page .home-hero.has-hero-video {
    min-height: 28rem;
    height: auto;
    display: flex;
    position: relative;
    background: #0b0c0e;
  }

  .home-page .home-hero.has-hero-video .home-hero-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    aspect-ratio: auto;
    height: 100%;
    overflow: hidden;
  }

  .home-page .home-hero.has-hero-video .home-hero-slide,
  .home-page .home-hero.has-hero-video .home-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: #0b0c0e;
    background-size: cover;
    background-position: center center;
    /* Cheaper crossfade on phones; inactive slides skip layout work */
    transition: opacity 0.35s ease;
  }

  .home-page .home-hero.has-hero-video .home-hero-slide:not(.is-active),
  .home-page .home-hero.has-hero-video .home-hero-media:not(.is-active) {
    content-visibility: hidden;
  }

  /* Edit grid shows all slides — content-visibility would paint them black. */
  body.home-page.dev-mode.dev-editing .home-hero.has-hero-video .home-hero-slide:not(.is-active),
  body.home-page.dev-mode.dev-editing .home-hero.has-hero-video .home-hero-media:not(.is-active) {
    content-visibility: visible;
  }

  .home-page .home-hero.has-hero-video .home-hero-media.has-video .home-hero-video,
  .home-page .home-hero.has-hero-video .home-hero-slide.has-video .home-hero-video {
    display: block !important;
  }

  .home-page .home-hero.has-hero-video .home-hero-fade {
    background:
      linear-gradient(
        to top,
        rgba(8, 9, 11, 0.88) 0%,
        rgba(8, 9, 11, 0.55) 36%,
        rgba(8, 9, 11, 0.18) 62%,
        transparent 82%
      );
  }

  .home-page .home-hero.has-hero-video .home-hero-content {
    position: relative;
    z-index: 3;
    align-items: flex-end;
    min-height: 28rem;
    padding:
      calc(var(--header-offset, 56px) + 1.25rem)
      var(--gutter)
      clamp(2.75rem, 7vw, 3.5rem);
  }

  .home-page .home-hero.has-hero-video .home-hero-copy {
    max-width: none;
    gap: 10px;
  }

  .home-page .home-hero.has-hero-video .home-hero-copy h1 {
    font-size: clamp(28px, 8vw, 38px);
    max-width: 18ch;
    line-height: 1.08;
  }

  .home-page .home-hero.has-hero-video .home-hero-lede {
    font-size: 13px;
    line-height: 1.45;
    max-width: 30ch;
    color: rgba(244, 243, 239, 0.82);
  }

  .home-page .home-hero.has-hero-video .home-hero-progress {
    padding: 0 var(--gutter) 10px;
  }

  .home-page .home-hero.has-hero-video .home-scroll {
    display: none;
  }

  .home-page .home-hero.has-hero-video .home-hero-slide .ph-tag,
  .home-page .home-hero.has-hero-video .home-hero-media .ph-tag {
    display: none;
  }
}

/* Dev mode: make carousel slide swapping obvious */
body.home-page.dev-mode.dev-editing .home-hero-progress-seg {
  padding: 14px 0;
}

body.home-page.dev-mode.dev-editing .home-hero-progress-seg::before {
  height: 3px;
  background: rgba(37, 99, 235, 0.45);
}

body.home-page.dev-mode.dev-editing .home-hero-progress-seg.is-active::before {
  background: rgba(37, 99, 235, 0.85);
}

/* Edit mode: always show all 4 hero slides as upload targets */
body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] {
  display: flex !important;
  flex-direction: column !important;
  min-height: clamp(280px, 52vh, 520px) !important;
  height: auto !important;
  background: #0b0c0e !important;
}

/* Edit mode: show hero copy for text edits, keep slide grid below for uploads */
body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-fade {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-content {
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 12 !important;
  order: 1;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: max(64px, calc(var(--header-offset, 64px) + 12px)) var(--gutter) 16px !important;
  background: rgba(11, 12, 14, 0.96) !important;
  box-sizing: border-box !important;
}

body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-copy {
  pointer-events: auto !important;
  max-width: min(40rem, 100%) !important;
}

body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-copy h1,
body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-copy .home-hero-lede,
body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-copy .btn-light {
  pointer-events: auto !important;
  cursor: text !important;
  outline: 1px dashed rgba(96, 165, 250, 0.65);
  outline-offset: 4px;
}

body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-stage {
  position: relative !important;
  inset: auto !important;
  z-index: 8 !important;
  order: 2;
  pointer-events: auto !important;
  min-height: clamp(180px, 34vh, 320px) !important;
  height: auto !important;
}

body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slides {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  width: auto !important;
  margin: 0 12px 48px !important;
  align-content: stretch !important;
  pointer-events: auto !important;
}

body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slide,
body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slide.is-active,
body.home-page.dev-mode.dev-editing .home-hero.has-hero-video .home-hero-slide,
body.home-page.dev-mode.dev-editing .home-hero.has-hero-video .home-hero-slide.is-active {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: clamp(7rem, 26vh, 13rem) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  outline: 2px dashed rgba(59, 130, 246, 0.95) !important;
  outline-offset: 2px !important;
  background-color: #1a1c20 !important;
  background-size: cover !important;
  background-position: center !important;
  cursor: pointer !important;
}

body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slide.is-active {
  outline-color: #60a5fa !important;
  outline-width: 3px !important;
}

body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-progress {
  position: relative !important;
  order: 3;
  z-index: 10 !important;
  pointer-events: auto !important;
}

body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slide .upload-hint {
  display: flex !important;
  opacity: 1 !important;
  z-index: 6 !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
  padding: 8px 6px !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #fff !important;
  pointer-events: none;
}

body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slide .upload-hint.upload-hint--split {
  pointer-events: auto !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: calc(100% - 10px);
  box-sizing: border-box;
}

body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slide .upload-hint-btn {
  pointer-events: auto;
}

.hero-slide-tools {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  gap: 2px;
  padding: 3px;
  background: rgba(8, 10, 14, 0.72);
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
}

body.dev-mode.dev-editing .hero-slide-tools {
  display: flex;
}

.hero-slide-tool {
  appearance: none;
  border: 0;
  flex: 1;
  height: 22px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.92);
  color: #0b0c0e;
  font: 700 12px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  padding: 0;
}

.hero-slide-tool:hover {
  background: #fff;
}

@media (max-width: 700px) {
  body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slides {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 8px 40px !important;
  }

  body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slide,
  body.home-page.dev-mode.dev-editing .home-hero[data-hero-carousel] .home-hero-slide.is-active,
  body.home-page.dev-mode.dev-editing .home-hero.has-hero-video .home-hero-slide,
  body.home-page.dev-mode.dev-editing .home-hero.has-hero-video .home-hero-slide.is-active {
    min-height: clamp(5.5rem, 20vh, 9rem) !important;
  }
}

.home-page .home-brand {
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 88px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pure);
  line-height: 0.95;
  margin-bottom: clamp(18px, 3vh, 28px);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}

.home-page .home-brand-mark {
  display: none;
}

.home-page .home-brand-text {
  display: inline;
}

/* Desktop ? mark replaces wordmark text */
@media (min-width: 900px) {
  .home-page .home-brand {
    margin-bottom: clamp(14px, 2vh, 22px);
  }

  .home-page .home-brand-mark {
    display: block;
    width: clamp(56px, 6vw, 84px);
    height: auto;
    margin: 0;
    mix-blend-mode: multiply;
  }

  .home-page .home-brand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.home-page .home-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 243, 239, 0.7);
  border-bottom: 1px solid rgba(244, 243, 239, 0.28);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}

.home-page .home-hero-secondary svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.85;
}

.home-page .home-hero-secondary:hover {
  color: var(--pure);
  border-color: rgba(244, 243, 239, 0.7);
}

.home-page .home-scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 96px;
  z-index: 3;
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted-light);
  writing-mode: vertical-rl;
  animation: home-drift 3.2s ease-in-out infinite;
}

@keyframes home-drift {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(10px); opacity: 1; }
}

/* Manifesto */
.home-page .home-manifesto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(80px, 14vh, 160px) max(var(--gutter), calc((100% - 1180px) / 2));
  background: var(--obsidian);
  color: var(--white);
}

.home-page .home-manifesto-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 34rem;
  text-align: left;
}

.home-page .home-manifesto h2 {
  font-size: clamp(40px, 6vw, 78px);
  font-style: italic;
  font-weight: 400;
  color: var(--pure);
  line-height: 1.05;
}

.home-page .home-manifesto p {
  margin: 24px 0 0;
  max-width: 26rem;
  color: var(--muted-light);
  font-size: 15px;
  line-height: 1.6;
}

.home-page .home-manifesto-cta {
  margin-top: 32px;
}

.home-page .home-manifesto-cta .btn-cta {
  width: auto;
  display: inline-block;
}

.home-page .home-manifesto-media {
  position: relative;
  z-index: 0;
  margin: 0;
  border: none;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: 0;
  justify-self: end;
  align-self: end;
  background-color: var(--obsidian);
}

/* Soft bottom fade into section black */
.home-page .home-manifesto-media::after,
.home-page .home-manifesto-media.ph:not(.has-upload)::after,
.home-page .home-manifesto-media[data-upload].has-upload::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  mix-blend-mode: normal;
  background-image: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 52%,
    rgba(11, 12, 14, 0.28) 68%,
    rgba(11, 12, 14, 0.72) 84%,
    var(--obsidian) 100%
  );
  pointer-events: none;
}

.home-page .home-manifesto-media .ph-tag {
  color: rgba(255, 255, 255, 0.55);
}

/* Shared section head */
.home-page .home-section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
  padding: 0 var(--gutter);
  margin-bottom: clamp(40px, 7vh, 72px);
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

.home-page .home-index {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.55em;
}

.home-page .home-section-head h2 {
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.05;
  margin-bottom: 14px;
}

.home-page .home-section-lede {
  max-width: 32rem;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.home-page .home-section-head-dark .home-index { color: var(--muted-light); }
.home-page .home-section-head-dark h2 { color: var(--pure); }
.home-page .home-section-head-dark .home-section-lede { color: var(--muted-light); }

/* Carry strip */
.home-page .home-carry {
  padding: clamp(90px, 14vh, 160px) 0;
  background: var(--paper);
}

.home-page .home-carry-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  padding: 0 var(--gutter);
  max-width: 1360px;
  margin: 0 auto;
}

.home-page .home-carry-shot {
  margin: 0;
  aspect-ratio: 3 / 4;
  border: none;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-page .home-carry-shot:hover {
  transform: scale(0.985);
}

.home-page .home-carry-shot:nth-child(2) {
  margin-top: clamp(28px, 5vh, 64px);
}

.home-page .home-carry-shot:nth-child(4) {
  margin-top: clamp(18px, 3vh, 40px);
}

/* Flags rail — above world section headline (desktop + mobile) */
.home-page .home-world-intro .home-loved-flags {
  width: 100%;
  max-width: 20rem;
  margin: 0 0 16px;
  padding: 0;
  align-self: center;
}

.home-page .home-loved-flags__viewport {
  position: relative;
  overflow: hidden;
  height: 28px;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.home-page .home-loved-flags__track {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 28px);
  width: max-content;
  height: 100%;
}

.home-page .home-loved-flags__track.is-flags-looping {
  animation: loop-scroll 36s linear infinite;
}

.home-page .home-loved-flags__track.is-css-loop {
  animation: home-loved-flags-scroll 36s linear infinite;
}

.home-page .home-loved-flags.is-paused .home-loved-flags__track.is-css-loop {
  animation-play-state: paused;
}

@keyframes home-loved-flags-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.home-page .home-loved-flags__flag {
  flex: 0 0 auto;
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(11, 12, 14, 0.12);
  opacity: 0.55;
}

.home-page .home-loved-flags__flag.is-focus {
  opacity: 0.9;
}

.home-page .home-moment-copy .home-section-title {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-loved-flags__track,
  .home-page .home-loved-flags__track.is-css-loop,
  .home-page .home-loved-flags__track.is-flags-looping {
    animation: none !important;
    transform: none !important;
  }
  .home-page .home-loved-flags__flag {
    opacity: 0.85;
  }
}

@media (max-width: 899px) {
  .home-page .home-world-intro .home-loved-flags {
    margin: 0 auto 12px;
    max-width: 16rem;
  }

  .home-page .home-loved-flags__viewport {
    height: 26px;
  }

  .home-page .home-loved-flags__flag {
    width: 22px;
    height: 16px;
  }
}

/* Made to Move + Loved Worldwide - mobile can reorder without changing desktop */
.home-page .home-feature-stack {
  display: contents;
}

/* Split feature bands ? shared rhythm (language + moments) */
.home-page .home-language,
.home-page .home-moment {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
  width: min(100% - 2 * var(--gutter), 1080px);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(52px, 9vh, 96px) 0;
  background: transparent;
  min-height: 0;
}

.home-page .home-language::before,
.home-page .home-moment::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--paper);
  pointer-events: none;
}

/* Breathing room before the dark story / meet-the-board band */
.home-page #moment-go.home-moment {
  padding-bottom: clamp(64px, 10vh, 120px);
}

@media (max-width: 899px) {
  .home-page #moment-go.home-moment {
    padding-top: clamp(28px, 5vh, 48px);
    padding-bottom: 0;
  }
}

.home-page .home-moment--flip .home-moment-media-wrap,
.home-page .home-moment--flip .home-language-media-wrap {
  order: 2;
}

.home-page .home-moment--flip .home-moment-copy {
  order: 1;
}

.home-page .home-moment-media-wrap {
  position: relative;
  display: block;
  margin: 0;
  border: none;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  justify-self: stretch;
  border-radius: 22px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  transform: rotate(-3.5deg);
  transform-origin: center center;
}

.home-page .home-moment-media {
  position: absolute;
  inset: 0;
  margin: 0;
  border: none;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 22px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow:
    0 18px 40px rgba(11, 12, 14, 0.14),
    0 2px 8px rgba(11, 12, 14, 0.06);
  transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.home-page .home-moment-media.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

/* Loved Worldwide - desktop composition only */
@media (min-width: 900px) {
  .home-page .home-moment.home-moment--flip {
    grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.22fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    width: min(100% - 2 * var(--gutter), 1160px);
    max-width: 1160px;
    padding: clamp(72px, 11vh, 120px) 0;
  }

  .home-page .home-moment--flip .home-moment-media-wrap,
  .home-page .home-language .home-moment-media-wrap {
    max-width: 400px;
    width: 100%;
    border-radius: 22px;
    transform: none;
    overflow: visible;
    margin-bottom: 32px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  .home-page .home-moment--flip .home-moment-media-wrap {
    justify-self: end;
  }

  .home-page .home-language .home-moment-media-wrap {
    justify-self: start;
  }

  .home-page .home-moment--flip .home-language-media-wrap {
    max-width: 400px;
    width: 100%;
    aspect-ratio: 1 / 1;
    justify-self: end;
    align-self: center;
    border-radius: 20px;
    margin-bottom: 0;
    transform: none;
  }

  .home-page .home-moment--flip .home-moment-media,
  .home-page .home-language .home-moment-media {
    border-radius: 22px;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform-origin: center bottom;
    box-shadow:
      0 28px 64px rgba(11, 12, 14, 0.14),
      0 8px 20px rgba(11, 12, 14, 0.06);
    transition:
      transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.35s ease,
      box-shadow 0.45s ease;
    will-change: transform;
  }

  .home-page .home-moment-media[data-stack="0"] {
    z-index: 3;
    pointer-events: auto;
    cursor: grab;
    transform: translate3d(var(--stack-drag, 0px), 0, 0) scale(1);
    opacity: 1;
  }

  .home-page .home-moment-media[data-stack="0"]:active {
    cursor: grabbing;
  }

  .home-page .home-moment-media[data-stack="1"] {
    z-index: 2;
    transform: translate3d(0, 16px, 0) scale(0.94);
    opacity: 1;
  }

  .home-page .home-moment-media[data-stack="2"] {
    z-index: 1;
    transform: translate3d(0, 30px, 0) scale(0.88);
    opacity: 0.9;
  }

  .home-page .home-moment-media.is-dragging {
    transition: none;
  }

  .home-page .home-moment-media.is-active {
    z-index: 3;
  }

  .home-page .home-moment--flip .home-moment-copy {
    max-width: 420px;
    width: 100%;
    justify-self: start;
    padding-right: clamp(0px, 1.5vw, 16px);
  }

  .home-page .home-world-intro .home-loved-flags {
    margin: 0 0 20px;
    max-width: 22rem;
  }

  .home-page .home-world-intro .home-loved-flags__viewport {
    height: 30px;
  }

  .home-page .home-world-intro .home-loved-flags__flag {
    width: 28px;
    height: 20px;
    opacity: 0.7;
    border-radius: 3px;
  }

  .home-page .home-moment-copy .home-section-title {
    margin: 0 0 14px;
    font-size: clamp(40px, 4vw, 54px);
    letter-spacing: -0.018em;
  }

  .home-page .home-moment-desktop-lede {
    display: block;
    margin: 0 0 28px;
    max-width: none;
    width: max-content;
    white-space: nowrap;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--muted);
    opacity: 1;
    transform: none;
  }

  .home-page .home-moment .home-language-cta {
    width: 100%;
    max-width: 100%;
    padding: 14px;
    gap: 18px;
  }

  .home-page .home-moment .home-language-cta-thumb {
    width: 64px;
    height: 64px;
  }

  .home-page .home-moment .home-language-cta-btn {
    padding: 16px 22px;
  }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .home-page .home-moment-media-wrap {
    overflow: hidden;
    margin-bottom: 0;
  }

  .home-page .home-moment-media[data-stack="1"],
  .home-page .home-moment-media[data-stack="2"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
  }
}

.home-page .home-language-media-wrap {
  position: relative;
  display: block;
  margin: 0;
  border: none;
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 5;
  height: auto;
  min-height: 0;
  justify-self: stretch;
  align-self: stretch;
  border-radius: 22px;
  overflow: hidden;
  background: #f4f4f2;
  box-shadow:
    0 18px 40px rgba(11, 12, 14, 0.12),
    0 2px 8px rgba(11, 12, 14, 0.05);
}

@media (min-width: 900px) {
  .home-page .home-language-media-wrap {
    max-width: 380px;
    width: 100%;
    aspect-ratio: 1 / 1;
    justify-self: start;
    align-self: center;
    border-radius: 20px;
    margin-bottom: 0;
  }

  .home-page .home-language-media {
    border-radius: 20px;
  }
}

.home-page .home-language-media {
  position: absolute;
  inset: 0;
  margin: 0;
  border: none;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 22px;
  overflow: hidden;
  background: #f4f4f2;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.02);
  transition:
    opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0.45s,
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-page .home-language-media.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  z-index: 1;
}

/* Made to Move - stacked swipe deck on mobile (carousel media) */
@media (max-width: 899px) {
  .home-page .home-language .home-moment-media-wrap {
    overflow: visible;
    margin-bottom: 28px;
    background: transparent;
    box-shadow: none;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    transform: none;
  }

  .home-page .home-language .home-moment-media {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform-origin: center bottom;
    box-shadow:
      0 14px 32px rgba(11, 12, 14, 0.14),
      0 2px 8px rgba(11, 12, 14, 0.06);
    transition:
      transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.35s ease,
      box-shadow 0.45s ease;
    will-change: transform;
    transform: none;
  }

  .home-page .home-language .home-moment-media[data-stack="0"] {
    z-index: 3;
    pointer-events: auto;
    cursor: grab;
    transform: translate3d(var(--stack-drag, 0px), 0, 0) scale(1);
    opacity: 1;
  }

  .home-page .home-language .home-moment-media[data-stack="0"]:active {
    cursor: grabbing;
  }

  .home-page .home-language .home-moment-media[data-stack="1"] {
    z-index: 2;
    transform: translate3d(0, 14px, 0) scale(0.93);
    opacity: 1;
  }

  .home-page .home-language .home-moment-media[data-stack="2"] {
    z-index: 1;
    transform: translate3d(0, 26px, 0) scale(0.86);
    opacity: 0.9;
  }

  .home-page .home-language .home-moment-media.is-dragging {
    transition: none;
  }

  .home-page .home-language .home-moment-media.is-active {
    z-index: 3;
  }

  /* Loved Worldwide — no image block on mobile; copy sits tight under Made to Move */
  .home-page #moment-go .home-language-media-wrap {
    display: none !important;
  }

  .home-page #moment-go .home-moment-copy {
    order: 1;
    margin-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .home-page .home-language .home-moment-media-wrap {
    overflow: hidden;
    margin-bottom: 0;
  }

  .home-page .home-language .home-moment-media[data-stack="1"],
  .home-page .home-language .home-moment-media[data-stack="2"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
  }
}

.home-page .home-language-media.has-upload,
.home-page .home-language-media[data-upload].has-upload {
  background-color: #f4f4f2;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.home-page .home-language-media .seo-upload-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.home-page .home-language-media .ph-tag,
.home-page .home-moment-media .ph-tag {
  display: none;
}

body.dev-mode.dev-editing .home-page .home-language-media .ph-tag {
  display: none !important;
  pointer-events: none !important;
}

.home-page .home-language-copy,
.home-page .home-moment-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  max-width: 520px;
}

.home-page .home-language-copy h2,
.home-page .home-moment-copy h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  max-width: 14ch;
  color: var(--ink);
  white-space: pre-line;
}

/* Stable one-line section titles — same serif voice as Us vs. Them */
.home-page .home-section-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: none;
  white-space: nowrap;
  text-align: left;
}

.home-page .home-language-copy .home-section-title,
.home-page .home-moment-copy .home-section-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: none;
  width: max-content;
  white-space: nowrap;
  text-align: left;
}

.home-page .home-language-copy .home-section-title {
  font-weight: 700;
}

.home-page .home-moment-copy .home-section-title {
  font-weight: 400 !important;
}

.home-page .home-language-copy > .home-section-lede {
  margin: 0 0 22px;
  max-width: 32rem;
}

.home-page .home-moment-lede {
  max-width: 28rem;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 22px;
}

.home-page .home-moment-lede-shot {
  display: block;
  width: 100%;
  max-width: 28rem;
  margin: 0 0 22px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background-color: #ecece8;
  background-size: cover;
  background-position: center;
  box-shadow:
    0 12px 28px rgba(11, 12, 14, 0.1),
    0 2px 6px rgba(11, 12, 14, 0.04);
}

.home-page .home-moment-stack {
  display: contents;
}

.home-page .home-moment-block {
  display: contents;
}

.home-page .home-moment-block-copy {
  display: contents;
}

body.dev-mode.dev-editing .home-page .home-moment-lede-shot[data-upload] {
  cursor: pointer;
  outline: 2px dashed rgba(37, 99, 235, 0.55);
  outline-offset: 3px;
}

/* Impact CTA: desktop only (mobile stack unchanged) */
.home-page .home-impact-cta {
  display: none;
}

/* Desktop: single Ekster-style impact band — image + copy / CTA */
@media (min-width: 900px) {
  .home-page .home-language {
    display: none !important;
  }

  .home-page .home-moment--flip .home-language-media-wrap,
  .home-page .home-language .home-moment-media-wrap,
  .home-page .home-moment-media-wrap,
  .home-page .home-moment--flip .home-moment-media-wrap {
    display: none !important;
  }

  .home-page .home-moment.home-moment--flip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: none;
    gap: 0;
    width: min(100% - 2 * var(--gutter), 1120px);
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(72px, 10vh, 120px) 0;
    text-align: left;
  }

  .home-page .home-moment--flip .home-moment-copy {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-self: stretch;
    padding-right: 0;
  }

  .home-page .home-moment-desktop-lede,
  .home-page .home-moment .home-language-cta {
    display: none !important;
  }

  .home-page .home-moment-stack {
    display: block;
    width: 100%;
  }

  .home-page .home-moment-block {
    display: none;
  }

  .home-page .home-moment-block--impact {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: clamp(36px, 5vw, 76px);
    width: 100%;
    text-align: left;
  }

  .home-page .home-moment-block-copy {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    justify-content: center;
    gap: clamp(16px, 2vh, 24px);
    min-width: 0;
    max-width: none;
    padding: 8px 0;
  }

  .home-page .home-moment-block--impact .home-section-title {
    margin: 0;
    max-width: none;
    width: max-content;
    white-space: nowrap;
    font-size: clamp(40px, 4.2vw, 56px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }

  .home-page .home-moment-block--impact .home-moment-lede {
    display: block;
    margin: 0;
    max-width: 34rem;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.55;
    color: var(--muted);
  }

  .home-page .home-impact-feats {
    margin: 0;
    max-width: 22rem;
  }

  .home-page .home-impact-feats .buybox-feat {
    align-items: flex-start;
    text-align: left;
  }

  .home-page .home-impact-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: auto;
    min-width: 12.5rem;
    margin-top: clamp(20px, 3vh, 32px);
    box-sizing: border-box;
  }

  .home-page .home-impact-cta:hover {
    opacity: 1;
  }

  .home-page .home-moment-block--impact .home-moment-lede-shot {
    display: block;
    flex: 1 1 50%;
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: none;
  }

  .home-page .home-moment .home-moment-lede {
    display: block;
  }
}

/* Stack ledes show on mobile + desktop impact; legacy single-lede hide removed */

/* Desktop Loved Worldwide subtext - hidden below desktop */
@media (max-width: 899px) {
  .home-page .home-moment-desktop-lede {
    display: none !important;
  }

  .home-page .home-impact-cta {
    display: none !important;
  }

  .home-page .home-section-title[data-edit="section-moment-feat-1-title"] {
    display: none !important;
  }

  .home-page .home-impact-feats {
    margin: 14px auto 0;
  }

  /* Loved Worldwide impact: flat lede on paper, feats under image */
  .home-page .home-moment-block--impact .rating-pill {
    order: 1;
  }

  .home-page .home-moment-block--impact .home-section-title {
    order: 2;
  }

  .home-page .home-moment-block--impact .home-moment-lede {
    order: 3;
  }

  .home-page .home-moment-block--impact .home-moment-lede-shot {
    order: 4;
    width: 100%;
    max-width: none;
    margin: clamp(20px, 4vh, 28px) 0 0;
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--paper);
    background-image: url("/assets/images/uploads/home-moment-lede-shot-mobile.webp");
    background-size: cover;
    background-position: center;
  }

  .home-page .home-moment-block--impact .home-moment-lede-shot.has-upload {
    background-color: transparent;
  }

  .home-page .home-moment-block--impact .home-impact-feats {
    order: 5;
    margin: clamp(18px, 3.5vh, 26px) auto 0;
  }

  .home-page .home-moment-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(36px, 7vh, 56px);
    width: 100%;
  }

  .home-page .home-moment-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  .home-page .home-moment-block-copy {
    display: contents;
  }

  .home-page .home-moment .home-moment-lede {
    display: block;
  }

  .home-page .home-moment-lede-shot {
    display: block;
  }

  .home-page .home-moment-mobile-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 36ch;
    margin: 18px auto 0;
  }

  .home-page .home-moment-mobile-cta .btn-cta {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    background:
      linear-gradient(
        165deg,
        var(--btn-gold-hi) 0%,
        var(--btn-gold) 48%,
        var(--btn-gold-lo) 100%
      );
    color: var(--ink);
    border: 1px solid rgba(196, 150, 40, 0.42);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    padding: 19px 28px;
    text-decoration: none;
  }
}

@media (min-width: 900px) {
  .home-page .home-moment-mobile-cta {
    display: none !important;
  }
}

/* Legacy split-title styles (unused on home feature sections) */
.home-page .home-split-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: none;
  white-space: nowrap;
}

.home-page .home-split-title .home-split-lead,
.home-page .home-split-title .home-split-tail {
  display: inline;
  color: inherit;
}

.home-page .home-split-title .home-split-tail {
  margin-top: 0;
  margin-left: 0.28em;
}

.home-page .home-split-title .home-split-tail em {
  font-size: 0.78em;
  letter-spacing: -0.02em;
}

.home-page .home-split-title strong {
  font-weight: 700;
  font-style: normal;
  color: inherit;
}

.home-page .home-split-title em {
  font-style: italic;
  font-weight: 500;
  color: inherit;
}

.home-page .home-moment-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.home-page .home-moment-points li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-page .home-moment-points strong {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.home-page .home-moment-points span {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.home-page .home-language-copy .home-index {
  margin-bottom: 18px;
  padding-top: 0;
}

.home-page .home-language-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 clamp(24px, 3.5vh, 36px);
  padding: 0;
  width: 100%;
}

.home-page .home-language-features li {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  margin: 0;
  padding: 12px 10px 12px 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  outline: none;
  transition: background 0.25s ease, opacity 0.25s ease;
  opacity: 0.48;
}

.home-page .home-language-features li::before {
  content: "";
  width: 3px;
  height: 100%;
  min-height: 1.6em;
  margin-top: 0.15em;
  border-radius: 999px;
  background: transparent;
  opacity: 1;
  align-self: stretch;
  transition: background 0.25s ease;
}

.home-page .home-language-features li.is-active {
  opacity: 1;
}

.home-page .home-language-features li.is-active::before {
  background: var(--ink);
}

.home-page .home-language-features li:hover,
.home-page .home-language-features li:focus-visible {
  opacity: 1;
}

.home-page .home-language-features li:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(13, 14, 16, 0.18);
}

.home-page .home-language-features strong {
  display: block;
  font-family: var(--sans);
  font-size: clamp(15px, 1.35vw, 17px);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 5px;
}

.home-page .home-language-features p {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
}

.home-page .home-language-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding: 12px;
  background: var(--ink);
  color: var(--pure);
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}

.home-page .home-language-cta:hover {
  transform: translateY(-2px);
  color: var(--pure);
  box-shadow: 0 14px 32px rgba(13, 14, 16, 0.18);
}

.home-page .home-language-cta-product {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.home-page .home-language-cta-thumb {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  overflow: hidden;
  background-color: #f4f4f2;
  background-image: url("../images/uploads/sticky-cart.webp");
  background-size: cover;
  background-position: center;
}

.home-page .home-language-cta-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.home-page .home-language-cta-copy strong {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-page .home-language-cta-copy em {
  font-style: normal;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.78);
}

.home-page .home-language-cta-copy .price-currency {
  font-size: 0.75em;
  margin-right: 0.02em;
}

.home-page .home-language-cta-btn {
  flex: 0 0 auto;
  padding: 15px 20px;
  background: var(--pure);
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s;
}

.home-page .home-language-cta:hover .home-language-cta-btn {
  background: #f0f0ee;
}

/* Made to Move - mobile Meet the Board CTA (hidden on desktop) */
.home-page .home-language-mobile-cta {
  display: none;
}

/* Us vs. Them — comparison table */
:is(.home-page, .pdp-page) .home-versus {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
  width: min(100% - 2 * var(--gutter), 720px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(72px, 12vh, 140px) 0 clamp(36px, 5vh, 56px);
  min-height: 0;
  background: transparent;
}

:is(.home-page, .pdp-page) .home-versus::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--paper);
  pointer-events: none;
}

:is(.home-page, .pdp-page) .home-versus-copy {
  max-width: none;
  justify-self: stretch;
}

:is(.home-page, .pdp-page) .home-versus-copy h2 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  margin-bottom: 14px;
}

:is(.home-page, .pdp-page) .home-versus-lede {
  max-width: 34rem;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: clamp(28px, 4vh, 40px);
}

:is(.home-page, .pdp-page) .home-versus-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 78px;
  align-items: center;
  justify-content: start;
  gap: 10px;
}

:is(.home-page, .pdp-page) .home-versus-labels,
:is(.home-page, .pdp-page) .home-versus-col {
  display: grid;
  grid-template-rows: 44px;
  grid-auto-rows: minmax(44px, auto);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  height: fit-content;
}

:is(.home-page, .pdp-page) .home-versus-col--us,
:is(.home-page, .pdp-page) .home-versus-col--them {
  width: 78px;
  max-width: 78px;
  justify-self: center;
}

:is(.home-page, .pdp-page) .home-versus-col--us {
  background: var(--ink);
  color: var(--pure);
  border-color: var(--ink);
  border-radius: 14px;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: 0 12px 28px rgba(11, 12, 14, 0.14);
}

:is(.home-page, .pdp-page) .home-versus-spacer {
  border-bottom: 1px solid var(--hairline);
}

:is(.home-page, .pdp-page) .home-versus-labels > div,
:is(.home-page, .pdp-page) .home-versus-col > div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  border-bottom: 1px solid var(--hairline);
}

:is(.home-page, .pdp-page) .home-versus-labels > div {
  justify-content: flex-start;
  padding: 0 14px;
}

:is(.home-page, .pdp-page) .home-versus-col--us > div {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  justify-content: center;
  padding: 0 6px;
}

:is(.home-page, .pdp-page) .home-versus-col--them > div {
  justify-content: center;
  padding: 0 6px;
}

:is(.home-page, .pdp-page) .home-versus-labels > div:last-child,
:is(.home-page, .pdp-page) .home-versus-col > div:last-child {
  border-bottom: none;
}

:is(.home-page, .pdp-page) .home-versus-labels [role="rowheader"] {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}

:is(.home-page, .pdp-page) .home-versus-col-head {
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  min-height: 44px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

:is(.home-page, .pdp-page) .home-versus-col--them .home-versus-col-head {
  color: var(--ink);
}

/* Desktop ? balanced table under the copy; mobile keeps the tighter strip */
@media (min-width: 1021px) {
  :is(.home-page, .pdp-page) .home-versus-copy {
    max-width: 560px;
  }

  :is(.home-page, .pdp-page) .home-versus-table {
    grid-template-columns: minmax(0, 1fr) 108px 108px;
    max-width: 540px;
    gap: 12px;
    align-items: stretch;
  }

  :is(.home-page, .pdp-page) .home-versus-labels,
  :is(.home-page, .pdp-page) .home-versus-col {
    grid-template-rows: 52px;
    grid-auto-rows: minmax(52px, auto);
    border-radius: 16px;
  }

  :is(.home-page, .pdp-page) .home-versus-col--us,
  :is(.home-page, .pdp-page) .home-versus-col--them {
    width: 108px;
    max-width: 108px;
  }

  :is(.home-page, .pdp-page) .home-versus-col--us {
    margin-top: -8px;
    margin-bottom: -8px;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(11, 12, 14, 0.18);
  }

  :is(.home-page, .pdp-page) .home-versus-labels > div,
  :is(.home-page, .pdp-page) .home-versus-col > div {
    min-height: 52px;
  }

  :is(.home-page, .pdp-page) .home-versus-labels > div {
    padding: 0 18px;
  }

  :is(.home-page, .pdp-page) .home-versus-col--us > div,
  :is(.home-page, .pdp-page) .home-versus-col--them > div {
    padding: 0 10px;
  }

  :is(.home-page, .pdp-page) .home-versus-labels [role="rowheader"] {
    font-size: 14px;
    letter-spacing: 0;
  }

  :is(.home-page, .pdp-page) .home-versus-col-head {
    font-size: 11px;
    letter-spacing: 0.12em;
    min-height: 52px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  :is(.home-page, .pdp-page) .home-versus-yes,
  :is(.home-page, .pdp-page) .home-versus-no {
    width: 24px;
    height: 24px;
  }

  :is(.home-page, .pdp-page) .home-versus-yes svg,
  :is(.home-page, .pdp-page) .home-versus-no svg {
    width: 20px;
    height: 20px;
  }
}

:is(.home-page, .pdp-page) .home-versus-yes,
:is(.home-page, .pdp-page) .home-versus-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

:is(.home-page, .pdp-page) .home-versus-yes svg,
:is(.home-page, .pdp-page) .home-versus-no svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

:is(.home-page, .pdp-page) .home-versus-col--us .home-versus-yes,
:is(.home-page, .pdp-page) .home-versus-col--us .home-versus-no {
  color: var(--pure);
}

:is(.home-page, .pdp-page) .home-versus-col--them .home-versus-yes,
:is(.home-page, .pdp-page) .home-versus-col--them .home-versus-no {
  color: rgba(13, 14, 16, 0.45);
}

:is(.home-page, .pdp-page) .home-versus-media {
  position: relative;
  margin: 0;
  border: none;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  height: 100%;
  min-height: 520px;
  align-self: stretch;
  justify-self: stretch;
  overflow: hidden;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

:is(.home-page, .pdp-page) .home-versus-media::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 95% 85% at 100% 100%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.92) 22%,
      rgba(255, 255, 255, 0.55) 48%,
      rgba(255, 255, 255, 0) 72%
    ),
    linear-gradient(
      to top left,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.35) 28%,
      rgba(255, 255, 255, 0) 55%
    );
}

/* Pull reviews up against the versus photo */
:is(.home-page, .pdp-page) .home-versus + #reviews,
:is(.home-page, .pdp-page) .home-versus + .pdp-section,
.home-page .home-skewed + #reviews,
.home-page .home-skewed + .pdp-section {
  padding-top: clamp(20px, 3vh, 36px);
}

/* ---------- Skewed lifestyle slider (Anytime, anywhere) ---------- */
.home-page .home-skewed {
  position: relative;
  padding: clamp(48px, 8vh, 96px) 0 clamp(40px, 6vh, 72px);
  overflow: hidden;
  background: var(--paper);
}

@media (max-width: 899px) {
  .home-page .home-skewed {
    padding-top: clamp(6px, 1.2vh, 14px);
    padding-bottom: clamp(32px, 5vh, 56px);
  }
}

.home-page .home-skewed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  margin-bottom: clamp(20px, 3vw, 32px);
}

.home-page .home-skewed-head .home-section-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.home-page .home-skewed-nav {
  display: none;
  flex-shrink: 0;
  gap: 8px;
}

@media (min-width: 768px) {
  .home-page .home-skewed-nav {
    display: flex;
  }
}

.home-page .home-skewed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--paper-soft);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.home-page .home-skewed-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.home-page .home-skewed-btn:hover {
  background: var(--ink);
  color: var(--pure);
}

.home-page .home-skewed-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.home-page .home-skewed-btn:disabled,
.home-page .home-skewed-btn.is-disabled {
  opacity: 0.18;
  pointer-events: none;
  cursor: default;
}

.home-page .home-skewed-rail {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  cursor: grab;
  padding: 8px 0 4px;
}

.home-page .home-skewed-rail::-webkit-scrollbar {
  display: none;
}

.home-page .home-skewed-rail.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

.home-page .home-skewed-track {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: max-content;
  padding: 0 var(--gutter);
}

.home-page .home-skewed-slide {
  flex: 0 0 auto;
  width: 12.75rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 768px) {
  .home-page .home-skewed-slide {
    width: 20.375rem;
  }
}

@media (min-width: 900px) {
  .home-page .home-skewed-slide {
    width: 14.5rem;
  }
}

@media (min-width: 900px) {
  .home-page .home-skewed-head {
    width: min(100% - 2 * var(--gutter), calc(3 * 14.5rem + 2 * 12px));
    max-width: calc(3 * 14.5rem + 2 * 12px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .home-page .home-skewed-rail {
    width: min(100% - 2 * var(--gutter), calc(3 * 14.5rem + 2 * 12px));
    max-width: calc(3 * 14.5rem + 2 * 12px);
    margin-left: auto;
    margin-right: auto;
    /* Soft fade on overflow edges — peeks dissolve instead of hard clip */
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 1.25rem,
      #000 calc(100% - 1.25rem),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 1.25rem,
      #000 calc(100% - 1.25rem),
      transparent 100%
    );
  }

  .home-page .home-skewed-rail.is-at-start {
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0,
      #000 calc(100% - 1.25rem),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      #000 0,
      #000 calc(100% - 1.25rem),
      transparent 100%
    );
  }

  .home-page .home-skewed-rail.is-at-end {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 1.25rem,
      #000 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 1.25rem,
      #000 100%
    );
  }

  .home-page .home-skewed-rail.is-at-start.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .home-page .home-skewed-track {
    gap: 12px;
    padding: 0;
  }

  .home-page .home-skewed-slide {
    opacity: 0.28;
    transition: opacity 0.35s ease;
  }

  .home-page .home-skewed-slide.is-in-view {
    opacity: 1;
  }
}

.home-page .home-skewed-frame {
  --skew: -14deg;
  position: relative;
  width: 100%;
  height: 19.813rem;
  margin: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  transform: skewX(var(--skew));
  transform-origin: center bottom;
  background-color: var(--midnight);
}

@media (min-width: 768px) {
  .home-page .home-skewed-frame {
    height: 31.438rem;
  }
}

@media (min-width: 900px) {
  .home-page .home-skewed-frame {
    height: 22.5rem;
  }
}

/* Prefer the SEO img layer so we can counter-skew the photo — only after it has pixels.
   Forcing none on .has-upload alone blanks the rail while lazy imgs are still loading. */
.home-page .home-skewed-frame.has-upload.is-img-ready {
  background-image: none !important;
}

.home-page .home-skewed-frame .seo-upload-img {
  inset: auto;
  top: 0;
  left: -30%;
  width: 160%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: skewX(14deg);
  transform-origin: center center;
}

.home-page .home-skewed-frame .upload-hint {
  transform: skewX(14deg);
}

.home-page .home-skewed-caption {
  margin: 0;
  padding-right: 0.5rem;
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .home-page .home-skewed-caption {
    font-size: 1.5rem;
  }
}

@media (min-width: 900px) {
  .home-page .home-skewed-caption {
    font-size: 1.125rem;
  }
}

body.dev-mode.dev-editing .home-page .home-skewed-rail {
  cursor: default;
}

body.dev-mode.dev-editing .home-page .home-skewed-frame[data-upload] {
  cursor: pointer;
}

/* ---------- Product pitch (USP checklist) ---------- */
.home-page .home-pitch {
  padding: clamp(48px, 8vh, 96px) var(--gutter);
  background: var(--paper);
}

.home-page .home-pitch-inner {
  width: min(100%, 90rem);
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 48vh;
}

@media (min-width: 768px) {
  .home-page .home-pitch-inner {
    flex-direction: row;
    align-items: center;
    min-height: 21.875rem;
    gap: 48px;
  }
}

@media (min-width: 1024px) {
  .home-page .home-pitch-inner {
    min-height: 32rem;
  }
}

.home-page .home-pitch-copy {
  width: 100%;
  max-width: 38.125rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

.home-page .home-pitch-copy h2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}

.home-page .home-pitch-kicker {
  display: block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--ink);
}

.home-page .home-pitch-usps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-page .home-pitch-usps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}

.home-page .home-pitch-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--pure);
}

.home-page .home-pitch-check svg {
  width: 12px;
  height: 12px;
  display: block;
}

.home-page .home-pitch-cta {
  margin-top: 8px;
}

.home-page .home-pitch-cta .btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
}

/* ---------- Reasons card (media + tabs) ---------- */
.home-page .home-reasons {
  padding: clamp(40px, 7vh, 72px) var(--gutter) clamp(48px, 8vh, 88px);
  background: var(--paper);
}

.home-page .home-reasons-card {
  width: min(100%, 1360px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: 12px;
  background: var(--obsidian);
  color: var(--pure);
}

@media (min-width: 900px) {
  .home-page .home-reasons-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    max-width: 1100px;
  }
}

.home-page .home-reasons-media-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--obsidian);
}

@media (min-width: 900px) {
  .home-page .home-reasons-media-stack {
    /* Smaller square — same 1:1 crop, section no longer full-bleed tall */
    aspect-ratio: 1 / 1;
    width: min(38vw, 400px);
    max-width: 400px;
    height: auto;
    min-height: 0;
    align-self: center;
    justify-self: start;
  }
}

.home-page .home-reasons-media {
  margin: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--obsidian);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 0;
  pointer-events: none;
}

.home-page .home-reasons-media.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  pointer-events: auto;
}

/* Edit mode: both Description + Statistics media stay clickable upload targets */
body.home-page.dev-mode.dev-editing .home-reasons-media-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  aspect-ratio: 2 / 1;
  width: 100%;
  max-width: none;
  min-height: 160px;
  padding: 8px;
  box-sizing: border-box;
}

body.home-page.dev-mode.dev-editing .home-reasons-media-stack::after {
  display: none;
}

body.home-page.dev-mode.dev-editing .home-reasons-media {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 140px;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  border-radius: 8px;
}

body.home-page.dev-mode.dev-editing .home-reasons-media .upload-hint {
  display: flex !important;
  opacity: 1 !important;
}

/* Soft fade into the card charcoal so the seam disappears */
.home-page .home-reasons-media-stack::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(11, 12, 14, 0) 0%,
    rgba(11, 12, 14, 0.35) 38%,
    rgba(11, 12, 14, 0.82) 72%,
    var(--obsidian) 100%
  );
}

@media (min-width: 900px) {
  .home-page .home-reasons-media-stack::after {
    height: 38%;
    width: auto;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      rgba(11, 12, 14, 0) 0%,
      rgba(11, 12, 14, 0.28) 40%,
      rgba(11, 12, 14, 0.78) 74%,
      var(--obsidian) 100%
    );
  }

  /* Description still — fit inside the square without cropping to the edges */
  .home-page .home-reasons-media[data-upload="home-details"] {
    box-sizing: border-box;
    padding: clamp(18px, 2.8vw, 32px);
  }

  .home-page .home-reasons-media[data-upload="home-details"] .seo-upload-img,
  .home-page .home-reasons-media[data-upload="home-details"] .home-reasons-video {
    object-fit: contain;
    object-position: center;
  }

  .home-page .home-reasons-media[data-upload="home-details"].has-upload {
    background-size: contain !important;
    background-position: center !important;
  }
}

.home-page .home-reasons-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  pointer-events: none;
}

.home-page .home-reasons-media.has-video .home-reasons-video {
  display: block;
}

.home-page .home-reasons-media.has-video.has-upload {
  background-image: none !important;
}

.home-page .home-reasons-media .seo-upload-img {
  z-index: 0;
  object-fit: cover;
  object-position: center top;
}

.home-page .home-reasons-media.has-upload {
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

.home-page .home-reasons-media.has-video .seo-upload-img {
  display: none;
}

.home-page .home-reasons-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
}

@media (min-width: 900px) {
  .home-page .home-reasons-copy {
    padding: 56px;
    justify-content: center;
    align-self: stretch;
  }
}

.home-page .home-reasons-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--pure);
  text-wrap: balance;
}

.home-page .home-reasons-tabs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  flex: 1;
}

.home-page .home-reasons-tablist {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  scrollbar-width: none;
}

.home-page .home-reasons-tablist::-webkit-scrollbar {
  display: none;
}

.home-page .home-reasons-tab {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 10px 16px;
  background: transparent;
  color: rgba(244, 243, 239, 0.55);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.home-page .home-reasons-tab.is-active,
.home-page .home-reasons-tab[aria-selected="true"] {
  background: var(--pure);
  color: var(--ink);
  border-radius: 6px;
}

.home-page .home-reasons-tab:focus-visible {
  outline: 2px solid var(--pure);
  outline-offset: 2px;
}

.home-page .home-reasons-panel {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.home-page .home-reasons-panel.is-active {
  display: flex;
}

.home-page .home-reasons-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244, 243, 239, 0.72);
  max-width: 42ch;
}

.home-page .home-reasons-usps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-page .home-reasons-usps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(244, 243, 239, 0.88);
}

.home-page .home-reasons-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: #3d8f5a;
  color: var(--pure);
}

.home-page .home-reasons-check svg {
  width: 12px;
  height: 12px;
  display: block;
}

.home-page .home-reasons-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .home-page .home-reasons-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
  }
}

.home-page .home-reasons-stat {
  display: grid;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.home-page .home-reasons-stat-num {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 72px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--pure);
}

.home-page .home-reasons-stat-label {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(244, 243, 239, 0.62);
  text-wrap: pretty;
}

.home-page .home-reasons-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--pure);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.home-page .home-reasons-link:hover {
  opacity: 0.72;
}

.home-page .home-reasons-link-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.home-page .home-reasons-link-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.home-page .home-skewed + .home-pitch,
.home-page .home-reasons + #reviews,
.home-page .home-reasons + .pdp-section {
  padding-top: clamp(20px, 3vh, 36px);
}


/* Before / After — dark compare band */
.home-page .home-ba {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 10vh, 120px) var(--gutter);
  color: var(--pure);
  background: var(--obsidian);
}

.home-page .home-ba::before {
  content: none;
}

.home-page .home-ba-inner {
  width: min(100%, 560px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 5vh, 44px);
  text-align: center;
}

.home-page .home-ba-media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 200px;
  margin: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  overflow: hidden;
  background-color: #1a1b1f;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.home-page .home-ba-media .home-ba-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
  border: 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}

.home-page .home-ba-media.has-video .home-ba-video {
  display: block;
}

.home-page .home-ba-media.has-video .home-ba-video.is-playing {
  opacity: 1;
  visibility: visible;
}

/* Keep poster still until the loop is actually painting frames. */
.home-page .home-ba-media.has-video.has-upload.is-video-ready {
  background-image: none !important;
}

.home-page .home-ba-media.reveal {
  opacity: 1;
  transform: none;
}

body.home-page.dev-mode.dev-editing .home-ba-media[data-upload] {
  outline: 2px dashed rgba(120, 220, 160, 0.95);
  outline-offset: -3px;
  cursor: pointer;
}

.home-page .home-ba-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 36ch;
}

.home-page .home-ba-kicker {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.home-page .home-ba-copy h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(26px, 6.5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--pure);
  max-width: 16ch;
}

.home-page .home-ba-lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.home-page .home-ba-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100%, 340px);
  margin-top: 10px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: var(--pure);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.25s ease, background 0.25s ease;
}

.home-page .home-ba-cta:hover {
  background: #f0f0ee;
  transform: translateY(-1px);
}

.home-page .home-ba-cta-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--pure);
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .home-page .home-ba {
    width: min(72vw, 760px);
    margin-inline: auto;
    padding: clamp(28px, 3.5vh, 44px) clamp(32px, 3.5vw, 48px);
    border-radius: 28px;
    background: var(--obsidian);
  }
  .home-page .home-ba-inner {
    width: 100%;
    gap: clamp(14px, 2vh, 22px);
  }
  .home-page .home-ba-media {
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 220px;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
  }
  .home-page .home-ba-copy h2 { font-size: clamp(24px, 2.2vw, 32px); }
  .home-page .home-ba-lede { font-size: 14px; }
  .home-page .home-ba-kicker { font-size: 11px; }
}

@media (max-width: 899px) {
  .home-page .home-ba {
    padding: clamp(48px, 8vh, 80px) var(--gutter);
  }
  .home-page .home-ba-media {
    border-radius: 18px;
    aspect-ratio: 4 / 3;
  }
}

/* The object */
.home-page .home-object {
  padding: clamp(90px, 14vh, 160px) 0;
  background: var(--midnight);
  color: var(--white);
}

.home-page .home-object-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--hairline-light);
}

.home-page .home-object-item {
  padding: clamp(32px, 5vh, 56px) clamp(16px, 2vw, 28px) clamp(36px, 6vh, 64px) 0;
  border-right: 1px solid var(--hairline-light);
}

.home-page .home-object-item:last-child { border-right: none; }
.home-page .home-object-item + .home-object-item {
  padding-left: clamp(16px, 2vw, 28px);
}

.home-page .home-object-no {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted-light);
  margin-bottom: clamp(28px, 5vh, 64px);
}

.home-page .home-object-item h3 {
  font-size: clamp(20px, 2vw, 26px);
  color: var(--pure);
  margin-bottom: 12px;
}

.home-page .home-object-item p {
  color: var(--muted-light);
  font-size: 13px;
  line-height: 1.55;
  max-width: 22ch;
}

.home-page .home-object-wide {
  margin: clamp(40px, 7vh, 80px) var(--gutter) 0;
  max-width: calc(1360px - 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 2 * var(--gutter));
  aspect-ratio: 21 / 9;
  border: none;
}

/* Close / CTA */
.home-page .home-close {
  padding: clamp(120px, 20vh, 220px) var(--gutter);
  text-align: center;
  background: var(--paper);
}

.home-page .home-close-media {
  margin: 0 auto 28px;
  border: none;
  width: min(100%, 280px);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 0;
}

.home-page .home-close-media .ph-tag {
  color: rgba(255, 255, 255, 0.55);
}

.home-page .home-close h2 {
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 1.05;
}

.home-page .home-close-sub {
  margin: 22px auto 0;
  max-width: 28rem;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.home-page .home-close-row {
  margin-top: clamp(36px, 5vh, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.home-page .home-close-meta {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-height: 720px) {
  .home-page .home-brand {
    font-size: clamp(28px, 6vw, 52px);
    margin-bottom: 12px;
  }
  .home-page .home-hero.has-hero-video .home-hero-copy h1 {
    font-size: clamp(26px, 5vw, 40px);
  }
  .home-page .home-hero.has-hero-video .home-hero-lede {
    font-size: 13px;
  }
  .home-page .home-scroll { display: none; }
}

/* Shared buttons — Kanva lime / olive system */
.btn-dark,
.btn-light,
.btn-lime {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s, opacity 0.3s;
}

.btn-dark {
  background: var(--ink);
  color: var(--pure);
}

.btn-light,
.btn-lime {
  background: var(--accent-lime);
  color: #fff;
}

.btn-dark:hover,
.btn-light:hover,
.btn-lime:hover { transform: translateY(-2px); filter: brightness(1.03); }
.btn-dark[disabled],
.btn-light[disabled],
.btn-lime[disabled] { opacity: 0.6; cursor: wait; }

.purchase-error {
  margin-top: 26px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #a04545;
}

/* Below-fold home: do NOT use content-visibility:auto here.
   It reserved a blank box then painted ~300–600ms late on scroll-in.
   Scroll perf stays from sticky/body-class rules + offscreen motion pause. */

/* Benefit strip (under hero) */
.home-page .home-benefits {
  position: relative;
  width: min(100% - 2 * var(--gutter), 920px);
  max-width: 920px;
  margin: 0 auto;
  background: transparent;
  border-bottom: none;
}

.home-page .home-press-kicker {
  margin: 0;
  padding: clamp(18px, 2.8vh, 26px) var(--gutter) 0;
  text-align: center;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-page .home-benefits::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  pointer-events: none;
}

.home-page .home-benefits-rail {
  overflow: visible;
  width: 100%;
  -webkit-mask-image: none;
  mask-image: none;
}

.home-page .home-benefits-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  gap: 0;
  will-change: auto;
}

/* Desktop: kicker above, logos in one open row. */
@media (min-width: 1021px) {
  .home-page .home-benefits {
    width: min(100% - 2 * var(--gutter), 920px);
    max-width: 920px;
    padding: 0 0 clamp(8px, 1.2vh, 14px);
  }

  .home-page .home-press-kicker {
    padding: clamp(18px, 2.8vh, 26px) var(--gutter) 10px;
    text-align: center;
  }

  .home-page .home-benefits-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 3.5vw, 48px);
    animation: none !important;
    transform: none !important;
  }

  .home-page .home-benefits-track .home-benefit[aria-hidden="true"] {
    display: none;
  }

  .home-page .home-benefit {
    flex: 1 1 0;
    border-right: none;
    padding: clamp(8px, 1.4vh, 16px) 14px clamp(16px, 2.4vh, 24px);
  }
}

.home-page .home-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: clamp(16px, 2.8vh, 28px) 14px;
  border-right: none;
  text-align: center;
}

.home-page .home-benefit:last-child,
.home-page .home-benefits-track > .home-benefit:nth-child(4) {
  border-right: none;
}

.home-page .home-benefit::after {
  content: none;
  display: none;
}

.home-page .home-press-logo {
  min-height: 0;
}

.home-page .home-press-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
  opacity: 0.72;
  line-height: 1;
  user-select: none;
}

.home-page .home-press-mark--medium {
  font-family: var(--font-serif, "PT Serif", Georgia, serif);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.home-page .home-press-mark--reportley {
  font-family: var(--font-serif, "PT Serif", Georgia, serif);
  font-size: clamp(14px, 1.45vw, 17px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
}

.home-page .home-press-mark--chicago {
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-page .home-press-mark--bleam {
  font-family: var(--font-serif, "PT Serif", Georgia, serif);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Meet the board ? intro split */
.home-page .home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(80px, 12vh, 150px) var(--gutter);
}

.home-page .home-intro-media {
  margin: 0;
  aspect-ratio: 4 / 5;
  border: none;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: #12151a;
}

.home-page .home-intro-media .home-intro-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Zoom past baked-in letterbox bars in the source file */
  transform: scale(1.48);
  transform-origin: center center;
  display: none;
  pointer-events: none;
}

.home-page .home-intro-media.has-video .home-intro-video {
  display: block;
}

.home-page .home-intro-media.has-video.has-upload {
  background-image: none !important;
}

.home-page .home-intro-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(18, 21, 26, 0.35) 38%,
    rgba(18, 21, 26, 0.82) 72%,
    #12151a 100%
  );
}

.home-page .home-intro-media .ph-tag {
  display: none;
}

.home-page .home-intro-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.home-page .home-intro-copy h2 {
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.06;
  margin-bottom: 20px;
}

.home-page .home-intro-lede {
  max-width: 30rem;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.home-page .home-intro-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-bottom: 32px;
  max-width: 30rem;
}

.home-page .home-intro-list li {
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.home-page .home-intro-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
  color: var(--ink);
}

.home-page .home-intro .price-row {
  margin: 4px 0 8px;
}

.home-page .home-intro .stock-line {
  margin: 0;
}

.home-page .home-intro .limited-line {
  margin: 6px 0 14px;
  max-width: 280px;
}

.home-page .home-intro-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 420px;
}

.home-page .home-intro-cta .btn-cta {
  width: 100%;
  box-sizing: border-box;
}

.home-page .home-intro-cta .btn-cta .price-currency {
  font-size: 0.85em;
  margin-right: 0.02em;
}

/* Desktop only — sticky product rides beside the story timeline.
   Below 1021px the wrapper is inert; mobile/tablet keep stacked order. */
@media (min-width: 1021px) {
  .home-page .home-story-duo,
  .atlas-page .home-story-duo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
    /* stretch so sticky intro can travel the full timeline height */
    align-items: stretch;
    background:
      radial-gradient(90% 60% at 20% 0%, #1a1d24 0%, transparent 50%),
      linear-gradient(180deg, #12151a 0%, #0e1014 55%, #12151a 100%);
    color: var(--white);
  }

  .home-page .home-story-duo::after,
  .atlas-page .home-story-duo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 50% at 50% 0%, rgba(255, 255, 255, 0.04), transparent 55%);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
  }

  .home-page .home-story-duo .story-line,
  .atlas-page .home-story-duo .story-line {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    background: transparent;
    padding-left: clamp(28px, 4vw, 64px);
    padding-right: clamp(24px, 3vw, 48px);
  }

  .home-page .home-story-duo .story-line::after,
  .atlas-page .home-story-duo .story-line::after {
    display: none;
  }

  .home-page .home-story-duo .story-kicker,
  .home-page .home-story-duo .story-beats,
  .atlas-page .home-story-duo .story-kicker,
  .atlas-page .home-story-duo .story-beats {
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
    width: 100%;
  }

  .home-page .home-story-duo .home-intro,
  .atlas-page .home-story-duo .home-intro {
    grid-column: 2;
    grid-row: 1;
    /* Follow scroll through the duo — CSS only (no body class thrash). */
    position: sticky;
    top: max(18px, calc(env(safe-area-inset-top, 0px) + 76px));
    align-self: start;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(12px, 1.6vh, 20px);
    max-width: none;
    width: 100%;
    margin: 0;
    padding: clamp(20px, 3vh, 36px) clamp(24px, 2.8vw, 40px) clamp(20px, 3vh, 36px) clamp(20px, 2.4vw, 36px);
    background: transparent;
    color: var(--white);
    box-shadow: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    /* Never overflow:auto here — traps wheel/trackpad and blocks page scroll. */
    overflow: visible;
  }

  .home-page .home-story-duo .home-intro-media,
  .atlas-page .home-story-duo .home-intro-media {
    width: 100%;
    max-width: min(100%, 360px);
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: min(340px, 38dvh);
    margin: 0;
    align-self: flex-start;
    border: none;
    border-radius: 22px;
    overflow: hidden;
    flex: 0 0 auto;
  }

  .home-page .home-story-duo .home-intro-media::after,
  .atlas-page .home-story-duo .home-intro-media::after {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(18, 21, 26, 0.35) 38%,
      rgba(14, 16, 20, 0.85) 72%,
      #0e1014 100%
    );
  }

  .home-page .home-story-duo .home-intro-kicker,
  .atlas-page .home-story-duo .home-intro-kicker {
    color: rgba(255, 255, 255, 0.48);
  }

  .home-page .home-story-duo .home-intro-copy h2,
  .atlas-page .home-story-duo .home-intro-copy h2 {
    font-size: clamp(28px, 2.6vw, 40px);
    margin-bottom: 14px;
    color: var(--pure);
  }

  .home-page .home-story-duo .home-intro-lede,
  .atlas-page .home-story-duo .home-intro-lede {
    font-size: 14px;
    margin-bottom: 20px;
    color: var(--muted-light);
  }

  .home-page .home-story-duo .home-intro-list,
  .atlas-page .home-story-duo .home-intro-list {
    margin-bottom: 22px;
    gap: 10px 18px;
  }

  .home-page .home-story-duo .home-intro-list li,
  .atlas-page .home-story-duo .home-intro-list li {
    color: rgba(244, 243, 239, 0.88);
  }

  .home-page .home-story-duo .home-intro-list li::before,
  .atlas-page .home-story-duo .home-intro-list li::before {
    color: rgba(255, 255, 255, 0.7);
  }

  .home-page .home-story-duo .home-intro .price,
  .atlas-page .home-story-duo .home-intro .price {
    color: var(--pure);
  }

  .home-page .home-story-duo .home-intro .price-compare,
  .atlas-page .home-story-duo .home-intro .price-compare {
    color: rgba(244, 243, 239, 0.45);
  }

  .home-page .home-story-duo .home-intro .stock-line,
  .atlas-page .home-story-duo .home-intro .stock-line {
    justify-content: flex-start;
    color: #d4a574;
  }

  .home-page .home-story-duo .home-intro .limited-line,
  .atlas-page .home-story-duo .home-intro .limited-line {
    text-align: left;
    color: rgba(244, 243, 239, 0.42);
    padding: 0;
  }

  .home-page .home-story-duo .home-intro .limited-line::before,
  .home-page .home-story-duo .home-intro .limited-line::after,
  .atlas-page .home-story-duo .home-intro .limited-line::before,
  .atlas-page .home-story-duo .home-intro .limited-line::after {
    display: none;
  }

  .home-page .home-story-duo .home-intro-cta,
  .atlas-page .home-story-duo .home-intro-cta {
    max-width: 220px;
    width: auto;
    align-self: flex-start;
  }

  .home-page .home-story-duo .home-intro-cta .btn-cta,
  .atlas-page .home-story-duo .home-intro-cta .btn-cta {
    width: auto;
    padding-inline: 28px;
  }
}

/* Compare table */
.home-page .home-compare {
  padding: clamp(90px, 14vh, 160px) 0;
  background: var(--paper-soft);
}

.home-page .home-compare-table {
  max-width: 880px;
  margin: 0 auto;
  width: calc(100% - 2 * var(--gutter));
  background: var(--paper);
  border: 1px solid var(--hairline);
}

.home-page .home-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(96px, 16vw, 170px) clamp(96px, 16vw, 170px);
  border-top: 1px solid var(--hairline);
}

.home-page .home-compare-row:first-child { border-top: none; }

.home-page .home-compare-row > span {
  padding: 17px clamp(14px, 3vw, 28px);
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
}

.home-page .home-compare-row > span:nth-child(2),
.home-page .home-compare-row > span:nth-child(3) {
  justify-content: center;
  text-align: center;
  border-left: 1px solid var(--hairline);
}

.home-page .home-compare-row > span:nth-child(3) { color: var(--muted); }

.home-page .home-compare-row .is-oslo {
  background: var(--obsidian);
  color: var(--pure);
}

.home-page .home-compare-head > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-top: 19px;
  padding-bottom: 19px;
}

.home-page .home-compare-head > span:nth-child(3) { color: var(--muted); }

/* Seen out in the world ? UGC grid */
.home-page .home-ugc {
  padding: clamp(90px, 14vh, 160px) 0;
  background: var(--paper);
}

.home-page .home-ugc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.home-page .home-ugc-shot {
  margin: 0;
  aspect-ratio: 9 / 16;
  border: none;
  border-radius: 14px;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-page .home-ugc-shot:hover { transform: scale(0.985); }

.home-page .home-ugc-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(28px, 5vh, 44px);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.home-page .home-ugc-meta .stars {
  --star-size: 13px;
}

/* Played around the world */
.home-page .home-world {
  position: relative;
  padding: 0 0 clamp(100px, 16vh, 180px);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

.home-page .home-world-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 54rem;
  width: 100%;
  margin: 0 auto;
  padding: clamp(72px, 12vh, 120px) var(--gutter) clamp(40px, 7vh, 72px);
  box-sizing: border-box;
}

.home-page .home-world-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 clamp(14px, 2vh, 20px);
  text-align: center;
  width: 100%;
  padding-left: 0.34em; /* optical center for letter-spacing */
}

.home-page .home-world-kicker:empty {
  display: none;
  margin: 0;
  padding: 0;
}

.home-page .home-world-intro h2 {
  font-size: clamp(32px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 20px;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.home-page .home-world-lede {
  margin: 0;
  width: 100%;
  max-width: 34rem;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
}

.home-page .home-world-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  width: min(100% - 2 * var(--gutter), 1180px);
  margin: 0 auto;
}

.home-page .home-world-map {
  position: relative;
  width: 100%;
  height: clamp(280px, 42vw, 460px);
  background: transparent;
}

/* Keep layout; hide bare SVG until featured + field dots are final. */
.home-page .home-world-map:not(.is-pins-ready) .jvm-container,
.home-page .home-world-map:not(.is-pins-ready) .home-world-field {
  visibility: hidden;
}

.home-page .home-world-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.home-page .home-world-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
  display: none; /* map stays still — no flying arcs */
}

.home-page .home-world-arc {
  fill: none;
  stroke: rgba(13, 14, 16, 0.45);
  stroke-width: 1.15;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: var(--arc-len, 120);
  stroke-dashoffset: var(--arc-len, 120);
}

.home-page .home-world-arc.is-running {
  animation: home-world-arc-draw 1.9s ease-in-out forwards;
}

@keyframes home-world-arc-draw {
  0% {
    opacity: 0;
    stroke-dashoffset: var(--arc-len, 120);
  }
  14% {
    opacity: 0.85;
  }
  42% {
    opacity: 0.75;
    stroke-dashoffset: 0;
  }
  /* Hold endpoints on the dots - fade only. Sliding dashoffset past 0
     made arcs look like they missed pins (especially on wide desktop). */
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-world-arcs {
    display: none;
  }
}

.home-page .home-world-map .jvm-container {
  background: transparent !important;
}

.home-page .home-world-map .jvm-zoom-btn {
  display: none !important;
}

.home-page .home-world-map .jvm-tooltip {
  display: none !important;
}

.home-page .home-world-map .jvm-marker,
.home-page .home-world-map .jvm-region {
  pointer-events: none !important;
}

.home-page .home-world-map .jvm-container {
  cursor: default !important;
}

.home-page .home-world-map .jvm-marker {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes home-world-pin-glow {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

@keyframes home-world-pin-live {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}

.home-page .home-world-map .jvm-marker.home-world-glow {
  animation: home-world-pin-glow 2.8s ease-in-out infinite;
}

.home-page .home-world-map .jvm-marker.home-world-glow-b {
  animation: home-world-pin-glow 3.6s ease-in-out infinite;
  animation-delay: 0.7s;
}

.home-page .home-world-map .jvm-marker.home-world-glow-c {
  animation: home-world-pin-glow 4.4s ease-in-out infinite;
  animation-delay: 1.4s;
}

.home-page .home-world-map .jvm-marker.is-live {
  animation: home-world-pin-live 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-world-map .jvm-marker.home-world-glow,
  .home-page .home-world-map .jvm-marker.home-world-glow-b,
  .home-page .home-world-map .jvm-marker.home-world-glow-c,
  .home-page .home-world-map .jvm-marker.is-live {
    animation: none;
    opacity: 1;
    filter: none;
  }
}

.home-page .home-world-detail {
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-width: 0;
}

.home-page .home-world-shots-rail {
  --world-card-w: 100px;
  --world-card-gap: 18px;
  /* image (3/4) + item gap + caption ? two cards visible */
  --world-card-h: calc(var(--world-card-w) * 4 / 3 + 8px + 2.75em);
  width: var(--world-card-w);
  height: calc(var(--world-card-h) * 2 + var(--world-card-gap));
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}

.home-page .home-world-shots-track {
  gap: 18px;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: max-content;
}

.home-page .home-world-item {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-page .home-world-shot {
  position: relative;
  margin: 0;
  border: none;
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  overflow: hidden;
  border-radius: 12px;
  background-color: #14161a;
  background-size: cover;
  background-position: center;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* No hardcoded stills — hero-boot paints cache-busted manifest URLs to avoid stale flashes. */
.home-page .home-world-shot[data-upload^="home-world-"]:not(.has-upload)::before,
.home-page .home-world-shot[data-upload^="home-world-"]:not(.has-upload)::after {
  display: none;
}

.home-page .home-world-shot .seo-upload-img {
  z-index: 0;
}

.home-page .home-world-shot .seo-upload-img,
.home-page .home-world-shot.has-upload,
.home-page .home-world-shot.has-video {
  border-radius: 12px;
}

.home-page .home-world-shot .ph-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  left: 8px;
  top: 8px;
  z-index: 2;
  max-width: calc(100% - 16px);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-page .home-world-shot .ph-tag .flag {
  width: 12px;
  height: 9px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.home-page .home-world-item-place {
  margin: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.3;
}

.home-page .home-world-item-place strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
}

.home-page .home-world-item-place span {
  font-size: 11px;
  color: var(--muted);
}

.home-page .home-world-card-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* FAQ */
.home-page .home-faq {
  padding: clamp(90px, 14vh, 160px) var(--gutter);
  background: var(--paper);
}

.home-page .home-faq-head {
  text-align: center;
  margin-bottom: clamp(36px, 6vh, 64px);
}

.home-page .home-faq-head h2 {
  font-size: clamp(30px, 4vw, 56px);
}

.home-page .home-faq-head p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ---------- footer (black) ---------- */

.footer {
  padding: clamp(64px, 9vh, 100px) var(--gutter) 36px;
  background: var(--footer-bg, #1a1c18);
  color: var(--white);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 96px);
  padding-bottom: clamp(36px, 5vh, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 1200px;
  margin: 0 auto;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
  max-width: 280px;
  flex: 1 1 auto;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--pure);
  text-decoration: none;
}

.footer-logo img {
  display: block;
  height: 28px;
  width: auto;
  max-width: min(160px, 55vw);
}

.footer-tagline {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(244, 243, 239, 0.5);
  max-width: 240px;
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 12px 22px;
  border: 1px solid rgba(196, 150, 40, 0.42);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(
      165deg,
      var(--btn-gold-hi) 0%,
      var(--btn-gold) 48%,
      var(--btn-gold-lo) 100%
    );
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1.5px 0 rgba(168, 118, 18, 0.28),
    0 8px 22px rgba(200, 150, 30, 0.18);
  transition: transform 0.25s, filter 0.25s;
}

.footer-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.footer-nav {
  display: flex;
  gap: clamp(48px, 7vw, 96px);
  flex-shrink: 0;
  padding-top: 4px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 11px;
  min-width: 0;
}

.footer-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 243, 239, 0.4);
  margin-bottom: 6px;
}

.footer-col a {
  font-size: 14px;
  color: var(--pure);
  text-decoration: none;
  opacity: 0.88;
  transition: opacity 0.25s;
  width: fit-content;
}

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

.footer-base {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "legal social"
    "copy  copy";
  align-items: center;
  column-gap: 24px;
  row-gap: 18px;
  padding-top: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-legal {
  grid-area: legal;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 24px;
}

.footer-legal a {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(244, 243, 239, 0.45);
  text-decoration: none;
  transition: color 0.25s;
}

.footer-legal a:hover { color: var(--pure); }

.footer-social {
  grid-area: social;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--pure);
  text-decoration: none;
  transition: background 0.25s, transform 0.25s;
}

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.footer-social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  display: block;
}

.footer-copy {
  grid-area: copy;
  margin: 0;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(244, 243, 239, 0.35);
}

/* ==================================================================
   PRODUCT PAGE
   ================================================================== */

/* ---------- top: gallery + buy box ---------- */

.pdp-top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(24px, 3vw, 40px) var(--gutter) clamp(48px, 7vh, 90px);
  max-width: 1360px;
  margin: 0 auto;
  align-items: start;
}

.pdp-gallery {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  position: sticky;
  top: 92px;
  align-self: start;
}

.pdp-main {
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-radius: 4px;
  overflow: hidden;
  justify-self: center;
}

.pdp-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
}

.pdp-thumb {
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.3s, border-color 0.3s;
}

.pdp-thumb .ph { position: absolute; inset: 0; border: none; }
.pdp-thumb .ph-tag { display: none; }

.pdp-thumb.is-active,
.pdp-thumb:hover { opacity: 1; border-color: var(--ink); }

/* ---------- feature slides (retired ? ribbons blocked clicks on main image) ---------- */

.pdp-feature-ribbon {
  display: none !important;
}

/* ---------- centered white mid-text (per slide) ---------- */

.pdp-mid-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.pdp-mid-wrap[hidden] {
  display: none;
}

.pdp-mid-text {
  --mid-y: 50%;
  --mid-scale: 1;
  position: absolute;
  left: 50%;
  top: var(--mid-y);
  z-index: 3;
  margin: 0;
  max-width: none;
  width: max-content;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--mid-scale) * clamp(22px, 3.4vw, 38px));
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 8px 28px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.pdp-main.has-mid-text .ph-tag {
  opacity: 0.55;
}

.pdp-mid-tools {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 58px;
  top: auto;
  z-index: 5;
  transform: translateX(-50%);
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}

body.dev-mode.dev-editing .pdp-main.has-mid-text .pdp-mid-tools {
  display: flex;
}

.pdp-mid-tools button {
  appearance: none;
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: #fff;
  color: #1d4ed8;
  font: 600 11px/1 Inter, system-ui, sans-serif;
  min-width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  padding: 0 6px;
}

.pdp-mid-tools button:hover {
  background: #eff6ff;
}

body.dev-mode.dev-editing .pdp-mid-text {
  pointer-events: auto;
  outline: 1.5px dashed rgba(37, 99, 235, 0.7);
  outline-offset: 8px;
  cursor: text;
}

/* ---------- color finish swatches (above main image) ---------- */

.pdp-color-swatches {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  align-self: flex-end;
  pointer-events: none;
}

.pdp-color-label {
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--pure);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pdp-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.pdp-swatch {
  position: relative;
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.pdp-swatch-dot {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.5px solid rgba(13, 14, 16, 0.18);
  box-shadow: 0 1px 2px rgba(13, 14, 16, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pdp-swatch-dot--matte {
  background: #0b0c0e;
  border-color: rgba(13, 14, 16, 0.55);
}

.pdp-swatch-dot--pearl {
  background:
    radial-gradient(120% 120% at 30% 20%, #ffffff 0%, #f4f1ea 55%, #e4dfd4 100%);
  border-color: rgba(11, 12, 14, 0.22);
}

.pdp-swatch-dot--pearl.has-upload {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.pdp-swatch.is-active .pdp-swatch-dot {
  transform: scale(1.05);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3.5px var(--ink);
}

.pdp-swatch.is-sold-out .pdp-swatch-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    to top left,
    transparent calc(50% - 0.7px),
    rgba(11, 12, 14, 0.72) calc(50% - 0.7px),
    rgba(11, 12, 14, 0.72) calc(50% + 0.7px),
    transparent calc(50% + 0.7px)
  );
  pointer-events: none;
}

.pdp-swatch.is-sold-out .pdp-swatch-dot {
  position: relative;
  opacity: 0.92;
}

body.dev-mode.dev-editing .pdp-swatch-dot[data-upload] {
  outline: 1.5px dashed rgba(26, 120, 72, 0.9);
  outline-offset: 2px;
}

body.dev-mode.dev-editing .pdp-swatch-dot[data-upload] .upload-hint {
  font-size: 9px;
  padding: 2px 5px;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Mini slanted stripe so feature thumbs match the set */
.thumb-feature-stripe {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 20%;
  height: 18%;
  transform: rotate(-4deg);
  background: var(--pure, #fff);
  border: 0.5px solid rgba(11, 12, 14, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1;
  pointer-events: none;
}

/* Gallery edit chrome ? only visible with Edit on */
.gallery-tools {
  display: none;
  grid-column: 1 / -1;
  gap: 6px;
  margin-bottom: 4px;
}

body.dev-mode.dev-editing .gallery-tools {
  display: flex;
  flex-wrap: wrap;
}

.gallery-tools button {
  appearance: none;
  border: 1px dashed rgba(37, 99, 235, 0.55);
  background: rgba(255, 255, 255, 0.92);
  color: #1d4ed8;
  font: 500 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.gallery-tools button:hover {
  border-color: #1d4ed8;
  background: #eff6ff;
}

.thumb-tools {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 4;
  background: rgba(8, 10, 14, 0.72);
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  gap: 2px;
  padding: 3px;
}

body.dev-mode.dev-editing .thumb-tools {
  display: flex;
}

.thumb-tool {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #0b0c0e;
  font: 600 10px/1 Inter, system-ui, sans-serif;
  height: 16px;
  flex: 1;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}

.thumb-tool:hover {
  background: #fff;
}

body.dev-mode.dev-editing .pdp-thumb {
  opacity: 1;
}

body.dev-mode.dev-editing .pdp-thumb .upload-hint {
  top: 4px;
  bottom: auto;
}

/* Place tools above thumbs column on desktop grid */
.pdp-gallery > .gallery-tools {
  grid-column: 1 / -1;
}

/* ---------- buy box ---------- */

.buybox { position: relative; }

.buybox-inner {
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.buybox .rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.stars {
  --star-size: 15px;
  --star-gap: 3px;
  display: inline-block;
  width: calc(5 * var(--star-size) + 4 * var(--star-gap));
  height: var(--star-size);
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  color: transparent;
  vertical-align: -0.12em;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffe56a 0%, var(--star-gold) 55%, #e8b42a 100%);
  -webkit-mask-image:
    var(--star-shape),
    var(--star-shape),
    var(--star-shape),
    var(--star-shape),
    var(--star-shape);
  mask-image:
    var(--star-shape),
    var(--star-shape),
    var(--star-shape),
    var(--star-shape),
    var(--star-shape);
  -webkit-mask-size: var(--star-size) var(--star-size);
  mask-size: var(--star-size) var(--star-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position:
    0 center,
    calc(var(--star-size) + var(--star-gap)) center,
    calc((var(--star-size) + var(--star-gap)) * 2) center,
    calc((var(--star-size) + var(--star-gap)) * 3) center,
    calc((var(--star-size) + var(--star-gap)) * 4) center;
  mask-position:
    0 center,
    calc(var(--star-size) + var(--star-gap)) center,
    calc((var(--star-size) + var(--star-gap)) * 2) center,
    calc((var(--star-size) + var(--star-gap)) * 3) center,
    calc((var(--star-size) + var(--star-gap)) * 4) center;
  /* Rounder, softer star ? short points + heavy round joins */
  --star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='black' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round' d='M12 4.2l2.2 4.85 5.3.48-4 3.5 1.2 5.2L12 15.7l-4.7 2.53 1.2-5.2-4-3.5 5.3-.48L12 4.2z'/%3E%3C/svg%3E");
}

.buybox .rating .stars {
  --star-size: 13px;
  --star-gap: 2px;
}

.featured-review .stars {
  --star-size: 12px;
}

.quote-card .stars {
  --star-size: 13px;
}

.rating-pill .stars {
  --star-size: 14px;
  --star-gap: 2px;
}

.tried-rating .stars {
  --star-size: 14px;
}

.review-body .stars {
  --star-size: 13px;
  --star-gap: 2px;
  flex-shrink: 0;
}

.home-page .home-ugc-meta .stars {
  --star-size: 12px;
}

.buybox h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

.buybox-sub {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.01em;
  max-width: 26em;
  margin: -2px 0 2px;
}

.buybox-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.buybox-feats--buybox {
  display: none;
  margin: 14px 0 4px;
}

.buybox-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  min-width: 0;
}

.buybox-feat-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 60px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  cursor: default;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.dev-mode.dev-editing .buybox-feat-media[data-upload] {
  cursor: pointer;
}

.buybox-feat-media[data-upload="buybox-feat-pocket"] {
  background-image: url("../images/uploads/buybox-feat-pocket.webp");
}

.buybox-feat-media[data-upload="buybox-feat-water"] {
  background-image: url("../images/uploads/buybox-feat-water.webp");
  background-size: contain;
  background-position: center;
  background-color: transparent;
}

.buybox-feat-media[data-upload="buybox-feat-water"].has-upload {
  background-image: none !important;
}

.buybox-feat-media[data-upload="buybox-feat-water"] .seo-upload-img {
  width: 90%;
  height: 90%;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
  object-position: center;
}

.buybox-feat-media[data-upload="buybox-feat-snap"] {
  background-image: url("../images/uploads/buybox-feat-snap.webp");
}

.home-page .home-impact-feats {
  margin: 12px 0 0;
  max-width: 22rem;
  width: 100%;
}

.home-page .home-impact-feats .buybox-feat-media[data-upload="home-moment-feat-pocket"] {
  background-image: url("../images/uploads/home-moment-feat-pocket.webp");
}

.home-page .home-impact-feats .buybox-feat-media[data-upload="home-moment-feat-water"] {
  background-image: url("../images/uploads/home-moment-feat-water.webp");
  background-size: contain;
  background-position: center;
  background-color: transparent;
}

.home-page .home-impact-feats .buybox-feat-media[data-upload="home-moment-feat-water"].has-upload {
  background-image: none !important;
}

.home-page .home-impact-feats .buybox-feat-media[data-upload="home-moment-feat-water"] .seo-upload-img {
  width: 90%;
  height: 90%;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
  object-position: center;
}

.home-page .home-impact-feats .buybox-feat-media[data-upload="home-moment-feat-snap"] {
  background-image: url("../images/uploads/home-moment-feat-snap.webp");
}

.buybox-feat-media .seo-upload-img {
  object-fit: cover;
  object-position: center;
  border: 0;
}

.buybox-feat-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--muted);
  max-width: 11em;
}

.price-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px 12px;
  margin: 0 0 4px;
  min-width: 0;
}

.price-row-amounts {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}

.price {
  font-family: var(--sans);
  font-size: clamp(28px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.price .price-currency,
.bundle-price .price-currency {
  display: inline-block;
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: top;
  margin-right: 0.04em;
  transform: translateY(0.18em);
}

.price-compare {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: #c45a5a;
  text-decoration: line-through;
  opacity: 1;
}

.price-compare[hidden],
.bundle-price-compare[hidden] {
  display: none !important;
}

.save-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  white-space: nowrap;
  min-width: 0;
}

.save-badge[hidden] {
  display: none !important;
}

.save-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.85;
}

@media (max-width: 380px) {
  .save-badge {
    font-size: 10px;
    letter-spacing: 0.03em;
  }
}

.price-note {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  width: 100%;
}

.buy-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 2px;
}

.buy-points li {
  font-size: 13px;
  color: var(--ink);
  padding-left: 26px;
  position: relative;
}

.buy-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--pure);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.stock-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: #8a5a3b;
  margin: 0;
}

.limited-line {
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--muted);
  position: relative;
  margin: 4px 0 2px;
}

.limited-line::before,
.limited-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26%;
  height: 1px;
  background: var(--hairline);
}

.limited-line::before { left: 0; }
.limited-line::after { right: 0; }

/* clv2 buybox — Cold Life layout, OSLO theme */
.clv2-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}

.clv2-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clv2-heading {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}

.clv2-color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.clv2-color {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid rgba(13, 14, 16, 0.14);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.clv2-color:hover:not(:disabled) {
  border-color: rgba(0, 129, 210, 0.4);
}

.clv2-color.is-selected {
  border-color: var(--kv-blue, #0081d2);
  background: var(--kv-blue-mist, #eef6ff);
  box-shadow: 0 0 0 1px rgba(0, 129, 210, 0.25), 0 6px 16px rgba(0, 129, 210, 0.1);
}

.clv2-color.is-sold-out,
.clv2-color:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.clv2-color-swatch {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  background: #fff center / cover no-repeat;
  border: 1px solid rgba(13, 14, 16, 0.08);
  background-image: url("../images/uploads/bundle-1.webp");
}

.clv2-color-swatch--pearl,
.clv2-color-swatch[data-upload="color-pearl-white"] {
  background-image: url("../images/uploads/color-pearl-white.webp"), linear-gradient(135deg, #f7f7f5, #e8e8e4);
}

.clv2-color-name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}

.clv2-purchase-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.clv2-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 14px 16px 12px;
  border: 1.5px solid rgba(13, 14, 16, 0.14);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.clv2-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.clv2-option.is-selected,
.clv2-option:has(input:checked) {
  border-color: var(--kv-blue, #0081d2);
  background: var(--kv-blue-mist, #eef6ff);
  box-shadow: 0 0 0 1px rgba(0, 129, 210, 0.28), 0 8px 22px rgba(0, 129, 210, 0.1);
}

.clv2-popular {
  position: absolute;
  top: -11px;
  right: 12px;
  background: #fcfe8e;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 5px 10px 4px;
  z-index: 2;
}

.clv2-option-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clv2-option-top--otp {
  justify-content: space-between;
  width: 100%;
}

.clv2-option-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.clv2-radio {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid rgba(13, 14, 16, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-sizing: border-box;
}

.clv2-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
}

.clv2-option.is-selected .clv2-radio,
.clv2-option:has(input:checked) .clv2-radio {
  border-color: var(--kv-blue, #0081d2);
}

.clv2-option.is-selected .clv2-radio-dot,
.clv2-option:has(input:checked) .clv2-radio-dot {
  background: var(--kv-blue, #0081d2);
}

.clv2-option-title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}

.clv2-option--sub:not(.is-selected):not(:has(input:checked)) .clv2-filter-row,
.clv2-option--sub:not(.is-selected):not(:has(input:checked)) .clv2-note,
.clv2-option--sub:not(.is-selected):not(:has(input:checked)) .clv2-bonus-sub {
  display: none;
}

.clv2-option-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  padding-left: 30px;
}

.clv2-price {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}

.clv2-price--otp {
  font-size: 20px;
  padding-left: 0;
}

.clv2-orig {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: #7c7f88;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.clv2-save {
  display: inline-flex;
  align-items: center;
  align-self: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--kv-blue, #0081d2);
  border-radius: 999px;
  padding: 6px 11px 5px;
  line-height: 1;
  white-space: nowrap;
}

.clv2-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-left: 30px;
}

.clv2-filter-copy {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.clv2-filter-copy i {
  font-style: normal;
  color: #4d4d4d;
}

.clv2-plan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 7px 14px;
  border: 1.5px solid var(--kv-blue, #0081d2);
  border-radius: 10px;
  background: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.clv2-note {
  padding-left: 30px;
  font-family: var(--sans);
  font-size: 14px;
  color: #4d4d4d;
  line-height: 1.3;
}

.clv2-otpsub {
  margin-left: 30px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
}

.clv2-option--sub .clv2-bonus-sub {
  padding-left: 0;
  margin-left: 30px;
  color: #4d4d4d;
}

.clv2-qty-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid rgba(13, 14, 16, 0.14);
  border-radius: 14px;
  background: #fff;
}

.clv2-qty-img {
  width: 64px;
  height: 48px;
  border-radius: 8px;
  flex-shrink: 0;
  background: #fff center / cover no-repeat;
  border: 1px solid rgba(13, 14, 16, 0.08);
  background-image: url("../images/uploads/bundle-2.webp");
}

.clv2-qty-copy {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}

.clv2-qty-copy b {
  color: var(--kv-blue, #0081d2);
  font-weight: 700;
}

.clv2-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--kv-blue, #0081d2);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}

.clv2-stepper button {
  width: 34px;
  height: 36px;
  border: 0;
  background: #fff;
  color: var(--kv-blue, #0081d2);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.clv2-stepper button:disabled {
  opacity: 0.35;
  cursor: default;
}

.clv2-stepper button:hover:not(:disabled) {
  background: var(--kv-blue-mist, #eef6ff);
}

.clv2-stepper [data-clv2-qty] {
  min-width: 28px;
  text-align: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.clv2-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  font-family: var(--sans);
  font-size: 15px;
  color: #4d4d4d;
}

.clv2-summary > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.clv2-sum-val {
  font-weight: 700;
  color: var(--ink);
}

.clv2-panel .btn-cta {
  margin-top: 4px;
  width: 100%;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 18px 24px;
}

.clv2-beneath {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  text-align: center;
}

.clv2-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
  margin-top: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: #3a3d45;
}

.clv2-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.clv2-trust svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--kv-blue, #0081d2);
}

.clv2-stock {
  display: flex;
  justify-content: center;
}

.clv2-stock-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e7f6ec;
  color: #1f6b3a;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}

@media (max-width: 480px) {
  .clv2-heading { font-size: 18px; }
  .clv2-color-name { font-size: 13px; }
  .clv2-option-title { font-size: 15px; }
  .clv2-price { font-size: 26px; }
  .clv2-price--otp { font-size: 16px; }
  .clv2-filter-row { flex-direction: column; align-items: flex-start; }
  .clv2-plan { width: 100%; box-sizing: border-box; }
  .clv2-qty-card { flex-wrap: wrap; }
  .clv2-qty-copy { flex: 1 1 140px; font-size: 13px; }
  .clv2-option-prices,
  .clv2-filter-row,
  .clv2-note { padding-left: 0; margin-left: 30px; }
}

/* Lifetime Protection add-on */
.care-addon[hidden],
.care-addon[data-care-addon-root][hidden] {
  display: none !important;
}

.care-addon {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px 12px;
  margin: 14px 0 12px;
  padding: 15px 14px 15px 12px;
  border-radius: 14px;
  border: 1px solid rgba(13, 14, 16, 0.1);
  background:
    linear-gradient(165deg, #ffffff 0%, #f8f7f3 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 8px 24px rgba(13, 14, 16, 0.04);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.care-addon::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: radial-gradient(circle at 20% 30%, rgba(246, 204, 58, 0.22), transparent 42%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  animation: care-glow-drift 5.5s ease-in-out infinite;
}

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

.care-addon:hover {
  border-color: rgba(13, 14, 16, 0.16);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85) inset,
    0 12px 28px rgba(13, 14, 16, 0.06),
    0 0 24px rgba(246, 204, 58, 0.16);
}

.care-addon:has(input:checked) {
  border-color: rgba(170, 138, 40, 0.42);
  box-shadow:
    0 0 0 1px rgba(246, 204, 58, 0.35),
    0 0 32px rgba(246, 204, 58, 0.28),
    0 10px 28px rgba(13, 14, 16, 0.05);
}

.care-addon input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.care-addon-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(13, 14, 16, 0.28);
  background: #fff;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.care-addon:has(input:checked) .care-addon-check {
  background: var(--ink);
  border-color: var(--ink);
}

.care-addon:has(input:checked) .care-addon-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

.care-addon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(13, 14, 16, 0.06);
  box-shadow: 0 0 20px rgba(246, 204, 58, 0.22);
}

.care-addon:has(input:checked) .care-addon-icon {
  background: rgba(246, 204, 58, 0.18);
  border-color: rgba(246, 204, 58, 0.35);
  box-shadow: 0 0 24px rgba(246, 204, 58, 0.4);
}

.care-addon-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.care-addon-title {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.25;
}

.care-addon-sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
}

.care-addon-price {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.care-addon-price .price-currency {
  font-size: 0.85em;
  margin-right: 1px;
}

.care-addon-what {
  align-self: flex-start;
  margin-top: 5px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: rgba(13, 14, 16, 0.55);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.care-addon-what:hover {
  color: var(--ink);
}

.care-info[hidden] {
  display: none !important;
}

.care-info {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.care-info-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(13, 14, 16, 0.4);
  cursor: pointer;
}

.care-info-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  padding: 24px 22px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(13, 14, 16, 0.08);
  box-shadow:
    0 0 0 1px rgba(246, 204, 58, 0.18),
    0 0 40px rgba(246, 204, 58, 0.18),
    0 20px 44px rgba(13, 14, 16, 0.18);
}

.care-info-x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(13, 14, 16, 0.55);
  cursor: pointer;
}

.care-info-x:hover {
  background: rgba(13, 14, 16, 0.05);
  color: var(--ink);
}

.care-info-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(246, 204, 58, 0.16);
  border: 1px solid rgba(246, 204, 58, 0.35);
  color: var(--ink);
  box-shadow: 0 0 20px rgba(246, 204, 58, 0.28);
}

.care-info-panel h3 {
  margin: 0 0 8px;
  padding-right: 28px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}

.care-info-panel p {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.care-info-done {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.care-info-done:hover {
  background: #1a1b1e;
}

@media (max-width: 420px) {
  .care-addon {
    grid-template-columns: auto 1fr auto;
    gap: 8px 10px;
    padding: 12px;
  }

  .care-addon-icon {
    display: none;
  }

  .care-addon-title {
    font-size: 12px;
  }
}

/* Cart drawer protection card */
.cart-care {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 2px;
  margin-bottom: 22px;
  padding: 0;
  border: 1px solid rgba(13, 14, 16, 0.1);
  border-radius: 14px;
  background: linear-gradient(165deg, #ffffff 0%, #f7f6f2 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75) inset,
    0 10px 26px rgba(13, 14, 16, 0.045);
  color: inherit;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.cart-care-glow {
  position: absolute;
  inset: -45% -30%;
  background:
    radial-gradient(circle at 18% 35%, rgba(246, 204, 58, 0.28), transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(246, 204, 58, 0.1), transparent 38%);
  pointer-events: none;
  z-index: 0;
  animation: care-glow-drift 5.5s ease-in-out infinite;
}

.cart-care-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
}

.cart-care:hover {
  border-color: rgba(170, 138, 40, 0.38);
  box-shadow:
    0 0 0 1px rgba(246, 204, 58, 0.22),
    0 0 28px rgba(246, 204, 58, 0.22),
    0 12px 28px rgba(13, 14, 16, 0.06);
}

.cart-care.is-added {
  border-color: rgba(170, 138, 40, 0.4);
  box-shadow:
    0 0 0 1px rgba(246, 204, 58, 0.3),
    0 0 30px rgba(246, 204, 58, 0.24),
    0 10px 24px rgba(13, 14, 16, 0.04);
}

.cart-care-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(246, 204, 58, 0.28);
  color: var(--ink);
  box-shadow: 0 0 18px rgba(246, 204, 58, 0.28);
}

.cart-care.is-added .cart-care-icon {
  background: rgba(246, 204, 58, 0.2);
  border-color: rgba(246, 204, 58, 0.42);
  box-shadow: 0 0 22px rgba(246, 204, 58, 0.4);
}

.cart-care-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cart-care-kicker {
  margin: 0 0 2px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(140, 110, 20, 0.9);
}

.cart-care-title {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
}

.cart-care-sub {
  margin: 2px 0 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
}

.cart-care-cta,
.cart-care-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.cart-care-cta {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.cart-care-price {
  margin: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.cart-care-price .price-currency {
  font-size: 0.85em;
}

.cart-care-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(13, 14, 16, 0.16);
}

.cart-care-cta:hover .cart-care-add {
  background: #1a1b1e;
}

.cart-care-what {
  align-self: flex-start;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: rgba(13, 14, 16, 0.55);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cart-care-what:hover {
  color: var(--ink);
}

.cart-care-remove {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cart-care-remove:hover {
  color: var(--ink);
}

.cart-care-info[hidden] {
  display: none !important;
}

.cart-care-info {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
}

.cart-care-info-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(13, 14, 16, 0.38);
  cursor: pointer;
}

.cart-care-info-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 340px);
  margin-bottom: 12px;
  padding: 22px 20px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(13, 14, 16, 0.08);
  box-shadow:
    0 0 0 1px rgba(246, 204, 58, 0.18),
    0 0 40px rgba(246, 204, 58, 0.18),
    0 18px 40px rgba(13, 14, 16, 0.18);
  text-align: left;
}

.cart-care-info-x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(13, 14, 16, 0.55);
  cursor: pointer;
}

.cart-care-info-x:hover {
  background: rgba(13, 14, 16, 0.05);
  color: var(--ink);
}

.cart-care-info-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(246, 204, 58, 0.16);
  border: 1px solid rgba(246, 204, 58, 0.35);
  color: var(--ink);
  box-shadow: 0 0 20px rgba(246, 204, 58, 0.28);
}

.cart-care-info-panel h3 {
  margin: 0 0 8px;
  padding-right: 28px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}

.cart-care-info-panel p {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.cart-care-info-done {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.cart-care-info-done:hover {
  background: #1a1b1e;
}

@keyframes care-glow-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.75;
  }
  50% {
    transform: translate3d(4%, -3%, 0) scale(1.05);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .care-addon::before,
  .cart-care-glow {
    animation: none;
  }
}

.btn-cta {
  width: 100%;
  padding: 17px 22px;
  border: none;
  border-radius: 10px;
  background: var(--ink);
  color: var(--pure);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;
  text-align: center;
  display: inline-block;
}

.btn-cta:hover { transform: translateY(-2px); }
.btn-cta[disabled] { opacity: 0.6; cursor: wait; }

.buybox .btn-cta,
.home-intro-cta .btn-cta,
.home-manifesto-cta .btn-cta,
.home-page .home-impact-cta.btn-cta {
  margin-top: 4px;
  background:
    linear-gradient(
      165deg,
      var(--btn-gold-hi) 0%,
      var(--btn-gold) 48%,
      var(--btn-gold-lo) 100%
    );
  color: var(--ink);
  border: 1px solid rgba(196, 150, 40, 0.42);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 19px 28px;
  text-decoration: none;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1.5px 0 rgba(168, 118, 18, 0.28),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.28),
    inset -1.5px 0 0 rgba(168, 118, 18, 0.16),
    0 1px 0 rgba(160, 120, 20, 0.18),
    0 10px 26px rgba(200, 150, 30, 0.2);
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
}

.buybox .btn-cta:hover,
.home-intro-cta .btn-cta:hover,
.home-manifesto-cta .btn-cta:hover,
.home-page .home-impact-cta.btn-cta:hover {
  color: var(--ink);
  filter: brightness(1.03);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1.5px 0 rgba(168, 118, 18, 0.26),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.3),
    inset -1.5px 0 0 rgba(168, 118, 18, 0.14),
    0 1px 0 rgba(160, 120, 20, 0.16),
    0 14px 32px rgba(200, 150, 30, 0.26);
}

.buybox .purchase-error { margin-top: 0; text-align: center; }

/* ---------- trust under CTA ---------- */

.trust-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
  text-align: center;
}

.urgency {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

.urgency-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a5a3b;
  box-shadow: 0 0 0 0 rgba(138, 90, 59, 0.4);
  animation: pulse-dot 1.8s ease-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  70% { box-shadow: 0 0 0 8px rgba(138, 90, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(138, 90, 59, 0); }
}

.guarantee {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.pay-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.pay-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(13, 14, 16, 0.1);
  border-radius: 5px;
  background: #fafaf8;
}

.pay-logo img {
  display: block;
  width: auto;
  max-width: 48px;
  height: 14px;
  object-fit: contain;
}

/* featured review in buybox */

.featured-review {
  display: block;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(10, 26, 46, 0.08);
  color: var(--ink);
  margin-top: 4px;
  box-shadow: 0 10px 28px rgba(10, 40, 70, 0.06);
}

.featured-review--gallery {
  margin-top: 16px;
  width: 100%;
}

.featured-review-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.featured-review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.featured-review-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.featured-review-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 129, 210, 0.18);
  overflow: hidden;
}

.featured-review-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.featured-review-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
}

.featured-review-head strong {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.featured-review-head .stars {
  display: inline-flex;
  margin: 0;
  --star-size: 12px;
}

.featured-review-location {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #5a6570;
}

.featured-review-flag {
  width: 15px;
  height: 11px;
  min-width: 15px;
  min-height: 11px;
  border-radius: 2px;
}

.featured-review-contam {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: none;
  padding: 8px 12px 8px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff5f3 0%, #ffe9e4 100%);
  border: 1px solid rgba(196, 74, 54, 0.18);
  text-align: left;
  text-decoration: none;
  color: #b63d2c;
  line-height: 1.15;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.featured-review-contam:hover {
  border-color: rgba(196, 74, 54, 0.34);
  box-shadow: 0 6px 16px rgba(180, 60, 40, 0.14);
  transform: translateY(-1px);
}

.featured-review-contam-count {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 10px;
  background: #c94a38;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.featured-review-contam-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.featured-review-contam-copy span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--kv-ink, #0a0a0a);
  text-transform: none;
}

.featured-review-contam-copy em {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  color: #6a7380;
}

.featured-review .verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--kv-blue, #0081d2);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.featured-review .stars {
  display: block;
  --star-size: 13px;
  margin: 0;
}

.featured-review p {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(10, 26, 46, 0.08);
  font-size: 13.5px;
  line-height: 1.55;
  color: #3d4650;
}

@media (max-width: 640px) {
  .featured-review-top {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .featured-review-contam {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ---------- infinite loop rails ---------- */

.loop-rail {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.loop-track {
  display: flex;
  width: max-content;
  gap: 14px;
}

.loop-rail.is-paused .loop-track { animation-play-state: paused !important; }

/* Pause motion on the element itself — never body.is-scroll-busy / is-story-scrolling. */
[data-loop].is-motion-paused .loop-track,
[data-loop].is-offscreen-paused .loop-track,
.home-loved-flags__track.is-motion-paused,
.home-loved-flags__track.is-offscreen-paused,
.announce-track.is-motion-paused,
.announce-track.is-offscreen-paused {
  animation-play-state: paused !important;
}

.loop-rail[data-loop]:not(.is-motion-paused):not(.is-offscreen-paused) .loop-track {
  will-change: transform;
}

.loop-rail[data-loop].is-motion-paused .loop-track,
.loop-rail[data-loop].is-offscreen-paused .loop-track {
  will-change: auto;
}

.loop-rail[data-reverse] .loop-track { animation-direction: reverse; }

@keyframes loop-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes loop-scroll-y {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.loop-rail[data-vertical] {
  mask-image: none;
  -webkit-mask-image: none;
}

.loop-rail[data-vertical] .loop-track {
  flex-direction: column;
  width: 100%;
  height: max-content;
}

/* ---------- quote strip ---------- */

.quote-strip {
  padding: 28px 0 36px;
  background: var(--paper);
}

.quote-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: min(420px, 82vw);
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2a2d34 0%, #14161a 100%);
  color: var(--white);
  flex-shrink: 0;
}

.quote-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  border: none;
}

.quote-avatar::before { background-size: 28px 28px; }

.quote-body { min-width: 0; }

.quote-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.quote-head strong { font-size: 13px; font-weight: 600; }

.verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pure);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.quote-card .stars {
  --star-size: 14px;
}

.quote-card p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden;
  background: var(--obsidian);
  color: var(--pure);
  padding: 14px 0;
  white-space: nowrap;
}

.marquee-track {
  display: inline-block;
  animation: marquee 28s linear infinite;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

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

/* ---------- generic pdp sections ---------- */

.pdp-section {
  padding: clamp(70px, 11vh, 130px) var(--gutter);
  max-width: 1360px;
  margin: 0 auto;
}

.pdp-section-flush {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.pdp-section-flush .pdp-section-head {
  padding: 0 var(--gutter);
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

.pdp-section-head {
  text-align: center;
  margin-bottom: clamp(36px, 6vh, 64px);
}

.pdp-section-head h2 { font-size: clamp(30px, 4vw, 56px); }

.pdp-section-head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}

.pdp-section-head p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.social-pill {
  display: inline-flex;
  margin-top: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(90deg, #f58529, #dd2a7b, #8134af, #515bd4) border-box;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--ink);
}

.rating-pill .stars {
  --star-size: 14px;
  --star-gap: 2px;
  flex-shrink: 0;
}

.rating-pill-text {
  position: relative;
  padding-left: 12px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.rating-pill-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 0.9em;
  background: var(--hairline);
}

/* See it in action ? compact, inside buybox under Maya R */

.buybox-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 4px;
}

.buybox-action-title {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.buybox-action .social-pill {
  margin-top: 0;
  font-size: 10px;
  padding: 6px 12px;
}

.buybox .ugc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 12px;
}

.buybox .ugc-slide {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  border: none;
  overflow: hidden;
  background: var(--paper-2, #e8eef4);
}

.buybox .ugc-slide .ugc-slide-video,
.buybox .ugc-slide > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  background: #0b0c0e;
}

/* Clip 3 — punch in so the subject fills the 9:16 tile */
.buybox .ugc-slide[data-upload="ugc-clip-3"] .ugc-slide-video,
.buybox .ugc-slide[data-upload="ugc-clip-3"] > video {
  transform: scale(1.22);
  transform-origin: center center;
  object-position: center 42%;
}

.buybox .ugc-slide.has-video,
.buybox .ugc-slide.has-upload {
  background-image: none !important;
}

.buybox .ugc-slide .ph-tag {
  left: 5px;
  top: 5px;
  bottom: auto;
  font-size: 6px;
  letter-spacing: 0.06em;
}

.buybox .ugc-slide .upload-hint {
  font-size: 11px;
  padding: 6px 8px;
  letter-spacing: 0;
  z-index: 3;
}

.buybox .info-accordion {
  width: 100%;
  max-width: none;
  margin: 4px 0 0;
  border-top: 1px solid var(--hairline);
}

.buybox .info-accordion .faq-item {
  border-top: none;
  border-bottom: 1px solid var(--hairline);
}

.buybox .info-accordion .faq-item summary {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 14px 0;
}

.buybox .info-accordion .faq-item p {
  padding-bottom: 14px;
  font-size: 12px;
}

/* info accordion (legacy full-width) */

.pdp-section-info {
  padding-top: clamp(24px, 4vh, 48px);
  padding-bottom: clamp(24px, 4vh, 48px);
}

.info-accordion {
  max-width: 920px;
  margin: 0 auto;
  border-top: 1px solid var(--hairline);
}

.info-accordion .faq-item {
  border-top: none;
  border-bottom: 1px solid var(--hairline);
}

.info-accordion .faq-item summary {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  padding: 18px 0;
}

.info-accordion .faq-item p {
  padding-bottom: 18px;
}

/* trust ticker */

.trust-ticker {
  background: var(--obsidian);
  color: var(--pure);
  padding: 16px 0;
}

.trust-ticker .loop-rail {
  mask-image: none;
}

.trust-ticker-track {
  gap: 0;
}

.trust-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 36px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  line-height: 1;
}

.trust-check svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* UGC vertical loop ? above ?Tried, tested, kept.? (mobile/tablet) */

.tried-copy .ugc-rail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px auto clamp(28px, 4.5vh, 40px);
  width: min(300px, 78vw);
  height: min(420px, 112vw);
  max-width: 320px;
  overflow: hidden;
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
  transform: rotate(9deg);
  transform-origin: center center;
}

/* Soft white fade top + bottom */
.tried-copy .ugc-rail::before,
.tried-copy .ugc-rail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(48px, 18%, 72px);
  z-index: 2;
  pointer-events: none;
}
.tried-copy .ugc-rail::before {
  top: 0;
  background: linear-gradient(180deg, var(--paper) 0%, rgba(255, 255, 255, 0) 100%);
}
.tried-copy .ugc-rail::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--paper) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Desktop already has the 5 static buybox clips ? hide this rail */
@media (min-width: 1021px) {
  .tried-copy .ugc-rail { display: none !important; }
}

/* Tablet/mobile: one column + UGC strip. Hide lifestyle rail so it can't
   sit as a dark empty column beside the copy (was visible 821–1020px). */
@media (max-width: 1020px) {
  .tried-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .tried-copy {
    max-width: none;
    width: 100%;
    padding: 0 4px;
  }
  .tried-rail { display: none !important; }
}

.ugc-rail { padding: 0; }

.tried-copy .ugc-rail--vertical .ugc-col {
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: none;
  outline: none;
  box-shadow: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.tried-copy .ugc-rail--vertical .ugc-col:nth-child(2) .loop-track {
  /* Stagger the second column so rows don?t line up */
  margin-top: -28%;
}

.tried-copy .ugc-rail--vertical .loop-track {
  gap: 8px;
  align-items: stretch;
}

.ugc-slide {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  flex-shrink: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  margin: 0;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  /* Force clean clip ? kills white/dotted fringe on rotated rounded tiles */
  -webkit-mask-image: linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0);
}

.pdp-page .tried-copy .ugc-rail .ugc-slide {
  border-radius: 12px;
  overflow: hidden;
}

.tried-copy .ugc-rail .ugc-slide.ph,
.tried-copy .ugc-rail .ugc-slide[data-upload],
.tried-copy .ugc-rail .ugc-slide .seo-upload-img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.tried-copy .ugc-rail .ugc-slide .seo-upload-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.tried-copy .ugc-rail .ugc-slide.has-upload,
.tried-copy .ugc-rail .ugc-slide[data-upload].has-upload {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* No edit dashed outline / upload chip on the moving UGC rail */
body.dev-mode.dev-editing .tried-copy .ugc-rail [data-upload],
body.dev-mode.dev-editing .tried-copy .ugc-rail .ugc-slide {
  outline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.dev-mode.dev-editing .tried-copy .ugc-rail .upload-hint {
  display: none !important;
}

@media (max-width: 899px) {
  .tried-copy .ugc-rail {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    overflow: hidden;
  }

  /* Twin column must never paint as a second horizontal row */
  .tried-copy .ugc-rail--vertical .ugc-col + .ugc-col {
    display: none !important;
  }

  .tried-copy .ugc-rail::before,
  .tried-copy .ugc-rail::after {
    top: 0;
    bottom: 0;
    width: clamp(28px, 10vw, 48px);
    height: auto;
  }

  .tried-copy .ugc-rail::before {
    left: 0;
    right: auto;
    background: linear-gradient(90deg, var(--paper) 0%, rgba(255, 255, 255, 0) 100%);
  }

  .tried-copy .ugc-rail::after {
    right: 0;
    left: auto;
    background: linear-gradient(270deg, var(--paper) 0%, rgba(255, 255, 255, 0) 100%);
  }

  .tried-copy .ugc-rail--vertical .ugc-col {
    width: 100%;
    height: auto;
  }

  .tried-copy .ugc-rail--vertical .ugc-col:nth-child(2) .loop-track {
    margin-top: 0;
  }

  .tried-copy .ugc-rail--vertical .loop-track {
    flex-direction: row;
    width: max-content;
    height: auto;
    gap: 8px;
    align-items: stretch;
  }

  .tried-copy .ugc-rail .ugc-slide {
    width: 92px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
  }

  /* Fill the tile — no letterbox / black bars from the .ph backdrop */
  .tried-copy .ugc-rail .ugc-slide.has-upload,
  .tried-copy .ugc-rail .ugc-slide[data-upload].has-upload {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  .tried-copy .ugc-rail .ugc-slide .seo-upload-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: auto;
    left: auto;
    transform: none;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
  }

  .pdp-page .tried-copy .ugc-rail .ugc-slide,
  .tried-copy .ugc-rail .ugc-slide {
    border-radius: 12px;
  }

  .tried-copy .ugc-rail .ugc-slide .ph-tag {
    left: 8px;
    top: 16px;
    font-size: 8px;
    letter-spacing: 0.04em;
  }
}

/* ---------- PDP feature pair (above Tried) ---------- */

.pdp-features {
  background: var(--paper);
  padding: clamp(48px, 7vh, 88px) var(--gutter) clamp(24px, 4vh, 40px);
}

.pdp-features-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3.2vw, 40px);
  align-items: start;
}

.pdp-feature {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.pdp-feature-media {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background-color: #1a1d22;
  background-size: cover;
  background-position: center;
  border: none;
}

.pdp-feature-media[data-upload="pdp-feature-1"] {
  background-image: url("./assets/images/uploads/life-1.webp");
}

.pdp-feature-media[data-upload="pdp-feature-3"] {
  background-image: url("./assets/images/uploads/life-3.webp");
}

.pdp-feature-media.has-upload,
.pdp-feature-media[data-upload].has-upload {
  background-size: cover !important;
  background-position: center !important;
}

.pdp-feature-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 2px;
}

.pdp-feature-copy h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pdp-feature-copy p {
  margin: 0;
  max-width: 32ch;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 820px) {
  .pdp-features {
    padding: 40px var(--gutter) 12px;
  }

  .pdp-features-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .pdp-feature {
    gap: 14px;
  }

  .pdp-feature-media {
    aspect-ratio: 5 / 4;
    border-radius: 14px;
  }

  .pdp-feature-copy {
    text-align: left;
    gap: 6px;
  }

  .pdp-feature-copy h3 {
    font-size: clamp(24px, 6.5vw, 30px);
  }

  .pdp-feature-copy p {
    font-size: 15px;
    max-width: 40ch;
  }
}

/* tried ? split 1:1 with template: copy left, 3 photos right */

.tried {
  background: var(--paper);
  padding: clamp(56px, 9vh, 100px) var(--gutter);
}

.tried-grid {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.tried-copy {
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tried-copy h2 {
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 14px;
}

.tried-copy > p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 28px;
  max-width: 340px;
}

.tried-copy > p.reveal:first-of-type {
  margin-bottom: 18px;
}

.tried-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 340px;
  padding: 18px 28px;
  border: 1px solid rgba(196, 150, 40, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(
      165deg,
      var(--btn-gold-hi) 0%,
      var(--btn-gold) 48%,
      var(--btn-gold-lo) 100%
    );
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1.5px 0 rgba(168, 118, 18, 0.28),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.28),
    inset -1.5px 0 0 rgba(168, 118, 18, 0.16),
    0 1px 0 rgba(160, 120, 20, 0.18),
    0 10px 26px rgba(200, 150, 30, 0.2);
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
}

.tried-cta:hover {
  color: var(--ink);
  filter: brightness(1.03);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1.5px 0 rgba(168, 118, 18, 0.26),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.3),
    inset -1.5px 0 0 rgba(168, 118, 18, 0.14),
    0 1px 0 rgba(160, 120, 20, 0.16),
    0 14px 32px rgba(200, 150, 30, 0.26);
}

.tried-rating {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.tried-rating .stars {
  --star-size: 15px;
}

.tried-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

.tried-rail {
  min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.tried-rail .loop-track {
  gap: 14px;
}

.pdp-page .tried-rail .loop-track {
  gap: 10px;
}

.tried-photo {
  margin: 0;
  width: clamp(140px, 18vw, 220px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  border: none;
  overflow: hidden;
  flex-shrink: 0;
  isolation: isolate;
  -webkit-user-drag: none;
  user-select: none;
  touch-action: pan-y;
}

/* Soft ?owner photo? grade ? mute 4K polish, hide piece micro-detail */
.tried-photo[data-upload].has-upload {
  /* cover = always fill the frame (118% alone can leave gaps on some ratios) */
  background-size: cover !important;
  background-position: center 28% !important;
  background-repeat: no-repeat !important;
}

.tried-photo[data-upload].has-upload::before {
  content: "";
  opacity: 1 !important;
  z-index: 1;
  pointer-events: none;
  /* Light warm grade without mix-blend (Recalc Style / composite thrash). */
  background:
    radial-gradient(115% 88% at 50% 22%, transparent 35%, rgba(18, 16, 12, 0.1) 100%),
    linear-gradient(180deg, rgba(230, 222, 208, 0.08), transparent 42%);
  mix-blend-mode: normal;
}

/* Soft bottom edge blend into the page — no live SVG grain */
.tried-photo::after,
.tried-photo[data-upload].has-upload::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 72%,
    rgba(255, 255, 255, 0.18) 88%,
    rgba(255, 255, 255, 0.55) 100%
  );
  opacity: 0.9;
  mix-blend-mode: normal;
}

.tried-photo .ph-tag {
  z-index: 3;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.ph-tag--ig,
.ph-tag--days {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  left: 12px;
  top: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.ph-tag-ig {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 7.2A4.8 4.8 0 1 0 12 16.8 4.8 4.8 0 0 0 12 7.2zm0 7.92A3.12 3.12 0 1 1 12 8.88a3.12 3.12 0 0 1 0 6.24zM17.64 6.9a1.12 1.12 0 1 1-2.24 0 1.12 1.12 0 0 1 2.24 0zM12 2.4c-2.6 0-2.93.01-3.96.06-1.02.05-1.72.21-2.33.45a4.7 4.7 0 0 0-1.7 1.1 4.7 4.7 0 0 0-1.1 1.7c-.24.61-.4 1.31-.45 2.33C2.41 9.07 2.4 9.4 2.4 12s.01 2.93.06 3.96c.05 1.02.21 1.72.45 2.33a4.7 4.7 0 0 0 1.1 1.7 4.7 4.7 0 0 0 1.7 1.1c.61.24 1.31.4 2.33.45 1.03.05 1.36.06 3.96.06s2.93-.01 3.96-.06c1.02-.05 1.72-.21 2.33-.45a4.7 4.7 0 0 0 1.7-1.1 4.7 4.7 0 0 0 1.1-1.7c.24-.61.4-1.31.45-2.33.05-1.03.06-1.36.06-3.96s-.01-2.93-.06-3.96c-.05-1.02-.21-1.72-.45-2.33a4.7 4.7 0 0 0-1.1-1.7 4.7 4.7 0 0 0-1.7-1.1c-.61-.24-1.31-.4-2.33-.45C14.93 2.41 14.6 2.4 12 2.4zm0 1.68c2.56 0 2.86.01 3.87.06.93.04 1.44.2 1.78.33.45.17.77.38 1.1.72.34.34.55.66.72 1.1.13.34.29.85.33 1.78.05 1 .06 1.31.06 3.87s-.01 2.86-.06 3.87c-.04.93-.2 1.44-.33 1.78-.17.45-.38.77-.72 1.1-.34.34-.66.55-1.1.72-.34.13-.85.29-1.78.33-1 .05-1.31.06-3.87.06s-2.86-.01-3.87-.06c-.93-.04-1.44-.2-1.78-.33a2.97 2.97 0 0 1-1.1-.72 2.97 2.97 0 0 1-.72-1.1c-.13-.34-.29-.85-.33-1.78-.05-1-.06-1.31-.06-3.87s.01-2.86.06-3.87c.04-.93.2-1.44.33-1.78.17-.45.38-.77.72-1.1.34-.34.66-.55 1.1-.72.34-.13.85-.29 1.78-.33 1-.05 1.31-.06 3.87-.06z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 7.2A4.8 4.8 0 1 0 12 16.8 4.8 4.8 0 0 0 12 7.2zm0 7.92A3.12 3.12 0 1 1 12 8.88a3.12 3.12 0 0 1 0 6.24zM17.64 6.9a1.12 1.12 0 1 1-2.24 0 1.12 1.12 0 0 1 2.24 0zM12 2.4c-2.6 0-2.93.01-3.96.06-1.02.05-1.72.21-2.33.45a4.7 4.7 0 0 0-1.7 1.1 4.7 4.7 0 0 0-1.1 1.7c-.24.61-.4 1.31-.45 2.33C2.41 9.07 2.4 9.4 2.4 12s.01 2.93.06 3.96c.05 1.02.21 1.72.45 2.33a4.7 4.7 0 0 0 1.1 1.7 4.7 4.7 0 0 0 1.7 1.1c.61.24 1.31.4 2.33.45 1.03.05 1.36.06 3.96.06s2.93-.01 3.96-.06c1.02-.05 1.72-.21 2.33-.45a4.7 4.7 0 0 0 1.7-1.1 4.7 4.7 0 0 0 1.1-1.7c.24-.61.4-1.31.45-2.33.05-1.03.06-1.36.06-3.96s-.01-2.93-.06-3.96c-.05-1.02-.21-1.72-.45-2.33a4.7 4.7 0 0 0-1.1-1.7 4.7 4.7 0 0 0-1.7-1.1c-.61-.24-1.31-.4-2.33-.45C14.93 2.41 14.6 2.4 12 2.4zm0 1.68c2.56 0 2.86.01 3.87.06.93.04 1.44.2 1.78.33.45.17.77.38 1.1.72.34.34.55.66.72 1.1.13.34.29.85.33 1.78.05 1 .06 1.31.06 3.87s-.01 2.86-.06 3.87c-.04.93-.2 1.44-.33 1.78-.17.45-.38.77-.72 1.1-.34.34-.66.55-1.1.72-.34.13-.85.29-1.78.33-1 .05-1.31.06-3.87.06s-2.86-.01-3.87-.06c-.93-.04-1.44-.2-1.78-.33a2.97 2.97 0 0 1-1.1-.72 2.97 2.97 0 0 1-.72-1.1c-.13-.34-.29-.85-.33-1.78-.05-1-.06-1.31-.06-3.87s.01-2.86.06-3.87c.04-.93.2-1.44.33-1.78.17-.45.38-.77.72-1.1.34-.34.66-.55 1.1-.72.34-.13.85-.29 1.78-.33 1-.05 1.31-.06 3.87-.06z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn-pill {
  display: inline-block;
  padding: 16px 42px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--pure);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform 0.3s;
}

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

/* trust bar (legacy) */

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 36px;
  padding: 22px var(--gutter);
  background: var(--obsidian);
  color: var(--white);
}

.trust-bar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.trust-icon { opacity: 0.7; font-size: 12px; }

/* features (legacy) */

.features-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.features-copy h2 { font-size: clamp(32px, 4vw, 56px); margin-bottom: 30px; }

.feature-list { list-style: none; display: flex; flex-direction: column; }

.feature-list li {
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}

.feature-list li:last-child { border-bottom: 1px solid var(--hairline); }

.feature-list strong {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
}

.feature-list span { font-size: 12px; color: var(--muted); }

/* story timeline */

.story-line {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 20% 0%, #1a1d24 0%, transparent 50%),
    linear-gradient(180deg, #12151a 0%, #0e1014 55%, #12151a 100%);
  color: var(--white);
  padding: clamp(90px, 13vh, 160px) var(--gutter);
}

.story-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 50% at 50% 0%, rgba(255, 255, 255, 0.04), transparent 55%);
  opacity: 1;
  pointer-events: none;
}

.story-line .reveal {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* Beats stay readable always — entrance is child animation on .is-active (scroll IO). */
.story-line .story-beat.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@keyframes story-year-in {
  from {
    opacity: 0.35;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes story-copy-in {
  from {
    opacity: 0.2;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes story-node-pop {
  0% {
    transform: scale(0.65);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
  60% {
    transform: scale(1.12);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.07);
  }
}

/* Mobile: keep translateX(-50%) through the pop so the node stays on the spine. */
@keyframes story-node-pop-mobile {
  0% {
    transform: translateX(-50%) scale(0.65);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
  60% {
    transform: translateX(-50%) scale(1.12);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1);
  }
  100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.07);
  }
}

.story-kicker {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  margin: 0 auto clamp(56px, 9vh, 100px);
  max-width: 920px;
  line-height: 1.7;
  text-align: left;
}

.story-beats {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0 auto;
  padding: 0 0 8px;
  max-width: 920px;
}

/* left spine */
.story-beats::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 40px;
  left: 7px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.1) 70%,
    transparent
  );
  pointer-events: none;
}

.story-beat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding: 0 0 clamp(52px, 8vh, 88px) 40px;
}

.story-beat:last-child {
  padding-bottom: 0;
}

/* node on the spine */
.story-beat::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: #12151a;
  transition: background 0.45s ease, border-color 0.45s ease;
}

.story-beat.is-active::before {
  background: var(--pure);
  border-color: var(--pure);
  animation: story-node-pop 0.48s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.story-beat.is-active .story-year {
  animation: story-year-in 0.48s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.story-beat.is-active .story-copy {
  animation: story-copy-in 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.05s both;
}

.story-year {
  display: block;
  padding-top: 2px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--pure);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.story-copy {
  min-width: 0;
  padding-top: 2px;
}

.story-beat h3 {
  color: var(--pure);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.18;
  max-width: 18ch;
  margin: 0;
  text-align: left;
}

@media (min-width: 721px) {
  .story-beat h3:not(.story-mark) {
    max-width: none;
  }

  .story-line-peak {
    font-size: clamp(16px, 1.5vw, 22px);
  }
}

.story-beat p {
  margin-top: 14px;
  color: var(--muted-light);
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1.55;
  max-width: 42ch;
  text-align: left;
}

.story-beat .story-source {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 243, 239, 0.38);
  max-width: none;
}

/* two-bar comparison ? time with friends */
.story-chart {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(28px, 5vw, 44px);
  height: clamp(180px, 28vw, 240px);
  margin: 4px 0 0;
  max-width: 280px;
}

.story-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: clamp(48px, 10vw, 64px);
  height: 100%;
}

.story-bar-track {
  flex: 1 1 auto;
  width: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.story-bar-fill {
  display: block;
  width: 100%;
  height: 0;
  border-radius: 1px 1px 0 0;
  background: rgba(255, 255, 255, 0.9);
  transition: height 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-bar--now .story-bar-fill {
  background: rgba(255, 255, 255, 0.28);
  transition-delay: 0.18s;
}

.story-beat.is-active .story-bar-fill {
  height: var(--bar, 100%);
}

.story-bar strong {
  margin-top: 12px;
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 400;
  line-height: 1;
  color: var(--pure);
  font-variant-numeric: tabular-nums;
}

.story-bar-unit {
  margin-top: 4px;
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.story-bar-label {
  margin-top: 10px;
  flex: 0 0 auto;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Rising popularity ? line graph, 2022 to now */
.story-chart--line {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
  max-width: 360px;
  height: auto;
  min-height: clamp(160px, 26vw, 210px);
  margin-top: 28px;
}

.story-line-plot {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 140px;
  padding-top: clamp(28px, 4vw, 36px);
}

.story-line-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.story-line-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-beat.is-active .story-line-path {
  stroke-dashoffset: 0;
}

.story-line-dot {
  fill: rgba(255, 255, 255, 0.55);
  stroke: #0a0a0a;
  stroke-width: 2;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0.4);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(0.35s + var(--i, 0) * 0.18s);
}

.story-line-dot--peak {
  fill: #fff;
}

.story-beat.is-active .story-line-dot {
  opacity: 1;
  transform: scale(1);
}

.story-line-peak {
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pure);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease 0.6s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
  pointer-events: none;
}

.story-beat.is-active .story-line-peak {
  opacity: 1;
  transform: translateY(0);
}

.story-line-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  padding: 0 2px;
}

.story-line-labels em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.story-line-labels em:first-child {
  text-align: left;
}

.story-line-labels em:last-child {
  text-align: right;
}

/* Light timeline (Chess Atlas) — paper field, ink type */
.story-line--light {
  background: var(--paper);
  color: var(--ink);
}

.story-line--light .reveal {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.story-line--light .story-beat.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.story-line--light .story-beat.is-active .story-year {
  animation: story-year-in 0.48s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.story-line--light .story-beat.is-active .story-copy {
  animation: story-copy-in 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.05s both;
}

.story-line--light::after {
  background: none;
}

.story-line--light .story-kicker {
  color: rgba(13, 14, 16, 0.45);
}

.story-line--light .story-beats::before {
  background: linear-gradient(
    to bottom,
    rgba(13, 14, 16, 0.28),
    rgba(13, 14, 16, 0.1) 70%,
    transparent
  );
}

.story-line--light .story-beat::before {
  border-color: rgba(13, 14, 16, 0.4);
  background: var(--paper);
}

.story-line--light .story-beat.is-active::before {
  background: var(--ink);
  border-color: var(--ink);
  animation: none;
  box-shadow: 0 0 0 5px rgba(13, 14, 16, 0.08);
}

.story-line--light .story-year,
.story-line--light .story-beat h3,
.story-line--light .story-bar strong,
.story-line--light .story-line-peak {
  color: var(--ink);
}

.story-line--light .story-beat p {
  color: var(--muted);
}

.story-line--light .story-beat .story-source,
.story-line--light .story-bar-unit,
.story-line--light .story-bar-label,
.story-line--light .story-line-labels em {
  color: rgba(13, 14, 16, 0.42);
}

.story-line--light .story-bar-fill {
  background: var(--ink);
}

.story-line--light .story-bar--now .story-bar-fill {
  background: rgba(13, 14, 16, 0.22);
}

.story-line--light .story-line-path {
  stroke: var(--ink);
}

.story-line--light .story-line-dot {
  fill: rgba(13, 14, 16, 0.45);
  stroke: var(--paper);
}

.story-line--light .story-line-dot--peak {
  fill: var(--ink);
}

.atlas-strip--timeline {
  max-width: none;
  margin: 0;
  padding: 0 0 clamp(1.5rem, 4vh, 2.5rem);
}

.atlas-strip--timeline .atlas-strip-head {
  max-width: 40rem;
  margin: 0 auto 0.25rem;
  padding: 0 var(--gutter);
}

.atlas-strip--timeline .story-line--light {
  padding: clamp(48px, 7vh, 88px) var(--gutter) clamp(64px, 9vh, 110px);
  overflow: visible;
}

.atlas-strip--timeline .story-beats {
  max-width: min(100%, 980px);
  width: 100%;
}

@media (min-width: 721px) {
  .atlas-strip--timeline .story-beat {
    grid-template-columns: minmax(128px, 190px) minmax(360px, 1fr);
    gap: clamp(36px, 5vw, 64px);
  }

  .atlas-strip--timeline .story-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    padding-right: 0.2em;
  }

  .atlas-strip--timeline .story-beat h3:not(.story-mark) {
    max-width: none !important;
    width: 100%;
    overflow: visible;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.15;
    padding-right: 0.08em;
  }
}

@media (max-width: 640px) {
  .atlas-strip--timeline {
    padding-inline: 0;
  }

  .atlas-strip--timeline .atlas-strip-head {
    padding-top: 2.75rem;
    padding-inline: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-bar-fill {
    transition: none;
    height: var(--bar, 100%);
  }

  .story-line-path {
    transition: none;
    stroke-dashoffset: 0;
  }

  .story-line-dot,
  .story-line-peak {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .story-beat.is-active .story-year,
  .story-beat.is-active .story-copy,
  .story-beat.is-active::before {
    animation: none;
  }
}

/* wordmark ? same hierarchy as other beats, with a soft snap */
.story-beat .story-mark {
  text-transform: none;
  font-size: clamp(26px, 3.2vw, 42px);
  letter-spacing: 0.12em;
  max-width: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
    opacity 1s ease 0.2s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.story-beat .story-tagline {
  white-space: nowrap;
}

.story-beat.is-active .story-mark {
  letter-spacing: 0.02em;
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .story-kicker {
    text-align: center;
    max-width: 28ch;
  }

  .story-beat .story-tagline {
    font-size: 13px;
    letter-spacing: -0.01em;
  }

  /* hide the full-height spine ? connectors live only in the gaps */
  .story-beats::before {
    display: none;
  }

  .story-beat {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-left: 0;
    padding-bottom: clamp(56px, 9vh, 80px);
    text-align: center;
    justify-items: center;
  }

  .story-beat::before {
    /* Same centering math as the connector — avoid half-pixel calc(50% - 4.5px) drift */
    left: 50%;
    top: 0;
    width: 10px;
    height: 10px;
    margin: 0;
    transform: translateX(-50%);
    transform-origin: center center;
  }

  .story-beat.is-active::before {
    animation-name: story-node-pop-mobile;
  }

  /* line only between beats, never through text */
  .story-beat:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: clamp(40px, 7vh, 64px);
    margin: 0;
    transform: translateX(-50%);
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.28)
    );
    pointer-events: none;
  }

  .story-line--light .story-beat:not(:last-child)::after {
    background: linear-gradient(
      to bottom,
      rgba(13, 14, 16, 0.12),
      rgba(13, 14, 16, 0.38)
    );
  }

  .story-year {
    margin-top: 22px;
    white-space: normal;
    text-align: center;
    font-size: clamp(15px, 4.2vw, 18px);
    letter-spacing: 0.01em;
  }

  .story-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .story-beat h3,
  .story-beat p {
    text-align: center;
  }

  .story-chart {
    justify-content: center;
    height: 200px;
  }

  .story-bar {
    align-items: center;
    width: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-mark {
    transition: none;
    transform: none;
    opacity: 1;
    letter-spacing: 0.02em;
  }
}

/* PDP: comparison table left of places carousel (sits above reviews head) */
.pdp-page #reviews > .pdp-versus-places,
.pdp-page .pdp-versus-places {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 7vh, 64px);
  width: min(100% - 2 * var(--gutter), 1180px);
  max-width: 1180px;
  margin: 0 auto;
  /* Clear the black story-line above — content must not sit on the edge */
  padding: clamp(64px, 10vh, 120px) 0 clamp(28px, 4vh, 40px);
  box-sizing: border-box;
}

.pdp-page #reviews.pdp-section-flush {
  padding-top: 0;
}

.pdp-page .story-line + #reviews > .pdp-versus-places {
  padding-top: clamp(72px, 11vh, 128px);
}

.pdp-page #reviews > .pdp-section-head {
  margin-top: clamp(8px, 2vh, 20px);
}

.pdp-page .pdp-versus-places::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--paper);
  pointer-events: none;
}

.pdp-page .pdp-versus-places > .home-versus,
.pdp-page .pdp-versus-places > .pdp-section-dark-cards {
  min-width: 0;
  max-width: none;
}

.pdp-page .pdp-versus-places .home-versus {
  width: 100%;
  max-width: none !important;
  margin: 0;
  padding: 0;
  min-height: 0;
  display: block;
}

.pdp-page .pdp-versus-places .home-versus::before {
  display: none;
}

.pdp-page .pdp-versus-places .home-versus-copy {
  max-width: none;
}

.pdp-page .pdp-versus-places .home-versus-copy h2 {
  font-size: clamp(32px, 3.6vw, 48px);
}

.pdp-page .pdp-versus-places .home-versus-lede {
  margin-bottom: clamp(20px, 3vh, 28px);
}

.pdp-page .pdp-versus-places .pdp-section-dark-cards {
  width: 100%;
  max-width: none !important;
  margin: 0;
  padding: 0;
  text-align: center;
}

.pdp-page .pdp-versus-places .dark-cards,
.pdp-page .pdp-versus-places .dark-card {
  max-width: 100% !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 900px) {
  .pdp-page #reviews > .pdp-versus-places,
  .pdp-page .pdp-versus-places {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center;
    gap: clamp(28px, 3.5vw, 48px);
  }

  .pdp-page .pdp-versus-places .pdp-section-dark-cards {
    max-width: none !important;
  }

  .pdp-page .pdp-versus-places .dark-card-carousel-viewport {
    height: clamp(240px, 26vw, 300px);
  }

  .pdp-page .pdp-versus-places .dark-card-carousel-slide {
    width: min(200px, 42%);
  }

  .pdp-page .pdp-versus-places .home-versus-table {
    grid-template-columns: minmax(0, 1fr) 104px 104px;
    max-width: none;
    width: 100%;
    gap: 12px;
    justify-content: stretch;
  }

  .pdp-page .pdp-versus-places .home-versus-col--us,
  .pdp-page .pdp-versus-places .home-versus-col--them {
    width: 104px;
    max-width: 104px;
    justify-self: center;
  }

  .pdp-page .pdp-versus-places .home-versus-col--us {
    overflow: visible;
  }

  .pdp-page .pdp-versus-places .home-versus-col-head {
    font-size: 11px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: visible;
    padding-left: 6px !important;
    padding-right: 6px !important;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 899px) {
  .pdp-page #reviews > .pdp-versus-places,
  .pdp-page .pdp-versus-places {
    grid-template-columns: 1fr;
  }

  .pdp-page .pdp-versus-places > .pdp-section-dark-cards {
    order: 1;
  }

  .pdp-page .pdp-versus-places > .home-versus {
    order: 2;
  }
}

/* Places carousel — editorial photo card */

.pdp-section-dark-cards {
  max-width: min(100%, 520px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  overflow: visible;
}

.dark-cards-intro {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.28em 0.35em;
  margin: 0 auto 16px;
  width: 100%;
  max-width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(12px, 3.1vw, 17px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--muted);
}

.dark-cards-intro [data-edit] {
  display: inline;
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}

.dark-cards-place {
  display: inline-block;
  flex: 0 0 auto;
  min-width: 0;
  margin-left: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.06em;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  text-align: center;
  vertical-align: baseline;
}

.dark-cards-place strong {
  font-weight: 600;
  font-style: italic;
}

.dark-cards-place.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.09em;
  height: 0.92em;
  margin-left: 0.1em;
  vertical-align: -0.06em;
  background: currentColor;
  animation: dark-card-caret 0.7s steps(1) infinite;
}

@keyframes dark-card-caret {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.dark-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  justify-items: center;
  max-width: min(100%, 520px);
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

.dark-card {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--white);
  border-radius: 0;
  text-align: center;
  width: 100%;
  max-width: min(100%, 520px);
  margin: 0 auto;
}

.dark-card--offset {
  margin-top: clamp(48px, 7vw, 96px);
}

.dark-card--light {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.dark-card--light::after {
  display: none;
}

.dark-card--light .dark-card-media {
  background-color: transparent;
  border-radius: 0;
}

.dark-card--light .dark-card-media.ph::after {
  display: block;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 48%,
    rgba(255, 255, 255, 0.2) 62%,
    rgba(255, 255, 255, 0.55) 76%,
    rgba(255, 255, 255, 0.88) 90%,
    #ffffff 100%
  );
}

.dark-card--light .dark-card-copy {
  z-index: 3;
  pointer-events: auto;
}

.dark-card--light .dark-card-copy [data-edit] {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.dark-card--light h2,
.dark-card--light .dark-card-copy h2 {
  color: var(--ink);
  text-shadow: none;
}

.dark-card--light p,
.dark-card--light .dark-card-copy p {
  color: var(--ink);
}

.dark-card--light .ph-tag {
  color: rgba(255, 255, 255, 0.55);
}

.dark-card::after {
  content: none;
}

.dark-card-media {
  position: relative;
  z-index: 0;
  margin: 0;
  aspect-ratio: 4 / 5;
  width: 100%;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
  background-color: transparent;
  overflow: hidden;
}

.dark-card-media.ph::before {
  display: none;
}

/* Real black fade — starts halfway down the collage */
.dark-card-media.ph::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  mix-blend-mode: normal;
  background-image: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 50%,
    rgba(6, 7, 8, 0.45) 62%,
    rgba(6, 7, 8, 0.82) 78%,
    #060708 92%,
    #060708 100%
  );
  pointer-events: none;
}

.dark-card-media[data-upload].has-upload {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
}

.dark-card-media .ph-tag {
  z-index: 2;
  top: 18px;
  bottom: auto;
  opacity: 0.7;
}

.dark-card-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 0 clamp(18px, 4vw, 28px) clamp(22px, 4vh, 32px);
}

.dark-card h2 {
  color: var(--pure);
  font-family: var(--serif);
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-bottom: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.dark-card p {
  color: var(--muted-light);
  font-size: 13px;
  line-height: 1.5;
  max-width: 32ch;
  margin: 0 auto;
}

.dark-card-carousel-nav {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 280px);
  margin: 14px auto 0;
  z-index: 1;
  pointer-events: auto;
}

.dark-card-carousel-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(11, 12, 14, 0.55);
  box-shadow: none;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.dark-card-carousel-btn:hover {
  background: rgba(11, 12, 14, 0.04);
  color: rgba(11, 12, 14, 0.88);
  transform: none;
}

.dark-card-carousel-btn:focus-visible {
  outline: 2px solid rgba(11, 12, 14, 0.45);
  outline-offset: 2px;
}

.dark-card-carousel-btn:disabled {
  opacity: 0.28;
  cursor: default;
  transform: none;
}

.dark-card-carousel-viewport {
  display: block;
  position: relative;
  width: 100%;
  height: clamp(240px, 62vw, 290px);
  overflow: visible;
  scroll-snap-type: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior-x: none;
  scrollbar-width: none;
}

.dark-card-carousel-viewport::-webkit-scrollbar {
  display: none;
}

.dark-card-carousel-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  flex: none;
  width: min(196px, 48vw);
  min-width: 0;
  margin: 0;
  scroll-snap-align: unset;
  display: block;
  background: transparent;
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s ease;
}

.dark-card-carousel-slide .dark-card-media {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none;
}

.dark-card-carousel-slide[data-cover="0"] {
  width: min(214px, 52vw);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
  z-index: 4;
}

.dark-card-carousel-slide[data-cover="-1"] {
  transform: translate(calc(-50% - 48%), -50%) scale(0.78);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  cursor: pointer;
}

.dark-card-carousel-slide[data-cover="1"] {
  transform: translate(calc(-50% + 48%), -50%) scale(0.78);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  cursor: pointer;
}

.dark-card-carousel-slide[data-cover="-1"] .dark-card-media::after,
.dark-card-carousel-slide[data-cover="1"] .dark-card-media::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.55) 40%,
    rgba(255, 255, 255, 0.78) 75%,
    #ffffff 100%
  );
}

.dark-card-carousel-slide[data-cover="-2"],
.dark-card-carousel-slide[data-cover="2"] {
  transform: translate(calc(-50% + (var(--cover-x, 0) * 70%)), -50%) scale(0.68);
  opacity: 0;
  z-index: 0;
}

.dark-card-carousel-slide[data-cover="-2"] {
  --cover-x: -1;
}

.dark-card-carousel-slide[data-cover="2"] {
  --cover-x: 1;
}

.pdp-section-dark-cards {
  max-width: min(100%, 520px);
  overflow: visible;
}

.dark-cards,
.dark-card {
  max-width: min(100%, 520px);
  overflow: visible;
}

@media (min-width: 900px) {
  .pdp-section-dark-cards {
    max-width: 860px;
  }

  .dark-cards,
  .dark-card {
    max-width: 760px;
    width: 100%;
  }

  .dark-card-carousel-viewport {
    height: clamp(280px, 32vw, 330px);
  }

  .dark-card-carousel-slide {
    width: min(220px, 26%);
  }

  .dark-card-carousel-slide[data-cover="0"] {
    width: min(236px, 28%);
  }

  .dark-card-carousel-slide[data-cover="-1"] {
    transform: translate(calc(-50% - 52%), -50%) scale(0.78);
  }

  .dark-card-carousel-slide[data-cover="1"] {
    transform: translate(calc(-50% + 52%), -50%) scale(0.78);
  }

  .dark-card-carousel-nav {
    margin-top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dark-card-carousel-slide {
    transition: none;
  }
}

.dark-card-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.dark-card-carousel-dot {
  pointer-events: auto;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 12, 14, 0.22);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.dark-card-carousel-dot.is-active {
  background: rgba(11, 12, 14, 0.78);
  transform: scale(1.2);
}

.dark-card-carousel-dot:focus-visible {
  outline: 2px solid rgba(11, 12, 14, 0.55);
  outline-offset: 2px;
}

.dark-card-slide-icon {
  display: none;
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.55);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  border: 0;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(11, 12, 14, 0.08);
}

.dark-card-slide-icon.has-upload,
body.dev-mode.dev-editing .dark-card-slide-icon {
  display: block;
}

.dark-card-slide-icon.ph::before,
.dark-card-slide-icon.ph::after {
  opacity: 0.2;
}

.dark-card-slide-icon.ph.has-upload {
  background-color: transparent;
  border-color: transparent;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.dark-card-slide-icon.ph.has-upload::before,
.dark-card-slide-icon.ph.has-upload::after {
  opacity: 0;
}

.dark-card-slide-icon .seo-upload-img {
  object-fit: contain;
  object-position: center;
}

body.dev-mode.dev-editing .dark-card-slide-icon[data-upload] {
  cursor: pointer;
}

body.dev-mode.dev-editing .dark-card-carousel-viewport {
  scroll-snap-type: none;
}

body.dev-mode.dev-editing .dark-card-carousel-slide .dark-card-media[data-upload] {
  cursor: pointer;
  pointer-events: auto !important;
}

body.dev-mode.dev-editing .dark-card-carousel-slide {
  pointer-events: auto !important;
}

body.dev-mode.dev-editing .dark-card-carousel-slide .dark-card-media .upload-hint {
  z-index: 6;
}

/* feature icons banner ? uploadable graphic under dark cards */

.pdp-section-features {
  max-width: 1100px;
  padding-top: clamp(8px, 2vh, 24px);
  padding-bottom: clamp(8px, 2vh, 24px);
}

.features-banner {
  margin: 0 auto;
  width: 100%;
  min-height: clamp(160px, 28vw, 320px);
  aspect-ratio: 16 / 7;
  border: none;
  border-radius: 18px;
  background-color: var(--paper);
  isolation: isolate;
}

.features-banner.ph::before,
.features-banner.ph::after {
  opacity: 0.2;
}

.features-banner[data-upload].has-upload {
  background-color: transparent;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.features-banner[data-upload].has-upload::before,
.features-banner[data-upload].has-upload::after {
  opacity: 0 !important;
}

@media (max-width: 720px) {
  .features-banner {
    border-radius: 14px;
    aspect-ratio: 16 / 9;
    min-height: 140px;
  }
}

/* reviews carousel */

.review-rail { padding: 0 0 8px; }

.review-rail--static {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.review-rail--static::-webkit-scrollbar {
  display: none;
}

.review-rail--static .loop-track {
  animation: none !important;
  transform: none !important;
  width: max-content;
}

.review-card {
  width: min(320px, 82vw);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(13, 14, 16, 0.03);
}

.pdp-page .tried-photo {
  width: clamp(112px, 14vw, 172px);
  border-radius: 14px;
}

.pdp-page .review-rail .loop-track {
  gap: 10px;
}

.pdp-page .review-card {
  width: min(260px, 72vw);
  border-radius: 12px;
}

.pdp-page .trust-ticker-item {
  padding: 0 28px;
  font-size: 10px;
  letter-spacing: 0.18em;
}

.review-card .ph {
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 0;
  isolation: isolate;
  -webkit-user-drag: none;
  user-select: none;
}

/* Soft owner-photo grade — composites only (no grain/blend; those froze scroll at reviews) */
.review-card .ph[data-upload].has-upload {
  background-size: cover !important;
  background-position: center 28% !important;
  background-repeat: no-repeat !important;
}

.review-card .ph[data-upload].has-upload::before {
  content: "";
  opacity: 1 !important;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: normal;
  background:
    radial-gradient(115% 88% at 50% 22%, transparent 42%, rgba(18, 16, 12, 0.07) 100%),
    linear-gradient(180deg, rgba(230, 222, 208, 0.04), transparent 40%);
}

.review-card .ph::after,
.review-card .ph[data-upload].has-upload::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: normal;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 68%,
    rgba(255, 255, 255, 0.08) 86%,
    var(--paper) 100%
  );
  opacity: 0.9;
}

.review-card .ph .ph-tag {
  z-index: 3;
}

.review-card .ph-tag--place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  left: 12px;
  top: 12px;
  max-width: calc(100% - 24px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(13, 14, 16, 0.12);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink, #0d0e10);
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-card .ph-tag--place .flag {
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.review-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.review-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.review-body .stars {
  --star-size: 14px;
  --star-gap: 2px;
  flex-shrink: 0;
}

.review-who {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
}

.review-name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.verified-buyer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #2f9e6e;
  white-space: nowrap;
  line-height: 1;
}

.verified-buyer svg {
  width: 13px;
  height: 13px;
  color: #2f9e6e;
  flex-shrink: 0;
}

.review-quote {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.review-product {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 10px;
  border-radius: 10px;
  background: var(--paper-soft);
}

.review-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: none;
  display: block;
  flex-shrink: 0;
}

.review-thumb::before { background-size: 18px 18px; }

.review-product-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.review-product-meta strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.review-price {
  font-size: 12px;
  color: var(--ink);
}

.review-price b { font-weight: 600; }

.review-price s {
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}

.review-purchased {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
}

.review-purchased svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* faq */

.faq-card {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 0 22px;
  background: var(--paper);
}

.faq-item { border-top: 1px solid var(--hairline); }

.faq-card .faq-item:first-child { border-top: none; }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--serif);
  font-size: 17px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 300;
  color: var(--muted);
  transition: transform 0.3s;
  flex-shrink: 0;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  padding: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
  max-width: 560px;
}

/* newsletter */

.newsletter { text-align: center; }

.newsletter-form {
  display: flex;
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--ink);
}

.newsletter-form input {
  flex: 1;
  border: none;
  outline: none;
  padding: 16px 18px;
  font-family: var(--sans);
  font-size: 13px;
  background: transparent;
  color: var(--ink);
}

.newsletter-form button {
  border: 1px solid rgba(196, 150, 40, 0.42);
  background:
    linear-gradient(
      165deg,
      var(--btn-gold-hi) 0%,
      var(--btn-gold) 48%,
      var(--btn-gold-lo) 100%
    );
  color: var(--ink);
  padding: 0 26px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
}

.newsletter-done {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--muted);
}

/* ---------- dev mode uploads ---------- */

body.dev-crop-open {
  overflow: hidden;
}

/* Don't let the open offer popup steal clicks while cropping */
body.dev-crop-open .checkmate-popup {
  pointer-events: none !important;
}

.dev-crop-modal {
  position: fixed;
  inset: 0;
  /* Above offer popup (400–500) and mobile nav drawer (1100) */
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 12, 0.72);
}

.dev-crop-modal[hidden] {
  display: none !important;
}

/* ---------- clean upload progress overlay ---------- */

body.dev-upload-busy {
  cursor: progress;
}

.dev-upload-progress {
  position: fixed;
  inset: 0;
  z-index: 1210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 12, 0.72);
}

.dev-upload-progress[hidden] {
  display: none !important;
}

.dev-upload-progress__dialog {
  width: min(420px, 100%);
  padding: 22px 24px 20px;
  background: #111418;
  color: #f2f2f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

.dev-upload-progress__header h2 {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.dev-upload-progress__header p {
  margin: 6px 0 0;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 13px;
  color: rgba(242, 242, 240, 0.62);
  word-break: break-word;
}

.dev-upload-progress__bar {
  position: relative;
  margin-top: 20px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.dev-upload-progress__bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7ec8a3, #c8e6c0);
  transition: width 0.18s ease;
}

.dev-upload-progress.is-indeterminate .dev-upload-progress__bar span {
  width: 36% !important;
  animation: bf-upload-indeterminate 1.1s ease-in-out infinite;
}

@keyframes bf-upload-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.dev-upload-progress__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 13px;
}

.dev-upload-progress__meta strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.dev-upload-progress__meta span {
  color: rgba(242, 242, 240, 0.62);
  text-align: right;
}

.dev-crop-dialog {
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(92vh, 860px);
  background: #111418;
  color: #f2f2f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

.dev-crop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dev-crop-header h2 {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.dev-crop-header p {
  margin: 4px 0 0;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(242, 242, 240, 0.62);
}

.dev-crop-stage {
  flex: 1;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    linear-gradient(45deg, #1a1d22 25%, transparent 25%),
    linear-gradient(-45deg, #1a1d22 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a1d22 75%),
    linear-gradient(-45deg, transparent 75%, #1a1d22 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #0c0e11;
  overflow: hidden;
}

.dev-crop-frame {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  line-height: 0;
  user-select: none;
  touch-action: none;
}

.dev-crop-frame img {
  display: block;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.dev-crop-sel {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  cursor: move;
  touch-action: none;
}

.dev-crop-sel span {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  box-sizing: border-box;
}

.dev-crop-sel [data-handle="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.dev-crop-sel [data-handle="n"]  { left: 50%; top: -6px; transform: translateX(-50%); cursor: ns-resize; }
.dev-crop-sel [data-handle="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.dev-crop-sel [data-handle="e"]  { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.dev-crop-sel [data-handle="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.dev-crop-sel [data-handle="s"]  { left: 50%; bottom: -6px; transform: translateX(-50%); cursor: ns-resize; }
.dev-crop-sel [data-handle="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.dev-crop-sel [data-handle="w"]  { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

.dev-crop-modal.is-aspect-locked .dev-crop-sel {
  outline: 2px solid rgba(96, 165, 250, 0.95);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
}

.dev-crop-footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #0e1115;
}

.dev-crop-btn {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #f2f2f0;
  padding: 10px 16px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dev-crop-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dev-crop-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dev-crop-btn-primary {
  background: #f2f2f0;
  color: #111;
  border-color: #f2f2f0;
}

.dev-crop-btn-primary:hover {
  background: #fff;
}

@media (max-width: 640px) {
  .dev-crop-modal {
    padding: 10px;
  }

  .dev-crop-stage {
    min-height: 220px;
    padding: 12px;
  }

  .dev-crop-footer {
    justify-content: stretch;
  }

  .dev-crop-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

.dev-banner {
  position: sticky;
  top: 0;
  z-index: 250;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px var(--gutter);
  background: #1a3a2a;
  color: #d8f5e4;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.dev-banner[hidden] { display: none !important; }

/* Dev edit: floating text size slider */
.dev-font-toolbar {
  position: absolute;
  z-index: 270;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(11, 12, 14, 0.12);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px rgba(11, 12, 14, 0.14);
  font-family: var(--sans);
}

body.nav-drawer-open .dev-font-toolbar {
  z-index: 1220;
}

.dev-font-toolbar[hidden] {
  display: none !important;
}

.dev-font-toolbar-label {
  padding: 0 2px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.dev-font-toolbar-range {
  width: 140px;
  height: 22px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.dev-font-toolbar-val {
  min-width: 3.25em;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: right;
}

.dev-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dev-banner-actions button {
  border: 1px solid rgba(216, 245, 228, 0.35);
  background: transparent;
  color: inherit;
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.dev-banner-actions button:hover {
  background: rgba(216, 245, 228, 0.12);
}

.dev-banner-actions button.dev-save-all,
.dev-banner-actions button[data-save-all-uploads],
.dev-banner-actions button[data-save-all-copy],
.dev-banner-actions button[data-pull-live-uploads] {
  background: #d8f5e4;
  color: #1a3a2a;
  border-color: #d8f5e4;
  font-weight: 600;
}

.dev-banner-actions button.dev-publish,
.dev-banner-actions button[data-publish-content] {
  background: #f5f5f0;
  color: #0b3d2e;
  border-color: #f5f5f0;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.dev-banner-actions button.dev-save-all:hover,
.dev-banner-actions button[data-save-all-uploads]:hover,
.dev-banner-actions button[data-save-all-copy]:hover,
.dev-banner-actions button[data-pull-live-uploads]:hover {
  background: #fff;
  border-color: #fff;
}

.dev-banner-actions button.dev-publish:hover,
.dev-banner-actions button[data-publish-content]:hover {
  background: #fff;
  border-color: #fff;
  color: #06281e;
}

.dev-banner-actions button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.dev-show-chip {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  background: #1a3a2a;
  color: #d8f5e4;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.dev-show-chip[hidden] { display: none !important; }

.dev-banner code {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.dev-banner [data-dev-status]:not(:empty)::before {
  content: "? ";
}

body.dev-mode.dev-editing [data-upload]:not([data-no-outline]):not(.checkmate-popup__media) {
  cursor: pointer;
  outline: 2px dashed rgba(26, 120, 72, 0.85);
  outline-offset: -2px;
  position: relative;
}

/* Decorative UGC loop ? never show dashed edit borders on these tiles */
body.dev-mode.dev-editing .tried .ugc-rail [data-upload],
body.dev-mode.dev-editing .tried .ugc-rail .ugc-slide,
body.dev-mode.dev-editing .tried .ugc-rail .ugc-slide.ph,
.tried .ugc-rail .ugc-slide,
.tried .ugc-rail .ugc-slide.ph,
.tried .ugc-rail [data-upload] {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  outline-offset: 0 !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
}

body.dev-mode.dev-editing .tried .ugc-rail .upload-hint,
.tried .ugc-rail .upload-hint {
  display: none !important;
}

/* Keep full-bleed home hero absolute - relative collapses it to 0 height */
body.dev-mode.dev-editing .home-hero .home-hero-media[data-upload] {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Mosaic tiles retired - keep slots in DOM but never editable as overlays */
body.dev-mode.dev-editing .home-hero .home-hero-tile[data-upload],
body.dev-mode.dev-editing .home-hero .home-hero-grid {
  display: none !important;
  pointer-events: none !important;
}

/* Made to Move panels are stacked absolute - relative piles them and clips uploads */
body.dev-mode.dev-editing .home-language-media[data-upload] {
  position: absolute;
  inset: 0;
}

body.dev-mode.dev-editing .home-world-shot[data-upload] {
  position: relative;
  pointer-events: auto;
}

@media (max-width: 899px) {
  body.dev-mode.dev-editing .home-hero.has-hero-video .home-hero-media[data-upload] {
    position: absolute;
  }
}

body.dev-mode.dev-editing [data-edit],
body.dev-mode.dev-editing [data-gallery-caption] {
  cursor: text;
  outline: 2px dashed rgba(37, 99, 235, 0.85);
  outline-offset: 3px;
  border-radius: 2px;
  min-height: 1em;
}

body.dev-mode.dev-editing [data-edit].is-editing,
body.dev-mode.dev-editing [data-edit]:focus,
body.dev-mode.dev-editing [data-gallery-caption].is-editing,
body.dev-mode.dev-editing [data-gallery-caption]:focus {
  outline: 2px solid rgba(37, 99, 235, 1);
  outline-offset: 3px;
  background: rgba(37, 99, 235, 0.08);
  position: relative;
  z-index: 40;
}

/* Mobile edit mode: collapse swipe-card stacks so they stop covering copy below */
@media (max-width: 899px) {
  body.dev-mode.dev-editing .home-page .home-language .home-moment-media-wrap,
  body.dev-mode.dev-editing .home-page .home-moment .home-moment-media-wrap,
  body.dev-mode.dev-editing .home-page .home-language-media-wrap {
    overflow: hidden !important;
    margin-bottom: 16px !important;
  }

  body.dev-mode.dev-editing .home-page .home-language .home-moment-media[data-stack="1"],
  body.dev-mode.dev-editing .home-page .home-language .home-moment-media[data-stack="2"],
  body.dev-mode.dev-editing .home-page .home-moment .home-moment-media[data-stack="1"],
  body.dev-mode.dev-editing .home-page .home-moment .home-moment-media[data-stack="2"] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  body.dev-mode.dev-editing .home-page .home-language .home-moment-media[data-stack="0"],
  body.dev-mode.dev-editing .home-page .home-moment .home-moment-media[data-stack="0"],
  body.dev-mode.dev-editing .home-page .home-language-media.is-active {
    transform: none !important;
    pointer-events: auto;
  }

  /* Keep the Edit toggle above the sticky cart, not over the carousel mid-screen */
  body.dev-mode .dev-edit-toggle {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    left: auto;
    width: auto;
    height: auto;
    max-width: max-content;
    max-height: none;
    overflow: visible;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    transform: none;
  }

  body.dev-mode.dev-editing .dev-edit-toggle {
    bottom: auto;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 12px;
    z-index: 260;
    padding: 8px 12px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  /* Above the mobile menu (z 1100) so Edit stays tappable with the drawer open */
  body.dev-mode.nav-drawer-open .dev-edit-toggle,
  body.dev-mode.dev-editing.nav-drawer-open .dev-edit-toggle {
    z-index: 1205;
  }

  /* Pause decorative UGC / world rails while editing so they don't steal taps */
  body.dev-mode.dev-editing .tried .ugc-rail,
  body.dev-mode.dev-editing .home-world-shots-rail,
  body.dev-mode.dev-editing .home-loved-flags {
    pointer-events: none;
  }

  body.dev-mode.dev-editing .home-language-copy,
  body.dev-mode.dev-editing .home-moment-copy,
  body.dev-mode.dev-editing .home-language-mobile-cta {
    position: relative;
    z-index: 30;
  }
}


body.dev-mode.dev-editing .ph-tag {
  z-index: 6;
  pointer-events: auto;
  color: rgba(255, 255, 255, 0.85);
}

/* Cleared photo labels: gone in preview, still clickable when editing */
.ph-tag.is-copy-cleared,
figcaption.is-copy-cleared {
  display: none;
}

body.dev-mode.dev-editing .ph-tag.is-copy-cleared,
body.dev-mode.dev-editing figcaption.is-copy-cleared {
  display: block;
  min-width: 4.5em;
  min-height: 1.2em;
  opacity: 0.55;
}

/* World shots: keep flag badge when place text is cleared */
.home-page .home-world-shot .ph-tag.is-copy-cleared,
.home-page .home-world-shot figcaption.is-copy-cleared,
body.dev-mode.dev-editing .home-page .home-world-shot .ph-tag.is-copy-cleared,
body.dev-mode.dev-editing .home-page .home-world-shot figcaption.is-copy-cleared {
  display: inline-flex;
  min-width: 0;
  min-height: 0;
  opacity: 1;
  padding: 5px 6px;
  gap: 0;
  font-size: 0;
  letter-spacing: 0;
}

/* Never show upload chrome unless editing is explicitly on */
.upload-hint {
  display: none !important;
}

.upload-canva-size {
  display: none !important;
}

body.dev-mode.dev-editing .upload-hint {
  display: block !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

body.dev-mode.dev-editing .upload-hint.upload-hint--split {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  pointer-events: auto;
  white-space: normal;
}

body.dev-mode.dev-editing .upload-hint-btn {
  appearance: none;
  border: none;
  margin: 0;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
}

body.dev-mode.dev-editing .upload-hint-btn:hover,
body.dev-mode.dev-editing .upload-hint-btn:focus-visible {
  background: rgba(13, 14, 16, 0.08);
  outline: none;
}

body.dev-mode.dev-editing .upload-hint-btn[data-upload-action="crop"] {
  background: var(--btn-gold, #e8c56a);
}

body.dev-mode.dev-editing .upload-hint-btn[data-upload-action="crop"]:hover,
body.dev-mode.dev-editing .upload-hint-btn[data-upload-action="crop"]:focus-visible {
  background: var(--btn-gold-hover, #d4b055);
}

body.dev-mode.dev-editing .upload-hint-btn[data-upload-action="download"] {
  background: var(--ink, #0d0e10);
  color: #fff;
}

body.dev-mode.dev-editing .upload-hint-btn[data-upload-action="download"]:hover,
body.dev-mode.dev-editing .upload-hint-btn[data-upload-action="download"]:focus-visible {
  background: #2a2c30;
}

body.dev-mode.dev-editing .home-language-media:not(.is-active) .upload-hint {
  display: none !important;
}

/* Stacked Made to Move cards - keep every photo uploadable while editing */
body.dev-mode.dev-editing .home-page .home-language-media {
  pointer-events: auto !important;
  cursor: pointer;
}

body.dev-mode.dev-editing .home-page .home-language-media .upload-hint,
body.dev-mode.dev-editing .home-page .home-language-media:not(.is-active) .upload-hint {
  display: inline-flex !important;
  pointer-events: none;
}

/* Loved Worldwide desktop stack - upload any peeked card */
body.dev-mode.dev-editing .home-page .home-moment-media {
  pointer-events: auto !important;
  cursor: pointer;
}

body.dev-mode.dev-editing .home-page .home-moment-media .upload-hint,
body.dev-mode.dev-editing .home-page .home-moment-media:not(.is-active) .upload-hint {
  display: inline-flex !important;
  pointer-events: none;
}

body.dev-mode.dev-editing .bundle-media[data-upload] {
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

body.dev-mode.dev-editing .quote-avatar .upload-hint,
body.dev-mode.dev-editing .featured-review-avatar .upload-hint,
body.dev-mode.dev-editing .review-thumb .upload-hint,
body.dev-mode.dev-editing .pdp-thumb .upload-hint,
body.dev-mode.dev-editing .bundle-media .upload-hint,
body.dev-mode.dev-editing .buybox-feat-media .upload-hint,
body.dev-mode.dev-editing .kv-feature-media .upload-hint,
body.dev-mode.dev-editing .sticky-cart-thumb .upload-hint,
body.dev-mode.dev-editing .home-language-cta-thumb .upload-hint {
  padding: 4px 8px;
  letter-spacing: 0;
  font-size: 11px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 6;
}

body.dev-mode:not(.dev-editing) .dev-banner {
  display: none !important;
}

.dev-edit-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 260;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  background: #1a3a2a;
  color: #d8f5e4;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* Stay above the mobile menu so Edit can be toggled while the drawer is open */
body.nav-drawer-open .dev-edit-toggle,
body.dev-mode.nav-drawer-open .dev-edit-toggle,
body.dev-mode.dev-editing.nav-drawer-open .dev-edit-toggle {
  z-index: 1205;
}

.dev-edit-toggle[aria-pressed="false"] {
  background: #111;
  color: #f4f3ef;
}

.dev-edit-toggle[hidden] { display: none !important; }

body.dev-mode.dev-editing .dev-banner {
  /* leave room so toggle doesn't cover banner actions on small screens */
  padding-right: 120px;
}

body.home-page.kanva-home.dev-mode.dev-editing:has([data-dev-banner]:not([hidden])) .dev-edit-toggle {
  top: 8px;
  bottom: auto;
}

[data-upload].has-upload {
  background-size: cover !important;
  background-position: center !important;
  border: none;
}

/* Hold a dark frame while gallery boots ? hide checkerboard FOUC */
.pdp-main.is-gallery-booting:not(.has-upload)::before,
.pdp-main.is-gallery-booting:not(.has-upload)::after,
.pdp-gallery:has(.pdp-main.is-gallery-booting) .pdp-thumb .ph:not(.has-upload)::before,
.pdp-gallery:has(.pdp-main.is-gallery-booting) .pdp-thumb .ph:not(.has-upload)::after {
  opacity: 0;
}
.pdp-main.is-gallery-booting:not(.has-upload) {
  background: radial-gradient(120% 90% at 30% 10%, #23262e 0%, #101216 45%, #07080a 100%);
}

[data-upload].has-upload::before {
  opacity: 0;
}

/* Product gallery ? pin cover to top so portrait collage slides fill the square
   (avoids a leftover strip of the next row peeking at the bottom). */
.pdp-main[data-upload].has-upload,
.pdp-main.has-upload {
  border: none;
  background-size: cover !important;
  background-position: center top !important;
}

.pdp-main .seo-upload-img {
  object-fit: cover;
  object-position: center top;
}

.pdp-thumb.has-upload .ph {
  background-size: cover !important;
  background-position: center top !important;
  border: none;
}

.pdp-thumb.has-upload .ph .seo-upload-img {
  object-fit: cover;
  object-position: center top;
}

.pdp-thumb.has-upload .ph::before,
.pdp-thumb.has-upload .ph::after {
  content: none;
}

/* ---------- reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile: never hide whole sections behind scroll IO (freezes = permanent blank). */
@media (max-width: 899px) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .home-page .home-scroll { animation: none; }
  .marquee-track { animation: none; }
  .announce-track { animation: none; }
  .loop-track { animation: none !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .pdp-top {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    justify-items: stretch;
  }
  .pdp-gallery {
    position: static;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-items: center;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .buybox,
  .buybox-inner {
    position: static;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .buybox-feats--gallery {
    display: none;
  }
  .buybox-feats--buybox {
    display: grid;
    gap: 8px 6px;
    margin: 10px 0 2px;
  }
  .buybox-feats--buybox .buybox-feat {
    gap: 6px;
  }
  .buybox-feats--buybox .buybox-feat-media {
    max-width: 40px;
    border-radius: 8px;
  }
  .buybox-feats--buybox .buybox-feat-label {
    font-size: 10px;
    max-width: 8.5em;
  }
  .tried-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .tried-copy {
    max-width: none;
    width: 100%;
    padding: 0 4px;
  }
  /* Lifestyle photo rail is desktop-only — same breakpoint as UGC rail (1021px+) */
  .tried-rail { display: none !important; }

  /* Mobile spacing for clips above Description */
  .buybox .ugc-grid {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .pdp-gallery > .gallery-tools {
    order: 0;
    justify-content: center;
    width: 100%;
  }
  .pdp-stage {
    order: 1;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .pdp-main {
    width: 100%;
    max-width: 100%;
  }
  .pdp-thumbs {
    order: 2;
    flex-direction: row;
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 2px 0 4px;
  }
  .pdp-thumbs::-webkit-scrollbar { display: none; }
  .pdp-thumb {
    width: 64px;
    flex: 0 0 64px;
  }

  .dark-cards {
    grid-template-columns: 1fr;
    max-width: min(100%, 520px);
    margin-left: auto;
    margin-right: auto;
    gap: 0;
  }
  .dark-card {
    border-radius: 0;
    width: 100%;
    max-width: min(100%, 520px);
    overflow: visible;
  }
  .dark-card--offset {
    margin-top: 0;
  }
  .dark-card-media,
  .dark-card--light .dark-card-media {
    border-radius: 0;
    box-shadow: none;
  }
  .dark-card-carousel-slide .dark-card-media {
    border-radius: 16px;
    box-shadow: none;
  }
  .dark-card-copy {
    margin-top: 0;
    padding: 0 16px 22px;
  }
  .dark-card h2 {
    font-size: clamp(24px, 6.5vw, 30px);
  }
  .dark-card p {
    font-size: 12.5px;
    max-width: 30ch;
  }
  .pdp-section-dark-cards {
    max-width: min(100%, 520px);
    overflow: visible;
  }

  .pdp-section,
  .pdp-section-flush .pdp-section-head {
    max-width: 640px;
  }

  /* Home landing ? tablet */
  .home-page .home-benefits {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .home-page .home-press-kicker {
    padding-top: 16px;
    padding-bottom: 0;
  }

  @media (max-width: 899px) {
    .home-page .home-press-kicker {
      display: none;
    }
  }

  .home-page .home-benefits-rail {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  .home-page .home-benefits-track {
    display: flex;
    width: max-content;
    max-width: none;
    gap: 0;
    grid-template-columns: none;
    animation: loop-scroll 22s linear infinite;
    will-change: transform;
  }

  @media (prefers-reduced-motion: reduce) {
    .home-page .home-benefits-track {
      animation: none;
      transform: none;
      will-change: auto;
      overflow-x: auto;
      width: 100%;
      max-width: 100%;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .home-page .home-benefits-track::-webkit-scrollbar {
      display: none;
    }

    .home-page .home-benefits-track .home-benefit[aria-hidden="true"] {
      display: none;
    }
  }

  .home-page .home-benefits-track .home-benefit[aria-hidden="true"] {
    display: flex;
  }

  .home-page .home-benefit {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 16px 36px;
    border-right: none;
    border-top: none;
    text-align: left;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .home-page .home-benefit::after {
    content: none;
    display: none;
  }

  .home-page .home-press-mark {
    opacity: 0.78;
  }

  .home-page .home-press-mark--medium {
    font-size: 20px;
  }

  .home-page .home-press-mark--reportley {
    font-size: 16px;
  }

  .home-page .home-press-mark--chicago {
    font-size: 13px;
  }

  .home-page .home-press-mark--bleam {
    font-size: 15px;
  }


  .home-page .home-intro {
    display: none;
  }

  .atlas-page .home-story-duo .home-intro {
    display: none;
  }
  .home-page .home-ugc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-page .home-world-stage {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .home-page .home-world-map {
    height: clamp(220px, 58vw, 340px);
    order: 1;
  }
  .home-page .home-world-detail {
    order: 2;
    justify-content: center;
    text-align: center;
  }
  .home-page .home-world-shots-rail {
    --world-card-w: 80px;
    --world-card-gap: 14px;
    width: calc(var(--world-card-w) * 2 + var(--world-card-gap));
    height: auto;
    margin: 0 auto;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .home-page .home-world-shots-track {
    flex-direction: row;
    width: max-content;
    height: auto;
    gap: var(--world-card-gap);
    align-items: flex-start;
  }
  .home-page .home-world-item {
    width: var(--world-card-w);
  }
  .home-page .home-world-shot {
    border-radius: 10px;
  }
  .home-page .home-world-item-place strong {
    font-size: 12px;
  }
  .home-page .home-world-item-place span {
    font-size: 10px;
  }
  .home-page .home-carry-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-page .home-carry-shot:nth-child(2),
  .home-page .home-carry-shot:nth-child(4) {
    margin-top: 0;
  }
  /* Loved Worldwide above Made to Move on mobile */
  .home-page .home-feature-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: clamp(28px, 5vh, 48px);
    background: var(--paper);
  }
  .home-page .home-feature-stack .home-moment {
    order: -1;
  }

  .home-page .home-language,
  .home-page .home-moment {
    grid-template-columns: 1fr;
    justify-items: center;
    justify-content: center;
    gap: clamp(28px, 5vh, 40px);
    width: min(100% - 2 * var(--gutter), 560px);
    max-width: min(100% - 2 * var(--gutter), 560px);
    margin-left: auto;
    margin-right: auto;
    padding: clamp(40px, 7vh, 72px) 0;
    text-align: center;
  }

  .home-page #moment-go.home-moment {
    gap: 0;
    padding-top: clamp(28px, 5vh, 48px);
    padding-bottom: clamp(56px, 9vh, 96px);
  }

  /* Premium Metal copy → Made to Move collage read as one unit on mobile */
  .home-page .home-feature-stack .home-language {
    padding-top: clamp(12px, 2vh, 18px);
  }

  /* Made to Move - image on top, features under (tabs still drive the 3 slides) */
  .home-page .home-language .home-moment-media-wrap {
    order: 1;
    display: block;
    position: relative;
    min-height: 0;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 28px;
    border-radius: 18px;
    gap: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  .home-page .home-language-copy {
    order: 2;
  }
  .home-page .home-language-mobile-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 36ch;
    margin: 18px auto 0;
  }
  .home-page .home-language-mobile-cta .btn-cta {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    background:
      linear-gradient(
        165deg,
        var(--btn-gold-hi) 0%,
        var(--btn-gold) 48%,
        var(--btn-gold-lo) 100%
      );
    color: var(--ink);
    border: 1px solid rgba(196, 150, 40, 0.42);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    padding: 19px 28px;
  }
  .home-page .home-language-media {
    border-radius: 18px;
  }
  .home-page .home-language-features {
    margin-top: 4px;
    gap: 4px;
    text-align: left;
    width: 100%;
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }
  .home-page .home-language-features li {
    padding: 10px 4px 10px 0;
  }
  .home-page .home-language-features strong {
    font-size: 16px;
    margin-bottom: 4px;
  }
  .home-page .home-language-features p {
    font-size: 14px;
    line-height: 1.55;
  }

  /* Loved Worldwide — copy first when it has media; Made to Move keeps image then features */
  .home-page .home-moment-copy,
  .home-page .home-moment--flip .home-moment-copy {
    order: 1;
  }
  .home-page .home-moment > .home-moment-media-wrap,
  .home-page .home-moment--flip > .home-moment-media-wrap {
    order: 2;
  }

  .home-page .home-language-copy,
  .home-page .home-moment-copy {
    max-width: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Hide language section title on mobile only */
  .home-page .home-language-copy > .home-section-title {
    display: none !important;
  }

  /* Shared mobile titles ? same serif voice, centered */
  .home-page .home-language-copy .home-section-title,
  .home-page .home-moment-copy .home-section-title,
  .home-page .home-language-copy h2.home-section-title,
  .home-page .home-moment-copy h2.home-section-title,
  .home-page .home-language .home-section-title,
  .home-page .home-moment .home-section-title {
    font-family: var(--serif) !important;
    font-weight: 400 !important;
    font-size: clamp(32px, 8vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    margin: 0 auto 12px !important;
    max-width: 14ch !important;
    width: 100%;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Loved Worldwide ? one line (beats the 14ch title rule above) */
  .home-page .home-moment .home-section-title,
  .home-page .home-moment-copy .home-section-title,
  .home-page .home-moment-copy h2.home-section-title,
  .home-page .home-moment h2.home-section-title {
    max-width: 100% !important;
    width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .home-page .home-language-features {
    margin-top: 8px;
    gap: 16px;
    text-align: left;
    width: 100%;
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }
  .home-page .home-language-features li {
    padding: 0;
  }
  .home-page .home-language-features strong {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .home-page .home-language-features p {
    font-size: 14px;
    line-height: 1.6;
  }
  .home-page .home-moment-media-wrap {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
    border-radius: 22px;
    transform: none;
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 0;
  }
  .home-page .home-moment-media {
    border-radius: 22px;
    box-shadow: none;
  }

  /* Chess On The Go ? mobile Shop-this-look: title + lede + 1:1 image */
  .home-page .home-moment {
    gap: clamp(18px, 3.5vh, 28px);
    text-align: center;
  }
  .home-page .home-moment .home-moment-lede {
    display: block;
    margin: 0 auto 0;
    max-width: min(22rem, 100%);
    width: 100%;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
  }

  /* Three stacked title → lede → image rows on mobile */
  .home-page .home-moment-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(36px, 7vh, 56px);
    width: 100%;
  }

  .home-page .home-moment-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  .home-page .home-moment-block:not(.home-moment-block--impact) .home-moment-lede-shot {
    margin: 16px auto 0;
    max-width: min(22rem, 100%);
    aspect-ratio: 1 / 1;
  }

  .home-page .home-language {
    display: none !important;
  }

  /* Chess On The Go ? keep first title tight; allow wrap on longer feature titles */
  .home-page .home-moment .home-section-title,
  .home-page .home-moment-copy .home-section-title,
  .home-page .home-moment-copy h2.home-section-title {
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 12px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .home-page .home-moment-block:not(:first-child) .home-section-title {
    white-space: normal !important;
    width: 100% !important;
    max-width: 14ch !important;
  }

  .home-page .home-moment .home-moment-lede {
    margin-left: auto;
    margin-right: auto;
  }
  .home-page .home-moment .home-language-features,
  .home-page .home-moment .home-language-cta {
    display: none !important;
  }
  .home-page .home-moment-copy,
  .home-page .home-moment--flip .home-moment-copy {
    order: 1;
  }
  .home-page .home-moment-media-wrap,
  .home-page .home-moment--flip .home-moment-media-wrap {
    order: 2;
  }
  .home-page .home-language-features li {
    padding: 0;
  }
  .home-page .home-language-features strong {
    font-size: 15px;
  }
  .home-page .home-language-features p {
    font-size: 13.5px;
  }
  .home-page .home-language-cta-thumb {
    width: 52px;
    height: 52px;
  }
  :is(.home-page, .pdp-page) .home-versus {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vh, 40px);
    width: min(100% - 2 * var(--gutter), 560px);
    padding: clamp(40px, 7vh, 72px) 0 clamp(12px, 2vh, 20px);
  }
  :is(.home-page, .pdp-page) .home-versus-copy {
    max-width: none;
  }
  :is(.home-page, .pdp-page) .home-versus-col--us,
  :is(.home-page, .pdp-page) .home-versus-col--them {
    width: 72px;
    max-width: 72px;
  }

  :is(.home-page, .pdp-page) .home-versus-table {
    grid-template-columns: minmax(0, 1fr) 72px 72px;
    gap: 8px;
  }

  :is(.home-page, .pdp-page) .home-versus-col--us {
    margin-top: 0;
    margin-bottom: 0;
  }
  :is(.home-page, .pdp-page) .home-versus-media {
    max-width: 420px;
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: auto;
    order: 0;
    justify-self: center;
    background-size: contain !important;
  }
  .home-page .home-manifesto {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vh, 40px);
    width: 100%;
    max-width: none;
    padding: clamp(64px, 12vh, 100px) var(--gutter);
  }
  .home-page .home-manifesto-copy {
    max-width: none;
    align-items: center;
    text-align: center;
  }
  .home-page .home-manifesto p {
    margin-left: auto;
    margin-right: auto;
  }
  .home-page .home-manifesto-media {
    max-width: 280px;
    justify-self: center;
    order: -1;
  }
  .home-page .home-object-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-page .home-object-item:nth-child(2) { border-right: none; }
  .home-page .home-object-item:nth-child(n + 3) {
    border-top: 1px solid var(--hairline-light);
  }
  .home-page .home-object-wide {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 900px) {
  .features-inner { grid-template-columns: 1fr; }
  .trust-bar { gap: 14px 24px; }
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .footer-nav {
    width: 100%;
    gap: 40px;
  }
  .footer-base {
    grid-template-columns: 1fr;
    grid-template-areas:
      "legal"
      "social"
      "copy";
    justify-items: start;
  }
  .footer-social {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .site-header {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .site-header.is-scrolled {
    top: 8px;
    width: fit-content;
    max-width: calc(100vw - 20px);
    margin-left: auto;
    margin-right: auto;
    padding: 6px 12px 6px 14px;
    border-radius: 999px;
    grid-template-columns: auto auto auto;
    gap: 10px;
  }

  .site-header > .nav-toggle {
    display: flex;
    grid-column: 1;
    justify-self: start;
  }

  .wordmark {
    grid-column: 2;
    justify-self: center;
    flex-shrink: 0;
    line-height: 1;
    font-size: 17px;
    letter-spacing: 0.28em;
  }

  .wordmark img {
    height: 29px;
    max-width: min(182px, 42vw);
  }

  .site-nav { display: none; }

  .site-actions {
    grid-column: 3;
    margin-left: 0;
    flex: initial;
    justify-self: end;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .site-actions .nav-cta {
    display: none;
  }

  .locale-root {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .locale-select {
    max-width: none;
    height: 36px;
    padding: 0 4px;
  }
  .locale-select svg {
    display: none;
  }
  .site-header .locale-flag-img,
  .locale-select-label .locale-flag-img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .locale-flag {
    font-size: 18px;
    line-height: 1;
  }
  .locale-currency-option .locale-flag-img,
  .locale-currency-trigger .locale-flag-img {
    display: block !important;
    width: 22px !important;
    height: 16px !important;
    min-width: 22px !important;
    min-height: 16px !important;
  }
  .icon-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .nav-toggle {
    display: flex;
    flex-shrink: 0;
  }

  /* Old inline dropdown retired — drawer takes over on mobile */
  .site-nav.is-open {
    display: none !important;
  }

  /* Default position when Edit is off — clear sticky CTAs / hero pills */
  body.dev-mode:not(.dev-editing) .dev-edit-toggle {
    top: auto;
    bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px));
    right: 16px;
    left: auto;
    width: auto;
    height: auto;
  }
  .pdp-top {
    padding-left: max(16px, var(--gutter));
    padding-right: max(16px, var(--gutter));
  }
  .pdp-section {
    padding-left: max(16px, var(--gutter));
    padding-right: max(16px, var(--gutter));
  }
  .home-page .home-scroll { display: none; }
  .home-page .home-hero-cta {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .home-page .home-object-wide {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  .locale-select {
    max-width: none;
  }
  .locale-select-text {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .nav-cta {
    display: none;
  }
  .site-actions { gap: 8px; }
  .home-page .home-benefit {
    padding: 14px 28px;
    gap: 0;
  }
  .home-page .home-benefit::after {
    display: none;
  }
  .home-page .home-intro-list { grid-template-columns: 1fr; }
  .home-page .home-compare-row > span {
    padding: 14px 12px;
    font-size: 12px;
  }
  .home-page .home-ugc-grid { gap: 8px; }
  .footer-brand { max-width: none; }
  .footer-nav {
    width: 100%;
    justify-content: flex-start;
    gap: 40px;
  }
  .footer-base {
    row-gap: 14px;
    padding-top: 22px;
  }
  .footer-copy {
    font-size: 11px;
    max-width: 20rem;
    line-height: 1.45;
  }
  .checkmate-dev,
  .board-dev {
    left: auto;
    right: 16px;
    bottom: 20px;
    align-items: flex-end;
  }
  .utility-form { grid-template-columns: 1fr; }
  .dev-banner { flex-direction: column; text-align: center; }
  .rating-pill {
    gap: 8px;
    margin-bottom: 14px;
    font-size: 11px;
  }
  .rating-pill .stars { --star-size: 12px; }
  .rating-pill-text { padding-left: 10px; }
  .limited-line::before,
  .limited-line::after { width: 18%; }
  .pdp-header nav { display: none; }
  .buybox .rating { justify-content: flex-start; }
  .pdp-color-swatches {
    gap: 8px;
  }
  .pdp-swatch-dot {
    width: 24px;
    height: 24px;
  }
  .pdp-mid-text {
    font-size: calc(var(--mid-scale, 1) * clamp(18px, 5.5vw, 28px));
    white-space: nowrap;
  }
  .pdp-thumb { width: 56px; flex-basis: 56px; }

  .home-page .home-section-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .home-page .home-object-grid {
    grid-template-columns: 1fr;
  }
  .home-page .home-object-item {
    border-right: none;
    padding-left: 0;
  }
  .home-page .home-object-item + .home-object-item {
    padding-left: 0;
    border-top: 1px solid var(--hairline-light);
  }
  .home-page .home-carry-strip {
    gap: 8px;
  }
  .home-page .btn-dark {
    padding: 18px 28px;
    letter-spacing: 0.16em;
    font-size: 11px;
    text-align: center;
  }
}

/* ---------- utility / policy pages ---------- */

.utility-page main {
  min-height: 55vh;
}

.utility-hero {
  padding: clamp(56px, 10vh, 110px) var(--gutter) clamp(28px, 4vh, 48px);
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 700px) {
  .utility-hero {
    padding: clamp(32px, 6vh, 56px) var(--gutter) 18px;
  }

  .utility-hero h1 {
    font-size: clamp(30px, 8.5vw, 42px);
    line-height: 1.08;
  }

  .utility-hero .lede {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.55;
    max-width: 28rem;
    padding: 0 4px;
  }

  .utility-kicker {
    margin-bottom: 12px;
  }

  .utility-panel {
    padding: 0 var(--gutter) clamp(48px, 10vh, 96px);
  }

  .utility-form {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .utility-form .btn-cta {
    width: 100%;
    justify-self: stretch;
    min-width: 0;
  }

  .utility-field input,
  .utility-field textarea,
  .utility-field select {
    font-size: 16px; /* avoid iOS zoom on focus */
    padding: 13px 14px;
  }

  .utility-check {
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    line-height: 1.4;
  }

  .utility-links {
    margin-top: 36px;
    gap: 12px 18px;
  }
}

.utility-kicker {
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.utility-hero h1 {
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.utility-hero .lede {
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.utility-panel {
  padding: 0 var(--gutter) clamp(70px, 12vh, 140px);
  max-width: 820px;
  margin: 0 auto;
}

.policy-prose {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.policy-prose h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  margin-bottom: 10px;
}

.policy-prose p,
.policy-prose li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 300;
}

.policy-prose ul {
  padding-left: 1.15em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.policy-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-meta {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.utility-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  margin-top: 8px;
}

.utility-form .full {
  grid-column: 1 / -1;
}

/* Track order: single column, centered ? cleaner on phone + desktop */
.track-form,
[data-track-form] {
  grid-template-columns: 1fr;
  max-width: 420px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  gap: 16px;
}

.track-form .btn-cta,
[data-track-form] .btn-cta {
  width: 100%;
  justify-self: stretch;
  min-width: 0;
  margin-top: 4px;
}

.track-form .utility-check,
[data-track-form] .utility-check {
  width: 100%;
  max-width: 100%;
  align-items: flex-start;
  line-height: 1.45;
  margin-top: 0;
  padding: 2px 0 4px;
}

.track-form .utility-check span,
[data-track-form] .utility-check span {
  flex: 1;
  min-width: 0;
  white-space: normal;
}

.utility-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.utility-field label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.utility-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--muted);
  cursor: pointer;
  width: fit-content;
}

.utility-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.utility-check span {
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.utility-check:hover span {
  color: var(--ink);
  border-bottom-color: var(--hairline);
}

.utility-field input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--paper-soft);
}

.utility-field input,
.utility-field textarea,
.utility-field select {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.25s;
}

.utility-field input:focus,
.utility-field textarea:focus,
.utility-field select:focus {
  border-color: var(--ink);
}

.utility-field textarea {
  min-height: 140px;
  resize: vertical;
}

.utility-form .btn-cta {
  width: auto;
  justify-self: start;
  min-width: 180px;
  border-radius: 8px;
}

.utility-note,
.utility-success {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.utility-success {
  color: var(--ink);
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper-soft);
}

.utility-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
  justify-content: center;
}

.utility-links a {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}

.utility-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.policy-card-list {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}

.policy-card {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 22px 24px;
  background: var(--paper);
}

.policy-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 8px;
}

.policy-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
}

/* ------------------------------------------------------------------
   ORDER TRACKING
   ------------------------------------------------------------------ */

.track-result {
  margin-top: 48px;
  padding: 36px 0 8px;
  border-top: 1px solid var(--hairline);
}

.track-result-kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

.track-result-meta {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.track-stepper {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 40px 0 28px;
  padding: 0;
  position: relative;
}

.track-stepper::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 11px;
  height: 1px;
  background: var(--hairline);
  z-index: 0;
}

.track-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.track-step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--paper);
  box-shadow: 0 0 0 6px var(--paper);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.track-step.is-complete .track-step-dot,
.track-step.is-current .track-step-dot {
  background: var(--ink);
  border-color: var(--ink);
}

.track-step.is-current .track-step-dot {
  transform: scale(1.12);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px rgba(13, 14, 16, 0.12);
}

.track-step-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

.track-step.is-complete .track-step-label,
.track-step.is-current .track-step-label {
  color: var(--ink);
}

.track-terminal {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  background: var(--paper-soft);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

.track-details {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}

.track-detail {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: baseline;
}

.track-detail-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.track-detail-value {
  font-size: 15px;
  color: var(--ink);
  font-weight: 400;
}

.track-carrier-btn {
  display: inline-flex;
  width: auto;
  min-width: 220px;
  text-decoration: none;
}

.track-events {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.track-event {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}

.track-event time {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(13, 14, 16, 0.48);
  font-variant-numeric: tabular-nums;
}

.track-event-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.track-event-copy strong {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.track-event-copy em {
  font-style: normal;
  font-size: 12px;
  color: rgba(13, 14, 16, 0.5);
}

@media (max-width: 640px) {
  .track-stepper {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 28px;
  }

  .track-stepper::before {
    display: none;
  }

  .track-step {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    text-align: left;
  }

  .track-detail {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .track-event {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ------------------------------------------------------------------
   ADMIN ORDERS
   ------------------------------------------------------------------ */

.admin-page {
  background: #ffffff;
  min-height: 100svh;
  color: var(--ink);
}

.admin-shell {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100svh;
}

.admin-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100svh;
  align-items: stretch;
}

.admin-sidebar {
  border-right: 1px solid var(--hairline);
  padding: 28px 18px 40px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100svh;
  overflow-y: auto;
  background: #fff;
  z-index: 20;
}

.admin-nav-brand {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 10px 28px;
}

.admin-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.admin-nav-link {
  display: block;
  padding: 10px 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-left: 2px solid transparent;
}

.admin-nav-link:hover {
  color: var(--ink);
}

.admin-nav-link.is-active {
  color: var(--ink);
  border-left-color: var(--ink);
  font-weight: 600;
}

.admin-nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  margin-bottom: 16px;
}

.admin-main {
  padding: 40px var(--gutter) 80px;
  max-width: 1180px;
  width: 100%;
  box-sizing: border-box;
}

.admin-login,
.admin-panel {
  background: #ffffff;
  border: none;
  padding: 0;
}

.admin-panel[hidden],
.admin-login[hidden] {
  display: none !important;
}

.admin-login {
  max-width: 420px;
  margin: 12vh auto 0;
  border: 1px solid var(--hairline);
  padding: 32px;
}

.admin-kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
}

.admin-login h1,
.admin-panel h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  margin-bottom: 0;
  letter-spacing: -0.02em;
}

.admin-login p,
.admin-lede {
  color: var(--muted);
  font-size: 14px;
  margin: 12px 0 24px;
}

.admin-login .utility-field {
  margin-bottom: 16px;
}

.admin-top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 28px;
}

.admin-toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-period {
  display: inline-flex;
  border: 1px solid var(--hairline);
  background: #fff;
}

.admin-period-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  border-right: 1px solid var(--hairline);
}

.admin-period-btn:last-child {
  border-right: 0;
}

.admin-period-btn:hover {
  color: var(--ink);
}

.admin-period-btn.is-active {
  background: var(--ink);
  color: #fff;
}

.admin-fulfill-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

.admin-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-btn {
  appearance: none;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
}

.admin-btn:hover {
  border-color: var(--ink);
}

.admin-btn.primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.admin-btn-danger {
  color: #8a1f1f;
  border-color: rgba(138, 31, 31, 0.35);
}

.admin-btn-danger:hover {
  background: rgba(138, 31, 31, 0.06);
}

.admin-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-notice {
  margin: 0 0 16px;
  color: #1a5c2e;
  font-size: 14px;
}

.admin-error {
  color: #8a1f1f;
  font-size: 13px;
  margin: 0 0 20px;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.admin-metrics:has(.admin-metric:nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-metrics:has(.admin-metric:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-metric {
  border: 1px solid var(--hairline);
  background: #fff;
  padding: 18px 20px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.admin-metric-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.admin-metric-row,
.admin-chart-hero-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-metric-value {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.admin-metric-compare {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.admin-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.admin-delta.is-up {
  color: #00a63e;
}

.admin-delta.is-down {
  color: #c62828;
}

.admin-delta.is-flat {
  color: var(--muted);
}

.admin-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-chart-card {
  padding-bottom: 12px;
}

.admin-chart-head {
  margin-bottom: 8px;
}

.admin-chart-hero {
  display: block;
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 8px;
}

.admin-chart-sub {
  margin: 8px 0 0;
  min-height: 1.2em;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.admin-chart {
  position: relative;
  height: 220px;
  margin: 0 -8px;
  user-select: none;
  touch-action: none;
}

.admin-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.admin-chart-line {
  fill: none;
  stroke: #00c805;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-chart-line-prev {
  fill: none;
  stroke: rgba(0, 200, 5, 0.35);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4 5;
}

.admin-chart-crosshair {
  stroke: rgba(0, 200, 5, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.admin-chart.is-scrubbing .admin-chart-crosshair {
  opacity: 1;
}

.admin-chart-dot {
  fill: #00c805;
  stroke: #fff;
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.admin-chart.is-scrubbing .admin-chart-dot {
  opacity: 1;
}

.admin-chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  margin-top: 4px;
}

.admin-chart-labels span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-card {
  border: 1px solid var(--hairline);
  background: #fff;
  padding: 22px 24px;
}

.admin-card h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 4px;
}

.admin-card-lede {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 18px;
}

.admin-card-table {
  padding: 22px 0 0;
}

.admin-card-table .admin-card-head {
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-country-list,
.admin-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.admin-country-row {
  display: grid;
  gap: 8px;
}

.admin-country-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}

.admin-country-name {
  font-size: 14px;
  font-weight: 500;
}

.admin-bar {
  height: 3px;
  background: rgba(13, 14, 16, 0.08);
  overflow: hidden;
}

.admin-bar > span {
  display: block;
  height: 100%;
  background: #00c805;
}

.admin-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.admin-status-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-status-row strong {
  font-size: 18px;
  font-weight: 500;
  font-family: var(--serif);
}

.admin-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--hairline);
  margin-top: 8px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 16px 24px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.admin-table th {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.admin-order-num {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.admin-address {
  margin-top: 6px;
  display: grid;
  gap: 2px;
}

.admin-muted {
  color: var(--muted);
  font-size: 12px;
}

.admin-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  margin-top: 6px;
}

.admin-badge.is-refund {
  border-color: #8a1f1f;
  color: #8a1f1f;
}

.admin-edit {
  display: grid;
  gap: 8px;
  min-width: 220px;
}

.admin-edit input,
.admin-edit select {
  width: 100%;
  border: 1px solid var(--hairline);
  background: #fff;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}

.admin-edit .admin-btn {
  width: 100%;
}

.admin-segment {
  display: inline-flex;
  border: 1px solid var(--hairline);
  background: #fff;
  margin-bottom: 20px;
}

.admin-segment-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  border-right: 1px solid var(--hairline);
}

.admin-segment-btn:last-child {
  border-right: 0;
}

.admin-segment-btn:hover {
  color: var(--ink);
}

.admin-segment-btn.is-active {
  background: var(--ink);
  color: #fff;
}

.admin-badge.is-paid {
  border-color: #1a5c2e;
  color: #1a5c2e;
}

.admin-badge.is-abandoned,
.admin-badge.is-open {
  border-color: #8a5a00;
  color: #8a5a00;
}

.admin-badge.is-email-sent {
  border-color: #1a4a7a;
  color: #1a4a7a;
}

.admin-badge.is-pending {
  border-color: var(--hairline);
  color: var(--muted);
}

.admin-badge.is-recovered {
  border-color: #00a63e;
  color: #00a63e;
}

.admin-row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 960px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 18px;
  }

  .admin-nav-toggle {
    display: inline-block;
  }

  .admin-sidebar [data-admin-nav] {
    display: none;
  }

  .admin-sidebar.is-open [data-admin-nav] {
    display: block;
  }

  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-charts,
  .admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-metrics {
    grid-template-columns: 1fr;
  }

  .admin-top {
    align-items: flex-start;
  }

  .admin-table th,
  .admin-table td {
    padding: 14px 16px;
  }
}

/* ------------------------------------------------------------------
   CHECKOUT SUCCESS
   ------------------------------------------------------------------ */

.confirm-order-meta {
  margin-top: 28px;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.confirm-order-number {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

.confirm-order-number strong {
  font-weight: 600;
  letter-spacing: 0.14em;
}

.confirm-actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.confirm-actions a.track-link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px;
  text-decoration: none;
}

.confirm-actions a.track-link:hover {
  opacity: 0.9;
}

/* ------------------------------------------------------------------
   PROMO STICKY ? Checkmate 15% claimed
   ------------------------------------------------------------------ */

.promo-sticky {
  position: fixed;
  top: 46%;
  right: 0;
  z-index: 160;
  transform: translate3d(calc(100% - 42px), -50%, 0);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.28s ease;
  pointer-events: auto;
}

.promo-sticky[hidden] {
  display: none !important;
}

.promo-sticky__hit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: none;
  border-radius: 14px 0 0 14px;
  background: var(--ink);
  color: var(--pure);
  box-shadow: -8px 14px 32px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  font: inherit;
  text-align: left;
  overflow: hidden;
}

.promo-sticky__hit:focus-visible {
  outline: 2px solid var(--btn-gold);
  outline-offset: 2px;
}

.promo-sticky__tab {
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 88px;
  padding: 12px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  color: rgba(244, 243, 239, 0.92);
}

.promo-sticky__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 132px;
  padding: 16px 18px 16px 2px;
  white-space: nowrap;
}

.promo-sticky__body strong {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pure);
}

.promo-sticky__body em {
  font-family: var(--sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 243, 239, 0.55);
}

.promo-sticky.is-open {
  transform: translate3d(0, -50%, 0);
}

.promo-sticky--checkmate .promo-sticky__tab {
  flex: 0 0 46px;
  letter-spacing: 0.16em;
}

@media (hover: hover) and (pointer: fine) {
  .promo-sticky:hover {
    transform: translate3d(0, -50%, 0);
  }
}

html.checkmate-open .promo-sticky,
body.cart-drawer-open .promo-sticky {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(110%, -50%, 0);
}

@media (max-width: 899px) {
  .promo-sticky {
    top: 50%;
    bottom: auto;
    transform: translate3d(calc(100% - 42px), -50%, 0);
  }

  .promo-sticky.is-open {
    transform: translate3d(0, -50%, 0);
  }

  @media (hover: hover) and (pointer: fine) {
    .promo-sticky:hover {
      transform: translate3d(0, -50%, 0);
    }
  }

  html.checkmate-open .promo-sticky,
  body.cart-drawer-open .promo-sticky {
    transform: translate3d(110%, -50%, 0);
  }

  .promo-sticky__tab {
    min-height: 76px;
  }

  .promo-sticky__body {
    min-width: 124px;
    padding: 14px 16px 14px 2px;
  }
}

/* ------------------------------------------------------------------
   CHECKMATE DISCOUNT POPUP
   ------------------------------------------------------------------ */

.checkmate-popup {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

/* Curtain while desktop zoom drops — covers the page so rescale isn't visible */
.checkmate-popup.is-settling {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.checkmate-popup.is-settling .checkmate-popup__inner {
  opacity: 0;
}

.checkmate-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Keep closed popup out of the way while editing page photos. */
body.dev-editing .checkmate-popup:not(.is-open):not(.is-settling) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Open offer popup stays visible in Edit so the left photo can be swapped. */
body.dev-editing .checkmate-popup.is-open,
body.dev-editing .checkmate-popup.is-settling {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  /* Stay above page/hero content (edit mode previously dropped this to 240) */
  z-index: 500;
}

body.dev-editing.checkmate-lock {
  overflow: auto;
}

.checkmate-popup.is-open .checkmate-popup__inner {
  opacity: 1;
  transition: opacity 0.32s ease;
}

.checkmate-confetti {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.checkmate-confetti__canvas {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.checkmate-popup::before {
  content: none;
}

.checkmate-popup__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  padding: 0;
  opacity: 1;
  background-color: #fff;
  isolation: isolate;
}

.checkmate-popup__inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: min(28%, 200px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 55%,
    rgba(255, 255, 255, 0.55) 100%
  );
}

.checkmate-popup__dismiss {
  position: absolute;
  top: clamp(14px, 2.5vw, 24px);
  right: clamp(14px, 2.5vw, 24px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  max-width: none;
}

.checkmate-popup__decline {
  display: block;
  width: fit-content;
  max-width: min(92vw, 360px);
  margin: 14px auto 0;
  border: 0;
  background: transparent;
  color: rgba(13, 14, 16, 0.45);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  padding: 8px 10px;
  white-space: normal;
  transition: color 0.2s ease;
}

.checkmate-popup__decline[hidden] {
  display: none !important;
}

.checkmate-popup__decline:hover,
.checkmate-popup__decline:focus-visible {
  color: rgba(13, 14, 16, 0.78);
  outline: none;
}

.checkmate-popup__close {
  position: static;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(13, 14, 16, 0.06);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.checkmate-popup__close:hover,
.checkmate-popup__close:focus-visible {
  background: rgba(13, 14, 16, 0.12);
  outline: none;
}

.checkmate-popup__brand {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  margin: clamp(22px, 4vw, 32px) 56px clamp(8px, 1.5vh, 14px);
  color: var(--ink);
}

@media (max-width: 899px) {
  .checkmate-popup__brand {
    display: none;
  }

  .checkmate-popup__inner::after {
    display: none;
  }
}

.checkmate-popup__main {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 clamp(20px, 4vw, 40px) clamp(8px, 1.5vh, 16px);
}

.checkmate-popup__footer {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  height: clamp(170px, 32vh, 280px);
  margin-top: auto;
  overflow: hidden;
  background: transparent;
}

.checkmate-popup__footer[hidden] {
  display: none !important;
}

.checkmate-popup__footer-img,
.checkmate-popup__footer .seo-upload-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Full-bleed width; prefer top of the photo (crop from the bottom) */
  object-position: center 10%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.checkmate-popup__footer-input {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  font-size: 0;
}

body.dev-mode.dev-editing .checkmate-popup__footer-input {
  display: block;
}

body.dev-mode.dev-editing .checkmate-popup__footer[data-upload] {
  cursor: pointer;
  outline: 2px dashed rgba(37, 99, 235, 0.55);
  outline-offset: -3px;
}

body.dev-mode.dev-editing .checkmate-popup__footer .upload-hint {
  z-index: 5;
  pointer-events: none;
}

.checkmate-popup__panel {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.checkmate-popup__panel.is-active {
  display: flex;
}

.checkmate-popup__stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  gap: 0;
  min-height: 0;
}

.checkmate-popup__stage[hidden] {
  display: none !important;
}

.checkmate-popup__intro-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: clamp(12px, 2vh, 20px);
}

.checkmate-popup__intro-copy[hidden] {
  display: none !important;
}

.checkmate-popup__intro-copy .checkmate-popup__headline {
  margin-bottom: 10px;
}

.checkmate-popup__intro-copy .checkmate-popup__sub {
  margin-bottom: 0;
  max-width: 22em;
}

.checkmate-popup[data-cm-mode="intro"] .checkmate-popup__board-wrap,
.checkmate-popup[data-cm-mode="play"] .checkmate-popup__board-wrap {
  width: 100%;
  box-shadow:
    0 18px 40px rgba(13, 14, 16, 0.16),
    0 2px 0 rgba(13, 14, 16, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.checkmate-popup__board-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: min(86vw, 360px, calc(100dvh - 420px));
}

.checkmate-popup__board-row[hidden] {
  display: none !important;
}

.checkmate-popup__turn-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 100%;
}

.checkmate-popup__turn-bar-track {
  position: relative;
  flex: 1;
  height: 10px;
  min-width: 0;
  border-radius: 999px;
  background: rgba(13, 14, 16, 0.08);
  border: 1px solid rgba(13, 14, 16, 0.08);
  overflow: hidden;
}

.checkmate-popup__turn-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1a1814 0%, #3a3530 55%, #0d0e10 100%);
  box-shadow: none;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.checkmate-popup__turn-bar-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(13, 14, 16, 0.55);
  line-height: 1;
}

.checkmate-popup__play-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: min(86vw, 360px, calc(100dvh - 420px));
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.48);
}

.checkmate-popup__play-meta[hidden],
.checkmate-popup__prize[hidden] {
  display: none !important;
}

.checkmate-popup__prize {
  width: min(92vw, 420px);
  text-align: left;
}

.checkmate-popup__prize--revealed {
  width: min(100%, 360px);
  margin: 0 auto 28px;
  text-align: left;
}

.checkmate-popup__prize-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.5);
}

.checkmate-popup__prize-code {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 14px 18px;
  border: 1px solid rgba(13, 14, 16, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8),
    0 10px 28px rgba(13, 14, 16, 0.08);
  overflow: hidden;
}

.checkmate-popup__panel--claim {
  max-width: 420px;
  justify-content: center;
  padding-bottom: clamp(48px, 14vh, 160px);
}

.checkmate-popup__panel--win {
  max-width: 400px;
  justify-content: center;
  padding-bottom: clamp(48px, 14vh, 160px);
}

.checkmate-popup__panel--win.is-entering,
.checkmate-popup__panel--claim.is-entering,
.checkmate-popup__panel[data-cm-panel="fail"].is-entering {
  animation: cm-panel-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.checkmate-popup__win {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.checkmate-popup__win-badge {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--serif);
  font-size: clamp(44px, 11vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--ink);
  line-height: 0.95;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.checkmate-popup__win-sub {
  margin: 0 0 28px;
  max-width: 22em;
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(13, 14, 16, 0.58);
}

.checkmate-popup__win-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 340px);
  margin: 0;
}

.checkmate-popup__win-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 0 8px 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(13, 14, 16, 0.14);
  background: #fff;
  box-shadow: 0 6px 0 rgba(13, 14, 16, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.checkmate-popup__win-field:focus-within {
  border-color: rgba(13, 14, 16, 0.4);
  background: #fff;
  box-shadow: 0 6px 0 rgba(13, 14, 16, 0.12);
}

.checkmate-popup__win-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  color: rgba(13, 14, 16, 0.45);
}

.checkmate-popup__win-field input[type="email"] {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 14px 0 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  outline: none;
}

.checkmate-popup__win-field input[type="email"]::placeholder {
  color: rgba(13, 14, 16, 0.38);
}

.checkmate-popup__win-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 0 #000;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.checkmate-popup__win-cta:hover,
.checkmate-popup__win-cta:focus-visible {
  background: #1a1814;
  outline: none;
  transform: translateY(2px);
  box-shadow: 0 4px 0 #000;
}

.checkmate-popup__win-cta:disabled {
  opacity: 0.5;
  cursor: wait;
}

@keyframes cm-panel-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cm-claim-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.checkmate-popup__panel--claim .checkmate-popup__headline {
  margin-bottom: 12px;
}

.checkmate-popup__panel--claim .checkmate-popup__sub {
  margin-bottom: 28px;
  max-width: 22em;
}

.checkmate-popup__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(100%, 360px);
  margin: 0 auto;
}

.checkmate-popup__form--pill {
  gap: 16px;
}

.checkmate-popup__field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(13, 14, 16, 0.14);
  background: #fff;
  box-shadow: 0 6px 0 rgba(13, 14, 16, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.checkmate-popup__field:focus-within {
  border-color: rgba(13, 14, 16, 0.4);
  box-shadow: 0 6px 0 rgba(13, 14, 16, 0.12);
  background: #fff;
}

.checkmate-popup__field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  color: rgba(13, 14, 16, 0.45);
  opacity: 0.9;
}

.checkmate-popup__field input[type="email"] {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 0 18px 0 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  outline: none;
}

.checkmate-popup__field input[type="email"]::placeholder {
  color: rgba(13, 14, 16, 0.38);
}

.checkmate-popup__btn--pill {
  border-radius: 999px;
  min-height: 54px;
  width: 100%;
  letter-spacing: 0.08em;
  box-shadow: 0 6px 0 #000;
}

.checkmate-popup__form--pill .checkmate-popup__btn--light:hover,
.checkmate-popup__form--pill .checkmate-popup__btn--light:focus-visible {
  background: #1a1814;
  color: #fff;
  border-color: transparent;
}

.checkmate-popup__error {
  color: #b54848;
  font-size: 13px;
  min-height: 1.2em;
  margin: 0;
  text-align: left;
  padding: 0 8px;
}

.checkmate-popup__code {
  font-family: var(--sans);
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
}

.checkmate-popup__prize-code .checkmate-popup__code {
  color: var(--ink);
  font-weight: 700;
}

.checkmate-popup__copy {
  border: none;
  background: transparent;
  color: rgba(13, 14, 16, 0.5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px;
}

.checkmate-popup__copy:hover {
  color: var(--ink);
}

.checkmate-popup__copy--on-gold {
  color: rgba(13, 14, 16, 0.55);
  font-weight: 700;
  flex-shrink: 0;
}

.checkmate-popup__copy--on-gold:hover {
  color: var(--ink);
}

.checkmate-popup__side-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.48);
}

.checkmate-popup__side-tag[hidden] {
  display: none !important;
}

.checkmate-popup__side-tag--you {
  color: var(--ink);
}

.checkmate-popup__swatch {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(13, 14, 16, 0.2);
  flex-shrink: 0;
}

.checkmate-popup__swatch--white {
  background: #f4f3ef;
  border-color: rgba(13, 14, 16, 0.2);
}

.checkmate-popup__swatch--black {
  background: #1a1c20;
  border-color: rgba(13, 14, 16, 0.35);
}

.checkmate-popup__headline {
  font-family: var(--serif);
  font-size: clamp(34px, 6.5vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--ink);
}

/* Must follow base .headline — same specificity was forcing soft serif on the offer */
.checkmate-popup__headline.checkmate-popup__headline--offer {
  font-family: var(--sans);
  font-size: clamp(26px, 5.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-shadow: none;
  max-width: 15em;
  margin-bottom: 10px;
  line-height: 1.05;
}

.checkmate-popup__title-line {
  display: block;
}

.checkmate-popup__offer-note {
  margin: 2px 0 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.45);
}

.checkmate-popup [data-cm-offer],
.promo-sticky--checkmate [data-cm-offer] {
  white-space: nowrap;
  text-transform: none;
}

.checkmate-popup [data-cm-offer] .price-currency,
.promo-sticky--checkmate [data-cm-offer] .price-currency,
.save-badge .price-currency {
  text-transform: none;
}

.checkmate-popup__sub {
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 400;
  color: rgba(13, 14, 16, 0.58);
  max-width: 28em;
  margin-bottom: clamp(20px, 3vh, 32px);
  line-height: 1.55;
}

.checkmate-popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.checkmate-popup__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.checkmate-popup__btn--light {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 0 #000;
}

.checkmate-popup__btn--light:hover,
.checkmate-popup__btn--light:focus-visible {
  background: #1a1814;
  color: #fff;
  border-color: transparent;
  outline: none;
  transform: translateY(2px);
  box-shadow: 0 4px 0 #000;
}

.checkmate-popup__btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(13, 14, 16, 0.18);
  box-shadow: none;
}

.checkmate-popup__btn--ghost:hover,
.checkmate-popup__btn--ghost:focus-visible {
  border-color: rgba(13, 14, 16, 0.4);
  outline: none;
}

.checkmate-popup__btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.checkmate-popup__turns strong {
  color: var(--ink);
  font-weight: 700;
}

.checkmate-popup__board-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  /* Padding box keeps a true square even when flex min-size fights aspect-ratio */
  height: 0;
  padding-bottom: 100%;
  margin: 0 auto;
  background: #2f333a;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.36s ease, transform 0.36s ease;
}

.checkmate-popup__board-wrap.is-ready {
  opacity: 1;
  transform: none;
}

/* Fill the square wrap so chessboard.js measures full width */
.checkmate-popup__board-wrap #checkmate-board {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.checkmate-popup__board-wrap #checkmate-board .chessboard-63f37 {
  width: 100%;
  height: 100%;
}

.checkmate-popup__board-wrap #checkmate-board .board-b72b1 {
  display: block;
  margin: 0 auto;
  box-sizing: content-box !important;
}

@media (prefers-reduced-motion: reduce) {
  .checkmate-popup__board-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .checkmate-popup__panel--win.is-entering,
  .checkmate-popup__panel--claim.is-entering,
  .checkmate-popup__panel[data-cm-panel="fail"].is-entering {
    animation: none;
  }
}

/* Override global `img { touch-action: manipulation }` - pieces must not scroll the page */
.checkmate-popup__board-wrap .square-55d63,
.checkmate-popup__board-wrap .piece-417db,
.checkmate-popup__board-wrap img {
  touch-action: none !important;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Dragged piece is appended to body by chessboard.js */
body > img.piece-417db {
  z-index: 1000 !important;
  touch-action: none !important;
  pointer-events: none;
}

.checkmate-popup__toast {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 10px;
  z-index: 8;
  transform: translate(-50%, 8px);
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 0 #000;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.checkmate-popup__toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.checkmate-popup__board-wrap .board-b72b1 {
  border: 1px solid rgba(13, 14, 16, 0.1);
  box-shadow: none;
}

.checkmate-popup__board-wrap .white-1e1d7 {
  background: #f4f3ef;
  color: #5c5852;
}

.checkmate-popup__board-wrap .black-3c85d {
  background: #2f333a;
  color: #c8c4bc;
}

.checkmate-popup__board-wrap .highlight1-32417 {
  box-shadow: inset 0 0 0 3px rgba(13, 14, 16, 0.45);
}

.checkmate-popup__board-wrap .highlight2-9c5d2 {
  box-shadow: inset 0 0 0 3px rgba(13, 14, 16, 0.28);
}

/* Guided piece target — soft brick red (readable, not neon) */
.checkmate-popup__board-wrap .cm-hint-pawn,
.checkmate-popup__board-wrap .cm-hint-bishop,
.checkmate-popup__board-wrap .cm-hint-rook,
.checkmate-popup__board-wrap .cm-hint-queen {
  box-shadow: inset 0 0 0 2px rgba(176, 82, 82, 0.85) !important;
  outline: 1px solid rgba(176, 82, 82, 0.55);
  outline-offset: -2px;
  animation: cm-hint-pulse 1.35s ease-in-out infinite;
  z-index: 2;
}

/* Bounce the queen piece so the first move is obvious before touch */
.checkmate-popup__board-wrap .cm-hint-queen .piece-417db {
  animation: cm-queen-jump 1.05s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
  transform-origin: center bottom;
  will-change: transform;
  position: relative;
  z-index: 3;
}

@keyframes cm-queen-jump {
  0%,
  100% {
    transform: translateY(0);
  }
  28% {
    transform: translateY(-12px);
  }
  48% {
    transform: translateY(0);
  }
  62% {
    transform: translateY(-5px);
  }
  78% {
    transform: translateY(0);
  }
}

.checkmate-popup__board-wrap .cm-legal-target {
  box-shadow: inset 0 0 0 2px rgba(176, 82, 82, 0.7) !important;
  background-image: radial-gradient(
    circle at center,
    rgba(176, 82, 82, 0.88) 0 18%,
    rgba(176, 82, 82, 0.18) 19% 34%,
    transparent 35%
  ) !important;
}

.checkmate-popup__board-wrap .black-3c85d.cm-legal-target {
  background-image: radial-gradient(
    circle at center,
    rgba(196, 110, 110, 0.95) 0 20%,
    rgba(196, 110, 110, 0.22) 21% 36%,
    transparent 37%
  ) !important;
}

.checkmate-popup__board-wrap .cm-route-square {
  box-shadow: inset 0 0 0 2px rgba(176, 82, 82, 0.35) !important;
  background-image: linear-gradient(
    rgba(176, 82, 82, 0.16),
    rgba(176, 82, 82, 0.16)
  ) !important;
}

@keyframes cm-hint-pulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 2px rgba(176, 82, 82, 0.85), 0 0 0 0 rgba(176, 82, 82, 0);
  }
  50% {
    box-shadow: inset 0 0 0 2px rgba(176, 82, 82, 0.6), 0 0 8px 1px rgba(176, 82, 82, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkmate-popup__board-wrap .cm-hint-queen .piece-417db {
    animation: none;
  }
}

/* chessboard.js parks the drag ghost on <body> ? keep it above the overlay */
body > img.piece-417db {
  position: absolute !important;
  z-index: 300 !important;
  pointer-events: none;
  max-width: none;
  touch-action: none !important;
  -webkit-user-drag: none;
  user-drag: none;
}

.checkmate-popup__hint {
  margin-top: 18px;
  font-size: 14px;
  color: rgba(13, 14, 16, 0.5);
  font-weight: 400;
}

body.checkmate-lock {
  overflow: hidden;
}

/* Hide site chrome while the offer popup is open */
html.checkmate-open .site-header,
html.checkmate-open .site-header--kanva,
html.checkmate-open .announce-bar,
html.checkmate-open .nav-drawer,
body.checkmate-lock .site-header,
body.checkmate-lock .site-header--kanva,
body.checkmate-lock .announce-bar,
html.checkmate-open :is(.home-page, .pdp-page).kanva-home .site-header.site-header--kanva,
body.checkmate-lock :is(.home-page, .pdp-page).kanva-home .site-header.site-header--kanva {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 520px) {
  .checkmate-popup__main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .checkmate-popup__dismiss {
    top: 10px;
    right: 10px;
    gap: 8px;
  }

  .checkmate-popup__decline {
    font-size: 9px;
  }

  .checkmate-popup__close {
    width: 36px;
    height: 36px;
  }

  .checkmate-popup__brand {
    margin-top: 18px;
  }

  .checkmate-popup__play-meta {
    width: min(100%, calc(100dvh - 400px));
  }

  .checkmate-popup__board-row {
    width: min(100%, calc(100dvh - 400px));
    gap: 10px;
  }

  .checkmate-popup__footer {
    height: clamp(168px, 30vh, 240px);
  }

  .checkmate-popup__turn-bar-track {
    height: 8px;
  }
}

@media (max-width: 899px) and (max-height: 700px) {
  .checkmate-popup__footer {
    height: clamp(140px, 26vh, 200px);
  }
}

@media (max-height: 700px) {

  .checkmate-popup__brand {
    margin-top: 14px;
    margin-bottom: 4px;
  }

  .checkmate-popup__intro-copy {
    margin-bottom: 8px;
  }

  .checkmate-popup__headline.checkmate-popup__headline--offer {
    font-size: clamp(28px, 6.5vw, 40px);
  }
}

/* Desktop: full-bleed white fullscreen + centered footer photo with white edge fade */
@media (min-width: 900px) {
  .checkmate-popup {
    align-items: stretch;
    justify-content: stretch;
    background: #fff;
  }

  .checkmate-popup__inner {
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background-color: #fff;
    background-image: url("/assets/images/checkmate-bg.png?v=3");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    box-shadow: none;
  }

  .checkmate-popup__inner::after {
    height: min(38%, 280px);
  }

  .checkmate-confetti {
    width: auto;
    max-width: none;
    left: 0;
    transform: none;
  }

  /* Brand stays above; play chrome is one tight block centered in leftover space */
  .checkmate-popup__brand {
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    margin: 24px 64px 0;
  }

  .checkmate-popup__main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 12px;
  }

  .checkmate-popup__stage {
    flex: 0 0 auto;
    min-height: 0;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
  }

  .checkmate-popup__intro-copy {
    flex-shrink: 0;
    margin-bottom: 12px;
  }

  .checkmate-popup__headline.checkmate-popup__headline--offer {
    font-size: clamp(28px, 3.2vw, 40px);
  }

  /* Board sized to leftover height after chrome */
  .checkmate-popup__play-meta,
  .checkmate-popup__board-row {
    width: min(360px, 42vw, calc(100dvh - 280px));
  }

  .checkmate-popup__decline {
    flex-shrink: 0;
    margin-top: 12px;
  }

  /* Legacy footer slot stays hidden — graphic is the full popup background */
  .checkmate-popup__footer {
    display: none;
    height: 0;
  }

  .checkmate-popup__footer-img,
  .checkmate-popup__footer .seo-upload-img {
    left: 50%;
    right: auto;
    width: min(640px, 52vw);
    max-width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: center center;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.06) 10%,
      rgba(0, 0, 0, 0.22) 20%,
      rgba(0, 0, 0, 0.5) 30%,
      rgba(0, 0, 0, 0.82) 40%,
      #000 48%,
      #000 52%,
      rgba(0, 0, 0, 0.82) 60%,
      rgba(0, 0, 0, 0.5) 70%,
      rgba(0, 0, 0, 0.22) 80%,
      rgba(0, 0, 0, 0.06) 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.06) 10%,
      rgba(0, 0, 0, 0.22) 20%,
      rgba(0, 0, 0, 0.5) 30%,
      rgba(0, 0, 0, 0.82) 40%,
      #000 48%,
      #000 52%,
      rgba(0, 0, 0, 0.82) 60%,
      rgba(0, 0, 0, 0.5) 70%,
      rgba(0, 0, 0, 0.22) 80%,
      rgba(0, 0, 0, 0.06) 90%,
      transparent 100%
    );
  }

  .checkmate-popup__footer::before,
  .checkmate-popup__footer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: max(28vw, 240px);
    z-index: 3;
    pointer-events: none;
  }

  .checkmate-popup__footer::before {
    left: 0;
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.97) 22%,
      rgba(255, 255, 255, 0.78) 42%,
      rgba(255, 255, 255, 0.4) 65%,
      rgba(255, 255, 255, 0.12) 82%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .checkmate-popup__footer::after {
    right: 0;
    background: linear-gradient(
      270deg,
      #fff 0%,
      rgba(255, 255, 255, 0.97) 22%,
      rgba(255, 255, 255, 0.78) 42%,
      rgba(255, 255, 255, 0.4) 65%,
      rgba(255, 255, 255, 0.12) 82%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  body.dev-mode.dev-editing .checkmate-popup__footer-input {
    left: 50%;
    right: auto;
    width: min(640px, 52vw);
    transform: translateX(-50%);
  }
}

/* Short laptop / landscape desktop — top-stack so nothing collides; tighter footer */
@media (min-width: 900px) and (max-height: 860px) {
  .checkmate-popup__brand {
    display: none;
  }

  .checkmate-popup__main {
    justify-content: flex-start;
    padding-top: 8px;
  }

  .checkmate-popup__intro-copy {
    margin-bottom: 8px;
  }

  .checkmate-popup__headline.checkmate-popup__headline--offer {
    font-size: clamp(24px, 2.8vw, 34px);
    margin-bottom: 6px;
  }

  .checkmate-popup__play-meta,
  .checkmate-popup__board-row {
    width: min(320px, 38vw, calc(100dvh - 220px));
  }

  .checkmate-popup__decline {
    margin-top: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .checkmate-popup__footer {
    display: none;
    height: 0;
  }
}

@media (min-width: 900px) and (max-height: 720px) {
  .checkmate-popup__play-meta,
  .checkmate-popup__board-row {
    width: min(280px, 36vw, calc(100dvh - 200px));
  }

  .checkmate-popup__footer {
    display: none;
    height: 0;
  }

  .checkmate-popup__offer-note {
    font-size: 10px;
  }
}

/* ------------------------------------------------------------------
   King Walk puzzle popup (try build) — Checkmate shell + 4×3 board
------------------------------------------------------------------ */
body.king-walk-lock {
  overflow: hidden;
}

.king-walk-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.king-walk-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.king-walk-popup__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  padding: 0;
  background-color: #fff;
  background-image: url("/assets/images/checkmate-bg.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  isolation: isolate;
}

.king-walk-popup__inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: min(42%, 320px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 42%,
    rgba(255, 255, 255, 0.82) 72%,
    #ffffff 100%
  );
}

.king-walk-popup__decor {
  display: none;
}

@media (max-width: 899px) {
  .king-walk-popup[data-kw-mode="play"] .king-walk-popup__decor {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(10px, 4vw, 18px);
    padding: 0 clamp(12px, 4vw, 24px) clamp(10px, 2vh, 18px);
    pointer-events: none;
  }

  .king-walk-popup__inner::after {
    height: min(28%, 200px);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 55%,
      rgba(255, 255, 255, 0.55) 100%
    );
  }

  .king-walk-popup__polaroid {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: block;
    width: clamp(108px, 30vw, 148px);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .king-walk-popup__polaroid .seo-upload-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
  }

  .king-walk-popup__polaroid:not(.has-upload) .seo-upload-img {
    mix-blend-mode: screen;
  }

  body.dev-editing .king-walk-popup__polaroid[data-upload] {
    pointer-events: auto;
    cursor: pointer;
  }

  .king-walk-popup__main {
    padding-bottom: clamp(120px, 22vh, 180px);
  }
}

@media (min-width: 900px) {
  .king-walk-popup[data-kw-mode="play"] .king-walk-popup__decor {
    display: block;
  }

  .king-walk-popup__decor {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
  }

  .king-walk-popup__polaroid {
    position: absolute;
    display: block;
    width: clamp(150px, 13vw, 210px);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .king-walk-popup__polaroid .seo-upload-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* Baked-in JPG letterbox — hide until a clean upload replaces it */
  .king-walk-popup__polaroid:not(.has-upload) .seo-upload-img {
    mix-blend-mode: screen;
  }

  body.dev-editing .king-walk-popup__polaroid[data-upload] {
    pointer-events: auto;
    cursor: pointer;
    z-index: 6;
  }

  body.dev-editing .king-walk-popup__polaroid[data-upload] .upload-hint {
    pointer-events: auto;
    z-index: 7;
  }

  .king-walk-popup__polaroid--tl {
    top: clamp(52px, 7vh, 92px);
    left: clamp(16px, 2.5vw, 36px);
  }

  .king-walk-popup__polaroid--br {
    right: clamp(16px, 2.5vw, 36px);
    bottom: clamp(20px, 3.5vh, 44px);
  }
}

.king-walk-popup__close {
  position: absolute;
  top: clamp(14px, 2.5vw, 24px);
  right: clamp(14px, 2.5vw, 24px);
  z-index: 5;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(13, 14, 16, 0.06);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.king-walk-popup__close:hover {
  background: rgba(13, 14, 16, 0.12);
}

.king-walk-popup__brand {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  margin: clamp(22px, 4vw, 32px) 56px clamp(8px, 1.5vh, 14px);
  color: var(--ink);
}

@media (max-width: 899px) {
  .king-walk-popup__brand {
    display: none;
  }
}

.king-walk-popup__main {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 clamp(20px, 4vw, 40px) clamp(16px, 3vh, 28px);
}

.king-walk-popup__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 420px);
  gap: 0;
}

.king-walk-popup__stage[hidden] {
  display: none !important;
}

.king-walk-popup__intro-copy {
  text-align: center;
  margin-bottom: 14px;
}

.king-walk-popup__headline {
  font-family: var(--sans);
  font-size: clamp(26px, 5.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--ink);
}

.king-walk-popup__lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(13, 14, 16, 0.58);
  max-width: 32ch;
  margin-inline: auto;
}

.king-walk-popup .checkmate-popup__offer-note {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.42);
}

.king-walk-popup .checkmate-popup__headline.checkmate-popup__headline--offer {
  font-family: var(--sans);
  font-size: clamp(26px, 5.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--ink);
}

.king-walk-popup .checkmate-popup__panel--claim .checkmate-popup__headline {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--ink);
  text-transform: none;
}

/* 4 wide × 4 tall crop of the underlying 8×8 engine board (a5–d8) */
.king-walk-popup__board-wrap {
  position: relative;
  width: min(100%, 360px);
  margin: 0 auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.king-walk-popup__board-crop {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #2f333a;
  border-radius: 2px;
  box-shadow: 0 16px 40px rgba(13, 14, 16, 0.12);
}

.king-walk-popup__board-crop #king-walk-board {
  position: absolute;
  left: 0;
  top: 0;
  width: 200% !important;
  height: auto !important;
}

.king-walk-popup__board-crop #king-walk-board .chessboard-63f37,
.king-walk-popup__board-crop #king-walk-board .board-b72b1 {
  width: 100% !important;
}

.king-walk-popup__board-crop .board-b72b1 {
  border: 1px solid rgba(13, 14, 16, 0.1);
  box-shadow: none;
}

.king-walk-popup__board-crop .square-55d63,
.king-walk-popup__board-crop .piece-417db,
.king-walk-popup__board-crop img {
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
}

.king-walk-popup__board-crop .white-1e1d7 {
  background: #f4f3ef;
  color: #5c5852;
}

.king-walk-popup__board-crop .black-3c85d {
  background: #2f333a;
  color: #c8c4bc;
}

.king-walk-popup__board-crop .kw-target {
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(13, 14, 16, 0.28);
}

  .king-walk-popup__board-crop .kw-target::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.king-walk-popup__board-crop .kw-target--landed {
  box-shadow: inset 0 0 0 3px rgba(176, 82, 82, 0.75);
  animation: kw-target-landed 0.9s ease-in-out infinite;
}

@keyframes kw-target-landed {
  0%,
  100% {
    box-shadow: inset 0 0 0 3px rgba(176, 82, 82, 0.75);
  }
  50% {
    box-shadow: inset 0 0 0 3px rgba(176, 82, 82, 0.45), 0 0 10px rgba(176, 82, 82, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .king-walk-popup__board-crop .kw-target--landed {
    animation: none;
  }
}
.king-walk-popup__board-crop .cm-hint-queen {
  box-shadow: inset 0 0 0 2px rgba(176, 82, 82, 0.85) !important;
  outline: 1px solid rgba(176, 82, 82, 0.55);
  outline-offset: -2px;
  animation: cm-hint-pulse 1.35s ease-in-out infinite;
  z-index: 2;
}

.king-walk-popup__board-crop .cm-hint-queen .piece-417db {
  animation: cm-queen-jump 1.05s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
  transform-origin: center bottom;
  will-change: transform;
  position: relative;
  z-index: 3;
}

.king-walk-popup__board-crop .cm-legal-target {
  box-shadow: inset 0 0 0 2px rgba(176, 82, 82, 0.7) !important;
  background-image: radial-gradient(
    circle at center,
    rgba(176, 82, 82, 0.88) 0 18%,
    rgba(176, 82, 82, 0.18) 19% 34%,
    transparent 35%
  ) !important;
}

.king-walk-popup__board-crop .black-3c85d.cm-legal-target {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42) !important;
  background-image: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.96) 0 18%,
    rgba(255, 255, 255, 0.24) 19% 34%,
    transparent 35%
  ) !important;
}

@media (prefers-reduced-motion: reduce) {
  .king-walk-popup__board-crop .cm-hint-queen .piece-417db {
    animation: none;
  }
}

.king-walk-popup__toast {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 4;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(13, 14, 16, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

.king-walk-popup__toast[hidden] {
  display: none !important;
}

.king-walk-popup__tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  width: 100%;
}

.king-walk-popup__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: min(100%, 220px);
  padding: 0 22px;
  border: 1px solid rgba(13, 14, 16, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.king-walk-popup__btn--light {
  background: #0b0c0e;
  border-color: #0b0c0e;
  color: #fff;
}

.king-walk-popup__decline {
  display: block;
  width: fit-content;
  max-width: min(92vw, 360px);
  margin: 0 auto;
  border: 0;
  background: transparent;
  color: rgba(13, 14, 16, 0.45);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  padding: 8px 10px;
}

.king-walk-popup__decline:hover {
  color: rgba(13, 14, 16, 0.78);
}

.king-walk-popup__panel {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: min(100%, 420px);
}

.king-walk-popup__panel.is-active {
  display: flex;
}

.king-walk-popup__panel-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2rem);
  color: var(--ink);
}

.king-walk-popup__panel-sub {
  margin: 0 0 6px;
  color: rgba(13, 14, 16, 0.55);
}

@media (min-width: 900px) {
  .king-walk-popup__brand {
    margin: 24px 64px 0;
  }

  .king-walk-popup__board-wrap {
    width: min(100%, 400px);
  }
}

/* Dev Checkmate control ? sits above the fullscreen popup */
.checkmate-dev,
.board-dev {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 210;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 8px;
}

.checkmate-dev-toggle,
.board-dev-toggle {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  background: #111;
  color: #f4f3ef;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.checkmate-dev-toggle[aria-pressed="true"],
.board-dev-toggle[aria-pressed="true"] {
  background: #1a3a2a;
  color: #d8f5e4;
}

.checkmate-dev-menu,
.board-dev-menu {
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(12, 13, 16, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

.checkmate-dev-menu[hidden],
.board-dev-menu[hidden] {
  display: none !important;
}

.checkmate-dev-menu__item,
.board-dev-menu__item {
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  background: transparent;
  color: #f4f3ef;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}

.checkmate-dev-menu__item:hover,
.checkmate-dev-menu__item:focus-visible,
.board-dev-menu__item:hover,
.board-dev-menu__item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.checkmate-dev-menu__item--close,
.board-dev-menu__item--close {
  color: rgba(244, 243, 239, 0.55);
}

.checkmate-dev[data-cm-open="false"] .checkmate-dev-menu__item--close,
.board-dev[data-board-open="false"] .board-dev-menu__item--close {
  display: none;
}

/* Dev order-confirm stage control */
.confirm-dev {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 210;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px;
}

.confirm-dev-toggle {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  background: #111;
  color: #f4f3ef;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.confirm-dev-toggle[aria-pressed="true"] {
  background: #1a2a3a;
  color: #d8e8f5;
}

.confirm-dev-menu {
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(12, 13, 16, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

.confirm-dev-menu[hidden] {
  display: none !important;
}

.confirm-dev-menu__item {
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  background: transparent;
  color: #f4f3ef;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}

.confirm-dev-menu__item:hover,
.confirm-dev-menu__item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.confirm-dev-menu__item.is-active {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- SEO / editorial pages ---------- */

.seo-page .utility-panel--wide {
  max-width: 1100px;
}

.seo-page .utility-panel--faq {
  max-width: 760px;
}

.seo-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 8px 0 36px;
}

.seo-stat {
  text-align: center;
  padding: 22px 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper-soft);
}

.seo-stat strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}

.seo-stat span {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.reviews-grid .review-card {
  width: auto;
  min-height: 100%;
}

.review-card--text .review-body {
  padding: 20px 18px 22px;
}

.review-card--text .review-quote {
  font-size: 15px;
  line-height: 1.6;
}

.review-meta {
  margin-top: auto;
  padding-top: 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.seo-prose {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.seo-prose h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.seo-prose p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 300;
  max-width: 42rem;
}

.seo-prose p + p {
  margin-top: 14px;
}

.seo-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.seo-spec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: 42rem;
}

.seo-spec-list li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 300;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}

.seo-spec-list strong {
  color: var(--ink);
  font-weight: 500;
}

.seo-keywords {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
  counter-reset: seo-kw;
}

.seo-keywords li {
  break-inside: avoid;
  position: relative;
  padding: 8px 0 8px 2.4em;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 300;
  counter-increment: seo-kw;
}

.seo-keywords li::before {
  content: counter(seo-kw);
  position: absolute;
  left: 0;
  top: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.45;
  font-variant-numeric: tabular-nums;
}

.seo-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  margin: 12px 0;
}

.seo-split .ph {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
}

.seo-split--flip .seo-split-copy {
  order: 2;
}

.seo-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}

.seo-feature {
  padding: 24px 22px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper);
}

.seo-feature h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 10px;
}

.seo-feature p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
}

.seo-close {
  margin-top: 48px;
  padding: clamp(40px, 7vw, 64px) clamp(24px, 4vw, 40px);
  border-radius: 16px;
  background: var(--obsidian);
  color: var(--white);
  text-align: center;
}

.seo-close h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.seo-close p {
  color: var(--muted-light);
  font-size: 15px;
  line-height: 1.65;
  max-width: 32rem;
  margin: 0 auto 24px;
}

.seo-close .btn-dark {
  background: var(--white);
  color: var(--ink);
}

.seo-close .btn-dark:hover {
  background: #fff;
}

.seo-page .faq-card {
  margin: 0;
  max-width: none;
}

.seo-page .utility-hero .rating-pill {
  margin: 0 auto 18px;
}

/* ---------- Reviews page - same cards as home / product ---------- */

.reviews-page .reviews-hero {
  max-width: 720px;
  padding-bottom: clamp(36px, 6vh, 56px);
}

.reviews-page .reviews-score {
  margin-top: 22px;
}

.reviews-page .reviews-body {
  padding: 0 0 clamp(70px, 12vh, 140px);
}

.reviews-page .reviews-featured {
  max-width: 560px;
  margin: 0 auto clamp(28px, 5vh, 48px);
}

.reviews-page .reviews-recommend-wrap {
  margin-top: 0;
}

.reviews-page .review-rail-head {
  margin-top: 0;
}

.reviews-page .reviews-page-rail {
  margin-bottom: clamp(48px, 8vh, 80px);
}

.reviews-page .reviews-action {
  max-width: 1200px;
  margin: 0 auto clamp(12px, 2vh, 24px);
  padding: 0 var(--gutter);
}

.reviews-page .reviews-action-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 18px;
}

.reviews-page .reviews-action-head h2 {
  font-family: var(--sans);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.reviews-page .reviews-ugc-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.reviews-page .reviews-ugc-grid .ugc-slide {
  margin: 0;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  border: none;
  overflow: hidden;
}

.reviews-page .reviews-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.reviews-page .reviews-grid .review-card {
  width: 100%;
  min-width: 0;
}

.reviews-page .reviews-close {
  margin: clamp(56px, 10vh, 96px) auto 0;
  max-width: 1200px;
  padding: clamp(56px, 10vh, 96px) var(--gutter);
  background: var(--obsidian);
  color: var(--white);
  text-align: center;
}

.reviews-page .reviews-close h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.reviews-page .reviews-close p {
  color: var(--muted-light);
  font-size: 15px;
  line-height: 1.65;
  max-width: 28rem;
  margin: 0 auto 28px;
}

.reviews-page .reviews-close .btn-dark {
  background: var(--pure);
  color: var(--ink);
}

.reviews-page .reviews-close .btn-dark:hover {
  background: #fff;
}

.reviews-page .seo-seen-with {
  max-width: 1200px;
  margin: clamp(40px, 7vh, 72px) auto 0;
  padding: clamp(28px, 4vh, 40px) var(--gutter) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.reviews-page .seo-seen-with h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 0.65rem;
}

.reviews-page .seo-seen-with p {
  max-width: 40rem;
  margin: 0;
  padding-right: 56px; /* clear promo sticky tab on narrow viewports */
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

.reviews-page .seo-seen-with ul {
  margin-top: 1.15rem;
  gap: 0.65rem 1.5rem;
}

.reviews-page .seo-seen-with a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.reviews-page .seo-seen-with a:hover {
  color: var(--muted);
}

.reviews-page .utility-links {
  max-width: 1200px;
  margin: clamp(28px, 5vh, 44px) auto 0;
  padding: 0 var(--gutter);
}

@media (max-width: 900px) {
  .reviews-page .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviews-page .reviews-ugc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .reviews-page .reviews-grid {
    grid-template-columns: 1fr;
  }

  .reviews-page .reviews-ugc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviews-page .reviews-featured {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
  }
}

@media (max-width: 900px) {
  .seo-stats,
  .seo-features {
    grid-template-columns: 1fr;
  }

  .seo-split {
    grid-template-columns: 1fr;
  }

  .seo-split--flip .seo-split-copy {
    order: 0;
  }

  .seo-keywords {
    columns: 1;
  }
}

/* ---------- cart drawer ---------- */

.icon-btn[data-cart-link] {
  position: relative;
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--ink);
  color: var(--pure);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

body.cart-drawer-open {
  overflow: hidden;
}

body.cart-drawer-open .sticky-cart {
  visibility: hidden !important;
  pointer-events: none !important;
}

.cart-drawer-root {
  --cart-soft: #eef5ef;
  --cart-soft-ink: #2f5d3a;
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.cart-drawer-root.is-open {
  pointer-events: auto;
}

.cart-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(13, 14, 16, 0.48);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.cart-drawer-root.is-open .cart-drawer-backdrop {
  opacity: 1;
}

.cart-drawer {
  position: absolute;
  left: 50%;
  bottom: 0;
  top: auto;
  width: min(100%, 560px);
  height: min(88dvh, 900px);
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 48px rgba(13, 14, 16, 0.18);
  transform: translate(-50%, 108%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cart-drawer-root.is-open .cart-drawer {
  transform: translate(-50%, 0);
}

@media (min-width: 900px) {
  .cart-drawer-backdrop {
    background: rgba(13, 14, 16, 0.28);
  }

  .cart-drawer {
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    width: min(520px, 48vw);
    height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: -22px 0 56px rgba(13, 14, 16, 0.16);
    transform: translateX(104%);
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cart-drawer-root.is-open .cart-drawer {
    transform: translateX(0);
    opacity: 1;
  }

  .cart-drawer-grab {
    display: none;
  }

  .cart-drawer-shell {
    padding-top: 10px;
    padding-bottom: 32px;
  }

  .cart-care-info {
    align-items: center;
  }

  .cart-care-info-panel {
    margin-bottom: 0;
  }
}

.cart-drawer-grab {
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
  flex-shrink: 0;
  touch-action: none;
  cursor: grab;
}

.cart-drawer-grab span {
  display: block;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(13, 14, 16, 0.18);
}

.cart-drawer-shell {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0 clamp(18px, 4vw, 28px) 28px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cart-drawer-shell::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.cart-drawer,
.cart-drawer-root {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cart-drawer::-webkit-scrollbar,
.cart-drawer-root::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.cart-reward {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0;
  padding: 10px 4px 18px;
  background: #fff;
  border-bottom: 1px solid rgba(13, 14, 16, 0.1);
  box-shadow: 0 10px 18px -14px rgba(13, 14, 16, 0.35);
  overflow: visible;
  touch-action: none;
}

.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 16px;
  background: #fff;
}

.cart-drawer-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.cart-drawer-count {
  font-family: var(--serif);
  font-size: 0.72em;
  font-weight: 400;
  color: var(--ink);
}

.cart-reward-top {
  position: relative;
  margin: 0 0 14px;
  min-height: 28px;
}

.cart-drawer-close {
  position: absolute;
  top: 0;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  z-index: 2;
}

.cart-drawer-close svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.cart-drawer-close:hover {
  background: transparent;
  border: none;
  color: var(--ink);
  opacity: 0.55;
}

.cart-reward-copy {
  margin: 0;
  padding: 4px 34px 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.5;
}

.cart-reward-copy .cart-reward-flag,
.cart-reward-copy .locale-flag,
.cart-reward-copy .locale-flag-img {
  display: inline-block;
  width: 1.15em;
  height: 0.85em;
  margin: 0 0.28em;
  vertical-align: -0.08em;
  object-fit: cover;
  border-radius: 2px;
  line-height: 1;
  font-size: 1.15em;
}

.cart-reward-track {
  position: relative;
  height: 8px;
  margin: 18px 18px 14px;
  border-radius: 999px;
  background: rgba(13, 14, 16, 0.08);
  overflow: visible;
}

.cart-reward-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--btn-gold-lo), var(--btn-gold), var(--btn-gold-hi));
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cart-reward-marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--btn-gold);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s, border-color 0.25s;
  box-shadow: 0 1px 6px rgba(224, 176, 54, 0.4);
  z-index: 2;
}

.cart-reward-marker[hidden] {
  display: none;
}

.cart-reward-marker.is-unlocked {
  background: var(--btn-gold-lo);
  border-color: #fff;
}

.cart-reward-dot {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(13, 14, 16, 0.14);
  background: #fff;
  color: rgba(13, 14, 16, 0.4);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.cart-reward-dot--ship {
  left: 52%;
}

.cart-reward-dot--ship.is-passed,
.cart-reward-dot--ship.is-unlocked {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(246, 204, 58, 0.35);
}

.cart-reward-dot--end {
  left: 100%;
}

.cart-reward-dot--end.is-unlocked {
  background: var(--btn-gold);
  border-color: var(--btn-gold);
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(246, 204, 58, 0.28);
}

.cart-reward-dot svg {
  width: 13px;
  height: 13px;
}

.cart-drawer-filled {
  padding: 0 0 28px;
}

.cart-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 0 40px;
}

.cart-drawer-empty[hidden],
.cart-drawer-filled[hidden],
.cart-drawer-discount[hidden],
.cart-drawer-auto[hidden] {
  display: none;
}

.cart-drawer-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.cart-drawer-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--pure);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 0;
}

.cart-drawer-shop:hover {
  background: #1a1b1e;
  color: var(--pure);
}

.cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 18px;
  margin-bottom: 0;
  border-bottom: 0;
}

.cart-drawer-lines {
  margin-bottom: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13, 14, 16, 0.08);
}

.cart-upgrades {
  margin: 4px 0 14px;
  padding: 4px 0 4px;
}

.cart-upgrades-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.cart-upgrades-title {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.cart-upgrades-sub {
  display: none;
}

.cart-upgrades-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cart-upgrades-rail::-webkit-scrollbar {
  display: none;
}

.cart-upgrade-card {
  position: relative;
  flex: 0 0 min(100%, 320px);
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(13, 14, 16, 0.1);
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.cart-upgrade-card.is-added {
  border-color: rgba(13, 14, 16, 0.2);
  background: #fafafa;
}

.cart-upgrade-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #ecebe6 center / cover no-repeat;
}

.cart-upgrade-thumb--board {
  background-image: url("../images/uploads/sticky-cart.webp");
}

.cart-upgrade-thumb--markers {
  background: linear-gradient(145deg, #f4f1ea, #e7e2d8);
}

.cart-upgrade-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-right: 2px;
}

.cart-upgrade-name {
  display: block;
  padding-right: 58px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
}

.cart-upgrade-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cart-upgrade-price {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--sans);
  min-width: 0;
}

.cart-upgrade-price .price-compare {
  font-size: 11px;
  color: rgba(13, 14, 16, 0.4);
  text-decoration: line-through;
}

.cart-upgrade-now {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.cart-upgrade-save {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  padding: 5px 9px 4px;
  border-radius: 0 11px 0 8px;
  background: #c0392b;
  color: #fff;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.cart-upgrade-add {
  flex: 0 0 auto;
  margin: 0;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(13, 14, 16, 0.12);
}

.cart-upgrade-card.is-added .cart-upgrade-add {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(13, 14, 16, 0.18);
  box-shadow: none;
}

.cart-upgrade-add:hover {
  opacity: 0.92;
}

/* Compact protection toggle */
.cart-protect {
  margin: 0 0 14px;
}

.cart-protect-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(13, 14, 16, 0.1);
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}

.cart-protect-row.is-on,
.cart-protect-row:has(input:checked) {
  border-color: rgba(13, 14, 16, 0.2);
  background: #fafafa;
  box-shadow: none;
}

.cart-protect-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.cart-protect-switch {
  width: 42px;
  height: 26px;
  border-radius: 999px;
  background: rgba(13, 14, 16, 0.14);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.cart-protect-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(13, 14, 16, 0.22);
  transition: left 0.2s ease, right 0.2s ease;
}

.cart-protect-row.is-on .cart-protect-switch,
.cart-protect-row:has(input:checked) .cart-protect-switch {
  background: var(--ink);
}

.cart-protect-row.is-on .cart-protect-switch::after,
.cart-protect-row:has(input:checked) .cart-protect-switch::after {
  left: 19px;
  transform: none;
}

.cart-protect-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(13, 14, 16, 0.05);
  color: var(--ink);
}

.cart-protect-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.cart-protect-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.cart-protect-price {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.cart-line-media {
  display: block;
  width: 88px;
  height: 88px;
  overflow: hidden;
  background: #f3f2ee;
}

.cart-line-thumb {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f3f2ee;
  background-image: url("../images/uploads/sticky-cart.webp");
  background-size: cover;
  background-position: center;
}

.cart-line-media--protection {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-line-thumb--protection {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: none;
  background:
    linear-gradient(160deg, rgba(246, 204, 58, 0.2), rgba(243, 242, 238, 0.95));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(246, 204, 58, 0.28);
}

.cart-line--protection .cart-care-what {
  margin-top: 8px;
}

.cart-line-thumb--kit {
  background-image: none;
  background: #f3f2ee;
  border: 0;
  box-shadow: none;
}

.cart-line-thumb--kit.has-upload {
  background-size: cover;
  background-position: center;
}

.cart-line--kit {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 8px 0 2px;
  border-top: 0;
  align-items: center;
}

.cart-line--kit .cart-line-media,
.cart-line--kit .cart-line-media--kit {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f2ee;
}

.cart-line--kit .cart-line-title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cart-kit-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(47, 93, 58, 0.1);
  color: #2f5d3a;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cart-line--kit .cart-line-meta {
  display: none;
}

.cart-line--kit .cart-line-body {
  align-items: center;
}

.cart-line-price-free {
  color: #2f5d3a;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}

.cart-kit-upload-seed {
  position: fixed;
  width: 72px;
  height: 72px;
  right: 16px;
  bottom: 88px;
  z-index: 60;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(13, 14, 16, 0.18);
  background: linear-gradient(160deg, #f3efe6, #e4dfd4);
}

body:not(.dev-mode) .cart-kit-upload-seed {
  display: none !important;
}

body.dev-mode .cart-kit-upload-seed {
  display: block !important;
}

.cart-line-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cart-line-title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.cart-line-meta {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.cart-line-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.cart-line-price {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cart-line-price .price-compare {
  font-size: 12px;
  font-weight: 500;
}

.cart-line-price-now {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.cart-line-price .price-currency {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: top;
  margin-right: 0.04em;
  transform: translateY(0.12em);
}

.cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(13, 14, 16, 0.14);
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
}

.cart-qty-btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.cart-qty-btn:hover {
  background: rgba(13, 14, 16, 0.04);
}

.cart-qty-value {
  min-width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

.cart-line-remove {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cart-line-remove:hover {
  color: var(--ink);
}

.cart-drawer-totals {
  margin-top: 4px;
  margin-bottom: 18px;
}

.cart-drawer-breakdown {
  margin-bottom: 2px;
}

.cart-drawer-breakdown .cart-drawer-row {
  margin-bottom: 8px;
  font-size: 13px;
  color: rgba(13, 14, 16, 0.72);
}

.cart-drawer-breakdown .cart-drawer-row strong {
  font-weight: 500;
  color: var(--ink);
}

.cart-drawer-subtotal {
  margin-top: 4px;
  margin-bottom: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(13, 14, 16, 0.08);
}

.cart-drawer-subtotal span,
.cart-drawer-subtotal strong {
  font-weight: 600;
  color: var(--ink);
}

.cart-drawer-row--protect strong {
  font-variant-numeric: lining-nums;
}

.cart-drawer-row--gift strong {
  color: var(--cart-soft-ink, #2f5d3a);
}

.cart-drawer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: 14px;
}

.cart-drawer-row strong {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.02em;
}

.cart-drawer-row .price-currency {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: top;
  margin-right: 0.04em;
  transform: translateY(0.12em);
}

.cart-drawer-discount {
  margin-bottom: 4px;
}

.cart-drawer-discount .cart-drawer-row {
  margin-bottom: 0;
}

.cart-drawer-discount strong,
.cart-drawer-shipping strong {
  color: var(--cart-soft-ink);
  font-weight: 600;
}

.cart-drawer-discount span,
.cart-drawer-discount strong {
  color: #c0392b !important;
  font-weight: 600;
}

.cart-drawer-total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(13, 14, 16, 0.1);
}

.cart-drawer-total span,
.cart-drawer-total strong {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
}

.cart-drawer-total .price-currency {
  font-size: 0.55em;
  font-weight: 700;
  vertical-align: top;
  margin-right: 0.04em;
  transform: translateY(0.18em);
}

.cart-drawer-tax {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
}

.cart-drawer-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--pure);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}

.cart-drawer-checkout svg {
  width: 14px;
  height: 14px;
}

.cart-drawer-checkout:hover {
  background: #1a1b1e;
}

.cart-drawer-checkout[disabled] {
  opacity: 0.55;
  cursor: wait;
}

.cart-drawer-auto {
  margin: 12px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.cart-drawer-error {
  margin-top: 10px;
  text-align: center;
}

.cart-drawer-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  margin-top: 18px;
}

.cart-drawer-pay .pay-logo img {
  display: block;
  height: 14px;
  width: auto;
}

.cart-page .cart-fallback {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: min(100% - 2 * var(--gutter), 480px);
  margin: 0 auto;
  padding: 48px 0;
}

.cart-page .cart-fallback p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 560px) {
  .cart-line {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .cart-line-media {
    width: 72px;
    height: 72px;
  }

  .cart-line-title {
    font-size: 16px;
  }
}

/* ---------- cart A/B switcher (Dev Mode) ---------- */

.cart-ab-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(13, 14, 16, 0.05);
}

.cart-ab-switch[hidden] {
  display: none !important;
}

.cart-ab-switch-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cart-ab-switch-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(13, 14, 16, 0.1);
}

.cart-ab-btn {
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.cart-ab-btn.is-on {
  background: var(--ink);
  color: #fff;
}

.cart-drawer-root--ab2 .cart-ab-switch {
  background: rgba(13, 14, 16, 0.05);
}

.cart-drawer-root--ab2 .cart-ab-switch-label {
  color: var(--muted);
}

.cart-drawer-root--ab2 .cart-ab-btn.is-on {
  background: var(--ink);
}

/* ---------- cart variant 2 (layout test, OSLO palette) ---------- */

.cart-drawer-root--ab2 .cart-drawer--ab2 {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

.cart-drawer-root--ab2 .cart-drawer-shell {
  background: var(--paper);
}

.cart-drawer-root--ab2 .cart-drawer-grab {
  padding: 10px 0 8px;
}

.cart-drawer-root--ab2 .cart-drawer-grab span {
  background: rgba(13, 14, 16, 0.18);
}

.cart2-reward {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
  text-align: center;
}

.cart2-reward-copy {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}

.cart-drawer--ab2 .cart-reward-track {
  margin: 4px 10px 8px;
}

.cart2-head {
  margin: 6px 0 16px;
}

.cart2-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  line-height: 1.1;
}

.cart2-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--pure);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.cart2-shop:hover {
  background: #1a1b1e;
  color: var(--pure);
}

.cart-drawer-root--ab2 .cart-drawer-empty {
  color: var(--muted);
  font-family: var(--sans);
}

.cart-drawer-root--ab2 .cart-drawer-lines {
  border-bottom: 0;
  margin-bottom: 8px;
  padding-bottom: 0;
}

.cart2-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  padding: 0 0 18px;
}

.cart2-line-media {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-soft);
  border: 1px solid rgba(13, 14, 16, 0.08);
}

.cart2-line-media .cart-line-thumb {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f3f2ee;
  background-image: url("../images/uploads/sticky-cart.webp");
  background-size: cover;
  background-position: center;
}

.cart2-line-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cart2-line-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
}

.cart2-stars {
  color: var(--btn-gold);
  letter-spacing: 1px;
  font-size: 12px;
  line-height: 1;
}

.cart2-line-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cart2-line-title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
  line-height: 1.25;
}

.cart2-line-meta {
  margin: 2px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}

.cart2-line-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  white-space: nowrap;
  font-family: var(--sans);
}

.cart2-price-compare {
  color: var(--muted);
  font-size: 13px;
  text-decoration: line-through;
}

.cart2-price-now {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.cart2-discount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(13, 14, 16, 0.08);
  border-bottom: 1px solid rgba(13, 14, 16, 0.08);
}

.cart2-discount-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

.cart2-save-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(13, 14, 16, 0.16);
  background: var(--paper-soft);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cart2-line-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}

.cart2-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 36px;
  padding: 0 2px;
  border-radius: 999px;
  border: 1px solid rgba(13, 14, 16, 0.18);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  position: relative;
  z-index: 2;
  touch-action: manipulation;
}

.cart2-qty-btn,
.cart2-qty button {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 3;
}

.cart2-qty-value,
.cart2-qty span {
  min-width: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

.cart2-remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}

.cart2-remove:hover {
  color: var(--ink);
}

.cart-drawer-root--ab2 .cart-upgrades {
  margin: 0 0 18px;
  padding: 0;
}

.cart2-upsell {
  padding: 14px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--pure);
  box-shadow: none;
  font-family: var(--sans);
}

.cart2-upsell-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.cart2-upsell-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.cart2-upsell-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.cart2-upsell-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.cart2-upsell-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 1.15;
}

.cart2-upsell-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-family: var(--sans);
  white-space: nowrap;
  flex-shrink: 0;
}

.cart2-upsell-was {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
}

.cart2-upsell-price strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cart2-upsell-lede {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

.cart2-upsell-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.cart2-upsell-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background-color: #fff;
  background-image: url("../images/uploads/sticky-cart.webp");
  background-size: cover;
  background-position: center;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.cart2-upsell-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cart2-upsell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
}

.cart2-upsell-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart2-upsell-list span {
  display: inline-flex;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--btn-gold);
  color: transparent;
  font-size: 0;
}

.cart2-line--gift {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(13, 14, 16, 0.08);
}

.cart2-upsell-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  gap: 6px;
  width: auto;
  min-height: 32px;
  margin-top: 0;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 3;
}

.cart2-upsell-add svg {
  flex: 0 0 auto;
  display: block;
  width: 13px;
  height: 13px;
  opacity: 0.85;
}

.cart2-upsell-add:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.cart2-gift-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 12px;
}

.cart2-gift-compose-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.cart2-gift-compose textarea {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  resize: vertical;
  min-height: 84px;
  outline: none;
}

.cart2-gift-compose textarea:focus {
  box-shadow: 0 0 0 2px rgba(240, 200, 77, 0.55);
}

.cart2-gift-compose-count {
  align-self: flex-end;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}

.cart2-gift-compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.cart2-gift-compose-actions .cart2-upsell-add {
  width: auto;
  min-width: 108px;
  min-height: 36px;
  flex: 0 0 auto;
  align-self: auto;
  border: 0;
  background: var(--btn-gold);
  color: var(--ink);
}

.cart2-gift-compose-actions .cart2-upsell-add:hover {
  background: var(--btn-gold-hover);
  border-color: transparent;
}

.cart2-gift-cancel,
.cart2-gift-skip {
  margin: 0;
  padding: 0 12px;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart2-gift-skip {
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.cart2-gift-note {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.35;
  color: var(--muted);
}

.cart-drawer-root--ab2 .cart-drawer-filled {
  padding-bottom: 0;
}

.cart2-foot {
  display: grid;
  gap: 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(13, 14, 16, 0.08);
  font-family: var(--sans);
}

.cart-drawer--ab2 .cart-drawer-pay {
  margin-top: 2px;
  gap: 8px 10px;
}

.cart2-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cart2-total-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.cart2-total-prices {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.cart2-total-compare {
  color: var(--muted);
  font-size: 14px;
  text-decoration: line-through;
}

.cart2-total-compare[hidden] {
  display: none !important;
}

.cart2-total-now {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}

.cart2-total-now .price-currency {
  font-size: 0.55em;
  font-weight: 700;
  vertical-align: top;
  margin-right: 0.04em;
  transform: translateY(0.18em);
}

.cart2-checkout {
  min-height: 54px !important;
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: var(--pure) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 24px rgba(13, 14, 16, 0.14) !important;
}

.cart2-checkout:hover {
  background: #1a1b1e !important;
}

.cart2-checkout[disabled] {
  opacity: 0.55;
}

.cart2-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(13, 14, 16, 0.08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.cart2-guarantee-icon {
  display: inline-flex;
  color: var(--ink);
}

@media (min-width: 900px) {
  .cart-drawer-root--ab2 .cart2-reward {
    padding-top: 4px;
  }
}

@media (max-width: 560px) {
  .cart2-line {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .cart2-line-media {
    width: 76px;
    height: 76px;
  }

  .cart2-line-title {
    font-size: 16px;
  }

  .cart2-upsell-main {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
  }

  .cart2-upsell-thumb {
    width: 56px;
    height: 56px;
  }

  .cart2-upsell-title {
    font-size: 17px;
  }
}

/* ---------- custom checkout (Screen 1) ---------- */

.checkout-page {
  --co-bg: #ffffff;
  --co-card: #ffffff;
  --co-ink: #111113;
  --co-muted: #8b8d93;
  --co-accent: #7b6cf0;
  --co-radius: 16px;
  --co-pad: 16px;
  --co-max: 430px;
  min-height: 100svh;
  background: var(--co-bg);
  color: var(--co-ink);
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
}

.co-top,
.co-sheet-top {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  width: min(100%, var(--co-max));
  margin: 0 auto;
  padding: 10px var(--co-pad) 6px;
  background: var(--co-bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

.co-title {
  margin: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--co-ink);
}

.co-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--co-ink);
  text-decoration: none;
  cursor: pointer;
}

.co-icon-btn svg {
  width: 22px;
  height: 22px;
}

.co-icon-spacer {
  visibility: hidden;
  pointer-events: none;
}

.co-main {
  width: min(100%, var(--co-max));
  margin: 0 auto;
  min-height: calc(100svh - 56px);
}

.co-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 48px var(--co-pad);
}

.co-live {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 56px);
}

.co-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 8px var(--co-pad) 24px;
  padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px));
}

.co-card,
.co-row {
  background: var(--co-card);
  border-radius: var(--co-radius);
  border: 0;
  box-shadow: 0 1px 0 rgba(17, 17, 19, 0.03);
}

.co-product {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.co-product-media {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background-color: #ececef;
  background-image: url("../images/uploads/sticky-cart.webp");
  background-size: cover;
  background-position: center;
}

.co-product-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.co-product-copy strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.co-product-copy span {
  color: var(--co-muted);
  font-size: 13px;
  font-weight: 400;
}

.co-product-note {
  color: #3d7a4a !important;
  font-weight: 500 !important;
}

.co-product-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.co-price-was {
  font-size: 12px;
  font-weight: 500;
  color: var(--co-muted);
  text-decoration: line-through;
}

.co-price-was[hidden] {
  display: none;
}

.co-address-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
}

.co-address-panel .co-field {
  margin: 0;
}

.co-field-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 10px;
}

.co-mock-address {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.co-mock-address[hidden] {
  display: none;
}

.co-address-saved {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f0faf2;
  color: #2f6b3c;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.co-address-saved[hidden] {
  display: none;
}

.co-address-continue {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  font-size: 15px;
}

.co-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.co-label {
  margin: 0;
  padding-left: 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.co-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.co-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.co-row[disabled] {
  cursor: default;
  opacity: 1;
}

.co-row-muted {
  opacity: 0.38;
  pointer-events: none;
}

.co-row-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.co-row-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--co-ink);
}

.co-row-sub {
  font-size: 13px;
  font-weight: 500;
}

.co-accent {
  color: var(--co-accent);
}

.co-chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #c4c5ca;
}

.co-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid #d2d3d8;
  background: #fff;
  color: transparent;
  flex: 0 0 auto;
}

.co-check svg {
  width: 14px;
  height: 14px;
}

.co-row[aria-pressed="true"] .co-check {
  background: var(--co-accent);
  border-color: var(--co-accent);
  color: #fff;
}

.co-pay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 20px;
  border-radius: 4px;
  background: rgba(123, 108, 240, 0.12);
  color: var(--co-accent);
  flex: 0 0 auto;
}

.co-pay-icon svg {
  width: 18px;
  height: 14px;
}

.co-gift-panel {
  margin-top: 4px;
}

.co-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.co-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--co-ink);
}

.co-field input,
.co-field textarea {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: #ececef;
  color: var(--co-ink);
  font: inherit;
  font-size: 15px;
  outline: none;
  resize: vertical;
}

.co-field input:focus,
.co-field textarea:focus {
  box-shadow: 0 0 0 2px rgba(123, 108, 240, 0.35);
}

.co-hint {
  margin: 10px 2px 0;
  color: var(--co-muted);
  font-size: 13px;
  line-height: 1.4;
}

.co-footer {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--co-max));
  padding: 12px var(--co-pad) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(244, 244, 245, 0) 0%, var(--co-bg) 28%);
  z-index: 30;
}

.co-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
}

.co-total strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.co-place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #d8d9de;
  color: #9a9ba1;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: not-allowed;
}

.co-place.is-active,
.co-place:not([disabled]) {
  background: #111113;
  color: #fff;
  cursor: pointer;
}

.co-place.is-active:hover,
.co-place:not([disabled]):hover {
  background: #1c1d21;
}

.co-place[disabled] {
  background: #d8d9de;
  color: #9a9ba1;
  cursor: not-allowed;
}

.co-place[aria-busy="true"] {
  opacity: 0.7;
  cursor: wait;
}

.co-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  color: var(--co-muted);
  font-size: 13px;
}

.co-spinner {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(17, 17, 19, 0.15);
  border-top-color: var(--co-ink);
  border-radius: 50%;
  animation: checkout-spin 0.7s linear infinite;
}

@keyframes checkout-spin {
  to { transform: rotate(360deg); }
}

.co-error {
  margin: 0;
}

.co-stripe-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 16px;
  background: #f4f4f5;
  border-radius: var(--co-radius);
  border: 1px solid rgba(17, 17, 19, 0.06);
  box-shadow: none;
  min-height: 220px;
}

.co-stripe-block .co-status {
  min-height: 120px;
}

.co-stripe-mount {
  min-height: 0;
}

.co-stripe-mount:not(:empty) {
  min-height: 48px;
}

.co-stripe-mount[hidden],
.co-stripe-mount.is-empty {
  display: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.co-pay-inline[hidden],
.co-footer[hidden],
.co-empty[hidden],
.co-live[hidden],
.co-status[hidden],
.co-gift-panel[hidden],
.co-embed-fallback[hidden],
.checkout-embed[hidden],
.checkout-mock[hidden],
.co-error[hidden],
[data-checkout-discount-row][hidden] {
  display: none !important;
}

.co-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.co-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 19, 0.28);
}

.co-sheet-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--co-max));
  max-height: min(94svh, 860px);
  display: flex;
  flex-direction: column;
  background: var(--co-bg);
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  box-shadow: 0 -12px 40px rgba(17, 17, 19, 0.12);
}

.co-sheet-top {
  position: relative;
  background: var(--co-bg);
}

.co-sheet-body {
  flex: 1;
  overflow: auto;
  padding: 8px var(--co-pad) 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.co-sheet-foot {
  padding: 10px var(--co-pad) calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--co-bg);
}

.co-row-static {
  cursor: default;
  pointer-events: none;
}

.co-row-static .co-row-title {
  font-weight: 500;
}

.checkout-embed {
  min-height: 420px;
  width: 100%;
}

.checkout-embed iframe {
  width: 100% !important;
  min-height: 420px !important;
}

.checkout-mock {
  display: grid;
  gap: 16px;
}

.checkout-mock-note {
  margin: 0;
  color: var(--co-muted);
  font-size: 13px;
  line-height: 1.5;
}

.checkout-mock-note code {
  font-size: 12px;
  color: var(--co-ink);
}

.co-preview-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 8px 16px;
  background: #0d0e10;
  color: #fff;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.checkout-preview .co-top {
  top: 34px;
}

@media (min-width: 861px) {
  body.checkout-preview .co-top {
    top: 0;
  }

  .co-preview-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 430px);
    border-radius: 0 0 8px 8px;
  }
}

body.checkout-sheet-open {
  overflow: hidden;
}

@media (min-width: 861px) {
  .checkout-page {
    --co-max: 1120px;
    --co-pad: clamp(20px, 3vw, 32px);
  }

  .co-top {
    width: min(100%, var(--co-max));
    padding: 18px var(--co-pad) 14px;
  }

  .co-title {
    font-family: var(--serif);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 500;
  }

  .co-main {
    width: min(100%, var(--co-max));
    padding: 0 var(--co-pad) 40px;
    min-height: calc(100svh - 72px);
  }

  .co-live {
    min-height: auto;
  }

  .co-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 400px);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }

  .co-form-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: calc(100svh - 120px);
  }

  .co-product--mobile {
    display: none !important;
  }

  .co-scroll {
    flex: 1;
    padding: 4px 0 20px;
    padding-bottom: 20px;
  }

  .co-pay-inline .co-label {
    display: none;
  }

  .co-stripe-block {
    padding: 18px 20px 20px;
  }

  .checkout-embed {
    min-height: 560px;
  }

  .checkout-embed:not([hidden]) {
    display: block;
    min-height: 640px;
  }

  .co-footer {
    position: sticky;
    bottom: 0;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: auto;
    padding-inline: 0;
    background: linear-gradient(180deg, rgba(247, 247, 248, 0) 0%, var(--co-bg) 22%);
  }

  .co-aside {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 84px;
  }

  .co-aside-card {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(17, 17, 19, 0.06);
    box-shadow: 0 10px 28px rgba(17, 17, 19, 0.06);
  }

  .co-aside-hero {
    aspect-ratio: 5 / 4;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: #ececef;
    background-image: url("../images/uploads/checkout-hero.webp");
    background-size: cover;
    background-position: center;
  }

  .co-aside-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px 20px;
  }

  .co-aside-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--co-muted);
  }

  .co-aside-rating .stars {
    --star-size: 12px;
    --star-gap: 1px;
    color: var(--star-gold, #f6cc3a);
    letter-spacing: 0;
  }

  .co-aside-title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--co-ink);
  }

  .co-aside-meta {
    margin: 0;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--co-muted);
  }

  .co-aside-total-block {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(17, 17, 19, 0.08);
  }

  .co-aside-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--co-muted);
  }

  .co-aside-row[hidden] {
    display: none !important;
  }

  .co-aside-was {
    text-decoration: line-through;
  }

  .co-aside-row--save span:last-child {
    font-weight: 600;
    color: #3d7a4a;
  }

  .co-aside-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(17, 17, 19, 0.06);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--co-muted);
  }

  .co-aside-total strong {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--co-ink);
  }

  .co-aside-reviews {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  .co-aside-reviews-title {
    margin: 0;
    padding: 0 2px;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--co-ink);
  }

  .co-review-loop {
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  .co-review-loop .loop-track {
    gap: 12px;
    align-items: stretch;
  }

  .co-review-loop.is-motion-paused .loop-track {
    animation-play-state: paused !important;
  }

  .co-review-photo {
    flex: 0 0 auto;
    width: 156px;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--co-card);
    box-shadow: 0 1px 0 rgba(17, 17, 19, 0.04);
  }

  .co-review-photo .ph {
    position: relative;
    aspect-ratio: 4 / 5;
    width: 156px;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .co-review-photo .ph-tag--place {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    left: 8px;
    top: 8px;
    bottom: auto;
    max-width: calc(100% - 16px);
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 8px rgba(13, 14, 16, 0.1);
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--co-ink);
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .co-review-photo .ph-tag--place .flag {
    width: 12px;
    height: 9px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
  }

  .co-sheet-panel {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    border-radius: 22px;
    max-height: min(90vh, 760px);
  }
}

@media (max-width: 860px) {
  .co-aside {
    display: none !important;
  }
}

/* 404 */
.not-found-page .not-found {
  min-height: min(70vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px var(--gutter) 96px;
}

.not-found-inner {
  width: min(100%, 480px);
  text-align: center;
}

.not-found-inner h1 {
  margin: 0 0 28px;
  font-family: "PT Serif", Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink, #111);
}

.not-found-inner .btn-dark {
  display: inline-flex;
}


/* ---------- Order confirmation ---------- */
.order-confirm-page {
  --confirm-gold: var(--btn-gold);
  --confirm-gold-deep: #a67c1a;
  --confirm-gold-line: rgba(176, 137, 36, 0.28);
  --confirm-warm: #ffffff;
  background: #fff;
  color: var(--ink);
  min-height: 100svh;
}

.order-confirm-page .promo-sticky {
  display: none !important;
}

.order-confirm-page .site-header {
  background: #fff;
}

.order-confirm {
  width: min(100% - 2 * var(--gutter), 520px);
  margin: 0 auto;
  padding: clamp(36px, 6vh, 64px) 0 clamp(56px, 8vh, 88px);
  text-align: center;
}

.confirm-shell {
  display: grid;
  gap: 28px;
}

@media (min-width: 900px) {
  .order-confirm {
    width: min(100% - 2 * var(--gutter), 1180px);
    padding: clamp(40px, 7vh, 72px) 0 clamp(64px, 9vh, 96px);
  }

  .confirm-shell {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: start;
    gap: 40px 48px;
  }
}

.order-confirm-mark {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--confirm-gold-deep, #a67c1a);
}

.order-confirm-check {
  width: 72px;
  height: 72px;
}

.order-confirm-ring {
  opacity: 0.42;
  transform-origin: center;
  animation: order-confirm-ring 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.order-confirm-tick {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: order-confirm-tick 0.55s 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes order-confirm-ring {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 0.42; transform: scale(1); }
}

@keyframes order-confirm-tick {
  to { stroke-dashoffset: 0; }
}

.order-confirm-kicker {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--confirm-gold-deep, #a67c1a);
}

.order-confirm-title {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.order-confirm-number {
  margin: 0 0 clamp(40px, 7vh, 56px);
  font-family: var(--sans);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.order-journey {
  --journey-dot: 18px;
  --journey-rail-y: calc(var(--journey-dot) / 2);
  position: relative;
  list-style: none;
  margin: 0 auto 40px;
  padding: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 520px;
  text-align: center;
  border-top: 1px solid var(--confirm-gold-line, rgba(176, 137, 36, 0.28));
}

.order-journey-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0.34;
  transition: opacity 0.45s ease;
}

.order-journey-step:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--journey-rail-y);
  left: calc(50% + (var(--journey-dot) / 2) + 8px);
  width: calc(100% - var(--journey-dot) - 16px);
  height: 1px;
  background: rgba(176, 137, 36, 0.22);
  transform: translateY(-50%);
  pointer-events: none;
}

.order-journey-step.is-done:not(:last-child)::before {
  height: 2px;
  background: linear-gradient(90deg, #c9a227, var(--btn-gold));
  border-radius: 2px;
}

.order-journey-step.is-active,
.order-journey-step.is-done {
  opacity: 1;
}

.order-journey-dot {
  position: relative;
  z-index: 1;
  width: var(--journey-dot);
  height: var(--journey-dot);
  border-radius: 50%;
  border: 1.5px solid rgba(176, 137, 36, 0.38);
  background: #faf7f0;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.order-journey-step.is-active .order-journey-dot,
.order-journey-step.is-done .order-journey-dot {
  background: var(--btn-gold);
  border-color: #c9a227;
}

/* Completed steps earn a small paper check inside the ink dot */
.order-journey-step.is-done:not(.is-current) .order-journey-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 4px;
  border-left: 1.5px solid #3a2f12;
  border-bottom: 1.5px solid #3a2f12;
  transform: translate(-50%, -62%) rotate(-45deg);
}

.order-journey-step.is-current .order-journey-dot {
  transform: scale(1.12);
  box-shadow: none;
}

.order-journey-step.is-flicker .order-journey-dot {
  animation: order-journey-flicker 0.85s ease-in-out 1;
}

@keyframes order-journey-flicker {
  0%,
  100% {
    transform: scale(1.18);
    box-shadow: none;
    opacity: 1;
  }
  18% {
    transform: scale(0.92);
    opacity: 0.35;
  }
  36% {
    transform: scale(1.22);
    opacity: 1;
  }
  54% {
    transform: scale(1);
    opacity: 0.45;
  }
  72% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.order-journey-copy {
  display: grid;
  gap: 4px;
}

.order-journey-copy strong {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.order-journey-copy em {
  font-style: normal;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(13, 14, 16, 0.5);
}

.order-confirm-live {
  margin: 4px auto 36px;
  max-width: 520px;
  width: 100%;
  display: none;
  gap: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.order-confirm-live.is-open,
.order-confirm-live:not([hidden]) {
  display: grid;
}

.order-confirm-live[hidden] {
  display: none !important;
}

.order-confirm-pulse {
  padding: 22px 0 18px;
  border-top: 1px solid rgba(13, 14, 16, 0.1);
  text-align: center;
}

.order-confirm-pulse[hidden] {
  display: none;
}

.order-confirm-pulse-kicker {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.42);
}

.order-confirm-pulse-status {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 34px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.order-confirm-pulse-place {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(13, 14, 16, 0.58);
}

.order-confirm-pulse-place[hidden] {
  display: none;
}

.order-confirm-meta {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(13, 14, 16, 0.08);
}

.order-confirm-meta:not(:has(.order-confirm-meta-item:not([hidden]))) {
  display: none;
}

.order-confirm-meta-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(13, 14, 16, 0.06);
}

.order-confirm-meta-item[hidden] {
  display: none;
}

.order-confirm-meta-item:last-child {
  border-bottom: 0;
}

.order-confirm-meta-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.38);
  font-weight: 500;
}

.order-confirm-meta-value {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
  word-break: break-word;
}

.order-confirm-path {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(13, 14, 16, 0.1);
}

.order-confirm-path[hidden] {
  display: none !important;
}

.order-confirm-path-kicker {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.42);
}

.order-confirm-stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.order-confirm-stops[hidden] {
  display: none;
}

.order-confirm-stop {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 14px;
  padding: 0 0 22px;
  opacity: 0.42;
  transition: opacity 0.25s ease;
}

.order-confirm-stop.is-current {
  opacity: 1;
}

.order-confirm-stop:last-child {
  padding-bottom: 4px;
}

.order-confirm-stop-rail {
  position: relative;
  width: 16px;
}

.order-confirm-stop-rail::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(13, 14, 16, 0.28);
  box-shadow: 0 0 0 3px var(--paper, #fff);
  z-index: 1;
}

.order-confirm-stop.is-current .order-confirm-stop-rail::before {
  width: 8px;
  height: 8px;
  left: 4px;
  top: 3px;
  background: var(--btn-gold);
  box-shadow: none;
}

.order-confirm-stop:not(:last-child) .order-confirm-stop-rail::after {
  content: '';
  position: absolute;
  left: 7.5px;
  top: 14px;
  bottom: -22px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(13, 14, 16, 0.2),
    rgba(13, 14, 16, 0.06)
  );
}

.order-confirm-stop-body {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-top: 0;
}

.order-confirm-stop-body time {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.4);
  font-variant-numeric: tabular-nums;
}

.order-confirm-stop.is-current .order-confirm-stop-body time {
  color: rgba(13, 14, 16, 0.55);
}

.order-confirm-stop-body strong {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.order-confirm-stop.is-current .order-confirm-stop-body strong {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.order-confirm-stop-flag {
  display: inline-block;
  width: 18px;
  height: 13px;
  margin-right: 0.35em;
  vertical-align: -0.1em;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(13, 14, 16, 0.08);
}

.order-confirm-stop.is-current .order-confirm-stop-flag {
  width: 20px;
  height: 14px;
}

.order-confirm-stop-body em {
  display: block;
  margin-top: 0.22rem;
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(13, 14, 16, 0.5);
  max-width: 38ch;
}

.order-confirm-stop.is-current .order-confirm-stop-body em {
  color: rgba(13, 14, 16, 0.62);
  font-weight: 500;
}

.order-confirm-note {
  margin: 0 auto 36px;
  max-width: 400px;
  display: grid;
  gap: 8px;
}

.order-confirm-note p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(13, 14, 16, 0.62);
}

.order-confirm-note strong {
  color: var(--ink);
  font-weight: 600;
}

.order-confirm-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.order-confirm-cta {
  min-width: 180px;
}

.order-confirm-track {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.55);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.order-confirm-track:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

button.order-confirm-track {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  padding: 0 0 2px;
}

/* Confirmation: receipt line under the order number */
.order-confirm-email {
  margin: -28px 0 clamp(36px, 6vh, 48px);
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(13, 14, 16, 0.5);
}

.order-confirm-email[hidden] {
  display: none;
}

.order-confirm-email strong {
  font-weight: 500;
  color: var(--ink);
}

/* Confirmation cards: order summary + shipping */
.confirm-card {
  margin: 0 auto 20px;
  padding: 22px 22px 20px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 40px -32px rgba(13, 14, 16, 0.28);
  text-align: left;
}

.confirm-card[hidden] {
  display: none;
}

.confirm-desk {
  display: grid;
  gap: 16px;
  margin: 0 auto 8px;
  width: 100%;
  text-align: left;
}

.confirm-desk:not(:has(.confirm-card:not([hidden]))) {
  display: none;
}

@media (min-width: 900px) {
  .order-journey {
    --journey-dot: 20px;
    --journey-gap: 68px;
    grid-template-columns: 1fr;
    gap: var(--journey-gap);
    max-width: 340px;
    margin-bottom: 48px;
    padding-top: 44px;
    text-align: left;
  }

  .order-journey-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .order-journey-step:not(:last-child)::before {
    top: calc(var(--journey-dot) + 8px);
    left: calc(var(--journey-dot) / 2);
    width: 1px;
    height: calc(100% + var(--journey-gap) - var(--journey-dot) - 8px);
    transform: translateX(-50%);
  }

  .order-journey-step.is-done:not(:last-child)::before {
    width: 2px;
    height: calc(100% + var(--journey-gap) - var(--journey-dot) - 8px);
    background: linear-gradient(180deg, #c9a227, var(--btn-gold));
  }

  .order-journey-dot {
    flex-shrink: 0;
    margin-top: 3px;
  }

  .order-journey-copy strong {
    font-size: 18px;
  }

  .order-confirm-live,
  .order-confirm-note {
    max-width: none;
  }

  .confirm-desk {
    position: sticky;
    top: 84px;
    align-self: start;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    z-index: 4;
  }

  .confirm-desk .confirm-card {
    margin: 0;
    padding: 22px 22px 20px;
  }

  .order-confirm .confirm-gift {
    display: grid;
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
    align-items: stretch;
    margin: 0 auto 28px;
  }

  .order-confirm .confirm-gift-banner {
    display: block;
    aspect-ratio: auto;
    min-height: 280px;
    height: auto;
    border-bottom: 0;
    border-right: 1px solid var(--hairline);
  }

  .order-confirm .confirm-gift-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 32px 26px;
  }
}

.confirm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.confirm-ship-flag {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.confirm-ship-flag-img {
  display: block;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(13, 14, 16, 0.12);
}

.confirm-card-head h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.48);
}

.confirm-card-side {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(13, 14, 16, 0.45);
}

.confirm-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.confirm-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.confirm-line-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #f3f2ee;
  background-image: url("../images/uploads/sticky-cart.webp");
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(13, 14, 16, 0.06);
}

.confirm-line-thumb--extra {
  background-image: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgba(13, 14, 16, 0.55);
  background: linear-gradient(160deg, rgba(246, 204, 58, 0.16), rgba(243, 242, 238, 0.95));
}

.confirm-line-body {
  display: grid;
  gap: 3px;
}

.confirm-line-name {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.confirm-line-meta {
  font-family: var(--sans);
  font-size: 12.5px;
  color: rgba(13, 14, 16, 0.5);
}

.confirm-totals {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 8px;
}

.confirm-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(13, 14, 16, 0.55);
}

.confirm-total-row[hidden] {
  display: none;
}

.confirm-total-main {
  font-size: 14px;
  color: var(--ink);
}

.confirm-total-main span:first-child {
  font-weight: 500;
}

.confirm-total-main span:last-child {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.01em;
}

.confirm-address {
  font-style: normal;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(13, 14, 16, 0.66);
}

.confirm-address strong {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}

/* Tried UGC strip on confirmation — full-bleed, outside the receipt column */
.order-confirm-page .confirm-tried {
  width: 100%;
  margin: 0;
  padding-top: clamp(28px, 5vh, 48px);
  border-top: 1px solid var(--hairline);
  text-align: left;
}

.confirm-gift {
  display: block;
  margin: 0 auto 28px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #fff;
  text-align: left;
  box-shadow: 0 18px 40px -32px rgba(13, 14, 16, 0.28);
}

.confirm-gift[hidden] {
  display: none !important;
}

.confirm-gift-banner {
  display: block;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 7;
  background-color: #f3f2ee;
  background-image: url("../images/uploads/sticky-cart.webp");
  background-size: cover;
  background-position: center;
  border: 0;
  border-bottom: 1px solid var(--hairline);
}

.confirm-gift-banner.ph:not(.has-upload)::before,
.confirm-gift-banner.ph:not(.has-upload)::after {
  content: none;
  display: none;
}

.confirm-gift-body {
  padding: 22px 22px 20px;
}

.confirm-gift-kicker {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.42);
}

.confirm-gift-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.confirm-gift-lede {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(13, 14, 16, 0.58);
}

.confirm-gift-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
}

.confirm-gift-now {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.confirm-gift-price s {
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(13, 14, 16, 0.36);
}

.confirm-gift-save {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 8px;
}

.confirm-gift-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 16px 28px;
  border: 1px solid rgba(196, 150, 40, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(
      165deg,
      var(--btn-gold-hi) 0%,
      var(--btn-gold) 48%,
      var(--btn-gold-lo) 100%
    );
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1.5px 0 rgba(168, 118, 18, 0.28),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.28),
    inset -1.5px 0 0 rgba(168, 118, 18, 0.16),
    0 1px 0 rgba(160, 120, 20, 0.18),
    0 10px 26px rgba(200, 150, 30, 0.2);
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
}

.confirm-gift-cta:hover,
.confirm-gift-cta:focus-visible {
  color: var(--ink);
  filter: brightness(1.03);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1.5px 0 rgba(168, 118, 18, 0.26),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.3),
    inset -1.5px 0 0 rgba(168, 118, 18, 0.14),
    0 1px 0 rgba(160, 120, 20, 0.16),
    0 14px 32px rgba(200, 150, 30, 0.26);
}

.confirm-gift-cta:disabled {
  opacity: 0.55;
  pointer-events: none;
  transform: none;
  filter: none;
}

.confirm-gift.is-added .confirm-gift-cta,
.confirm-gift-overlay.is-added .confirm-gift-cta {
  pointer-events: none;
}

.confirm-gift.is-added .confirm-gift-lede,
.confirm-gift-overlay.is-added .confirm-gift-lede {
  color: var(--ink);
}

.confirm-gift-fine {
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(13, 14, 16, 0.42);
}

.confirm-gift-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--gutter);
  background: rgba(13, 14, 16, 0.38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.confirm-gift-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.confirm-gift-overlay[hidden] {
  display: none;
}

.confirm-gift-overlay.is-open[hidden] {
  display: flex;
}

.confirm-gift-dialog {
  position: relative;
  width: min(100%, 400px);
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px -28px rgba(13, 14, 16, 0.45);
  transform: translateY(10px);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.confirm-gift-overlay.is-open .confirm-gift-dialog {
  transform: translateY(0);
}

.confirm-gift-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.confirm-gift-overlay .confirm-gift-banner {
  aspect-ratio: 16 / 8;
}

@media (max-width: 560px) {
  .confirm-gift-dialog {
    width: min(100%, 400px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .confirm-gift-overlay,
  .confirm-gift-dialog {
    transition: none;
  }
}

/* Track page → confirmation-style result */
body.track-showing-result {
  background: var(--paper);
}

body.track-showing-result .announce-bar,
body.track-showing-result .site-header,
body.track-showing-result .footer,
body.track-showing-result .utility-hero,
body.track-showing-result [data-track-form],
body.track-showing-result .utility-links {
  display: none !important;
}

body.track-showing-result .utility-panel {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.track-showing-result .track-confirm {
  display: block;
  width: min(100% - 2 * var(--gutter), 520px);
  margin: 0 auto;
  padding: clamp(48px, 10vh, 96px) 0 clamp(64px, 10vh, 100px);
  text-align: center;
}

body.track-showing-result .track-confirm[hidden] {
  display: none !important;
}

.track-confirm .track-terminal {
  margin: 0 auto 24px;
  max-width: 360px;
  text-align: left;
  color: #8a1f1f;
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .order-journey {
    gap: 0;
    max-width: none;
  }

  .order-journey-copy em {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-confirm-ring,
  .order-confirm-tick,
  .order-journey::after,
  .order-journey-dot,
  .order-journey-step {
    animation: none !important;
    transition: none !important;
  }

  .order-confirm-tick {
    stroke-dashoffset: 0;
  }
}

/* Final override ? angled UGC tiles must never show dashed edit chrome */
.tried .ugc-rail .ugc-slide,
.tried .ugc-rail .ugc-slide.ph,
.tried .ugc-rail [data-upload],
body.dev-mode.dev-editing .tried .ugc-rail .ugc-slide,
body.dev-mode.dev-editing .tried .ugc-rail [data-upload] {
  outline: none !important;
  outline-offset: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.tried .ugc-rail .upload-hint,
body.dev-mode.dev-editing .tried .ugc-rail .upload-hint {
  display: none !important;
}

/* ------------------------------------------------------------------
   Guess Their Elo minigame
   ------------------------------------------------------------------ */

/* Intro: lock the page and scroll ONLY inside .elo-intro-scroll.
   Document scroll is unreliable here (overflow-x: clip + sticky header). */
html:has(body.elo-game-page) {
  background: var(--obsidian);
  height: 100%;
  overflow: hidden;
}

body.elo-game-page {
  background: var(--obsidian);
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

html:has(body.board-game-page.elo-playing) {
  background: var(--obsidian);
}

body.board-game-page.elo-playing {
  background: var(--obsidian);
}

html:has(body.board-game-page:not(.elo-playing)) {
  background: var(--paper);
}

body.board-game-page:not(.elo-playing) {
  background: var(--paper);
}

/* Desktop zoom breaks nested scroll on this page - keep 1:1 */
@media (min-width: 1021px) {
  html:not(.checkmate-open):has(body.elo-game-page) {
    zoom: 1;
  }
}

.elo-game-page.elo-playing .announce-bar,
.elo-game-page .footer,
.elo-game-page .promo-sticky,
.board-game-page .promo-sticky {
  display: none !important;
}

body.elo-playing .dev-edit-toggle {
  display: none !important;
}

.elo-game-page .elo-game {
  position: relative;
  height: calc(100dvh - 100px);
  max-height: calc(100dvh - 100px);
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

/* Pin play stage while playing - sit below header so nav stays clickable */
body.elo-game-page.elo-playing .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  border-color: transparent;
  border-bottom-color: var(--hairline);
  box-shadow: none;
  z-index: 100;
}

body.elo-game-page.elo-playing .elo-game {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% - 64px);
  height: calc(100dvh - 64px);
  max-height: calc(100dvh - 64px);
  padding-top: 0;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 1;
}

/* -  - Intro / Start screen -  - */
.elo-intro {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--obsidian);
  color: var(--pure);
}

.elo-intro[hidden],
.elo-play[hidden],
.board-play[hidden],
.elo-game-over[hidden] {
  display: none !important;
}

.elo-intro-mosaic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 6px;
  opacity: 0.28;
  filter: grayscale(0.35) contrast(1.05);
  transform: none;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

body.elo-game-page.elo-playing .elo-intro-mosaic,
body.elo-game-page.elo-playing .elo-intro-veil {
  display: none;
}

.elo-mosaic-tile {
  overflow: hidden;
  margin: 0;
  animation: eloMosaicDrift 14s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.45s);
}

.elo-mosaic-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.elo-intro-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(8, 9, 11, 0.35) 0%, rgba(8, 9, 11, 0.82) 70%),
    linear-gradient(180deg, rgba(8, 9, 11, 0.55), rgba(8, 9, 11, 0.88));
  pointer-events: none;
  z-index: 1;
}

.elo-intro-scroll {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.elo-intro-content {
  text-align: center;
  padding: clamp(48px, 12vh, 100px) var(--gutter) 48px;
  max-width: 560px;
  margin: 0 auto;
  min-height: min(100%, 100svh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.elo-intro-kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 230, 200, 0.7);
  margin-bottom: 14px;
}

.elo-intro-content h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #f0e6c8;
  margin-bottom: 14px;
}

.elo-intro-lede {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  line-height: 1.45;
  color: rgba(244, 243, 239, 0.72);
  margin-bottom: 18px;
}

.elo-intro-best {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 243, 239, 0.5);
  margin-bottom: 28px;
}

.elo-btn--start {
  background: linear-gradient(180deg, var(--btn-gold-hi), var(--btn-gold));
  color: var(--ink);
  min-width: 200px;
  padding: 18px 28px;
  font-size: 15px;
}

.elo-btn--start:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #faf0c0, var(--btn-gold-hover));
}

.elo-intro-faq-jump + .elo-intro-faq-jump {
  margin-top: 12px;
}

.elo-intro-faq-jump {
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 230, 200, 0.65);
  border-bottom: 1px solid rgba(240, 230, 200, 0.28);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.elo-intro-faq-jump:hover {
  color: #f0e6c8;
  border-bottom-color: #f0e6c8;
}

.elo-ranks {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px var(--gutter) 48px;
  color: rgba(244, 243, 239, 0.88);
}

.elo-ranks--in-seo {
  max-width: none;
  margin: 22px 0 32px;
  padding: 0;
}

.elo-ranks-kicker {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(240, 230, 200, 0.55);
}

.elo-ranks h2 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 4.2vw, 1.95rem);
  font-weight: 700;
  color: #f0e6c8;
  text-align: center;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.elo-ranks-lede {
  margin: 0 auto 28px;
  max-width: 34em;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: center;
  color: rgba(244, 243, 239, 0.62);
}

.elo-ranks-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(244, 243, 239, 0.14);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
}

.elo-ranks-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-family: var(--sans);
}

.elo-ranks-table th,
.elo-ranks-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(244, 243, 239, 0.1);
}

.elo-ranks-table thead th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 230, 200, 0.7);
  background: rgba(0, 0, 0, 0.22);
}

.elo-ranks-table tbody td {
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(244, 243, 239, 0.78);
}

.elo-ranks-table tbody td:first-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #f0e6c8;
  font-weight: 500;
}

.elo-ranks-table tbody td:nth-child(2) {
  font-weight: 600;
  color: rgba(244, 243, 239, 0.92);
  white-space: nowrap;
}

.elo-ranks-table tbody tr:last-child th,
.elo-ranks-table tbody tr:last-child td {
  border-bottom: 0;
}

.elo-ranks-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

.elo-ranks-notes {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.elo-ranks-notes li {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(244, 243, 239, 0.58);
  padding-left: 0;
}

.elo-ranks-notes strong {
  color: rgba(240, 230, 200, 0.88);
  font-weight: 600;
}

@media (max-width: 700px) {
  .elo-ranks {
    padding-top: 20px;
    padding-bottom: 36px;
  }

  .elo-ranks-table th,
  .elo-ranks-table td {
    padding: 10px 12px;
  }

  .elo-ranks-table tbody td {
    font-size: 0.82rem;
  }
}

.elo-intro-faq {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px var(--gutter) 40px;
}

.elo-intro-faq h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4vw, 1.85rem);
  font-weight: 700;
  color: #f0e6c8;
  text-align: center;
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}

.elo-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.elo-faq-item {
  border: 1px solid rgba(244, 243, 239, 0.14);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
}

.elo-faq-item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(244, 243, 239, 0.92);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.elo-faq-item summary::-webkit-details-marker {
  display: none;
}

.elo-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(240, 230, 200, 0.7);
  transition: transform 0.2s ease;
}

.elo-faq-item[open] summary::after {
  content: "–";
}

.elo-faq-item p {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(244, 243, 239, 0.62);
  padding: 0 18px 18px;
  margin: 0;
}

.elo-faq-item a {
  color: #f0e6c8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.elo-seo {
  position: relative;
  z-index: 2;
  padding: 48px var(--gutter) 96px;
  border-top: 1px solid rgba(244, 243, 239, 0.1);
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.55), rgba(8, 9, 11, 0.92));
}

.elo-seo-inner {
  max-width: 680px;
  margin: 0 auto;
}

.elo-seo-kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 230, 200, 0.55);
  margin-bottom: 12px;
}

.elo-seo h2 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3.5vw, 1.9rem);
  font-weight: 700;
  color: #f0e6c8;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
}

.elo-seo h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(244, 243, 239, 0.92);
  margin: 28px 0 10px;
}

.elo-seo p,
.elo-seo li {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(244, 243, 239, 0.62);
}

.elo-seo p + p {
  margin-top: 12px;
}

.elo-seo ul {
  margin: 10px 0 0;
  padding-left: 1.15em;
}

.elo-seo li {
  margin: 6px 0;
}

.elo-seo a {
  color: #f0e6c8;
  border-bottom: 1px solid rgba(240, 230, 200, 0.35);
  transition: border-color 0.2s ease;
}

.elo-seo a:hover {
  border-bottom-color: #f0e6c8;
}

.elo-seo-note {
  margin-top: 28px;
  font-size: 0.8rem;
  color: rgba(244, 243, 239, 0.45);
}

/* -  - Play screen -  - */
.elo-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background: var(--obsidian);
}

.elo-play-bar {
  display: none !important;
}

.elo-game-streak,
.elo-game-best,
.elo-game-prompt {
  display: none !important;
}

/* VS stage + cards */
.elo-game-vs {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: var(--obsidian);
}

.elo-card[data-elo-card="left"] {
  grid-column: 1;
  grid-row: 1;
}

.elo-card[data-elo-card="right"] {
  grid-column: 2;
  grid-row: 1;
}

.elo-game-divider {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  pointer-events: none;
  align-self: stretch;
  justify-self: stretch;
}

.elo-game-divider span {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: #ffffff;
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  background: none;
  display: block;
  place-items: unset;
  box-shadow: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.elo-card {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: block;
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: inherit;
  transition: opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.elo-card.is-disabled {
  cursor: default;
  pointer-events: none;
}

.elo-card:not(.is-disabled):hover .elo-card-arrow {
  transform: scale(1.08);
}

.elo-card:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: -2px;
}

.elo-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--obsidian);
  margin: 0;
  isolation: isolate;
}

.elo-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 14, 0.05) 0%, transparent 40%, rgba(11, 12, 14, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

.elo-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: contrast(1.04) saturate(0.92);
  position: relative;
  z-index: 0;
}

.elo-card-center {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-bottom: 10%;
  pointer-events: none;
}

.elo-card-arrow {
  display: grid;
  place-items: center;
  opacity: 1;
  color: #22c55e;
  transform: scale(1);
  transition: transform 0.2s ease, color 0.2s ease;
}

.elo-card-arrow svg {
  width: clamp(48px, 9vw, 72px);
  height: clamp(48px, 9vw, 72px);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  padding: 12px;
  box-sizing: content-box;
  box-shadow: 0 8px 24px rgba(11, 12, 14, 0.22);
}

.elo-card-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 3.6em;
  text-align: center;
  visibility: hidden;
  opacity: 0;
}

.elo-card.is-reveal .elo-card-score {
  visibility: visible;
  opacity: 1;
}

.elo-card.is-picked .elo-card-arrow {
  animation: eloArrowPop 0.45s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.elo-card.is-picked.is-correct .elo-card-arrow {
  color: #16a34a;
}

.elo-card.is-picked.is-correct .elo-card-arrow svg {
  background: #22c55e;
}

.elo-card.is-picked.is-correct .elo-card-arrow svg path {
  stroke: #fff;
}

.elo-card.is-picked.is-wrong .elo-card-arrow {
  color: #dc2626;
}

.elo-card.is-picked.is-wrong .elo-card-arrow svg {
  background: #ef4444;
}

.elo-card.is-picked.is-wrong .elo-card-arrow svg path {
  stroke: #fff;
}

.elo-card.is-dim {
  opacity: 0.55;
}

.elo-card.is-dim .elo-card-arrow {
  opacity: 0.25;
}

.elo-card-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: 100%;
  padding: 28px 22px 22px;
  text-align: left;
  box-sizing: border-box;
  pointer-events: none;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: rgba(8, 9, 11, 0.9);
  background: linear-gradient(180deg, rgba(8, 9, 11, 0) 0%, rgba(8, 9, 11, 0.78) 28%, rgba(8, 9, 11, 0.94) 100%);
}

.elo-card-name {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff !important;
  margin: 0 0 6px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}

.elo-card-blurb {
  font-family: var(--sans);
  font-size: clamp(0.72rem, 1.5vw, 0.86rem);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 36ch;
  margin: 0;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}

.elo-card-elo {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f0e6c8 !important;
  line-height: 1;
  min-height: 1.05em;
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 1;
}

.elo-card-elo[hidden],
.elo-card-label[hidden] {
  display: none !important;
}

.elo-card-label {
  margin: 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.elo-card.is-reveal .elo-card-elo {
  animation: eloReveal 0.55s ease both;
}

.elo-card.is-correct .elo-card-media {
  box-shadow: inset 0 0 0 3px #22c55e;
}

.elo-card.is-wrong .elo-card-media {
  box-shadow: inset 0 0 0 3px #c44;
}

.elo-card.is-enter {
  animation: eloEnter 0.4s ease both;
}

@media (min-width: 701px) {
  .elo-card-center {
    padding-bottom: 8%;
    gap: 18px;
  }

  .elo-card-meta {
    padding: 32px 28px 26px;
    background: rgba(8, 9, 11, 0.92) !important;
  }

  .elo-card-name {
    font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  }

  .elo-card-blurb {
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    max-width: 42ch;
  }

  .elo-card-elo {
    font-size: clamp(2.4rem, 3.2vw, 3.4rem);
  }

  .elo-card.is-enter {
    animation: eloEnterFade 0.35s ease both;
  }
}

@keyframes eloEnterFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.elo-game-vs.is-shake {
  animation: eloShake 0.45s ease;
}

.elo-game-vs.is-over {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.25);
}

.elo-game-disclaimer--play {
  display: none !important;
}

.elo-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 18px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.elo-btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.elo-btn--again {
  background: linear-gradient(180deg, var(--btn-gold-hi), var(--btn-gold));
  color: var(--ink);
  width: 100%;
  border-radius: 999px;
}

.elo-btn--again:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #faf0c0, var(--btn-gold-hover));
}

.elo-play.is-over::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(11, 12, 14, 0.42);
  pointer-events: none;
}

.board-game-page .elo-play.is-over::before {
  background: rgba(11, 12, 14, 0.3);
  backdrop-filter: blur(2px);
}

.elo-game-over {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  text-align: center;
  padding: 0;
  width: min(86vw, 340px);
  max-height: min(90dvh, 760px);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(11, 12, 14, 0.28);
}

@media (min-width: 821px) {
  .board-game-page .elo-game-over {
    width: min(92vw, 480px);
    max-height: min(88dvh, 820px);
    border-radius: 22px;
  }

  .board-game-page .board-over-modal {
    width: min(70vw, 620px);
    max-height: min(90dvh, 760px);
    border-radius: 24px;
    box-shadow: 0 28px 72px rgba(11, 12, 14, 0.22);
  }

  .board-game-page .board-over-media {
    border-radius: 24px 24px 0 0;
  }

  .board-game-page .board-over-foot {
    border-radius: 0 0 24px 24px;
    padding: 18px 22px 20px;
  }

  .board-game-page .elo-over-board-media {
    aspect-ratio: 5 / 4;
  }

  .board-game-page .elo-over-board-bar {
    padding: 16px 22px;
  }

  .board-game-page .elo-over-board-name {
    font-size: 1.2rem;
  }

  .board-game-page .board-over-shop {
    padding: 16px 24px 14px;
  }

  .board-game-page .board-over-feats {
    gap: 28px;
  }

  .board-game-page .board-over-feat {
    width: 96px;
  }

  .board-game-page .board-over-feat img {
    width: 48px;
    height: 48px;
  }

  .board-game-page .elo-over-body {
    padding: 26px 28px 28px;
  }

  .board-game-page .elo-game-over-title {
    font-size: 2rem;
  }
}

.elo-game-over:not([hidden]) {
  animation: eloOverIn 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.elo-over-board {
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  text-align: left;
}

.elo-over-board-media {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
}

.elo-over-board-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  background: var(--obsidian);
  transition: transform 0.45s ease;
}

body.dev-mode.dev-editing .elo-over-board-media .upload-hint {
  z-index: 6;
}

.elo-over-board:hover .elo-over-board-img {
  transform: scale(1.04);
}

.elo-over-board-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ink, #0b0c0e);
  color: #ffffff;
  box-shadow: none;
}

.elo-over-board-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.elo-over-board-kicker {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: none;
}

.elo-over-board-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: none;
}

.elo-over-board-arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #ffffff;
  text-shadow: none;
  transition: transform 0.2s ease;
}

.elo-over-board-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

.elo-over-board:hover .elo-over-board-arrow {
  transform: translateX(3px);
}

.elo-over-body {
  padding: 22px 22px 24px;
}

.elo-game-over-title {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 4.5vw, 1.85rem);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
}

.elo-game-over-sub {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
}

/* Guess the Board end card — shop strip under the hero photo */
.board-over-shop {
  display: block;
  padding: 14px 18px 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.board-over-feats {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 10px;
}

.board-over-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  width: 78px;
}

.board-over-feat img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.board-over-feat > span {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}

.board-over-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
}

.board-over-rating .stars {
  --star-size: 12px;
  --star-gap: 2px;
}

/* Guess the Board end modal */
.board-game-page .board-over-modal.elo-game-over,
.board-game-page .board-over-modal {
  display: flex;
  flex-direction: column;
  width: min(90vw, 400px);
  height: auto;
  max-height: min(92dvh, 640px);
  overflow: visible;
  border: 1px solid rgba(11, 12, 14, 0.08);
  border-radius: 22px;
  box-shadow: 0 22px 56px rgba(11, 12, 14, 0.18);
  background: #0b0c0e;
}

.board-over-media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: #0b0c0e;
}

.board-over-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 12, 14, 0.42) 0%, rgba(11, 12, 14, 0.12) 28%, rgba(11, 12, 14, 0.14) 45%, rgba(11, 12, 14, 0.55) 100%);
}

.board-over-media-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.42);
  transform-origin: center center;
}

.board-over-cta {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(72%, 200px);
  transform: translateX(-50%);
}

.board-over-social {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px;
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(11, 12, 14, 0.45);
  white-space: nowrap;
}

.board-over-social .stars {
  --star-size: 12px;
  --star-gap: 2px;
}

.board-over-shop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid rgba(11, 12, 14, 0.14);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
}

.board-over-shop-btn:hover {
  transform: translateY(-1px);
  background: #f5f5f3;
  border-color: rgba(11, 12, 14, 0.22);
}

.board-over-shop-btn--overlay {
  position: static;
  left: auto;
  bottom: auto;
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 11px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  transform: none;
  border: none;
  background: linear-gradient(180deg, var(--btn-gold-hi), var(--btn-gold));
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(11, 12, 14, 0.24);
}

.board-over-shop-btn--overlay span[aria-hidden="true"] {
  letter-spacing: 0;
  font-size: 1.05em;
  line-height: 1;
}

.board-over-shop-btn--overlay:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #faf0c0, var(--btn-gold-hover));
  border-color: transparent;
}

.board-over-foot {
  flex: 0 0 auto;
  padding: 16px 18px 18px;
  text-align: center;
  background: #ffffff;
  border-radius: 0 0 22px 22px;
}

.board-over-streak {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(11, 12, 14, 0.48);
}

.board-over-modal .elo-game-over-title {
  margin: 0 0 14px;
  font-size: clamp(1.35rem, 4.5vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.board-over-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.board-over-actions .elo-btn--again {
  width: 100%;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(11, 12, 14, 0.14);
  color: var(--ink);
  box-shadow: none;
}

.board-over-actions .elo-btn--again:hover {
  transform: translateY(-1px);
  background: #f5f5f3;
}

.elo-game-soft-link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
}

.elo-game-disclaimer--play {
  font-family: var(--sans);
  font-size: 9px;
  line-height: 1.4;
  color: rgba(111, 114, 120, 0.75);
  text-align: center;
  max-width: 560px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

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

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

@keyframes eloShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes eloOverIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px)) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes eloArrowPop {
  0% { opacity: 0; transform: translateY(16px) scale(0.7); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes eloMosaicDrift {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

@media (max-height: 700px) {
  .elo-game-over {
    width: min(72vw, 260px);
  }

  .board-game-page .elo-game-over {
    width: min(86vw, 400px);
  }

  .board-game-page .board-over-modal {
    width: min(92vw, 380px);
  }

  .elo-over-body {
    padding: 16px 18px 18px;
  }
}

@media (max-width: 700px) {
  .elo-intro-mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    opacity: 0.32;
  }

  .elo-play {
    padding: 0;
    overflow: hidden;
    background: var(--obsidian);
  }

  .elo-game-vs {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    height: 100%;
  }

  .elo-card[data-elo-card="left"] {
    grid-column: 1;
    grid-row: 1;
  }

  .elo-card[data-elo-card="right"] {
    grid-column: 1;
    grid-row: 2;
  }

  .elo-game-divider {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .elo-game-divider span {
    width: auto;
    height: auto;
    font-size: 10px;
  }

  .elo-card-center {
    padding-bottom: 6%;
    gap: 10px;
  }

  .elo-card-arrow svg {
    width: 28px;
    height: 28px;
    padding: 8px;
    box-shadow: 0 4px 14px rgba(11, 12, 14, 0.2);
  }

  .elo-card-meta {
    padding: 40px 16px 16px;
    text-align: left;
    z-index: 20;
  }

  .elo-card-name {
    font-size: 1.2rem;
    color: #ffffff !important;
  }

  .elo-card-blurb {
    font-size: 0.74rem;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.82) !important;
  }

  .elo-card-elo {
    font-size: 1.85rem;
    color: #f0e6c8 !important;
  }

  .elo-over-body {
    padding: 18px 18px 20px;
  }

  .elo-over-board-bar {
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elo-card.is-reveal .elo-card-elo,
  .elo-card.is-enter,
  .elo-game-vs.is-shake,
  .elo-card.is-picked .elo-card-arrow,
  .elo-mosaic-tile,
  .elo-game-over:not([hidden]) {
    animation: none !important;
  }

  .elo-card.is-picked .elo-card-arrow {
    opacity: 1;
    transform: none;
  }

  .elo-over-board:hover .elo-over-board-img,
  .elo-over-board:hover .elo-over-board-arrow {
    transform: none;
  }
}

/* Guess the Board — Elo VS format */
.board-play-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.board-play-hud [data-board-score] {
  color: #ffffff;
  font-size: 13px;
  transition: color 0.2s ease;
}

.board-play-hud [data-board-score].is-hit {
  color: #4ade80;
}

.board-play-hud [data-board-round],
.board-play-hud .board-strikes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  color: #ffffff;
}

.board-strike {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  box-sizing: border-box;
}

.board-strike.is-on {
  background: #f87171;
  border-color: #f87171;
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.45);
}

.board-play-hud [data-board-best-live] {
  text-align: right;
}

.board-play-streak {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: -2px;
  color: rgba(255, 255, 255, 0.72);
}

.board-play-streak.is-hot {
  color: #4ade80;
}

.board-play-streak:not(.is-hot):empty,
.board-play-streak[data-empty="1"] {
  display: none;
}

.board-strike-flash {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
  font-family: var(--serif, "PT Serif", Georgia, serif);
  font-size: clamp(2.6rem, 10vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #ef4444;
  text-shadow:
    0 1px 0 rgba(11, 12, 14, 0.2),
    0 10px 32px rgba(11, 12, 14, 0.45);
  opacity: 0;
  transform: scale(0.84);
}

.board-strike-flash[hidden] {
  display: none !important;
}

.board-strike-flash.is-on {
  animation: board-strike-bang 1.5s ease forwards;
}

@keyframes board-strike-bang {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  10% {
    opacity: 1;
    transform: scale(1.08);
  }
  78% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-strike-flash.is-on {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 821px) {
  .board-game-page.elo-playing .elo-play {
    padding: 56px clamp(28px, 4vw, 64px) 36px;
    align-items: center;
    justify-content: center;
    background: var(--paper);
  }

  html:has(body.board-game-page.elo-playing),
  body.board-game-page.elo-playing {
    background: var(--paper);
  }

  .board-game-page.elo-playing .board-play-hud {
    left: 50%;
    right: auto;
    width: min(1120px, calc(100% - 56px));
    transform: translateX(-50%);
    padding: 18px 8px 0;
    text-shadow: none;
    color: rgba(11, 12, 14, 0.55);
  }

  .board-game-page.elo-playing .board-play-hud [data-board-score],
  .board-game-page.elo-playing .board-play-hud [data-board-round] {
    color: var(--ink);
  }

  .board-game-page.elo-playing .board-strike {
    border-color: rgba(11, 12, 14, 0.28);
  }

  .board-game-page.elo-playing .board-strike.is-on {
    background: #ef4444;
    border-color: #ef4444;
    box-shadow: none;
  }

  .board-game-page.elo-playing .board-play-hud [data-board-best-live] {
    color: rgba(11, 12, 14, 0.45);
  }

  .board-game-page.elo-playing .board-play-streak {
    color: rgba(11, 12, 14, 0.45);
  }

  .board-game-page.elo-playing .board-play-streak.is-hot,
  .board-game-page.elo-playing .board-play-hud [data-board-score].is-hit {
    color: #16a34a;
  }

  .board-game-page.elo-playing .board-strike-flash {
    color: #ef4444;
    text-shadow: 0 10px 36px rgba(11, 12, 14, 0.18);
  }

  .board-game-page.elo-playing .elo-game-vs {
    flex: 0 1 auto;
    width: min(1120px, 100%);
    height: min(680px, calc(100dvh - 160px));
    max-height: calc(100dvh - 160px);
    gap: 14px;
    background: transparent;
  }

  .board-game-page.elo-playing .elo-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(11, 12, 14, 0.14);
  }

  .board-game-page.elo-playing .elo-card-media {
    border-radius: 20px;
  }

  .board-game-page.elo-playing .elo-card-meta {
    border-radius: 0 0 20px 20px;
  }

  .board-game-page.elo-playing .elo-game-divider span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(11, 12, 14, 0.08);
    color: var(--ink);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(11, 12, 14, 0.1);
    text-shadow: none;
  }
}

.board-game-page .elo-card-media img,
.board-game-page .elo-mosaic-tile img {
  object-fit: cover;
  object-position: 50% 50%;
  filter: contrast(1.02) saturate(1);
}

/* Guess the Board — white intro with faded board collage */
.board-game-page .elo-intro {
  background: var(--paper);
  color: var(--ink);
}

.board-game-page .elo-intro-mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 8px;
  padding: 10px;
  box-sizing: border-box;
  opacity: 1;
  filter: none;
}

.board-game-page .elo-mosaic-tile {
  position: relative;
  min-height: 0;
  min-width: 0;
  border-radius: 10px;
  background: #ececea;
  overflow: hidden;
}

.board-game-page .elo-mosaic-tile.is-wide {
  grid-column: span 2;
}

.board-game-page .elo-mosaic-tile.is-tall {
  grid-row: span 2;
}

.board-game-page .elo-mosaic-tile.is-feature {
  grid-column: span 2;
  grid-row: span 2;
}

.board-game-page .elo-mosaic-tile img {
  opacity: 0.55;
  filter: saturate(0.84) contrast(1.04);
}

.board-game-page .elo-mosaic-price {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  margin: 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(11, 12, 14, 0.42);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.board-game-page .elo-intro-veil {
  background:
    linear-gradient(
      to top,
      #ffffff 0%,
      rgba(255, 255, 255, 0.97) 18%,
      rgba(255, 255, 255, 0.88) 36%,
      rgba(255, 255, 255, 0.62) 54%,
      rgba(255, 255, 255, 0.28) 74%,
      rgba(255, 255, 255, 0.06) 100%
    ),
    radial-gradient(
      ellipse 70% 55% at 50% 36%,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.42) 55%,
      rgba(255, 255, 255, 0.08) 100%
    );
}

.board-game-page .elo-intro-kicker {
  color: var(--muted);
}

.board-game-page .elo-intro-content h1 {
  color: var(--ink);
}

.board-game-page .elo-intro-lede {
  color: rgba(11, 12, 14, 0.62);
  max-width: 22em;
}

.board-game-page .board-intro-card h1 {
  font-size: clamp(2.2rem, 7.5vw, 3rem);
}

.board-intro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  padding: 30px 24px 28px;
  border-radius: 26px;
  border: 1px solid rgba(11, 12, 14, 0.06);
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(11, 12, 14, 0.1);
}

.board-duel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.board-duel-card {
  position: relative;
  width: clamp(104px, 30vw, 132px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid #fff;
  background: #ececea;
  box-shadow: 0 14px 32px rgba(11, 12, 14, 0.2);
}

.board-duel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.board-duel-card--left {
  transform: rotate(-5deg) translateY(5px);
}

.board-duel-card--right {
  margin-left: -16px;
  transform: rotate(5deg) translateY(-3px);
}

.board-duel-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

.board-duel-tag--mystery {
  background: linear-gradient(180deg, var(--btn-gold-hi), var(--btn-gold));
  color: var(--ink);
  font-weight: 700;
  min-width: 1.2em;
  text-align: center;
}

.board-duel-vs {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(11, 12, 14, 0.16);
}

.board-intro-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 12, 14, 0.45);
}

.board-intro-meta span + span::before {
  content: "\00b7";
  margin-right: 10px;
  color: rgba(11, 12, 14, 0.3);
}

@media (min-width: 900px) {
  .board-game-page .elo-intro-mosaic {
    inset: auto;
    left: 50%;
    top: 50%;
    width: min(1120px, 92vw);
    height: min(100%, 780px);
    transform: translate(-50%, -50%);
    gap: 10px;
    padding: 0;
    -webkit-mask-image: radial-gradient(
      ellipse 60% 58% at 50% 47%,
      #000 30%,
      rgba(0, 0, 0, 0.55) 56%,
      transparent 78%
    );
    mask-image: radial-gradient(
      ellipse 60% 58% at 50% 47%,
      #000 30%,
      rgba(0, 0, 0, 0.55) 56%,
      transparent 78%
    );
  }

  .board-game-page .elo-mosaic-tile img {
    opacity: 0.42;
  }

  .board-game-page .elo-intro-veil {
    background: radial-gradient(
      ellipse 58% 52% at 50% 44%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.24) 55%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .board-intro-card {
    max-width: 720px;
    padding: 44px 56px 40px;
  }

  .board-game-page .elo-intro-content {
    max-width: 820px;
  }

  .board-game-page .elo-intro-lede {
    max-width: 30em;
  }

  .board-game-page .board-intro-card h1 {
    font-size: 3rem;
  }

  .board-duel-card {
    width: 152px;
  }

  .board-duel-vs {
    width: 40px;
    height: 40px;
    font-size: 11px;
  }
}

.board-game-page .elo-intro-best {
  color: rgba(11, 12, 14, 0.45);
}

.board-game-page .elo-intro-faq-jump {
  color: rgba(11, 12, 14, 0.55);
  border-bottom-color: rgba(11, 12, 14, 0.22);
}

.board-game-page .elo-intro-faq-jump:hover {
  color: var(--ink);
  border-bottom-color: rgba(11, 12, 14, 0.45);
}

.board-game-page .elo-intro-faq h2,
.board-game-page .elo-seo h2 {
  color: var(--ink);
}

.board-game-page .elo-faq-item {
  border-color: var(--hairline);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
}

.board-game-page .elo-faq-item summary {
  color: var(--ink);
}

.board-game-page .elo-faq-item summary::after {
  color: var(--muted);
}

.board-game-page .elo-faq-item p {
  color: rgba(11, 12, 14, 0.62);
}

.board-game-page .elo-faq-item a,
.board-game-page .elo-seo a {
  color: var(--ink);
  border-bottom-color: rgba(11, 12, 14, 0.28);
}

.board-game-page .elo-seo a:hover {
  border-bottom-color: var(--ink);
}

.board-game-page .elo-seo {
  border-top-color: var(--hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), var(--paper) 22%);
}

.board-game-page .elo-seo-kicker {
  color: var(--muted);
}

.board-game-page .elo-seo h3 {
  color: var(--ink);
}

.board-game-page .elo-seo p,
.board-game-page .elo-seo li {
  color: rgba(11, 12, 14, 0.62);
}

.board-game-page .elo-seo-note {
  color: rgba(11, 12, 14, 0.42);
}

@media (max-width: 700px) {
  .board-game-page .elo-intro-mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(7, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
  }

  .board-game-page .elo-mosaic-tile img {
    opacity: 0.5;
  }

  .board-game-page .elo-mosaic-price {
    top: 4px;
    right: 4px;
    padding: 3px 6px;
    font-size: 8px;
  }
}

.board-play-confetti {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.board-play-confetti__canvas {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

/* Admin - email flows */
.admin-email-test {
  margin: 12px 0 4px;
  padding: 14px 16px;
  border: 1px solid #e8e8e8;
  background: #fafafa;
}

.admin-email-test-note {
  margin: 6px 0 12px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #444;
}

.admin-email-test-to {
  margin: 0 0 12px;
  max-width: 360px;
}

.admin-email-test-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.admin-email-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 8px;
}

.admin-email-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(78vh, 900px);
  overflow: auto;
}

.admin-email-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #e8e8e8;
  background: #fff;
  padding: 14px 16px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.admin-email-card:hover {
  border-color: #cfcfcf;
}

.admin-email-card.is-active {
  border-color: #0d0e10;
}

.admin-email-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.admin-email-card-top strong {
  font-family: 'PT Serif', Georgia, serif;
  font-weight: 700;
  font-size: 1.02rem;
}

.admin-email-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid #e8e8e8;
  color: #5c5d60;
}

.admin-email-badge.is-live {
  border-color: #0d0e10;
  color: #0d0e10;
}

.admin-email-badge.is-ready {
  border-color: #8a8b8e;
  color: #3a3b3e;
}

.admin-email-meta {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #8a8b8e;
}

.admin-email-notes {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #3a3b3e;
}

.admin-email-preview-pane {
  border: 1px solid #e8e8e8;
  background: #fafafa;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.admin-email-preview-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
}

.admin-email-media {
  padding: 12px 16px 14px;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.admin-email-media[hidden] {
  display: none !important;
}

.admin-email-editor {
  padding: 12px 16px 16px;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-email-editor[hidden] {
  display: none !important;
}

.admin-email-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a8b8e;
}

.admin-email-field input,
.admin-email-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e8e8e8;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  color: #0d0e10;
  background: #fff;
}

.admin-email-field textarea {
  resize: vertical;
  min-height: 72px;
}

.admin-email-editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-btn.is-active {
  background: #0d0e10;
  color: #fff;
  border-color: #0d0e10;
}

.admin-email-media-thumb {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  border: 1px solid #e8e8e8;
  background: #fafafa;
}

.admin-email-upload {
  display: inline-flex;
  cursor: pointer;
}

.admin-email-media-note {
  margin: 0;
  font-size: 0.78rem;
  color: #8a8b8e;
  line-height: 1.4;
}

.admin-email-subject {
  margin: 4px 0 0;
  font-family: 'PT Serif', Georgia, serif;
  font-size: 1.05rem;
  color: #0d0e10;
}

.admin-email-preview-snippet {
  margin: 6px 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #5c5d60;
}

.admin-email-frame {
  width: 100%;
  flex: 1;
  min-height: 560px;
  border: 0;
  background: #fff;
}

.admin-email-empty {
  margin: 0;
  padding: 28px 18px;
  color: #8a8b8e;
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .admin-email-layout {
    grid-template-columns: 1fr;
  }

  .admin-email-list {
    max-height: none;
  }
}

/* ---------- LLM SEO / Journal (DER-IV-TE) ---------- */
.seo-answer-block {
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--ink);
}

.utility-hero .seo-answer-block {
  max-width: 42rem;
}

.seo-knowledge-loop {
  margin: 0 0 2.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.seo-loop-label {
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6c6f;
}

.seo-loop-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.seo-loop-links a {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.seo-fact-footer {
  margin: 3rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.seo-fact-footer h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  margin: 0 0 1rem;
}

.seo-takeaways {
  margin: 1.5rem 0;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2rem;
  margin: 0 0 2.5rem;
}

.journal-card {
  padding: 0;
  border: 0;
  background: transparent;
}

.journal-meta {
  margin: 0 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6c6f;
}

.journal-card h2 {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 400;
}

.journal-card h2 a {
  color: inherit;
  text-decoration: none;
}

.journal-card h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.journal-card p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #5c5d60;
}

.seo-seen-with {
  margin: 2.5rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.seo-seen-with h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
}

.seo-seen-with p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #5c5d60;
  max-width: 36rem;
}

.seo-seen-with ul {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.seo-seen-with li {
  font-family: var(--sans);
  font-size: 0.875rem;
}

@media (max-width: 700px) {
  .journal-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   The Chess Atlas (/atlas) — light editorial theme
   ============================================================ */

/* Desktop zoom breaks full-viewport hero + fixed overlay — keep 1:1 (same as Elo) */
@media (min-width: 1021px) {
  html:not(.checkmate-open):has(body.atlas-page) {
    zoom: 1;
  }
}

.atlas-page {
  background: var(--paper);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.atlas-page ::selection {
  background: rgba(13, 14, 16, 0.12);
}

/* Desktop: globe owns drag. Mobile: allow vertical page scroll over the canvas. */
.atlas-hero-globe,
.atlas-hero-globe canvas {
  touch-action: none;
}

@media (max-width: 899px) {
  .atlas-hero-globe,
  .atlas-hero-globe canvas {
    touch-action: pan-y;
  }
}

/* ---------- Type helpers ---------- */
.atlas-eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1rem;
}

.atlas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0 2.4rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.atlas-btn--gold {
  background: var(--btn-gold);
  color: var(--ink);
}

.atlas-btn--gold:hover {
  background: var(--btn-gold-hover);
}

.atlas-btn--ghost {
  border-color: rgba(13, 14, 16, 0.3);
}

.atlas-btn--ghost:hover {
  border-color: rgba(13, 14, 16, 0.7);
}

.atlas-btn:active {
  transform: scale(0.98);
}

.atlas-btn--pill {
  border-radius: 999px;
  padding: 0 2.6rem;
}

.atlas-link {
  display: inline-block;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 14, 16, 0.2);
  padding-bottom: 0.3rem;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.atlas-link:hover {
  color: var(--ink);
  border-color: rgba(13, 14, 16, 0.55);
}

.atlas-page :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- Header ---------- */
.atlas-page .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease;
}

.atlas-page .site-header .site-nav a[aria-current="page"] {
  color: var(--ink);
}

.atlas-page .site-header.is-solid {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--hairline);
}

/* ---------- Hero ---------- */
.atlas-hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  isolation: isolate;
  overflow: hidden;
}

.atlas-hero-globe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.atlas-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 44%, transparent 30%, rgba(255, 255, 255, 0.45) 72%, rgba(255, 255, 255, 0.9) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, transparent 26%, transparent 60%, rgba(255, 255, 255, 0.96) 100%);
}

.atlas-hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 1.5rem calc(5.5rem + env(safe-area-inset-bottom));
  pointer-events: none;
}

.atlas-hero-content > * {
  pointer-events: auto;
}

.atlas-hero-copy {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 44%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.atlas-hero.is-exploring .atlas-hero-copy {
  opacity: 0;
  transform: translateY(calc(-50% - 14px));
  pointer-events: none;
}

.atlas-hero-ctas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin: 0;
}

.atlas-hero-content h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  margin: 0 auto 1.15rem;
  max-width: 24ch;
  text-wrap: balance;
  color: var(--ink);
}

.atlas-hero-sub {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  letter-spacing: 0.04em;
  color: rgba(13, 14, 16, 0.65);
  margin: 0;
}

.atlas-hero-ctas .atlas-btn--pill {
  min-height: 3.25rem;
  padding: 0 2.85rem;
}

/* ---------- Story strip under globe ---------- */
.atlas-strip {
  position: relative;
  z-index: 2;
  max-width: 40rem;
  margin: -0.5rem auto 0;
  padding: 0 0.75rem clamp(1.75rem, 4.5vh, 3rem);
}

.atlas-strip-head {
  text-align: center;
  margin: 0 auto 1.35rem;
  max-width: 34rem;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.atlas-strip-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.2vw, 2.2rem);
  line-height: 1.22;
  margin: 0 0 0.75rem;
  color: var(--ink);
  text-wrap: balance;
}

.atlas-strip-head p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(13, 14, 16, 0.58);
  margin: 0;
  text-wrap: pretty;
}

.atlas-strip-carousel {
  width: min(100%, 17.5rem);
  margin: 1.15rem auto 1.15rem;
}

.atlas-strip-cta {
  display: inline-flex;
  margin: 1.35rem auto 0;
  text-decoration: none;
}

.atlas-strip-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 0 0 0.7rem;
}

.atlas-strip-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 14, 16, 0.22);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.atlas-strip-dot.is-active {
  background: var(--ink);
  transform: scale(1.15);
}

.atlas-strip-dot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.atlas-strip-carousel-rail {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.atlas-strip-upload {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #eceae6;
  transform-origin: center bottom;
  box-shadow:
    0 14px 32px rgba(11, 12, 14, 0.14),
    0 2px 8px rgba(11, 12, 14, 0.06);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.35s ease,
    box-shadow 0.45s ease;
  will-change: transform;
}

.atlas-strip-upload[data-stack="0"] {
  z-index: 3;
  pointer-events: auto;
  cursor: grab;
  transform: translate3d(var(--stack-drag, 0px), 0, 0) scale(1);
  opacity: 1;
}

.atlas-strip-upload[data-stack="0"]:active {
  cursor: grabbing;
}

.atlas-strip-upload[data-stack="1"] {
  z-index: 2;
  transform: translate3d(0, 14px, 0) scale(0.93);
  opacity: 1;
}

.atlas-strip-upload[data-stack="2"] {
  z-index: 1;
  transform: translate3d(0, 26px, 0) scale(0.86);
  opacity: 0.9;
}

.atlas-strip-upload.is-dragging {
  transition: none;
}

.atlas-strip-upload img,
.atlas-strip-upload .seo-upload-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

@media (min-width: 900px) {
  .atlas-strip-carousel {
    width: min(100%, 56rem);
    margin: 1.35rem auto 1.5rem;
  }

  .atlas-strip-carousel-dots {
    display: none;
  }

  .atlas-strip-carousel-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 20px);
    aspect-ratio: auto;
    overflow: visible;
    touch-action: auto;
    user-select: auto;
    -webkit-user-select: auto;
  }

  .atlas-strip-upload {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 5;
    height: auto;
    transform: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    pointer-events: auto;
    cursor: default;
    transition: box-shadow 0.35s ease;
  }

  .atlas-strip-upload:hover {
    box-shadow:
      0 18px 40px rgba(11, 12, 14, 0.16),
      0 4px 12px rgba(11, 12, 14, 0.08);
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .atlas-strip-carousel-rail {
    overflow: hidden;
  }

  .atlas-strip-upload[data-stack="1"],
  .atlas-strip-upload[data-stack="2"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
  }
}

body.dev-mode.dev-editing .atlas-strip-upload[data-stack="1"],
body.dev-mode.dev-editing .atlas-strip-upload[data-stack="2"] {
  pointer-events: auto;
  cursor: pointer;
}

.atlas-strip-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
}

.atlas-strip-nav {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(13, 14, 16, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.atlas-strip-nav svg {
  width: 12px;
  height: 12px;
}

.atlas-strip-nav:hover:not(:disabled) {
  border-color: rgba(13, 14, 16, 0.4);
  background: #fff;
}

.atlas-strip-nav:disabled {
  opacity: 0.28;
  cursor: default;
}

.atlas-strip-rail {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.atlas-strip-rail::-webkit-scrollbar {
  display: none;
}

.atlas-strip-card {
  flex: 0 0 calc(50% - 0.325rem);
  scroll-snap-align: start;
  display: block;
  padding: 0;
  border: none;
  background: #111;
  color: #fff;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  isolation: isolate;
  border-radius: 1.05rem;
}

.atlas-strip-media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  margin: 0;
  background: #1a1a1a;
  border-radius: inherit;
}

.atlas-strip-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s ease;
  filter: brightness(0.9);
}

.atlas-strip-card:hover .atlas-strip-media img,
.atlas-strip-card:focus-visible .atlas-strip-media img {
  transform: scale(1.05);
  filter: brightness(1);
}

.atlas-strip-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.5rem 0.65rem 0.55rem;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 9, 11, 0.55) 45%, rgba(8, 9, 11, 0.9) 100%);
  pointer-events: none;
}

.atlas-strip-title {
  display: block;
  font-family: var(--serif);
  font-size: 0.82rem;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 0.2rem;
  text-wrap: balance;
}

.atlas-strip-place {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
}

.atlas-strip-place .atlas-place-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-strip-card .atlas-flag {
  width: 14px;
  height: 10px;
  min-width: 14px;
  min-height: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
}

.atlas-strip-card > .seo-upload-img {
  display: none !important;
}

@media (max-width: 640px) {
  .atlas-strip {
    max-width: none;
    margin-top: 0;
    padding-inline: 0.55rem;
  }

  .atlas-strip-head {
    margin-bottom: 1.1rem;
    padding-top: 2.75rem;
  }

  .atlas-strip-head h2 {
    font-size: clamp(1.4rem, 6.2vw, 1.85rem);
  }

  .atlas-strip-head p {
    font-size: 0.88rem;
  }

  .atlas-strip-row {
    gap: 0.35rem;
  }

  .atlas-strip-nav {
    width: 2.1rem;
    height: 2.1rem;
  }

  .atlas-strip-rail {
    gap: 0.5rem;
  }

  .atlas-strip-card {
    flex-basis: calc(50% - 0.25rem);
  }
}

@media (max-width: 640px) {
  .atlas-hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(4.35rem + env(safe-area-inset-top)) 0 calc(1.15rem + env(safe-area-inset-bottom));
    gap: 0.55rem;
  }

  /* Stack: copy → globe → CTA, compact but breathing */
  .atlas-hero-globe {
    position: relative;
    inset: auto;
    top: auto;
    left: 0;
    right: 0;
    order: 2;
    width: min(100%, 24.7rem);
    height: 17.25rem;
    max-height: none;
    margin: 0.35rem auto 0.55rem;
    overflow: hidden;
    transition: height 0.55s ease, width 0.55s ease, margin 0.55s ease;
  }

  .atlas-hero.is-exploring .atlas-hero-globe {
    top: auto;
    width: min(100%, 28.6rem);
    height: 22.75rem;
    margin: 0.55rem auto 0.7rem;
  }

  .atlas-hero-veil {
    display: none;
  }

  .atlas-hero-content {
    position: relative;
    inset: auto;
    display: contents;
    padding: 0;
  }

  .atlas-hero-copy {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    order: 1;
    z-index: 2;
    width: 100%;
    max-width: 22rem;
    margin: 0;
    padding: 0 1.25rem;
    transition: opacity 0.55s ease, transform 0.55s ease, max-height 0.55s ease, margin 0.55s ease, padding 0.55s ease;
    max-height: 12rem;
  }

  .atlas-hero.is-exploring .atlas-hero-copy {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .atlas-hero-content h1 {
    font-size: clamp(1.65rem, 6.8vw, 2.05rem);
    margin-bottom: 0.55rem;
  }

  .atlas-hero-content .atlas-eyebrow {
    margin-bottom: 0.5rem;
  }

  .atlas-hero-sub {
    font-size: 0.86rem;
  }

  .atlas-hero-ctas {
    order: 3;
    flex-direction: column;
    width: min(calc(100% - 2.5rem), 320px);
    gap: 0;
    margin: 0.85rem auto 0;
  }

  .atlas-hero-ctas .atlas-btn {
    width: 100%;
    min-height: 3.25rem;
  }
}

/* ---------- Belief / why we made it ---------- */
.atlas-belief {
  border-top: 1px solid var(--hairline);
  padding: clamp(4.5rem, 10vh, 7.5rem) 1.25rem;
}

.atlas-belief-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.atlas-belief-copy {
  text-align: left;
  max-width: 32rem;
}

.atlas-belief-copy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.55rem);
  line-height: 1.18;
  margin: 0 0 1.15rem;
  color: var(--ink);
  text-wrap: balance;
}

.atlas-belief-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(13, 14, 16, 0.62);
  margin: 0 0 1.25rem;
  text-wrap: pretty;
}

.atlas-belief-feats {
  margin: 0 0 1.5rem;
  max-width: 22rem;
}

.atlas-belief-feats .buybox-feat-media[data-upload="atlas-belief-feat-pocket"] {
  background-image: url("../images/uploads/atlas-belief-feat-pocket.webp");
}

.atlas-belief-feats .buybox-feat-media[data-upload="atlas-belief-feat-water"] {
  background-image: url("../images/uploads/atlas-belief-feat-water.webp");
  background-size: contain;
  background-position: center;
  background-color: transparent;
}

.atlas-belief-feats .buybox-feat-media[data-upload="atlas-belief-feat-water"].has-upload {
  background-image: none !important;
}

.atlas-belief-feats .buybox-feat-media[data-upload="atlas-belief-feat-water"] .seo-upload-img {
  width: 90%;
  height: 90%;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
  object-position: center;
}

.atlas-belief-feats .buybox-feat-media[data-upload="atlas-belief-feat-snap"] {
  background-image: url("../images/uploads/atlas-belief-feat-snap.webp");
}

.atlas-belief-media {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #fff;
  border: none;
  position: relative;
  isolation: isolate;
}

.atlas-belief-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #fff 0%,
    rgba(255, 255, 255, 0.45) 5%,
    rgba(255, 255, 255, 0) 14%,
    rgba(255, 255, 255, 0) 86%,
    rgba(255, 255, 255, 0.45) 95%,
    #fff 100%
  );
}

.atlas-belief-media.has-upload,
.atlas-belief-media[data-upload].has-upload {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #fff;
}

.atlas-belief-media img,
.atlas-belief-media .seo-upload-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.atlas-belief-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  min-height: 3.15rem;
  padding: 0.85rem 1.85rem 0.85rem 2rem;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.atlas-belief-cta-arrow {
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: inherit;
  flex-shrink: 0;
}

.atlas-belief-cta-arrow svg {
  display: block;
}

.atlas-belief-cta:hover {
  opacity: 0.88;
  transform: none;
}

.atlas-belief-cta:hover .atlas-belief-cta-arrow {
  opacity: 1;
}

@media (max-width: 820px) {
  .atlas-belief-inner {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 1.15rem;
    align-items: stretch;
  }

  .atlas-belief-copy {
    display: contents;
    max-width: none;
    text-align: center;
  }

  .atlas-belief-copy h2 {
    order: 1;
    text-align: center;
    margin: 0 0 0.35rem;
  }

  .atlas-belief-body {
    order: 2;
    text-align: center;
    margin: 0.15rem 0 0.85rem;
  }

  .atlas-belief-media {
    order: 3;
    max-width: min(100%, 26rem);
    width: 100%;
    margin: 0 auto 0.35rem;
    /* Keep desktop crop frame — 5/4 was re-cropping the 4/5 bake on mobile */
    aspect-ratio: 4 / 5;
  }

  .atlas-belief-feats {
    order: 4;
    max-width: min(100%, 22rem);
    width: 100%;
    margin: 0 auto 1.15rem;
  }

  .atlas-belief-cta {
    order: 5;
    align-self: center;
  }

  /* Lighter edge melt — keep more of the photo visible */
  .atlas-belief-media::after {
    background:
      linear-gradient(
        90deg,
        #fff 0%,
        rgba(255, 255, 255, 0.55) 4%,
        rgba(255, 255, 255, 0.18) 12%,
        rgba(255, 255, 255, 0) 24%,
        rgba(255, 255, 255, 0) 76%,
        rgba(255, 255, 255, 0.18) 88%,
        rgba(255, 255, 255, 0.55) 96%,
        #fff 100%
      ),
      linear-gradient(
        180deg,
        #fff 0%,
        rgba(255, 255, 255, 0.45) 5%,
        rgba(255, 255, 255, 0.12) 12%,
        rgba(255, 255, 255, 0) 22%,
        rgba(255, 255, 255, 0) 78%,
        rgba(255, 255, 255, 0.12) 88%,
        rgba(255, 255, 255, 0.45) 95%,
        #fff 100%
      );
  }
}

@media (max-width: 480px) {
  .atlas-belief-media::after {
    background:
      linear-gradient(
        90deg,
        #fff 0%,
        rgba(255, 255, 255, 0.6) 5%,
        rgba(255, 255, 255, 0.22) 14%,
        rgba(255, 255, 255, 0) 28%,
        rgba(255, 255, 255, 0) 72%,
        rgba(255, 255, 255, 0.22) 86%,
        rgba(255, 255, 255, 0.6) 95%,
        #fff 100%
      ),
      linear-gradient(
        180deg,
        #fff 0%,
        rgba(255, 255, 255, 0.5) 6%,
        rgba(255, 255, 255, 0.15) 14%,
        rgba(255, 255, 255, 0) 26%,
        rgba(255, 255, 255, 0) 74%,
        rgba(255, 255, 255, 0.15) 86%,
        rgba(255, 255, 255, 0.5) 94%,
        #fff 100%
      );
  }
}

/* ---------- Atlas tried carousel (shared PDP .tried styles) ---------- */
.atlas-page .tried-copy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.2vw, 2.2rem);
  line-height: 1.22;
  margin-bottom: 0.75rem;
  color: var(--ink);
  text-wrap: balance;
}

/* Copy + CTA on the right; lifestyle rail on the left (desktop) */
@media (min-width: 1021px) {
  .atlas-page .tried-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
  }

  .atlas-page .tried-rail {
    order: 1;
  }

  .atlas-page .tried-copy {
    order: 2;
  }
}

body.dev-mode.dev-editing .atlas-story-media[data-upload] {
  outline: 1px dashed rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

body.dev-mode.dev-editing .atlas-story-media .upload-hint {
  opacity: 1;
  pointer-events: auto;
}

/* Nested content <img> is the visible photo — hide the uploads SEO twin */
[data-atlas-story-media] > .seo-upload-img {
  display: none !important;
}

.atlas-flag {
  flex: 0 0 auto;
  display: block;
  width: 18px;
  height: 13px;
  min-width: 18px;
  min-height: 13px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(13, 14, 16, 0.12);
  background: rgba(13, 14, 16, 0.06);
}

/* ---------- Story popup card ---------- */
html.atlas-story-open {
  overflow: hidden;
}

.atlas-story {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
}

/* Author `display` overrides the `hidden` attribute unless forced — empty shell would stick open. */
.atlas-story[hidden] {
  display: none !important;
}

.atlas-story-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 14, 16, 0.52);
  cursor: pointer;
  opacity: 0;
}

.atlas-story-card {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  max-height: min(92svh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: none;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  box-shadow:
    0 4px 24px rgba(13, 14, 16, 0.08),
    0 28px 90px rgba(13, 14, 16, 0.28);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transform-origin: center center;
  backface-visibility: hidden;
}

.atlas-story.is-entering .atlas-story-backdrop {
  animation: atlasStoryBackdropIn 0.7s ease forwards;
}

.atlas-story.is-entering .atlas-story-card {
  animation: atlasStoryCardIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.atlas-story.is-entering-book .atlas-story-backdrop {
  animation: atlasStoryBackdropIn 0.55s ease forwards;
}

.atlas-story.is-entering-book .atlas-story-card {
  animation: atlasBookFlipIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.atlas-story.atlas-story--slow.is-entering .atlas-story-backdrop,
.atlas-story.atlas-story--slow.is-entering-book .atlas-story-backdrop {
  animation-duration: 0.85s;
}

.atlas-story.atlas-story--slow.is-entering .atlas-story-card {
  animation-duration: 1.15s;
}

.atlas-story.atlas-story--slow.is-entering-book .atlas-story-card {
  animation-duration: 1.15s;
}

.atlas-story.is-swapping .atlas-story-backdrop {
  opacity: 1;
}

.atlas-story.is-swapping .atlas-story-card {
  opacity: 1;
  transform: none;
}

.atlas-story.is-swapping .atlas-story-media-frame {
  animation: atlasMediaJump 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.atlas-story.is-swap-next .atlas-story-media-frame {
  animation-name: atlasMediaNext;
}

.atlas-story.is-swap-prev .atlas-story-media-frame {
  animation-name: atlasMediaPrev;
}

.atlas-story.is-swapping .atlas-story-panel > * {
  animation: atlasPanelRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.atlas-story.is-swapping .atlas-story-panel > *:nth-child(1) { animation-delay: 0.04s; }
.atlas-story.is-swapping .atlas-story-panel > *:nth-child(2) { animation-delay: 0.08s; }
.atlas-story.is-swapping .atlas-story-panel > *:nth-child(3) { animation-delay: 0.12s; }
.atlas-story.is-swapping .atlas-story-panel > *:nth-child(4) { animation-delay: 0.16s; }
.atlas-story.is-swapping .atlas-story-panel > *:nth-child(5) { animation-delay: 0.2s; }

.atlas-story.is-entering .atlas-story-panel > *,
.atlas-story.is-entering-book .atlas-story-panel > * {
  animation: atlasPanelRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.atlas-story.is-entering .atlas-story-panel > *:nth-child(1),
.atlas-story.is-entering-book .atlas-story-panel > *:nth-child(1) { animation-delay: 0.18s; }
.atlas-story.is-entering .atlas-story-panel > *:nth-child(2),
.atlas-story.is-entering-book .atlas-story-panel > *:nth-child(2) { animation-delay: 0.26s; }
.atlas-story.is-entering .atlas-story-panel > *:nth-child(3),
.atlas-story.is-entering-book .atlas-story-panel > *:nth-child(3) { animation-delay: 0.34s; }
.atlas-story.is-entering .atlas-story-panel > *:nth-child(4),
.atlas-story.is-entering-book .atlas-story-panel > *:nth-child(4) { animation-delay: 0.42s; }
.atlas-story.is-entering .atlas-story-panel > *:nth-child(5),
.atlas-story.is-entering-book .atlas-story-panel > *:nth-child(5) { animation-delay: 0.5s; }

.atlas-story:not(.is-entering):not(.is-entering-book):not(.is-leaving):not(.is-swapping) .atlas-story-backdrop {
  opacity: 1;
}

.atlas-story:not(.is-entering):not(.is-entering-book):not(.is-leaving):not(.is-leaving-book):not(.is-swapping) .atlas-story-card {
  opacity: 1;
  transform: none;
  transform-origin: center center;
}

.atlas-story.is-leaving .atlas-story-backdrop {
  animation: atlasStoryBackdropOut 0.4s ease forwards;
}

.atlas-story.is-leaving .atlas-story-card {
  animation: atlasStoryCardOut 0.4s ease forwards;
}

.atlas-story.is-leaving-book .atlas-story-backdrop {
  animation: atlasStoryBackdropOut 0.48s ease forwards;
}

.atlas-story.is-leaving-book .atlas-story-card {
  animation: atlasBookFlipOut 0.52s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes atlasStoryBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes atlasStoryCardIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes atlasBookFlipIn {
  0% {
    opacity: 0;
    transform: perspective(1400px) rotateY(-86deg) scale(0.94);
    transform-origin: left center;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: perspective(1400px) rotateY(0deg) scale(1);
    transform-origin: left center;
  }
}

@keyframes atlasBookFlipOut {
  0% {
    opacity: 1;
    transform: perspective(1400px) rotateY(0deg) scale(1);
    transform-origin: right center;
  }
  100% {
    opacity: 0;
    transform: perspective(1400px) rotateY(78deg) scale(0.94);
    transform-origin: right center;
  }
}

@keyframes atlasMediaJump {
  from {
    opacity: 0.2;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes atlasMediaNext {
  from {
    opacity: 0.15;
    transform: translateX(18%) scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes atlasMediaPrev {
  from {
    opacity: 0.15;
    transform: translateX(-18%) scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

@keyframes atlasKenBurns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

@keyframes atlasStoryBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes atlasStoryCardOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}

.atlas-story-close {
  position: absolute;
  top: 0.95rem;
  right: 0.95rem;
  z-index: 4;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(13, 14, 16, 0.16);
  transition: background 0.25s ease, transform 0.25s ease;
}

.atlas-story-close svg {
  width: 12px;
  height: 12px;
}

.atlas-story-close:hover {
  background: var(--pure);
  transform: scale(1.04);
}

.atlas-story-media {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, 50svh);
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  max-height: 50svh;
  overflow: hidden;
  background: var(--paper-soft);
  border-radius: 24px 24px 0 0;
}

.atlas-story-media-frame {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform;
}

.atlas-story-media-frame.is-ken img {
  animation: atlasKenBurns 14s ease-out forwards;
}

.atlas-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.atlas-story-media-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(13, 14, 16, 0.45), transparent);
  pointer-events: none;
  z-index: 1;
}

.atlas-story-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 34%;
  border: none;
  background: transparent;
  color: var(--pure);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.atlas-story-nav--prev {
  left: 0;
  justify-items: start;
  padding-left: 0.75rem;
}

.atlas-story-nav--next {
  right: 0;
  justify-items: end;
  padding-right: 0.75rem;
}

.atlas-story-nav span {
  width: 2.45rem;
  height: 2.45rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(13, 14, 16, 0.42);
  font-size: 1.45rem;
  line-height: 1;
  opacity: 0.35;
  transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.atlas-story-nav:hover span,
.atlas-story-nav:focus-visible span {
  opacity: 1;
  background: rgba(13, 14, 16, 0.68);
  transform: scale(1.06);
}

.atlas-story-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.35rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.atlas-story-panel h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 4.5vw, 1.85rem);
  line-height: 1.18;
  margin: 0 0 0.55rem;
  color: var(--ink);
  text-wrap: balance;
}

.atlas-story-place {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.45rem;
  max-width: 100%;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(13, 14, 16, 0.62);
  margin: 0 0 1rem;
  padding: 0.4rem 0.7rem 0.4rem 0.45rem;
  border-radius: 999px;
  background: rgba(13, 14, 16, 0.04);
  border: 1px solid rgba(13, 14, 16, 0.08);
  white-space: nowrap;
}

.atlas-place-text {
  white-space: nowrap;
}

.atlas-story-place .atlas-flag {
  width: 16px;
  height: 12px;
  min-width: 16px;
  min-height: 12px;
}

.atlas-story-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(13, 14, 16, 0.78);
  margin: 0 0 1.35rem;
}

.atlas-story-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: auto;
}

.atlas-story-actions[hidden] {
  display: none !important;
}

.atlas-story-actions .atlas-btn {
  width: 100%;
  min-height: 3.15rem;
}

.atlas-story-bridge {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}

.atlas-story-bridge[hidden] {
  display: none !important;
}

.atlas-story-bridge .atlas-btn {
  width: 100%;
}

.atlas-story-keep-going {
  display: none;
  margin: 0 auto;
  padding: 0.2rem 0.5rem;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: rgba(13, 14, 16, 0.45);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}

.atlas-story-keep-going:hover {
  color: var(--ink);
}

.atlas-story.is-pitch .atlas-story-actions {
  display: none;
}

.atlas-story.is-pitch .atlas-story-bridge {
  margin-top: auto;
}

.atlas-story.is-pitch .atlas-story-cta-board {
  min-height: 3.25rem;
  background: var(--ink);
  color: #fff;
  border: 1.5px solid var(--ink);
  font-weight: 600;
  animation: atlasPitchCtaJump 1.8s ease-in-out infinite;
}

.atlas-story.is-pitch .atlas-story-cta-board:hover {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
  animation: none;
  transform: translateY(-2px);
}

@keyframes atlasPitchCtaJump {
  0%, 72%, 100% {
    transform: translateY(0);
  }
  78% {
    transform: translateY(-5px);
  }
  84% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(-2.5px);
  }
  96% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-story.is-pitch .atlas-story-cta-board {
    animation: none;
  }
}

.atlas-story.is-pitch .atlas-story-keep-going {
  display: inline-flex;
}

@media (max-width: 820px) {
  .atlas-story {
    padding:
      max(0.7rem, env(safe-area-inset-top, 0px))
      max(0.7rem, env(safe-area-inset-right, 0px))
      max(0.7rem, env(safe-area-inset-bottom, 0px))
      max(0.7rem, env(safe-area-inset-left, 0px));
    place-items: center;
    justify-items: center;
    align-items: center;
  }

  .atlas-story-card {
    width: 100%;
    max-width: min(100%, 440px);
    max-height: min(88svh, 860px);
    margin-inline: auto;
    justify-self: center;
    align-self: center;
    border-radius: 20px;
    transform-origin: center center;
    box-shadow:
      0 4px 18px rgba(13, 14, 16, 0.1),
      0 14px 40px rgba(13, 14, 16, 0.16);
  }

  /* Perspective book-flip reads off-center on phones — use the simple rise instead */
  .atlas-story.is-entering-book .atlas-story-card,
  .atlas-story.atlas-story--slow.is-entering-book .atlas-story-card {
    animation-name: atlasStoryCardIn;
    transform-origin: center center;
  }

  .atlas-story.is-leaving-book .atlas-story-card {
    animation-name: atlasStoryCardOut;
    transform-origin: center center;
  }

  .atlas-story-media {
    width: min(100%, 42svh);
    max-width: 100%;
    margin-inline: auto;
    border-radius: 20px 20px 0 0;
    max-height: 42svh;
    /* Keep true square so cover matches the desktop crop */
    aspect-ratio: 1 / 1;
  }

  .atlas-story-nav span {
    opacity: 0.55;
  }

  .atlas-story-panel {
    padding: 1.1rem 1.1rem 1.25rem;
  }

  .atlas-story-close {
    top: 0.7rem;
    right: 0.7rem;
  }
}

@media (min-width: 821px) {
  .atlas-story-card {
    width: min(100%, 480px);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .atlas-page .site-header,
  .atlas-card-media img,
  .atlas-btn,
  .atlas-link {
    transition: none;
  }

  .atlas-hero-copy {
    transition: none;
  }

  .atlas-story-backdrop,
  .atlas-story-card,
  .atlas-story.is-entering .atlas-story-backdrop,
  .atlas-story.is-entering .atlas-story-card,
  .atlas-story.is-entering-book .atlas-story-backdrop,
  .atlas-story.is-entering-book .atlas-story-card,
  .atlas-story.atlas-story--slow.is-entering .atlas-story-backdrop,
  .atlas-story.atlas-story--slow.is-entering .atlas-story-card,
  .atlas-story.atlas-story--slow.is-entering-book .atlas-story-card,
  .atlas-story.is-swapping .atlas-story-card,
  .atlas-story.is-swapping .atlas-story-media-frame,
  .atlas-story.is-swapping .atlas-story-panel > *,
  .atlas-story.is-entering .atlas-story-panel > *,
  .atlas-story.is-entering-book .atlas-story-panel > *,
  .atlas-story-media-frame.is-ken img,
  .atlas-story.is-leaving .atlas-story-backdrop,
  .atlas-story.is-leaving .atlas-story-card,
  .atlas-story.is-leaving-book .atlas-story-backdrop,
  .atlas-story.is-leaving-book .atlas-story-card {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .atlas-story.is-leaving .atlas-story-backdrop,
  .atlas-story.is-leaving .atlas-story-card,
  .atlas-story.is-leaving-book .atlas-story-backdrop,
  .atlas-story.is-leaving-book .atlas-story-card {
    opacity: 0;
  }
}

/* ── Recent owner reviews feed (home / product) ── */

.reviews-recommend-wrap {
  max-width: 1360px;
  margin: -12px auto clamp(18px, 3vh, 28px);
  padding: 0 var(--gutter);
}

.reviews-recommend-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}

.reviews-recommend-stat strong {
  font-weight: 600;
}

.reviews-recommend-heart {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #d64545;
}

@media (max-width: 899px) {
  .reviews-recommend-wrap {
    text-align: center;
  }
}

.recent-reviews-feed {
  max-width: 1360px;
  width: 100%;
  margin: 0 auto clamp(40px, 6vh, 72px);
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.recent-review-card {
  padding: clamp(20px, 3vw, 28px) 0;
  border-bottom: 1px solid var(--hairline);
}

.recent-review-card:first-child {
  padding-top: 0;
}

.recent-review-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.recent-reviews-feed-extra .recent-review-card:first-child {
  padding-top: clamp(20px, 3vw, 28px);
}

.recent-reviews-more-wrap {
  padding: clamp(20px, 3vh, 32px) 0 0;
  text-align: center;
}

.recent-reviews-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 26px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.recent-reviews-more-btn:hover {
  background: #f7f6f3;
  border-color: rgba(13, 14, 16, 0.18);
}

.recent-reviews-feed-extra {
  margin-top: 0;
  text-align: left;
  width: 100%;
}

.recent-reviews-feed-extra[hidden] {
  display: none !important;
}

.recent-review-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.recent-review-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.recent-review-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: linear-gradient(145deg, #f4f1eb 0%, #e8e4dc 100%);
  border: 1px solid var(--hairline);
}

.recent-review-identity {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
}

.recent-review-identity .verified-buyer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.recent-review-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.recent-review-time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.recent-review-rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.recent-review-rating .stars {
  --star-size: 14px;
  --star-gap: 2px;
}

.recent-review-title {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.recent-review-body-wrap {
  position: relative;
}

.recent-review-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 400;
}

.recent-review-body.is-clamped:not(.is-expanded) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.recent-review-read-more {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.recent-review-read-more:hover {
  opacity: 0.72;
}

.recent-review-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.recent-review-photos[hidden] {
  display: none !important;
}

.recent-review-photo {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}

.recent-review-photo:not(.has-upload) {
  display: none;
}

.recent-review-photo.has-upload {
  background-size: cover !important;
  background-position: center !important;
  cursor: zoom-in;
}

body.dev-mode.dev-editing .recent-review-photo.has-upload {
  cursor: pointer;
}

.recent-review-photo-zoom {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 32px);
}

.recent-review-photo-zoom[hidden] {
  display: none !important;
}

.recent-review-photo-zoom__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(13, 14, 16, 0.42);
  cursor: pointer;
}

.recent-review-photo-zoom__dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 92vw);
  max-height: min(72vh, 640px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 80px rgba(13, 14, 16, 0.24);
}

.recent-review-photo-zoom__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(72vh, 640px);
  object-fit: contain;
  background: #f4f2ed;
}

.recent-review-photo-zoom__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(13, 14, 16, 0.12);
}

.recent-review-photo-zoom__close:hover {
  background: #fff;
}

body.recent-review-photo-zoom-open {
  overflow: hidden;
}

body.dev-mode.dev-editing .recent-review-photo[data-upload] {
  display: block;
  min-width: 72px;
  min-height: 72px;
}

body.dev-mode.dev-editing .recent-review-photo .upload-hint {
  font-size: 9px;
  padding: 4px 6px;
}

.review-rail-head {
  max-width: 1360px;
  margin: clamp(32px, 5vh, 64px) auto clamp(14px, 2vh, 20px);
  padding: 0 var(--gutter);
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  text-align: center;
}

.pdp-section-head:has(+ .recent-reviews-feed) {
  margin-bottom: clamp(22px, 3.5vh, 36px);
}

@media (max-width: 520px) {
  .recent-review-head {
    gap: 6px;
  }

  .recent-review-photo {
    width: 64px;
    height: 64px;
  }
}

/* What’s-in-your-water report — minimal, Yuka-inspired */
.wyw-page {
  --wyw-ink: #16202b;
  --wyw-muted: #7c828b;
  --wyw-line: #dde3e9;
  --wyw-bg: #ffffff;
  --wyw-soft: #f6f7f8;
  --wyw-red: #e5484d;
  --wyw-orange: #f0a03c;
  --wyw-green: #2fa96e;
  --wyw-gray: #c3c9d0;
  --wyw-navy: #0b1c2c;
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--wyw-ink);
  background: var(--wyw-bg);
  -webkit-font-smoothing: antialiased;
}

/* Shared results typography — match FAQ simplicity */
.wyw-has-results .wyw-shell,
.wyw-has-results .wyw-path-duo,
.wyw-has-results .wyw-highlights,
.wyw-has-results .wyw-story,
.wyw-has-results .wyw-faq {
  font-family: var(--sans);
}

.wyw-has-results .wyw-path-title,
.wyw-has-results .wyw-path-intro h2 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #0f2436;
}

.wyw-has-results .wyw-full h2,
.wyw-has-results .wyw-highlights h2,
.wyw-has-results .wyw-story-copy h2,
.wyw-has-results .wyw-faq-intro h2 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--wyw-ink);
}

.wyw-has-results .wyw-exposure-lede,
.wyw-has-results .wyw-highlights-lede,
.wyw-has-results .wyw-faq-lede,
.wyw-has-results .wyw-path-copy > p:not(.wyw-path-step),
.wyw-has-results .wyw-story-copy p {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: #6b7c8f;
  font-family: var(--sans);
}

.wyw-has-results .wyw-highlights-lede,
.wyw-has-results .wyw-exposure-lede,
.wyw-has-results .wyw-faq-lede,
.wyw-has-results .wyw-story-copy p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--wyw-muted);
}

.wyw-has-results .wyw-path-step {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4a9fd4;
  font-family: var(--sans);
}

.wyw-has-results .wrstat__sub {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #7c828b;
  font-family: var(--sans);
}

.wyw-has-results .wr__micro,
.wyw-has-results .wyw-kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wyw-muted);
  font-family: var(--sans);
}

.wyw-has-results .wr__micro {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #7c828b;
}

.wyw-has-results .wrstat__n {
  font-family: var(--sans);
  font-weight: 650;
  color: var(--wyw-ink);
}

.wyw-has-results .wrstat__n--danger {
  color: var(--wyw-red);
}

/* Landing is a single locked viewport — no empty scroll past the ZIP form. */
html:has(body.wyw-page:not(.wyw-has-results)),
body.wyw-page:not(.wyw-has-results) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.wyw-page h1,
.wyw-page h2,
.wyw-page h3 {
  font-family: var(--sans);
}

@keyframes wyw-up {
  from {
    transform: translateY(14px);
  }
  to {
    transform: translateY(0);
  }
}

.wyw-anim {
  animation: wyw-up 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* Freeze results entrance motion after first play so scroll can't restart it. */
.wyw-has-results.wyw-anim-settled .wyw-results .wyw-anim,
.wyw-has-results.wyw-anim-settled .wyw-results .wyw-circle {
  animation: none;
  transform: none;
}

.wyw-page .announce-bar {
  display: none;
}

.wyw-topnav {
  display: none;
}

.wyw-contained {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

.wyw-contained--wide {
  width: min(1400px, calc(100% - 32px));
}

.wyw-kicker {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wyw-muted);
}

.wyw-kicker--light {
  color: rgba(255, 255, 255, 0.72);
}

.wyw-search[hidden],
.wyw-results[hidden] {
  display: none !important;
}

.wyw-search {
  position: relative;
  isolation: isolate;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(72px, 12vh, 120px) 20px clamp(40px, 8vh, 80px);
  background: #ffffff;
  overflow: hidden;
}

.wyw-search-bg {
  position: absolute !important;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.wyw-search-bg.has-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.wyw-search-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Mild crop kills black corners without zooming into blank white center */
  width: 118%;
  height: 118%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center center;
  display: none;
  border: 0;
  background: transparent;
  opacity: 0;
  mix-blend-mode: normal;
  filter: contrast(1.2) saturate(1.05);
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.wyw-search-bg.has-video .wyw-search-bg-video {
  display: block;
  z-index: 0;
}

.wyw-search-bg.has-video .wyw-search-bg-video.is-playing {
  opacity: 1;
}

.wyw-search-bg.has-video.is-loop-fading .wyw-search-bg-video.is-playing {
  opacity: 0.55;
  transition: opacity 0.55s ease;
}

.wyw-search-bg.has-video.has-upload.is-video-ready {
  background-image: none !important;
}

body.dev-mode .wyw-search-bg[data-upload] {
  pointer-events: none;
}

body.dev-mode.dev-editing .wyw-search-bg[data-upload] {
  z-index: 0;
  outline: none !important;
  cursor: default;
}

.wyw-dev-bg-upload {
  appearance: none;
  margin-top: 4px;
  border: 1px dashed rgba(15, 35, 55, 0.35);
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--wyw-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.wyw-dev-bg-upload:hover,
.wyw-dev-bg-upload:focus-visible {
  border-color: rgba(15, 35, 55, 0.7);
  outline: none;
}

.wyw-dev-bg-upload[hidden] {
  display: none !important;
}

.wyw-search-fore {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(720px, 100%);
}

.wyw-search-fore::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44%;
  width: 170%;
  height: 170%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 58% 52% at center,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.78) 28%,
    rgba(255, 255, 255, 0.42) 48%,
    rgba(255, 255, 255, 0.16) 64%,
    rgba(255, 255, 255, 0.04) 78%,
    rgba(255, 255, 255, 0) 92%
  );
  pointer-events: none;
}

.wyw-search h1 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(1.65rem, 4.5vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--wyw-ink);
  text-wrap: balance;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 1),
    0 0 36px rgba(255, 255, 255, 0.95),
    0 0 60px rgba(255, 255, 255, 0.8);
}

.wyw-lede {
  max-width: 34rem;
  margin: 14px auto 28px;
  color: var(--wyw-muted);
  font-weight: 300;
  line-height: 1.5;
}

.wyw-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(640px, 100%);
  margin-top: 36px;
}

.wyw-live-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  width: 100%;
}

.wyw-live-prompt {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35em;
  margin: 0;
  font-size: clamp(1.35rem, 3.5vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--wyw-ink);
  cursor: text;
}

.wyw-live-prefix {
  white-space: nowrap;
  pointer-events: none;
}

.wyw-zip-inline {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  min-width: 4ch;
  max-width: min(100%, 22ch);
  pointer-events: none;
}

.wyw-zip-mirror {
  font: inherit;
  letter-spacing: inherit;
  white-space: pre;
  color: var(--wyw-ink);
}

.wyw-zip-caret {
  display: none;
  width: 2px;
  align-self: stretch;
  min-height: 1em;
  margin-inline: 1px;
  background: rgba(15, 35, 55, 0.35);
  animation: wyw-zip-blink 1s step-end infinite;
}

.wyw-live-prompt:focus-within .wyw-zip-caret {
  display: inline-block;
}

.wyw-live-prompt:focus-within .wyw-zip-inline.is-filled .wyw-zip-caret {
  background: currentColor;
}

.wyw-zip-inline.is-filled .wyw-zip-ph {
  display: none;
}

@keyframes wyw-zip-blink {
  50% { opacity: 0; }
}

.wyw-zip-ph {
  font: inherit;
  letter-spacing: inherit;
  color: rgba(15, 35, 55, 0.32);
  white-space: nowrap;
}

.wyw-zip-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  font: inherit;
  letter-spacing: inherit;
  outline: none;
  cursor: text;
}

/* Native selection paints real glyphs over the mirror — keep it invisible. */
.wyw-zip-input::selection {
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.wyw-zip-input::-moz-selection {
  background: transparent;
  color: transparent;
}

.wyw-zip-sel {
  background: var(--wyw-ink, #16202b);
  color: #fff;
  border-radius: 2px;
}

.wyw-live-prompt:focus-within .wyw-zip-inline.is-selecting .wyw-zip-caret {
  display: none;
}

.wyw-form.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.wyw-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #fff;
  padding: 24px;
}

.wyw-loader[hidden] {
  display: none !important;
}

.wyw-loader__inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.wyw-loader__canvas {
  width: min(220px, 42vw);
  height: auto;
  max-height: min(165px, 28vh);
  aspect-ratio: 1024 / 768;
  display: block;
}

.wyw-loader__text {
  margin: 0;
  min-height: 1.4em;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #5a6a78;
}

body.wyw-is-loading {
  overflow: hidden;
}

body.wyw-is-loading .site-header,
body.wyw-is-loading .wyw-search,
body.wyw-is-loading .wyw-results {
  visibility: hidden;
}

.wyw-country-field,
.wyw-zip-field {
  display: grid;
  gap: 8px;
  text-align: left;
}

.wyw-country-field--flag {
  display: block;
  gap: 0;
}

.wyw-country-field span,
.wyw-zip-field span {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wyw-muted);
}

.wyw-zip-field input {
  width: 100%;
  border: 1px solid #c9d4de;
  border-radius: 999px;
  padding: 14px 18px;
  font: inherit;
  font-size: 16px;
  background: #fff;
  color: var(--wyw-ink);
}

.wyw-country-picker {
  position: relative;
}

.wyw-country-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15, 35, 55, 0.14);
  border-radius: 50%;
  padding: 0;
  font: inherit;
  background: #fff;
  color: var(--wyw-ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 35, 55, 0.04);
}

.wyw-country-trigger:hover,
.wyw-country-trigger:focus-visible {
  border-color: rgba(15, 35, 55, 0.35);
  outline: none;
}

.wyw-country-trigger .locale-flag-img,
.wyw-country-option .locale-flag-img {
  width: 22px;
  height: 16px;
  min-width: 22px;
  min-height: 16px;
  border-radius: 2px;
}

.wyw-country-trigger svg {
  display: none;
}

.wyw-country-trigger-text {
  display: none;
}

.wyw-country-menu {
  position: absolute;
  left: 50%;
  right: auto;
  top: calc(100% + 8px);
  z-index: 30;
  width: min(280px, 78vw);
  max-height: min(360px, 55vh);
  overflow: auto;
  border: 1px solid #c9d4de;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(13, 14, 16, 0.12);
  transform: translateX(-50%);
  text-align: left;
}

.wyw-country-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--wyw-ink);
  font: inherit;
  font-size: 15px;
  padding: 11px 16px;
  cursor: pointer;
  text-align: start;
}

.wyw-country-option:hover,
.wyw-country-option.is-active {
  background: rgba(13, 14, 16, 0.04);
}

.wyw-country-option-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wyw-zip-field input {
  font-size: 18px;
  letter-spacing: 0.08em;
}

.wyw-btn,
.wyw-toggle,
.wyw-retake,
.wyw-share button {
  font: inherit;
  cursor: pointer;
}

.wyw-btn {
  border: 0;
  border-radius: 6px;
  padding: 14px 28px;
  white-space: nowrap;
  min-width: 11rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.wyw-btn--solid {
  background: var(--wyw-ink);
  color: #fff;
}

.wyw-dev-sample {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 4px;
  border: 1px dashed rgba(15, 35, 55, 0.28);
  background: transparent;
  color: var(--wyw-muted);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.wyw-dev-sample:hover,
.wyw-dev-sample:focus-visible {
  color: var(--wyw-ink);
  border-color: rgba(15, 35, 55, 0.5);
  outline: none;
}

.wyw-dev-sample[hidden] {
  display: none !important;
}

.wyw-status {
  margin-top: 18px;
  color: var(--wyw-muted);
}

.wyw-status.is-error {
  color: #8a1f1f;
}

body.wyw-page.wyw-has-results {
  background: #fff;
}

.wyw-results {
  --wyw-glass: rgba(255, 255, 255, 0.78);
  --wyw-glass-strong: rgba(255, 255, 255, 0.92);
  --wyw-glass-border: rgba(22, 50, 74, 0.08);
  --wyw-glass-ink: #16324a;
  --wyw-glass-muted: #6b7c8f;
  --wyw-glass-line: rgba(22, 50, 74, 0.08);
  --wyw-glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 32px rgba(22, 50, 74, 0.06);
  position: relative;
  color: var(--wyw-glass-ink);
  background: #fff;
}

.wyw-shell {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 56px;
  background: #fff;
}

.wyw-has-results .wyw-shell {
  width: min(1120px, calc(100% - 32px));
}

/* Glassmorphic results hero — dark card stack (screenshot 1) */
.wyw-hero {
  --wyw-glass: rgba(8, 18, 32, 0.52);
  --wyw-glass-strong: rgba(12, 24, 40, 0.68);
  --wyw-glass-border: rgba(255, 255, 255, 0.12);
  --wyw-glass-ink: #f5f8fb;
  --wyw-glass-muted: rgba(245, 248, 251, 0.62);
  position: relative;
  color: var(--wyw-glass-ink);
  overflow: hidden;
  padding: 100px 0 44px;
  background: #0a1624;
}

.wyw-hero-bg {
  position: absolute;
  inset: 0;
  background-color: #0a1624;
  background-image:
    linear-gradient(
      180deg,
      rgba(4, 12, 22, 0.55) 0%,
      rgba(6, 16, 28, 0.62) 50%,
      rgba(6, 14, 26, 0.72) 100%
    ),
    url("../images/water/wyw-hero-glass-bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.wyw-hero-inner {
  position: relative;
  z-index: 1;
  width: min(960px, calc(100% - 32px));
  margin: 0 auto;
}

.wyw-hero-header {
  display: block;
  text-align: left;
  margin-bottom: 22px;
}

.wyw-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.wyw-hero-header h1 {
  margin: 0;
  max-width: none;
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-family: var(--sans);
  color: #fff;
}

.wyw-hero-header h1 span {
  font-weight: 700;
  color: #fff;
}

.wyw-hero-header h1 span.wyw-title-leaf {
  font-weight: 400;
  font-size: 0.78em;
  margin-left: 0.12em;
}

.wyw-hero-header h1 span::after {
  content: none;
}

.wyw-hero-sub {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.58);
  letter-spacing: -0.01em;
}

.wyw-match-banner {
  max-width: 36rem;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(232, 168, 60, 0.35);
  border-radius: 14px;
  background: rgba(40, 28, 8, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffd9a0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.wyw-match-banner[hidden] {
  display: none !important;
}

.wyw-hero .wyw-kicker,
.wyw-hero .wyw-kicker--badge,
.wyw-has-results .wyw-hero .wyw-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 18, 32, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--sans);
}

.wyw-kicker-drop {
  flex-shrink: 0;
  color: #6ec8ef;
}

.wyw-kicker--light {
  color: rgba(255, 255, 255, 0.72);
}

.wyw-share {
  margin: 0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.wyw-share button,
.wyw-share-btn {
  background: none;
  border: 0;
  color: inherit;
  text-decoration: none;
  padding: 4px;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.wyw-share-btn--round {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 18, 32, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.wyw-share-btn--round:hover,
.wyw-share-btn--round:focus-visible {
  background: rgba(16, 30, 48, 0.72);
  transform: translateY(-1px);
}

.wyw-share-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.wyw-share-toast {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(8, 18, 32, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  font-weight: 500;
  color: #f4f8fb;
  white-space: nowrap;
}

.wyw-share-toast[hidden] {
  display: none !important;
}

.wyw-summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 20px 40px;
  margin: 0 0 14px;
  padding: 26px 32px 26px 28px;
  border-radius: 24px;
  border: 1px solid var(--wyw-glass-border);
  background: var(--wyw-glass);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 40px rgba(0, 0, 0, 0.28);
}

.wyw-dash-score {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wyw-index-gauge {
  position: relative;
  width: 160px;
  height: 160px;
}

.wyw-index-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wyw-index-trail {
  stroke: rgba(255, 255, 255, 0.12);
}

.wyw-index-path {
  transition: stroke-dashoffset 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wyw-index-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.wyw-index-val {
  font-size: 46px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #fff;
}

.wyw-index-of {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}

.wyw-summary-grade {
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 36px;
}

.wyw-index-letter {
  margin: 0;
  font-size: clamp(3.4rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #fb923c;
}

.wyw-index-label {
  margin: 8px 0 0;
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #fb923c;
}

.wyw-summary[data-tone="good"] .wyw-index-letter,
.wyw-summary[data-tone="good"] .wyw-index-label {
  color: #6ee7a8;
}

.wyw-summary[data-tone="mid"] .wyw-index-letter,
.wyw-summary[data-tone="mid"] .wyw-index-label {
  color: #fbbf24;
}

.wyw-summary[data-tone="bad"] .wyw-index-letter,
.wyw-summary[data-grade="D"] .wyw-index-letter,
.wyw-summary[data-tone="bad"] .wyw-index-label,
.wyw-summary[data-grade="D"] .wyw-index-label {
  color: #fb923c;
}

.wyw-summary-blurb {
  display: none;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  text-wrap: pretty;
}

.wyw-summary-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  align-items: center;
  min-width: 0;
  padding-left: 8px;
}

.wyw-summary-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wyw-summary-stat-n {
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.wyw-summary-stat-l {
  font-size: 13px;
  font-weight: 450;
  color: var(--wyw-glass-muted);
  line-height: 1.3;
}

.wyw-gauge-meta {
  display: none;
}

.wyw-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}

.wyw-meta-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid var(--wyw-glass-border);
  background: var(--wyw-glass);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 12px 28px rgba(0, 0, 0, 0.22);
  color: var(--wyw-glass-ink);
}

.wyw-meta-card + .wyw-meta-card {
  border-top: 0;
}

.wyw-meta-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.wyw-meta-icon {
  width: auto;
  height: auto;
  min-width: 1.4em;
  border-radius: 0;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  background: transparent;
}

.wyw-meta-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.wyw-meta-icon--blue,
.wyw-meta-icon--green,
.wyw-meta-icon--purple,
.wyw-meta-icon--cyan {
  background: transparent;
  color: inherit;
}

.wyw-meta-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 450;
  color: var(--wyw-glass-muted);
}

.wyw-meta-value {
  margin: 0;
  font-weight: 650;
  font-size: 14px;
  line-height: 1.25;
  color: #fff;
  word-break: break-word;
}

.wyw-meta-chevron {
  display: none;
  flex-shrink: 0;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.45);
}

.wyw-meta-chevron svg {
  display: block;
}

.wyw-providers {
  text-align: center;
  padding-top: 18px;
  padding-bottom: 4px;
}

.wyw-retake {
  margin-top: 0;
  background: none;
  border: 0;
  color: #f4f8fb;
  text-decoration: none;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}

.wyw-retake-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px auto 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.15s ease;
}

.wyw-retake-text:hover,
.wyw-retake-text:focus-visible {
  color: rgba(255, 255, 255, 0.92);
  outline: none;
}

.wyw-retake-search {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 16px 0 18px;
  border-radius: 999px;
  border: 1px solid var(--wyw-glass-border);
  background: var(--wyw-glass);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 12px 28px rgba(0, 0, 0, 0.22);
  text-align: left;
  transition: background 0.15s ease, transform 0.15s ease;
}

.wyw-retake-search:hover,
.wyw-retake-search:focus-visible {
  background: var(--wyw-glass-strong);
  transform: translateY(-1px);
}

.wyw-retake-search-ico {
  display: grid;
  place-content: center;
  color: currentColor;
  flex-shrink: 0;
  opacity: 0.9;
}

.wyw-retake-copy {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 450;
  color: inherit;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-underline-offset: 0.18em;
}

.wyw-retake-text:hover .wyw-retake-copy,
.wyw-retake-text:focus-visible .wyw-retake-copy {
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.wyw-retake-chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  display: grid;
  place-content: center;
}

.wyw-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wyw-gray);
  flex-shrink: 0;
}

.wyw-dot.is-red {
  background: var(--wyw-red);
}

.wyw-dot.is-orange {
  background: var(--wyw-orange);
}

.wyw-dot.is-green {
  background: var(--wyw-green);
}

.wyw-dot.is-gray {
  background: var(--wyw-gray);
}

/* Report summary stats (replaces top-concern circles) */
.wyw-top {
  margin-top: 0;
  padding: 8px 0 28px;
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.wyw-top h2,
.wyw-full h2,
.wyw-journey h2 {
  margin: 0 auto;
  max-width: 28ch;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-family: var(--sans);
  color: var(--wyw-ink);
}

.wyw-top h2 span,
.wyw-full h2 span {
  font-weight: 700;
}

.wrstats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 0 auto;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.wrstat {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  text-align: center;
  min-width: 0;
  min-height: 0;
  padding: 18px 16px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.wrstat + .wrstat::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 1px;
  background: var(--wyw-line);
  pointer-events: none;
}

.wrstat--peak {
  background: transparent;
}

.wr__micro {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7c828b;
}

.wrstat__n {
  margin: 0;
  font-size: clamp(2rem, 6.5vw, 2.75rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--wyw-ink);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

.wrstat__n.serif {
  font-family: var(--sans);
}

.wrstat__n--danger {
  color: var(--wyw-red);
}

.wrstat__sub {
  margin: 0;
  max-width: none;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: #7c828b;
}

.wyw-circle {
  --ring: #e2e6ec;
  --accent: var(--wyw-ink);
  width: min(100%, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--ring);
  box-shadow: 0 10px 28px rgba(22, 32, 43, 0.06);
  animation: wyw-up 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(min(var(--i, 0), 12) * 45ms);
}

.wyw-circle.is-red {
  --ring: #efb3b5;
  --accent: var(--wyw-red);
}

.wyw-circle.is-orange {
  --ring: #f0d0a0;
  --accent: var(--wyw-orange);
}

.wyw-circle.is-green {
  --ring: #b5dfc8;
  --accent: var(--wyw-green);
}

.wyw-circle.is-gray {
  --ring: #d7dbe1;
  --accent: var(--wyw-muted);
}

.wyw-circle-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16% 12%;
  box-sizing: border-box;
  gap: 2px;
  overflow: hidden;
}

.wyw-circle-cat {
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wyw-muted);
  font-weight: 400;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.wyw-circle-name {
  margin: 0;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.wyw-circle-risk {
  margin: 0;
  font-size: 11px;
  color: var(--wyw-muted);
  font-weight: 300;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.wyw-circle-num {
  margin: 10px 0 0;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
}

.wyw-circle-note {
  margin: 6px 0 0;
  font-size: 10px;
  color: var(--wyw-muted);
  font-weight: 300;
  line-height: 1.2;
  max-width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Water journey — source → treatment → home */
.wyw-journey {
  margin-top: 56px;
  padding: 48px 0 8px;
  border-top: 1px solid var(--wyw-line);
  text-align: center;
}

.wyw-journey-art {
  display: grid;
  place-items: center;
  margin: 28px auto 32px;
}

.wyw-journey-orb {
  position: relative;
  width: min(220px, 58vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--wyw-line);
  background:
    radial-gradient(circle at 50% 42%, #8dcef933 0%, transparent 42%),
    radial-gradient(circle at 50% 70%, #0b1c2c0d 0%, transparent 55%),
    #f7fafc;
  overflow: hidden;
}

.wyw-journey-ring {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(33, 121, 194, 0.18);
  pointer-events: none;
}

.wyw-journey-ring:nth-child(2) {
  inset: 28%;
  border-color: rgba(33, 121, 194, 0.28);
}

.wyw-journey-ring:nth-child(3) {
  inset: 38%;
  border-color: rgba(33, 121, 194, 0.4);
}

.wyw-journey-drop {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 18px;
  height: 24px;
  margin: -12px 0 0 -9px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, #6bb6e8 0%, #2a7fc0 100%);
  opacity: 0.9;
  transform: rotate(180deg);
}

.wyw-journey-flow {
  list-style: none;
  margin: 0 auto;
  padding: 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 6px;
  max-width: 920px;
}

.wyw-journey-step,
.wyw-journey-pill {
  margin: 0;
  border: 1px solid #cfd6de;
  background: #fff;
  color: var(--wyw-ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.wyw-journey-step {
  padding: 12px 16px;
  border-radius: 6px;
}

.wyw-journey-pill {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  background: #f3f6f9;
}

.wyw-journey-arrow {
  width: 18px;
  height: 1px;
  background: var(--wyw-ink);
  position: relative;
  flex-shrink: 0;
  opacity: 0.55;
}

.wyw-journey-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--wyw-ink);
  border-top: 1px solid var(--wyw-ink);
  transform: translateY(-50%) rotate(45deg);
}

.wyw-journey-caption {
  max-width: 36rem;
  margin: 22px auto 0;
  color: var(--wyw-muted);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}

/* Path duo — exposure + journey, matched to results shell */
.wyw-path-duo {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--wyw-ink);
  border-top: 0;
}

.wyw-path-intro {
  width: min(720px, calc(100% - 32px));
  margin: 0 auto 36px;
  text-align: center;
}

.wyw-path-intro .wyw-kicker {
  margin: 0 0 12px;
}

.wyw-path-intro h2,
.wyw-path-title {
  margin: 0 auto;
  max-width: 22ch;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--wyw-ink);
  text-wrap: balance;
}

.wyw-path-sub {
  margin: 12px auto 0;
  max-width: 28ch;
  color: var(--wyw-muted);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.45;
}

.wyw-path-intro h2 mark {
  background: transparent;
  color: var(--wyw-ink);
  font-style: italic;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.wyw-exposure-lede {
  max-width: 40rem;
  margin: 14px auto 0;
  color: var(--wyw-muted);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
}

.wyw-exposure-lede strong {
  color: var(--wyw-ink);
  font-weight: 500;
}

.wyw-path-duo .wyw-exposure {
  margin: 0;
  padding: 56px 0 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.wyw-exposure-viz {
  width: min(560px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.wyw-exposure-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr) 3rem;
  gap: 12px 14px;
  align-items: center;
}

@media (max-width: 420px) {
  .wyw-exposure-row {
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    grid-template-areas:
      "label mult"
      "track mult";
    column-gap: 12px;
    row-gap: 8px;
  }

  .wyw-exposure-label {
    grid-area: label;
  }

  .wyw-exposure-track {
    grid-area: track;
  }

  .wyw-exposure-mult {
    grid-area: mult;
    align-self: center;
  }
}

.wyw-exposure-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--wyw-muted);
}

.wyw-exposure-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(22, 50, 74, 0.08);
  overflow: hidden;
}

.wyw-exposure-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--h, 50%);
  border-radius: inherit;
  background: var(--wyw-ink);
}

.wyw-exposure-row--tap .wyw-exposure-fill {
  background: rgba(22, 50, 74, 0.28);
}

.wyw-exposure-row--shower .wyw-exposure-fill {
  background: var(--wyw-ink);
}

.wyw-exposure-mult {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: right;
  color: var(--wyw-ink);
  font-variant-numeric: tabular-nums;
}

.wyw-path-line {
  --wyw-path-blue: #4a9fd4;
  --wyw-path-blue-soft: rgba(74, 159, 212, 0.18);
  --wyw-path-line: rgba(74, 159, 212, 0.45);
  position: relative;
  margin: 0;
  padding: 56px 0 72px;
  border: 0;
  border-top: 1px solid rgba(22, 50, 74, 0.08);
  border-radius: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(74, 159, 212, 0.08), transparent 70%),
    #eef3f8;
  box-shadow: none;
  overflow: hidden;
}

.wyw-path-float {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.wyw-path-float-drop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: calc(var(--s) * 1.28);
  opacity: var(--o, 0.16);
  color: var(--wyw-path-blue);
  transform: translate3d(0, 0, 0);
  animation: wyw-path-float var(--dur, 10s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.wyw-path-float-drop::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3.2C12 3.2 6.2 10.2 6.2 14.4a5.8 5.8 0 0 0 11.6 0C17.8 10.2 12 3.2 12 3.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3.2C12 3.2 6.2 10.2 6.2 14.4a5.8 5.8 0 0 0 11.6 0C17.8 10.2 12 3.2 12 3.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes wyw-path-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: var(--o, 0.16);
  }
  40% {
    transform: translate3d(6px, -18px, 0) scale(1.06);
    opacity: calc(var(--o, 0.16) * 1.35);
  }
  70% {
    transform: translate3d(-4px, -8px, 0) scale(0.96);
    opacity: calc(var(--o, 0.16) * 0.85);
  }
}

.wyw-path-line .wyw-path-intro {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100% - 40px));
  margin: 0 auto 48px;
  text-align: center;
}

.wyw-path-drop {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 auto 14px;
  color: var(--wyw-path-blue);
}

.wyw-path-drop svg {
  display: block;
}

.wyw-path-line .wyw-path-intro h2,
.wyw-path-line .wyw-path-title {
  margin: 0 auto;
  max-width: 22ch;
  font-size: clamp(1.85rem, 3.6vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f2436;
}

.wyw-path-rule {
  display: block;
  width: 44px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: var(--wyw-path-blue);
}

.wyw-path-line .wyw-path-sub {
  margin: 14px auto 0;
  max-width: 32ch;
  color: #6b7c8f;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}

.wyw-path-track {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
}

.wyw-path-beats {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 8px 0 12px;
  width: 100%;
  display: grid;
  gap: 28px;
}

.wyw-path-spine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.wyw-path-spine path {
  fill: none;
  stroke: var(--wyw-path-line);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wyw-path-beat {
  position: relative;
  display: block;
  margin: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  opacity: 0.45;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  z-index: 1;
  min-height: 132px;
}

.wyw-path-beat.is-active {
  opacity: 1;
  transform: none;
}

.wyw-path-beat:last-child {
  padding-bottom: 0;
}

.wyw-path-node {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 50%;
  background: var(--wyw-path-blue);
  box-shadow:
    0 0 0 7px var(--wyw-path-blue-soft),
    0 0 0 1px rgba(255, 255, 255, 0.65);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wyw-path-beat:nth-of-type(odd) .wyw-path-node {
  left: calc(50% - 40px);
}

.wyw-path-beat:nth-of-type(even) .wyw-path-node {
  left: calc(50% + 40px);
}

.wyw-path-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: calc(50% - 88px);
  max-width: 400px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(22, 50, 74, 0.05);
  box-shadow:
    0 1px 2px rgba(22, 50, 74, 0.04),
    0 14px 32px rgba(22, 50, 74, 0.08);
}

.wyw-path-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 48px;
  height: 2px;
  background: var(--wyw-path-line);
  transform: translateY(-50%);
  pointer-events: none;
}

.wyw-path-beat:nth-of-type(odd) .wyw-path-card {
  margin-right: auto;
  margin-left: 0;
}

.wyw-path-beat:nth-of-type(odd) .wyw-path-card::after {
  right: -48px;
}

.wyw-path-beat:nth-of-type(even) .wyw-path-card {
  margin-left: auto;
  margin-right: 0;
}

.wyw-path-beat:nth-of-type(even) .wyw-path-card::after {
  left: -48px;
}

.wyw-path-media {
  position: relative;
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 30%, #f7fbff 0%, #d7e8f5 55%, #bfd8eb 100%);
  border: 1px solid rgba(74, 159, 212, 0.18);
  background-size: cover;
  background-position: center;
}

body.dev-mode.dev-editing .wyw-path-media[data-upload] {
  outline-offset: 2px;
}

.wyw-path-media:not(.has-upload)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.55) 0 18%, transparent 19%),
    linear-gradient(180deg, transparent 58%, rgba(74, 159, 212, 0.12) 100%);
  pointer-events: none;
}

.wyw-path-media img,
.wyw-path-media .seo-upload-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wyw-path-copy {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 6px;
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  width: auto;
}

.wyw-path-copy::before {
  content: none;
}

.wyw-path-step {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wyw-path-blue);
  line-height: 1.3;
  white-space: nowrap;
  text-align: left;
}

.wyw-path-copy h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #0f2436;
  font-family: var(--sans);
}

.wyw-path-copy > p:not(.wyw-path-step) {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: #6b7c8f;
  max-width: none;
}

@media (max-width: 799px) {
  .wyw-path-line {
    padding: 44px 0 56px;
  }

  .wyw-path-track {
    width: min(560px, calc(100% - 28px));
  }

  .wyw-path-beats {
    gap: 18px;
    padding-left: 0;
  }

  .wyw-path-beat {
    min-height: 0;
    padding: 4px 0;
  }

  .wyw-path-node {
    left: 18px;
  }

  .wyw-path-beat:nth-of-type(odd) .wyw-path-node,
  .wyw-path-beat:nth-of-type(even) .wyw-path-node {
    left: 18px;
  }

  .wyw-path-beat:nth-of-type(odd) .wyw-path-card,
  .wyw-path-beat:nth-of-type(even) .wyw-path-card {
    width: calc(100% - 44px);
    max-width: none;
    margin-left: 44px;
    margin-right: 0;
    padding: 14px 14px;
    gap: 12px;
  }

  .wyw-path-beat:nth-of-type(odd) .wyw-path-card::after,
  .wyw-path-beat:nth-of-type(even) .wyw-path-card::after {
    left: -26px;
    right: auto;
    width: 26px;
  }

  .wyw-path-media {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }

  .wyw-path-step {
    white-space: normal;
    letter-spacing: 0.1em;
    font-size: 10px;
  }

  .wyw-path-copy > p:not(.wyw-path-step) {
    font-size: 13px;
  }
}

@media (min-width: 900px) {
  .wyw-path-duo {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border-top: 0;
  }

  .wyw-path-duo .wyw-exposure {
    padding: 64px 36px 48px;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
  }

  .wyw-path-line {
    padding: 72px 24px 88px;
    border-top: 0;
    border-left: 0;
    border-radius: 0;
  }

  .wyw-path-duo > .wyw-path-intro,
  .wyw-exposure .wyw-path-intro {
    width: 100%;
    margin: 0 0 40px;
    text-align: left;
  }

  .wyw-exposure .wyw-path-intro h2,
  .wyw-exposure .wyw-path-title {
    margin: 0;
    max-width: 16ch;
  }

  .wyw-exposure-lede {
    margin: 14px 0 0;
    text-align: left;
  }

  .wyw-exposure-viz {
    width: 100%;
    margin: 0;
  }

  .wyw-path-track {
    width: min(980px, 100%);
    margin: 0 auto;
  }

  .wyw-path-beats {
    width: 100%;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wyw-path-beat {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wyw-path-float-drop {
    animation: none;
  }
}

/* Yuka-style glass location chip */
.wyw-place-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 14px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(22, 50, 74, 0.1);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 8px 20px rgba(22, 50, 74, 0.05);
  color: var(--wyw-glass-ink, var(--wyw-ink));
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: min(100%, 28rem);
}

.wyw-place-chip[hidden] {
  display: none !important;
}

.wyw-place-pin {
  font-size: 14px;
  line-height: 1;
  filter: grayscale(0.15);
}

.wyw-full .wyw-place-chip,
.wyw-highlights-intro .wyw-place-chip {
  display: inline-flex;
}

.wyw-highlights-intro .wyw-place-chip {
  margin-bottom: 16px;
}

/* Report highlights carousel */
.wyw-highlights {
  --wyw-hl-pad: 16px;
  width: 100%;
  margin: 0;
  padding: 48px 0 56px;
  border-top: 0;
  text-align: left;
  background: #fff;
}

.wyw-highlights[hidden] {
  display: none !important;
}

.wyw-highlights-intro {
  width: min(720px, calc(100% - 32px));
  margin: 0 auto 32px;
  padding: 0;
  text-align: center;
}

.wyw-highlights .wyw-kicker {
  text-align: center;
}

.wyw-highlights h2 {
  margin: 0 auto;
  max-width: 22ch;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-family: var(--sans);
  text-align: center;
  color: var(--wyw-ink);
}

.wyw-highlights-lede {
  max-width: 40rem;
  margin: 14px auto 0;
  color: var(--wyw-muted);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
}

.wyw-hl-viewport {
  overflow: visible;
  width: 100%;
}

.wyw-hl-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--wyw-hl-pad);
  padding: 4px var(--wyw-hl-pad) 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.wyw-hl-track::-webkit-scrollbar {
  display: none;
}

.wyw-hl-card {
  --hl-tone: #1a3348;
  position: relative;
  flex: 0 0 calc(100vw - 48px);
  width: calc(100vw - 48px);
  max-width: 380px;
  min-height: 471px;
  border-radius: 8px;
  overflow: hidden;
  scroll-snap-align: start;
  color: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 1.5rem 1.5rem;
  isolation: isolate;
}

.wyw-hl-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 28% 16%, rgba(255, 255, 255, 0.2), transparent 46%),
    radial-gradient(ellipse at 88% 78%, rgba(0, 0, 0, 0.32), transparent 52%),
    linear-gradient(165deg, var(--hl-tone) 0%, #07131d 100%);
}

.wyw-hl-card.is-metals { --hl-tone: #3a4a5c; }
.wyw-hl-card.is-dbp { --hl-tone: #2a5f7a; }
.wyw-hl-card.is-pfas { --hl-tone: #4a3d5c; }
.wyw-hl-card.is-nitrogen { --hl-tone: #2f5548; }
.wyw-hl-card.is-other { --hl-tone: #3d4550; }

.wyw-hl-card.has-img {
  background: #121820;
}

.wyw-hl-card > .wyw-hl-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: hidden;
  pointer-events: none;
  display: block;
}

.wyw-hl-card > .wyw-hl-photo img,
.wyw-hl-card > .wyw-hl-photo .seo-upload-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
  pointer-events: none;
  display: block;
  border: 0;
  filter: contrast(1.06) saturate(0.95);
}

/* Dig edit: bring highlight photos above card copy so Crop / Replace / Download work. */
body.dev-mode.dev-editing .wyw-hl-card > .wyw-hl-photo[data-upload] {
  z-index: 6;
  pointer-events: auto;
}

body.dev-mode.dev-editing .wyw-hl-card > .wyw-hl-photo .upload-hint,
body.dev-mode.dev-editing .wyw-hl-card > .wyw-hl-photo .upload-hint-btn {
  pointer-events: auto;
}

.wyw-hl-card.has-img::before {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 16, 22, 0.2) 0%,
    rgba(10, 16, 22, 0.42) 40%,
    rgba(10, 16, 22, 0.78) 72%,
    rgba(10, 16, 22, 0.94) 100%
  );
}

.wyw-hl-card.has-img::after {
  z-index: 2;
  opacity: 0.05;
}

.wyw-hl-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.28;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.4) 1px, transparent 0);
  background-size: 20px 20px;
  pointer-events: none;
}

.wyw-hl-card > *:not(.wyw-hl-photo) {
  position: relative;
  z-index: 2;
}

.wyw-hl-card.has-img > *:not(.wyw-hl-photo) {
  z-index: 3;
}

.wyw-hl-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.wyw-hl-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  margin: 0;
  background: rgba(255, 255, 255, 0.1);
  flex: 0 0 auto;
}

.wyw-hl-mark svg {
  width: 20px;
  height: 20px;
}

.wyw-hl-badge {
  flex: 0 0 auto;
  margin-top: 2px;
  text-align: right;
}

.wyw-hl-badge .wyw-higher {
  color: #f08a8a;
  font-size: 0.9375rem;
}

.wyw-hl-badge-meta {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.55);
}

.wyw-hl-badge.is-muted {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  font-weight: 500;
}

.wyw-hl-name {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.wyw-hl-name + .wyw-hl-chem-full {
  margin: 0.4rem 0 0;
}

.wyw-hl-effect {
  margin: 0.85rem 0 0;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  max-width: 28ch;
}

.wyw-hl-chem {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.wyw-hl-chem-label {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}

.wyw-hl-chem-name {
  margin: 0.35rem 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}

.wyw-hl-chem-full {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.65);
}

.wyw-higher {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  color: #e07070;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.wyw-higher-arrow {
  width: 0.85em;
  height: 0.85em;
  flex: 0 0 auto;
}

.wyw-hl-chem-meta {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}

.wyw-row-val .wyw-higher {
  font-size: 1.15rem;
  justify-content: flex-end;
}

.wyw-hl-meta {
  display: none;
}

.wyw-hl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  width: 100%;
}

.wyw-hl-ewg {
  margin: 0;
  flex: 0 1 auto;
  max-width: 12ch;
  text-align: right;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.55);
}

.wyw-hl-source {
  margin-top: 0;
  align-self: center;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  border-radius: 1.5rem;
  padding: 0.5rem 1.4375rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  min-height: 2.5rem;
  flex: 0 0 auto;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.wyw-hl-source:hover,
.wyw-hl-source:focus-visible {
  background: #fff;
  color: #000;
  border-color: #000;
  outline: none;
}

.wyw-hl-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1080px, calc(100% - 32px));
  margin: 1.5rem auto 0;
}

.wyw-hl-counter {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wyw-ink);
  font-weight: 400;
  line-height: 1.1;
}

.wyw-hl-buttons {
  display: flex;
  gap: 0.5rem;
}

.wyw-hl-btn {
  width: auto;
  height: auto;
  border-radius: 50%;
  border: 1px solid rgba(22, 50, 74, 0.1);
  background: rgba(255, 255, 255, 0.9);
  color: var(--wyw-glass-ink, var(--wyw-ink));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.625rem;
  box-shadow: 0 8px 20px rgba(22, 50, 74, 0.06);
}

.wyw-hl-btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.wyw-hl-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wyw-hl-btn:not(:disabled):hover,
.wyw-hl-btn:not(:disabled):focus-visible {
  border-color: #000;
  outline: none;
}

@media (min-width: 768px) {
  .wyw-highlights {
    --wyw-hl-pad: 20px;
    padding: 64px 0 72px;
  }

  .wyw-highlights-intro {
    margin-bottom: 40px;
  }

  .wyw-highlights-lede {
    font-size: 1.125rem;
    line-height: 1.35;
  }

  .wyw-hl-card {
    flex-basis: min(38vw, 420px);
    width: min(38vw, 420px);
    max-width: none;
    min-height: 600px;
    border-radius: 1rem;
    padding: 2.5rem 2rem 2rem;
  }

  .wyw-hl-name {
    margin-bottom: 1.5rem;
    font-size: 2.75rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  .wyw-hl-effect {
    font-size: 1.125rem;
    line-height: 1.3;
    max-width: 16ch;
  }

  .wyw-hl-source {
    min-height: 3rem;
    padding: 0.75rem 2.4375rem;
    font-size: 1.125rem;
    line-height: 1.2;
  }

  .wyw-hl-nav {
    justify-content: flex-end;
    margin-top: 2.5rem;
    gap: 1.5rem;
  }

  .wyw-hl-counter {
    font-size: 0.875rem;
    letter-spacing: 0;
    line-height: 1.3;
  }

  .wyw-hl-btn {
    padding: 0.75rem;
  }

  .wyw-hl-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

@media (min-width: 1100px) {
  .wyw-hl-card {
    flex-basis: min(32vw, 440px);
    width: min(32vw, 440px);
  }
}

/* Legacy exposure helpers — path-duo owns the live styles */
.wyw-exposure-copy .wyw-kicker {
  margin-bottom: 10px;
}

.wyw-exposure-bar {
  display: none;
}

/* Story tabs */
.wyw-story {
  margin: 0;
  padding: clamp(56px, 8vw, 96px) 20px;
  background: #fff;
  border-top: 1px solid rgba(22, 50, 74, 0.08);
}

.wyw-story-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
  border: 1px solid rgba(22, 50, 74, 0.08);
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 14px 36px rgba(22, 50, 74, 0.05);
}

.wyw-marquee {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid rgba(22, 50, 74, 0.08);
  border-bottom: 1px solid rgba(22, 50, 74, 0.08);
  background: #0f2436;
  color: #f4f8fb;
}

.wyw-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: wyw-marquee-scroll 42s linear infinite;
}

.wyw-marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.wyw-marquee-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 40px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 248, 251, 0.92);
}

.wyw-marquee-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(74, 159, 212, 0.85);
  transform: translateY(-50%);
}

@keyframes wyw-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-25%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wyw-marquee-track {
    animation: none;
  }
}

.wyw-story-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  align-items: center;
  justify-content: center;
  width: min(720px, 100%);
  margin: 0 auto 28px;
  padding: 0;
  border: 0;
  text-align: left;
}

.wyw-story-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.wyw-story-badge-ico {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.wyw-story-badge-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.wyw-story-badge-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wyw-ink, #16202b);
  line-height: 1.25;
}

.wyw-story-badge-sub {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--wyw-muted, #7c828b);
  line-height: 1.35;
}

.wyw-story-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  justify-content: flex-start;
  margin: 0 0 40px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(22, 50, 74, 0.08);
}

.wyw-story-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 0 14px;
  margin: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: #9ca3af;
  cursor: pointer;
}

.wyw-story-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  height: 2px;
  background: transparent;
  transition: background 0.2s ease;
}

.wyw-story-tab:hover,
.wyw-story-tab:focus-visible {
  color: var(--wyw-ink);
  outline: none;
}

.wyw-story-tab.is-active {
  color: var(--wyw-ink);
  font-weight: 500;
}

.wyw-story-tab.is-active::after {
  background: var(--wyw-ink);
}

.wyw-story-panels {
  position: relative;
}

.wyw-story-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}

.wyw-story-panel[hidden] {
  display: none !important;
}

.wyw-story-copy {
  max-width: 34rem;
}

.wyw-story-copy h2 {
  margin: 0 0 14px;
  max-width: none;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--wyw-ink);
  font-family: var(--sans);
}

.wyw-story-copy p {
  margin: 0 0 28px;
  max-width: 38ch;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--wyw-muted);
  font-family: var(--sans);
  text-wrap: pretty;
}

.wyw-story-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--wyw-ink, #16202b);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  font-family: var(--sans);
  box-shadow: 0 10px 24px rgba(22, 32, 43, 0.18);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wyw-story-cta:hover,
.wyw-story-cta:focus-visible {
  background: #0b1520;
  color: #fff;
  border-color: transparent;
  outline: none;
  box-shadow: 0 12px 28px rgba(22, 32, 43, 0.24);
}

.wyw-story-media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #eef1f4;
  border-radius: 22px;
}

.wyw-story-media img,
.wyw-story-media .seo-upload-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

@media (max-width: 800px) {
  .wyw-story {
    padding: 40px 16px 56px;
  }

  .wyw-story-proof {
    gap: 14px 24px;
    margin-bottom: 22px;
    justify-content: center;
  }

  .wyw-story-badge {
    flex: 0 1 auto;
    min-width: 0;
  }

  .wyw-story-nav {
    gap: 0 20px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wyw-story-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .wyw-story-media {
    order: -1;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    border-radius: 18px;
  }

  .wyw-story-copy {
    max-width: none;
  }

  .wyw-story-copy h2 {
    max-width: none;
  }

  .wyw-story-copy p {
    max-width: none;
  }
}

/* Results FAQ */
.wyw-faq {
  margin: 0;
  padding: 72px 20px 96px;
  background: #fff;
  border-top: 1px solid rgba(22, 50, 74, 0.08);
}

.wyw-faq-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px 56px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}

.wyw-faq-intro .wyw-kicker {
  margin-bottom: 10px;
}

.wyw-faq-intro h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--wyw-glass-ink, var(--wyw-ink));
}

.wyw-faq-lede {
  margin: 14px 0 0;
  max-width: 30ch;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wyw-glass-muted, var(--wyw-muted));
}

.wyw-faq-list {
  display: grid;
  gap: 10px;
  border-top: 0;
}

.wyw-faq-item {
  border: 1px solid rgba(22, 50, 74, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 22px rgba(22, 50, 74, 0.04);
  overflow: hidden;
}

.wyw-faq-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px 18px;
  align-items: center;
  margin: 0;
  padding: 18px 16px;
  border: 0;
  background: transparent;
  color: var(--wyw-glass-ink, var(--wyw-ink));
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.wyw-faq-trigger:hover,
.wyw-faq-trigger:focus-visible {
  outline: none;
}

.wyw-faq-trigger:focus-visible .wyw-faq-q {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.wyw-faq-num {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wyw-muted);
  font-weight: 500;
}

.wyw-faq-q {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.wyw-faq-icon {
  flex: 0 0 auto;
  color: var(--wyw-ink);
  transition: transform 0.25s ease;
}

.wyw-faq-item.is-open .wyw-faq-icon {
  transform: rotate(45deg);
}

.wyw-faq-panel {
  overflow: hidden;
  padding: 0 16px 16px;
}

.wyw-faq-panel[hidden] {
  display: none;
}

.wyw-faq-panel p {
  margin: 0;
  max-width: 48ch;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--wyw-glass-muted, var(--wyw-muted));
}

@media (max-width: 800px) {
  .wyw-faq {
    padding: 56px 20px 72px;
  }

  .wyw-faq-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .wyw-faq-panel {
    padding-left: 4px;
  }
}

/* Full report — dense list */
.wyw-full {
  margin-top: 36px;
  padding: 36px 20px 8px;
  border-top: 0;
  text-align: center;
}

.wyw-toggles {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}

.wyw-toggle {
  border-radius: 999px;
  padding: 10px 18px;
  border: 1px solid rgba(22, 50, 74, 0.1);
  background: rgba(255, 255, 255, 0.9);
  color: var(--wyw-glass-ink, var(--wyw-ink));
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(22, 50, 74, 0.04);
}

.wyw-toggle span {
  color: var(--wyw-glass-muted, var(--wyw-muted));
  font-variant-numeric: tabular-nums;
}

.wyw-toggle.is-active {
  background: var(--wyw-glass-ink, var(--wyw-ink));
  color: #fff;
  border-color: var(--wyw-glass-ink, var(--wyw-ink));
}

.wyw-toggle.is-active span {
  color: rgba(255, 255, 255, 0.7);
}

.wyw-list-panel {
  width: 100%;
  margin: 28px auto 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  text-align: left;
}

.wyw-list {
  list-style: none;
  margin: 0;
  padding: 4px 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 900px) {
  .wyw-list,
  .wyw-list.is-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wyw-list[hidden] {
  display: none !important;
}

.wyw-row {
  --row-accent: #9aa6b2;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;
  min-height: 0;
  padding: 20px 20px 18px 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(22, 50, 74, 0.08);
  border-radius: 16px;
  border-left: 3px solid var(--row-accent);
  box-shadow: 0 10px 24px rgba(22, 50, 74, 0.04);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.wyw-row:has(.wyw-dot.is-red),
.wyw-row:has(.wyw-row-num.is-red) {
  --row-accent: var(--wyw-red);
}

.wyw-row:has(.wyw-dot.is-orange),
.wyw-row:has(.wyw-row-num.is-orange) {
  --row-accent: var(--wyw-orange);
}

.wyw-row:has(.wyw-dot.is-green),
.wyw-row:has(.wyw-row-num.is-green) {
  --row-accent: var(--wyw-green);
}

.wyw-row.is-float-2,
.wyw-row.is-float-3 {
  transform: none;
}

.wyw-row:hover {
  background: #fbfcfd;
  transform: none;
  box-shadow: none;
}

.wyw-row.is-float-2:hover,
.wyw-row.is-float-3:hover {
  transform: none;
}

.wyw-row .wyw-dot {
  display: none;
}

.wyw-row-main {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
  width: auto;
  padding-right: 0;
  align-self: center;
}

.wyw-row-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  max-width: 100%;
}

.wyw-row-title {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.wyw-row-name .wyw-info-btn {
  flex: 0 0 auto;
  margin-left: 0;
}

.wyw-row-sub {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--wyw-muted);
  font-weight: 300;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.wyw-row-val {
  grid-column: 2;
  grid-row: 1 / span 2;
  text-align: right;
  width: auto;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  align-self: center;
}

.wyw-row-num {
  display: block;
  font-size: 1.55rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--wyw-ink);
}

.wyw-row-num.is-red {
  color: var(--wyw-red);
}

.wyw-row-num.is-orange {
  color: var(--wyw-orange);
}

.wyw-row-num.is-green {
  color: var(--wyw-green);
}

.wyw-row-note {
  display: block;
  font-size: 11px;
  color: var(--wyw-muted);
  font-weight: 300;
  text-align: right;
  white-space: nowrap;
  line-height: 1.25;
}

.wyw-row-ola {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 35, 55, 0.06);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.wyw-row-ola-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--wyw-muted);
  line-height: 1.3;
}

.wyw-row-ola-num {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--wyw-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wyw-empty {
  padding: 20px 22px;
  color: var(--wyw-muted);
  font-weight: 300;
  font-size: 14px;
  text-align: center;
  list-style: none;
  background: #fff;
  border: 1px solid var(--wyw-line);
  border-radius: 14px;
  grid-column: 1 / -1;
}

.wyw-legal {
  margin: 26px 6px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--wyw-muted);
  font-weight: 300;
  text-align: left;
}

/* Info button + explain popup */
.wyw-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wyw-muted);
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}

.wyw-info-btn:hover,
.wyw-info-btn:focus-visible {
  color: var(--wyw-ink);
  background: var(--wyw-line);
  outline: none;
}

.wyw-circle-inner {
  position: relative;
}

.wyw-circle .wyw-info-btn {
  position: absolute;
  top: 14%;
  right: 16%;
  z-index: 2;
}

.wyw-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(22, 32, 43, 0.28);
}

.wyw-info-overlay[hidden] {
  display: none !important;
}

.wyw-info-modal {
  width: min(400px, 100%);
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(22, 32, 43, 0.14);
  padding: 24px 22px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  animation: wyw-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Desktop: slide out as a right-side panel instead of a centered popup */
@media (min-width: 901px) {
  .wyw-info-overlay {
    display: block;
    padding: 0;
    background: rgba(22, 32, 43, 0.18);
  }

  .wyw-info-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 44vw);
    max-width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border: 0;
    border-left: 1px solid #e5e7eb;
    box-shadow: -18px 0 48px rgba(22, 32, 43, 0.12);
    padding: 64px 32px 32px;
    gap: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: wyw-info-slide 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .wyw-info-close {
    top: 20px;
    right: 24px;
    width: 32px;
    height: 32px;
  }
}

@keyframes wyw-info-slide {
  from {
    transform: translateX(100%);
    opacity: 0.92;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.wyw-info-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #6b7280;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wyw-info-close:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.wyw-info-circle.wyw-circle {
  --fill: #fafbfc;
  --halo: rgba(22, 32, 43, 0.04);
  width: min(188px, 54vw);
  margin: 8px auto 4px;
  animation: none;
  flex-shrink: 0;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--accent) 45%, #fff);
  background:
    radial-gradient(circle at 50% 40%, #fff 0%, var(--fill) 78%);
  box-shadow:
    0 0 0 7px var(--halo),
    0 14px 32px rgba(22, 32, 43, 0.08);
}

.wyw-info-circle.wyw-circle.is-red {
  --fill: rgba(229, 72, 77, 0.05);
  --halo: rgba(229, 72, 77, 0.1);
  border-color: color-mix(in srgb, var(--wyw-red) 55%, #fff);
}

.wyw-info-circle.wyw-circle.is-orange {
  --fill: rgba(240, 160, 60, 0.06);
  --halo: rgba(240, 160, 60, 0.12);
  border-color: color-mix(in srgb, var(--wyw-orange) 55%, #fff);
}

.wyw-info-circle.wyw-circle.is-green {
  --fill: rgba(47, 169, 110, 0.06);
  --halo: rgba(47, 169, 110, 0.12);
  border-color: color-mix(in srgb, var(--wyw-green) 55%, #fff);
}

.wyw-info-circle .wyw-circle-inner {
  padding: 18% 14% 16%;
  gap: 0;
}

.wyw-info-circle .wyw-circle-name {
  margin: 0;
  font-size: clamp(15px, 3.6vw, 18px);
}

.wyw-info-circle .wyw-circle-num {
  margin-top: 12px;
  font-size: clamp(1.7rem, 5.2vw, 2.1rem);
  letter-spacing: -0.04em;
}

.wyw-info-circle .wyw-circle-note {
  margin-top: 8px;
  font-size: 9.5px;
  letter-spacing: 0.02em;
}

.wyw-info-circle[hidden] {
  display: none !important;
}

/* Light Labs–style contextualization card */
.wyw-info-card {
  position: relative;
  background: #f9fafb;
  border: 1px solid #f0f1f3;
  border-radius: 10px;
  padding: 18px;
}

.wyw-info-body {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--wyw-ink);
  text-wrap: pretty;
}

.wyw-info-source {
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #8a9199;
}

.wyw-info-source[hidden] {
  display: none !important;
}

.wyw-info-source::before {
  content: 'Guideline: ';
  font-weight: 400;
}

.wyw-info-sources {
  margin: 0;
  border-top: 1px solid #eef0f2;
  padding-top: 14px;
}

.wyw-info-sources-title {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a9199;
  line-height: 1.4;
}

.wyw-info-sources-list {
  margin: 0;
  padding: 0 0 0 1.1em;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wyw-info-sources-list li {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: #6b7280;
  padding-left: 2px;
}

.wyw-info-ewg {
  margin: 0;
  border-top: 1px solid #eef0f2;
  padding-top: 14px;
}

.wyw-info-ewg summary {
  list-style: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a9199;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
  transition: color 0.15s ease;
}

.wyw-info-ewg summary:hover {
  color: var(--wyw-ink);
}

.wyw-info-ewg summary::-webkit-details-marker {
  display: none;
}

.wyw-info-ewg summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #b6bcc3;
  border-bottom: 1.5px solid #b6bcc3;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  margin-right: 2px;
}

.wyw-info-ewg[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.wyw-info-ewg-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 12px;
}

.wyw-info-ewg-logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.wyw-info-ewg-body p {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: #6b7280;
  text-wrap: pretty;
}

body.wyw-info-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .wyw-summary {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "score grade"
      "blurb blurb"
      "stats stats";
    justify-items: center;
    align-items: center;
    text-align: center;
    gap: 12px 10px;
    padding: 22px 18px 18px;
  }

  .wyw-summary-grade {
    grid-area: grade;
    width: 100%;
    border-right: 0;
    border-bottom: 0;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 0 0 10px;
    margin: 0;
    min-height: 0;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .wyw-index-letter {
    font-size: 3.4rem;
    line-height: 0.9;
  }

  .wyw-index-label {
    margin-top: 4px;
    font-size: 1.15rem;
  }

  .wyw-dash-score {
    grid-area: score;
    width: 100%;
    justify-content: center;
  }

  .wyw-index-gauge {
    width: 132px;
    height: 132px;
  }

  .wyw-index-val {
    font-size: 36px;
  }

  .wyw-index-of {
    font-size: 12px;
  }

  .wyw-summary-blurb {
    display: block;
    grid-area: blurb;
    justify-self: stretch;
    max-width: none;
    width: 100%;
    margin: 4px 0 0;
    padding: 0 8px;
    font-size: 14px;
    line-height: 1.45;
  }

  .wyw-summary-stats {
    grid-area: stats;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 16px 0 0;
    margin-top: 10px;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
  }

  .wyw-summary-stat {
    justify-items: center;
    align-content: start;
    padding: 0 10px;
  }

  .wyw-summary-stat:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .wyw-summary-stat-l {
    max-width: none;
  }

  .wyw-meta-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .wyw-meta-card {
    min-height: 64px;
    padding: 14px 14px 14px 14px;
    border-radius: 16px;
  }

  .wyw-meta-text {
    flex: 1;
    min-width: 0;
  }

  .wyw-meta-chevron {
    display: grid;
    place-content: center;
  }
}

@media (max-width: 600px) {
  .wyw-top {
    padding: 4px 0 18px;
  }

  .wrstats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    padding: 0;
    width: 100%;
  }

  .wrstat {
    padding: 10px 4px 8px;
    gap: 4px;
  }

  .wrstat + .wrstat::before {
    top: 10px;
    bottom: 10px;
  }

  .wr__micro,
  .wyw-has-results .wr__micro {
    font-size: 8px;
    letter-spacing: 0.06em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .wrstat__n,
  .wyw-has-results .wrstat__n {
    font-size: clamp(1.55rem, 7.5vw, 1.9rem);
  }

  .wrstat__sub,
  .wyw-has-results .wrstat__sub {
    max-width: none;
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
  }
}

@media (max-width: 800px) {
  .wrstats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: none;
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 700px) {

  .wyw-form {
    gap: 32px;
    margin-top: 28px;
  }

  .wyw-btn {
    width: auto;
    min-width: 12rem;
  }

  .wyw-hero {
    padding-top: 96px;
  }

  .wyw-meta-card {
    min-height: 58px;
    padding: 12px 14px;
  }

  .wyw-retake-copy {
    font-size: 13px;
  }

  .wyw-journey-flow {
    gap: 10px 8px;
  }

  .wyw-journey-arrow {
    display: none;
  }

  .wyw-journey-step,
  .wyw-journey-pill {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
    white-space: normal;
  }

  .wyw-list {
    padding-bottom: 8px;
  }

  .wyw-row {
    padding: 14px 14px 13px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wyw-anim,
  .wyw-circle {
    animation: none;
  }

  .wyw-index-path {
    transition: none;
  }
}

@media print {
  .site-header,
  .wyw-search,
  .wyw-share,
  .wyw-retake,
  .wyw-toggles,
  .wyw-provider-pills {
    display: none !important;
  }

  .wyw-hero {
    background: #fff;
    color: #000;
    padding-top: 24px;
  }

  .wyw-hero-bg {
    display: none;
  }

  .wyw-circle,
  .wyw-list-panel {
    box-shadow: none;
  }

  .wyw-anim,
  .wyw-circle {
    animation: none;
  }
}

/* ========== Site chrome: home capsule nav (site-wide) ========== */
body {
  background: var(--paper);
}

body:has(.site-header--kanva) .announce-bar {
  display: none;
}

/* Clear fixed capsule on non-home pages */
body:not(.home-page):not(.atlas-page):not(.pdp-page):has(.site-header--kanva) > main,
body:not(.home-page):not(.atlas-page):not(.pdp-page):has(.site-header--kanva) main:first-of-type {
  padding-top: 120px;
}

/* Product: offset the buy box / gallery themselves (main padding alone was getting clipped/ignored under zoom) */
.pdp-page .pdp-top,
body.pdp-page .pdp-top {
  padding-top: calc(18px + 68px + 40px) !important;
}

body.pdp-page.dev-mode:has([data-dev-banner]:not([hidden])) .pdp-top,
body.pdp-page.bp-builder-on .pdp-top {
  padding-top: calc(58px + 68px + 40px) !important;
}

.pdp-page .pdp-gallery,
body.pdp-page .pdp-gallery {
  top: calc(18px + 68px + 20px);
}

body.pdp-page.dev-mode:has([data-dev-banner]:not([hidden])) .pdp-gallery,
body.pdp-page.bp-builder-on .pdp-gallery {
  top: calc(58px + 68px + 20px);
}

@media (max-width: 820px) {
  body:not(.home-page):not(.atlas-page):not(.pdp-page):has(.site-header--kanva) > main,
  body:not(.home-page):not(.atlas-page):not(.pdp-page):has(.site-header--kanva) main:first-of-type {
    padding-top: 86px;
  }

  .pdp-page .pdp-top,
  body.pdp-page .pdp-top {
    padding-top: calc(12px + 54px + 28px) !important;
  }

  body.pdp-page.dev-mode:has([data-dev-banner]:not([hidden])) .pdp-top,
  body.pdp-page.bp-builder-on .pdp-top {
    padding-top: calc(58px + 54px + 28px) !important;
  }

  .pdp-page .pdp-gallery,
  body.pdp-page .pdp-gallery {
    top: calc(12px + 54px + 16px);
  }

  body.pdp-page.dev-mode:has([data-dev-banner]:not([hidden])) .pdp-gallery,
  body.pdp-page.bp-builder-on .pdp-gallery {
    top: calc(58px + 54px + 16px);
  }
}

/* Default sticky bar — only when not using the home capsule */
.site-header:not(.site-header--kanva) {
  top: 12px;
  margin-left: max(12px, env(safe-area-inset-left, 0px));
  margin-right: max(12px, env(safe-area-inset-right, 0px));
  width: auto;
  max-width: calc(100vw - 24px);
  padding: 12px 20px;
  border-radius: 18px;
  border: 1px solid rgba(26, 28, 24, 0.08);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 10px 36px rgba(26, 28, 24, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.site-header:not(.site-header--kanva).is-scrolled {
  top: 10px;
  border-color: rgba(26, 28, 24, 0.1);
  background: rgba(255, 255, 255, 0.96);
}

/* Home capsule header — canonical site nav */
.site-header.site-header--kanva {
  position: fixed;
  z-index: 100;
  top: 18px;
  left: 50%;
  right: auto;
  width: min(calc(100% - 36px), 1240px);
  height: 68px;
  max-width: 1240px;
  margin: 0;
  padding: 0 24px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 28px rgba(18, 20, 17, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Only offset when the edit banner is actually showing (EDIT ON) */
body.dev-mode.dev-editing:has([data-dev-banner]:not([hidden])) .site-header.site-header--kanva,
body.pdp-page.bp-builder-on.dev-editing:has([data-dev-banner]:not([hidden])) .site-header.site-header--kanva {
  top: 58px;
}

.site-header--kanva > .site-nav {
  position: static;
  display: flex;
  grid-column: 1;
  justify-self: start;
  gap: clamp(14px, 1.8vw, 27px);
  width: auto;
  padding: 0;
  background: none;
  box-shadow: none;
}

.site-header--kanva .site-nav a {
  padding: 0;
  color: var(--ink, #0a0a0a);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-transform: none;
}

.site-header--kanva > .wordmark {
  position: static;
  grid-column: 2;
  justify-self: center;
  transform: none;
  color: var(--ink, #0a0a0a);
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-transform: none;
}

.site-header--kanva > .wordmark img {
  height: 36px;
  max-width: min(234px, 48vw);
}

.site-header--kanva > .site-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 7px;
  align-items: center;
}

.site-header--kanva .kv-header-icon {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 7px;
  place-items: center;
  color: var(--ink, #0a0a0a);
  border-radius: 50%;
  text-decoration: none;
}

.site-header--kanva .kv-header-icon:hover {
  background: #eef6ff;
}

.site-header--kanva .kv-header-icon svg {
  width: 20px;
  height: 20px;
}

.site-header--kanva .locale-select {
  min-width: 52px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(10, 26, 46, 0.12);
  border-radius: 999px;
  font-size: 10px;
}

.site-header--kanva .nav-toggle {
  display: none;
}

@media (min-width: 821px) {
  .site-header--kanva .site-nav a[href="/filter"] {
    display: inline-flex;
  }
}

@media (max-width: 820px) {
  .site-header.site-header--kanva {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(54px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0 14px;
    margin: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 0 rgba(10, 26, 46, 0.08);
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    transition:
      top 0.28s ease,
      width 0.28s ease,
      left 0.28s ease,
      transform 0.28s ease,
      border-radius 0.28s ease,
      box-shadow 0.28s ease,
      height 0.28s ease,
      padding 0.28s ease;
  }

  .site-header.site-header--kanva.is-scrolled {
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    width: min(calc(100% - 20px), 1240px) !important;
    max-width: 1240px !important;
    height: 54px;
    padding: 0 10px 0 12px;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 28px rgba(18, 20, 17, 0.12);
  }

  body.dev-mode.dev-editing:has([data-dev-banner]:not([hidden])) .site-header.site-header--kanva {
    top: 58px !important;
  }

  body.dev-mode.dev-editing:has([data-dev-banner]:not([hidden])) .site-header.site-header--kanva.is-scrolled {
    top: calc(58px + 12px) !important;
  }

  .site-header--kanva > .site-nav {
    display: none;
  }

  .site-header--kanva > .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4.5px;
    grid-column: 1;
    grid-row: 1;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    justify-self: start;
    align-self: center;
    background: none;
    border: 0;
    color: var(--ink, #0a0a0a);
    cursor: pointer;
  }

  .site-header--kanva > .nav-toggle span {
    display: block;
    width: 16px;
    height: 1.7px;
    background: currentColor;
    border-radius: 1px;
  }

  .site-header--kanva > .nav-toggle span:nth-child(3) {
    width: 10px;
  }

  .site-header--kanva > .wordmark {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    font-size: 18px;
    line-height: 1;
  }

  .site-header--kanva > .wordmark img {
    height: 22px;
    max-width: min(140px, 38vw);
  }

  .site-header--kanva > .site-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    gap: 4px;
  }

  .site-header--kanva .kv-header-icon:not(.icon-btn) {
    display: none;
  }

  .site-header--kanva .locale-root {
    display: flex;
    align-items: center;
  }

  .site-header--kanva .locale-select {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    height: 34px;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
  }

  .site-header--kanva .locale-select svg {
    display: none;
  }

  .site-header--kanva .kv-header-icon.icon-btn {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
  }
}

@media (max-width: 390px) {
  .site-header.site-header--kanva {
    height: calc(50px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 8px 0 10px;
    gap: 4px;
  }

  .site-header.site-header--kanva.is-scrolled {
    top: 10px !important;
    width: min(calc(100% - 16px), 1240px) !important;
    height: 50px;
    padding: 0 8px 0 10px;
  }

  .site-header--kanva > .wordmark img {
    height: 18px;
    max-width: min(110px, 34vw);
  }

  .site-header--kanva .locale-select {
    height: 30px;
    padding: 0 7px;
  }

  .site-header--kanva .locale-select-text {
    display: none;
  }

  .site-header--kanva .kv-header-icon.icon-btn {
    width: 30px;
    height: 30px;
  }
}

.icon-btn {
  border-radius: var(--radius-pill);
}

.locale-select {
  border-radius: var(--radius-pill);
}

input[type="email"],
input[type="text"],
input[type="search"],
.newsletter-form input {
  border-radius: var(--radius-pill);
}

.newsletter-form button,
.newsletter button {
  border-radius: var(--radius-pill);
  background: var(--accent-olive);
  color: #fff;
}

.announce-bar {
  background: var(--accent-deep);
}

/* ========== Checkmate — Sown-style mystery offer popup ========== */
.checkmate-popup.checkmate-popup--mellow {
  --cm-ink: #0a0a0a;
  --cm-muted: #3a3a3a;
  --cm-line: #d0d0d0;
  display: block;
  padding: 0;
  background: #000;
  backdrop-filter: none;
  font-family: var(--sans), Helvetica, Arial, sans-serif;
}

.checkmate-popup--mellow .checkmate-popup__inner {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
  opacity: 1;
}

.checkmate-popup--mellow .checkmate-popup__inner::after,
.checkmate-popup--mellow .checkmate-popup__brand,
.checkmate-popup--mellow .checkmate-popup__dismiss,
.checkmate-popup--mellow .checkmate-popup__footer,
.checkmate-popup--mellow .checkmate-popup__decline {
  display: none !important;
}

.checkmate-popup--mellow .checkmate-popup__close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: max(14px, env(safe-area-inset-left, 0px));
  right: auto;
  z-index: 30;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.22);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.checkmate-popup--mellow .checkmate-popup__close svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
}

.checkmate-popup--mellow.is-open .checkmate-popup__close,
.checkmate-popup--mellow.is-settling .checkmate-popup__close {
  animation: cm-close-fade-in 0.7s ease 2s forwards;
}

.checkmate-popup--mellow .checkmate-popup__close.is-close-ready {
  pointer-events: auto;
}

.checkmate-popup--mellow .checkmate-popup__close.is-close-ready:hover,
.checkmate-popup--mellow .checkmate-popup__close.is-close-ready:focus-visible {
  opacity: 1;
  outline: none;
  background: rgba(0, 0, 0, 0.58);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.3);
}

@keyframes cm-close-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .checkmate-popup--mellow.is-open .checkmate-popup__close,
  .checkmate-popup--mellow.is-settling .checkmate-popup__close {
    animation: none;
    opacity: 1;
  }
  .checkmate-popup--mellow .checkmate-popup__close.is-close-ready {
    pointer-events: auto;
  }
}

.checkmate-popup--mellow .checkmate-popup__media {
  margin: 0;
  background: #111;
  overflow: hidden;
}

.checkmate-popup--mellow .checkmate-popup__media-img,
.checkmate-popup--mellow .checkmate-popup__media .seo-upload-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.checkmate-popup--mellow .checkmate-popup__media-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

/* Keep left photo strip in Edit — the global [data-upload] rule uses position:relative
   which collapses this absolute media layer to 0 height and kills the left image. */
body.dev-editing .checkmate-popup--mellow.is-open .checkmate-popup__media {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 54% !important;
  height: auto !important;
  cursor: pointer;
  outline: 2px dashed rgba(36, 120, 80, 0.85);
  outline-offset: -6px;
  /* Above the white panel so left-side upload controls are reachable */
  z-index: 3;
  pointer-events: auto;
}

body.dev-editing .checkmate-popup--mellow.is-open .checkmate-popup__media-input {
  pointer-events: auto !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  z-index: 7;
  cursor: pointer;
}

body.dev-editing .checkmate-popup--mellow.is-open .checkmate-popup__media .upload-hint {
  display: inline-flex !important;
  left: 50%;
  top: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  z-index: 8;
  pointer-events: auto !important;
}

@media (max-width: 820px) {
  /* Mobile edit: keep full-bleed photo BEHIND the frosted card so the Sown layout stays intact */
  body.dev-editing .checkmate-popup--mellow.is-open .checkmate-popup__media {
    inset: 0 !important;
    width: auto !important;
    z-index: 1 !important;
    pointer-events: none !important;
    outline: none;
  }

  body.dev-editing .checkmate-popup--mellow.is-open .checkmate-popup__media-input {
    pointer-events: auto !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 72px !important;
    z-index: 6;
  }

  body.dev-editing .checkmate-popup--mellow.is-open .checkmate-popup__media .upload-hint {
    top: max(52px, calc(env(safe-area-inset-top, 0px) + 44px));
    left: 50%;
    transform: translate(-50%, 0);
  }

  body.dev-editing .checkmate-popup--mellow.is-open .checkmate-popup__panel {
    z-index: 4;
    pointer-events: auto;
  }
}

body.dev-editing .checkmate-popup--mellow.is-open .checkmate-popup__panel {
  pointer-events: auto;
  z-index: 2;
}

.checkmate-popup--mellow .checkmate-popup__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.checkmate-popup--mellow .checkmate-popup__brand-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 28px;
}

.checkmate-popup--mellow .checkmate-popup__logo {
  width: auto;
  height: 34px;
  object-fit: contain;
}

.checkmate-popup--mellow .checkmate-popup__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 360px;
}

.checkmate-popup--mellow .checkmate-popup__stage[hidden] {
  display: none !important;
}

.checkmate-popup--mellow .checkmate-popup__headline {
  margin: 0;
  color: var(--cm-ink);
  font-family: var(--sans), Helvetica, Arial, sans-serif;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
}

.checkmate-popup--mellow .checkmate-popup__headline--offer {
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: 0.04em;
}

.checkmate-popup--mellow .checkmate-popup__lede {
  margin: 0;
  color: var(--cm-ink);
  font-size: 15px;
  line-height: 1.4;
}

.checkmate-popup--mellow .checkmate-popup__lede--sentence {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.checkmate-popup--mellow .checkmate-popup__kicker {
  margin: 0;
  color: var(--cm-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.checkmate-popup--mellow .checkmate-popup__mystery {
  margin: 0;
  color: var(--cm-ink);
  font-family: var(--sans), Helvetica, Arial, sans-serif;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-transform: uppercase;
}

.checkmate-popup--mellow .checkmate-popup__picks {
  display: flex;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin-top: 8px;
  perspective: 600px;
}

.checkmate-popup--mellow .checkmate-popup__pick {
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 4px;
  background: #0a0a0a;
  color: #fff;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.checkmate-popup--mellow .checkmate-popup__pick:hover,
.checkmate-popup--mellow .checkmate-popup__pick:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.checkmate-popup--mellow .checkmate-popup__pick.is-dimmed {
  opacity: 0.28;
  transform: scale(0.92);
  pointer-events: none;
}

.checkmate-popup--mellow .checkmate-popup__pick.is-flipping {
  pointer-events: none;
  animation: cm-pick-flip 0.55s cubic-bezier(0.4, 0.05, 0.2, 1) forwards;
}

.checkmate-popup--mellow .checkmate-popup__stage.is-leaving {
  animation: cm-stage-out 0.28s ease forwards;
  pointer-events: none;
}

.checkmate-popup--mellow .checkmate-popup__stage.is-entering {
  animation: cm-stage-in 0.42s ease;
}

@keyframes cm-pick-flip {
  0% {
    transform: rotateY(0deg) scale(1);
  }
  45% {
    transform: rotateY(90deg) scale(1.06);
  }
  55% {
    transform: rotateY(90deg) scale(1.06);
  }
  100% {
    transform: rotateY(180deg) scale(1);
  }
}

@keyframes cm-stage-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes cm-stage-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkmate-popup--mellow .checkmate-popup__pick.is-flipping,
  .checkmate-popup--mellow .checkmate-popup__stage.is-leaving,
  .checkmate-popup--mellow .checkmate-popup__stage.is-entering {
    animation: none !important;
  }
}

.checkmate-popup--mellow .checkmate-popup__outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 14px 18px;
  border: 1.5px solid #0a0a0a;
  border-radius: 2px;
  background: #fff;
  color: #0a0a0a;
  font: 700 15px/1 var(--sans), Helvetica, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.checkmate-popup--mellow .checkmate-popup__outline-btn:hover,
.checkmate-popup--mellow .checkmate-popup__outline-btn:focus-visible {
  background: #0a0a0a;
  color: #fff;
  outline: none;
}

.checkmate-popup--mellow .checkmate-popup__outline-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.checkmate-popup--mellow .checkmate-popup__form {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.checkmate-popup--mellow .checkmate-popup__email {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1.5px solid var(--cm-line);
  border-radius: 2px;
  background: #fff;
  color: var(--cm-ink);
  font: 400 15px/1.2 var(--sans), Helvetica, Arial, sans-serif;
  outline: none;
  box-sizing: border-box;
}

.checkmate-popup--mellow .checkmate-popup__email:focus {
  border-color: #0a0a0a;
}

.checkmate-popup--mellow .checkmate-popup__email::placeholder {
  color: #9a9a9a;
}

.checkmate-popup--mellow .checkmate-popup__error {
  margin: 0;
  color: #b42318;
  font-size: 13px;
  text-align: left;
}

.checkmate-popup--mellow .checkmate-popup__code-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 2px dashed #0a0a0a;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

.checkmate-popup--mellow .checkmate-popup__code {
  font: 700 18px/1 var(--sans), Helvetica, Arial, sans-serif;
  letter-spacing: 0.08em;
  color: var(--cm-ink);
  text-transform: uppercase;
}

.checkmate-popup--mellow .checkmate-popup__copy-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--cm-ink);
  cursor: pointer;
  padding: 0;
}

.checkmate-popup--mellow .checkmate-popup__scratch {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1.7 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  touch-action: none;
  user-select: none;
}

.checkmate-popup--mellow .checkmate-popup__scratch-prize {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  background: #fff;
  color: var(--cm-ink);
  pointer-events: none;
}

.checkmate-popup--mellow .checkmate-popup__scratch-prize-value {
  max-width: 90%;
  font-size: clamp(18px, 5.2vw, 24px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.checkmate-popup--mellow .checkmate-popup__scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.checkmate-popup--mellow .checkmate-popup__scratch-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(90, 60, 0, 0.35);
  pointer-events: none;
}

.checkmate-popup--mellow .checkmate-popup__scratch-hint[hidden] {
  display: none !important;
}

.checkmate-popup--mellow .checkmate-confetti {
  display: none !important;
}

.checkmate-popup--mellow .checkmate-popup__headline--mobile-only,
.checkmate-popup--mellow .checkmate-popup__lede--mobile-only {
  display: none;
}

/* Desktop: photo only on the left strip (crop targets this frame, not full screen) */
@media (min-width: 821px) {
  .checkmate-popup--mellow .checkmate-popup__media {
    position: absolute;
    inset: 0 auto 0 0;
    width: 54%;
    z-index: 1;
  }

  .checkmate-popup--mellow .checkmate-popup__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    /* Wider than 50% so the diagonal clip still leaves ~half the viewport white */
    width: 58%;
    max-width: none;
    padding: 48px 44px 48px 96px;
    background: #fff;
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }

  .checkmate-popup--mellow[data-cm-mode="scratch"] .checkmate-popup__stage[data-cm-stage="scratch"] {
    /* desktop never uses scratch as entry, but keep safe */
  }

  .checkmate-popup--mellow .checkmate-popup__stage[data-cm-stage="scratch"] {
    display: none !important;
  }
}

/* Mobile: full-bleed photo + frosted centered card (Sown-style) */
@media (max-width: 820px) {
  .checkmate-popup.checkmate-popup--mellow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #000;
  }

  .checkmate-popup--mellow .checkmate-popup__inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    overflow: hidden;
    background: #000;
  }

  .checkmate-popup--mellow .checkmate-popup__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    margin: 0;
  }

  .checkmate-popup--mellow .checkmate-popup__media-img,
  .checkmate-popup--mellow .checkmate-popup__media .seo-upload-img {
    object-fit: cover;
    object-position: center 20%;
  }

  .checkmate-popup--mellow .checkmate-popup__panel {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: auto;
    min-height: min(78dvh, calc(100% - 96px));
    max-height: calc(100% - 72px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 48px 22px 40px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 0;
    box-shadow: none;
  }

  .checkmate-popup--mellow .checkmate-popup__brand-wrap {
    margin: 0 0 32px;
  }

  .checkmate-popup--mellow .checkmate-popup__stage {
    gap: 22px;
    max-width: 100%;
  }

  .checkmate-popup--mellow .checkmate-popup__close {
    top: max(16px, env(safe-area-inset-top, 0px));
    left: auto;
    right: max(16px, env(safe-area-inset-right, 0px));
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: transparent;
    color: #0a0a0a;
    box-shadow: none;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
      drop-shadow(0 1px 2px rgba(255, 255, 255, 0.75));
    z-index: 40;
  }

  .checkmate-popup--mellow .checkmate-popup__close.is-close-ready:hover,
  .checkmate-popup--mellow .checkmate-popup__close.is-close-ready:focus-visible {
    background: transparent;
    opacity: 0.7;
    box-shadow: none;
  }

  .checkmate-popup--mellow .checkmate-popup__close svg {
    width: 22px;
    height: 22px;
    filter: none;
  }

  .checkmate-popup--mellow .checkmate-popup__stage[data-cm-stage="pick"] {
    display: none !important;
  }

  .checkmate-popup--mellow .checkmate-popup__headline--mobile-only,
  .checkmate-popup--mellow .checkmate-popup__lede--mobile-only {
    display: block;
  }

  .checkmate-popup--mellow .checkmate-popup__logo {
    height: 32px;
  }

  .checkmate-popup--mellow .checkmate-popup__headline {
    font-size: 28px;
    letter-spacing: 0.04em;
  }

  .checkmate-popup--mellow .checkmate-popup__lede {
    font-size: 16px;
  }

  .checkmate-popup--mellow .checkmate-popup__mystery {
    font-size: 32px;
  }

  .checkmate-popup--mellow .checkmate-popup__scratch {
    width: min(100%, 300px);
    border-radius: 14px;
    margin-top: 8px;
  }

  .checkmate-popup--mellow .checkmate-popup__outline-btn {
    margin-top: 18px;
  }

  .checkmate-popup--mellow .checkmate-popup__code-box {
    margin-top: 4px;
  }
}