/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * Hallmark · genre: modern-minimal (dialekt NGP) · macrostructure: Stat-Led
 * H4 Stat-led knobs: number=tabular display (szeryf), qualifier=below, secondary stats=three (księga w arkuszu)
 * theme: custom · vibe: "papier, atrament, oliwka - marka aplikacji NAMIAR"
 * paper: oklch(97.6% 0.006 95) · accent: oklch(46% 0.085 132) · display: Newsreader · body: Switzer
 * axes: light / roman-serif / chromatic-other (oliwka) · nav: N5 floating pill (wspólny wzór serwisu) · footer: statement
 * enrichment: arkusz miesiąca - 945 rombów na canvasie (Tier A, rysowane w namiar.js), bez zdjęć
 * contrast: pass (40-41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 50-57)
 * świadomie przeniesione z systemu serwisu: przycisk .btn (uniesienie + cień przy najechaniu) i pasek N5
 * ----------------------------------------------------------------------
 * NAMIAR - podstrona produktu (/namiar/). Tokeny globalne linkowane WCZEŚNIEJ.
 * Ta strona NIE linkuje style.css strony głównej - jest samowystarczalna, tak jak
 * autoshow-prezentacja: własne komponenty na wspólnych tokenach, własna marka
 * (znak, oliwka, papier i atrament - z aplikacji namiar.nextgenpartner.pl).
 */

/* =====================================================================
   Marka NAMIAR. Wartości przeliczone z tokens.css APLIKACJI (tam są w OKLCH,
   tu w hex, jak w całym serwisie). Przy zmianie palety w aplikacji przelicz
   je od nowa, nie dobieraj na oko.
   Oliwka jako tekst: na papierze --namiar-deep (kontrast 9:1), --namiar od 18 px
   w górę (6,4:1). Na atramencie: --namiar-light (10:1).
   ===================================================================== */
:root {
  --namiar:         #46622d;   /* oklch(46% 0.085 132) - akcent aplikacji */
  --namiar-deep:    #324b1a;   /* oklch(38% 0.080 132) - tekst w akcencie, wciśnięcie */
  --namiar-bright:  #57773b;   /* oklch(53% 0.095 132) - najazd */
  --namiar-light:   #b2d08d;   /* oklch(82% 0.095 128) - akcent na atramencie */
  --namiar-lighter: #c6ddab;   /* oklch(87% 0.080 128) - najazd na atramencie */
  --namiar-wash:    #e6f1de;   /* oklch(94.5% 0.028 132) - tło wyróżnienia */
  --namiar-line:    #acbf9e;   /* oklch(78% 0.050 132) - obrys akcentu */

  /* Romby arkusza miesiąca (czyta je namiar.js) */
  --mark-new:       var(--namiar);
  --mark-r1:        #789363;   /* oklch(63% 0.075 132) - przypomnienie 1 */
  --mark-r2:        #a9bc97;   /* oklch(77% 0.055 130) - przypomnienie 2 */
  --mark-off:       #dfdcd4;   /* oklch(89.5% 0.012 95) - zgaszony */

  /* Papier i atrament: podmiana tokenów serwisu TYLKO na tej stronie */
  --paper:           #f8f7f3;  /* oklch(97.6% 0.006 95) - arkusz */
  --paper-raised:    #fdfcf9;  /* oklch(99.2% 0.004 95) - kartka na wierzchu */
  --paper-sunken:    #edeae1;  /* oklch(93.8% 0.013 92) - blat */
  --mist:            var(--paper);
  --white:           var(--paper-raised);   /* tekst na oliwce: papier, nie czysta biel */
  --carbon:          #1b1811;  /* oklch(21% 0.014 90) - atrament */
  --carbon-hi:       #27241b;  /* oklch(26% 0.016 90) - powierzchnia na atramencie */
  --ink:             var(--carbon);
  --ink-2:           #302e26;
  --ink-soft:        #45423b;  /* tekst akapitowy (9,3:1 na papierze) */
  --slate:           #5d5b53;  /* tekst drugiego rzędu (6,3:1) */
  --slate-2:         #88867e;  /* tylko znaki nietekstowe */
  --hairline:        #d3d1c8;
  --hairline-strong: #b4b1a7;
  --on-dark:         #f0eee9;
  --on-dark-dim:     #b3b1a9;
  --on-dark-line:    #403d35;
  --danger:          #993b2b;  /* oklch(48% 0.130 32) - cegła aplikacji */
  --danger-wash:     #ffe5df;

  /* wspólna baza (fokus, zaznaczenie tekstu) ma brać oliwkę zamiast niebieskiego */
  --signal:        var(--namiar);
  --signal-bright: var(--namiar-bright);
  --signal-deep:   var(--namiar-deep);
  --signal-wash:   var(--namiar-wash);
  --signal-line:   var(--namiar-line);

  /* Krój nagłówków i znaku: Newsreader, jak w aplikacji */
  --font-display:   "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --tracking-tight: -0.022em;
  --tracking-snug:  -0.012em;
  --tracking-mark:  0.07em;    /* rozstrzelenie wersalików znaku NAMIAR */

  --shadow-1:      0 1px 2px rgba(27, 24, 17, 0.05), 0 2px 10px rgba(27, 24, 17, 0.05);
  --shadow-2:      0 22px 60px -28px rgba(27, 24, 17, 0.34);
  --shadow-sheet:  0 2px 22px rgba(27, 24, 17, 0.09);
  --shadow-namiar: 0 18px 50px -24px rgba(70, 98, 45, 0.6);

  --header-h: 96px;   /* odstęp kotwic pod stałym paskiem */
}

