@font-face { font-family: Manrope; src: url('assets/fonts/Manrope-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url('assets/fonts/Manrope-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Manrope; src: url('assets/fonts/Manrope-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url('assets/fonts/Manrope-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Manrope; src: url('assets/fonts/Manrope-Variable.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: Clash; src: url('assets/fonts/ClashDisplay-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Clash; src: url('assets/fonts/ClashDisplay-Semibold.otf') format('opentype'); font-weight: 600; font-display: swap; }
:root { --orange: #f25436; --ink: #171a1d; --muted: #505a65; --line: #e7e8e9; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg, rgba(240,114,56,.25), rgba(255,255,255,0) 501px) no-repeat #fff; font: 500 16px/1.5 Manrope, Arial, sans-serif; }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #3673ba; outline-offset: 5px; }
section { scroll-margin-top: 28px; }
h1, h2, h3, p { margin: 0; }
h2 { font-weight: 600; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 12px 20px; background: var(--ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-header, .section-pad { width: min(100% - 13.22vw, 1312px); margin-inline: auto; }
.site-header { padding-top: 24px; }
.nav-shell { height: 72px; display: flex; align-items: center; gap: 24px; padding: 10px 12px 10px 28px; border: 1px solid #deded8; border-radius: 50px; background: #fff; box-shadow: 0 6px 20px #14161405; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brand img:first-child { width: 44px; height: 34px; object-fit: contain; }
.brand .wordmark { width: 137.277px; height: 29px; }
.nav-links { display: flex; flex: 1; align-items: center; justify-content: center; gap: 28px; }
.nav-links a { font-size: 15px; line-height: 20px; text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--orange); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; border: 0; border-radius: 50px; padding: 14px 24px; font: 600 15px/20px Manrope, sans-serif; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.button img { width: 20px; height: 20px; }
.button:hover, .app-badge:hover { transform: translateY(-3px); }
.button:active, .app-badge:active { transform: translateY(0); }
.button-dark { background: var(--ink); color: #fff; }
.nav-shell > .button { width: 150.234px; justify-content: space-between; gap: 0; }
.mobile-menu, .mobile-break, .mobile-label, .site-footer { display: none; }
.button-orange { background: var(--orange); color: #fff; padding: 16px 24px; gap: 16px; filter: drop-shadow(0 26px 14px #14161454); }
.hero { padding-top: 48px; }
.hero-copy { text-align: center; }
.hero h1 { font: 600 clamp(48px, 5.56vw, 84px)/1.0714286 Clash, Manrope, sans-serif; letter-spacing: -.01em; color: #000; }
.hero h1 span { font-weight: 500; color: var(--orange); }
.hero-copy p { max-width: 1118px; margin: 24px auto; font-size: 20px; line-height: 32px; }
.hero-stage { container-type: inline-size; position: relative; width: min(100%, 1152px); aspect-ratio: 1152/580; margin: 60px auto 0; overflow: hidden; }
.hero-stage::after { content: ''; position: absolute; inset: auto 0 0; height: 124px; background: linear-gradient(180deg, transparent 2.5%, #ffffffb8 48.1%, #fff 97.5%); pointer-events: none; }
.hero-phone { position: absolute; width: 27.78%; }
.hero-left { left: 4.08%; top: 6.13%; }
.hero-right { left: 68.25%; top: 5.99%; }
.hero-center-phone { position: absolute; left: 33.16%; top: 0; width: 33.75%; height: 137.17%; border: 2px solid #e1e3da; border-radius: 68px; background: #000; box-shadow: 0 6px 30px 1px #26292429; overflow: hidden; }
.session-header { position: absolute; left: 2.46%; top: 1%; width: 95%; }
.athlete-panel { position: absolute; left: 5.25%; top: 13.94%; width: 89.4%; height: 72.16%; overflow: hidden; border: 1px solid #52616b; border-radius: 2cqw; }
.athlete-panel > img { position: absolute; width: 128.44%; max-width: none; height: 113.34%; top: -13.3%; left: -17.66%; object-fit: cover; }
.athlete-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #000d, #0008 44%, transparent) top/100% 143px no-repeat, linear-gradient(180deg, transparent, #000c) bottom/100% 175px no-repeat; }
.exercise-copy { position: absolute; left: 4%; right: 4%; top: 2%; color: #fff; display: grid; gap: 6.5px; }
.exercise-copy::after { content: '•••'; position: absolute; right: 0; top: 0; color: var(--orange); font-size: 12px; letter-spacing: 1px; }
.exercise-copy strong { color: var(--orange); font-size: 11.948px; font-weight: 600; line-height: 16.909px; }
.exercise-copy span { font-size: 17.38px; font-weight: 600; line-height: 20.667px; }
.section-intro { text-align: center; }
.section-intro h2 { font-size: clamp(40px, 5.03vw, 76px); line-height: 1.1842; letter-spacing: -1.9px; }
.section-intro p { max-width: 1118px; margin: 20px auto 0; font-size: 20px; line-height: 32px; }
.plan { padding-top: 98px; }
.plan h2 { color: var(--orange); }
.plan-stage { overflow: clip; container-type: inline-size; position: relative; aspect-ratio: 1312/675; margin-top: 17px; }
.plan-halos { position: absolute; left: 1.14%; top: -15.25%; width: 1282px; height: 814px; transform: scale(calc(100cqw / 1312px)); transform-origin: top left; overflow: hidden; pointer-events: none; }
.plan-halos::after { content: ''; position: absolute; inset: auto 0 0; height: 125px; background: linear-gradient(180deg, transparent 0%, #ffffff26 35%, #ffffffbf 75%, #fff 100%); }
.plan-halos img { position: absolute; max-width: none; }
.plan-halos img:nth-child(1) { left: 33px; top: 117px; }
.plan-halos img:nth-child(2) { left: 284px; top: 368px; }
.plan-halos img:nth-child(3) { left: 87px; top: 171px; }
.plan-halos img:nth-child(4) { left: 324px; top: 408px; }
.plan-device { position: absolute; left: 31.86%; top: 0; width: 41.92%; aspect-ratio: 550/649; z-index: 1; }
.plan-device img { position: absolute; }
.plan-hand { width: 100%; left: 0; top: 0; }
.plan-phone { width: 43.903%; left: 18.58%; top: 3.921%; }
.plan-fingers { width: 22.545%; left: -.091%; top: 21.495%; }
.plan-card { position: absolute; border: 1px solid #ffffffb8; border-radius: 20px; padding: 1.45cqw; overflow: hidden; box-shadow: 0 14px 36px -8px #152c3e21; z-index: 2; }
.plan-card > div:first-child { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.plan-card small { color: var(--muted); font: 600 15px/20px Manrope, sans-serif; }
.plan-card strong { color: #000; font: 600 22px/28px Manrope, sans-serif; }
.plan-card em { font: 500 13px/18px Manrope, sans-serif; font-style: normal; }
.goal { left: 8.99%; top: 7.56%; width: 21.34%; height: 17.78%; border-color: #ffffff59; background: linear-gradient(146.18deg, #97c7ff66 9.04%, #ddf0f766 52.08%, #f3f6f966 95.29%); }
.goal img { position: absolute; width: 169px; height: 160px; max-width: none; object-fit: contain; left: 130px; top: -27px; }
.restrictions { left: 11.8%; top: 34.5%; width: 14.33%; min-width: 188px; height: 12%; border: 0; border-radius: 16px; padding: 12px 24px; box-shadow: none; background: linear-gradient(71.47deg, #f0723833 4.69%, #f7f6f233 94.69%); }
.restrictions > div:first-child { gap: 8px; }
.restrictions small, .muscles small { color: var(--orange); }
.schedule { left: 0; top: 54.96%; width: 27.13%; min-width: 356px; min-height: 27.1%; text-align: center; background: linear-gradient(-52.69deg, #f7f6f266 18.56%, #ddf0f766 60.9%, #171a1d66 108.08%); }
.schedule > div:first-child { height: auto; gap: 16px; }
.days { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.days span { padding: 8px 4px 4px; border-radius: 20px; background: #fff; color: #505a65; font-size: 13px; line-height: 18px; font-weight: 400; }
.days b { display: grid; place-items: center; width: 32px; height: 32px; margin-top: 4px; border-radius: 50%; background: #ece8e3; font-size: 15px; line-height: 20px; font-weight: 600; }
.days .selected b { background: var(--orange); color: #fff; border: 1px solid #fff; }
.days .selected { color: #000; }
.muscles { left: 67.84%; top: 15.26%; width: 24.39%; height: 20.74%; text-align: right; background: linear-gradient(-48.16deg, #11182166 13.02%, #d6d7d866 49.4%, #fff6 81.95%); }
.muscles img { position: absolute; width: 50%; left: 4.69%; top: -.7%; }
.muscles > div:first-child { position: absolute; right: 24px; top: 23px; width: 154px; height: 92px; margin: 0; align-items: flex-end; }
.muscles > div:first-child, .equipment > div:first-child { justify-content: flex-start; }
.muscles strong, .equipment strong { margin-top: auto; }
.muscles em, .equipment em { margin-top: 4px; }
.muscles em { color: #fff; }
.equipment { right: 0; top: 52%; width: 27.44%; height: 20.74%; background: linear-gradient(135.05deg, #f3f6f966 2.4%, #ddf0f766 43.23%, #97c7ff66 97.1%); }
.equipment img { position: absolute; width: 211px; height: 124px; max-width: none; object-fit: cover; right: -16px; top: 7px; }
.equipment > div:first-child { width: 48%; }
.equipment em { color: #62696b; font-size: 10px; line-height: 14px; white-space: nowrap; }
.guided { padding-top: 174px; padding-bottom: 81px; }
.guided-feature { height: 411px; position: relative; display: flex; align-items: center; border: 2px solid #d8dde1; border-radius: 28px; box-shadow: 0 14px 36px -8px #152c3e21; background: linear-gradient(89.98deg, #6663 42.5%, #fff3 50%), #fff; }
.guided-phones { width: 55%; height: 100%; position: relative; }
.guided-phones img { position: absolute; width: auto; }
.guided-phones img:first-child { height: 510px; left: 6%; top: -95.6px; }
.guided-phones img:last-child { height: 522px; left: 37.64%; top: -58.1px; z-index: 1; }
.guided-copy { width: 37.35%; margin-left: auto; margin-right: 6.1%; }
.guided-copy h2 { font-size: 48px; line-height: 49px; margin-bottom: 24px; }
.guided-copy p { font-size: 20px; line-height: 1.25; color: var(--muted); }
.guided-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.feature-card, .progress-card { border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 12px 30px #16232d08; transition: box-shadow .2s; }
.feature-card { height: 573px; border: 2px solid #ffffffd1; box-shadow: 0 14px 36px -8px #152c3e21; }
.feature-card:hover, .progress-card:hover { box-shadow: 0 16px 32px #16232d17; }
.feature-card > img { width: 100%; height: 424px; object-fit: cover; }
.feature-card > div { padding: 16px 20px 36px; }
h3 { font-size: 28px; font-weight: 600; line-height: 32px; }
.feature-card:nth-child(2) h3 { white-space: nowrap; letter-spacing: -.28px; }
.feature-card p { color: #626d78; font-size: 16px; font-weight: 400; line-height: 23px; margin-top: 12px; }
.progress { padding-top: 80px; padding-bottom: 80px; }
.progress h2 { max-width: 1268px; margin-inline: auto; font-size: clamp(40px, 5.03vw, 76px); line-height: 90px; letter-spacing: -1.9px; color: #000; }
.progress-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 48px; }
.progress-card { grid-column: span 5; }
.progress-card.wide { grid-column: span 7; }
.progress-card > picture { display: block; }
.progress-card > picture > img { width: 100%; height: auto; }
.progress-card:nth-child(3) > picture > img { width: calc(100% - 4px); margin-inline: 2px; }
.progress-card { border: 2px solid #ffffffde; box-shadow: 0 14px 36px -8px #152c3e21; }
.progress-card > div { padding: 17px 28px 30px; }
.progress-card h3 { font-size: 28px; line-height: 35px; letter-spacing: -.98px; color: #191d20; }
.progress-card p { color: #637081; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: -.24px; margin-top: 11px; }
.progress-card.wide p { max-width: 560px; }
.progress-card:nth-child(-n+2) { min-height: 500px; }
.progress-card:nth-child(n+3) { min-height: 573px; }
.getting { min-height: 859px; padding-top: 80px; padding-bottom: 80px; }
.getting h2 { color: var(--orange); }
.getting-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; padding-bottom: 84px; }
.getting-card.offset { transform: translateY(84px); }
.getting-card img { width: 100%; aspect-ratio: 1; border-radius: 24px; object-fit: cover; margin-bottom: 22px; }
.getting-card h3 { font-size: 24px; line-height: 30px; letter-spacing: -.84px; color: #191d20; }
.getting-card p { min-height: 50px; margin-top: 11px; color: #566171; font-size: 16px; font-weight: 400; line-height: 24.8px; letter-spacing: -.24px; }
.text-button { padding: 0; color: inherit; background: none; border: 0; text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; text-decoration-skip-ink: none; }
.faq { min-height: 804px; padding-block: 80px; display: grid; grid-template-columns: 432fr 800fr; gap: 80px; align-items: start; }
.faq-label { font-size: 17px; line-height: 24px; font-weight: 600; margin-bottom: 24px; color: #191d20; }
.faq-intro h2 { color: var(--orange); font-size: clamp(40px, 3.836vw, 58px); line-height: 1.1; letter-spacing: -2.61px; }
.faq-list { display: grid; gap: 12px; }
.faq-list details { border: 1px solid #e4e9ed; border-radius: 20px; padding: 0 28px; background: #fff; }
.faq-list details[open] { background: #f4f9fc; border-color: #dce7ee; }
.faq-list summary { list-style: none; cursor: pointer; padding: 28px 0; display: flex; gap: 20px; align-items: center; font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -.4px; color: #191d20; }
.faq-list details[open] summary { padding-bottom: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary img { width: 24px; height: 24px; margin-left: auto; flex: none; }
.faq-list details:not([open]) summary img { content: url('assets/faq-expand.svg'); }
.faq-list details[open] summary img { content: url('assets/faq-collapse.svg'); }
.faq-list details p { color: #566171; font-size: 16px; font-weight: 400; line-height: 26px; letter-spacing: -.24px; max-width: 700px; margin: 0 0 28px; }
.download { padding-block: 40px; }
.download-banner { min-height: 557px; border-radius: 28px; background: linear-gradient(90deg,rgba(14,24,29,.89) 0%,rgba(14,24,29,.77) 32%,rgba(14,24,29,.2) 70%,rgba(14,24,29,.08) 100%),linear-gradient(0deg,rgba(14,24,29,.2) 0%,rgba(14,24,29,0) 55%),url('assets/download-training.jpg') center/cover; box-shadow: 0 14px 36px -15px #152c3e26; }
.download-copy { padding: 82px 64px 81px; color: #fff; }
.download-copy h2 { font-size: 64px; line-height: 66.951px; letter-spacing: -2.88px; }
.download-copy p { font-size: 18px; line-height: 28.8px; letter-spacing: -.27px; color: #eef1f2; max-width: 504px; margin-top: 32px; }
.download-actions { display: flex; align-items: center; gap: 25px; margin-top: 68px; }
.app-badge { height: 65px; width: 197px; flex: none; border: 1px solid #fff9; border-radius: 12px; background: #080a0b; color: #fff; display: flex; align-items: center; justify-content: center; text-align: left; gap: 12px; padding: 8px 14px; transition: transform .2s; }
.app-badge img { width: 29px; height: 35px; }
.app-badge span { width: 115px; font-size: 26px; font-weight: 600; line-height: 34px; letter-spacing: -.91px; }
.app-badge small { display: block; font-size: 11px; font-weight: 400; line-height: 13px; letter-spacing: .11px; margin-bottom: 0; }
.divider { height: 74px; width: 1px; background: #ffffff3b; }
.qr-option { display: flex; align-items: center; gap: 20px; }
.qr-placeholder { width: 102px; height: 102px; border-radius: 9px; background: #fff; color: #505a65; display: grid; place-items: center; text-align: center; font-size: 12px; }
.qr-label { font-size: 14px; font-weight: 600; line-height: 20px; }
dialog { border: 0; border-radius: 20px; width: min(400px, calc(100% - 32px)); max-width: none; padding: 0; box-shadow: 0 22px 80px #0004; }
dialog::backdrop { background: #171a1d88; }
dialog > div { padding: 32px; }
dialog h2 { margin-bottom: 12px; font-size: 32px; }
dialog p { color: var(--muted); margin-bottom: 24px; }
/* Content stays visible until the observer takes responsibility for a reveal. */
.reveal-pending { opacity: 0; }
.reveal.is-visible { animation: reveal-in .65s both; }
.guided-grid > :nth-child(2), .progress-grid > :nth-child(2n), .getting-grid > :nth-child(2) { animation-delay: .08s; }
.guided-grid > :nth-child(3), .getting-grid > :nth-child(3) { animation-delay: .16s; }
.getting-grid > :nth-child(4) { animation-delay: .24s; }
@keyframes reveal-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 1250px) {
  .progress h2 { line-height: 1.18; }
  .progress-card:nth-child(n) { min-height: 0; }
  .plan-stage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
  .plan-device { position: relative; grid-column: 1 / -1; width: min(420px, 100%); left: auto; margin: auto; }
  .plan-halos { left: 50%; top: 0; transform: translateX(-50%) scale(.48); transform-origin: top center; }
  .plan-card { position: relative; left: auto; right: auto; top: auto; width: auto; height: 150px; min-height: 0; padding: 20px; }
  .restrictions, .schedule { min-width: 0; }
  .goal img { left: auto; right: 0; }
  .restrictions { order: 1; }
  .muscles { order: 2; }
  .equipment { order: 3; }
  .schedule { order: 4; grid-column: 1 / -1; height: auto; padding: 24px; }
  .equipment em { white-space: normal; }
}
@media (max-width: 1100px) {
  .nav-links { gap: 18px; }
  .nav-shell { padding-left: 20px; gap: 16px; }
  .guided-phones img:first-child { height: 420px; left: 0; }
  .guided-phones img:last-child { height: 432px; left: 35%; }
  .guided-copy h2 { font-size: 40px; }
  .guided-copy p { font-size: 18px; }
  .getting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 0; }
  .getting-card.offset { transform: none; }
  h3 { font-size: 24px; }
  .feature-card > div, .progress-card > div { padding: 20px; }
  .faq { gap: 40px; }
}
@media (max-width: 800px) {
  body { background-size: 100% 600px; }
  .site-header, .section-pad { width: calc(100% - 40px); }
  .site-header { padding-top: 16px; }
  .nav-shell { height: auto; flex-wrap: wrap; padding: 16px; border-radius: 28px; gap: 18px 8px; }
  .brand { gap: 6px; transform: scale(.88); transform-origin: left center; margin-right: -22px; }
  .nav-shell > .button { width: auto; margin-left: auto; padding: 12px 14px; gap: 8px; font-size: 13px; }
  .nav-links { order: 3; flex-basis: 100%; gap: 12px; justify-content: space-between; }
  .nav-links a { font-size: 13px; }
  .hero { padding-top: 44px; }
  .hero h1 { font-size: clamp(36px, 7.1vw, 56px); line-height: 1.08; }
  .hero-copy p { font-size: 17px; line-height: 27px; margin: 24px auto; max-width: 540px; }
  .hero-stage { margin-top: 48px; width: 100%; aspect-ratio: 1.6; }
  .hero-stage::after { height: 22%; }
  .hero-center-phone { left: 29%; width: 42%; height: 138%; border-radius: 6.5cqw; }
  .hero-left { left: 0; top: 15%; width: 31%; }
  .hero-right { left: 69%; top: 13%; width: 31%; }
  .exercise-copy { gap: 2px; }
  .exercise-copy span { font-size: 2cqw; }
  .exercise-copy strong { font-size: 1.5cqw; }
  .exercise-copy strong, .exercise-copy span { line-height: 1.2; }
  .section-intro h2, .progress h2 { font-size: clamp(34px, 6.5vw, 48px); line-height: 1.15; }
  .section-intro p { font-size: 17px; line-height: 27px; }
  .plan { padding-top: 64px; }
  .guided { padding-top: 150px; padding-bottom: 64px; }
  .guided-feature { height: auto; display: block; padding: 365px 28px 32px; }
  .guided-phones { position: absolute; top: 0; left: 0; width: 100%; height: 330px; }
  .guided-phones img:first-child { height: 350px; left: calc(50% - 182px); top: -65px; }
  .guided-phones img:last-child { height: 365px; left: calc(50% - 14px); top: -30px; }
  .guided-copy { width: auto; margin: 0; }
  .guided-copy h2 { font-size: 36px; line-height: 1.1; }
  .guided-copy p { font-size: 17px; line-height: 27px; }
  .guided-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .feature-card { height: auto; }
  .feature-card > img { height: auto; aspect-ratio: 418/424; max-height: 540px; object-position: top; }
  .feature-card:nth-child(2) h3 { white-space: normal; }
  .progress { padding-block: 36px 64px; }
  .progress-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .progress-card, .progress-card.wide { grid-column: auto; }
  .getting { min-height: 0; padding-block: 36px 64px; }
  .getting-grid { margin-top: 40px; gap: 32px 20px; }
  .getting-card h3 { font-size: 21px; }
  .getting-card p { font-size: 15px; }
  .faq { min-height: 0; padding-block: 36px 64px; grid-template-columns: 1fr; gap: 36px; }
  .faq-intro h2 { font-size: 44px; }
  .faq-list details { padding-inline: 20px; }
  .faq-list summary { padding-block: 22px; font-size: 18px; line-height: 26px; }
  .faq-list details p { margin-right: 0; }
  .download { padding-bottom: 32px; }
  .download-banner { background-position: right center; }
  .download-copy { padding: 44px 28px; }
  .download-copy h2 { font-size: clamp(36px, 6.4vw, 50px); }
  .download-copy p { font-size: 17px; line-height: 27px; }
  .download-actions { gap: 18px; flex-wrap: wrap; margin-top: 36px; }
  .divider { display: none; }
}
@media (max-width: 480px) {
  body { background: linear-gradient(180deg, #fce2d7, #fff 270px) no-repeat #fff; background-size: 100% 270px; }
  .site-header, .section-pad { width: calc(100% - 32px); }
  .site-header { padding-top: 20px; }
  .nav-shell { height: 60px; flex-wrap: nowrap; padding: 12px 16px; border-radius: 32px; }
  .brand { gap: 4px; margin: 0; transform: none; }
  .brand img:first-child { width: 36px; height: 36px; }
  .brand .wordmark { width: 94px; height: auto; }
  .nav-links, .nav-shell > .button { display: none; }
  .mobile-menu { display: block; position: relative; margin-left: auto; z-index: 20; }
  .mobile-menu > summary { display: grid; place-items: center; width: 36px; height: 32px; border-radius: 18px; background: #f5f5f6; list-style: none; cursor: pointer; }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu > summary img { width: 16px; height: 12px; }
  .mobile-menu-panel { position: absolute; top: 42px; right: 0; width: min(250px, calc(100vw - 32px)); padding: 8px; display: grid; border: 1px solid #deded8; border-radius: 18px; background: #fff; box-shadow: 0 14px 36px #152c3e21; }
  .mobile-menu-panel a { min-height: 44px; padding: 11px 12px; border-radius: 10px; font-size: 14px; text-decoration: none; }
  .mobile-menu-panel a:hover { background: #f5f5f6; }
  .mobile-break { display: block; }
  .hero { padding-top: 32px; }
  .hero h1 { font-size: 36px; line-height: 38px; letter-spacing: -1px; }
  .hero h1 span { display: block; margin: 0; letter-spacing: -1.5px; }
  .hero-copy p { max-width: 370px; margin: 12px auto 32px; font-size: 12px; line-height: 18px; }
  .hero .button-orange { height: 42px; padding: 12px 24px; gap: 12px; font-size: 13px; line-height: 18px; }
  .hero .button-orange img { content: url('assets/hero-arrow-mobile.svg'); width: 16px; height: 16px; }
  .hero-stage { width: 100%; aspect-ratio: 370 / 192.24; margin: 32px 0 0; }
  .hero-stage::after { height: 26%; }
  .hero-left { left: 6%; top: 13%; width: 27%; }
  .hero-right { left: 65%; top: 14%; width: 30%; }
  .hero-center-phone { left: 33.7%; top: 6.25%; width: 32.65%; height: 129%; border-width: 1px; border-radius: 26px; }
  .athlete-shade { background: linear-gradient(180deg, #000b, transparent) top/100% 42% no-repeat, linear-gradient(180deg, transparent, #000b) bottom/100% 37% no-repeat; }
  .exercise-copy { gap: 1px; }
  .exercise-copy strong { font-size: 4px; line-height: 6px; }
  .exercise-copy span { font-size: 6px; line-height: 8px; }
  .plan { width: 100%; padding-top: 40px; }
  .plan .section-intro { padding-inline: 24px; }
  .plan h2 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.2px; }
  .plan .section-intro p { max-width: 354px; margin-top: 16px; font-size: 12px; line-height: 18px; }
  .plan-stage { display: block; width: 100%; aspect-ratio: 402 / 656; margin-top: 32px; overflow: clip; }
  .plan-halos { left: -2.985cqw; top: -2.239cqw; width: 106cqw; height: 93.8cqw; transform: none; overflow: visible; }
  .plan-halos::after { display: none; }
  .plan-halos img:nth-child(1) { left: -5.22cqw; top: 21.39cqw; width: 116.17cqw; }
  .plan-halos img:nth-child(2) { left: 18.91cqw; top: 45.52cqw; width: 67.91cqw; }
  .plan-halos img:nth-child(3) { left: 0; top: 26.62cqw; width: 106cqw; }
  .plan-halos img:nth-child(4) { left: 22.64cqw; top: 49.25cqw; width: 60.45cqw; }
  .plan-device { position: absolute; left: 11.19%; top: 12.2%; width: 77.36%; aspect-ratio: 311 / 367; margin: 0; z-index: 1; }
  .plan-hand { width: 113.18%; max-width: none; }
  .plan-phone { width: 50.36%; left: 20.35%; top: 4.65%; }
  .plan-fingers { width: 25.3%; left: 0; top: 24.4%; }
  .plan-card { position: absolute; grid-column: auto; min-width: 0; min-height: 0; padding: 0; border-radius: 13px; }
  .plan-card small { font-size: 1.99cqw; line-height: 3.23cqw; }
  .plan-card strong { font-size: 2.99cqw; line-height: 4.53cqw; }
  .plan-card em { font-size: 1.99cqw; line-height: 2.99cqw; }
  .goal { left: 3.98%; top: 0; width: 34.83%; height: 9.15%; padding: 1.99cqw 2.99cqw; z-index: 2; }
  .goal > div:first-child { width: 21.89cqw; }
  .goal img { left: auto; right: -3.48cqw; top: -2.24cqw; width: 20.65cqw; height: 19.4cqw; }
  .restrictions { left: 3.98%; top: 13.41%; width: 26.17%; height: 8.05%; padding: 1.94cqw 3.88cqw; border-radius: 10.4px; z-index: 0; }
  .restrictions > div:first-child { gap: 1.3cqw; justify-content: center; }
  .muscles { left: 51.24%; top: 3.51%; width: 44.78%; height: 12.2%; border-radius: 20px; z-index: 0; }
  .muscles img { width: 22.89cqw; left: 2.99cqw; top: 0; }
  .muscles > div:first-child { right: 0; top: 0; width: 19.9cqw; height: 19.9cqw; padding: 2.99cqw 3.98cqw 2.99cqw 0; }
  .muscles em, .equipment em { margin-top: 0; }
  .schedule { left: 3.98%; top: 63.87%; width: 53.46%; height: 15.78%; padding: 1.99cqw; z-index: 2; }
  .schedule > div:first-child { gap: 1cqw; }
  .days { gap: 1cqw; margin-top: 0; }
  .days span { width: 6.17cqw; padding: 1.24cqw .5cqw .5cqw; font-size: 1.37cqw; line-height: 1.89cqw; }
  .days b { width: 5.17cqw; height: 5.17cqw; margin-top: .65cqw; font-size: 1.58cqw; line-height: 2.1cqw; }
  .equipment { left: 34.33%; right: auto; top: 80.34%; width: 61.69%; height: 13.41%; padding: 1.99cqw 2.99cqw; border-radius: 18.7px; z-index: 2; }
  .equipment > div:first-child { width: 31.34cqw; }
  .equipment img { width: 32.84cqw; height: 19.15cqw; right: -3.48cqw; top: 1.49cqw; object-fit: contain; }
  .equipment em { white-space: normal; font-size: 1.99cqw; line-height: 2.99cqw; }
  .guided { padding-top: 85px; padding-bottom: 0; }
  .guided-feature { height: 483px; padding: 0; display: block; border-width: 1px; border-radius: 28px; background: linear-gradient(180deg, #6663 58%, #fff3 68%), #fff; }
  .guided-phones { position: absolute; inset: 0 0 auto; width: 100%; height: 338px; }
  .guided-phones img:first-child { height: 358px; left: 3px; top: -66px; }
  .guided-phones img:last-child { height: 380px; left: auto; right: -4px; top: -47px; }
  .guided-copy { position: absolute; left: 0; right: 0; top: 338px; width: auto; margin: 0; padding: 16px 16px 36px; border-top: 1px solid #fff; }
  .guided-copy h2 { margin-bottom: 8px; font-size: 20px; line-height: 30px; }
  .guided-copy p { font-size: 14px; line-height: 18px; }
  .guided-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .feature-card { height: auto; border-width: 2px; border-radius: 24.55px; }
  .feature-card:nth-child(1) { min-height: 498px; }
  .feature-card:nth-child(2) { min-height: 502px; }
  .feature-card:nth-child(3) { min-height: 499px; }
  .feature-card > img { width: 100%; height: auto; max-height: none; aspect-ratio: 418 / 424; object-fit: cover; }
  .feature-card > div { padding: 14px 17.5px 28px; }
  .feature-card h3 { font-size: 20px; line-height: 28px; letter-spacing: 0; }
  .feature-card p { margin-top: 10.5px; font-size: 14px; line-height: 20px; }
  .desktop-label { display: none; }
  .mobile-label { display: inline; }
  .progress { padding-top: 60px; padding-bottom: 60px; }
  .progress h2 { font-size: 28px; line-height: 34px; letter-spacing: -.7px; }
  .progress h2 br:not(.mobile-break) { display: none; }
  .progress-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
  .progress-card { grid-column: auto; padding: 2px; border-radius: 28px; }
  .progress-card:nth-child(1) { min-height: 462px; }
  .progress-card:nth-child(2) { min-height: 442px; }
  .progress-card:nth-child(3) { min-height: 482px; }
  .progress-card:nth-child(4) { min-height: 429px; }
  .progress-card > picture { display: block; width: calc(100% + 4px); margin: -2px -2px 0; }
  .progress-card > picture > img, .progress-card:nth-child(3) > picture > img { width: 100%; height: auto; margin: 0; }
  .progress-card:nth-child(3) > picture { width: 100%; margin: 0; }
  .progress-card > div { padding: 16px 18px 22px; }
  .progress-card h3 { font-size: 20px; line-height: 28px; letter-spacing: -.7px; }
  .progress-card p { margin-top: 8px; font-size: 14px; line-height: 20px; letter-spacing: -.21px; }
  .getting { min-height: 0; padding: 0 0 40px; }
  .getting .section-intro { padding-inline: 12px; }
  .getting h2 { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.7px; }
  .getting .section-intro p { margin-top: 12px; font-size: 14px; line-height: 20px; }
  .getting-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 39px; padding: 0; }
  .getting-card img { width: 100%; height: auto; aspect-ratio: 370 / 343; margin-bottom: 16px; border-radius: 24px; }
  .getting-card h3 { font-size: 20px; line-height: 28px; letter-spacing: -.7px; }
  .getting-card p { min-height: 0; margin-top: 6px; font-size: 14px; line-height: 20px; letter-spacing: -.21px; }
  .faq { display: block; min-height: 0; padding: 0 0 48px; }
  .faq-label { margin-bottom: 12px; font-size: 14px; line-height: 20px; }
  .faq-intro h2 { font-size: 28px; line-height: 34px; letter-spacing: -1.26px; }
  .faq-intro h2 br { display: none; }
  .faq-list { gap: 12px; margin-top: 28px; }
  .faq-list details { padding: 18px; border-radius: 20px; }
  .faq-list summary, .faq-list details[open] summary { padding: 0; gap: 12px; font-size: 16px; line-height: 24px; letter-spacing: -.32px; }
  .faq-list details p { margin: 12px 0 0; font-size: 14px; line-height: 22px; letter-spacing: -.21px; }
  .download { padding: 0 0 40px; }
  .download-banner { position: relative; min-height: 0; padding-top: 69.189%; overflow: hidden; border-radius: 28px; background: #0e181d; }
  .download-banner::before, .download-banner::after { content: ''; position: absolute; inset: 0 0 auto; width: 100%; aspect-ratio: 370 / 256; }
  .download-banner::before { background: url('assets/download-training.jpg') right center / 163% auto no-repeat; }
  .download-banner::after { background: linear-gradient(180deg, #0e181d0a, #0e181d0d 52%, #0e181d); }
  .download-copy { position: relative; padding: 0 24px 28px; }
  .download-copy h2 { font-size: 36px; line-height: 40px; letter-spacing: -1.62px; }
  .download-copy p { margin-top: 16px; font-size: 16px; line-height: 24px; letter-spacing: -.24px; }
  .download-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 24px; }
  .app-badge { width: 197px; flex-basis: auto; }
  .qr-option { gap: 20px; }
  .qr-placeholder { width: 102px; height: 102px; flex: none; }
  .qr-label { width: 102px; max-width: none; }
  .site-footer { display: flex; flex-direction: column; align-items: center; min-height: 215px; overflow: hidden; padding: 24px 8px 8px; background: linear-gradient(#fff 0% 24%, #ddf0f7 64%, #97c7ff 100%); color: #111821; }
  .footer-links { display: flex; gap: 16px; }
  .footer-links span { min-height: 44px; display: grid; place-items: center; padding-inline: 8px; font-size: 14px; line-height: 20px; }
  .site-footer p { margin-top: 8px; font-size: 14px; line-height: 20px; opacity: .75; }
  .site-footer strong { display: block; margin-top: 36px; font-size: min(18.57vw, 74.662px); font-weight: 800; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
}
@media (max-width: 380px) {
  .guided-feature { height: auto; padding-top: 84.08vw; }
  .guided-phones { height: 84.08vw; }
  .guided-phones img:first-child { height: 89vw; left: .75vw; top: -16.4vw; }
  .guided-phones img:last-child { height: 94.5vw; right: -1vw; top: -11.7vw; }
  .guided-copy { position: relative; top: auto; }
  .feature-card:nth-child(n), .progress-card:nth-child(n) { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-pending { opacity: 1; }
  .reveal.is-visible { animation: none; }
  .button, .app-badge, .feature-card, .progress-card, .nav-links a { transition: none; }
  .button:hover, .app-badge:hover { transform: none; }
}