/* PYTANIA — sekcja pod ofertą, nad stopką (05.10.2026 wieczorem). Układ wybrany przez Kubę w narzędziu z wariantami
   (~/Desktop/strony/HVMBAK-DOSTEP, https://warianty.hvmbak-landing.pages.dev/): wariant 2 „Na środku”. Jego słowa: „wezmę nagłówek na środku…
   to wygląda bardziej editorial”. Wcześniej: sekcja „w kolorze białym, tak żeby się połączyło z tym białym paskiem, który jest na dole, tylko że
   oddzielimy go taką cienką kreską”; „Pytania powinny być zwinięte”; nagłówek sam w lewej kolumnie „dziwnie wygląda”; te same kreski przy pytaniach
   i nad stopką „mieszają się” na telefonie.
   Dlatego: BIAŁA sekcja, nagłówek na środku, pod nim wąska kolumna (820 px) ZWINIĘTYCH wierszy z czarnymi włosowymi kreskami; stopkę odcina inna,
   jasna kreska od krawędzi do krawędzi (src/stopka.css). Treść pytań i odpowiedzi od Kuby, w index.html. Bez przycisku zakupu; pod listą jedno zdanie z kontaktem (.pyt-inne).
   Rozwijanie: wiersz siatki 0fr → 1fr (działa też w Safari), src/pytania.js przełącza tylko klasę .otw i aria-expanded. Każde pytanie otwiera się
   osobno, inne się nie zamykają, żeby na telefonie nic nie uciekało spod palca.
   Zapas, który mu się podobał: wariant 7 „Pola” (szare pola bez kresek) w tym samym narzędziu. Zmiany układu znów najpierw tam. */

.pyt{position:relative;z-index:2;background:#fff;color:var(--black);
  --f-etyk:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  padding:calc(var(--vh,1svh)*14) 5vw calc(var(--vh,1svh)*13)}
.pyt-in{max-width:1180px;margin:0 auto}
.pyt-h{margin:0 0 clamp(30px,3.2vw,46px);text-align:center;font-family:var(--display);font-weight:900;font-kerning:normal;text-transform:uppercase;line-height:1.06;
  letter-spacing:0;font-size:clamp(30px,3.7vw,52px)}             /* stopień jak tytuł oferty */

.pyt-lista{list-style:none;max-width:820px;margin:0 auto;padding:0;border-bottom:1px solid var(--black)}
.pyt-poz{border-top:1px solid var(--black)}
.pyt-poz h3{margin:0;font-size:inherit;font-weight:inherit}
.pyt-poz button{display:grid;grid-template-columns:28px minmax(0,1fr) 15px;column-gap:20px;align-items:baseline;width:100%;margin:0;padding:23px 0 22px;
  border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .18s}
.pyt-poz button:focus-visible{outline:2px solid var(--black);outline-offset:3px}
/* numer na ŚRODKU wysokości wiersza, jak plus po prawej (10.10.2026, Kuba: cyferki „są niżej, a muszą być idealnie na środku tego pasa”);
   do 10.10 stał na linii pisma pytania i przy małym stopniu wypadał 3 px pod środkiem. Interlinia 1: środek pola = środek cyfr. */
.pyt-nr{align-self:center;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;line-height:1;letter-spacing:.08em;opacity:.58}
.pyt-q{font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;font-size:clamp(19px,1.72vw,24px);line-height:1.22;text-wrap:balance}
.pyt-znak{position:relative;align-self:center;width:15px;height:15px}
.pyt-znak::before,.pyt-znak::after{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;
  transition:transform .3s cubic-bezier(.3,.7,.2,1)}
.pyt-znak::after{transform:rotate(90deg)}                    /* plus; po otwarciu pionowa kreska kładzie się na poziomą = minus */
.pyt-poz.otw .pyt-znak::after{transform:rotate(0deg)}
@media(hover:hover){.pyt-poz button:hover{color:var(--orange)}}      /* jak każdy przycisk na stronie: po najechaniu pomarańcz */

.pyt-odp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.3,.7,.2,1)}
.pyt-odp>div{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .34s}     /* zwinięta odpowiedź poza kolejnością Tab i czytnikiem */
.pyt-poz.otw .pyt-odp{grid-template-rows:1fr}
.pyt-poz.otw .pyt-odp>div{visibility:visible;transition-delay:0s}
.pyt-odp p{margin:0;padding:0 35px 27px 48px;max-width:calc(36em + 83px);font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;
  font-size:clamp(16.5px,1.36vw,18.5px);line-height:1.5;color:rgba(13,13,13,.78)}

/* zdanie pod ostatnim pytaniem (05.10.2026 późnym wieczorem, Kuba: „pod pytaniami większa przestrzeń… zdanie bardziej szare, a słowo «napisz» pogrubione
   z podkreślnikiem… tak samo jak masz regulamin podkreślony”). Na środku jak nagłówek, szare, „Napisz” czarne i podkreślone jak „Regulamin” w ofercie.
   Link otwiera maila (adres ten sam co w regulaminie § 1); samego adresu strona nie pokazuje. */
.pyt-inne{max-width:820px;margin:clamp(40px,3.6vw,52px) auto 0;text-align:center;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;
  font-size:clamp(16.5px,1.36vw,18.5px);line-height:1.5;color:rgba(13,13,13,.6)}
.pyt-inne a{padding:11px 8px;margin:0 -8px;font-weight:600;color:var(--black);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color .18s}                                             /* pole dotyku większe niż samo słowo */
.pyt-inne a:hover{color:var(--orange)}
.pyt-inne a:focus-visible{outline:2px solid var(--black);outline-offset:-6px}
@media(prefers-reduced-motion:reduce){.pyt-poz button,.pyt-odp,.pyt-odp>div,.pyt-znak::before,.pyt-znak::after,.pyt-inne a{transition:none}}

@media(max-width:820px){
  /* dół 88 px = pas „Dołącz” nad stopką (52 px) + 36 px światła nad nim, tyle samo co między ostatnią kreską a zdaniem „Nie ma tu twojego pytania?”
     (10.10.2026, Kuba: pas „najeżdża na ten napis… za blisko”; do 10.10 dół liczył się z wysokości ekranu, 9 % ≈ 60 px, i pas stał 2 px pod zdaniem) */
  .pyt{padding:calc(var(--vh,1svh)*9) 18px 88px}
  .pyt-h{margin-bottom:26px;font-size:calc((100vw - 36px)/11.4)}       /* ten sam stopień co „DOSTĘP DO KURSU” w ofercie */
  .pyt-poz button{grid-template-columns:22px minmax(0,1fr) 13px;column-gap:12px;padding:18px 0 17px}
  .pyt-nr{font-size:9.5px}
  .pyt-q{font-size:17.5px;line-height:1.24}
  .pyt-znak{width:13px;height:13px}
  .pyt-odp p{padding:0 25px 21px 34px;font-size:15.5px;line-height:1.46}
  .pyt-inne{margin-top:36px;font-size:15.5px}
}