/* ============================================================
   AMPD Lifestyle — V1 review pass (2026-07-24)
   Every rule below is scoped under .ampd-page--v1 so it cannot leak into
   V2–V8, which each have their own scoped override file (or none, by design).
   ============================================================ */

/* ============ Hero — larger title/subtitle per review ============ */
.ampd-page--v1 .ampd-hero__title { font-size: 32px; }
.ampd-page--v1 .ampd-hero__subtitle { font-size: 15px; }

/* ============ Why Powder — premium comparison block (redesigned 2026-07-24;
   revised same day: flavour-colour band and product render removed per client
   note — cream section background, VS cards as a one-per-view swipeable rail
   spanning the viewport). Reveal animation: the brief asked for Framer Motion —
   this is a static site with no React/build step, so the identical fade +
   translateY(24px) + stagger runs on the shared [data-reveal]
   IntersectionObserver mechanic instead. */
/* tint-10 (not tint-20/--bg-panel, which reads peach-orange): true cream step
   between the white section above and the tint-20 Choose section below —
   three-step tonal rhythm, AA contrast (~4.6:1) for --ampd-body on it.
   32px radius on all corners = the "sheet" separation: white shows behind the
   top notches (against the white section above) and the bottom notches
   (against the tint-20 Choose section below). */
.ampd-page--v1 .ampd-powder {
  background: var(--tint-10);
  border-radius: 32px;
  padding: 64px 24px 56px;
}
.ampd-page--v1 .ampd-powder .ampd-eyebrow { color: var(--accent-primary); }
/* One card per view, swipeable — same scroll-snap rail mechanic as the flavour
   gallery and review rail; bleeds to the viewport edge with small cream gutters
   so the rounded corners stay visible. Dot pagination added below the rail to
   match the site's existing rail convention (gallery + reviews) as the swipe
   affordance. Cards themselves aren't individual reveal targets any more — the
   offscreen ones in the rail would never intersect until swiped, so the rail
   reveals as one unit instead. */
.ampd-page--v1 .ampd-powder__compare {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 28px -24px 0; padding: 4px 20px 8px;
  cursor: grab;
}
.ampd-page--v1 .ampd-powder__compare::-webkit-scrollbar { display: none; }
/* Mouse drag-in-progress (variant-v1.js): snap released while dragging —
   mandatory snap fights per-frame scrollLeft writes — then re-snapped
   programmatically on pointer-up. user-select off so the drag doesn't
   highlight card text. */
.ampd-page--v1 .ampd-powder__compare.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.ampd-page--v1 .ampd-vs-card {
  flex: 0 0 100%; scroll-snap-align: center;
  background: var(--bg-white);
  border: 1px solid var(--ampd-line-soft);
  border-radius: 24px;
  padding: 24px 22px;
}
.ampd-page--v1 .ampd-vs-card__who {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ampd-page--v1 .ampd-vs-card__who svg { flex-shrink: 0; }
.ampd-page--v1 .ampd-vs-card__who--win { color: var(--ampd-ink); }
.ampd-page--v1 .ampd-vs-card__who--win svg { color: var(--success); }
.ampd-page--v1 .ampd-vs-card__who--lose { color: var(--ampd-muted); }
.ampd-page--v1 .ampd-vs-card__who--lose svg { color: var(--ampd-muted); }
.ampd-page--v1 .ampd-vs-card__point { margin-top: 9px; font-size: 15px; font-weight: 700; color: var(--ampd-ink); }
.ampd-page--v1 .ampd-vs-card__point--lose { color: var(--ampd-body-strong); font-weight: 600; }
.ampd-page--v1 .ampd-vs-card__desc { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--ampd-body); }
.ampd-page--v1 .ampd-vs-card__vs {
  display: flex; align-items: center; gap: 14px; margin: 18px 0;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.15em; color: var(--ampd-muted);
}
.ampd-page--v1 .ampd-vs-card__vs::before,
.ampd-page--v1 .ampd-vs-card__vs::after { content: ''; flex: 1; height: 1px; background: var(--ampd-line-softer); }
.ampd-page--v1 .ampd-powder__video { margin-top: 32px; }
.ampd-page--v1 .ampd-powder__video-heading {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ampd-ink); text-align: center;
}
.ampd-page--v1 .ampd-powder__media { margin-top: 14px; border-radius: 24px; }
/* Trust card: thumb sits beside the text at this column width (72px keeps tap
   targets and text comfortable even at 390px — no need for a stacked variant). */
