/* =====================================================================
   ComfyNap - styles.css
   Mobile-first · vanilla CSS · no framework
   Order: fonts → tokens → base → layout → components → sections → motion
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 0. Fonts - self-hosted (latin subset) to avoid a render-blocking
      request to fonts.googleapis.com. Both are variable fonts, so one
      file covers the whole weight range used on the page.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Inter Tight";
  src: url("assets/fonts/inter-tight-variable-latin.woff2") format("woff2-variations"),
       url("assets/fonts/inter-tight-variable-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-variable-latin.woff2") format("woff2-variations"),
       url("assets/fonts/inter-variable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks: while Inter Tight / Inter are still loading, text
   renders in local Arial scaled to the same width and line box (values computed
   from the font files), so nothing reflows when the real fonts arrive. Without
   this, the taller hero copy pushed the Add to Cart and the uses strip down
   ~19px on shorter screens the moment the fonts loaded. */
@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 96.96%;
  ascent-override: 99.91%;
  descent-override: 24.88%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107.48%;
  ascent-override: 90.14%;
  descent-override: 22.44%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Caveat";
  src: url("assets/fonts/caveat-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */
:root {
  /* Palette - matched to ostrichpillow.eu: near-black text, muted slate for
     dark sections (was navy), royal-blue accent. Client explicitly asked to
     match their site's colors, not just the one CTA button. */
  --c-ink: #121212;
  --c-ink-soft: #3D3D3D;
  --c-navy-950: #3D4A63;
  --c-navy-900: #53607B;
  --c-navy-700: #1B2F5C;
  --c-slate-600: #4A5878;
  --c-slate-400: #8593A9;
  --c-blue-700: #0C28A0;
  --c-blue-600: #0F32C3;
  --c-blue-400: #4F6FEA;
  --c-blue-300: #8098E8;
  --c-blue-100: #E4E8FB;
  --c-blue-50: #F4F6FD;
  --c-white: #FFFFFF;
  --c-line: #DCE4F1;
  --c-amber: #F2B441;
  --c-red: #D9534F;

  /* Semantic (light) - dark sections override these */
  --bg: var(--c-white);
  --surface: var(--c-white);
  --text: var(--c-ink-soft);
  --heading: var(--c-ink);
  --line: var(--c-line);
  --muted: var(--c-slate-400);
  --focus: var(--c-blue-600);

  /* Type */
  /* Inter Tight / Inter: the closest real match to the reference design's type */
  --font-display: "Inter Tight", "Inter Tight Fallback", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;

  /* Shape & depth */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-cta: 0 10px 26px rgba(35, 86, 244, 0.28);
  --shadow-float: 0 18px 50px rgba(6, 18, 41, 0.18);
  --shadow-up: 0 -8px 30px rgba(6, 18, 41, 0.12);

  /* Layout */
  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Header and hero run wider than the content container, edge to edge */
  --edge: clamp(1.25rem, 7vw, 8.5rem);
  --section-y: clamp(2.75rem, 4.5vw, 4.75rem);
  --header-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  /* Sketch pass: one lever that scales every rem-based size and space on the
     page together (type AND spacing, since both are set in rem) - a fuller,
     less cramped feel without hand-tuning each rule. */
  font-size: 108.5%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: 400 1rem/1.6 var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* overflow:hidden alone doesn't stop iOS Safari from rubber-band-scrolling the
   page behind a fixed modal - position:fixed here (with `top` set inline by
   script.js to the negative scroll offset at lock time) is the standard fix. */
body.is-locked { overflow: hidden; position: fixed; width: 100%; }

img, svg, video { display: block; max-width: 100%; }
/* Author styles beat the browser's own [hidden] rule regardless of selector
   specificity (different cascade origins), so the instant anything above
   sets display on an element type, toggling its `hidden` attribute silently
   stops working - bit us on the mute icons. One global, unconditional rule
   here means `el.hidden = true` can always be trusted anywhere on the page. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: inherit; }
p, dl { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.1;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Placeholder text: visibly editable, never mistaken for approved copy */
.ph {
  color: var(--muted);
  border-bottom: 1px dashed currentColor;
}

/* ------------------------------------------------------------------ */
/* 3. Layout                                                           */
/* ------------------------------------------------------------------ */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { max-width: 880px; }

.section { padding-block: var(--section-y); }
.section--tint { background: var(--c-blue-50); }
.section--dark {
  --bg: var(--c-navy-950);
  --surface: rgba(255, 255, 255, 0.06);
  --text: rgba(255, 255, 255, 0.78);
  --heading: #fff;
  --line: rgba(255, 255, 255, 0.14);
  --muted: rgba(255, 255, 255, 0.55);
  --focus: #fff;
  background: linear-gradient(180deg, var(--c-navy-900) 0%, var(--c-navy-950) 100%);
  color: var(--text);
}

.section__head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: none;
}
.section__head--row > div { max-width: 640px; }

.section__title {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.01em; /* Inter Tight is already tightly spaced */
}
.section__lead {
  margin-top: 0.875rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  max-width: 56ch;
}
.section__head--center .section__lead { margin-inline: auto; }
.section__sub {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--c-blue-600);
}

