/* ========================================================================== */
/*  PROGRAMS PAGE — TOKENS & THEME                                            */
/*  - All color literals are tokenized here                                   */
/*  - The old blue --accent is deprecated on this page                        */
/* ========================================================================== */

:root{
  /* Base surfaces & text */
  --bg:               #0d0f12;
  --panel:            #161a20;
  --surface-1:        #141a22;   /* main card surface */
  --surface-2:        #11151c;   /* section surface */
  --surface-3:        #121720;   /* subtle darker chip/badge surface */
  --surface-4:        #0e1218;   /* image/mask bg */

  --text:             #e9edf1;
  --muted:            #ffffff;
  --border:           #273044;

  /* Checklist ticks (green) */
  --check-accent:     #22c55e;

  /* Brand gradient (replaces old --accent blue) */
  /* Focus/brand stops (LIGHT):
     0%:#FFB056 (light orange) · 28%:#FF8A00 (brand orange)
     62%:#FF512F (deep orange) · 100%:#FF4D4D (athletic red) */
  --brand-gradient: var(--landing-brand-gradient, linear-gradient(90deg, #FFB056 0%, #FF8A00 28%, #FF512F 62%, #FF4D4D 100%));

  /* Solid companions (use when gradients are invalid in CSS properties) */
  --brand-amber:      #FFB056;
  --brand-orange:     #FF8A00;   /* mid-tone for borders, text outlines, trust strip, etc. */
  --brand-deep:       #FF512F;
  --brand-red:        #FF4D4D;

  /* Utility tints (used in soft glows/lines) */
  --glow-strong:      rgba(255,138,0,.85);
  --glow-soft:        rgba(255,138,0,.25);

  /* Result-category dots */
  --result-dot-strength:                #3B82F6;
  --result-dot-lean-muscle:             #A855F7;
  --result-dot-muscular-endurance:      #14B8A6;
  --result-dot-fat-loss:                #F59E0B;
  --result-dot-force-production:        #EF4444;
  --result-dot-athleticism:             #22C55E;
  --result-dot-coordination-balance:    #06B6D4;
  --result-dot-power:                   #F97316;
  --result-dot-conditioning:            #0891B2;
  --result-dot-body-composition:        #EAB308;
  --result-dot-speed:                   #84CC16;

  /* Common blacks/whites for masks and shadows */
  --black:            #000;
  --white:            #fff;
  --ink-06:           rgba(0,0,0,.06);
  --ink-10:           rgba(0,0,0,.10);
  --ink-12:           rgba(0,0,0,.12);
  --ink-14:           rgba(0,0,0,.14);
  --ink-15:           rgba(0,0,0,.15);
  --ink-22:           rgba(0,0,0,.22);
  --alpha-white-12:   rgba(255,255,255,.12);

  /* Misc tokens */
  --badge-blue:       #cfe3ff;   /* used in NSCA badge text */
  --radius:           5px;
  --maxw:             100%;
}

/* Hero gradient colors tokenized for readability */
:root{
  --hero-top: #10141a;
  --hero-bot: #0d0f12; /* = --bg */
}

/* Dark-mode: slightly deeper ramp for the same brand gradient */
@media (prefers-color-scheme: dark){
  :root{
    /* Dark gradient: 0%:#CC7A2E · 30%:#E36E00 · 65%:#D5462F · 100%:#FF4D4D */
    --brand-gradient: linear-gradient(90deg, #CC7A2E 0%, #E36E00 30%, #D5462F 65%, #FF4D4D 100%);
  }
}



/* ============================================================
   LIGHT MODE TOKEN OVERRIDES
   - Your base :root is dark. These overrides apply in light mode.
   - Everything else keeps using the same var(...) references.
   ============================================================ */

:root{
  /* Let browsers know both schemes are supported (form controls, etc.) */
  color-scheme: light dark;
}

@media (prefers-color-scheme: light){
  :root{
    /* Surfaces */
    --bg:         #f7f9fc;    /* page background */
    --panel:      #ffffff;    /* panels/cards */
    --surface-1:  #ffffff;    /* main card surface */
    --surface-2:  #f8fafc;    /* section surface */
    --surface-3:  #f1f5f9;    /* subtle chips/badges */
    --surface-4:  #ffffff;    /* image/mask bg */

    /* Text & borders */
    --text:       #111827;    /* gray-900 */
    --muted:      #4b5563;    /* gray-700 */
    --border:     #e5eaf1;    /* soft divider / card border */

    /* Hero gradient tokens for light */
    --hero-top:   #f9fafb;
    --hero-bot:   #ffffff;

    /* Utility tints (subtle glows/lines) — lighten slightly */
    --glow-strong: rgba(255,138,0,.80);
    --glow-soft:   rgba(255,138,0,.18);

    /* In light UI, a soft dark outline reads better than alpha-white */
    --alpha-white-12: rgba(0,0,0,.12);
  }


  /* Optional: ensure the page background matches tokens if not set elsewhere */
  body{
    background: var(--bg);
    color: var(--text);
  }
}


/* ========================================================================== */
/*  BASE / ACCESSIBILITY                                                       */
/* ========================================================================== */

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reduce-motion *{ scroll-behavior: auto !important; transition: none !important; }
}
.reduce-motion *{ scroll-behavior: auto !important; }

/* ========================================================================== */
/*  PAGE CONTAINER & HERO                                                      */
/* ========================================================================== */

.program-page{
  color: var(--text);

  max-width: var(--maxw);

}

.back-nav{ margin-bottom: 10px; }
.back-nav .cta-button{ padding: 8px 12px; }

.program-hero{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--hero-top), var(--hero-bot));
  padding: clamp(16px, 3vw, 24px);
  margin-bottom: 16px;
}
.program-hero h1{
  margin: 0 0 6px;
  font-size: clamp(24px, 4.8vw, 36px);
}
.program-tagline{ margin: 0 0 12px; color: var(--muted); }
.hero-cta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.price-inline{ color: var(--text); font-weight: 700; }

/* ========================================================================== */
/*  META BADGES                                                                */
/* ========================================================================== */

.program-meta{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin: 14px 0 16px;
}
.badges{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.badges li{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background: var(--surface-1);
  box-sizing:border-box;
}

.badges li strong{
  color: var(--muted);
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.program-meta .meta-duration-value{
  display:block;
}

.program-meta .meta-duration-submeta{
  display:grid;
  gap:4px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--border);
}

.program-meta .meta-duration-submeta__label{
  display:block;
  color: var(--muted);
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:700;
}

.program-meta .meta-duration-submeta__value{
  display:block;
  color: var(--text);
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.program-meta .meta-location-value{
  display:block;
}

.program-meta .meta-location-submeta{
  display:grid;
  gap:4px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--border);
}

.program-meta .meta-location-submeta__label{
  display:block;
  color: var(--muted);
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:700;
}

.program-meta .meta-location-submeta__value{
  display:block;
  color: var(--text);
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.program-meta .meta-pill-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.program-meta .meta-pill{
  display:inline-flex;
  align-items:center;
  min-height:1.9rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
}

.program-meta .meta-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--brand-orange);
  margin-right:8px;
  flex:0 0 auto;
}

.program-meta .meta-focus-stack{
  display:grid;
  gap:10px;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.program-meta .meta-focus-row{
  display:grid;
  grid-template-columns:88px minmax(0, 1fr);
  gap:10px;
  align-items:start;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.program-meta .meta-focus-kicker{
  display:inline-flex;
  align-items:center;
  min-height:1.9rem;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted);
}

.program-meta .focus-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:0;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.program-meta .focus-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:1.9rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
}

.program-meta .focus-chip .chip-ico{
  width:16px;
  height:16px;
  display:block;
  flex:0 0 auto;
}

.program-meta .meta-focus-row.is-primary .focus-chip{
  border-color: rgba(255, 138, 0, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 0, 0.14);
}


