/* ==========================================================================
   Ukochana Melodia — main.css
   Jeden arkusz dla wszystkich stron publicznych (landing, formularz, strona
   zamówienia /s/<token>, strona-prezent /prezent/<token>, regulamin,
   polityka). Fonty systemowe (zero webfontów/CDN), mobile-first.
   Tokeny w :root — zero kolorów/rozmiarów poza nimi w regułach niżej.
   ========================================================================== */

/* ---------------------------------------------------------------------- *
 * 0. FONTY — DM Sans (tekst) + DM Serif Display (nagłówki), self-hosted.
 * Pliki w app/static/fonts/ (Google Fonts woff2, subsety latin/latin-ext;
 * unicode-range 1:1 z oficjalnym CSS Google Fonts, żeby przeglądarka
 * pobierała tylko potrzebny subset). DM Serif Display ma WYŁĄCZNIE wagę 400.
 * DM Sans normal to font zmienny (wght 100–1000): reguły 400/500/700
 * wskazują TEN SAM plik, więc przeglądarka pobiera go raz (było 3× ~94 KB).
 * Osobne reguły zostają, żeby 600/800 mapowały się jak dotąd na twarz 700.
 * ---------------------------------------------------------------------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmsans-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmsans-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmsans-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmsans-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dmsans-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dmsans-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dmsans-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dmsans-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmserifdisplay-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmserifdisplay-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmserifdisplay-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmserifdisplay-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------- *
 * 1. RESET
 * ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video, audio, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* Guard obowiązkowy: [hidden] jest JEDYNYM mechanizmem chowania elementów
   sterowanych z JS — bez tego reguła display na klasie nadpisuje UA. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------- *
 * 2. TOKENY
 * ---------------------------------------------------------------------- */
:root {
  /* kolory — akcenty songful.com (decyzja właściciela 2026-08-04); neutralne
     tła OCIEPLONE 2026-09-24 („klimat vintage z UK”): kość słoniowa z nutą
     różu zamiast chłodnej szarości #fafafa — ta sama rodzina co zdjęcie
     telefonu w salonie (kremowe ściany, pudrowy fotel, orzech, mosiądz). */
  --bg: #fbf7f3;
  --bg-alt: #f5eee8;
  --surface: #fffdfb;
  --ink: #0a0a0a;
  /* Tekst pomocniczy: co najmniej 4,5:1 również na tintach różu/fioletu.
     --ink-faint #666 to najjaśniejsza szarość, która trzyma 4,5:1 na #fce8f2,
     więc stopień hierarchii (tekst > pomocniczy > wskazówka) daje ciemniejszy
     --ink-soft: L* ok. 3 / 30 / 43 — ten sam stosunek jasności soft:faint co
     dawne #737373/#a3a3a3, a przy #595959/#666 obie szarości zlewały się. */
  --ink-soft: #474747;
  --ink-faint: #666666;
  --border: #efe6de;
  --border-strong: #dccdc1;
  /* Pas „różowego papieru” pod sekcją pakietu i mosiądz ornamentów
     (eyebrow nad nagłówkami). --brass-ink trzyma 4,5:1 także na --band-rose. */
  --band-rose: #f5e9e6;
  --brass: #b08d57;
  --brass-ink: #7a5a31;
  /* Ziarno papieru — kafel SVG (feTurbulence), nakładany warstwą tła na
     sekcje z własnym tłem. Alfa w samym SVG, więc działa na każdym kolorze. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --accent: #eb0774;
  --accent-hover: #c70664;
  --accent-active: #a30553;
  --accent-soft: #fce8f2;
  --accent-ring: rgba(235, 7, 116, .35);
  --on-accent: #ffffff;
  /* paleta songful.com 1:1 (decyzja właściciela 2026-08-04) */
  --accent-2: #7a00c6;
  /* tint fioletu — para do --accent-soft (tint różu); używany w gradiencie
     sceny sekcji „Posłuchaj przykładów" (landing-player.css) */
  --accent-2-soft: #f3e8fd;
  --grad-accent: linear-gradient(90deg, var(--accent), var(--accent-2));
  --star: #ffcb45;

  /* Ciemna baza finału + stopki. #0a111f = kolor zmierzony pipetą ze stopki
     songful.com (2026-08-05) — to GRANAT, nie czerń: ma niebieski podkład
     (R10 G17 B31), przez co gradientowe CTA na nim świeci, a czerń by je gasiła.
     Tekst na granacie: biel dla nagłówka, przygaszone biele dla reszty. */
  --navy-deep: #0a111f;
  /* 2026-09-24: finał + stopka przechodzą z granatu na ciepłe espresso
     (śliwkowy brąz) — granat był chłodny obok kości słoniowej i zdjęć
     w ciepłym świetle. Gradientowe CTA świeci na nim tak samo. Nazwa tokenu
     --navy-deep zostaje dla stron, które go używają (patrz niżej). */
  --dark-warm: #22161a;
  --on-navy: #ffffff;
  --on-navy-soft: rgba(250, 250, 250, .65);
  --on-navy-mute: rgba(250, 250, 250, .78);
  --on-navy-faint: rgba(250, 250, 250, .55);
  --navy-hairline: rgba(255, 255, 255, .08);

  /* Tinty tła hero — ledwie widoczne, w rodzinie --accent (róż) i --accent-2
     (fiolet). Osobne tokeny, bo to farba tła sceny, nie kolor interfejsu. */
  --hero-tint-rose: #fbedef;
  --hero-tint-violet: #f9f1f6;
  --hero-mist-rose: rgba(235, 7, 116, .09);
  --hero-mist-violet: rgba(122, 0, 198, .07);

  --success: #059669;
  --success-ink: #047857;
  --success-soft: #ecfdf5;
  --warn: #92400e;
  --warn-soft: #fffbeb;
  --error: #ef4444;
  --error-ink: #b91c1c;
  --error-soft: #fef2f2;

  --focus-ring: 0 0 0 3px var(--accent-ring);

  /* typografia — DM Sans (tekst) + DM Serif Display (nagłówki), 1:1 z app.songlygift.com */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "DM Serif Display", Georgia, serif;
  /* Wyjątek świadomy: ekran tekstu piosenki (lyrics_review) — delikatny, ale
     wyraźny serif italic na wrażenie „rękopisu" tekstu do przeczytania, nie
     pola formularza. Sam webfont marki (DM Serif Display), Georgia jako fallback. */
  --font-serif-review: "DM Serif Display", Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  /* Mikrotypografia techniczna (tagi okazji, licznik czasu odsłuchu) —
     systemowy monospace, zero webfontów. */
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --fs-hero: clamp(2.25rem, 1.55rem + 3vw, 3.5rem);
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* odstępy */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* forma */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --touch: 48px;

  /* cień / ruch */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .07);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .09);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, .16);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;

  --container: 1140px;
  --container-narrow: 760px;
}

/* ---------------------------------------------------------------------- *
 * 3. BASE
 * ---------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* DM Serif Display ma WYŁĄCZNIE wagę 400 — nadpisuje domyślny bold nagłówków. */
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
p { overflow-wrap: anywhere; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container--narrow { max-width: var(--container-narrow); }
/* Strona formularza (/zamow): kolumna wąska jak wzorzec app.songlygift.com —
   mobile pozostaje full-width dzięki paddingowi `.container`. */
.container--order { max-width: 640px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section {
  padding-block: var(--sp-9);
}
.section--alt { background: var(--bg-alt); }
.section-head {
  max-width: 640px;
  margin-bottom: var(--sp-7);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-hover);
  margin-bottom: var(--sp-2);
}
.section-sub {
  color: var(--ink-soft);
  font-size: var(--fs-md);
  margin-top: var(--sp-3);
}

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

/* ---------------------------------------------------------------------- *
 * 4. PRZYCISKI
 * ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-base);
  border: 2px solid transparent;
  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),
              box-shadow var(--dur-2) var(--ease-out);
  white-space: normal;
  text-align: center;
}
.btn--primary {
  background: var(--grad-accent);
  /* Gradient liczony od krawędzi RAMKI, nie od paddingu: .btn ma 2px
     przezroczystej ramki, a przy domyślnym background-origin: padding-box
     gradient powtarzał się pod ramką — po lewej prześwitywał fiolet z końca,
     po prawej róż z początku (ostre paski na obu krawędziach pigułki). */
  background-origin: border-box;
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { filter: brightness(.92); box-shadow: var(--shadow-md); }
.btn--primary:active { filter: brightness(.85); transform: translateY(1px); box-shadow: var(--shadow-sm); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-hover); }
.btn--ghost:active { transform: translateY(1px); }

.btn--link {
  background: transparent;
  color: var(--accent-hover);
  padding-inline: var(--sp-2);
  min-height: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn--link:hover { color: var(--accent-active); }

.btn--sm { min-height: 38px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.btn--lg { min-height: 58px; padding: var(--sp-4) var(--sp-7); font-size: var(--fs-md); }
.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn[data-loading="true"] {
  color: transparent;
  pointer-events: none;
  position: relative;
}
.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  animation: btn-spin .7s linear infinite;
}
.btn--ghost[data-loading="true"]::after { border-color: rgba(10, 10, 10, .25); border-top-color: var(--ink); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-hover);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  padding: var(--sp-1) var(--sp-3);
  min-height: 32px;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.copy-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.copy-btn[data-copied="true"] { color: var(--success); border-color: var(--success); background: var(--success-soft); }

/* ---------------------------------------------------------------------- *
 * 5. FORMULARZE (pola, kafelki)
 * ---------------------------------------------------------------------- */
.field { margin-bottom: var(--sp-5); }
.field-label {
  display: block;
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}
.field-hint {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  margin-top: var(--sp-2);
}
.field-error {
  color: var(--error-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-top: var(--sp-2);
  min-height: 1em;
}
.field-count {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  text-align: right;
  margin-top: var(--sp-2);
}
.field-count.is-invalid { color: var(--error-ink); font-weight: 700; }
/* Mówiący licznik historii (PACZKA 1, pkt 3): trzy stany zamiast "143/1000". */
.field-count.is-ok { color: var(--success-ink); font-weight: 600; }
.field-count.is-over { color: var(--error-ink); font-weight: 700; text-align: left; }

/* Informacja, której nie wolno przeoczyć (PACZKA 1, pkt 7) — np. „Na ten
   adres wyślemy link do piosenki." przy polu e-mail. Pełny rozmiar tekstu
   i delikatne tło zamiast drobnego druku .field-hint. */
.field-note {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-soft);
  color: var(--ink-soft);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.input,
.textarea {
  display: block;
  width: 100%;
  min-height: var(--touch);
  padding: var(--sp-3) var(--sp-4);
  font-size: 16px; /* iOS: bez auto-zoomu */
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.input:hover, .textarea:hover { border-color: var(--ink-faint); }
.input:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--error); }
.input:disabled, .textarea:disabled { background: var(--bg-alt); color: var(--ink-faint); cursor: not-allowed; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.textarea { resize: vertical; line-height: var(--lh-normal); }
.textarea--lyrics { min-height: 320px; font-size: var(--fs-base); }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.tile-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tile {
  display: flex;
  min-width: 0;
  overflow-wrap: anywhere;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--touch);
  padding: var(--sp-3) var(--sp-3);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.tile:active { transform: scale(.98); }
.tile[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-hover);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.tile:disabled { opacity: .45; cursor: not-allowed; }

/* Kafelek dwuwierszowy (PACZKA 1, pkt 12): nazwa + opis jednym zdaniem. */
.tile--rich {
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-3);
}
.tile-name { display: block; max-width: 100%; }
.tile-desc {
  display: block;
  max-width: 100%;
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: var(--lh-tight, 1.3);
  color: var(--ink-faint);
}
.tile[aria-pressed="true"] .tile-desc { color: inherit; }

/* Kafelek gatunku z przyciskiem próbki (PACZKA 1, pkt 11): dwa OSOBNE
   przyciski w jednym wrapie — button w buttonie to nieprawidłowy HTML,
   a akcje „wybierz gatunek" i „posłuchaj" są celowo rozdzielone. */
.tile-wrap { position: relative; display: flex; min-width: 0; }
.tile-wrap > .tile { flex: 1 1 auto; width: 100%; }
/* Osobny pas nad tekstem mieści przycisk próbki i jego pierścień postępu.
   Klasa z szablonu zamiast :has() — Safari < 15.4 i starsze silniki
   odrzuciłyby regułę, a przycisk próbki przykryłby nazwę gatunku. */
.tile-wrap--sample > .tile--rich { padding-top: 60px; }

.tile-play {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--accent-hover);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.tile-play:hover { border-color: var(--accent); background: var(--accent-soft); }
.tile-play:active { transform: scale(.94); }
.tile-play:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
/* Trójkącik odtwarzania — JEDYNA dopuszczona „ikona" formularza (decyzja
   właściciela w zleceniu PACZKA 1). Rysowany borderem, dziedziczy kolor. */
.tile-play__tri {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
/* Pierścień postępu odtwarzania: --p (0-100) ustawia JS, conic-gradient
   maskowany do obrączki wokół przycisku. */
.tile-play::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}
.tile-play.is-playing { border-color: var(--accent); color: var(--accent); }
.tile-play.is-playing::before { opacity: 1; }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.checkbox-row input[type="checkbox"] {
  width: 22px; height: 22px;
  flex-shrink: 0;
  accent-color: var(--accent);
  margin-top: 2px;
}
.checkbox-row a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
.checkbox-row a:hover { color: var(--accent-active); }

.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--success-soft);
  color: var(--success);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  animation: toast-in var(--dur-3) var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.form-note {
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
}
.form-note--warn { background: var(--warn-soft); color: var(--warn); }
.form-note--error { background: var(--error-soft); color: var(--error); }
.form-note--info { background: var(--accent-soft); color: var(--accent-active); }

/* ---------------------------------------------------------------------- *
 * 6. HEADER
 * ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 247, 243, .94);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
          backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--border);
}
/* The shared script measures the header, including wrapping and font changes. */
.wizard,
.wizard input,
.wizard textarea,
.wizard .tile,
main .section[id] {
  scroll-margin-top: var(--header-scroll-offset, 112px);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}
/* Lockup marki (zatwierdzony 2026-08-05): znak „serce-fala" + wordmark serif.
   Wordmark na --font-display (DM Serif Display, waga 400) z lekko dodatnim
   trackingiem — nie bold-sans jak wcześniej. `line-height: 1` jest tu robotą
   konstrukcyjną: trzyma wysokość logo na 36 px (sam znak), czyli PONIŻEJ
   przycisku CTA w headerze (44 px zmierzone) — to on dyktuje wysokość paska,
   więc nawigacja nie rośnie ani o piksel: 69 px na desktopie i 93 px na
   mobile, dokładnie tyle co przed zmianą. Ten sam lockup obowiązuje na
   landingu, /zamow, /s/<token> i stronach prawnych. */
