/* ==========================================================================
   GREZZIO — instrument panel
   Single visual world, deliberately dark: the product is an instrument you
   watch while it works, and every colour here is painted explicitly so the
   page holds on any host background.
   ========================================================================== */
:root{
  --ink:#060B09;          /* near-black, biased green so it sits with the accent */
  --ink-2:#0A110E;
  --panel:#0E1713;
  --panel-2:#121D18;
  --rule:rgba(170,209,190,.14);
  --rule-soft:rgba(170,209,190,.07);
  --paper:#E9F0EB;
  --mist:#8CA79A;
  --mist-dim:#5E7A6D;
  --accent:#34C27E;
  --accent-soft:rgba(52,194,126,.14);
  --go:#6EE7A0;
  --caution:#F0B429;
  --stop:#F0554E;
  --shadow:0 24px 60px -28px rgba(0,0,0,.9);

  --display:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;

  --gap:clamp(20px,4vw,56px);
  --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#04120B;padding:10px 16px;z-index:99}
.skip:focus{left:12px;top:12px}

h1,h2,h3{font-family:var(--display);font-weight:700;line-height:.98;letter-spacing:-.032em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.2vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.3rem)}
h3{font-size:clamp(1.12rem,1.5vw,1.35rem);letter-spacing:-.02em;line-height:1.2}
p{max-width:64ch}
strong{font-weight:600;color:var(--paper)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gap)}

/* Section index labels. These are not decoration: each one names the stage
   of the actual pipeline the section describes, in the order the program
   runs it. */
