/* wooops.pl W2 po unslop (2026-11): noc jako jednolita powierzchnia, jeden akcent (niebieski z aplikacji),
   moment = działający telefon i etykieta na kartonie, sygnatura = czerwony stempel.
   Tokeny: www/tokens/*.json. Odstępstwa i źródła komponentów 21st.dev: www/docs/authorship-notes.md. */

@font-face{font-family:Satoshi;src:url(../fonts/satoshi-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-bold.woff2) format("woff2");font-weight:700;font-display:swap}
/* metryki policzone fontTools z przebiegu polskiego zdania: brak CLS przy podmianie */
@font-face{font-family:"Satoshi Fallback";src:local("Arial");size-adjust:98.18%;ascent-override:102.88%;descent-override:24.45%;line-gap-override:0%}

:root{
  /* raw: aplikacja */
  --ink:#0B0E14; --ink-3:#2A303C;
  --canvas:#F2F4F8; --surface:#FBFCFE; --sunken:#E8ECF2; --hair:#E1E5EC; --line:#C3C9D3; --muted:#5E6470;
  --blue:#0A62FF; --blue-press:#0554E6; --blue-soft:#E7F0FF; --blue-on-night:#7FA9FF;
  --red:#DF1D35; --red-soft:#FDE5E7; --red-fg:#B0132A; --red-on-night:#F2495F; --green:#1B7F2A;
  /* raw: noc i papier (strona) */
  --night-0:#0B0926; --night-1:#120E3A; --night-2:#1C1750;
  --paper:#F5F4FC; --paper-2:#ECEBF5;
  --on-night:#F2F0FF; --on-night-2:#C7C0EE;
  --kraft:#C49A6C; --kraft-2:#B88E60;
  /* semantic */
  --bg:var(--paper); --text-1:var(--night-0); --text-2:#5C5A78; --action:var(--blue);
  --rule:rgba(11,9,38,.1); --rule-night:rgba(242,240,255,.14);
  /* shape, space, motion */
  --r-pill:999px; --r-ctrl:10px; --r-card:16px; --r-panel:20px;
  --gutter:24px; --section:112px; --container:1180px;
  --t-fast:120ms; --t-nav:260ms; --ease:cubic-bezier(.22,1,.36,1);
  --text:Satoshi,"Satoshi Fallback","Avenir Next","Segoe UI","Helvetica Neue",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text-1);font:400 17px/1.55 var(--text);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.night :focus-visible{outline-color:var(--blue-on-night)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:12px 16px;border-radius:var(--r-ctrl);background:var(--surface);color:var(--night-0);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.h2{font:700 clamp(32px,3.6vw,48px)/1.08 var(--text);letter-spacing:-.02em}
.lead{color:var(--text-2);max-width:56ch;margin-top:16px;font-size:18px}
.kick,.kick-d{font:500 15px/1.3 var(--text);margin-bottom:12px}
.kick{color:var(--blue-on-night)}
.kick-d{color:var(--blue)}
.pill-pro{display:inline-block;padding:0 6px;border-radius:4px;background:var(--sunken);color:var(--text-2);font:500 13px/20px var(--text);vertical-align:1px;white-space:nowrap}
/* ikony: jeden zestaw, jeden rozmiar, kolor roli tekstu */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}

/* ---------- sygnatura: stempel ---------- */
.stamp{display:inline-block;padding:8px 16px;border:4px solid var(--red);border-radius:4px;color:var(--red);font:700 40px/1 var(--text);letter-spacing:.04em;transform:rotate(-8deg);white-space:nowrap}
.final-in .stamp{border-color:var(--red-on-night);color:var(--red-on-night)}

/* ---------- powierzchnia nocna (hero, baner, Pro, finał) ---------- */
.night{color:var(--on-night);background:var(--night-1)}
.night .lead{color:var(--on-night-2)}

