/* ============================================================
   MathIt website
   Palette and type follow the app: calm blues, generous spacing,
   nothing that competes with the screenshots.
   ============================================================ */

:root {
  --blue: #2f6fed;
  --blue-ink: #2159c9;
  --blue-light: #4d86f7;
  --blue-pale: #eaf1fc;
  --yellow: #f5a800;
  --teal: #14a296;
  --teal-ink: #0d7168;
  --pink: #b53f70;
  --navy: #16294a;
  --ink: #1c3157;
  --ink-soft: #33507f;
  --muted: #46618f;
  --bg: #f4f7fd;
  --bg-alt: #ffffff;
  --card: #ffffff;
  --border: #dfe8f6;
  --grid-line: rgba(47, 111, 237, 0.085);
  --radius: 20px;
  --shadow: 0 14px 40px rgba(31, 58, 99, 0.10);
  --shadow-soft: 0 4px 16px rgba(31, 58, 99, 0.07);
  --shell: 1160px;
}

* { box-sizing: border-box; }

/* Naglowek jest przyklejony, wiec skok do `#sekcji` zostawialby jej tytul
   schowany pod paskiem — kotwica trafialaby w dobre miejsce, ale czytelnik
   widzialby srodek sekcji bez naglowka i nie wiedzial, gdzie wladowal.
   `scroll-padding-top` na elemencie przewijanym zalatwia wszystkie kotwice
   naraz — inaczej niz `scroll-margin-top`, ktorego trzeba pilnowac przy
   kazdym nowym celu. Wysokosc paska (79 px) wpisuje main.js do
   `--header-h`; wartosc nizej to zapasnik na wypadek wylaczonego JS.
   `--promo-h` doliczamy, bo pasek stoi pod ewentualna wstega promocyjna. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 79px) + var(--promo-h, 0px) + 16px);
}

body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is required now that the hero image carries width/height
   attributes — without it the intrinsic height would win over the scaled
   width and the banner would stretch. The attributes are there so the
   browser reserves the space before the file arrives. */
img { max-width: 100%; height: auto; display: block; }

/* balance keeps a heading from dropping a single orphaned word onto its own
   line, which looked especially bad under the highlighter stroke. */
h1, h2, h3, h4 { line-height: 1.2; color: var(--navy); margin: 0 0 14px; text-wrap: balance; }
/* Akapit konczacy sie jednym sierotnym slowem w ostatniej linii wyglada jak
   blad skladu. `pretty` kaze przegladarce cofnac sie o kilka linii i rozlozyc
   je tak, zeby ostatnia nie byla ogonkiem. Nieobslugujace przegladarki po
   prostu lamia po staremu. */
p, li { text-wrap: pretty; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.2rem); font-weight: 900; letter-spacing: -0.015em; }
h3 { font-size: 1.1rem; font-weight: 800; }
h4 { font-size: 0.98rem; font-weight: 800; }
p  { margin: 0 0 14px; }

.shell { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue-ink);
  margin-bottom: 10px;
}

.eyebrow-yellow { color: #8f6200; }
.eyebrow-teal   { color: var(--teal-ink); }
.eyebrow-pink   { color: var(--pink); }

/* Highlighter stroke, the way a child marks the important bit in a book. */
h1 mark {
  background: linear-gradient(180deg, transparent 60%, rgba(245, 168, 0, 0.42) 60%);
  color: inherit;
  padding: 0 2px;
}

.lead { font-size: 1.08rem; color: var(--ink-soft); }
.prose { color: var(--ink-soft); max-width: 60ch; }

/* -------------------------- language bar --------------------------
   A slim strip above the header rather than a control inside it: five
   names plus five flags will not fit beside the navigation, and a
   language a visitor cannot see is a language they will not find. */

.langbar {
  background: var(--navy);
  font-size: 0.8rem;
}

.langbar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  padding: 5px 0;
}

.langbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  color: #b9cce9;
  font-weight: 700;
  text-decoration: none;
}

.langbar a:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }

.langbar a.is-current { background: rgba(255, 255, 255, 0.14); color: #fff; }

.langbar img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* ---------------------------- header ---------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 247, 253, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 78px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* The real icon with its white background keyed out, not the hand-drawn SVG
   copy — that one rebuilt the "MI" tile out of a text element and a rectangle,
   which fell apart at 44px. */
.brand-logo { width: 46px; height: 46px; }
.brand-name { font-weight: 900; font-size: 1.45rem; letter-spacing: -0.01em; color: var(--navy); }

.main-nav { display: flex; gap: 22px; margin-left: auto; }

.main-nav a {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
}

.main-nav a:hover { color: var(--blue-ink); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  font-size: 1.4rem;
  color: var(--navy);
  cursor: pointer;
}

/* ---------------------------- buttons ---------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover { transform: translateY(-1px); }

.btn-header { margin-left: 4px; }

/* A store link that does not exist yet. Styled as a status note rather than a
   button, because a button that looks clickable and does nothing costs more
   trust than saying plainly that the app is not out. */

.soon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--muted);
}

.soon::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f5a800;
  box-shadow: 0 0 0 4px rgba(245, 168, 0, 0.18);
}