.ix{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:baseline;gap:12px;
}
.ix span{color:var(--mist-dim)}
.sec{padding:clamp(64px,9vw,132px) 0;border-top:1px solid var(--rule-soft);position:relative}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:70ch}
.lede{color:var(--mist);font-size:clamp(1.02rem,1.1vw,1.18rem)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--gap);
  background:rgba(6,11,9,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--rule-soft);
}
.nav img{height:20px;width:auto}
.nav-links{display:flex;gap:26px;font-size:.85rem;color:var(--mist)}
.nav-links a:hover{color:var(--paper)}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:999px;
  font-weight:600;font-size:.92rem;letter-spacing:-.01em;
  border:1px solid transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.btn-go{background:var(--accent);color:#04120B;box-shadow:0 10px 30px -14px rgba(52,194,126,.9)}
.btn-go:hover{transform:translateY(-2px);background:#3FD98D}
.btn-ghost{border-color:var(--rule);color:var(--paper)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:9px 17px;font-size:.82rem}

/* ---------- hero ---------- */
.hero{padding:clamp(44px,6vw,80px) 0 clamp(30px,4vw,52px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{margin:18px 0 22px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-sub{color:var(--mist);font-size:clamp(1.04rem,1.2vw,1.24rem);max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 22px}
.cta-note{font-family:var(--mono);font-size:.74rem;color:var(--mist-dim);letter-spacing:.04em}

/* ---------- globe ---------- */
.globe-shell{
  position:relative;aspect-ratio:1/1;width:100%;
  border-radius:20px;border:1px solid var(--rule);
  background:
    radial-gradient(120% 90% at 50% 8%,rgba(52,194,126,.14),transparent 62%),
    linear-gradient(180deg,var(--panel-2),var(--ink-2));
  overflow:hidden;box-shadow:var(--shadow);
}
#globe{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
#globe:active{cursor:grabbing}
.globe-tag{
  position:absolute;left:16px;top:14px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist-dim);
}
.legend{
  position:absolute;left:16px;bottom:14px;display:flex;gap:16px;
  font-family:var(--mono);font-size:.66rem;color:var(--mist);
}
.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot-go{background:var(--go);box-shadow:0 0 8px var(--go)}
.dot-caution{background:var(--caution);box-shadow:0 0 8px var(--caution)}
.dot-stop{background:var(--stop);box-shadow:0 0 8px var(--stop)}

/* the ruling readout — the point of the globe */
.readout{
  margin-top:18px;border:1px solid var(--rule);border-radius:16px;
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  padding:20px 22px;display:grid;gap:12px;
}
.readout-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.readout-name{font-family:var(--display);font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.badge{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;
}
.b-go{color:var(--go)} .b-caution{color:var(--caution)} .b-stop{color:var(--stop)}
.readout-rule{color:var(--mist);font-size:.95rem;max-width:none}
.readout-law{font-family:var(--mono);font-size:.76rem;color:var(--accent);letter-spacing:.02em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.chip{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  padding:5px 9px;border-radius:6px;border:1px solid var(--rule);
  color:var(--mist);transition:border-color .15s,color .15s,background .15s;
}
.chip:hover,.chip[aria-pressed="true"]{color:var(--paper);border-color:var(--accent);background:var(--accent-soft)}
.chip::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:6px;vertical-align:middle}
.chip.go::before{background:var(--go)} .chip.caution::before{background:var(--caution)} .chip.stop::before{background:var(--stop)}

/* ---------- figures band ---------- */
.band{border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);background:var(--ink-2)}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-soft)}
.fig{background:var(--ink-2);padding:clamp(22px,3vw,34px) clamp(16px,2vw,28px);display:grid;gap:6px}
.fig-n{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.fig-l{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-dim)}

/* ---------- panels ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.panel{
  border:1px solid var(--rule);border-radius:16px;padding:24px;
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  display:grid;gap:10px;align-content:start;
  transform-style:preserve-3d;will-change:transform;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.panel:hover{border-color:rgba(52,194,126,.4);box-shadow:var(--shadow)}
.panel p{color:var(--mist);font-size:.93rem;max-width:none}
.panel .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist-dim)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
.shot{cursor:zoom-in}
.shot img{transition:opacity .15s}
.shot:hover img{opacity:.92}
/* Powiekszenie zrzutu. Pelny ekran, obrazek dopasowany do okna. */
.lupa{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(4,10,7,.94);padding:clamp(12px,3vw,44px);
  cursor:zoom-out}
.lupa.on{display:grid;place-items:center}
.lupa img{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:10px;border:1px solid var(--rule);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9)}
.lupa-x{position:absolute;top:14px;right:18px;font-family:var(--mono);
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);background:none;border:0;cursor:pointer;padding:8px 10px}
.lupa-x:hover{color:var(--paper)}
@media (prefers-reduced-motion:reduce){.shot img{transition:none}}
.shot{border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.shot img{width:100%}
.cap{font-family:var(--mono);font-size:.7rem;color:var(--mist-dim);margin-top:10px;letter-spacing:.03em}

.list{display:grid;gap:14px;margin-top:8px}
/* Ordinary text flow, with the bullet drawn beside it. A grid would split
   an item that opens with a bold lead-in across two rows: the lead-in on one
   line, the sentence on the next. */
.list li{list-style:none;position:relative;padding-left:20px;color:var(--mist);font-size:.95rem}
.list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.list b{color:var(--paper);font-weight:600}

/* the signal stack — three planes in real 3D */
.stack{perspective:900px;display:grid;place-items:center;padding:20px 0}
.stack-in{transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-32deg);display:grid}
.plate{
  width:min(240px,54vw);height:min(240px,54vw);border-radius:18px;grid-area:1/1;
  border:1px solid currentColor;display:grid;place-items:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
}
.p1{color:var(--go);background:rgba(110,231,160,.09);transform:translateZ(64px)}
.p2{color:var(--caution);background:rgba(240,180,41,.08);transform:translateZ(6px)}
.p3{color:var(--stop);background:rgba(240,85,78,.08);transform:translateZ(-52px)}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:stretch}
.plan{border:1px solid var(--rule);border-radius:18px;padding:28px;display:grid;gap:16px;align-content:start;background:linear-gradient(180deg,var(--panel),var(--ink-2))}
.plan.hot{border-color:rgba(52,194,126,.5);box-shadow:0 0 0 1px rgba(52,194,126,.16),var(--shadow)}
.plan-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.price{font-family:var(--display);font-size:clamp(2.4rem,4vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.price small{font-family:var(--body);font-size:.95rem;font-weight:400;color:var(--mist);letter-spacing:0}
.plan ul{display:grid;gap:11px}
.plan li{list-style:none;position:relative;padding-left:18px;color:var(--mist);font-size:.92rem}
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--rule-soft)}
.faq details{border-bottom:1px solid var(--rule-soft);padding:18px 0}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:1.2rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--mist);margin-top:12px;font-size:.95rem}