/* ---------- nawigacja ---------- */
.site-head{position:absolute;inset:0 0 auto;z-index:10;color:var(--on-night)}
/* podstrony: ten sam pasek nawigacji na nocnym tle, w przepływie strony */
.site-head.bar-top{position:relative}
.site-head.bar-top+main .doc{padding-top:48px}
.nav{max-width:var(--container);margin:0 auto;padding:16px var(--gutter);display:flex;align-items:center;gap:24px}
.logo{display:inline-flex;align-items:center;gap:8px;margin-right:auto;white-space:nowrap;text-decoration:none;font:700 20px/1 var(--text)}
.logo img{width:auto;height:40px}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none;padding:0}
.nav-links a{text-decoration:none;font-weight:500}
.nav-links a:not(.btn){display:inline-block;padding:12px 0;color:var(--on-night-2);transition:color var(--t-fast) var(--ease)}
.nav-links a:not(.btn):hover{color:var(--on-night)}
.lang{font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-ctrl);font-weight:500;text-decoration:none;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn-ink{background:var(--night-0);color:var(--surface)}
.btn-ink:hover{background:var(--night-2)}
.btn-blue{background:var(--blue);color:var(--surface)}
.btn-blue:hover{background:var(--blue-press)}

/* ---------- odznaki sklepów (oficjalne pliki) ---------- */
/* odstęp >= 1/4 wysokości odznaki (Apple i Google); PNG Google ma -11 px marginesu, więc 28 px daje 17 px widocznej przerwy */
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.badge{display:inline-block;border-radius:8px;line-height:0}
.badge img{height:54px;width:auto;max-width:none}
/* oficjalny PNG Google Play ma wbudowany margines: wyrównanie optyczne */
.badge.play img{height:78px;margin:-12px -11px}

/* ---------- hero ---------- */
.hero{position:relative;padding:96px 0 112px}
.hero-in{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center}
.hero h1{font:700 clamp(42px,4.2vw,60px)/1.04 var(--text);letter-spacing:-.03em}
.hero h1 span{display:block;color:var(--blue-on-night)}
.hero-lead{margin:24px 0 32px;max-width:46ch;font-size:18px;color:var(--on-night-2)}
.tour-start{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;padding:0;color:var(--blue-on-night);font-weight:500;transition:color var(--t-fast) var(--ease)}
.tour-start:hover{color:var(--on-night)}

/* scena: telefon z demem + karton z etykietą tego samego zamówienia */
.stage{position:relative;display:flex;align-items:center;gap:8px}
.carton{position:relative;flex:none;width:236px;height:320px;margin-top:136px;padding:48px 16px 0;border-radius:6px;background:linear-gradient(170deg,var(--kraft),var(--kraft-2));transform:rotate(3deg);box-shadow:0 16px 32px rgba(5,4,20,.4)}
.carton::before{content:"";position:absolute;inset:0 0 auto;height:32px;background:rgba(240,222,190,.55)}
.ship-label{position:relative;padding:12px;border-radius:2px;background:var(--surface);color:var(--ink);font-size:12px;line-height:16px;transform:rotate(-2deg)}
.ship-label .l-top{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.ship-label .l-top b{font:700 16px/1 var(--text)}
.ship-label .l-point{margin-top:8px;font:700 28px/1 var(--text)}
.ship-label .l-to{margin-top:8px}
.ship-label .l-bc{height:40px;margin-top:8px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 9px)}
.ship-label .l-no{margin-top:4px;display:flex;justify-content:space-between}
.carton .stamp{position:absolute;right:12px;bottom:16px;padding:4px 8px;border-width:3px;font-size:20px}

/* demo: odwzorowanie ekranów aplikacji 1.3 (tokeny jak w apce), telefon prosto */
.phone{position:relative;z-index:3;flex:none;width:340px;height:680px;border-radius:44px;border:10px solid var(--night-0);background:var(--canvas);color:var(--ink);overflow:hidden;
  box-shadow:0 0 0 1px var(--rule-night),0 24px 48px rgba(5,4,20,.45)}
