/* ==========================================================================
   GYMMIE - site.css  (shared by every page)
   Design language: night-black canvas, orange heat-map glow, the slanted
   cut of the G mark, white outline line, film grain.
   ========================================================================== */

@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-wdth-italic.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-wdth-normal.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/caveat-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#060607;
  --ink-2:#0c0c0e;
  --ink-3:#131316;
  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.18);
  --paper:#F4EEE6;
  --text:#F6F2EC;
  --mute:#A6A29B;
  --o1:#FA844F;          /* brand orange */
  --o2:#FF5A1F;          /* hot */
  --o3:#FFB488;          /* soft */
  --heat-0:#3a0904;
  --heat-1:#B3260E;
  --heat-2:#FA5A1F;
  --heat-3:#FFA36B;
  --heat-4:#FFE3CC;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat","Segoe Script",cursive;
  --max:1280px;
  --gut:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --cut:22px;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--o1);color:#140a05}
:focus-visible{outline:2px solid var(--o3);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:10px;z-index:1000;background:#fff;color:#000;padding:10px 16px}
.skip:focus{left:10px}
.wrap{width:min(100% - var(--gut)*2,var(--max));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* film grain over everything */
body::after{content:"";position:fixed;inset:-50%;z-index:900;pointer-events:none;opacity:.075;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- type ---------- */
.display{font-family:var(--display);font-style:italic;font-weight:900;font-stretch:68%;text-transform:uppercase;line-height:.84;letter-spacing:-.01em;word-spacing:.12em}
.heat-text{background:linear-gradient(180deg,var(--heat-4) 0%,var(--heat-3) 28%,var(--heat-2) 62%,var(--heat-1) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:700 .74rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--o3)}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--o1);transform:skewX(-35deg)}
.hand{font-family:var(--hand);font-weight:700;line-height:1}
.ln{display:block;overflow:hidden;padding:.06em .04em .1em;margin:-.06em -.04em -.1em}
.ln>span{display:block;will-change:transform}

/* ---------- cut-corner shape (the G's slanted leaf) ---------- */
.cut{--c:var(--cut);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}

/* ---------- buttons ---------- */
.btn{--c:14px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.75em;min-height:58px;padding:0 1.9em;
  font:800 .86rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#150904;
  background:linear-gradient(100deg,#FF6A2F,#FA844F 55%,#FFA874);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  transition:filter .3s,translate .35s var(--ease);overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-120%) skewX(-20deg);transition:transform .7s var(--ease);z-index:-1}
.btn:hover::before{transform:translateX(120%) skewX(-20deg)}
.btn:hover{filter:brightness(1.06)}
.btn .arr{width:1.25em;height:1.25em;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn--ghost{color:var(--text);background:rgba(255,255,255,.22);padding:0}
.btn--ghost>span{position:relative;display:flex;align-items:center;gap:.75em;min-height:56px;margin:1px;padding:0 calc(1.9em - 1px);background:var(--ink);
  clip-path:polygon(0 0,calc(100% - var(--c) + .4px) 0,100% calc(var(--c) - .4px),100% 100%,calc(var(--c) - .4px) 100%,0 calc(100% - var(--c) + .4px));transition:background .3s}
.btn--ghost:hover>span{background:#16161a}
.btn--ghost::before{display:none}
.btn--sm{min-height:44px;padding:0 1.3em;font-size:.74rem;--c:10px}

/* App Store badge */
.appstore{--c:16px;position:relative;display:inline-flex;align-items:center;gap:14px;height:68px;padding:0 28px 0 20px;color:#fff;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);border-radius:14px;transition:box-shadow .3s,translate .35s var(--ease);overflow:hidden;isolation:isolate}
.appstore::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-130%) skewX(-20deg);transition:transform .8s var(--ease);z-index:-1}
.appstore:hover::before{transform:translateX(130%) skewX(-20deg)}
.appstore:hover{box-shadow:inset 0 0 0 1px #fff,0 18px 50px -12px rgba(250,132,79,.65)}
.appstore svg{width:30px;height:36px;flex:none}
.appstore small{display:block;font:500 .7rem/1 -apple-system,"SF Pro Text","Instrument Sans",sans-serif;letter-spacing:.02em;opacity:.92;margin-bottom:4px}
.appstore strong{display:block;font:600 1.62rem/1 -apple-system,"SF Pro Display","Instrument Sans",sans-serif;letter-spacing:-.02em}

/* ---------- navigation ---------- */
.nav{position:fixed;z-index:500;top:0;left:0;right:0;transition:transform .5s var(--ease),background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(6,6,7,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--line)}
.nav.is-hidden{transform:translateY(-110%)}
.nav-in{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand svg.mark{width:38px;height:38px;transition:transform .5s var(--ease)}
.brand:hover svg.mark{transform:rotate(-8deg) scale(1.06)}
.brand img{width:104px;height:auto}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a:not(.btn){position:relative;padding:10px 14px;font:700 .74rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#D9D5CE;transition:color .25s}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--o1);transform:scaleX(0) skewX(-35deg);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links a:not(.btn):hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-links a:not(.btn):hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1) skewX(-35deg)}
.nav-links .btn{margin-left:10px}
.burger{display:none;width:46px;height:46px;position:relative;z-index:3}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:#fff;transition:transform .4s var(--ease),opacity .3s,top .4s var(--ease)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:27px;right:17px}
.burger[aria-expanded="true"] i:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){top:22px;right:11px;transform:rotate(-45deg)}

.scroll-bar{position:fixed;z-index:600;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--heat-1),var(--o1),var(--heat-4));pointer-events:none}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:var(--ink)}
.loader svg{width:clamp(110px,16vw,170px);height:auto;overflow:visible}
.loader.is-done{pointer-events:none}
html:not(.js) .loader{display:none}

/* ---------- G mark helpers ---------- */
.g-outline path{fill:none;stroke:#fff;stroke-width:5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* ---------- PHONE ---------- */
.phone{--w:300px;position:relative;display:inline-block;padding:calc(var(--w)*.03);border-radius:calc(var(--w)*.178);
  background:linear-gradient(140deg,#9ca0a8 0%,#43464c 10%,#16171a 28%,#0a0a0b 55%,#2b2d32 82%,#8d9199 100%);
  box-shadow:inset 0 0 0 calc(var(--w)*.0225) #050506,inset 0 0 0 calc(var(--w)*.026) rgba(255,255,255,.08),
    0 calc(var(--w)*.18) calc(var(--w)*.34) calc(var(--w)*-.1) rgba(0,0,0,.85),
    0 0 calc(var(--w)*.5) calc(var(--w)*-.12) rgba(250,132,79,.55);
  transform-style:preserve-3d}
.phone::before{content:"";position:absolute;left:calc(var(--w)*-.012);top:calc(var(--w)*.34);width:calc(var(--w)*.014);height:calc(var(--w)*.1);border-radius:3px 0 0 3px;background:linear-gradient(#8a8e96,#3a3d43);
  box-shadow:0 calc(var(--w)*.2) 0 #4a4d54,0 calc(var(--w)*.34) 0 #4a4d54}
.phone::after{content:"";position:absolute;right:calc(var(--w)*-.012);top:calc(var(--w)*.5);width:calc(var(--w)*.014);height:calc(var(--w)*.16);border-radius:0 3px 3px 0;background:linear-gradient(#8a8e96,#3a3d43)}
.phone-screen{position:relative;width:var(--w);aspect-ratio:1179/2556;border-radius:calc(var(--w)*.148);overflow:hidden;background:#000}
.phone-screen img{width:100%;height:100%;object-fit:cover}
.phone-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%);mix-blend-mode:screen}

/* floating UI cards cropped from the real app */
.fcard{position:absolute;z-index:6;filter:drop-shadow(0 28px 40px rgba(0,0,0,.65)) drop-shadow(0 0 1px rgba(255,255,255,.35));will-change:transform}
.fcard img{width:100%;height:auto;border-radius:18px}
.bob{animation:bob 7s ease-in-out infinite}
.bob.b2{animation-duration:9s;animation-delay:-3s}
.bob.b3{animation-duration:8s;animation-delay:-5s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;padding:clamp(110px,14vh,150px) 0 0;overflow:hidden;isolation:isolate;display:flex}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg .glow{position:absolute;right:-8%;top:8%;width:78vw;max-width:1100px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 52%,rgba(255,227,204,.95) 0,var(--heat-3) 7%,var(--heat-2) 18%,var(--heat-1) 34%,rgba(58,9,4,.8) 52%,transparent 68%);filter:blur(46px);opacity:.82;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.78}50%{transform:scale(1.06);opacity:.92}}
.hero-bg .glow-2{position:absolute;left:-18%;bottom:-30%;width:60vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(179,38,14,.45),transparent 65%);filter:blur(60px)}
.hero-bg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:84px 84px;mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 62%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 62%)}
.arcs{position:absolute;right:-4%;top:6%;width:min(70vw,1000px);height:auto;opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.arcs path{fill:none;stroke:#fff;stroke-linecap:round;stroke-dasharray:140 900;animation:wind 6s linear infinite;opacity:.8}
.arcs path:nth-child(2){animation-delay:-1.4s;stroke-width:1.2;opacity:.5}
.arcs path:nth-child(3){animation-delay:-2.6s;stroke-width:2.4}
.arcs path:nth-child(4){animation-delay:-4s;opacity:.4}
.arcs path:nth-child(5){animation-delay:-3.2s;stroke-width:1;opacity:.6}
@keyframes wind{from{stroke-dashoffset:1040}to{stroke-dashoffset:0}}

.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(10px,3vw,40px)}
.hero-copy{position:relative;z-index:5;padding-bottom:clamp(50px,9vh,110px)}
.hero-q{display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,2.4vh,26px)}
.hero-q .hand{font-size:clamp(1.9rem,3vw,2.7rem);color:var(--o1);transform:rotate(-3deg);display:inline-block;position:relative}
.hero-q .hand svg{position:absolute;left:-2%;bottom:-14px;width:104%;height:14px;overflow:visible}
.hero-q .hand path{stroke:var(--o3);stroke-width:3;fill:none;stroke-linecap:round}
.hero h1{margin:0;font-size:clamp(4.2rem,9.2vw,9.6rem);word-spacing:.08em}
.hero h1 .l2{display:block}
.hero h1 em{font-style:inherit}
.hero-sub{max-width:520px;margin:clamp(20px,3vh,32px) 0 clamp(26px,4vh,40px);font-size:clamp(1.02rem,1.25vw,1.2rem);color:#CFCAC2;line-height:1.55}
.hero-sub b{color:#fff;font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font:600 .72rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.hero-meta span{display:inline-flex;align-items:center;gap:9px}
.hero-meta span::before{content:"";width:6px;height:6px;background:var(--o1);transform:skewX(-30deg)}

.hero-stage{position:relative;align-self:stretch;min-height:min(86vh,820px);perspective:1800px}
.hero-ring{position:absolute;left:50%;top:44%;width:min(46vw,640px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);opacity:.7}
.hero-ring::before,.hero-ring::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.22);inset:-7%}
.hero-ring::after{inset:9%;border-color:rgba(250,132,79,.45)}
.hero-ring i{position:absolute;left:50%;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 22px 4px rgba(255,255,255,.7)}
.hero-ring{animation:spin 24s linear infinite}
@keyframes spin{to{rotate:360deg}}
.hero-phone{position:absolute;left:55%;top:2%;z-index:4;translate:-50% 0;transform-style:preserve-3d;--w:clamp(250px,25vw,370px)}
.hero-stage .fcard.c-event{left:-5%;top:27%;width:clamp(190px,17vw,250px)}
.hero-stage .fcard.c-muscles{right:-10%;top:40%;width:clamp(190px,18vw,260px)}
.hero-stage .fcard.c-stats{left:-2%;bottom:11%;width:clamp(180px,15vw,225px)}
.scroll-cue{position:absolute;left:var(--gut);bottom:26px;display:flex;align-items:center;gap:14px;font:700 .68rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);z-index:6}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(var(--o1),transparent);animation:cue 2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ==========================================================================
   FILM  (pinned scroll story, modelled on the teaser)
   ========================================================================== */
.film{position:relative;background:var(--ink);overflow:hidden}
.film-stage{position:relative;width:100%;overflow:hidden;isolation:isolate;padding:120px 0 80px}
.film-glow{position:absolute;left:50%;top:56%;width:130vmax;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,227,204,.9) 0,var(--heat-3) 5%,var(--heat-2) 13%,var(--heat-1) 26%,rgba(58,9,4,.85) 42%,transparent 56%);filter:blur(30px);opacity:0}
.film-flash{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;background:var(--paper);transform:scale(0);z-index:2;pointer-events:none}
.film-arcs{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1;pointer-events:none}
.film-arcs path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.burst{position:absolute;left:50%;top:50%;width:min(130vmin,1100px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:1;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg,var(--o1) 0 1.6deg,transparent 1.6deg 7.5deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 14%,#000 15%,rgba(0,0,0,.0) 62%);mask-image:radial-gradient(circle,transparent 0 14%,#000 15%,rgba(0,0,0,.0) 62%)}
.scene{position:relative;display:grid;place-items:center;text-align:center;padding:40px var(--gut);z-index:3}
.scene .q{font-size:clamp(2.6rem,7.4vw,7rem);color:#fff}
.scene .q .ch{display:inline-block;white-space:pre}
.scene .scribble{display:block;width:min(560px,80vw);height:28px;margin:10px auto 0;overflow:visible}
.scene .scribble path{fill:none;stroke:var(--o1);stroke-width:4;stroke-linecap:round}
.slam{font-size:clamp(4.6rem,17vw,17rem);color:#fff;will-change:transform,filter}
.slam.md{font-size:clamp(4rem,14.5vw,14rem)}
.slam.sm{font-size:clamp(3.6rem,12.5vw,12rem)}
.slam .o{color:var(--o1)}
.scene.s-flash .slam{color:#17120E}
.scene .cap{display:block;margin:clamp(14px,2vh,26px) auto 0;max-width:34ch;font:600 clamp(.82rem,1.15vw,1.02rem)/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--o3)}
.scene .num{position:absolute;left:var(--gut);top:calc(50% + 1px);font:700 .72rem/1 var(--body);letter-spacing:.24em;color:var(--mute)}
.scene.s-mark{gap:0}
.mark-wrap{position:relative;width:min(56vmin,460px);aspect-ratio:1;display:grid;place-items:center}
.mark-wrap svg.big{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mark-wrap .orbit{position:absolute;inset:-18%;border-radius:50%;border:1.5px solid rgba(255,255,255,.7)}
.mark-wrap .orbit::after{content:"";position:absolute;left:50%;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 24px 5px rgba(255,255,255,.75)}
.mark-wrap .orbit.o2{inset:-34%;border-color:rgba(250,132,79,.45);border-width:1px}
.mark-wrap .orbit.o2::after{background:var(--o1);box-shadow:0 0 22px 4px rgba(250,132,79,.8)}
.film-word{position:absolute;left:0;right:0;bottom:clamp(38px,9vh,90px);text-align:center;font:900 italic clamp(2.2rem,5vw,4.4rem)/1 var(--display);font-stretch:68%;letter-spacing:.34em;text-transform:uppercase;opacity:0;padding-left:.34em}
.film-skip{position:absolute;right:var(--gut);bottom:26px;z-index:8;display:inline-flex;align-items:center;gap:10px;font:700 .68rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);padding:10px 0;transition:color .25s}
.film-skip:hover{color:#fff}
.film-skip svg{width:14px;height:14px}
.film-count{position:absolute;left:var(--gut);bottom:26px;z-index:8;font:700 .68rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

.film .film-glow,.film .film-flash,.film .burst,.film .film-arcs,.film .film-skip,.film .film-count{display:none}
.film .film-word{position:relative;opacity:1;margin-top:20px;bottom:auto}
.film .scene.s-flash .slam{color:#fff}
.film.is-anim .film-stage{height:100svh;display:grid;place-items:center;padding:0}
.film.is-anim .film-glow,.film.is-anim .film-flash,.film.is-anim .burst,.film.is-anim .film-arcs,.film.is-anim .film-skip,.film.is-anim .film-count{display:block}
.film.is-anim .scene{position:absolute;inset:0;padding:0 var(--gut);opacity:0;visibility:hidden}
.film.is-anim .film-word{position:absolute;opacity:0;bottom:clamp(38px,9vh,90px);margin:0}
.film.is-anim .scene.s-flash .slam{color:#17120E}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.band{position:relative;z-index:3;margin:-1px 0;padding:clamp(70px,10vw,130px) 0;overflow:hidden}
.band-in{position:relative;rotate:-2.2deg;margin:0 -4vw;background:linear-gradient(100deg,#FF5A1F,#FA844F 45%,#FFA874);box-shadow:0 30px 80px -20px rgba(250,132,79,.5)}
.band-in+.band-in{rotate:1.6deg;margin-top:-8px;background:var(--ink-3);box-shadow:inset 0 1px 0 var(--line-2),inset 0 -1px 0 var(--line-2)}
.marq{display:flex;width:max-content;animation:marq 38s linear infinite}
.band-in+.band-in .marq{animation-direction:reverse;animation-duration:46s}
.marq span{display:inline-flex;align-items:center;gap:clamp(20px,3vw,44px);padding:clamp(14px,2vw,22px) clamp(10px,1.5vw,22px);font:900 italic clamp(1.9rem,4.6vw,4rem)/1 var(--display);font-stretch:68%;text-transform:uppercase;color:#120904;white-space:nowrap}
.band-in+.band-in .marq span{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.7)}
.marq span svg{width:.8em;height:.8em;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ==========================================================================
   CHAPTERS
   ========================================================================== */
.chapters{position:relative;background:linear-gradient(180deg,var(--ink),var(--ink-2) 50%,var(--ink))}
.chapters-head{padding:clamp(40px,7vw,90px) 0 0;text-align:left}
.sec-title{font-size:clamp(3.2rem,8.6vw,8.4rem);margin:18px 0 0}
.sec-lead{max-width:560px;margin:22px 0 0;color:#BDB8B0}
.stage{position:relative}
.chapter{position:relative;display:block;padding:clamp(56px,9vw,90px) var(--gut)}
.chapters.is-pinned .stage{height:100svh;min-height:640px;overflow:hidden}
.chapters.is-pinned .chapter{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(20px,5vw,80px);padding-block:0;padding-inline:calc((100vw - min(100vw - var(--gut)*2,var(--max)))/2)}
.ch-copy{position:relative;z-index:3;max-width:560px}
.ch-num{display:flex;align-items:center;gap:16px;font:800 .78rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--o3);margin-bottom:22px}
.ch-num b{font:900 italic 4.4rem/.8 var(--display);font-stretch:68%;color:transparent;-webkit-text-stroke:1.5px var(--o1);letter-spacing:0}
.ch-title{font-size:clamp(2.9rem,6.1vw,6.2rem);margin:0 0 22px}
.ch-text{margin:0 0 26px;color:#C4BFB7;max-width:50ch}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;font:700 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#E9E4DC;border:1px solid var(--line-2);background:rgba(255,255,255,.035);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
.ch-vis{position:relative;display:grid;place-items:center;perspective:1800px;padding-top:10px}
.chapters.is-pinned .ch-vis{height:100%;padding:0}
.ch-glow{position:absolute;left:50%;top:50%;width:min(60vw,720px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,130,70,.8),rgba(220,70,25,.45) 38%,rgba(120,20,8,.2) 55%,transparent 70%);filter:blur(40px);z-index:0}
.ch-phones{position:relative;width:min(100%,560px);height:clamp(560px,120vw,760px);margin-inline:auto;z-index:2}
.chapters.is-pinned .ch-phones{width:min(100%,640px);height:min(84svh,800px)}
.ch-phones .phone{position:absolute;--w:clamp(190px,46vw,290px)}
.chapters.is-pinned .ch-phones .phone{--w:clamp(210px,21vw,320px)}
.ch-phones .phone.main{left:50%;top:50%;translate:-50% -50%}
.ch-phones .phone.back{--w:clamp(160px,38vw,240px);left:0;top:54%;translate:0 -50%;rotate:-7deg;z-index:1;filter:brightness(.8)}
.ch-phones .phone.front{left:auto;right:0;top:50%;translate:0 -50%;rotate:4deg;z-index:3}
.chapters.is-pinned .ch-phones .phone.back{--w:clamp(180px,17vw,264px);left:8%}
.chapters.is-pinned .ch-phones .phone.front{right:8%}
.ch-vis .fcard{z-index:5}

/* coach chat bubbles */
.chat{position:absolute;z-index:6;display:grid;gap:12px;width:min(340px,86%)}
.bub{padding:15px 18px;font:500 .94rem/1.5 var(--body);box-shadow:0 24px 50px -14px rgba(0,0,0,.8)}
.bub.u{justify-self:end;background:var(--paper);color:#14110e;border-radius:20px 20px 4px 20px;max-width:88%}
.bub.a{justify-self:start;background:rgba(20,20,23,.92);border:1px solid var(--line-2);backdrop-filter:blur(12px);border-radius:20px 20px 20px 4px;color:#EDE8E0}
.bub.a b{color:var(--o1)}
.voice{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:999px;background:rgba(20,20,23,.92);border:1px solid var(--line-2);backdrop-filter:blur(12px);box-shadow:0 24px 50px -14px rgba(0,0,0,.8)}
.voice .mic{width:38px;height:38px;border-radius:50%;background:var(--o1);display:grid;place-items:center;flex:none}
.voice .mic svg{width:18px;height:18px;color:#150904}
.wave{display:flex;align-items:center;gap:3px;height:26px;flex:1}
.wave i{display:block;width:3px;border-radius:3px;background:var(--o3);height:30%;animation:wv 1s ease-in-out infinite alternate}
.wave i:nth-child(2n){animation-delay:.15s}.wave i:nth-child(3n){animation-delay:.3s}.wave i:nth-child(4n){animation-delay:.45s}.wave i:nth-child(5n){animation-delay:.6s}
@keyframes wv{to{height:100%}}
.voice span{font:700 .68rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.rail{position:absolute;left:calc(var(--gut) - 6px);top:50%;translate:0 -50%;z-index:10;display:none;gap:14px}
.chapters.is-pinned .rail{display:grid}
.rail i{display:block;width:3px;height:30px;background:rgba(255,255,255,.18);transform:skewX(-20deg);transition:background .4s,height .4s var(--ease)}
.rail i.on{background:var(--o1);height:54px}

/* ==========================================================================
   JOIN / PARTNERS
   ========================================================================== */
.join{position:relative;padding:clamp(90px,12vw,170px) 0;overflow:hidden;isolation:isolate}
.join::before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:90vw;aspect-ratio:1;translate:-50% -45%;border-radius:50%;background:radial-gradient(circle,rgba(179,38,14,.35),transparent 62%);filter:blur(50px)}
.join-head{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.join-head p{margin:0;color:#BDB8B0;max-width:46ch}
.join-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcard{--c:34px;--mx:50%;--my:50%;position:relative;min-height:400px;padding:34px 32px 32px;display:flex;flex-direction:column;background:var(--line-2);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.pcard::before{content:"";position:absolute;inset:1px;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(250,132,79,.26),transparent 55%),linear-gradient(180deg,#141416,#0b0b0d);
  clip-path:polygon(0 0,calc(100% - var(--c) + .4px) 0,100% calc(var(--c) - .4px),100% 100%,calc(var(--c) - .4px) 100%,0 calc(100% - var(--c) + .4px))}
.pcard>*{position:relative}
.pcard .no{font:900 italic 7rem/.8 var(--display);font-stretch:68%;color:transparent;-webkit-text-stroke:1.5px var(--o1);transition:color .5s,-webkit-text-stroke-color .5s}
.pcard:hover .no{color:var(--o1)}
.pcard h3{margin:auto 0 12px;font-size:clamp(2.1rem,3vw,2.9rem)}
.pcard p{margin:0;color:#B9B4AC;font-size:.97rem}
.pcard a.more{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font:800 .72rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--o3)}
.pcard a.more svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.pcard a.more:hover svg{transform:translateX(5px)}

/* ==========================================================================
   MEMBERSHIPS
   ========================================================================== */
.plans{padding:clamp(60px,9vw,130px) 0 clamp(90px,12vw,170px)}
.plans-head{max-width:880px;margin-bottom:clamp(36px,5vw,64px)}
.plans-head p{margin:20px 0 0;color:#BDB8B0;max-width:56ch}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{--c:30px;position:relative;padding:34px 30px;background:var(--line-2);display:flex;flex-direction:column;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.plan::before{content:"";position:absolute;inset:1px;background:linear-gradient(180deg,#131315,#0a0a0b);
  clip-path:polygon(0 0,calc(100% - var(--c) + .4px) 0,100% calc(var(--c) - .4px),100% 100%,calc(var(--c) - .4px) 100%,0 calc(100% - var(--c) + .4px))}
.plan>*{position:relative}
.plan .tag{align-self:flex-start;font:800 .66rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding:8px 12px;border:1px solid var(--line);margin-bottom:22px}
.plan h3{margin:0;font-size:4.2rem}
.plan .sub{margin:12px 0 26px;color:#B6B1A9;font-size:.95rem;min-height:3em}
.plan ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:12px;color:#DAD5CD;font-size:.94rem;line-height:1.45}
.plan li::before{content:"";width:10px;height:10px;margin-top:.42em;background:var(--o1);transform:skewX(-28deg)}
.plan .note{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);color:var(--mute);font-size:.8rem}
.plan.pro::before{background:linear-gradient(180deg,rgba(250,132,79,.12),transparent 45%),#0a0a0b}
.plan.pro h3{color:var(--o1)}
.plan.max{background:conic-gradient(from var(--ang,0deg),#fff,var(--o1),var(--heat-1),var(--o1),#fff);animation:ang 6s linear infinite;transform:translateY(-14px)}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes ang{to{--ang:360deg}}
.plan.max::before{background:linear-gradient(165deg,rgba(250,132,79,.3),transparent 45%),#0a0908}
.plan.max .tag{color:#150904;background:var(--o1);border-color:var(--o1)}
.plan.max h3{background:linear-gradient(180deg,var(--heat-4),var(--heat-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.fine{margin-top:26px;color:#7e7a74;font-size:.82rem;max-width:80ch}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final{position:relative;overflow:hidden;isolation:isolate;padding:clamp(100px,14vw,200px) 0 clamp(120px,15vw,220px);text-align:center;border-top:1px solid var(--line)}
.final::before{content:"";position:absolute;z-index:-1;left:50%;bottom:-88vw;width:130vw;aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,227,204,.95) 0,var(--heat-3) 6%,var(--heat-2) 14%,var(--heat-1) 28%,rgba(58,9,4,.9) 44%,transparent 60%);filter:blur(30px)}
.final-mark{position:relative;width:clamp(120px,16vw,200px);margin:0 auto 34px}
.final-mark svg{width:100%;height:auto;overflow:visible}
.final-mark .orbit{position:absolute;inset:-26%;border-radius:50%;border:1.5px solid rgba(255,255,255,.65);animation:spin 18s linear infinite}
.final-mark .orbit::after{content:"";position:absolute;left:50%;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;box-shadow:0 0 22px 4px rgba(255,255,255,.75)}
.final h2 .heat-text{background:linear-gradient(180deg,#fff,#FFE3CC 55%,#FFC9A3);-webkit-background-clip:text;background-clip:text}
.final h2{margin:0 auto;font-size:clamp(4.6rem,15.6vw,15rem);max-width:12ch}
.final p{max-width:46ch;margin:28px auto 38px;color:#D6D1C9;font-size:1.12rem}
.final .appstore{margin-inline:auto}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{position:relative;background:var(--ink);border-top:1px solid var(--line);padding:56px 0 46px}
.foot-in{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.foot p{margin:14px 0 0;color:var(--mute);font-size:.9rem}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:flex-end}
.foot-links a{font:700 .72rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#CFCAC2;transition:color .25s}
.foot-links a:hover{color:var(--o1)}
.copyright{margin-top:18px;color:#6e6a64;font-size:.78rem;text-align:right}

/* ==========================================================================
   Reveal helpers (JS adds .js to <html>)
   ========================================================================== */
.js:not(.no-anim) [data-rv]{opacity:0;transform:translateY(40px)}

/* ==========================================================================
   LEGAL + SUPPORT PAGES
   ========================================================================== */
.page-hero{position:relative;padding:clamp(140px,18vh,200px) 0 clamp(40px,6vw,70px);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.page-hero::before{content:"";position:absolute;z-index:-1;right:-10%;top:-60%;width:70vw;max-width:900px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(250,132,79,.5),rgba(179,38,14,.25) 40%,transparent 66%);filter:blur(40px)}
.page-hero .kicker{display:inline-flex;align-items:center;gap:12px;font:700 .74rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--o3)}
.page-hero .kicker::before{content:"";width:34px;height:2px;background:var(--o1);transform:skewX(-35deg)}
.page-hero h1{margin:20px 0 22px;font:900 italic clamp(3.6rem,9vw,8rem)/.88 var(--display);font-stretch:68%;text-transform:uppercase}
.page-hero p{max-width:62ch;color:#C4BFB7;margin:0}
.page-hero .meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:26px;font:600 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.page-hero .meta span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;background:var(--o1);transform:skewX(-30deg)}
.layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(30px,6vw,90px);padding:clamp(40px,6vw,80px) 0 clamp(80px,10vw,140px);align-items:start}
.toc{position:sticky;top:100px;display:grid;gap:2px;padding-left:18px;border-left:1px solid var(--line)}
.toc b{font:800 .7rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--o3);margin-bottom:14px}
.toc a{padding:7px 0;font-size:.88rem;color:var(--mute);transition:color .25s,transform .3s var(--ease)}
.toc a:hover{color:#fff;transform:translateX(4px)}
.legal-section{padding:0 0 38px;margin:0 0 38px;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.legal-section:last-child{border-bottom:0}
.legal-section h2{margin:0 0 16px;font:900 italic clamp(1.9rem,3vw,2.6rem)/1 var(--display);font-stretch:70%;text-transform:uppercase;letter-spacing:0}
.legal-section h3{margin:26px 0 10px;font:700 1.05rem/1.3 var(--body);color:#fff}
.legal-section p,.legal-section li{color:#C4BFB7;font-size:1rem}
.legal-section ul,.legal-section ol{padding-left:1.2em;display:grid;gap:8px}
.legal-section li::marker{color:var(--o1)}
.legal-section a{color:var(--o3);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(250,132,79,.4)}
.legal-section a:hover{color:#fff}
.legal-section strong{color:#fff}
.legal-section table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.92rem}
.legal-section th,.legal-section td{padding:12px 14px;border:1px solid var(--line);text-align:left;vertical-align:top;color:#C4BFB7}
.legal-section th{background:rgba(255,255,255,.04);color:#fff;font-weight:700}
.legal-section .callout,.legal-section .note{padding:18px 20px;border-left:3px solid var(--o1);background:rgba(250,132,79,.07);color:#E6E1D9}
.content{padding:clamp(40px,6vw,80px) 0 clamp(80px,10vw,140px)}
.section-title{margin:0 0 34px;font:900 italic clamp(2.2rem,4vw,3.4rem)/1 var(--display);font-stretch:68%;text-transform:uppercase}
.faq{display:grid;gap:12px;max-width:900px}
.faq details{background:linear-gradient(180deg,#131315,#0b0b0d);border:1px solid var(--line);transition:border-color .3s,background .3s}
.faq details[open]{border-color:rgba(250,132,79,.5);background:linear-gradient(180deg,rgba(250,132,79,.08),#0b0b0d 60%)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;font:700 1.08rem/1.35 var(--body);color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--o1),var(--o1)) center/100% 2px no-repeat,linear-gradient(var(--o1),var(--o1)) center/2px 100% no-repeat;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 26px 24px;color:#C4BFB7;max-width:72ch}
.contact{max-width:900px;margin-top:clamp(40px,6vw,70px);padding:clamp(28px,4vw,48px);border:1px solid var(--line-2);background:radial-gradient(600px circle at 100% 0,rgba(250,132,79,.2),transparent 60%),linear-gradient(180deg,#131315,#0a0a0b)}
.contact h2{margin:0 0 14px;font:900 italic clamp(2.2rem,4vw,3.4rem)/1 var(--display);font-stretch:68%;text-transform:uppercase}
.contact p{color:#C4BFB7;max-width:60ch}
.contact .mail{display:inline-flex;align-items:center;min-height:56px;margin-top:10px;padding:0 1.9em;font:800 .86rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#150904;background:linear-gradient(100deg,#FF6A2F,#FA844F 55%,#FFA874);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));transition:filter .3s,transform .35s var(--ease)}
.contact .mail:hover{filter:brightness(1.08);transform:translateY(-2px)}
.contact .response{margin-top:16px;color:var(--mute);font-size:.86rem}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .hero-in{grid-template-columns:1fr}
  .hero{padding-top:110px}
  .hero-copy{padding-bottom:20px}
  .hero-stage{min-height:760px;margin-top:10px}
  .hero-phone{--w:clamp(240px,52vw,330px);top:0}
  .hero-ring{width:min(90vw,560px)}
  .hero-stage .fcard.c-event{left:0;top:16%;width:clamp(170px,32vw,250px)}
  .hero-stage .fcard.c-muscles{right:0;top:48%;width:clamp(170px,30vw,240px)}
  .hero-stage .fcard.c-stats{display:none}
  .scroll-cue{display:none}
}
@media (max-width:999px){
  .nav-links{position:fixed;inset:0;z-index:2;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:90px var(--gut) 40px;background:rgba(6,6,7,.97);backdrop-filter:blur(24px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
  .nav-links.open{opacity:1;visibility:visible}
  .nav-links a:not(.btn){font:900 italic 3.2rem/1.05 var(--display);font-stretch:68%;letter-spacing:0;padding:6px 0}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links .btn{margin:22px 0 0;--c:14px}
  .burger{display:block}
  .brand{position:relative;z-index:3}
  .ch-copy{max-width:640px;margin-bottom:30px}
  .ch-title{font-size:clamp(3rem,12vw,5rem)}
  .chapter .ch-glow{width:100vw}
  .cards3,.plan-grid{grid-template-columns:1fr}
  .join-head{grid-template-columns:1fr}
  .pcard{min-height:340px}
  .plan.max{transform:none}
  .layout{grid-template-columns:1fr}
  .toc{position:static;grid-template-columns:repeat(2,1fr);padding:0 0 24px;border-left:0;border-bottom:1px solid var(--line);column-gap:18px}
  .toc b{grid-column:1/-1}
  .foot-in{grid-template-columns:1fr}
  .foot-links{justify-content:flex-start}
  .copyright{text-align:left}
}
@media (max-width:600px){
  :root{--cut:16px}
  .hero h1{font-size:min(16.5vw,6.2rem)}
  .hero-stage{min-height:640px}
  .hero-stage .fcard.c-event{left:-3%;top:12%;width:44vw}
  .hero-stage .fcard.c-muscles{right:-3%;top:52%;width:42vw}
  .chat{width:min(300px,92%)}
  .bub{font-size:.86rem;padding:12px 14px}
  .appstore{height:62px}
  .appstore strong{font-size:1.45rem}
  .film-count{display:none}
  .scene .num{display:none}
}
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .bob,.marq,.hero-ring,.arcs path,.hero-bg .glow,.final-mark .orbit,.plan.max,.wave i,.scroll-cue i{animation:none!important}
}
@media (hover:none){.btn:hover::before,.appstore:hover::before{transform:translateX(-120%) skewX(-20deg)}}

/* ==========================================================================
   v15 ADDITIONS: orb, in-app UI kit, AI section, why-one-app, languages, pricing
   ========================================================================== */

/* ---------- Gymmie AI orb ---------- */
.orb{--s:96px;--size:1;position:relative;display:inline-block;flex:none;width:var(--s);aspect-ratio:1;border-radius:50%;vertical-align:middle;
  background:radial-gradient(circle at 50% 40%,#FA844F,#E2501F)}
.orb .orbl{display:none}
.orb.k{background:none}
.orb.k .orbl{display:block;position:absolute;left:0;top:0;transform-origin:0 0}
.orb--xs{--s:18px}
.orb--xl{--s:clamp(150px,18vw,230px)}

/* Gymmie AI orb: the exact loader design (scaled with --size, set by JS to width/100) */
.orbl{
  --color-one:#FA844F;--color-two:#E2501F;--color-three:#FA844F80;--color-four:#E2501F80;--color-five:#FA844F40;
  --time-animation:2s;
  position:relative;border-radius:50%;transform:scale(var(--size));
  box-shadow:0 0 25px 0 var(--color-three),0 20px 50px 0 var(--color-four)}
.orbl::before{content:"";position:absolute;top:0;left:0;width:100px;height:100px;border-radius:50%;
  border-top:solid 1px var(--color-one);border-bottom:solid 1px var(--color-two);
  background:linear-gradient(180deg,var(--color-five),var(--color-four));
  box-shadow:inset 0 10px 10px 0 var(--color-three),inset 0 -10px 10px 0 var(--color-four)}
.orbl .box{display:block;width:100px;height:100px;border-radius:50%;
  background:linear-gradient(180deg,var(--color-one) 30%,var(--color-two) 70%);
  mask:url(#clipping);-webkit-mask:url(#clipping)}
.orb-defs{position:absolute;left:-9999px;top:0;width:100px;height:100px;pointer-events:none;opacity:0}
#clipping{filter:contrast(15);animation:roundness 1s linear infinite}
#clipping polygon{filter:blur(7px)}
#clipping polygon:nth-child(1){transform-origin:75% 25%;transform:rotate(90deg)}
#clipping polygon:nth-child(2){transform-origin:50% 50%;animation:rotation 2s linear infinite reverse}
#clipping polygon:nth-child(3){transform-origin:50% 60%;animation:rotation 2s linear infinite;animation-delay:calc(2s / -3)}
#clipping polygon:nth-child(4){transform-origin:40% 40%;animation:rotation 2s linear infinite reverse}
#clipping polygon:nth-child(5){transform-origin:40% 40%;animation:rotation 2s linear infinite reverse;animation-delay:calc(2s / -2)}
#clipping polygon:nth-child(6){transform-origin:60% 40%;animation:rotation 2s linear infinite}
#clipping polygon:nth-child(7){transform-origin:60% 40%;animation:rotation 2s linear infinite;animation-delay:calc(2s / -1.5)}
@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes roundness{0%{filter:contrast(15)}20%{filter:contrast(3)}40%{filter:contrast(3)}60%{filter:contrast(15)}100%{filter:contrast(15)}}
@keyframes colorize{0%{filter:hue-rotate(0deg)}20%{filter:hue-rotate(-30deg)}40%{filter:hue-rotate(-60deg)}60%{filter:hue-rotate(-90deg)}80%{filter:hue-rotate(-45deg)}100%{filter:hue-rotate(0deg)}}
.orb.off .orbl,.orb.off .orbl *{animation-play-state:paused}

/* ---------- hero additions ---------- */
.hero-chip{display:inline-flex;align-items:center;gap:12px;margin-bottom:clamp(14px,2.4vh,26px);padding:9px 18px 9px 12px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font:700 .72rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#F1ECE4;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.hero-chip .orb{--s:22px}
.hero h1{font-size:clamp(3.8rem,7.5vw,8.3rem)}
.hero-stage .ai-chip{position:absolute;z-index:7;left:-17%;top:53%;width:clamp(230px,21vw,310px);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px 18px;border-radius:20px;
  background:rgba(16,16,19,.88);border:1px solid var(--line-2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 28px 50px -14px rgba(0,0,0,.85)}
.ai-chip .orb{--s:46px}
.ai-chip b{display:block;font:700 .8rem/1.2 var(--body);color:#fff;margin-bottom:3px}
.ai-chip span{display:block;font:500 .78rem/1.4 var(--body);color:#BDB8B0}
.ai-chip .btns{grid-column:1/-1;display:flex;gap:8px;margin-top:2px}
.ai-chip .btns i{font:700 .68rem/1 var(--body);font-style:normal;letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border-radius:999px;background:var(--o1);color:#150904}
.ai-chip .btns i+i{background:rgba(255,255,255,.1);color:#fff}

/* film caption under the handwriting */
.scene .q{line-height:1.12;white-space:pre-line}
.scene .sub-cap{display:block;margin-top:18px;font:600 clamp(.8rem,1.1vw,.98rem)/1.5 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--o3)}

/* ---------- in-app UI kit (built with container query units, scales with the phone) ---------- */
.phone-screen.ui{container-type:inline-size;background:#09090a;color:#fff;font-family:var(--body)}
.ui-in{height:100%;display:flex;flex-direction:column;gap:3.48cqw;padding:17.4cqw 5.34cqw 5.34cqw;background:radial-gradient(120% 60% at 50% 0,rgba(250,132,79,.14),transparent 60%),#09090a}
.ui-top{display:flex;align-items:center;gap:3.48cqw;padding-bottom:2.32cqw}
.ui-top .orb{--s:11.02cqw}
.ui-top b{font-size:5.1cqw;font-weight:700}
.ui-top small{display:block;font-size:3.25cqw;color:#9a958d;font-weight:500}
.ui-top .tag{margin-left:auto;font-size:2.9cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--o3);border:1px solid rgba(250,132,79,.4);padding:1.62cqw 2.78cqw;border-radius:99px}
.m{font-size:4.18cqw;line-height:1.42;padding:3.36cqw 4.18cqw;border-radius:4.87cqw;max-width:88%}
.m.u{align-self:flex-end;background:var(--paper);color:#13100d;border-bottom-right-radius:1.16cqw}
.m.a{align-self:flex-start;background:#17171a;border:1px solid rgba(255,255,255,.09);border-bottom-left-radius:1.16cqw;color:#ECE7DF}
.m b{color:var(--o1)}
.uc{background:#131316;border:1px solid rgba(255,255,255,.09);border-radius:4.64cqw;padding:3.94cqw}
.uc h5{margin:0 0 2.32cqw;font-size:3.13cqw;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o3)}
.ring-row{display:flex;align-items:center;gap:4.64cqw}
.ring{position:relative;width:23.2cqw;flex:none}
.ring svg{width:100%;height:auto;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .bg{stroke:rgba(255,255,255,.1)}
.ring .fg{stroke:var(--o1)}
.ring span{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:3.94cqw;font-weight:800;line-height:1.1}
.ring span small{display:block;font-size:2.55cqw;font-weight:500;color:#9a958d}
.bars{flex:1;display:grid;gap:2.55cqw}
.bar{display:grid;gap:.9.28cqw;font-size:3.13cqw;color:#BDB8B0}
.bar i{display:block;height:1.74cqw;border-radius:9px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;width:var(--p);background:var(--c,var(--o1));border-radius:9px}
.bar b{display:flex;justify-content:space-between;font-weight:600;color:#fff}
.btn-u{display:inline-flex;align-items:center;justify-content:center;gap:1.62cqw;min-height:9.74cqw;padding:0 4.64cqw;border-radius:99px;background:var(--o1);color:#150904;font-size:3.48cqw;font-weight:800}
.btn-u.ghost{background:rgba(255,255,255,.1);color:#fff}
.btn-u.done{background:rgba(120,220,150,.18);color:#8be6a8}
.row-u{display:flex;align-items:center;justify-content:space-between;gap:3.48cqw}
.row-u strong{display:block;font-size:4.06cqw;line-height:1.25}
.row-u small{display:block;font-size:3.25cqw;color:#9a958d;margin-top:.6.96cqw}
.input-u{margin-top:auto;display:flex;align-items:center;gap:3.02cqw;padding:2.78cqw 3.25cqw;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);font-size:3.71cqw;color:#8d887f}
.input-u .orb{--s:8.12cqw}
.input-u .mic{margin-left:auto;width:8.12cqw;height:8.12cqw;border-radius:50%;background:var(--o1);display:grid;place-items:center}
.input-u .mic svg{width:4.18cqw;height:4.18cqw;color:#150904}
.vnote{display:flex;align-items:center;gap:3.02cqw}
.vnote .play{width:8.82cqw;height:8.82cqw;border-radius:50%;background:#13100d;display:grid;place-items:center;flex:none}
.vnote .play::after{content:"";border-left:2.78cqw solid var(--o1);border-top:1.74cqw solid transparent;border-bottom:1.74cqw solid transparent;margin-left:.6.96cqw}
.vnote .w{display:flex;align-items:center;gap:.8.12cqw;flex:1;height:8.12cqw}
.vnote .w i{display:block;width:.8.12cqw;border-radius:9px;background:#13100d;opacity:.8;height:var(--h,40%)}
.vnote small{font-size:3.02cqw;font-weight:700;color:#5b5750}
.lang-chips{display:flex;gap:1.62cqw;margin-top:1.86cqw}
.lang-chips i{font-style:normal;font-size:2.67cqw;font-weight:800;letter-spacing:.1em;padding:.9.28cqw 2.09cqw;border-radius:99px;background:rgba(250,132,79,.18);color:#C25319}
.live-strip{display:flex;align-items:center;justify-content:space-between;padding:3.48cqw 3.94cqw;border-radius:4.64cqw;background:linear-gradient(100deg,rgba(250,132,79,.22),rgba(250,132,79,.06));border:1px solid rgba(250,132,79,.35)}
.live-strip b{display:block;font-size:4.29cqw}
.live-strip small{font-size:3.25cqw;color:#c9c3ba}
.live-strip .t{font:800 5.8cqw/1 var(--display);font-stretch:70%;font-style:italic;color:var(--o1)}
.live-strip .dot{display:inline-block;width:2.09cqw;height:2.09cqw;border-radius:50%;background:#ff5a1f;margin-right:1.62cqw;animation:orbPulse 1.4s ease-in-out infinite}

/* floating memory chips + card wall */
.mem{position:absolute;z-index:6;padding:11px 16px;border:1px solid var(--line-2);background:rgba(16,16,19,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:99px;font:700 .72rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#EDE8E0;box-shadow:0 20px 40px -12px rgba(0,0,0,.8);display:flex;align-items:center;gap:9px}
.mem::before{content:"";width:8px;height:8px;background:var(--o1);transform:skewX(-28deg)}
.mem small{color:var(--o3);font:600 .72rem/1 var(--body);letter-spacing:.04em;text-transform:none}
.wall{position:relative;width:min(100%,680px);height:min(80svh,720px);z-index:3}
.wcard{position:absolute;width:var(--cw,230px);padding:16px 18px 18px;border-radius:20px;background:linear-gradient(180deg,#17171a,#0e0e10);border:1px solid var(--line-2);box-shadow:0 34px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);font-family:var(--body)}
.wcard h5{margin:0 0 10px;font:800 .62rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--o3)}
.wcard .big{font:900 italic 2.4rem/1 var(--display);font-stretch:70%;color:#fff}
.wcard .big small{font:600 .72rem/1 var(--body);font-style:normal;color:var(--mute);margin-left:6px;letter-spacing:.04em}
.wcard p{margin:6px 0 0;font:500 .78rem/1.4 var(--body);color:#B5B0A8}
.wcard svg.chart{width:100%;height:auto;margin-top:10px;overflow:visible}
.wcard .bar{font-size:.68rem}
.wcard .bar i{height:6px}
.vbars{display:flex;align-items:flex-end;gap:7px;height:78px;margin-top:12px}
.vbars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--o1),var(--heat-1));height:var(--h)}
.vbars i.dim{background:rgba(255,255,255,.14)}
.chip-r{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:99px;background:rgba(250,132,79,.16);color:var(--o3);font:700 .62rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.prc{border-color:rgba(250,132,79,.6);background:linear-gradient(160deg,rgba(250,132,79,.3),#0e0e10 60%)}
.sample{margin:26px 0 0;color:#7e7a74;font-size:.82rem;max-width:62ch}

/* AI section head */
.ai .chapters-head{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.ai-orbwrap{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:340px;justify-self:center;width:100%}
.ai-orbwrap::before,.ai-orbwrap::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.25);inset:6%;animation:spin 26s linear infinite}
.ai-orbwrap::after{inset:-4%;border-color:rgba(250,132,79,.4);animation-duration:34s;animation-direction:reverse}
.ai-orbwrap .halo{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(250,90,31,.55),transparent 62%);filter:blur(30px)}
.ai .note{margin:0 0 0;max-width:62ch;color:#8d887f;font-size:.88rem}

/* ---------- Why one app ---------- */
.why{position:relative;padding:clamp(90px,12vw,170px) 0;overflow:hidden;isolation:isolate}
.why::before{content:"";position:absolute;z-index:-1;left:50%;top:55%;width:90vw;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(179,38,14,.32),transparent 62%);filter:blur(50px)}
.why-head{max-width:820px;margin-bottom:clamp(40px,6vw,80px)}
.why-head p{margin:22px 0 0;color:#BDB8B0;max-width:60ch}
.why-grid{position:relative;display:grid;grid-template-columns:1fr minmax(220px,.62fr) 1fr;gap:clamp(18px,3vw,44px);align-items:center}
.why-col{display:grid;gap:clamp(18px,3vw,44px)}
.why-card{--c:26px;position:relative;padding:26px 26px 24px;background:var(--line-2);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.why-card::before{content:"";position:absolute;inset:1px;background:linear-gradient(180deg,#151518,#0b0b0d);clip-path:polygon(0 0,calc(100% - var(--c) + .4px) 0,100% calc(var(--c) - .4px),100% 100%,calc(var(--c) - .4px) 100%,0 calc(100% - var(--c) + .4px))}
.why-card>*{position:relative}
.why-card .k{font:800 .68rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--o3);margin-bottom:12px;display:block}
.why-card h3{margin:0 0 10px;font-size:2.4rem}
.why-card p{margin:0;color:#B5B0A8;font-size:.95rem}
.why-core{position:relative;display:grid;place-items:center;aspect-ratio:1}
.why-core svg.g{width:46%;height:auto;position:relative;z-index:2;filter:drop-shadow(0 0 30px rgba(250,132,79,.7))}
.why-core .r{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.3);inset:8%;animation:spin 22s linear infinite}
.why-core .r.r2{inset:-6%;border-color:rgba(250,132,79,.45);animation-duration:30s;animation-direction:reverse}
.why-core .r::after{content:"";position:absolute;left:50%;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 18px 3px rgba(255,255,255,.7)}
.why-core .r.r2::after{background:var(--o1);box-shadow:0 0 18px 3px rgba(250,132,79,.8)}
.why-core .halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(250,90,31,.6),transparent 62%);filter:blur(26px)}
.why-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.why-lines path{fill:none;stroke:rgba(250,132,79,.55);stroke-width:1.5;stroke-dasharray:6 8;animation:dash 3s linear infinite;vector-effect:non-scaling-stroke}
@keyframes dash{to{stroke-dashoffset:-56}}
.why-grid>*:not(.why-lines){position:relative;z-index:1}
.why-foot{margin:clamp(30px,4vw,56px) 0 0;max-width:68ch;color:#CFCAC2;font-size:1.08rem}

/* ---------- Languages ---------- */
.langs{position:relative;padding:clamp(80px,11vw,150px) 0;border-top:1px solid var(--line);overflow:hidden;isolation:isolate}
.langs::before{content:"";position:absolute;z-index:-1;right:-15%;top:10%;width:70vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(250,132,79,.3),transparent 62%);filter:blur(50px)}
.langs-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
.langs p.lead{margin:22px 0 28px;color:#BDB8B0;max-width:52ch}
.lang-tabs{display:flex;flex-wrap:wrap;gap:10px}
.lang-tab{position:relative;min-height:48px;padding:0 22px;font:800 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#D9D5CE;background:var(--line-2);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:color .3s}
.lang-tab span{position:absolute;inset:1px;display:grid;place-items:center;background:var(--ink);clip-path:polygon(0 0,calc(100% - 9.6px) 0,100% 9.6px,100% 100%,9.6px 100%,0 calc(100% - 9.6px));transition:background .3s}
.lang-tab{padding:0}
.lang-tab span{position:relative;inset:auto;min-height:46px;margin:1px;padding:0 21px;display:flex;align-items:center}
.lang-tab[aria-selected="true"]{color:#150904;background:var(--o1)}
.lang-tab[aria-selected="true"] span{background:var(--o1)}
.lang-tab small{font-weight:600;letter-spacing:.04em;text-transform:none;margin-left:8px;opacity:.75}
.lang-demo{position:relative;justify-self:center;width:min(100%,460px)}
.lang-card{position:relative;padding:28px;border-radius:26px;background:linear-gradient(180deg,#17171a,#0c0c0e);border:1px solid var(--line-2);box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 90px -30px rgba(250,132,79,.5);transition:opacity .35s}
.lang-card .lc-k{font:800 .7rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--o1);margin-bottom:12px}
.lang-card .lc-t{font:900 italic clamp(2.6rem,5vw,3.8rem)/.95 var(--display);font-stretch:70%;text-transform:uppercase}
.lang-card[dir="rtl"] .lc-t{font:900 clamp(2.4rem,4.4vw,3.4rem)/1.2 var(--body);font-style:normal;text-transform:none}
.lang-card .lc-s{margin:12px 0 22px;color:#B5B0A8}
.lang-card .lc-b{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.lang-card .lc-b .orb{--s:38px}
.lang-card .lc-b p{margin:0;padding:12px 16px;border-radius:16px;background:#1b1b1f;border:1px solid var(--line);font-size:.95rem;color:#ECE7DF}
.lang-card .btn-u{font:800 .78rem/1 var(--body);padding:15px 22px;min-height:0;letter-spacing:.06em}
.lang-prog{height:3px;margin-top:18px;background:rgba(255,255,255,.1);overflow:hidden}
.lang-prog i{display:block;height:100%;width:100%;background:var(--o1);transform-origin:left;transform:scaleX(0)}
.lang-prog i.run{animation:lprog 3.2s linear forwards}
@keyframes lprog{to{transform:scaleX(1)}}
.lang-note{margin:14px 0 0;color:#7e7a74;font-size:.82rem}

/* ---------- pricing additions ---------- */
.plan .price{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;font:900 italic 3.1rem/1 var(--display);font-stretch:70%;color:#fff}
.plan .price small{font:600 .85rem/1 var(--body);font-style:normal;color:var(--mute);letter-spacing:.02em}
.plan .sub{min-height:0;margin:8px 0 22px}
.founding{margin-top:22px;display:flex;gap:16px;align-items:center;padding:20px 24px;border:1px solid rgba(250,132,79,.45);background:linear-gradient(100deg,rgba(250,132,79,.16),rgba(250,132,79,.03));clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.founding .orb{--s:34px}
.founding b{color:#fff}
.founding p{margin:0;color:#D9D3CA;font-size:.95rem}

/* ---------- footer socials ---------- */
.foot-links.soc a{color:var(--mute)}
.foot-links.soc a:hover{color:var(--o1)}

/* chapter phone sizing tied to viewport height so UI never clips */
.chapters.is-pinned .ch-phones .phone{--w:clamp(220px,min(25vw,37svh),360px)}
.chapters.is-pinned .ch-phones .phone.back{--w:clamp(180px,min(17vw,28svh),270px)}
.chapters.is-pinned .ch-phones .phone.front{--w:clamp(210px,min(21vw,34svh),330px)}
.chapters.is-pinned .wall{height:min(78svh,720px)}

@media (max-width:1100px){
  .hero-stage .ai-chip{left:0;top:14%;width:clamp(210px,40vw,290px)}
  .why-grid{grid-template-columns:1fr}
  .why-core{max-width:260px;margin-inline:auto;order:-1}
  .why-lines{display:none}
  .langs-in{grid-template-columns:1fr}
  .ai .chapters-head{grid-template-columns:1fr}
  .ai-orbwrap{max-width:240px;justify-self:start}
}
@media (max-width:999px){
  .wall{width:100%;height:560px;margin-inline:auto}
  .wcard{--cw:min(200px,52vw)}
  .mem{font-size:.64rem;padding:9px 12px}
}
@media (max-width:600px){
  .hero h1{font-size:min(15vw,5.8rem)}
  .hero-stage .ai-chip{left:-2%;top:10%;width:62vw}
  .wall{height:620px}
  .mem{white-space:nowrap;font-size:.58rem;padding:8px 11px;gap:7px}
  .mem[style*="left:"]{left:2px!important}
  .mem[style*="right:"]{right:2px!important}
  .btn{white-space:nowrap}
  .final-cta .btn{padding:0 1.5em}
}

.ui-in{position:relative}
.isl{position:absolute;top:2.6cqw;left:50%;width:29cqw;height:8.4cqw;transform:translateX(-50%);border-radius:9cqw;background:#000;z-index:3}
.sb{position:absolute;top:4.2cqw;left:8cqw;font-size:3.6cqw;font-weight:700;z-index:3}
.sb-r{position:absolute;top:4.6cqw;right:7cqw;z-index:3;width:6.4cqw;height:3cqw;border-radius:1cqw;border:.4cqw solid rgba(255,255,255,.6)}
.sb-r i{position:absolute;inset:.3cqw;border-radius:.5cqw;background:#fff;width:70%}
.final-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 18px}
.fine-print{font-size:.78rem!important;color:#6e6a64!important}
.hero-cta .btn--ghost{min-height:68px}
.hero-cta .btn--ghost>span{min-height:66px}

.btn>span{display:inline-flex;align-items:center;gap:.75em;white-space:nowrap}

.rail{display:none!important}
.pcard .pcard-btn{align-self:flex-start;margin-top:22px}
.hero-q .orb{--s:30px}
.hero-q .hand{font-size:clamp(1.7rem,2.6vw,2.4rem)}
/* theme demo */
.lang-card{transition:opacity .25s,background .4s,border-color .4s,color .4s}
.lang-card.th-black{background:linear-gradient(180deg,#050505,#000);border-color:rgba(255,255,255,.1)}
.lang-card.th-black .lc-b p{background:#0c0c0c}
.lang-card.th-light{background:linear-gradient(180deg,#ffffff,#f3efe9);border-color:rgba(0,0,0,.1);color:#17120d;box-shadow:0 50px 90px -30px rgba(0,0,0,.7),0 0 90px rgba(250,132,79,.25)}
.lang-card.th-light .lc-t{color:#17120d}
.lang-card.th-light .lc-s{color:#6b645c}
.lang-card.th-light .lc-b{border-top-color:rgba(0,0,0,.1)}
.lang-card.th-light .lc-b p{background:#fff;border-color:rgba(0,0,0,.1);color:#17120d}

.hero-q{margin-bottom:clamp(30px,5vh,52px)}
.final-mark{margin-bottom:clamp(90px,10vw,140px)}
.nav-links .btn--ghost>span{min-height:42px;padding:0 calc(1.3em - 1px);font-size:.74rem}

/* chips are positioned against the phone itself, so they sit the same at every screen size */
.mem-layer{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:6;pointer-events:none;
  --pw:clamp(190px,46vw,290px);width:calc(var(--pw)*1.06);height:calc(var(--pw)*2.228)}
.chapters.is-pinned .mem-layer{--pw:clamp(220px,min(25vw,37svh),360px)}
.mem-layer .mem{white-space:nowrap}
@media (max-width:999px){
  .mem-layer{left:0;top:0;translate:none;width:100%;height:100%}
  .mem.l{left:2px!important;right:auto!important}
  .mem.r{right:2px!important;left:auto!important}
}
/* older iOS without svh */
@supports not (height:100svh){
  .hero{min-height:100vh}
  .film.is-anim .film-stage{height:100vh}
  .chapters.is-pinned .stage{height:100vh}
}
/* WebKit (iPhone / Safari) cannot use an SVG mask on an HTML element, so there the orb is the exact same animation, pre-rendered from the real design */
.wk .orb .orbl{display:none}
.wk .orb,.wk .orb.k{background:url(../img/orb.webp) center/100% 100% no-repeat;
  box-shadow:0 0 calc(var(--s)*.25) 0 #FA844F80,0 calc(var(--s)*.2) calc(var(--s)*.5) 0 #E2501F80}
@media (max-width:999px){ .nav-links .btn--ghost{margin-top:14px} }
@media (max-width:600px){ .btn:not(.btn--sm){min-height:52px} .lang-tab span{min-height:44px} .wcard.prc{left:auto!important;right:6px} }
.nav-in{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
footer .wrap,.foot .wrap{padding-bottom:env(safe-area-inset-bottom)}

.prc .prsub{font:700 .9rem/1.2 var(--body);color:var(--o1);margin:4px 0 8px;letter-spacing:.04em}
.nav-links .btn--ghost{padding:0}

/* ===== MOBILE-ONLY FIXES (phones) ===== */
@media (max-width:900px){
  /* parallax shifts the bands up to 80px sideways, so make them wide enough to never show their ends */
  .band-in{margin-left:-110px;margin-right:-110px}
}
@media (max-width:600px){
  .hero-stage{display:none}
  .hero-copy{padding-bottom:clamp(60px,10vh,100px)}
  /* film: fill the full phone screen (no black strip under it), footer texts near the bottom */
  .film.is-anim .film-stage{height:100vh;height:100lvh}
  .film.is-anim .film-count,.film.is-anim .film-skip{bottom:26px}
  /* voice chapter pills sit a little higher */
  .mem.m-any-language{bottom:58%!important}
  .mem.m-mix-languages{bottom:47%!important}
  /* more room between the G and the pillars */
  .why-core{margin-bottom:72px}
}

@media (max-width:600px){ .fcard.c-plan{left:7%!important} }
@media (max-width:700px){ .hero-stage{display:none!important} }

/* mobile: "What Gymmie is" and "Skip" share the exact same vertical centre */
@media (max-width:600px){
  .film.is-anim .film-count,.film.is-anim .film-skip{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;height:52px;padding:0;line-height:1}
}

/* mobile menu: while open the nav must not create a containing block (blur / transform), or the fixed menu renders skewed */
.nav.menu-open{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;background:transparent!important;border-bottom-color:transparent!important;transition:none}
@media (max-width:999px){ .nav-links{height:100vh;height:100dvh} }

/* Sub pages: start hidden (same state main.js applies via data-rv) so the first paint does not flash then re-hide */
.js:not(.no-anim) .page-hero .wrap>*,.js:not(.no-anim) .legal-section,.js:not(.no-anim) .faq details,.js:not(.no-anim) .contact{opacity:0;transform:translateY(40px)}

/* mobile: Train / Eat / Ask / Connect sit exactly on the vertical centre of the screen, with the sun centred on the same point; the caption hangs below */
@media (max-width:600px){
  .film.is-anim .film-glow{top:50%}
  .film.is-anim #sc4>div,.film.is-anim #sc5>div,.film.is-anim #sc6>div,.film.is-anim #sc7>div{display:grid;grid-template-rows:1fr auto 1fr;height:100%;width:100%;justify-items:center}
  .film.is-anim #sc4 .slam,.film.is-anim #sc5 .slam,.film.is-anim #sc6 .slam,.film.is-anim #sc7 .slam{grid-row:2;margin:0}
  .film.is-anim #sc4 .cap,.film.is-anim #sc5 .cap,.film.is-anim #sc6 .cap,.film.is-anim #sc7 .cap{grid-row:3;align-self:start}
}