.logo {
  display: inline-flex;
  align-items: center;
  /* Odstęp znak↔wordmark niesie margines SAMEGO znaku, nie `gap` kontenera:
     w inline-flexie każdy węzeł tekstowy jest osobnym flex-itemem, więc `gap`
     rozpychał też kropkę na końcu wordmarku (i rozpychałby ją na stronach
     prawnych, których szablony nie są częścią tej zmiany). */
  gap: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lg);
  /* mikro-tracking: serif w małym stopniu potrzebuje oddechu między literami;
     poniżej progu tokenizacji odstępów (to typografia znaku, nie layout) */
  letter-spacing: .2px;
  line-height: 1;
  color: var(--ink);
}
.logo-mark {
  /* Znak 3D (public/_logo_mark.html) ma w kadrze gwiazdki w prawym górnym
     rogu, więc samo serce zajmuje ~80% kafla — 40 px trzyma optyczną wagę
     dawnego 36 px i nadal mieści się pod 44 px przycisku CTA. */
  width: 40px; height: 40px;
  flex-shrink: 0;
  margin-right: var(--sp-2);
}
.logo-mark img { display: block; width: 100%; height: 100%; }
.logo-dot { color: var(--accent); }
.site-header--simple .container { justify-content: center; }
.header-cta__short { display: none; }
@media (max-width: 600px) {
  .page-landing .site-header .container { gap: 8px; padding-block: 8px; }
  .page-landing .logo { font-size: 18px; min-height: 44px; letter-spacing: 0; }
  .page-landing .logo-word { white-space: nowrap; }
  .page-landing .logo-mark { width: 34px; height: 34px; margin-right: 4px; }
  .page-landing .header-cta { flex-shrink: 0; min-height: 44px; padding: 10px 12px; }
  .header-cta__full { display: none; }
  .header-cta__short { display: inline; }
}
/* Najwęższe telefony (≤360px): „Za darmo” obok pełnego logo — minimalnie
   ciaśniej, żeby nagłówek nie wychodził poza ekran. */
@media (max-width: 360px) {
  .page-landing .logo { font-size: 16px; }
  .page-landing .logo-mark { width: 30px; height: 30px; }
  .page-landing .header-cta { padding: 10px; font-size: 15px; }
}

/* ---------------------------------------------------------------------- *
 * 7. HERO
 * ---------------------------------------------------------------------- */
/* Tło hero: ta sama stylistyka co dotąd (jasno, pudrowo), ale o stopień
   wyraźniejsze i cieplejsze — wcześniejszy pojedynczy radial gasł w --bg już
   w połowie sekcji i scena wyglądała jak biała kartka. Teraz: bazowy skos
   róż → fiolet → --bg (czyli kadr NIGDY nie schodzi do czystej bieli u góry)
   + dwie bardzo miękkie mgiełki akcentów (przy karcie wideo w prawym górnym
   rogu i pod tekstem po lewej). Kontrast typografii bez zmian — najciemniejszy
   tint ma luminancję ~0.94, więc --ink i --ink-soft trzymają te same wartości
   AA co na --bg. */
.hero {
  padding-block: var(--sp-9) var(--sp-8);
  background:
    radial-gradient(58% 52% at 86% -4%, var(--hero-mist-rose) 0%, transparent 70%),
    radial-gradient(46% 44% at 6% 96%, var(--hero-mist-violet) 0%, transparent 72%),
    linear-gradient(165deg, var(--hero-tint-rose) 0%, var(--hero-tint-violet) 55%, var(--bg) 100%);
  text-align: center;
  overflow: hidden; /* karta wideo pochylona + unosząca się nie ma wywoływać poziomego scrolla */
}
.hero .container { max-width: 860px; }
.hero h1 { margin-bottom: var(--sp-4); }
.hero-sub {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
}
.hero-microcopy {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

/* -- hero__grid: tekst + pochylona karta wideo (Zadanie 2) -----------------
   Mobile: karta POD tekstem, wyśrodkowana. ≥1024px: 2 kolumny, karta
   nachodzi lekko na tekst (ujemny margines) ale ZOSTAJE pod CTA (z-index). */
.hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-7);
}
.hero__copy { position: relative; z-index: 2; width: 100%; }
.hero__media {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (min-width: 1024px) {
  .hero .container.hero__grid { max-width: 1180px; }
  .hero__grid {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
    text-align: left;
  }
  .hero__copy { flex: 1 1 480px; max-width: 560px; }
  .hero__copy .hero-sub,
  .hero__copy .hero-microcopy { margin-inline: 0; }
  .hero__media { flex: 1 1 420px; }
}
@media (min-width: 1280px) {
  .hero__media { margin-left: -56px; }
}

.hero-video-wrap {
  width: min(400px, 82vw);
  animation: hero-float 6s ease-in-out infinite;
}
@media (min-width: 1024px) {
  .hero-video-wrap { width: min(400px, 32vw); }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
/* Kontrolki wideo hero — nienachalne pigułki na dolnej krawędzi karty */
.hero-video-controls {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.hv-btn {
  font: 500 var(--fs-xs)/1 var(--font-sans);
  color: #fff;
  background: rgba(10, 10, 10, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  opacity: .85;
  transition: opacity .15s ease, background .15s ease;
}
.hv-btn:hover { opacity: 1; background: rgba(10, 10, 10, .78); }
.hv-btn:active { background: rgba(10, 10, 10, .9); }
.hv-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); opacity: 1; }

.hero-video-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--accent-soft) 0%, var(--bg-alt) 100%);
  border: 6px solid var(--surface);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .07),
              0 20px 44px rgba(0, 0, 0, .16),
              0 48px 96px rgba(235, 7, 116, .14);
  transform: rotate(-5deg);
  transition: transform var(--dur-3) var(--ease-out);
}
.hero-video-card:hover,
.hero-video-card:focus-within {
  transform: rotate(0deg) scale(1.02);
}
.hero-video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-6);
  background: linear-gradient(165deg, var(--accent-soft) 0%, var(--surface) 130%);
}
.hero-video-fallback__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-md);
}
.hero-video-fallback__caption {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------- *
 * 8. SCROLL-REVEAL (.rv → .vis) — miękkie wejście sekcji, landing + /zamow
 *
 * Dlaczego `translate` zamiast `transform`: elementy, które rewelujemy, mają
 * już własne transformy (karta wideo hero rotate(-5deg), .tp-card hover
 * translateY, .btn active) — indywidualna właściwość `translate` komponuje
 * się z nimi zamiast je kasować, więc reveal nie psuje żadnej istniejącej
 * mikro-interakcji. Bonus: ruch samym translate/opacity nie liczy się do CLS.
 *
 * Dlaczego podwójna klasa `.rv.rv`: sekcja przykładów ładuje landing-player.css
 * PO main.css, a `.tp-card` deklaruje tam własny skrót `transition` — przy
 * równej specyfice (0,1,0) skasowałby przejście revealu. (0,2,0) wygrywa
 * bez sięgania po !important.
 * ---------------------------------------------------------------------- */
.rv.rv {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .65s ease-out,
              translate .65s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--rv-i, 0) * 70ms);
}
.rv.vis.vis {
  opacity: 1;
  translate: none;
}
/* Wariant dla H1 hero (kandydat LCP): sam ruch, opacity 1 od 1. klatki. */
.rv.rv--lift {
  opacity: 1;
  translate: 0 14px;
}
/* Wariant bez JS (strona /zamow nie ładuje landing.js): to samo wejście,
   ale odpalane animacją CSS zaraz po sparsowaniu — nigdy nie zostawia
   elementu niewidocznego, gdy nikt nie doda `.vis`. */
.rv.rv--auto {
  animation: rv-in .65s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes rv-in {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv.rv,
  .rv.rv--lift,
  .rv.rv--auto {
    opacity: 1;
    translate: none;
    transition: none;
    animation: none;
  }
}

/* ---------------------------------------------------------------------- *
 * 9. „PROSTE JAK 1–2–3” — trzy POZIOME karty jedna pod drugą (wzorzec
 * SonglyGift „Simple as 1–2–3", zrzut właściciela): wąska kolumna, ikona po
 * lewej, po prawej wiersz „KROK N" + badge (co darmowe, co płatne), tytuł,
 * opis. Karta kroku płatnego wyróżniona tintem akcentu.
 * ---------------------------------------------------------------------- */
.steps-rows {
  display: grid;
  gap: var(--sp-4);
  /* 660px ze wzorca — węziej niż --container-narrow (760px), żeby poziome
     karty czytały się jak lista kroków, nie jak pełnej szerokości panele. */
  max-width: 660px;
  margin-inline: auto;
}
.step-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  /* 16px ze zrzutu wzorca (między tokenami --radius 14px / --radius-lg 22px) */
  border-radius: 16px;
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
/* Krok płatny: obwódka w tincie akcentu + bardzo delikatny różowy tint tła
   (--accent-soft) — wyróżnienie, nie krzyk. */
.step-row--paid {
  border-color: var(--accent-ring);
  background: var(--accent-soft);
}

.step-row__ico {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-row__ico img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
/* Emoji-fallback: widoczne dopiero, gdy `onerror` zdejmie <img> (pliki ikon
   generowane osobno — do tego czasu karta wygląda kompletnie). */
.step-row__emoji { display: none; }
.step-row__ico.is-fallback {
  border-radius: 50%;
  background: var(--accent-soft);
}
.step-row__ico.is-fallback .step-row__emoji {
  display: block;
  font-size: 26px;
  line-height: 1;
}
/* Na karcie płatnej tło karty jest już różowe — kółko fallbacku bierze biel,
   żeby nie zniknęło w tincie. */
.step-row--paid .step-row__ico.is-fallback { background: var(--surface); }

/* ---------------------------------------------------------------------- *
 * 9a. ANIMOWANE IKONY KROKÓW (2026-09-23) — czysty CSS, zero bibliotek.
 * Pióro pisze (stalówka drga i przesuwa się, pod nią rysuje się różowa
 * kreska atramentu), słuchawki kiwają się w rytm i wypuszczają nutki,
 * serce-prezent bije podwójnym „tuk-tuk” i iskrzy. Domyślnie ikony STOJĄ —
 * ruch gra tylko, gdy kursor jest nad kartą (decyzja właściciela
 * 2026-09-23); na dotyku :hover włącza się stuknięciem w kartę.
 * prefers-reduced-motion gasi wszystko regułą globalną z §3.
 * ---------------------------------------------------------------------- */
.step-row__ico { position: relative; }
.step-row__ico img { will-change: transform; }
.ico-fx { position: absolute; pointer-events: none; }
.step-row__ico.is-fallback .ico-fx { display: none; }

/* -- krok 1: pióro -------------------------------------------------------- */
.ico-fx--ink {
  /* start tuż za kleksem pod stalówką, kończy się w odstępie karty */
  left: 27px; top: 44px;
  width: 28px; height: 10px;
  overflow: visible;
}
.ico-fx--ink path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* przerwa > długość kreski i start z offsetem 110: przy 100/100
     okrągłe zakończenie zerowej kreski zostawiało kropki na końcach */
  stroke-dasharray: 100 120;
  stroke-dashoffset: 110;
}
/* obrót wokół stalówki (lewy dół kadru), nie środka obrazka */
.step-row__ico--pen img { transform-origin: 33% 82%; }
.step-row:hover .step-row__ico--pen img { animation: ico-pen-write 3.6s ease-in-out infinite; }
.step-row:hover .ico-fx--ink path { animation: ico-ink-draw 3.6s ease-in-out infinite; }
@keyframes ico-pen-write {
  /* samo kołysanie wokół stalówki (kleks pod nią jest częścią obrazka,
     więc przesuw całości wyglądałby jak ślizganie ikony) */
  0%        { transform: rotate(0); }
  5%        { transform: rotate(-5deg); }
  10%       { transform: rotate(3deg); }
  15%       { transform: rotate(-5deg); }
  20%       { transform: rotate(3deg); }
  25%       { transform: rotate(-5deg); }
  30%       { transform: rotate(3deg); }
  35%       { transform: rotate(-5deg); }
  40%       { transform: rotate(3deg); }
  48%       { transform: rotate(0); }
  60%       { transform: translateY(-3px) rotate(-8deg); }
  80%, 100% { transform: rotate(0); }
}

@keyframes ico-ink-draw {
  0%, 4%    { stroke-dashoffset: 110; opacity: 1; }
  48%       { stroke-dashoffset: 0; opacity: 1; }
  70%       { stroke-dashoffset: 0; opacity: 1; }
  84%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* -- krok 2: słuchawki + nutki ------------------------------------------ */
.step-row:hover .step-row__ico--phones img { animation: ico-phones-bob 1.3s ease-in-out infinite; }
@keyframes ico-phones-bob {
  0%, 100% { transform: rotate(-3deg) translateY(0) scale(1); }
  25%      { transform: rotate(0) translateY(-2px) scale(1.04); }
  50%      { transform: rotate(3deg) translateY(0) scale(1); }
  75%      { transform: rotate(0) translateY(-2px) scale(1.04); }
}
.ico-fx--note {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
}
.ico-fx--n1 { left: -4px; top: 14px; color: var(--accent);   --dx: -8px; --rot: -18deg; }
.ico-fx--n2 { right: -6px; top: 6px;  color: var(--accent-2); --dx: 8px;  --rot: 16deg; }
.ico-fx--n3 { right: -2px; top: 26px; color: var(--accent);   --dx: 12px; --rot: 22deg; }
.step-row:hover .ico-fx--note { animation: ico-note-fly 2.7s ease-out infinite; }
.step-row:hover .ico-fx--n2 { animation-delay: .9s; }
.step-row:hover .ico-fx--n3 { animation-delay: 1.8s; }
@keyframes ico-note-fly {
  0%   { opacity: 0; transform: translate(0, 6px) scale(.6) rotate(0); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -26px) scale(1.05) rotate(var(--rot)); }
}

/* -- krok 3: serce-prezent ----------------------------------------------- */
.step-row:hover .step-row__ico--gift img { animation: ico-heartbeat 1.8s ease-in-out infinite; }
@keyframes ico-heartbeat {
  0%, 50%, 100% { transform: scale(1); }
  12%           { transform: scale(1.1); }
  24%           { transform: scale(.98); }
  36%           { transform: scale(1.07); }
}
.ico-fx--spark { fill: var(--star); opacity: 0; }
.ico-fx--s1 { right: -5px; top: -4px; width: 13px; height: 13px; }
.ico-fx--s2 { left: -5px; bottom: 6px; width: 9px; height: 9px; }
.step-row:hover .ico-fx--spark { animation: ico-twinkle 2.4s ease-in-out infinite; }
.step-row:hover .ico-fx--s2 { animation-delay: 1.2s; }
@keyframes ico-twinkle {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0); }
  30%      { opacity: 1; transform: scale(1) rotate(45deg); }
  60%      { opacity: 0; transform: scale(.4) rotate(90deg); }
}
.ico-fx--mini-heart {
  left: 50%; top: -2px;
  margin-left: -5px;
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  opacity: 0;
}
.step-row:hover .ico-fx--mini-heart { animation: ico-heart-rise 3.2s ease-out .6s infinite; }
@keyframes ico-heart-rise {
  0%   { opacity: 0; transform: translate(0, 4px) scale(.5); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(7px, -22px) scale(1.1) rotate(12deg); }
}