.scr{position:absolute;inset:0;padding:28px 16px 16px;display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden;transform:translateX(12px);transition:opacity var(--t-nav) var(--ease),transform var(--t-nav) var(--ease),visibility 0s var(--t-nav)}
.scr.on{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-nav) var(--ease),transform var(--t-nav) var(--ease)}
.scr[data-s="0"]{justify-content:space-between}
.s-h{font:700 32px/1.05 var(--text);letter-spacing:-.02em}
.s-sub{font-size:14px;color:var(--muted)}
.card{background:var(--surface);border-radius:var(--r-card);padding:16px}
.big{font:700 36px/1 var(--text);letter-spacing:-.02em}
.dn{color:var(--red-fg);font-weight:700;font-size:14px}
.packcard{background:var(--blue-soft);border-radius:var(--r-card);padding:16px;display:grid;gap:12px}
.packcard .top{display:flex;gap:12px;align-items:center}
.box-ic{width:44px;height:44px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:var(--surface);flex:none}
.packcard .n{font:700 22px/1.1 var(--text);color:var(--blue);white-space:nowrap}
.urg{margin-left:auto;padding:4px 10px;border-radius:var(--r-pill);background:var(--red-soft);color:var(--red-fg);font:700 13px/1.3 var(--text);white-space:nowrap}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini div{background:var(--surface);border-radius:16px;padding:10px;font:700 15px/1.2 var(--text)}
.mini small{display:block;font-weight:400;color:var(--muted)}
.mini .r small{color:var(--red-fg)}
.cta{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:var(--r-pill);background:var(--ink);color:var(--surface);font:700 17px/1 var(--text);width:100%;transition:background-color var(--t-fast) ease-out}
.cta:hover:not(:disabled){background:var(--ink-3)}
.cta:disabled{background:var(--sunken);color:var(--muted);cursor:default}
.cta.blue{background:var(--blue)}
.cta.blue:hover{background:var(--blue-press)}
/* podpowiedź „tu kliknij” bez pętli, gaśnie po pierwszej interakcji */
.hint{box-shadow:0 0 0 3px rgba(10,98,255,.35)}
.back{width:44px;height:44px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:22px}
.bar{height:6px;border-radius:3px;background:var(--sunken);overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform var(--t-nav) var(--ease)}
.prod{display:flex;gap:12px;align-items:center}
.thumb{width:64px;height:64px;border-radius:16px;flex:none;object-fit:cover}
.prod b{font:700 20px/1.15 var(--text)}
.item{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:20px;padding:12px}
.chk{width:28px;height:28px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;flex:none;color:transparent;transition:background-color 160ms ease-out}
.item.ok .chk{background:var(--green);border-color:var(--green);color:var(--surface)}
.scan{margin-left:auto;min-height:44px;padding:0 14px;border-radius:var(--r-pill);background:var(--blue);color:var(--surface);font-weight:700;white-space:nowrap}
.item.ok .scan{display:none}
.toast{font-size:14px;color:var(--green);font-weight:700;min-height:20px}
.row{display:flex;justify-content:space-between;gap:10px;font-size:15px;padding:4px 0}
.row span{color:var(--muted)}
.lbl{display:none;border:2px solid var(--ink);border-radius:8px;padding:10px;background:var(--surface);font:500 12px/1.35 var(--text)}
.lbl.on{display:block}
.lbl b{font:700 18px/1 var(--text)}
.lbl .bc{height:34px;margin:8px 0 4px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 9px)}
.done-wrap{flex:1;display:grid;place-items:center;text-align:center}
.scr.on .stamp{animation:stamp 240ms var(--ease) 120ms both}
@keyframes stamp{from{opacity:0;transform:rotate(-8deg) scale(1.3)}to{opacity:1;transform:rotate(-8deg) scale(1)}}

