/* ============ V9 — post-audit refinement layer ============
   Loaded ONLY by index-v9.html, after every other stylesheet, so all of
   the audit fixes live here as overrides and index-v3 stays untouched
   for side-by-side review. Sources: 2026-07-24 UX/CRO audit (QUESTIONS.md
   #20 carries the copy/structure flags). */

/* ---- H6: elevation + radius tokens ---- */
:root {
  --radius-sm: 12px;   /* nested controls: toggles, chips, promo strips */
  --radius-md: 16px;   /* inner panels: gift, FAQ items, pills */
  --radius-lg: 22px;   /* cards + media */
  --radius-xl: 28px;   /* hero-level containers */
  --shadow-rest: 0 2px 6px rgba(11, 11, 14, 0.04), 0 10px 26px rgba(11, 11, 14, 0.06);
  --shadow-raised: 0 4px 10px rgba(11, 11, 14, 0.05), 0 18px 40px rgba(11, 11, 14, 0.10);
}

/* Normalise the drifted values onto the scale. */
.ampd-feature-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); }
.ampd-review-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); }
.ampd-plan2 { border-radius: var(--radius-lg); }
.ampd-choose2__img { border-radius: var(--radius-lg); }
.ampd-faq2__item { border-radius: var(--radius-md); }
.ampd-gift2 { border-radius: var(--radius-md); }
.ampd-ing-pill { border-radius: var(--radius-md); }
.ampd-flav__opt { border-radius: var(--radius-sm); }
.ampd-newsletter { border-radius: var(--radius-lg); }
.ampd-final__card { border-radius: var(--radius-xl); box-shadow: var(--shadow-raised); }

/* ---- H8 correction: the logos carry width/height ATTRIBUTES for CLS,
   but their CSS sizes them by height only — without this, the width
   attribute (1200px, clamped by max-width:100%) stretches the logo to
   a full-width squashed strip. width:auto restores the aspect ratio
   while keeping the attributes' layout reservation. ---- */
.ampd-nav__logo, .ampd-footer__logo { width: auto; }

/* ---- H2: founder section gets its cream tone back. The white override
   in hero-v3.css predates the reversed hero gradient; with the hero now
   ending white, the cream restores the deliberate seam. ---- */
.ampd-herov3 + #founder { background: var(--bg-founder); padding-top: 48px; }

/* ---- C2/H1: tonal chain for the reordered page —
   Powder(ends tint-20) → Results(tint-20→6%) → Purchase(6%→tint-20)
   → FAQ(tint-20→6%) → Final(starts 6%). Every seam continuous. ---- */
.ampd-results { background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-results) 100%); }
.ampd-choose2 { background: linear-gradient(180deg, var(--bg-results) 0%, var(--bg-panel) 40%, var(--bg-panel) 100%); }
.ampd-faq2 { background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-results) 100%); }

/* ---- H3: purchase-head compression — first plan card arrives sooner. ---- */
.ampd-choose2 { padding-top: 48px; }
.ampd-choose2 .ampd-choose__head .ampd-h2 { margin-top: 0; }
.ampd-choose2 .ampd-choose__head p { margin-top: 8px; }
/* Product gallery — replaces the old single flavour image. Sized like the
   original media block; slides crop to a consistent frame. */
.ampd-choose2 .ampd-gallery {
  margin-top: 16px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
}
.ampd-choose2 .ampd-gallery__slide { height: 280px; }
.ampd-choose2 .ampd-gallery__slide img { object-position: center 30%; }
.ampd-flav { margin-top: 14px; }
.ampd-plans { margin-top: 18px; }

/* ---- C1: first-delivery promo strip (flavour-accented, re-colours with
   the flavour system like every other accent in the card). ---- */
.ampd-plan2__promo {
  display: flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--flav-tint-bg);
  font-size: 12px; font-weight: 600; color: var(--ampd-ink);
  transition: background-color 200ms var(--ease-out);
}
.ampd-plan2__promo svg { flex-shrink: 0; color: var(--flav-accent); transition: color 200ms var(--ease-out); }

