.learn-shell{max-width:660px;margin:0 auto}.learn-shell h1{font-size:clamp(26px,5vw,38px);margin:10px 0 16px}.learn-shell .primary{width:100%;min-height:54px}.learn-shell .eyebrow{margin:0 0 6px}.welcome{text-align:center}.welcome video{height:42svh;object-fit:cover}.welcome h1{margin:24px 0}.next-card{border:1px solid var(--line);background:var(--card);border-radius:22px;padding:18px;margin-bottom:24px}.next-card>img{width:100%;height:220px;object-fit:cover;border-radius:14px}.next-icon{font-size:64px;text-align:center}.unit-zero{display:grid;grid-template-columns:1fr 1fr;gap:10px}.path-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:var(--card);border-radius:16px;padding:10px;margin:12px 0;color:var(--muted);text-decoration:none;min-width:0}.path-card>span:nth-last-child(2){flex:1}.path-card img{width:92px;height:102px;object-fit:cover;border-radius:10px;flex-shrink:0}.path-card small{font-size:12px}.path-card.next{border:2px solid var(--gold);color:var(--gold)}.path-card.done{border-color:#80a65d;color:#d3e6b7}.path-card.locked{filter:grayscale(1);opacity:.65;pointer-events:none}.path-icon{font-size:36px}.routine-path{margin-top:32px}.text-button{background:none;color:var(--muted);font-size:16px;text-decoration:underline;min-height:44px;padding:8px 12px}.step-screen{text-align:center}.feet-tile{margin:8px 0}.feet-tile p{font-size:15px;line-height:1.35;margin:8px}.feet-tile img,.feet-tile svg{max-height:125px;max-width:100%}.speed-picks{display:flex;gap:8px;justify-content:space-between;border:0;padding:10px 0;margin:0}.speed-picks label{display:flex;align-items:center;gap:6px;font-size:16px;min-height:44px}.speed-picks input{width:20px;min-height:20px;margin:0;accent-color:var(--gold)}.celebration{text-align:center}.medal{font-size:100px}.learn-shell img{max-width:100%}body[data-page='learn.step'] main,body[data-page='learn.run'] main{padding-top:12px}body[data-page='learn.step'] #main-nav,body[data-page='learn.run'] #main-nav{display:none}body[data-page='learn.step'] footer,body[data-page='learn.run'] footer{display:none}@media(max-width:600px){.step-screen h1{font-size:23px;line-height:1.2}body[data-page='learn.step'] header,body[data-page='learn.run'] header{padding:10px 16px}.unit-zero .path-card{font-size:15px;gap:7px}.learn-shell p{margin:12px 0}.path-card{font-size:16px}}

/* Step screen tile: one count picture + hand lines side by side. Routine page desktop rules must not leak in. */
.feet-tile .feet-desktop,.feet-tile .hands-circles{display:none!important}
.feet-tile .feet-phone{display:block!important}
.feet-tile .handfoot-panel>p{font-size:13px;margin:0 0 6px}
.feet-tile .handfoot-step:not([hidden]){display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:10px;align-items:center;text-align:left}
.feet-tile .feet-phone img{width:100%;max-height:150px;object-fit:contain}
.feet-tile .hand-lines{padding:6px 10px}
.feet-tile .hand-lines p{font-size:14px;line-height:1.3;margin:3px 0}

/* Step lesson: video first. Phone stacks title, video, button, feet. Desktop puts the video left and the rest right so 'I got it' shows without scrolling. */
.step-lesson{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media" "action" "feet";gap:6px}
.step-head{grid-area:head}.step-media{grid-area:media;min-width:0}.step-action{grid-area:action}.feet-tile{grid-area:feet}
.step-screen h1{margin:4px 0 6px}
.step-screen .player-wrap{--cap:calc(100vh - 340px)}
@supports (height:1svh){.step-screen .player-wrap{--cap:calc(100svh - 340px)}}
.step-screen .vid-stage video{max-height:none}
.step-action{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:6px}
.step-action form{width:100%}
@media(min-width:900px){
  .learn-shell.step-lesson{max-width:1000px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"media head" "media action" "media feet" "media .";grid-template-rows:auto auto auto 1fr;column-gap:36px;text-align:left;align-items:start}
  .step-screen .player-wrap{--cap:calc(100vh - 230px)}
  @supports (height:1svh){.step-screen .player-wrap{--cap:calc(100svh - 230px)}}
  .step-media{width:calc(var(--step-cap,calc(100svh - 230px)) * .564);max-width:46vw}
  .step-action{align-items:stretch;margin:8px 0 4px}
  .step-screen h1{font-size:38px}
}

/* Home: one big next-step picture, then a short path. Each routine opens to its step pictures. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home .hello{margin:0 0 8px;font-size:17px;color:#fff5e9;font-weight:650}
.home .next-card{padding:10px;margin-bottom:20px}
.next-photo{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:3/4;max-height:50vh;width:100%;background:#090706;text-decoration:none}
@supports (height:1svh){.next-photo{max-height:50svh}}
.next-photo img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
.next-photo .next-icon{display:grid;place-items:center;height:100%;font-size:90px}
.next-over{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;background:linear-gradient(transparent,#090706f0);display:flex;flex-direction:column;align-items:flex-start}
.next-over .eyebrow{margin:0}
.next-name{font-size:28px;font-weight:850;line-height:1.15;color:#fff5e9}
.next-stats{margin:10px 2px;font-size:15px}
.path-title{font-size:24px;margin:8px 0 4px}
.home .unit-zero .path-card{margin:8px 0;min-height:56px}
.routine-list{display:flex;flex-direction:column;gap:10px;margin:8px 0 20px}
.routine-path{margin:0;border:1px solid var(--line);background:var(--card);border-radius:16px}
.routine-path.here{border:2px solid var(--gold)}
.routine-path>summary{display:flex;align-items:center;gap:12px;padding:8px;list-style:none;color:#fff5e9;min-height:96px}
.routine-path>summary::-webkit-details-marker{display:none}
.routine-path>summary img,.routine-path>summary .path-icon{width:64px;height:96px;object-fit:cover;border-radius:10px;flex-shrink:0;display:grid;place-items:center}
.routine-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.routine-info b{font-size:17px;line-height:1.25}
.routine-info small{font-size:13px;color:var(--muted)}
.routine-path.here .routine-info small:first-child{color:var(--gold)}
.routine-info progress{height:8px}
.chev{font-size:26px;color:var(--gold);transition:transform .2s}
.routine-path[open] .chev{transform:rotate(90deg)}
.routine-path.locked>summary img{filter:grayscale(1);opacity:.6}
.step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:4px 8px 8px}
.step-grid .text-link{grid-column:1/-1}
.path-card.step-tile{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:0;border:0;background:none;color:#fff5e9}
.step-tile img,.step-tile .path-icon{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:10px;border:2px solid transparent;display:grid;place-items:center;background:#090706}
.path-card.step-tile.next img{border-color:var(--gold)}
.path-card.step-tile.done img{border-color:#80a65d}
.tile-mark{position:absolute;top:6px;right:6px;min-width:26px;height:26px;border-radius:13px;display:grid;place-items:center;font-size:14px;font-weight:900;background:#80a65d;color:#14100f}
.tile-mark:empty{display:none}
.locked .tile-mark{background:#30231f}
.tile-label{font-size:13px;line-height:1.25;color:#fff5e9;flex:1}
.tile-label b{color:var(--gold)}
@media(min-width:700px){.step-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.home .next-card{padding:14px}}
.home .unit-zero .path-card>span:last-child{flex:1;text-align:left}
@media(min-width:700px){
  .home .next-card{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-rows:1fr auto auto;column-gap:22px;align-items:end}
  .home .next-photo{grid-row:1/4;aspect-ratio:3/4;max-height:none}
  .home .next-card .button{margin-bottom:6px}
}
.home .unit-zero .path-card>span:first-child{flex:0 0 auto}
.home .next-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
@media(min-width:700px){
  .home .next-over{display:none}
  .home .next-h1{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;align-self:center;font-size:44px;display:flex;flex-direction:column;gap:6px}
  .home .next-h1 .eyebrow{font-size:14px;letter-spacing:2px}
}