/* ---------- Product Tour (21st.dev #26918) ---------- */
.tour-scrim{position:fixed;inset:0;z-index:89}
.tour-spot{position:fixed;z-index:90;border-radius:16px;box-shadow:0 0 0 9999px rgba(11,9,38,.55);outline:2px solid var(--surface);outline-offset:2px;pointer-events:none}
.tour-card{position:fixed;z-index:91;width:320px;max-width:calc(100vw - 24px);background:var(--surface);color:var(--ink);border-radius:var(--r-card);padding:16px;box-shadow:0 24px 48px rgba(11,9,38,.35)}
.tour-card h2{font:700 18px/1.2 var(--text);padding-right:36px}
.tour-card p{font-size:15px;color:var(--muted);margin-top:6px}
.tour-x{position:absolute;top:6px;right:6px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.tour-x:hover{background:var(--sunken)}
.tour-f{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.dots{display:flex;gap:6px}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--hair)}
.dots i.on{width:18px;background:var(--ink)}
.tour-f .b{display:flex;gap:6px}
.tour-f button{min-height:44px;padding:0 16px;border-radius:var(--r-ctrl);font-weight:500}
.tour-back{color:var(--muted)}
.tour-next{background:var(--ink);color:var(--surface)}

/* ---------- pasek: przy stole z kartonami ---------- */
.gains-sec{position:relative;z-index:2;margin-top:-48px}
.gains{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:32px;background:var(--surface);border-radius:var(--r-card);padding:24px 32px;box-shadow:0 8px 24px rgba(11,9,38,.08)}
.gains h2{font:700 20px/1.2 var(--text)}
.gains ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.gains li{display:flex;align-items:flex-start;gap:12px;font-weight:500;line-height:1.3;color:var(--text-2)}
.gains .ic{margin-top:1px;color:var(--text-1)}

/* ---------- od zamówienia do wysyłki (Features With Panel, 21st.dev #29767) ---------- */
.flowsec{display:grid;grid-template-columns:.9fr 1fr 1fr;gap:32px;align-items:center;padding-top:var(--section)}
.flow-copy .btn{margin-top:24px}
.flow-visual{border-radius:var(--r-panel);aspect-ratio:4/4.7;display:grid;place-items:start center;padding-top:32px;overflow:hidden;background:var(--paper-2)}
.flow-visual img{width:64%;height:auto;border-radius:24px;box-shadow:0 8px 24px rgba(11,9,38,.1);transition:opacity 180ms var(--ease)}
.feat-list{list-style:none;padding:0;display:grid;gap:4px}
.feat-list button{width:100%;text-align:left;display:grid;grid-template-columns:20px 1fr;gap:4px 12px;align-items:start;padding:12px 16px;border-radius:12px;transition:background-color var(--t-fast) var(--ease)}
.feat-list button:hover{background:var(--paper-2)}
.feat-list .ic{grid-row:span 2;margin-top:3px;color:var(--text-2)}
.feat-list .t{font:500 17px/1.4 var(--text)}
.feat-list .d{font-size:15px;line-height:1.45;color:var(--text-2)}
.feat-list button[aria-expanded=true]{background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule)}
.feat-list button[aria-expanded=true] .ic{color:var(--blue)}
.feat-list .inline{display:none}

/* ---------- baner: połączenie ze sklepem ---------- */
.secure{padding-top:var(--section)}
.secure-in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:48px;border-radius:var(--r-panel)}
.trust-points{list-style:none;padding:0;display:grid;gap:12px;margin-top:24px}
.trust-points li{display:flex;align-items:center;gap:12px;font-weight:500;font-size:15px}
.trust-points .ic{color:var(--blue-on-night)}
.link-visual{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center}
.tile{width:104px;height:104px;border-radius:14px;display:grid;place-items:center;align-content:center;gap:8px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--rule-night);font:500 14px/1 var(--text)}
.tile.mark img{width:72px;height:auto}
.beam{height:2px;background:var(--blue-on-night)}
.checks{margin-left:32px;display:grid;gap:8px}
.checks p{display:flex;align-items:baseline;gap:8px;font:500 15px/1.3 var(--text);color:var(--on-night-2)}
.checks p::before{content:"✓";color:var(--blue-on-night)}

