/* Shared capability-page primitives. Kept intentionally small for Sprint 2 PR1. */

.cp-body { --cp-line: rgba(56, 225, 255, .2); }

.cp-nav {
  background: rgba(7, 7, 13, .78);
  border-bottom-color: var(--ax-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.cp-nav-links { display: flex; gap: 28px; color: var(--ax-text-2); font-size: 14px; }
.cp-nav-links a { transition: color var(--ax-t-fast); }
.cp-nav-links a:hover { color: var(--ax-text); }

.cp-hero {
  min-height: calc(100svh - 70px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(48px, 8vw, 96px);
  align-items: center;
  padding-top: clamp(64px, 9vw, 112px);
  padding-bottom: clamp(72px, 10vw, 128px);
}

.cp-hero-copy { max-width: 690px; }
.cp-hero h1 {
  max-width: 12ch;
  margin: 22px 0 28px;
  font-family: var(--ax-display);
  font-size: clamp(44px, 6.6vw, 78px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.045em;
}

.cp-lede { max-width: 620px; color: var(--ax-text-2); font-size: clamp(18px, 2vw, 21px); }
.cp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cp-note { margin-top: 18px; color: var(--ax-text-3); font: 12px/1.5 var(--ax-mono); letter-spacing: .04em; }

.cp-compare-frame {
  position: relative;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--ax-border-2);
  border-radius: 26px;
  background: linear-gradient(155deg, rgba(21, 23, 43, .94), rgba(8, 10, 20, .92));
  box-shadow: 0 36px 90px rgba(0, 0, 0, .42), 0 0 70px rgba(56, 225, 255, .08);
}

.cp-compare-frame::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  top: -110px;
  border-radius: 50%;
  background: rgba(124, 92, 255, .2);
  filter: blur(38px);
}

.cp-frame-head,
.cp-frame-foot { position: relative; display: flex; justify-content: space-between; align-items: center; font: 11px/1.4 var(--ax-mono); color: var(--ax-text-3); }
.cp-private { color: var(--ax-cyan); }
.cp-photo-pair { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 22px 0; }
.cp-photo-card { padding: 12px; border: 1px solid var(--ax-border); border-radius: 16px; background: rgba(255,255,255,.025); color: var(--ax-text-2); font: 10px/1.4 var(--ax-mono); }
.cp-photo-card-current { border-color: var(--cp-line); }
.cp-photo-date { display: block; margin-bottom: 10px; color: var(--ax-text); }
.cp-photo-shape { height: 190px; margin-bottom: 10px; border-radius: 10px; background: radial-gradient(circle at 50% 24%, rgba(236,237,246,.18) 0 10%, transparent 11%), radial-gradient(ellipse at 50% 64%, rgba(236,237,246,.13) 0 24%, transparent 25%), linear-gradient(150deg, rgba(124,92,255,.2), rgba(56,225,255,.06)); }
.cp-compare-arrow { color: var(--ax-cyan); font: 18px var(--ax-mono); }
.cp-frame-foot { justify-content: flex-start; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ax-border); }
.cp-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ax-cyan); box-shadow: 0 0 12px var(--ax-cyan); }

.cp-truth-strip { border-block: 1px solid var(--ax-border); background: rgba(15, 16, 32, .56); }
.cp-truth-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.cp-truth-grid p { padding: 28px 32px; border-left: 1px solid var(--ax-border); }
.cp-truth-grid p:last-child { border-right: 1px solid var(--ax-border); }
.cp-truth-grid strong, .cp-truth-grid span { display: block; }
.cp-truth-grid strong { font-family: var(--ax-display); font-size: 17px; }
.cp-truth-grid span { margin-top: 4px; color: var(--ax-text-3); font-size: 13px; line-height: 1.45; }