/* ---------- NSCA badges (Primary/Secondary) ---------- */
.nsca-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.nsca-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .6rem; border-radius:8px;
  border:1px solid var(--border, #e5e7eb);
  background:#fff; color:var(--text, #0f172a);
  position:relative;
}
.nsca-badge::before{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:3px;
  background:var(--brand-orange, #ff7a06); border-radius:3px 0 0 3px;
}

/* Optional subtle fill for the first (Primary) */
.nsca-tags .nsca-badge:first-child{
  background:rgba(255,122,6,.06);
}

/* NSCA badge text: follow theme tokens (fix legacy blue override) */
.program-expect .nsca-tags .nsca-badge {
  color: var(--text) !important;
}

/* If any inline elements appear inside later, keep them on the same color */
.program-expect .nsca-tags .nsca-badge :is(strong, em, a, span) {
  color: inherit !important;
}


/* ========================================================================== */
/*  CORE SECTIONS                                                              */
/* ========================================================================== */

.program-overview, .program-expect, .program-pdfs, .program-final-cta{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 12px 0;
}
.program-overview h2,
.program-expect h2,
.program-pdfs h2{ margin: 0 0 8px; }

.expect-steps{ margin: 8px 0 0; padding-left: 18px; }

.pdf-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.pdf-card{
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  padding: 10px;
}
.pdf-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

.program-final-cta{ text-align:center; }
.program-final-cta .cta-button{ padding:12px 18px; font-weight:800; }

.program-error{
  text-align:center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

/* Fade-in uses centralized observer + CSS variables from js/main.js. */

/* ========================================================================== */
/*  RESPONSIVE                                                                 */
/* ========================================================================== */

@media (max-width: 480px){
  .badges,
  .badges li,
  .program-meta .meta-pill-group,
  .program-meta .meta-focus-stack,
  .program-meta .focus-chips{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin-left:auto;
    margin-right:auto;
  }

  .program-meta .meta-focus-row{
    grid-template-columns:1fr;
    gap:8px;
  }
}

@media (max-width: 600px){
  .hero-cta{ flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px){
  .badges,
  .badges li,
  .program-meta .meta-pill-group,
  .program-meta .meta-focus-stack,
  .program-meta .focus-chips{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin-left:auto;
    margin-right:auto;
  }

  .program-meta .meta-focus-row{
    grid-template-columns:1fr;
    gap:8px;
  }
}

@media (min-width: 769px){
  .badges{ grid-template-columns: repeat(3, 1fr); }
  .pdf-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .pdf-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ========================================================================== */
/*  SCENARIO GALLERY — PREMIUM / ATHLETIC PLATFORM SHOWCASE                    */
/* ========================================================================== */

.scenario-gallery{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-orange) 16%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 96%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  border:1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius:20px;
  padding:2px;
  margin:4px 0;
  box-shadow: 0 18px 40px var(--ink-12);
}

.scenario-gallery::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-orange) 58%, transparent), transparent);
  pointer-events:none;
}

.scenario-gallery__shell,
.scenario-gallery__intro,
.scenario-gallery__rail,
.scenario-panels,
.scenario-panel,
.scenario-panel__media,
.scenario-copy{
  min-width:0;
  box-sizing:border-box;
}

.scenario-gallery__shell{
  position:relative;
  z-index:1;
  display:grid;
  gap:18px;
}

.scenario-gallery__intro{
  display:grid;
  gap:16px;
  padding-bottom:4px;
  border-bottom:1px solid color-mix(in srgb, var(--border) 68%, transparent);
}

.scenario-gallery__intro-copy{
  display:grid;
  gap:10px;
}

.scenario-gallery__eyebrow,
.scenario-gallery__rail-label,
.scenario-copy__eyebrow{
  margin:0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.scenario-gallery__eyebrow,
.scenario-copy__eyebrow{
  color: var(--brand-orange);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .scenario-gallery__eyebrow,
  .scenario-copy__eyebrow{
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.scenario-gallery__intro-copy h2{
  margin:0;
  color:var(--text);
  font-size:2rem;
  line-height:1.05;
  letter-spacing:-.03em;
}

.scenario-gallery__lede{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.scenario-gallery__stats{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.scenario-gallery__stat{
  display:grid;
  gap:4px;
  padding:14px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 8%, transparent);
}

.scenario-gallery__stat-value{
  display:block;
  color:var(--text);
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:-.03em;
}

.scenario-gallery__stat-label,
.scenario-gallery__rail-active,
.scenario-copy__lead{
  color:var(--muted);
}

.scenario-gallery__stat-label,
.scenario-gallery__rail-active{
  line-height:1.4;
}

.scenario-gallery__rail{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface-1) 90%, transparent);
}

.scenario-gallery__rail-copy{
  display:grid;
  gap:6px;
}

.scenario-gallery__rail-label{
  color:var(--text);
}

.scenario-tabs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  flex-wrap:nowrap;
  padding:2px 2px 6px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:x proximity;
}

.scenario-tabs::-webkit-scrollbar{
  display:none;
}

.scenario-tab{
  appearance:none;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:11px 16px;
  border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--text);
  border-radius:999px;
  cursor:pointer;
  line-height:1;
  font-weight:700;
  letter-spacing:.01em;
  scroll-snap-align:start;
  transition: background .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease, color .24s ease;
}

.scenario-tab:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand-orange) 30%, var(--border));
  box-shadow: 0 8px 18px var(--ink-10);
}

.scenario-tab[aria-selected="true"]{
  border-color: transparent;
  color: var(--text);
  background:
    linear-gradient(color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-1) 98%, transparent)) padding-box,
    var(--brand-gradient) border-box;
  border:1px solid transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-orange) 12%, transparent), 0 12px 24px var(--ink-10);
}

.scenario-tab:focus-visible{
  outline:none;
  transform: translateY(-1px);
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-1) 98%, transparent)) padding-box,
    var(--brand-gradient) border-box;
  border:1px solid transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-orange) 18%, transparent), 0 12px 24px var(--ink-10);
}

.scenario-tab__label{
  white-space:nowrap;
}

.scenario-panels{
  position:relative;
}

.scenario-panels > .scenario-panel[hidden]{
  display:none !important;
}

.scenario-panel{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
  align-items:stretch;
}

.scenario-panel__media,
.scenario-copy{
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  box-shadow: 0 14px 30px var(--ink-10);
}

.scenario-panel__media{
  position:relative;
  overflow:hidden;
  padding:12px;
}

.scenario-panel__media--mockups{
  overflow:visible;
  padding:20px 12px;
}

.scenario-panel__media--insight{
  display:grid;
  align-content:stretch;
  padding:18px;
}

.scenario-insight-card{
  position:relative;
  display:grid;
  gap:18px;
  min-height:100%;
  padding:22px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-orange) 18%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent),
    0 18px 34px var(--ink-12);
}

.scenario-insight-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-orange) 62%, transparent), transparent);
  pointer-events:none;
}

.scenario-insight-card__top,
.scenario-insight-card__hero,
.scenario-insight-card__list,
.scenario-insight-card__list li{
  min-width:0;
  box-sizing:border-box;
}

.scenario-insight-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.scenario-insight-card__eyebrow,
.scenario-insight-card__label,
.scenario-insight-card__kicker{
  margin:0;
}

.scenario-insight-card__eyebrow,
.scenario-insight-card__label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.scenario-insight-card__eyebrow,
.scenario-insight-card__label{
  color:var(--brand-orange);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .scenario-insight-card__eyebrow,
  .scenario-insight-card__label{
    background:var(--brand-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

.scenario-insight-card__kicker{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.scenario-insight-card__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  min-height:54px;
  padding:10px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background:color-mix(in srgb, var(--surface-1) 94%, transparent);
  color:var(--text);
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:-.03em;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent);
}

.scenario-insight-card__hero{
  display:grid;
  gap:8px;
}

.scenario-insight-card__hero h4{
  margin:0;
  color:var(--text);
  font-size:1.55rem;
  line-height:1.08;
  letter-spacing:-.03em;
}

.scenario-insight-card__hero p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.scenario-insight-card__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.scenario-insight-card__list li{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:12px;
  align-items:start;
  padding:12px 0 0;
  border-top:1px solid color-mix(in srgb, var(--border) 62%, transparent);
}

.scenario-insight-card__list li:first-child{
  padding-top:0;
  border-top:0;
}

.scenario-insight-card__step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  min-height:34px;
  padding:6px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand-orange) 28%, var(--border));
  background:color-mix(in srgb, var(--surface-1) 95%, transparent);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}

.scenario-insight-card__text{
  color:var(--text);
  line-height:1.55;
  overflow-wrap:anywhere;
}

.scenario-insight-card__empty{
  color:var(--muted);
  line-height:1.7;
}

.scenario-panel__media--insight{
  display:grid;
  align-content:stretch;
  padding:18px;
}

.scenario-insight-card{
  position:relative;
  display:grid;
  gap:18px;
  min-height:100%;
  padding:22px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-orange) 18%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent),
    0 18px 34px var(--ink-12);
}

.scenario-insight-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-orange) 62%, transparent), transparent);
  pointer-events:none;
}

.scenario-insight-card__top,
.scenario-insight-card__hero,
.scenario-insight-card__list,
.scenario-insight-card__list li{
  min-width:0;
  box-sizing:border-box;
}

.scenario-insight-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.scenario-insight-card__eyebrow,
.scenario-insight-card__label,
.scenario-insight-card__kicker{
  margin:0;
}

