/* 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 i bez dopisków.
   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}
.pyt-nr{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)}
@media(prefers-reduced-motion:reduce){.pyt-poz button,.pyt-odp,.pyt-odp>div,.pyt-znak::before,.pyt-znak::after{transition:none}}

@media(max-width:820px){
  .pyt{padding:calc(var(--vh,1svh)*9) 18px calc(var(--vh,1svh)*9)}
  .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}
}