/* ---------- cennik (Annual Savings Pricing Grid, 21st.dev #28342) ---------- */
.price{display:grid;grid-template-columns:.9fr 1fr 1.25fr;gap:16px;align-items:stretch;padding-top:var(--section)}
.price-copy{align-self:center;padding-right:16px}
.price-copy .h2{font-size:clamp(28px,3vw,40px)}
.period{display:inline-flex;gap:4px;padding:4px;margin-top:24px;border-radius:14px;background:var(--paper-2)}
.period button{min-height:44px;padding:0 16px;border-radius:var(--r-ctrl);font-weight:500;color:var(--text-2);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.period button[aria-pressed=true]{background:var(--surface);color:var(--night-0)}
.save{margin-left:8px;color:var(--blue-press);font-size:14px}
.plan{border-radius:var(--r-card);padding:24px;background:var(--surface);display:flex;flex-direction:column}
.plan h3{font:700 24px/1.1 var(--text)}
.plan .desc{color:var(--text-2);margin-top:4px;font-size:15px}
.plan.pro{color:var(--on-night);background:var(--night-1)}
.plan.pro .desc{color:var(--on-night-2)}
.amt{margin-top:20px;display:flex;align-items:baseline;gap:8px}
.amt b{font:700 48px/1 var(--text);letter-spacing:-.02em}
.amt span{color:var(--text-2)}
.plan.pro .amt span{color:var(--on-night-2)}
.sub{min-height:24px;margin-top:4px;font-size:14px;color:var(--text-2)}
.plan.pro .sub{color:var(--on-night-2)}
.plan ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px;align-content:start;flex:1;font-size:15px}
.plan li{display:grid;grid-template-columns:16px 1fr;gap:8px}
.plan li::before{content:"✓";color:var(--text-2)}
.plan.pro li::before{color:var(--blue-on-night)}
.plan.pro ul{grid-template-columns:1fr 1fr;column-gap:20px}
.plan .go{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:24px;border-radius:var(--r-ctrl);font-weight:500;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:background-color var(--t-fast) var(--ease)}
.plan .go:hover{background:var(--paper)}
.plan.pro .go{background:var(--blue);color:var(--surface);box-shadow:none}
.plan.pro .go:hover{background:var(--blue-press)}
.price-note{grid-column:1 / -1;margin-top:8px;font-size:14px;color:var(--text-2);max-width:100ch}
.price-note a{color:var(--blue)}

/* ---------- pomoc ---------- */
.help{padding-top:var(--section)}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;align-items:start;margin-top:32px}
.qa details{border-top:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;padding:12px 0;font-weight:500}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:400 24px/1 var(--text);color:var(--text-2);transition:transform var(--t-fast) var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 32px 20px 0;color:var(--text-2)}
.qa a{color:var(--blue)}

/* ---------- finał ---------- */
.final{padding-top:var(--section);padding-bottom:var(--section)}
.final-in{display:grid;grid-template-columns:minmax(320px,1fr) auto auto;gap:48px;align-items:center;padding:48px;border-radius:var(--r-panel)}
.final-in .h2{max-width:20ch;font-size:clamp(28px,3vw,40px)}
.final-sub{margin-top:8px;color:var(--on-night-2)}

/* ---------- stopka ---------- */
.foot{background:var(--night-0);color:var(--on-night-2);font-size:15px}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-top:48px;padding-bottom:48px}
.foot .logo{color:var(--on-night);text-decoration:none}
.foot h2{font:500 15px/1.3 var(--text);color:var(--on-night);margin-bottom:12px}
.foot ul{list-style:none;padding:0;display:grid;gap:0}
.foot a:not(.logo):not(.badge){text-decoration:none;display:inline-block;padding:8px 0;transition:color var(--t-fast) var(--ease)}
.foot a:hover{color:var(--on-night)}
.foot .legal{grid-column:1 / -1;font-size:13px;line-height:1.5;border-top:1px solid var(--rule-night);padding-top:24px}