.step-row__body { min-width: 0; }
.step-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.step-row__label {
  font-family: var(--font-mono);
  font-size: 12px; /* mikrotypografia techniczna — poniżej skali --fs-xs (13px) */
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.step-row__badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--success);
}
.step-row--paid .step-row__badge {
  font-weight: 700;
  color: var(--accent);
}
.step-row__title {
  /* 17px ze wzorca — między --fs-base (16px) a --fs-md (18px); tytuł kroku
     jest etykietą listy, nie nagłówkiem sekcji, więc sans + bold zamiast
     serifowego domyślnego h3. */
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-bottom: var(--sp-1);
}
.step-row__text {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: var(--lh-normal);
}

.steps-cta {
  margin-top: var(--sp-6);
  text-align: center;
}
.steps-cta__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--accent);
}

@media (max-width: 479px) {
  .step-row { padding: var(--sp-4); gap: var(--sp-3); }
  .step-row__ico,
  .step-row__ico img { width: 48px; height: 48px; }
  .ico-fx--ink { left: 25px; top: 37px; width: 24px; }
  /* Wąski ekran: pigułka na pełną szerokość — inaczej strzałka CTA łamie się
     do drugiego wiersza (padding --sp-7 zjada 96px z 342px kolumny). */
  .steps-cta .btn { width: 100%; padding-inline: var(--sp-5); }
}

/* ---------------------------------------------------------------------- *
 * 11. „CO DOSTAJESZ” — replika "Everything you get" (songful.com): grid
 * 2 kolumny ≥1140px (karta z listą + karta ze zdjęciem), niżej stos w jednej
 * wyśrodkowanej kolumnie (karta z listą pierwsza — kolejność 1:1 z DOM).
 * Karty wyrównane wysokością przez domyślne align-items:stretch grida.
 * Liczby wzorca (zmierzone na produkcyjnym CSS songful): karta 602×663,
 * radius 24, border 1px, padding 48/32, nagłówek 30px wyśrodkowany, pozycje
 * 18/28 w szarości z czarnym leadem, odstęp pozycji 20, ptaszek 20px
 * z gradientem róż→fiolet i rysunkiem 12px, separator 1px z 32px oddechu.
 * ---------------------------------------------------------------------- */
.package-grid {
  display: grid;
  gap: var(--sp-6);
  /* SZEROKOŚĆ PARY KART. Dawny kap 1030px zwężał ją o 62px względem nagłówka
     sekcji i CTA pod spodem, a kolumna listy schodziła do 499px — wzorzec ma
     ~600px. Efekt uboczny wąskiej kolumny: KAŻDA pozycja listy łamała się na
     dwie linie (karta rosła do 859px wysokości), a slot zdjęcia robił się wąski
     i wysoki — źródło jest KWADRATOWE (720×720), więc `cover` obcinał wtedy po
     ~164px z każdego boku telefonu.
     Teraz: pełna szerokość kontenera (1092px) + symetryczne rozpychanie do
     1244px — ale wyłącznie z wolnego marginesu strony: bleed rośnie dokładnie
     w tempie przyrostu marginesu, więc od krawędzi okna zostaje stałe 48px, a
     na wąskich ekranach clamp zeruje bleed. Sekcja nigdy nie wychodzi poza
     viewport (sprawdzone od 320 do 2560px — zero przewijania poziomego). */
  --pkg-bleed: clamp(0px, (100vw - 1188px) / 2, 76px);
  /* Stos (poniżej progu dwóch kolumn): JEDNA kolumna wyśrodkowana z kapem 672px
     — dokładnie jak wzorzec (`max-w-2xl mx-auto md:mx-0`). Bez kapu wiersz listy
     na tablecie miałby ~110 znaków, a zdjęcie rozdymało się na całą szerokość. */
  max-width: 672px;
  margin-inline: auto;
}
/* Dwie kolumny dopiero, gdy każda ma sens szerokościowo (≥530px). Przy dawnym
   progu 1024px kolumny schodziły do 472px: lista łamała się wszędzie, a kwadratowe
   zdjęcie traciło po ~194px z każdego boku. */
@media (min-width: 1140px) {
  .package-grid {
    /* Dokładnie 1:1 — minmax(0,…), żeby zdjęcie nie rozepchnęło swojej kolumny. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: none;
    margin-inline: calc(-1 * var(--pkg-bleed));
  }
}

.package-card {
  /* 24px ze wzorca (rounded-3xl) — najbliższy token to --radius-lg 22px.
     Przy karcie ~530×800 mniejszy promień (16px) czytał się twardo. */
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Kontur zamiast szarego bloku: KOMPLET dla obu kart (lista i zdjęcie),
     żeby para wyglądała jak jeden system, a nie jak plama + fotografia. */
  border: 1px solid var(--border);
}
.package-card--list {
  /* Wzorzec: karta JAŚNIEJSZA od tła sekcji + hairline. Nasze tło strony to
     już --bg (#fafafa), więc rolę „jaśniejszej płaszczyzny" bierze --surface;
     szary --bg-alt zlewał się z tłem i bez konturu dawał efekt plamy. */
  background: var(--surface);
  /* 48/32 — 1:1 ze wzorcem (py-12 px-8). */
  padding: var(--sp-7) var(--sp-6);
  display: flex;
  flex-direction: column;
}
.package-card__heading {
  font-size: var(--fs-xl);
  /* Wzorzec centruje nagłówek karty — spina listę optycznie w jedną kolumnę
     i powtarza wyśrodkowanie nagłówka sekcji. */
  text-align: center;
  margin-bottom: var(--sp-6);
}
.package-card--media > picture {
  display: block;
  height: 100%;
}
.package-card--media > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Reserve the square image before lazy loading, so anchors below stay put. */
@media (max-width: 1139px) {
  .package-card--media > picture,
  .package-card--media > picture img { height: auto; }
}

.package-list {
  display: flex;
  flex-direction: column;
  /* Odstęp MIĘDZY pozycjami musi być wyraźnie większy niż interlinia WEWNĄTRZ
     pozycji (25.6px) — inaczej dwuwierszowe pozycje zlewają się w blok tekstu.
     Dawne --sp-4 (16px) było MNIEJSZE od interlinii i to była główna przyczyna
     „ściany tekstu" zamiast listy korzyści. */
  gap: var(--sp-5);
  /* Minimalny oddech nad kreską ceny (wzorzec: 32px nad i pod separatorem);
     samo `margin-top:auto` na .package-price dawało 0px, gdy karta nie miała
     zapasu wysokości — kreska przyklejała się do ostatniej pozycji. */
  margin-bottom: var(--sp-6);
}
.package-list__item {
  display: flex;
  align-items: flex-start;
  /* 16px ikona→tekst (wzorzec); 12px zlepiało ptaszek z pierwszym słowem. */
  gap: var(--sp-4);
  font-size: var(--fs-base);
  /* Hierarchia jak we wzorcu: treść w szarości, wytłuszczony lead w czerni.
     Wcześniej CAŁA lista była --ink — bold nie odróżniał się od reszty, więc
     nie dało się skanować pozycji wzrokiem.
     Szarość MOCNIEJSZA niż --ink-soft: to główna treść sprzedażowa karty, nie
     przypis. Wartość liczona z tokenów (--ink zmieszany z tłem karty), więc nie
     wprowadza nowego koloru do palety; wychodzi ~#535353, czyli tyle co we
     wzorcu, i podnosi kontrast z 4.7:1 (ledwie AA) do ~7.7:1.
     --ink-soft zostaje jako fallback dla silników bez color-mix. */
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink) 70%, var(--surface));
  line-height: var(--lh-normal);
  /* `pretty`, NIE `balance`: balance wyrównuje długość wierszy, ale przez to
     skraca je do ~60% szerokości karty — pozycje jednowierszowe zostawały pełne,
     dwuwierszowe robiły się wąską kolumną i karta wyglądała na pustą po prawej.
     `pretty` trzyma wiersze pełne i tylko nie dopuszcza do sieroty (ostatniej
     linii z jednym słowem). */
  text-wrap: pretty;
}
.package-list__item b { font-weight: 700; color: var(--ink); }
.package-list__item a,
.faq-answer-inner a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 500; }
.package-list__item a:hover { color: var(--accent-active); }
.package-list__item a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.package-list__check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  /* Gradient marki (róż→fiolet) — ten sam, którym wzorzec znaczy pozycje. */
  background: var(--grad-accent);
  color: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Ptaszek wyrównany do PIERWSZEJ LINII tekstu, nie do środka bloku:
     (wysokość linii − 20px) / 2. Fallback 3px dla silników bez jednostki `lh`
     (25.6px interlinii − 20px kółka) / 2 ≈ 2.8px. */
  margin-top: 3px;
  margin-top: calc((1lh - 20px) / 2);
}

.package-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  /* auto = jeśli karta z listą zostanie rozciągnięta wyżej niż jej treść
     (karta-zdjęcie wyższa na danym breakpoincie), cena i tak trzyma się dołu */
  margin-top: auto;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.package-price__amount {
  /* DM Serif Display ma wyłącznie wagę 400 (brak realnego bold) — cena ma
     wyglądać jak cena, nie jak nagłówek, więc zostaje przy DM Sans 700.
     2.125rem = ~34px ze zrzutu wzorca (bez dopasowanego tokenu --fs-*). */
  font-weight: 700;
  font-size: 2.125rem;
  /* Kwota ma własną, ciasną interlinię — z odziedziczonym --lh-normal (1.6)
     pudełko liczby miało 54px wysokości i rozpychało dół karty pustką. */
  line-height: var(--lh-tight);
  color: var(--ink);
}
.package-price__pill {
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--fs-xs);
  /* 500 zamiast 700: pigułka ma być etykietą przy cenie, nie drugim krzykiem
     obok kwoty (wzorzec ma tu font-medium). */
  font-weight: 500;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.package-cta {
  text-align: center;
  margin-top: var(--sp-7);
}
.package-cta__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-soft);
}
@media (max-width: 639px) {
  .package-card--list { padding: var(--sp-6) var(--sp-5); }
  .package-price__amount { font-size: var(--fs-2xl); }
}

/* ---------------------------------------------------------------------- *
 * 11b. GATUNKI I STYLE — replika "Choose from genres & styles they will love"
 * (songful.com, zrzut wzorca): wyśrodkowane pigułki gatunków w dwóch rzędach
 * + siatka CIEMNYCH kart substylów (do 4 w rzędzie, ostatni rząd wyśrodkowany).
 * Markup buduje app/static/js/glosy.js z manifestu; tutaj żyje CAŁY wygląd.
 *
 * Dlaczego ciemne karty na jasnej stronie: tak ma wzorzec i to jedyny taki
 * akcent w serwisie — kolory zostają TOKENAMI LOKALNYMI sekcji (nie wchodzą
 * do globalnej palety w :root, bo nie są częścią systemu jasnego motywu).
 * ---------------------------------------------------------------------- */
.genres {
  /* granat wzorca (#0d1220) + jego jaśniejszy wariant pod hover karty */
  --glos-bg: #0d1220;
  --glos-bg-hover: #141b2e;
  --glos-title: #ffffff;
  /* szarość opisu ze wzorca — czytelna na granacie, wyraźnie cichsza od tytułu */
  --glos-text: #9aa3b2;
  --glos-faint: rgba(255, 255, 255, .4);   /* strzałki „ghost" */
  --glos-faint-hover: rgba(255, 255, 255, .92);
  --glos-hairline: rgba(255, 255, 255, .08);
}

/* Nagłówek szerszy niż globalne 640px `.section-head`: przy --fs-2xl (40px na
   ≥1440) tytuł sekcji łamał się na dwa wiersze, a wzorzec trzyma go w jednej
   linii. Zmiana WYŁĄCZNIE w tej sekcji — reszta strony bez zmian. */
.genres .section-head { max-width: 880px; }

.genres-box { max-width: 1120px; margin-inline: auto; }

/* -- pigułki gatunków ---------------------------------------------------- */
.genre-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-6);
}
.genre-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* strefa dotyku; wzorzec ma ~40px */
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background 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);
}
/* `.rv.rv` (sekcja 8) ma specyfikę (0,2,0) i SKRÓTEM `transition` kasuje własne
   przejścia hover pigułek/kart. Po odsłonięciu przywracamy je tutaj — razem
   z przejściami revealu, żeby stagger (`--rv-i`) nie przepadł. Reguła stoi
   dalej w pliku niż sekcja 8, więc przy równej specyfice wygrywa kolejnością. */
.genre-pill.vis {
  transition: background 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),
              opacity .65s ease-out calc(var(--rv-i, 0) * 70ms),
              translate .65s cubic-bezier(.22, 1, .36, 1) calc(var(--rv-i, 0) * 70ms);
}
.genre-pill:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.genre-pill:active { transform: translateY(1px); }
.genre-pill.is-active,
.genre-pill.is-active:hover {
  background: var(--grad-accent);
  background-origin: border-box; /* jak .btn--primary — bez pasków pod ramką */
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
/* -- karty substylów ----------------------------------------------------- */
.genre-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-4);
  /* Podmiana kart przy zmianie gatunku = krótkie przygaszenie (glosy.js
     dokłada .is-swapping na czas wymiany treści). */
  transition: opacity var(--dur-3) var(--ease-out);
}
.genre-cards.is-swapping { opacity: 0; }
.genre-cards:empty { display: none; }

.glos-card {
  display: flex;
  flex-direction: column;
  /* Mobile: jedna karta na pełną szerokość kolumny. Szerokości stałe (bez
     flex-grow) — dzięki temu karty ostatniego, niepełnego rzędu mają
     DOKŁADNIE tę samą szerokość co rząd pełny, jak we wzorcu. */
  flex: 0 1 100%;
  padding: var(--sp-5);
  border-radius: 16px;              /* 1:1 ze wzorcem (między --radius a --radius-lg) */
  background: var(--glos-bg);
  text-align: center;
  transition: background var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.glos-card.vis {                     /* patrz komentarz przy .genre-pill.vis */
  transition: background var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              opacity .65s ease-out calc(var(--rv-i, 0) * 70ms),
              translate .65s cubic-bezier(.22, 1, .36, 1) calc(var(--rv-i, 0) * 70ms);
}
.glos-card:hover {
  background: var(--glos-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.glos-card__title {
  /* Wyjątek świadomy: TU sans (DM Sans 700), nie serif nagłówków — wzorzec ma
     w kartach ciężki bezszeryfowy tytuł i tylko tak sekcja czyta się 1:1. */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.1875rem;             /* 19px ze zrzutu wzorca */
  line-height: var(--lh-snug);
  color: var(--glos-title);
}
.glos-card__similar {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--glos-text);
}
.glos-card__controls {
  /* margin-top:auto zrównuje wiersz sterowania w całym rzędzie, niezależnie
     od tego, ile linii zajął opis „podobny do…". */
  margin-top: auto;
  padding-top: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}
.glos-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 44px;        /* wąski „ghost", ale pełna strefa dotyku */
  border-radius: var(--radius-sm);
  color: var(--glos-faint);
  font-size: var(--fs-lg);
  line-height: 1;
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.glos-nav:hover { color: var(--glos-faint-hover); }
.glos-nav:active { transform: scale(.9); }
.glos-nav:disabled { opacity: .35; cursor: default; transform: none; }
.glos-nav:focus-visible { outline-color: var(--glos-title); }

.glos-play {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.glos-play:hover { transform: scale(1.06); filter: brightness(1.06); }
.glos-play:active { transform: scale(.96); }
.glos-play:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }
.glos-play:focus-visible { outline-color: var(--glos-title); }
.glos-play svg { width: 16px; height: 16px; }
.glos-play .is-off { display: none; }
/* Stan ładowania klipu: subtelny puls, bez podmiany ikony (klip startuje
   w ułamku sekundy — migotanie ikon byłoby gorsze niż nic). */
.glos-card.is-loading .glos-play { animation: glos-pulse 1s var(--ease-out) infinite; }
@keyframes glos-pulse { 50% { filter: brightness(1.25); } }

.glos-card__count {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--glos-faint);
}
/* Klip nie wstał (brak pliku / błąd sieci) — karta mówi to wprost zamiast
   udawać, że gra. */
.glos-card__error {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--glos-text);
}

