/* Apeks v8.2 (3 Nov 2026, PHONE_PLAN.md): the phone cut. Loaded last.
   html.phc is set on portrait screens up to 900px wide with motion on. The takes are drawn on a portrait canvas of
   var(--cw) x var(--ch) canvas px (390 wide, at least 700 tall) and scaled by --s; apeks.js sets the hero geometry
   (--tt text top, --at/--al the how-it-works art, --dy the screen dots). Every length inside .cv is a canvas pixel.
   Engines as on desktop: GSAP owns the pins, scrubs, the sky and the doors' deck; CSS owns reveals and UI states.
   The still twin (reduced motion, Motion off) keeps its own rules; the portrait close, the swipe collage and the
   question tabs below apply to every portrait screen, motion or not. */

/* ---------- canvas ---------- */
html.phc .stage .cv{--cw:390;--ch:760;--tt:76;--at:30;--al:-201.5;--dy:560;width:calc(var(--cw) * 1px);height:calc(var(--ch) * 1px)}
html.phc .sc{position:absolute;inset:0;display:block;padding:0;min-height:0;width:auto!important;height:auto!important}
html.phc .grain{opacity:.04}
html.phc .hdr{flex-wrap:wrap;height:auto;padding-top:14px;row-gap:9px}
html.phc .hdr::after{content:"";flex-basis:100%;order:2}
html.phc .hdr .brand,html.phc .hdr .motion{order:1}
html.phc .status{order:3;max-width:none;white-space:nowrap;font-size:11px;height:26px;padding:0 10px}

