/* Proposal 07: what's new on top of 06's style.css (mega menu, the day's new layout and screens, the one-screen
   Ecosystem, pricing models, Ask, services, contact). Design-system tokens only; the one exception is the Polish
   flag red (#DC143C) in "Built for Poland", Mike's call. */
[hidden]{display:none !important}
body.locked{overflow:hidden;padding-right:var(--sbw,0px)}
body.locked .nav{padding-right:var(--sbw,0px)}
body.locked .skip{margin-right:var(--sbw,0px)}
.soon{display:inline-flex;align-items:center;font:600 10.5px "Inter";letter-spacing:.04em;text-transform:uppercase;color:#7a6200;background:#FFF4C2;padding:3px 7px;border-radius:999px;margin-left:6px;vertical-align:2px;font-style:normal;white-space:nowrap}
/* a nav jump: the page fades in at the target instead of scrolling through the day */
body.jumping::after{content:"";position:fixed;inset:0;z-index:45;background:var(--paper);pointer-events:none;animation:jf .32s ease-out forwards}
@keyframes jf{from{opacity:.85}to{opacity:0}}

/* ---------------- nav: mega menu, search, phones ---------------- */
.nav .menu{display:flex;gap:4px;list-style:none;font-size:15px;font-weight:500}
.nav .menu li a{display:block;padding:8px 11px;border-radius:999px;text-decoration:none;color:var(--ink-2);transition:color .2s, background .2s;white-space:nowrap}
.nav .menu li.on a,.nav .menu li a:hover{color:var(--ink);background:rgba(43,41,38,.06)}
.nav.dark .menu li a{color:var(--night-ink-2)}.nav.dark .menu li.on a,.nav.dark .menu li a:hover{color:var(--night-ink);background:rgba(255,255,255,.07)}
@media (max-width:1280px){.nav .menu li a{padding:8px 8px;font-size:14px}.nav .right{gap:10px}}
.nav .right{gap:10px}
.sbtn,.burger{width:40px;height:40px;border-radius:12px;border:0;background:transparent;display:grid;place-items:center;font-size:20px;cursor:pointer;color:var(--ink-2);transition:background .2s,color .2s}
.sbtn:hover,.burger:hover,.nav.searching .sbtn{background:rgba(43,41,38,.07);color:var(--ink)}
.nav.dark .sbtn,.nav.dark .burger{color:var(--night-ink-2)}
.burger{display:none}
@media (max-width:1250px){.nav .menu{display:none}.burger{display:grid}}
@media (max-width:640px){.nav .sbtn{display:none}}
.nav.mopen,.nav.searching{background:rgba(245,239,229,.97);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(0,0,0,.05)}
.nav.dark.mopen,.nav.dark.searching{background:rgba(245,239,229,.97)}
.nav.dark.mopen .brand span,.nav.dark.searching .brand span{color:var(--graphite)}
.nav.dark.mopen .menu li a{color:var(--ink-2)}.nav.dark.mopen .menu li.on a{color:var(--ink);background:rgba(43,41,38,.06)}
.nav.dark.mopen .lswitch a,.nav.dark.mopen .sbtn{color:var(--ink-2)}
.nav.dark.mopen .vswitch{background:rgba(43,41,38,.07)}.nav.dark.mopen .vswitch button{color:var(--ink-2)}.nav.dark.mopen .vswitch button.on{background:var(--card);color:var(--ink)}

.mega{position:absolute;left:0;right:0;top:100%;background:rgba(250,246,239,.98);backdrop-filter:blur(12px);box-shadow:0 30px 60px -30px rgba(60,40,0,.25), 0 1px 0 rgba(0,0,0,.05) inset;
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1)}
.mega.open{opacity:1;transform:none;pointer-events:auto}
.mega .wrap{max-width:1380px;padding-top:26px;padding-bottom:30px}
.mp{display:none;grid-template-columns:270px 1fr;gap:40px}
.mp.on{display:grid;animation:mpin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes mpin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mk{display:block;font:600 12px "Inter";letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.mp-l p{margin-top:10px;font-size:15px;color:var(--ink-2);line-height:1.5}
.mlink{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:2px}
.mp-g{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;align-content:start}
.mp-g a{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:10px 12px;border-radius:14px;text-decoration:none;transition:background .2s}
.mp-g a:hover{background:rgba(43,41,38,.05)}
.mp-g a > i{grid-row:1/3;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;background:color-mix(in srgb,var(--c) 32%,white);color:var(--ink)}
.mp-g a b{font-weight:600;font-size:15px;color:var(--ink);line-height:1.25}
/* descriptions wrap to a second line, never cut; every tile keeps the two-line height so the grid stays even (Mike, 2026-10-15) */
.mp-g a span{font-size:13px;color:var(--ink-3);line-height:16px;min-height:32px}
.mp-g a{align-items:start}.mp-g a > i,.mp-g .mi-ic{align-self:center}
.mp-g a > i.flag img{width:22px;height:22px}
.mp-g a.hot{background:#FFF4C2}
/* the website deal: two slots wide, in the dark-and-gold look of the pricing banner (Mike, 2026-10-15) */
/* tiles keep their own height: a taller deal tile doesn't stretch its neighbour */
.mp-g{align-items:center}
.mp-g a.deal{grid-column:span 2;background:var(--night);box-shadow:var(--shadow-lg);padding:7px 12px}
.mp-g a.deal:hover{background:var(--night-3)}   /* stays in place and lightens (Mike, 2026-10-28: the jump up bugged him) */
.mp-g a.deal > i{background:var(--gold);color:var(--ink)}
.mp-g a.deal b{color:var(--gold);font-size:16.5px;display:flex;align-items:center;gap:10px}
.mp-g a.deal b em{font:600 10.5px "Inter";font-style:normal;letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:3px 8px;border-radius:999px}
.mp-g a.deal span{color:var(--night-ink-2);margin-top:3px}
.mp-g.apps{grid-template-columns:repeat(4,1fr)}
.mp-g .mi-ic{grid-row:1/3;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--bg-i);box-shadow:0 0 0 1px rgba(43,41,38,.08)}
.mp-g .mi-ic svg{width:16px;height:22px}

.search-pop{position:absolute;left:0;right:0;top:100%;background:rgba(250,246,239,.98);backdrop-filter:blur(12px);box-shadow:0 30px 60px -30px rgba(60,40,0,.25)}
.search-pop .wrap{max-width:860px;padding-top:20px;padding-bottom:24px}
.sbox{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:16px;padding:8px 8px 8px 18px;box-shadow:var(--shadow-warm)}
.sbox > i{font-size:20px;color:var(--ink-3)}
.sbox input{flex:1;border:0;background:transparent;font:500 18px "Geist";color:var(--ink);outline:none;min-width:0}
.sbox input::-webkit-search-cancel-button{display:none}
.sclose{width:38px;height:38px;border-radius:11px;border:0;background:var(--paper-2);display:grid;place-items:center;font-size:18px;cursor:pointer}
.sres{margin-top:12px;display:grid;gap:2px}
.sres button{display:flex;gap:12px;align-items:center;text-align:left;border:0;background:transparent;padding:9px 12px;border-radius:12px;cursor:pointer;font:inherit}
.sres button:hover,.sres button:focus{background:rgba(43,41,38,.05);outline:none}
.sres button > i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex:none;background:color-mix(in srgb,var(--c) 32%,white)}
.sres b{display:block;font-weight:600;font-size:15px}
.sres small{display:block;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:700px}
.shint{font-size:14px;color:var(--ink-3);padding:8px 12px}

.fsmenu{position:fixed;inset:0;z-index:80;background:var(--paper);overflow:auto;padding:0 16px 30px}
.fs-top{display:flex;justify-content:space-between;align-items:center;height:64px}
.fs-top button{width:42px;height:42px;border:0;border-radius:12px;background:var(--paper-2);font-size:20px;display:grid;place-items:center}
.fsg{border-top:1px solid var(--paper-3)}
.fsg summary{list-style:none;display:flex;justify-content:space-between;align-items:stretch;font-size:20px;font-weight:600;cursor:pointer}
/* the name goes to the section, the right quarter opens the group (Mike, 2026-10-24); a short line between them */
.fsgo{flex:1;padding:16px 4px;color:inherit;text-decoration:none}
.fsgt{flex:0 0 25%;position:relative;display:flex;align-items:center;justify-content:flex-end;padding-right:4px}
.fsgt::before{content:"";position:absolute;left:0;top:30%;bottom:30%;width:1px;background:var(--paper-3)}
.fsg summary::-webkit-details-marker{display:none}
.fsg[open] summary i{transform:rotate(180deg)}
.fsl{display:grid;gap:2px;padding-bottom:10px}
.fsl a{display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:center;padding:8px 4px;text-decoration:none}
.fsl a > i,.fsl .mi-ic{grid-row:1/3;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c,#ccc) 32%,white);font-size:18px}
.fsl a > i.flag img{width:18px;height:18px}   /* the size of the other icons (Mike, 2026-10-24: it filled the tile) */
.fsl .mi-ic{background:var(--bg-i)}.fsl .mi-ic svg{width:15px;height:21px}
.fsl b{font-size:15.5px}.fsl span{font-size:13px;color:var(--ink-3)}
/* the website deal under Pricing: a dark card like the mega menu's (Mike, 2026-10-25: it was unstyled) */
.fsl a.deal{background:var(--night);border-radius:16px;padding:12px;margin:6px 0 2px;align-items:start}
.fsl a.deal > i{background:var(--gold);color:var(--ink)}
.fsl a.deal b{color:var(--gold);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.fsl a.deal b em{font:600 10.5px "Inter";font-style:normal;letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:3px 8px;border-radius:999px}
.fsl a.deal span{color:var(--night-ink-2);line-height:1.45;margin-top:4px}
.fsx{display:flex;gap:10px;margin-top:20px}
.sbtn2{flex:1;display:flex;gap:8px;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--paper-2);font:600 15px "Geist";padding:13px}

/* ---------------- the day: time bar on top, copy + app, the band of facts ---------------- */
.day .cols{position:absolute;inset:auto 0 auto 0;top:118px;bottom:200px;display:grid;align-items:start;max-width:1380px;margin:0 auto;padding:0 32px;left:0;right:0}
.day .left{height:auto;align-self:center}
/* the clock, the copy and the app sit a little higher, more room for the widgets under them (Mike, 2026-10-21) */
@media (min-width:981px){.day .stage{margin-top:clamp(0px,2vh,24px)}}
.stage{aspect-ratio:auto;justify-self:center}
.timeline{position:absolute;left:32px;right:32px;top:100px;bottom:auto;height:auto;background:none;max-width:1316px;margin:0 auto;z-index:4}
.timeline .track{position:relative;height:6px;border-radius:3px;background:rgba(43,41,38,.13)}
.timeline .fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-radius:3px;width:0}
.timeline .knob{position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--day-bg)}
.timeline .tick{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--c);transform:translateX(-50%);box-shadow:0 0 0 3px var(--day-bg);border:0;padding:0;cursor:pointer;z-index:1;transition:transform .2s}
.timeline .tick:hover{transform:translateX(-50%) scale(1.35)}
.timeline .hrs{position:relative;height:16px;margin-top:8px;font:500 11.5px "Inter";color:var(--ink-3);display:block}
.timeline .hrs span{position:absolute;transform:translateX(-50%)}
.day.zoom .timeline{opacity:0;pointer-events:none}
.clock{font-size:clamp(46px,min(7.5vw,11.5vh),118px);margin-top:6px}
.daycopy .kicker{display:block}
.mod{margin-top:clamp(10px,2vh,22px)}
.stepcopy{min-height:clamp(120px,24vh,230px);margin-top:clamp(10px,1.8vh,18px)}
.stepcopy h2{font-size:clamp(19px,3.1vh,30px)}
.stepcopy p{font-size:clamp(14px,2.05vh,16px);margin-top:clamp(6px,1.2vh,12px)}
@media (max-height:640px) and (min-width:981px){.stepcopy p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
.zoomcopy .grows{margin-top:10px;font:620 clamp(18px,2.6vh,22px)/1.25 "Geist";letter-spacing:-.02em}
.zoomcopy .grows::after{content:"";display:block;width:54px;height:4px;border-radius:2px;background:var(--gold);margin-top:12px}
.zsteps{min-height:clamp(170px,30vh,300px);margin-top:clamp(10px,2vh,20px)}
.zsteps h3{font-size:clamp(26px,4.4vh,44px)}
.app.pulse .panel-b{animation:pb .55s cubic-bezier(.2,.8,.2,1)}
@keyframes pb{from{transform:translateY(10px);filter:brightness(1.04)}to{transform:none;filter:none}}

.band{position:absolute;left:0;right:0;bottom:14px;max-width:1380px;margin:0 auto;padding:0 32px;display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px);z-index:2;transition:opacity .4s}
.bhead{display:flex;align-items:center;gap:18px;min-height:0}
.bname{display:flex;align-items:center;gap:12px;font:640 clamp(24px,4.2vh,40px)/1 "Geist";letter-spacing:-.035em;white-space:nowrap}
.bname span{background:linear-gradient(transparent 64%, color-mix(in srgb,var(--mc) 70%,white) 64%, color-mix(in srgb,var(--mc) 70%,white) 92%, transparent 92%);padding:0 .04em}
/* the module icon: a little bigger, a thin stroke, a soft shadow outside instead of the sidebar's inner one (Mike, 2026-10-21) */
.bic{width:clamp(38px,5.8vh,52px);height:clamp(38px,5.8vh,52px);border-radius:28%;display:grid;place-items:center;font-size:clamp(18px,2.8vh,24px);background:var(--mc);color:var(--ink);box-shadow:var(--shadow-sm);flex:none;font-style:normal}
.bic svg{width:64%;height:64%;stroke-width:1.15}
.blead{color:var(--ink-2);font-size:clamp(14px,2vh,16px);line-height:1.35;flex:1;min-width:0;text-wrap:pretty}   /* wraps, never cut with "..." (Patricia, 2026-10-27) */
.bmore{margin-left:auto;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:600 14.5px "Geist";padding:11px 18px;cursor:pointer;white-space:nowrap;transition:transform .2s, background .2s}
.bmore:hover{transform:translateX(2px);background:#000}
.bmore .s,.bskip .s{display:none}
@media (max-width:340px){.bmore .l{display:none}.bmore .s{display:inline}}   /* the narrowest phones: "More" */
.bw{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;flex:1;min-height:0;align-items:stretch}
.bw li{display:flex;gap:13px;align-items:flex-start;background:rgba(255,253,249,.72);border-radius:18px;padding:clamp(12px,2vh,18px) clamp(14px,1.3vw,20px);box-shadow:var(--shadow-sm);overflow:hidden;
  opacity:0;transform:translateY(12px)}
.band.in .bw li{animation:bwin .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d) * 110ms + 80ms)}
@keyframes bwin{to{opacity:1;transform:none}}
.bw li > i{width:clamp(32px,4.4vh,38px);height:clamp(32px,4.4vh,38px);border-radius:11px;display:grid;place-items:center;font-size:clamp(17px,2.3vh,20px);background:color-mix(in srgb,var(--mc) 34%,white);flex:none}
.bw b{display:block;font-weight:620;font-size:clamp(14.5px,2.1vh,17px);line-height:1.25;letter-spacing:-.01em}
.bw span{display:block;font-size:clamp(13px,1.85vh,15px);color:var(--ink-2);line-height:1.4;margin-top:4px}
.bw .soon{margin:6px 0 0}
@media (max-height:700px) and (min-width:981px){.blead{display:none}}
.skip{position:fixed;right:24px;bottom:22px;z-index:40;display:flex;align-items:center;gap:6px;border:0;border-radius:999px;background:rgba(43,41,38,.9);color:var(--paper);padding:11px 16px 11px 18px;font:500 14px "Geist";cursor:pointer;
  box-shadow:var(--shadow-lg);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s, transform .3s}
