/* apex-progress — "How Apex builds instead" scroll-scrubbed process stepper.
   The component is a tall scroll track; the panel inside sticks while the user
   scrolls, and apex-progress.js maps scroll depth onto four segment fills.
   Reads global tokens from style.css (--obsidian, --graphite, --steel, --fog,
   --mist, --cloud, --paper, --snow, --forest, --ease).
   Without JS (no .is-live) everything renders filled and all four phase
   explanations are laid out in a static grid — nothing is ever pre-hidden. */

.apex-progress{position:relative;height:230vh;margin-top:4px}
.apex-progress__sticky{position:sticky;top:clamp(64px,12vh,140px)}
.apex-progress__title{max-width:360px;color:var(--obsidian);font-size:clamp(28px,5.8vw,32px);font-weight:650;line-height:1.08;letter-spacing:-.03em}

/* stepper — segment widths are duration-weighted via --w (flex-grow) */
.apex-progress__steps{display:flex;gap:12px;margin-top:26px}
.apex-progress__step{flex:var(--w,1) 1 0;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;border:0;background:none;margin:0;padding:0;cursor:pointer;text-align:center;font:inherit}
.apex-progress__step:focus-visible{outline:3px solid rgba(8,65,46,.28);outline-offset:4px;border-radius:8px}
.apex-progress__name{color:var(--steel);font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;max-width:100%;transition:color .4s ease}
.apex-progress__step[aria-current="step"] .apex-progress__name{color:var(--obsidian)}
.apex-progress__node{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--mist);transition:background .4s ease,transform .45s var(--ease)}
.apex-progress__step[aria-current="step"] .apex-progress__node{background:var(--obsidian);transform:scale(1.2)}
.apex-progress__step.is-done .apex-progress__node{background:var(--forest);transform:scale(1)}
.apex-progress__meter{width:100%;height:6px;border-radius:99px;background:var(--cloud);overflow:hidden;margin-top:2px}
.apex-progress__fill{display:block;width:100%;height:100%;border-radius:inherit;background:var(--graphite);transform-origin:left;transition:background .4s ease}
.apex-progress__step.is-done .apex-progress__fill{background:var(--forest)}
@media(hover:hover){.apex-progress__step:hover .apex-progress__name{color:var(--obsidian)}}

/* phase explanations */
.apex-progress__details{position:relative;display:grid;gap:26px;margin-top:26px}
.apex-progress__detail{display:grid;grid-template-columns:1fr auto;align-items:start;gap:24px}
.apex-progress__lead{margin:0;color:var(--steel);font-size:14px;font-weight:450;line-height:1.55;letter-spacing:-.01em;max-width:590px}
.apex-progress__num{color:var(--cloud);font-size:clamp(56px,7vw,92px);font-weight:700;letter-spacing:-.05em;line-height:.8;user-select:none}

/* live (JS running): details stack in one cell and crossfade with the active phase */
.apex-progress.is-live .apex-progress__details{gap:0}
.apex-progress.is-live .apex-progress__detail{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s var(--ease);pointer-events:none}
.apex-progress.is-live .apex-progress__detail.is-active{opacity:1;transform:none;pointer-events:auto}

@media(prefers-reduced-motion:reduce){
  .apex-progress.is-live .apex-progress__detail{transition:opacity .3s ease;transform:none}
}

/* responsive */
@media(min-width:900px){
  .apex-progress{grid-column:1/-1;margin-top:10px}
  .apex-progress__title{font-size:36px}
  .apex-progress__steps{gap:16px;margin-top:32px}
  .apex-progress__name{font-size:15px}
  .apex-progress__meter{height:7px}
  .apex-progress__details{margin-top:34px}
  .apex-progress__lead{font-size:16px}
}
@media(max-width:899px){.apex-progress{height:210vh}}
@media(max-width:639px){
  .apex-progress__num{font-size:44px}
  .apex-progress__lead{font-size:14px}
}
@media(max-width:479px){
  .apex-progress__steps{gap:8px}
  .apex-progress__name{font-size:10.5px}
  .apex-progress__node{width:6px;height:6px}
  .apex-progress__meter{height:5px}
  .apex-progress__num{display:none}
  .apex-progress__detail{grid-template-columns:1fr}
}