/**
 * Authoring vs. Platforms explainer: page-scoped styles
 *
 * Brand-aligned restyle: Integral Ed tokens (plum / magenta / yellow / teal,
 * Helvetica) from vendor/integralthemes/theme/tokens.css, with layout and
 * interaction patterns borrowed from the main site's 15th-anniversary page
 * (sticky scroll-spy left rail, dark plum hero with glow blobs, kickers,
 * reveal-on-scroll).
 *
 * Everything is scoped under `.avp`; element resets use `:where()` so they
 * stay at class-level specificity and never outrank component styles.
 */

.avp {
  /* Derived brand shades (match anniversary page treatment) */
  --avp-plum-950: #1c0420;
  --avp-plum-900: #2a0730;
  --avp-plum-800: #3a0a42;
  --avp-ink-dark: #f4eef6;    /* light ink on dark plum */
  --avp-ink-dark-2: #c9b6d2;

  /* Brand tints for the analogy system + chips */
  --avp-home-tint: #e9f4f5;   /* teal tint  → 🏠 home */
  --avp-music-tint: #fdf3dd;  /* yellow tint → 🎵 music */
  --avp-warn-tint: #f7e6f0;   /* magenta tint → platform warnings */

  --avp-rail-w: 248px;
  --avp-nav-offset: 64px;     /* clears the fixed site navbar */

  font-family: var(--font-primary);
  color: var(--text-primary);
  background: var(--bg-primary);
  line-height: 1.6;
}

/* Element resets at :where() specificity: component classes always win */
.avp :where(p, li) {
  color: var(--text-secondary);
  font-size: inherit;
  max-width: none;
  margin: 0;
}
.avp :where(h1, h2) {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin: 0;
  text-wrap: pretty;
}
.avp :where(button) { font-family: inherit; }
.avp strong { color: inherit; }
.avp abbr[title] { text-decoration: none; }

.avp [role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Screen-reader-only live announcements */
.avp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Kickers (anniversary pattern): the only place the letterspaced-mono
   treatment is used; everything else gets regular type. */
.avp-kicker {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-magenta);
}
.avp-kicker--onDark { color: var(--accent-yellow); }

.avp-section-head { max-width: 900px; margin: 0 auto var(--spacing-xl); }
.avp-section-head--center { text-align: center; }
.avp-section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin: 0.6rem 0 0.8rem;
  line-height: 1.1;
}

/* Reveal-on-scroll (anniversary pattern) */
.avp .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.avp .reveal.is-visible { opacity: 1; transform: none; }

/* ── Layout: sticky left rail + main column ─────────────── */
.avp-layout {
  display: grid;
  grid-template-columns: var(--avp-rail-w) minmax(0, 1fr);
  align-items: start;
}
.avp-main { min-width: 0; }

/* ── Sticky left rail ───────────────────────────────────── */
.avp-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  background: linear-gradient(180deg, var(--avp-plum-950), var(--avp-plum-900));
  color: var(--avp-ink-dark);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.avp-rail-inner {
  position: sticky;
  top: var(--avp-nav-offset);
  padding: var(--spacing-lg) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-height: calc(100vh - var(--avp-nav-offset));
  overflow-y: auto;
  /* no persistent second scrollbar next to the page's */
  scrollbar-width: none;
}
.avp-rail-inner::-webkit-scrollbar { display: none; }
.avp-rail-top { display: contents; }
.avp-rail-toggle { display: none; }
.avp-rail-panel { display: flex; flex-direction: column; gap: var(--spacing-lg); }

.avp-rail-brand { display: block; text-decoration: none; color: inherit; }
.avp-rail-big {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 0.9;
  /* lighter pink start for contrast on the dark plum rail */
  background: linear-gradient(120deg, #e06aad, var(--accent-yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.avp-rail-sub {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--avp-ink-dark-2);
  margin-top: 0.35rem;
}

.avp-rail-nav { list-style: none; margin: 0; padding: 0; }
.avp-rail-nav li { margin: 0; }
.avp-rail-nav a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--avp-ink-dark-2);
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.avp-rail-nav a:hover { color: var(--avp-ink-dark); background: rgba(255, 255, 255, 0.05); }
.avp-rail-nav .num {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  opacity: 0.7;
}
.avp-rail-nav .lbl { font-size: 0.92rem; font-weight: 600; }
.avp-rail-nav li.active a {
  color: #fff;
  border-left-color: var(--accent-yellow);
  background: rgba(255, 255, 255, 0.06);
}
.avp-rail-nav li.active .num { opacity: 1; color: var(--accent-yellow); }

