/**
 * loyalty-cta.css — „Program partnerski": ciemny panel z kaflami korzyści,
 * jasną kartą kalkulatora i podglądem karty klubowej.
 *
 * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem
 * .dc-loyalty-cta__, nic stąd nie wycieka na cudze znaczniki. Jedyny wyjątek
 * to .dc-ring (komponent), dostrajany WYŁĄCZNIE w selektorze potomnym pod
 * prefiksem sekcji.
 *
 * PANEL JEST CIEMNY W OBU MOTYWACH STRONY — trzeci taki przypadek po
 * help-cta i fuel-switch (patrz docblock loyalty-cta.php). Wynikają z tego
 * te same rzeczy co w fuel-switch.css:
 *
 *   1. color-mix() zamiast tokenów z rodziny --dc-surface-glass /
 *      --dc-border-subtle. Tamte są PODMIENIANE między motywami i w motywie
 *      jasnym dałyby prawie nieprzezroczystą białą kartę na czarnym panelu.
 *      color-mix(in srgb, var(--dc-text-on-dark) N%, transparent) daje biel
 *      z alfą W OBU MOTYWACH, bez nowego tokenu i bez wpisanego koloru —
 *      grep po hex/rgb go nie widzi. Technika z help-cta.css.
 *
 *   2. Złoty TEKST bierze --dc-accent, nie --dc-accent-light jak
 *      w fuel-switch i nie --dc-accent-strong z reguły J. Powód jest
 *      prosty: makieta ma tu #C9A84C, czyli co do znaku wartość
 *      --dc-accent — tokenu NIEPODMIENIANEGO między motywami (tokens.css,
 *      sekcja 11). Reguła J broni kontrastu złota na tle JASNYM, a tła
 *      jasnego pod tym tekstem nigdy nie ma.
 *
 *   3. JEDNA reguła [data-theme='dark'] NA KOLOR (sekcja 8, ciemne okienka
 *      pod sygnetem). Robi to samo co jedyne takie reguły w help-cta.css
 *      i fuel-switch.css: przełącza między dwoma PRAWDZIWYMI tokenami
 *      o zbieżnej wartości (--dc-surface-inverse w jasnym / --dc-surface
 *      w ciemnym, oba #1C1A17), a nie wpisuje koloru. Sam panel takiej
 *      reguły nie potrzebuje — jego tło jest nieprzezroczystym obrazem,
 *      identycznym w home.html i home-dark.html co do przecinka.
 *
 * KARTA KALKULATORA JEST PROBLEMEM ODWROTNYM — sekcja 7. Jasna wyspa na
 * zawsze ciemnym panelu potrzebuje tuszu CIEMNEGO w obu motywach, a cała
 * rodzina --dc-text jest w ciemnym motywie jasna. Rozwiązanie lustrzane
 * wobec punktu 1: color-mix() na --dc-on-accent.
 *
 * CO JEST TU LICZBĄ, A NIE TOKENEM (reguła 17, punkt 4 — grep ma coś
 * znaleźć i te trafienia są świadome). Wszystkie z tego samego powodu,
 * co w fuel-switch.css, gdzie stoi ich pełny wywód (decisions.md,
 * 2026-08-28 — „fuel-switch: atmosfera wprost z makiety"):
 *
 *   a) TŁO PANELU to gradient CZTEROPRZYSTANKOWY (#2e1f0c / #1a1208 /
 *      #0e0c08 / #090807). Trzy z tych czterech odcieni są ciemniejsze niż
 *      najciemniejsza powierzchnia palety w motywie jasnym
 *      (--dc-surface-inverse, #1C1A17), więc nie da się ich zbudować alfą
 *      nałożoną na token — kompozycja nigdy nie zejdzie poniżej podłoża.
 *      To samo dotyczy TŁA KARTY KLUBOWEJ (sekcja 8): #1d1407 / #0d0b07 /
 *      #1a1208, wszystkie trzy poniżej tej samej granicy.
 *
 *   b) `filter: blur()` Z LICZBĄ, nie --dc-blur-*. Rodzina --dc-blur-*
 *      niesie saturate() (md 175%, lg 165%, xl 190%), którego makieta nie
 *      ma w żadnej warstwie atmosfery — a poświaty są złote, więc podbicie
 *      nasycenia idzie wprost na panel (to była przyczyna odrzucenia
 *      pierwszej wersji fuel-switch). Jedyny czysty token, --dc-blur-sm
 *      (blur(10px)), jest tu o 35–45 px za wąski.
 *
 *   c) POŚWIATY IDĄ Z DRABINKI --dc-accent-aNN (partia 3 audytu,
 *      design-audit.md, B.3): makietowe rgba(160,100,30,.16) -> a15,
 *      złota .22 -> a20. Przy alfie .16–.22 i rozmyciu 45–55 px własnych
 *      odcieni makiety nie da się odróżnić od --dc-accent w tej samej
 *      alfie; pierwsza wersja trzymała je jako literały z obawy o barwę.
 *
 *   d) (nieaktualne od partii 4 audytu) CIENIE BYŁY CZARNYMI LITERAŁAMI:
 *      karta kalkulatora 0 20px 60px .28, karta klubowa 0 28px 70px .55,
 *      okienko sygnetu 0 4px 12px .5. Zmierzone (design-audit.md, partia 4,
 *      różnica zrzutu z cieniem i bez): cień karty kalkulatora dawał
 *      maks. 3/255 — niewidoczny; cień karty klubowej 39/255 i sięgał 58 px
 *      pod kartę przy progu 8, a przypis pod nią stoi 22 px niżej — to jest
 *      „brudna plama" zgłoszona w motywie ciemnym. Panel jest identyczny
 *      w obu motywach, więc piksele cienia też były identyczne: na jasnej
 *      stronie oko nie widzi gradacji czerni, na ciemnej widzi. Teraz żadna
 *      karta na panelu nie ma cienia rzucanego (C.4: elementy na czarnym
 *      panelu bez cienia); strukturę karty klubowej daje obwódka biel .1,
 *      ta sama co na kaflach korzyści, a nie rozlana czerń pod spodem.
 *
 *   e) (nieaktualne od partii 2 audytu) POŚWIATA POD WEZWANIEM (sekcja 9)
 *      była literałem: makietowe 0 10px 36px rgba(201,168,76,.55) i obrys
 *      .8 wychodziły poza drabinkę alfy złota. Wezwanie ma teraz rangę 1
 *      (design-audit.md, C.1) i bierze --dc-shadow-accent oraz obwódkę a50
 *      jak każde główne wezwanie na stronie — poświata jest o 24 px
 *      krótsza i o połowę słabsza niż w makiecie, to świadoma zamiana
 *      wierności makiecie na spójność między sekcjami.
 */

