/* The showcase uses the app's navy, muted blue and light surfaces. */
:root{--play-ink:#171c2e;--play-blue:#687da7;--play-blue-deep:#3d5278;--play-yellow:#fdd400;--play-cream:#f7f8fb;--play-lilac:#e4eaf5}
body:has(.home-main){font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--play-cream);color:var(--play-ink)}
.home-main h1,.home-main h2,.home-main h3{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1.02}
.home-main p{line-height:1.5}
.section-kicker{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:.73rem;letter-spacing:.08em;font-weight:700}
.kicker-line{height:3px;width:24px;border-radius:10px}

/* Show the bright welcome as soon as the page opens. */
.home-hero{background:linear-gradient(180deg,#eef1f7 0%,#f7f8fb 48%,#eef1f7 100%);color:var(--play-ink)}

.wordmark{color:var(--play-ink);font-weight:800;font-size:clamp(1.85rem,2.6vw,2.6rem)}
.wordmark span{color:var(--play-blue)}
.hero-edition{padding:10px 17px;background:#fff;border:2px solid var(--play-ink);color:var(--play-ink);border-radius:999px;box-shadow:4px 4px 0 #d8deea;font-size:.68rem;letter-spacing:.06em;font-weight:700}
.hero-copy{width:min(1200px,100%);margin:auto;text-align:center;opacity:1;transform:none}
.hero-copy .hero-edition{display:inline-flex;justify-content:center;align-items:center;max-width:100%}
.hero-copy h1{margin-top:20px}
.home-hero h1{font-size:clamp(4.3rem,8.2vw,9rem);line-height:.98;margin:27px 0 31px;text-wrap:balance}
.home-hero h1 em{color:var(--play-blue);position:relative;white-space:nowrap}
.hero-lead{color:#48546d;font-size:clamp(1.1rem,1.65vw,1.45rem);font-weight:400;max-width:760px;margin-inline:auto}
.apple-button{border-radius:18px;background:#171c2e;box-shadow:5px 6px 0 #c5cddc;color:white;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;transform:rotate(-1deg)}
.hero-actions{justify-content:center}
.apple-button strong{font-weight:800}





/* Big, friendly chapters with a different color for each part of the story. */
.scroll-story{color:var(--play-ink)}
.workout-story{background:#eef1f7;border-radius:64px 64px 0 0}
.workout-story .story-stage{background:#eef1f7}
.story-copy,.program-copy{min-height:450px}
.story-block{padding:clamp(23px,3vw,44px);background:#fff;border:2px solid #d8deea;border-radius:36px;box-shadow:10px 12px 0 #c5cddc66;max-width:560px}
.story-block h2{font-size:clamp(3.1rem,5vw,6.1rem);line-height:1.03;margin:16px 0 20px}
.story-block h2 em{color:var(--play-blue)}
.story-block p{font-size:clamp(1.05rem,1.45vw,1.28rem);font-weight:500;color:#626b81}
.block-no{display:inline-block;background:#e4eaf5;color:#3d5278;border-radius:999px;padding:7px 12px;font-size:.72rem;letter-spacing:.07em}
.movement-frame{filter:drop-shadow(0 23px 18px #687da733)}
.workout-story .movement-frame{width:auto;max-width:100%;height:min(72svh,700px);margin-inline:auto;object-fit:contain}

.interlude{background:linear-gradient(180deg,#cde6ff 0%,#cde6ff 45%,#ded4ff 100%);color:#171c2e;position:relative;overflow:hidden;border-radius:64px 64px 0 0;box-shadow:0 -64px 0 #eef1f7}
.interlude:after{content:'↗';position:absolute;right:5vw;top:5%;font-size:clamp(8rem,18vw,21rem);line-height:1;color:#ffffff80;font-weight:800;transform:rotate(12deg)}
.interlude .section-kicker{color:#3d5278;background:#eaf0f8;padding:10px 17px;border-radius:999px;position:relative;z-index:1}
.interlude-grid{position:relative;z-index:1}
.interlude h2{font-size:clamp(4.4rem,7.8vw,9rem);line-height:1.02}
.interlude h2 em{color:#3d5278}
.interlude p{font-size:clamp(1.2rem,1.9vw,1.6rem);color:#48546d;font-weight:500}

.program-story{background:#ded4ff;border-radius:64px 64px 0 0}
.program-story .story-stage{background:#ded4ff}
.program-story .story-block{background:#fff;border-color:#c2b4f0;box-shadow:10px 12px 0 #a8a0cb66}
.program-story .block-no{color:#493078;background:#e4dff0}
.program-story .story-block h2 em{color:#6540aa}
.program-story .story-block p{color:#626b81}
.app-program-screen{width:min(540px,100%);overflow:hidden;border-radius:30px;background:#fff;box-shadow:0 28px 70px #4b3c8733;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#171c2e}
.app-program-header{height:76px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff}
.app-program-header strong{font-size:16px;font-weight:800;letter-spacing:-.025em;text-align:center}
.app-icon-button{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:#f0f2f6;color:#171c2e}
.app-icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.app-program-content{padding:6px 20px 30px;display:grid;gap:8px;background:#fff}
.app-category{font-size:11px!important;line-height:16px!important;color:#5b6478;text-align:center;margin:4px 0 2px;font-weight:400!important}
.app-session-card{min-height:84px;background:#171c2e;color:#fff;border-radius:999px;padding:12px 18px 12px 24px;display:flex;align-items:center;gap:12px}
.app-session-copy,.app-record-copy{display:grid;gap:2px;flex:1;min-width:0}
.app-session-copy strong{font-size:22px;line-height:27px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-session-copy small{font-size:12px;line-height:17px;color:#cbd3e5}
.app-time-pill{background:#e4eaf5;color:#171c2e;border-radius:999px;padding:8px 13px;font-size:16px;font-weight:800;white-space:nowrap}
.app-program-row{min-height:84px;display:flex;align-items:center;gap:12px;padding:10px 24px 10px 7px;border-radius:999px;background:#f0f2f6}
.app-date-badge{width:64px;height:64px;flex:none;display:grid;place-items:center;background:#e2e5ed;border-radius:50%;font-size:23px;font-weight:800;color:#171c2e}
.app-record-copy strong{font-size:17px;line-height:23px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-record-copy small{font-size:12px;line-height:17px;color:#5b6478}
.app-chevron{color:#7d879d;font-family:Arial,sans-serif;font-size:30px;line-height:1}
.program-reveal{opacity:.35;transform:translateY(16px)}

.anatomy-intro{background:#171c2e;border-radius:64px 64px 0 0;position:relative;overflow:hidden;box-shadow:0 -64px 0 #ded4ff}

.anatomy-intro .section-kicker{color:#e4eaf5;background:#3d5278;padding:10px 17px;border-radius:999px;justify-self:center}
.anatomy-intro h2{font-size:clamp(4rem,7.5vw,8rem);line-height:.98;position:relative}
.anatomy-intro h2 em{color:#c5ddef}
.anatomy-intro p{color:#cbd3e5;font-size:clamp(1.13rem,1.7vw,1.42rem);font-weight:500;position:relative}
.anatomy-story{background:#e4eaf5;border-radius:64px 64px 0 0}
.anatomy-story .story-stage{background:#e4eaf5}
.body-figure .muscle{filter:hue-rotate(-18deg) saturate(1.7) drop-shadow(0 0 8px #e02d32a0);mix-blend-mode:multiply}
.body-figure .muscle-lower{mix-blend-mode:normal}
.anatomy-label{background:#fff;border:2px solid #c5cddc;border-radius:29px;padding:26px;box-shadow:7px 9px 0 #c5cddc80}
.anatomy-side.right .anatomy-label{bottom:8%}
.anatomy-label h3{color:#171c2e;font-size:clamp(1.8rem,2.7vw,3.5rem)}
.anatomy-label p{color:#626b81;font-weight:500}

.closing{background:#687da7;color:#fff;border-radius:64px 64px 0 0;box-shadow:0 -64px 0 #e4eaf5}

.closing .section-kicker{color:#fff;background:#3d5278;padding:10px 17px;border-radius:999px}
.closing h2{line-height:1.02}.closing h2 em{color:#e4eaf5}
.closing p{color:#f0f2f6;font-size:clamp(1.12rem,1.7vw,1.4rem);font-weight:500}
.apple-button-light{background:#fff;color:#171c2e;box-shadow:5px 6px 0 #3d5278}

@media(max-width:850px){.hero-copy{width:100%}.story-block{padding:22px;border-radius:28px}.anatomy-label{padding:15px;border-radius:20px}}
@media(max-width:1100px){.anatomy-layout{grid-template-columns:minmax(190px,1fr) minmax(230px,320px) minmax(190px,1fr);gap:16px}}
@media(max-width:650px){.hero-copy .hero-edition{font-size:.61rem;padding:9px 12px;line-height:1.25}}
@media(max-width:650px){.workout-story .movement-frame{height:40svh}}
@media(max-width:650px){.app-program-screen{border-radius:25px}.app-program-header{height:58px;padding:8px 13px}.app-icon-button{width:36px;height:36px}.app-icon-button svg{width:17px;height:17px}.app-program-content{padding:3px 13px 18px;gap:6px}.app-session-card,.app-program-row{min-height:68px}.app-session-copy strong{font-size:17px;line-height:22px}.app-time-pill{font-size:12px}.app-program-row{padding-right:15px}.app-date-badge{width:50px;height:50px;font-size:17px}.app-record-copy strong{font-size:15px;line-height:19px}.app-chevron{font-size:24px}}
@media(max-width:650px){.home-hero{min-height:calc(100svh - 74px)}.home-hero h1{font-size:clamp(3.3rem,13vw,5.6rem);line-height:1.02}.home-hero h1 em{white-space:normal}.hero-actions{align-items:center}.workout-story,.interlude,.program-story,.anatomy-intro,.anatomy-story,.closing{border-radius:35px 35px 0 0}.interlude{box-shadow:0 -35px 0 #eef1f7}.story-copy,.program-copy{min-height:245px}.story-block{padding:20px;border-radius:25px}.story-block h2{font-size:clamp(2.35rem,9vw,3.5rem)}.story-block p{font-size:.96rem}.interlude h2{font-size:clamp(3.7rem,12vw,6rem)}.anatomy-label{box-shadow:3px 4px 0 #c5cddc80}.anatomy-intro h2{font-size:clamp(3.5rem,11vw,5.2rem)}}
@media(max-width:650px){.anatomy-side.right .anatomy-label{bottom:0}}
@media(max-width:650px){.anatomy-intro{box-shadow:0 -35px 0 #ded4ff}.closing{box-shadow:0 -35px 0 #e4eaf5}}
@media(prefers-reduced-motion:reduce){.hero-copy{opacity:1;transform:none;transition:none}.anatomy-label{box-shadow:none}}