/* 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}
.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:1100px){.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-3)}
.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);transform:translateY(-1px)}
.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:center;padding:16px 4px;font-size:20px;font-weight:600;cursor:pointer}
.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 .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)}
.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 h3{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);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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}
.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{width:150% !important;margin-top:4px}
  .band{padding:0 16px;bottom:10px;gap:8px}
  .bname{font-size:24px}.blead{display:none}.bmore{padding:9px 14px;font-size:13.5px}
  .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:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px}   /* phones: as in 07, until the phone pass */
  .bw b{font-size:14px}
  .skip{right:12px;bottom:12px;padding:9px 13px;font-size:13px}
  .skip span{display:none}
}

/* 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 ---------------- */
.modal{position:fixed;inset:0;z-index:90;background:rgba(31,30,28,.45);backdrop-filter:blur(4px);display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .22s}
.modal.on{opacity:1}
.sheet{position:relative;width:min(900px,100%);max-height:min(86vh,820px);overflow:auto;background:var(--card);border-radius:26px;box-shadow:var(--shadow-xl);padding:30px 34px 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}
.mw{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.mw li{display:flex;gap:12px;background:var(--paper);border-radius:16px;padding: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:22px;border-top:1px solid var(--paper-3);padding-top: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:5px 0;break-inside:avoid}
.mfoot{display:flex;align-items:center;gap:18px;margin-top: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;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}
.acopy .q{font:600 12px "Inter";letter-spacing:.06em;color:var(--gold);background:rgba(255,205,0,.1);padding:6px 10px;border-radius:999px}
.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}
.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}

/* an iPhone (16 Pro proportions) */
.phone{position:relative;height:94cqh;max-width:100cqw;aspect-ratio:71.5/149.6;border-radius:15%/7.2%;background:#0B0B0B;padding:2.6%;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:12.6%/6%;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 */
.lap{width:min(100cqw,138cqh);align-self:center}
.lscr{background:#0B0B0B;border-radius:12px 12px 0 0;padding:1.8%;aspect-ratio:16/10}
.lbase{height:12px;background:linear-gradient(#5b5853,#3a3836);border-radius:0 0 12px 12px;margin:0 -4%}
.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 */
.tvx{position:relative;width:min(100cqw,165cqh);aspect-ratio:16/9;background:#0B0B0B;border-radius:10px;padding:6px;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:5px;background:#141414;overflow:hidden;container-type:inline-size}
#loopTv{width:min(100cqw,82cqh)}
#loopTv.port{transform:rotate(-90deg)}
.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{width:min(100cqw,128cqh);aspect-ratio:4/3;background:#111;border-radius:22px;padding:3%;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:12px;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}
.bd3 b{font-size:4.6cqw}
.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{grid-column:1;grid-row:auto}
  .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}
}
@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:hover{transform:translateY(-2px)}
.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 i{font-size:22px;color:var(--gold);flex:none}
.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-3);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}
.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 h4{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:620}
.extras h4 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-3)}
@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}
@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 h4{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}
/* 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}
.flagmark::after{content:"";position:absolute;left:-.02em;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}