/* ------------------------------------------------------------------ */
/* 4. Components                                                       */
/* ------------------------------------------------------------------ */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s, transform 0.15s var(--ease), box-shadow 0.2s;
}
.btn--primary {
  background: var(--c-blue-600);
  color: #fff;
  box-shadow: 0 8px 20px rgba(15, 50, 195, 0.28);
}
.btn--primary:hover {
  background: var(--c-blue-700);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 50, 195, 0.34);
}
.btn--primary:active { transform: translateY(0); box-shadow: 0 8px 20px rgba(15, 50, 195, 0.28); }
/* Secondary action that must never compete with Add to Cart */
.btn--ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--heading);
}
.btn--ghost:hover { border-color: var(--heading); }
.btn--sm { padding: 0.65rem 1.1rem; font-size: 0.9rem; }
.btn--lg { padding: 1.125rem 2.25rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

/* Badge - filled for the product claim, outlined for press accreditation so the
   two read as different kinds of credential rather than one repeated chip. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--c-blue-100);
  color: var(--c-blue-700);
}
.badge .icon { width: 1rem; height: 1rem; }

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--heading);
}
.chip .icon { width: 1rem; height: 1rem; }

/* Stars & rating */
.stars { display: inline-flex; gap: 2px; color: var(--c-amber); }
.stars .icon { width: 1rem; height: 1rem; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.9375rem; }
.rating__value { font-weight: 700; color: var(--heading); }
.rating__count { color: var(--muted); text-decoration: none; }
.rating__count:hover { color: var(--c-blue-600); text-decoration: underline; }

/* Trust row */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.trust li { display: inline-flex; align-items: center; gap: 0.45rem; }
.trust .icon { color: var(--c-blue-600); }
.section--dark .trust .icon { color: var(--c-blue-300); }

/* Media placeholder */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--media-bg, linear-gradient(160deg, #F4F7FD 0%, #E1E9F7 100%));
  margin: 0;
}
.media--square { aspect-ratio: 4 / 5; }
.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 9; }
.media--portrait { aspect-ratio: 9 / 16; }
.media--video { --media-bg: linear-gradient(160deg, #22407A 0%, #0B1B3A 70%); }
.media__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 8%;
}
.media__art--cover { padding: 0; }
.media__art--faint { opacity: 0.32; }
/* Real imagery: <picture>/<img> fills the box */
.media > picture,
.media > img,
.media > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}
.ambient-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none; /* the play/sound button above it stays clickable */
}
[data-ambient-video].is-playing .ambient-video { opacity: 1; }

.media--video > picture::after,
.media--video > img + .media__trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 18, 41, 0.05) 0%, rgba(6, 18, 41, 0.45) 100%);
  pointer-events: none;
}
.media__duration {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(6, 18, 41, 0.7);
  color: #fff;
  pointer-events: none;
}
.media__label {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.82);
  color: var(--c-navy-700);
  pointer-events: none;
}
.media--video .media__label { background: rgba(6, 18, 41, 0.55); color: #fff; }
.media__trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.media__trigger:focus-visible { outline-offset: -4px; }

.play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  color: var(--heading);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(6, 18, 41, 0.35);
  transition: transform 0.2s var(--ease);
}
.play-btn .icon { width: 26px; height: 26px; margin-left: 3px; }
.play-btn--sm { width: 44px; height: 44px; }
.play-btn--sm .icon { width: 20px; height: 20px; }
.play-btn--lg { width: 76px; height: 76px; }
.play-btn--lg .icon { width: 32px; height: 32px; }
.media__trigger:hover .play-btn { transform: scale(1.06); }

/* Ambient autoplay trigger (hero): the video is already playing, so no
   center play icon sits over it - clicking anywhere on the figure opens the
   full video with sound instead. */
.media__trigger--ambient { background: transparent; }

/* Mute toggle: small and corner-placed on purpose - a real control (unlike
   the old passive hint it replaced), but still deliberately out of the way
   of the video itself. Sits as a sibling *after* the trigger button in the
   markup, so it stacks on top and intercepts its own clicks. */