.ampd-page--v1 .ampd-trust-card {
  display: flex; align-items: center; gap: 16px; margin-top: 16px;
  border: 1px solid var(--ampd-line-soft); border-radius: 24px; padding: 20px 18px;
}
.ampd-page--v1 .ampd-trust-card__body { flex: 1; min-width: 0; }
.ampd-page--v1 .ampd-trust-card__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--ampd-ink);
}
.ampd-page--v1 .ampd-trust-card__title svg { color: var(--success); flex-shrink: 0; }
.ampd-page--v1 .ampd-trust-card__desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ampd-body); }
.ampd-page--v1 .ampd-trust-card .ampd-link-accent { margin-top: 10px; font-size: 13px; }
.ampd-page--v1 .ampd-trust-card__thumb {
  width: 72px; height: 96px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--ampd-line-soft);
}
/* Reveal: shell fades first, then cards sequentially, video, trust card last —
   DOM order + the batch-staggered observer in variant-v1.js gives that sequence. */
.ampd-page--v1 .ampd-powder [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.ampd-page--v1 .ampd-powder [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ampd-page--v1 .ampd-powder [data-reveal] { transition: none; }
}

/* ============ Choose Your AMPD — premium refinement pass (2026-07-24) ============
   Scoped elevation system, subtle and layered:
     page bg → product cards (--elev-card) → internal info cards (--elev-inner)
     → primary CTA (--elev-cta) → interactive controls (toggle thumb shadow).
   Active-card accent follows the selected flavour (Citrus Orange / Watermelon
   Green — exact brand hexes via tokens). Motion: the brief asked for Framer
   Motion — static site, no React/build step, so the same 200ms ease-out
   border/shadow/scale choreography runs on CSS transitions (disabled globally
   under prefers-reduced-motion by base.css). */
.ampd-page--v1 .ampd-choose {
  /* --bg-founder (3% accent mix, near-white cream) per review 2026-07-24 —
     also makes the tint-10 Why Powder sheet above read distinct again. */
  background: var(--bg-founder);
  --flavour-accent: var(--ampd-citrus-orange);
  --elev-card: 0 2px 10px rgba(11, 11, 14, 0.05);
  --elev-card-active: 0 10px 28px -10px rgba(11, 11, 14, 0.18);
  --elev-inner: 0 1px 4px rgba(11, 11, 14, 0.05);
  --elev-cta: 0 10px 22px -10px var(--accent-shadow), 0 2px 5px rgba(11, 11, 14, 0.06);
}
.ampd-page--v1 .ampd-choose[data-flavour="watermelon"] { --flavour-accent: var(--ampd-watermelon-green); }

/* -- Flavour selector: mirrors the plan toggle's segmented-control styling
   (own classes — main.js owns .ampd-toggle__opt). 44px options = comfortable
   tap targets; equal widths via flex: 1. -- */
.ampd-page--v1 .v1-flavour {
  display: flex; background: var(--ampd-line-softest); border-radius: 12px;
  padding: 4px; gap: 4px; margin-top: 14px;
  scroll-margin-top: 16px; /* anchor target of the Final CTA — breathing room on arrival */
}
.ampd-page--v1 .v1-flavour__opt {
  flex: 1; height: 44px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ampd-body); cursor: pointer;
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out),
              color 200ms var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.ampd-page--v1 .v1-flavour__opt[aria-selected="true"] {
  font-weight: 700; color: var(--ampd-ink); background: var(--ampd-white);
  box-shadow: 0 3px 10px rgba(11, 11, 14, 0.12), 0 1px 2px rgba(11, 11, 14, 0.06);
}
.ampd-page--v1 .v1-flavour__emoji { font-size: 16px; line-height: 1; }

/* -- "Most Popular" flag: scheme gradient instead of the shared black bar, per
   review 2026-07-24. --accent-gradient re-resolves per colour scheme, so the
   flag follows the active scheme automatically. Ink text (not white): the
   citrus gradient's yellow end would drop white text below AA contrast.
   NOTE: this is a directed exception to the brand rule that gradients are
   reserved for primary CTAs — logged in QUESTIONS.md. -- */
.ampd-page--v1 .ampd-purchase-card__flag {
  background: var(--accent-gradient);
  color: var(--ampd-white);
}

/* -- Purchase card vs Bundle card: single active card, animated states.
   Hierarchy: purchase card ("Most Popular") keeps the thicker 2px border and
   full card elevation; the bundle card sits quieter (1.5px border, inner-level
   shadow). Active card: flavour-coloured border + stronger shadow + 1.01
   scale, 200ms ease-out. Border widths never animate (no layout shift). -- */
.ampd-page--v1 .ampd-purchase-card,
.ampd-page--v1 .ampd-bundle-card {
  cursor: pointer;
  border-style: solid;
  border-color: var(--ampd-line);
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out),
              transform 200ms var(--ease-out);
}
.ampd-page--v1 .ampd-purchase-card { border-width: 2px; box-shadow: var(--elev-card); }
.ampd-page--v1 .ampd-bundle-card { border-width: 1.5px; box-shadow: var(--elev-inner); }
.ampd-page--v1 .ampd-purchase-card.is-selected,
.ampd-page--v1 .ampd-bundle-card.is-selected {
  border-color: var(--flavour-accent);
  box-shadow: var(--elev-card-active);
  transform: scale(1.01);
}

