/* ============================================================
   AMPD Lifestyle — audit-refinement layer (2026-07-24)
   PROMOTED: originally built as the side-by-side "V9" comparison
   (index-v9.html); approved on review and promoted into the main build —
   index.html now carries .ampd-page--v9 alongside --v1 and this file is a
   permanent layer of the homepage (approved audit fixes C1–C5 + H1–H6;
   the dark-Choose exploration was built, reviewed and rejected). H7 copy
   items are logged in QUESTIONS.md only — no copy changed here.
   ============================================================ */

/* ---- C4: CTA contrast — gradient re-biased so the label zone sits on a
   deepened primary (white text reaches AA) instead of the yellow end.
   Ends remain brand colours; --accent-hover is tokens.css's existing
   darkened step (85% primary + black). Re-resolves per colour scheme. ---- */
.ampd-page--v9 {
  --accent-gradient: linear-gradient(90deg, var(--accent-secondary) 0%, var(--accent-primary) 30%, var(--accent-hover) 85%);
}
.ampd-page--v9 .ampd-choose [data-plan="one"] .ampd-btn-block--dark {
  background: var(--accent-hover);
  color: var(--ampd-white);
}

/* ---- H3: hero headline — natural wrap at narrow widths (the forced <br>
   produced a 4-line wrap with an orphan at 390px; copy untouched) ---- */
.ampd-page--v9 .ampd-hero__title br { display: none; }
.ampd-page--v9 .ampd-hero__title { text-wrap: balance; }

/* ---- H2: seams & rhythm ---- */
/* Curve fills follow tokens (V1 markup hardcoded #F8F9FC / #FAF9F7, which
   drift from the computed section tints and never re-theme). */
.ampd-page--v9 .ampd-hero__curve { color: var(--bg-hero-curve); }
.ampd-page--v9 .ampd-curve-wrap svg { color: var(--bg-founder); }
/* Founder → Different seam: bleed the founder cream into the section top
   instead of a hard cream-to-white edge. */
.ampd-page--v9 .ampd-different {
  background: linear-gradient(180deg, var(--bg-founder) 0%, var(--bg-white) 140px);
}
/* Final → FAQ seam: the FAQ rises over the dark photo as a rounded sheet —
   same 32px sheet device as Why Powder, so the page's transition vocabulary
   carries into its last chapter. */
.ampd-page--v9 .ampd-faq {
  position: relative; z-index: 1;
  margin-top: -32px;
  border-radius: 32px 32px 0 0;
}

/* ---- H6: gradient scope tightened back to primary CTAs ---- */
/* Scroll cue: was gradient-clipped text (detector hit, non-CTA gradient). */
.ampd-page--v9 .ampd-scrolldown {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--accent-primary);
}
/* The hidden "one-time" flag inherited the Most Popular gradient. */
.ampd-page--v9 .ampd-purchase-card__flag[data-flag="one"] {
  background: var(--bg-panel);
  color: var(--ampd-body-strong);
}
/* Newsletter join is not a purchase CTA — ink, not gradient. */
.ampd-page--v9 .ampd-newsletter .ampd-btn-block--gradient {
  background: var(--ampd-ink);
  color: var(--ampd-white);
}

/* ---- H1: touch-target expansion (no visual change — invisible hit areas) ---- */
.ampd-page--v9 .ampd-dots { gap: 16px; }
.ampd-page--v9 .ampd-dot { position: relative; }
.ampd-page--v9 .ampd-dot::after { content: ''; position: absolute; inset: -14px -8px; }
.ampd-page--v9 .ampd-nav__icon-btn,
.ampd-page--v9 .ampd-hero__video-btn,
.ampd-page--v9 .ampd-social-row a,
.ampd-page--v9 .ampd-link-accent,
.ampd-page--v9 .ampd-plain-link a { position: relative; }
.ampd-page--v9 .ampd-nav__icon-btn::after,
.ampd-page--v9 .ampd-hero__video-btn::after,
.ampd-page--v9 .ampd-social-row a::after { content: ''; position: absolute; inset: -10px; }
.ampd-page--v9 .ampd-link-accent::after,
.ampd-page--v9 .ampd-plain-link a::after { content: ''; position: absolute; inset: -12px 0; }
.ampd-page--v9 .ampd-toggle__opt { height: 44px; }

/* ---- C5: honest, accessible card selection ---- */
/* Only the selected card carries a fully-live CTA; the other card's CTA
   recedes (still clickable — selecting happens on first tap of the card). */
.ampd-page--v9 .ampd-purchase-card:not(.is-selected) .ampd-btn-block--cta,
.ampd-page--v9 .ampd-bundle-card:not(.is-selected) .ampd-btn-block--cta {
  opacity: 0.45;
}
.ampd-page--v9 .ampd-bundle-card .ampd-btn-block--cta { transition: opacity 200ms var(--ease-out); }
/* Bundle contains BOTH flavours — a flavour-coloured active border was
   semantically wrong there; neutral ink instead. */