.avp-rail-cta a {
  color: var(--accent-yellow);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
}
.avp-rail-cta a:hover { color: #fff; }

/* ── Hero (dark brand band, staged title reveal) ────────── */
.avp-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 62vh;
  padding: calc(var(--avp-nav-offset) + var(--spacing-2xl)) clamp(1.5rem, 5vw, 5rem) var(--spacing-2xl);
  background: radial-gradient(130% 120% at 50% -10%, var(--avp-plum-800), var(--avp-plum-950) 70%);
  color: var(--avp-ink-dark);
  overflow: hidden;
}
.avp-hero-content { position: relative; z-index: 2; width: 100%; max-width: 980px; }
.avp-eyebrow {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--accent-yellow);
  margin: 0 0 1.2rem;
}
.avp-h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.6rem);
  line-height: 1.08;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.2rem;
  overflow-wrap: break-word;
}
.avp-h1 span { display: block; }
.avp-h1-l2 {
  /* lighter pink start: --accent-magenta on dark plum is only ~3.3:1 */
  background: linear-gradient(120deg, #e06aad 0%, var(--accent-yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 0.25em;
}
.avp-h1-l3 { color: #e3d4ef; }

/* Staged reveal, compressed to ~1.5s total: line 1 immediately,
   "Maybe one day," at 0.45s, "but…" at 0.8s, lede + CTA at 1.05s */
.avp-h1-l1 { animation: avp-fadeup 0.45s ease both; }
.avp-h1-l2 { opacity: 0; animation: avp-fadeup 0.45s ease 0.45s forwards; }
.avp-h1-l3 { opacity: 0; animation: avp-fadeup 0.45s ease 0.8s forwards; }
.avp-lede {
  font-size: 1.15rem;
  color: var(--avp-ink-dark-2);
  max-width: 640px;
  margin: 0 auto;
  opacity: 0;
  animation: avp-fadeup 0.45s ease 1.05s forwards;
}
.avp-hero-cta {
  margin-top: 1.6rem;
  opacity: 0;
  animation: avp-fadeup 0.45s ease 1.05s forwards;
}
.avp-hero-btn {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--accent-yellow);
  color: var(--avp-plum-950);
  border-radius: 999px;
  padding: 0.85rem 1.9rem;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), filter var(--transition-base);
}
.avp-hero-btn:hover { color: var(--avp-plum-950); transform: translateY(-1px); filter: brightness(1.05); }
@keyframes avp-fadeup {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Glow blobs (anniversary pattern) */
.avp-hero-bgfx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.avp-hero-bgfx--soft { opacity: 0.4; }
.avp-blob {
  position: absolute;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: avp-float 14s ease-in-out infinite;
}
.avp-blob--plum    { background: var(--color-plum);     top: -8%;   left: 8%; }
.avp-blob--magenta { background: var(--accent-magenta); bottom: -12%; right: 6%; animation-delay: -4s; }
.avp-blob--teal    { background: var(--accent-teal);    top: 30%;   right: 22%; animation-delay: -8s; }
@keyframes avp-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(2%, -4%) scale(1.08); }
}

.avp-scroll-cue {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  z-index: 2; color: var(--avp-ink-dark-2); font-size: 1.4rem; text-decoration: none;
  animation: avp-bounce 2s infinite;
}
.avp-scroll-cue:hover { color: #fff; }
@keyframes avp-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ── Intro section (context + myths + pickers) ──────────── */
.avp-intro {
  padding: var(--spacing-2xl) clamp(1.5rem, 5vw, 5rem);
  scroll-margin-top: calc(var(--avp-nav-offset) + 8px);
}
.avp-intro-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.avp-intro-inner > .avp-kicker { margin-bottom: 1rem; }
.avp-context {
  text-align: left;
  max-width: 65ch;
  margin: 0 auto var(--spacing-lg);
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.avp-context p { margin: 0 0 14px; }
.avp-context p:last-child { margin-bottom: 0; }
.avp-context ul {
  margin: 0 0 14px;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.avp-context li { list-style: disc; }
.avp-context a { font-weight: 500; }

/* ── Myth carousel ──────────────────────────────────────── */
.avp-myths {
  text-align: left;
  margin: 0 auto var(--spacing-lg);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--avp-nav-offset) + 64px);
}
.avp-myths-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-magenta);
  margin-bottom: 12px;
}
.avp-myths-hint {
  font-size: 13.5px;
  color: var(--text-tertiary);
  margin-bottom: 14px;
  text-align: center;
}
/* Featured card + all-ten list (list drops below the card on mobile) */
.avp-myth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
.avp-myth-stage {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: calc(var(--avp-nav-offset) + 64px);
}
.avp-myth-navrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.avp-myth-next {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base);
}
.avp-myth-next:hover { background: var(--primary-dark); }
.avp-myth-next svg { display: block; }

