/* Fluid spacing for tablets and phones. Values scale with the viewport and reach
   the existing desktop spacing at ~900px, so larger screens are unchanged. */
@media (max-width: 900px) {
  .marketing-site {
    --site-gutter: clamp(16px, 4vw, 32px);
    --site-section-y: clamp(40px, 9vw, 72px);
    --site-card-pad: clamp(18px, 4.8vw, 30px);
    --site-card-gap: clamp(12px, 3.2vw, 24px);
  }

  .marketing-site main .container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    box-sizing: border-box;
  }
  .marketing-site main .container .container { padding-left: 0; padding-right: 0; }

  .marketing-site .hero { padding-top: clamp(56px, 12vw, 90px); padding-bottom: var(--site-section-y); }
  .marketing-site .hero-main { padding-top: var(--site-section-y); padding-bottom: var(--site-section-y); gap: var(--site-card-gap); }
  .marketing-site .section,
  .marketing-site .stats-section,
  .marketing-site .plans-section,
  .marketing-site .setup-section,
  .marketing-site .cta-section,
  .marketing-site #pricing { padding-top: var(--site-section-y); padding-bottom: var(--site-section-y); }

  .marketing-site .features-grid,
  .marketing-site .plan-grid,
  .marketing-site .setup-grid,
  .marketing-site .hero-metrics { gap: var(--site-card-gap); }
  .marketing-site .stats-grid { gap: calc(var(--site-card-gap) * 2); }

  .marketing-site .feature-card,
  .marketing-site .plan-card,
  .marketing-site .setup-card { padding: var(--site-card-pad); }

  .marketing-site .legal-main { width: 100%; padding: var(--site-section-y) var(--site-gutter); box-sizing: border-box; }
  .marketing-site .legal-card { padding: var(--site-card-pad); }
}