/* ---------- hero: text at the top, the living phone in the middle, the three doors in thumb reach ---------- */
html.phc .sc-hero{padding:0;min-height:0}
html.phc .sc-hero .pl{object-position:46% 62%;filter:saturate(.96);transform:none}
html.phc .sc-hero .scrim{background:
  linear-gradient(#F7F7F2 0, #F7F7F2 calc(var(--tt) * 1px + 140px), #F7F7F2b8 calc(var(--tt) * 1px + 232px), #F7F7F200 calc(var(--tt) * 1px + 340px)),
  linear-gradient(#191A2000 60%, #191A2099)}
html.phc .sc-hero h1{position:absolute;left:14px;right:14px;top:calc(var(--tt) * 1px);margin:0;text-align:center;font-size:46px;line-height:45px;letter-spacing:-.056em;text-wrap:balance}
html.phc .sc-hero .desc{position:absolute;inset:auto 22px auto;top:calc(var(--tt) * 1px + 100px);margin:0;padding:0;text-align:center;font-size:18px;line-height:23px;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
html.phc .sc-hero .lede{position:absolute;left:24px;right:24px;top:calc(var(--tt) * 1px + 152px);margin:0;padding:0;text-align:center;font-size:14.5px;line-height:20px;color:#3a3b42;text-wrap:balance}
html.phc .hbtns.doorbtns{position:absolute;left:16px;right:16px;top:auto;bottom:20px;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;justify-content:stretch}
html.phc .hbtns.doorbtns .btn{position:relative;left:auto;top:auto;width:auto;height:48px;min-height:48px;margin:0;padding:0 12px;font-size:16px;white-space:nowrap}
html.phc .hbtns.doorbtns .btn:first-child{grid-column:1 / -1}
html.phc .hbtns.doorbtns .btn.ghost{background:#F7F7F2e6}
html.phc .hcs{display:block;z-index:6}
html.phc .hgc{display:none}
html.phc .hcd{display:block}
html.phc .cv.short .hc.l2,html.phc .cv.short .hc.r1{display:none}
html.phc .hc.r2{max-width:164px}
/* the four cards hug their words and lean on the phone's edges (left/top set by apeks.js) */
html.phc .hc{width:auto;max-width:138px;height:auto;padding:10px 13px 10px 10px;gap:9px;border-radius:16px}
html.phc .hc .hc-i,html.phc .hc.l2 .hc-i,html.phc .hc.r3 .hc-i{width:32px;height:32px}
html.phc .hc .hc-i svg,html.phc .hc.l2 .hc-i svg{width:17px;height:17px}
html.phc .hc .hc-t{white-space:normal;font-size:13px;line-height:1.2}
html.phc .hc .hc-t b,html.phc .hc.l1 .hc-t,html.phc .hc.l2 .hc-t,html.phc .hc.r1 .hc-t,html.phc .hc.r2 .hc-t{font-size:12.5px;line-height:1.18}
html.phc .hc-t small{margin-top:4px;font-size:9.5px;padding:2px 7px}
/* the phone (position set by apeks.js); tap it to see the next screen */
html.phc .sc-hero .hs{position:absolute;aspect-ratio:auto;margin:0;box-shadow:none;cursor:pointer;transform:rotate(var(--rot))}
/* the tabs become four dots under the phone */
html.phc .pill{position:absolute;left:50%;top:calc(var(--dy) * 1px);translate:-50% 0;width:auto;height:26px;margin:0;padding:0 8px;gap:2px;border-radius:99px;background:#191A20cc;box-shadow:0 10px 20px -12px #000a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.phc .pill button{flex:none;box-sizing:content-box;width:7px;height:7px;padding:9px 4px;line-height:0;font-size:0;border-radius:99px;background:#ffffff66;background-clip:content-box;transition:width .3s var(--ease),background-color .3s}
html.phc .pill button::before{display:none}
html.phc .pill button[aria-selected="true"]{width:20px;background-color:#fff}
html.phc .pill button:focus-visible{outline:2px solid #fff;outline-offset:1px}
html.phc .sample{position:absolute;left:calc(50% + 52px);top:calc(var(--dy) * 1px + 7px);margin:0;font-size:9.5px;color:#F7F7F2;text-shadow:0 1px 6px #000d;text-align:left}

/* ---------- how it works: the phone shrinks to the top, the lines roll under it ---------- */
html.phc .sc-mon{background:transparent}
html.phc .art{position:absolute;inset:auto;left:calc(var(--al) * 1px);top:calc(var(--at) * 1px);width:983.3px;height:615px;margin:0;aspect-ratio:auto;flex:none;transform:none}
html.phc .sc-mon::before{left:calc(var(--cw) * .5px - 270px);top:calc(var(--at) * 1px - 115px);width:540px;height:540px}
html.phc .a1,html.phc .a2{display:block}
html.phc .n2t{display:none!important}
html.phc .rest-mon{display:block;left:calc(var(--al) * 1px + 460.7px);top:calc(var(--at) * 1px + 108.5px);width:62px}
html.phc .npill{position:absolute;left:50%;top:calc(var(--at) * 1px + 254px);translate:-50% 0;width:auto;height:30px;line-height:30px;margin:0;padding:0 14px;font-size:11.5px;white-space:nowrap}
html.phc .mon-head{position:absolute;left:16px;right:16px;top:calc(var(--at) * 1px + 302px);margin:0}
html.phc .mon-eb{font-size:12px}
html.phc .mon-head .mon-title{margin-top:10px;font-size:35px;line-height:40px}
html.phc .mon-head .mon-title br{display:inline}
html.phc .msub{margin-top:12px;font-size:15px;line-height:1.45}
html.phc .rows-mask{left:0;right:0;top:calc(var(--at) * 1px + 290px);height:260px}
html.phc .rows{font-size:30px;line-height:36px}
html.phc .ln{position:absolute;left:0;right:0;top:92px;padding:0 18px;white-space:normal}
html.phc .lx,html.phc .still .lx{position:absolute;left:22px;right:22px;top:calc(var(--at) * 1px + 498px);width:auto;max-width:none;margin:0;font-size:15px;line-height:1.45;text-align:center}
html.phc .more-hooks{position:absolute;left:50%;top:calc(var(--at) * 1px + 562px);translate:-50% 0;margin:0;display:inline-flex;font-size:15px;white-space:nowrap}

/* ---------- your story: the depth cards gather around the headline in a portrait ring ---------- */
html.phc .sc-story{background:none}
html.phc .sc-story h2{position:absolute;left:0;right:0;top:calc(var(--ch) * .5px - 64px);order:0}
html.phc .sc-story h2 span{font-size:27px;line-height:34px}
html.phc .sc-story h2 em{font-size:39px;line-height:44px;white-space:nowrap}
html.phc .scs{position:absolute;inset:0;display:block;margin:0;perspective:760px;perspective-origin:50% 50%}
html.phc .zc{position:absolute;inset:0}
html.phc .sc-card{position:absolute!important;padding:0 16px!important;border-radius:20px;justify-content:center}
html.phc .sc-card span{font-size:10.5px!important;letter-spacing:.05em}
html.phc .sc-card b{font-size:19px!important;line-height:1.12;margin:4px 0 10px}
html.phc .sc-card .bars3{gap:6px}html.phc .sc-card .bars3 u{height:8px!important;width:28%!important}
html.phc .c-visit{left:8px!important;top:calc(var(--ch) * .085px)!important;width:168px!important;height:104px!important;rotate:4deg!important}
html.phc .c-crew{left:calc(var(--cw) * 1px - 180px)!important;top:calc(var(--ch) * .06px)!important;width:172px!important;height:100px!important;rotate:-4deg!important}
html.phc .c-duo{left:12px!important;top:calc(var(--ch) * .245px)!important;width:164px!important;height:108px!important;rotate:3deg!important}
html.phc .c-ten{left:calc(var(--cw) * 1px - 184px)!important;top:calc(var(--ch) * .235px)!important;width:166px!important;height:100px!important;rotate:-3deg!important}
html.phc .c-next{left:6px!important;top:calc(var(--ch) * .635px)!important;width:172px!important;height:98px!important;rotate:-3deg!important}
html.phc .c-reels{left:calc(var(--cw) * 1px - 184px)!important;top:calc(var(--ch) * .615px)!important;width:176px!important;height:104px!important;rotate:-4deg!important}
html.phc .c-meter{left:calc(var(--cw) * 1px - 238px)!important;top:calc(var(--ch) * .8px)!important;width:228px!important;height:118px!important;rotate:-3deg!important;padding:0 20px!important}
html.phc .c-meter b{font-size:22px!important}
html.phc .c-apex{left:-58px!important;top:calc(var(--ch) * .9px)!important;width:150px!important;height:96px!important;rotate:2deg!important}
html.phc .studio .bk1{left:-50px;top:calc(var(--ch) * .05px);width:190px;height:160px}
html.phc .studio .bk2{left:calc(var(--cw) * 1px - 120px);top:calc(var(--ch) * .16px);width:170px;height:170px}
html.phc .studio .bk3{left:calc(var(--cw) * 1px - 190px);top:calc(var(--ch) * .78px);width:220px;height:140px}
html.phc .studio .bk4{left:-30px;top:calc(var(--ch) * .68px);width:180px;height:150px}

/* ---------- pinned beats: each fills one screen and plays in view ---------- */
/* a bridge of empty sky before the comeback and the club, so the colour changes with no text on it */
html.phc .comeback5{padding:20px 0 0}
html.phc .rooms5{padding-top:64px;border-radius:28px 28px 0 0}
html.phc .comeback5 .wrapx,html.phc .nolist .wrapx,html.phc .proof .wrapx{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:52px;padding-bottom:18px}
html.phc .fsec .fcopy h2{font-size:32px;line-height:1.04}
html.phc .fsec .fline{margin-top:10px;font-size:15px;line-height:1.45}
/* the comeback */
html.phc .comeback5 .cb-row{grid-template-columns:1fr;gap:14px;margin-top:20px}
html.phc .comeback5 .wk{padding:38px 10px 14px;border-radius:24px}
html.phc .comeback5 .wk .rings i{top:-18px;height:44px;width:15px}
html.phc .comeback5 .wk-t{font-size:20px}
html.phc .comeback5 .days7{margin-top:10px;gap:4px}
html.phc .comeback5 .d{min-height:100px;border-radius:9px;padding-top:9px}
html.phc .comeback5 .d>span{font-size:11px}
html.phc .comeback5 .d .ck{width:28px;height:28px;margin-left:-14px;bottom:34px}
html.phc .comeback5 .d em{font-size:8.5px;bottom:6px;line-height:1.2}
html.phc .comeback5 .cbt{font-size:10px;padding:4px 8px;top:-11px;bottom:auto}
html.phc .comeback5 .ring5{display:grid;grid-template-columns:auto 1fr;align-items:center;justify-items:start;gap:16px;padding:0 6px}
html.phc .comeback5 .ring5 svg{width:112px}
html.phc .comeback5 .ring5 p{text-align:left}
html.phc .comeback5 .ring5 p span{display:block;font-size:13px;line-height:1.6}
html.phc .comeback5 .ring5 .kc{margin-left:0}
html.phc .comeback5 .ring5 p span i{margin-right:6px;vertical-align:-1px}
html.phc .comeback5 .morerow,html.phc .nolist .morerow,html.phc .proof .morerow{gap:18px;margin-top:14px;font-size:14px}
/* guilt */
html.phc .nolist{padding:0}
html.phc .nolist .nags{gap:10px;margin-top:22px}
html.phc .nag{padding:13px 16px;gap:12px;border-radius:20px}
html.phc .ni{width:36px;height:36px;border-radius:11px}
html.phc .nt b{font-size:17px}
html.phc .nt small{font-size:11.5px}
html.phc .nag.ok{margin-top:6px}
html.phc .illus{margin-top:12px}
html.phc .nolist .illus{transition:none;translate:none;scale:1}
/* the research: one chart per screen */
html.phc .proof{padding:0}
html.phc .proof .charts{position:relative;display:block;height:min(400px,54svh);margin:20px 0 0;max-width:none}
html.phc .proof .chart5{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;translate:0 26px;scale:1;transition:opacity .5s var(--ease),translate .5s var(--ease)}
html.phc .proof .chart5.on{opacity:1;translate:0 0}
html.phc .proof .chart5 .src{font-size:12px;line-height:1.45}
.cdots{display:none}
html.phc .cdots{display:flex;justify-content:center;gap:8px;margin-top:14px}
html.phc .cdots i{width:8px;height:8px;border-radius:99px;background:#191A2030;transition:width .3s var(--ease),background-color .3s}
html.phc .cdots i.on{width:22px;background:var(--coral)}
html.phc .proof .bound{margin-top:12px;font-size:13px}
/* the doors: a deck that fills the screen */
html.phc .doors{padding:0}
html.phc .doors .wrapx{height:100svh;overflow:hidden;display:flex;flex-direction:column;padding-top:56px;padding-bottom:12px}
html.phc .doors .fcopy h2{margin-top:8px}
html.phc .dprow{position:relative;flex:1;min-height:0;display:block;margin:30px 0 0;max-width:none;perspective:none}
html.phc .dprow .dp{position:absolute;inset:0;min-height:0;transform-origin:50% 0}
html.phc.js .dprow .dp{clip-path:none;transform:none;transition:box-shadow .5s var(--ease)} /* GSAP owns the swing and the deck here */
html.phc .dp h3{font-size:28px}
html.phc .dnote{margin-top:10px;font-size:11.5px;line-height:1.4}

/* ---------- the club: taller reels ---------- */
html.phc .reel li{width:min(56vw,250px)}

/* ---------- every portrait screen, motion or not ---------- */
@media (max-width:900px) and (orientation:portrait){
  /* coming soon: a swipe row, the next tile peeking in */
  .collage{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:4px var(--gut) 20px;scrollbar-width:none;overscroll-behavior-x:contain}
  .collage::-webkit-scrollbar{display:none}
  .collage>li{flex:0 0 min(80%,420px);min-height:300px;scroll-snap-align:center}
  .tl-apex{padding:26px}.tl-apex b{font-size:32px}
  .apex-g{width:44%;right:4%}
  .swdots{display:flex;justify-content:center;gap:7px;margin-top:4px}
  .swdots i{width:7px;height:7px;border-radius:99px;background:#191A2030;transition:width .3s var(--ease),background-color .3s}
  .swdots i.on{width:20px;background:var(--coral)}
  .ftr a{display:inline-block;padding:9px 4px;font-size:13px}
  /* see you Monday: a portrait flat lay, cropped around its phone (photo 1024x1536, window 700x1250) */
  .ccv{--cb:700;aspect-ratio:700/1250;-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}
  .cv-c{position:absolute;left:0;top:0;width:1024px;height:1536px;transform:scale(var(--sw,1)) translate(-162px,-143px);transform-origin:0 0}
  .cv-c .pl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .cs{left:364px;top:450px;width:295px;height:621px;border-radius:40px}
  .cc{margin-top:-40px}
}
.qtabs[hidden]{display:none!important}

/* short phones (667 to 760 tall): the door overlays shrink and the ghost list keeps three rows, so they clear the door's words */
@media (max-height:760px){
  html.phc .dp-ov{scale:.84;transform-origin:100% 0}
  html.phc .dp-g .dp-ov{transform-origin:0 0}
  html.phc .ghostc .gh-r:nth-child(3),html.phc .ghostc .gh-r:nth-child(4){display:none}
}


/* v8.4: the story path (positions set by apeks.js), the door tabs that follow the deck */
html.phc .sc-story h2{top:52px}
html.phc .sc-story h2 span{font-size:25px;line-height:31px}
html.phc .sc-story h2 em{font-size:36px;line-height:42px}
html.phc .spath{display:block;position:absolute;left:0;top:0;width:calc(var(--cw) * 1px);height:calc(var(--ch) * 1px);overflow:visible}
html.phc .spath path{fill:none;stroke:#FF8A70;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:.5 9;filter:drop-shadow(0 0 6px #FF725Eaa)}
html.phc .spath circle{fill:#FF725E;stroke:#191A20;stroke-width:2.5;filter:drop-shadow(0 0 6px #FF725Ecc)}
html.phc .zc{z-index:1}html.phc .spath{z-index:2}
html.phc .sc-card{padding:0 15px!important;border-radius:18px}
html.phc .sc-card span{font-size:10px!important}
html.phc .sc-card b{font-size:17px!important;line-height:1.1;margin:3px 0 8px}
html.phc .c-meter b{font-size:21px!important}
html.phc .studio .bk3{top:calc(var(--ch) * .84px)}
html.phc .dtabs{display:flex;gap:4px;margin:12px auto 0;padding:4px;border-radius:99px;background:#191A200f;width:max-content}
html.phc .dtabs button{min-height:36px;padding:0 16px;border:0;border-radius:99px;background:none;font:600 13.5px Satoshi,system-ui,sans-serif;color:#45464d;cursor:pointer}
html.phc .dtabs button[aria-current]{background:var(--ink);color:#fff}
html.phc .dprow{margin-top:14px}
html.phc .dp-who{left:12px;top:12px;padding:6px 12px 6px 6px}
html.phc .dw-i{width:32px;height:32px}
html.phc .dw-t b{font-size:15px}
html.phc .dp-ov{top:70px}
html.phc .dp-more{right:12px;top:16px;padding:7px 10px;font-size:12px}
html.phc .dw-n{display:none}
html.phc .dp-m .dp-ov,html.phc .dp-b .dp-ov,html.phc .dp-ov{top:72px}

/* v8.5: tap targets, the money line inside the deck, very short screens */
html.phc .dtabs button{min-height:44px}
html.phc .pill button{position:relative}
html.phc .dp-more::after{content:"";position:absolute;inset:-8px}
html.phc .doors .wrapx{padding-top:48px;padding-bottom:8px}
html.phc .dprow{margin-top:10px}
html.phc .dnote{margin-top:6px;font-size:11px;line-height:1.35}
@media (max-height:700px){html.phc .dp-ov{scale:.72}html.phc .ghostc .gh-r:nth-child(n+5):not(.back){display:none}}