/* Forge v3 · the landing around the app (Ember). Phone first. Every moving thing is still under reduced motion. */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
body.book-on,body.modal-on{overflow:hidden}
.mono,.fx-chip,.s-kick{font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace}

/* ---------- Ember behind the whole page ---------- */
.hexplate-page{display:block;position:fixed;inset:0;z-index:0}
.s-fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.s-fx canvas{position:absolute;inset:0;width:100%;height:100%}
.site,.s-head,.s-sticky{position:relative;z-index:2}

/* #fsplash: the F draws itself on, then FORGE rises */
#fsplash .fs-mark{position:absolute;left:50%;top:calc(50% - 92px);width:64px;height:64px;transform:translateX(-50%);z-index:2;opacity:0}
#fsplash .fs-mark polygon{fill:none;stroke:#ff6a1f;stroke-width:.9;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90}
#fsplash.mark .fs-mark{opacity:1;transition:opacity .3s}
#fsplash.mark .fs-mark polygon{animation:fsdraw 1.3s .1s cubic-bezier(.6,.1,.3,1) forwards}
#fsplash.word .fs-mark polygon{fill:#ff6a1f;transition:fill .5s}
@keyframes fsdraw{to{stroke-dashoffset:0}}

/* ---------- header plaque ---------- */
.s-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;height:58px;padding:0 16px;
  background:linear-gradient(180deg,#24262A,#17181B);border-bottom:1px solid var(--line-2);box-shadow:0 6px 24px rgba(0,0,0,.45)}
.s-head .mark{color:var(--fg);text-decoration:none;min-height:44px}
.s-headr{display:flex;align-items:center;gap:8px}
.s-lang{min-height:44px;min-width:64px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--faint);font-family:var(--display);letter-spacing:.12em;font-size:14px;cursor:pointer}
.s-lang .on{color:var(--fg)}
.s-headbook{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,122,51,.6);background:rgba(255,90,31,.12);color:var(--fg);font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:14px;cursor:pointer}
.s-headbook:focus-visible,.s-lang:focus-visible{outline:2px solid var(--ember-hot);outline-offset:2px}

/* ---------- hero: the film fills the first screen ---------- */
.s-hero{position:relative;min-height:calc(100svh - 58px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.s-hero-media{position:absolute;inset:0;background:#000}
.s-hero-media img,.s-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-hero-media video{opacity:0;transition:opacity .6s ease}.s-hero-media video.play{opacity:1}
.s-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,14,.2) 0,rgba(11,12,14,0) 18%,rgba(11,12,14,.25) 34%,rgba(11,12,14,.86) 52%,var(--bg) 78%)}
.s-hero-copy{position:relative;z-index:2;padding:0 20px 28px;max-width:680px}
.s-hero-copy h1{font-size:44px;margin-top:10px}
.s-hero-copy .lede{margin-top:12px;font-size:17px}
.s-hero-copy .coachline{position:static;margin-top:18px;display:flex;align-items:center;gap:12px}
.s-hero-copy .coachline img{width:44px;height:44px}
.s-hero-copy .coachline p{display:grid;gap:0;margin:0}
.s-hero-copy .coachline p b{font-size:18px}
.s-refund{display:flex;gap:8px;align-items:flex-start;margin-top:12px;color:var(--muted);font-size:16px}
.s-refund svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--ember-hot)}
.s-watch{margin-top:6px}
.s-watchbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;text-align:left}
.s-watchbtn svg{width:20px;height:20px;flex:none;color:var(--ember-hot)}
.s-watchbtn u{color:var(--fg);text-decoration-color:rgba(255,122,51,.7);text-underline-offset:3px}
.s-watchbtn:focus-visible{outline:2px solid var(--ember-hot);outline-offset:3px;border-radius:6px}
h1 em,h2 em,.s-pull em{font-style:italic;font-synthesis:style;color:var(--ember-hot);display:inline-block;padding:.22em .26em;margin:-.22em -.22em;
  text-shadow:0 0 10px rgba(194,52,26,.55),0 0 3px rgba(255,150,80,.6);animation:emberglow 5.6s ease-in-out infinite}