.scenario-insight-card__eyebrow,
.scenario-insight-card__label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.scenario-insight-card__eyebrow,
.scenario-insight-card__label{
  color:var(--brand-orange);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .scenario-insight-card__eyebrow,
  .scenario-insight-card__label{
    background:var(--brand-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

.scenario-insight-card__kicker{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.scenario-insight-card__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  min-height:54px;
  padding:10px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background:color-mix(in srgb, var(--surface-1) 94%, transparent);
  color:var(--text);
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:-.03em;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent);
}

.scenario-insight-card__hero{
  display:grid;
  gap:8px;
}

.scenario-insight-card__hero h4{
  margin:0;
  color:var(--text);
  font-size:1.55rem;
  line-height:1.08;
  letter-spacing:-.03em;
}

.scenario-insight-card__hero p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.scenario-insight-card__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.scenario-insight-card__list li{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:12px;
  align-items:start;
  padding:12px 0 0;
  border-top:1px solid color-mix(in srgb, var(--border) 62%, transparent);
}

.scenario-insight-card__list li:first-child{
  padding-top:0;
  border-top:0;
}

.scenario-insight-card__step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  min-height:34px;
  padding:6px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand-orange) 28%, var(--border));
  background:color-mix(in srgb, var(--surface-1) 95%, transparent);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}

.scenario-insight-card__text{
  color:var(--text);
  line-height:1.55;
  overflow-wrap:anywhere;
}

.scenario-insight-card__empty{
  color:var(--muted);
  line-height:1.7;
}

.scenario-shot{
  margin:0;
}

.scenario-shot__frame{
  display:block;
  overflow:hidden;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: var(--surface-4);
}

.scenario-shot img{
  width:100%;
  height:auto;
  display:block;
}

.scenario-copy{
  display:grid;
  gap:14px;
  padding:18px;
  align-content:start;
}

.scenario-copy__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.scenario-copy__index,
.scenario-copy__tag{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color:var(--text);
  font-size:12px;
  font-weight:700;
}

.scenario-copy__lead{
  margin:0;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.scenario-copy h3{
  margin:0;
  color:var(--text);
  font-size:1.6rem;
  line-height:1.08;
  letter-spacing:-.03em;
  text-align:left;
  hyphens:auto;
  overflow-wrap:anywhere;
}

.scenario-copy ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.scenario-copy li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 0 0;
  border-top:1px solid color-mix(in srgb, var(--border) 62%, transparent);
  line-height:1.65;
}

.scenario-copy li:first-child{
  padding-top:0;
  border-top:0;
}

.scenario-copy li::before{
  content:"";
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin-top:4px;
  background: var(--check-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 12l2 2 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 12l2 2 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity:.95;
}

@supports not (mask: url("")){
  .scenario-copy li::before{
    content:"✓";
    background:none;
    width:auto;
    height:auto;
    margin-top:0;
    font-weight:800;
    line-height:1;
    color: var(--check-accent);
  }
}

.scenario-copy__footer{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.scenario-panel--mockups{
  grid-template-columns:1fr;
}

.scenario-panel:not([hidden]){
  animation: scen-fade .2s ease-out;
}

@keyframes scen-fade{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}


@media (max-width: 480px){
  .scenario-gallery,
  .scenario-gallery__shell,
  .scenario-gallery__intro,
  .scenario-gallery__rail,
  .scenario-tabs,
  .scenario-panels,
  .scenario-panel,
  .scenario-panel__media,
  .scenario-copy{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin-left:auto;
    margin-right:auto;
  }

  .scenario-gallery{
    padding:4px 0 4px;
    border-radius:18px;
  }

  .scenario-gallery__intro,
  .scenario-gallery__rail,
  .scenario-panel__media,
  .scenario-copy{
    padding-left:4px;
    padding-right:4px;
  }

  .scenario-gallery__intro-copy h2,
  .scenario-copy h3{
    font-size:1.4rem;
  }


  .scenario-insight-card,
  .scenario-panel__media--insight{
    padding:2px;
  }

  .scenario-insight-card__top{
    align-items:flex-start;
    flex-direction:column;
  }

  .scenario-insight-card__count{
    min-width:48px;
    min-height:48px;
  }

  .scenario-insight-card,
  .scenario-panel__media--insight{
    padding:2px;
  }

  .scenario-insight-card__top{
    align-items:flex-start;
    flex-direction:column;
  }

  .scenario-insight-card__count{
    min-width:48px;
    min-height:48px;
  }

  .scenario-copy__meta{
    align-items:flex-start;
    flex-direction:column;
  }

}

@media (max-width: 600px){
  .scenario-gallery__stats{
    gap:8px;
  }
}

@media (max-width: 768px){
  .scenario-gallery,
  .scenario-gallery__shell,
  .scenario-gallery__intro,
  .scenario-gallery__rail,
  .scenario-tabs,
  .scenario-panels,
  .scenario-panel,
  .scenario-panel__media,
  .scenario-copy{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin-left:auto;
    margin-right:auto;
  }

  .scenario-tab{
    min-height:42px;
    padding:10px 14px;
  }
}

@media (min-width: 769px){
  .scenario-gallery{
    padding:22px;
  }

  .scenario-gallery__intro{
    grid-template-columns:1.35fr .8fr;
    align-items:end;
  }

  .scenario-gallery__stats{
    grid-template-columns:repeat(3, 1fr);
  }

  .scenario-tabs{
    flex-wrap:wrap;
    overflow:visible;
  }

  .scenario-panel{
    grid-template-columns:1.2fr .9fr;
  }

  .scenario-panel--copy-only{
    grid-template-columns:1fr 1fr;
  }

  .scenario-panel--mockups{
    grid-template-columns:1fr;
  }
}


/* ========================================================================== */
/*  TRUST STRIP — icon left, text wraps; top-aligned for multi-line bullets   */
/* ========================================================================== */
/* TRUST STRIP — theme-aware */
.program-trust{
  --trust-accent: var(--brand-orange);
  --trust-bg: var(--surface-1); /* was a fixed dark hex */
  --trust-border: var(--border);

  background: var(--trust-bg);
  border: 1px solid var(--trust-border);
  border-left: 3px solid var(--trust-accent);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 12px 0;
  color: var(--text); /* ensure text follows theme */
}


.trust-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

.trust-item{
  /* Grid gives correct multi-line alignment (icon anchors to first line) */
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;      /* top-align icon with first line of text */
  padding: 2px 0;
}

.trust-item svg{
  grid-column: 1;
  width: 24px;
  height: 24px;
  display: block;          /* avoid inline baseline quirks */
  margin-top: 2px;         /* tiny optical nudge; remove if you prefer */
  color: var(--muted);
}

.trust-item .trust-label,
.trust-item a.trust-label{
  grid-column: 2;
  line-height: 1.35;
  white-space: normal;     /* allow wrapping */
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere; /* long tokens/URLs won’t overflow */
  min-width: 0;
}

.trust-item a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trust-item a:focus-visible{
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Responsive columns for the list */
@media (min-width: 481px){
  .trust-list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 600px){
  .program-trust{ padding: 10px 14px; }
}
@media (min-width: 769px){
  .trust-list{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px 12px; }
  .trust-item{ font-weight: 600; }
}

/* High-contrast / reduced motion / forced colors */
.high-contrast .program-trust{ background:#000; border-color:#fff; border-left-color:#fff; }
.reduce-motion .program-trust *{ transition:none !important; }
@media (forced-colors: active){
  .program-trust{ background: Canvas; border:1px solid CanvasText; border-left:3px solid CanvasText; }
  .trust-item a{ color: LinkText; }
}


/* ========================================================================== */
/*  “WHAT TO EXPECT” + ACCORDIONS                                             */
/* ========================================================================== */

.program-expect .expect-dynamic{ margin-top:10px; display:grid; gap:12px; }
.program-expect h3{ margin:8px 0 4px; font-size: clamp(16px, 2.4vw, 18px); }
.program-expect p{ margin:0; color: var(--text); }
.program-expect ul{ margin:4px 0 0; padding-left:18px; }
.program-expect li{ margin:4px 0; }

/* Facts */
.program-expect .facts{ display:grid; gap:6px; margin-top:4px; }
.program-expect .facts > div{
  display:grid; grid-template-columns:160px 1fr; gap:8px; align-items:baseline;
  background: var(--surface-1);
  border:1px solid var(--border); border-radius:8px; padding:8px 10px;
}
.program-expect .facts dt{ color: var(--muted); font-size:12px; }
.program-expect .facts dd{ margin:0; }

/* Two-column lists */
.program-expect .twocol{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width: 769px){ .program-expect .twocol{ grid-template-columns:1fr 1fr; } }

/* Dynamic cards / list groups */
.program-expect .result-pills,
.program-expect .info-grid,
.program-expect .audience-grid{
  width:98%;
  max-width:98%;
  box-sizing:border-box;
  margin:0 auto;
}

.program-expect .result-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.program-expect .result-pill{
  display:inline-flex;
  align-items:center;
  min-height:1.9rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
}

.program-expect .result-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--brand-orange);
  margin-right:8px;
  flex:0 0 auto;
}

.program-expect .info-grid,
.program-expect .audience-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.program-expect .expect-card{
  background: var(--surface-1);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  box-sizing:border-box;
}

.program-expect .expect-card__title{
  margin:0 0 8px;
  font-size:14px;
  font-weight:800;
  color: var(--text);
}

.program-expect .stack-list{
  margin:0;
  padding-left:18px;
}

.program-expect .stack-list li{
  margin:6px 0;
}

.program-expect .phase-copy{
  color: var(--text);
  line-height:1.6;
}

.program-expect .phase-body > p + p{
  margin-top:10px;
}

@media (min-width: 769px){
  .program-expect .info-grid{
    grid-template-columns:repeat(3, 1fr);
  }

  .program-expect .audience-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* Details */
.program-expect details{
  border:1px solid var(--border); border-radius:8px; background: var(--surface-1);
  padding:8px 10px;
}
.program-expect details + details{ margin-top:8px; }
.program-expect summary{ cursor:pointer; font-weight:700; outline:none; }
.program-expect .weeks{ display:grid; gap:8px; margin-top:8px; }
.program-expect .week{
  border:1px solid var(--border); border-radius:8px;
  background: var(--surface-2); padding:8px 10px;
}
.program-expect .workout{ margin:6px 0 0; padding-left:18px; }
.program-expect .workout .w-name{ font-weight:700; }

/* Premium phase path */
.program-expect .phase-path{
  --phase-line: color-mix(in srgb, var(--brand-orange) 58%, transparent);
  --phase-surface: color-mix(in srgb, var(--surface-1) 92%, transparent);

  width: min(95%, clamp(17rem, 94vw, 72rem));
  margin: 4px auto 8px;
  padding: clamp(10px, 2.8vw, 16px);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 95%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent)) padding-box,
    linear-gradient(130deg, color-mix(in srgb, var(--brand-orange) 26%, transparent), color-mix(in srgb, var(--brand-orange) 20%, transparent)) border-box;
  box-shadow: 0 8px 20px var(--ink-12);
}

.program-expect .phase-path__intro{ display:grid; gap:8px; margin-bottom:10px; }
.program-expect .phase-path__kicker{
  margin:0;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted);
}
.program-expect .phase-path__headline{
  margin:0;
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight:800;
  letter-spacing:.01em;
}
.program-expect .phase-path__stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.program-expect .phase-path .phase-chip{
  display:inline-flex;
  align-items:center;
  min-height:1.75rem;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface-3) 84%, transparent);
  font-size:12px;
  font-weight:700;
  color: var(--text);
}