/* ==========================================================================
   1. PANEL
   ========================================================================== */

/* .dc-loyalty-cta nie ma tu żadnej deklaracji — szerokość i marginesy boczne
   daje .dc-container, pionowy oddech .dc-section, obie z base.css bez
   modyfikacji (reguła 8). Klasa zostaje w znaczniku jako nazwa bloku. */

/* Gradient jest NIEPRZEZROCZYSTY na całej powierzchni — ostatni przystanek
   rozlewa się poza elipsę — więc background-color jest tylko awaryjny,
   a reguły [data-theme] panel nie potrzebuje wcale.

   Środek elipsy stoi w makiecie w lewej ćwiartce (25% -5%), nie na osi jak
   w fuel-switch — stąd rozbłysk nad nagłówkiem, a nie nad środkiem panelu.

   overflow: hidden — warstwy atmosfery (sekcja 3) celowo wychodzą poza obrys
   panelu i muszą zostać przycięte jego promieniem.

   Scalenia paddingu: makietowe clamp(44px, 5vw, 60px) w pionie i
   clamp(36px, 5vw, 60px) w poziomie -> --dc-space-48 / --dc-space-40
   i --dc-space-64 jako sufit obu. Cień 0 50px 120px rgba(0,0,0,.48)
   -> --dc-shadow-2xl, największy w zestawie (to samo scalenie co
   w fuel-switch). */
/* RANGA 1 NA CIEMNYM PANELU — wariant przez zmienne, nie przez klasę.
   Panel jest ciemny w obu motywach, więc dla przycisku na nim jest tym,
   czym motyw ciemny dla całej strony: podstawia inne wartości pod te same
   tokeny, a reguła przycisku zostaje identyczna z rangą 1 wszędzie indziej
   (.dc-loyalty-cta__cta niżej nie wie, że stoi na czerni). Zmienna
   ustawiona na PANELU, nie na przycisku — reguła 18: pokrętło stoi tam,
   gdzie opisany jest powód, i obejmuje każdą złotą poświatę na panelu.
   Ten sam zapis w help-cta.css (design-audit.md, partia 3). */
.dc-loyalty-cta__panel {
  --dc-shadow-accent: var(--dc-shadow-accent-on-dark);
  --dc-shadow-inset-top: var(--dc-shadow-inset-top-on-dark);

  position: relative;
  isolation: isolate;
  padding-block: clamp(var(--dc-space-48), 5vw, var(--dc-space-64));
  padding-inline: clamp(var(--dc-space-40), 5vw, var(--dc-space-64));
  border-radius: var(--dc-radius-28);
  background-color: #090807;
  background-image: radial-gradient(
    ellipse 130% 80% at 25% -5%,
    #2e1f0c 0%,
    #1a1208 36%,
    #0e0c08 65%,
    #090807 100%
  );
  box-shadow: var(--dc-shadow-2xl);
}

/* ==========================================================================
   2. OBWÓDKA — DOSTROJENIE KOMPONENTU
   Warstwy wstawia znacznik: poświata, refleks i łuk. Wartości makiety
   ciemnej trafiają w domyślne pokrętła co do jednej: rant 1,5 px
   (--dc-ring-inset), obrót w prawo (dcRingSpin) w 7 s (--dc-duration-ring),
   gradient refleksu 155deg to co do przecinka --dc-gradient-specular.
   Poświata (.dc-ring--halo) DOŁOŻONA w partii 6 audytu — odwołanie decyzji
   z 2026-08-28 „obwódka z makiety ciemnej, bez poświaty" (decisions.md,
   2026-08-30). Powód z pomiaru partii 5: kreska łuku jest w obu motywach
   identyczna co do piksela, ale w motywie jasnym za krawędzią czarnego
   panelu leży jasna strona (7–10 poziomów kontrastu wobec 237 w ciemnym),
   więc bez poświaty łuk czyta się jako prześwit tła, nie jako obwódka;
   help-cta — też czarny w obu motywach — poświatę ma i jako jedyny ciemny
   panel czytał się w jasnym motywie. W motywie ciemnym komponent chowa
   poświatę sam (display: none), więc tam nic się nie zmienia.
   ========================================================================== */

/* Refleks jest w komponencie widoczny WYŁĄCZNIE w motywie ciemnym: na jasnym
   tle strony karta odcina się sama. Ten panel jest ciemny w obu motywach,
   więc obowiązuje go układ warstw motywu ciemnego — zawsze. To różnica
   NIEKOLOROWA (obecność warstwy), czyli typ wyjątku, który reguła 10 każe
   trzymać w pliku sekcji. Tak samo w fuel-switch.css. */
.dc-loyalty-cta__panel .dc-ring--specular {
  display: block;
}

/* FAZA I ZWROT — numer 6 z rejestru w components/ring.css: start o 6/12
   obrotu (180°), parzysty numer, czyli obrót w prawo (domyślny dcRingSpin,
   wypisany jawnie, żeby rejestr był czytelny u siebie). Liczba jest umowna
   — znaczy tylko, że żadna inna sekcja jej nie ma; nie zależy od miejsca
   sekcji na stronie (partia 5 audytu). Pokrętła na panelu, nie na warstwie:
   zmienne własne dziedziczą się w dół. */
.dc-loyalty-cta__panel {
  --dc-ring-spin: dcRingSpin;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -6 / 12);
}

/* ==========================================================================
   3. ATMOSFERA — dwie plamy z makiety, w przeciwległych rogach
   Obie leżą pod treścią (--dc-z-base) i nie łapią kursora. Rozmiary
   i pozycje w procentach panelu, bo taka jest makieta i bo dzięki temu
   skalują się razem z nim bez ani jednego breakpointu.
   Trzecia warstwa makiety — pozioma „struktura węgla" (kreski biel .012
   co 40 px) — zdjęta w partii 4 audytu: zmierzona jako maks. 3/255
   różnicy i zero pikseli powyżej progu 8, czyli koszt bez efektu.
   Plamy się NIE nakładają (zmierzone obrysy przy progu 3: 0,0–612,439
   i 628,766–1175,1215) — ten sam układ, co w chwalonym #calculator.
   ========================================================================== */