/* Pusty stan sekcji: manifestu jeszcze nie ma (albo nie da się go wczytać).
   Element jest w DOM od startu — bez JS zostaje widoczny i sekcja nigdy nie
   wygląda na urwaną. */
.genres-info, .genres-catalog {
  max-width: 760px;
  margin: var(--sp-5) auto;
  text-align: center;
  color: var(--ink-soft);
}
.genres-link { display: inline-flex; align-items: center; min-height: 44px; }
.genre-pills:empty { display: none; }
.genres-soon {
  padding: var(--sp-3);
  text-align: center;
  color: var(--ink-soft);
}

@media (min-width: 560px) {
  .glos-card { flex: 0 1 220px; }
}

/* 2026-09-24 (właściciel): mniej powietrza. Pigułki mniejsze, żeby wszystkie
   gatunki stały w JEDNEJ linii na monitorze; karty stylów ściśnięte. */
.genre-pills {
  gap: var(--sp-4) var(--sp-2);     /* rząd: miejsce na zakładkę „Popularne" */
  padding-top: 10px;
  margin-bottom: var(--sp-5);
}
.genre-pill {
  position: relative;
  min-height: 40px;
  padding: var(--sp-1) 14px;
}
/* Krótkie nazwy (Pop, Rap) są węższe niż zakładka — bez tego zakładki
   sąsiadów nachodziły na siebie. */
.genre-pill--popular { min-width: 74px; justify-content: center; }
/* Mała zakładka nad pigułką — nie poszerza pigułki (absolutna). */
.genre-pill__tab {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  border: 1px solid rgba(176, 141, 87, .35);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .5625rem;              /* 9px — ledwie zaznaczona, nie krzyczy */
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}
.genre-pill.is-active .genre-pill__tab { border-color: transparent; box-shadow: var(--shadow-sm); color: var(--accent-hover); }
.genre-cards { gap: var(--sp-3); }
.glos-card { padding: var(--sp-4) var(--sp-4) var(--sp-3); border-radius: 14px; }
.glos-card__title { font-size: 1.0625rem; }
.glos-card__similar { margin-top: var(--sp-1); font-size: var(--fs-xs); }
.glos-card__controls { padding-top: var(--sp-3); gap: var(--sp-3); }
.glos-play { width: 40px; height: 40px; }
.glos-nav { height: 40px; }
.glos-card__count { margin-top: var(--sp-1); }
.genres-catalog { margin-top: var(--sp-4); }
@media (max-width: 559px) {
  /* Pigułki przy 390px: WRAP (nie poziomy scroll) — wszystko widoczne od
     razu, nic nie chowa się poza kadrem. Kompaktowa skala trzyma to w 4
     rzędach zamiast 6. */
  .genre-pill {
    min-height: 40px;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
  }
  .genre-pills { gap: var(--sp-2); }
}

/* ---------------------------------------------------------------------- *
 * 12. PRZYKŁADY
 * ---------------------------------------------------------------------- */
.examples-grid {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 900px) { .examples-grid { grid-template-columns: repeat(3, 1fr); } }
.example-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.example-cover {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--bg-alt);
  overflow: hidden;
}
.example-cover img { width: 100%; height: 100%; object-fit: cover; }
.example-body { padding: var(--sp-5); }
.example-body h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.example-body p { color: var(--ink-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

.mini-player {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.mini-player__btn {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.mini-player__btn:hover { background: var(--accent-hover); }
.mini-player__btn:active { transform: scale(.94); }
.mini-player__btn svg { width: 16px; height: 16px; }
.mini-player__btn .icon-pause { display: none; }
.mini-player.is-playing .icon-play { display: none; }
.mini-player.is-playing .icon-pause { display: block; }
.mini-player__track {
  position: relative;
  flex-grow: 1;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border);
  cursor: pointer;
}
.mini-player__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: var(--radius-full);
  background: var(--accent);
  transition: width 100ms linear;
}
.mini-player__time { font-size: var(--fs-xs); color: var(--ink-faint); min-width: 34px; text-align: right; flex-shrink: 0; }

/* ---------------------------------------------------------------------- *
 * 13. FAQ
 * ---------------------------------------------------------------------- */
.faq-list { max-width: 760px; margin-inline: auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  text-align: left;
  padding-block: var(--sp-5);
  font-weight: 700;
  font-size: var(--fs-md);
}
.faq-question:hover { color: var(--accent-hover); }
.faq-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
  border-radius: var(--radius-full);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.faq-icon::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.faq-icon::after { top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; }
.faq-item.is-open .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item.is-open .faq-question { color: var(--accent-hover); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease-out);
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer p { color: var(--ink-soft); font-size: var(--fs-sm); padding-bottom: var(--sp-5); }

/* ---------------------------------------------------------------------- *
 * 14. FINAŁ CTA — pierwsza połowa ciemnego bloku (druga to stopka, sekcja 16)
 *
 * `.section--final` jest full-bleed: sekcje są blokami na pełną szerokość
 * <body> (zero max-width w łańcuchu html/body/main), więc granat sięga krawędzi
 * okna na każdej szerokości — od 360 px po 2560 px — a treść dalej siedzi
 * w wyśrodkowanym `.container` (max 1140 px). Karta finału została odchudzona
 * z własnego tła/zaokrąglenia/paddingu: kolor niesie teraz sekcja.
 * ---------------------------------------------------------------------- */
.section--final {
  background: var(--navy-deep);
  padding-block: var(--sp-8);
}
.final-cta {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  color: var(--on-navy-soft);
}
.final-cta h2 { color: var(--on-navy); margin-bottom: var(--sp-3); }
.final-cta p { color: var(--on-navy-soft); margin-bottom: var(--sp-6); font-size: var(--fs-md); }

/* ---------------------------------------------------------------------- *
 * 15. FORMULARZ / WIZARD — strona /zamow (public/zamow.html + order-form.js)
 * ---------------------------------------------------------------------- */
.wizard {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5) var(--sp-4);
}
@media (min-width: 640px) { .wizard { padding: var(--sp-7); } }

.wizard-progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.wizard-progress__bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width var(--dur-3) var(--ease-out);
}
.wizard-progress-label {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

.wizard-step { animation: step-in var(--dur-3) var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.wizard-step h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-5); }

.wizard-restore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--accent-soft);
  color: var(--accent-active);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-bottom: var(--sp-5);
}

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.wizard-nav__spacer { flex-grow: 1; }

.wizard-summary {
  overflow-wrap: anywhere;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--border-strong);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.wizard-summary strong { color: var(--ink-soft); }

/* Pytania naprowadzające (wzorzec twoja_piosenka_v2): krok historii. */
.story-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
/* Intro kroku historii ma prowadzić, nie szeptać (decyzja właściciela
   2026-08-08): pełny rozmiar tekstu i kolor atramentu zamiast drobnego,
   wyblakłego .field-hint. */
.story-head__intro {
  margin-top: 0;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--lh-normal);
}
.story-mode-link {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.guided-question { margin-bottom: var(--sp-5); }
.guided-question .field-label { font-weight: 600; }
.guided-question__hint {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  margin-top: var(--sp-1);
}
.guided-question-badge {
  display: inline-block;
  margin-left: var(--sp-1);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-active);
  font-size: var(--fs-xs);
  font-weight: 700;
  vertical-align: middle;
}
.story-free .field-hint { margin-bottom: var(--sp-2); }
.story-free .story-mode-link { margin-top: var(--sp-2); }

/* Reset „Zacznij od początku" (PACZKA 1, pkt 9): dyskretny, tekstowy,
   pod nawigacją — nie konkuruje z „Dalej". Stan uzbrojony = kolor błędu. */
.wizard-reset-row {
  margin-top: var(--sp-5);
  text-align: center;
}
.wizard-reset {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  transition: color var(--dur-2) var(--ease-out);
}
.wizard-reset:hover { color: var(--ink-soft); }
.wizard-reset:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm, 6px); }
.wizard-reset.is-armed { color: var(--error-ink); font-weight: 700; }

/* Karta podsumowania na ostatnim kroku (PACZKA 1, pkt 10). */
.order-summary {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-alt, var(--surface));
}
.order-summary__heading {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-3);
}
.order-summary__list { margin: 0; }
.order-summary__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--border);
}
.order-summary__row:last-child { border-bottom: 0; }
.order-summary__row dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-faint);
}
.order-summary__row dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.order-summary__edit {
  font-size: var(--fs-xs);
  white-space: nowrap;
}

@media (max-width: 639px) {
  .wizard .tile-grid { gap: var(--sp-2); }
  .wizard .tile-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard .tile { padding-inline: var(--sp-2); }
  .wizard .story-head { flex-direction: column; }
  .wizard .story-mode-link { white-space: normal; text-align: left; }
  .wizard .express-total strong { white-space: nowrap; }
  .wizard-nav { flex-direction: column; align-items: stretch; }
  .wizard-nav__spacer { display: none; }
  .wizard-nav .btn--primary {
    width: 100%;
    padding-inline: var(--sp-2);
    font-size: var(--fs-base);
    text-wrap: balance;
  }
  .wizard-nav .btn--ghost {
    align-self: center;
    border-color: transparent;
    padding-inline: var(--sp-4);
  }
  .wizard .order-summary { padding: var(--sp-4) var(--sp-3); }
  .wizard .order-summary__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--sp-2);
    align-items: center;
  }
  .wizard .order-summary__row dt { grid-column: 1; grid-row: 1; }
  .wizard .order-summary__row dd { grid-column: 1 / -1; grid-row: 2; }
  .wizard .order-summary__edit {
    grid-column: 2;
    grid-row: 1;
    min-width: 44px;
    min-height: 44px;
  }
}

/* -- Zadanie 4: toggle "Ekspres" (karta-checkbox jak kafelki formularza) - */
.express-toggle {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.express-toggle:hover { border-color: var(--accent); }
.express-toggle.is-checked {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.express-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.express-toggle__box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 7px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.express-toggle input:checked ~ .express-toggle__box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.express-toggle input:focus-visible ~ .express-toggle__box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.express-toggle__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.express-toggle__label { font-weight: 700; font-size: var(--fs-sm); }
.express-toggle__price { font-weight: 700; font-size: var(--fs-sm); color: var(--accent-hover); }
.express-toggle__hint { font-size: var(--fs-xs); color: var(--ink-faint); }

.express-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-strong);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.express-total strong { font-size: var(--fs-md); color: var(--ink); }

/* ---------------------------------------------------------------------- *
 * 16. STOPKA — druga połowa ciemnego bloku (pierwsza to `.section--final`)
 *
 * Ten sam granat co finał, więc na landingu oba elementy czytają się jako
 * JEDEN blok domykający stronę; granicę rysuje wyłącznie hairline
 * --navy-hairline (zamiast dawnej linii na --border, która na ciemnym tle
 * byłaby jasną szramą). Stopka jest w tym samym kolorze także na stronach
 * prawnych — marka ma jedno zakończenie na całym serwisie.
 * ---------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--navy-hairline);
  padding-block: var(--sp-7);
  background: var(--navy-deep);
  color: var(--on-navy-soft);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}
@media (min-width: 900px) {
  .site-footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}
.site-footer__logo { color: var(--on-navy); font-size: var(--fs-md); }
.site-footer__logo .logo-mark { width: 32px; height: 32px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--sp-5);
  row-gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.footer-links a,
.footer-links .cookie-settings-link {
  color: var(--on-navy-soft);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}
.footer-links a:hover,
.footer-links .cookie-settings-link:hover { color: var(--on-navy); text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { font-size: var(--fs-xs); color: var(--on-navy-faint); }

/* ---------------------------------------------------------------------- *
 * 17. STRONA ZAMÓWIENIA (/s/<token>) — flow
 * ---------------------------------------------------------------------- */
.flow-main { padding-block: var(--sp-8); min-height: 60vh; }
.flow-state { animation: step-in var(--dur-3) var(--ease-out); }
.flow-state h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.flow-state > p:first-of-type { color: var(--ink-soft); font-size: var(--fs-md); margin-bottom: var(--sp-6); }

.flow-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-9);
  text-align: center;
  color: var(--ink-faint);
}
.spinner {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: btn-spin .8s linear infinite;
}

.typing-dots { display: inline-flex; gap: 5px; margin-bottom: var(--sp-6); }
.typing-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  animation: typing-bounce 1.1s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }

.segmented {
  display: inline-flex;
  background: var(--bg-alt);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 4px;
}
.segmented__btn {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  min-height: 40px;
}
.segmented__btn:hover { color: var(--ink); }
.segmented__btn.is-active { background: var(--surface); color: var(--accent-hover); box-shadow: var(--shadow-sm); }

.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-5);
  animation: step-in var(--dur-3) var(--ease-out);
}
.review-actions .btn--primary { margin-left: auto; }
.regen-left { font-size: var(--fs-xs); color: var(--ink-faint); font-weight: 700; margin-left: var(--sp-1); }

/* Tekst piosenki „na sztywno" (lyrics_review) — złożony jak strona, nie formularz. */
.lyrics-display__title {
  font-family: var(--font-serif-review);
  font-style: italic;
  font-weight: 800;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  text-align: center;
  margin-bottom: var(--sp-6);
  color: var(--ink);
}
.lyrics-display__body {
  max-width: 34em;
  margin-inline: auto;
  text-align: left;
}
.lyrics-tag {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: var(--sp-7) 0 var(--sp-2);
}
.lyrics-tag:first-child { margin-top: 0; }
.lyrics-stanza { margin-bottom: var(--sp-5); }
.lyrics-stanza:last-child { margin-bottom: 0; }
.lyrics-line {
  font-family: var(--font-serif-review);
  font-style: italic;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
}
@media (max-width: 640px) {
  .lyrics-line { font-size: 17px; }
}
.lyrics-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  background: var(--ink);
  vertical-align: text-bottom;
  animation: lyrics-cursor-blink 1s steps(1, jump-none) infinite;
}
@keyframes lyrics-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.btn-skip {
  display: block;
  margin: var(--sp-4) auto 0;
  padding: var(--sp-2) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-2) var(--ease-out);
}
.btn-skip:hover { color: var(--ink-soft); }
.btn-skip:disabled { opacity: .5; cursor: not-allowed; }