[id] { scroll-margin-top: var(--header-h); }
/* Sekcje mają własny zapas u góry, więc kotwica staje na samej krawędzi sekcji -
   pasek nawigacji przykrywa wtedy pusty margines, a nie treść poprzedniej sekcji. */
.section[id] { scroll-margin-top: 0; }

/* =====================================================================
   Układ - kontener i sekcje (te same nazwy co w serwisie, własne definicje)
   ===================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: var(--section-y); }
.section--desk   { background: var(--paper-sunken); }
.section--raised { background: var(--paper-raised); }

.nm-h2 {
  font-size: var(--text-4xl);
  line-height: 1.08;
  letter-spacing: var(--tracking-snug);
  max-width: 21ch;
  min-width: 0;
  overflow-wrap: anywhere;   /* siatka bezpieczeństwa: długie słowo nie rozepchnie telefonu */
}
.nm-lead {
  font-size: var(--text-lg);
  color: var(--ink-soft);
  max-width: 50ch;
  margin-top: var(--space-md);
}
.nm-head { margin-bottom: var(--space-2xl); }
.nm-kicker {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Romb - znak marki. Ten sam kształt w arkuszu, listach i stopce. */
.nm-rhomb {
  display: inline-block;
  flex: none;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.65em;
  vertical-align: 0.1em;
  background: var(--mark-new);
  transform: rotate(45deg);
}
.nm-rhomb--r1 { background: var(--mark-r1); }
.nm-rhomb--r2 { background: var(--mark-r2); }

/* =====================================================================
   Przyciski - ta sama rodzina co w serwisie, twarz NAMIARA (oliwka, jasny tekst)
   ===================================================================== */
.btn {
  --_bg: var(--namiar);
  --_fg: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  white-space: nowrap;
  padding: 0.85em 1.4em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--_fg);
  background: var(--_bg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-namiar); background: var(--namiar-bright); }
.btn:active { transform: translateY(0); background: var(--namiar-deep); }
.btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--ghost {
  --_bg: transparent;
  --_fg: var(--ink);
  border-color: var(--hairline-strong);
}
.btn--ghost:hover { box-shadow: none; background: var(--paper-raised); border-color: var(--namiar); transform: translateY(-2px); }
.btn--ghost:active { background: var(--paper); }

/* na atramencie: jasna oliwka, ciemny tekst */
.btn--light { --_bg: var(--namiar-light); --_fg: var(--ink); }
.btn--light:hover { background: var(--namiar-lighter); box-shadow: none; }
.btn--light:active { background: var(--namiar-light); }

.btn .arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* =====================================================================
   Nawigacja - N5 floating pill (pasek marki serwisu, świadomie wspólny),
   ze znakiem NAMIARA jak w autoshow-prezentacja
   ===================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  padding: clamp(10px, 1.6vw, 16px) var(--gutter);
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--maxw);
  padding: 8px 8px 8px 14px;
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  transform: translateZ(0);
  transition: box-shadow var(--dur-3) var(--ease-out);
}
.site-header.is-scrolled .nav { box-shadow: var(--shadow-2); }

.brand { display: inline-flex; align-items: center; gap: 0.65em; }
.brand__logo {
  width: 32px; height: 32px; flex: none;
  border-radius: 7px;
  border: var(--rule-hair) solid var(--hairline);
}
.brand__lockup { display: grid; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: var(--tracking-mark);
  color: var(--ink);
}
.brand__by {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 4px;
}