.avp-myth-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: myth;
}
.avp-myth-list li { margin: 0; }
.avp-myth-item {
  counter-increment: myth;
  display: flex;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--bg-tertiary);
  border: 1.5px solid var(--border-light);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  transition: border-color .2s, background .2s, color .2s;
}
.avp-myth-item::before {
  content: counter(myth, decimal-leading-zero);
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  color: var(--text-tertiary);
  padding-top: 2px;
  flex: none;
}
.avp-myth-item:hover { border-color: var(--primary); color: var(--text-primary); }
.avp-myth-item.is-active {
  background: var(--bg-accent);
  border-left-color: var(--primary);
  color: var(--text-primary);
  font-weight: 600;
}
.avp-arrow {
  cursor: pointer;
  flex: none;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-medium);
  background: #fff;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast);
}
.avp-arrow svg { display: block; }
.avp-arrow:hover { border-color: var(--primary); }
.avp-myth-card {
  cursor: pointer;
  flex: 1;
  min-height: 210px;
  perspective: 1000px;
  display: grid;
}
.avp-myth-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  border-radius: var(--radius-md);
  padding: 24px 28px;
  backface-visibility: hidden;
  transition: transform .5s ease;
  box-shadow: var(--shadow-sm);
}
.avp-myth-front {
  background: var(--bg-tertiary);
  border: 1.5px solid var(--border-medium);
  transform: rotateY(0deg);
}
.avp-myth-back {
  background: var(--avp-home-tint);
  border: 1.5px solid var(--accent-teal);
  transform: rotateY(-180deg);
}
.avp-myth-card.is-flipped .avp-myth-front { transform: rotateY(180deg); }
.avp-myth-card.is-flipped .avp-myth-back { transform: rotateY(0deg); }
.avp-myth-check {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-teal);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avp-face-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.avp-myth-front .avp-face-label { color: var(--accent-magenta); }
.avp-myth-back .avp-face-label { color: var(--accent-teal); }
.avp-myth-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--text-primary);
  max-width: 460px;
  text-wrap: pretty;
}
.avp-myth-fact {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-primary);
  max-width: 500px;
  text-wrap: pretty;
}
.avp-face-hint { font-size: 12.5px; color: var(--text-tertiary); }