/* ---- C3: gift states ---- */
.ampd-gift2__badge {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
  background: color-mix(in srgb, var(--success) 14%, white); color: var(--success);
  font-size: 10.5px; font-weight: 700;
}
.ampd-gift2--locked .ampd-gift2__img {
  background: var(--line-softest); border-color: var(--dot-off); color: var(--ampd-muted);
}
.ampd-gift2--locked .ampd-gift2__title { color: var(--ampd-body-strong); }

/* ---- H4: consolidated trust line ---- */
.ampd-guarantee-line { flex-wrap: wrap; row-gap: 4px; }
.ampd-guarantee-line__sep { color: var(--dot-off); }
.ampd-guarantee-line__soft { font-weight: 500; color: var(--text-body-strong); }

/* ---- N1: plan-card type scale consolidation (10.5–15px sprawl → 3 steps) ---- */
.ampd-plan2__now { font-size: 19px; }
.ampd-plan2__freq, .ampd-plan2__was, .ampd-plan2__perday { font-size: 12px; }
.ampd-plan2__perday { margin-top: 2px; }

/* ---- N3: body-copy contrast on tinted backgrounds (AA) ---- */
.ampd-powder .ampd-different__intro { color: var(--text-body-strong); }
.ampd-choose2 .ampd-choose__head p { color: var(--text-body-strong); }
.ampd-newsletter__input::placeholder { color: var(--text-label); }

/* ---- N4: flavour selector quietens while the Bundle is selected ---- */
.ampd-choose2.is-bundle .ampd-flav__opt { opacity: 0.5; }
.ampd-choose2.is-bundle .ampd-flav__opt[aria-checked="true"] {
  border-color: var(--line); background: var(--bg-white); box-shadow: none;
}

/* ---- H5: touch targets (invisible expansion, no visual change) ---- */
.ampd-nav__icon-btn { padding: 12px; margin: -8px; }
.ampd-dot { position: relative; }
.ampd-dot::after { content: ""; position: absolute; inset: -14px -5px; }

/* N6: explicit transition properties (was `all`) */
.ampd-dot {
  transition: width var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}

/* ---- H7: scroll reveals. Gated on the .v9-motion class, which v9.js adds
   only when IntersectionObserver exists AND reduced-motion is off — no JS,
   no observer, or reduced motion ⇒ everything stays fully visible.
   Animations (not transitions) so component transition lists — e.g. the
   plan cards' selection states — are never clobbered. ---- */
.v9-motion [data-v9-reveal] { opacity: 0; }
.v9-motion [data-v9-reveal].is-inview { animation: v9-rise 300ms var(--ease-out) both; }

.v9-motion [data-v9-stagger] > * { opacity: 0; }
.v9-motion [data-v9-stagger].is-inview > * { animation: v9-rise 280ms var(--ease-out) both; }
.v9-motion [data-v9-stagger].is-inview > *:nth-child(2) { animation-delay: 70ms; }
.v9-motion [data-v9-stagger].is-inview > *:nth-child(3) { animation-delay: 140ms; }
.v9-motion [data-v9-stagger].is-inview > *:nth-child(4) { animation-delay: 210ms; }
.v9-motion [data-v9-stagger].is-inview > *:nth-child(n+5) { animation-delay: 280ms; }

@keyframes v9-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v9-motion [data-v9-reveal],
  .v9-motion [data-v9-stagger] > * { opacity: 1; animation: none; }
}

/* ============ Round 2 — final-review audit implementation ============ */

/* ---- D1: control-height token ---- */
:root { --control-h: 54px; }
.ampd-btn-primary { height: var(--control-h); }
.ampd-btn-block--cta { height: var(--control-h); }

/* ---- C1/D4: green trust role. Trust/verification marks read green
   (client direction: white · green · flavour); flavour colour stays on
   flavour and offer contexts (CTA gradient, savings, FREE highlights). ---- */