.nav__links {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  margin-left: auto;
  list-style: none;
  padding: 0; margin-block: 0;
}
.nav__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
  transition: color var(--dur-2) var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: var(--rule-bold);
  background: var(--namiar);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:active { color: var(--namiar-deep); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { margin-left: clamp(8px, 1.4vw, 18px); }

/* Opakowanie linków i przycisku. Na szerokim ekranie go "nie ma" (display: contents) -
   linki i przycisk leżą wprost w pasku. Na telefonie rozwija menu (niżej). */
.nav__menu,
.nav__menu-in { display: contents; }

.nav__toggle { display: none; }

/* =====================================================================
   HERO - hook. Blat (ciemniejszy papier), na nim liczba i arkusz miesiąca.
   Hak strony to skala i koszt: ile maili wychodzi i ile kosztuje jeden.
   ===================================================================== */
.nm-hero {
  position: relative;
  padding-top: clamp(112px, 11vw, 156px);
  padding-bottom: clamp(56px, 7vw, 104px);
  background: var(--paper-sunken);
  overflow: clip;
}
/* ziarno papieru na blacie */
.nm-hero::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.4; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.nm-hero > .wrap { position: relative; }
.nm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.nm-hero__for {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Liczba + słowa: razem są nagłówkiem. Liczba nigdy nie stoi sama. */
.nm-figure { display: grid; gap: var(--space-sm); margin-top: clamp(24px, 3vw, 40px); }
.nm-figure__num {
  display: flex;
  align-items: flex-start;
  gap: 0.05em;
  font-size: clamp(6.5rem, 30vw, 13rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.nm-figure__do {
  font-family: var(--font-body);
  font-size: 0.125em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--namiar-deep);
  margin-top: 1.05em;   /* na wysokość górnej krawędzi cyfr */
}
.nm-figure__words {
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: var(--tracking-snug);
  max-width: 17ch;
  min-width: 0;
  overflow-wrap: anywhere;
}
.nm-figure__words b { display: block; font-weight: 500; color: var(--namiar-deep); }

.nm-hero__lead {
  font-size: var(--text-lg);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: var(--space-lg);
}
.nm-hero__price {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.nm-hero__price b { font-weight: 500; color: var(--namiar-deep); white-space: nowrap; }
.nm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.nm-hero__note {
  margin-top: clamp(28px, 4vw, 52px);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--hairline-strong);
  max-width: 74ch;
  font-size: var(--text-sm);
  color: var(--slate);
}

/* Bez JavaScriptu znikają rzeczy, które bez skryptu nic nie robią: puste płótno arkusza,
   przełączniki i suwak. Liczby, list i oba tryby pracy zostają jako zwykła treść. */
html:not(.js) .nm-sheet__canvas,
html:not(.js) .nm-sheet__cols,
html:not(.js) .nm-sheet__cap,
html:not(.js) .nm-seg,
html:not(.js) .nm-parts,
html:not(.js) .nm-calc__range,
html:not(.js) .nm-calc__scale { display: none; }

/* Liczniki: dopóki skrypt nie ruszy od zera, liczba jest schowana (bez mignięcia 945 -> 0).
   Gdyby skrypt nie doszedł, po 3 s pokazuje się sama. */
.js .nm-count:not(.is-live) { visibility: hidden; animation: nm-count-safety 1ms linear 3s forwards; }
@keyframes nm-count-safety { to { visibility: visible; } }

/* ---- Arkusz miesiąca -------------------------------------------------
   Kartka na blacie, pod nią druga, lekko obrócona. 21 wierszy x 45 rombów. */
.nm-hero__sheet { position: relative; }
.nm-hero__sheet::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--paper);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-sm);
  transform: rotate(-1.7deg) translate(-5px, 9px);
}
.nm-sheet {
  position: relative;
  margin: 0;
  padding: clamp(16px, 2.4vw, 32px);
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sheet);
}
.nm-sheet__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-bold) solid var(--ink);
}
.nm-sheet__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--ink);
}
.nm-sheet__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-md);
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--slate);
}
.nm-sheet__cols span { white-space: nowrap; transition: opacity var(--dur-2) var(--ease-out); }
.nm-krotki { display: none; }
.nm-sheet[data-przyp="0"] .nm-sheet__cols span:nth-child(n+2),
.nm-sheet[data-przyp="1"] .nm-sheet__cols span:nth-child(3) { opacity: 0.35; }
.nm-sheet__canvas { display: block; width: 100%; height: auto; margin-top: var(--space-xs); }
.nm-sheet__cap { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--slate); }

/* księga: trzy liczby pod arkuszem */
.nm-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--space-lg) 0 0;
  border-top: var(--rule-hair) solid var(--hairline-strong);
}
.nm-ledger > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--hairline);
}
.nm-ledger dt {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate);
}
.nm-ledger dd {
  margin: 0;
  font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.nm-ledger small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--slate); }

/* ---- Przełącznik segmentowy (przypomnienia, tryb pracy) ---- */
.nm-seg {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-2xs);
  border: var(--rule-hair) solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
}
.nm-seg__label {
  padding-inline: var(--space-sm) var(--space-2xs);
  font-family: var(--font-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate);
}
.nm-seg__btn {
  appearance: none; -webkit-appearance: none;
  border: 0;
  min-height: 36px;
  padding: 0 1em;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.nm-seg__btn:hover { color: var(--ink); background: var(--paper-sunken); }
.nm-seg__btn:active { transform: translateY(1px); }
.nm-seg__btn[aria-pressed="true"] { background: var(--namiar); color: var(--white); }
.nm-seg__btn[aria-pressed="true"]:hover { background: var(--namiar-bright); color: var(--white); }
.nm-seg__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nm-seg--wide { display: flex; width: fit-content; }
.nm-seg--wide .nm-seg__btn { min-height: 40px; padding-inline: 1.3em; }

/* =====================================================================
   ZAMIANA - cztery rzeczy, które dziś robisz ręcznie, przekreślane po kolei
   ===================================================================== */
.nm-swap__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  margin-top: var(--space-2xl);
  align-items: start;
}
.nm-swap__list { list-style: none; padding: 0; margin: var(--space-md) 0 0; border-bottom: var(--rule-hair) solid var(--hairline); }
.nm-swap__list li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2xs) var(--space-lg);
  padding-block: var(--space-md);
  border-top: var(--rule-hair) solid var(--hairline);
}
.nm-swap__what {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--slate);
  text-decoration: line-through;
  text-decoration-thickness: var(--rule-bold);
  text-decoration-color: var(--namiar);
}
.nm-swap__who {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--namiar-deep);
  white-space: nowrap;
}
.nm-swap__who::before {
  content: ""; width: 0.5em; height: 0.5em; margin-right: 0.7em;
  background: var(--namiar); transform: rotate(45deg);
}
/* przed wejściem w kadr (tylko ze skryptem): nieprzekreślone, bez podpisu */
.js .nm-swap__list:not(.is-in) .nm-swap__what { color: var(--ink); text-decoration-color: transparent; }
.js .nm-swap__list:not(.is-in) .nm-swap__who { opacity: 0; }
.no-reduce .nm-swap__what {
  transition: color var(--dur-3) var(--ease-out), text-decoration-color var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 170ms + 150ms);
}
.no-reduce .nm-swap__who {
  transition: opacity var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 170ms + 320ms);
}
.nm-swap__one {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1.06;
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  max-width: 14ch;
  overflow-wrap: anywhere;
}
.nm-swap__rest { margin-top: var(--space-lg); color: var(--ink-soft); max-width: 45ch; }