.program-expect .phase-path__rail{
  --phase-gap: 10px;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--phase-gap);
}
.program-expect .phase-path__node{ position:relative; min-width:0; }
.program-expect .phase-path__node:not(:last-child)::after{
  content:"";
  position:absolute;
  left: 24px;
  top: 100%;
  height: var(--phase-gap);
  width: 2px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--phase-line), color-mix(in srgb, var(--phase-line) 20%, transparent));
}

.program-expect .phase-node{
  width: min(100%, clamp(16rem, 92vw, 32rem));
  display:grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items:flex-start;
  gap:10px;
  padding:10px 10px 10px 8px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: var(--phase-surface);
  color: var(--text);
  text-align:left;
  cursor:pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .18s ease, background .2s ease;
}
.program-expect .phase-node:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand-orange) 40%, var(--border));
  box-shadow: 0 8px 16px var(--ink-10);
}
.program-expect .phase-node:focus-visible{
  outline:none;
  border-color:transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    var(--brand-gradient) border-box;
  border:1.5px solid transparent;
  box-shadow: 0 4px 12px var(--ink-12);
}
.program-expect .phase-node.is-active{
  border-color: color-mix(in srgb, var(--brand-orange) 56%, var(--border));
  box-shadow: 0 10px 20px var(--ink-12), inset 0 0 0 1px color-mix(in srgb, var(--brand-orange) 38%, transparent);
}

.program-expect .phase-node__badge{
  display:inline-grid;
  place-items:center;
  width:min(100%, clamp(1.65rem, 5vw, 2rem));
  aspect-ratio:1 / 1;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand-orange) 55%, transparent);
  background: color-mix(in srgb, var(--brand-orange) 16%, transparent);
  font-size:12px;
  font-weight:800;
  line-height:1;
}
.program-expect .phase-node__meta{
  min-width:0;
  display:grid;
  gap:2px;
}
.program-expect .phase-node__cycle{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted);
}
.program-expect .phase-node__name{
  font-size:14px;
  font-weight:800;
  line-height:1.15;
}
.program-expect .phase-node__weeks{
  font-size:12px;
  color: var(--muted);
  font-weight:600;
}

/* ≤480 */
@media (max-width: 480px){
  .program-expect .phase-path{
    width: min(95%, clamp(14rem, 95vw, 30rem));
    padding: 10px;
  }
  .program-expect .phase-node{
    width: min(100%, clamp(12rem, 93vw, 26rem));
    grid-template-columns: 30px minmax(0, 1fr);
  }
}

/* 481–600 */
@media (min-width: 481px) and (max-width: 600px){
  .program-expect .phase-path{
    width: min(100%, clamp(18rem, 92vw, 36rem));
  }
  .program-expect .phase-node{
    width: min(100%, clamp(16rem, 88vw, 34rem));
  }
}

/* 601–768 */
@media (min-width: 601px) and (max-width: 768px){
  .program-expect .phase-path{
    width: min(100%, clamp(22rem, 90vw, 46rem));
  }
  .program-expect .phase-node{
    width: min(100%, clamp(20rem, 84vw, 40rem));
  }
}

/* ≥769 */
@media (min-width: 769px){
  .program-expect .phase-path{
    width: min(100%, clamp(28rem, 92vw, 72rem));
    padding: clamp(12px, 1.6vw, 18px);
  }

  .program-expect .phase-path__rail{
    --phase-gap: clamp(8px, 1.1vw, 14px);
    grid-template-columns: repeat(var(--phase-count, 3), minmax(0, 1fr));
    gap: var(--phase-gap);
  }

  .program-expect .phase-path__node{
    display: flex;
  }

  .program-expect .phase-path__node:not(:last-child)::after{
    left: 100%;
    top: 50%;
    width: var(--phase-gap);
    height: 2px;
    transform: translateY(-50%);
    bottom: auto;
  }

  .program-expect .phase-node{
    width: 100%;
    max-width: none;
    min-height: 92px;
  }
}

@media (prefers-color-scheme: dark){
  .program-expect .phase-path{
    border-color: color-mix(in srgb, var(--border) 66%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 85%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent)) padding-box,
      linear-gradient(130deg, color-mix(in srgb, var(--brand-orange) 30%, transparent), color-mix(in srgb, var(--brand-orange) 24%, transparent)) border-box;
  }
  .program-expect .phase-node{
    background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  }
  .program-expect .phase-node.is-active{
    box-shadow: 0 8px 18px var(--ink-15), inset 0 0 0 1px color-mix(in srgb, var(--brand-orange) 44%, transparent);
  }
}

/* Phase accordion */
.program-expect .phase-controls{ display:flex; gap:8px; margin:6px 0; }
.program-expect .phase-controls .phase-toggle{
  appearance:none; cursor:pointer;
  border:1px solid var(--border);
  background: var(--surface-1); color: var(--text);
  border-radius:8px; padding:6px 10px; font-weight:600;
  transition: background .3s ease, border-color .3s ease, box-shadow .18s ease, transform .18s ease;
}
/* Gradient focus ring for toggles */
.program-expect .phase-controls .phase-toggle:focus-visible{
  outline:none; border-color:transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    var(--brand-gradient) border-box;
  border:1.5px solid transparent;
  transform: translateY(-1px); box-shadow: 0 4px 12px var(--ink-12);
}

.program-expect .phase-accordion{ display:grid; gap:10px; margin-top:8px; }
.program-expect .phase-item{
  border:1px solid var(--border); border-radius:8px; background: var(--surface-1);
  padding:0; overflow:hidden;
}
.program-expect .phase-summary{
  list-style:none; display:flex; align-items:center; gap:10px;
  cursor:pointer; padding:10px 12px; font-weight:700; margin:0;
}
.program-expect .phase-title{ font-weight:800; flex:1 1 auto; }
.program-expect .phase-weeks{ color: var(--muted); font-weight:600; font-size:12px; }

/* Chevron */
.program-expect summary::marker{ content:""; }
.program-expect summary::-webkit-details-marker{ display:none; }
.program-expect details > summary{ display:flex; align-items:center; gap:10px; }
.program-expect .chev{
  display:inline-grid; place-items:center; flex:0 0 auto; margin-left:auto; width:24px; height:24px;
}
.program-expect .chev svg{
  width:24px; height:24px; stroke: currentColor; transform-origin:50% 50%;
  transform: rotate(0deg); transition: transform .18s ease;
}
.program-expect details[open] .chev svg{ transform: rotate(90deg); }