:root { --trust: var(--brand-watermelon-green); }
.ampd-checklist svg { color: var(--trust); }
.ampd-final__checklist svg { color: var(--trust); }
.ampd-plan2__benefits svg { color: var(--trust); }
.ampd-trust-grid svg { color: var(--trust); }
/* Hero USP icons follow the active colour scheme's accent. */
.ampd-perk__icon { color: var(--accent-primary); stroke-width: 1.7; }
/* These two carry a hardcoded stroke="#f16522" in markup — CSS wins. */
.ampd-hero__rating-tested svg,
.ampd-tested-badge svg { stroke: var(--trust); }

/* (Fresh-scheme gradient overrides for Different/Powder removed in Round 3 —
   sections are flat now and resolve through remapped tokens directly.) */

/* ---- C2: 16px inputs — anything smaller triggers iOS focus zoom ---- */
.ampd-newsletter__input { font-size: 16px; }

/* ---- P1: SVG stars — kill the video-hero-era text-shadow and the
   letter-spacing compensation, both meaningless on vector stars ---- */
.ampd-hero__stars { text-shadow: none; letter-spacing: 0; margin-right: 0; transform: none; }
.ampd-hero__stars svg, .ampd-results__stars svg, .ampd-review-card__stars svg { display: block; }

/* ---- P2: consistent depth — every card/media surface sits on the
   elevation scale; plan selection is a rest→raised change ---- */
.ampd-plan2 { box-shadow: var(--shadow-rest); }
.ampd-plan2[aria-checked="true"] { box-shadow: 0 8px 26px var(--flav-shadow); }
.ampd-faq2__item { box-shadow: var(--shadow-rest); }
.ampd-founder__media, .ampd-powder__media, .ampd-choose2__img { box-shadow: var(--shadow-rest); }

/* ---- H3: Why Powder compressed — tighter beat between benefits and proof ---- */
.ampd-powder { padding: 40px 24px 48px; }
.ampd-powder__tested { margin-top: 20px; }

/* ---- P3: section rhythm on 48/64 tiers ---- */
.ampd-results { padding-top: 48px; padding-bottom: 64px; }
.ampd-faq2 { padding-top: 48px; padding-bottom: 64px; }
.ampd-final--card { padding-top: 64px; }

/* ---- H4: in-card CTA ---- */
.ampd-plan2__cta { margin-top: 14px; }

/* ---- C3: selected-plan echo under the final CTA ---- */
.ampd-final__plan-echo {
  margin-top: 12px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--ampd-body-strong);
}
.ampd-final__plan-echo:empty { display: none; }

/* ---- H1: short-viewport hero — primary CTA crests the fold ---- */
@media (max-height: 700px) {
  .ampd-herov3__stage { min-height: 372px; }
}

/* ---- M2: primary CTA hover depth (hover-capable devices only) ---- */
.ampd-btn-primary, .ampd-btn-block--gradient {
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) {
  .ampd-btn-primary:hover, .ampd-btn-block--gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -10px var(--accent-shadow), 0 3px 7px rgba(11, 11, 14, 0.08);
  }
}

/* ---- M4: radio selection pop — small overshoot makes it physical ---- */
@keyframes v9-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.ampd-plan2[aria-checked="true"] .ampd-plan2__radio::after {
  animation: v9-pop 240ms var(--ease-out);
}

/* ---- P4: flavour/product image crossfade — v9.js overlays a ghost of
   the outgoing frame and fades it, so the swap never hard-cuts ---- */
.ampd-choose2__img { position: relative; }
.v9-img-ghost {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 220ms var(--ease-out);
  pointer-events: none;
}

/* ---- "Why It's Different" cards — restyled to the V1 base build's
   editorial treatment (client-preferred): the photo fills the whole card,
   a dark bottom-anchored scrim keeps text readable, and the monoline
   icon + title + description sit in white at the base. Overrides the
   photo-on-top / white-panel layout from different-cards.css; the swipe
   rail, dots, drag and reveals all carry over unchanged. ---- */