/* =====================================================================
   MAIL - list na blacie + trzy fragmenty do wskazania
   ===================================================================== */
.nm-mail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.nm-parts { margin-top: var(--space-xl); }
.nm-parts__tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.nm-parts__btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 42px;
  padding: 0 1em 0 0.5em;
  border: var(--rule-hair) solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.nm-parts__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  background: var(--paper-sunken);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); font-weight: 600;
  color: var(--ink-soft);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.nm-parts__btn:hover { border-color: var(--namiar); color: var(--ink); }
.nm-parts__btn:active { transform: translateY(1px); }
.nm-parts__btn[aria-pressed="true"] { background: var(--namiar-wash); border-color: var(--namiar); color: var(--ink); }
.nm-parts__btn[aria-pressed="true"] .nm-parts__n { background: var(--namiar); color: var(--white); }
.nm-parts__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nm-parts__desc { display: none; margin-top: var(--space-md); font-size: var(--text-lg); color: var(--ink); max-width: 46ch; min-height: 3.3em; }
.nm-parts[data-active="1"] .nm-parts__desc[data-part="1"],
.nm-parts[data-active="2"] .nm-parts__desc[data-part="2"],
.nm-parts[data-active="3"] .nm-parts__desc[data-part="3"] { display: block; }

.nm-mail__facts { list-style: none; padding: 0; margin: 0; max-width: 46ch; border-bottom: var(--rule-hair) solid var(--hairline-strong); }
.nm-mail__facts li {
  position: relative;
  padding: var(--space-md) 0 var(--space-md) 1.5em;
  border-top: var(--rule-hair) solid var(--hairline-strong);
  color: var(--ink-soft);
}
.nm-mail__facts li::before {
  content: ""; position: absolute; left: 0.1em; top: calc(var(--space-md) + 0.55em);
  width: 0.48em; height: 0.48em; background: var(--namiar); transform: rotate(45deg);
}

.nm-letter { margin: 0; }
.nm-letter__sheet {
  display: grid; gap: 0.95em;
  padding: clamp(24px, 3.6vw, 48px);
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sheet);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink);
}
.nm-letter__subject {
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--hairline);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
}
.nm-letter__subject span {
  display: block; margin-bottom: var(--space-xs);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate);
}
/* wskazany fragment zostaje w pełnej czerni na oliwkowym tle, reszta listu przygasa */
.nm-letter__sheet > p:not(.nm-letter__subject) {
  border-radius: 2px;
  transition: opacity var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.nm-letter[data-active] .nm-letter__sheet > p:not(.nm-letter__subject) { opacity: 0.62; }   /* 0.62 = jeszcze 4,9:1 na papierze */
.nm-letter[data-active="1"] .nm-letter__sheet > p[data-part="1"],
.nm-letter[data-active="2"] .nm-letter__sheet > p[data-part="2"],
.nm-letter[data-active="3"] .nm-letter__sheet > p[data-part="3"] {
  opacity: 1;
  background: var(--namiar-wash);
  box-shadow: 0 0 0 8px var(--namiar-wash);
}
.nm-letter__sign { margin-top: var(--space-xs); }

.nm-letter__absent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-lg); }
.nm-letter__absent-label {
  margin-right: var(--space-xs);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate);
}
.nm-letter__absent span:not(.nm-letter__absent-label) {
  padding: 0.3em 0.85em;
  border: var(--rule-hair) solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--slate);
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  white-space: nowrap;
}
.nm-letter__cap { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--slate); }

/* =====================================================================
   START - trzy pola. Nie trzy kafle z ikoną: trzy pola formularza z kreską u góry.
   ===================================================================== */
.nm-three {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}
.nm-field { padding-top: var(--space-md); border-top: var(--rule-bold) solid var(--ink); }
.nm-field__name { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; color: var(--ink); }
.nm-field__box {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs);
  min-height: 56px;
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline-strong);
  border-radius: var(--radius-sm);
}
.nm-field__box--mail { justify-content: space-between; padding-inline: var(--space-md); font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.nm-field__ok { display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: 600; color: var(--namiar-deep); white-space: nowrap; }
.nm-chip {
  padding: 0.32em 0.8em;
  border: var(--rule-hair) solid var(--namiar-line);
  border-radius: var(--radius-pill);
  background: var(--namiar-wash);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--namiar-deep);
  white-space: nowrap;
}
.nm-field__hint { margin-top: var(--space-md); color: var(--ink-soft); max-width: 45ch; }