/* FAQ */
.program-expect .faq{ display:grid; gap:8px; margin-top:6px; }
.program-expect .faq h4{ margin:0; }
.program-expect .faq p{ margin:0; color: var(--muted); }
.program-expect [hidden]{ display:none !important; }

.program-expect .faq-controls{ display:flex; gap:8px; margin:6px 0; }
.program-expect .faq-controls .faq-toggle{
  appearance:none; cursor:pointer;
  border:1px solid var(--border);
  background: var(--surface-1); color: var(--text);
  border-radius:8px; padding:6px 10px; font-weight:600;
  transition: background .3s ease, border-color .3s ease, box-shadow .18s ease, transform .18s ease;
}
/* Gradient focus ring for FAQ toggles */
.program-expect .faq-controls .faq-toggle:focus-visible{
  outline:none; border-color:transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    var(--brand-gradient) border-box;
  border:1.5px solid transparent;
  transform: translateY(-1px); box-shadow: 0 4px 12px var(--ink-12);
}

.program-expect .faq .faq-item{
  border:1px solid var(--border); border-radius:8px; background: var(--surface-1);
  padding:0; overflow:hidden;
}
.program-expect .faq .faq-summary{
  list-style:none; display:flex; align-items:center; gap:10px;
  cursor:pointer; padding:10px 12px; font-weight:700; margin:0;
}
.program-expect .faq .chev{ display:inline-grid; place-items:center; flex:0 0 auto; margin-left:auto; width:24px; height:24px; }
.program-expect .faq .chev svg{ width:24px; height:24px; stroke: currentColor; }

/* Plus → minus animation (vertical stroke fades on open) */
.program-expect .faq .chev [data-part="v"]{
  transition: opacity .18s ease, transform .18s ease;
  transform-origin: 12px 12px;
  opacity: 1; transform: scaleY(1);
}
.program-expect .faq .faq-item[open] .chev [data-part="v"]{ opacity:0; transform: scaleY(0); }

.program-expect .faq .faq-a{ padding:0 12px 12px 12px; color: var(--muted); }
.program-expect .faq .faq-a .faq-inline-link{
  appearance:none;
  border:none;
  background:none;
  padding:0;
  margin:0;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--text) 70%, transparent);
  cursor: pointer;
  transition: color .2s ease, text-decoration-color .2s ease, opacity .2s ease;
}
.program-expect .faq .faq-a .faq-inline-link:hover{
  color: var(--text-strong, var(--text));
  text-decoration-color: currentColor;
}
.program-expect .faq .faq-a .faq-inline-link:focus-visible{
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--ink-12);
}

.program-expect .program-inline-link{
  color: var(--text);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--text) 70%, transparent);
  transition: color .2s ease, text-decoration-color .2s ease, opacity .2s ease;
}
.program-expect .program-inline-link:hover{
  color: var(--text-strong, var(--text));
  text-decoration-color: currentColor;
}
.program-expect .program-inline-link:focus-visible{
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--ink-12);
}

.scenario-gallery--flash{
  animation: scenarioFlash 420ms ease;
}
@keyframes scenarioFlash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-1, #7c5cff) 38%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .scenario-gallery--flash{ animation: none; }
}

/* Details animation shell */
.program-expect .details-anim{ 
	overflow:hidden; 
	height:0; 
	transition: height .15s cubic-bezier(.2,0,.2,1); will-change: height; 
 }

.reduce-motion .program-expect .details-anim{ transition:none !important; }

/* Shift padding to hosts; keep anim content box tight */
.program-expect .phase-body,
.program-expect .faq .faq-a{ padding:0 !important; }
.program-expect .phase-item,
.program-expect .faq .faq-item{ padding:0 12px 12px 12px; }
.program-expect .phase-item:not([open]),
.program-expect .faq .faq-item:not([open]){ padding-bottom:0; }

/* Expect TOC chips — gradient focus ring */
.expect-toc{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 12px; }
.expect-toc a{
  display:inline-block; padding:6px 10px;
  border:1px solid var(--border); border-radius:999px;
  background: var(--surface-1); color: var(--text);
  text-decoration:none; line-height:1; font-weight:600;
  transition: background .3s ease, border-color .3s ease, box-shadow .18s ease, transform .18s ease;
}
.expect-toc a:focus-visible{
  outline:none; border-color:transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    var(--brand-gradient) border-box;
  border:1.5px solid transparent;
  transform: translateY(-1px); box-shadow: 0 4px 12px var(--ink-12);
}

/* ========================================================================== */
/*  WEEK SELECTOR (Month/Week dropdown on this page)                           */
/*  - Gradient focus ring to match Calendar page                               */
/* ========================================================================== */

.weeks-tools{ display:flex; gap:8px; align-items:center; margin:8px 0; }
.weeks-tools select{
  padding:6px 10px; border-radius:8px;
  background: var(--surface-1); color: var(--text);
  border:1px solid var(--border);
  transition: background .30s ease, border-color .30s ease, box-shadow .18s ease, transform .18s ease;
  will-change: transform;
}
.weeks-tools select:focus,
.weeks-tools select:focus-visible{
  outline:none; border-color:transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    var(--brand-gradient) border-box;
  border:1.5px solid transparent;
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 4px 12px var(--ink-12);
}

/* ========================================================================== */
/*  WEEK “FLASH” ANIMATION (jump anchor) — recolored to brand orange          */
/* ========================================================================== */

.week-flash{ animation: wf .9s ease-out 1; }
@keyframes wf{
  0%   { box-shadow: 0 0 0 0 var(--glow-strong); }
  60%  { box-shadow: 0 0 0 8px var(--glow-soft); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* ========================================================================== */
/*  DEVICE MOCKUPS                                                             */
/* ========================================================================== */

.mockups-panel{ display:grid; gap:1rem; }
.device-switch{
  display:inline-flex; border:1px solid var(--ink-10); border-radius:.5rem; overflow:hidden;
}
.device-switch [role="tab"]{
  padding:.5rem .75rem; font:inherit; background:transparent; border:0; cursor:pointer;
}
.device-switch [role="tab"][aria-selected="true"]{ outline:none; background: var(--ink-06); }

.mockup-figure{ margin:0; display:grid; gap:.5rem; justify-items:center; }
.mockup-viewport{ width:100%; display:grid; justify-items:center; }
.mockup-viewport svg{ display:block; width:min(100%, clamp(16rem, 70vw, 28rem)); height:auto; }
.mockup-viewport svg[data-kind="tablet"]{ width:min(100%, clamp(18rem, 78vw, 32rem)); }
.mockup-viewport svg[data-kind="laptop"]{ width:min(100%, clamp(20rem, 90vw, 48rem)); }
.mockup-caption{ text-align:center; font-size:.95rem; opacity:.85; }
.mockup-stepper{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.mockup-stepper button{ padding:.4rem .6rem; border:1px solid var(--ink-10); background:transparent; border-radius:.375rem; cursor:pointer; }
.mockup-stepper button[aria-pressed="true"]{ background: var(--ink-06); }

/* Simple grid variant */
.mockups-simple{ display:grid; gap:1rem; justify-items:center; }
.mockup-card{ margin:0; display:grid; gap:.5rem; justify-items:center; }
.mockup-viewport svg[data-kind="phone"]{ width:min(100%, clamp(14rem, 62vw, 22rem)); }
.mockup-viewport svg[data-kind="laptop"]{ width:min(100%, clamp(20rem, 88vw, 40rem)); }

/* Fan layout (all breakpoints) */
.mockups-fan{ position:relative; min-height: clamp(20rem, 48vw, 42rem); } /* tiny guard so fan never collapses */
.mockups-fan .mockup-card{
  position:absolute; top:50%; left:50%;
  --c: calc((var(--n) - 1) / 2);
  --offset: calc(var(--i) - var(--c));
  --spread: clamp(3rem, 10vw, 12rem);
  z-index: calc(10 + var(--i));
  transform: translate(calc(-50% + var(--offset) * var(--spread)), -50%) rotate(calc(var(--offset) * 6deg));
  transition: transform .25s ease, box-shadow .25s ease, z-index .05s linear;
  will-change: transform;
}
.mockups-fan .mockup-card:focus-within,
.mockups-fan .mockup-card:hover{
  transform: translate(calc(-50% + var(--offset) * var(--spread)), -50%) rotate(0deg) scale(1.03);
  z-index:999; box-shadow: 0 10px 24px var(--ink-15);
}
.mockups-fan .mockup-viewport svg[data-kind="phone"] { width:min(100%, clamp(14rem, 62vw, 22rem)); }
.mockups-fan .mockup-viewport svg[data-kind="tablet"]{ width:min(100%, clamp(16rem, 70vw, 28rem)); }
.mockups-fan .mockup-viewport svg[data-kind="laptop"]{ width:min(100%, clamp(20rem, 88vw, 40rem)); }

/* Compact breakpoints */
@media (max-width: 480px){
  .device-switch{ width:100%; justify-content:space-between; }
  .mockup-caption{ font-size:.9rem; }
  .mockups-fan{ min-height: clamp(18rem, 62vw, 28rem); }
  .mockups-fan .mockup-card{ --spread: clamp(2.25rem, 9vw, 5rem); }
}
@media (max-width: 600px){
  .mockups-fan{ min-height: clamp(19rem, 58vw, 32rem); }
  .mockups-fan .mockup-card{ --spread: clamp(2.75rem, 10vw, 7rem); }
}
@media (max-width: 768px){
  .mockups-panel{ gap:.75rem; }
}
@media (min-width: 769px){
  .mockups-fan{ min-height: clamp(22rem, 36vw, 42rem); }
  .mockups-fan .mockup-card{ --spread: clamp(6rem, 12vw, 16rem); }
  .mockups-panel{ grid-template-columns:1fr; justify-items:center; }
  .mockups-simple{ grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); align-items:start; }
}

/* ========================================================================== */
/*  FOCUS CHIPS                                                                */
/* ========================================================================== */

.focus-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.focus-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border);
  background: var(--surface-1); color: var(--text);
  border-radius:999px; padding:4px 8px; font-weight:600; line-height:1;
}
.focus-chip .chip-ico{ width:16px; height:16px; display:block; }

