/* Paczka A: wspólna nawigacja strony publicznej i wejścia aplikacji. */
.site-header .brand { font-size: 28px; }
.site-header .brand-mark { width: 43px; height: 43px; }
.site-header nav { gap: clamp(18px, 2.2vw, 35px); }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { display: flex; align-items: center; min-height: 44px; padding: 0 8px; cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after { content: '+'; margin-left: 8px; font-size: 18px; }
.pricing-header .mobile-menu summary::after { position: static; font-size: 18px; line-height: 1; }
.mobile-menu[open] summary::after { content: '−'; }
.mobile-menu > div { position: absolute; z-index: 30; top: calc(100% + 12px); right: 0; min-width: 200px; padding: 10px; border: 1px solid var(--line, #d8ddd1); border-radius: 8px; background: var(--cream, #f4f2e9); color: var(--ink, #17392f); box-shadow: 0 12px 36px #0003; }
.mobile-menu > div a { display: flex; align-items: center; min-height: 48px; padding: 8px 16px; }
.mobile-menu > div a:hover { background: #e9eddf; }
.about { border-top: 1px solid var(--line); background: #e9eddf; }
.about h2 { margin: 20px 0; font: clamp(38px, 5vw, 64px)/1.1 var(--display); }
.about > p:not(.eyebrow) { max-width: 650px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.about-contact { display: inline-flex; align-items: center; gap: 16px; min-height: 48px; margin-top: 20px; text-decoration: underline; text-underline-offset: 5px; }
.about-contact svg { width: 18px; }
@media (max-width: 760px) {
  .site-header .brand { font-size: 25px; gap: 8px; }
  .site-header .brand-mark { width: 36px; height: 36px; }
  .site-header nav { gap: 8px; font-size: 13px; }
  .site-header .desktop-link { display: none; }
  .pricing-header .desktop-link { display: none; }
  .pricing-header nav { gap: 8px; }
  .pricing-header .beta-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 10px; white-space: nowrap; }
  .pricing-header .mobile-menu summary { white-space: nowrap; }
  .mobile-menu { display: block; }
}
@media (max-width: 370px) {
  .site-header .brand { font-size: 22px; }
  .site-header .brand-mark { width: 30px; height: 30px; }
  .site-header .brand small { font-size: 6px; letter-spacing: .18em; }
  .site-header .header-login { gap: 6px; padding-inline: 10px; }
}