/*
 * Wariant A „Telefon” in the „z głowy.” identity (codex/landing-v2): white page, navy ink,
 * one blue, pale blue bands, yellow only for a decision. Tokens, logo, buttons, the assistant's
 * card and the finale come from ../shared/brand.css; this file adds the layout, the phone
 * and the sections, and tunes the card for the narrow phone screen.
 */
:root {
  --nav-height: 96px;
  --badge: #e5484d;
  scroll-padding-top: calc(var(--nav-height) + 20px);
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a, summary, input, textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--blue-soft); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }

.wrap { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 50; transform: translateY(-180%); padding: 14px 20px; background: var(--ink); color: var(--white); text-decoration: none; }
.skip:focus { transform: none; }

/* ---------- logo ---------- */
.lockup-eyes { display: block; width: 58px; height: 22px; flex: 0 0 auto; }
.lockup-eyes .glasses { width: 100%; height: auto; }
.brand-lockup { min-height: 44px; }
.brand-lockup--sm .lockup-eyes { width: 50px; height: 19px; }
.brand-lockup--sm .brand-word { font-size: 24px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: var(--nav-height); }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; font-size: 14px; font-weight: 600; }
.nav__links a:hover { color: var(--blue); }
.nav__links .nav-contact { margin-left: 16px; color: var(--blue); font-weight: 700; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  padding-block: 32px 64px;
}
.hero-copy { min-width: 0; padding-block: 16px; }
.category { font-size: 14px; font-weight: 600; margin-bottom: 26px; }
h1 { font-size: clamp(48px, 5.3vw, 78px); line-height: 1.06; font-weight: 800; letter-spacing: -0.062em; }
h1 span { color: var(--blue); }
.hero-description { max-width: 500px; margin-top: 28px; font-size: 18px; line-height: 1.7; }
.hero-more { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--blue-line); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero-more em { color: var(--blue); }
.hero-more:hover { color: var(--blue); text-decoration-color: currentColor; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 32px; }
.hero-footnote { max-width: 470px; margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* live count of the show, under the copy */
.tally {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  max-width: 500px; margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.4; color: var(--muted);
}
.tally__k { font-weight: 700; color: var(--ink); }
.tally__i { display: inline-flex; align-items: center; gap: 7px; }
.tally__i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--badge); }
.tally__i--done::before { background: var(--blue); }
.tally__i--you::before { background: var(--decision); box-shadow: 0 0 0 1px #d9c341; }
.tally b { min-width: 2ch; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* the demo panel: pale like landing-v2, the phone, and under it the note and „Jeszcze raz”.
   (No branch switch on the default landing; a trade's landing uses ?dla=…, see main.js.) */
.demo {
  display: grid;
  grid-template-columns: 352px;
  gap: 12px;
  align-items: start;
  padding: 28px 32px 16px;
  border-radius: var(--r-panel);
  background: var(--pale);
}
.demo__side { order: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding-inline: 6px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.25; text-align: left; white-space: nowrap;
  transition: background-color 160ms, color 160ms, border-color 160ms;
}
.chip:hover { color: var(--blue); border-color: #b9c9e8; }
.chip[aria-pressed="true"] { background: var(--white); color: var(--blue); }
.stage__note { font-size: 12px; line-height: 1.55; color: var(--muted); }
.replay {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0;
  border: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 700;
}
.replay > span { font-size: 19px; color: var(--blue); }
.replay:hover { color: var(--blue); }
/* keeps its place while hidden, so nothing jumps when the show ends */
.replay[hidden] { display: inline-flex !important; visibility: hidden; }

/* ---------- phone ---------- */
.phone {
  position: relative;
  width: 352px;
  max-width: 100%;
  padding: 9px;
  border-radius: 48px;
  background: #16222f;
  box-shadow:
    0 0 0 1px #2f4054 inset,
    0 34px 64px -30px rgba(23, 44, 66, 0.6),
    0 14px 26px -16px rgba(23, 44, 66, 0.35);
}
.phone::before {
  content: ""; position: absolute; top: 19px; left: 50%; z-index: 5;
  width: 86px; height: 25px; border-radius: 20px; background: #16222f; transform: translateX(-50%);
}
.phone.buzz { animation: buzz 0.16s linear; }
@keyframes buzz { 25% { transform: translateX(-1.2px); } 75% { transform: translateX(1.2px); } }

/* a light wallpaper: pale blue, a little lighter at the top, the brand blue faint at the bottom */
.phone__screen {
  position: relative;
  height: 640px;
  border-radius: 39px;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(130% 55% at 50% 118%, rgba(35, 74, 219, 0.2), transparent 70%),
    radial-gradient(90% 45% at 12% -4%, #ffffff, transparent 70%),
    linear-gradient(180deg, #f2f6ff 0%, #e2eafb 100%);
  isolation: isolate;
}
.phone__bar { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 4px 28px 0 32px; font-size: 14px; font-weight: 700; }
.phone__icons { display: flex; gap: 4px; align-items: flex-end; }
.phone__icons i { display: block; width: 4px; border-radius: 1px; background: currentColor; }
.phone__icons i:nth-child(1) { height: 6px; }
.phone__icons i:nth-child(2) { height: 9px; }
.phone__icons i:nth-child(3) { height: 11px; width: 20px; border-radius: 3px; margin-left: 4px; }
.phone__lock { text-align: center; transition: opacity 0.5s, transform 0.6s var(--ease); }
.phone__date { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink-2); }
.phone__clock { font-size: 62px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }

/* the stream (DOM from shared/stream.js); older cards slide off under a soft fade */
.st__list {
  position: absolute; top: 146px; left: 10px; right: 10px; bottom: 90px;
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
  transition: bottom 0.45s var(--ease);
}
.st.has-wait .st__list { bottom: 146px; }
/* a tall card scrolled up (opts.fit): its top fades under the clock instead of a hard cut */
.st__list.is-scrolled {
  -webkit-mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 26px), transparent);
}

/* card tuned for a ~310 px wide phone */
.st .nt__row { padding: 10px 11px 9px; gap: 9px; }
.st .as__head { padding: 7px 11px 5px; }
.st .as__head .glasses { width: 30px; }
.st .as__sum { padding: 0 11px 7px; font-size: 13.5px; }
.st .as__draft { margin: 0 11px; padding: 7px 0 9px; }
.st .as__label { display: flex; align-items: center; gap: 6px; }
.st .as__reply { font-size: 13px; line-height: 1.45; }
.st .as__src { font-size: 11px; -webkit-line-clamp: 1; }
.st .as__ask { padding: 0 11px 9px; }
.st .as__foot { padding: 7px 8px 7px 11px; min-height: 50px; }
.st .as__who { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.2s; }
/* "OK" is small until the tap; then the button says where the reply went,
   and the line on the left gives it room */
.st .as__ok-b { position: absolute; }
.st .nt.is-sent .as__ok-b { position: relative; }
.st .nt.is-sent .as__ok-a { position: absolute; }
.st .nt.is-sent .as__who { opacity: 0; flex: 0 0 0; }
.st .nt.is-sent .as__ok { min-width: 0; padding: 0 14px; }
/* the channel the reply went through: its icon in its color, inside the button and the pill */
.st .via { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 5px; background: var(--ch); color: #fff; vertical-align: -4px; }
.st .via svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.st .via--you { width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--decision); box-shadow: 0 0 0 1px #c9b232; vertical-align: 0; }
.st .nt__sent .via { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3.5px; }
.st .nt.is-compact .nt__sent { font-size: 11px; padding: 3px 7px 3px 4px; }
/* "you": goes down to the tray instead of sideways */
.st .is-out > .st__clip > .nt[data-mode="you"] { transform: translateY(40%) scale(0.9); }

/* what waits for you: a yellow tray above the dock (yellow = your decision) */
.phone__wait {
  position: absolute; left: 12px; right: 12px; bottom: 88px; z-index: 3;
  display: grid; grid-template-columns: 10px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0 10px;
  padding: 7px 14px 8px 12px; border-radius: var(--r-panel);
  background: var(--decision); box-shadow: 0 0 0 1px #d9c341, var(--shadow-card);
  font-size: 13px; line-height: 1.3;
  opacity: 0; transform: translateY(12px) scale(0.97);
  transition: opacity 0.35s, transform 0.5s var(--ease);
}
.phone__wait::before { content: ""; grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.phone__wait-k { font-size: 11.5px; font-weight: 700; color: var(--decision-ink); }
.phone__wait-v { min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st.has-wait .phone__wait { opacity: 1; transform: none; }
.phone__wait.bump { animation: bump 0.4s var(--ease); }

/* the dock: quiet, desaturated icons; only the red badges speak */
.phone__dock {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3;
  display: flex; justify-content: space-around; padding: 9px 8px;
  border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.dock {
  --ch: var(--ch-mail);
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: color-mix(in srgb, var(--ch) 12%, #f5f8fe);
  color: color-mix(in srgb, var(--ch) 35%, #7a889b);
  box-shadow: inset 0 0 0 1px rgba(23, 44, 66, 0.07);
}
.dock[data-ch="whatsapp"] { --ch: var(--ch-whatsapp); }
.dock[data-ch="sms"] { --ch: var(--ch-sms); }
.dock[data-ch="messenger"] { --ch: var(--ch-messenger); }
.dock[data-ch="call"] { --ch: var(--ch-call); }
.dock svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dock__badge {
  position: absolute; top: -6px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--badge); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #fff;
  transform: scale(0); transition: transform 0.3s var(--pop);
}
.dock.has-badge .dock__badge { transform: scale(1); }
.dock.bump .dock__badge { animation: bump 0.3s var(--ease); }
@keyframes bump { 40% { transform: scale(1.28); } }

/* the finale (shared/eyes.js): in the screen, between the clock and the dock */
.st .fin {
  position: absolute; left: 16px; right: 16px; top: 140px; bottom: 92px; z-index: 2;
  isolation: isolate; pointer-events: none;
}
.st.has-wait .fin { bottom: 142px; }
.st .fin__glasses { position: relative; width: 196px; transform: scale(0.72); transition: transform 0.9s var(--pop); }
.st .fin.fin-on .fin__glasses { transform: none; }
.st .fin__glasses::before {
  content: ""; position: absolute; inset: -55% -30%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  opacity: 0; transform: scale(0.6); transition: opacity 0.6s, transform 0.9s var(--ease);
}
.st .fin.fin-on .fin__glasses::before { opacity: 1; transform: none; }
.st .fin__text { margin-top: 18px; }
.st .fin__zero { font-size: 12.5px; }
.st .fin__title { margin-top: 6px; font-size: 29px; }
.st .fin__stats { font-size: 13px; }
.st .fin__cta {
  min-height: 46px; margin-top: 18px; padding: 11px 16px; gap: 10px; font-size: 14px; pointer-events: auto;
  visibility: hidden; transition: opacity 0.45s var(--ease), transform 0.55s var(--pop), visibility 0s 0.55s;
}
.st .fin.fin-cta .fin__cta { visibility: visible; transition-delay: 0s; }
.st.is-done .phone__lock { opacity: 0.35; }

/* ---------- sections ---------- */
.section { padding-block: 100px; }
.band-pale { background: var(--pale); }
.band-blue { background: var(--blue); color: var(--white); }
.band-blue :focus-visible { outline-color: var(--white); }
h2 { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.16; letter-spacing: -0.045em; font-weight: 700; }
.mark { color: var(--blue); }
.head { max-width: 760px; }
.kicker { margin-bottom: 18px; font-size: 14px; font-weight: 600; }
.head__lead { max-width: 54ch; margin-top: 22px; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.head--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; max-width: none; align-items: end; }
.head--split .head__lead { margin-top: 0; font-size: 16px; color: var(--muted); }

/* reveal on scroll */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); }
.js .rv.is-seen { opacity: 1; transform: none; }

/* cost: one interruption, kept short on purpose (people should scroll on quickly) */
.cost { padding-block: 80px; }
.cost__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 40px 80px; align-items: center; }
.anatomy { margin-top: 26px; max-width: 560px; border-top: 1px solid var(--ink); }
.anatomy li { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); align-items: baseline; gap: 12px; padding-block: 9px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--muted); }
.anatomy li b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.cost__side { display: flex; flex-direction: column; gap: 26px; }
.cost__quote { font-size: clamp(20px, 1.75vw, 25px); font-weight: 700; line-height: 1.36; letter-spacing: -0.03em; text-wrap: pretty; }

.calc { padding: 20px 24px 18px; border-radius: var(--r-panel); background: var(--white); box-shadow: var(--shadow-card); }
.range { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: baseline; font-size: 15px; font-weight: 600; }
.range output { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; color: var(--blue); font-variant-numeric: tabular-nums; }
.range input { grid-column: 1 / -1; width: 100%; height: 26px; accent-color: var(--blue); }
.calc__out { margin-top: 10px; }
.calc__day { font-size: 16px; color: var(--muted); }
.calc__day b { margin-right: 4px; font-size: clamp(32px, 3vw, 42px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.1; color: var(--blue); font-variant-numeric: tabular-nums; }
.calc__week { margin-top: 2px; font-size: 14px; color: var(--muted); }
.calc__week b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__small { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* sources */
.sources__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 80px; align-items: center; }
/* points, .learn, source buttons, the peek, the floating glasses: sources.css */
.chat { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.chat li { max-width: 88%; padding: 10px 14px; border-radius: 7px; font-size: 14px; line-height: 1.55; }
.chat__who { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.chat__in { background: var(--white); border-bottom-left-radius: 0; box-shadow: inset 0 0 0 1px var(--line); }
.chat__as { background: var(--white); border-bottom-left-radius: 0; box-shadow: var(--shadow-card); font-weight: 600; }
.chat__as .chat__who { color: var(--blue); }
.chat__eyes { display: block; width: 30px; height: 12px; }
.chat__eyes .glasses { width: 100%; height: auto; }
.chat__me { align-self: flex-end; background: var(--pale-2); border-bottom-right-radius: 0; }
.chat .chat__ok { max-width: none; padding: 2px 0; font-size: 13px; font-weight: 700; color: var(--blue); }
.js .chat li { opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.6s var(--ease); }
.js .learn.is-seen .chat li { opacity: 1; transform: none; }
.js .learn.is-seen .chat li:nth-child(2) { transition-delay: 0.7s; }
.js .learn.is-seen .chat li:nth-child(3) { transition-delay: 1.6s; }
.js .learn.is-seen .chat li:nth-child(4) { transition-delay: 2.3s; }
.learn__note { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* gate: three lanes, the color says who decides */
.gate { padding-top: 0; }
.gate > .wrap { padding-top: 100px; border-top: 1px solid var(--line); }
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 52px; }
.lane { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 4px solid var(--blue); }
.lane__k { font-size: 14px; font-weight: 700; color: var(--blue); }
.lane h3 { font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.04em; }
.lane ul { margin-top: 10px; border-top: 1px solid var(--line); }
.lane li { padding-block: 11px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.lane--ok { border-top-color: var(--decision); }
.lane--ok .lane__k { color: var(--decision-ink); }
.lane--you { border-top-color: var(--ink); }
.lane--you .lane__k { color: var(--ink); }
.gate__note { max-width: 70ch; margin-top: 28px; font-size: 15px; color: var(--muted); }

/* control */
.control__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--line); }
.promises li { padding-block: 22px; border-bottom: 1px solid var(--line); }
.promises h3 { font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -0.015em; }
.promises p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.promises__wide { grid-column: 1 / -1; }

/* process: the one blue band */
.process { padding-block: 84px; }
.process__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 110px; }
.process .kicker { color: #c3d1ff; }
.process h2 { font-size: clamp(34px, 3.6vw, 52px); }
.process .mark { color: #c3d1ff; }
.process .text-link { margin-top: 24px; color: var(--white); border-bottom: 1px solid #879ff2; min-height: 40px; }
.process .text-link:hover { color: #d7e4ff; }
.steps { counter-reset: steps; }
.steps li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 18px; padding-block: 22px; border-bottom: 1px solid #ffffff4d; counter-increment: steps; }
.steps li:first-child { padding-top: 0; }
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps li::before { content: counter(steps) "."; grid-row: 1 / 4; font-size: 14px; line-height: 1.7; color: #c3d1ff; }
.steps__when { font-size: 13px; font-weight: 700; color: #c3d1ff; }
.steps h3 { margin-top: 2px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.steps p { margin-top: 6px; font-size: 14px; color: #e2e9ff; }

/* faq */
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 100px; align-items: start; }
.faq__intro { margin-top: 24px; font-size: 14px; color: var(--muted); }
.faq__list { border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 76px; padding-block: 18px;
  font-size: 15px; font-weight: 600; line-height: 1.6; cursor: pointer; list-style: none;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--blue); }
.faq__list summary > span { display: flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; font-size: 24px; font-weight: 400; color: var(--blue); transition: transform 0.25s var(--ease); }
.faq__list details[open] summary > span { transform: rotate(45deg); }
.faq__list details p { padding: 0 50px 24px 0; font-size: 14px; color: var(--muted); }

/* contact */
.contact { padding-block: 84px 88px; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 110px; align-items: start; }
.contact h2 { font-size: clamp(40px, 4.4vw, 62px); line-height: 1.1; color: var(--blue); }
.contact .head__lead { max-width: 340px; color: var(--ink); }
.form { display: grid; gap: 18px; min-width: 0; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; }
.field input, .field textarea {
  display: block; width: 100%; min-width: 0; min-height: 48px; padding: 12px;
  border: 1px solid var(--control-line); border-radius: var(--r-btn); background: var(--white);
  font-size: 15px; font-weight: 400; line-height: 1.6; resize: vertical;
}
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 2px; }
.field ::placeholder { color: #637489; opacity: 1; }
.form__submit { justify-self: start; margin-top: 6px; }
.form__note { font-size: 14px; color: var(--muted); }
.form__note.is-ok { color: var(--blue); font-weight: 700; }
.form__note.is-err { color: #b3261e; font-weight: 700; }
.form__submit:disabled { opacity: 0.6; cursor: progress; }
/* honeypot: people never see it, bots fill it in */
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* footer */
.footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; min-height: 124px; padding-block: 24px; }
.footer > p { font-size: 14px; }
.footer__small { margin-left: auto; font-size: 12px !important; color: var(--muted); }
.footer__small a:hover { color: var(--blue); }

/* ---------- responsive ---------- */
@media (max-width: 1260px) {
  .demo { padding: 22px 24px 12px; }
}
@media (max-width: 1180px) {
  .wrap { width: calc(100% - 64px); }
  .hero { gap: 36px; }
  .nav__links { gap: 20px; }
  .nav__links .nav-contact { margin-left: 0; }
  .cost__grid { gap: 40px 48px; }
  .process__grid, .contact__grid, .faq__grid { gap: 64px; }
}
@media (max-width: 960px) {
  .wrap { width: calc(100% - 48px); }
  :root { --nav-height: 76px; }
  .nav__links a:not(.nav-contact) { display: none; }
  /* one column: the phone comes right after the headline and the lead, so the show starts on the first
     screen; the button and the footnote go under it (the nav keeps „Porozmawiajmy” in view all the time).
     The tally repeats the phone's own numbers and would land far from it, so it goes. */
  .hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 36px 56px; }
  .hero-copy { display: contents; }
  .demo { order: 1; margin-top: 30px; justify-self: center; width: 100%; max-width: 600px; justify-content: center; }
  .hero-actions, .hero-footnote { order: 2; }
  .tally { display: none; }
  .head--split, .sources__grid, .control__grid, .faq__grid, .contact__grid, .process__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cost__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .cost { padding-block: 64px; }
  .lanes { grid-template-columns: 1fr; gap: 36px; }
  .section { padding-block: 72px; }
  .gate { padding-top: 0; }
  .gate > .wrap { padding-top: 72px; }
  .process, .contact { padding-block: 60px; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 40px); }
  .brand-word { font-size: 25px; }
  .lockup-eyes { width: 52px; height: 20px; }
  :root { --nav-height: 64px; }
  .hero { padding-top: 22px; }
  .category { margin-bottom: 14px; }
  h1 { font-size: clamp(42px, 11.6vw, 60px); letter-spacing: -0.058em; }
  .hero-description { margin-top: 16px; font-size: 16px; line-height: 1.6; }
  .hero-actions { gap: 8px 18px; margin-top: 26px; }
  .hero-actions .primary { width: 100%; min-height: 50px; }
  .hero-footnote { font-size: 13px; }
  /* full-bleed pale band so the phone gets the whole width */
  .demo { width: auto; max-width: none; margin: 22px -20px 0; padding: 12px 12px 8px; border-radius: 0; grid-template-columns: minmax(0, 352px); }
  .demo__side { padding-inline: 8px; }
  .phone__screen { height: 620px; }
  h2 { font-size: 34px; }
  .head__lead { font-size: 16px; }
  .cost { padding-block: 56px; }
  .anatomy { margin-top: 20px; }
  .anatomy li { grid-template-columns: 6.4em minmax(0, 1fr); gap: 8px; font-size: 14px; padding-block: 8px; }
  .anatomy li b { font-size: 15px; }
  .cost__side { gap: 22px; }
  .calc { padding: 18px 18px 16px; }
  .calc__day b { font-size: 34px; }
  .learn { padding: 18px 16px; margin-inline: -4px; }
  .lane h3 { font-size: 24px; }
  .promises, .form__row { grid-template-columns: 1fr; }
  .faq__list summary { font-size: 14px; min-height: 72px; padding-block: 14px; gap: 8px; }
  .faq__list details p { padding-right: 12px; }
  .contact h2 { font-size: 40px; }
  .form__submit { width: 100%; }
  .footer__small { margin-left: 0; width: 100%; }
}
@media (max-width: 370px) {
  .phone { padding: 7px; border-radius: 44px; }
  .phone__screen { border-radius: 37px; }
  .dock { width: 40px; height: 40px; }
  .phone__clock { font-size: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}