/* ---------- disclaimer + footer ---------- */
.note{
  border:1px solid var(--rule);border-left:3px solid var(--caution);
  border-radius:12px;padding:18px 20px;background:rgba(240,180,41,.05);
  color:var(--mist);font-size:.9rem;
}
.note p{max-width:none}
footer{border-top:1px solid var(--rule-soft);padding:clamp(44px,6vw,72px) 0 40px;background:var(--ink-2)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot-grid h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist-dim);font-weight:500;margin-bottom:14px}
.foot-grid a{display:block;color:var(--mist);font-size:.9rem;padding:3px 0}
.foot-grid a:hover{color:var(--accent)}
.foot-bottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--rule-soft);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--mist-dim)}
.attr{margin-top:16px;font-size:.78rem;color:var(--mist-dim);max-width:none}

/* ---------- reveal (from a visible resting state) ---------- */
.rise{opacity:.999;transform:translateY(14px);transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
.rise.in{transform:none}

@media (max-width:900px){
  .hero-grid,.split{grid-template-columns:1fr}
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media (max-width:520px){
  .band-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rise{transform:none}
}
/* ---- wybor jezyka ---- */
/* Wybor jezyka. Zwykle odnosniki, bez skryptu - dziala tez z wylaczonym JS. */
.langs{display:flex;gap:2px;align-items:center;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;margin-right:22px}
.langs a,.langs span{padding:4px 7px;border-radius:6px;color:var(--mist-dim);
  transition:color .15s,background .15s}
.langs a:hover{color:var(--paper);background:rgba(170,209,190,.09)}
.langs .lang-on{color:var(--accent);background:var(--accent-soft,rgba(52,194,126,.14))}
.foot-lang{margin-top:14px;font-size:.78rem;color:var(--mist-dim)}
@media (max-width:900px){.langs{font-size:.62rem;margin-right:12px}.langs a,.langs span{padding:3px 5px}}
/* ==========================================================================
   DOLOZONE W 8.0
   ========================================================================== */

/* ---------- zrzuty ekranu ----------
   Zrzut MA ZACHOWAC swoje proporcje. Poprzednia wersja strony deklarowala
   1400x860 dla obrazka, ktory takich proporcji nie mial, wiec interfejs
   wygladal na rozciagniety w poziomie. Teraz generator czyta wymiary
   prosto z pliku PNG, a aspect-ratio trzyma miejsce w ukladzie, zanim
   obrazek sie wczyta. */
.shot img{width:100%;height:auto}
.shot-wide{max-width:100%}
figure.shot{margin:0}

/* Zrzut na calej szerokosci kolumny, z podpisem pod spodem. */
.shotrow{display:grid;gap:clamp(18px,2.4vw,30px);margin-top:clamp(26px,3vw,40px)}
.shotrow.dwa{grid-template-columns:1fr 1fr}
@media (max-width:900px){.shotrow.dwa{grid-template-columns:1fr}}

/* ---------- os wersji (changelog) ---------- */
.rel{border-top:1px solid var(--rule-soft);padding:clamp(26px,3.4vw,40px) 0}
.rel:first-of-type{border-top:0}
.rel-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.rel-v{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;
  letter-spacing:-.03em;line-height:1}
.rel-d{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--mist-dim)}
.rel-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid currentColor}
.t-now{color:var(--accent)} .t-major{color:var(--go)} .t-fix{color:var(--caution)}
.rel h3{margin:18px 0 8px}
.rel h3:first-of-type{margin-top:0}
.rel p{color:var(--mist);font-size:.95rem}
/* Historia wydan to tekst do czytania. Do 8.2 stala w szerokiej kolumnie
   strony glownej (1240 px) z akapitami zwezonymi do 64 znakow - wszystko
   przy lewej krawedzi, a prawa polowa ekranu pusta. Teraz ta sama kolumna
   co regulamin i pomoc, a tekst wypelnia ja do konca. */