/* WARSTWA ATMOSFERY — owijka plam (partia 6 audytu). Do partii 6 panel sam
   miał overflow: hidden i to on przycinał obie plamy do obrysu. Poświata
   obwódki (.dc-ring--halo) leży 4 px POZA panelem, więc przy takim panelu
   byłaby obcięta — dlatego przycinanie schodzi z panelu na tę warstwę:
   absolutna, równa z panelem, z jego promieniem, pod treścią. Plamy w niej
   mają ten sam układ odniesienia co przedtem (pudełko panelu), więc ich
   procenty i przesunięcia nie zmieniają znaczenia. */
.dc-loyalty-cta__atmosphere {
  position: absolute;
  inset: 0;
  z-index: var(--dc-z-base);
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.dc-loyalty-cta__glow {
  position: absolute;
  z-index: var(--dc-z-base);
  pointer-events: none;
}

/* Złota poświata w lewym górnym rogu, nad nagłówkiem. Kolor z drabinki
   złota (nagłówek pliku, punkt c), rozmycie literalne (punkt b). Gaśnie do
   --dc-accent-a00, a nie do `transparent`, żeby nie interpolować przez
   przezroczystą czerń (uwaga z tokens.css przy --dc-accent-a00).
   Tętno 7 s trafia w --dc-duration-float co do sekundy. */
.dc-loyalty-cta__glow--crown {
  inset-block-start: -10%;
  inset-inline-start: -5%;
  width: 60%;
  height: 55%;
  background-image: radial-gradient(ellipse, var(--dc-accent-a20), var(--dc-accent-a00) 65%);
  filter: blur(45px);
  animation: dcLoyaltyCtaGlow var(--dc-duration-float) var(--dc-ease) infinite;
}

/* Żar w prawym dolnym rogu. Drabinka złota: makietowe rgba(160,100,30,.16)
   -> --dc-accent-a15 (nagłówek, punkt c).
   Makietowe 10 s scalone do --dc-duration-float-slow (11 s) — jedyny token
   dłuższy od 7 s w tej kategorii; to scalenie zmienia wygląd tylko w czasie.
   Opóźnienia startu (2,5 s) nie ma i nie trzeba: przy okresach 7 s i 11 s
   obie poświaty rozjeżdżają się po pierwszym cyklu same (to samo rozwiązanie
   co w fuel-switch.css). */
.dc-loyalty-cta__glow--ember {
  inset-block-end: -15%;
  inset-inline-end: -8%;
  width: 58%;
  height: 55%;
  background-image: radial-gradient(ellipse, var(--dc-accent-a15), var(--dc-accent-a00) 65%);
  filter: blur(55px);
  animation: dcLoyaltyCtaGlow var(--dc-duration-float-slow) var(--dc-ease) infinite;
}

/* ==========================================================================
   4. NAGŁÓWEK SEKCJI
   Do lewej i ograniczony do 680 px — --dc-measure-xl trafia w makietę
   dokładnie. Odstęp pod nagłówkiem 44 px -> --dc-space-48.
   ========================================================================== */

.dc-loyalty-cta__header {
  position: relative;
  z-index: var(--dc-z-raised);
  max-width: var(--dc-measure-xl);
  margin-block-end: var(--dc-space-48);
}

/* Nadtytuł jest samym tekstem, bez pigułki i bez kropki — inaczej niż
   w fuel-switch, tak samo jak w help-cta. Jeden nadtytuł sekcji w motywie
   (design-audit.md, C.8; partia 6): 12 px / 600 / --dc-tracking-widest,
   odstęp 14 do h2 — makietowe 11 px / 700 / .22em / 16 zeszły do wzorca
   siedmiu pozostałych sekcji. Złoto: --dc-accent, nagłówek pliku, punkt 2. */
.dc-loyalty-cta__eyebrow {
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  color: var(--dc-accent);
}

/* font-size jawnie: domyślne h2 z base.css bierze --dc-display-3 (sufit
   40 px), a makieta ma tu sufit 48 px — dokładnie sytuacja z help-cta.css,
   więc i to samo rozwiązanie: --dc-display-2 (clamp 34/4.4vw/48).
   Interlinia: --dc-leading-tight (1,12), nie makietowe 1,03 —
   --dc-leading-none jest w motywie zarezerwowane dla h1 i liczebników,
   a to jedyny trzywierszowy h2 strony i przy 1,0 wydłużenia się stykały
   (design-audit.md, C.10; partia 6). Odstęp do leadu 14 jak w każdej
   sekcji. Trakt -0,035em -> --dc-tracking-tighter (-0,03em). */
.dc-loyalty-cta__heading {
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-display-2);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tighter);
  color: var(--dc-text-on-dark);
}

/* Akapit prowadzący: makietowe rgba(255,255,255,.6) to co do setnej
   --dc-text-on-dark-muted w motywie jasnym, więc token, a nie color-mix. */
.dc-loyalty-cta__lead {
  font-size: var(--dc-text-xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-on-dark-muted);
}

/* ==========================================================================
   5. KAFLE KORZYŚCI
   PIERWSZA z trzech siatek tej sekcji — makieta daje każdej inną minimalną
   szerokość kolumny i to nie jest szum: kafel korzyści ma się zwijać
   wcześniej niż kolumna z kalkulatorem. minmax(220px) trafia
   w --dc-grid-min-sm co do piksela.

   min(..., 100%) jest OBOWIĄZKOWE, tak samo jak w .dc-grid z base.css:
   bez niego ścieżka minimalna toru jest przy 390 px szersza niż wnętrze
   panelu i kafle wychodzą poza jego obrys. Sam auto-fit tego nie chroni —
   zwija liczbę kolumn, nie ich minimalną szerokość.

   Liczba kolumn na trzech szerokościach zmierzona — tabela w raporcie.
   Odstęp pod siatką 36 px -> --dc-space-40.
   ========================================================================== */

.dc-loyalty-cta__benefits {
  position: relative;
  z-index: var(--dc-z-raised);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-14);
  margin-block-end: var(--dc-space-40);
}