.mute-toggle {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(6, 18, 41, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.mute-toggle:hover { background: rgba(6, 18, 41, 0.75); transform: scale(1.06); }
.mute-toggle .icon { width: 18px; height: 18px; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card > .media { border-radius: 0; }
.card__body { padding: 1.125rem 1.25rem 1.375rem; }
.card__kicker { font-size: 0.75rem; font-weight: 700; color: var(--c-blue-600); margin-bottom: 0.3rem; }
.card__title { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.card__text { font-size: 0.9375rem; }

/* Carousel (scroll-snap; JS only drives the arrows) */
.carousel { position: relative; --carousel-gap: 1rem; }
.carousel__track {
  --cols: var(--cols-xs, 1.25);
  display: flex;
  gap: var(--carousel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: 4px;
  margin-inline: calc(-1 * var(--gutter));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
/* position:relative makes the track the containing block, so cards that Flip
   briefly positions absolutely while they fade out stay clipped by the track
   instead of spilling past the viewport edge. */
.carousel__track { position: relative; }
.carousel__track > .is-filtered-out { display: none; }
.carousel__track > * {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--carousel-gap)) / var(--cols));
  scroll-snap-align: start;
}
.carousel__nav { display: flex; gap: 0.5rem; }
.carousel__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--heading);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
.carousel__btn:hover:not(:disabled) {
  background: var(--heading);
  color: var(--bg);
  border-color: var(--heading);
}
.carousel__btn:disabled { opacity: 0.35; cursor: default; }

/* Comparison table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}
.cmp th, .cmp td {
  padding: 1rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.cmp th:first-child, .cmp td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--heading);
}
.cmp thead th {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--heading);
  border-bottom: 2px solid var(--line);
}
.cmp .cmp__brand { background: var(--c-blue-50); }
.cmp thead .cmp__brand { color: var(--c-blue-700); border-radius: var(--r-md) var(--r-md) 0 0; }
.cmp tbody tr:last-child .cmp__brand { border-radius: 0 0 var(--r-md) var(--r-md); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.mark--yes { background: var(--c-blue-600); color: #fff; }
.mark--no { background: #EEF1F6; color: var(--c-slate-400); }
.mark .icon { width: 16px; height: 16px; }
.cmp__note { display: block; margin-top: 0.4rem; font-size: 0.8125rem; font-weight: 500; color: var(--text); }
.cmp__brand .cmp__note { color: var(--heading); font-weight: 600; }

/* Accordion */
.faq { display: grid; gap: 0.75rem; }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.2s;
}
.faq__item.is-open { border-color: var(--c-blue-600); }
.faq__item h3 { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.125rem 1.25rem;
  background: none;
  border: 0;
  border-radius: inherit;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--heading);
  cursor: pointer;
}
.faq__icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-blue-50);
  color: var(--c-blue-700);
  transition: background-color 0.2s, color 0.2s;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.is-open .faq__icon { background: var(--c-blue-600); color: #fff; }
.is-open .faq__icon::after { transform: rotate(0deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.32s var(--ease), visibility 0s 0.32s;
}
.is-open .faq__a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.32s var(--ease), visibility 0s;
}
.faq__a-inner { overflow: hidden; min-height: 0; }
.faq__a p { padding: 0 1.25rem 1.25rem; font-size: 0.9375rem; }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 18, 41, 0.8);
  backdrop-filter: blur(4px);
}
.modal__dialog {
  position: relative;
  width: min(100%, 960px);
  background: #000;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.modal__body { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.modal__video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.modal__video[hidden] { display: none; }
.modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--heading);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.modal__placeholder {
  padding: 2rem;
  max-width: 48ch;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9375rem;
}
.modal__placeholder[hidden] { display: none; }
.modal__placeholder-title { font-family: var(--font-display); font-size: 1.25rem; color: #fff; margin-bottom: 0.5rem; }
.modal__placeholder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 90;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem 0.875rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--c-navy-900);
  color: #fff;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-float);
  width: max-content;
  max-width: calc(100vw - 2rem);
}
.toast[hidden] { display: none; }
.toast span, .toast a { white-space: nowrap; }
.toast a { color: #fff; font-weight: 700; }

/* ------------------------------------------------------------------ */
/* 5. Sections                                                         */
/* ------------------------------------------------------------------ */

/* Header - logo, section links, store policies, cart. Inset from the
   viewport edge by --edge (~7vw, as in the reference design). Links show
   from 900px, policies from 1440px; phones keep logo + cart. */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 249, 254, 0.92);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(220, 228, 241, 0.85);
  transition: box-shadow 0.2s;
}
.header.is-scrolled { box-shadow: 0 6px 24px rgba(16, 24, 40, 0.06); }
.header .header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: auto;
  max-width: none;
  height: var(--header-h);
  margin: 0;
  padding-inline: var(--edge);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  color: #0B1220;
  text-decoration: none;
}
.logo__mark { width: 30px; height: 30px; color: #1D4BEA; }
.logo--sm { font-size: 1.125rem; }
.logo--sm .logo__mark { width: 22px; height: 22px; }
.header__nav { display: none; margin-inline-start: clamp(1.5rem, 5.5vw, 6rem); }
.header__nav ul { display: flex; gap: clamp(1.25rem, 2.3vw, 2.5rem); }
.header__nav a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #0F172A;
  text-decoration: none;
  white-space: nowrap;
}
.header__nav a:hover { color: var(--c-blue-600); }
.header__trust {
  display: none;
  align-items: center;
  margin-inline-start: auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: #1F2937;
  white-space: nowrap;
}
.header__trust li { display: inline-flex; align-items: center; gap: 0.5rem; padding-inline: 0.85rem; }
.header__trust li + li { border-inline-start: 1px solid var(--line); }
.header__trust .icon { width: 1.25rem; height: 1.25rem; color: #0B1220; }
.cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  margin-inline-start: auto;
  border-radius: 50%;
  color: #0B1220;
  transition: background-color 0.15s var(--ease);
}
.cart-btn:hover { background: var(--c-blue-50); }
.cart-btn .icon { width: 30px; height: 30px; }
@media (min-width: 900px) {
  .header__nav { display: block; }
}
@media (min-width: 1440px) {
  .header__trust { display: flex; }
  .header__trust + .cart-btn { margin-inline-start: 1.25rem; }
}

/* Hero - customer video on the left, buy box on the right */
.hero {
  background:
    radial-gradient(110% 70% at 78% 0%, #EDF2FF 0%, rgba(237, 242, 255, 0) 62%),
    linear-gradient(180deg, #F6F8FE 0%, #FFFFFF 78%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Phones: square crop of the 16:9 film (subjects sit mid-frame) */
.hero__media {
  aspect-ratio: 1 / 1;
  max-height: 72svh;
  width: 100%;
  border-radius: 0;
}
.hero__media > picture > img,
.hero__media .ambient-video { object-position: center 40%; }
/* The film's encode carries a thin dark line on its top edge; a slight
   overscale pushes it outside the panel (the figure clips overflow). */
.hero__media .ambient-video { transform: scale(1.03); }
/* Lighter than the default video scrim: the film is bright and the poster should stay so */
.hero__media > picture::after { background: linear-gradient(180deg, rgba(6, 18, 41, 0) 60%, rgba(6, 18, 41, 0.16) 100%); }
/* The duration chip would sit under the "uses" strip; the clip opens in the modal anyway */
.hero__media .media__duration { display: none; }
/* Premium finish on the hero film (CSS only, no re-encode): a gentle
   cinematic grade, a soft vignette that settles the edges, and a faint film
   grain. The overlays ride on the full-size play trigger, which already sits
   above the video, so they add no extra elements. */
.hero__media > picture > img,
.hero__media .ambient-video { filter: saturate(0.88) contrast(1.07) brightness(1.03); }
.hero__media .media__trigger--ambient {
  background:
    radial-gradient(125% 95% at 50% 42%, rgba(8, 12, 24, 0) 52%, rgba(8, 12, 24, 0.26) 100%),
    linear-gradient(180deg, rgba(8, 12, 24, 0.16) 0%, rgba(8, 12, 24, 0) 16%, rgba(8, 12, 24, 0) 68%, rgba(8, 12, 24, 0.2) 100%);
}
.hero__media .media__trigger--ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
/* Sound toggle in dark glass, matching the Add to Cart button */
.hero__media .mute-toggle {
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(14, 14, 18, 0.42);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 18px rgba(0, 0, 0, 0.2);
}
.hero__media .mute-toggle:hover { background: rgba(14, 14, 18, 0.58); }
.hero__buy { padding: 1.75rem var(--edge) var(--section-y); }

/* Where it's used - a frosted strip over the bottom of the video */
.uses {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 2rem);
  gap: 0.25rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.uses li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.55rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: #1B2336;
}
.uses .icon { width: 1.3rem; height: 1.3rem; color: #0F1B3D; }

/* Buy box */
.buy { display: flex; flex-direction: column; gap: 1rem; }
.buy__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; }
.badge--outline {
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(15, 50, 195, 0.5);
  background: rgba(255, 255, 255, 0.6);
  color: var(--c-blue-700);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.badge--outline .icon { width: 1.05rem; height: 1.05rem; }
.proof { display: flex; align-items: center; gap: 0.7rem; }
.proof__avatars { display: flex; }
.proof__avatars span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--c-blue-100);
  color: var(--c-blue-700);
}
.proof__avatars span + span { margin-inline-start: -10px; }
.proof__avatars .icon { width: 17px; height: 17px; }
.proof__text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem; line-height: 1.3; }
.proof .stars .icon { width: 1.1rem; height: 1.1rem; }