/* ── Self-assessment jump ───────────────────────────────── */
.avp-jump-text {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 auto 14px;
}
.avp-jump-btn-wrap { margin-bottom: var(--spacing-xl); }
.avp-jump-btn {
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 0.8rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base), transform var(--transition-base);
}
.avp-jump-btn:hover { color: #fff; background: var(--primary-dark); transform: translateY(-1px); }
.avp-analogy-intro {
  font-size: 1rem;
  color: var(--text-tertiary);
  margin: 0 auto 14px;
  max-width: 640px;
  line-height: 1.55;
}
.avp-pickers {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.avp-picker {
  cursor: pointer;
  width: 250px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.avp-picker:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.avp-picker--home { background: var(--avp-home-tint); }
.avp-picker--music { background: var(--avp-music-tint); }
.avp-picker-emoji { font-size: 28px; margin-bottom: 8px; }
.avp-picker-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--text-primary);
}
.avp-picker-sub {
  font-size: 0.88rem;
  color: var(--text-tertiary);
  line-height: 1.45;
  margin-top: 4px;
}

/* ── Sticky analogy toggle ──────────────────────────────── */
.avp-toggle-bar {
  position: sticky;
  top: var(--avp-nav-offset);
  z-index: 20;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.avp-toggle-bar span {
  font-size: 0.88rem;
  color: var(--text-tertiary);
  align-self: center;
}
.avp-toggle {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 6px 18px;
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  background: transparent;
  color: var(--primary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.avp.is-home .avp-toggle--home,
.avp.is-music .avp-toggle--music {
  background: var(--primary);
  color: #fff;
}

/* ── How the pieces connect (flow) ──────────────────────── */
.avp-flow {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--spacing-2xl) clamp(1.5rem, 4vw, 3rem) var(--spacing-xl);
  scroll-margin-top: calc(var(--avp-nav-offset) + 56px);
}
.avp-flow .avp-section-head { text-align: center; margin-bottom: var(--spacing-xl); }
.avp-flow-sub {
  font-size: 1.06rem;
  color: var(--text-tertiary);
  max-width: 65ch;
  margin: 0 auto;
  text-align: left;
}
.avp-stage {
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.avp-stage--alt { border-color: var(--accent-teal); }
.avp-stage--single { max-width: 640px; margin: 0 auto; }
.avp-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avp-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.avp-stage--alt .avp-badge { background: var(--accent-teal); }
.avp-stage-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  color: var(--text-primary);
}
.avp-stage-title small {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-tertiary);
}
.avp-stage-body {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.avp-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.avp-chip {
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.79rem;
  color: var(--text-secondary);
}
.avp-chip--format {
  border-color: var(--accent-teal);
  background: var(--avp-home-tint);
  color: #2b7a80;
  font-weight: 700;
}
.avp-chip--warn {
  border-color: var(--accent-magenta);
  background: var(--avp-warn-tint);
  color: var(--accent-magenta);
}

.avp-stage-link { font-size: 0.9rem; }
.avp-stage-link a { font-weight: 600; }

/* Paired stages */
.avp-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}
.avp-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.avp-mid-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-teal);
  text-transform: uppercase;
}
.avp-mid-glyph {
  color: var(--accent-teal);
  font-size: 20px;
  line-height: 1;
}

/* Vertical connectors */
.avp-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
}
.avp-connector-line {
  width: 2px;
  height: 14px;
  background: var(--accent-teal);
}
.avp-connector-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-teal);
  text-transform: uppercase;
  padding: 3px 0;
}
.avp-connector-glyph {
  color: var(--accent-teal);
  font-size: 14px;
  line-height: 1;
}

/* Analogy strips: hidden strip also gets visibility:hidden so its inner
   flip button drops out of the tab order and accessibility tree */
.avp-strips {
  display: grid;
  perspective: 700px;
  margin-top: 2px;
}
.avp-strips--push { margin-top: auto; }
.avp-strip {
  grid-area: 1 / 1;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.avp-strip--home { background: var(--avp-home-tint); }
.avp-strip--music { background: var(--avp-music-tint); }
.avp.is-home .avp-strip--home,
.avp.is-music .avp-strip--music {
  opacity: 1;
  transform: rotateX(0deg);
  pointer-events: auto;
  visibility: visible;
}
.avp.is-home .avp-strip--music {
  opacity: 0;
  transform: rotateX(90deg);
  pointer-events: none;
  visibility: hidden;
}
.avp.is-music .avp-strip--home {
  opacity: 0;
  transform: rotateX(-90deg);
  pointer-events: none;
  visibility: hidden;
}
/* ── Lock-in trap band (dark brand) ─────────────────────── */
.avp-lockin {
  position: relative;
  background: radial-gradient(120% 120% at 80% 0%, var(--avp-plum-800), var(--avp-plum-950));
  color: var(--avp-ink-dark);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-2xl) clamp(1.5rem, 5vw, 5rem);
  overflow: hidden;
  scroll-margin-top: calc(var(--avp-nav-offset) + 56px);
}
.avp-lockin-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.avp-lockin .avp-kicker { display: inline-block; margin-bottom: 0.6rem; }
.avp-lockin h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin-bottom: 16px;
  color: #fff;
}
.avp-lockin p {
  font-size: 1.1rem;
  line-height: 1.65;
  margin: 0 auto 26px;
  max-width: 680px;
  color: #e3d4ef;
}
.avp-qchips {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.avp-qchip {
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.94rem;
}
p.avp-lockin-closer {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  color: var(--accent-yellow);
  font-weight: 700;
  max-width: none;
}

/* ── Client stories (15th-anniversary card layout) ──────── */
.avp-story {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--spacing-2xl) 28px 0;
  text-align: center;
}
.avp-story .avp-section-head { margin-bottom: var(--spacing-lg); }
.avp-clients {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  max-width: 720px;
  margin: 0 auto;
}
.avp-client-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: 2rem 2rem 1.6rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-align: left;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.avp-client-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
/* Top color band picks up the per-card accent */
.avp-client-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--avp-client-c, var(--color-plum));
}
.avp-client--teal { --avp-client-c: var(--accent-teal); }
.avp-client--magenta { --avp-client-c: var(--accent-magenta); }
.avp-client--yellow { --avp-client-c: var(--accent-yellow); }