/* BEZ reakcji na najazd kursorem, mimo że makieta ma tu style-hover (tło .12,
   złota obwódka, uniesienie o 3 px). Reguła 14: kafel nie jest ani
   odnośnikiem, ani przyciskiem, więc tło reagujące na kursor obiecywałoby
   kliknięcie, którego nie ma. Różnica wobec fuel-switch, gdzie CAŁA karta
   była odnośnikiem i hover został przeniesiony. */
.dc-loyalty-cta__benefit {
  padding: var(--dc-space-22);
  border: var(--dc-border) solid color-mix(in srgb, var(--dc-text-on-dark) 12%, transparent);
  border-radius: var(--dc-radius-16);
  background-color: color-mix(in srgb, var(--dc-text-on-dark) 7%, transparent);
}

/* Okienko ikony: 40 px boku (--dc-space-40), promień 11 -> --dc-radius-12,
   tło .15 -> --dc-accent-a15, obwódka .3 -> --dc-border-accent.
   Kolor kreski ikony bierze się z color przez stroke="currentColor". */
.dc-loyalty-cta__benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  margin-block-end: var(--dc-space-14);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-accent-a15);
  color: var(--dc-accent);
}

/* h3 z base.css ma --dc-text-2xl (17 px); makieta daje tu 15 px, czyli
   --dc-text-lg. Odstęp 7 px -> --dc-space-8. */
.dc-loyalty-cta__benefit-title {
  margin-block-end: var(--dc-space-8);
  font-size: var(--dc-text-lg);
  color: var(--dc-text-on-dark);
}

.dc-loyalty-cta__benefit-text {
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-relaxed);
  color: color-mix(in srgb, var(--dc-text-on-dark) 55%, transparent);
}

/* ==========================================================================
   6. DWIE KOLUMNY: KALKULATOR I KARTA
   DRUGA siatka sekcji, z własną minimalną szerokością kolumny —
   makietowe minmax(300px) scalone do --dc-grid-min-md (280 px).
   Odstęp pod siatką 48 px trafia w --dc-space-48 bez scalania.
   ========================================================================== */

.dc-loyalty-cta__columns {
  position: relative;
  z-index: var(--dc-z-raised);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-md), 100%), 1fr));
  gap: var(--dc-space-24);
  margin-block-end: var(--dc-space-48);
}

/* ==========================================================================
   7. KARTA KALKULATORA — JASNA WYSPA NA ZAWSZE CIEMNYM PANELU

   To problem ODWROTNY do panelu i rozwiązany lustrzanie. Panel potrzebował
   bieli niezmiennej między motywami i wziął ją z --dc-text-on-dark (jasnego
   w obu). Ta karta potrzebuje TUSZU niezmiennego między motywami, a cała
   rodzina --dc-text jest w motywie ciemnym jasna — postawiony na niej tekst
   zniknąłby na białej karcie przy przełączeniu motywu.

   Jedyny ciemny tusz niezmienny między motywami to --dc-on-accent (#1a1200
   w jasnym, #231A05 w ciemnym — ciepła prawie czerń, oba odcienie oddalone
   od siebie o 9 jednostek). Trzy poziomy tuszu z makiety (#161616, #3a3a3a,
   #9a958a) powstają z niego alfą przez color-mix, dokładnie tak, jak biele
   panelu powstają z --dc-text-on-dark.

   Cztery pokrętła stoją na KARCIE, nie na poszczególnych elementach:
   zmienne własne dziedziczą się w dół, a karta jest miejscem, w którym
   sekcja i tak deklaruje swój wygląd (ten sam wzorzec co pokrętła
   komponentu .dc-ring).

   TUSZ PRZYGASZONY JEST CIEMNIEJSZY NIŻ W MAKIECIE — świadomie. Makietowe
   #9a958a daje na białej karcie 2,63:1, czyli dokładnie wartość, którą
   tokens.css odnotowuje przy --dc-text-subtle jako odrzuconą („makieta:
   2,63:1") i zastępuje przez #6E6A61 (4,75:1). Alfa 60% na --dc-on-accent
   odtwarza tę POPRAWIONĄ wartość, a nie makietową — to zastosowanie
   decyzji, którą paleta już podjęła, nie nowa decyzja tej sekcji.
   Zmierzone — tabela w raporcie.

   Złoty tusz (makietowe #9a8230 na ikonie i na liczbie progu) NIE MOŻE
   wziąć --dc-accent-strong: w motywie ciemnym jest jasnym złotem (#D8B65E)
   i na białej karcie zszedłby poniżej progu. Powstaje więc z --dc-accent zgaszonego tym samym tuszem
   (75/25) — ten sam zabieg co przy podpisie plakietki w fuel-switch.css,
   tylko w drugą stronę.

   Scalenia: promień 20 -> --dc-radius-22, padding 28 -> --dc-space-28,
   tło .93 i obwódka .95 wprost z makiety.

   ODCIEŃ KARTY (partia 4 audytu, E.6): biel bierze --dc-surface-on-dark,
   nie --dc-text-on-dark. Tamten token przełącza się z motywem
   (#fff -> #F4F1EA), więc karta była biała w jasnym, a kremowa w ciemnym
   („wydaje się beżowa"). Panel jest ciemny zawsze, więc nic na nim nie
   przełącza się z motywem — obie makiety mają tu rgba(255,255,255,.93).
   Bez cienia rzucanego: zmierzony dawał maks. 3/255 różnicy (nagłówek
   pliku, punkt d) — jasna karta na czerni odcina się samą jasnością.
   ========================================================================== */

.dc-loyalty-cta__calc {
  --dc-loyalty-cta-ink: var(--dc-on-accent);
  --dc-loyalty-cta-ink-soft: color-mix(in srgb, var(--dc-on-accent) 80%, transparent);
  --dc-loyalty-cta-ink-muted: color-mix(in srgb, var(--dc-on-accent) 65%, transparent);
  --dc-loyalty-cta-gold-ink: color-mix(in srgb, var(--dc-accent) 65%, var(--dc-on-accent));

  padding: var(--dc-space-28);
  border: var(--dc-border) solid color-mix(in srgb, var(--dc-surface-on-dark) 95%, transparent);
  border-radius: var(--dc-radius-22);
  background-color: color-mix(in srgb, var(--dc-surface-on-dark) 93%, transparent);
}

/* Nagłówek kalkulatora. Okienko ikony: 36 px -> --dc-space-40, promień 10
   -> --dc-radius-8, tło .12 -> --dc-accent-a10, obwódka .28
   -> --dc-border-accent (.3). */