.skip b{font-weight:650}
.skip i{font-size:17px;margin-left:4px}
.skip.on{opacity:1;transform:none;pointer-events:auto}
.skip:hover{background:var(--ink)}
@media (max-width:980px){
  .timeline{left:16px;right:16px;top:72px}
  .day .cols{padding:0 16px;grid-template-columns:1fr !important;gap:10px;align-items:start;align-content:start}
  .day .stage{margin-top:4px}   /* its size comes from sizeDay: the whole app across the width (phone pass, 2026-10-24) */
  .mod{display:none}   /* the band under the app names the module */
  /* the clock on the kicker's line (Mike, 2026-10-24: make better use of the space) */
  .daycopy{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}
  .daycopy .kicker{grid-column:1;grid-row:1}
  .clock{grid-column:2;grid-row:1;font-size:34px;margin:0}
  .stepcopy{grid-column:1/-1}
  .band{padding:0 16px;bottom:10px;gap:8px}
  .bname{font-size:24px}.blead{display:none}.bmore{padding:9px 14px;font-size:13.5px}.band .bskip + .bmore{margin-left:auto}
  .bw{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;scrollbar-width:none}
  .bw li{flex:0 0 72%;scroll-snap-align:start;padding:10px 12px}
  .bw span{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px}   /* the band is sized to the text (sizeDay) */
  .bw b{font-size:14px}
  .skip{right:var(--skipr,16px);bottom:var(--skipb,calc(var(--bandh,140px) + 22px));padding:9px 13px;font-size:13px}   /* on the app's bottom-right corner (sizeDay) */
  .skip span{display:none}
  /* chains: the time bar is gone, so the text moves up into its place and packs tighter; the tree gets the room */
  .day.zoom .zoomcopy{transform:translateY(-52px)}
  .zoomcopy .grows{font-size:18px;margin-top:6px}.zoomcopy .grows::after{margin-top:8px}
  .zsteps{margin-top:8px}.zsteps h3{font-size:24px}.zsteps p{font-size:14px;margin-top:6px}
}
/* phones (Mike, 2026-10-24: too crowded): no feature cards under the app (they're all in the pop-up); the module's
   one-line description under its name, a smaller icon, and at the bottom Find out more (dark) beside the skip button
   (light, as on desktop), which replaces the floating one */
@media (max-width:760px){
  .band .bw{display:none}
  .band{justify-content:flex-end}   /* the buttons stay put whether the description takes one line or two */
  .bhead{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"icon name name" "icon lead lead" "more more skip";
    column-gap:12px;row-gap:3px;align-items:center}
  .bname{display:contents;font-size:22px}
  .bic{grid-area:icon;width:34px;height:34px;font-size:17px;align-self:start;margin-top:1px}
  .bic svg{width:58%;height:58%}
  .bname span{grid-area:name;justify-self:start}
  .blead{display:block;grid-area:lead;white-space:normal;font-size:14px;line-height:1.35}
  .band .bmore,.band .bskip + .bmore{grid-area:more;justify-content:center;margin:12px 0 0}
  .band .bskip{display:inline-flex;grid-area:skip;margin:12px 0 0;padding:9px 14px;font-size:13.5px;justify-content:center}
  .bskip .l{display:none}.bskip .s{display:inline}
  .skip{display:none}
}

/* phones: the day scrolls with the page (Mike, 2026-10-25, version 3; main.js, buildFlow): the kicker and a small
   analog clock pinned under the nav; the app comes up over the first stop's heading and stays pinned under them, the
   clock on top of it; each stop's text (module name, heading, copy, feature cards, Find out more) scrolls up from the
   bottom and goes behind the app. The pinned frame after the stops only zooms out to the venues */
.dayflow{display:none}
.aclock{display:none}
@media (max-width:760px){
  .dayflow{display:block;position:relative;z-index:1;background:var(--day-bg);padding:0 16px}   /* ends as the last stop's text goes behind the app */
  /* no overflow clip here (nor any clip or overflow on it): Safari on iPhone can't keep pinned things steady inside one
     and moves them a frame late, so they shake (Mike, 2026-10-25) */
  .day.flowed .timeline,.day.flowed .daycopy{display:none}
  /* the frame after the stops: shown once pinned, over the end of the day; its kicker and the clock as the day's,
     until the venues' copy comes in */
  .day.flowed .sticky{visibility:hidden;z-index:2;background:var(--day-bg)}
  .day.flowed.live .sticky{visibility:visible}
  .day.flowed .stage .app{border-radius:30px}
  .day.flowed:not(.zoom) .band{opacity:0;pointer-events:none}
  .zhead{position:absolute;top:64px;left:0;right:0;z-index:5;padding:18px 16px 10px;transition:opacity .45s}
  .zhead > .kicker{display:block;padding-right:66px}
  .day.zoom .zhead{opacity:0}
  .fhead{position:sticky;top:64px;z-index:5;margin:0 -16px;padding:18px 16px 10px;background:var(--day-bg)}
  .fhead > .kicker{display:block;padding-right:66px}
  .fintro{position:sticky;z-index:1;padding:4px 66px 18px 0}
  .fintro h2{font-size:23px;letter-spacing:-.03em;line-height:1.12;font-weight:620}
  .fintro p{margin-top:8px;color:var(--ink-2);font-size:15px}
  .fstage{position:sticky;z-index:4;margin:0 -16px;padding:5px 16px 0;background:var(--day-bg)}
  .fstage::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:linear-gradient(var(--day-bg),transparent);pointer-events:none}
  .fapp{position:relative}
  .fapp .app{position:absolute;left:0;top:0;width:1200px;height:720px;transform-origin:0 0;border-radius:30px}
  .fstep{position:relative;z-index:0;padding-top:22px}
  .fstep + .fstep{margin-top:96px}   /* 56 until 2026-10-26: more room, with the divider in it */
  /* the divider (Mike, 2026-10-26): a line in the module's colour, getting stronger to the right, into a ring (the
     logo's, like the Ecosystem card's) cut by the screen's edge */
  .fdiv{position:absolute;left:0;right:-16px;top:-76px;height:56px;pointer-events:none;
    background:radial-gradient(circle at 100% 50%, transparent 17px, var(--mc) 17.5px, var(--mc) 26.5px, transparent 27px),
      linear-gradient(90deg, transparent, color-mix(in srgb,var(--mc) 55%,transparent) 45%, var(--mc)) center / 100% 2px no-repeat}
  .fname{display:flex;align-items:center;gap:10px;font:640 19px/1 "Geist";letter-spacing:-.03em}
  .fname span{background:linear-gradient(transparent 64%, color-mix(in srgb,var(--mc) 70%,white) 64%, color-mix(in srgb,var(--mc) 70%,white) 92%, transparent 92%);padding:0 .04em}
  .fname .bic{width:30px;height:30px;font-size:15px}
  .fname .bic svg{width:58%;height:58%}
  .fstep h2{margin-top:14px;font-size:21px;letter-spacing:-.03em;line-height:1.15;font-weight:620}
  .fstep p{margin-top:6px;color:var(--ink-2);font-size:15px}
  .fbw{margin:16px -16px 0;padding:2px 16px 8px;scroll-padding:0 16px}
  .fbw li{opacity:1;transform:none;background:rgba(255,253,249,.72)}
  .fbw li > i{background:color-mix(in srgb,var(--mc) 34%,white)}
  .fmore{display:flex;align-items:center;gap:8px;margin:14px auto 0;border:0;border-radius:999px;background:var(--mc);color:var(--ink);
    font:600 14.5px "Geist";padding:11px 20px;box-shadow:var(--shadow-sm);cursor:pointer}
  .fmore i{font-size:17px}
  /* the clock, top right under the nav, on top of the pinned app: a white face, hour marks, black hands, a red second
     hand going round once a minute */
  .aclock{display:block;position:absolute;top:21px;right:16px;z-index:2;width:54px;height:54px;border-radius:50%;background:#fff;
    box-shadow:var(--shadow-sm),0 0 0 1px rgba(43,41,38,.08)}
  .aclock .mk{position:absolute;left:50%;top:3px;width:1.6px;height:5px;margin-left:-.8px;border-radius:1px;background:var(--ink);
    transform-origin:50% 24px;transform:rotate(calc(var(--k) * 30deg))}
  .aclock .hd{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:2px;background:var(--ink)}
  .aclock .hh{width:3px;height:14px;margin-left:-1.5px}
  .aclock .hm{width:2px;height:20px;margin-left:-1px}
  .aclock .hs{width:1px;height:23px;margin-left:-.5px;background:var(--danger-2);animation:aclk 60s linear infinite}
  .aclock:not(.on) .hs{animation-play-state:paused}
  .aclock .pin{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--danger-2)}
}
@keyframes aclk{to{transform:rotate(360deg)}}