/* ---------- overlays tied to each clip (fx) ---------- */
.fx{position:absolute;z-index:3;pointer-events:none;display:flex;align-items:center;gap:8px}
.fx-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;background:rgba(11,12,14,.72);border:1px solid rgba(255,122,51,.42);color:var(--fg);font-size:12px;letter-spacing:.08em;line-height:1.2;white-space:nowrap;box-shadow:0 0 18px rgba(194,52,26,.25)}
.fx-chip b{font-weight:600;color:#FFC08F;font-variant-numeric:tabular-nums}
.fx-dot{width:7px;height:7px;border-radius:50%;background:var(--ember-hot);box-shadow:0 0 8px var(--ember);flex:none}
.fx.run .fx-dot{animation:fxpulse 1.6s ease-in-out infinite}
@keyframes fxpulse{50%{opacity:.35;transform:scale(.8)}}
.fx-bar{display:block;position:relative;width:70px;height:3px;border-radius:3px;background:rgba(242,239,234,.16);overflow:hidden}
.fx-bar>i{position:absolute;inset:0;background:linear-gradient(90deg,var(--ember-deep),var(--ember-hot));transform-origin:left;transform:scaleX(.08);transition:transform .5s var(--ease)}
/* hero: plates go on, PR lands */
.fx-pr{top:14px;left:14px}
.fx-stamp{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px solid var(--ember-hot);color:var(--ember-hot);font-family:var(--display);font-weight:600;letter-spacing:.06em;font-size:15px;background:rgba(11,12,14,.6);
  opacity:0;transform:scale(1.6) rotate(-14deg)}
.fx-pr.peak .fx-stamp{opacity:1;transform:scale(1) rotate(-14deg);transition:transform .32s cubic-bezier(.3,1.6,.5,1),opacity .2s;box-shadow:0 0 18px rgba(255,90,31,.55)}
/* deposit: light sweeps the rack, your spot is held */
.fx-held{inset:0;align-items:flex-end;padding:12px}
.fx-sweep{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,122,51,.16) 45%,rgba(255,220,180,.2) 50%,rgba(255,122,51,.16) 55%,transparent 70%);background-size:260% 100%;background-position:120% 0;mix-blend-mode:screen}
.fx-held.run .fx-sweep{animation:sweep 5s 1s ease-in-out infinite}
.fx-held .fx-chip{position:relative}
@keyframes sweep{0%{background-position:120% 0}40%,100%{background-position:-60% 0}}
/* train: rest timer */
.fx-rest{left:10px;top:10px}
.fx-ring{width:34px;height:34px;transform:rotate(-90deg)}
.fx-ring circle{fill:rgba(11,12,14,.6);stroke:rgba(242,239,234,.18);stroke-width:3}
.fx-ring .fx-ring-a{fill:none;stroke:var(--ember-hot);stroke-dasharray:106.8;stroke-dashoffset:0;stroke-linecap:round}
.fx-rest.peak .fx-chip{border-color:var(--ember-hot);box-shadow:0 0 22px rgba(255,90,31,.6)}
/* sheet: sets */
.fx-sets{left:10px;bottom:10px}
.fx-pips{display:flex;gap:4px}.fx-pips i{width:16px;height:4px;border-radius:2px;background:rgba(242,239,234,.25)}.fx-pips i.on{background:var(--ember-hot);box-shadow:0 0 6px var(--ember)}
/* you: heart rate */
.fx-bpm{left:0;right:0;bottom:8px;padding:0 10px;justify-content:space-between}
.fx-ecg{flex:1;height:30px;min-width:0}
.fx-ecg path{fill:none;stroke:var(--ember-hot);stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(255,90,31,.8));stroke-dasharray:260;stroke-dashoffset:0}
.fx-bpm.run .fx-ecg path{animation:ecg 2.4s linear infinite}
@keyframes ecg{from{stroke-dashoffset:260}to{stroke-dashoffset:-260}}
/* food: kcal */
.fx-kcal{left:10px;bottom:10px;flex-direction:column;align-items:flex-start;gap:6px}
.fx-kcal .fx-bar>i{transform:scaleX(1);transition:none}
.fx-kcal.run .fx-bar>i{animation:fill 3.6s ease-out infinite}
@keyframes fill{from{transform:scaleX(.05)}60%,to{transform:scaleX(1)}}
/* kettlebells: reps */
.fx-reps{left:12px;bottom:12px;flex-direction:column;align-items:flex-start;gap:6px}
/* dawn gym: doors open, the week fills */
.fx-dawn{left:12px;bottom:12px;flex-direction:column;align-items:flex-start;gap:6px}
.fx-week{display:flex;gap:4px}
.fx-week i{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;font-style:normal;font-family:var(--display);font-size:11px;color:var(--faint);background:rgba(11,12,14,.65);border:1px solid var(--line-2)}
.fx-week i.on{color:var(--ember-ink);background:var(--ember-hot);border-color:var(--ember-hot);box-shadow:0 0 8px rgba(255,90,31,.6)}
.fx-dawn.peak .fx-chip{border-color:var(--ember-hot)}
/* add-on: macros */
.fx-macro{left:10px;bottom:10px}

