/* Option C homepage sections: Train online · In person · Join a class · Free consult (built from port.css patterns) */
.port.hm{padding:clamp(64px,10vw,120px) 0;border-top:1px solid var(--line);overflow:hidden}
.port.hm .head{margin-bottom:clamp(28px,5vw,48px)}
.port.hm .h2{overflow-wrap:break-word}
.port.hm--online{background:linear-gradient(180deg,var(--bk2),#150c0c 55%,var(--bk2))}
.port.hm--online::before{content:"";position:absolute;width:760px;height:760px;right:-280px;top:6%;background:radial-gradient(circle,rgba(255,0,0,.18),transparent 65%);pointer-events:none}
.port .hm__plans{display:grid;gap:18px;position:relative}
.port .hm__plan{display:flex;flex-direction:column;gap:0;background:#171717;border:1px solid var(--line);border-radius:24px;padding:clamp(24px,4vw,36px);box-shadow:0 40px 80px -40px #000;min-width:0}
.port .hm__plan--full{background:linear-gradient(180deg,#2a0a0a,#1a1212);border-color:rgba(255,0,0,.6)}
.port .hm__tag{font:700 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.port .hm__plan--full .hm__tag{color:#fff;align-self:flex-start;background:var(--red);padding:7px 10px;border-radius:999px}
.port .hm__t{font:400 clamp(1.7rem,3.2vw,2.3rem)/1 var(--disp);text-transform:uppercase;margin:0 0 18px;overflow-wrap:break-word}
.port .hm__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.port .hm__price b{font:400 clamp(1.9rem,4vw,2.4rem)/1 var(--disp);letter-spacing:.02em;white-space:nowrap}
.port .hm__price span{font:700 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--g)}
.port .hm__line{color:#e6e6e6;font-size:1.02rem;line-height:1.5;margin:0 0 20px}
.port .hm__plan .ticks{margin:0 0 26px;gap:10px}
.port .hm__plan .ticks li{align-items:flex-start;font-weight:500;color:#ddd}
.port .hm__cta{margin-top:auto;align-self:flex-start;max-width:100%;text-align:center;white-space:normal;line-height:1.25}
.port .hm__note{margin:22px 0 0;position:relative}
/* split layout with photo */
.port .hm__split{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
.port .hm__copy{min-width:0}
.port .hm__img{margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;max-height:640px;box-shadow:0 40px 80px -40px #000}
.port .hm__img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:contrast(1.05) saturate(.95)}
.port .hm__packs{margin:28px 0 26px;padding:20px 22px;border:1px solid rgba(255,0,0,.45);border-radius:18px;background:linear-gradient(90deg,rgba(255,0,0,.1),transparent)}
.port .hm__packs-t{font:400 1.45rem/1.05 var(--disp);text-transform:uppercase;margin:0 0 8px}
.port .hm__packs p{margin:0;color:#ddd;font-size:.97rem}
.port .hm__btns{display:flex;flex-wrap:wrap;gap:12px}
.port .hm__btns .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25}
.port .hm__ticks{margin:0 0 24px}
.port .hm__info{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.port .hm__info li{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#171717}
.port .hm__info small{display:block;font:700 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin-bottom:8px}
.port .hm__info span,.port .hm__info a{font-weight:600;font-size:1.05rem;line-height:1.4}
.port .hm__info a{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
.port.hm--consult{background:var(--bk2)}
.port .hm__box{border:1px solid rgba(255,0,0,.45);border-radius:28px;padding:clamp(28px,5vw,56px);background:radial-gradient(120% 140% at 100% 0%,rgba(255,0,0,.18),transparent 55%),#161616}
.port .hm__box .muted{margin:0 0 26px}
.port .hm__box .h2{margin-bottom:18px}
@media(max-width:799px){.port .hm__img{aspect-ratio:4/3}.port .hm__split--rev .hm__img{order:2}}
@media(min-width:800px){
 .port .hm__plans{grid-template-columns:1fr 1fr;align-items:stretch}
 .port .hm__split{grid-template-columns:1.15fr .85fr}
 .port .hm__split--rev{grid-template-columns:.85fr 1.15fr}
 .port .hm__info{grid-template-columns:1fr 1fr}
}

/* plans update: 3rd plan (3-month), launch tag, competition prep strip, in-person modes */
.port .hm__plan--3m{border-color:rgba(255,255,255,.28)}
.port .hm__plan--3m .hm__price span{color:#fff}
.port .hm__launch{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-4px 0 16px;font:700 .68rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#ffd84d}
.port .hm__comp{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:18px;padding:clamp(22px,3.5vw,32px);border:1px dashed rgba(255,255,255,.28);border-radius:24px;background:#141414}
.port .hm__comp-copy{min-width:0;flex:1 1 280px}
.port .hm__comp .hm__tag{margin-bottom:10px}
.port .hm__comp-t{font:400 clamp(1.5rem,2.8vw,2rem)/1.05 var(--disp);text-transform:uppercase;margin:0 0 8px;overflow-wrap:break-word}
.port .hm__comp p:last-child{margin:0;color:#ddd}
.port .hm__comp .hm__cta{margin-top:0}
.port .hm__modes{display:grid;gap:14px;margin:0 0 28px}
.port .hm__mode{display:flex;flex-direction:column;gap:0;padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:#171717;min-width:0}
.port .hm__mode-k{font:700 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.port .hm__mode-t{font:400 1.45rem/1.05 var(--disp);text-transform:uppercase;margin:0 0 8px;overflow-wrap:break-word}
.port .hm__mode p:not(.hm__mode-k){margin:0 0 16px;color:#ddd;font-size:.97rem}
.port .hm__mode-a{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font:700 .74rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:4px}
.port .hm__mode-a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(min-width:560px){.port .hm__modes{grid-template-columns:1fr 1fr}}
@media(min-width:800px) and (max-width:1099px){.port .hm__plan--3m{grid-column:1/-1}}
@media(min-width:1100px){.port .hm__plans{grid-template-columns:repeat(3,1fr)}}

/* homepage top: online / at-the-gym chooser in the hero */
.pick{position:relative;margin:26px 0 0}
.pick__h{font:700 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.pick__h::before{content:"";width:24px;height:2px;background:var(--red)}
.pick__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick__b{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:118px;padding:14px 14px 40px;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:rgba(20,20,20,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;text-decoration:none;min-width:0;transition:border-color .25s,background .25s,transform .25s}
.pick__b--online{background:linear-gradient(160deg,rgba(255,0,0,.92),rgba(150,0,0,.92));border-color:var(--red)}
.pick__k{font:700 .6rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.pick__b--online .pick__k{color:#fff;opacity:.85}
.pick__t{font:400 clamp(1.25rem,5.4vw,1.6rem)/1.02 var(--disp);text-transform:uppercase;overflow-wrap:break-word;max-width:100%}
.pick__s{font:600 .78rem/1.3 var(--sans);color:#d6d6d6}
.pick__b--online .pick__s{color:#fff}
.pick__arr{position:absolute;left:14px;bottom:14px}
.pick__b:hover{border-color:#fff}
.pick__b:active{transform:scale(.98)}
.pick__b:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(min-width:900px){.pick{margin-top:34px}.pick__grid{grid-template-columns:repeat(4,1fr);gap:14px}.pick__b{min-height:150px;padding:20px 20px 50px}.pick__arr{left:20px;bottom:20px}}
@media(prefers-reduced-motion:reduce){.pick__b{transition:none}}
/* section bands: ONLINE vs AT THE GYM */
.port.hm[id]{scroll-margin-top:60px}
.port.hm .zone{margin:calc(-1*clamp(64px,10vw,120px)) 0 clamp(40px,6vw,64px);padding:14px 0;border-bottom:1px solid var(--line)}
.port .zone__in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.port .zone__k{font:400 clamp(1.5rem,5vw,2rem)/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;padding:6px 12px 5px;border-radius:8px}
.port .zone__t{font:700 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;min-width:0}
.port .zone--online{background:#120808}
.port .zone--online .zone__k{color:var(--red);border:2px solid var(--red)}
.port .zone--online .zone__t{color:#ddd}
.port .zone--gym{background:var(--red);border-bottom-color:var(--red)}
.port .zone--gym .zone__k{color:var(--red);background:#fff}
.port .zone--gym .zone__t{color:#fff}
.port.hm--online::before{top:12%}
/* class section: self-hosted reel (player + sound toggle from classreel.css/js) */
.port .hm__img--v{aspect-ratio:4/5}
.port .hm__img--v .pv{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:599px){.hero__in{padding-top:56px;padding-bottom:22px}.pick{margin-top:20px}.pick__b{min-height:108px;padding:13px 13px 36px}.pick__arr{bottom:12px;left:13px}}

.port .hm__img--coach picture{display:block;width:100%;height:100%}.port .hm__img--coach img{object-position:50% 22%}

/* app section: two real app screens side by side (workout + meals).
   Images are full 390x844 iPhone captures (19.5:9), so the frame is a thin even bezel with the notch drawn over the screen. */
.proof .phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(28px,5vw,64px);width:100%}
.proof .phones .phone{width:min(270px,42vw);flex:none;padding:9px;border-radius:44px}
.proof .phones .phone::before{z-index:2;top:19px;width:74px;height:21px;margin-left:-37px;border-radius:12px}
.proof .phones .phone img{display:block;border-radius:35px}
.proof .phones .phone--r{margin-top:56px}
@media(max-width:599px){
 .proof .phones{gap:20px}
 .proof .phones .phone{width:calc(50% - 10px);max-width:190px;border-radius:28px;padding:5px;box-shadow:0 0 0 5px #151515,0 0 0 6px rgba(255,255,255,.08),0 30px 60px -24px #000,0 0 80px -24px rgba(255,0,0,.45)}
 .proof .phones .phone::before{top:11px;width:44px;height:12px;margin-left:-22px;border-radius:8px}
 .proof .phones .phone img{border-radius:23px}
 .proof .phones .phone--r{margin-top:36px}
}