.dc-loyalty-cta__calc-head {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
  margin-block-end: var(--dc-space-22);
}

/* Studzienka 40 px jak każda w motywie: r12, tło a15, obwódka a30
   (design-audit.md, C.8; partia 6) — makietowe r8 / a10 były jedynym
   takim zapisem wśród studzienek 40 px. */
.dc-loyalty-cta__calc-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-accent-a15);
  color: var(--dc-loyalty-cta-gold-ink);
}

.dc-loyalty-cta__calc-title {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-xl);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-loyalty-cta-ink);
}

/* ==========================================================================
   7a. SUWAK
   Etykieta jest SIATKĄ, nie samym tekstem: obejmuje pytanie, odczyt
   i sam <input>, bo powiązanie idzie przez zagnieżdżenie, a nie przez
   parę for/id (reguła 4 zabrania id w częściach). Układ makiety —
   pytanie po lewej, odczyt po prawej, suwak pod nimi na pełną szerokość —
   wychodzi z dwóch kolumn i rozpięcia suwaka na obie.
   ========================================================================== */

.dc-loyalty-cta__slider {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--dc-space-10);
  row-gap: var(--dc-space-10);
}

.dc-loyalty-cta__slider-question {
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-loyalty-cta-ink-soft);
}

.dc-loyalty-cta__slider-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-3xl);
  font-weight: var(--dc-weight-black);
  letter-spacing: var(--dc-tracking-snug);
  color: var(--dc-loyalty-cta-ink);
}

/* Wysokość 6 px (--dc-space-6) jest wysokością TORU, nie polem trafienia:
   uchwyt wystaje poza tor i to on łapie kursor, dokładnie jak w makiecie.
   Odstępy 4/12 -> --dc-space-4 / --dc-space-12. Wygląd toru i gałki —
   blok niżej; tor na ciemnym panelu to biel z alfą przez color-mix, jak
   każda kreska w tym pliku, gałka to --dc-surface-on-dark (biel stała). */
.dc-loyalty-cta__range {
  grid-column: 1 / -1;
  width: 100%;
  height: var(--dc-space-6);
  margin-block: var(--dc-space-4) var(--dc-space-12);
  cursor: pointer;
}

/* SUWAK Z CSS (design-audit.md, C.7; partia 6). Do tej pory jedyne
   „natywne" miejsce motywu: accent-color malował gałkę i tor przeglądarki,
   inaczej w Chrome i Safari, a fokus z base.css rysował prostokąt r6 wokół
   toru. Teraz tor 6 px i gałka 20 px są z tokenów, fokus to ten sam
   pierścień co na ramkach pól (2 px --dc-accent), w kształcie pigułki.
   Wysokość pola ZOSTAJE 6 px (wysokość toru), żeby układ siatki się nie
   ruszył; gałka wystaje poza tor jak przedtem. Koszt: znika wypełnienie
   toru złotem po lewej od gałki (accent-color nie działa przy
   appearance: none) — zgłoszone w raporcie partii 6. Pseudoelementy
   -webkit- i -moz- muszą stać w OSOBNYCH regułach: nieznany
   pseudoelement unieważnia całą listę selektorów. */
.dc-loyalty-cta__range {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.dc-loyalty-cta__range::-webkit-slider-runnable-track {
  height: var(--dc-space-6);
  border-radius: var(--dc-radius-pill);
  background-color: color-mix(in srgb, var(--dc-text-on-dark) 12%, transparent);
}

.dc-loyalty-cta__range::-moz-range-track {
  height: var(--dc-space-6);
  border-radius: var(--dc-radius-pill);
  background-color: color-mix(in srgb, var(--dc-text-on-dark) 12%, transparent);
}

.dc-loyalty-cta__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--dc-space-20);
  height: var(--dc-space-20);
  margin-block-start: calc((var(--dc-space-6) - var(--dc-space-20)) / 2);
  border: var(--dc-border-heavy) solid var(--dc-accent);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-surface-on-dark);
  box-shadow: var(--dc-shadow-sm);
}

.dc-loyalty-cta__range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--dc-space-20);
  height: var(--dc-space-20);
  border: var(--dc-border-heavy) solid var(--dc-accent);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-surface-on-dark);
  box-shadow: var(--dc-shadow-sm);
}

/* Jeden fokus dla pól: 2 px --dc-accent, jak ramka pola. Promień pigułki
   nadpisuje r6 z globalnego :focus-visible (ta sama specyficzność,
   ten plik wczytany później). */
.dc-loyalty-cta__range:focus-visible {
  outline: var(--dc-border-heavy) solid var(--dc-accent);
  outline-offset: var(--dc-focus-offset);
  border-radius: var(--dc-radius-pill);
}

/* Podziałka pod suwakiem. Odstęp pod nią 20 px -> --dc-space-20. */
.dc-loyalty-cta__scale {
  display: flex;
  justify-content: space-between;
  margin-block-end: var(--dc-space-20);
}

.dc-loyalty-cta__scale-mark {
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-loyalty-cta-ink-muted);
}

/* ==========================================================================
   7b. POLA WYNIKU
   TRZECIA siatka sekcji, z własnym zachowaniem: makieta trzyma tu sztywne
   1fr 1fr, czyli 2x2 niezależnie od szerokości — i to działa wszędzie tam,
   gdzie makieta sięga.

   PRZY 390 px NIE DZIAŁA, co zmierzone: tor `1fr` ma dolną granicę na
   min-content kafla (108 px — najdłuższe słowo „Oszczędność" plus padding
   i obwódka), więc dwie kolumny potrzebują 226 px przy 190 px dostępnych
   wewnątrz karty. Kafle nie zwijały się, tylko rozpychały siatkę i wychodziły
   poza prawą krawędź karty. Makieta nie ma wersji mobilnej, więc dla tego
   przypadku nie jest źródłem prawdy (ten sam powód co przy breakpoincie
   nagłówka i przy tabeli w origin.css).

   Rozwiązanie bez breakpointu i bez wpisanej liczby: flex-wrap z bazą
   „połowa minus pół odstępu". Dopóki połowa mieści min-content kafla, wiersz
   bierze dwa kafle i układ jest makietowym 2x2; gdy przestaje mieścić,
   domyślne min-width: auto kafla wypycha drugi do następnego wiersza, a oba
   rozciągają się na pełną szerokość. Próg wyznacza więc TREŚĆ kafla, a nie
   liczba wpisana w @media — i przesunie się sam, gdy zmieni się etykieta.
   Zmierzone kolumny na trzech szerokościach — tabela w raporcie.

   Scalenia: promień 14 -> --dc-radius-16, odstęp 10 -> --dc-space-10.
   ========================================================================== */