.wrap.czytanie{max-width:920px}
.czytanie .sec-head,.czytanie p{max-width:none}

/* ==========================================================================
   TELEFONY I TABLETY (8.2)
   Sprawdzone na 320, 375, 390, 412, 844 poziomo, 768 i 1024 px, na kazdej
   stronie w kazdym jezyku. Poziomego przewijania nie bylo nigdzie; byly
   za to: brak menu ponizej 900 px, przycisk "Kup" lamany na trzy wiersze,
   logo wypchniete z naglowka na 320 px i cele dotyku po 17-24 px.
   ========================================================================== */
.btn-sm{white-space:nowrap}
.nav .logo{flex:none}
.nav-menu{display:none}

@media (max-width:900px){
  .nav{gap:10px;padding-top:10px;padding-bottom:10px}
  .nav .logo{margin-right:auto;display:block;padding:12px 0}
  .nav > .langs{margin-right:4px;font-size:.72rem}
  .nav > .langs a,.nav > .langs span{padding:9px 7px}

  .nav-menu{display:block}
  .nav-menu > summary{list-style:none;display:grid;place-items:center;
    width:44px;height:44px;border-radius:12px;border:1px solid var(--rule);
    cursor:pointer;color:var(--paper);-webkit-tap-highlight-color:transparent}
  .nav-menu > summary::-webkit-details-marker{display:none}
  .nav-menu[open] > summary{border-color:var(--accent);color:var(--accent)}
  .burger,.burger::before,.burger::after{display:block;width:18px;height:2px;
    border-radius:2px;background:currentColor;transition:transform .2s ease,background .2s ease}
  .burger{position:relative}
  .burger::before,.burger::after{content:"";position:absolute;left:0}
  .burger::before{top:-6px}
  .burger::after{top:6px}
  .nav-menu[open] .burger{background:transparent}
  .nav-menu[open] .burger::before{transform:translateY(6px) rotate(45deg)}
  .nav-menu[open] .burger::after{transform:translateY(-6px) rotate(-45deg)}

  .nav-panel{position:absolute;left:0;right:0;top:100%;
    /* Pelny kolor, nie polprzezroczysty: przez naglowek z rozmyciem tlo
       przepuszczalo tekst strony i menu czytalo sie jak dwie warstwy. */
    background:var(--ink);border-bottom:1px solid var(--rule);
    padding:6px var(--gap) 22px;
    max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
  .menu-links{display:grid}
  .menu-links a{display:flex;align-items:center;min-height:54px;
    border-bottom:1px solid var(--rule-soft);font-size:1.06rem;color:var(--paper)}
  .menu-links a:active,.menu-links a:hover{color:var(--accent)}
  .nav-panel .langs{flex-wrap:wrap;gap:8px;margin:18px 0 0;font-size:.8rem}
  .nav-panel .langs a,.nav-panel .langs span{min-width:52px;min-height:44px;
    display:grid;place-items:center;padding:0 10px;border:1px solid var(--rule)}

  /* cele dotyku w tresci */
  .foot-grid a{padding:9px 0}
  .chip{padding:9px 11px}
  .faq summary{min-height:44px}
  /* najdrobniejsze etykiety (10,6 px) o stopien w gore */
  .legend,.globe-tag,.panel .tag,.rel-tag{font-size:.74rem}
}
/* Jezyki schodza z naglowka do menu, zanim zaczna go sciskac. */
@media (max-width:640px){
  .nav > .langs{display:none}
}
/* Tablet: jezyki stoja w naglowku, wiec w menu drugi raz ich nie ma. */
@media (min-width:641px) and (max-width:900px){
  .nav-panel .langs{display:none}
}
/* Laptop i tablet poziomo: menu jeszcze w naglowku, a przycisk po hiszpansku
   ("Comprar — €99 una vez") wystawal na 1024 px o 5 px poza ekran. */
@media (min-width:901px) and (max-width:1180px){
  .kup-reszta{display:none}
  .nav-links{gap:18px}
  .langs{margin-right:10px}
}
@media (max-width:420px){
  .kup-reszta{display:none}
}
@media (max-width:520px){
  /* "GREZZIO 8.2 · WINDOWS · 16 JEZYKOW" lamal sie w dwie waskie kolumny */
  .ix{flex-wrap:wrap;row-gap:6px}
  /* cztery liczby w dwoch kolumnach zamiast czterech ekranow przewijania */
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .fig-n{font-size:1.7rem}
}
@media (max-width:359px){
  .band-grid{grid-template-columns:1fr}
}

/* ---------- FAQ pogrupowane ---------- */
.faq-grupa{margin-top:clamp(34px,4vw,52px)}
.faq-grupa > h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:10px}
.faq details p + p{margin-top:10px}
.faq a{color:var(--accent)}
.faq ul{margin:10px 0 0 0}
.faq li{list-style:none;position:relative;padding-left:18px;color:var(--mist);
  font-size:.95rem;margin-top:7px}
