/* ── Prose ── */
.prose p { margin-bottom: 1.25rem; line-height: 1.75; }

/* ── Story layout ── */
#scroll-driver {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

.story-scene {
  visibility: hidden;
  pointer-events: auto;
}

.story-panel {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-inner {
  width: 100%;
  flex-shrink: 0;
  padding: 7rem 2rem 4rem;
  box-sizing: border-box;
}

.anim-child {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

/* ── Mobile section nav ── */
#mobile-section-fab {
  position: fixed;
  bottom: 0.5rem;
  right: 1.25rem;
  z-index: 60;
}

#mobile-section-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #00BAFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, background 0.2s ease;
}
#mobile-section-toggle:active { transform: scale(0.92); }
#mobile-section-toggle svg { transition: opacity 0.2s ease; }
#mobile-section-toggle.open svg { opacity: 0.7; }

#mobile-section-drawer {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: rgba(18,18,20,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 0.5rem 0;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transform-origin: bottom right;
  transform: scale(0.9) translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease;
}
#mobile-section-drawer.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.msec-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: color 0.15s ease, background 0.15s ease;
}
.msec-btn:active, .msec-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.msec-btn.active { color: #00BAFF; }
.msec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.msec-btn.active .msec-dot { opacity: 1; }

/* ── FAQ zone ── */
#faq-zone {
  padding: 5rem 2rem 4rem;
  box-sizing: border-box;
}

@media (max-height: 500px) {
  .story-inner { padding-top: 4.5rem; }
}

/* ── Dual chart visibility ── */
.chart-mobile  { display: block; }
.chart-desktop { display: none; }
@media (min-width: 768px) {
  .chart-mobile  { display: none; }
  .chart-desktop { display: block; }
}

/* ── Progress bar fills ── */
.bar-ink-mid { background: rgba(26,26,46,0.55); }
.bar-brand-mid { background: rgba(0,186,255,0.5); }

/* ── Noise tag cloud (slide 1) ── */
.noise-tag {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  background: #f1f3f6;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ── Rep pips (slide 5) ── */
.rep-pip {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .rep-pip { width: 20px; height: 20px; }
}
.rep-pip--done       { background: #1a1a2e; }
.rep-pip--done-brand { background: #00BAFF; }
.rep-pip--left       { background: #e2e5ea; }
.rep-pip--left-close { background: rgba(0,186,255,0.15); border: 1.5px solid #00BAFF; }

/* ── Rep range table responsive ── */
.reprange-table { font-size: 10px; }
.reprange-td    { padding: 8px 2px; }
@media (min-width: 400px) {
  .reprange-table { font-size: 11px; }
  .reprange-td    { padding: 10px 4px; }
}
@media (min-width: 640px) {
  .reprange-table { font-size: 13px; }
  .reprange-td    { padding: 14px 6px; }
}

/* ── Adherence chart responsive visibility ── */
.adh-chart-desktop { display: none; }
.adh-chart-mobile  { display: block; }
@media (min-width: 480px) {
  .adh-chart-desktop { display: block; }
  .adh-chart-mobile  { display: none; }
}

/* ── Interactive slide overrides ── */
[data-overload="true"] .story-inner,
[data-volume="true"] .story-inner,
[data-intensity="true"] .story-inner,
[data-rpe="true"] .story-inner,
[data-frequency="true"] .story-inner,
[data-exercise="true"] .story-inner,
[data-adherence="true"] .story-inner,
[data-reprange="true"] .story-inner,
[data-checklist="true"] .story-inner,
[data-adaptbar="true"] .story-inner {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 4rem;
  padding-bottom: 2rem;
}

/* ── Sawtooth chart ── */
#overload-chart { width: 100%; }

/* ── Exercise comparison bars ── */
#bench-chest-bar, #bench-shoulders-bar, #bench-triceps-bar, #bench-fatigue-bar,
#fly-chest-bar, #fly-shoulders-bar, #fly-triceps-bar, #fly-fatigue-bar {
  transition: width 0.6s ease;
}

/* ── Volume dial ── */
.volume-zone {
  transition: background 0.3s ease, color 0.3s ease;
}

/* ── Intensity circles ── */
.rep-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s ease, opacity 0.3s ease;
}
@media (max-width: 400px) {
  .rep-circle { width: 14px; height: 14px; }
}

/* ── Frequency circles ── */
#freq-circles-display {
  flex-wrap: nowrap;
  align-items: center;
}
.set-circle {
  width: clamp(14px, 4vw, 24px);
  height: clamp(14px, 4vw, 24px);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.4s ease, opacity 0.4s ease;
}
.freq-session-group {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(3px, 1vw, 6px);
  align-items: center;
}
.freq-session-divider {
  width: 3px;
  height: clamp(14px, 4vw, 24px);
  background: #6b7280;
  flex-shrink: 0;
  margin: 0 clamp(2px, 1vw, 6px);
}
.freq-tab {
  color: var(--ink-secondary, #6b7280);
  border-color: var(--border, #e5e7eb);
  background: var(--surface, #f9fafb);
  cursor: default;
}

/* ── Checklist items ── */
.check-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  padding: 10px 14px;
}
.check-item.visible {
  opacity: 1;
  transform: translateY(0);
}
#checklist-items { gap: 8px; }
#checklist-items .check-item p.font-semibold { font-size: 14px; }
#checklist-items .check-item p.text-xs { font-size: 12px; }

/* Mobile: page B crossfade */
#checklist-page-b {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}
.checklist-desktop-only { display: none !important; }
@media (min-width: 600px) {
  .checklist-desktop-only { display: flex !important; }
  #checklist-closing { display: block !important; }
  #checklist-page-b { display: none !important; }
  #checklist-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .check-item { padding: 14px 20px; }
  #checklist-items .check-item p.font-semibold { font-size: 14px; }
  #checklist-items .check-item p.text-xs { font-size: 12px; }
}

/* ── Shared animation utility classes ── */
.fade-hidden {
  opacity: 0;
}
.fade-slide-hidden {
  opacity: 0;
  transform: translateY(20px);
}
.transition-fade {
  transition: opacity 0.4s ease;
}
.transition-fade-slide {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.transition-fade-fast {
  transition: opacity 0.3s ease;
}
.transition-width-linear {
  transition: width 0.05s linear;
}

/* ── Summary page B positioning ── */
.summary-page-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Summary number badge ── */
.summary-badge {
  background: rgba(0,186,255,0.2);
  color: #00BAFF;
}

/* ── Summary text color ── */
.summary-sub {
  color: rgba(255,255,255,0.5);
}

/* ── FAQ section (outside slide system) ── */
#faq-section {
  max-width: 672px;
  margin: 0 auto;
}

/* ── CTA section text ── */
.cta-prose {
  color: rgba(255,255,255,0.5);
}
.cta-subtext {
  color: rgba(255,255,255,0.3);
}

/* ── Check item green ── */
.text-check-green {
  color: #22c55e;
}

/* ── Bar background gray ── */
.bar-bg-gray {
  background: #d1d5db;
}

/* ── Brand border card ── */
.brand-highlight-card {
  border-color: #00BAFF;
  background: rgba(0,186,255,0.04);
}

/* ── Brand subtle bg ── */
.brand-subtle-bg {
  background: rgba(0,186,255,0.08);
}

/* ── Checklist page B items ── */
.check-item-b {
  opacity: 0;
  padding: 10px 14px;
}
.check-item-b p.font-semibold { font-size: 14px; }
.check-item-b p.text-xs { font-size: 12px; }