/* ============ Design 3 — page-scoped layer ============
   Design 3 is a fork of Design 1 and still shares tokens/base/styles.css +
   variant-v1.css + variant-v9.css with it. Everything here is scoped to
   .ampd-page--v3 so it cannot leak back into Design 1; anything that should
   change on BOTH pages belongs in the shared files instead. */

/* ---- Homepage product grid (client request, 2026-07-27) ----
   The buy decision moved off the homepage onto per-product pages, so this
   section now lists products. Cards are whole-card links: image, name, price
   from. Kept to one column — at 390px a two-up grid would shrink the product
   photography to thumbnails, which is the opposite of the brief. */
.ampd-page--v3 .pdp-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
/* White rather than --bg-panel: that token is a 20% tint of the active accent,
   so the cards were sitting on a heavy purple wash under the AMPD scheme. This
   matches the plan cards on the product pages — white, with the accent carried
   in the border instead of the fill. */
.ampd-page--v3 .pdp-card {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px;
  background: var(--bg-white);
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 16%, var(--line));
  border-radius: 20px;
  box-shadow: 0 10px 24px -18px rgba(11, 11, 14, 0.2);
  color: var(--ampd-ink); text-decoration: none;
}
.ampd-page--v3 .pdp-card__media {
  width: 84px; flex: none; border-radius: 14px; overflow: hidden; background: var(--tint-10);
}
.ampd-page--v3 .pdp-card__media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ampd-page--v3 .pdp-card__body { flex: 1; min-width: 0; }
.ampd-page--v3 .pdp-card__name {
  font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
}
.ampd-page--v3 .pdp-card__price { margin-top: 4px; font-size: 13.5px; color: var(--ampd-body); }
.ampd-page--v3 .pdp-card__price strong { color: var(--ampd-ink); font-weight: 700; }
.ampd-page--v3 .pdp-card__go { flex: none; font-size: 17px; color: var(--accent-primary); }
@media (hover: hover) {
  .ampd-page--v3 .pdp-card:hover { border-color: var(--accent-primary); }
}
/* The Unflavoured card has no photography yet — placeholder fills the media
   slot at the same square crop. .pdp-placeholder itself lives in
   product-page.css, which the homepage doesn't load, so it's restated here. */
.ampd-page--v3 .pdp-card__media .pdp-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 1 / 1;
  background: repeating-linear-gradient(45deg, var(--tint-10) 0 10px, var(--bg-panel) 10px 20px);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600; line-height: 1.45;
  color: var(--ampd-body); padding: 8px;
}

/* ---- Smooth in-page scrolling ----
   For the anchor links that jump down the page (#founder from the scroll cue,
   #choose / #flavour from the CTAs and the sticky bar). base.css already forces
   scroll-behavior: auto for prefers-reduced-motion, so this needs no guard of
   its own. scroll-margin stops a target landing flush against the top edge. */
html:has(.ampd-page--v3) { scroll-behavior: smooth; }
.ampd-page--v3 [id] { scroll-margin-top: 16px; }

/* ---- Client review pass, 2026-07-27 ----
   Values below are exactly as the client supplied them from inspect tools;
   only the .ampd-page--v3 scope is added so Design 1 keeps its own numbers.
   variant-v3.css loads after variant-v1.css/variant-v9.css, so these win the
   ties against the equally-specific .ampd-page--v1 rules they replace. */

/* "WHY WE MADE AMPD" was getting lost between sections one and two: 12.5px ->
   15px. The alternative the client asked for — dropping it entirely — is the
   "Scroll cue" toggle below rather than a second value here. */
.ampd-page--v3 .ampd-scrolldown__label { font-size: 15px; }

/* Scroll cue on/off. The markers sit between the hero and the founder section;
   the cue itself is inside the hero, hence :has() rather than a direct rule. */
.ampd-page--v3 .scrollcue-review-marker { display: none !important; }
.ampd-page--v3:has(.scrollcue-review-marker[data-review-variant="off"]:not([hidden])) .ampd-scrolldown {
  display: none;
}

/* Gap between Ross's story and the section after it: 64px -> 40px of bottom
   padding, with the top matched to it (was 20px). */
.ampd-page--v3 .ampd-founder {
  background: var(--bg-founder);
  padding: 40px 24px 40px;
}

/* Why It's Different: top padding 64px -> 40px. background/container-type are
   carried over from the v1 rule unchanged (a shorthand-free override would
   leave them alone, but the client supplied the whole block). */
.ampd-page--v3 .ampd-different {
  padding: 40px 24px 56px;
  background: none;
  container-type: inline-size;
}

/* Why It's Different card copy: 13px -> 15px. */
.ampd-page--v3 .ampd-different__desc {
  margin: 5px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ampd-body);
}

/* ---- Hero: muted autoplay + "Tap for sound" chip ----
   The hero video now starts playing silently on arrival, so the affordance
   that matters is turning sound ON. A 34px speaker glyph in the corner is
   easy to read as "mute this" (or to miss entirely), so while the video is
   playing muted the chip stands in for it: same visual language as the other
   video buttons, same baseline, but labelled. It hands back to the ordinary
   mute button the moment sound is on, so muting again is still one tap. */
.ampd-page--v3 .ampd-hero__media.is-sound-cue .ampd-hero__video-btn[data-action="toggle-mute"] {
  display: none;
}

.ampd-page--v3 .ampd-sound-cue {
  position: absolute; right: 14px; bottom: 46px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: 999px;
  background: rgba(11, 11, 14, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--ampd-white);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
}
.ampd-page--v3 .ampd-sound-cue[hidden] { display: none; }
.ampd-page--v3 .ampd-sound-cue svg { display: block; }
/* Same expanded hit area the V9 pass gave the other small hero controls. */
.ampd-page--v3 .ampd-sound-cue::after { content: ''; position: absolute; inset: -10px; }
@media (hover: hover) {
  .ampd-page--v3 .ampd-sound-cue:hover { background: rgba(11, 11, 14, 0.68); }
}