/* =====================================================================
   KONTROLA - tryb pracy (przełącznik) + trzy fakty o skrzynce
   ===================================================================== */
.nm-ctrl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.nm-modes { margin-top: var(--space-xl); max-width: 34rem; }
.nm-mode { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.nm-mode[hidden] { display: none; }
.nm-queue {
  display: grid; gap: var(--space-xs);
  padding: clamp(16px, 2vw, 24px);
  background: var(--paper);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
}
.nm-queue__to { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.nm-queue__subject { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; color: var(--ink); }
.nm-queue__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); min-height: 36px; }
.nm-queue__act {
  padding: 0.42em 1em;
  border: var(--rule-hair) solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-soft);
}
.nm-queue__act--main { background: var(--namiar); border-color: var(--namiar); color: var(--white); }
.nm-queue__state { display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 600; color: var(--namiar-deep); }
.nm-mode__text { font-size: var(--text-lg); color: var(--ink); max-width: 46ch; }
.nm-modes__note {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--hairline);
  font-size: var(--text-sm);
  color: var(--slate);
  max-width: 46ch;
}

.nm-trust { margin: 0; display: grid; }
.nm-trust > div { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--hairline-strong); }
.nm-trust > div:last-child { border-bottom: var(--rule-hair) solid var(--hairline-strong); }
.nm-trust dt { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; color: var(--ink); }
.nm-trust dd { margin: var(--space-xs) 0 0; color: var(--ink-soft); max-width: 48ch; }

/* =====================================================================
   CENA - jedyna ciemna scena strony (atrament). Cena i rachunek.
   ===================================================================== */
.nm-price { background: var(--carbon); color: var(--on-dark); }
.nm-price :focus-visible { outline-color: var(--namiar-light); }
.nm-price__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.nm-price__h { font-size: var(--text-2xl); line-height: 1.15; letter-spacing: var(--tracking-snug); color: var(--on-dark); max-width: 20ch; }
.nm-price__fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 1em; margin-top: var(--space-lg); }
.nm-price__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(4.75rem, 19vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums;
  color: var(--on-dark);
  white-space: nowrap;
}
.nm-price__per {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--namiar-light);
  white-space: nowrap;
}
.nm-price__list { list-style: none; padding: 0; margin: var(--space-2xl) 0 0; max-width: 34rem; border-bottom: var(--rule-hair) solid var(--on-dark-line); }
.nm-price__list li {
  position: relative;
  padding: var(--space-md) 0 var(--space-md) 1.6em;
  border-top: var(--rule-hair) solid var(--on-dark-line);
  color: var(--on-dark);
}
.nm-price__list li::before {
  content: ""; position: absolute; left: 0.1em; top: calc(var(--space-md) + 0.55em);
  width: 0.48em; height: 0.48em; background: var(--namiar-light); transform: rotate(45deg);
}

.nm-calc {
  display: grid; gap: var(--space-sm);
  padding: clamp(24px, 3vw, 40px);
  background: var(--carbon-hi);
  border: var(--rule-hair) solid var(--on-dark-line);
  border-radius: var(--radius-sm);
}
.nm-calc__label { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; color: var(--on-dark); }
.nm-calc__value {
  margin-top: var(--space-sm);
  font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--namiar-light);
  white-space: nowrap;
}
.nm-calc__range {
  width: 100%; height: 44px; margin: 0;
  accent-color: var(--namiar-light);
  background: transparent;
  cursor: pointer;
}
.nm-calc__range:disabled { opacity: 0.5; cursor: not-allowed; }
.nm-calc__scale {
  display: flex; justify-content: space-between;
  margin-top: calc(var(--space-2xs) * -1);
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); color: var(--on-dark-dim);
}
.nm-calc__result {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--on-dark-line);
  font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2;
  color: var(--on-dark);
}
.nm-calc__result b { font-weight: 500; color: var(--namiar-light); white-space: nowrap; }
.nm-calc__note { font-size: var(--text-sm); color: var(--on-dark-dim); }
.nm-calc .btn { margin-top: var(--space-md); justify-self: start; }
.nm-calc__trial { font-size: var(--text-sm); color: var(--on-dark-dim); }

/* =====================================================================
   PYTANIA - natywny <details>, jak w serwisie
   ===================================================================== */
.nm-faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.faq { display: grid; gap: var(--space-sm); }
.faq__item {
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.faq__item:hover { border-color: var(--namiar-line); }
.faq__item[open] { border-color: var(--namiar); box-shadow: var(--shadow-1); }
.faq__q {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: clamp(var(--space-md), 2vw, var(--space-lg));
  cursor: pointer;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-xl); color: var(--ink);
  line-height: 1.2;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline-offset: -3px; border-radius: var(--radius-sm); }
.faq__q:active { color: var(--namiar-deep); }
.faq__icon {
  flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--hairline-strong);
  display: inline-flex; align-items: center; justify-content: center; color: var(--slate);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.faq__icon svg { width: 12px; height: 12px; }
