/* ==========================================================================
   STRONA GŁÓWNA
   ==========================================================================
   Sekcje strony głównej przeniesione z zatwierdzonej makiety
   docs/makiety/strona-glowna.html - przy zmianie wyglądu poprawiamy OBA
   miejsca albo żadne.

   ARKUSZ WCHODZI TYLKO NA STRONIE GŁÓWNEJ (alpha_current_views). Sekcje
   składa Elementor z widżetów wtyczki Docket, a wygląd należy do motywu -
   ten sam podział co wszędzie indziej w tym projekcie.

   Czego tu NIE MA, bo stoi już w powłoce (style.css): kafelek produktu,
   kafelek wpisu, pasy przewijane, pigułki, cytaty, okruszki, sekcje
   i skala nagłówków. Powielenie ich tutaj znaczyłoby dwa miejsca do
   poprawiania przy każdej zmianie.
   ========================================================================== */

/* =====================================================================
   HERO
   ===================================================================== */
.hero{background:var(--porcelain);overflow:hidden}
.hero__grid{display:grid}
/* w układzie pionowym zdjęcie nie może zjeść całego ekranu - na tablecie
   4/5 dawało 960 px wysokości i nagłówek lądował pod krawędzią ekranu */
/* overflow:hidden, bo obraz jest animowany skala 1.04 - bez przyciecia
   wystaje 13 px poza kadr przy prawej krawedzi ekranu. */
