/* Lokamo :: Klient, Strefa Gastro (Gubin). Karta z prawdziwymi liczbami po lewej,
   po prawej scena na zoltej scenie w kolorach Strefy: gosc zamawia na
   strefa-gastro.pl, koszyk podpowiada frytki, bon idzie na kase POSbistro, kod QR
   na pudelku prowadzi do opinii w Google. Uzywana tez na /klienci/strefa-gastro.
   Swiat sceny 30 x 39 em, telefon 17,5 em; wnetrze telefonu w em ekranu
   (.phone__screen ma .8125em), ekran ok. 20,5 x 43,3 em. */

@font-face{font-family:"Strefa Display";src:url("/assets/klienci/strefa-gastro/luckiest-guy.woff2") format("woff2");font-display:swap}

.kl{padding:0 0 112px}
.kl__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden}
.kl__txt{display:flex;flex-direction:column;padding:clamp(28px,4vw,56px)}
.kl__t{margin-top:14px;font-size:clamp(28px,3vw,42px);font-weight:560;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.kl__lead{margin-top:18px;color:var(--text2);font-size:17px;line-height:1.55;max-width:34em}
.kl__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:32px 0 0;border-block:1px solid var(--line)}
.kl__f{padding:18px 16px 18px 0}
.kl__f+.kl__f{padding-left:16px;border-left:1px solid var(--line)}
.kl__f dt{font-size:clamp(28px,2.6vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1}
.kl__f dd{margin:10px 0 0;color:var(--steel);font-size:14px;line-height:1.4}
.kl__src{margin-top:14px;color:var(--steel);font-size:13.5px;line-height:1.5}
.kl__src a{color:var(--ink);text-underline-offset:3px}
.kl__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:auto;padding-top:30px}

