:root{color-scheme:dark;--bg:#080c0e;--text:#f4f5f6;--muted:#a9adb1;--orange:#ff782d;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 92% 0,rgba(111,47,20,.13),transparent 43%),var(--bg);color:var(--text);min-width:280px} .landing{width:min(100%,480px);margin:auto;min-height:100svh;padding:20px 20px max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px}header{padding:0 3px}.wordmark{font-size:27px;line-height:1.1;font-weight:850;font-style:italic;letter-spacing:-1.4px;display:inline-block}.wordmark span{color:var(--orange)}h1,h2,p,figure{margin:0}h1{font-size:clamp(30px,8.1vw,40px);font-weight:800;line-height:1.07;letter-spacing:-1.4px}h1>span{color:var(--orange)}.description{font-size:15px;line-height:1.48;color:var(--muted);margin-top:13px;max-width:430px}.progress-card{overflow:hidden;border:1px solid #343c40;border-radius:21px;background:linear-gradient(145deg,#151c1f,#111719);box-shadow:0 12px 40px #0002}.chart-content{padding:15px 14px 11px}h2{font-size:19px;line-height:1.2;letter-spacing:-.55px;font-weight:750}.chart{display:block;width:100%;height:auto;overflow:visible;margin-top:15px}.grid path{fill:none;stroke:#5c676e;stroke-opacity:.18;stroke-width:.7}.label-stems{fill:none;stroke:#e1d4cc;stroke-width:1}.milestone rect{fill:#4b2916}.milestone text{fill:#ffe0c6;font-weight:650;font-size:11px;text-anchor:middle}.end-label,.start-label{fill:var(--text);font-weight:650;font-size:12px}.end-label{font-size:13px}figcaption{font-size:11px;text-align:center;color:var(--muted);margin-top:10px}.gym-photo{aspect-ratio:879/263;background-image:url('assets/approved-design.webp');background-size:107.05% auto;background-position:50% 77.43%;background-repeat:no-repeat;border-radius:15px 15px 0 0}.action-area{margin-top:auto}.adaptive{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 17px;font-size:14px;font-weight:650;line-height:1.4}.adaptive svg{width:25px;height:25px;flex:none;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round}.cta{display:flex;align-items:center;justify-content:center;gap:14px;min-height:57px;width:100%;padding:14px 20px;border-radius:15px;background:linear-gradient(105deg,#ff914b,#ff782d 65%,#ff7023);box-shadow:inset 0 1px 0 #ffffff35,0 6px 24px #ff782d0c;color:#101010;text-decoration:none;font-weight:800;font-size:23px;letter-spacing:-.5px;transition:filter .15s,transform .15s}.cta svg{width:28px;height:24px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.cta:hover{filter:brightness(1.08)}.cta:active{transform:translateY(1px)}.cta:focus-visible{outline:3px solid #fff;outline-offset:5px}.next-step{text-align:center;color:var(--muted);font-size:12px;line-height:1.4;margin-top:9px}
@media(max-width:550px) and (max-height:760px){.landing{padding-top:15px;gap:14px}.wordmark{font-size:25px}h1{font-size:clamp(29px,8vw,37px)}.description{font-size:14px;line-height:1.4;margin-top:10px}.chart-content{padding:12px 12px 9px}.chart{margin-top:10px;max-height:174px}h2{font-size:17px}.gym-photo{height:92px;aspect-ratio:auto;background-size:107.05% auto}.adaptive{margin-bottom:12px;font-size:13px}.cta{min-height:53px;font-size:22px}}
@media(max-width:550px) and (max-height:660px){.landing{gap:11px;padding:12px 16px 10px}.wordmark{font-size:23px}h1{font-size:30px}.description{font-size:13px;margin-top:9px}.chart{height:147px}.chart-content{padding-top:11px}h2{font-size:16px}.gym-photo{height:72px}figcaption{font-size:10px;margin-top:7px}.adaptive{font-size:12px;margin-bottom:10px}.adaptive svg{height:21px;width:21px}.cta{min-height:49px;padding:11px 20px;font-size:21px}.next-step{font-size:11px;margin-top:7px}}
@media(min-width:800px){body{background:radial-gradient(ellipse at 90% 20%,#49261228,transparent 53%),var(--bg)}.landing{max-width:1110px;width:calc(100% - 96px);min-height:100svh;padding:38px 0;display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:auto 1fr auto;column-gap:64px;row-gap:32px;align-content:center}header{grid-column:1/-1}.wordmark{font-size:31px}.intro{align-self:end;padding-bottom:12px}h1{font-size:clamp(38px,4.5vw,60px);line-height:1.08;letter-spacing:-2.2px}.description{font-size:18px;margin-top:24px;line-height:1.55}.wide-break{display:none}.progress-card{grid-column:2;grid-row:2/4;align-self:center;border-radius:24px}.chart-content{padding:24px 20px 17px}h2{font-size:22px}.chart{margin-top:29px}figcaption{font-size:12px;margin-top:17px}.gym-photo{min-height:135px}.action-area{grid-column:1;grid-row:3;align-self:start;margin:0;padding-bottom:70px;max-width:420px}.adaptive{justify-content:flex-start;font-size:15px;margin-bottom:21px}.cta{min-height:62px}.next-step{font-size:13px}}
@media(max-width:550px) and (max-height:760px){.landing{gap:12px}.gym-photo{height:88px}}
@media(max-width:550px) and (max-height:660px){.landing{gap:10px}h1{font-size:28px}.description{font-size:12.5px}.chart{height:120px}.gym-photo{height:60px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.gym-photo{aspect-ratio:auto;height:clamp(130px,36vw,166px);background-image:linear-gradient(180deg,rgba(8,12,14,.06),transparent 33%),url('assets/gym-real-photo.webp');background-size:cover;background-position:center 56%;background-repeat:no-repeat;border-top:1px solid #3b4244;border-radius:15px 15px 0 0}
@media(max-width:550px) and (max-height:760px){.gym-photo{height:116px}}
@media(max-width:550px) and (max-height:660px){.gym-photo{height:98px}.chart{height:108px}}
@media(min-width:800px){.gym-photo{height:180px}}

/* The portrait is art-directed for mobile: show both faces and upper bodies,
   while keeping the benefit graph and the main button on the same screen. */
.gym-photo{
  position:relative;
  overflow:hidden;
  height:clamp(160px,44vw,205px);
  background:#121619;
  background-image:none;
  border-radius:0;
  border-top:1px solid #353d40;
}
.gym-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 5%;
  filter:contrast(1.035) saturate(.93);
}
.gym-photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,14,.02) 58%,rgba(8,12,14,.26));
}
.landing{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.action-area{min-width:0}
.cta{touch-action:manipulation}

@media(max-width:550px){
  .landing{gap:clamp(12px,2.1vh,20px)}
  .chart-content{padding:14px 13px 11px}
  .chart{margin-top:11px}
  .gym-photo{height:clamp(150px,43vw,198px)}
}
@media(max-width:550px) and (max-height:760px){
  .landing{padding-top:13px;gap:11px}
  .description{margin-top:9px}
  .chart{max-height:143px;margin-top:8px}
  .gym-photo{height:clamp(125px,35vw,154px)}
  .adaptive{margin-bottom:10px}
}
@media(max-width:550px) and (max-height:660px){
  .landing{padding-top:10px;gap:9px}
  .chart-content{padding:10px 11px 8px}
  .chart{height:120px;max-height:120px;margin-top:6px}
  .gym-photo{height:116px}
  .adaptive{margin-bottom:7px}
  .cta{min-height:48px}
}
@media(max-width:550px) and (max-height:590px){
  .landing{gap:7px;padding-top:9px}
  h1{font-size:clamp(25px,7.7vw,30px)}
  .description{font-size:12px;line-height:1.32;margin-top:7px}
  .chart{height:103px;max-height:103px}
  .gym-photo{height:104px}
  .next-step{margin-top:5px}
}
@media(min-width:800px){
  .gym-photo{height:240px}
  .gym-photo img{object-position:center 7%}
}

/* A true landscape photograph fills the card edge to edge without cropping
   the athletes' shoes or heads. No artificial blurred side panels. */
.gym-photo{
  isolation:isolate;
  height:auto;
  min-height:0;
  aspect-ratio:1672/941;
  background:#101416;
}
.gym-photo::before{
  display:none;
}
.gym-photo img{
  position:absolute;
  inset:0;
  z-index:1;
  object-fit:cover;
  object-position:center;
  filter:contrast(1.02) saturate(.95);
}
.gym-photo::after{
  z-index:2;
  background:linear-gradient(0deg,rgba(8,12,14,.14),transparent 38%);
}
@media(max-width:550px){
  .landing{gap:11px}
  .chart-content{padding:12px 13px 8px}
  .chart{height:clamp(118px,18svh,165px);max-height:none;margin-top:7px}
  figcaption{margin-top:5px}
  .gym-photo{height:auto}
  .adaptive{margin-bottom:10px}
}
@media(max-width:550px) and (max-height:760px){
  .landing{gap:9px}
  .chart{height:clamp(108px,18svh,133px);max-height:none}
  .gym-photo{height:auto}
}
@media(max-width:550px) and (max-height:660px){
  .landing{gap:7px}
  .chart{height:105px;max-height:none}
  .gym-photo{height:auto}
}
@media(max-width:550px) and (max-height:590px){
  .chart{height:94px}
  .gym-photo{height:auto}
}
@media(max-width:550px) and (min-height:661px) and (max-height:850px){
  .landing{gap:8px}
  .chart-content{padding-bottom:6px}
  .gym-photo{height:auto}
  .next-step{margin-top:5px}
}
@media(min-width:800px){
  .gym-photo{height:auto}
}