.buy__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.4rem + 3vw, 3.9rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--heading);
}
/* Second line: a soft royal-blue gradient, clipped to the letters.
   fit-content keeps the gradient spanning the words, not the column. */
.buy__headline span {
  display: block;
  width: fit-content;
  color: #5A7BF4;
  background: linear-gradient(90deg, #4B6FF3 0%, #7F9DF9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.buy__lead {
  max-width: 31rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.15rem);
  line-height: 1.5;
  color: #4B5565;
}

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.features li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--heading);
}
.features__label { max-width: 8.5em; }
.features__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #E3E8F2;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06);
  color: var(--c-navy-700);
}
.features__icon .icon { width: 24px; height: 24px; }

.bundle { display: flex; flex-direction: column; gap: 0.8rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.bundle__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.bundle__label { font-size: 1rem; font-weight: 600; color: var(--heading); }
/* Hand-written note whose arrow curves down into the 2-pack card's corner */
.bundle__best {
  position: absolute;
  right: 0.35rem;
  bottom: -1.35rem;
  z-index: 2;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.1rem;
  font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-blue-700);
  pointer-events: none;
}
.bundle__best svg { width: 20px; height: 31px; margin-top: 0.55rem; transform: rotate(-4deg); }

/* Bundle cards - side by side; each card lays out horizontally once it's
   wide enough (container query) and stacks inside itself when it isn't. */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 0; border: 0; padding: 0; }
.tier {
  container-type: inline-size;
  position: relative;
  display: block;
  padding: 0.8rem 0.85rem;
  border: 1px solid #E1E7F0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.15s var(--ease);
}
.tier:hover { border-color: var(--c-blue-300); }
.tier.is-selected {
  border-color: var(--c-blue-600);
  background: #F6F8FF;
  box-shadow: inset 0 0 0 1px var(--c-blue-600), 0 10px 24px rgba(15, 50, 195, 0.08);
}
/* Custom radio: grey ring, or a solid blue disc with a white check */
.tier input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid #C5CEDD;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.tier input:checked {
  border-color: var(--c-blue-600);
  background: var(--c-blue-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.tier input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tier__inner { display: flex; flex-direction: column; gap: 0.6rem; }
.tier__thumb { position: relative; display: flex; align-self: center; width: 60px; height: 60px; flex: none; }
.tier__thumb img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; object-position: 50% 62%; background: #fff; }
.tier__thumb--pair { width: 80px; }
.tier__thumb--pair img:first-child { transform: scale(0.88); transform-origin: left center; opacity: 0.9; }
.tier__thumb--pair img { position: absolute; top: 0; box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(16, 24, 40, 0.12); }
.tier__thumb--pair img:first-child { left: 0; }
.tier__thumb--pair img:last-child { right: 0; }
.tier__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 0; }
.tier__name { font-size: 0.8125rem; font-weight: 600; color: var(--heading); }
.tier__price { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.45rem; font-family: var(--font-display); font-weight: 700; }
.tier__now { font-size: 1.125rem; color: var(--heading); }
.tier__was { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.tier__save {
  margin-block: 0.1rem;
  padding: 0.08rem 0.45rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--c-blue-600);
  color: #fff;
}
.tier__note { font-size: 0.7rem; line-height: 1.35; color: var(--muted); }
.tier__gift { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 600; line-height: 1.3; color: var(--c-blue-700); white-space: nowrap; }
.tier__gift .icon { width: 0.9rem; height: 0.9rem; flex: none; }
@container (min-width: 250px) {
  .tier__inner { flex-direction: row; align-items: center; gap: 0.8rem; padding-inline-start: 1.75rem; }
  .tier input { top: 50%; transform: translateY(-50%); }
}

.colorway { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.colorway__label { margin: 0; font-size: 0.8125rem; font-weight: 500; color: var(--heading); }
.colorway__label span { font-weight: 500; }
.colorway__swatches { display: flex; align-items: center; gap: 0.85rem; }
.colorway .swatch-dot { position: relative; width: 32px; height: 32px; }
.colorway .swatch-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.colorway .swatch-dot.is-selected { outline: 2px solid var(--c-navy-700); outline-offset: 3px; }

/* Black glass: a translucent dark fill over a blurred backdrop, a glossy
   top sheen, a hairline light edge and a deep soft shadow. A diagonal
   glint crosses it on hover. The only black element in the hero, so it
   stands apart from the blue accents around it. */
.buy__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 0.8rem;
  min-height: 62px;
  padding-block: 1.1rem;
  font-size: clamp(1.125rem, 0.9rem + 0.5vw, 1.375rem);
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(58, 58, 66, 0.88) 0%, rgba(18, 18, 22, 0.94) 52%, rgba(6, 6, 8, 0.97) 100%);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 14px 34px rgba(10, 10, 14, 0.3);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
/* Glossy upper sheen */
.buy__cta::before {
  content: "";
  position: absolute;
  inset: 0 0 45% 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 140% at 50% -40%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
/* Diagonal glint, parked off to the left until hover */
.buy__cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  z-index: -1;
  width: 30%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}
