/* Preserve the supplied artwork while bounding empty space on tall displays. */
:root { --company-width: min(2880px, calc(100vw - clamp(40px, 10vw, 320px))); }
:root [data-hb] { min-height: clamp(560px, 76svh, 980px) !important; }
:root [data-hero] { min-height: clamp(560px, 76svh, 980px) !important; }
:root [data-hb] + div[aria-hidden="true"] { height: clamp(48px, 6vw, 120px) !important; }
:root div:has(> [data-company-statement]) { min-height: clamp(280px, 38svh, 540px) !important; }
:root [data-kfaq] button { min-width: 0; }
:root [data-kfaq] button > svg { flex-shrink: 0; margin-right: 4px; }
@media (min-width: 1600px) {
  :root [data-navpill], :root [data-kfaq], :root [data-kfoot],
  :root [data-products], :root [data-socials],
  :root footer > div:last-child { max-width: var(--company-width) !important; }
  :root [data-products], :root [data-socials] { padding-inline: 0 !important; }
  :root [data-kfaq] { padding-inline: 0 !important; }
  :root [data-kfaq] > div:last-child { max-width: 80ch; }
}

/* Adapt navigation and content to phones. */
:root [data-socials] a:focus-visible { outline: 3px solid #0068ff; outline-offset: 4px; }
@media (max-width: 900px) {
  :root [data-socials] { padding: 0 24px 72px !important; }
  :root [data-socials] > div { padding: 32px 24px !important; gap: 24px !important; }
  :root [data-socials] h2 { font-size: clamp(28px, 4.8vw, 38px) !important; }
  :root [data-socials] > div > div:last-child { flex-wrap: wrap; }
  :root [data-company-statement] { white-space: normal !important; width: auto !important; max-width: 100% !important; font-size: clamp(22px, 3.35vw, 36px) !important; }
}
@media (max-width: 640px) {
  :root #home:has([data-topbar2]) [data-hb] { padding-top: 80px !important; }
  :root #home:not(:has([data-topbar2])) [data-hb] { padding-top: 0 !important; }
  :root [data-topbar2] { padding: 8px 44px 8px 16px !important; font-size: 13px !important; }
  :root [data-nav] { padding: 16px !important; }
  :root [data-hb] [data-nav] { margin-inline: -24px !important; }
  :root [data-navpill] { display: grid !important; grid-template-columns: minmax(0,1fr) auto; gap: 8px 16px !important; border-radius: 24px !important; padding: 12px 16px !important; }
  :root [data-navl] { display: contents !important; }
  :root [data-navl] > a { grid-column: 1; grid-row: 1; min-height: 44px; }
  :root [data-navl] > nav { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: space-between; gap: 4px !important; }
  :root [data-navl] > nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  :root [data-navpill] > a { grid-column: 2; grid-row: 1; padding: 0 4px !important; min-height: 44px; }
  :root [data-company-statement] { transform: none !important; font-size: clamp(24px, 5vw, 30px) !important; line-height: 1.35 !important; }
  :root [data-company-tooltip] { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 24px !important; width: min(300px, calc(100vw - 32px)) !important; transform: translateX(-50%) !important; z-index: 500 !important; }
  :root [data-company-tooltip] > span:last-child { display: none !important; }
  :root [data-kfaq] button { gap: 16px !important; }
  :root [data-kfaq] button > svg { flex-shrink: 0; margin-right: 4px; }
  :root [data-kfoot] { gap: 32px 24px !important; }
  :root [data-kfoot] a { display: inline-flex; align-items: center; min-height: 36px; }
}
@media (max-width: 420px) {
  :root [data-socials] a { width: 44px !important; height: 44px !important; }
}
