/* Responsive fixes from a cross-width audit (320 → 1920px wide, 700 → 1080px tall).
   Loaded after the section stylesheets so these win at the same specificity. */

/* ---------- Touch widths (≤1060px) ---------- */
@media (max-width: 1060px) {
  /* footer links: 40px tap targets (were 23–29px) */
  .footer__links a,
  .footer__links li:first-child a,
  .footer__links li:last-child a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-block: 8px;
  }
  /* exit option tags were 10px — too small to read on a phone */
  .exit__tags li { padding: 5px 10px; font-size: 12px; }
  /* policy links in the footer bar were 15px tall */
  .footer__policies a { display: inline-block; padding-block: 13px; }
  /* logo link keeps a 44px hit area even when the image is smaller */
  .mnav .logo { min-height: 44px; }
}

/* ---------- Tall screens: pinned panels sized to their content ----------
   On tall viewports the pinned Exit card and Platform band used to fill the whole
   screen around ~600px of content. Cap them and hold them centred in the space
   below the sticky nav, as How It Works does. */
@media (min-width: 1061px) {
  .js .exit {
    --exit-card-h: min(max(560px, calc(100vh - 104px)), 760px);
  }
  @supports (height: 1svh) {
    .js .exit { --exit-card-h: min(max(560px, calc(100svh - 104px)), 760px); }
  }
  .js .exit__card { top: max(76px, var(--nav-h) + (100vh - var(--nav-h) - var(--exit-card-h)) / 2); }
  @supports (height: 1svh) {
    .js .exit__card { top: max(76px, var(--nav-h) + (100svh - var(--nav-h) - var(--exit-card-h)) / 2); }
  }
}
@media (min-width: 1061px) and (min-height: 900px) {
  .js .platform { background: var(--ground); }
  .js .platform__pin {
    top: calc(var(--nav-h) + (100vh - var(--nav-h) - 820px) / 2);
    top: calc(var(--nav-h) + (100svh - var(--nav-h) - 820px) / 2);
    height: 820px;
    padding-top: 0;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 380px) {
  /* sticky CTA bar: "Explore Properties" was clipping inside its half-width button */
  .mbar { gap: 8px; padding-inline: 12px; }
  .mbar .btn { padding-inline: 8px; font-size: 13.5px; }
}
@media (max-width: 360px) {
  /* nav bar: logo + Sign up + menu button fit on a 320px screen */
  .mnav__bar { gap: 8px; width: calc(100% - 28px); }
  .mnav .logo--sm .logo__img { height: 34px; }
  .mnav__signup { padding-inline: 14px; }
}

/* ---------- Short laptop screens: pinned Platform panel ---------- */
@media (min-width: 1061px) and (max-height: 820px) {
  .platform__head { gap: 10px; margin-bottom: 18px; }
  .platform__title { font-size: 38px; }
  .platform__lede { font-size: 15.5px; }
  .platform__step { padding: 13px 18px; }
  .platform__step-title { font-size: 18px; }
  .platform__body p { font-size: 14.5px; }
  .platform__tags ul { padding-top: 8px; }
}

/* ---------- Large screens (≥1600px): scale up with the monitor ----------
   --container widens in css/base.css (1320 / 1440 / 1600px); here the type and
   the hero follow so the page fills a big screen instead of floating in it. */
@media (min-width: 1600px) {
  .sec-head { max-width: 760px; gap: 16px; }
  .h2 { font-size: 52px; }
  .h2--pinned { font-size: 48px; }
  .lede { font-size: 19.5px; }
  .hero-in { gap: 48px; }
  .hero-copy { max-width: 640px; gap: 24px; }
  .hero h1 { font-size: clamp(66px, 4.3vw, 96px); }
  .hero-sub { font-size: 20px; }
  .hero-cert { font-size: 19px; }
}
@media (min-width: 1900px) {
  .h2 { font-size: 56px; }
  .lede { font-size: 20.5px; }
  .hero-copy { max-width: 700px; }
  .hero-sub { font-size: 21px; }
  .hero .hero-btns .btn-lg { padding: 18px 36px; font-size: 17px; }
}
@media (min-width: 2400px) {
  .h2 { font-size: 62px; }
}
@media (min-width: 1600px) and (min-height: 821px) {
  .platform__title { font-size: 48px; }
}