.lyrics-edit { animation: step-in var(--dur-3) var(--ease-out); }
.textarea--lyrics-edit { font-family: var(--font-serif-review); font-style: italic; font-size: var(--fs-base); }

@media (prefers-reduced-motion: reduce) {
  .lyrics-cursor { animation: none; opacity: 1; }
}

.progress-bar {
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 900ms var(--ease-out);
}
/* Pasek nagrywania z procentami: flow.js przesuwa go co 250 ms małymi
   krokami, więc przejście jest krótkie i liniowe (bez „szarpnięć" ease-out). */
.progress-meter { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.progress-meter .progress-bar { flex: 1; margin-bottom: 0; }
.progress-meter .progress-bar__fill { transition: width 260ms linear; }
.progress-meter__pct {
  min-width: 3.2em;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.progress-stages { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.progress-stage {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}
.progress-stage::before {
  content: "";
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.progress-stage.is-current { color: var(--ink); font-weight: 700; }
.progress-stage.is-current::before { border-color: var(--accent); background: var(--accent-soft); }
.progress-stage.is-done { color: var(--ink-soft); }
.progress-stage.is-done::before { border-color: var(--success); background: var(--success); }

/* ---- Studio: ekran nagrywania (music_pending), 2026-09-23 ----------------
   Serce-winyl z logo kołysze się w rytm muzyki, z niego ulatują
   nutki, obok migoczą gwiazdki (--star), pod spodem skacze korektor.
   Pasek postępu dostaje gradient marki i przesuwający się połysk, bieżący
   etap pulsuje, ukończone dostają ptaszek. Zdania pod nagłówkiem rotuje
   flow.js (initStudioFun) z płynnym przenikaniem. */
.flow-state--studio { text-align: left; }
.studio-stage {
  position: relative;
  width: 200px;
  height: 190px;
  margin: 0 auto var(--sp-5);
}
.studio-halo {
  position: absolute;
  left: 50%; top: 78px;
  width: 190px; height: 190px;
  margin: -95px 0 0 -95px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hero-mist-rose) 0%, var(--hero-mist-violet) 45%, transparent 70%);
  animation: studio-breathe 3.2s ease-in-out infinite;
}
.studio-disc {
  position: absolute;
  left: 50%; top: 78px;
  width: 132px; height: 132px;
  margin: -66px 0 0 -66px;
  filter: drop-shadow(0 10px 18px rgba(122, 0, 198, .22));
  animation: studio-groove 1.6s ease-in-out infinite;
}
.studio-disc img { display: block; width: 100%; height: 100%; }
.studio-note {
  position: absolute;
  top: 70px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  animation: studio-note 3.6s ease-out infinite;
}
.studio-note--1 { left: 26px;  color: var(--accent);   --dx: -22px; --rot: -20deg; }
.studio-note--2 { right: 22px; color: var(--accent-2); --dx: 20px;  --rot: 18deg; animation-delay: .9s; }
.studio-note--3 { left: 44px;  color: var(--accent-2); --dx: -10px; --rot: -12deg; animation-delay: 1.8s; font-size: 18px; }
.studio-note--4 { right: 40px; color: var(--accent);   --dx: 14px;  --rot: 24deg;  animation-delay: 2.7s; font-size: 18px; }
.studio-spark {
  position: absolute;
  width: 16px; height: 16px;
  background: var(--star);
  /* czteroramienna gwiazdka Y2K — ten sam kształt co w logo */
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0;
  animation: studio-twinkle 2.6s ease-in-out infinite;
}
.studio-spark--1 { right: 30px; top: 14px; }
.studio-spark--2 { left: 30px; top: 104px; width: 11px; height: 11px; animation-delay: 1.3s; }
.studio-eq {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
}
.studio-eq i {
  display: block;
  width: 6px;
  height: 100%;
  border-radius: 3px;
  background: var(--grad-accent);
  background-size: 60px 100%;
  transform-origin: bottom;
  animation: studio-eq 1s ease-in-out infinite;
}
.studio-eq i:nth-child(1) { animation-delay: -.2s; }
.studio-eq i:nth-child(2) { animation-delay: -.55s; animation-duration: .8s; }
.studio-eq i:nth-child(3) { animation-delay: -.1s; animation-duration: 1.15s; }
.studio-eq i:nth-child(4) { animation-delay: -.7s; }
.studio-eq i:nth-child(5) { animation-delay: -.35s; animation-duration: .9s; }
.studio-eq i:nth-child(6) { animation-delay: -.8s; animation-duration: 1.2s; }
.studio-eq i:nth-child(7) { animation-delay: -.45s; animation-duration: .85s; }
/* serce „tańczy" w rytm (pełny obrót płyty-serca do góry nogami czytał się
   jak usterka, więc zostaje kołysanie z lekkim podskokiem na każde „raz") */
@keyframes studio-groove {
  0%, 100% { transform: rotate(-7deg) translateY(0) scale(1); }
  25%      { transform: rotate(0) translateY(-7px) scale(1.04); }
  50%      { transform: rotate(7deg) translateY(0) scale(1); }
  75%      { transform: rotate(0) translateY(-7px) scale(1.04); }
}
@keyframes studio-breathe {
  0%, 100% { transform: scale(.92); opacity: .8; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes studio-note {
  0%   { opacity: 0; transform: translate(0, 10px) scale(.6) rotate(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -64px) scale(1.1) rotate(var(--rot)); }
}
@keyframes studio-twinkle {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0); }
  35%      { opacity: 1; transform: scale(1) rotate(45deg); }
  70%      { opacity: 0; transform: scale(.4) rotate(90deg); }
}
@keyframes studio-eq {
  0%, 100% { transform: scaleY(.25); }
  50%      { transform: scaleY(1); }
}
.studio-fun {
  min-height: 3.2em;           /* dwie linie — rotacja nie skacze layoutem */
  margin: var(--sp-3) 0 var(--sp-5);
  font-size: var(--fs-md);
  color: var(--ink-soft);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.studio-fun.is-swapping { opacity: 0; transform: translateY(6px); }
.flow-state--studio .progress-bar__fill {
  background: var(--grad-accent);
  position: relative;
  overflow: hidden;
}
.flow-state--studio .progress-bar__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: studio-shine 1.8s ease-in-out infinite;
}
@keyframes studio-shine { to { transform: translateX(100%); } }
.flow-state--studio .progress-stage.is-current::before { animation: studio-pulse 1.4s ease-in-out infinite; }
@keyframes studio-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-ring); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
.flow-state--studio .progress-stage.is-done::before {
  /* biały ptaszek na zielonym kółku (SVG jako maska tła) */
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@media (max-width: 479px) {
  .studio-stage { transform: scale(.85); margin-bottom: 0; margin-top: -12px; }
}

/* ---- Ekran sprzedaży (preview_ready / purchase_requested) — 1:1 ze wzorca
   app.songlygift.com: wąska kolumna, karta playera + karta odblokowania. ---- */
.sale-shell { max-width: 510px; margin-inline: auto; }

#stateSale { position: relative; }
#stateSale::before {
  /* duże, delikatne pionowe światło za kartami */
  content: "";
  position: absolute;
  top: -48px;
  left: 50%;
  width: 900px;
  max-width: 220%;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 0%, var(--accent-soft) 0%, rgba(252, 232, 242, 0) 70%);
  z-index: -1;
  pointer-events: none;
}

.sale-heading {
  font-size: clamp(2.375rem, 2.1rem + 1.2vw, 2.625rem);
  text-align: center;
  margin-bottom: var(--sp-6);
}

.sale-player-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 65%);
  padding: var(--sp-7) var(--sp-6);
  margin-bottom: var(--sp-5);
}
.sale-play-btn {
  flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 12px var(--accent-soft);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.sale-play-btn svg { width: 26px; height: 26px; }
.sale-play-btn .icon-pause { display: none; }
.sale-play-btn.is-playing .icon-play { display: none; }
.sale-play-btn.is-playing .icon-pause { display: block; }
.sale-play-btn:hover { filter: brightness(.94); box-shadow: 0 0 0 14px var(--accent-soft); }
.sale-play-btn:active { transform: scale(.96); }
.sale-play-btn:focus-visible { outline: 2px solid var(--accent-active); outline-offset: 4px; }
.sale-play-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.sale-player-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
}
.sale-player-card__hint {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-top: calc(var(--sp-1) * -1);
}
.sale-player-card__progress-row { width: 100%; max-width: 320px; margin-top: var(--sp-2); }
.sale-player-card__progress {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--border);
  cursor: pointer;
}
.sale-player-card__progress::after {
  /* strefa dotyku 44px — pasek wizualnie cienki, klikalny obszar większy */
  content: "";
  position: absolute;
  inset: -14px 0;
}
.sale-player-card__progress:hover .sale-player-card__progress-fill { background: var(--accent-hover); }
.sale-player-card__progress:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--radius-full); }
.sale-player-card__progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: var(--radius-full);
  background: var(--accent);
  transition: width 100ms linear;
}
.sale-player-card__time {
  width: 100%;
  max-width: 320px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-top: var(--sp-1);
}

.sale-unlock-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
  text-align: center;
}
.sale-love-badge {
  display: inline-block;
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-3);
}
.sale-unlock-heading { margin-bottom: var(--sp-5); }

/* Zgoda art. 38 nad przyciskiem zakupu: karta centruje tekst, zgoda ma być
   czytana jak formularz — do lewej, drobniejszym stopniem. */
.sale-consent { margin-top: var(--sp-6); text-align: left; }
.sale-consent .checkbox-row { font-size: var(--fs-xs); }
.sale-consent .field-error { margin-top: var(--sp-2); }

.sale-cta { margin-top: var(--sp-6); }
.sale-payment-note {
  margin-top: var(--sp-3);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

.sale-email-row { margin-top: var(--sp-5); text-align: left; }
.sale-email-row__view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  background: var(--bg-alt);
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
}
.sale-email-row__label { font-size: var(--fs-xs); color: var(--ink-faint); }
.sale-email-row__value {
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink);
  margin-right: auto;
  overflow-wrap: anywhere;
}
.sale-email-row__change {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  padding: var(--sp-1);
  transition: color var(--dur-2) var(--ease-out);
}
.sale-email-row__change:hover { color: var(--accent-active); text-decoration: underline; text-underline-offset: 3px; }
.sale-email-row__change:active { opacity: .8; }
.sale-email-row__change:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }
.sale-email-row__edit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  background: var(--bg-alt);
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
}
.sale-email-row__edit .input { min-height: 40px; flex: 1 1 180px; }
.sale-email-row__error {
  color: var(--error);
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-top: var(--sp-2);
}

.sale-unlock-card .payment-block { text-align: left; border: 1px solid var(--border); }

@media (max-width: 639px) {
  .sale-player-card { padding: var(--sp-6) var(--sp-4); }
  .sale-unlock-card { padding: var(--sp-5) var(--sp-4); }
  .sale-heading { font-size: clamp(1.9rem, 1.6rem + 3vw, 2.375rem); }
}

.player-btn {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.player-btn:hover { background: var(--accent-hover); }
.player-btn:active { transform: scale(.95); }
.player-btn svg { width: 20px; height: 20px; }
.player-btn--lg { width: 72px; height: 72px; }
.player-btn--lg svg { width: 26px; height: 26px; }
.player-btn .icon-pause { display: none; }
.player-btn.is-playing .icon-play { display: none; }
.player-btn.is-playing .icon-pause { display: block; }

.player-progress {
  position: relative;
  flex-grow: 1;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--border);
  cursor: pointer;
}
.player-progress__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: var(--radius-full);
  background: var(--accent);
  transition: width 100ms linear;
}
.player-time { font-size: var(--fs-xs); color: var(--ink-faint); flex-shrink: 0; white-space: nowrap; }

.sale-includes { margin-block: var(--sp-4) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.sale-includes li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.sale-includes li::before {
  content: "✓";
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sale-includes strong { color: var(--ink); }
.sale-includes li b { color: var(--ink); font-weight: 700; }
/* Pozycje-bonusy (strona-prezent, certyfikat): gwiazdka zamiast ptaszka. */
.sale-includes li.is-bonus::before {
  content: "★";
  background: transparent;
  color: var(--star);
  font-size: 15px;
}

.payment-block {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
}
.payment-table { margin-top: var(--sp-4); }
.payment-table tr { border-bottom: 1px solid var(--border); }
.payment-table tr:last-child { border-bottom: none; }
.payment-table th, .payment-table td { padding: var(--sp-3) 0; text-align: left; vertical-align: middle; }
.payment-table th { font-size: var(--fs-xs); color: var(--ink-faint); font-weight: 700; width: 40%; }
.payment-table td { font-weight: 700; font-size: var(--fs-sm); }
.payment-value-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
/* --- Płatność online (Stripe Payment Element) na ekranie sprzedaży --------- */
.stripe-block {
  margin-top: var(--sp-6, 24px);
  padding-top: var(--sp-5, 20px);
  border-top: 1px solid var(--border);
  text-align: left;
}
.stripe-block__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lg);
  margin: 0 0 4px;
}
.stripe-block__amount {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  margin: 0 0 14px;
}
.stripe-block__amount strong { color: var(--ink); font-size: var(--fs-md); }
.stripe-element { min-height: 96px; margin-bottom: 16px; }
.stripe-block__secure {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  text-align: center;
  margin: 12px 0 0;
}
.payment-check {
  margin-top: var(--sp-6, 24px);
  padding: 18px 16px;
  border-radius: var(--radius);
  background: var(--bg-alt);
  text-align: center;
}
.payment-check__row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--fs-md);
}
.payment-check .field-hint { margin: 10px 0 0; }
.payment-check .btn { margin-top: 14px; }
.spinner--sm { width: 18px; height: 18px; border-width: 2px; }

.payment-waiting {
  margin-top: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-faint);
  font-size: var(--fs-sm);
}

.done-versions { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); }
@media (min-width: 640px) { .done-versions { grid-template-columns: repeat(2, 1fr); } }
.done-version-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.done-version-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.done-version-card audio { width: 100%; margin-bottom: var(--sp-3); }
.done-extra-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.done-gift-links { display: flex; flex-direction: column; gap: var(--sp-3); }
.done-gift-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.done-gift-link__label { font-weight: 700; font-size: var(--fs-sm); }
.done-gift-link__actions { display: flex; gap: var(--sp-2); }