/* the app picture: new screens. .x2 = the second state of a stop, shown as you scroll on (.screen.s2) */
.screen .x2{opacity:0;pointer-events:none;transition:opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1)}
.screen.s2 .x2{opacity:1;transform:none}
.screen .x1{transition:opacity .35s}
.screen span.x2,.screen.s2 span.x1,.screen .x2o,.screen.s2 .x1o{display:none}
.screen.s2 span.x2,.screen.s2 .x2o{display:inline-flex}
/* in-place swaps: the second state takes the first one's place */
.screen .kanban.x2,.screen .funnel.x2,.screen .inv.x2,.screen .rmods.x2{display:none}
.screen.s2 .kanban.x1,.screen.s2 .cuw.x1,.screen.s2 .rgrid.x1{display:none}
.screen.s2 .funnel.x2,.screen.s2 .rmods.x2{display:grid;animation:swin .55s cubic-bezier(.2,.8,.2,1)}
.screen.s2 .inv.x2{display:block;animation:swin .55s cubic-bezier(.2,.8,.2,1)}
@keyframes swin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.kt6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.kt5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
.kt{background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);padding:10px 12px;position:relative;min-height:104px;overflow:hidden}
.kt .kh{display:flex;align-items:center;gap:6px;font:600 10px "Inter";letter-spacing:.05em;text-transform:uppercase;color:#8a8a8a;white-space:nowrap}
.kt .kh i{font-size:14px;color:#666}
.kt .kv,.wcard .kv{font:650 26px "Geist";letter-spacing:-.02em;color:#2a2a2a;margin-top:4px;line-height:1.1}
.kt .kd{display:inline-block;margin-top:4px;font-size:11px;font-weight:600;color:#777;padding:1px 6px;border-radius:6px;background:#F1F1F1}
.kt .kd.up{color:#0f7a2e;background:#E3F6E8}.kt .kd.dn{color:#9a2b18;background:#FBE4DE}
.kt .ks,.wcard .ks{font-size:11px;color:#8a8a8a;margin-top:4px}
.kt svg{display:block;width:100%;height:24px;margin-top:6px}
.kt.now{transition:background .5s}
.screen.s2 .kt.now{background:color-mix(in srgb,var(--visits) 30%,white)}
.kt.y{background:#FFF8D6}
.dg2{display:grid;grid-template-columns:1.55fr 1fr;gap:12px;margin-top:12px}
.dstack{display:flex;flex-direction:column;gap:12px}
.wcard{background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);padding:0 12px 12px;overflow:hidden;position:relative}
.wcard .wh{display:flex;align-items:center;gap:8px;margin:0 -12px 10px;padding:9px 12px;background:color-mix(in srgb,var(--wc) 30%,white);font:600 13px "Geist";color:#3a3a3a}
.wcard .wh i{font-size:16px}
.wcard .op{margin-left:auto;background:#fff;border-radius:8px;padding:2px 9px;font-size:11.5px;box-shadow:var(--shadow-sm)}
.wcard svg{display:block;width:100%;height:30px;margin-top:6px}
.c3{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;height:318px;padding-bottom:18px}
.dcol{position:relative;background:repeating-linear-gradient(to bottom,#F7F7F7 0 1px,transparent 1px 20%);border-radius:8px}
.dh{position:absolute;left:0;right:0;top:-2px;font:600 10.5px "Inter";color:#999;padding:2px 4px}
.dh.on{color:#B34D9E}
.ce{position:absolute;left:3px;right:3px;top:calc(var(--t) * 1% + 16px);height:calc(var(--h) * 1%);min-height:26px;border-radius:7px;background:var(--c);color:var(--ct,#fff);font:600 10.5px/1.2 "Inter";padding:4px 6px;display:flex;justify-content:space-between;gap:4px;overflow:hidden}
.ce b{font-weight:600;opacity:.9;white-space:nowrap}
.hl6{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-size:10px;color:#aaa}
.tg{display:grid;grid-template-columns:1fr auto;font-size:12.5px;margin-top:8px;gap:2px 10px}
.tg .bar{grid-column:1/3;margin-top:3px}
.fu{display:flex;gap:10px;align-items:center;background:#F7F7F7;border-radius:10px;padding:7px 10px;margin-top:6px;font-size:12px}
.fu > i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--crm) 35%,white);font-size:15px;flex:none}
.fu b{display:block;font-weight:600;color:#2a2a2a}.fu span{color:#888;font-size:11px}
.fu em{margin-left:auto;font-style:normal;font-weight:600;color:#555}
.toast{position:absolute;right:0;top:-6px;display:flex;align-items:center;gap:10px;background:#2B2926;color:#fff;border-radius:12px;padding:10px 14px;font-size:13px;box-shadow:var(--shadow-xl);transform:translateY(-12px);z-index:5}
.toast i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--visits);color:#1d3a4d;font-size:15px}
.vgrid{display:grid;grid-template-columns:1fr 268px;gap:14px}
.vgrid .vrow .who{width:208px}
.vgrid .vrow .seg{font-size:13px}
.vside{display:flex;flex-direction:column;gap:10px}
.bc{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px solid #f1f1f1}
.bc:last-child{border:0}
.kid{display:flex;justify-content:space-between;align-items:center;padding:10px;background:#fff;border-radius:10px;margin-bottom:8px;font-size:13px}
.entry{position:absolute;right:14px;top:26px;width:330px;background:#fff;border-radius:18px;box-shadow:0 40px 80px -20px rgba(0,0,0,.35), 0 20px 30px -10px rgba(0,0,0,.15);padding:0 16px 16px;transform:translateX(40px) scale(.97);z-index:5;overflow:hidden}
.entry .eh{display:flex;justify-content:space-between;align-items:center;margin:0 -16px 14px;padding:11px 16px;background:var(--visits);font:600 13px "Geist"}
.entry .eh span{display:flex;align-items:center;gap:8px}
.entry .eb{display:flex;gap:14px;align-items:center}
.entry .ph{width:72px;height:72px;border-radius:20px;flex:none}
.entry .eb b{display:block;font:650 21px "Geist";letter-spacing:-.02em;color:#222}
.entry .eb span{font-size:12px;color:#888}
.entry dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:14px 0;font-size:13px}
.entry dt{color:#888}.entry dd{font-weight:600;text-align:right;color:#222}
.ok-b{display:flex;align-items:center;justify-content:center;gap:8px;background:#1DDB52;border-radius:12px;padding:12px;font:650 16px "Geist";color:#0d3d1b}
.ok-b i{font-size:20px}
.ok-b.pay{background:var(--gold);color:var(--ink);font-size:14.5px}
.entry.exit{top:40px}
.sale{position:absolute;inset:0;background:var(--s1);border-radius:14px;padding:6px 8px;transform:translateY(18px);z-index:5}
.sbar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sbar .url{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 14px;font-size:12.5px;color:#666;box-shadow:var(--shadow-sm)}
.sbar .sw{font:600 11px "Inter";letter-spacing:.06em;text-transform:uppercase;color:#888}
.sale h4{font:650 24px "Geist";letter-spacing:-.02em;text-align:center;margin:16px 0 14px;color:#2a2a2a}
.tiers3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 30px}
.tc{position:relative;background:#fff;border-radius:16px;padding:18px 18px 16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.tc b{font:620 16px "Geist";color:#2a2a2a}
.tc .tp{font:650 32px "Geist";letter-spacing:-.03em;margin-top:6px;color:#222}
.tc .tp small{display:block;font:500 12px "Inter";color:#888;letter-spacing:0}
.tc ul{list-style:none;margin:12px 0 16px;font-size:12.5px;color:#555;flex:1}
.tc li{padding:4px 0 4px 18px;position:relative}
.tc li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:5px;border-left:2px solid #139a3a;border-bottom:2px solid #139a3a;transform:rotate(-45deg)}
.tc .buy{display:block;text-align:center;background:var(--sc,var(--clients));border-radius:11px;padding:10px;font-weight:650;font-size:13.5px;color:#1f1f1f}
.tc.pop{box-shadow:0 0 0 2px var(--sc,var(--clients)), var(--shadow-lg)}
.tc em{position:absolute;top:-10px;right:14px;font:600 10.5px "Inter";font-style:normal;letter-spacing:.04em;text-transform:uppercase;background:#2B2926;color:#fff;padding:3px 8px;border-radius:999px}
.sfoot{text-align:center;font-size:12px;color:#888;margin-top:14px}
.tt .ev.sel{transition:box-shadow .4s}
.screen.s2 .ev.sel,.screen.s2 .party.sel{box-shadow:0 0 0 3px #fff, 0 0 0 5px #2B2926}
.cls{position:absolute;right:0;top:34px;bottom:0;width:560px;background:#fff;border-radius:18px;box-shadow:0 40px 80px -20px rgba(0,0,0,.35);transform:translateX(40px);overflow:hidden;z-index:5}
.cls .clh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;background:var(--cc);color:#fff}
.cls .clh b{display:block;font:650 20px "Geist";letter-spacing:-.02em}
.cls .clh span{font-size:12px;opacity:.92}
.cls .full{background:rgba(0,0,0,.2);border-radius:8px;padding:4px 10px;font-weight:600;white-space:nowrap}
.party-d .clh{color:#4a2244}.party-d .full{background:rgba(255,255,255,.55)}
.cl2{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px 18px}
.cl2 h6{font:600 11px "Inter";letter-spacing:.06em;text-transform:uppercase;color:#888;margin-bottom:8px;display:flex;justify-content:space-between}
.cl2 h6 em{font-style:normal;color:#2a2a2a}
.pp{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #f2f2f2;font-size:12.5px;color:#2a2a2a}
.pp .av{width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,#c9a38a,#8d6a55);flex:none}
.pp .av.b{background:linear-gradient(135deg,#9fb6c9,#5c7489)}.pp .av.c{background:linear-gradient(135deg,#e1c28f,#b08747)}
.pp span{margin-left:auto;font-size:11px;color:#888}
.pp.more{color:#888;border:0}
.pp.w b{width:22px;height:22px;border-radius:7px;background:#F2F2F2;display:grid;place-items:center;font-size:11px;flex:none}
.pp.w span{margin-left:auto;font-size:10.5px;color:#888}
.ptg{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
.p3{background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden}
.p3h{display:grid;grid-template-columns:44px repeat(3,1fr);font:600 10.5px "Inter";color:#999;border-bottom:1px solid #eee}
.p3h span{padding:9px 8px}.p3h span.on{color:var(--training)}
.p3b{position:relative;display:grid;grid-template-columns:44px repeat(3,1fr);height:500px}
.p3hrs{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:#aaa;padding:6px 6px 30px}
.p3c{position:relative;border-left:1px solid #f1f1f1;background:repeating-linear-gradient(to bottom,#fafafa 0 1px,transparent 1px 10%)}
.ps{position:absolute;left:4px;right:4px;top:calc(var(--t) * 1%);height:calc(var(--h) * 1%);border-radius:8px;background:var(--c);font:600 10.5px/1.2 "Inter";color:#3a2a2e;padding:5px 7px;overflow:hidden}
.ps.now{box-shadow:0 0 0 2px #2B2926}
.plist{display:flex;flex-direction:column;gap:10px}
.plist .trainer .sess{margin-bottom:6px}
.packs .tc .buy{background:var(--training);color:#fff}
.ctabs{display:inline-flex;gap:4px;background:var(--crm);border-radius:12px;padding:5px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.ctabs span{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;font-weight:600;font-size:13px}
.ctabs span.on,.screen.s2 .ctabs .x2o{background:#fff;box-shadow:var(--shadow-sm)}
.ctabs .soon{margin-left:4px}
.screen .kanban .col{min-height:300px}
.funnel{grid-template-columns:1fr 1.25fr;gap:14px}
.fsrc,.fst{background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);padding:14px 16px}
.fsrc h6,.fst h6{font:600 11px "Inter";letter-spacing:.06em;text-transform:uppercase;color:#888;margin-bottom:10px}
.fs{display:grid;grid-template-columns:86px 1fr 30px;align-items:center;gap:10px;font-size:12.5px;padding:6px 0}
.fs i{display:block;height:12px;border-radius:6px;background:var(--crm);width:var(--w);transform-origin:left;animation:gx .9s cubic-bezier(.2,.8,.2,1) both}
.fs b{text-align:right}
.st{margin:0 auto 8px;width:var(--w);min-width:120px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--crm) 60%,white);display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:600;animation:gx .9s cubic-bezier(.2,.8,.2,1) both}
.st b{font:650 20px "Geist"}
.st:last-child{background:#1DDB52;color:#0d3d1b}
@keyframes gx{from{transform:scaleX(.2);opacity:0}}
.stabs{display:inline-flex;gap:2px;background:var(--store);border-radius:12px;padding:5px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.stabs span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;font-weight:600;font-size:13px;color:#3a2a22}
.stabs span.on{background:#fff;box-shadow:var(--shadow-sm)}
.screen.s2 .stabs:has(.fin){background:var(--finances)}
.screen.s2 .stabs .fin{background:#fff;box-shadow:var(--shadow-sm)}
.cats{display:flex;gap:8px;margin-bottom:10px}
.cats span{padding:7px 12px;border-radius:10px;background:#fff;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-sm)}
.cats span.on{background:var(--store)}
.prod .p .im{display:grid;place-items:center;color:#fff;font-size:30px}
.paid{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:10px;background:#E3F6E8;color:#0f7a2e;border-radius:10px;padding:9px;font-weight:650;font-size:13px;transform:translateY(6px)}
.printer{position:absolute;right:30px;bottom:-14px;width:200px;z-index:4}
.printer .slot{height:16px;border-radius:8px;background:#3a3836;box-shadow:var(--shadow-lg)}
.printer .paper{margin:-4px 10px 0;background:#fff;border-radius:0 0 4px 4px;padding:10px 12px 12px;font:500 10.5px/1.5 ui-monospace,"SFMono-Regular",monospace;color:#333;box-shadow:var(--shadow-lg);transform:translateY(-100%) scaleY(.2);transform-origin:top;transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .3s;
  -webkit-mask:linear-gradient(#000 92%,transparent)}
.screen.s2 .printer .paper{transform:none}
.printer .paper b{display:block;text-align:center;letter-spacing:.08em;margin-bottom:4px}
.printer .paper span{display:flex;justify-content:space-between}
.printer .paper .sum{border-top:1px dashed #999;margin-top:4px;padding-top:4px;font-weight:700}
.printer .paper em{font-style:normal}
.printer .paper small{display:block;text-align:center;color:#888;margin-top:4px}
.printer.x2{transform:none}
.screen .printer.x2{opacity:0}.screen.s2 .printer.x2{opacity:1}
.cuw{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cc .den{display:grid;grid-template-columns:70px 54px 1fr;align-items:center;gap:10px;padding:6px 0;font-size:12.5px;border-bottom:1px solid #eee}
.cc .den i{font-style:normal;text-align:center;background:#fff;border-radius:8px;padding:4px;box-shadow:var(--shadow-sm)}
.cc .den b{text-align:right;font-variant-numeric:tabular-nums}
.ex .li2{display:flex;justify-content:space-between;font-size:13px;padding:7px 0}
.ex .li2.tot2{border-top:1px dashed #bbb;font-weight:700;font-size:14px}
.ex .lbl,.cc .lbl{margin-bottom:6px}
.subm{margin-top:12px;background:var(--store);border-radius:12px;padding:11px;text-align:center;font-weight:650}
.invh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.invh b{font:650 18px "Geist"}
.ksef{display:inline-flex;gap:7px;align-items:center;background:#E3F6E8;color:#0f7a2e;border-radius:999px;padding:6px 12px;font-weight:600;font-size:12.5px}
.inv .cu td:last-child{font-weight:600}
.rtabs{display:inline-flex;gap:2px;background:var(--reports);border-radius:12px;padding:5px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.rtabs span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;font-weight:600;font-size:13px;color:#fff}
.rtabs span.on{background:#fff;color:#3a3a3a;box-shadow:var(--shadow-sm)}
.kt5.r .kt{min-height:110px}
.rgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.rgrid .chart2{display:block;width:100%;height:220px;margin-top:4px}
.chart2 .draw{animation:gx 1.1s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
.rmods{grid-template-columns:repeat(3,1fr);gap:12px}
.rm{background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);padding:14px;border-left:4px solid var(--c);display:flex;flex-direction:column;gap:4px;min-height:140px}
.rm b{display:flex;align-items:center;gap:8px;font:620 15px "Geist";color:#2a2a2a}
.rm b i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 35%,white);font-size:15px}
.rm span{font-size:12px;color:#777}
.rm svg{width:100%;height:30px;margin-top:auto}
.rm em{font-style:normal;font-size:11.5px;color:#6F5ED0;font-weight:600}

/* ---------------- the module pop-up ---------------- */
/* centred with room around it; a pop-up too tall for that grows to the whole height of the window, and only then scrolls
   inside (Mike, 2026-10-23: no scroll bar while the window still has room) */
.modal{position:fixed;inset:0;z-index:90;background:rgba(31,30,28,.45);backdrop-filter:blur(4px);display:grid;place-items:center;padding:0 24px;opacity:0;transition:opacity .22s}
.modal.on{opacity:1}
.sheet{position:relative;width:min(900px,100%);max-height:100vh;max-height:100dvh;overflow:auto;background:var(--card);border-radius:26px;box-shadow:var(--shadow-xl);padding:clamp(18px,3.6vh,30px) 34px clamp(16px,3vh,26px);transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
.modal.on .sheet{transform:none}
.mclose{position:absolute;right:18px;top:18px;width:42px;height:42px;border:0;border-radius:12px;background:var(--paper-2);display:grid;place-items:center;font-size:20px;cursor:pointer}
.mhead{display:flex;gap:16px;align-items:center;padding-right:50px}
.mhead .bic{width:56px;height:56px;font-size:28px}
.mhead h3{font:650 34px/1.05 "Geist";letter-spacing:-.035em}
.mhead p{color:var(--ink-2);margin-top:4px}
/* the spaces up and down shrink on a short window (they reach their full size from about 830 px high), so more
   pop-ups fit without scrolling */
.mw{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:clamp(14px,2.8vh,24px)}
.mw li{display:flex;gap:12px;background:var(--paper);border-radius:16px;padding:clamp(10px,1.7vh,14px) 16px}
.mw li > i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:19px;background:color-mix(in srgb,var(--mc) 34%,white);flex:none}
.mw b{display:block;font-weight:620}
.mw span{display:block;color:var(--ink-2);font-size:14.5px;margin-top:2px}
.mfull{margin-top:clamp(12px,2.6vh,22px);border-top:1px solid var(--paper-3);padding-top:clamp(10px,2.1vh,18px)}
.mfull h4{font-size:17px;font-weight:620}
.mfull ul{margin-top:10px;columns:2;column-gap:34px;padding-left:18px;color:var(--ink-2);font-size:15px}
.mfull li{margin:clamp(2px,.6vh,5px) 0;break-inside:avoid}
.mfoot{display:flex;align-items:center;gap:18px;margin-top:clamp(12px,2.6vh,22px);flex-wrap:wrap}
.mnote{font-size:13.5px;color:var(--ink-3)}
@media (max-width:760px){
  .modal{padding:0;place-items:end stretch}
  .sheet{width:100%;max-height:100%;height:100%;border-radius:0;padding:22px 18px 26px}
  .mhead h3{font-size:27px}.mw{grid-template-columns:1fr}.mfull ul{columns:1}
}

/* ---------------- ecosystem: one screen ---------------- */
/* 08 (Mike, 2026-10-21): the ring at the top right, Studio level with the heading and the copy; the card under the
   copy, about half the screen wide, holds the preview on its right. Everything inside a preview is drawn in units of
   its own screen (cqw), so it scales with the device at every preset. */
.eco{padding:clamp(96px,13vh,140px) 0 clamp(50px,8vh,100px);min-height:100vh;display:flex;align-items:center;overflow:hidden}
.eco .wrap{max-width:1440px}
.eco .grid{--ring:min(520px,66vh,40vw);display:grid;grid-template-columns:minmax(0,1fr) var(--ring);grid-template-rows:auto 1fr;column-gap:clamp(24px,3vw,56px);row-gap:0;align-items:start;width:100%}
.eco-l{grid-column:1;grid-row:1}
.eco .h2{font-size:clamp(32px,min(4.4vw,7vh),60px)}
.eco .lead{font-size:clamp(15.5px,2.1vh,18px);margin-top:clamp(10px,2vh,20px)}

/* the ring */
.orbit{grid-column:2;grid-row:1/3;position:relative;aspect-ratio:1;width:var(--ring);max-width:none;justify-self:end;margin:calc(-1 * clamp(0px,(100vh - 640px) * .2,60px)) -24px 0 0}
.orbit .orb{inset:11%}.orbit .orb.r2{inset:30%}
.orbit .spin{inset:11%}
.orbit .slot .icw{position:absolute;left:-37px;top:-37px;width:74px;transform:rotate(calc(-1 * var(--a)));animation:unspin 70s linear infinite;text-align:center}
.orbit .slot .ic{position:static;transform:none;animation:none;width:74px;height:74px}
.orbit .slot .icw b{display:block;margin-top:8px;font:600 13px "Geist";color:var(--night-ink-2);white-space:nowrap}
.orbit:hover .spin,.orbit:hover .spin .icw{animation-play-state:paused}
.orbit .ic.on + b{color:var(--night-ink)}
.orbit .center .ic.studio{background:#fff;box-shadow:0 0 0 1.5px #45413C, 0 20px 50px rgba(0,0,0,.5)}
.orbit .center b{color:var(--night-ink)}

/* the card: its copy on the left, the preview on the right */
.nx{border-radius:26px;padding:clamp(20px,3vh,28px) clamp(22px,2vw,30px);background:var(--night-2);position:relative;overflow:hidden}
.nx .art{position:absolute;right:-50px;top:-60px;width:170px;height:170px;border-radius:50%;border:22px solid var(--c);opacity:.14;transition:border-color .5s}
.appcard{grid-column:1;grid-row:2;margin-top:clamp(18px,3.5vh,40px);max-width:820px;padding-bottom:calc(clamp(20px,3vh,28px) + 46px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(16px,2vw,30px);min-height:clamp(290px,48vh,480px)}
.acopy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center}
.acopy .ah{display:flex;align-items:center;gap:12px}
/* phones only: one sentence and "More" (the pop-up) */
.acopy .s1,.amore{display:none}
.appcard .ic.sm{width:52px;height:52px;border-radius:14px;cursor:default;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.appcard .ic.sm svg{width:22px;height:30px}
.appcard h3{font-size:clamp(24px,3.6vh,30px);letter-spacing:-.03em;font-weight:620;margin-top:clamp(10px,2vh,16px);line-height:1.15}
.appcard .who{font-size:13.5px;color:var(--night-ink-3);margin-top:4px;line-height:1.4}
.appcard p{color:var(--night-ink-2);margin-top:10px;font-size:clamp(14px,1.95vh,15.5px);line-height:1.5}
.appcard ul{list-style:none;margin-top:12px;display:grid;gap:6px}
.appcard li{font-size:14px;line-height:1.35;color:var(--night-ink);display:flex;gap:9px;align-items:center}
.appcard li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}
.acopy.in > *{animation:cin .5s cubic-bezier(.2,.8,.2,1) both}
.acopy.in > h3{animation-delay:.05s}.acopy.in > p{animation-delay:.1s}.acopy.in > ul{animation-delay:.15s}
@keyframes cin{from{opacity:0;transform:translateY(8px)}}
@media (max-height:700px) and (min-width:901px){.appcard ul{display:none}}

/* the preview: one device at a time, sized to the space it has */
.pv{position:relative;z-index:1;container-type:size;min-height:0}
/* phones: the apps as a row of tabs above the card (parts.js), instead of the ring (Mike, 2026-10-24) */
.etabs{display:none;grid-column:1;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin-top:16px}
.et{border:0;background:none;padding:4px 0 0;display:grid;justify-items:center;gap:5px;cursor:pointer;color:var(--night-ink-3);min-width:0}
.et .ic{width:min(36px,100%);height:auto;aspect-ratio:1;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.35);outline-offset:2px}
.et .ic svg{width:46%;height:auto}
.et b{font:600 10px/1.2 "Geist";white-space:nowrap;letter-spacing:-.01em}
.et.on b{color:var(--night-ink)}
.et.on .ic{outline-color:var(--night-ink)}
/* the arrows in the card's bottom corners and the skip to Pricing (Mike, 2026-10-24) */
.anav{position:absolute;bottom:clamp(14px,2.2vh,22px);z-index:2;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;
  font-size:18px;cursor:pointer;color:var(--night-ink);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .2s}
.anav:hover{background:rgba(255,255,255,.15)}
.anav.prev{left:clamp(16px,1.6vw,24px)}.anav.next{right:clamp(16px,1.6vw,24px)}
.ecoskip{grid-column:2;grid-row:2;align-self:end;justify-self:center;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;
  background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);color:var(--night-ink);font:600 14.5px "Geist";padding:10px 18px;
  cursor:pointer;white-space:nowrap;transition:box-shadow .2s}
.ecoskip:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.pvi{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.94);transition:opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.pvi.on{opacity:1;transform:none}
#pv .vg,#pv .vp{display:contents}
#pv .chips .vg,#pv .chips .vp{display:inline-flex}
body[data-venue="gym"] #pv .vp,body[data-venue="play"] #pv .vg{display:none}
@keyframes turn{0%,100%{transform:perspective(900px) rotateY(-14deg) rotateZ(-2deg)}50%{transform:perspective(900px) rotateY(11deg) rotateZ(1.5deg)}}
@keyframes turn2{0%,100%{transform:perspective(1200px) rotateY(-10deg) rotateX(3deg)}50%{transform:perspective(1200px) rotateY(8deg) rotateX(-2deg)}}
.pvi.on .phone,.pvi.on .tab,.pvi.on .lap,.pvi[data-k="board"].on .tvx{animation:turn2 10s ease-in-out infinite}
.pvi.on .phone{animation-name:turn;animation-duration:9s}
.pvi.on .lap{animation-name:lapturn}

/* an iPhone (16 Pro proportions). Every device has its width and height set outright, bezels and corners in proportion
   to its own size (Mike, 2026-10-24: on his phone the phones looked too thin and the tablets too tall; the bezel was a
   share of the space around it, so too thick on the desktop) */
.phone{--h:min(94cqh,196cqw);position:relative;height:var(--h);width:calc(var(--h) * 71.5 / 149.6);flex:none;border-radius:15%/7.2%;background:#0B0B0B;padding:calc(var(--h) * .013);box-shadow:0 30px 60px rgba(0,0,0,.55), inset 0 0 0 1.5px #3a3a3a}
.phone .scr{position:relative;width:100%;height:100%;border-radius:13%/6.1%;overflow:hidden;background:#E7E7E7;container-type:inline-size}
.phone .cs{position:absolute;inset:0;opacity:0;transition:opacity .6s;transform:scale(1.03)}
.phone .cs.on{opacity:1;transform:none;transition:opacity .6s, transform .9s}

/* the iOS apps' look (design system, mobile: panel, card, tray; each app's accent ramp in --ac / --acs / --aci) */
.ms{--tray:#FFD167;--tray-on:#ECBA48;background:#858E95;font-family:"Geist";color:#434243;overflow:hidden;line-height:1.2}
.ms .sb{position:absolute;left:0;right:0;top:0;height:14.6cqw;display:flex;align-items:center;justify-content:space-between;padding:0 7cqw 0 12cqw;z-index:3;color:#111}
.ms .sb b{font:600 3.8cqw "Geist"}
.ms .isl{position:absolute;left:34.5cqw;top:3.4cqw;width:31cqw;height:8.6cqw;border-radius:5cqw;background:#000}
.ms .si{display:flex;gap:1cqw;font-size:3.6cqw}
.ms .mh{position:absolute;left:6.2cqw;right:0;top:15cqw;display:flex;gap:4cqw}
.ms .mh b{font:600 6.4cqw/1 "Geist";color:#434243;white-space:nowrap}
.ms .mtab{flex:1;min-width:30%;margin-top:4.6cqw;height:10cqw;background:var(--ac);border-radius:4cqw 0 0 0}
.ms .msh{position:absolute;left:0;right:0;top:23.4cqw;bottom:0;background:#E7E7E7;border-radius:6cqw 6cqw 0 0;padding:17cqw 3.8cqw 0;display:flex;flex-direction:column;gap:3.6cqw}
.ms .mtg{position:absolute;left:0;top:3.7cqw;width:10cqw;height:10.9cqw;border-radius:0 2.6cqw 2.6cqw 0;background:var(--ac);color:var(--on);display:grid;place-items:center;font-size:5.4cqw;box-shadow:0 .6cqw 1.4cqw rgba(0,0,0,.12)}
.ms .lgt{position:absolute;right:3.8cqw;top:3.7cqw;width:10cqw;height:10cqw;border-radius:2.6cqw;background:#fff;display:grid;place-items:center;box-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.1)}
.ms .lgt svg{width:5cqw;height:7cqw}
.ms .lgt.yl{background:transparent;box-shadow:inset 0 0 0 .45cqw #8F8F8F;font:600 2.3cqw "Geist";color:#5F5757;text-transform:uppercase;letter-spacing:.04em}
.ms .crd{background:#F2F2F2;border-radius:3.6cqw;padding:3.6cqw;display:flex;flex-direction:column;gap:1.6cqw;box-shadow:0 .5cqw 1.6cqw rgba(0,0,0,.08)}
.ms .crd.acs{background:var(--acs)}
.ms small{font:500 2.8cqw "Geist";text-transform:uppercase;color:#5F5757;letter-spacing:.02em}
.ms .t1{font:600 5cqw/1.15 "Geist";color:#434243}
.ms .t2{font:400 3.6cqw "Geist";color:#5F5757}
.ms .t3{font:400 3.2cqw "Geist";color:#5F5757}
.ms .mbig{font:600 6.6cqw/1.1 "Geist";color:#434243}
.ms .rowb{display:flex;align-items:baseline;justify-content:space-between;gap:2cqw}
.ms .rowb > span{font:400 3.4cqw "Geist";color:#5F5757}
.ms .chip{align-self:flex-start;font:500 2.8cqw "Geist";font-style:normal;padding:1cqw 1.8cqw;border-radius:1.6cqw;background:#E8F5DB;color:#00A337;white-space:nowrap}
.ms .chip.g{background:#D4D4D4;color:#434243}
.ms .chip.cur{background:var(--ac);color:var(--on)}
.ms .bt{display:flex;align-items:center;justify-content:center;gap:2cqw;background:#F2F2F2;border-radius:3cqw;height:10.4cqw;font:500 3.7cqw "Geist";color:#434243;box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.1);white-space:nowrap}
.ms .bt.ac{background:var(--ac);color:var(--on)}
.ms .bt i{font-size:4.8cqw}
.ms .bt.sm{height:auto;padding:2.6cqw 3.6cqw}
.ms .crd.row{flex-direction:row;align-items:center;justify-content:space-between;gap:3cqw}
.ms .crd.row > div{display:flex;flex-direction:column;gap:.8cqw}
.ms .li .ti{width:10.5cqw;height:10.5cqw;border-radius:2.6cqw;background:var(--ti,#EBD4E6);color:var(--tic,#B246A4);display:grid;place-items:center;font-size:5cqw;flex:none}
.ms .li > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:.8cqw}
.ms .li b{font:500 3.8cqw "Geist"}.ms .li span{font:400 2.8cqw/1.3 "Geist";color:#5F5757}
.ms .go{color:#8F8F8F;font-size:4cqw}
.ms .tray{position:absolute;left:0;right:0;bottom:0;height:21cqw;background:var(--tray);border-radius:5cqw 5cqw 0 0;display:flex;padding:1.3cqw 1.8cqw 5cqw;gap:1cqw;z-index:2}
.ms .tray > span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8cqw;font:500 2.8cqw "Geist";color:#434243;border-radius:3cqw;white-space:nowrap}
.ms .tray > span.on{background:var(--tray-on)}
.ms .tray i{font-size:5cqw}
/* Club: classes */
.ms .mseg{display:flex;background:#D4D4D4;border-radius:3cqw;padding:.8cqw}
.ms .mseg span{flex:1;text-align:center;font:500 3.3cqw "Geist";padding:2cqw 0;color:#5F5757;border-radius:2.4cqw;white-space:nowrap}
.ms .mseg .on{background:#F2F2F2;color:#434243;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.1)}
.ms .chips{display:flex;gap:1.6cqw;overflow:hidden}
.ms .chips span{display:inline-flex;align-items:center;gap:1.2cqw;background:#F2F2F2;border-radius:2.4cqw;padding:1.8cqw 2.6cqw;font:500 3.1cqw "Geist";flex:none;white-space:nowrap;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.06)}
.ms .chips span.on{background:#06D7A0}
.ms .chips i{width:2cqw;height:2cqw;border-radius:50%;background:var(--d)}
.ms .wk{display:flex;align-items:center;justify-content:space-between;text-align:center}
.ms .wk > i{width:9.6cqw;height:9.6cqw;border-radius:2.6cqw;background:#F2F2F2;display:grid;place-items:center;font-size:4cqw}
.ms .wk > i:first-child{opacity:.45}
.ms .wk small{display:block}.ms .wk b{font:500 3.8cqw "Geist"}
.ms .dl{font:500 2.8cqw "Geist";text-transform:uppercase;color:#5F5757;margin:0 0 -1.4cqw}
.ms .cr{display:flex;align-items:center;gap:3cqw;background:#F2F2F2;border-radius:3.6cqw;padding:2.8cqw 3cqw;box-shadow:0 .5cqw 1.6cqw rgba(0,0,0,.08)}
.ms .cr .tm{position:relative;width:15cqw;padding:1.6cqw 0;border-radius:1.8cqw;background:var(--acs);display:flex;flex-direction:column;align-items:center;font:400 2.6cqw "Geist";color:#5F5757;flex:none;overflow:hidden}
.ms .cr .tm::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.9cqw;background:var(--k)}
.ms .cr .tm b{font:500 3.8cqw "Geist";color:#434243}
.ms .cr > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5cqw}
.ms .cr > div b{font:500 3.7cqw "Geist";white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms .cr > div span{font:400 2.7cqw "Geist";color:#5F5757;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms .cr.off{background:#E7E7E7;box-shadow:0 0 0 .3cqw #D9D9D9}
.ms .cr.off > *{opacity:.55}
.ms .cr .full{font:500 2.7cqw "Geist";font-style:normal;background:#D4D4D4;padding:1cqw 2cqw;border-radius:1.6cqw;opacity:1}
/* Club: the entry code */
.ms.ent .msh{top:15.5cqw;padding:10cqw 3.8cqw 10cqw;align-items:center;gap:0}
.ent .eh{font:600 5cqw "Geist"}
.ent .es{font:400 3.3cqw "Geist";color:#5F5757;margin-top:1.4cqw}
.ent .qrc{margin-top:16cqw;width:66cqw;padding:7cqw 7cqw 3.6cqw;background:#fff;border-radius:6cqw;display:flex;flex-direction:column;align-items:center;gap:3.4cqw;box-shadow:0 1.6cqw 4cqw rgba(0,0,0,.12)}
.ent .qrc svg{width:100%;aspect-ratio:1;display:block}
.ent .ql{width:8.6cqw;height:8.6cqw;border-radius:2.2cqw;display:grid;place-items:center}
.ent .ql svg{width:4cqw;height:5.6cqw}
.ent .em{margin-top:auto;font:400 3.7cqw "Geist"}
.ent .chip{align-self:center;margin-top:1.8cqw;background:var(--acs);color:var(--aci)}
.ent .bt.wide{align-self:stretch;margin-top:4.6cqw;height:11.6cqw;border-radius:4cqw}
/* Move: home and history */
.ms .days{display:grid;grid-template-columns:repeat(7,1fr);gap:1.4cqw 1.6cqw;text-align:center}
.ms .days .dn{font:400 2.8cqw "Geist";color:#5F5757;font-style:normal}
.ms .days span{aspect-ratio:1.05;border-radius:2.4cqw;background:#E7E7E7;display:grid;place-items:center;font:500 3.5cqw "Geist"}
.ms .days .w{background:var(--acs)}
.ms .days .now,.ms .calg .now{box-shadow:inset 0 0 0 .5cqw var(--ac)}
.ms .days .f{color:#8F8F8F}
.ms .st3{display:grid;grid-template-columns:repeat(3,1fr)}
.ms .st3 span,.ms .st5 span{display:flex;flex-direction:column;gap:.6cqw}
.ms .st3 b{font:600 4.6cqw "Geist"}
.ms .st5{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;border-top:1px solid #D9D9D9;padding-top:2.4cqw;margin-top:1cqw}
.ms .st5 b{font:500 3.5cqw "Geist";white-space:nowrap}
.ms .st5.h{border:0;margin:0;padding:0;text-align:left}
.ms .st5.h b{font-size:4cqw}
.ms .cal .calh{display:flex;justify-content:space-between;align-items:center;padding:0 2cqw}
.ms .cal .calh b{font:600 4.2cqw "Geist"}.ms .cal .calh i{font-size:4cqw}
.ms .calg{display:grid;grid-template-columns:repeat(7,1fr);gap:1cqw;text-align:center;margin-top:1cqw}
.ms .calg i{font:400 3.1cqw "Geist";font-style:normal;color:#5F5757;aspect-ratio:1.1;display:grid;place-items:center;border-radius:2.2cqw}
.ms .calg .dn{font-size:2.6cqw;aspect-ratio:auto}
.ms .calg .w{background:#FFB0BA;color:#9F003C;font-weight:600}
.ms .calg .f{color:#B5B5B5}
.ms .hr{position:relative;background:#F2F2F2;border-radius:3.6cqw;padding:3cqw 3.6cqw;display:flex;justify-content:space-between;align-items:center;gap:2cqw;box-shadow:0 .5cqw 1.6cqw rgba(0,0,0,.08)}
.ms .hr::before{content:"";position:absolute;left:-1.2cqw;top:18%;bottom:18%;width:1.2cqw;background:var(--ac);border-radius:1cqw 0 0 1cqw}
.ms .hr b{font:500 3.5cqw "Geist";white-space:nowrap}.ms .hr span{display:block;font:400 2.7cqw/1.35 "Geist";color:#5F5757;white-space:nowrap}
.ms .hr .r{text-align:right}
/* Move: a set being logged */
.ms.mvs{background:#E7E7E7;padding:15cqw 3.8cqw 0;display:flex;flex-direction:column;gap:3.6cqw}
.mvs .tb5{align-self:flex-end;display:flex;gap:4.4cqw;background:#F2F2F2;border-radius:4.6cqw;padding:2.4cqw 4.4cqw;font-size:5cqw;box-shadow:0 .5cqw 1.6cqw rgba(0,0,0,.1)}
.mvs .ex{background:#F2F2F2;border-radius:4cqw;padding:3.4cqw 3.6cqw;display:flex;flex-direction:column;gap:1.5cqw;box-shadow:0 .5cqw 1.6cqw rgba(0,0,0,.08);flex:none}
.mvs .ex.cur{background:var(--acs);box-shadow:inset 0 0 0 .5cqw var(--ac)}
.mvs .exh{display:flex;align-items:center;gap:1.6cqw;font:400 2.8cqw "Geist";color:#8F8F8F}
.mvs .exn{font:600 5cqw "Geist"}
.mvs .exm{font:400 3.4cqw "Geist";color:#5F5757}
.mvs .set{display:flex;align-items:center;gap:2.4cqw;background:#E7E7E7;border-radius:2.6cqw;padding:2.2cqw 3cqw}
.mvs .set > span{font:400 2.8cqw "Geist";color:#8F8F8F;width:2cqw}
.mvs .set b{font:600 4.2cqw "Geist";white-space:nowrap}
.mvs .set small{font-size:2.5cqw;text-transform:none;color:#8F8F8F;white-space:nowrap}
.mvs .set .cb{margin-left:auto;width:6cqw;height:6cqw;border-radius:1.4cqw;box-shadow:inset 0 0 0 .4cqw #8F8F8F;display:grid;place-items:center;font-size:4cqw;font-style:normal;flex:none;color:#fff}
.mvs .set.done .cb{background:#1DDB52;box-shadow:none}
.mvs .set.done b{color:#8F8F8F}
.mvs .set.now{background:#F2F2F2}
.pvi.on .mvs .set.now .cb{animation:tick 2.4s ease-in-out infinite}
@keyframes tick{0%,55%{background:transparent;box-shadow:inset 0 0 0 .4cqw #8F8F8F}65%,100%{background:#1DDB52;box-shadow:none}}
.mvs .tray.tmr{display:grid;grid-template-columns:1fr 2.3fr 1fr}
.mvs .tray .clk{background:var(--tray-on);font:400 2.8cqw "Geist";gap:.4cqw}
.mvs .tray .clk b{font:600 5.6cqw "Geist";font-variant-numeric:tabular-nums}
/* Move: the lock screen with the Live Activity */
.ms.lock{background:linear-gradient(170deg,#7D0030,#27272A 55%,#18181B)}
.lock .sb{color:#fff}
.lock .lk{position:absolute;left:0;right:0;top:17cqw;text-align:center;color:#fff}
.lock .lk span{display:block;font:500 3.8cqw "Geist";opacity:.85}
.lock .lk b{display:block;font:600 21cqw/1 "Geist";letter-spacing:-.02em;margin-top:1cqw}
.lock .la{position:absolute;left:3cqw;right:3cqw;top:62cqw;background:rgba(24,24,27,.94);border-radius:6cqw;padding:3.6cqw;color:#F4F4F5;display:flex;flex-direction:column;gap:2.4cqw}
.la .lah{display:flex;gap:2.6cqw;align-items:center}
.la .lah > div{display:flex;flex-direction:column;gap:.4cqw}
.lock::before,.lock::after{content:"";position:absolute;bottom:9cqw;width:12cqw;height:12cqw;border-radius:50%;background:rgba(255,255,255,.14)}
.lock::before{left:9cqw}.lock::after{right:9cqw}
.la .lic{width:10cqw;height:10cqw;border-radius:2.6cqw;background:linear-gradient(160deg,#FF5981,#F04770 55%,#A63450);display:grid;place-items:center;flex:none}
.la .lic svg{width:4.6cqw;height:6.4cqw}
.la .lah small{display:block;text-transform:none;color:#A1A1AA;font:400 2.9cqw "Geist"}
.la .lah b{font:600 4.4cqw "Geist";white-space:nowrap}
.la .lah em{font-style:normal;font-weight:400;color:#A1A1AA;font-size:3.3cqw}
.la .las{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.la .las span{border-radius:2.6cqw;padding:2.4cqw .6cqw;font:500 2.5cqw "Geist";display:flex;align-items:center;justify-content:center;gap:.8cqw;white-space:nowrap}
.la .las .d{background:rgba(29,219,82,.18);color:#F4F4F5}.la .las .d i{color:#1DDB52;font-size:3cqw}
.la .las .c{background:rgba(255,209,103,.22);box-shadow:inset 0 0 0 .4cqw var(--ac)}
.la .las .lring{width:2.8cqw;height:2.8cqw;border-radius:50%;border:.4cqw dotted #FFB0BA;font-style:normal}
.la .las .n{background:#3F3F46;color:#D4D4D8}.la .las .n em{font-style:normal;font-weight:700}
.la .lab{display:flex;justify-content:space-between;align-items:center;font:400 3.1cqw "Geist"}
.la .lab .tm{background:#3F3F46;border-radius:2.6cqw;padding:1.8cqw 3cqw;display:flex;gap:1.4cqw;align-items:center}
.la .lab .tm b{font-variant-numeric:tabular-nums;font-weight:500}
.la .lan{font:500 3.3cqw "Geist"}.la .lan small{color:#A1A1AA;margin-right:1.6cqw;text-transform:none;font-size:3cqw}
/* Pulse: the numbers */
.ms .hb{display:flex;align-items:flex-end;gap:1cqw;height:14cqw;margin-top:.6cqw}
.ms .hb i{flex:1;height:var(--h);background:var(--ac);border-radius:.8cqw .8cqw .3cqw .3cqw;opacity:.85}
.pvi.on .ms .hb i,.pvi.on .ms .mb i{animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{height:0}}
.ms .kp2{display:grid;grid-template-columns:1fr 1fr;gap:3.6cqw}
.ms .kp2 b{font:600 5.6cqw "Geist"}
.ms em.up,.ms em.dn{font:500 2.8cqw "Geist";font-style:normal;color:#00A337}
.ms em.dn{color:#AE2E24}
.ms .chip.up{color:#00A337}
.ms .mbar{height:2cqw;border-radius:1cqw;background:#D4D4D4;overflow:hidden}
.ms .mbar i{display:block;height:100%;background:var(--ac);border-radius:1cqw}
.ms .pc{font:600 3.5cqw "Geist";color:var(--aci)}
.ms .mb{display:flex;align-items:flex-end;gap:2.4cqw;height:30cqw;margin-top:1.4cqw}
.ms .mb span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1cqw;height:100%}
.ms .mb i{width:100%;height:var(--h);background:var(--acs);border-radius:1.4cqw 1.4cqw .6cqw .6cqw}
.ms .mb span:last-child i{background:var(--ac)}
.ms .mb small{text-transform:none}
.ms .stk{display:flex;height:4cqw;border-radius:2cqw;overflow:hidden;gap:.6cqw;margin-top:1cqw}
.ms .lgd{display:flex;flex-direction:column;gap:1.5cqw;margin-top:1cqw}
.ms .lgd span{display:flex;align-items:center;gap:2cqw;font:400 3.1cqw "Geist";color:#5F5757}
.ms .lgd i{width:2.4cqw;height:2.4cqw;border-radius:50%}
.ms .lgd b{margin-left:auto;font:500 3.1cqw "Geist";color:#434243}
.ms .vr{display:grid;grid-template-columns:1fr auto;column-gap:2.4cqw;row-gap:1.2cqw;align-items:center;padding:1.8cqw 0;border-bottom:1px solid #D9D9D9}
.ms .vr:last-child{border:0;padding-bottom:0}.ms .vr:first-child{padding-top:0}
.ms .vr .rowb{grid-column:1/3}
.ms .vr .rowb b,.ms .vr .rowb span{font:500 3.3cqw "Geist";color:#434243;white-space:nowrap}

/* a laptop with Studio */
/* Studio's laptop: the lid and a real base in 3D, a slab with a keyboard and a trackpad (Mike, 2026-10-24: the bar at the
   bottom looked flat). It turns a little, always towards the same side (it used to swing from one side to the other) */
.pvi[data-k="studio"]{perspective:1100px}
.lap{--lw:min(80cqw,96cqh);width:var(--lw);align-self:center;position:relative;transform-style:preserve-3d;
  margin-bottom:calc(var(--lw) * .2);transform:rotateX(-11deg) rotateY(-11deg)}
/* the lid tilts back from the base, like an open laptop (Mike, 2026-10-24) */
.lscr{background:#0B0B0B;border-radius:12px 12px 5px 5px;padding:1.8%;height:calc(var(--lw) * .625);box-shadow:0 0 0 1.5px #3c3a37;
  transform-origin:50% 100%;transform:rotateX(var(--lid,12deg))}
.lbase{position:absolute;left:0;right:0;top:100%;height:calc(var(--lw) * .44);border-radius:5% / 8%;transform-origin:50% 0;
  transform:rotateX(74deg);background:linear-gradient(#67645e,#4d4a45)}
.lbase.lb2{top:calc(100% + 7px);background:#1f1e1c;box-shadow:0 0 0 1px #34322f}   /* the underside, seen as the base's thickness at the front */
.lbase:not(.lb2)::before{content:"";position:absolute;left:8%;right:8%;top:8%;height:47%;border-radius:2.5% / 5%;
  background:repeating-linear-gradient(90deg,transparent 0 6.4%,#4d4a45 6.4% 7.1%),repeating-linear-gradient(transparent 0 18%,#4d4a45 18% 20%),#363431}
.lbase:not(.lb2)::after{content:"";position:absolute;left:34%;right:34%;top:61%;height:31%;border-radius:4% / 8%;background:#5a5752;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
@keyframes lapturn{0%,100%{transform:rotateX(-12deg) rotateY(-15deg)}50%{transform:rotateX(-10deg) rotateY(-6deg)}}
.mini-app{position:relative;width:100%;height:100%;border-radius:6px;background:linear-gradient(to bottom,#858E95,#596164);overflow:hidden;container-type:inline-size;font-family:"Geist";color:#434243}
.ma-rail{position:absolute;left:1.6cqw;top:2.2cqw;bottom:2.2cqw;width:5.6cqw;border-radius:1.6cqw;background:var(--dashboard-soft);display:flex;flex-direction:column;align-items:center;gap:1.45cqw;padding:.9cqw 0}
.ma-rail i{width:3cqw;height:3cqw;border-radius:.9cqw;box-shadow:inset 0 0 0 .3cqw rgba(67,66,67,.5);flex:none}
.ma-rail .mlg{width:4.2cqw;height:4.2cqw;background:#fff;box-shadow:none;display:grid;place-items:center;border-radius:1.2cqw}
.ma-rail .mlg svg{width:2cqw;height:2.8cqw}
.ma-rail .on{background:var(--dashboard);box-shadow:none}
.ma-top{position:absolute;left:9cqw;right:1.6cqw;top:2.2cqw;height:4.6cqw;display:flex;gap:1.6cqw;align-items:center}
.ma-v{background:#E8F5DB;padding:.6cqw 1.6cqw;border-radius:1cqw;height:100%;display:flex;flex-direction:column;justify-content:center}
.ma-v small{display:block;width:5cqw;height:.6cqw;background:#8F8F8F;border-radius:1cqw;margin-bottom:.5cqw;opacity:.6}
.ma-v b{font:600 1.7cqw "Geist";white-space:nowrap}
.ma-s{margin-left:auto;width:30%;height:3.6cqw;border-radius:1cqw;background:#F2F2F2}
.ma-u{width:10%;height:3.6cqw;border-radius:1cqw;background:#F2DDDC}
.ma-t{position:absolute;left:10cqw;right:2.4cqw;top:8.4cqw;height:4.4cqw;display:flex;align-items:flex-end;gap:2cqw}
.ma-t b{font:600 2.6cqw/1 "Geist";color:#2B2926;padding-bottom:.6cqw}
.ma-t i{flex:1;height:2.8cqw;background:var(--dashboard);border-radius:1.2cqw 1.2cqw 0 0}
.ma-p{position:absolute;left:9cqw;right:1.6cqw;top:12.8cqw;bottom:2.2cqw;background:#F2F2F2;border-radius:1.4cqw;padding:1.4cqw;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto 1fr;gap:1.2cqw}
.ma-k{grid-column:1/3;display:grid;grid-template-columns:repeat(5,1fr);gap:1.2cqw}
.ma-k > div{background:#fff;border-radius:1cqw;padding:1cqw 1.2cqw .8cqw;display:flex;flex-direction:column;gap:.5cqw;box-shadow:var(--shadow-sm);min-width:0}
.ma-k i{display:block;width:62%;height:.7cqw;border-radius:1cqw;background:#D4D4D4}
.ma-k b{font:600 2.5cqw/1.1 "Geist";white-space:nowrap}
.ma-k svg{width:100%;height:3cqw;display:block}
.ma-c,.ma-g,.ma-f{background:#fff;border-radius:1cqw;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.ma-c > em,.ma-g > em,.ma-f > em{display:block;height:3cqw;flex:none}
.ma-c > em{background:#EBD4E6}.ma-g > em{background:#C4E5D6}.ma-f > em{background:#FFEEC7}
.ma-d{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;padding:1.2cqw 1.4cqw}
.ma-d span{position:relative}
.ma-d i{position:absolute;left:0;right:0;top:calc(var(--t) * .84);height:2.3cqw;border-radius:.6cqw;background:var(--k)}
.pvi.on .ma-d i{animation:cin .6s cubic-bezier(.2,.8,.2,1) both}
.ma-r{display:grid;grid-template-rows:auto 1fr;gap:1.2cqw;min-height:0}
.ma-g{gap:1.3cqw;padding-bottom:1.4cqw}
.ma-g span{margin:0 1.4cqw;height:.9cqw;border-radius:1cqw;background:#E7E7E7;overflow:hidden}
.ma-g span i{display:block;height:100%;width:var(--w);background:var(--k);border-radius:1cqw}
.pvi.on .ma-g span i{animation:fill 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes fill{from{width:0}}
.ma-f{gap:1.1cqw}
.ma-f span{position:relative;margin:0 1.4cqw;height:2.6cqw;flex:none}
.ma-f span::before{content:"";position:absolute;left:0;top:0;width:2.6cqw;height:2.6cqw;border-radius:.7cqw;background:#FFEEC7}
.ma-f span::after{content:"";position:absolute;left:3.6cqw;top:.9cqw;width:55%;height:.8cqw;border-radius:1cqw;background:#E7E7E7}

/* TVs and tablets */
/* both TVs one size (Mike, 2026-10-24), room left under Loop's for its count; in portrait Loop's TV shrinks to fit
   (--ps, parts.js) */
.tvx{--w:min(90cqw,(100cqh - 30px) * 1.6);position:relative;width:var(--w);height:calc(var(--w) * 9 / 16);flex:none;background:#0B0B0B;border-radius:calc(var(--w) * .022);padding:calc(var(--w) * .014);box-shadow:0 30px 60px rgba(0,0,0,.55), inset 0 0 0 2px #2c2c2c;transition:transform .9s cubic-bezier(.6,0,.2,1)}
.tvx .tscr{position:relative;width:100%;height:100%;border-radius:calc(var(--w) * .01);background:#141414;overflow:hidden;container-type:inline-size}
#loopTv{margin-bottom:24px}
#loopTv.port{transform:rotate(-90deg) scale(var(--ps,1))}
.lg{position:absolute;display:grid;gap:3px;padding:4px}
.lg.land{inset:0;grid-template-columns:repeat(var(--c),1fr) 1.15fr;grid-template-rows:repeat(var(--r),1fr)}
.lg.land .tim{grid-column:-2;grid-row:1/-1}
.lg.port{left:50%;top:50%;width:calc(100% * 9 / 16);height:calc(100% * 16 / 9);transform:translate(-50%,-50%) rotate(90deg);grid-template-columns:repeat(var(--c),1fr);grid-template-rows:.9fr repeat(var(--r),1fr)}
.lg.port .tim{grid-column:1/-1;grid-row:1;flex-direction:row}
.stn{position:relative;border-radius:4px;background:linear-gradient(160deg,#2B2B2B,#1E1E1E);overflow:hidden;display:grid;place-items:center;transition:background .4s;animation:stn .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) * 40ms)}
@keyframes stn{from{opacity:0;transform:scale(.85)}}
.stn.work{background:linear-gradient(160deg,#E7A6DD,#B861AB)}
.stn .num{position:absolute;left:4px;top:2px;font:700 9px "Geist";color:#fff;opacity:.85}
.stn i{font-size:clamp(14px,2.2vh,22px);color:#fff;opacity:.85}
.stn .ex{position:absolute;left:4px;right:4px;bottom:2px;font:600 7.5px "Inter";color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.tim{display:flex;flex-direction:column;gap:3px}
.tim span{flex:1;border-radius:4px;background:#232323;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 6.5px "Inter";letter-spacing:.06em;color:#777;transition:background .3s,color .3s;text-align:center}
.tim span b{font:700 12px "Geist";color:inherit;font-variant-numeric:tabular-nums}
.tim span.on{background:var(--pc);color:#151515}
.lcount{position:absolute;bottom:0;left:0;right:0;text-align:center;font:500 13px "Inter";color:var(--night-ink-2)}
.lcount b{color:#E7A6DD;font-size:15px}
.tab{--w:min(100cqw,128cqh);width:var(--w);height:calc(var(--w) * .75);flex:none;background:#111;border-radius:calc(var(--w) * .052);padding:calc(var(--w) * .03);box-shadow:0 30px 60px rgba(0,0,0,.55), inset 0 0 0 2px #333}
.tscr2{position:relative;width:100%;height:100%;border-radius:calc(var(--w) * .026);background:#F5EFE5;overflow:hidden;font-family:"Inter";color:#2B2926;container-type:inline-size}
.tscr2 .cs{position:absolute;inset:0;opacity:0;transition:opacity .6s;padding:5% 6%}
.tscr2 .cs.on{opacity:1}

/* Desk: memberships (the prices line up) and today's classes as a small schedule */
.dk.cs{display:flex;flex-direction:column}
.dk .dkh{display:flex;justify-content:space-between;align-items:baseline}
.dk .dkh b{font:700 4.6cqw "Geist"}.dk .dkh span{font-size:2.8cqw;color:#8F877A}
.dkt{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw;margin-top:auto}
.dkt div{background:#fff;border-radius:2.6cqw;padding:3cqw 2.6cqw;display:flex;flex-direction:column;gap:1cqw}
.dkt b{font:600 3cqw/1.2 "Geist";min-height:2.4em}
.dkt span{font-size:2.3cqw;line-height:1.3;color:#8F877A;min-height:2.6em}
.dkt em{font:700 5cqw "Geist";font-style:normal;margin-top:auto;padding-top:1.4cqw}
.dkt small{font-size:2.2cqw;color:#8F877A;margin-top:-.6cqw}
.dkt .pop{box-shadow:0 0 0 .55cqw var(--clients)}
.dkb{margin:4cqw 0 auto;background:var(--gold);border-radius:2.6cqw;text-align:center;padding:2.6cqw;font-weight:700;font-size:3cqw}
.dsch{position:relative;flex:1;display:grid;grid-template-columns:7.5cqw repeat(3,minmax(0,1fr));column-gap:1.6cqw;margin-top:2.6cqw;min-height:0}
.dsh,.dsr{display:flex;flex-direction:column;min-height:0}
.dsh::before{content:"";height:4.4cqw;flex:none}
.dsh > div{position:relative;flex:1}
.dsh span{position:absolute;left:0;transform:translateY(-50%);font:500 2.1cqw "Inter";color:#8F877A}
.dsr small{height:4.4cqw;flex:none;font:600 2.4cqw "Geist";color:#5E574D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsr .dst{position:relative;flex:1;border-radius:1.6cqw;background:repeating-linear-gradient(to bottom,#EEE5D6 0 1px,transparent 1px calc(100% / 7));box-shadow:inset 0 0 0 1px #EEE5D6}
.dcb{position:absolute;left:.6cqw;right:.6cqw;border-radius:1.2cqw;background:var(--k);color:var(--o);padding:0 1.4cqw;display:flex;align-items:center;justify-content:space-between;gap:1cqw;overflow:hidden;font-family:"Geist"}
.dcb b{font:600 2.2cqw "Geist";white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcb em{font-style:normal;font-size:2cqw;opacity:.85;white-space:nowrap}
.dnw{position:absolute;left:9.1cqw;right:0;top:4.4cqw;bottom:0;pointer-events:none}
.dnw i{position:absolute;left:-1cqw;right:0;height:.45cqw;margin-top:-.2cqw;background:#CF623F;border-radius:1cqw}
.dnw i::before{content:"";position:absolute;left:0;top:50%;width:1.8cqw;height:1.8cqw;margin-top:-.9cqw;border-radius:50%;background:#CF623F}

/* Board: a week of classes, news, hours, an offer with its picture */
.bd{background:#16233A !important;color:#fff;font-family:"Geist"}
.bd .cs{position:absolute;inset:0;opacity:0;transition:opacity .7s;padding:6% 7%;display:flex;flex-direction:column;justify-content:center;gap:4px}
.bd .cs.on{opacity:1}
.bd .bd1{padding:4% 4.5% 3.6%;justify-content:flex-start;gap:1.6cqw}
.bwh{display:flex;align-items:baseline;gap:2.4cqw}
.bwh b{font:700 3.8cqw "Geist"}.bwh span{font:600 2.2cqw "Inter";letter-spacing:.12em;text-transform:uppercase;color:#6AA8FF}
.bwk{position:relative;flex:1;display:grid;grid-template-columns:3.4cqw repeat(7,1fr);gap:1cqw;min-height:0}
.bhr{position:relative;margin-top:4.6cqw}
.bhr small{position:absolute;left:0;top:var(--t);font:500 1.8cqw "Inter";opacity:.5;transform:translateY(-50%)}
.wd{display:flex;flex-direction:column;border-radius:1.4cqw;padding:0 .5cqw .5cqw;min-width:0}
.wd > b{font:600 2.1cqw "Geist";height:4.6cqw;flex:none;display:flex;align-items:center;justify-content:center;gap:.6cqw;opacity:.75;white-space:nowrap}
.wd > b i{font-style:normal}
.wd.now{background:rgba(255,255,255,.08)}
.wd.now > b{opacity:1;color:var(--gold)}
.wd > div{position:relative;flex:1}
.wd > div span{position:absolute;left:0;right:0;top:var(--t);height:6.6%;border-radius:.8cqw;background:var(--k);font:600 1.75cqw "Inter";color:#2B2926;padding:0 .8cqw;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.bd2 small,.bd3 small{font-size:2.6cqw;letter-spacing:.12em;text-transform:uppercase;color:#6AA8FF}
.bd2 b{font-size:5cqw;line-height:1.2}.bd2 span{font-size:3cqw;opacity:.75}
/* the days on the left, the hours on the right (Mike, 2026-10-24) */
.bd3 .oh{display:grid;grid-template-columns:auto auto;justify-content:space-between;column-gap:6cqw;row-gap:1.2cqw;margin-top:1.4cqw;width:min(100%,62cqw)}
.bd3 .oh b,.bd3 .oh span{font-size:4.6cqw;font-variant-numeric:tabular-nums}
.bd3 .oh span{text-align:right;font-weight:600}
.bd .bd4{background:linear-gradient(135deg,#F78C6A,#E0892F);flex-direction:row;align-items:center;justify-content:space-between;gap:4cqw}
.bd4 > div{display:flex;flex-direction:column;gap:1cqw}
.bd4 b{font-size:5.6cqw}.bd4 span{font-size:3.2cqw}.bd4 em{font:800 9cqw/1 "Geist";font-style:normal;margin-top:1cqw}
.bd4 .shk{height:86%;width:auto;flex:none;transform-origin:50% 90%}
.pvi.on .bd4.on .shk{animation:shake 2.4s ease-in-out infinite}
@keyframes shake{0%,60%,100%{transform:rotate(0)}68%{transform:rotate(-7deg)}76%{transform:rotate(6deg)}84%{transform:rotate(-4deg)}92%{transform:rotate(2deg)}}

/* Quest: a platformer; the hero runs, jumps for the right answer, a star pops out */
.qp{background:linear-gradient(#6CBEED,#A0D0EE 62%,#CDE0EC) !important}
.qcl{position:absolute;left:var(--x);top:var(--y);width:15cqw;height:4.6cqw;border-radius:5cqw;background:#fff;opacity:.92;animation:qcl 9s ease-in-out infinite alternate}
.qcl::before{content:"";position:absolute;left:3cqw;top:-2.6cqw;width:6.4cqw;height:6.4cqw;border-radius:50%;background:inherit}
.qcl.s{width:11cqw;height:3.6cqw;animation-duration:12s}
@keyframes qcl{to{transform:translateX(-14cqw)}}
.qhl{position:absolute;left:0;bottom:12%;width:100%;height:32%}
.qgr{position:absolute;left:0;right:0;bottom:0;height:13%;background:linear-gradient(#1DDB52 0 24%,#00B940 24% 32%,transparent 32%),repeating-linear-gradient(90deg,#D34B18 0 6cqw,#C13E04 6cqw 12cqw)}
.qhud{position:absolute;left:3cqw;right:3cqw;top:3cqw;display:flex;justify-content:space-between;align-items:center;font:700 3cqw "Geist";color:#fff;z-index:2}
.qlv{background:rgba(43,41,38,.22);padding:1.2cqw 2.6cqw;border-radius:2cqw}
.qq{background:#fff;color:#434243;font:800 4.6cqw "Geist";padding:1.2cqw 3.8cqw;border-radius:3cqw;box-shadow:0 .8cqw 0 #ECBA48}
.qs{background:#FFD167;color:#6B4A00;padding:1.2cqw 2.6cqw;border-radius:2cqw;display:flex;align-items:center;gap:1cqw}
.qb{position:absolute;left:var(--x);top:38%;width:11cqw;height:11cqw;border-radius:2cqw;background:#FFD167;box-shadow:inset 0 -1.2cqw 0 #ECBA48, 0 1cqw 0 rgba(43,41,38,.15);display:grid;place-items:center;font:800 5.4cqw "Geist";color:#6B4A00}
.pvi.on .qb.okc{animation:qbump 3.2s ease-in-out infinite}
@keyframes qbump{0%,45%{transform:none;background:#FFD167}49%{transform:translateY(-2.4cqw);background:#1DDB52;color:#fff;box-shadow:inset 0 -1.2cqw 0 #00A337, 0 1cqw 0 rgba(43,41,38,.15)}54%,92%{transform:none;background:#1DDB52;color:#fff;box-shadow:inset 0 -1.2cqw 0 #00A337, 0 1cqw 0 rgba(43,41,38,.15)}100%{background:#FFD167}}
.qpf{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:4cqw;border-radius:1.4cqw;background:#F78C6A;box-shadow:inset 0 -1cqw 0 #D34B18}
.qc{position:absolute;left:var(--x);top:var(--y);width:3.4cqw;height:3.4cqw;border-radius:50%;background:#FFCD00;box-shadow:inset -.6cqw -.6cqw 0 #ECBA48;animation:qcoin 1.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes qcoin{50%{transform:scaleX(.25)}}
.qstar{position:absolute;left:calc(44% + 2.2cqw);top:38%;font-size:6.6cqw;color:#FFCD00;opacity:0;font-style:normal;text-shadow:0 .6cqw 0 #ECBA48}
.pvi.on .qstar{animation:qstar 3.2s ease-out infinite}
@keyframes qstar{0%,46%{opacity:0;transform:none}52%{opacity:1;transform:translateY(-9cqw) scale(1.1)}74%{opacity:1;transform:translateY(-12cqw)}82%,100%{opacity:0;transform:translateY(-14cqw)}}
.qflag{position:absolute;right:7%;bottom:13%;width:.9cqw;height:24%;background:#434243;border-radius:1cqw}
.qflag i{position:absolute;left:.9cqw;top:.4cqw;width:7cqw;height:5cqw;background:#F04770;clip-path:polygon(0 0,100% 50%,0 100%);transform-origin:0 50%;animation:qflag 1.4s ease-in-out infinite alternate}
@keyframes qflag{to{transform:scaleX(.8) skewY(4deg)}}
.qhero{position:absolute;left:44%;bottom:12.4%;width:11cqw;z-index:1}
.qhero svg{display:block;width:100%}
.pvi.on .qhero{animation:qrun 3.2s linear infinite}
.pvi.on .qhero svg{animation:qbob .32s ease-in-out infinite alternate}
@keyframes qrun{0%{left:12%;transform:none;opacity:0}6%{opacity:1}40%{left:44%;transform:none;animation-timing-function:ease-out}48%{left:44%;transform:translateY(-12cqw)}56%{left:44%;transform:none}86%{left:66%;transform:none;opacity:1}94%,100%{left:68%;opacity:0}}
@keyframes qbob{to{transform:translateY(-.7cqw)}}

@media (max-width:900px){
  .eco{min-height:0;display:block}
  .eco .grid{grid-template-columns:1fr;grid-template-rows:none}
  .eco-l,.orbit,.appcard,.ecoskip{grid-column:1;grid-row:auto}
  .ecoskip{justify-self:start;margin-top:16px}
  .orbit{justify-self:center;margin:24px 0 0;width:min(380px,100%)}
  .orbit .slot .icw{left:-28px;top:-28px;width:56px}.orbit .slot .ic{width:56px;height:56px;border-radius:15px}.orbit .slot .ic svg{width:24px;height:34px}
  .appcard{grid-template-columns:1fr;max-width:none;min-height:0}
  .pv{height:360px}
}
/* phones, second round (Mike, 2026-10-24): the section is one screen (--eh, the tallest window seen; its content
   takes the window's height of the moment, --ev; both set in parts.js) and snaps to it; Studio the big tile on the
   left, the other eight in two rows beside it; the card takes what's left, the preview growing into it; "Przejdź do
   Cennika" between the card's arrows */
@media (max-width:760px){
  .eco{padding:74px 0 14px;height:var(--eh,auto);min-height:0;display:flex;flex-direction:column}
  .eco .grid{flex:none;height:calc(var(--ev,100vh) - 88px);min-height:0;display:flex;flex-direction:column;align-items:stretch;position:relative}   /* 88 = the padding */
  .eco .orbit{display:none}
  .eco .h2{font-size:28px}
  .eco .lead{font-size:14px;margin-top:8px;line-height:1.45}
  .etabs{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr));gap:8px 4px;margin-top:14px;flex:none}
  .et[data-k="studio"]{grid-row:1 / 3;align-content:center}
  .et .ic{width:38px;height:38px;border-radius:11px}
  .et[data-k="studio"] .ic{width:58px;height:58px;border-radius:16px}
  .et b{font-size:11px}
  .et[data-k="studio"] b{font-size:12.5px}
  .appcard{flex:1;min-height:0;margin-top:12px;padding:14px 16px 58px;display:flex;flex-direction:column;gap:6px;touch-action:pan-y}
  .appcard .acopy{flex:none}
  .appcard .ah,.appcard .pl1{display:none}
  .aht{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .appcard h3{font-size:22px;margin-top:0}
  .acopy .s1{display:block;-webkit-line-clamp:unset}
  .amore{display:inline-flex;align-items:center;gap:6px;flex:none;border:0;border-radius:999px;background:transparent;color:var(--night-ink);
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);font:600 13.5px "Geist";padding:7px 12px 7px 14px;cursor:pointer}
  .amore i{font-size:15px}
  .appcard .who{font-size:12.5px}
  .appcard p{font-size:14px;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .appcard ul{display:none}
  .appcard .pv{flex:1;height:auto;min-height:96px}
  .anav{width:36px;height:36px;bottom:14px}
  .ecoskip{position:absolute;z-index:3;bottom:14px;left:50%;transform:translateX(-50%);height:36px;padding:0 14px;font-size:13.5px;margin:0}
}
/* short phone screens (Firefox on an iPhone with its bars): the description to two lines and no platform line, so the
   preview keeps some size */
@media (max-width:760px) and (max-height:760px){
  .appcard .who{display:none}
  .appcard p{-webkit-line-clamp:2;margin-top:4px}
  .etabs{gap:6px 4px;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){.orbit .slot .icw{animation:none}.pvi.on .phone,.pvi.on .tab,.pvi.on .lap,.pvi[data-k="board"].on .tvx,.pvi.on .qhero,.pvi.on .qhero svg,.pvi.on .qstar,.pvi.on .qb.okc,.qcl,.qc{animation:none}}

/* ---------------- Built for Poland: what's specific to Poland, with a touch of the flag ---------------- */
.plintro{max-width:720px}
.pl .grid{margin-top:44px}
/* "polskie" with a two-colour marker, white over red like the flag; the white half has a thin line so it shows on
   the paper background. ?flag=badge instead shows a small flag next to the kicker (Mike picks) */
.flagmark{background:linear-gradient(transparent 56%, rgba(43,41,38,.28) 56%, rgba(43,41,38,.28) 57.5%, #fff 57.5%, #fff 75%, #DC143C 75%, #DC143C 93%, transparent 93%);padding:0 .06em}
.flagbadge{display:none;width:20px;height:13px;border-radius:2px;vertical-align:-1px;margin-left:8px;background:linear-gradient(#fff 50%,#DC143C 50%);box-shadow:0 0 0 1px rgba(43,41,38,.22)}
body.flag-badge .flagbadge{display:inline-block}
body.flag-badge .flagmark{background:none}

/* ---------------- pricing: models, compact / full, the website deal ---------------- */
.price{padding:clamp(90px,12vh,130px) 0}
.ptop .h2{margin-top:16px}
.psub{margin-top:16px;color:var(--ink-2);font-size:17px;max-width:100%}
.webdeal{display:flex;align-items:center;gap:18px;margin-top:26px;background:var(--night);color:var(--night-ink);border-radius:18px;padding:16px 22px;text-decoration:none;box-shadow:var(--shadow-lg);transition:transform .25s}
.webdeal .wask{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--gold);color:var(--ink);font:600 14.5px "Geist";padding:10px 16px;cursor:pointer;white-space:nowrap;transition:transform .2s}
.webdeal .wask:hover{transform:translateY(-1px)}
.webdeal .wtag{flex:none;font:600 11.5px "Inter";letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:5px 10px;border-radius:999px}
.webdeal b{flex:none;font-size:19px;font-weight:650;letter-spacing:-.02em;color:var(--gold)}
.webdeal .wtxt{font-size:14.5px;color:var(--night-ink-2);line-height:1.45}
.webdeal .wask i{font-size:17px}
.models{margin-top:34px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.mtabs{display:flex;background:var(--paper-3);border-radius:18px;padding:5px;gap:4px}
.mtabs[hidden]{display:none}
.mtabs button{position:relative;display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:14px;padding:9px 16px 9px 10px;cursor:pointer;font:500 14px "Geist";color:var(--ink-2);text-align:left}
.mtabs button b{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(43,41,38,.08);font:700 15px "Geist";color:var(--ink)}
.mtabs button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-warm)}
.mtabs button.on b{background:var(--gold)}
.mtabs em{position:absolute;top:-11px;right:10px;font:600 10px "Inter";font-style:normal;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:3px 8px;border-radius:999px}
.mdesc{flex:1;min-width:300px;font-size:15px;color:var(--ink-2);line-height:1.5}
.tbl{margin-top:26px}
table.pt thead th .pr em{font-style:normal;font-size:20px;color:var(--ink-2);font-weight:600}
table.pt thead th .pn{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;font-weight:500;color:var(--ink-2);max-width:260px}
table.pt tbody.full{display:none}
table.pt.all tbody.cmp{display:none}
table.pt.all tbody.full{display:table-row-group}
body[data-venue="gym"] table.pt tr[data-v="play"],body[data-venue="play"] table.pt tr[data-v="gym"]{display:none}
table.pt td .soon{vertical-align:1px}
/* phones: a plan switch above the table and one plan's column at a time, the plan's head across the full width (phone
   audit 2026-10-23: the table scrolled sideways and showed only Starter). Rows become flex rows so the head can span */
.ptabs{display:none}
@media (max-width:760px){
  .ptabs{display:flex;margin-top:22px;background:rgba(43,41,38,.07)}
  .ptabs + .tbl{margin-top:12px;overflow:hidden}
  table.pt{display:block;min-width:0}
  table.pt thead,table.pt:not(.all) tbody.cmp,table.pt.all tbody.full{display:block}
  table.pt tr{display:flex}
  table.pt th.feat{display:none}
  table.pt thead th{flex:1;padding:22px 20px 20px}
  table.pt td{flex:1;padding:13px 16px 13px 20px}
  table.pt td:not(:first-child){flex:0 0 64px;display:flex;align-items:center;justify-content:center;padding:13px 0}
  table.pt:not([data-show="0"]) tr > :nth-child(2),table.pt:not([data-show="1"]) tr > :nth-child(3),
  table.pt:not([data-show="2"]) tr > :nth-child(4){display:none}
}
.showall{display:flex;align-items:center;gap:8px;margin:16px auto 0;border:0;background:var(--card);border-radius:999px;padding:11px 20px;font:600 14.5px "Geist";cursor:pointer;box-shadow:var(--shadow-sm)}
.showall .c,.showall.on .o{display:none}.showall.on .c{display:inline}
.showall i{transition:transform .3s}.showall.on i{transform:rotate(180deg)}
.extras{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.extras > div{background:var(--card);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow-warm)}
.extras h3{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:620}
.extras h3 i{font-size:20px}
.xo{display:grid;grid-template-columns:170px 1fr;gap:14px;padding:12px 0 2px;border-top:1px solid var(--paper-2);margin-top:12px;font-size:14.5px}
.xo b{font-weight:620}.xo span{color:var(--ink-2)}
.memb label{margin-top:4px}
@media (max-width:860px){.extras{grid-template-columns:1fr}.xo{grid-template-columns:1fr;gap:2px}.webdeal{flex-wrap:wrap}.models{gap:12px}.mtabs button span{display:none}}

/* ---------------- Ask (AI) ---------------- */
.ask{padding:clamp(90px,12vh,130px) 0 40px}
.askhead{max-width:820px}
.askhead .h2{margin-top:16px}
.ask .askbox{max-width:980px;margin:40px auto 0}
.ask .q{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:20px;padding:12px 12px 12px 22px;box-shadow:var(--shadow-lg)}
.ask .q > i{font-size:22px;color:var(--ink-3)}
.ask .q .txt{flex:1;font-size:19px;min-height:30px;line-height:1.5}
.ask .q .txt .car{display:inline-block;width:2px;height:1.1em;background:var(--ink);vertical-align:-3px;margin-left:1px;animation:car 1s steps(1) infinite}
@keyframes car{50%{opacity:0}}
.ask .q .go{width:48px;height:48px;border-radius:14px;background:var(--gold);display:grid;place-items:center;font-size:22px;flex:none;border:0}
.ask .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.ask .chips button{font:500 14px "Geist";border:0;border-radius:999px;padding:9px 15px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--paper-3);color:var(--ink-2);cursor:pointer;position:relative;overflow:hidden}
.ask .chips button.on{background:var(--ink);color:#fff;box-shadow:none}
.ask .chips button .prog{position:absolute;left:0;bottom:0;height:2px;background:var(--gold);width:0}
.answer{margin-top:22px;background:var(--card);border-radius:22px;box-shadow:var(--shadow-lg);padding:26px 28px;min-height:340px;position:relative;overflow:hidden}
.answer .a{display:none}
.answer .a.on{display:block;animation:up .6s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.answer .meta{display:flex;align-items:center;gap:10px;font:500 13px "Inter";color:var(--ink-3);margin-bottom:12px}
.answer .meta .dot{width:20px;height:26px}
.answer h3{font-size:22px;letter-spacing:-.02em;font-weight:600;line-height:1.3}
.skel{display:none;position:absolute;inset:26px 28px}
.answer.loading .a.on{display:none}
.answer.loading .skel{display:block}
.skel i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--paper-2),#FBF8F2,var(--paper-2));background-size:200% 100%;animation:sh 1.2s linear infinite;margin-bottom:12px}
@keyframes sh{to{background-position:-200% 0}}
.chart{display:grid;grid-template-columns:1fr 230px;gap:28px;margin-top:16px;align-items:end}
.alegend{display:flex;gap:18px;font:500 13px "Inter";color:var(--ink-2);margin-bottom:10px}
.alegend span{display:flex;align-items:center;gap:6px}
.alegend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.plot{position:relative;height:170px;display:flex;align-items:flex-end;gap:26px;padding:0 6px;border-bottom:1px solid var(--paper-3);margin-bottom:30px}
.plot .grp{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%;position:relative}
.plot .b{width:34%;max-width:34px;background:var(--c);border-radius:4px 4px 0 0;height:var(--v);position:relative;transform-origin:bottom;animation:gb .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes gb{from{transform:scaleY(0)}}
.plot .b em{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font:600 11.5px "Inter";font-style:normal;color:var(--ink-2)}
.plot .grp label{position:absolute;bottom:-24px;font:500 12.5px "Inter";color:var(--ink-2);white-space:nowrap}
.gridline{position:absolute;left:0;right:0;border-top:1px dashed var(--paper-3)}
.kpi{background:var(--paper);border-radius:14px;padding:14px 16px}
.kpi b{display:block;font:650 30px "Geist";letter-spacing:-.03em}
.kpi small{color:var(--ink-2);font-size:13.5px}
.kpi + .kpi{margin-top:10px}
.rec{display:grid;grid-template-columns:auto 1fr;gap:18px;margin-top:14px;background:var(--paper);border-radius:16px;padding:18px}
.rec .av{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,#e1c28f,#b08747)}
.rec dl{display:grid;grid-template-columns:140px 1fr;font-size:14.5px;margin-top:8px}
.rec dt{color:var(--ink-3)}.rec dd{margin-bottom:4px}
mark{background:#FFF4C2;padding:0 3px;border-radius:3px}
.brief{margin-top:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.brief div{background:var(--paper);border-radius:14px;padding:14px 16px;font-size:14.5px}
.brief b{display:block;font:600 12px "Inter";color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
ol.steps{list-style:none;counter-reset:s;margin-top:14px}
ol.steps li{counter-increment:s;display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--paper-2);font-size:15.5px}
ol.steps li::before{content:counter(s);width:26px;height:26px;border-radius:8px;background:var(--gold);display:grid;place-items:center;font:700 13px "Inter";flex:none}
.src{margin-top:12px;font:500 13px "Inter";color:var(--ink-3)}
.reading{margin-top:12px;font-size:15.5px;color:var(--ink-2);columns:2;column-gap:30px}
.flags{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.flags div{border-radius:14px;padding:14px;font-size:14px;background:var(--paper)}
.flags div b{display:flex;align-items:center;gap:6px;font-size:14.5px;margin-bottom:4px}
.draft{margin-top:14px;display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.draft .msg{background:var(--paper);border-radius:16px;padding:18px;font-size:15.5px;line-height:1.55}
.draft .msg small{display:block;font:600 12px "Inter";color:var(--ink-3);margin-bottom:6px;letter-spacing:.06em;text-transform:uppercase}
.draft .aud{background:var(--paper);border-radius:16px;padding:18px;font-size:14.5px}
.draft .aud b{font:650 34px "Geist";letter-spacing:-.03em;display:block}
.soonline{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:18px;align-items:center}
.soon2{display:inline-flex;align-items:center;gap:8px;font:600 12.5px "Inter";color:#7a6200;background:#FFF4C2;padding:7px 12px;border-radius:999px}
.demo-n{font:500 12.5px "Inter";color:var(--ink-2)}
/* phones: the six examples in one row that swipes sideways, out to the screen's edges (they stacked into six rows,
   phone audit 2026-10-23) */
@media (max-width:760px){
  .ask .chips{position:relative;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:16px -16px 0;padding:2px 16px}
  .ask .chips::-webkit-scrollbar{display:none}
  .ask .chips button{flex:none;white-space:nowrap}
}
@media (max-width:760px){.chart,.draft{grid-template-columns:1fr}.brief,.flags{grid-template-columns:1fr}.reading{columns:1}.ask .q .txt{font-size:16px}.rec dl{grid-template-columns:1fr}}

/* ---------------- FAQ, services, contact ---------------- */
.faq{padding:clamp(90px,12vh,130px) 0 60px}
.services{padding:60px 0 120px}
/* Ask AI, Services and FAQ: each its own full screen at any size, with a short stop as you scroll into it (Mike,
   2026-10-21), so it's clear you've landed. Content centred under the nav; the snap is "proximity", so it only
   catches a section when you stop near its top. */
html{scroll-snap-type:y proximity}
html:has(body.jumping){scroll-snap-type:none}
/* from 2026-10-23 every section holds on screen instead (main.js, holdSize), which also lines it up: no snap then */
html:has(.hold.on){scroll-snap-type:none}
/* phones: nothing to snap to, and WebKit (Safari, Firefox on iPhone) still pulled the page about (Mike, 2026-10-24) */
@media (max-width:760px){html{scroll-snap-type:none}}
@media (min-width:761px){
  .ask,.services,.faq{min-height:100vh;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:96px 0 48px;scroll-snap-align:start}
  .ask > .wrap,.services > .wrap,.faq > .wrap{width:100%}
}
.svc{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border-top:1px solid var(--paper-3)}
.svc div{padding:26px 26px 26px 0;border-bottom:1px solid var(--paper-3)}
.svc i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:21px;background:color-mix(in srgb,var(--c) 34%,white)}
.svc h3{font-size:21px;letter-spacing:-.02em;font-weight:620;margin-top:16px}
.svc p{color:var(--ink-2);font-size:15px;margin-top:6px;max-width:280px}
@media (max-width:980px){.svc{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.svc{grid-template-columns:1fr}}
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:70px auto 0;text-align:left}
.contact > div{background:rgba(255,253,249,.6);border-radius:20px;padding:20px 22px;box-shadow:var(--shadow-sm)}
.contact .mk{margin-bottom:10px}
.contact a{font:620 18px "Geist";text-decoration:none;border-bottom:2px solid var(--gold)}
.contact b{display:block;font-weight:620;font-size:16.5px}
.contact small{display:block;color:var(--ink-2);font-size:14px;margin-top:6px;line-height:1.45}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.closing p{max-width:560px}
/* the link to the 2026 site, kept as a trailer (/trailer), under the contact cards */
.closing .trailer-link{margin-top:clamp(14px,2.6vh,36px)}
.closing .trailer-link a{display:inline-flex;align-items:center;gap:8px;font:600 15px "Geist";color:var(--ink-2);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
.closing .trailer-link a:hover{color:var(--ink)}
.closing .trailer-link i{font-size:18px}
/* fixes after the first screenshots */
.btn{white-space:nowrap}
.nav .wrap{max-width:1480px}
.bw{align-items:stretch}   /* 08: equal cards, as tall as the tallest module needs */
.vgrid > *{min-width:0}
.vgrid .vrow{overflow:hidden}
.vgrid > div > div[style*="grid-template-columns:1fr 1fr"] > *{min-width:0;overflow:hidden}
.vgrid .kid{gap:8px}.vgrid .kid .pill{white-space:nowrap}
/* the skip button sits in the band on desktop (next to "Find out more"), as a floating arrow on phones */
.bskip{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(43,41,38,.25);color:var(--ink);font:600 14.5px "Geist";padding:10px 16px;cursor:pointer;white-space:nowrap;margin-left:auto;transition:box-shadow .2s}
.bskip:hover{box-shadow:inset 0 0 0 1.5px rgba(43,41,38,.6)}
.bskip + .bmore{margin-left:0}
@media (min-width:981px){.skip{display:none}}
@media (max-width:980px){.bskip{display:none}}
/* the flag marker as a small white-over-red bar behind the word, with a thin outline so the white half shows */
.flagmark{background:none;position:relative;z-index:0;padding:0 .04em}
/* it starts at the first letter's stem: before it, the descender of "polski" cut off a stub of the bar (phone audit, 2026-10-24) */
.flagmark::after{content:"";position:absolute;left:.075em;right:-.02em;bottom:.06em;height:.36em;border-radius:.06em;background:linear-gradient(#fff 50%,#DC143C 50%);box-shadow:0 0 0 1.5px rgba(43,41,38,.18);z-index:-1}
body.flag-badge .flagmark::after{display:none}
/* the nav's own row rule (.nav .wrap: flex, 72 px) must not reach the panels under it */
.nav .mega .wrap,.nav .search-pop .wrap{display:block;height:auto}
.nav .mega .wrap{max-width:1380px}
.nav .search-pop .wrap{max-width:860px}
.mega,.search-pop{background:#FAF6EF;backdrop-filter:none}
.nav.mopen,.nav.searching{background:#FAF6EF}
.bw b .soon{margin:0 0 0 4px;vertical-align:1px}
/* franchise view: long Polish labels ("Franczyzobiorca") fit the small head-office tiles */
.hq .lv.m .k,.hq .lv.s .k{max-width:100%;overflow:hidden;text-overflow:ellipsis;letter-spacing:.03em;font-size:9px}
/* phones (a full phone pass comes later): the menu button stays on screen (the language moves into the menu),
   the time bar keeps clear of the copy, the ecosystem stacks */
@media (max-width:640px){.nav .lswitch{display:none}.nav .right{gap:6px}.burger{width:36px;height:36px}}
.fslang{display:flex;gap:8px;margin-top:14px}
.fslang a{flex:1;text-align:center;padding:11px;border-radius:999px;background:var(--paper-2);text-decoration:none;font-weight:600}
.fslang a.on{background:var(--ink);color:var(--paper)}
@media (max-width:900px){.eco-show{grid-template-columns:1fr}.appcard{min-height:0}}

/* 08 day screens (Mike's feedback 2026-10-20/21): Clients with a quick profile, two classes at once, the CRM calendar,
   the store's search row and the cash-up as its second state, Finances with the KSeF pop-up */
/* Clients: a busier list, the quick profile on the side */
.clg{display:grid;grid-template-columns:1.45fr 1fr;gap:14px}
.clg .tools .in{width:178px}
.clg .mrow{margin-bottom:7px;padding:9px 14px}
.mrow.on{box-shadow:inset 4px 0 0 var(--clients), var(--shadow-sm)}
.qp .qph{display:flex;gap:14px;align-items:center}
.qp .qph svg{width:96px;height:96px;border-radius:24px;flex:none;display:block}
.qp .big{font-size:23px}
.qtags{display:flex;gap:6px;margin-top:8px}
.qp .list{margin-top:10px}
.qbtn{display:flex;gap:8px;margin-top:12px}
.qbtn div{flex:1;background:#fff;border-radius:12px;padding:11px;text-align:center;font-weight:600}
.qfull{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-weight:600;font-size:13px;color:#555}
/* Group classes: the class card covers Wednesday whole, so the two classes at 18:00 are never cut in half */
.cls.cls8{width:600px}
.cls8 .pp{padding:6px 0}
.cls8 .pp.w{flex-wrap:wrap;row-gap:0}
.cls8 .pp.w span{flex-basis:100%;margin:0 0 0 31px}
/* CRM: the calendar of calls and meetings; the Leads / Funnels tabs only on the Funnels state */
.screen .ctabs.x2{display:none}
.screen.s2 .ctabs.x2{display:inline-flex}
.ctabs span{background:transparent;box-shadow:none}
.ctabs span.on{background:#fff;box-shadow:var(--shadow-sm)}
.screen.s2 .cbar.x1,.screen.s2 .ccal.x1{display:none}
.kt5.cm .kt{min-height:0}
/* the stats row only on the Funnels state: the week of calls needs the height */
.screen .kt5.cm.x2{display:none}
.screen.s2 .kt5.cm.x2{display:grid}
.cbar{display:flex;align-items:center;gap:8px;background:var(--crm);border-radius:14px;padding:7px;box-shadow:var(--shadow-sm);margin-bottom:12px}
.cbar .b{background:var(--s0);border-radius:10px;height:36px;display:flex;align-items:center;gap:8px;padding:0 13px;font-weight:600;font-size:13px;white-space:nowrap}
.cbar .b i{font-size:17px}
.cbar .b.nb{background:#fff}
.cbar .vseg{display:flex;gap:2px;background:rgba(255,255,255,.45);border-radius:10px;padding:3px}
.cbar .vseg span{padding:7px 12px;border-radius:8px;font-weight:600;font-size:13px}
.cbar .vseg span.on{background:#fff;box-shadow:var(--shadow-sm)}
.cbar .sp{flex:1}
.cbar .cleg{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;margin-right:6px}
.cbar .cleg i{width:11px;height:11px;border-radius:3px;margin-left:8px}
.cbar .cleg i.c,.ae.c{background:#388BFF}
.cbar .cleg i.m,.ae.m{background:#06B386}
.ccal{background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden}
.ccal .chd{display:grid;grid-template-columns:46px repeat(5,1fr);border-bottom:1px solid #eee;font:600 10.5px "Inter";color:#999}
.ccal .chd span{padding:8px}
.ccal .chd span.on{color:#7a6200}
.ccal .cbd{display:grid;grid-template-columns:46px repeat(5,1fr);height:464px}
.ccal .hrs{display:flex;flex-direction:column}
.ccal .hrs span{flex:1;padding:2px 6px;font-size:10px;color:#aaa}
.ccal .dc{position:relative;border-left:1px solid #f1f1f1;background:repeating-linear-gradient(to bottom,#f1f1f1 0 1px,transparent 1px 10%)}
.ccal .dc.on{background-color:color-mix(in srgb,var(--crm) 8%,white)}
.ae{position:absolute;left:3px;right:3px;top:calc((var(--t) - 9) * 10% + 1px);height:calc(var(--h) * 10% - 2px);border-radius:7px;color:#fff;font:600 10.5px/1.25 "Inter";padding:4px 6px;display:flex;align-items:flex-start;gap:5px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.ae i{font-size:12px;line-height:13px;flex:none}
.ae b{flex:1;min-width:0;font-weight:600;white-space:nowrap}
.ae em{display:block;font-style:normal;font-weight:500;opacity:.92}
.ae small{flex:none;font-weight:500;font-size:10px;opacity:.9}
.nowl{position:absolute;left:-1px;right:0;top:calc((var(--t) - 9) * 10%);height:2px;background:#F04770;z-index:2}
.nowl::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#F04770}
/* Store and café: the search and the categories in one row where the sub-nav was; the cash-up as the second state */
.cats.tb{background:var(--store);border-radius:14px;padding:7px;box-shadow:var(--shadow-sm);width:max-content;align-items:center;gap:6px;margin-bottom:14px}
.cats.tb span{height:36px;display:flex;align-items:center;padding:0 14px;font-size:13px;background:var(--s0);box-shadow:none}
.cats.tb span.on{background:#fff;box-shadow:var(--shadow-sm)}
.cats.tb .sr{gap:8px;width:250px;color:#8a8a8a;font-weight:500}
.cats.tb .sr i{font-size:16px}
.screen.s2 .pos.x1{display:none}
.screen .cuw.x2{display:none}
.screen.s2 .cuw.x2{display:grid;animation:swin .55s cubic-bezier(.2,.8,.2,1)}
/* Finances: the invoices, then the KSeF pop-up; each status turns from Sent to Accepted, one row after another */
.stabs.ft{background:var(--finances)}
.stabs.ft span{color:#0d3d1b}
.fing{display:grid;grid-template-columns:1fr 300px;gap:14px}
.fside{display:flex;flex-direction:column;gap:10px}
.isum{font-weight:600;font-size:13px;color:#777}
.fing .cu td{padding:10px 14px}
.fing .cu th{padding:11px 14px}
.kst{display:inline-grid;justify-items:end}
.kst>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:opacity .35s;transition-delay:calc(var(--d,0) * 140ms + 700ms)}
.kst .k1{color:#8a8a8a;font-weight:500}
.kst .k2{color:#139a3a;opacity:0}
.kst .k2 i{font-size:16px}
.screen.s2 .kst .k1{opacity:0}
.screen.s2 .kst .k2{opacity:1}
.fing .cu th:nth-child(2),.fing .cu td:nth-child(2){text-align:left}
.entry.kpop{top:56px;right:0;width:310px;min-height:344px;display:flex;flex-direction:column}
.kpop .kl.more{color:#888;border:0}
.kpop .ok-b{margin-top:auto}
.kpop .eh{background:var(--finances);color:#0d3d1b}
.kpop .kbig{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.kpop .kmark{font:700 25px "Geist";letter-spacing:-.01em;line-height:1;background:#2B2926;color:#fff;border-radius:14px;padding:14px 12px;flex:none}
.kpop .kbig b{display:block;font:650 21px "Geist";letter-spacing:-.02em;color:#222}
.kpop .kbig div span{font-size:12px;color:#888}
.kpop .kl{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f1f1f1;font-size:12.5px;font-variant-numeric:tabular-nums}
.kpop .kl em{font-style:normal;font-weight:600;color:#139a3a;display:inline-flex;align-items:center;gap:5px}
.kpop .ok-b{font-size:15px}

/* venue-dependent words in running text (Mike, 2026-10-22): with no venue picked the page is on the gym */
body[data-venue="gym"] [data-vs="play"],body[data-venue="play"] [data-vs="gym"]{display:none}

/* ---------------- 2026-10-23 (Mike, on new.gymsoft.com): sections start just under the nav and fit the screen ---------------- */
@media (min-width:761px){
  /* Ask AI, Services, FAQ: from the top, under the nav, not centred (too much space above) */
  .ask,.services,.faq{justify-content:flex-start;padding-top:calc(72px + clamp(20px,4.5vh,64px))}
  /* Ask AI: the title on one line */
  .askhead{max-width:none}
  .askhead .h2{white-space:nowrap}
  /* Built for Poland: one screen at any size; the space, the type and the grid follow the window's height */
  .pl{min-height:100vh;min-height:100svh;box-sizing:border-box;padding:calc(72px + clamp(16px,4vh,56px)) 0 clamp(16px,3vh,40px)}
  .pl .h2{font-size:clamp(30px,min(4.8vw,6vh),64px);margin-top:clamp(8px,1.6vh,18px)!important}
  .pl .plintro{font-size:clamp(15px,1.9vh,18px);margin-top:clamp(8px,1.8vh,20px)}
  .pl .grid{margin-top:clamp(14px,3.4vh,44px)}
  .pl .grid div{padding:clamp(10px,2.2vh,28px) 28px clamp(10px,2.4vh,30px) 0}
  .pl .grid h3{font-size:clamp(17px,2.1vh,22px)}
  .pl .grid p{font-size:clamp(13.5px,1.55vh,15px);margin-top:clamp(2px,.6vh,6px)}
  /* the closing section is the contact page: one screen, from under the nav, the waves at the bottom; the paragraph
     on two lines */
  .closing{min-height:100vh;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;padding-top:calc(72px + clamp(24px,6vh,80px))}
  .closing p{max-width:760px}
  .closing .ctas{margin-top:clamp(20px,4vh,36px)}
  .closing .contact{margin-top:clamp(20px,5vh,70px)}
  .closing svg{margin-top:auto;height:clamp(96px,15vh,200px)}
}

/* ---------------- cookie consent (consent.js; Mike, 2026-10-23): a card at the bottom left, Reject and Accept alike ---------------- */
.cc{position:fixed;left:24px;bottom:24px;z-index:120;width:min(460px,calc(100vw - 32px));background:var(--card);border-radius:22px;box-shadow:var(--shadow-xl);padding:20px 22px 18px;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.cc.on{opacity:1;transform:none}
.cc-t{display:block;font:640 17px "Geist";letter-spacing:-.01em}
.cc-p{color:var(--ink-2);font-size:14px;line-height:1.5;margin-top:6px}
.cc-p a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--gold)}
.cc-set{margin-top:12px;border-top:1px solid var(--paper-3)}
.cc-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--paper-3);cursor:pointer}
.cc-row input{margin-top:3px;width:18px;height:18px;accent-color:var(--ink);flex:none}
.cc-row b{display:block;font-size:14.5px;font-weight:620}
.cc-row small{display:block;color:var(--ink-2);font-size:13px;line-height:1.45;margin-top:2px}
.cc-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.cc-b{padding:10px 18px;font-size:14px;background:var(--ink);color:var(--paper)}
.cc-b:hover{background:var(--ink-2)}
.cc-more{border:0;background:none;font:600 14px "Geist";color:var(--ink-2);cursor:pointer;padding:8px 6px;margin-left:auto;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.cc-more:hover{color:var(--ink)}
@media (max-width:640px){.cc{left:16px;bottom:16px}.cc-b{flex:1}}
/* the "English?" bar (2026-10-26, lang.js): for visitors whose browser isn't Polish, once, under the nav on the right */
.langbar{position:fixed;right:24px;top:84px;z-index:121;display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:calc(100vw - 32px);background:var(--card);border-radius:20px;box-shadow:var(--shadow-xl);padding:12px 12px 12px 20px;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s}
.langbar.on{opacity:1;transform:none}
.langbar p{font:560 15px/1.4 "Geist";color:var(--ink)}
.langbar div{display:flex;align-items:center;gap:4px}
.langbar .btn{padding:9px 18px;font-size:14px}
.lb-stay{border:0;background:none;font:600 14px "Geist";color:var(--ink-2);cursor:pointer;padding:9px 12px;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.lb-stay:hover{color:var(--ink)}
@media (max-width:640px){.langbar{left:16px;right:16px;padding:14px 14px 12px 16px;gap:10px}.langbar div{width:100%}.langbar .btn{flex:1;justify-content:center}}

/* ---------------- the contact form (contact.js; Mike, 2026-10-23): the form on the left, the other ways on the right ---------------- */
.csheet{width:min(980px,100%);padding:0;overflow:auto}
.cgrid{display:grid;grid-template-columns:1fr 290px;min-height:100%}
.cmain{padding:clamp(20px,3.6vh,32px) 34px clamp(18px,3vh,28px)}
.ct{font:650 clamp(26px,3.6vh,34px)/1.05 "Geist";letter-spacing:-.035em;padding-right:50px}
.clead{color:var(--ink-2);margin-top:6px;font-size:15.5px}
.cform{display:grid;gap:clamp(10px,1.6vh,14px)}
.cform .clead{margin-bottom:clamp(2px,.8vh,8px)}
.cf{display:grid;gap:6px;min-width:0}
.cl{font:600 12px "Inter";letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.cl em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink-3)}
.cform input:not([type=radio]):not([type=checkbox]),.cform select,.cform textarea{width:100%;font:500 15.5px "Geist";color:var(--ink);background:var(--paper);border:1.5px solid transparent;border-radius:13px;padding:11px 14px;outline:none;transition:border-color .2s,background .2s}
.cform textarea{resize:vertical;min-height:72px;line-height:1.45}
.cform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px;cursor:pointer}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--gold);background:var(--card)}
.cform .bad input,.cform .bad select,.cform input.bad{border-color:var(--danger)}
.cf2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cphone{display:grid;grid-template-columns:104px 1fr;gap:6px}
.chint{font-size:13.5px;color:var(--ink-2);margin-top:-6px}
.chint button{border:0;background:none;font:600 13.5px "Geist";color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;cursor:pointer;padding:0}
.cnote{font-size:13px;color:var(--ink-2);margin-top:-4px}
.cvenue{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.cvenue legend{margin-bottom:6px;padding:0}
.cvenue label{position:relative}
.cvenue input{position:absolute;opacity:0;pointer-events:none}
.cvenue span{display:inline-block;font:600 14px "Geist";padding:9px 15px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--paper-3);cursor:pointer;transition:background .2s,box-shadow .2s,color .2s}
.cvenue input:checked + span{background:var(--ink);color:var(--paper);box-shadow:none}
.cvenue input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.cvenue.bad span{box-shadow:inset 0 0 0 1.5px var(--danger)}
.cconsent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.cconsent input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--ink)}
.cconsent a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--gold)}
.cconsent.bad{color:var(--danger-2)}
.cprivacy{font-size:12px;line-height:1.5;color:var(--ink-3);margin:-4px 0 0 28px}   /* the short data notice under the consent (2026-10-26) */
.cprivacy a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--gold)}
.cts:empty{display:none}
.csend{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.csend .btn:disabled{opacity:.6;cursor:default}
.cerr{font-size:14px;color:var(--danger-2);flex:1;min-width:200px}
.cerr:empty{display:none}
.cdone{display:grid;justify-items:start;gap:10px;padding-top:8px}
.cdone > i{font-size:44px;color:var(--green)}
.cdone p{color:var(--ink-2)}
.cdref{font-size:13.5px;color:var(--ink-3)}
.cdone .btn{margin-top:8px}
.cside{background:var(--paper-2);padding:clamp(20px,3.6vh,32px) 24px;display:grid;align-content:start;gap:12px;border-radius:0 26px 26px 0}
.cside .mk{margin-bottom:4px;padding-right:44px}
.cway{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:16px;padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .2s}
.cway:hover{transform:translateY(-1px)}
.cway > i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;background:var(--paper);flex:none}
.cway b{display:block;font-weight:620;font-size:15px}
.cway small{display:block;color:var(--ink-2);font-size:13px}
@media (max-width:860px){
  .cgrid{grid-template-columns:1fr}
  .cside{border-radius:0}
  .cside .mk{padding-right:0}
}
@media (max-width:760px){
  .csheet{padding:0}
  .cmain{padding:22px 18px 22px}
  .cf2{grid-template-columns:1fr}
}

/* ---------------- phones: no empty quarter-screens between the sections (phone audit item 6, 2026-10-24) ---------------- */
/* The desktop spacing was made for the holds, which phones don't use. Each section starts 16 px under the 64 px nav (where
   a menu jump lands) and ends without a long tail */
@media (max-width:760px){
  .pl{padding:74px 0 40px}   /* 74: like the Ecosystem (2026-10-24) */
  .price{padding:80px 0 48px}
  .ask{padding:80px 0 32px}
  .services{padding:48px 0 48px}
  .faq{padding:80px 0 40px}
  .closing{padding-top:96px}
}

/* an app from the Ecosystem in the module pop-up (phones, Mike 2026-10-24): its own icon, the description, its three points */
.modal .mapp{display:none}
.modal.app .mapp{display:grid;width:56px;height:56px;border-radius:15px;cursor:default;flex:none;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.modal.app .mapp svg{width:24px;height:34px}
.modal.app #modalIcon,.modal.app .mnote{display:none}
.mapd{color:var(--ink-2);font-size:15.5px;line-height:1.55;margin-top:clamp(12px,2.4vh,20px)}
/* dark, like the Ecosystem itself (Mike, 2026-10-24) */
.modal.app{background:rgba(20,19,18,.6)}
.modal.app .sheet{background:var(--night);color:var(--night-ink);box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px var(--night-line)}
.modal.app .mclose{background:var(--night-3);color:var(--night-ink)}
.modal.app .mhead p,.modal.app .mapd{color:var(--night-ink-2)}
.modal.app .mw li{background:var(--night-2)}
.modal.app .mw li > i{background:color-mix(in srgb,var(--mc) 24%,var(--night-2));color:var(--mc)}
.modal.app .mapp{box-shadow:0 8px 20px rgba(0,0,0,.45)}

/* Built for Poland on phones (Mike, 2026-10-24): the heading spaced and sized like the Ecosystem's, no intro under the
   title, then one point per row with its sentence running on after the name. ?bfp=pairs: the earlier two to a row */
@media (max-width:760px){
  .pl .kicker{display:block;line-height:16px;margin-top:6px}
  .pl .h2{font-size:28px;margin-top:4px!important}
  .pl .plintro{display:none}
  .pl .grid{grid-template-columns:1fr;margin-top:18px}
  .pl .grid div{position:relative;padding:11px 0 12px 22px}
  .pl .grid h3{display:inline;font-size:15.5px;line-height:1.45}
  .pl .grid h3 .rg{position:absolute;left:0;top:15px;width:12px;height:12px;border-width:3px}
  .pl .grid h3::after{content:"·";margin:0 .35em;color:var(--ink-3);font-weight:400}
  .pl .grid p{display:inline;font-size:14px;line-height:1.45;margin:0}
  body.bfp-pairs .pl .grid{grid-template-columns:1fr 1fr;column-gap:16px;margin-top:20px}
  body.bfp-pairs .pl .grid div{padding:13px 0 14px}
  body.bfp-pairs .pl .grid div:last-child{grid-column:1 / -1}
  body.bfp-pairs .pl .grid h3{display:flex;font-size:16px;line-height:1.25;gap:8px;align-items:flex-start}
  body.bfp-pairs .pl .grid h3 .rg{position:static;margin-top:3px}
  body.bfp-pairs .pl .grid h3::after{content:none}
  body.bfp-pairs .pl .grid p{display:block;font-size:13px;line-height:1.4;margin-top:4px}
}

/* Services on phones (Mike, 2026-10-24): tighter, like Built for Poland but less so: the heading like the Ecosystem's,
   the icon beside the name, the descriptions across the width (two lines, not three) */
@media (max-width:760px){
  .services .kicker{display:block;line-height:16px;margin-top:6px}
  .services .h2{font-size:28px;margin-top:4px!important}
  .services .lead{font-size:14px;margin-top:8px;line-height:1.45}
  .svc{margin-top:18px}
  .svc div{display:grid;grid-template-columns:36px 1fr;column-gap:12px;padding:13px 0 14px}
  .svc i{grid-row:1 / 3;width:36px;height:36px;border-radius:11px;font-size:18px}
  .svc h3{font-size:16.5px;margin-top:0;line-height:1.3}
  .svc p{font-size:14px;line-height:1.45;margin-top:2px;max-width:none}
}

/* the venue switch's "Other": not a venue to pick, a link to the FAQ answer for other kinds of venues (Mike, 2026-10-28) */
.vswitch .vother{display:flex;align-items:center;font:600 13.5px "Geist";padding:8px 12px;border-radius:999px;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.vswitch .vother:hover{background:rgba(43,41,38,.06);color:var(--ink)}
.nav.dark .vswitch .vother{color:var(--night-ink-2)}
.nav.dark .vswitch .vother:hover{background:rgba(255,255,255,.08);color:var(--night-ink)}
/* it fits from 1366 px; on smaller screens the question is in the menu's FAQ panel (and the phone menu) */
@media (max-width:1365px){.vswitch .vother{display:none}}