.faq__item:hover .faq__icon { color: var(--namiar-deep); border-color: var(--namiar-line); }
.faq__item[open] .faq__icon { transform: rotate(45deg); color: var(--white); background: var(--namiar); border-color: var(--namiar); }
.faq__a { padding: 0 clamp(var(--space-md), 2vw, var(--space-lg)) clamp(var(--space-md), 2vw, var(--space-lg)); }
.faq__a p { color: var(--ink-soft); line-height: var(--leading-body); max-width: 62ch; }

/* =====================================================================
   DOSTĘP - formularz (te same pola i stany co /kontakt, twarz NAMIARA)
   states: input/textarea/checkbox/submit - default · hover · focus · active · disabled · error · loading · success
   ===================================================================== */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  align-items: start;
}
.cform-panel {
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sheet);
  padding: clamp(24px, 3vw, 44px);
}
.cform { display: grid; gap: var(--space-sm); }
.cform__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }

.field { display: grid; gap: var(--space-xs); min-width: 0; }
.field__label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.field__opt { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); font-weight: 500; color: var(--slate); letter-spacing: 0.02em; }
.field__req { color: var(--namiar-deep); font-weight: 700; }
.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--paper);
  border: var(--rule-hair) solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 0.72em 0.9em;
  outline: var(--rule-bold) solid transparent;   /* miejsce na obrys fokusu - pojawia się bez drgnięcia układu */
  outline-offset: 1px;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7.5em; line-height: var(--leading-body); }
.field input::placeholder, .field textarea::placeholder { color: var(--slate); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--slate); }
.field input:focus, .field textarea:focus {
  outline-color: var(--namiar);
  border-color: var(--namiar);
  background: var(--paper-raised);
  transition: none;   /* obrys fokusu ma być od razu */
}
.field input:disabled, .field textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.field__err { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); line-height: 1.4; min-height: 1.4em; color: var(--danger); }   /* stałe miejsce: błąd nie przesuwa formularza */
.field[data-error] input,
.field[data-error] textarea { border-color: var(--danger); background: var(--danger-wash); }
.field[data-error] input:focus,
.field[data-error] textarea:focus { outline-color: var(--danger); }

.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; margin-top: var(--space-xs); }
.consent input { width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer; accent-color: var(--namiar); }
.consent label { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.55; }
.consent a { color: var(--namiar-deep); text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover { color: var(--namiar); }
.consent[data-error] label { color: var(--danger); }
.consent .field__err { display: block; margin-top: var(--space-2xs); }

.cform__foot { display: grid; gap: var(--space-sm); margin-top: var(--space-xs); }
.cform__submit { width: 100%; padding: 1em 1.4em; font-size: var(--text-base); }
.cform__submit:disabled { cursor: progress; }
.cform[data-state="loading"] { opacity: 0.92; }
.cform__msg { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); text-align: center; min-height: 1.2em; color: var(--slate); }
.cform__msg[data-kind="error"] { color: var(--danger); }
.cform__note { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); color: var(--slate); text-align: center; }

.cform[data-state="success"] { display: none; }
.cform-done { display: none; }
.cform-done.is-shown {
  display: grid; gap: var(--space-md); justify-items: center; text-align: center;
  padding-block: var(--space-2xl);
}
.cform-done__mark {
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  background: var(--namiar-wash); color: var(--namiar-deep);
  border: var(--rule-hair) solid var(--namiar-line);
  display: inline-flex; align-items: center; justify-content: center;
}
.cform-done__mark svg { width: 24px; height: 24px; }
.cform-done h3 { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); }
.cform-done p { color: var(--ink-soft); max-width: 46ch; }

.info { display: grid; gap: var(--space-lg); align-content: start; }
.info-card {
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
  padding: clamp(20px, 2.4vw, 32px);
  display: grid;
}
.info-card__title {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate); margin-bottom: var(--space-md);
}
.info-row { display: grid; gap: var(--space-2xs); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--hairline); }
.info-row:first-of-type { border-top: 0; padding-top: 0; }
.info-row__k { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.info-row__v { font-size: var(--text-base); color: var(--ink); font-weight: 500; line-height: 1.4; }
.info-row__v a { transition: color var(--dur-2) var(--ease-out); }
.info-row__v a:hover { color: var(--namiar-deep); }

/* =====================================================================
   STOPKA - własna, na wzór AUTOSHOW: znak, kontakt, dwie kolumny odnośników
   ===================================================================== */
.footer { padding-block: clamp(64px, 8vw, 110px) var(--space-2xl); background: var(--paper); border-top: var(--rule-hair) solid var(--hairline); }
.footer__top { display: flex; flex-wrap: wrap; gap: var(--space-2xl) clamp(32px, 6vw, 88px); align-items: start; }
.footer__brand { flex: 1 1 100%; min-width: 0; }   /* znak w osobnym rzędzie, kolumny pod nim; od 75rem jeden rząd (niżej) */
.footer__word {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.9rem, 6vw, 4.8rem);
  line-height: 1;
  letter-spacing: var(--tracking-mark);
  color: var(--ink);
}
.footer__rhomb {
  width: 0.19em; height: 0.19em; margin-left: 0.22em;
  background: var(--namiar);
  transform: translateY(-0.05em) rotate(45deg);
}
.footer__tag { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-top: var(--space-md); line-height: 1.8; }
.footer__tag span { display: block; font-family: var(--font-mono); font-weight: 400; }
.footer__label { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin: 0 0 var(--space-md); }
.footer__nav { display: grid; gap: var(--space-sm); align-content: start; }
.footer__nav a { font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); width: fit-content; white-space: nowrap; transition: color var(--dur-2) var(--ease-out); }
.footer__nav a:hover { color: var(--namiar-deep); }
.footer__nav a:active, .footer__contact-link:active { color: var(--namiar); }
.footer__contact { display: grid; gap: var(--space-sm); align-content: start; }
.footer__contact-link { font-size: var(--text-base); font-weight: 500; color: var(--ink-soft); width: fit-content; white-space: nowrap; transition: color var(--dur-2) var(--ease-out); }
.footer__contact-link:hover { color: var(--namiar-deep); }
.footer__contact-link--lead { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; font-variant-numeric: lining-nums; color: var(--ink); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md);
  margin-top: var(--space-2xl); padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--hairline);
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--slate);
}