.dc-loyalty-cta__results {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-10);
}

/* Baza „50% minus pół odstępu": dwa kafle plus gap dają dokładnie 100%,
   a flex-grow rozciąga kafel na pełną szerokość, gdy zostanie w wierszu sam.

   Tło .04 i obwódka .07 z makiety to czerń z alfą — na tej karcie powstaje
   ona z tego samego tuszu co tekst (--dc-on-accent), więc pole wklęsłe
   nie potrzebuje ani --dc-surface-sunken (podmieniane między motywami),
   ani wpisanego koloru. */
.dc-loyalty-cta__result {
  flex: 1 1 calc(50% - var(--dc-space-6));
  padding: var(--dc-space-16);
  border: var(--dc-border) solid color-mix(in srgb, var(--dc-on-accent) 7%, transparent);
  border-radius: var(--dc-radius-16);
  background-color: color-mix(in srgb, var(--dc-on-accent) 4%, transparent);
}

/* Pole progu — jedyne złote. Tło .08 -> --dc-accent-a05 (skala .04–.08),
   obwódka .25 -> --dc-border-accent (.3). */
.dc-loyalty-cta__result--accent {
  border-color: var(--dc-border-accent);
  background-color: var(--dc-accent-a05);
}

.dc-loyalty-cta__result-label {
  margin-block-end: var(--dc-space-6);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-loyalty-cta-ink-muted);
}

/* Interlinia 1,1 -> --dc-leading-tight (1,12), trakt -0,02em
   -> --dc-tracking-tight. */
.dc-loyalty-cta__result-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-4xl);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
  color: var(--dc-loyalty-cta-ink);
}

.dc-loyalty-cta__result--accent .dc-loyalty-cta__result-value {
  color: var(--dc-loyalty-cta-gold-ink);
}

/* Podpis 11,5 px mieści się w skali --dc-text-xs (11 / 11,5). */
.dc-loyalty-cta__result-note {
  margin-block-start: var(--dc-space-4);
  font-size: var(--dc-text-xs);
  color: var(--dc-loyalty-cta-ink-muted);
}

/* ==========================================================================
   8. KOLUMNA Z KARTĄ KLUBOWĄ
   ========================================================================== */

.dc-loyalty-cta__aside {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-20);
}

/* Podpis nad kartą. Makietowe rgba(255,255,255,.65) mieści się w skali
   --dc-text-on-dark-muted (.5–.66), więc token, a nie color-mix.
   Odstęp 4 px pod wierszem jest w makiecie osobnym marginesem obok
   gapu kolumny — stąd margin-block-end, a nie zmiana gapu. */
.dc-loyalty-cta__aside-intro {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
  margin-block-end: var(--dc-space-4);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-on-dark-muted);
}

/* Ciemne okienka pod sygnetem — jedna reguła [data-theme] na kolor w tym
   pliku (nagłówek, punkt 3). Makieta ma tu #0a0a0a, czyli prawie czerń;
   para --dc-surface-inverse / --dc-surface daje ją w obu motywach bez
   wpisywania koloru. Promienie z drabinki studzienek (design-audit.md,
   C.8/C.9; partia 6): 28 px -> r8 „mała studzienka" (makietowe 7 -> r6
   było jedynym takim zapisem), 40 px -> r12. Obwódka .22
   -> --dc-border-accent (.3). */
.dc-loyalty-cta__aside-mark,
.dc-loyalty-cta__card-mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border: var(--dc-border) solid var(--dc-border-accent);
  background-color: var(--dc-surface-inverse);
}

[data-theme='dark'] .dc-loyalty-cta__aside-mark,
[data-theme='dark'] .dc-loyalty-cta__card-mark {
  background-color: var(--dc-surface);
}

.dc-loyalty-cta__aside-mark {
  width: var(--dc-space-28);
  height: var(--dc-space-28);
  border-radius: var(--dc-radius-8);
}

/* Wzór karty. Tło trzyprzystankowe wprost z makiety — nagłówek pliku,
   punkt a. Cień czarny, punkt d; włosowa linia u góry cienia to złoto
   .15 -> --dc-accent-a15.
   Scalenia: promień 18 bez scalania, padding 24/26/22 -> --dc-space-24
   u góry, --dc-space-28 po bokach, --dc-space-22 u dołu.

   KARTA JEST GOSPODARZEM KOMPONENTU .dc-tilt-card (przechył 3D pod
   kursorem). Sekcja nie dostraja go ani jedną deklaracją — komponent nie
   ma pokręteł i celowo ich nie dostaje. Dostarcza mu tylko to, czego
   oczekuje od gospodarza, i co ta karta i tak ma z własnych powodów:
   position: relative oraz isolation: isolate (te same wymagania co
   .dc-ring). overflow: hidden dokładnie przycina połysk do promienia.
   Nazwa klasy komponentu stoi w znaczniku obok nazwy bloku sekcji. */
.dc-loyalty-cta__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--dc-space-24) var(--dc-space-22);
  padding-inline: var(--dc-space-28);
  border: var(--dc-border) solid color-mix(in srgb, var(--dc-text-on-dark) 10%, transparent);
  border-radius: var(--dc-radius-18);
  background-image: linear-gradient(140deg, #1d1407 0%, #0d0b07 55%, #1a1208 100%);

  /* Bez cienia rzucanego (nagłówek pliku, punkt d): makietowe 0 28px 70px
     rgba(0,0,0,.55) było tą „brudną plamą" pod kartą. Krawędź daje obwódka
     biel .1 — ta sama co na kaflach korzyści i na kartach fuel-switch —
     a złota kreska u góry zostaje. */
  box-shadow: inset 0 var(--dc-border) 0 var(--dc-accent-a15);
}

