/* How it works: ember head with count-up facts, a pinned phone that changes screen as the steps scroll past,
   then the belt ladder, ways to train, the weekly league and seasons. */
.top{--bg:#ff4f12;--on:#170b06;--inv:#fff8ee}
.facts4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:64px;border-top:2px solid var(--ink)}
.facts4 div{padding:22px 20px 0 0;min-width:0}
.facts4 div+div{padding-left:20px;border-left:1px solid rgba(23,11,6,.25)}
.facts4 b{display:block;font:400 clamp(40px,5.4vw,80px)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.facts4 span{display:block;margin-top:10px;font-weight:700;font-size:14px}

/* Pinned phone story */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;margin-top:40px}
.pin{position:sticky;top:10vh;height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.pin .phone{width:min(320px,34vh);rotate:-3deg}
.pin .phone img{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .5s var(--e),transform .7s var(--out)}
.pin .phone img.on{opacity:1;transform:none}
.dots{display:flex;align-items:center;gap:8px}
.dots i{width:10px;height:10px;border-radius:99px;background:var(--line);transition:width .4s var(--out),background-color .3s}
.dots i.on{width:34px;background:var(--ember)}
.dots span{margin-left:10px;font:900 13px var(--body);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.steps2{list-style:none;margin:0;padding:0}
.steps2 li{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding-block:40px;opacity:.28;transition:opacity .5s var(--e)}
.steps2 li.on{opacity:1}
.steps2 .n{font:400 clamp(64px,8vw,120px)/.85 var(--display);letter-spacing:-.04em;color:var(--ember)}
.steps2 h3{font-size:clamp(30px,3.4vw,48px);line-height:1;margin:22px 0 16px}
.steps2 p{margin:0;font-size:18px;color:var(--ink2);max-width:30rem}
.steps2 .tag{display:inline-flex;align-self:flex-start;margin-top:22px;min-height:34px;align-items:center;padding:0 14px;border-radius:99px;background:var(--ink);color:var(--cream);font-weight:700;font-size:14px}
.steps2 .inl{display:none}

/* Belt ladder */
.ladder{margin-top:72px}
.ladder ol{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0;align-items:end}
.ladder li{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.ladder .face{width:100%;max-width:64px;aspect-ratio:1;border-radius:50%;background:var(--c);overflow:hidden;box-shadow:0 0 0 3px var(--ink)}
.ladder .face img{display:block;width:100%;height:100%}
.ladder .seg2{width:100%;height:18px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,248,238,.22)}
.ladder .lv{font:700 11px var(--body);letter-spacing:.06em;color:rgba(255,248,238,.6);white-space:nowrap}
.js .ladder li .face{transform:translateY(24px) scale(.6);opacity:0;transition:transform .6s var(--spring) var(--d,0s),opacity .3s var(--e) var(--d,0s)}
.js .ladder li .seg2{transform:scaleX(0);transform-origin:left;transition:transform .35s var(--out) var(--d,0s)}
.js .ladder.is-in li .face{transform:none;opacity:1}
.js .ladder.is-in li .seg2{transform:none}
.ladder .cap{display:flex;justify-content:space-between;gap:16px;margin-top:28px;flex-wrap:wrap}

/* Ways to train */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:64px}
.way{border:2px solid var(--ink);border-radius:32px;padding:32px;display:flex;flex-direction:column;gap:14px;min-width:0;background:var(--paper)}
.way h3{font-size:26px;line-height:1.05}
.way p{margin:0;color:var(--ink2);font-size:16px}
.way .chips{margin-top:8px}
.way .chips li{min-height:36px;font-size:14px;padding:0 14px}
.way.hot{background:var(--ember);border-color:var(--ember)}
.way.hot p{color:var(--ink)}

/* League week */
.wk{position:relative;margin-top:56px}
.wk::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:3px;background:rgba(255,248,238,.16)}
.week2{position:relative;list-style:none;margin:0;padding:0 0 0 44px;display:grid;gap:44px;max-width:44rem}
.wk .rail{position:absolute;left:11px;top:8px;bottom:8px;width:3px;background:var(--ember);transform-origin:top;transform:scaleY(var(--p,0))}
.week2 li{position:relative}
.week2 li::before{content:"";position:absolute;left:-44px;top:4px;width:25px;height:25px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 3px var(--ember)}
.week2 b{display:block;font:400 clamp(24px,2.6vw,34px)/1.05 var(--display);margin-bottom:8px}
.week2 small{display:block;font:900 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin-bottom:8px}
.week2 p{margin:0;color:rgba(255,248,238,.75);max-width:34rem}

/* Season bar */
.sbar{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:5px;margin-top:56px}
.sbar i{height:44px;border-radius:8px;background:var(--line);position:relative;overflow:hidden}
.sbar i::after{content:"";position:absolute;inset:0;background:var(--ember);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--out) var(--d,0s)}
.sbar.is-in i::after{transform:none}
.sbar-cap{display:flex;justify-content:space-between;margin-top:14px;font-weight:700;font-size:14px;color:var(--muted)}

@media (max-width:900px){
  .ways{grid-template-columns:minmax(0,1fr)}
  .ladder ol{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:28px}
  .ladder .face{max-width:56px}
}
@media (max-width:759px){
  .facts4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .facts4 div:nth-child(3){padding-left:0;border-left:0}
  .story{grid-template-columns:minmax(0,1fr);gap:0}
  .pin{display:none}
  .steps2 li{min-height:0;opacity:1;padding-block:28px 40px}
  .steps2 .inl{display:block;width:min(240px,64vw,34svh);margin:28px 0 0;rotate:-2deg}
  .sbar{gap:3px}.sbar i{height:30px;border-radius:5px}
  .way{padding:24px;border-radius:24px}
}