.state-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
  font-size: 1.5rem;
}
.state-icon--warn { background: var(--warn-soft); color: var(--warn); }
.state-icon--error { background: var(--error-soft); color: var(--error); }

.flow-noscript {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  text-align: center;
}

/* ---------------------------------------------------------------------- *
 * 18. STRONA-PREZENT (/prezent/<token>) — scope .gift-page
 * ---------------------------------------------------------------------- */
.gift-page { background: var(--ink); color: var(--bg); }
.gift-demo {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(250, 250, 250, .2);
  text-align: center;
  font-size: var(--fs-sm);
}
.gift-demo p { color: rgba(250, 250, 250, .75); margin-bottom: var(--sp-2); }
.gift-demo__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sp-4); }
.gift-demo a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-soft); text-decoration: underline; }
.gift-demo a:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
.gift-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
}
.gift-card {
  width: 100%;
  max-width: 480px;
  text-align: center;
}
.gift-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, .55);
  margin-bottom: var(--sp-3);
}
.gift-heading {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  color: var(--bg);
  margin-bottom: var(--sp-5);
}
.gift-heading-sender { color: var(--accent); }
.gift-dedication {
  background: rgba(250, 250, 250, .06);
  border: 1px solid rgba(250, 250, 250, .14);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.gift-dedication p { font-size: var(--fs-md); font-style: italic; color: rgba(250, 250, 250, .92); margin-bottom: var(--sp-2); }
.gift-dedication cite { font-size: var(--fs-xs); color: rgba(250, 250, 250, .55); font-style: normal; }
.gift-note { font-size: var(--fs-xs); color: rgba(250, 250, 250, .5); margin-bottom: var(--sp-6); }

.gift-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.gift-cover {
  width: 180px; height: 180px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(235, 7, 116, .35), rgba(10, 10, 10, .4));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  color: rgba(250, 250, 250, .7);
  box-shadow: var(--shadow-lg);
}
.gift-cover img { width: 100%; height: 100%; object-fit: cover; }
.gift-title { font-size: var(--fs-lg); color: var(--bg); }
.gift-audio-row { width: 100%; max-width: 380px; display: flex; align-items: center; gap: var(--sp-3); }
.gift-page .player-progress { background: rgba(250, 250, 250, .18); }
.gift-page .player-time { color: rgba(250, 250, 250, .55); }
.gift-page p[data-content-key="gift.player_pending"] { color: rgba(250, 250, 250, .6); font-size: var(--fs-sm); }

.gift-lyrics {
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  background: rgba(250, 250, 250, .05);
  border-radius: var(--radius-lg);
  text-align: left;
}
.gift-lyrics-line {
  font-size: var(--fs-sm);
  color: rgba(250, 250, 250, .6);
  margin-bottom: var(--sp-2);
  transition: color var(--dur-2) var(--ease-out);
}
.gift-lyrics-line.is-active { color: var(--bg); font-weight: 700; }
.gift-lyrics-word { transition: color var(--dur-2) var(--ease-out); }
.gift-lyrics-word.is-sung { color: rgba(250, 250, 250, .85); }
.gift-lyrics-word.is-active { color: var(--accent-soft); }
.gift-lyrics-break { height: var(--sp-3); }

.gift-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.gift-page .btn--ghost {
  background: transparent;
  border-color: rgba(250, 250, 250, .3);
  color: var(--bg);
}
.gift-page .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.gift-footer-cta {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: rgba(250, 250, 250, .7);
}
.gift-footer-cta:hover { color: var(--bg); text-decoration: underline; }

/* ---------------------------------------------------------------------- *
 * 19. STRONY PRAWNE
 * ---------------------------------------------------------------------- */
.legal-content { padding-block: var(--sp-8); }
.legal-content h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.legal-content h2 { font-size: var(--fs-lg); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.legal-content p, .legal-content li { color: var(--ink-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.legal-content ul, .legal-content ol { padding-left: var(--sp-5); list-style: disc; margin-bottom: var(--sp-4); }
.legal-content ol { list-style: decimal; }
.legal-updated { color: var(--ink-faint); font-size: var(--fs-xs); margin-bottom: var(--sp-5); }
.legal-note {
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: var(--radius);
  padding: var(--sp-4);
  font-size: var(--fs-xs);
}
/* Blok danych sprzedawcy/administratora w §1 regulaminu i polityki. */
.legal-company {
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--sp-4);
  line-height: 1.7;
}
.legal-owner-warning {
  background: var(--error-soft);
  color: var(--error);
  border-radius: var(--radius);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* ---------------------------------------------------------------------- *
 * 20. RESPONSYWNOŚĆ DODATKOWA
 * ---------------------------------------------------------------------- */
@media (max-width: 639px) {
  .section { padding-block: var(--sp-7); }
  /* Ciemny blok finału: oddech niesie teraz sekcja (karta straciła własny
     padding razem z tłem — patrz sekcja 14), więc na mobile skracamy sekcję. */
  .section--final { padding-block: var(--sp-7); }
  h1 { font-size: clamp(1.9rem, 1.5rem + 3vw, 2.4rem); }
}

/* ---------------------------------------------------------------------- *
 *  Baner zgody na cookies (PROMPT_COOKIES)
 *  Waski pasek przy dolnej krawedzi (nie modal): wjezdza od dolu po ~1 s,
 *  tokeny marki 1:1. Oba glowne przyciski CELOWO identyczne - wymog prawny:
 *  odmowa rownie widoczna co zgoda (nie "poprawiac" na mniej widoczna).
 * ---------------------------------------------------------------------- */
.cookie-banner {
  --cookie-edge-top: max(var(--sp-4), env(safe-area-inset-top, 0px));
  --cookie-edge-bottom: max(var(--sp-4), env(safe-area-inset-bottom, 0px));
  --cookie-edge-inline: max(var(--sp-4), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  position: fixed;
  left: 50%;
  bottom: var(--cookie-edge-bottom);
  transform: translate(-50%, calc(100% + var(--cookie-edge-bottom) + var(--sp-2)));
  width: min(680px, calc(100% - 2 * var(--cookie-edge-inline)));
  /* vh fallback; dvh follows the available space as mobile browser bars change. */
  max-height: calc(100vh - var(--cookie-edge-top) - var(--cookie-edge-bottom));
  max-height: calc(100dvh - var(--cookie-edge-top) - var(--cookie-edge-bottom));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-block: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  z-index: 90;
  transition: transform var(--dur-3) var(--ease-out);
}
.cookie-banner.is-open { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

.cookie-banner__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-2);
}
.cookie-banner__text {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: var(--lh-normal);
}
.cookie-banner__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.cookie-banner__actions .btn { flex: 1 1 180px; }

.cookie-banner__more {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.cookie-banner__toggle,
.cookie-banner__policy {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}
.cookie-banner__toggle:hover,
.cookie-banner__policy:hover { color: var(--accent); }

.cookie-banner__details {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
}
.cookie-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
.cookie-option__title { margin: 0; font-weight: 700; font-size: var(--fs-sm); }
.cookie-option__desc {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
}
.cookie-banner__save { justify-self: start; }

/* Przelacznik (bez ikon - stala zasada wlasciciela) */
.cookie-switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin-top: 2px;
}
.cookie-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.cookie-switch__track {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: background var(--dur-2) var(--ease-out);
}
.cookie-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease-out);
}
.cookie-switch input:checked + .cookie-switch__track { background: var(--grad-accent); }
.cookie-switch input:checked + .cookie-switch__track::after { transform: translateX(20px); }
.cookie-switch input:disabled { cursor: default; }
.cookie-switch input:disabled + .cookie-switch__track { opacity: .55; }
.cookie-switch input:focus-visible + .cookie-switch__track { box-shadow: var(--focus-ring); }

/* Link "Ustawienia cookies" - w stopkach i w wierszu na stronach bez stopki */
.cookie-settings-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.cookie-settings-link:hover { color: var(--accent); }
.cookie-settings-row {
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero__listen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero__listen:hover { color: var(--accent-active); }
.hero__listen:focus-visible { outline: 2px solid var(--accent-active); outline-offset: 3px; border-radius: 4px; }
/* Telefon: wszystkie duże CTA landingu jak w hero — pełna szerokość i mniejszy
   padding, żeby „Odbierz darmowy fragment” mieścił się w 1 linii od 320 px. */
@media (max-width: 600px) {
  .hero__actions > .btn,
  .steps-cta .btn,
  .package-cta .btn,
  .final-cta .btn { width: 100%; padding-inline: 12px; font-size: var(--fs-base); }
  .final-cta p { font-size: var(--fs-base); }
}
@media (min-width: 1024px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
}
.gift-page .cookie-settings-row { color: rgba(250, 250, 250, .6); }

@media (max-width: 560px) {
  .cookie-banner { padding: var(--sp-4); }
  .cookie-banner__actions { flex-direction: column; }
  .cookie-banner__actions .btn { flex: none; width: 100%; }
  .cookie-banner__save { justify-self: stretch; }
}

/* ---------------------------------------------------------------------- *
 * 30. KREATOR 2026-09-23 — kompaktowe kroki (wzorzec myownsongs.com)
 *     Każdy krok ma się mieścić na jednym ekranie laptopa bez przewijania:
 *     pigułki zamiast dużych kafelków, ciaśniejsze odstępy, krótszy
 *     nagłówek strony. Na końcu: karty wyboru wersji na stronie zamówienia.
 * ---------------------------------------------------------------------- */
.page-order .flow-main { padding-block: var(--sp-4) var(--sp-7); }
.page-order .section-head { margin-bottom: var(--sp-3); }
.page-order .section-head h2 { font-size: var(--fs-xl); margin-bottom: 2px; }
.page-order .section-sub { font-size: var(--fs-sm); }
.page-order .container--order { max-width: 820px; }

.wizard--compact { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
@media (min-width: 640px) { .wizard--compact { padding: var(--sp-5) var(--sp-6) var(--sp-4); } }
.wizard-progress-row { display: flex; justify-content: space-between; gap: var(--sp-3); }
.wizard--compact .wizard-progress { margin-bottom: var(--sp-4); height: 8px; }
.wizard--compact .wizard-step h2 {
  font-size: var(--fs-lg);
  text-align: center;
  margin-bottom: var(--sp-3);
}
.wizard--compact .field { margin-bottom: var(--sp-3); }
.wizard--compact .field--tight { margin-bottom: var(--sp-3); }
.wizard--compact .field-label { margin-bottom: 6px; }
.wizard--compact .field-hint { margin-top: 6px; }
.wizard--compact .field-error { margin-top: 4px; min-height: 0; }
.wizard--compact .field-error:empty { display: none; }
.wizard--compact .wizard-nav { margin-top: var(--sp-4); }
.wizard--compact .wizard-reset-row { margin-top: var(--sp-2); }
/* Telefon: nawigacja w JEDNYM rzędzie (Wstecz | Dalej) zamiast słupka —
   oszczędza ~70 px pionu; „Napisz od nowa" wskakuje nad nią na całą szerokość. */
@media (max-width: 639px) {
  .wizard--compact .wizard-nav { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .wizard--compact .wizard-nav .btn { min-height: 46px; padding-inline: 18px; width: auto; }
  .wizard--compact .wizard-nav .btn--ghost { border-color: var(--border-strong); align-self: auto; }
  .wizard--compact .wizard-nav #wizardNext,
  .wizard--compact .wizard-nav #wizardSubmit { flex: 1 1 auto; }
  .wizard--compact .wizard-nav #lyricsRegen { order: -1; flex: 1 0 100%; }
  .wizard--compact .wizard-nav__spacer { display: none; }
  .wizard--compact .voice-card { padding: 8px 10px; }
  .wizard--compact .voice-card__text { display: block; }
  .wizard--compact .voice-card__similar { display: inline; }
  .wizard--compact .voice-card__name { display: block; }
  .wizard--compact .voice-card__tag { display: inline-block; margin: 0 0 0 6px; vertical-align: 1px; }
  .page-order .section-head { display: none; }
}
.wizard--compact [data-content-key="form.submit_note"] { margin-top: 0; }
.wizard--compact .wizard-restore { margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); }

/* Pigułki (chips) — wybór jednokrotny w grupie; logika jak `.tile`
   (aria-pressed), wygląd kompaktowy jak w myownsongs.com. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-row--roomy { justify-content: center; gap: 10px; }
.wizard .tile.chip {
  display: inline-flex;
  width: auto;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow-wrap: normal;
}
.chip-row--roomy .tile.chip { min-height: 46px; padding-inline: 20px; }
@media (max-width: 639px) {
  .wizard .tile.chip { padding: 7px 13px; min-height: 38px; font-size: .875rem; }
  .wizard .chip-row { gap: 6px; }
}

/* Dwa pola obok siebie (od kogo + e-mail) na szerszych ekranach. */
.field-pair { display: grid; gap: 0 var(--sp-4); }
@media (min-width: 640px) { .field-pair { grid-template-columns: 1fr 1fr; } }
.wizard--compact .field-pair .field { margin-bottom: 0; }
@media (max-width: 639px) { .wizard--compact .field-pair .field + .field { margin-top: var(--sp-3); } }
.wizard--compact .field-hint--pair { margin: 6px 0 var(--sp-2); }
.wizard--compact .field-note { margin: 0 0 var(--sp-3); padding: 6px var(--sp-3); font-size: var(--fs-xs); }

/* Podsumowanie zwinięte domyślnie (<details>) — krok zmieści się na ekranie. */
.wizard--compact .order-summary { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.wizard--compact .order-summary__heading {
  cursor: pointer;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.wizard--compact .order-summary[open] .order-summary__heading { margin-bottom: var(--sp-2); }
.wizard--compact .order-summary__row { padding: 4px 0; }
.wizard--compact .express-toggle { padding: var(--sp-2) var(--sp-3); align-items: center; }
.wizard--compact .express-toggle__body { display: block; }
.wizard--compact .express-toggle__label,
.wizard--compact .express-toggle__price { display: inline; margin-right: 6px; }
.wizard--compact .express-toggle__hint { display: block; }
.wizard--compact .express-total { margin-top: 6px; padding-top: 6px; }
.wizard--compact .textarea.is-autosize { min-height: 48px; resize: none; overflow: hidden; }
.wizard--compact .field-pair .field-hint,
.wizard--compact .field-pair .field-note { margin: 6px 0 0; }

/* Pytania naprowadzające — ciaśniej, żeby historia + przycisk tekstu
   mieściły się razem. */
.wizard--compact .story-head { margin-bottom: var(--sp-3); }
.wizard--compact .story-head__intro { font-size: var(--fs-sm); }
.wizard--compact .guided-question { margin-bottom: var(--sp-3); }
.wizard--compact .guided-question .textarea { padding: 10px var(--sp-3); }
/* Podpowiedź „napisz X zamiast Y" pokazujemy od pierwszego wejścia w pole
   (klasa .is-touched z JS) — trzy stałe akapity nie mieściły kroku na
   ekranie. Nie chowamy jej na blur: przeskok układu zabierał kliknięcie
   przyciskowi „Napisz tekst". */
.wizard--compact .guided-question__hint { display: none; }
.wizard--compact .guided-question.is-touched .guided-question__hint { display: block; }
.wizard--compact .field-count { margin-top: 2px; }

/* ---- Karty wokali (sugerowany styl pod gatunkiem) ---- */
.voice-panel {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--bg-alt);
  animation: step-in var(--dur-3) var(--ease-out);
}
.voice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 640px) { .voice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.voice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.voice-card:hover { border-color: var(--accent); }
.voice-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.voice-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-sm);
}
.voice-card__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; padding-right: 14px; }
.voice-card__name { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); line-height: 1.25; }
.voice-card__similar { font-size: .75rem; color: var(--ink-faint); line-height: 1.3; }
.voice-card__tag {
  align-self: flex-start;
  margin-top: 3px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.voice-card__check {
  position: absolute;
  top: 6px;
  right: 9px;
  display: none;
  font-size: .8125rem;
  font-weight: 800;
  color: var(--accent-hover);
}
.voice-card.is-selected .voice-card__check { display: block; }
/* Przycisk próbki w karcie: ten sam trójkąt i pierścień postępu co próbki
   gatunków (conic-gradient maskowany do obrączki, --p = 0..100 z JS). */
.voice-card .tile-play {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}
.tile-play__pause {
  display: none;
  width: 10px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.voice-card .tile-play.is-playing .tile-play__tri { display: none; }
.voice-card .tile-play.is-playing .tile-play__pause { display: block; }
.voice-card__dice {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 1.25rem;
}

/* ---- Tekst piosenki w kroku historii ---- */
.lyrics-gen { margin-top: var(--sp-2); }
.lyrics-gen__start { width: 100%; }
@media (min-width: 640px) { .lyrics-gen__start { display: flex; width: fit-content; margin-inline: auto; } }
.lyrics-gen__legal { margin-top: 6px; font-size: .75rem; color: var(--ink-faint); }
.lyrics-gen__legal a { color: inherit; text-decoration: underline; }
.lyrics-gen.has-lyrics .lyrics-gen__start,
.lyrics-gen.has-lyrics .lyrics-gen__legal,
.lyrics-gen.is-writing .lyrics-gen__start { display: none; }
.lyrics-gen__writing {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-active);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.lyrics-gen__writing .typing-dots { margin: 0; }
.lyrics-gen__ok {
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--success-soft);
  color: var(--success-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.lyrics-card {
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background: #fff8fb;
  padding: var(--sp-3) var(--sp-4);
}
.lyrics-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.lyrics-card__title { font-size: var(--fs-md); margin: 0; }
.lyrics-card__body {
  max-height: 260px;
  overflow-y: auto;
  padding-right: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}
.lyrics-card__line { display: block; min-height: 1.55em; }
.lyrics-card__tag {
  display: block;
  margin-top: var(--sp-2);
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink-faint);
}
.lyrics-card__tag:first-child { margin-top: 0; }
.lyrics-card__edit .field-label { margin-top: var(--sp-2); }
.lyrics-card__edit .textarea { font-size: var(--fs-sm); }
#lyricsLimitNote { margin-top: var(--sp-2); }

/* ---- Wybór wersji po nagraniu (strona zamówienia, wzorzec 1:1) ---- */
.versions-shell { max-width: 820px; margin-inline: auto; }
.versions-head { text-align: center; margin-bottom: var(--sp-5); }
.versions-head h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.versions-head p { color: var(--ink-soft); }
.versions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 768px) { .versions-grid { grid-template-columns: 1fr 1fr; } }
.version-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1.5px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.version-card:hover { border-color: #f59ac5; box-shadow: var(--shadow-sm); }
.version-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-md);
}
.version-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.version-card__title { font-size: 1.125rem; font-weight: 700; margin: 0; color: var(--ink); font-family: var(--font-sans); }
.version-card__subtitle { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-faint); }
.version-card__badge {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-faint);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.version-card__badge:hover { border-color: var(--accent); color: var(--accent-hover); }
.version-card.is-selected .version-card__badge {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.version-player {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.version-player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}
.version-player__btn svg { width: 20px; height: 20px; }
.version-player__btn .icon-pause { display: none; }
.version-player__btn.is-playing .icon-play { display: none; }
.version-player__btn.is-playing .icon-pause { display: block; }
.version-player__time {
  min-width: 36px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.version-player__range {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.version-card--pending { cursor: default; border-style: dashed; }
.version-card--pending:hover { border-color: var(--border-strong); box-shadow: none; }
.version-card__wait {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-faint);
  font-size: var(--fs-sm);
}
.versions-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.versions-nav .btn { min-height: 46px; }
.versions-note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-faint); text-align: center; }
.sale-back-row { text-align: center; margin: 0 0 var(--sp-3); }
@media (max-width: 639px) {
  .version-card { padding: var(--sp-4); }
  .versions-nav { flex-direction: column-reverse; align-items: stretch; }
}
.lyrics-gen__result { scroll-margin-top: var(--header-scroll-offset, 112px); }

