/* Shared compact visual layer for public pages. */
html { font-size: 15px; }
body { font-family: "IBM Plex Sans", Arial, sans-serif; letter-spacing: 0; }
button, input, select, textarea { font-family: inherit; }

.site-header, .topbar, .legal-header { min-height: 60px; height: auto; }
.site-header { padding-block: 9px; }
.wrap { width: min(1160px, calc(100% - 40px)); }

.hero { min-height: 560px; gap: 52px; padding-top: 52px; padding-bottom: 58px; }
.hero h1 { font-size: clamp(38px, 4.5vw, 57px); }
.hero-lead, .lead { font-size: 17px; line-height: 1.55; }
.section { padding-top: 76px; padding-bottom: 76px; }
.section-heading { margin-bottom: 36px; }
.section-heading h2, .final-cta h2 { font-size: clamp(30px, 3.4vw, 42px); }
.feature-grid article { min-height: 205px; padding: 25px; }
.feature-grid i { margin-bottom: 20px; }
.price-grid article { padding: 26px; }
.price { font-size: 33px; }
.final-cta { margin-top: 66px; margin-bottom: 66px; padding: 42px 48px; }
footer { padding-top: 44px; }

body:has(.legal-shell) { font-size: 14px; line-height: 1.58; }
.legal-header { padding-block: 9px; }
.legal-shell { max-width: 1160px; grid-template-columns: minmax(235px, 285px) minmax(0,1fr); gap: 18px; margin: 24px auto; }
.legal-summary, .legal-content { border-radius: 8px; }
.legal-summary { padding: 23px; }
.legal-content { padding: 28px 34px; }
.legal-content section + section { margin-top: 25px; padding-top: 23px; }
.legal-summary h1 { font-size: 27px; }
.legal-content h2 { font-size: 18px; }

body:has(.account-state) main { padding-top: 32px; padding-bottom: 42px; }
body:has(.account-state) .intro h1 { font-size: 32px; }
body:has(.account-state) .tariffs { gap: 12px; margin-top: 24px; }
body:has(.account-state) .tariff { min-height: 154px; padding: 20px; border-radius: 8px; }
body:has(.account-state) .tariff strong { font-size: 25px; }
body:has(.account-state) .checkout-card { padding: 21px 24px; border-radius: 8px; }
body:has(.account-state) .widget-section { padding: 22px; border-radius: 8px; }
body:has(.account-state) .details { gap: 12px; }
body:has(.account-state) .details article { padding: 20px; border-radius: 8px; }

body:has(.safe-note) main { padding-top: 14px; }
body:has(.safe-note) .hero { min-height: 390px; padding: clamp(34px, 4.5vw, 55px); border-radius: 8px; }
body:has(.safe-note) .hero h1 { font-size: clamp(34px, 3.8vw, 48px); }
body:has(.safe-note) .facts { margin-top: 10px; }

@media (max-width: 700px) {
  html { font-size: 14px; }
  .wrap { width: min(100% - 28px, 1160px); }
  .hero { min-height: 0; padding-top: 38px; padding-bottom: 43px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .final-cta { margin-top: 44px; margin-bottom: 44px; padding: 28px 22px; }
  .legal-shell { margin-top: 14px; }
  .legal-content, .legal-summary { padding: 22px 18px; }
}