.buy__cta:hover {
  background: linear-gradient(180deg, rgba(70, 70, 80, 0.9) 0%, rgba(24, 24, 30, 0.95) 52%, rgba(8, 8, 10, 0.98) 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 18px 40px rgba(10, 10, 14, 0.36);
}
.buy__cta:hover::after { left: 115%; }
.buy__cta:active { transform: translateY(0); }
.buy__cta .icon { width: 1.35rem; height: 1.35rem; transition: transform 0.2s var(--ease); }
.buy__cta:hover .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .buy__cta, .buy__cta::after { transition: none; }
  .buy__cta:hover::after { left: -40%; }
}
.buy__trust { justify-content: center; gap: 0.5rem 0; margin-top: -0.2rem; font-size: 0.875rem; font-weight: 400; color: var(--heading); }
.buy__trust li { padding-inline: 0.9rem; }
.buy__trust li + li { border-inline-start: 1px solid var(--line); }
.buy__trust .icon { width: 1.3rem; height: 1.3rem; }

@media (max-width: 479px) {
  .features li { font-size: 0.8125rem; }
  .features__icon { width: 40px; height: 40px; }
  .uses { max-width: calc(100% - 1.25rem); gap: 0; padding-inline: 0.6rem; }
  .uses li { padding-inline: 0.32rem; font-size: 0.6875rem; gap: 0.3rem; }
  .uses li span { white-space: nowrap; }
  .uses .icon { width: 1.05rem; height: 1.05rem; }
  .buy__trust { font-size: 0.8125rem; }
  .buy__trust li { padding-inline: 0.55rem; }
}
@media (max-width: 374px) {
  .uses { padding-inline: 0.45rem; }
  .uses li { padding-inline: 0.22rem; gap: 0.25rem; }
  .uses .icon { width: 0.95rem; height: 0.95rem; }
}

@media (min-width: 900px) {
  /* One screen, split exactly in half: video | buy box. On screens too short
     for the buy box the row grows and the video stretches with it. */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: max(560px, calc(100svh - var(--header-h)));
  }
  .hero__media {
    align-self: stretch;
    aspect-ratio: auto;
    max-height: none;
    height: auto;
    min-height: 0;
  }
  /* Soft hand-off from the media into the page on its right edge */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 1;
    width: 24%;
    background: linear-gradient(90deg, rgba(246, 248, 254, 0) 0%, #F6F8FE 100%);
    pointer-events: none;
  }
  /* Centred in the video panel; sizes scale a little with the viewport */
  .uses {
    left: 50%;
    bottom: clamp(1.25rem, 8vh, 5.25rem);
    transform: translateX(-50%);
    gap: 0.6rem;
    padding: clamp(1rem, 0.6rem + 0.5vw, 1.3rem) clamp(1.5rem, 0.8rem + 0.9vw, 2.25rem);
    transition: bottom 0.3s var(--ease);
  }
  .uses li { gap: 0.95rem; padding-inline: clamp(0.9rem, 0.4rem + 0.6vw, 1.3rem); font-size: clamp(0.875rem, 0.7rem + 0.25vw, 1rem); }
  .uses .icon { width: clamp(1.8rem, 1.3rem + 0.6vw, 2.2rem); height: clamp(1.8rem, 1.3rem + 0.6vw, 2.2rem); }

  /* The buy box hugs the same right edge as the cart icon above it */
  /* Content hugs the centre line and gets most of the column: a modest
     gutter next to the video, a smaller one on the outer edge. */
  .hero__buy {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(1.25rem, 3.6vh, 3rem) clamp(1.5rem, 3.6vw, 5rem) clamp(1.25rem, 3vh, 2.5rem) clamp(2rem, 3.6vw, 4.75rem);
  }
  .buy { width: 100%; max-width: 860px; gap: clamp(0.8rem, 2.15vh, 1.6rem); }
  /* Everything scales up with the wider column */
  .badge--outline { font-size: 0.78rem; padding: 0.55rem 1.05rem; }
  .proof__avatars span { width: 40px; height: 40px; }
  .proof__text { font-size: 0.875rem; }
  .buy__lead { max-width: 38rem; font-size: clamp(1.125rem, 0.85rem + 0.55vw, 1.375rem); }
  .features li { font-size: clamp(0.875rem, 0.7rem + 0.3vw, 1rem); }
  .bundle__label { font-size: 1.125rem; }
  .bundle__best { font-size: 1.75rem; }
  .tier { padding: 0.8rem 0.95rem; }
  .tier__thumb, .tier__thumb img { width: 66px; height: 66px; }
  .tier__thumb--pair { width: 88px; }
  .tier__name { font-size: 0.9375rem; }
  .tier__now { font-size: 1.375rem; }
  .tier__was { font-size: 0.9rem; }
  .tier__save { font-size: 0.78rem; }
  .tier__gift { font-size: 0.8rem; }
  .colorway__label { font-size: 0.9375rem; }
  .buy__cta { min-height: 68px; padding-block: 1rem; font-size: clamp(1.25rem, 0.9rem + 0.7vw, 1.625rem); border-radius: 16px; }
  .buy__trust { font-size: 0.9375rem; }
  .bundle { padding-top: 1rem; }
  /* Desktop cards: name, price + saving, gift. The generic per-tier line
     ("Great for solo travelers") gives way to the gift, which is the offer. */
  .tier__note { display: none; }
  .buy__headline { font-size: min(clamp(2.8rem, 1.4rem + 4.2vw, 5.75rem), 8.1vh); }
  .features li { flex-direction: row; align-items: center; gap: 0.85rem; }
  .features__icon { width: 58px; height: 58px; }
  .features__icon .icon { width: 28px; height: 28px; }
  .colorway { flex-direction: row; align-items: center; gap: 0.6rem 1.1rem; }
  .colorway .swatch-dot { width: 38px; height: 38px; }
}

/* Shorter screens (1536×730 at 125% scaling, 1440×900…): keep everything down to the
   trust row inside the first screen. Tighter type and spacing; the per-tier
   note is dropped because name, price, saving and gift already say it. */