/* =====================================================================
   Szersze ekrany (strona pisana od telefonu w górę)
   ===================================================================== */
/* wąski arkusz (telefon): krótkie podpisy pasm, żeby mieściły się w jednej trzeciej szerokości */
@media (max-width: 34rem) {
  .nm-dlugi { display: none; }
  .nm-krotki { display: inline; }
}

@media (min-width: 30rem) {
  .nm-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); border-top: 0; }
  .nm-ledger > div { display: grid; gap: var(--space-2xs); align-content: start; justify-content: start; padding-block: var(--space-sm) 0; border-bottom: 0; border-top: var(--rule-hair) solid var(--hairline-strong); }
  .nm-ledger dd { font-size: clamp(1.35rem, 0.9rem + 1.3vw, 2.05rem); }
  .nm-ledger small { display: block; }
  .cform__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
}

@media (min-width: 48rem) {
  .nm-three { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); }
}

@media (min-width: 60rem) {
  .nm-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nm-hero__price { display: none; }   /* te same liczby stoją obok, w księdze arkusza */
  .nm-hero__sheet { transform: rotate(0.5deg); }
  .nm-swap__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .nm-swap__col--left { padding-left: clamp(24px, 3vw, 56px); border-left: var(--rule-hair) solid var(--hairline-strong); }
  /* list po prawej na całą wysokość; po lewej nagłówek z przełącznikiem, pod nim fakty */
  .nm-mail {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "tekst list" "fakty list";
    row-gap: var(--space-xl);
  }
  .nm-mail__copy { grid-area: tekst; }
  .nm-letter { grid-area: list; }
  .nm-mail__facts { grid-area: fakty; align-self: start; }
  .nm-letter__sheet { transform: rotate(-0.4deg); }
  .nm-ctrl { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .nm-trust { margin-top: var(--space-xs); }
  .nm-price__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .nm-faq-wrap { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(32px, 5vw, 88px); }
  .nm-faq-wrap .nm-h2 { position: sticky; top: var(--header-h); }
  .contact { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

@media (min-width: 75rem) {
  .footer__top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; }
}

/* Dotyk: cele co najmniej 44 px */
@media (pointer: coarse) {
  .nm-seg__btn { min-height: 44px; }
  .nm-parts__btn { min-height: 46px; }
}

/* =====================================================================
   Telefon (do 720 px) - menu mobilne, to samo co w całym serwisie
   ===================================================================== */
@media (max-width: 720px) {
  /* ---- Menu mobilne -------------------------------------------------
     Linki i przycisk siedzą w opakowaniu .nav__menu > .nav__menu-in (stoi w HTML
     każdej strony). Na telefonie .nav__menu jest siatką o jednym wierszu, który
     rozwija się z 0fr do 1fr, a .nav__menu-in obcina to, co jeszcze się nie
     zmieściło - menu płynnie rośnie i zwija się, zamiast wyskakiwać. Żaden skrypt
     nie mierzy wysokości i nie animujemy height; skrypt tylko przełącza .is-open.
     Padding paska jest stały, więc znak i przycisk menu nie przesuwają się przy
     otwieraniu. Kopia bloku z autoshow.css - zmieniasz tam, zmień i tu. */
  .nav {
    --nav-in:   var(--dur-2);
    --nav-out:  calc(var(--dur-2) * 0.7);
    --nav-item: calc(var(--dur-2) * 0.75);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--space-sm);
    /* Skończona wartość zamiast 999px: pasek ma 60 px wysokości, więc 30 px to
       nadal pełna pigułka, a przejście do 20 px po otwarciu jest płynne. */
    border-radius: 30px;
    transition: border-radius var(--nav-out) var(--ease-in), box-shadow var(--dur-3) var(--ease-out);
  }
  .nav.is-open {
    border-radius: var(--radius-lg);
    transition: border-radius var(--nav-in) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
  }
  .nav > .brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .nav__toggle {
    grid-column: 2; grid-row: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border: var(--rule-hair) solid var(--hairline);
    border-radius: var(--radius-pill); background: transparent;
    cursor: pointer;
  }
  .nav__toggle:active { background: var(--paper-sunken); }
  .nav__toggle span { width: 16px; height: 2px; background: var(--ink); position: relative; }
  .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--ink); }
  .nav__toggle span::before { top: -5px; } .nav__toggle span::after { top: 5px; }
  .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
    transition: transform var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
  }
  /* Hamburger -> X po otwarciu */
  .nav.is-open .nav__toggle span { background: transparent; }
  .nav.is-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
  .nav.is-open .nav__toggle span::after { top: 0; transform: rotate(-45deg); }

  /* Rozwijana część. Poziomy zapas 6 px (ujemny margines + padding w środku) zostawia
     miejsce na obrys fokusu przy nawigacji klawiaturą. */
  .nav__menu {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-rows: 0fr;
    margin: 0 0 0 -6px;
    visibility: hidden;   /* zwinięte menu nie łapie Tab ani czytnika ekranu */
    transition: grid-template-rows var(--nav-out) var(--ease-in), visibility 0s linear var(--nav-out);
  }
  .nav.is-open .nav__menu {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows var(--nav-in) var(--ease-out), visibility 0s;
  }
  /* Pionowego paddingu tu być nie może - nie pozwoliłby wierszowi zwinąć się do zera. */
  .nav__menu-in { display: block; min-height: 0; overflow: hidden; padding-inline: 6px; }
  .nav__links {
    display: grid;
    gap: var(--space-xs);
    margin: var(--space-lg) 0 0;
    padding: var(--space-md) 0 0;
    border-top: var(--rule-hair) solid var(--hairline);
  }
  .nav__links a { font-size: var(--text-base); padding: 8px 0; }
  .nav__cta { display: grid; margin: var(--space-lg) 0 6px; }
  .nav__cta .btn { width: 100%; justify-content: center; }

  /* Treść wchodzi razem z rozwijaniem: lekko z góry, pozycja po pozycji co 20 ms. */
  .nav__links li,
  .nav__cta {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--nav-out) var(--ease-in), transform var(--nav-out) var(--ease-in);
  }
  .nav.is-open .nav__links li,
  .nav.is-open .nav__cta {
    opacity: 1;
    transform: none;
    transition: opacity var(--nav-item) var(--ease-out), transform var(--nav-item) var(--ease-out);
  }
  .nav.is-open .nav__links li:nth-child(1) { transition-delay: 20ms; }
  .nav.is-open .nav__links li:nth-child(2) { transition-delay: 40ms; }
  .nav.is-open .nav__links li:nth-child(3) { transition-delay: 60ms; }
  .nav.is-open .nav__links li:nth-child(n+4) { transition-delay: 80ms; }
  .nav.is-open .nav__cta { transition-delay: 80ms; }

  /* Ograniczony ruch: menu po prostu się pojawia - bez przesunięć i bez kolejki */
  @media (prefers-reduced-motion: reduce) {
    .nav__menu,
    .nav__links li,
    .nav__cta,
    .nav.is-open .nav__links li,
    .nav.is-open .nav__cta { transform: none; transition-delay: 0s !important; }
  }

  /* mniej powietrza nad liczbą: na małym telefonie przycisk ma się mieścić na pierwszym ekranie */
  .nm-hero { padding-top: 96px; }
  /* przyciski hero na całą szerokość - dwa pełne rzędy zamiast jednego urwanego */
  .nm-hero__actions .btn { flex: 1 1 auto; }
  .nm-calc .btn { justify-self: stretch; }
}