.faq li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}

/* ---------- pasek rozmowy (sekcja follow-up) ---------- */
.flow{display:grid;gap:10px;margin-top:6px}
.flow-krok{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  border:1px solid var(--rule);border-radius:12px;padding:14px 16px;
  background:linear-gradient(180deg,var(--panel),var(--ink-2))}
.flow-krok .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  color:var(--accent);padding-top:3px;white-space:nowrap}
.flow-krok h4{font-family:var(--display);font-size:1.02rem;letter-spacing:-.02em;
  font-weight:700;line-height:1.2}
.flow-krok p{color:var(--mist);font-size:.92rem;margin-top:4px;max-width:none}
/* Miejsce na odpowiedz. Przerywana ramka, bo tam jeszcze nic nie ma - to
   jest ten sam znak, ktorego uzywa sam program. */
.flow-puste{border-style:dashed;border-color:var(--rule);background:none}
.flow-puste .n{color:var(--mist-dim)}
.flow-puste h4{color:var(--mist)}

/* ---------- znaczenia kolorow ---------- */
.kolory{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;margin-top:20px}
.kolor{border:1px solid var(--rule);border-left:3px solid var(--kk);border-radius:10px;
  padding:13px 15px;background:var(--panel)}
.kolor b{display:block;color:var(--kk);font-size:.82rem;font-family:var(--mono);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.kolor span{color:var(--mist);font-size:.9rem}
.k-go{--kk:var(--go)} .k-caution{--kk:var(--caution)} .k-stop{--kk:var(--stop)}
.k-plan{--kk:#7FB2E8} .k-dim{--kk:var(--mist-dim)} .k-accent{--kk:var(--accent)}

/* ---------- tabela ---------- */
.tab{width:100%;border-collapse:collapse;margin-top:18px;font-size:.92rem}
.tab th,.tab td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule-soft)}
.tab th{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-dim);font-weight:500}
.tab td{color:var(--mist)}
.tab td:first-child{color:var(--paper)}
.tab-wrap{overflow-x:auto}