/* ========================================================================== */
/*  FLOATING ADD-TO-BAG FAB                                                    */
/* ========================================================================== */

#purchase-fab-wrap{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:1005; display:flex; align-items:center; justify-content:flex-end; gap:10px;
  transform: translateY(120%); opacity:0; pointer-events:none;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 160ms linear;
}
#purchase-fab-wrap.is-visible{ transform: translateY(0); opacity:1; pointer-events:auto; }

#purchase-fab{
  appearance:none;
  border:1px solid color-mix(in srgb, var(--border) 28%, transparent);
  border-radius:999px; padding:12px 16px; font-weight:700; font-size:15px; cursor:pointer; white-space:nowrap;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  color: var(--text);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 8px 20px var(--ink-22), 0 2px 8px var(--ink-14);
  transition: transform 100ms ease, box-shadow 180ms ease, opacity 120ms linear, background 160ms ease;
}
#purchase-fab:hover{ transform: translateY(-1px); }
#purchase-fab:active{ transform: translateY(0); box-shadow: 0 4px 12px var(--ink-22); }
#purchase-fab:hover{ background: color-mix(in srgb, var(--panel) 66%, transparent); }
#purchase-fab:disabled{ opacity:.6; cursor:not-allowed; }

@media (prefers-color-scheme: light){
  #purchase-fab{
    background: color-mix(in srgb, var(--white) 78%, transparent);
    color:#111;
    border-color: color-mix(in srgb, var(--border) 12%, transparent);
  }
  #purchase-fab:hover{ background: color-mix(in srgb, var(--white) 84%, transparent); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #purchase-fab{ background: color-mix(in srgb, var(--panel) 82%, transparent); }
  @media (prefers-color-scheme: light){
    #purchase-fab{ background: color-mix(in srgb, var(--white) 92%, transparent); }
  }
}

#purchase-fab svg{ color: currentColor; fill: currentColor; stroke: currentColor; }
#purchase-fab .fab-label{ display:inline-block; line-height:1; }

#purchase-bubble{
  width: min(100%, clamp(12rem, 46vw, 20rem));
  display:inline-flex; align-items:baseline; gap:6px; padding:8px 12px; border-radius:999px;
  background: color-mix(in srgb, var(--panel) 84%, transparent); color: var(--text);
  border:1px solid color-mix(in srgb, var(--border) 30%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  font-size:13px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 20px var(--ink-22), inset 0 0 0 1px rgba(255,255,255,.04);
  opacity:1; transform: translateX(0); transition: opacity 180ms ease, transform 220ms ease, width 200ms ease;
}
#purchase-bubble .dot{ opacity:.6; }
#pb-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; order:3; }
#pb-price{ font-weight:700; opacity:.9; order:1; }
#purchase-bubble .dot{ order:2; }
#purchase-bubble.is-hidden{ opacity:0; transform: translateX(6px); pointer-events:none; }

@media (prefers-color-scheme: light){
  #purchase-bubble{
    background: color-mix(in srgb, var(--white) 90%, transparent);
    color:#111;
    border-color: rgba(0,0,0,.08);
  }
}

@media (hover: none) and (pointer: coarse){
  #purchase-fab-wrap{
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  #purchase-fab{
    touch-action: manipulation;
  }

  #purchase-bubble{
    width: 98%;
    max-width: 11.5rem;
    box-sizing: border-box;
    padding: 6px 10px;
    gap: 4px;
    pointer-events: none;
  }

  #purchase-bubble .dot,
  #pb-name{
    max-width: 0;
    opacity: 0;
    margin: 0;
    transition:
      max-width 260ms cubic-bezier(.22,.8,.24,1),
      opacity 200ms ease,
      margin-left 220ms ease;
  }

  #purchase-fab-wrap:focus-within #purchase-bubble,
  #purchase-fab-wrap:active #purchase-bubble,
  #purchase-fab:active + #purchase-bubble,
  #purchase-fab:focus + #purchase-bubble,
  #purchase-fab-wrap.is-peek #purchase-bubble{
    width: 98%;
    max-width: 20rem;
  }

  #purchase-fab-wrap:focus-within #purchase-bubble .dot,
  #purchase-fab-wrap:active #purchase-bubble .dot,
  #purchase-fab:active + #purchase-bubble .dot,
  #purchase-fab:focus + #purchase-bubble .dot,
  #purchase-fab-wrap.is-peek #purchase-bubble .dot,
  #purchase-fab-wrap:focus-within #pb-name,
  #purchase-fab-wrap:active #pb-name,
  #purchase-fab:active + #purchase-bubble #pb-name,
  #purchase-fab:focus + #purchase-bubble #pb-name,
  #purchase-fab-wrap.is-peek #pb-name{
    max-width: 14rem;
    opacity: .9;
    margin-left: 6px;
  }
}

@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce){
  #purchase-bubble,
  #purchase-bubble .dot,
  #pb-name{
    transition: none !important;
  }
}

@media print{ #purchase-fab-wrap{ display:none !important; } }

/* Hide any legacy purchase UI */
#purchase-bar, #purchase-link, #purchase-link-bottom{ display:none !important; }

/* ========================================================================== */
/*  MISC / CLEANUP                                                             */
/* ========================================================================== */

/* NSCA tags */
.nsca-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.nsca-badge{
  padding:4px 8px; border:1px solid var(--border);
  border-radius:999px; background: var(--surface-3);
  color: var(--badge-blue); font-size:12px; font-weight:600;
}

/* High-contrast / forced colors for expect blocks */
.high-contrast .program-expect .phase-item,
.high-contrast .program-expect .faq .faq-item{
  background:#000; border-color:#fff;
}
@media (forced-colors: active){
  .program-expect .phase-controls .phase-toggle,
  .program-expect .faq-controls .faq-toggle{ border-color: CanvasText; }
}


/* ========================================================================== */
/*  PREMIUM ATHLETIC SURFACE OVERRIDES                                        */
/*  - Elevates hero, top meta, what-to-expect, trust, CTA, and FAB            */
/*  - Leaves scenario gallery and roadmap path direction intact                */
/* ========================================================================== */

.section-eyebrow{
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-orange);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .section-eyebrow{
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.section-lede{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.section-chip-rail{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.section-chip{
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 8%, transparent);
}

.section-chip--accent{
  border-color: color-mix(in srgb, var(--brand-orange) 42%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-orange) 14%, transparent);
}

.program-hero,
.program-meta,
.program-expect,
.program-trust,
.program-final-cta{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  box-shadow: 0 20px 44px var(--ink-12);
}

.program-hero::before,
.program-meta::before,
.program-expect::before,
.program-trust::before,
.program-final-cta::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-orange) 58%, transparent), transparent);
  pointer-events: none;
}

.program-hero{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-orange) 18%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 96%, transparent), color-mix(in srgb, var(--surface-2) 94%, transparent));
  padding: 22px;
  margin-bottom: 18px;
}

.program-hero__copy{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.program-hero h1{
  margin: 0;
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.program-tagline{
  max-width: 52rem;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.program-meta{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-orange) 13%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 96%, transparent), color-mix(in srgb, var(--surface-2) 94%, transparent));
  padding: 18px;
}