@media (min-width: 900px) and (max-height: 960px) {
  .hero__buy { padding-block: clamp(0.9rem, 2.4vh, 1.5rem); }
  .buy { gap: clamp(0.55rem, 1.35vh, 0.85rem); }
  .buy__top { gap: 0.5rem 1rem; }
  .badge--outline { padding: 0.4rem 0.85rem; font-size: 0.72rem; }
  .proof__avatars span { width: 34px; height: 34px; }
  .buy__headline { font-size: min(clamp(2.6rem, 1.4rem + 4.2vw, 5.75rem), 7.9vh); }
  .buy__lead { max-width: 42rem; font-size: clamp(1rem, 0.8rem + 0.4vw, 1.125rem); }
  .features__icon { width: 40px; height: 40px; }
  .features__icon .icon { width: 20px; height: 20px; }
  .features li { gap: 0.6rem; font-size: 0.875rem; }
  .bundle { padding-top: 0.7rem; gap: 0.5rem; }
  .bundle__label { font-size: 1rem; }
  .bundle__best { font-size: 1.4rem; bottom: -1.2rem; }
  .bundle__best svg { height: 26px; }
  .tier { padding: 0.55rem 0.75rem; }
  .tier__thumb, .tier__thumb img { width: 54px; height: 54px; }
  .tier__thumb--pair { width: 72px; }
  .tier__now { font-size: 1.2rem; }
  .tier__note { display: none; }
  .colorway { flex-direction: row; align-items: center; gap: 0.5rem 1rem; }
  .colorway .swatch-dot { width: 30px; height: 30px; }
  .buy__cta { min-height: 0; padding-block: 0.85rem; font-size: 1.125rem; }
  .uses { bottom: 1.25rem; gap: 0.5rem; padding: 0.85rem 1.6rem; }
  .uses li { gap: 0.8rem; padding-inline: 0.9rem; font-size: 0.84rem; }
  .uses .icon { width: 1.6rem; height: 1.6rem; }
}

/* Narrower desktop panels (video half is 450 to 650px): keep the strip on one
   row of labels inside its pill. */
@media (min-width: 900px) {
  .uses li span { white-space: nowrap; }
}
@media (min-width: 900px) and (max-width: 1300px) {
  .uses { gap: 0.25rem; padding: 0.7rem 1.1rem; }
  .uses li { gap: 0.55rem; padding-inline: 0.6rem; font-size: 0.8rem; }
  .uses .icon { width: 1.4rem; height: 1.4rem; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .uses { padding: 0.6rem 0.8rem; }
  .uses li { gap: 0.4rem; padding-inline: 0.42rem; font-size: 0.74rem; }
  .uses .icon { width: 1.2rem; height: 1.2rem; }
}

/* Dock line: the hero Add to Cart sits right after the buy box content (no
   gap), and the video's "uses" strip is lined up with it. The strip shares
   the button's height; script.js (initHeroDock) sets --uses-bottom from the
   button's real position so the two stay on one line at every size. The
   trust row sits under the button, spread across its full width. Placed
   last so it wins over the size-specific rules above. */
@media (min-width: 900px) {
  .hero { --dock-h: 72px; }
  .uses { bottom: var(--uses-bottom, clamp(3rem, 8vh, 5.25rem)); height: var(--dock-h); padding-block: 0; transition: none; }
  .buy__cta { height: var(--dock-h); min-height: 0; padding-block: 0; }
  .buy__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: -0.35rem;
  }
  .buy__trust li { justify-content: center; padding-inline: 0.5rem; }
}
@media (min-width: 900px) and (max-height: 960px) {
  .hero { --dock-h: 58px; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .buy__trust { font-size: 0.75rem; }
  .buy__trust li { gap: 0.3rem; padding-inline: 0.2rem; white-space: nowrap; }
  .buy__trust .icon { width: 1.05rem; height: 1.05rem; }
}

/* Buy box breathing room: one --buy-gap between blocks that grows with the
   screen height, so the free space under the trust row goes into the layout
   instead of sitting empty. "Choose your bundle" gets extra room above and
   below its divider, and the trust row stays tight to its button. On short
   screens the top padding is larger than the bottom one, which moves the
   content down into the space under the trust row. --buy-lift then raises
   only the badge + rating row out of that padding (the same amount goes
   under it), so the headline and everything below stay where they are. */
@media (min-width: 900px) {
  .hero__buy {
    --buy-gap: clamp(1rem, 2.3vh, 1.75rem);
    --buy-lift: 1.6rem;
    padding-top: calc(clamp(1.25rem, 3.6vh, 3rem) - var(--buy-lift));
    padding-bottom: 1rem;
  }
  .buy { gap: var(--buy-gap); }
  .buy__top { margin-bottom: var(--buy-lift); }
  .bundle { margin-top: calc(var(--buy-gap) * 0.6); padding-top: calc(var(--buy-gap) * 0.9); }
  .buy__trust { margin-top: calc(0.6rem - var(--buy-gap)); }
}
@media (min-width: 900px) and (max-height: 960px) {
  .hero__buy {
    --buy-gap: clamp(0.55rem, 7.3vh - 2.7rem, 1.65rem);
    --buy-lift: clamp(0rem, 23.4vh - 10.57rem, 2.3rem);
    padding-top: calc(clamp(0.9rem, 33.4vh - 14.2rem, 5.75rem) - var(--buy-lift));
    padding-bottom: clamp(0.5rem, 1.2vh, 1rem);
  }
  .bundle { gap: 0.65rem; }
}

/* The eye mask ships free with every order, so this is a "what you also get"
   card rather than a paid add-on - no toggle, no price to weigh up. */
.included { display: flex; flex-direction: column; gap: 0.45rem; }
.included__label { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--heading); }
.included__card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--c-blue-50);
}
.included__media {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  border: 1px dashed var(--muted);
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.included__body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.included__title { font-size: 0.875rem; font-weight: 700; color: var(--heading); }
.included__desc { font-size: 0.8125rem; color: var(--muted); }
.included__value { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-size: 0.75rem; color: var(--muted); }
.included__value b { font-family: var(--font-display); font-size: 1rem; color: var(--c-blue-700); }

/* Problem → Solution: the photo carries the story; the two lists sit side by
   side at every width as columns split by a rule, not as two cards. The short
   bullets fit two-up even at 375px, which keeps this section from stacking
   into a second screen of cards on phones. */
.compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.compare > .section__head { margin-bottom: 0; }
.compare__media { aspect-ratio: 1 / 1; }
.compare__panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.compare__panel { padding-block: 1rem 0.25rem; border-top: 2px solid var(--line); }
.compare__panel--problem { padding-inline-end: clamp(0.75rem, 2.5vw, 1.75rem); }
.compare__panel--solution {
  padding-inline-start: clamp(0.75rem, 2.5vw, 1.75rem);
  border-top-color: var(--c-blue-600);
  border-inline-start: 1px solid var(--line);
}
.compare__tag {
  margin-bottom: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare__panel--solution .compare__tag { color: var(--c-blue-600); }
.compare__list { display: grid; gap: 0.75rem; }
.compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading);
}
.compare__panel--problem .compare__list li { color: var(--text); font-weight: 500; }
.compare__list .icon { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; }
.compare__panel--problem .compare__list .icon { background: #FBE9E8; color: var(--c-red); }
.compare__panel--solution .compare__list .icon { background: var(--c-blue-100); color: var(--c-blue-700); }

/* Press quote (hero + final CTA) */
.press-quote {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  background: var(--c-blue-50);
  border: 1px solid var(--line);
}
.press-quote__source {
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  color: var(--heading);
  padding-right: 0.85rem;
  border-right: 1px solid var(--line);
}
.press-quote__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--heading);
}
.press-quote--dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}
.press-quote--dark .press-quote__source { color: #fff; border-right-color: rgba(255, 255, 255, 0.3); }

/* Demo video */
.demo__media { max-width: 1000px; margin-inline: auto; }

/* System: technique filter above the positions carousel. The button row
   scrolls sideways rather than wrapping if it ever runs out of room. */
.techniques { display: grid; gap: 0.85rem; margin-bottom: 1.5rem; }
.techniques__buttons {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-block: 2px;
  scrollbar-width: none;
}
.techniques__buttons::-webkit-scrollbar { display: none; }
.technique {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.technique:hover { border-color: var(--heading); }
.technique__count {
  min-width: 1.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  text-align: center;
  background: var(--c-blue-100);
  color: var(--c-blue-700);
}
.technique.is-active { background: var(--heading); border-color: var(--heading); color: var(--bg); }
.technique.is-active .technique__count { background: rgba(255, 255, 255, 0.18); color: inherit; }
.techniques__desc p { max-width: 62ch; font-size: 0.9375rem; }
/* Phones: four equal segments that always fit, count stacked under the name */
@media (max-width: 639px) {
  .techniques__buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; overflow: visible; }
  .technique {
    flex-direction: column;
    gap: 0.2rem;
    min-height: 52px;
    padding: 0.4rem 0.2rem;
    border-radius: var(--r-md);
    font-size: 0.8125rem;
  }
  .technique__count { min-width: 0; padding: 0 0.35rem; font-size: 0.6875rem; }
}

/* Materials - icon-left rows on phones, stacked cards from 640px */
.materials {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
.mat-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.mat-card__media {
  flex: none;
  width: 84px;
  aspect-ratio: 1;
  border-radius: 14px;
}
.mat-card h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.mat-card p { font-size: 0.9375rem; }
.mat-card__certs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.mat-card__certs .chip { font-size: 0.75rem; padding: 0.3rem 0.6rem; }

/* UGC */
.ugc .carousel__track { --cols-xs: 1.6; --cols-sm: 2.5; --cols-md: 3.5; --cols-lg: 4; }
.ugc-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(170deg, #22407A 0%, #0B1B3A 70%);
}
.ugc-card .media { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; --media-bg: transparent; }
.ugc-card__verified {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.92);
  color: var(--heading);
  pointer-events: none;
}
.ugc-card__verified .icon { width: 14px; height: 14px; color: var(--c-blue-600); }
.ugc-card--expert .ugc-card__verified { background: var(--c-navy-900); color: #fff; }
.ugc-card--expert .ugc-card__verified .icon { color: var(--c-amber); }
.ugc-card .play-btn { position: relative; z-index: 1; }
.ugc-card__caption {
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 0.875rem;
  z-index: 2;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  pointer-events: none;
}
.ugc-card .ph { color: rgba(255, 255, 255, 0.8); }

/* Survey stats */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}
.stat { padding-top: 1.25rem; border-top: 2px solid var(--c-blue-600); }
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--heading);
}
.stat__label { margin-top: 0.6rem; font-size: 1rem; font-weight: 600; color: var(--heading); }
.stats__note { margin-top: 2rem; font-size: 0.8125rem; max-width: 60ch; }