/* ---------------------------------------------------------------------- *
 * 31. KREATOR — zróżnicowane kolory (2026-09-23, prośba właściciela:
 *     „nie tylko wszystko białe albo różowe"). Paleta marki: róż (akcent 1)
 *     + fiolet (akcent 2) + jeden ciepły ton (brzoskwinia) dla ekspresu
 *     i tekstu piosenki. Każda strefa kroku ma własny, delikatny odcień.
 * ---------------------------------------------------------------------- */
:root {
  --violet-50: #f8f2fe;
  --violet-100: #efe2fc;
  --violet-300: #c9a2f0;
  --violet-ink: #5b1596;
  --peach-50: #fff7f0;
  --peach-100: #ffe8d6;
  --peach-300: #f6c49b;
  --peach-ink: #9a4a12;
}

/* Pasek postępu i wybrane pigułki: gradient marki róż → fiolet. */
.wizard--compact .wizard-progress__bar { background: var(--grad-accent); }
.wizard--compact .wizard-progress-label--pct { color: var(--accent-2); }
.wizard .tile.chip[aria-pressed="true"] {
  background: var(--grad-accent);
  border-color: transparent;
  color: var(--on-accent);
}
.wizard .tile.chip:hover { border-color: var(--accent-2); background: var(--violet-50); }
.wizard .tile.chip[aria-pressed="true"]:hover { background: var(--grad-accent); color: var(--on-accent); border-color: transparent; }

/* Etykiety pól z kolorowym znacznikiem — porządkują krok bez ramek. */
.wizard--compact .field-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--accent-2);
  vertical-align: middle;
}
.wizard--compact .lyrics-card__edit .field-label::before,
.wizard--compact .guided-question .field-label::before { background: var(--accent); }

/* Wokale: fioletowa strefa, wybrana karta w fiolecie. */
.voice-panel { background: var(--violet-50); border: 1px solid var(--violet-100); }
.voice-panel .field-label::before { background: var(--accent); }
.voice-card:hover { border-color: var(--violet-300); }
.voice-card.is-selected {
  border-color: var(--accent-2);
  background: var(--violet-100);
}
.voice-card__check { color: var(--accent-2); }
.voice-card__tag { background: var(--violet-50); border-color: var(--violet-100); color: var(--violet-ink); }
.voice-card__dice { background: var(--peach-100); }
.voice-card .tile-play { color: var(--accent-2); border-color: var(--violet-300); }
.voice-card .tile-play.is-playing { color: var(--accent); border-color: var(--accent); }

/* Tekst piosenki: ciepła „kartka" z brzoskwiniową ramką. */
.lyrics-gen__writing { background: var(--violet-50); color: var(--violet-ink); }
.lyrics-gen__writing .typing-dots span { background: var(--accent-2); }
.lyrics-card { background: var(--peach-50); border-color: var(--peach-300); }
.lyrics-card__title { color: var(--peach-ink); }
.lyrics-card__tag { color: var(--accent-2); letter-spacing: .02em; }
.lyrics-gen__start { background: var(--grad-accent); }

/* Ekspres: ciepły, bursztynowo-brzoskwiniowy (błyskawica). */
.wizard--compact .express-toggle { background: var(--peach-50); border-color: var(--peach-100); }
.wizard--compact .express-toggle:hover,
.wizard--compact .express-toggle.is-checked { border-color: var(--peach-300); background: var(--peach-100); }
.wizard--compact .express-toggle__price { color: var(--peach-ink); }
.wizard--compact .order-summary { background: var(--violet-50); border-color: var(--violet-100); }
.wizard--compact .field-note { background: var(--violet-50); color: var(--violet-ink); }

/* ---- Karty wersji: każda wersja ma swój odcień przycisku play ---- */
.version-card--v1 .version-player__btn { background: var(--accent); }
.version-card--v2 .version-player__btn { background: var(--accent-2); }
.version-card--v3 .version-player__btn { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.version-card--v4 .version-player__btn { background: linear-gradient(135deg, #f08a4b, var(--accent)); }
.version-card--v2 .version-player__range,
.version-card--v3 .version-player__range { accent-color: var(--accent-2); }
.version-card--v4 .version-player__range { accent-color: var(--accent); }
.version-card:hover { border-color: var(--violet-300); }
.version-card.is-selected {
  border-color: var(--accent-2);
  background: linear-gradient(135deg, var(--accent-soft), var(--violet-50));
}
.version-card.is-selected .version-card__badge {
  background: var(--grad-accent);
  border-color: transparent;
}
.version-card__length {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--violet-100);
  color: var(--violet-ink);
  font-size: .75rem;
  font-weight: 700;
}
.version-card--pending { border-color: var(--violet-300); background: var(--violet-50); }
#btnMusicRegen { border-color: var(--violet-300); color: var(--violet-ink); }
#btnMusicRegen:hover { background: var(--violet-50); border-color: var(--accent-2); }

/* ---------------------------------------------------------------------- *
 * 32. EKRAN ZAKUPU 2026-09-23 — ekspres pod bonusami, suma, metody płatności
 *     od razu pod kartą, logo Stripe + „bezpieczne i poufne", ekran kolejki.
 * ---------------------------------------------------------------------- */
.sale-express {
  margin: var(--sp-4) 0 var(--sp-2);
  text-align: left;
  background: var(--peach-50);
  border-color: var(--peach-100);
}
.sale-express:hover,
.sale-express.is-checked { background: var(--peach-100); border-color: var(--peach-300); }
.sale-express .express-toggle__label { font-weight: 700; font-size: var(--fs-sm); }
.sale-express .express-toggle__price { color: var(--peach-ink); font-weight: 800; margin-left: 4px; }
.sale-express .express-toggle__body { display: block; }
.sale-express .express-toggle__label,
.sale-express .express-toggle__price { display: inline; }
.sale-express .express-toggle__hint { display: block; margin-top: 2px; }
.sale-express input:disabled ~ .express-toggle__body { opacity: .7; }
.sale-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: var(--sp-2) 0 var(--sp-4);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border-strong);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.sale-total strong { font-size: var(--fs-lg); color: var(--ink); }
.sale-unlock-card .stripe-block { margin-top: var(--sp-3); padding-top: var(--sp-4); }
.sale-unlock-card .stripe-block__heading { font-size: var(--fs-md); margin-bottom: 12px; }
.stripe-element { min-height: 220px; }
.stripe-trust { margin-top: 14px; text-align: center; }
.stripe-trust__powered {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: #f5f4ff;
  border: 1px solid #e3e1ff;
  color: #425466;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.stripe-trust__lock { color: #635bff; }
/* Wordmark Stripe (fiolet marki Stripe #635BFF) — tekstowy, bez zewnętrznych plików. */
.stripe-logo {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.04em;
  color: #635bff;
  line-height: 1;
}
.stripe-trust .stripe-block__secure { margin-top: 8px; }
.state-icon--ok { background: var(--success-soft); color: var(--success); }
.flow-queued { text-align: center; }
.flow-queued__express {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  background: var(--peach-100);
  color: var(--peach-ink);
  font-weight: 700;
}

/* ---------------------------------------------------------------------- *
 * 33. KLIMAT VINTAGE 2026-09-24 — rytm sekcji landingu
 *
 * Brief właściciela: „coś bardziej profesjonalnego, pasującego do naszego
 * klimatu vintage z UK, nieprzesadzone”. Akcenty marki (róż/fiolet, DM Serif)
 * zostają — zmienia się to, co POD nimi:
 *   • tła: kość słoniowa (--bg) + ziarno papieru (--grain) zamiast szarości,
 *   • rytm: hero (mgiełka) → kroki (kość) → pakiet (pas różowego papieru)
 *     → gatunki (kość, karty w espresso) → przykłady (scena pudrowa)
 *     → FAQ (kość) → finał + stopka (espresso),
 *   • eyebrow nad nagłówkiem sekcji: kapitaliki w mosiądzu z kreskami,
 *     które „dorysowują się” przy wejściu sekcji w kadr (raz, bez pętli).
 * ---------------------------------------------------------------------- */
body { background: var(--grain), var(--bg); }

.hero {
  background:
    var(--grain),
    radial-gradient(58% 52% at 86% -4%, var(--hero-mist-rose) 0%, transparent 70%),
    radial-gradient(46% 44% at 6% 96%, var(--hero-mist-violet) 0%, transparent 72%),
    linear-gradient(165deg, var(--hero-tint-rose) 0%, var(--hero-tint-violet) 55%, var(--bg) 100%);
}

/* Pas różowego papieru (sekcja pakietu) — pełna szerokość, włosowe linie
   w mosiądzu na krawędziach zamiast twardego cięcia koloru. */
.section--band {
  position: relative;
  background: var(--grain), var(--band-rose);
  border-block: 1px solid rgba(176, 141, 87, .22);
}

/* Eyebrow sekcji: „JAK TO DZIAŁA” w mosiądzu, z kreskami po bokach. */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--sp-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--brass-ink);
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transition: transform .9s var(--ease-out) .25s;
}
.section-eyebrow::before { transform-origin: 100% 50%; }
.section-eyebrow::after { transform-origin: 0 50%; }
.section-head.vis .section-eyebrow::before,
.section-head.vis .section-eyebrow::after { transform: scaleX(1); }

/* Karty na kości słoniowej: ciepły kontur zamiast szarego. */
.step-row { box-shadow: 0 1px 2px rgba(60, 35, 30, .05), 0 12px 28px -22px rgba(60, 35, 30, .25); }
.step-row { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.step-row:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(60, 35, 30, .05), 0 18px 36px -22px rgba(60, 35, 30, .32); }