/* Trzy współśrodkowe okręgi wychodzące poza prawy dolny róg. Średnice
   i przesunięcia to GEOMETRIA RYSUNKU, nie wartości projektowe — dlatego
   składane z tokenów odstępu przez calc(), a nie wpisane w pikselach:
   160/240/320 to dwie, trzy i cztery jednostki --dc-space-80.

   Alfy .14 / .07 / .04 wchodzą w drabinkę złota jako a15 / a05 / a05 —
   dwa zewnętrzne okręgi wychodzą więc identyczne, choć makieta różnicuje
   je o trzy setne. Zgłoszone w raporcie: przywrócenie gradacji to jedna
   linijka z literałem. */
.dc-loyalty-cta__orbit {
  position: absolute;
  z-index: var(--dc-z-base);
  border-radius: var(--dc-radius-full);
  pointer-events: none;
}

.dc-loyalty-cta__orbit--sm {
  inset-block-end: calc(var(--dc-space-20) * -1);
  inset-inline-end: calc(var(--dc-space-20) * -1);
  width: calc(var(--dc-space-80) * 2);
  height: calc(var(--dc-space-80) * 2);
  border: var(--dc-border-thick) solid var(--dc-accent-a15);
}

.dc-loyalty-cta__orbit--md {
  inset-block-end: calc(var(--dc-space-56) * -1);
  inset-inline-end: calc(var(--dc-space-56) * -1);
  width: calc(var(--dc-space-80) * 3);
  height: calc(var(--dc-space-80) * 3);
  border: var(--dc-border) solid var(--dc-accent-a05);
}

.dc-loyalty-cta__orbit--lg {
  inset-block-end: calc((var(--dc-space-80) + var(--dc-space-10)) * -1);
  inset-inline-end: calc((var(--dc-space-80) + var(--dc-space-10)) * -1);
  width: calc(var(--dc-space-80) * 4);
  height: calc(var(--dc-space-80) * 4);
  border: var(--dc-border) solid var(--dc-accent-a05);
}

/* Włosowa krawędź u góry karty: złoto rozjaśniające się ku środkowi.
   Gaśnie do --dc-accent-a00, a nie do `transparent`, żeby nie interpolować
   przez przezroczystą czerń. Alfa .25 -> --dc-accent-a20. */
.dc-loyalty-cta__card-edge {
  position: absolute;
  z-index: var(--dc-z-base);
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--dc-border);
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    var(--dc-accent-a00),
    var(--dc-accent-a20),
    var(--dc-accent-a00)
  );
}

.dc-loyalty-cta__card-top {
  position: relative;
  z-index: var(--dc-z-raised);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-block-end: var(--dc-space-28);
}

/* Nazwa marki na karcie: 13,5 px -> --dc-text-base (skala 13 / 13,5),
   trakt .1em -> --dc-tracking-wider (.12em). */
.dc-loyalty-cta__card-brand {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-black);
  letter-spacing: var(--dc-tracking-wider);
  color: var(--dc-accent);
}

/* Okienko sygnetu na karcie: 36 px -> --dc-space-40, promień 9
   -> --dc-radius-12 (studzienka 40 px, komentarz wyżej). Samo włosowe rozjaśnienie u góry — przez color-mix,
   bo --dc-shadow-inset-top jest w motywie jasnym bielą .95, czyli jasną
   kreską na czarnym okienku. Makietowy cień 0 4px 12px rgba(0,0,0,.5)
   zdjęty (nagłówek pliku, punkt d): zmierzony dawał maks. 6/255. */
.dc-loyalty-cta__card-mark {
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  border-radius: var(--dc-radius-12);
  box-shadow: inset 0 var(--dc-border) 0 color-mix(in srgb, var(--dc-text-on-dark) 6%, transparent);
}

/* Nadtytuł na karcie: 9,5 px -> --dc-text-3xs (skala 8–9,5), trakt .2em
   -> --dc-tracking-widest (.18em), złoto .6 -> --dc-accent-a50 (skala
   .40–.60). Odstęp 5 px -> --dc-space-6. */
.dc-loyalty-cta__card-club {
  position: relative;
  z-index: var(--dc-z-raised);
  margin-block-end: var(--dc-space-6);
  font-size: var(--dc-text-3xs);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;

  /* KOREKTA KONTRASTU. Makietowe rgba(201,168,76,.6) daje na tle karty
     3,40:1, a --dc-accent-a50 (najbliższy stopień drabinki) 2,91:1 —
     oba poniżej progu 4,5:1 dla pisma 9,5 px. Podbite do 70% przez
     color-mix: 4,64:1 w obu motywach, najniższy stopień, który przechodzi.
     Drabinka alfy złota kończy się na .50, więc token tu nie sięga.
     Hierarchia z makiety zostaje: nazwa marki wyżej ma pełne --dc-accent. */
  color: color-mix(in srgb, var(--dc-accent) 70%, transparent);
}

/* Interlinia nagłówkowa (1,12): to nazwisko-nagłówek, nie akapit —
   odziedziczone 1,6 z body było jedynym takim zapisem dla kroju
   wyświetleniowego 700 (design-audit.md, C.10; partia 6). */
.dc-loyalty-cta__card-holder {
  position: relative;
  z-index: var(--dc-z-raised);
  margin-block-end: var(--dc-space-28);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-4xl);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-snug);
  color: var(--dc-text-on-dark);
}

.dc-loyalty-cta__card-foot {
  position: relative;
  z-index: var(--dc-z-raised);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dc-space-16);
}

.dc-loyalty-cta__card-field--end {
  text-align: end;
}

/* Etykiety pól na karcie: 8,5 px -> --dc-text-3xs, trakt .12em
   -> --dc-tracking-wider. Makietowe rgba(255,255,255,.3) wchodzi w skalę
   --dc-text-on-dark-subtle (.3–.48). Kontrast zmierzony — tabela
   w raporcie. */
.dc-loyalty-cta__card-label {
  margin-block-end: var(--dc-space-4);
  font-size: var(--dc-text-3xs);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;

  /* KOREKTA KONTRASTU (wzór z tokens.css, help-cta.css i fuel-switch.css).
     Makietowe rgba(255,255,255,.3) daje na tle karty 2,86:1, a token
     --dc-text-on-dark-subtle, w którego skalę (.3–.48) ta wartość wpada,
     3,81:1 w motywie jasnym — oba poniżej progu 4,5:1 dla pisma 8,5 px.
     Podbite do 50%: 5,33:1 w jasnym / 4,85:1 w ciemnym. To ta sama
     wartość, na której skończyły help-cta i fuel-switch. */
  color: color-mix(in srgb, var(--dc-text-on-dark) 50%, transparent);
}