.kl__stage{position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:28px 0 22px;background:#ffc528 url("/assets/klienci/strefa-gastro/pattern.svg") 0 0/280px 240px;container-type:inline-size;isolation:isolate}
.kl__steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:min(100% - 40px,560px);margin:0 auto}
.kl__steps button{position:relative;display:block;width:100%;padding:12px 0 0;border:0;background:none;color:rgba(32,21,14,.62);font:500 13px/1.3 var(--font);text-align:left;cursor:pointer}
.kl__steps i{position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:rgba(32,21,14,.18);overflow:hidden}
.kl__steps i::after{content:"";position:absolute;inset:0;background:#20150e;transform:scaleX(var(--p,0));transform-origin:0 50%}
.kl__steps .is-on button{color:#20150e}
.kl__steps .is-past i::after{transform:none}

/* ---------- Scena ---------- */
.sgx{position:relative;width:30em;height:39em;margin:0 auto;font-size:min(calc(100cqw / 31.5),16px)}
.sgx__w{position:absolute;inset:0}
.sgx__ph{position:absolute;left:1.6em;top:1.4em;width:17.5em;z-index:2;box-shadow:0 2.6em 3.6em -1.8em rgba(60,32,0,.55),0 .5em 1em -.5em rgba(60,32,0,.3)}
.sgx .scn__pause{top:.2em;right:0;color:#20150e;background:rgba(255,255,255,.7)}

.sg{position:absolute;inset:0;overflow:hidden;background:#141414;color:#fff8e7;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif}
.sg>*{position:absolute}
.sg b,.sg p,.sg em{margin:0;font-style:normal}
.sg-sb{top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;height:2.6em;padding:0 1.9em 0 2.3em;font-size:.82em;font-weight:600;color:#fff;transition:color .4s}
.sg[data-sgscr="home"] .sg-sb,.sg[data-sgscr="menu"] .sg-sb,.sg[data-sgscr="ok"] .sg-sb,.sg[data-sgscr="rv"] .sg-sb{color:#20150e}
.sg-sb__ic{display:flex;gap:.35em;align-items:center}
.sg-sb__ic svg{height:.78em;width:auto;fill:currentColor}
.sg-l{inset:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),transform .6s var(--ease-out),visibility 0s .6s}
.sg[data-sgscr="home"] .sg-home,.sg[data-sgscr="menu"] .sg-menu,.sg[data-sgscr="ok"] .sg-ok,.sg[data-sgscr="rv"] .sg-rv{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .6s var(--ease-out),visibility 0s}
.sg-menu{transform:translateX(8%)}
.sg-ok{transform:scale(.94)}
.sg-rv{transform:translateY(6%)}

/* Znak Strefy: tekstowy logotyp jak w naglowku strony lokalu */
.sg-logo{position:absolute;left:1.2em;top:2.2em;font:400 1.35em/.86 "Strefa Display",Impact,sans-serif;color:#20150e;text-transform:uppercase;letter-spacing:.01em}
.sg-logo sup{font-size:.4em;vertical-align:top;margin-left:.1em}
.sg-logo--s{top:2.6em;font-size:1.05em}
.sg-btn{display:flex;align-items:center;justify-content:center;gap:.6em;height:2.9em;border-radius:99em;background:#ffc528;color:#20150e;font:400 1em/1 "Strefa Display",Impact,sans-serif;text-transform:uppercase;letter-spacing:.03em}

/* Strona lokalu: zolty ser splywa na czarne tlo, burger, haslo, Zamow online */
.sg-drip{left:0;right:0;top:0;height:11.5em;background:#ffc528 url("/assets/klienci/strefa-gastro/pattern.svg") 0 0/14em 12em;-webkit-mask:linear-gradient(#000 0 0) 0 0/100% 56% no-repeat,url("/assets/klienci/strefa-gastro/cheese-mask.svg") 0 100%/100% 62% no-repeat;mask:linear-gradient(#000 0 0) 0 0/100% 56% no-repeat,url("/assets/klienci/strefa-gastro/cheese-mask.svg") 0 100%/100% 62% no-repeat;z-index:2}
.sg-burger{position:absolute;right:1.4em;top:2.9em;display:grid;place-content:center;gap:.26em;width:2.6em;height:2.6em;border-radius:50%;background:#20150e}
.sg-burger i{display:block;width:1em;height:.13em;border-radius:1em;background:#ffc528}
.sg-home__img{position:absolute;left:0;right:0;top:10.6em;width:19em;height:19em;margin:0 auto;object-fit:cover;-webkit-mask:radial-gradient(closest-side,#000 70%,transparent);mask:radial-gradient(closest-side,#000 70%,transparent)}
.sg-home__k{position:absolute;left:0;right:0;top:46.2em;text-align:center;font:400 .62em/1 "Strefa Display",Impact,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ffc528}
.sg-home__t{position:absolute;left:.5em;right:.5em;top:14.6em;text-align:center;font:400 2.05em/.98 "Strefa Display",Impact,sans-serif;text-transform:uppercase;color:#ffc528;text-shadow:0 .08em 0 #7a4a00}
.sg-home__go{position:absolute;left:0;right:0;top:36em;width:12.5em;margin:0 auto}

/* Menu zamawiania Lokamo w skorce Strefy */
.sg-top{left:0;right:0;top:0;height:7.6em;background:#ffc528 url("/assets/klienci/strefa-gastro/pattern.svg") 0 0/14em 12em;-webkit-mask:linear-gradient(#000 0 0) 0 0/100% 56% no-repeat,url("/assets/klienci/strefa-gastro/cheese-mask.svg") 0 100%/100% 62% no-repeat;mask:linear-gradient(#000 0 0) 0 0/100% 56% no-repeat,url("/assets/klienci/strefa-gastro/cheese-mask.svg") 0 100%/100% 62% no-repeat}
.sg-lang{position:absolute;right:1.2em;top:4.1em;display:flex;padding:.2em;border-radius:99em;background:rgba(32,21,14,.12);font-size:.68em;font-weight:700}
.sg-lang b,.sg-lang i{display:grid;place-items:center;width:2.9em;height:2.3em;border-radius:99em;font-style:normal;color:#20150e}
.sg-lang b{background:#20150e;color:#ffc528}
.sg-chips{left:1.6em;right:0;top:11.4em;display:flex;gap:.45em;white-space:nowrap;font-size:.72em;font-weight:600}
.sg-chips i,.sg-chips b{padding:.62em 1em;border-radius:99em;border:1px solid rgba(255,248,231,.14);font-style:normal}
.sg-chips b{background:#ffc528;border-color:#ffc528;color:#20150e}
.sg-h{left:1em;right:1em;top:9.3em;display:flex;align-items:center;gap:.5em;font:400 1.2em/1 "Strefa Display",Impact,sans-serif;text-transform:uppercase;color:#ffc528}
.sg-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,197,40,.5),transparent);order:1}
.sg-h span{order:2;font:600 .55em/1 -apple-system,system-ui,sans-serif;color:rgba(255,248,231,.5)}
.sg-card{position:relative;display:flex;gap:.8em;height:7.5em;margin:0 1.2em .65em;padding:.9em;border-radius:1.05em;background:#1e1c1a;border:1px solid rgba(255,197,40,.1);transition:background .3s,border-color .3s}
.sg-l>*{position:absolute}
.sg-list{left:0;right:0;top:13.6em}
.sg-card>div{flex:1;min-width:0}
.sg-card b{display:block;font-size:.84em;font-weight:700;color:#fff8e7}
.sg-card p{margin-top:.3em;font-size:.62em;line-height:1.35;color:rgba(255,248,231,.62);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sg-card em{display:block;margin-top:.55em;font:400 1.02em/1 "Strefa Display",Impact,sans-serif;color:#ffc528}
.sg-card small{font:600 .5em/1 -apple-system,system-ui,sans-serif;color:rgba(255,248,231,.62)}
.sg-card img{width:5.7em;height:5.7em;border-radius:.8em;object-fit:cover;flex:none}
.sg-plus{position:absolute;right:.55em;bottom:.55em;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#ffc528;color:#20150e;font-size:1em;font-weight:700;line-height:1;box-shadow:0 .2em .5em rgba(0,0,0,.4)}
.sg-card.is-hit{background:#2a2517;border-color:rgba(255,197,40,.45)}
.sg-bar{left:1em;right:1em;bottom:4.1em;display:flex;align-items:center;gap:.7em;height:3.1em;padding:0 1.1em 0 .45em;border-radius:99em;background:#ffc528;color:#20150e;font-size:.8em;font-weight:700;box-shadow:0 .6em 1.4em rgba(0,0,0,.5);transform:translateY(180%);transition:transform .55s var(--ease-out)}
.sg-bar.is-on{transform:none}
.sg-bar__n{display:flex;align-items:center;gap:.25em;height:2.3em;padding:0 .7em;border-radius:99em;background:#20150e;color:#ffc528}
.sg-bar__n svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2}
.sg-bar__s{margin-left:auto;font:400 1.15em/1 "Strefa Display",Impact,sans-serif}

/* Koszyk: arkusz od dolu, w nim podpowiedz "Do tego" z karty lokalu */
.sg-sheet{left:0;right:0;bottom:0;height:31.5em;z-index:12;padding:.7em 1.2em 0;border-radius:1.5em 1.5em 0 0;background:#1b1a18;box-shadow:0 -1em 3em rgba(0,0,0,.6);transform:translateY(104%);transition:transform .6s var(--ease-out)}
.sg-sheet.is-open{transform:none}
.sg-sheet>*{position:relative}
.sg-sheet__grab{display:block;width:2.6em;height:.28em;margin:0 auto;border-radius:1em;background:rgba(255,248,231,.25)}
.sg-sheet__t{margin-top:.9em;padding-bottom:.8em;border-bottom:1px solid rgba(255,248,231,.1);font:400 1.2em/1 "Strefa Display",Impact,sans-serif;text-transform:uppercase;color:#ffc528}
.sg-row{display:flex;align-items:center;gap:.8em;padding:.8em 0;border-bottom:1px solid rgba(255,248,231,.08)}
.sg-row img{width:3.5em;height:3.5em;border-radius:.7em;object-fit:cover}
.sg-row>div{flex:1}
.sg-row b{display:block;font-size:.84em;font-weight:700}
.sg-row em{display:block;margin-top:.35em;font:400 .98em/1 "Strefa Display",Impact,sans-serif;color:#ffc528}
.sg-row small{font:600 .5em/1 -apple-system,system-ui,sans-serif;color:rgba(255,248,231,.6)}
.sg-qty{display:flex;align-items:center;gap:.8em;padding:.25em;border-radius:99em;border:1px solid rgba(255,248,231,.16);font-size:.8em;font-weight:700}
.sg-qty i{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;font-style:normal;color:rgba(255,248,231,.7)}
.sg-qty .sg-qty__p{background:#ffc528;color:#20150e}
.sg-row--new{overflow:hidden;max-height:0;padding-block:0;border-bottom-width:0;opacity:0;transition:max-height .55s var(--ease-out),padding .55s var(--ease-out),opacity .4s .15s}
.sg-row--new.is-on{max-height:6em;padding-block:.8em;border-bottom-width:1px;opacity:1}
.sg-up{margin-top:1em;transition:opacity .4s,max-height .55s var(--ease-out);max-height:12em;overflow:hidden}
.sg-up.is-done{opacity:.35}
.sg-up__h{display:flex;justify-content:space-between;align-items:baseline;font:400 .98em/1 "Strefa Display",Impact,sans-serif;text-transform:uppercase;color:#ffc528}
.sg-up__h span{font:600 .62em/1 -apple-system,system-ui,sans-serif;text-transform:none;color:rgba(255,248,231,.8);text-decoration:underline;text-underline-offset:.2em}
.sg-up__row{display:flex;gap:.6em;margin-top:.8em;margin-right:-1.2em}
.sg-up__i{display:flex;align-items:center;gap:.6em;flex:none;width:13.4em;padding:.6em;border-radius:1em;background:#262420;border:1px solid rgba(255,248,231,.1);transition:border-color .3s,background .3s}
.sg-up__i img{width:3.6em;height:3.6em;border-radius:.6em;object-fit:cover}
.sg-up__i b{display:block;font-size:.76em;font-weight:700}
.sg-up__i em{display:block;margin-top:.3em;font:400 .78em/1 "Strefa Display",Impact,sans-serif;color:#ffc528;text-transform:uppercase}
.sg-up__i.is-hit{border-color:#ffc528;background:#2f2918}
.sg-sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:1.1em;padding-top:.9em;border-top:1px solid rgba(255,248,231,.1);font-size:.8em;font-weight:600}
.sg-sum b{font:400 1.55em/1 "Strefa Display",Impact,sans-serif;color:#ffc528}
.sg-btn--wide{position:absolute;left:1.2em;right:1.2em;bottom:4.1em;justify-content:space-between;padding:0 1.3em;font-size:.95em}
.sg-btn--wide b{font-weight:400}

/* Potwierdzenie */
.sg-ok__ic{position:absolute;left:0;right:0;top:11.5em;display:grid;place-items:center;width:4.4em;height:4.4em;margin:0 auto;border-radius:50%;background:#ffc528;color:#20150e}
.sg-ok__ic svg{width:2.2em;height:2.2em;fill:none;stroke:currentColor;stroke-width:2.6}
.sg-ok__t{position:absolute;left:.6em;right:.6em;top:11.2em;text-align:center;font:400 1.55em/1 "Strefa Display",Impact,sans-serif;text-transform:uppercase;color:#ffc528}
.sg-ok__s{position:absolute;left:1em;right:1em;top:25.3em;text-align:center;font-size:.86em;line-height:1.5;color:rgba(255,248,231,.8)}
.sg-ok__list{position:absolute;left:1.8em;right:1.8em;top:34.6em;padding:1em 1.1em;border-radius:1em;background:#1e1c1a;border:1px solid rgba(255,197,40,.1);font-size:.78em}
.sg-ok__list p{display:flex;gap:.5em;padding:.3em 0}
.sg-ok__list span{color:rgba(255,248,231,.55)}
.sg-ok__list b{margin-left:auto;font-weight:600}
.sg-ok__sum{margin-top:.4em;padding-top:.7em!important;border-top:1px solid rgba(255,248,231,.1);font-weight:700}
.sg-ok__sum b{color:#ffc528;font:400 1.2em/1 "Strefa Display",Impact,sans-serif!important}

/* Ocena wizyty z kodu QR: kopia strony opinii Lokamo (review-landing.tsx).
   Ciepla poswiata w kolorze lokalu, biala karta z logo, gwiazdki jak w lucide,
   potem krok "publiczna" z przekierowaniem do Google. Kolor lokalu i logo z
   konfiguracji portalu Strefy (#1e4a38). */
.sg-rv{--brand:#1e4a38;background:radial-gradient(105% 70% at 50% -8%,rgba(30,74,56,.13),transparent 62%),radial-gradient(100% 66% at 100% 108%,rgba(165,118,31,.24),transparent 66%),#f7f7f8;color:#191b1c;font-family:var(--font)}
.op-card{left:1em;right:1em;top:6.2em;padding:1.7em 1.25em 1.5em;border-radius:1.5em;border:1px solid #e7e8ea;background:#fff;box-shadow:0 1px 2px rgba(16,18,20,.05),0 .55em 1.5em rgba(16,18,20,.08);text-align:center}
.op-logo{display:block;width:3.4em;height:3.4em;margin:0 auto;border-radius:.85em;object-fit:cover;box-shadow:0 1px 2px rgba(16,18,20,.05),0 .5em 1.4em rgba(16,18,20,.08)}
.op-name{margin-top:.95em!important;font-size:.68em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8d9195}
.op-krok{display:none}
.sg-rv[data-sgrv="ocena"] .op-krok--ocena,.sg-rv[data-sgrv="pub"] .op-krok--pub{display:block;animation:op-in .32s var(--ease-out) both}
@keyframes op-in{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
.op-h{margin-top:.45em!important;font-size:1.58em;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.op-h--s{font-size:1.22em;line-height:1.2;text-wrap:balance}
.op-s{margin-top:.75em!important;font-size:.79em;line-height:1.6;color:#5d6165}
.op-stars{display:flex;justify-content:center;gap:.08em;margin-top:1.35em}
.op-stars i{display:block;padding:.3em}
.op-stars svg{display:block;width:2.3em;height:2.3em;fill:#eeeff1;stroke:#d3d5d9;stroke-width:1.5;stroke-linejoin:round;transition:transform .25s cubic-bezier(.34,1.56,.64,1),fill .15s,stroke .15s}
.op-stars i.is-on svg{fill:#dcbb7a;stroke:#855e12;transform:scale(1.06)}
.op-word{height:1.25em;margin-top:.55em!important;font-size:.74em;font-weight:500;color:#191b1c}
.op-foot{margin-top:.9em!important;font-size:.63em;color:#8d9195}
.op-dest{display:flex;align-items:center;gap:.75em;margin-top:1.4em;padding:.62em;border-radius:1.05em;border:1px solid #e7e8ea;background:#fff;box-shadow:0 1px 2px rgba(16,18,20,.05),0 .5em 1.4em rgba(16,18,20,.08);text-align:left;transition:background .2s}
.op-dest.is-hit{background:#f3f4f5}
.op-dest__m{display:grid;place-items:center;flex:none;width:2.3em;height:2.3em;border-radius:.6em;border:1px solid #e7e8ea}
.op-dest__m img{width:1.15em;height:1.15em}
.op-dest>span:nth-child(2){flex:1;min-width:0}
.op-dest b{display:block;font-size:.79em;font-weight:600}
.op-dest small{display:block;margin-top:.15em;font-size:.63em;color:#8d9195}
.op-dest svg{width:1.05em;height:1.05em;fill:none;stroke:#8d9195;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.op-not{margin-top:1.1em!important;font-size:.74em;font-weight:500;color:#5d6165;text-decoration:underline;text-underline-offset:.25em}
/* Formularz "Napisz opinie" Map Google (wzor: prawdziwy formularz, 2026-09-24) */
.sg-g{left:0;right:0;bottom:0;top:3.2em;z-index:12;padding:1.1em 1.3em 0;border-radius:1.4em 1.4em 0 0;background:#fff;color:#1f1f1f;font-family:Arial,Helvetica,sans-serif;box-shadow:0 -1em 3em rgba(0,0,0,.25);transform:translateY(104%);transition:transform .6s var(--ease-out)}
.sg-g.is-open{transform:none}
.sg-g>*{position:relative}
.sg-g__n{font-size:.72em;text-align:center;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-g__me{display:flex;align-items:center;gap:.7em;margin-top:1.3em}
.sg-g__me span{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:#7b1fa2;color:#fff;font-size:.9em}
.sg-g__me b{display:block;font-size:.84em;font-weight:400}
.sg-g__me small{display:block;margin-top:.15em;font-size:.62em;color:#5f6368}
.sg-g__st{display:flex;justify-content:center;gap:.55em;margin-top:1.4em}
.sg-g__st i{display:block;width:2.2em;height:2.2em;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.5 6 .8-4.4 4.2 1.1 5.9L12 16.8l-5.3 2.8 1.1-5.9-4.4-4.2 6-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.5 6 .8-4.4 4.2 1.1 5.9L12 16.8l-5.3 2.8 1.1-5.9-4.4-4.2 6-.8z'/%3E%3C/svg%3E") center/contain no-repeat;transition:background .2s,transform .3s var(--ease-out)}
.sg-g__st i{background:#dadce0}
.sg-g__st i.is-on{background:#fbbc04}
.sg-g__txt{height:5.4em;margin-top:1.3em;padding:.8em .9em;border:1px solid #bdc1c6;border-radius:.5em;font-size:.72em;line-height:1.4;color:#5f6368}
.sg-g__add{margin-top:1em;padding:.75em;border-radius:99em;background:#e8f0fe;color:#0b57d0;font-size:.7em;font-weight:700;text-align:center}
.sg-g__q{margin-top:1.1em;padding:.9em;border-radius:.8em;background:#f1f4f9}
.sg-g__q p{font-size:.68em;line-height:1.35}
.sg-g__chips{display:flex;gap:.45em;margin-top:.7em}
.sg-g__chips i{padding:.5em .8em;border:1px solid #747775;border-radius:.5em;font-size:.64em;font-style:normal;background:#fff;transition:background .2s,border-color .2s,color .2s}
.sg-g__chips i.is-on{background:#c2e7ff;border-color:#c2e7ff;color:#001d35}
.sg-g__btns{position:absolute!important;left:1.3em;right:1.3em;bottom:3.9em;display:flex;justify-content:flex-end;align-items:center;gap:1.4em;font-size:.76em;font-weight:700}
.sg-g__btns>span:first-child{color:#0b57d0}
.sg-g__pub{padding:.75em 1.3em;border-radius:99em;background:#0b57d0;color:#fff}
.sg-g__pub.is-done{background:#146c2e}

/* Safari na iOS: plywajacy pasek adresu */
.sg-sf{left:3.2em;right:3.2em;bottom:.9em;z-index:20;display:grid;place-items:center;height:2.35em;border-radius:99em;background:rgba(58,56,52,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-size:.74em;font-weight:500;box-shadow:0 .3em 1em rgba(0,0,0,.3)}
.sg[data-sgscr="rv"] .sg-sf{background:rgba(242,242,244,.86);color:#1d1d1f}
.sg-touch{z-index:40;left:0;top:0;width:2.5em;height:2.5em;margin:-1.25em 0 0 -1.25em;border-radius:50%;background:rgba(255,255,255,.5);border:.12em solid rgba(255,255,255,.85);box-shadow:0 0 0 .1em rgba(0,0,0,.12);opacity:0;pointer-events:none;transition:opacity .2s}
.sg-touch.is-on{opacity:1}
.sg-touch.is-press{animation:sg-press .42s var(--ease)}
@keyframes sg-press{0%{transform:scale(1)}35%{transform:scale(.72)}100%{transform:scale(1)}}

/* Karty obok telefonu: bon na kasie i kod QR na pudelku */
.sgx-pos,.sgx-qr{position:absolute;z-index:3;left:17.2em;width:12.4em;padding:1em 1.1em;border-radius:1em;background:#fff;color:#0d0d0f;font-size:1em;box-shadow:0 1.6em 2.8em -1.2em rgba(60,32,0,.55),0 .3em .8em -.2em rgba(60,32,0,.25);opacity:0;transform:translate(1.6em,0) scale(.96);transition:opacity .5s var(--ease),transform .7s var(--ease-out)}
.sgx-pos.is-on,.sgx-qr.is-on{opacity:1;transform:none}
.sgx-pos{top:14em}
.sgx-pos p{font-size:.72em;line-height:1.55}
.sgx-pos__h{display:flex;align-items:center;gap:.5em;font-weight:600;color:#55555b}
.sgx-pos__h img{width:1.6em;height:1.6em;border-radius:.35em}
.sgx-pos__h span{margin-left:auto;font-weight:400;color:#8c8c92}
.sgx-pos__t{margin:.5em 0 .3em;font-size:.86em!important;font-weight:650}
.sgx-pos__f{display:flex;justify-content:space-between;margin-top:.5em;padding-top:.5em;border-top:1px dashed #d4d4d8;font-weight:600}
.sgx-qr{top:25.5em;display:flex;align-items:center;gap:.8em}
.sgx-qr__c{position:relative;flex:none;width:3.4em;height:3.4em;border-radius:.4em;background:repeating-conic-gradient(#0d0d0f 0 25%,#fff 0 50%) 0 0/.68em .68em;box-shadow:inset 0 0 0 .25em #fff,0 0 0 1px #e6e6ea}
.sgx-qr__c i{position:absolute;width:1.05em;height:1.05em;border:.22em solid #0d0d0f;border-radius:.18em;background:#fff;box-shadow:inset 0 0 0 .18em #fff,inset 0 0 0 1em #0d0d0f}
.sgx-qr__c i:nth-child(1){left:.3em;top:.3em}.sgx-qr__c i:nth-child(2){right:.3em;top:.3em}.sgx-qr__c i:nth-child(3){left:.3em;bottom:.3em}.sgx-qr__c i:nth-child(4){display:none}
.sgx-qr p{font-size:.72em;line-height:1.4;color:#55555b}
.sgx-qr b{display:block;color:#0d0d0f;font-size:1.1em}

@media (max-width:899px){
  .kl__card{grid-template-columns:minmax(0,1fr)}
  .kl__ctas .btn{height:auto;min-height:46px;padding-block:12px;white-space:normal;text-align:left}
  .kl__stage{padding:22px 0 18px}
  .kl__steps{width:calc(100% - 24px)}
  .kl__facts{grid-template-columns:1fr}
  .kl__f,.kl__f+.kl__f{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-left:0}
  .kl__f+.kl__f{border-top:1px solid var(--line)}
  .kl__f dt{min-width:2.4em}
  .kl__f dd{margin:0}
}
@media (max-width:520px){
  .kl__steps button{font-size:11.5px}
}
.sgx__ph .phone__screen{background:#000}

/* Podstrona /klienci/strefa-gastro: kroki po lewej swieca razem ze scena */
.cs-steps{list-style:none;counter-reset:cs;justify-content:center;gap:6px;margin:0}
.cs-steps li{counter-increment:cs;position:relative;padding:18px 0 18px 52px;border-top:1px solid var(--line);color:var(--steel);transition:color .4s var(--ease)}
.cs-steps li:first-child{border-top:0}
.cs-steps li::before{content:"0" counter(cs);position:absolute;left:0;top:19px;font:500 13px/1.4 var(--mono);color:var(--steel)}
.cs-steps li.is-on{color:var(--ink)}
.cs-steps li.is-on p{color:var(--text2)}
.cs-steps h3{font-size:19px;font-weight:560;letter-spacing:-.015em;line-height:1.3}
.cs-steps p{margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--steel);transition:color .4s var(--ease)}
.cs-steps:not(.is-live) li{color:var(--ink)}
.sub-hero .wrap>.sub-hero__copy:only-child{max-width:860px}
.kl__card--case{margin-top:48px}
@media (max-width:899px){.kl__card--case{margin-top:32px}.kl__card--case .kl__stage{order:-1}.cs-steps li{padding-left:40px;color:var(--ink)}.cs-steps li p{color:var(--text2)}}