/* Pakiet: ptaszki „wskakują” kolejno, gdy karta wjeżdża w kadr. */
.package-card--list.vis .package-list__check {
  animation: pkg-check-pop .5s var(--ease-out) both;
  animation-delay: calc(.25s + var(--pkg-i, 0) * 70ms);
}
.package-list__item:nth-child(2) { --pkg-i: 1; }
.package-list__item:nth-child(3) { --pkg-i: 2; }
.package-list__item:nth-child(4) { --pkg-i: 3; }
.package-list__item:nth-child(5) { --pkg-i: 4; }
.package-list__item:nth-child(6) { --pkg-i: 5; }
.package-list__item:nth-child(7) { --pkg-i: 6; }
.package-list__item:nth-child(8) { --pkg-i: 7; }
@keyframes pkg-check-pop {
  0%   { transform: scale(.4); opacity: 0; }
  70%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.package-card--list { box-shadow: 0 1px 2px rgba(60, 35, 30, .05), 0 22px 44px -30px rgba(60, 35, 30, .35); }
.package-card { border-color: rgba(176, 141, 87, .22); }

/* Gatunki: karty z granatu wzorca → espresso (ta sama rodzina co finał). */
.genres {
  --glos-bg: var(--dark-warm);
  --glos-bg-hover: #2e1f24;
  --glos-text: #b9a8ab;
}

/* Finał + stopka: jeden ciepły, ciemny blok z ziarnem. */
.section--final,
.site-footer { background: var(--grain), var(--dark-warm); }
.section--final { position: relative; overflow: hidden; }
/* Echo winyla za nagłówkiem finału — koncentryczne rowki, ledwie widoczne. */
.section--final::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 760px;
  height: 760px;
  margin: -380px 0 0 -380px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 19%, #000 60%, transparent 71%);
          mask: radial-gradient(circle, transparent 18%, #000 19%, #000 60%, transparent 71%);
  pointer-events: none;
}
.section--final .container { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .section-eyebrow::before,
  .section-eyebrow::after { transform: scaleX(1); transition: none; }
  .package-card--list.vis .package-list__check { animation: none; }
  .step-row:hover { transform: none; }
}

/* ---------------------------------------------------------------------- *
 * 33. KREATOR 2026-09-24 — dwa głosy w karcie wokalu („Przykład 1/2" jak na
 *     stronie głównej); każdy ma własną próbkę i personę Suno.
 * ---------------------------------------------------------------------- */
.voice-card--group {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  cursor: default;
}
.voice-card--group:hover { border-color: var(--border-strong); }
.voice-card--group.is-selected { border-color: var(--accent-2); background: var(--surface); }
.voice-card--group .voice-card__text { padding-right: 0; }
.voice-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.voice-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 4px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.voice-pick:hover { border-color: var(--violet-300); }
.voice-pick.is-selected { border-color: var(--accent-2); background: var(--violet-100); }
.voice-pick .tile-play { width: 34px; height: 34px; flex: 0 0 auto; }
.voice-pick__choose {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.voice-pick.is-selected .voice-pick__choose { color: var(--violet-ink); }
.voice-pick { min-width: 0; }
.voice-pick__choose { overflow: hidden; text-overflow: ellipsis; }
.voice-pick.is-selected { box-shadow: 0 0 0 1px var(--accent-2) inset; }
@media (min-width: 640px) {
  /* Dwie karty wokali (każda z 2 głosami) szerzej, „Losowy głos" węziej. */
  .voice-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px; }
  .voice-card:not(.voice-card--group) { flex-direction: column; justify-content: center; text-align: center; gap: 6px; }
  .voice-card:not(.voice-card--group) .voice-card__text { padding-right: 0; }
}
@media (min-width: 640px) {
  .voice-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 128px; }
}
.voice-pick { gap: 4px; padding: 3px 6px 3px 3px; }
.voice-pick .tile-play { width: 30px; height: 30px; }
/* Kółko zostaje 30 px (dwie pigułki obok siebie, krok na jeden ekran), ale
   strefa dotyku ma 44×44 px (Apple HIG) — niewidzialny ::after; ::before
   zajmuje pierścień postępu. Przycisk leży nad „Przykład N" (z-index 1),
   więc 3 px zakładki na etykietę trafia w odsłuch, nie w wybór. */
.voice-pick .tile-play::after {
  content: "";
  position: absolute;
  inset: -8.5px; /* od wnętrza 1,5 px ramki: 27 + 2×8,5 = 44 px */
  border-radius: 50%;
}
.voice-pick__choose { font-size: .78rem; letter-spacing: -.01em; }
/* Tablet: karty wokali po dwie, „Losowy głos" na całą szerokość pod nimi. */
@media (min-width: 640px) and (max-width: 860px) {
  .voice-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .voice-card:not(.voice-card--group) { grid-column: 1 / -1; flex-direction: row; text-align: left; }
}

/* ---------------------------------------------------------------------- *
 * 34. LOGOTYPY METOD PŁATNOŚCI 2026-09-24 — oryginalne znaki BLIK, Visa,
 *     Mastercard, Klarna nad Payment Elementem (ikon w iframe Stripe nie
 *     da się podmienić). Białe kafle jak na terminalu w sklepie; wybrana
 *     metoda dostaje kontur akcentu, pozostałe lekko przygasają.
 * ---------------------------------------------------------------------- */
.pay-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  max-width: 420px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.pay-logo {
  display: grid;
  place-items: center;
  height: 44px;
  min-width: 0;
  padding: 0 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 2px rgba(60, 35, 30, .06);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.pay-logo img { display: block; width: auto; max-width: 100%; height: 26px; object-fit: contain; }
.pay-logo img[alt="Visa"] { height: 16px; }
.pay-logo img[alt="Mastercard"] { height: 30px; }
.pay-logo img[alt="Klarna"] { height: 28px; border-radius: 5px; }
/* Wybrana metoda: kontur akcentu. Pozostałych NIE przygaszamy — znaki mają
   wyglądać dokładnie jak oryginały. */
.pay-logo.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}

/* ---------------------------------------------------------------------- *
 * 35. TELEFON 2026-09-26 — pierwszy ekran z reklamy FB
 *     Pomiar 390×844: baner cookies zajmował ~45% ekranu i zasłaniał CTA,
 *     a karta z reakcjami zaczynała się dopiero na 673 px. Baner: tytuł
 *     zostaje dla czytników (aria-labelledby), przyciski obok siebie —
 *     nadal IDENTYCZNE (wymóg prawny, patrz PROMPT_COOKIES). Hero: mniejsze
 *     odstępy, żeby górna część filmu weszła w pierwszy ekran.
 * ---------------------------------------------------------------------- */
@media (max-width: 560px) {
  .cookie-banner { padding: var(--sp-3) var(--sp-4); }
  .cookie-banner__title {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .cookie-banner__text { margin-bottom: var(--sp-3); font-size: var(--fs-xs); line-height: 1.45; }
  .cookie-banner__actions { flex-direction: row; gap: var(--sp-2); }
  .cookie-banner__actions .btn {
    flex: 1 1 0; width: auto; min-height: 44px;
    padding: 10px 8px; font-size: var(--fs-sm);
  }
  .cookie-banner__more { margin-top: var(--sp-2); }
}

@media (max-width: 600px) {
  .hero { padding-block: var(--sp-5) var(--sp-7); }
  .hero h1 { margin-bottom: var(--sp-3); }
  .hero-sub { font-size: var(--fs-base); margin-bottom: var(--sp-4); }
  .hero__actions { gap: 0; }
  .hero-microcopy { margin-top: var(--sp-1); }
  .hero__grid { gap: var(--sp-5); }
}

/* ---------------------------------------------------------------------- *
 * 36. RUCH 2026-09-26 — „bijące serce” CTA hero + reżyseria wejść
 *
 * CTA hero (.btn--beat) — rozwinięcie „Heartbeat Effect Button” z 21st.dev
 * (tam: 1 uderzenie scale 1.05 + pierścień box-shadow co 2 s). U nas pod
 * markę serce-winyl: podwójne uderzenie „lub-dub”, dwie fale rozchodzące
 * się od pigułki (box-shadow na ::after, więc cień przycisku zostaje)
 * i co drugi cykl odblask przesuwający się po gradiencie (druga warstwa
 * tła — bez overflow:hidden, które ucięłoby fale). Startuje po wejściu
 * hero (1,6 s), po najechaniu przestaje bić i „podnosi się”.
 * `scale` zamiast `transform`, żeby nie kasować :active translateY.
 * ---------------------------------------------------------------------- */
.btn--beat {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%),
    var(--grad-accent);
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  background-repeat: no-repeat;
  animation:
    cta-beat 2.4s ease-in-out 1.6s infinite,
    cta-shine 4.8s ease-in-out 2.2s infinite;
}
.btn--beat::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  animation: cta-ring 2.4s ease-out 1.6s infinite;
}
.btn--beat:hover,
.btn--beat:focus-visible {
  animation: none;
  scale: 1.04;
  box-shadow: 0 14px 30px -10px var(--accent-ring), var(--shadow-md);
}
.btn--beat:hover::after,
.btn--beat:focus-visible::after { animation: none; }
@keyframes cta-beat {
  0%, 44%, 100% { scale: 1; }
  10% { scale: 1.065; }
  20% { scale: 1; }
  30% { scale: 1.04; }
}
@keyframes cta-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent),
                0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
  }
  70%, 100% {
    box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent),
                0 0 0 26px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}
@keyframes cta-shine {
  0% { background-position: 160% 0, 0 0; }
  32%, 100% { background-position: -60% 0, 0 0; }
}

/* ---------------------------------------------------------------------- *
 * Reżyseria wejść — zamiast jednego „fade-up” dla wszystkiego: każdy typ
 * elementu ma własny ruch, a w obrębie bloku rzeczy wchodzą po kolei.
 *   • nagłówki sekcji: eyebrow (kreski się rysują) → H2 wyostrza się
 *     z rozmycia → podtytuł,
 *   • hero: H1 (bez opacity 0 — LCP) → podtytuł → CTA „wskakuje” →
 *     karta z reakcjami wpada z obrotem,
 *   • kroki 1–2–3 na przemian z lewej/prawej, ikona „wskakuje” po karcie,
 *   • przykłady: gramofon pierwszy (zoom z rozmycia), karty z boków,
 *   • pakiet: lista z lewej, telefon z prawej z lekkim obrotem.
 * Tylko opacity/translate/scale/rotate/filter — zero CLS. Rozmycie znika
 * po wejściu (filter: none), więc nie zostaje żadna warstwa na stałe.
 * ---------------------------------------------------------------------- */
:root {
  --rv-ease: cubic-bezier(.16, 1, .3, 1);
  --rv-step: 90ms;
}
main { overflow-x: clip; } /* wejścia z boku nie mogą dać poziomego scrolla */

.rv.rv {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity .7s ease-out,
    translate .95s var(--rv-ease),
    scale .95s var(--rv-ease),
    rotate .95s var(--rv-ease),
    filter .8s ease-out;
  transition-delay: calc(var(--rv-i, 0) * var(--rv-step) + var(--rv-d, 0ms));
}
/* (0,4,0): wygrywa z każdym wariantem niżej, niezależnie od kolejności. */
.rv.rv.vis.vis { opacity: 1; translate: none; scale: none; rotate: none; filter: none; }

/* Hero: jedna sekwencja zamiast wszystkiego naraz. */
.hero .rv.rv--lift { opacity: 1; translate: 0 18px; filter: blur(10px); --rv-d: 0ms; }
.hero .hero-sub.rv { filter: blur(6px); --rv-d: 140ms; }
.hero .hero__cta.rv { translate: 0 18px; scale: .92; --rv-d: 300ms; }
.hero .hero__media.rv {
  translate: 60px 40px;
  rotate: 7deg;
  scale: .92;
  filter: blur(8px);
  --rv-d: 480ms;
  transition-duration: .9s, 1.3s, 1.3s, 1.3s, 1s;
}

/* Nagłówki sekcji: kontener stoi, wchodzą jego dzieci po kolei. */
.section-head.rv.rv { opacity: 1; translate: none; filter: none; }
.section-head.rv > * {
  opacity: 0;
  translate: 0 16px;
  filter: blur(6px);
  transition: opacity .7s ease-out, translate .9s var(--rv-ease), filter .8s ease-out;
}
.section-head.rv > .section-eyebrow { translate: 0 8px; filter: none; }
.section-head.rv > h2 { transition-delay: 120ms; }
.section-head.rv > :nth-child(3) { transition-delay: 280ms; }
.section-head.rv.vis > * { opacity: 1; translate: none; filter: none; }

/* Kroki: na przemian z lewej i z prawej; ikona wskakuje po karcie. */
.step-row.rv:nth-child(odd) { translate: -56px 0; }
.step-row.rv:nth-child(even) { translate: 56px 0; }
.step-row.rv .step-row__ico { opacity: 0; scale: .5; rotate: -12deg; }
.step-row.rv.vis .step-row__ico {
  opacity: 1; scale: 1; rotate: 0deg;
  transition: opacity .4s ease-out, scale .7s cubic-bezier(.34, 1.56, .64, 1), rotate .7s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(var(--rv-i, 0) * var(--rv-step) + 380ms);
}

/* Przykłady: gramofon pierwszy, potem karty z boków (a/c lewa, b/d prawa). */
.tp-tt-stage.rv { translate: none; scale: .82; filter: blur(12px); transition-delay: 60ms; }
.tp-card.rv { filter: blur(4px); --rv-d: 220ms; }
.tp-card--1.rv,
.tp-card--3.rv { translate: -64px 16px; rotate: -2deg; }
.tp-card--2.rv,
.tp-card--4.rv { translate: 64px 16px; rotate: 2deg; }

/* Pakiet: lista z lewej, żywy telefon z prawej z obrotem. */
.package-card--list.rv { translate: -48px 0; }
.package-card--media.rv { translate: 56px 24px; rotate: 3deg; scale: .96; filter: blur(6px); --rv-d: 160ms; }

/* CTA pod sekcjami i finał: przycisk „wskakuje”. */
.steps-cta.rv,
.package-cta.rv { translate: 0 16px; scale: .94; }
.final-cta.rv.rv { opacity: 1; translate: none; }
.final-cta.rv > * {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .7s ease-out, translate .9s var(--rv-ease), scale .9s cubic-bezier(.34, 1.56, .64, 1), filter .8s ease-out;
}
.final-cta.rv > h2 { filter: blur(6px); }
.final-cta.rv > p { transition-delay: 150ms; }
.final-cta.rv > .btn { scale: .9; transition-delay: 300ms; }
.final-cta.rv.vis > * { opacity: 1; translate: none; scale: none; filter: none; }

/* Na telefonie wejścia z boku krótsze — ekran jest wąski. */
@media (max-width: 767px) {
  .step-row.rv:nth-child(odd),
  .tp-card--1.rv, .tp-card--3.rv,
  .package-card--list.rv { translate: -28px 0; }
  .step-row.rv:nth-child(even),
  .tp-card--2.rv, .tp-card--4.rv,
  .package-card--media.rv { translate: 28px 0; }
  .hero .hero__media.rv { translate: 0 48px; rotate: 5deg; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--beat, .btn--beat::after { animation: none; }
  .rv.rv, .rv.rv.rv, .section-head.rv > *, .final-cta.rv > *,
  .step-row.rv .step-row__ico {
    opacity: 1; translate: none; scale: none; rotate: none; filter: none;
    transition: none;
  }
}