/* Kod rabatowy: trakt .08em mieści się w skali --dc-tracking-wider. */
.dc-loyalty-cta__card-code {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wider);
  color: var(--dc-accent);
}

.dc-loyalty-cta__card-valid {
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-on-dark-muted);
}

.dc-loyalty-cta__aside-note {
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-relaxed);
  color: color-mix(in srgb, var(--dc-text-on-dark) 50%, transparent);
}

/* ==========================================================================
   9. WEZWANIE POD PANELEM
   Geometria, waga, hover i fokus w rodzinie z .dc-help-cta__cta--primary —
   warstwa components/ nie ma jeszcze przycisku, więc nowa sekcja nie
   wymyśla własnego. Różnice wobec tamtego wystąpienia są w makiecie:
   pigułka zamiast promienia 16 px i poświata pod przyciskiem, której
   #contact nie miał.
   Scalenia: padding 17/38 -> --dc-space-18 / --dc-space-40, uniesienie
   3 px -> --dc-space-4, odstęp pod przyciskiem 14 px -> --dc-space-14.
   ========================================================================== */

.dc-loyalty-cta__foot {
  position: relative;
  z-index: var(--dc-z-raised);
  text-align: center;
}

/* Strzałka to ikona arrow-right z rejestru (dc_icon(), 16 px), nie znak →
   w treści: znak renderował się krojem tekstu, więc grubość kreski
   i wyrównanie zależały od fontu, a nie od zestawu ikon jak w każdym innym
   przycisku (partia 3 audytu). 16 px, nie 18 jak w help-cta: pismo ma tu
   16 px przy interlinii 1, więc ikona 18 px podnosiła przycisk z 54 na
   56 px (zmierzone) — wysokość rangi 1 ma zostać. Odstęp --dc-space-8 jak w .dc-hero__cta
   i .dc-volume-picker__submit, czyli w randze 1 z ikoną; wcześniejsze
   --dc-space-4 odtwarzało szerokość spacji przed znakiem tekstowym. */
/* RANGA 1 (design-audit.md, C.1): promień 16 zamiast pigułki, obwódka a50
   zamiast obrysu w cieniu, poświata --dc-shadow-accent zamiast literału
   (nagłówek pliku, punkt e) — jak każde główne wezwanie na stronie. Pełne
   złoto zostaje (panel jest ciemny w obu motywach, tint by na nim zgasł).
   Cień: ten sam token co wszędzie — wariant „na ciemnym" podstawia PANEL
   (patrz .dc-loyalty-cta__panel), przycisk go nie zna.
   Krój PJS 800 16 z makiety NIE ruszony — poza zakresem, zgłoszony.
   Obwódka dokłada 2 px wysokości: 52 -> 54. */
.dc-loyalty-cta__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  padding-block: var(--dc-space-18);
  padding-inline: var(--dc-space-40);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-accent);
  color: var(--dc-on-accent);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-xl);
  font-weight: var(--dc-weight-black);
  letter-spacing: var(--dc-tracking-snug);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

/* Najazd: złoto ciemnieje o 12 % w stronę tuszu — bez uniesienia i bez
   rozjaśnienia z makiety (#d9b85c): w randze 1 nacisk czyta się
   z pociemnienia (design-audit.md, C.2), a rozjaśnianie szło w przeciwną
   stronę niż reszta strony. Ten sam zapis w help-cta.css (stopka od
   poprawek po audycie ma tint jak ai-assistant — dwa wystąpienia,
   kandydat na token dopiero przy trzecim, reguła 18). */
.dc-loyalty-cta__cta:hover {
  background-color: color-mix(in srgb, var(--dc-accent) 88%, var(--dc-on-accent));
  color: var(--dc-on-accent);
}

/* Kliknięcie = nacisk: zmniejszenie plus cień wciśnięcia w miejsce
   rozjaśnienia od góry (design-audit.md, C.2; .97 — uzasadnienie przy
   .dc-hero__cta:active). Poświata zostaje. */
.dc-loyalty-cta__cta:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

/* Pierścień fokusu: globalny domyślny z base.css, bez nadpisania koloru —
   tylko promień dopasowany do kształtu przycisku, jak w help-cta.css
   i fuel-switch.css. Kontrast zmierzony — tabela w raporcie. */
.dc-loyalty-cta__cta:focus-visible {
  border-radius: var(--dc-radius-16);
}

/* KOREKTA KONTRASTU. Makietowe rgba(255,255,255,.4) to co do setnej
   --dc-text-on-dark-subtle w motywie jasnym — i daje 3,82:1 na tle panelu,
   poniżej progu 4,5:1 dla pisma 13 px. Podbite do 50%: 5,17:1 w jasnym
   / 4,77:1 w ciemnym. Ta sama wartość co etykiety na karcie wyżej —
   zamiast szukać osobnego stopnia dla każdego miejsca. */
.dc-loyalty-cta__foot-note {
  margin-block-start: var(--dc-space-14);
  font-size: var(--dc-text-base);
  color: color-mix(in srgb, var(--dc-text-on-dark) 50%, transparent);
}

/* ==========================================================================
   10. RUCH — tętno poświat
   Klatki mieszkają w pliku sekcji, nie w base.css: base.css rejestruje
   prymitywy używane przez KOMPONENTY (@property --dc-ring, dcRingSpin),
   a to tętno ma tylko ta sekcja — dokładnie jak dcFuelSwitchGlow
   w fuel-switch.css.
   ========================================================================== */

@keyframes dcLoyaltyCtaGlow {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.85;
  }
}

/* Globalny wyłącznik w base.css tnie animation-duration do 0.01ms z jedną
   iteracją. Dla ruchu CIĄGŁEGO to znaczy „doskocz do końca i stój", czyli
   poświaty zamarłyby na 35% krycia w połowie oddechu. Skrót animation: none
   zeruje animation-name, którego tamten !important nie obejmuje, więc
   wygrywa — a opacity wraca do 1 i poświaty świecą pełnią, nieruchomo
   (reguła 12: blok dokłada ten, KTO ANIMUJE). */
@media (prefers-reduced-motion: reduce) {
  .dc-loyalty-cta__glow--crown,
  .dc-loyalty-cta__glow--ember {
    animation: none;
  }
}