.ampd-feature-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 340px;
  justify-content: flex-end;
}
.ampd-feature-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
}
.ampd-feature-card__img img { object-position: center 30%; }
/* V1's exact scrim ramp */
.ampd-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  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-feature-card__body {
  position: relative;
  z-index: 2;
  flex: none;
  min-height: 0;
  padding: 20px;
}
.ampd-feature-card__icon { color: var(--ampd-white); display: block; }
.ampd-feature-card__title { color: var(--ampd-white); margin-top: 12px; font-size: 16px; }
.ampd-feature-card__desc { color: var(--ampd-white); }

/* ---- V2 hero ingredient grid — refined from pills to a lightweight
   2×2 icon + label grid. No backgrounds, borders, shadows or hover
   states: these are informational marks, not buttons. Auto-sized
   columns keep every label on one line ("Functional Mushrooms" lands
   bottom-left, "Vitamin B5" bottom-right, per the layout spec). ---- */
.ampd-ing-pills {
  grid-template-columns: auto;
  justify-content: start;
  gap: 16px;
  max-width: none;
  margin-top: 22px; /* below the supporting line */
}
.ampd-ing-pill {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  gap: 10px;
  transition: none;
}
@media (hover: hover) {
  .ampd-ing-pill:hover { transform: none; box-shadow: none; }
}
.ampd-ing-pill__icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}
.ampd-ing-pill__icon svg { width: 22px; height: 22px; }
.ampd-ing-pill__title { font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* Supporting statement — under the headline, above the ingredient list. */
.ampd-ing-support {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ampd-body-strong);
  width: 80%;
}
.ampd-ing-support strong { font-weight: 600; color: var(--ampd-ink); }

/* ---- FAQ head (injected by v9.js above the accordion) ---- */
.ampd-faq2__head { text-align: center; margin-bottom: 10px; }
.ampd-faq2__head .ampd-h2 { margin-top: 0; }

/* ---- Drag-to-swipe rails (parity with the V1 base build) ---- */
.v9-draggable { cursor: grab; }
.v9-draggable.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none; /* mandatory snap fights per-frame scrollLeft writes */
  user-select: none;
}
.v9-draggable img { -webkit-user-drag: none; }

/* ---- M1: differentiated reveals — rails slide in from the right
   (hinting their horizontal affordance), media fades, heads keep the
   rise. All under the same .v9-motion / reduced-motion gates. ---- */
@keyframes v9-slide {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes v9-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.v9-motion .ampd-feature-rail.is-inview > *,
.v9-motion .ampd-review-rail.is-inview > * { animation-name: v9-slide; }
.v9-motion .ampd-powder__media.is-inview,
.v9-motion .ampd-founder__media--video.is-inview { animation-name: v9-fade; }

@media (prefers-reduced-motion: reduce) {
  .ampd-btn-primary, .ampd-btn-block--gradient { transition: none; }
  .ampd-btn-primary:hover, .ampd-btn-block--gradient:hover { transform: none; }
  .ampd-plan2[aria-checked="true"] .ampd-plan2__radio::after { animation: none; }
  .v9-img-ghost { transition: none; }
}

/* ============ Round 3 — flat white/cream section rhythm ============
   Client feedback: the continuous tint gradients read as one long wash;
   the page needs white/cream blocks to break the flow. Replaces every
   section gradient (including this file's earlier seam-bridging ones)
   with FLAT tones in a deliberate alternation — each section reads as
   its own chapter, and the deliberate tonal contrast at each boundary
   does the separating that the gradients used to blur away:

     Hero          warm ramp → white   (kept — the one signature gradient)
     Founder       cream  (3% — --bg-founder, unchanged)
     Different     WHITE  (the dark photo cards carry the colour)
     Why Powder    cream  (6%)
     Results       WHITE  (review cards float on white)
     Purchase      cream  (6% — white plan cards + flavour accents pop)
     FAQ           WHITE
     Final CTA     WHITE  (its cream card becomes the closing block)
     Footer        grey   (unchanged)

   All flats resolve through tokens, so the White & Green scheme remaps
   the cream bands to its green-tinted equivalents automatically. */
.ampd-different { background: var(--bg-white); }
.ampd-powder { background: var(--bg-results); }
.ampd-results { background: var(--bg-white); }
/* Buy section: the footer's fixed neutral grey (--bg-footer, #F8F8F8) in
   every scheme — deliberately NOT accent-derived, per client note. */
.ampd-choose2 { background: var(--bg-footer); }
.ampd-faq2 { background: var(--bg-white); }
.ampd-final--card { background: var(--bg-white); }

/* The purchase sheet reads as a rounded card, echoing the final CTA card —
   white sections above and below show through at the corners. */
.ampd-choose2 {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-rest);
}