.program-meta__shell,
.program-expect__intro,
.program-trust__intro,
.program-final-cta__shell{
  position: relative;
  z-index: 1;
}

.program-meta__shell{
  display: grid;
  gap: 18px;
}

.program-meta__intro,
.program-expect__intro,
.program-trust__intro,
.program-final-cta__shell{
  display: grid;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.program-meta__intro-copy,
.program-expect__intro-copy,
.program-trust__intro-copy,
.program-final-cta__copy{
  display: grid;
  gap: 10px;
}

.program-meta__intro h2,
.program-expect__intro h2,
.program-trust__intro h2,
.program-final-cta__copy h2{
  margin: 0;
  color: var(--text);
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -.04em;
}

.badges{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.badges .meta-card{
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent),
    0 14px 28px var(--ink-10);
}

.badges .meta-card::after{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-orange) 42%, transparent), transparent 72%);
  pointer-events: none;
}

.badges .meta-card--hero{
  border-color: color-mix(in srgb, var(--brand-orange) 34%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 8%, transparent),
    0 18px 34px var(--ink-12),
    0 0 0 1px color-mix(in srgb, var(--brand-orange) 10%, transparent);
}

.badges .meta-label{
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.badges .meta-value{
  display: block;
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.badges .meta-copy{
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-align: left;
  overflow-wrap: anywhere;
}

.badges .meta-value--xl{
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.05em;
}

.program-meta .meta-duration-value{
  font-size: inherit;
  line-height: inherit;
}

.program-meta .meta-duration-submeta{
  gap: 6px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.program-meta .meta-duration-submeta__label,
.program-meta .meta-focus-kicker{
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.program-meta .meta-duration-submeta__value{
  font-size: 15px;
  font-weight: 800;
}

.program-meta .meta-location-value{
  font-size: inherit;
  line-height: inherit;
}

.program-meta .meta-location-submeta{
  gap: 6px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.program-meta .meta-location-submeta__label{
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.program-meta .meta-location-submeta__value{
  font-size: 15px;
  font-weight: 800;
}

.program-meta .meta-focus-stack{
  gap: 12px;
}

.program-meta .meta-focus-row{
  gap: 12px;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: start;
}

.program-meta .meta-pill-group,
.program-meta .focus-chips{
  gap: 10px;
}

.program-meta .meta-pill,
.program-meta .focus-chip{
  min-height: 2rem;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

.program-meta .meta-focus-row.is-primary .focus-chip,
.program-meta .meta-card[data-meta-card="primary-results"] .meta-pill {
  border-color: color-mix(in srgb, var(--brand-orange) 34%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-orange) 10%, transparent);
}

.program-meta .meta-pill--result::before{
  background: var(--result-dot-bg, var(--brand-orange));
}

.program-meta{
  --execution-dot: #818CF8;
}

.program-meta .meta-card[data-meta-card="execution-standard"] .meta-pill::before{
  background: var(--execution-dot);
}


.program-expect{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-orange) 12%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 96%, transparent), color-mix(in srgb, var(--surface-2) 94%, transparent));
  padding: 18px;
}

.program-expect .expect-steps--fallback{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 16px 0 0;
  padding: 16px 18px 16px 36px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

.program-expect .expect-dynamic{
  margin-top: 18px;
  gap: 14px;
}

.program-expect .expect-promise{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-self: stretch;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--brand-orange) 30%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 8%, transparent),
    0 12px 26px var(--ink-10);
  color: var(--text);
  line-height: 1.75;
  text-align: left;
}

.program-expect h3{
  margin: 10px 0 2px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -.02em;
}

.program-expect .expect-dynamic > ul:not(.stack-list):not(.workout){
  margin: 0;
  padding: 16px 18px 16px 36px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

.program-expect .expect-dynamic > ul:not(.stack-list):not(.workout) li{
  margin: 0 0 10px;
  line-height: 1.7;
}

.program-expect .expect-dynamic > ul:not(.stack-list):not(.workout) li:last-child{
  margin-bottom: 0;
}

.program-expect .info-grid,
.program-expect .audience-grid,
.program-expect .result-pills{
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.program-expect .expect-card{
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
  padding: 16px;
}

.program-expect .expect-card__title{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.program-expect .stack-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.program-expect .stack-list li{
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  line-height: 1.65;
}

.program-expect .stack-list li:first-child{
  padding-top: 0;
  border-top: 0;
}

.program-expect .expect-list--outcomes{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

.program-expect .result-pill{
  min-height: 2rem;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-orange) 30%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

.program-expect .facts{
  gap: 10px;
}

.program-expect .facts > div{
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
}

.program-expect .expect-toc{
  gap: 10px;
  margin: 0;
}

.program-expect .expect-toc a{
  min-height: 2rem;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

.program-expect .expect-disclosure,
.program-expect .faq .faq-item{
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

.program-expect .expect-disclosure{
  padding: 0 16px 16px;
}

.program-expect .expect-disclosure:not([open]){
  padding-bottom: 0;
}

.program-expect .expect-disclosure__summary,
.program-expect .faq .faq-summary{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.program-expect .faq-controls,
.program-expect .phase-controls,
.weeks-tools{
  gap: 10px;
}

.program-expect .faq-controls,
.program-expect .phase-controls{
  display: flex;
  flex-wrap: wrap;
  margin: 6px 0;
}

.program-expect .faq-controls .faq-toggle,
.program-expect .phase-controls .phase-toggle,
.weeks-tools select{
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

.program-expect .expect-toc a,
.program-expect .faq-controls .faq-toggle,
.program-expect .phase-controls .phase-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--surface-1) 96%, transparent), color-mix(in srgb, var(--surface-1) 96%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--border) 88%, transparent), color-mix(in srgb, var(--border) 70%, transparent)) border-box;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 8%, transparent),
    0 6px 16px color-mix(in srgb, var(--black) 10%, transparent);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform .18s ease,
    box-shadow .24s ease,
    background .24s ease,
    color .24s ease;
}

.program-expect .expect-toc a:hover,
.program-expect .faq-controls .faq-toggle:hover,
.program-expect .phase-controls .phase-toggle:hover{
  transform: translateY(-1px);
  background:
    linear-gradient(color-mix(in srgb, var(--surface-1) 97%, transparent), color-mix(in srgb, var(--surface-1) 97%, transparent)) padding-box,
    var(--brand-gradient) border-box;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent),
    0 12px 24px var(--ink-10);
}

.program-expect .expect-toc a:focus-visible,
.program-expect .faq-controls .faq-toggle:focus-visible,
.program-expect .phase-controls .phase-toggle:focus-visible{
  outline: none;
  transform: translateY(-1px);
  background:
    linear-gradient(color-mix(in srgb, var(--surface-1) 97%, transparent), color-mix(in srgb, var(--surface-1) 97%, transparent)) padding-box,
    var(--brand-gradient) border-box;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand-orange) 18%, transparent),
    0 12px 24px var(--ink-10);
}

.program-expect .weeks{
  gap: 12px;
  margin-top: 12px;
}

.program-expect .week{
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.program-expect .week__title,
.program-expect .sampleday__title{
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.program-expect .week__meta,
.program-expect .week__note,
.program-expect .sampleday__structure{
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.program-expect .workout{
  margin-top: 12px;
  padding-left: 20px;
}

.program-expect .faq .faq-item{
  padding: 0 16px 16px;
}

.program-expect .faq .faq-item:not([open]){
  padding-bottom: 0;
}

.program-expect .faq .faq-a{
  color: var(--muted);
  line-height: 1.75;
}

.program-trust{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-orange) 12%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 96%, transparent), color-mix(in srgb, var(--surface-2) 94%, transparent));
  padding: 18px;
  margin: 16px 0;
  border-left: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}

.trust-list{
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.trust-item{
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

.trust-item svg{
  width: 38px;
  height: 38px;
  margin-top: 0;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--surface-2) 94%, transparent), color-mix(in srgb, var(--surface-2) 94%, transparent)) padding-box,
    var(--brand-gradient) border-box;
  color: var(--muted);
}

.trust-label{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.trust-label strong{
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 15px;
}

.program-final-cta{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-orange) 16%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 96%, transparent), color-mix(in srgb, var(--surface-2) 94%, transparent));
  padding: 18px;
  margin: 16px 0 0;
  text-align: left;
}

.program-final-cta__shell{
  border-bottom: 0;
}

.program-final-cta__actions{
  display: grid;
  gap: 10px;
  align-content: start;
}

#purchase-link-bottom{
  min-height: 52px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--brand-gradient);
  color: var(--white);
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 14px 28px var(--ink-15);
}

#purchase-link-bottom:hover,
#purchase-link-bottom:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px var(--ink-15);
}