/* ---------- strony prawne (doc) ---------- */
.doc{padding:32px 0 var(--section)}
.doc-head{max-width:760px}
.doc-head h1{font:700 clamp(34px,4vw,52px)/1.08 var(--text);letter-spacing:-.02em;margin-top:8px}
.param-label{font:500 15px/1.3 var(--text);color:var(--text-2)}
.doc-meta{margin-top:12px;color:var(--text-2)}
.doc-wrap{overflow-x:auto}
.doc-toc{background:var(--surface);border-radius:var(--r-card);padding:20px 24px 20px 40px;margin:16px 0;columns:2 260px;column-gap:32px;font-size:15px}
.doc-toc li{break-inside:avoid;padding:4px 0}
.doc-toc a{text-decoration:none;color:var(--text-2)}
.doc-toc a:hover{color:var(--blue)}
.doc-body{max-width:72ch}
.doc-body h2{font:700 24px/1.25 var(--text);margin:40px 0 12px}
.doc-body h3{font:500 19px/1.3 var(--text);margin:24px 0 8px}
.doc-body p+p{margin-top:12px}
.doc-body ul,.doc-body ol{padding-left:24px;display:grid;gap:8px;margin:12px 0}
.doc-body a{color:var(--blue)}
.doc-body code{font-size:.9em;background:var(--sunken);padding:2px 6px;border-radius:4px;overflow-wrap:anywhere}
.doc-head .btn{margin-top:20px}
.doc-callout{background:var(--surface);border-radius:var(--r-card);padding:20px 24px;margin:16px 0}
.doc-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.doc-table th,.doc-table td{text-align:left;padding:12px;border-bottom:1px solid var(--hair);vertical-align:top}
.doc-table th{font-weight:500;background:var(--surface)}

/* ---------- 404 ---------- */
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:64px var(--gutter)}
.nf .stamp{font-size:clamp(24px,5vw,40px);margin-bottom:40px}
.nf h1{margin-top:8px}
.nf .lang-alt{align-self:center;padding:12px 4px;color:var(--text-2)}
.nf p:not(.stamp){margin:16px auto 0;color:var(--text-2);max-width:44ch;font-size:18px}
.nf .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}

/* karton tylko tam, gdzie mieści się obok telefonu */
@media (max-width:1240px){
  .carton{display:none}
  .stage{justify-content:center}
}
@media (max-width:1100px){
  .hero-in{grid-template-columns:1fr}
  .stage{padding-top:24px}
  .gains{grid-template-columns:1fr;gap:16px}
  .gains ul{grid-template-columns:1fr 1fr}
  .flowsec{grid-template-columns:1fr 1fr}
  .flow-copy{grid-column:1 / -1}
  .secure-in{grid-template-columns:1fr;padding:32px}
  .price{grid-template-columns:1fr 1fr}
  .price-copy{grid-column:1 / -1}
  .final-in{grid-template-columns:1fr;justify-items:start;gap:32px}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .foot .wrap>div:first-child{grid-column:1 / -1}
  .nav-links li:not(.keep){display:none}
}
@media (max-width:760px){
  .phone{width:min(340px,100%)}
  .flowsec{grid-template-columns:1fr}
  .flow-visual{display:none}
  .feat-list button[aria-expanded=true] + .inline{display:grid;place-items:center;background:var(--paper-2);border-radius:var(--r-card);padding:20px;margin-top:4px}
  .feat-list .inline img{width:70%;height:auto;border-radius:20px}
  .link-visual{grid-template-columns:auto 1fr auto}
  .checks{grid-column:1 / -1;margin:24px 0 0}
  .price{grid-template-columns:1fr}
  .plan.pro ul{grid-template-columns:1fr}
  .qa{grid-template-columns:1fr}
  .nav-links .btn{padding:0 16px}
  .nav-links .long{display:none}
  .hero{padding-top:88px}
}
@media (max-width:420px){
  :root{--gutter:16px;--section:88px}
  .badge img{height:44px}
  /* bez ujemnego marginesu z lewej: po zawinięciu odznaka nie wystaje poza kolumnę; widoczny odstęp 15 px >= 1/4 z 44 px */
  .badge.play img{height:64px;margin:-10px -9px -10px 0}
  .stores{gap:16px 15px}
  .gains{padding:20px}
  .gains ul{grid-template-columns:1fr;gap:12px}
  .secure-in{padding:32px 20px}
  .final-in{padding:32px 16px}
  .tile{width:88px;height:88px}
  .tile.mark img{width:64px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}