/* Comparison - a richer mid-scroll "proof" moment: soft gradient section
   wash + the table lifted into its own elevated card, ComfyNap's column
   pulled forward with a bolder accent instead of reading as neutral data. */
.comparison {
  background: linear-gradient(180deg, var(--c-blue-50) 0%, #fff 70%);
}
.comparison__frame {
  padding: clamp(0.5rem, 1.5vw, 1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
}
.comparison__frame .cmp { min-width: 560px; }
.cmp .cmp__brand { background: var(--c-blue-100); position: relative; }
.cmp thead .cmp__brand {
  color: var(--c-blue-700);
  border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: inset 0 3px 0 var(--c-blue-600);
}
.cmp thead .cmp__brand .cmp__thumb { box-shadow: 0 0 0 3px var(--c-blue-100), 0 6px 16px rgba(35,86,244,.25); }

/* Comparison */
.midcta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-top: 2.5rem;
}
.midcta__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--heading);
}

/* Full specifications - a native <details> under the materials cards */
.specs-more {
  margin-top: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.specs-more__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: inherit;
  font-weight: 700;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
}
.specs-more__summary::-webkit-details-marker { display: none; }
.specs-more[open] .faq__icon { background: var(--c-blue-600); color: #fff; }
.specs-more[open] .faq__icon::after { transform: rotate(0deg); }
.specs-more .specs { padding: 0 1.25rem 1.25rem; }
.specs-more .specs__item { background: var(--c-blue-50); border-color: transparent; }
.specs { display: grid; gap: 0.75rem; }
.specs__item {
  display: grid;
  gap: 0.25rem;
  padding: 1.125rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.specs dt { font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.specs dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--heading); }

/* Reviews */
.reviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.reviews__score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.25rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--heading);
}
.reviews__count { font-size: 0.9375rem; }
.reviews__summary .stars .icon { width: 1.25rem; height: 1.25rem; }
.reviews__grid { display: grid; gap: 1rem; }
.reviews__more { display: flex; justify-content: center; margin-top: 1.5rem; }