/* Najwęższe telefony: krótsze podpisy kolumn arkusza, ciaśniejszy przełącznik */
@media (max-width: 26rem) {
  .nm-sheet__cols { font-size: 0.625rem; letter-spacing: 0; }
  .nm-sheet__cols .nm-rhomb { margin-right: 0.45em; }
  .nm-seg__label { display: none; }
  .nm-parts__btn { padding-right: 0.8em; }
}

/* =====================================================================
   Ekrany dotykowe - bez "przyklejonego" hover
   Po puknięciu przeglądarka zostawia element w stanie :hover, aż palec trafi
   gdzie indziej: przycisk stał uniesiony, z poświatą pod spodem. Tam, gdzie
   nie ma kursora, hover przycisków wyłączamy. Odpowiedzią na dotyk jest samo
   przyciemnienie tła na czas wciśnięcia (:active) - bez cienia i bez ruchu.
   Reguły :active stoją PO regułach :hover, bo w chwili dotyku przycisk ma
   oba stany naraz i wygrywa ta, która jest niżej.
   ===================================================================== */
@media (hover: none) {
  .btn:hover { transform: none; box-shadow: none; background: var(--_bg); }
  .btn:hover .arrow { transform: none; }
  .btn:active { background: var(--namiar-deep); }
  .btn--ghost:hover { border-color: var(--hairline-strong); }
  .btn--ghost:active { background: var(--paper); }
  .btn--light:hover { background: var(--_bg); }
  .btn--light:active { background: var(--namiar-lighter); }
  .nm-seg__btn:hover { color: var(--ink-soft); background: transparent; }
  .nm-seg__btn[aria-pressed="true"]:hover { background: var(--namiar); color: var(--white); }
  .nm-parts__btn:hover { border-color: var(--hairline-strong); color: var(--ink-soft); }
  .nm-parts__btn[aria-pressed="true"]:hover { border-color: var(--namiar); color: var(--ink); }
}

/* =====================================================================
   Ograniczony ruch - bez przechyleń i bez kolejki przekreśleń
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nm-hero__sheet, .nm-letter__sheet { transform: none; }
  .btn:hover, .btn--ghost:hover { transform: none; }
}