/* Rotating quotes: cards stack in one grid cell and cross-fade; the
   hidden ones drop out of the tab order via visibility */
.avp-quote-stage { display: grid; }
.avp-quote-stage .avp-client-card {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.avp-quote-stage .avp-client-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.avp-quote-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.avp-qdots { display: flex; }
.avp-qdot {
  cursor: pointer;
  width: 15px;
  height: 24px;
  border: none;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avp-qdot::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-medium);
  transition: background .2s;
}
.avp-qdot.is-active::after { background: var(--primary); }
.avp-client-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 0.7;
  color: var(--avp-client-c, var(--color-plum));
  opacity: 0.28;
  margin: 0.4rem 0 -0.6rem;
  user-select: none;
}
.avp-client-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-primary);
  font-style: normal;
}
.avp-client-attribution {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.avp-client-attribution strong {
  color: var(--text-primary);
  font-weight: 700;
}
@media (max-width: 820px) {
  .avp-clients { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .avp-client-card { padding: 1.6rem 1.6rem 1.3rem; }
  .avp-client-mark { font-size: 3.6rem; }
}

/* ── Build in universal formats first ───────────────────── */
.avp-formats {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--spacing-2xl) 28px;
  text-align: center;
  scroll-margin-top: calc(var(--avp-nav-offset) + 56px);
}
.avp-formats-intro {
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--text-tertiary);
  max-width: 65ch;
  margin: 0 auto;
  text-align: left;
}
.avp-dest-cards {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.avp-dest {
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px 26px;
  background: var(--bg-primary);
  min-width: 170px;
  box-shadow: var(--shadow-sm);
}
.avp-dest-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--primary);
}
.avp-dest-sub { font-size: 0.85rem; color: var(--text-tertiary); margin-top: 4px; }
.avp-formats-foot {
  font-size: 0.95rem;
  color: var(--text-tertiary);
  margin: 26px auto 0;
  max-width: 560px;
}