.program-final-cta__ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(
      color-mix(in srgb, var(--surface-2) 94%, transparent),
      color-mix(in srgb, var(--surface-2) 94%, transparent)
    ) padding-box,
    linear-gradient(
      130deg,
      color-mix(in srgb, var(--brand-orange) 34%, transparent),
      color-mix(in srgb, var(--brand-red) 24%, transparent)
    ) border-box;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-orange) 10%, transparent);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.program-final-cta__ghost:hover,
.program-final-cta__ghost:focus-visible{
  transform: translateY(-1px);

	
}

.program-final-cta__price{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

#purchase-fab{
  border-color: color-mix(in srgb, var(--brand-orange) 24%, transparent);
  background:
    linear-gradient(color-mix(in srgb, var(--surface-1) 94%, transparent), color-mix(in srgb, var(--surface-1) 94%, transparent)) padding-box,
    linear-gradient(130deg, color-mix(in srgb, var(--brand-orange) 42%, transparent), color-mix(in srgb, var(--brand-red) 28%, transparent)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 14px 28px var(--ink-22), 0 0 0 1px color-mix(in srgb, var(--brand-orange) 12%, transparent);
}

#purchase-bubble{
  border-color: color-mix(in srgb, var(--brand-orange) 18%, transparent);
}



@media (max-width: 480px){
  .program-hero,
  .program-meta,
  .program-expect,
  .program-trust,
  .program-final-cta,
  .program-meta__shell,
  .program-expect__intro,
  .program-trust__intro,
  .program-final-cta__shell,
  .badges,
  .section-chip-rail,
  .program-expect .expect-dynamic,
  .trust-list{


  }

  .program-hero,
  .program-meta,
  .program-expect,
  .program-trust,
  .program-final-cta{


  }

  .program-hero h1,
  .program-meta__intro h2,
  .program-expect__intro h2,
  .program-trust__intro h2,
  .program-final-cta__copy h2{
    font-size: 26px;
  }

  .program-meta .meta-focus-row,
  .program-expect .facts > div,
  .trust-item,
  .program-final-cta__actions{
    grid-template-columns: 1fr;
  }



  .trust-item svg{
    width: 34px;
    height: 34px;
  }

  .program-expect .expect-disclosure,
  .program-expect .faq .faq-item,
  .program-expect .expect-steps--fallback,
  .badges .meta-card{


  }
}

@media (max-width: 600px){
  .program-meta__intro,
  .program-expect__intro,
  .program-trust__intro,
  .program-final-cta__shell{
    gap: 14px;
  }

  .program-final-cta__ghost,
  #purchase-link-bottom{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

.trust-item{
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
	
    }
  }


@media (max-width: 768px){
  .program-hero,
  .program-meta,
  .program-expect,
  .program-trust,
  .program-final-cta,
  .program-meta__shell,
  .program-expect__intro,
  .program-trust__intro,
  .program-final-cta__shell,
  .badges,
  .section-chip-rail,
  .program-expect .expect-dynamic,
  .trust-list{


  }

  .program-final-cta__shell,
  .program-expect__intro,
  .program-meta__intro{
    grid-template-columns: 1fr;
  }

  .program-meta .meta-focus-row,
  .program-expect .facts > div{
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px){
  .program-meta__intro,
  .program-expect__intro,
  .program-final-cta__shell{
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr);
    align-items: end;
  }

  .badges{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .badges .meta-card--metric{
    grid-column: span 4;
  }

  .badges .meta-card--span-2{
    grid-column: span 6;
  }

  .trust-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-final-cta__actions{
    justify-items: end;
    align-self: stretch;
  }
}

@media (prefers-color-scheme: dark){
  .program-hero,
  .program-meta,
  .program-expect,
  .program-trust,
  .program-final-cta{
    box-shadow: 0 24px 48px var(--ink-15);
  }
}


/* ========================================================================== */
/*  PROGRAM ROADMAP ACCORDION REFRESH                                         */
/*  - Upgrades only the roadmap controls + accordion surface                   */
/*  - Leaves mesocycle path interactions and structure intact                  */
/* ========================================================================== */

.program-expect .phase-controls{
  margin: 14px 0 0;
}

.program-expect .phase-controls__shell{
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-orange) 14%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 96%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent),
    0 18px 34px var(--ink-10);
}

.program-expect .phase-controls__meta{
  display: grid;
  gap: 10px;
  min-width: 0;
}

.program-expect .phase-controls__eyebrow{
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-orange);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .program-expect .phase-controls__eyebrow{
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.program-expect .phase-controls__title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.program-expect .phase-controls__title{
  margin: 0;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.program-expect .phase-controls__copy{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.program-expect .phase-controls__status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-orange) 34%, transparent);
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-orange) 12%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}

.program-expect .phase-controls__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.program-expect .phase-controls .phase-toggle{
  position: relative;
  min-width: 0;
  min-height: 46px;
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .01em;
}

.program-expect .phase-controls .phase-toggle__label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.program-expect .phase-controls .phase-toggle--expand{
  background:
    linear-gradient(color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-1) 98%, transparent)) padding-box,
    var(--brand-gradient) border-box;
  border: 1px solid transparent;
}

.program-expect .phase-controls .phase-toggle--expand:hover,
.program-expect .phase-controls .phase-toggle--expand:focus-visible{
  background:
    linear-gradient(color-mix(in srgb, var(--surface-1) 99%, transparent), color-mix(in srgb, var(--surface-1) 99%, transparent)) padding-box,
    var(--brand-gradient) border-box;
}

.program-expect .phase-controls .phase-toggle[disabled]{
  opacity: .54;
  cursor: not-allowed;
  transform: none !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 6%, transparent),
    0 2px 8px color-mix(in srgb, var(--black) 5%, transparent);
}

.program-expect .phase-controls .phase-toggle[disabled]:hover,
.program-expect .phase-controls .phase-toggle[disabled]:focus-visible{
  background:
    linear-gradient(color-mix(in srgb, var(--surface-1) 96%, transparent), color-mix(in srgb, var(--surface-1) 96%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--border) 88%, transparent), color-mix(in srgb, var(--border) 70%, transparent)) border-box;
}

.program-expect .phase-accordion{
  gap: 14px;
  margin-top: 14px;
}

.program-expect .phase-item{
  position: relative;
  padding: 0 16px 16px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 96%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 8%, transparent),
    0 16px 32px color-mix(in srgb, var(--black) 8%, transparent);
}

.program-expect .phase-item::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-orange) 58%, transparent), transparent);
  pointer-events: none;
}

.program-expect .phase-item:not([open]){
  padding-bottom: 0;
}

.program-expect .phase-summary{
  gap: 14px;
  align-items: center;
  padding: 16px 0;
}

.program-expect .phase-summary__lead{
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.program-expect .phase-kicker{
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-orange);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .program-expect .phase-kicker{
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.program-expect .phase-title{
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.program-expect .phase-weeks{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 8%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.program-expect .phase-weeks--fallback{
  border-style: dashed;
}

.program-expect .phase-item[open] .phase-summary{
  margin-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
}

.program-expect .phase-item .chev{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

.program-expect .phase-item[open] .chev{
  border-color: color-mix(in srgb, var(--brand-orange) 34%, transparent);
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
}

.program-expect .phase-body{
  display: grid;
  gap: 10px;
  text-align: left;
  justify-items: stretch;
}

.program-expect .phase-body > p{
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  color: var(--muted);
  line-height: 1.7;
  text-align: left;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

.program-expect .phase-body > p strong{
  color: var(--text);
}

.program-expect .phase-body > p.phase-copy{
  color: var(--text);
  font-weight: 600;
}

.program-expect .phase-summary:hover .phase-title,
.program-expect .phase-summary:focus-visible .phase-title{
  color: var(--text);
}

@media (max-width: 480px){
  .program-expect .phase-controls,
  .program-expect .phase-accordion,
  .program-expect .phase-controls__shell,
  .program-expect .phase-item{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  .program-expect .phase-controls__shell,
  .program-expect .phase-summary{
    padding-left: 4px;
    padding-right: 4px;
  }

  .program-expect .phase-controls__title-row,
  .program-expect .phase-summary{
    align-items: flex-start;
  }

  .program-expect .phase-summary{
    flex-wrap: wrap;
  }

  .program-expect .phase-controls__actions,
  .program-expect .phase-controls .phase-toggle{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 600px){
  .program-expect .phase-controls__actions{
    flex-direction: column;
  }

  .program-expect .phase-controls .phase-toggle{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 768px){
  .program-expect .phase-controls,
  .program-expect .phase-accordion,
  .program-expect .phase-controls__shell,
  .program-expect .phase-item{
    width: 101%;
    max-width: 101%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  .program-expect .phase-summary{
    align-items: flex-start;
  }
}

@media (min-width: 769px){
  .program-expect .phase-controls__shell{
    grid-template-columns: minmax(0, 1.15fr) auto;
    align-items: end;
  }

  .program-expect .phase-controls__actions{
    justify-content: flex-end;
  }
}