.cp-section { padding-top: clamp(80px, 11vw, 136px); padding-bottom: clamp(80px, 11vw, 136px); }
.cp-section + .cp-section { border-top: 1px solid var(--ax-border); }
.cp-section-head { max-width: 710px; margin: 0 auto 48px; text-align: center; }
.cp-section-head-left { margin-inline: 0; text-align: left; }
.cp-section h2 { margin: 16px 0 18px; font-family: var(--ax-display); font-size: clamp(34px, 5vw, 56px); line-height: 1.02; letter-spacing: -.035em; }
.cp-section-head p, .cp-compare-copy p, .cp-axis-section p, .cp-boundary-copy { color: var(--ax-text-2); }

.cp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.cp-steps li, .cp-signal-list article { padding: 28px; border: 1px solid var(--ax-border); border-radius: 18px; background: rgba(15, 16, 32, .58); }
.cp-step-index, .cp-signal-list article > span, .wp-output-label, .mp-output-label { color: var(--ax-cyan); font: 11px/1 var(--ax-mono); letter-spacing: .12em; text-transform: uppercase; }
.cp-steps h3, .cp-signal-list h3 { margin: 24px 0 10px; font-family: var(--ax-display); font-size: 21px; }
.cp-steps p, .cp-signal-list p { color: var(--ax-text-2); font-size: 15px; }

.cp-section-split { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(40px, 8vw, 100px); align-items: start; }
.cp-signal-list { display: grid; gap: 14px; }
.cp-signal-list article { display: grid; grid-template-columns: 90px 190px 1fr; gap: 22px; align-items: baseline; }
.cp-signal-list h3 { margin: 0; }

#compare { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(44px, 9vw, 112px); align-items: center; }
.cp-compare-copy p + p { margin-top: 18px; }
.cp-comparability { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--ax-border); border-radius: 18px; background: var(--ax-border); }
.cp-comparability > div { display: grid; grid-template-columns: 14px 1fr; gap: 5px 12px; padding: 22px; background: var(--ax-surface); }
.cp-comparability strong { font-family: var(--ax-display); }
.cp-comparability small { grid-column: 2; color: var(--ax-text-3); }
.cp-dot { grid-row: 1 / 3; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; }
.cp-dot-good { background: var(--ax-cyan); }
.cp-dot-limited { background: #F3B35B; }
.cp-dot-stop { background: var(--ax-signal); }

.cp-history-card, .cp-boundaries, .cp-final-card { padding: clamp(34px, 6vw, 72px); border: 1px solid var(--ax-border-2); border-radius: 24px; background: linear-gradient(135deg, rgba(124,92,255,.1), rgba(15,16,32,.78) 44%, rgba(56,225,255,.06)); }
.cp-history-card { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 8vw, 96px); align-items: end; }
.cp-history-card p { color: var(--ax-text-2); }
.cp-history-card h2 { margin-bottom: 0; }

.cp-axis-section { display: grid; grid-template-columns: 180px 1fr; gap: clamp(38px, 8vw, 90px); align-items: center; }
.cp-axis-mark { display: grid; place-items: center; width: 160px; aspect-ratio: 1; border: 1px solid var(--ax-border-2); border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.18), transparent 68%); }
.cp-text-link { display: inline-block; margin-top: 26px; color: var(--ax-cyan); font-weight: 600; }

.cp-boundaries { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 8vw, 96px); }
.cp-boundaries .cp-section-head { margin-bottom: 0; }
.cp-boundary-copy p + p { margin-top: 16px; }

.cp-faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--ax-border); }
.cp-faq details { border-bottom: 1px solid var(--ax-border); }
.cp-faq summary { padding: 22px 36px 22px 0; cursor: pointer; font-family: var(--ax-display); font-weight: 600; }
.cp-faq p { padding: 0 0 24px; color: var(--ax-text-2); }

.cp-final { border-top: 0 !important; padding-top: 16px; }
.cp-final-card { text-align: center; }
.cp-final-card h2 { max-width: 16ch; margin-inline: auto; }
.cp-final-card p { margin-bottom: 28px; color: var(--ax-text-2); }
.cp-footer-launch { margin-top: 16px; }