/* ---------- marquee ---------- */
.s-marquee{position:relative;overflow:hidden;border-block:1px solid var(--line);background:rgba(11,12,14,.75);padding:12px 0}
.s-mq{display:flex;width:max-content;align-items:center;gap:22px;animation:mq 46s linear infinite;animation-play-state:paused}
.s-marquee.vis .s-mq{animation-play-state:running}
.s-mq span{font-family:var(--display);letter-spacing:.2em;font-size:15px;color:var(--muted)}
.s-mq i{width:9px;height:9px;flex:none;background:var(--ember);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);opacity:.8}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- columns: on phones one column with the phone after "The Forge app"; on desktop the phone rides along ---------- */
.s-cols{display:flex;flex-direction:column}
#compare{order:1}#before-after{order:2}#get{order:3}.s-counts{order:4}#who{order:5}#change{order:6}#how{order:7}#app-intro{order:8}.s-cols>.stage{order:9}#offer{order:10}#coach{order:11}#archive{order:12}#faq{order:13}#where{order:14}#ask{order:15}
.s-sec{position:relative;padding:56px 20px 8px}
.s-sec>.eyebrow{font-size:13px}
.s-sec h2{font-size:38px;margin-top:10px}
.s-sec .lede{margin-top:14px}
.s-sec[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.s-sec[data-rv].in{opacity:1;transform:none}
.s-kick{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0}

/* the phone (the client app), framed */
.s-cols>.stage{padding:20px 16px 8px;display:flex;flex-direction:column;align-items:center;gap:12px}
.s-cols .phone{display:block;width:100%;max-width:400px;padding:8px;border-radius:40px;background:#050506;border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 5px #121316 inset}
.s-cols .flow{height:min(760px,82svh);max-width:none;margin:0;border:0;border-radius:32px}
.s-cols .hint{display:block;color:var(--faint);font-size:13px;font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;text-align:center}
.bookx{display:none;min-width:44px;min-height:44px;margin-right:-10px;border:0;background:none;color:var(--muted);cursor:pointer}
.bookx svg{width:22px;height:22px}
/* phone-size typography inside the framed app on every screen size */
@media (min-width:700px){
  .s-cols .flow .screen{padding:20px 20px 28px}
  .s-cols .flow .bar,.s-cols .flow .apphead{padding-left:20px;padding-right:20px}.s-cols .flow .progress{margin-left:20px;margin-right:20px}
  .s-cols .flow .screen h1{font-size:44px}.s-cols .flow .screen h2{font-size:38px}
  .s-cols .flow .lede{font-size:17px}
  .s-cols .flow .days{gap:10px}.s-cols .flow .day{min-height:60px;font-size:16px}
  .s-cols .flow .checkout{padding:20px}.s-cols .flow .co-row{font-size:16px}
}
/* Book on a phone or tablet: the checkout takes the whole screen; × closes it */
body.book-on .s-cols>.stage{position:fixed;inset:0;z-index:80;padding:0;background:var(--bg)}
body.book-on .s-cols .phone{max-width:none;height:100%;padding:0;border:0;border-radius:0;box-shadow:none;background:var(--bg)}
body.book-on .s-cols .flow{height:100dvh;border-radius:0;max-width:620px;margin:0 auto}
body.book-on .hint{display:none}
body.book-on .bookx{display:grid;place-items:center}
body.book-on .count{margin-left:auto;margin-right:12px}
.co-refund{margin-top:12px;color:var(--muted);font-size:14px;text-align:center}

/* the brand stamp (signature moment): white-hot, cooling to steel */
.brand{position:relative;width:220px;height:150px;margin:0 auto 18px}
.brand-plate{position:absolute;inset:0;border-radius:14px;background:linear-gradient(160deg,#2a2c31,#17181b 60%,#202227);border:1px solid #3a3d44;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.6),0 14px 34px rgba(0,0,0,.55);overflow:hidden}
.brand-plate::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.brand-mark{position:absolute;inset:0;display:grid;grid-template-columns:auto auto;align-content:center;justify-content:center;column-gap:12px;row-gap:2px;color:#8d929b;
  text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.7)}
.brand-mark svg{grid-row:1/span 3;width:54px;height:54px;align-self:center;filter:drop-shadow(0 1px 0 rgba(255,255,255,.12)) drop-shadow(0 -1px 0 rgba(0,0,0,.7))}
.brand-mark b{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:.12em;line-height:1}
.brand-mark span{font-family:var(--display);font-size:14px;letter-spacing:.14em}
.brand-mark em{font-style:normal;font-family:var(--display);font-size:11px;letter-spacing:.34em}
.brand-spark{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#fff1d6;box-shadow:0 0 6px #ffb35c,0 0 12px #ff5a1f;opacity:0}
.stamping .brand-mark{animation:brandheat 2.6s cubic-bezier(.2,.7,.2,1) both}
.stamping .brand{animation:brandpress .42s cubic-bezier(.2,1.5,.4,1) both}
.stamping .brand-spark{animation:spark .7s .12s ease-out both}
.stamping .s1{--dx:-90px;--dy:-60px}.stamping .s2{--dx:80px;--dy:-70px}.stamping .s3{--dx:-110px;--dy:10px}.stamping .s4{--dx:110px;--dy:-10px}.stamping .s5{--dx:-40px;--dy:-90px}.stamping .s6{--dx:50px;--dy:-95px}
@keyframes brandpress{0%{transform:scale(1.18) translateY(-14px);opacity:0}60%{transform:scale(.97);opacity:1}100%{transform:none}}
@keyframes brandheat{0%{color:#fff6e2;text-shadow:0 0 18px #fff,0 0 34px #ffb35c,0 0 60px #ff5a1f}25%{color:#ffd28a;text-shadow:0 0 14px #ffb35c,0 0 30px #ff5a1f}55%{color:#ff7a33;text-shadow:0 0 10px rgba(255,90,31,.8)}80%{color:#a3533a;text-shadow:0 0 4px rgba(194,52,26,.4)}100%{color:#8d929b;text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.7)}}
@keyframes spark{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)))}}
.paid{padding-top:22px}

/* ghost finger: shows the phone is live */
.ghost-cursor{position:absolute;left:0;top:0;z-index:9;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:radial-gradient(circle,rgba(255,240,220,.85) 0 30%,rgba(255,122,51,.35) 31% 60%,transparent 62%);opacity:0;pointer-events:none;transform:translate(var(--gx,50%),var(--gy,50%))}
.ghost-cursor.tap{animation:ghost 1.8s ease-in-out both}
@keyframes ghost{0%{opacity:0;transform:translate(calc(var(--gx) + 60px),calc(var(--gy) + 90px)) scale(1)}35%{opacity:.95;transform:translate(var(--gx),var(--gy)) scale(1)}48%{transform:translate(var(--gx),var(--gy)) scale(.72)}60%{transform:translate(var(--gx),var(--gy)) scale(1.05)}100%{opacity:0;transform:translate(var(--gx),var(--gy)) scale(1.3)}}

/* ---------- comparison + the bar that loads with the scroll ---------- */
.s-load{margin-top:22px;--load:0}
.s-load-top{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);letter-spacing:.18em;font-size:13px;color:var(--faint)}
.s-load-top b{font-weight:500;font-size:28px;letter-spacing:.04em;color:var(--fg)}
.s-load-top b i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ember-hot);text-shadow:0 0 10px rgba(194,52,26,.5)}
.s-bar{position:relative;height:64px;margin-top:6px}
.s-shaft{position:absolute;left:8%;right:8%;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:linear-gradient(180deg,#9a9ea6,#5b5f66)}
.s-sleeve{position:absolute;top:50%;width:14%;height:10px;margin-top:-5px;border-radius:3px;background:linear-gradient(180deg,#c9ccd2,#6d7178)}
.s-sleeve.l{left:0}.s-sleeve.r{right:0}
.s-plates{position:absolute;top:50%;display:flex;gap:2px;transform:translateY(-50%)}
.s-plates.l{left:12%;flex-direction:row-reverse}.s-plates.r{right:12%}
.s-plates::before,.s-plates::after{content:""}
.s-load .s-plates{--n:0}
.s-load[data-plates="1"] .s-plates{--n:1}.s-load[data-plates="2"] .s-plates{--n:2}.s-load[data-plates="3"] .s-plates{--n:3}.s-load[data-plates="4"] .s-plates{--n:4}
.s-plates{width:calc(var(--n) * 14px);height:60px;background:repeating-linear-gradient(90deg,#1b1c20 0 10px,#c2341a 10px 11px,#1b1c20 11px 12px,transparent 12px 14px);border-radius:3px;transition:width .35s cubic-bezier(.3,1.4,.5,1);box-shadow:0 0 calc(var(--n) * 6px) rgba(194,52,26,.35)}
.s-table{margin-top:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line-2);overflow:hidden}
.s-tr{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:10px;padding:12px 14px;border-top:1px solid var(--line);font-size:15px;align-items:start}
.s-tr:first-child{border-top:0}
.s-th{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--faint);background:var(--surface-2)}
.s-th span:last-child{color:var(--ember-hot)}
.s-tr [role=rowheader]{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--faint);padding-top:2px}
.s-tr [role=cell]{display:flex;gap:6px;align-items:flex-start}
.s-tr [role=cell] svg{width:15px;height:15px;flex:none;margin-top:3px}
.s-tr [role=cell]:nth-child(2){color:var(--muted)}.s-tr [role=cell]:nth-child(2) svg{color:#6c6f76}
.s-tr [role=cell]:nth-child(3) svg{color:var(--ember-hot)}
/* divider: ember line, the F, ember line */
.s-div{display:flex;align-items:center;gap:12px;margin:34px auto 0;max-width:360px;color:var(--ember)}
.s-div i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,122,51,.7))}.s-div i:last-child{background:linear-gradient(90deg,rgba(255,122,51,.7),transparent)}
.s-div svg{width:18px;height:18px;filter:drop-shadow(0 0 6px rgba(255,90,31,.6))}

/* ---------- before / after ---------- */
.s-bawrap{position:relative;margin-top:20px;height:420px;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);background:#0f1013;touch-action:pan-y;--ba:50%}
.s-baside{position:absolute;inset:0;display:grid;place-items:center}
.s-before{background:radial-gradient(80% 70% at 50% 40%,#22201d,#0f1013)}
.s-after{clip-path:inset(0 0 0 var(--ba));background:radial-gradient(80% 70% at 50% 40%,#2a150c,#0f1013)}
.s-mphone{width:210px;height:370px;border-radius:30px;padding:8px;background:#050506;border:1px solid #2c2e33;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.s-notes{height:100%;border-radius:23px;background:#f4efe3;color:#3a352d;padding:16px 14px;font-size:14px;line-height:1.45;position:relative;font-family:var(--body)}
.s-notes p{margin:0 0 6px}.s-notes .s-nh{font-weight:600;font-size:17px;margin-bottom:10px}
.s-notes s{color:#9b9384}.s-notes span{color:#9b9384}
.s-notif{position:absolute;left:8px;right:8px;bottom:10px;padding:8px 10px;border-radius:12px;background:rgba(40,38,34,.94);color:#f3efe6;font-size:12px;line-height:1.3;display:grid;gap:2px}
.s-notif b{font-size:10px;letter-spacing:.14em;color:#c9c2b4}
.s-mapp{height:100%;border-radius:23px;background:#0b0c0e;color:var(--fg);padding:14px 12px;display:flex;flex-direction:column;gap:7px;border:1px solid #1f2024;position:relative;overflow:hidden}
.s-mapp::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-30%;height:50%;background:radial-gradient(60% 55% at 50% 100%,rgba(194,52,26,.35),transparent 70%)}
.s-mh{display:flex;align-items:center;gap:6px;font-family:var(--display);letter-spacing:.14em;font-size:14px}
.s-mh svg{width:16px;height:16px}.s-mh small{margin-left:auto;color:var(--faint);font-size:10px}
.s-mcard{border-radius:12px;padding:10px;background:var(--surface);border:1px solid var(--line-2);display:grid;gap:2px}
.s-mcard small{font-family:var(--display);letter-spacing:.16em;font-size:9px;color:var(--faint)}
.s-mcard b{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:20px}
.s-mcard span{font-size:11px;color:var(--muted)}
.s-mrow{display:flex;justify-content:space-between;padding:7px 9px;border-radius:9px;background:var(--surface);border:1px solid var(--line);font-size:11px}
.s-mrow b{color:var(--ember-hot);font-weight:600}.s-mmac b{color:var(--fg);font-weight:500}
.s-balbl{position:absolute;top:12px;font-family:var(--display);letter-spacing:.2em;font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(11,12,14,.7);border:1px solid var(--line-2)}
.s-before .s-balbl{left:12px;color:var(--muted)}.s-after .s-balbl{right:12px;color:var(--ember-hot);border-color:rgba(255,122,51,.55)}
.s-bahandle{position:absolute;top:0;bottom:0;left:var(--ba);width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,var(--ember-hot) 20%,var(--ember-hot) 80%,transparent);box-shadow:0 0 12px rgba(255,90,31,.7);pointer-events:none}
.s-bahandle i{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#141518;border:2px solid var(--ember-hot);box-shadow:0 0 16px rgba(255,90,31,.5)}
.s-bahandle i::before,.s-bahandle i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent}
.s-bahandle i::before{left:5px;border-right-color:var(--ember-hot)}.s-bahandle i::after{right:5px;border-left-color:var(--ember-hot)}
.s-barange{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.s-barange:focus-visible+.s-bahandle,.s-bawrap:focus-within .s-bahandle i{outline:2px solid var(--fg);outline-offset:2px}
.s-bawrap.hint:not(.touched){animation:bahint 2.4s ease-in-out}
@keyframes bahint{0%,100%{--ba:50%}30%{--ba:30%}70%{--ba:68%}}
@property --ba{syntax:'<percentage>';inherits:true;initial-value:50%}

/* ---------- what you get: framed loop, ticks, drifting chips ---------- */
.s-frame{position:relative;margin-top:18px;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line-2)}
.s-frame img,.s-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-frame video{opacity:0;transition:opacity .6s ease}.s-frame video.play{opacity:1}
.s-ticks{margin-top:18px}
.s-ticks li svg,.s-tl .s-tick svg{transition:transform .45s cubic-bezier(.2,1.5,.4,1),opacity .3s,filter .3s;opacity:.25;transform:scale(.7)}
.s-ticks li.ticked svg{opacity:1;transform:none;filter:drop-shadow(0 0 6px rgba(255,90,31,.6))}
.s-kit{margin-top:26px;padding:20px 0 22px;border-radius:18px;background:radial-gradient(120% 90% at 50% 0%,rgba(255,90,31,.08),transparent 60%),var(--surface);border:1px solid var(--line-2);overflow:hidden}
.s-kit .s-kick{padding:0 18px 12px;text-align:center}
.s-chiprow{overflow:hidden;padding:5px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.s-chiptrack{display:flex;gap:8px;width:max-content;animation:mq 38s linear infinite;animation-play-state:paused}
.s-chiprow[data-dir=r] .s-chiptrack{animation-direction:reverse;animation-duration:44s}
.s-kit.vis .s-chiptrack{animation-play-state:running}
.s-chiptrack span{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:#17181B;border:1px solid var(--line-2);font-size:14px;white-space:nowrap;color:var(--fg)}
.s-chiptrack span::before{content:"";width:7px;height:7px;flex:none;background:var(--ember);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}

/* ---------- counters ---------- */
.s-counts{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:44px}
.s-count{padding:16px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);display:grid;gap:4px}
.s-count b{font-family:var(--display);font-weight:500;font-size:48px;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.s-count b i{font-style:normal}
.s-count:last-child b{color:var(--ember-hot);text-shadow:0 0 14px rgba(194,52,26,.55)}
.s-count span{color:var(--muted);font-size:15px;line-height:1.35}

/* ---------- who it's for ---------- */
.s-frame-wide{aspect-ratio:16/9}
.s-voice{font-size:18px;color:var(--fg)}
.s-for{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.s-for li{position:relative;padding-left:24px;color:var(--muted)}
.s-for li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;background:var(--ember);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}

/* ---------- projector deck ---------- */
.s-proj{position:relative;margin-top:20px;border-radius:20px;background:#0d0e10;border:1px solid var(--line-2);overflow:hidden;outline:0;box-shadow:inset 0 0 60px rgba(0,0,0,.7)}
.s-proj:focus-visible{outline:2px solid var(--ember-hot);outline-offset:3px}
.s-proj::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 45%,rgba(255,180,110,.08),transparent 70%);pointer-events:none;z-index:1;animation:projflicker 3.2s steps(2) infinite}
@keyframes projflicker{50%{opacity:.85}}
.s-slides{position:relative;min-height:300px}
.s-slide{position:absolute;inset:0;padding:22px 20px 18px;opacity:0;visibility:hidden}
.s-slide.on{position:relative;opacity:1;visibility:visible}
.s-sn{position:absolute;right:14px;top:4px;font-family:var(--display);font-weight:600;font-size:110px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,122,51,.35)}
.s-sw{font-family:var(--display);letter-spacing:.2em;font-size:13px;color:var(--ember-hot);text-transform:uppercase}
.s-slide h3{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:32px;line-height:1.05;margin:8px 0 10px;max-width:70%}
.s-slide p{color:var(--muted);max-width:34ch}
.s-wk{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:18px}
.s-wk i{height:8px;border-radius:2px;background:rgba(242,239,234,.1)}
.s-wk i.f{background:rgba(255,122,51,.35)}.s-wk i.now{background:var(--ember-hot);box-shadow:0 0 6px rgba(255,90,31,.6)}
.s-wk.nx i.f{background:rgba(255,122,51,.55)}
.s-projgate{position:absolute;inset:0;z-index:3;background:#000;opacity:0;pointer-events:none;transition:opacity .16s}
.s-proj.gate .s-projgate{opacity:1}
.s-proj.shake .s-slides{animation:projshake .38s steps(6)}
@keyframes projshake{0%{transform:translate(0,-4px)}20%{transform:translate(1px,2px)}40%{transform:translate(-1px,-1px)}60%{transform:translate(1px,1px)}80%{transform:translate(0,-1px)}100%{transform:none}}
.s-projnav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:6px 8px 10px}
.s-pbtn{min-width:48px;min-height:48px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--fg);display:grid;place-items:center;cursor:pointer}
.s-pbtn svg{width:20px;height:20px}
.s-pbtn:focus-visible{outline:2px solid var(--ember-hot);outline-offset:2px}
.s-pdots,.s-sdots{display:flex;gap:6px;justify-content:center}
.s-pdots i,.s-sdots i{width:8px;height:8px;border-radius:50%;background:var(--line-2);cursor:pointer}
.s-pdots i.on,.s-sdots i.on{width:22px;border-radius:4px;background:var(--ember-hot)}

/* ---------- how it works: timeline ---------- */
.s-tl{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.s-tl li{border-bottom:1px solid var(--line)}
.s-tl button{display:grid;grid-template-columns:44px minmax(0,1fr) 30px;gap:12px;align-items:center;width:100%;min-height:64px;padding:14px 0;background:none;border:0;color:var(--fg);text-align:left;cursor:pointer}
.s-tl button:focus-visible{outline:2px solid var(--ember-hot);outline-offset:2px}
.s-tl b{font-family:var(--display);font-weight:500;font-size:26px;color:var(--ember-hot)}
.s-tl strong{display:block;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:19px}
.s-tl small{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.s-tick{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,122,51,.4)}
.s-tick svg{width:14px;height:14px;color:var(--ember-hot)}
.s-tl li.ticked .s-tick{border-color:var(--ember-hot);box-shadow:0 0 12px -2px rgba(255,90,31,.6)}
.s-tl li.ticked .s-tick svg{opacity:1;transform:none}
.s-tl li>p{display:none;padding:0 0 16px 56px;color:var(--muted)}
.s-tl li.open>p{display:block}

/* ---------- offer + add-ons ---------- */
.s-appintro{padding-bottom:0}
.s-offercard{position:relative;margin-top:14px;padding:24px 20px 18px;border-radius:22px;background:linear-gradient(180deg,#2A2C30,#1A1B1E);border:1px solid rgba(255,122,51,.35);overflow:hidden;box-shadow:0 0 40px -10px rgba(194,52,26,.35)}
.s-offercard>*{position:relative;z-index:1}
.s-offercard .hexplate{z-index:0}
.s-oc-name{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;font-size:14px;color:var(--muted)}
.s-oc-price{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.s-oc-price strong{font-family:var(--display);font-weight:500;font-size:64px;line-height:1;background:linear-gradient(100deg,var(--fg) 42%,#FFC08F 50%,var(--fg) 58%);background-size:320% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:pricesheen 6s 1.2s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(194,52,26,.45))}
.s-oc-price span{color:var(--muted);font-size:18px}
.s-oc-dep{margin-top:6px;color:var(--fg)}
.s-oc-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.s-oc-list li{position:relative;padding-left:22px;color:var(--muted)}
.s-oc-list li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;background:var(--ember);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.s-offercard .actions{margin-top:20px}
.s-addhead{margin-top:30px}
.s-swipe{display:flex;gap:12px;margin:12px -20px 0;padding:0 20px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none;overscroll-behavior-x:contain}
.s-swipe::-webkit-scrollbar{display:none}
.s-addon{flex:0 0 84%;scroll-snap-align:start;border-radius:18px;background:var(--surface);border:1px solid var(--line-2);padding:10px 10px 16px;min-width:0}
.s-addon h3{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:21px;margin:12px 6px 0}
.s-addp{margin:2px 6px 0;font-family:var(--display);color:var(--ember-hot);font-size:18px;letter-spacing:.04em}
.s-addon p:last-child{margin:6px 6px 0;color:var(--muted);font-size:15px}
.s-addmedia{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#0c0d0f;border:1px solid var(--line)}
.s-addmedia img,.s-addmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-addmedia video{opacity:0;transition:opacity .6s ease}.s-addmedia video.play{opacity:1}
.s-addgfx{display:grid;place-items:center;background:radial-gradient(80% 80% at 50% 70%,rgba(194,52,26,.22),transparent 70%),#0c0d0f}
.s-addgfx .fx-chip{position:absolute;left:10px;bottom:10px}
.gfx-path{width:70%;height:78%;overflow:visible}
.gfx-path line{stroke:var(--line-2);stroke-width:1}
.gfx-path .gfx-j{fill:none;stroke:var(--ember-hot);stroke-width:2;stroke-dasharray:4 5;filter:drop-shadow(0 0 3px rgba(255,90,31,.7))}
.gfx-path .gfx-bar{fill:#9a9ea6}
.s-addgfx.run .gfx-bar{animation:barpath 2.8s ease-in-out infinite}
@keyframes barpath{0%,100%{transform:translate(0,98px)}45%{transform:translate(2px,40px)}60%{transform:translate(-2px,20px)}75%{transform:translate(0,4px)}}
.gfx-watch{width:46%;height:auto;overflow:visible}
.gfx-watch circle{fill:none;stroke:var(--line-2);stroke-width:4}
.gfx-watch .gfx-arc{stroke:var(--ember-hot);stroke-dasharray:276.5;stroke-dashoffset:0;stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 64px;filter:drop-shadow(0 0 4px rgba(255,90,31,.6))}
.gfx-watch rect{fill:#9a9ea6}
.gfx-watch .gfx-hand{stroke:var(--fg);stroke-width:3;stroke-linecap:round;transform-origin:60px 64px}
.s-addgfx.run .gfx-arc{animation:arc 6s linear infinite}.s-addgfx.run .gfx-hand{animation:hand 6s linear infinite}
@keyframes arc{to{stroke-dashoffset:276.5}}@keyframes hand{to{transform:rotate(360deg)}}
.s-sdots{margin-top:12px}

/* ---------- coach band: Fig. 01, drop cap, pull quote ---------- */
.s-coach{display:grid;gap:22px}
.s-fig{margin:0;border-radius:18px;overflow:hidden;background:#000;border:1px solid rgba(255,122,51,.45);max-width:360px}
.s-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.s-fig figcaption{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;letter-spacing:.06em;color:var(--muted);background:#0d0e10;border-top:1px solid var(--line)}
.s-fig figcaption span:first-child{color:var(--ember-hot)}
.s-drop{margin-top:16px;font-size:18px;color:var(--fg)}
.s-drop::first-letter{float:left;font-family:var(--display);font-weight:600;font-size:64px;line-height:.86;padding:6px 10px 0 0;color:var(--ember-hot);text-shadow:0 0 14px rgba(194,52,26,.55)}
.s-pull{position:relative;margin:22px 0 0;padding:16px 0 4px 26px;border-left:2px solid var(--ember-hot);font-family:var(--display);text-transform:uppercase;font-size:28px;line-height:1.1}
.s-pull>span[aria-hidden]{position:absolute;left:8px;top:2px;color:var(--ember-hot);font-size:34px}

/* ---------- archive board: framed, pinned, a little crooked ---------- */
.s-board{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.s-pin{margin:0;padding:8px 8px 10px;background:#e9e2d6;border-radius:3px;box-shadow:0 14px 30px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.4);position:relative}
.s-pin::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff9a5c,#c2341a 60%,#5a160a);box-shadow:0 2px 3px rgba(0,0,0,.6)}
.s-pin img{width:100%;height:auto;filter:contrast(1.04)}
.s-pin figcaption{margin-top:7px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;line-height:1.35;color:#3d362c;letter-spacing:.02em}
.s-pin.p1{grid-column:1/-1;transform:rotate(-1.6deg)}
.s-pin.p2{transform:rotate(2.2deg) translateY(6px)}
.s-pin.p3{transform:rotate(-2deg)}
.s-credit{margin-top:14px;color:var(--faint);font-size:14px}

/* ---------- FAQ accordion ---------- */
.s-faq details{margin-top:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);padding:0 16px}
.s-faq details:first-of-type{margin-top:18px}
.s-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;cursor:pointer;font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:18px}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"+";font-family:var(--body);font-size:24px;color:var(--ember-hot);transition:transform .25s}
.s-faq details[open] summary::after{transform:rotate(45deg)}
.s-faq details p{padding:0 0 16px;color:var(--muted)}
.s-faq summary:focus-visible{outline:2px solid var(--ember-hot);outline-offset:2px;border-radius:6px}

/* ---------- map facade ---------- */
.s-mapbox{position:relative;margin-top:18px;aspect-ratio:5/3;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:#17181B}
.s-mapart{position:absolute;inset:0;width:100%;height:100%}
.s-mapart rect{fill:#121316}
.s-mapart .mr{fill:none;stroke:#2a1a12;stroke-width:16}
.s-mapart .ms path{stroke:#24262b;stroke-width:1.2}
.s-mapart .mm path{stroke:#3a3d44;stroke-width:3}
.s-mapart .mp{fill:var(--ember-hot)}
.s-mapart .mpr{fill:none;stroke:var(--ember-hot);stroke-width:2;transform-origin:232px 98px;animation:ping 2.4s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(4);opacity:0}}
.s-mapbtn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);min-height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,122,51,.6);background:rgba(11,12,14,.85);color:var(--fg);font-size:15px;cursor:pointer;white-space:nowrap}
.s-mapbtn:focus-visible{outline:2px solid var(--ember-hot);outline-offset:2px}
.s-mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.6) invert(.9) hue-rotate(180deg) brightness(.85) contrast(.9)}
.s-mapbox.live .s-mapart{display:none}
.s-mapnote{margin-top:10px;color:var(--muted);font-size:15px}

/* ---------- questionnaire ---------- */
.s-form{margin-top:18px;padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line-2);display:grid;gap:14px}
.s-form label{display:grid;gap:6px;font-size:15px;color:var(--muted)}
.s-form input:not([type=radio]),.s-form select{min-height:48px;border-radius:12px;border:1px solid var(--line-2);background:#0e0f12;color:var(--fg);font:inherit;font-size:16px;padding:0 12px}
.s-form input:focus-visible,.s-form select:focus-visible{outline:2px solid var(--ember-hot);outline-offset:1px}
.s-form fieldset{border:0;padding:0;margin:0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.s-form legend{font-size:15px;color:var(--muted);margin-bottom:6px;width:100%}
.s-radio{display:inline-flex!important;position:relative}
.s-radio input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.s-radio span{display:grid;place-items:center;min-width:56px;min-height:48px;border-radius:12px;border:1px solid var(--line-2);background:#0e0f12;color:var(--fg);font-family:var(--display);font-size:18px}
.s-radio input:checked+span{background:linear-gradient(180deg,var(--ember-hot),var(--ember));color:var(--ember-ink);border-color:var(--ember-hot)}
.s-radio input:focus-visible+span{outline:2px solid var(--fg);outline-offset:2px}
.s-formok{color:var(--fg);font-size:15px}
.s-contact{margin-top:14px;color:var(--muted)}

/* ---------- footer: spinning coin, cycling day, one disclaimer ---------- */
.s-foot{position:relative;z-index:2;text-align:center;padding:56px 20px calc(110px + env(safe-area-inset-bottom,0));border-top:1px solid var(--line);margin-top:56px;background:linear-gradient(180deg,transparent,rgba(11,12,14,.9))}
.s-coin{width:64px;height:64px;margin:0 auto;perspective:400px}
.s-coin-in{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3d44,#16171a 70%);border:2px solid #4a4d55;box-shadow:inset 0 0 0 4px #1b1c20,0 0 22px rgba(194,52,26,.35);color:var(--ember);animation:coin 9s linear infinite}
.s-coin-in svg{width:30px;height:30px;filter:drop-shadow(0 0 6px rgba(255,90,31,.6))}
@keyframes coin{to{transform:rotateY(360deg)}}
.s-cycle{margin-top:16px;font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-size:14px}
.s-cyc{display:inline-grid;vertical-align:bottom;height:1.4em;overflow:hidden;color:var(--ember-hot)}
.s-cyc i{grid-area:1/1;font-style:normal;animation:cyc 6s infinite;opacity:0}
.s-cyc i:nth-child(2){animation-delay:2s}.s-cyc i:nth-child(3){animation-delay:4s}
@keyframes cyc{0%{opacity:0;transform:translateY(60%)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-60%)}}
.s-sample{margin-top:14px;color:var(--faint);font-size:14px}
.s-built a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:14px}

/* ---------- sticky Book bar ---------- */
.s-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0));
  background:rgba(14,15,18,.96);border-top:1px solid rgba(255,122,51,.35);box-shadow:0 -10px 30px rgba(0,0,0,.5);transform:translateY(110%);transition:transform .35s var(--ease)}
.s-sticky.on{transform:none}
.s-sticky span{display:grid}.s-sticky b{font-family:var(--display);font-weight:500;font-size:20px}.s-sticky small{color:var(--muted);font-size:13px}
.s-sticky .btn{width:auto;min-width:130px;min-height:48px;padding:0 22px}
body.book-on .s-sticky,body.modal-on .s-sticky{transform:translateY(110%)}

/* ---------- pop-up ---------- */
.s-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px}
.s-modal[hidden]{display:none}
.s-mscrim{position:absolute;inset:0;background:rgba(0,0,0,.78)}
.s-mpanel{position:relative;width:min(420px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:22px;background:#111215;border:1px solid var(--line-2);padding:16px 16px 18px;box-shadow:0 40px 100px rgba(0,0,0,.7)}
.s-mclose{position:absolute;right:8px;top:6px;min-width:44px;min-height:44px;border:0;background:none;color:var(--muted);cursor:pointer;z-index:2}
.s-mclose svg{width:22px;height:22px}
.s-mpanel .eyebrow{padding-right:40px;font-size:13px}
.s-mvid{margin-top:12px;aspect-ratio:9/16;max-height:62dvh;border-radius:14px;overflow:hidden;background:#000;margin-inline:auto}
.s-mvid video{width:100%;height:100%;object-fit:contain;background:#000}
.s-mpanel .actions{margin-top:14px}

/* ---------- tablet ---------- */
@media (min-width:700px){
  .s-hero-copy{padding:0 40px 40px}
  .s-hero-copy h1{font-size:64px;margin-top:18px}
  .s-sec{padding:72px 40px 8px;max-width:760px;margin:0 auto;width:100%}
  .s-sec h2{font-size:52px}
  .s-counts{grid-template-columns:repeat(4,1fr)}
  .s-addon{flex-basis:46%}
  .s-coach{grid-template-columns:300px 1fr;align-items:start}
  .s-board{grid-template-columns:1.2fr 1fr 1fr}.s-pin.p1{grid-column:auto}
  .s-bawrap{height:460px}
}
/* ---------- desktop: the landing on the left, the phone rides along on the right ---------- */
@media (min-width:1100px){
  .s-head{padding:0 32px}
  .s-hero{min-height:calc(88vh - 58px)}
  .s-hero-copy{padding:0 48px 56px;max-width:720px}
  .s-hero-copy h1{font-size:76px}
  .s-hero-media::after{background:linear-gradient(90deg,rgba(11,12,14,.92) 0,rgba(11,12,14,.6) 40%,rgba(11,12,14,.1) 70%),linear-gradient(180deg,transparent 55%,var(--bg))}
  .s-cols{display:grid;grid-template-columns:minmax(0,1fr) 430px;column-gap:64px;max-width:1240px;margin:0 auto;padding:0 48px;align-items:start}
  .s-cols>.s-sec{grid-column:1;max-width:none;margin:0;padding:80px 0 8px}
  .s-cols>.stage{grid-column:2;grid-row:1/span 15;position:sticky;top:76px;align-self:start;padding:40px 0 0}
  .s-cols .phone{width:410px;max-width:none;height:min(820px,calc(100dvh - 140px));aspect-ratio:auto;border-radius:52px;padding:12px}
  .s-cols .flow{height:100%;border-radius:42px}
  .s-addon{flex-basis:44%}
  .s-swipe{margin:12px 0 0;padding:0 0 6px;scroll-padding:0}
  .fx-chip{font-size:13px}
}
@media (max-width:360px){.s-hero-copy h1{font-size:38px}.s-sec h2{font-size:33px}.s-tr{grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);font-size:14px}.s-count b{font-size:40px}.s-oc-price strong{font-size:54px}}
@media (max-height:700px) and (max-width:699px){.s-hero-copy .lede{font-size:16px}.s-hero-copy h1{font-size:38px}.s-hero-copy .coachline{display:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .s-sec[data-rv]{opacity:1;transform:none;transition:none}
  .s-mq,.s-chiptrack,.s-coin-in,.s-cyc i,.s-proj::before,.s-mapart .mpr,h1 em,h2 em,.s-pull em,.s-oc-price strong{animation:none}
  .s-cyc i:first-child{opacity:1;transform:none}
  .s-ticks li svg,.s-tl .s-tick svg{opacity:1;transform:none}
  .s-sticky,.s-bawrap{transition:none}
}
/* in the full-screen booking, the × stays reachable in the app too */
body.book-on .flow.app-on .bar{display:flex;min-height:52px;padding-top:8px}
body.book-on .flow.app-on .count{visibility:hidden}
body.book-on .site{z-index:100}
body.modal-on .site{z-index:1}
/* small phones and long words (ES): header stays on one line, the hero chip never meets the headline, the table stacks its labels */
.s-lang,.s-headbook{white-space:nowrap}
.s-hero{padding-top:64px}
.s-hero-media img,.s-hero-media video{object-position:68% 50%}
@media (max-width:380px){
  .s-head{padding:0 12px}.s-head .mark{font-size:16px;gap:8px}.s-head .mark svg{width:22px;height:22px}
  .s-lang{min-width:0;padding:0 9px;font-size:13px}.s-headbook{padding:0 12px;font-size:13px;letter-spacing:.1em}
  .s-tr{grid-template-columns:1fr 1fr;row-gap:6px}
  .s-tr [role=rowheader]{grid-column:1/-1}
  .s-th span:first-child{display:none}
}
/* no face for the sample coach (Josiah, Oct 18): the F badge, and the coach's name stamped in a steel plate */
.s-badge{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#33363c,#141518 70%);border:1.5px solid rgba(255,122,51,.75);color:var(--ember);box-shadow:0 0 14px rgba(194,52,26,.35)}
.s-badge svg{width:22px;height:22px}
.s-plate{position:relative;aspect-ratio:4/5;border-color:#3a3d44;background:linear-gradient(160deg,#25272c,#141518 55%,#1d1f23)}
.s-plate .hexplate{--hex-opacity:.2}
.s-plate-in{position:absolute;inset:0 0 44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#8d929b;text-align:center;overflow:hidden}
.s-plate-f{width:96px;height:96px;color:#6f747c;filter:drop-shadow(0 1px 0 rgba(255,255,255,.12)) drop-shadow(0 -1px 0 rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(194,52,26,.25))}
.s-plate-name{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:.16em;text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.7)}
.s-plate-sub{font-family:var(--display);font-size:13px;letter-spacing:.24em}
.s-plate-sweep{position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,122,51,.14) 47%,rgba(255,230,200,.18) 50%,rgba(255,122,51,.14) 53%,transparent 65%);background-size:260% 100%;background-position:120% 0;mix-blend-mode:screen;animation:sweep 7s 1.5s ease-in-out infinite}
.s-plate.plate-edge figcaption{position:absolute;left:0;right:0;bottom:0}
@media (prefers-reduced-motion:reduce){.s-plate-sweep{animation:none}}
.s-hero-copy .coachline p span{font-size:16px}
/* the worn-type mask pads headlines by .16em and pulls them back; keep a real gap under the eyebrow */
[data-fatigue] .s-hero-copy h1.fatigue-type{margin-top:calc(14px - .16em)}
[data-fatigue] .s-sec h2.fatigue-type{margin-top:calc(12px - .16em)}
.brand-mark svg{color:inherit}
/* coach plate: when the render lands it plays behind the stamped name */
.s-plate-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.s-plate-vid.play{opacity:.55}

/* closing band: the way back to Demo Sprint */
.s-ds{padding-bottom:0}
.s-ds-card{position:relative;overflow:hidden;border-radius:16px;padding:34px 22px 28px;text-align:center;background:linear-gradient(180deg,#1b1c1f,#0f1012)}
.s-ds-card>*:not(.hexplate){position:relative;z-index:1}
.s-ds-card h2{font-size:32px;max-width:15em;margin:10px auto 0}
.s-ds-card .actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px}
.s-ds-card .btn{max-width:340px;text-decoration:none}
.s-ds-dep{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:15px;text-decoration:underline;text-underline-offset:4px}
.s-ds-dep:hover,.s-built a:hover{color:var(--ember-hot)}
@media (min-width:900px){.s-ds{max-width:860px}.s-ds-card{padding:48px 40px 40px}.s-ds-card h2{font-size:44px}}
@media (max-width:360px){.s-ds-card{padding:28px 16px 22px}.s-ds-card h2{font-size:27px}}
.s-built{color:var(--faint);font-size:14px;margin:0}
/* fix pass Oct 19: on phones the outline block number stays clear of the slide's body copy */
@media (max-width:699px){.s-sn{font-size:72px;top:8px}.s-slide h3{max-width:68%}}

/* ---------- hero words, phones (2026-10-29; tuned same day per Josiah: "a little ambitious… pull back slightly and animate better"): TRAIN / LIVE. / EAT CLEAN. / SHOW UP. about 12% smaller than the first pass; each word rises out of a soft blur into focus, 80 ms apart, and UP. lands last with an ember flare. A fit script steps the size down if any line would not fit (big-text phones) ---------- */
@media (max-width:699px){
  .s-hero-copy h1.hero-big{font-size:18vw;line-height:.95;letter-spacing:.015em}
  html[lang=es] .s-hero-copy h1.hero-big{font-size:14.4vw}
  .hero-big .hl{display:block;white-space:nowrap}
  /* 06g: hero eyebrow and headline centred on phones; the lede, price and notes below stay left */
  .s-hero-copy .eyebrow,.s-hero-copy h1.hero-big{text-align:center}
  .hero-big .hl-c{font-size:.92em;letter-spacing:-.01em}
  .hero-big .hw{display:inline-block}
  .hero-big.hw-wait .hw{opacity:0}
  .hero-big.hw-go .hw{animation:hwfocus .68s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 80ms) both}
  .hero-big.hw-go em.hw{animation:hwfocus .68s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 80ms) both,hwflare 1.6s ease-out calc(var(--i,0) * 80ms + .32s) both}
  .hero-big.hw-done .hw{animation:none;opacity:1}
  .hero-big.hw-done em.hw{animation:emberglow 5.6s ease-in-out infinite}
}
@keyframes hwfocus{0%{opacity:0;transform:translate3d(0,.38em,0);filter:blur(7px)}55%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes hwflare{0%{text-shadow:0 0 6px rgba(194,52,26,.4),0 0 1px rgba(255,190,140,.5)}30%{text-shadow:0 0 28px rgba(255,106,31,.95),0 0 9px rgba(255,170,90,1)}100%{text-shadow:0 0 6px rgba(194,52,26,.4),0 0 1px rgba(255,190,140,.5)}}
@media (prefers-reduced-motion:reduce){.hero-big .hw{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}}
/* 2026-10-29 (06g, Code Gold fix): below the hero, section eyebrows and headings sit centred at every width (inside the left content column on desktop); body text, cards, lists, tables and form fields stay left */
.s-sec>.eyebrow,.s-sec>h2,.s-coach .eyebrow,.s-coach h2{text-align:center;text-wrap:balance}