/* Phones: a single swipeable row instead of six stacked cards. The next card
   peeks in at the edge so it reads as scrollable without extra UI. */
@media (max-width: 639px) {
  .reviews__grid {
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    padding-block: 4px;
    margin-inline: calc(-1 * var(--gutter));
    scrollbar-width: none;
  }
  .reviews__grid::-webkit-scrollbar { display: none; }
  .review { scroll-snap-align: start; }
  .reviews__more { display: none; }
}
/* Tablet/desktop: first full row only until "Show all" (class set by JS) */
@media (min-width: 640px) and (max-width: 999px) {
  .reviews__grid.is-collapsed > li:nth-child(n+3) { display: none; }
}
@media (min-width: 1000px) {
  .reviews__grid.is-collapsed > li:nth-child(n+4) { display: none; }
}
.review {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.375rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.review__text { font-size: 0.9375rem; color: var(--heading); }
.review__media { aspect-ratio: 16 / 10; border-radius: var(--r-md); }
.review__meta { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; font-size: 0.875rem; }
.review__meta > div { display: flex; flex-direction: column; gap: 0.1rem; }
.review__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-blue-100);
  color: var(--c-blue-700);
}
.review__avatar .icon { width: 18px; height: 18px; }
.review__name { font-weight: 700; color: var(--heading); }
.review__name.ph { color: var(--muted); }
.review__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-blue-700);
}
.review__verified .icon { width: 14px; height: 14px; }

/* Comparison header thumbs */
.cmp__thumb {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.6rem;
  border-radius: 14px;
  object-fit: cover;
  background: var(--c-blue-50);
}

/* Final CTA */
.final { position: relative; overflow: hidden; text-align: center; }
.final__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.5;
  pointer-events: none;
}
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 18, 41, 0.55) 0%, rgba(6, 18, 41, 0.85) 100%);
  pointer-events: none;
}
.final__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 720px;
}
.final .press-quote { margin-bottom: 0.25rem; }
.final__title {
  font-size: clamp(2.375rem, 1.6rem + 3.6vw, 4.125rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.final__lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }
.final .btn { margin-top: 0.5rem; }
.final .trust { justify-content: center; }
.final .included { width: 100%; max-width: 480px; margin-top: 0.5rem; text-align: left; }
.final .included__label { text-align: center; color: rgba(255, 255, 255, 0.8); }
.final .included__card { background: rgba(255, 255, 255, 0.96); border-color: transparent; }
.final .included__title { color: var(--c-ink); }
.final .included__desc, .final .included__value, .final .included .ph { color: var(--c-slate-600); }
.final .included__media { border-color: var(--c-slate-400); color: var(--c-slate-400); }

/* Footer */
.footer {
  padding: 2.5rem 0 6.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__links a { font-weight: 600; color: var(--c-navy-700); text-decoration: none; }
.footer__links a:hover { color: var(--c-blue-600); }

/* Sticky Add to Cart bar - mobile and desktop */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-up);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.3s var(--ease), visibility 0s 0.3s;
}
.sticky-cta.is-visible {
  transform: none;
  visibility: visible;
  transition: transform 0.3s var(--ease), visibility 0s;
}
.sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sticky-cta__product { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
/* The thumbnail + color swatches need more room than a narrow phone has
   next to name/price/button - hide them below 480px rather than let them
   overflow onto the Add to Cart button, and show them once there's space. */
.sticky-cta__thumb { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.sticky-cta__info { display: flex; flex-direction: column; line-height: 1.2; flex: none; }
.sticky-cta__name { font-size: 0.9375rem; font-weight: 700; color: var(--heading); }
.sticky-cta__price { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--heading); }
.sticky-cta__colors { display: none; align-items: center; gap: 0.4rem; padding-left: 0.5rem; border-left: 1px solid var(--line); }
@media (min-width: 480px) {
  .sticky-cta__thumb { display: block; }
  .sticky-cta__colors { display: flex; }
}
.swatch-dot {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
}
.swatch-dot.is-selected { outline: 2px solid var(--c-blue-600); outline-offset: 1px; }
.sticky-cta .btn { padding: 0.9rem 1.4rem; flex: none; }
.sticky-cta.is-visible ~ .toast,
.toast { bottom: 1.25rem; }

/* ------------------------------------------------------------------ */
/* 6. Motion                                                           */
/* ------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal].is-visible,
.no-js [data-reveal] { opacity: 1; transform: none; }
.no-js .faq__a { grid-template-rows: 1fr; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .faq__a, .sticky-cta, .btn, .play-btn, .tier, .buy__cta .icon { transition: none; }
}

/* ------------------------------------------------------------------ */
/* 7. Responsive                                                       */
/* ------------------------------------------------------------------ */
@media (min-width: 640px) {
  .carousel__track { --cols: var(--cols-sm, 2.2); }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .mat-card { display: block; padding: 1.5rem; }
  .mat-card__media { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 1.25rem; border-radius: var(--r-md); }
}

@media (max-width: 639px) {
  .cmp th, .cmp td { padding: 0.875rem 0.6rem; font-size: 0.875rem; }
  .cmp thead th { font-size: 0.9375rem; }
}

@media (min-width: 900px) {
  .carousel__track { --cols: var(--cols-md, 3); }

  /* Photo on the left spanning both rows; heading + lists stack on the right
     so the text column fills the photo's height instead of floating mid-air. */
  .compare {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "media head" "media panels";
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: 2.25rem;
  }
  .compare > .section__head { grid-area: head; align-self: end; }
  .compare__media { grid-area: media; }
  .compare__panels { grid-area: panels; align-self: start; }
  .compare__list { gap: 1rem; }
  .materials { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
}

@media (min-width: 1000px) {
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}

@media (min-width: 1100px) {
  .carousel__track { --cols: var(--cols-lg, 4); }
}

@media (max-width: 899px) {
  .toast { bottom: 6rem; }
}