.hero__media{height:min(125vw,62vh);order:-1;background:#e9e6e1;overflow:hidden;position:relative}
/* Wideo dokladnie tam, gdzie stalo zdjecie - plakat jest zwyklym obrazem
   i kadruje sie tak samo. */
.hero__wideo{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero__wideo-btn{
  position:absolute;right:var(--s2);bottom:var(--s2);z-index:2;
  width:44px;height:44px;display:grid;place-items:center;
  background:rgba(255,255,255,.9);border:1px solid rgba(13,13,13,.15);border-radius:99px;
  color:var(--ink);transition:background .2s;
}
.hero__wideo-btn[hidden]{display:none}
.hero__wideo-btn:hover,.hero__wideo-btn:focus-visible{background:#fff}
.hero__wideo-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.hero__wideo-btn svg[hidden]{display:none}
.hero__body{
  padding:var(--s5) var(--pad);display:flex;flex-direction:column;justify-content:center;
  gap:var(--s3);
}
/* text-wrap:wrap, wbrew regule dla wszystkich naglowkow w powloce.
   Ten naglowek ma zlamanie wpisane w tresc (druga linia to <span>), wiec nie
   ma czego rownowazyc - a balance zmienia szerokosc minimalna naglowka i tym
   rozpychal lewa kolumne banera o 35 px kosztem kadru: 827/551 zamiast
   792/648 z makiety. */
.hero__title{font-size:clamp(2rem,7vw,4.2rem);letter-spacing:.04em;text-transform:uppercase;font-weight:300;line-height:1.05;text-wrap:wrap}
.hero__title span{display:block;color:var(--navy)}
/* Akapit wprowadzajacy znika na telefonie (zyczenie Klientki z 10.08.2026).
   Na malym ekranie baner ma dowiezc jedna rzecz - tytul i przycisk - a piec
   linii tekstu spychalo przycisk pod krawedz. Na komputerze zostaje, bo tam
   jest miejsce obok zdjecia i akapit niczego nie przesuwa.

   display:none, a nie zmniejszenie: tresc powtarza sie w sekcji "Skin
   Longevity" nizej, wiec nic nie ginie ani dla czytnika ekranu, ani dla
   wyszukiwarki. */
@media(max-width:899px){
  .hero__lead{display:none}
}
@media(min-width:900px){
  .hero__grid{grid-template-columns:1.28fr .72fr;align-items:stretch}
  .hero__media{height:auto;min-height:min(86vh,780px);order:2}
  /* tekst hero trzyma tę samą linię co treść pozostałych sekcji,
     inaczej na szerokim ekranie przyklejał się do lewej krawędzi */
  .hero__body{
    order:1;gap:var(--s4);
    padding-right:clamp(2rem,5vw,4.5rem);
    padding-left:max(var(--pad), calc((100vw - var(--maxw))/2 + var(--pad)));
  }
  .hero__title{margin-block:var(--s1)}
}
@media(min-width:1200px){
  /* na szerokim ekranie zdjęcie może dostać więcej miejsca */
  .hero__grid{grid-template-columns:1.1fr .9fr}
}

/* Pasek zaufania usuniety 13.08.2026 - decyzja Klientki. */

/* =====================================================================
   DOBÓR PIELĘGNACJI
   ===================================================================== */
.chips-wrap{position:relative}
.chips-wrap::after{
  content:"";position:absolute;inset-block:0;right:0;width:3rem;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff);
}
@media(min-width:1000px){.chips-wrap::after{display:none}}
.chips{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s1);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.finder__panel{
  margin-top:var(--s4);display:grid;background:var(--porcelain);
  overflow:hidden;align-items:stretch;
}
.finder__visual{aspect-ratio:4/3;background:#e6e2dc}
.finder__visual img{width:100%;height:100%;object-fit:cover}
.finder__text{padding:var(--s5) var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.finder__steps{display:grid;gap:var(--s3);margin-block:var(--s3)}
.finder__step{display:flex;gap:var(--s3);align-items:flex-start}
.finder__num{
  flex:0 0 auto;width:32px;height:32px;border-radius:99px;border:1px solid var(--navy);color:var(--navy);
  display:grid;place-items:center;font-family:var(--font-display);font-size:.75rem;
}
.finder__step p{font-size:.95rem;text-wrap:pretty}
.finder__step b{font-weight:500}
@media(min-width:900px){
  .finder__panel{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .finder__visual{aspect-ratio:auto;min-height:100%}
  .finder__text{padding:var(--s6) clamp(2rem,4vw,3.5rem)}
}

/* =====================================================================
   DOWODY
   ===================================================================== */
/* Trzy liczby w rzedzie. Na telefonie jedna pod druga z kreska rozdzielajaca -
   przy trzech kolumnach na 375 px na kolumne zostaje 105 px i podpisy lamia
   sie na trzy linie. */
.dowody{display:grid;gap:var(--s4);border-top:1px solid var(--line-strong);padding-top:var(--s4)}
.dowody > * + *{border-top:1px solid var(--line);padding-top:var(--s4)}
@media(min-width:720px){
  .dowody{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
  .dowody > * + *{border-top:0;padding-top:0}
}
.dowod{min-width:0}
.dowod b{
  display:block;font-family:var(--font-display);font-size:clamp(2.75rem,7vw,4rem);
  font-weight:300;color:var(--navy);line-height:1;letter-spacing:.01em;
}
/* Sam procent drobniejszy od cyfr (podpowiedz Klientki z 27.08.2026:
   "% moga byc mniejsze"). Dzieki temu liczba zostaje duza, a caly napis
   miesci sie w kolumnie o szerokosci 104 px na telefonie. */
.dowod__proc{font-size:.6em;letter-spacing:0}
.dowod__co{display:block;margin-top:.6rem;font-size:1rem;color:var(--ink);text-wrap:pretty}
.dowod__co sup{font-size:.7em;vertical-align:super;line-height:0}
/* Przypis: drobniejszy i jasniejszy, ale nadal czytelny - to on odroznia
   wynik badania od hasla reklamowego. */
.dowod__zrodlo{display:block;margin-top:.35rem;font-size:.8rem;color:var(--muted)}
.dowody__wiecej{margin-top:var(--s4)}
/* Trzy liczby w jednym wierszu takze na telefonie (zyczenie Klientki
   z 27.08.2026: "czy da sie to zmiescic w jednej linii? % moga byc
   mniejsze"). Wczesniej schodzily jedna pod druga, przedzielone kreskami -
   trzeba bylo przewinac ekran, zeby zobaczyc wszystkie trzy naraz, a caly
   sens tej sekcji polega na tym, ze widac je razem.
   Kolumna ma przy 375 px okolo 104 px, wiec i liczba, i przypis schodza
   o stopien nizej. Przypis zostaje - to on odroznia wynik badania
   od reklamowego hasla. */
@media(max-width:719px){
  .dowody{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
  .dowody > * + *{border-top:0;padding-top:0}
  .dowod b{font-size:clamp(1.9rem,11.5vw,2.9rem)}
  /* Opis rozpycha sie na wolne miejsce, wiec przypis siada na dole kolumny.
     "Stresu komorkowego" lamie sie na dwa wiersze, sasiedzi na jeden - bez
     tego przypisy stalyby na roznej wysokosci. Kolumny w siatce sa rownej
     wysokosci, wiec wystarczy jeden 1fr posrodku. */
  .dowod{display:grid;grid-template-rows:auto 1fr auto}
  .dowod__co{margin-top:.45rem;font-size:.8rem}
  .dowod__zrodlo{margin-top:.3rem;font-size:.66rem}
}

/* =====================================================================
   12 MECHANIZMOW - orbita wg prototypu Klientki
   ===================================================================== */
.mech{position:relative;overflow:hidden}
.mech__naglowek{position:relative;z-index:3;text-align:center;margin-bottom:var(--s5)}
.mech__naglowek .h-l{text-wrap:balance}

.mech__scena{
  /* Odstep miedzy sasiednimi kolami liczy sie z obwodu: 2*PI*promien podzielone
     przez dwanascie, minus srednica kola. Przy 390 px poprzednie wartosci
     dawaly 10 px przerwy - kola niemal sie stykaly i pierscien wygladal na
     zatloczony. Mniejsze kolo i wiekszy promien daja tam okolo 28 px. */
  --promien:clamp(124px,36vw,224px);
  --czastka:clamp(46px,12.5vw,84px);
  position:relative;
  height:calc(var(--promien) * 2 + var(--czastka) + 3rem);
  margin-inline:auto;max-width:760px;
}
.mech__tlo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.mech__orbita{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:calc(var(--promien) * 2);aspect-ratio:1;
  border:1px solid rgba(255,255,255,.11);border-radius:50%;
}
.mech__orbita--zewn{width:calc(var(--promien) * 2.28);border-color:rgba(255,255,255,.05)}

.mech__srodek{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:clamp(96px,26vw,150px);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;gap:.1rem;text-align:center;
  border:1px solid rgba(255,255,255,.13);background:rgba(13,13,13,.82);
  transition:opacity .22s ease,scale .22s ease;
}
.mech__zacheta{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:var(--track);
  text-transform:uppercase;line-height:1.5;color:var(--blush);
}
/* Reguly .mech__srodek b i .mech__srodek span usuniete razem z licznikiem
   "8 z 12". Zostaly po nim w arkuszu i - jako selektory z wyzsza waga -
   przebijaly .mech__zacheta: napis w srodku animacji szedl 9,92 px
   przygaszona biela zamiast 11,52 px w kolorze akcentu. */
.mech__scena.jest-wybor .mech__srodek{opacity:0;scale:.9;pointer-events:none}

/* --- linia od srodka do czasteczki --- */
.polacz{
  position:absolute;left:50%;top:50%;z-index:1;
  width:calc(var(--promien) - var(--czastka) / 2 - 8px);height:1px;
  transform-origin:left center;
  transform:translateY(-50%) rotate(calc(var(--kat) - 90deg));
  opacity:0;clip-path:inset(0 100% 0 0);
  animation:polaczIn .55s cubic-bezier(.2,.75,.2,1) var(--zwloka) forwards;
  transition:opacity .28s ease;
}
.polacz{background:linear-gradient(90deg,rgba(238,200,185,.62),rgba(238,200,185,.1))}
/* Impuls biegnacy do czasteczki - niesie mysl "receptura tu dociera". */
.polacz::after{
  content:"";position:absolute;left:0;top:50%;width:26px;height:2px;border-radius:99px;
  transform:translate(-12px,-50%);
  background:linear-gradient(90deg,transparent,#fff,rgba(238,200,185,.5),transparent);
  opacity:0;animation:polaczPuls 5.2s ease-in-out var(--puls) infinite;
}
.mech__scena.jest-wybor .polacz:not(.jest-wybrana){opacity:.12}
.mech__scena.jest-wybor .polacz:not(.jest-wybrana)::after{animation-play-state:paused;opacity:0}
.polacz.jest-wybrana{height:2px;opacity:1;background:linear-gradient(90deg,#fff,rgba(238,200,185,.3))}

/* --- czasteczka --- */
.czastka{
  position:absolute;left:50%;top:50%;width:0;height:0;padding:0;border:0;background:none;
  z-index:3;color:var(--blush);cursor:pointer;opacity:0;
  transform:translate(-50%,-50%) rotate(var(--kat)) translateY(calc(var(--promien) * -1)) rotate(calc(var(--kat) * -1));
  animation:czastkaIn .55s cubic-bezier(.2,.8,.2,1) var(--zwloka) forwards;
  transition:opacity .28s ease;
}
.mech__scena.jest-wybor .czastka:not(.jest-wybrana){opacity:.25}

.czastka__kolo{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:var(--czastka);aspect-ratio:1;border-radius:50%;
  border:1px solid currentColor;
  background:radial-gradient(circle at 36% 30%,rgba(238,200,185,.14),transparent 34%),rgba(13,13,13,.82);
  transition:scale .22s ease,box-shadow .22s ease;
}
.czastka__kolo{box-shadow:0 0 24px rgba(238,200,185,.1)}
.czastka:hover .czastka__kolo,.czastka:focus-visible .czastka__kolo{scale:1.09}
.czastka.jest-wybrana .czastka__kolo{scale:1.14;box-shadow:0 0 0 7px rgba(238,200,185,.08)}

.jadro{position:absolute;left:50%;top:50%;translate:-50% -50%;width:15%;aspect-ratio:1;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.atomy{position:absolute;inset:0;animation:atomyObrot 9s linear infinite}
.atomy i{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.atomy .a1{left:47%;top:16%}.atomy .a2{left:19%;top:62%}
.atomy .a3{left:74%;top:70%}.atomy .a4{left:76%;top:32%}
.wiaz{position:absolute;left:50%;top:50%;width:1px;height:29%;transform-origin:top center;background:linear-gradient(180deg,transparent,currentColor,transparent);opacity:.7}
.w1{transform:translateX(-50%) rotate(2deg)}.w2{transform:translateX(-50%) rotate(129deg)}
.w3{transform:translateX(-50%) rotate(224deg)}.w4{transform:translateX(-50%) rotate(59deg)}

/* Podpisy przy czasteczkach - patrz komentarz przy sekcji: ponizej 900 px
   dwanascie podpisow na okregu zachodzi na siebie, wiec nazwa czeka w panelu. */
.czastka__podpis{display:none}
@media(min-width:900px){
  .czastka__podpis{
    display:inline-flex;align-items:center;justify-content:center;position:absolute;
    max-width:124px;min-height:28px;padding:5px 11px;
    border:1px solid rgba(238,200,185,.22);border-radius:999px;
    background:rgba(13,13,13,.72);color:#fff;
    font-family:var(--font-display);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
    text-align:center;text-wrap:balance;
  }
  .czastka[data-strona="gora"] .czastka__podpis{left:50%;top:calc(var(--czastka) / -2 - 10px);translate:-50% -100%}
  .czastka[data-strona="dol"] .czastka__podpis{left:50%;top:calc(var(--czastka) / 2 + 10px);translate:-50% 0}
  .czastka[data-strona="prawo"] .czastka__podpis{left:calc(var(--czastka) / 2 + 10px);top:50%;translate:0 -50%}
  .czastka[data-strona="lewo"] .czastka__podpis{right:calc(var(--czastka) / 2 + 10px);top:50%;translate:0 -50%}
}

/* --- panel z wyjasnieniem --- */
.mech__panel{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:6;
  width:min(84%,340px);padding:var(--s3);
  border:1px solid rgba(238,200,185,.3);border-radius:14px;
  background:rgba(13,13,13,.96);text-align:center;
  opacity:0;visibility:hidden;scale:.94;pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease,scale .22s ease;
}
.mech__panel.jest-widoczny{opacity:1;visibility:visible;scale:1;pointer-events:auto}
.mech__tytul{display:block;margin:0 1.5rem .5rem;font-family:var(--font-display);font-size:1rem;font-weight:400;letter-spacing:.04em;text-transform:uppercase;line-height:1.25}
.mech__opis{margin:0;font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.8)}
.mech__zamknij{
  position:absolute;right:.35rem;top:.35rem;width:44px;height:44px;display:grid;place-items:center;
  border:0;background:none;color:rgba(255,255,255,.7);cursor:pointer;
}
.mech__zamknij svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.mech__zamknij:hover,.mech__zamknij:focus-visible{color:#fff}

.mech__legenda{margin-top:var(--s4);font-size:.8rem;color:rgba(255,255,255,.66);display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem var(--s3)}

@keyframes czastkaIn{
  from{opacity:0;transform:translate(-50%,-50%) rotate(var(--kat)) translateY(calc(var(--promien) * -.86)) rotate(calc(var(--kat) * -1)) scale(.76)}
  to{opacity:1;transform:translate(-50%,-50%) rotate(var(--kat)) translateY(calc(var(--promien) * -1)) rotate(calc(var(--kat) * -1)) scale(1)}
}
@keyframes polaczIn{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:.75;clip-path:inset(0 0 0 0)}}
@keyframes polaczPuls{
  0%,58%{opacity:0;transform:translate(-12px,-50%)}
  66%{opacity:.95}
  84%{opacity:.7;transform:translate(calc(100% + 6px),-50%)}
  90%,100%{opacity:0;transform:translate(calc(100% + 14px),-50%)}
}
@keyframes atomyObrot{to{rotate:360deg}}

/* Ruch jest ozdoba. Przy "ogranicz ruch" wszystko staje, ale nic nie znika -
   czasteczki musza byc widoczne, bo to one sa trescia. */
@media(prefers-reduced-motion:reduce){
  .czastka,.polacz{opacity:1!important;animation:none!important;clip-path:none!important}
  .atomy,.polacz::after{animation:none!important}
}

/* =====================================================================
   NEWSLETTER
   ===================================================================== */
/* GRANAT, nie blush (zyczenie Klientki z 10.08.2026) - ten sam kolor co pas
   dla profesjonalistow, wiec obie zachety na stronie mowia jednym glosem.

   Na ciemnym tle zmienia sie WSZYSTKO, nie samo tlo: tekst pomocniczy nie moze
   zostac szary (--muted na granacie to 2,4:1), kropki listy i obramowanie pola
   musza sie rozjasnic, a przycisk z czarnego robi sie jasny - czarny na
   granacie ma 1,7:1 i znika. */
.news{
  background:var(--navy);color:#fff;padding:clamp(1.75rem,5vw,3.5rem);
  display:grid;gap:var(--s5);align-items:center;
}
@media(min-width:900px){.news{grid-template-columns:1.15fr .85fr;gap:clamp(3rem,6vw,5rem)}}
.news__text>*+*{margin-top:var(--s2)}
.news__text .lead{color:rgba(255,255,255,.78);max-width:46ch}
/* Granat idzie od krawedzi do krawedzi, wiec bierze go sekcja, a nie
   panel w srodku. Panel traci wciecie poziome - inaczej tresc stalaby
   48 px od lewej zamiast 20 px, czyli inaczej niz kazda inna sekcja.
   Dol sekcji bez odstepu: pas ma dotykac sekcji nastepnej. */
.section--news{background:var(--navy);padding-block-end:0}
.section--news .news{padding-inline:0}
.seo{padding-block:var(--s5)}
/* Wezsza kolumna niz reszta sekcji - to jest tekst do czytania,
   nie uklad. */
.seo__tytul{font-family:var(--font-display);font-size:1.15rem;font-weight:300;letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--s3)}
.seo p{color:var(--ink-soft);text-wrap:pretty}
.seo p + p{margin-top:var(--s2)}
.news__form{display:grid;gap:var(--s3)}
.input{
  min-height:54px;border:1px solid var(--ink);background:#fff;padding:0 1rem;
  font-family:var(--text);font-size:.95rem;border-radius:var(--radius);width:100%;
}
.input::placeholder{color:var(--muted)}
/* Zgoda (.consent) przeniesiona do arkusza rdzenia 01.09.2026: ten sam
   komponent stoi teraz takze w formularzu zwrotow, ktory nie laduje
   home.css. Nadpisania na ciemnym tle zostaja nizej, przy newsletterze. */

/* --- newsletter na ciemnym tle -------------------------------------
   Ten blok MUSI stac za regulami podstawowymi. Przy rownej wadze selektora
   wygrywa ta, ktora stoi nizej - a .news__list li i .consent maluja tekst
   kolorem --ink-soft. Gdy nadpisania staly wyzej, lista korzysci renderowala
   sie ciemnoszarym na granacie: 1,5:1, czyli praktycznie niewidoczna.
   Zlapane pomiarem koloru wyliczonego, nie odczytem reguly. */
.news .h-l{color:#fff}
.news .eyebrow{color:var(--blush)}
.news .input{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.45);color:#fff;
}
.news .input::placeholder{color:rgba(255,255,255,.6)}
.news .input:focus-visible{border-color:#fff;background:rgba(255,255,255,.12)}
.news .consent{color:rgba(255,255,255,.78)}
.news .consent a{color:#fff}
/* Granica pola wyboru musi byc widoczna na ciemnym tle - WCAG 1.4.11 zada
   3:1 dla granic kontrolek. Domyslna rysuje system i na granacie bywa ledwo
   widoczna, wiec dokladamy wlasna obwodke o kontraiscie 4,06:1. */
.news .consent input{accent-color:var(--blush);outline:1px solid rgba(255,255,255,.45);outline-offset:0}

/* OBWODKA OGNISKA. Regula globalna maluje ja granatem - na granatowym tle
   daje to 1:1, czyli ognisko przestaje istniec dla kogos, kto chodzi po
   stronie tabulatorem. To najciezszy z bledow w tej sekcji, bo dotyczy
   KAZDEGO elementu w srodku: pola, zgody, odnosnika i przycisku.
   Bialy pierscien ma tu 14,64:1.

   Ta sama regula obejmuje pozostale ciemne sekcje - pas dla profesjonalistow
   i sekcje "skin longevity" - bo problem jest identyczny. */
.news :focus-visible,
.section--navy :focus-visible,
.section--ink :focus-visible,
.on-dark :focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Widoczna etykieta nad polem, nie sama podpowiedz w srodku. Podpowiedz
   znika w chwili pisania - kto sie rozproszy, nie wie juz, co wpisuje. */
.news__pole{display:flex;flex-direction:column;gap:.4rem}
.news__pole > label:not(.consent){
  font-family:var(--font-display);font-size:.72rem;letter-spacing:var(--track);
  text-transform:uppercase;color:rgba(255,255,255,.85);
}
.news .wymagane{color:var(--blush);margin-left:.15rem}
.news__blad{font-size:.8rem;color:var(--blush);min-height:0}
.news__blad:empty{display:none}
.news__stan{font-size:.85rem;color:#fff}
.news__stan:empty{display:none}
/* Pole z bledem oznaczone NIE SAMYM kolorem - dochodzi grubsza obwodka,
   a obok pola stoi tekst. Kolor jest trzecim sygnalem, nie jedynym. */
.news .input[aria-invalid="true"]{border-color:var(--blush);border-width:2px}
/* Przycisk jasny na ciemnym: .btn--solid maluje czarnym, ktory tu znika. */
.news .btn--solid{background:#fff;color:var(--ink);border-color:#fff}
.news .btn--solid:hover,.news .btn--solid:focus-visible{background:var(--blush);border-color:var(--blush)}