/* -- Free Gift box: reads as a bonus, not another information row — flat soft
   tint (no gradient), firmer border, larger image, inner-card elevation. -- */
.ampd-page--v1 .ampd-gift {
  align-items: center; gap: 14px;
  background: color-mix(in srgb, var(--accent-primary) 6%, white);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 26%, transparent);
  border-radius: 18px; padding: 15px 16px;
  box-shadow: var(--elev-inner);
}
.ampd-page--v1 .ampd-gift__img {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px; overflow: hidden;
  background: var(--bg-white);
}
.ampd-page--v1 .ampd-gift__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -- CTA: press choreography. .ampd-tap already scales to 0.97 on :active;
   this adds the gradient shift (background-position — gradients can't
   transition background-image) and the arrow nudge. Transition list restates
   transform/opacity so .ampd-tap's press animation keeps animating. -- */
.ampd-page--v1 .ampd-choose .ampd-btn-block--gradient {
  background-size: 160% 100%; background-position: 0% 50%;
  box-shadow: var(--elev-cta);
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out),
              background-position 250ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.ampd-page--v1 .ampd-choose .ampd-btn-block--gradient:active { background-position: 55% 50%; }
.ampd-page--v1 .ampd-choose .ampd-btn-block--cta span { transition: transform var(--duration-fast) var(--ease-out); }
.ampd-page--v1 .ampd-choose .ampd-btn-block--cta:active span { transform: translateX(3px); }
@media (hover: hover) {
  .ampd-page--v1 .ampd-choose .ampd-btn-block--cta:hover span { transform: translateX(3px); }
}

/* -- Savings badge: "30% OFF" and "SAVE £9.30" inline on one line (shared
   styles stack them in a column). -- */
.ampd-page--v1 .ampd-choose .ampd-savings-badge {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}

/* -- OTP "Add to Cart": plain solid in the scheme's primary colour (re-resolves
   per colour scheme). Ink text, not white — white on citrus orange is ~3.1:1,
   under AA for 15px text; ink is ~6.8:1 (and ~7.4:1 on watermelon green). -- */
.ampd-page--v1 .ampd-choose [data-plan="one"] .ampd-btn-block--dark {
  background: var(--accent-primary);
  color: var(--ampd-white);
}

/* -- Trust row: SVG icons (site icon set) instead of emoji, more air, quiet
   muted tone. -- */
.ampd-page--v1 .ampd-choose .ampd-reassurance-row { gap: 28px; margin-top: 16px; }
.ampd-page--v1 .ampd-choose .ampd-reassurance-row span { display: inline-flex; align-items: center; gap: 6px; }
.ampd-page--v1 .ampd-choose .ampd-reassurance-row svg { color: var(--ampd-muted); flex-shrink: 0; }

/* ============ Final CTA — image background instead of the flat gradient ============
   Dedicated photo supplied 2026-07-24 (start-today.webp — Ross + athlete in the
   gym, watermark-free), replacing the earlier hero-poster.jpg reuse. The source
   is already very dark, so the scrim is lighter than the hero-poster version
   needed — just enough to guarantee text legibility over the brighter figures. */
.ampd-page--v1 .ampd-final {
  position: relative;
  background: none;
  overflow: hidden;
}
.ampd-page--v1 .ampd-final::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../img/start-today.webp') center 35% / cover no-repeat;
}
.ampd-page--v1 .ampd-final::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,14,0.3) 0%, rgba(11,11,14,0.5) 60%, rgba(11,11,14,0.7) 100%);
}
.ampd-page--v1 .ampd-final > * { position: relative; z-index: 1; }
.ampd-page--v1 .ampd-final .ampd-eyebrow,
.ampd-page--v1 .ampd-final .ampd-h2,
.ampd-page--v1 .ampd-final__checklist li,
.ampd-page--v1 .ampd-final__note {
  color: var(--ampd-white);
}
.ampd-page--v1 .ampd-final__checklist svg { color: var(--accent-secondary); }
/* Checklist flush-left with the section's content edge (shared styles centre
   it as a 290px block via margin: auto). */
.ampd-page--v1 .ampd-final__checklist {
  margin: 22px 0 0;
  max-width: none;
}

/* ============ FAQ — "FAQs" section header added (2026-07-24); flat founder
   cream instead of the shared tint-20 → footer-grey gradient ============ */
.ampd-page--v1 .ampd-faq { background: var(--bg-founder); }
.ampd-page--v1 .ampd-faq__title { margin: 0 0 12px; }