.ampd-page--v9 .ampd-bundle-card.is-selected { border-color: var(--ampd-ink); }

/* (Dark Choose exploration removed 2026-07-24 after side-by-side review — the
   buy section keeps V1's founder-cream treatment.) */

/* ---- H5: reviews proof depth ---- */
.ampd-page--v9 .v9-rating-bar { margin: 24px auto 0; max-width: 320px; }
.ampd-page--v9 .v9-rating-bar__row {
  height: 10px; border-radius: 6px; background: var(--ampd-line-soft); overflow: hidden;
}
.ampd-page--v9 .v9-rating-bar__fill {
  display: block; height: 100%; border-radius: 6px;
  width: 96%; /* 4.8 / 5 — the aggregate already stated in the locked copy */
  background: var(--accent-primary);
}
.ampd-page--v9 .v9-rating-bar__label {
  margin-top: 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ampd-label);
}
.ampd-page--v9 .ampd-review-card__name-row { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.ampd-page--v9 .ampd-review-card__name-row .ampd-review-card__name { margin-top: 0; }
.ampd-page--v9 .ampd-review-card__verified {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--success); background: color-mix(in srgb, var(--success) 12%, white);
  padding: 3px 8px; border-radius: 999px;
}

/* ---- H4: powder rail — harder peek so the next argument is visible ---- */
.ampd-page--v9 .ampd-vs-card { flex: 0 0 88%; scroll-snap-align: start; }
.ampd-page--v9 .ampd-powder__compare { scroll-padding-left: 20px; }

/* ---- Reviews rail: mouse drag-to-swipe, same mechanic as the VS rail
   (snap released while dragging, re-snapped on release — variant-v9.js) ---- */
.ampd-page--v9 .ampd-review-rail { cursor: grab; }
.ampd-page--v9 .ampd-review-rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* ---- Design Review: hero layout options ----
   Driven by [data-hero] on the page wrapper (set by variant-v9.js from the
   review-panel markers). "current" = the V1/V9 hero untouched. Card styling
   mirrors hero-v4.css; the divider-free treatment mirrors variant-v5.css. */
.hero-review-marker { display: none !important; }
.ampd-page--v9[data-hero] .ampd-hero { display: flex; flex-direction: column; }

/* V5 — full-width video at the top, straight edge, no curve divider */
.ampd-page--v9[data-hero="v5-full"] .ampd-hero__curve { display: none; }
.ampd-page--v9[data-hero="v5-full"] .ampd-hero__rating { padding-top: 8px; }

/* V4 — text first, video as an inset rounded card below (hero-v4.css), the
   "Why We Made AMPD" indicator under the video. Spacing tightened (indicator
   padding, media margins) so the whole sequence — content, video, indicator —
   fits above the fold on a 390×844 viewport. */
.ampd-page--v9[data-hero="v4-card-bottom"] .ampd-hero__body { order: 1; padding-top: 16px; }
.ampd-page--v9[data-hero="v4-card-bottom"] .ampd-hero__media {
  order: 2;
  width: auto;
  margin: 16px 20px 0;
  border-radius: 28px;
  box-shadow: 0 16px 32px -14px rgba(11, 11, 14, 0.22);
  /* 2:1 cinematic crop (default is 375:232): buys back the height that lets
     the content above breathe while the full sequence still clears the fold
     at 390×844. object-fit: cover just crops the frame tighter. */
  aspect-ratio: 2 / 1;
}
.ampd-page--v9[data-hero="v4-card-bottom"] .ampd-hero__curve { display: none; }
.ampd-page--v9[data-hero="v4-card-bottom"] .ampd-scrolldown {
  order: 3;
  padding: 14px 0 16px;
}

/* V4 inverted — the same rounded card, above the text, with a touch more
   air below the card so video and hero content read as separate moments */
.ampd-page--v9[data-hero="v4-card-top"] .ampd-hero__media {
  width: auto;
  margin: 8px 20px 24px;
  border-radius: 28px;
  box-shadow: 0 16px 32px -14px rgba(11, 11, 14, 0.22);
}
.ampd-page--v9[data-hero="v4-card-top"] .ampd-hero__curve { display: none; }

/* ---- C3: sticky purchase bar (synthesis §5G) ---- */
.ampd-page--v9 .v9-sticky,
.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__price { display: flex; align-items: baseline; gap: 7px; }
.v9-sticky__now { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ampd-ink); }
.v9-sticky__was { font-size: 12.5px; font-weight: 500; color: var(--ampd-strike); text-decoration: line-through; }
.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; }
}