/* ── Decision tree ──────────────────────────────────────── */
.avp-decision {
  background: var(--bg-accent);
  padding: var(--spacing-2xl) 28px;
  scroll-margin-top: calc(var(--avp-nav-offset) + 56px);
}
.avp-decision-inner { max-width: 720px; margin: 0 auto; }
.avp-decision .avp-section-head { margin-bottom: var(--spacing-lg); }
.avp-decision-sub {
  font-size: 1.06rem;
  color: var(--text-tertiary);
}
.avp-decision-card {
  background: var(--bg-primary);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 32px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  box-shadow: var(--shadow-md);
}
.avp-step { display: flex; flex-direction: column; gap: 20px; }
.avp-step[hidden] { display: none; }
.avp-step--verdict { gap: 16px; }
.avp-step-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
}
.avp-step-label--ok { color: var(--accent-magenta); }
.avp-step-q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--text-primary);
}
.avp-step-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.avp-btn-solid {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base);
}
.avp-btn-solid:hover { background: var(--primary-dark); }
.avp-btn-outline {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 28px;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  transition: background var(--transition-base);
}
.avp-btn-outline:hover { background: var(--bg-accent); }
.avp-verdict-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.avp-verdict-more {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.avp-restart {
  font-size: 0.9rem;
  align-self: flex-start;
}

/* ── CTA (page's own, above the shared network footer) ──── */
.avp-cta {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-2xl) 28px var(--spacing-3xl);
  text-align: center;
  scroll-margin-top: calc(var(--avp-nav-offset) + 56px);
}
.avp-cta-intro {
  font-size: 1.06rem;
  color: var(--text-tertiary);
  line-height: 1.6;
  max-width: 65ch;
  margin: 0 auto;
  text-align: left;
}
.avp-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.avp-cta-primary {
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 14px 32px;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base), transform var(--transition-base);
}
.avp-cta-primary:hover { color: #fff; background: var(--primary-dark); transform: translateY(-1px); }
.avp-cta-secondary {
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid var(--primary);
  color: var(--primary);
  border-radius: 999px;
  padding: 14px 32px;
  background: #fff;
  transition: background var(--transition-base);
}
.avp-cta-secondary:hover { color: var(--primary-dark); background: var(--bg-accent); }
.avp-fineprint {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin: 40px auto 0;
}

/* ── Responsive ─────────────────────────────────────────── */
/* Below 880px the sticky left rail collapses into a compact bar with a
   hamburger menu (anniversary pattern). */
@media (max-width: 880px) {
  .avp-layout { grid-template-columns: 1fr; }
  .avp-rail {
    position: sticky; top: var(--avp-nav-offset); z-index: 60;
    height: auto; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .avp-rail-inner {
    position: static; max-height: none; overflow: visible;
    flex-direction: column; gap: 0; padding: 0.55rem clamp(1rem, 4vw, 2rem);
  }
  .avp-rail-top {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .avp-rail-brand { display: flex; align-items: baseline; gap: 0.55rem; }
  .avp-rail-big { font-size: 1.5rem; }
  .avp-rail-sub { margin-top: 0; }

  .avp-rail-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255, 255, 255, 0.08); color: var(--avp-ink-dark);
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px;
    padding: 0.45rem 0.85rem; font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.04em; cursor: pointer; transition: background var(--transition-fast);
  }
  .avp-rail-toggle:hover { background: rgba(255, 255, 255, 0.14); }
  .avp-rail-toggle-bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; width: 16px; height: 12px; }
  .avp-rail-toggle-bars span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .avp-rail.is-open .avp-rail-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .avp-rail.is-open .avp-rail-toggle-bars span:nth-child(2) { opacity: 0; }
  .avp-rail.is-open .avp-rail-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .avp-rail-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: linear-gradient(180deg, var(--avp-plum-900), var(--avp-plum-950));
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    gap: 0; padding: 0 clamp(1rem, 4vw, 2rem);
    max-height: 0; overflow: hidden;
    transition: max-height .28s ease, padding .28s ease;
  }
  .avp-rail.is-open .avp-rail-panel {
    max-height: 78vh; overflow-y: auto;
    padding: 0.7rem clamp(1rem, 4vw, 2rem) 1.1rem;
  }
  .avp-rail-nav a { padding: 0.7rem 0.6rem; }
  .avp-rail-cta { display: block; margin: 0.6rem 0 0.4rem; }

  /* Sticky analogy toggle sits below the collapsed rail bar */
  .avp-toggle-bar { top: calc(var(--avp-nav-offset) + 52px); }
}

@media (max-width: 720px) {
  .avp-pair { grid-template-columns: 1fr; }
  .avp-mid { flex-direction: row; padding: 4px 0; }
  .avp-mid-glyph { transform: rotate(90deg); }
  .avp-hero { min-height: 52vh; }
  /* Featured card stacks above the full myth list */
  .avp-myth-split { grid-template-columns: 1fr; }
  .avp-myth-stage { position: static; }
}

@media (max-width: 480px) {
  .avp-intro { padding: var(--spacing-xl) 18px; }
  .avp-arrow { width: 44px; height: 44px; }
  .avp-picker { width: 100%; }
  .avp-toggle { padding: 10px 18px; }
  .avp-decision-card { padding: 22px; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .avp-myth-face,
  .avp-strip,
  .avp-picker,
  .avp .reveal {
    transition: none;
  }
  .avp .reveal { opacity: 1; transform: none; }
  .avp-h1-l1, .avp-h1-l2, .avp-h1-l3, .avp-lede, .avp-hero-cta {
    animation: none;
    opacity: 1;
  }
  .avp-blob, .avp-scroll-cue { animation: none; }
  .avp-myth-item { transition: none; }
  .avp-client-card { transition: none; }
  .avp-client-card:hover { transform: none; }
  .avp-qdot::after { transition: none; }
}