.soon-light { color: #c6d6f2; }

/* ----------------------------- hero ----------------------------- */

.hero { padding: clamp(44px, 6vw, 76px) 0 clamp(44px, 6vw, 76px); }

/* The media column is deliberately the wider one: the banner is the only thing
   in the hero that shows the product, and at an even split it rendered too
   small to read. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

.hero-text .lead { margin-bottom: 20px; max-width: 40ch; font-size: 1.14rem; }
.hero-text h1 { margin-bottom: 18px; font-size: clamp(2rem, 3.9vw, 2.9rem); line-height: 1.25; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; }

.chips li {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
}

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

.hero-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ----------------------------- bands ----------------------------- */

/* A notebook is dense. The earlier spacing breathed like a corporate site and
   made the page a third longer than its content warranted. */
/* Przerwa miedzy sekcjami wynosila 128 px (64 + 64) i powtarzala sie
   jedenascie razy — 1428 px pustej przestrzeni, czyli trzynascie procent
   calej strony. Tla sasiadujacych pasow i tak sie roznia (kratka / gladkie),
   wiec granica jest widoczna bez tak szerokiego marginesu. */
.band { padding: clamp(18px, 2vw, 20px) 0; }

/* Squared paper is the app's entire visual identity — the product is a sheet of
   grid paper. Alternating plain and gridded bands says what MathIt is before a
   single word is read. Cards sit on top as white sheets. */
.paper {
  background-color: #fbfcff;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* The margin rule down the left of an exercise book. The app draws one on
   every card; the page can carry the same line. */
.paper .shell { position: relative; }

.paper .shell::before {
  content: "";
  position: absolute;
  left: -22px;
  top: -14px;
  bottom: -14px;
  width: 2px;
  background: rgba(224, 96, 154, 0.34);
}

/* 62ch to dobra miara dla akapitu, ale nie dla dwuzdaniowego leada: lamal sie
   w polowie zdania, majac obok pol ekranu wolnego miejsca. Naglowek i tak
   ogranicza sie sam przez `text-wrap: balance`. */
/* Nagłówki sekcji stoją na środku. Wcześniej były do lewej, a dwie sekcje
   na końcu (cennik i „Weź to") miały treść wyśrodkowaną — przez co strona
   zmieniała oś w połowie i wyglądało to jak niedokończona przeróbka.
   Wyśrodkowany nagłówek nad treścią do lewej to zwykły układ redakcyjny;
   ważne, żeby był konsekwentny. */
.band-head {
  max-width: 72ch;
  margin-inline: auto;
  margin-bottom: clamp(18px, 2.2vw, 28px);
  text-align: center;
}
.band-lead { font-size: 1.05rem; color: var(--ink-soft); margin: 0; }

/* One stroke of a marker under the heading: tapered to a point at both ends,
   thickest in the middle. Drawn as a filled shape rather than a stroked line —
   a stroked path has a constant width and reads as a wobble, not a mark. */
.band-head h2::after,
.writing-inner h2::after {
  content: "";
  display: block;
  width: 262px;
  height: 18px;
  margin: 2px auto 0;
  /* A long wedge — laid down thick on the left, lifted to a needle on the
     right. feTurbulence roughens the outline so the edge breaks up the way a
     marker does on paper, instead of reading as a printed shape. Two passes at
     different opacities give the streaking of a pen running dry. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 18'%3E%3Cfilter id='m' x='-4%25' y='-60%25' width='108%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75 0.28' numOctaves='3' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='3.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23m)' fill='%23f5a800'%3E%3Cpath d='M5 6.6C70 5.4 165 5.6 254 8.6C165 10.9 70 12.4 5 12.4Z'/%3E%3Cpath d='M14 8C80 7 160 7.2 236 9.1C160 10.4 80 11.2 14 10.8Z' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / 100% 100%;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

/* ------------------- the long division, twice -------------------
   The same eight rows of the same division, laid out in the same grid.
   The only difference is that the left copy ignores the squares. This is
   the argument the whole page makes, so it is built rather than drawn. */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: stretch;
}

.pane {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(20px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* A loose sheet never lies perfectly square on the desk. */
.pane-messy { transform: rotate(-0.7deg); }
.pane-clean { transform: rotate(0.35deg); }

.pane-label {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.pane-clean .pane-label { color: var(--blue-ink); }

.ld {
  display: grid;
  grid-template-columns: repeat(6, 42px);
  grid-auto-rows: 42px;
  width: max-content;
  margin-inline: auto;
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--navy);
  /* Same paper under both copies — that is what makes the drift visible. */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
}

.ld span { display: grid; place-items: center; }

/* One rule per number, not per digit — the scheme draws a single line under the
   whole subtrahend. Spanning the columns with its own element keeps it one
   stroke; per-cell borders broke it into segments. */
/* The rule sits on the grid line, not above it. The background draws a line at
   every cell boundary, so a 2px bar anchored to the bottom edge and pulled down
   one pixel lands centred on it — which is where the app draws it. */
.ld-rule {
  align-self: end;
  justify-self: stretch;
  height: 2px;
  margin: 0 0 -1px;
  background: var(--navy);
}

.ld-clean { --grid-line: rgba(47, 111, 237, 0.13); }

/* Ruled by the same unsteady hand as the digits: one stroke, slightly off. */
.ld-messy .ld-rule {
  height: 2.5px;
  background: #2b3f66;
  /* Kreska tez jest rysowana reka: raz za krotka, raz wychodzi poza liczbe. */
  transform:
    rotate(var(--r, 0deg))
    translate(var(--x, 0), var(--y, 0))
    scaleX(var(--sx, 1));
}

/* ---------------------- pismo dysgraficzne ----------------------
   To nie jest „ladne pismo pod katem". Dysgrafia to przede wszystkim brak
   powtarzalnosci: ten sam znak wychodzi za kazdym razem inaczej, wielkosc
   skacze w obrebie jednej linii, nachylenie idzie raz w lewo raz w prawo bez
   ladu, znaki spadaja pod linie albo nad nia plywaja, nacisk raz mocny raz
   ledwie widoczny, a poprawka jest napisana po napisanym.

   Stad cztery zabiegi naraz:
   1. trzy rozne kroje pisma przeplatane znak po znaku (.alt, .thin) — to daje
      niepowtarzalnosc ksztaltu, ktorej samym obrotem nie da sie udac;
   2. --s skaluje kazdy znak osobno, --o odpowiada za nacisk;
   3. --k pochyla znak niezaleznie od obrotu;
   4. .over dorysowuje pod spodem pierwsze podejscie do znaku.

   Efekt ma byc taki, ze czesci cyfr po prostu nie da sie odczytac — i ze da sie
   wskazac palcem te jedna, ktora uczen sam sobie zle odczytal w kolejnym
   wierszu. Bez tego sekcja pokazywalaby tylko balagan, a ma pokazywac szkode. */
.ld-messy span {
  font-family: 'Caveat', cursive;
  font-size: 1.9rem;
  font-weight: var(--w, 700);
  color: #2b3f66;
  opacity: var(--o, 1);
  /* Skos osobno od obrotu: pochylenie pisma i przekrzywienie pojedynczego znaku
     to dwie rozne rzeczy i przy dysgrafii rozjezdzaja sie niezaleznie. */
  transform:
    rotate(var(--r, 0deg))
    translate(var(--x, 0), var(--y, 0))
    skewX(var(--k, 0deg))
    scale(var(--s, 1));
}

/* Trzy „rece" zamiast jednej. Caveat 700, Caveat 500 (cienszy, o innych
   zakonczeniach kresek) i Gloria Hallelujah (szersza, o duzo wiekszej wysokosci
   x). Przeplatane znak po znaku sprawiaja, ze ta sama szostka raz wyglada jak
   zero, raz jak szostka — a tego samym obrotem osiagnac sie nie da. */
.ld-messy .alt {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 1.34rem;
  font-weight: 400;
}

.ld-messy .thin {
  font-weight: 500;
  font-size: 2.05rem;
}


/* Znak napisany dwa razy: pierwsze podejscie zostaje pod spodem. */
.ld-messy .over { position: relative; }

.ld-messy .over::before {
  content: attr(data-ghost);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.34;
  transform: rotate(-11deg) translate(-3px, 2px) scale(1.04);
}

/* --------- dwa znaki, ktorych nie stawia zaden krój pisma ---------
   Font, choćby najbardziej odreczny, zawsze narysuje poprawna cyfre. A tu
   potrzebny jest znak, ktory *nie rozstrzyga*, czy to piatka, czy szostka —
   bo na tym polega cala szkoda, ktora ta sekcja pokazuje. Dlatego oba znaki w
   szostym wierszu sa narysowane sciezka, a nie zlozone z fontu.

   feTurbulence rozchwiewa kreske tak, jak robi to reka prowadzaca dlugopis:
   grubosc i tor nie sa rowne na calej dlugosci. Ten sam zabieg co pod
   naglowkami sekcji, tylko o wiekszej amplitudzie. */
.ld-messy .drawn svg {
  width: 0.84em;
  height: 1.18em;
  overflow: visible;
}

/* Kreska musi miec ten sam ciezar co znaki z fontu obok. Cienszy rysunek czyta
   sie jako inna, slabsza pisownia i dwuznacznosc przestaje dzialac — sasiednia
   szostka rozstrzyga za czytelnika. */
.ld-messy .drawn path {
  fill: none;
  stroke: currentColor;
  stroke-width: 10.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#ink);
}

/* Kolko korektora siedzi w TYM SAMYM <svg> co sporny znak i w jego ukladzie
   wspolrzednych. Wczesniej bylo osobnym elementem siatki i musialo recznie
   powtarzac obrot, przesuniecie i skale cyfry — przy trzech probach ani raz
   nie trafilo. Teraz nie ma czego rozjechac: jedna transformacja rusza obydwa.
   Stoi w kodzie przed cyfra, wiec cyfra maluje sie na wierzchu i nie jest
   przecinana czerwona kreska.
   `overflow: visible` na <svg> pozwala petli wyjsc poza viewBox znaku. */
.ld-messy .drawn path.ring {
  stroke: #d63b3b;
  stroke-width: 7;
  opacity: 0.85;
}

/* Podpis stoi pod lewa kartka i tylko jej dotyczy, wiec lamie sie w szerokosci
   tej kolumny. Wysrodkowany pod calym porownaniem obiecywal, ze podsumowuje
   obie strony. */
.compare-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------ handwritten notes ------------------------ */

.scribble {
  font-family: 'Caveat', cursive;
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 16px 0 0;
  text-align: center;
}

/* Oba dopiski pisze ta sama osoba — ta, ktora sprawdza, a nie ta, ktora liczyla.
   Wczesniej lewy byl pisany „dysgraficznym" krojem, co sugerowalo, ze to uczen
   komentuje wlasny blad. Rozni je wylacznie kolor: czerwony to uwaga do pracy,
   zielony to potwierdzenie. */
.scribble-messy {
  font-weight: 700;
  color: #d63b3b;
  transform: rotate(-1.6deg);
}

.scribble-clean {
  font-weight: 700;
  color: #1f9d55;
  transform: rotate(0.8deg);
}

/* --------------------------- sticky note --------------------------- */

/* Every note on this page is written by hand — a printed sentence on a sticky
   note is neither one thing nor the other. */
.sticky {
  background: #fff6cf;
  border: 1px solid #f0e0a2;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(31, 58, 99, 0.10);
  transform: rotate(-1.1deg);
  padding: 18px 26px;
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  line-height: 1.35;
  color: #6b5410;
}

.sticky-small {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 20px;
  font-size: 1.3rem;
  transform: rotate(1.4deg);
}

/* Pinned under the screenshot it comments on. */
.step-note {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 16px 0 0;
  padding: 14px 24px;
  text-align: center;
  transform: rotate(1.3deg);
}

/* --------------------------- the trio --------------------------- */

.trio {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 3vw, 32px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.trio h3 { margin-bottom: 4px; }
.trio p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; }
.trio li { padding-left: 18px; border-left: 4px solid var(--blue-pale); }

.acc-blue   { border-left-color: var(--blue); }
.acc-yellow { border-left-color: var(--yellow); }
.acc-teal   { border-left-color: var(--teal); }

/* The recording sits under the static comparison: the panes show the contrast,
   the video shows it happening. */
/* Przycisk w hero obiecuje pietnascie sekund, wiec ma wyladowac na nagraniu,
   a nie na poczatku sekcji. Zapas spod przyklejonego paska daje teraz
   `scroll-padding-top` na `html` — wspolny dla wszystkich kotwic. */
.demo { margin: clamp(28px, 4vw, 42px) 0 0; }

/* ------------------------ przelacznik nagran ------------------------
   Dwa nagrania w jednym miejscu, przelaczane klikiem. Nie pentla i nie
   automat: przycisk w hero obiecuje pietnascie sekund, wiec material nie
   moze podmienic sie sam pod kims, kto wlasnie na niego patrzy. */
.demo-group { margin: clamp(28px, 4vw, 42px) 0 0; }
.demo-group .demo { margin-top: 12px; }

.demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.demo-tab {
  font: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.demo-tab:hover { color: var(--blue-ink); border-color: var(--blue-pale); }
.demo-tab:focus-visible { outline: 3px solid var(--blue-pale); outline-offset: 2px; }
.demo-tab.is-on { color: #fff; background: var(--blue); border-color: var(--blue); }

/* Ratio matches the encoded file, so the frame never crops or letterboxes. */
.demo video {
  width: 100%;
  aspect-ratio: 1600 / 956;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: #fff;
}

.demo figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Without this, the recording reads as someone typing at an impossible speed.
   The badge says plainly that it is not real time. */
.demo { position: relative; }

/* Sits over the empty part of the card, above where the working appears, and
   is read before anything else in the frame. No pill: a chip in the corner was
   there and nobody saw it. Just the glyph, glowing, pulsing like a
   fast-forward indicator. */
/* Reads as the player's own overlay rather than something drawn on the page:
   off-white glyph with a soft dark glow, the way a fast-forward indicator looks
   burned over a video. Amber made it a decoration on the notebook. Sits in the
   empty band between the card header (ends ~10%) and the working (starts ~26%). */
.demo-speed {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  pointer-events: none;
  /* Three tight passes of the same radius build an even outline that hugs the
     glyphs. One wide blur was doing the opposite: a haze that pooled where the
     shapes were thick and thinned out at the points. */
  filter:
    drop-shadow(0 0 1.5px rgba(28, 36, 50, 0.55))
    drop-shadow(0 0 3px rgba(28, 36, 50, 0.3));
  animation: speed-blink 0.95s ease-in-out infinite;
}

.demo-speed svg { width: 1em; height: 1em; }

@keyframes speed-blink {
  0%, 100% { opacity: 1; }
  46%      { opacity: 0.12; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-speed { animation: none; opacity: 1; transform: translateX(-50%); }
}

.shot {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* The settings screen scrolls, so the capture ends mid-card. A hard edge reads
   as a broken image; fading it out reads as a list that continues — which is
   what is actually true. */
.shot-fade {
  border: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}

.band-foot {
  margin: clamp(22px, 3vw, 30px) auto 0;
  max-width: 54ch;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Two classes, so this wins over .band-foot's body-copy size. Handwriting at
   0.95rem is unreadable — it needs the same size as the other notes. */
/* max-content, so the note hugs the two lines it was written for instead of
   rewrapping them into three. */
.band-foot.sticky {
  font-size: 1.55rem;
  line-height: 1.45;
  padding: 22px 38px;
  width: max-content;
  max-width: 100%;
}

/* The app icon rather than a mascot: this is the last thing seen before the
   store, and it is what the person will be looking for there. */
.get-icon {
  width: 82px;
  height: 82px;
  border-radius: 20px;
  margin: 0 auto 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

/* --------------------------- the catch --------------------------- */
/* The first question a parent asks about a free app for children is
   what the developer gets out of it. Answering it early, in its own
   band, is worth more than a longer feature list. */

.catch { background: var(--blue-pale); }
.catch-inner { max-width: 68ch; margin-inline: auto; text-align: center; }
.catch-inner .prose { margin-inline: auto; }

/* --------------------- difficult handwriting --------------------- */
/* Sat as bare text in the middle of a white band and read as an
   afterthought. Boxed, it holds its own next to the sections around it. */

/* Aligned with every other section rather than boxed. The blue bar it used to
   carry sat right next to the pink margin rule and read as a second, competing
   margin. */
.writing-inner { max-width: 64ch; }
/* W ukladzie dwukolumnowym kolumna sama ogranicza szerokosc, wiec 64ch
   tylko zwezaloby tekst po raz drugi. */
.split > .writing-inner { max-width: none; }

/* ---------------------------- steps ---------------------------- */

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }

/* Text above, screenshot below. Side by side, the short caption left half the
   card empty while the screenshot was squeezed into the other half. */
.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(22px, 3vw, 32px);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 6px 18px;
  align-items: center;
}

.step-no {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue-pale);
  color: var(--blue-ink);
  font-weight: 900;
  display: grid;
  place-items: center;
}

.step-text p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; }

.step img {
  grid-column: 1 / -1;
  width: min(100%, 880px);
  margin: 18px auto 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* --------------------------- tick list --------------------------- */

.tick-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }

.tick-list li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-light);
}

/* ------------------------ parents & teachers ------------------------ */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}

.policy-links a { color: var(--blue-ink); font-weight: 800; text-decoration: none; }
.policy-links a:hover { text-decoration: underline; }



/* Obraz na cala szerokosc pasa — klawiatura i pasek rozmiarow tekstu sa
   szerokie i w polowie kolumny bylyby nieczytelne. */
.shot-wide { margin-top: clamp(24px, 3vw, 34px); }

/* Klawiatura nie potrzebuje calej szerokosci szkieletu — przy 760 px czyta sie
   jako fragment interfejsu, a nie jako drugi baner. */
.shot-mid {
  display: block;
  max-width: 760px;
  margin: clamp(24px, 3vw, 34px) auto 0;
}

/* Klawisze wzorow w karcie obok tekstu: maly dowod rzeczowy, nie ilustracja. */
.tpl-shot {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
}

.trio-2 { grid-template-columns: repeat(2, 1fr); }

/* Ekran ustawien z karteczkami przyklejonymi na wierzchu — kazda wskazuje
   to, co widac pod nia. */
.settings-shot { position: relative; margin-top: clamp(24px, 3vw, 34px); }
/* Podpis pod zrzutem: mowi wprost, ze ekran jest dluzszy niz kadr. */
.shot-note { margin: 12px 0 0; font-size: 0.9rem; color: var(--muted); text-align: center; }

.pin {
  position: absolute;
  padding: 9px 16px;
  font-size: 1.05rem;
  white-space: nowrap;
  z-index: 2;
}

/* Wszystkie trzy na jednej osi po prawej i wysuniete poza krawedz zrzutu —
   dzieki temu od razu widac, ze to komentarz doklejony do ekranu, a nie
   element aplikacji. Wczesniej kazda wisiala gdzie indziej i druga ladowala
   w srodku ekranu, gdzie wygladala na czesc interfejsu. */
/* Kazda szpilka wisi tuz nad gorna krawedzia swojej karty, w tej samej
   odleglosci od niej — inaczej trzy dopiski czytaja sie jak rozsypane.
   Punktem odniesienia jest srodkowa: 42% przy karcie zaczynajacej sie
   na 46,8%, czyli 4,8 punktu procentowego wyzej. Pozostale dwie licza
   sie tak samo od 20,4% i 72,7%. Przy nowym zrzucie trzeba te trzy
   liczby wyznaczyc od nowa. */
.pin-1 { top: 15.5%; right: -18px; transform: rotate(2.2deg); }
.pin-2 { top: 42%;   right: -18px; transform: rotate(-1.8deg); }
.pin-3 { top: 69%;   right: -18px; transform: rotate(1.6deg); }

@media (max-width: 900px) {
  .trio-2 { grid-template-columns: 1fr; }
  .pin { position: static; display: inline-block; margin: 8px 8px 0 0; transform: none; }
  .settings-shot { display: flex; flex-direction: column; }
}

/* --------------------------- dane kontaktowe ---------------------------
   Adres nie stoi w HTML-u — pobiera go skrypt po kliknieciu. Te same style
   obsluguja sekcje Contact na witrynie i blok administratora w polityce. */

.contact-reveal { margin: 22px 0 20px; }

.contact-reveal-button {
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.contact-reveal-button:hover { background: var(--blue-light); }
.contact-reveal-button[disabled] { opacity: 0.6; cursor: default; }

/* Atrybut hidden ukrywa przez display:none z arkusza przegladarki, a kazda
   wlasna regula display go pokonuje. Bez tej linii puste pole na adres wisialo
   pod przyciskiem od wejscia na strone. */
[hidden] { display: none !important; }

.contact-reveal-output {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.contact-label { min-width: 58px; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); }
.contact-value { font-weight: 800; color: var(--navy); }
a.contact-value { color: var(--blue-ink); text-decoration: none; }
a.contact-value:hover { text-decoration: underline; }

.contact-copy {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
}

.contact-note { font-size: 0.9rem; }


/* Sekcja kontaktu jest krotka i nie ma przy niej obrazu. Wysrodkowana czyta
   sie jako celowa, a nie jako kolumna, ktorej zabraklo sasiada. */
.contact-inner { max-width: 62ch; margin-inline: auto; text-align: center; }
.contact-inner .prose { margin-inline: auto; }
.contact-inner .prose + .prose { margin-top: -6px; }
.contact-inner .band-head h2::after,
.contact-inner h2::after { margin-inline: auto; }
.contact-inner .contact-reveal-output { text-align: left; justify-items: center; }
.contact-inner .contact-line { justify-content: center; }

/* ----------------------------- get it ----------------------------- */

.get { background: linear-gradient(135deg, var(--navy), #24406f); }
.get-inner { text-align: center; max-width: 60ch; margin-inline: auto; }
.get h2 { color: #fff; }
.get .lead { color: #c6d6f2; }
.get .cta-row { justify-content: center; margin-top: 22px; }
.get-note { margin-top: 16px; font-size: 0.85rem; color: #9fb6dd; }


/* Kod QR prowadzi pod docelowy adres w Google Play — ten sam, ktory zadziala
   w dniu publikacji. Znacznik "wkrotce" stoi obok, zeby nikt nie skanowal
   przedwczesnie. */
.store-row { display: flex; justify-content: center; margin-top: 24px; }

.store-qr {
  margin: 0;
  padding: 16px 16px 12px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.store-qr img { width: 160px; height: 160px; border-radius: 6px; }

.store-qr figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink-soft);
  line-height: 1.7;
}

.store-qr .soon { color: var(--muted); font-size: 0.8rem; }
.store-qr .soon::before { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(245, 168, 0, 0.18); }


/* Kafelek App Store bez logo Apple: ich znaki maja scisle wytyczne, a
   odrysowana podrobka jest gorsza niz jej brak. Prawdziwy badge pobiera sie
   z zasobow Apple przy zglaszaniu aplikacji. */
.store-row { gap: 18px; align-items: stretch; flex-wrap: wrap; }

.store-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 192px;
  border-radius: 18px;
  border: 2px dashed rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #9fb6dd;
  text-align: center;
}

.store-soon-name { font-size: 1rem; font-weight: 900; color: #c6d6f2; }

.store-soon-tag {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

/* ---------------------------- footer ---------------------------- */

.site-footer { background: var(--navy); color: #a9c0e4; padding: 30px 0; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
.footer-links { margin: 0; font-size: 0.86rem; }
.footer-links a { color: #cfe0f8; font-weight: 700; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-copy { margin: 0; font-size: 0.8rem; color: #8ba2c9; }

/* ----------------------------- reveal ----------------------------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------- responsive --------------------------- */

@media (max-width: 900px) {
  .hero-inner,
  .split,
  .duo,

  .compare { grid-template-columns: 1fr; }
  .pane-messy, .pane-clean { transform: none; }
  .ld { grid-template-columns: repeat(6, 36px); grid-auto-rows: 36px; background-size: 36px 36px; font-size: 1.25rem; }
  .ld-messy span { font-size: 1.6rem; }
  .paper .shell::before { display: none; }

  .trio { grid-template-columns: 1fr; }

  .step { grid-template-columns: 40px minmax(0, 1fr); }

  .nav-toggle { display: block; }

  .main-nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
  }

  .main-nav.open { display: flex; }
  .main-nav a { padding: 10px 0; }
  .btn-header { display: none; }
}

@media (max-width: 620px) {
  .shell { width: calc(100% - 32px); }
  .langbar-inner { justify-content: flex-start; }
  .langbar a { padding: 5px 8px; gap: 5px; font-size: 0.74rem; }
  .footer-inner { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- */
/* Promocja: pasek na gorze i karta w sekcji powitalnej               */
/* Oba znikaja same po 30 listopada 2026 — patrz js/main.js           */
/* ---------------------------------------------------------------- */

.promo-strip {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(90deg, #ffd875, var(--yellow) 55%, #eb9c00);
  color: #3d2a00;
  box-shadow: 0 2px 10px rgba(61, 42, 0, 0.18);
}
.promo-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 6px 20px; padding: 11px 0;
}
.promo-text { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.promo-spark { margin-right: 7px; color: #8a5c00; }
.promo-text strong { font-weight: 800; }
.promo-mid { color: #6b4a05; }
.promo-left {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  background: rgba(255, 255, 255, 0.55); border-radius: 999px;
  font-size: 0.86rem; font-weight: 700; color: #5a3d00;
}
.promo-count { font-variant-numeric: tabular-nums; }
.promo-cta {
  color: #3d2a00; font-weight: 800; font-size: 0.9rem; text-decoration: none;
  background: rgba(255, 255, 255, 0.72); border-radius: 999px;
  padding: 7px 17px; white-space: nowrap; transition: background 0.15s ease;
}
.promo-cta:hover { background: #fff; }

/* nagłówek przykleja się pod paskiem; wysokość mierzy skrypt */
.site-header { top: var(--promo-h, 0px); }

/* ---- wstążka „100% za darmo" na zdjęciu w sekcji powitalnej ---- */

.hero-media { position: relative; }
.hero-ribbon {
  position: absolute; top: -16px; right: -12px; z-index: 3;
  display: block; transform: rotate(6deg);
  background: linear-gradient(135deg, #ffd875, var(--yellow) 60%, #eb9c00);
  color: #3d2a00; border-radius: 12px;
  padding: 11px 18px 10px;
  box-shadow: 0 8px 22px rgba(61, 42, 0, 0.28);
  text-align: center; max-width: 250px;
}
.hero-ribbon b {
  display: block; font-size: 1.12rem; font-weight: 800; letter-spacing: 0.02em;
  line-height: 1.1;
}
.hero-ribbon i {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 0.76rem; font-weight: 600; color: #6b4a05; line-height: 1.3;
}

@media (max-width: 900px) {
  .hero-ribbon { top: -12px; right: -6px; padding: 9px 14px 8px; max-width: 210px; }
  .hero-ribbon b { font-size: 1rem; }
  .hero-ribbon i { font-size: 0.72rem; }
}

@media (max-width: 760px) {
  .promo-mid, .promo-spark { display: none; }
  .promo-text { font-size: 0.88rem; }
  .promo-cta { font-size: 0.83rem; padding: 6px 13px; }
}

/* ---- cennik ---- */


.pricing { background: var(--bg-alt); }
.pricing .band-head { max-width: 68ch; margin-inline: auto; text-align: center; }
.pricing .band-head h2::after { margin-inline: auto; }
.pricing .plan-row, .pricing .pricing-free { margin-inline: auto; }
.pricing .pricing-ref, .pricing .pricing-note { margin-inline: auto; text-align: center; }
/* Kafelki ceny byly rozciagniete na 720 px na dwie krotkie kwoty — pol
   karty zajmowalo puste tlo po prawej stronie liczby. Teraz maja tyle,
   ile potrzebuje najdluzsza z nich, i stoja na srodku razem z reszta
   sekcji. */
.plan-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 250px));
  gap: 18px; max-width: 560px; margin-inline: auto; justify-content: center;
}
.plan {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 24px 24px; box-shadow: var(--shadow-soft);
}
.plan-featured { border-color: var(--blue); box-shadow: var(--shadow); }
.plan h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--ink); }
.plan-price {
  margin: 0; font-size: clamp(1.9rem, 4vw, 2.3rem); font-weight: 800;
  color: var(--ink); line-height: 1.1; letter-spacing: -0.02em;
}
.plan-per { margin: 4px 0 0; font-size: 0.92rem; color: var(--muted); }
.plan-star { color: var(--yellow); font-weight: 800; }
.pricing-foot {
  margin: 16px auto 0; max-width: 62ch; text-align: center;
  font-size: 0.86rem; color: var(--muted);
}
.plan-trial {
  margin: 14px 0 0; font-size: 0.95rem; font-weight: 700; color: var(--teal-ink);
}
.plan-badge {
  position: absolute; top: -11px; right: 20px;
  background: var(--yellow); color: #3a2800;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
}
.pricing-ref {
  margin: 18px 0 0; max-width: 72ch; font-size: 0.92rem; color: var(--muted);
}
.pricing-free {
  margin: 28px 0 0; background: var(--blue-pale);
  border-radius: var(--radius); padding: 22px 24px 18px; max-width: 720px;
}
.pricing-free h3 { margin: 0 0 10px; font-size: 1rem; color: var(--ink); }
.pricing-free ul { margin: 0; padding-left: 20px; }
.pricing-free li:last-child { padding-bottom: 0; }
.pricing-free li { font-size: 0.95rem; line-height: 1.7; color: var(--ink-soft); }
.pricing-free-note {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #ccdcf3;
  font-size: 0.92rem; color: var(--muted);
}
.pricing-note {
  margin: 18px 0 0; max-width: 72ch; font-size: 0.88rem; color: var(--muted);
}
/* ---- „Nikt nie zostaje bez zeszytu" — trzy drogi bezpłatnego dostępu ---- */
/* Zasada redakcyjna: nazywamy zasadę, nie ludzi. Żadne zdanie tutaj nie każe */
/* czytelnikowi rozpoznać się jako ktoś, kogo na coś nie stać.                */

.access {
  margin: 34px auto 0; max-width: 900px; text-align: center;
  background: linear-gradient(180deg, #f2fbf8, #eaf6f3);
  border: 1px solid #bfe3d8; border-radius: var(--radius);
  padding: 30px 28px 26px;
}
.access h3 { margin: 0 0 8px; font-size: 1.35rem; color: var(--ink); }
.access-lead {
  margin: 0 auto 24px; max-width: 62ch;
  font-size: 0.98rem; line-height: 1.6; color: var(--ink-soft);
}
.access-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; text-align: left;
}
.access-card {
  background: #fff; border: 1px solid #cfe8e0; border-radius: 14px;
  padding: 18px 18px 16px;
}
.access-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: #dff2ec; color: var(--teal-ink); margin-bottom: 11px;
}
.access-icon svg { width: 25px; height: 25px; display: block; }
.access-card h4 { margin: 0 0 6px; font-size: 1rem; color: var(--ink); }
.access-card p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 620px) {
  .access { padding: 24px 20px 22px; }
}

@media (max-width: 620px) {
  .promo-inner { padding: 10px 0; }
  .promo-text { font-size: 0.88rem; }
  .promo-cta { font-size: 0.84rem; padding: 6px 13px; }
}

/* Odnosnik do pelnych warunkow dla rodzica (/rodzic). Wyglada jak notka
   pod cennikiem, ale musi byc klikalny na pierwszy rzut oka. */
/* Odnosnik do pelnych warunkow to jedyne wyjscie ze strony w tej sekcji
   i rodzic go szuka — 0,88 rem robilo z niego przypis. */
.pricing-terms {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--blue-ink);
  font-weight: 700;
  text-decoration: none;
}
.pricing-terms:hover { text-decoration: underline; }

/* -------------------- mapa panelu matematycznego --------------------
   Osiem sekcji w tej samej kolejnosci, w jakiej stoja na zdjeciu wyzej.
   Naglowki sa wersalikami, bo dokladnie tak sa podpisane na panelu —
   czytelnik ma je znalezc wzrokiem, a nie odgadywac. */
.panel-map {
  list-style: none;
  padding: 0;
  margin: clamp(26px, 3.4vw, 38px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  /* Bez tego krotszy opis ciagnie swoja kreske do dolu calego rzedu
     i prowadzi ja wzdluz pustki. */
  align-items: start;
}

.panel-map li { padding-left: 18px; border-left: 4px solid var(--blue-pale); }
/* Akcenty musza stac po regule ogolnej, inaczej .acc-* przegrywa kolejnoscia. */
.panel-map .acc-blue   { border-left-color: var(--blue); }
.panel-map .acc-yellow { border-left-color: var(--yellow); }
.panel-map .acc-teal   { border-left-color: var(--teal); }

.panel-map h3 {
  margin: 0 0 7px;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
}

.panel-map p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.6; }
.panel-map a {
  display: block;
  margin-top: 9px;
  color: var(--blue-ink);
  font-weight: 700;
  text-decoration: none;
}
.panel-map a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .panel-map { grid-template-columns: 1fr; }
}

/* Druga polowa naglowka lamie sie w calosci, a nie w przypadkowym miejscu:
   „Panel matematyczny, / nie klawiatura numeryczna" zamiast „...nie /
   klawiatura numeryczna". Na waskim ekranie inline-block dalej zawija
   tekst w srodku, wiec nic nie wystaje poza szerokosc. */
.title-part { display: inline-block; }

/* ---------------- sekcja o dysgrafii, bez drugiej kolumny ----------------
   Grafika z rozmiarami tekstu wyleciala, wiec kolumna tekstu staje na
   srodku pasma. Inaczej prawa polowa czyta sie jak obrazek, ktory sie nie
   wczytal, a nie jak oddech. Notka o tytule kartki zamyka sekcje jako
   karteczka — wczesniej dyndala pod akapitami bez zadnego oparcia. */
/* Kolumna jest szersza niz domyslne 64ch: po wyjeciu grafiki tekstu jest
   sporo, a waski lam robil z sekcji ciasny slup. .prose ma wlasne 60ch,
   wiec bez drugiej reguly akapity nadal lamalyby sie po staremu. */
.writing-inner { max-width: 78ch; margin-inline: auto; }
.writing-inner .prose { max-width: none; }

.writing-note {
  display: block;
  width: max-content;
  max-width: min(100%, 68ch);
  margin: clamp(26px, 3vw, 34px) auto 0;
  font-size: 1.25rem;
  transform: rotate(1.2deg);
}


/* ================= sekcja powitalna: oferta i kadr =================
   Naklejka zostaje na zdjęciu, bo promocja ma być wydarzeniem
   wizualnym, a nie akapitem. Zmieniła się hierarchia: cena jest
   duża, termin średni, a zapewnienie („bez karty i bez konta")
   drobne pod kreską — bo dopiero ono zdejmuje lęk przed pułapką.
   ================================================================= */

.hero-ribbon {
  top: -18px; right: -14px;
  padding: 14px 20px 12px;
  max-width: 236px;
  border-radius: 14px;
  transform: rotate(5deg);
}
.hero-ribbon b { font-size: 1.62rem; font-weight: 900; letter-spacing: 0.01em; line-height: 1; }
.hero-ribbon .until {
  display: block; margin-top: 2px;
  font-size: 0.94rem; font-weight: 800; color: #5a3d00;
}
.hero-ribbon i {
  display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(107, 74, 5, 0.28);
  font-style: normal; font-size: 0.74rem; font-weight: 700;
  color: #6b4a05; line-height: 1.35;
}

@media (max-width: 900px) {
  .hero-ribbon { top: -12px; right: -6px; padding: 11px 15px 10px; max-width: 198px; }
  .hero-ribbon b { font-size: 1.3rem; }
  .hero-ribbon .until { font-size: 0.85rem; }
}



/* Wymóg sprzętowy stoi pod zdjęciem sprzętu, a nie w kolumnie tekstu:
   tam był kolejnym akapitem do przeczytania, tutaj jest podpisem do
   tego, na co ktoś i tak patrzy. Większość rodziców wchodzi z telefonu,
   więc ta informacja musi paść nad foldem — po instalacji jest za późno. */
.hero-media { margin: 0; }
.hero-cap {
  margin-top: 10px;
  font-size: 0.82rem; font-weight: 700; color: var(--muted);
  text-align: right;
}

/* Cztery chipy mają zmieścić się w jednym rzędzie — rząd, który się
   łamie, przestaje wyglądać jak lista cech, a zaczyna jak akapit. */
.hero-text .chips { gap: 7px; }
.hero-text .chips li { padding: 6px 12px; }

/* Przycisk „nagranie, 15 sekund" stoi wylacznie w pasku nagłówka.
   Przez chwile byl w obu miejscach naraz, wiec nad foldem stały dwa
   identyczne wezwania — i ukryłem wtedy ten w pasku, co było
   rozwiazaniem od zlej strony: pasek jest przyklejony i towarzyszy
   czytelnikowi przez cala strone, a ten w sekcji powitalnej zabieral
   miejsce i znikal po pierwszym przewinieciu. Zostal ten, ktory jest
   pod reka zawsze.

/* Chip ceny wyróżniony: rząd chipów jest skanowany, nie czytany,
   więc to jedyne miejsce, gdzie odpowiedź na „ile" pada bez czytania.
   Klasę dokłada skrypt na czas promocji; po terminie chip wraca do
   napisu z HTML („30 dni za darmo") i traci wyróżnienie. */
.chips .chip-promo {
  background: linear-gradient(180deg, #fff3d6, #ffe9b8);
  border-color: #f0d9a4;
  color: #5a3d00;
}

/* Kolumna tekstowa niesie teraz o dwa akapity więcej niż wcześniej,
   więc podział 0.82/1.18 łamał nagłówek po dwóch słowach. Zdjęcie
   po kadrowaniu jest węższe, więc może oddać trochę miejsca. */
@media (min-width: 901px) {
  .hero-inner { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}


/* ---- podpis pod kodem QR ----
   Sam sklep, bez zapowiedzi. Strona rusza razem z publikacja w Play,
   wiec „wkrotce" zestarzaloby sie w dniu startu, a taki napis na zywej
   stronie czyta sie jak porzucony projekt.

   Nazwa sklepu stoi wyzej i mocniej niz instrukcja, bo to ona jest
   celem — „zeskanuj i pobierz" tylko ja obsluguje. Kolor bierze sie
   z palety ciemnego tla tylko tam, gdzie tlo jest ciemne: ten podpis
   siedzi na bialej karcie, wiec `.soon-light` byloby tu nieczytelne. */
.store-qr .store-name {
  display: block;
  margin-bottom: 1px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.store-qr figcaption { color: var(--muted); font-weight: 700; }


/* ============ porownanie dzielenia na telefonie: przelacznik ============
   Na szerokim ekranie obie kartki stoja obok siebie i wszystko dziala.
   Ponizej 900 px kolumny skladaja sie jedna pod druga i teza sekcji —
   „to samo dzielenie, dwa razy" — przestaje byc jednym spojrzeniem,
   a staje sie czterema sekundami przewijania. Rodzic oglada te strone
   glownie na telefonie, wiec sekcja nosna calej strony nie dziala
   u wiekszosci odbiorcow.

   Rozwiazaniem jest podmiana zapisu w tym samym miejscu. Mozg porownuje
   dwa stany jednego miejsca lepiej niz dwa obiekty obok siebie, wiec na
   telefonie ten uklad jest nawet mocniejszy niz desktopowy: roznica
   pojawia sie jako ZMIANA, a nie jako druga kartka.

   Cala mechanika jest wylaczona powyzej 900 px: przelacznik i podpowiedz
   maja `display:none`, a klasa `.is-off` nic tam nie znaczy. Dzieki temu
   skrypt moze przestawiac klase bez ogladania sie na szerokosc okna —
   przy zmianie rozmiaru albo obrocie tabletu nie ma czego naprawiac.
   ======================================================================= */

.cmp-switch,
.cmp-hint { display: none; }

@media (max-width: 900px) {
  .cmp-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    max-width: 420px;
    margin: 0 auto 16px;
    padding: 4px;
    background: #eef3fb;
    border: 1px solid var(--border);
    border-radius: 999px;
  }

  .cmp-switch button {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 11px 8px;
    border-radius: 999px;
    font: 800 0.92rem/1 'Nunito', system-ui, -apple-system, sans-serif;
    color: var(--muted);
    transition: background 0.18s ease, color 0.18s ease;
  }

  .cmp-switch button[aria-pressed="true"] {
    background: #fff;
    color: var(--navy);
    box-shadow: var(--shadow-soft);
  }

  .cmp-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

  /* Kartka, ktorej teraz nie widac. Tylko tutaj — na szerokim ekranie
     obie stoja obok siebie niezaleznie od stanu przelacznika. */
  .compare .pane.is-off { display: none; }

  /* Naglowek kartki powtarzalby napis z przelacznika czterdziesci
     pikseli wyzej. Na szerokim ekranie jest niezbedny, bo tam nic
     innego nie mowi, ktora kartka jest ktora. */
  .compare .pane-label { display: none; }

  /* Bez tego zdania ktos, kto nie dotknie przelacznika, wychodzi z sekcji
     z sama kartka z bledem i nie poznaje puenty. */
  .cmp-hint {
    display: block;
    margin: 14px 0 0;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--muted);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .compare .pane { animation: cmpIn 0.22s ease both; }
}

@keyframes cmpIn { from { opacity: 0; transform: translateY(6px); } }


/* ================= „Kiedy to sie przydaje" =================
   Sekcja odpowiada na jedyne pytanie, ktore rodzic zadaje przed
   wszystkimi innymi: czy to jest o moim dziecku. Wczesniej padalo
   ono dopiero w polowie strony, w sekcji o dysgrafii — a odbiorca
   nie rozpoznaje siebie w nazwie zaburzenia, tylko w sytuacji.

   Stad forma: piec zdan, zadnego obrazka, zadnej prozy. Kazde
   zaczyna sie od tego, co widac przy stole, a nie od tego, co
   robi aplikacja. Zdanie o odbiorcy stoi na koncu, bo nazwa
   diagnozy ma potwierdzac rozpoznanie, a nie je zastepowac.
   ========================================================== */

/* Przeplyw kolumnowy, nie wierszowy: lewa kolumna niesie punkty 1-3,
   prawa 4-5. Przy ukladzie wierszowym oko skacze lewo-prawo-lewo, a to
   ma sie czytac jak lista, ktora sie przebiega wzrokiem w dwie sekundy. */
/* ================= „Kiedy to sie przydaje" =================
   Lista sytuacji i wniosek z niej. Domyslnie jedna kolumna — dwie
   wlaczaja sie dopiero od 1150 px, bo wtedy dopiero starcza miejsca
   na jedno i drugie.

   RYNNA. Kreska miedzy kolumnami ma stac dokladnie w polowie odstepu
   liczonego OD OSTATNIEJ LITERY listy, a nie od krawedzi jej pudelka.
   Dlatego lewa kolumna ma szerokosc `max-content`: dostaje dokladnie
   tyle, ile potrzebuje najdluzsze zdanie, wiec tekst dobiega do jej
   krawedzi i rynna wychodzi symetryczna sama z siebie, bez strojenia.

   Wczesniej kolumna byla ulamkowa (1fr, 1.1fr) i zostawal w niej luz
   70 px — od pudelka wychodzila rownosc, od litery juz nie, a kazda
   zmiana szerokosci okna przesuwala miejsce zlamania wiersza i psula
   ustawienie na nowo. `max-content` usuwa zrodlo problemu zamiast go
   kompensowac: odstep siatki i wciecie prawej kolumny sa rowne (40 px)
   i taka sama zostaje odleglosc po obu stronach linii.

   Przy zmianie tekstow trzeba sprawdzic, czy najdluzsze zdanie nadal
   miesci sie w jednym wierszu we wszystkich pieciu jezykach — to ono
   wyznacza szerokosc kolumny. Najdluzsze sa angielski i francuski.
   ========================================================== */

.cases-wrap { display: grid; }

.cases {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cases li {
  position: relative;
  padding-left: 26px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Kreska zamiast kropki: to nie jest lista cech produktu, tylko zbior
   sytuacji — mysllnik czyta sie jak wyliczenie z rozmowy. */
.cases li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
}

/* Uklad jednokolumnowy: wniosek pod lista, oddzielony pozioma kreska
   przez cala szerokosc — tam nie ma czego porownywac. */
.cases-side {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.cases-who {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--navy);
}

.cases-shortcut {
  margin: 14px 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .cases li,
  .cases-who,
  .cases-shortcut { font-size: 0.98rem; }
}

@media (min-width: 1150px) {
  .cases-wrap {
    grid-template-columns: max-content 1fr;
    gap: 40px;
    align-items: start;
  }
  .cases-side {
    margin-top: 0;
    padding: 0 0 0 40px;
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}

#grown-ups .access { margin-top: clamp(28px, 4vw, 44px); }

/* Kolumna tekstu w sekcji powitalnej jest teraz krotsza od zdjecia —
   bez przycisku i bez panelu oferty konczy sie na chipach. Przy pelnym
   odstepie sekcji ponizej otwierala sie pod nia dziura na dwiescie
   pikseli i „Kiedy to sie przydaje" wygladalo, jakby zaczynalo osobna
   strone. Domykamy hero od dolu i podciagamy sekcje odpowiedzi. */
/* Gora sekcji powitalnej: pasek nawigacji ma wlasna kreske pod soba,
   wiec granica jest juz zaznaczona i nie potrzebuje 76 px oddechu.
   Rowna sie teraz odstepowi miedzy sekcjami. */
.hero { padding-top: clamp(18px, 2vw, 24px); padding-bottom: clamp(18px, 2vw, 20px); }


/* Ostatni element w sekcji nie moze dokladac wlasnego marginesu do
   odstepu sekcji — inaczej przerwy przestaja byc rowne mimo tych samych
   paddingow. Chipy w hero mialy 24 px pod soba (zostaly po przycisku,
   ktory tam kiedys stal), a ostatni akapit w „Napisz do nas" 14 px. */
.hero-text .chips { margin-bottom: 0; }
.contact-inner p:last-child { margin-bottom: 0; }

/* ---- „Jesli to ty decydujesz": jedna lista, nie dwie karty ----
   Byly tu dwie kolumny: dla rodzicow i dla nauczycieli. Nauczyciel
   niczego nie kupuje i niczego nie decyduje — nie jest odbiorca tej
   sekcji. To, co z jego strony ma znaczenie DLA RODZICA (odczyta prace
   i nie obnizy oceny za pismo), zostalo jednym punktem na liscie. */
.parent-list {
  max-width: 860px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-soft);
}

.parent-list .tick-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 34px;
  margin: 0;
}

@media (max-width: 760px) {
  .parent-list { padding: 22px 20px; }
  .parent-list .tick-list { grid-template-columns: 1fr; }
}

/* ---- „Bez abonamentu nadal mozesz" ----
   Trzy krotkie punkty w jednej kolumnie zostawialy pol pudelka puste.
   Ida teraz w trzy kolumny i wypelniaja szerokosc, ktora i tak zajmuja. */
.pricing-free { max-width: none; padding: 22px 26px 20px; }

.pricing-free ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-free li {
  position: relative;
  padding-left: 22px;
  line-height: 1.55;
}

.pricing-free li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

@media (max-width: 760px) {
  .pricing-free ul { grid-template-columns: 1fr; gap: 8px; }
}

/* Sekcja konczy sie po lewej problemem — „oddaje prace i slyszy, ze nie da
   sie jej sprawdzic". To zdanie jest jego rozwiazaniem i musi stac po
   prawej, bo inaczej czytelnik wychodzi z sekcji z samym lekiem. Pelny
   opis warunkow jest na stronie dla rodzica; tu wystarczy jedno zdanie,
   dlatego wyroznia sie kolorem, a nie wielkoscia. */
.cases-answer {
  margin: 14px 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 800;
  color: var(--teal-ink);
}

@media (max-width: 760px) {
  .cases-answer { font-size: 0.98rem; }
}

/* ---- nagrania w kroku drugim ----
   Statyczny zrzut edytora pokazywal to samo co nagrania, tylko bez ruchu —
   a caly sens tego kroku, czyli moment ladowania pustego szablonu na kartce,
   widac wylacznie w ruchu. Zrzut ustapil miejsca `#demo`.

   Krok jest siatka `48px | 1fr`, wiec grupa nagran musi rozpiac sie na obie
   kolumny dokladnie tak, jak robil to `img` — inaczej wpada w waska kolumne
   obok numeru kroku i odtwarzacz schodzi do stu pikselow szerokosci. */
.step .demo-group {
  grid-column: 1 / -1;
  width: min(100%, 880px);
  margin: 18px auto 0;
}

/* Podpis pod nagraniem i zakladki maja te sama szerokosc co odtwarzacz. */
.step .demo-tabs { justify-content: center; }