/* ------------------------------------------------------------------ *
 * Composition shared by the two planner pages.
 *
 * The Workout Planner and the Meal Planner draw the same three shapes: a
 * device frame around the sample plan, a three-card output grid, and a
 * split section with an ordered list beside the copy. Sprint 2 shipped
 * them as two separate copies of the same rule bodies; PR4 merges the
 * bodies that were identical. What stays under .wp-* / .mp-* below is
 * only what genuinely differs between the two pages - frame tint, glow
 * placement, label column width, gradient direction.
 * ------------------------------------------------------------------ */
.wp-plan-frame, .mp-plan-frame {
  position: relative;
  min-width: 0;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--ax-border-2);
  border-radius: 26px;
}
.wp-plan-frame::before, .mp-plan-frame::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  filter: blur(42px);
}
.wp-frame-head, .wp-frame-foot, .mp-frame-head, .mp-frame-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ax-text-3);
  font: 11px/1.4 var(--ax-mono);
}
.wp-frame-head, .mp-frame-head { justify-content: space-between; }
.wp-frame-foot, .mp-frame-foot { padding-top: 2px; }
.wp-steps, .mp-steps { grid-template-columns: repeat(4, 1fr); }

.wp-output-grid, .mp-output-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wp-output-grid article, .mp-output-grid article {
  position: relative;
  min-width: 0;
  padding: 32px;
  overflow: hidden;
  border: 1px solid var(--ax-border);
  border-radius: 20px;
  background: rgba(15, 16, 32, .58);
}
.wp-output-grid article::after, .mp-output-grid article::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -72px;
  bottom: -76px;
  border: 1px solid rgba(56,225,255,.16);
  border-radius: 50%;
}
.wp-output-grid h3, .mp-output-grid h3 { margin: 28px 0 12px; font-family: var(--ax-display); font-size: 22px; }
.wp-output-grid p, .mp-output-grid p { color: var(--ax-text-2); font-size: 15px; }

.wp-structure, .wp-pair, .mp-structure, .mp-pair {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(44px, 9vw, 112px);
  align-items: center;
}
.wp-structure-copy p, .wp-pair p, .mp-structure-copy p, .mp-pair p { max-width: 690px; color: var(--ax-text-2); }
.wp-structure-copy p + p, .wp-pair p + p, .mp-structure-copy p + p, .mp-pair p + p { margin-top: 18px; }
.wp-pump-note, .wp-note, .mp-note { color: var(--ax-text-3) !important; font-size: 14px; }

.wp-structure-list, .wp-pair-list, .mp-flow, .mp-pair-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ax-border);
  border-radius: 18px;
  background: var(--ax-border);
}
.wp-structure-list > div, .wp-pair-list > div, .mp-flow > div, .mp-pair-list > div {
  display: grid;
  gap: 4px 12px;
  padding: 22px;
  background: var(--ax-surface);
}
.wp-structure-list span, .wp-pair-list span, .mp-flow span, .mp-pair-list span {
  grid-row: 1 / 3;
  padding-top: 5px;
  color: var(--ax-violet);
  font: 10px/1 var(--ax-mono);
}
.wp-structure-list strong, .wp-pair-list strong, .mp-flow strong, .mp-pair-list strong { font-family: var(--ax-display); }
.wp-structure-list small, .wp-pair-list small, .mp-flow small, .mp-pair-list small { color: var(--ax-text-3); }

.wp-loop-mark, .mp-shop-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  min-height: 260px;
  padding: 24px;
  border: 1px solid var(--ax-border-2);
  border-radius: 80px;
}
.wp-loop-mark span, .mp-shop-mark span { color: var(--ax-text); font: 12px/1 var(--ax-mono); text-transform: uppercase; letter-spacing: .1em; }
.wp-loop-mark i, .mp-shop-mark i { width: 1px; height: 48px; margin: 10px 0; }