/* ============================================================
   Why It's Different — finalised 2026-07-24 (was "Option 2" in the layout
   exploration pass; Option 1 (original) and Option 3 have been removed). Card
   proportions below use the more compact "Option 3" sizing per client
   feedback ("use the box size that is utilised on option 3, this looks
   better") — smaller padding/radius/icon/type than Option 2's originals.
   ============================================================ */
/* container-type, not a viewport media query: .ampd-page is capped at
   --content-max (480px) site-wide and centred regardless of the browser/frame
   width, so a `@media (min-width)` breakpoint fires off the OUTER viewport —
   wrong signal when that outer width doesn't match the actual space available
   inside the fixed column (e.g. a "mobile preview" frame whose underlying
   viewport is wider than it visually appears). A container query reacts to
   this section's own rendered width instead, which is what's actually true on
   this fixed-width site regardless of any preview surface's outer viewport. */
.ampd-page--v1 .ampd-different { padding: 64px 24px 56px; background: none; container-type: inline-size; }
.ampd-page--v1 .ampd-different__grid {
  display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px;
}
.ampd-page--v1 .ampd-different__card {
  background: var(--bg-panel); border: 1px solid var(--ampd-line-soft); border-radius: 20px;
  padding: 22px 20px; box-shadow: 0 10px 24px -16px rgba(11, 11, 14, 0.18);
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.ampd-page--v1 .ampd-different__card.is-visible { opacity: 1; transform: translateY(0); }
.ampd-page--v1 .ampd-different__icon { color: var(--accent-primary); }
.ampd-page--v1 .ampd-different__title { margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--ampd-ink); }
.ampd-page--v1 .ampd-different__desc { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--ampd-body); }
@container (min-width: 560px) {
  .ampd-page--v1 .ampd-different__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* -- Photo-background cards, all four benefits. Strength/Routine source photos
   are watermarked "Will Cleal Photo Sample" proofs — added anyway per client
   instruction (2026-07-24: not going live as-is, client aware). Swap
   benefit-strength.jpg / benefit-routine.jpg for clean versions before any
   real build. See QUESTIONS.md #15. Bottom-anchored content over a dark scrim
   keeps text readable regardless of the photo underneath. -- */
.ampd-page--v1 .ampd-different__card--strength,
.ampd-page--v1 .ampd-different__card--focus,
.ampd-page--v1 .ampd-different__card--hydration,
.ampd-page--v1 .ampd-different__card--routine {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center;
}
.ampd-page--v1 .ampd-different__card--strength { background-image: url('../img/benefit-strength.jpg'); }
.ampd-page--v1 .ampd-different__card--focus { background-image: url('../img/benefit-focus.webp'); }
.ampd-page--v1 .ampd-different__card--hydration { background-image: url('../img/benefit-hydration.webp'); }
.ampd-page--v1 .ampd-different__card--routine { background-image: url('../img/benefit-routine.jpg'); }
.ampd-page--v1 .ampd-different__card--strength::before,
.ampd-page--v1 .ampd-different__card--focus::before,
.ampd-page--v1 .ampd-different__card--hydration::before,
.ampd-page--v1 .ampd-different__card--routine::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(11, 11, 14, 0.1) 0%, rgba(11, 11, 14, 0.5) 60%, rgba(11, 11, 14, 0.72) 100%);
}
.ampd-page--v1 .ampd-different__card--strength > *,
.ampd-page--v1 .ampd-different__card--focus > *,
.ampd-page--v1 .ampd-different__card--hydration > *,
.ampd-page--v1 .ampd-different__card--routine > * { position: relative; z-index: 1; }
.ampd-page--v1 .ampd-different__card--strength .ampd-different__icon,
.ampd-page--v1 .ampd-different__card--strength .ampd-different__title,
.ampd-page--v1 .ampd-different__card--strength .ampd-different__desc,
.ampd-page--v1 .ampd-different__card--focus .ampd-different__icon,
.ampd-page--v1 .ampd-different__card--focus .ampd-different__title,
.ampd-page--v1 .ampd-different__card--focus .ampd-different__desc,
.ampd-page--v1 .ampd-different__card--hydration .ampd-different__icon,
.ampd-page--v1 .ampd-different__card--hydration .ampd-different__title,
.ampd-page--v1 .ampd-different__card--hydration .ampd-different__desc,
.ampd-page--v1 .ampd-different__card--routine .ampd-different__icon,
.ampd-page--v1 .ampd-different__card--routine .ampd-different__title,
.ampd-page--v1 .ampd-different__card--routine .ampd-different__desc {
  color: var(--ampd-white);
}
@media (prefers-reduced-motion: reduce) {
  .ampd-page--v1 .ampd-different__card { transition: none; }
}