/* ---- Floating purchase bar — ported from the V1 base build. Frosted,
   safe-area aware, fixed to the viewport bottom; v9.js shows it once the
   visitor is past the hero while the buy section is off-screen, and
   mirrors the selected plan's pricing into it. ---- */
.v9-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-width: var(--content-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(11, 11, 14, 0.08);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.v9-sticky.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.v9-sticky__save {
  font-family: var(--font-display); font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em; color: var(--ampd-ink);
}
.v9-sticky .ampd-btn-primary { height: 46px; font-size: 14.5px; padding: 0 22px; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .v9-sticky { transition: opacity var(--duration-base) linear; transform: none; }
}

/* ============ Round 4 — scheme-true buy section + readability pass ============
   ui-ux-pro-max colour rules applied: 4.5:1 for normal text, ≥3:1 for UI
   accents, darker-on-light for anything small. */

/* ---- Buy section follows the active colour scheme. The flavour accent
   stays flavour-true in the citrus-family schemes (where both flavour
   colours are at home) and harmonises to the scheme's own accent pair in
   the purple-led schemes, where orange/red card accents clashed. All the
   card borders/tints/radios/promos resolve through --flav-accent, so
   these four lines re-skin the whole section. ---- */
:root[data-theme="ampd"] .ampd-choose2,
:root[data-theme="ampd"] .ampd-choose2[data-flavour="watermelon"] {
  --flav-accent: var(--accent-primary);
}
:root[data-theme="grape"] .ampd-choose2 { --flav-accent: var(--accent-primary); }
:root[data-theme="grape"] .ampd-choose2[data-flavour="watermelon"] { --flav-accent: var(--brand-watermelon-red); }

/* Resting card/selector borders pick up a hint of the scheme accent
   instead of staying flat neutral grey — "borders match the scheme". */
.ampd-plan2 { border-color: color-mix(in srgb, var(--flav-accent) 16%, var(--line)); }
.ampd-flav__opt { border-color: color-mix(in srgb, var(--flav-accent) 16%, var(--line)); }

/* ---- Small accent-coloured text needs more depth than the raw accents
   provide (Citrus Orange is 3.17:1 on white — fails 4.5:1 at small sizes).
   A consistent 72/28 mix toward black lifts every scheme's accent above
   4.5:1 while keeping its hue identity. ---- */
.ampd-eyebrow { color: color-mix(in srgb, var(--accent-primary) 72%, black); }
.ampd-plan2__flag { background: color-mix(in srgb, var(--flav-accent) 76%, black); }
.ampd-gift2__badge { color: color-mix(in srgb, var(--success) 55%, black); }

/* ---- Muted grey text sat at ~3.4–3.6:1 in several small-print spots;
   step those up to the label grey (≈5:1 on white). ---- */
.ampd-final__note,
.ampd-review-card__purchased,
.ampd-perk__sub,
.ampd-legal__copyright,
.ampd-legal__links a { color: var(--text-label); }
.ampd-herov3__rating { opacity: 0.95; }

/* Accent-coloured text links and the footer strap get the same 72/28
   depth lift; the plain-creatine link steps up from body grey on cream. */
.ampd-link-accent { color: color-mix(in srgb, var(--accent-primary) 72%, black); }
.ampd-legal__strap { color: color-mix(in srgb, var(--accent-primary) 72%, black); }
.ampd-plain-link a { color: var(--text-body-strong); }