/* AI Workout Planner: what differs from the shared planner composition. */
.wp-body { --cp-line: rgba(124, 92, 255, .28); }
.wp-plan-frame {
  background: linear-gradient(155deg, rgba(18, 20, 39, .96), rgba(8, 10, 20, .94));
  box-shadow: 0 36px 90px rgba(0, 0, 0, .42), 0 0 72px rgba(124, 92, 255, .11);
}
.wp-plan-frame::before { right: -100px; top: -130px; background: rgba(56, 225, 255, .14); }
.wp-saved { color: var(--ax-cyan); }
.wp-week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  margin: 22px 0 14px;
}
.wp-week span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--ax-border);
  border-radius: 10px;
  color: var(--ax-text-3);
  font: 10px/1 var(--ax-mono);
  background: rgba(255,255,255,.025);
}
.wp-week .is-training {
  border-color: rgba(56, 225, 255, .36);
  color: var(--ax-text);
  background: linear-gradient(145deg, rgba(124,92,255,.2), rgba(56,225,255,.09));
}
.wp-session {
  position: relative;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--ax-border);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}
.wp-session-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ax-border);
}
.wp-session-head small, .wp-session-head strong { display: block; }
.wp-session-head small { margin-bottom: 4px; color: var(--ax-text-3); font: 10px/1.4 var(--ax-mono); text-transform: uppercase; letter-spacing: .09em; }
.wp-session-head strong { font-family: var(--ax-display); font-size: 20px; }
.wp-session-head > span { color: var(--ax-cyan); font: 11px/1.4 var(--ax-mono); }
.wp-exercise {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.wp-exercise:last-child { border-bottom: 0; padding-bottom: 0; }
.wp-exercise > span { color: var(--ax-violet); font: 10px/1 var(--ax-mono); }
.wp-exercise strong { min-width: 0; font-size: 13px; }
.wp-exercise small { color: var(--ax-text-3); font: 10px/1.4 var(--ax-mono); }
.wp-structure-list > div { grid-template-columns: 34px 1fr; }
.wp-loop-mark { background: linear-gradient(180deg, rgba(124,92,255,.16), rgba(56,225,255,.06)); }
.wp-loop-mark i { background: linear-gradient(var(--ax-violet), var(--ax-cyan)); }
.wp-pump-note { margin-top: 14px; }

/* AI Meal Planner: what differs from the shared planner composition. */
.mp-body { --cp-line: rgba(56, 225, 255, .26); }
.mp-plan-frame {
  background: linear-gradient(155deg, rgba(18, 22, 38, .96), rgba(8, 10, 20, .94));
  box-shadow: 0 36px 90px rgba(0, 0, 0, .42), 0 0 72px rgba(56, 225, 255, .1);
}
.mp-plan-frame::before { left: -110px; top: -120px; background: rgba(124, 92, 255, .18); }
.mp-active { color: var(--ax-cyan); }
.mp-options { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 14px; }
.mp-options span {
  padding: 9px 0;
  border: 1px solid var(--ax-border);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--ax-text-3);
  font: 10px/1 var(--ax-mono);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.mp-options .is-chosen {
  border-color: rgba(56, 225, 255, .38);
  color: var(--ax-text);
  background: linear-gradient(145deg, rgba(124,92,255,.2), rgba(56,225,255,.09));
}
.mp-day {
  position: relative;
  margin-bottom: 14px;
  padding: 6px 18px;
  border: 1px solid var(--ax-border);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}
.mp-meal {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.mp-meal:last-child { border-bottom: 0; }
.mp-meal > span { color: var(--ax-violet); font: 10px/1.4 var(--ax-mono); text-transform: uppercase; letter-spacing: .07em; }
.mp-meal strong { min-width: 0; font-size: 13px; font-weight: 500; }
.mp-meal small { color: var(--ax-text-3); font: 10px/1.4 var(--ax-mono); }
.mp-totals {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.mp-totals > div { padding: 12px 6px; border: 1px solid var(--ax-border); border-radius: 12px; background: rgba(255,255,255,.02); text-align: center; }
.mp-totals strong { display: block; font-family: var(--ax-display); font-size: 17px; }
.mp-totals small { display: block; margin-top: 3px; color: var(--ax-text-3); font: 9px/1.3 var(--ax-mono); text-transform: uppercase; letter-spacing: .07em; }
.mp-output-grid article::after { border-color: rgba(124,92,255,.18); }
.wp-pair-list > div, .mp-flow > div, .mp-pair-list > div { grid-template-columns: 62px 1fr; }
.wp-pair-list span, .mp-flow span, .mp-pair-list span { text-transform: uppercase; letter-spacing: .07em; }
.mp-shop-mark { background: linear-gradient(180deg, rgba(56,225,255,.12), rgba(124,92,255,.14)); }
.mp-shop-mark i { background: linear-gradient(var(--ax-cyan), var(--ax-violet)); }

@media (max-width: 880px) {
  .cp-nav-links { display: none; }
  .cp-hero { min-height: auto; grid-template-columns: 1fr; }
  .cp-compare-frame { max-width: 560px; }
  .cp-truth-grid, .cp-steps, .cp-section-split, #compare, .cp-history-card, .cp-boundaries { grid-template-columns: 1fr; }
  .cp-truth-grid p { border-left: 0; border-bottom: 1px solid var(--ax-border); }
  .cp-truth-grid p:last-child { border-right: 0; border-bottom: 0; }
  .cp-signal-list article { grid-template-columns: 86px 1fr; }
  .cp-signal-list p { grid-column: 2; }
  .wp-steps, .mp-steps,
  .wp-output-grid, .mp-output-grid,
  .wp-structure, .wp-pair, .mp-structure, .mp-pair { grid-template-columns: 1fr; }
  .wp-loop-mark, .mp-shop-mark { width: 100%; min-height: 0; flex-direction: row; }
  .wp-loop-mark i, .mp-shop-mark i { width: 48px; height: 1px; margin: 0 12px; }
}

@media (max-width: 560px) {
  .cp-nav .ax-btn { padding-inline: 14px; }
  .cp-hero { padding-inline: 20px; }
  .cp-hero h1 { font-size: clamp(40px, 12vw, 58px); }
  .cp-photo-pair { grid-template-columns: 1fr; }
  .cp-compare-arrow { transform: rotate(90deg); justify-self: center; }
  .cp-photo-shape { height: 150px; }
  .cp-actions .ax-btn { width: 100%; }
  .cp-section { padding-inline: 20px; }
  .cp-signal-list article { grid-template-columns: 1fr; }
  .cp-signal-list p { grid-column: auto; }
  .cp-axis-section { grid-template-columns: 1fr; }
  .cp-axis-mark { width: 120px; }
  .wp-plan-frame, .mp-plan-frame { padding: 16px; }
  .wp-exercise { grid-template-columns: 24px 1fr; }
  .wp-exercise small { grid-column: 2; }
  .wp-output-grid article, .mp-output-grid article { padding: 26px; }
  .mp-day { padding-inline: 14px; }
  .mp-meal { grid-template-columns: 1fr auto; }
  .mp-meal > span { grid-column: 1 / 3; }
  .mp-totals { grid-template-columns: repeat(2, 1fr); }
  .wp-pair-list > div, .mp-flow > div, .mp-pair-list > div { grid-template-columns: 1fr; }
  .wp-pair-list span, .mp-flow span, .mp-pair-list span { grid-row: auto; padding-top: 0; }
  .wp-loop-mark, .mp-shop-mark { padding: 18px 14px; }
  .wp-loop-mark i, .mp-shop-mark i { width: 24px; margin-inline: 8px; }
  .wp-loop-mark span, .mp-shop-mark span { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html.ax-html { scroll-behavior: auto; }
  .cp-body *, .cp-body *::before, .cp-body *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}