/* Keys to Marketing deal funnel — spacing tightening patch
   Apply AFTER the existing site CSS.
   Purpose: stop non-image panels being vertically centered in a full-height viewport.
*/

@media (min-width: 761px) {
  /* The current build uses min-height: calc(100vh - 64px) + justify-content:center.
     That creates the large dead zone between the header journey nav and the content.
     For question/data/form screens, align content to the top instead. */
  .panel:not(.heroPanel):not(.successPanel):not(.visual) .inner {
    justify-content: flex-start !important;
    min-height: calc(100vh - 64px);
    padding-top: 44px !important;
    padding-bottom: 72px !important;
  }

  /* Keep the first content block visually closer to the journey nav. */
  .panel:not(.heroPanel):not(.successPanel):not(.visual) .step,
  .panel:not(.heroPanel):not(.successPanel):not(.visual) .eyebrow {
    margin-top: 0;
  }

  /* Slightly tighten headline-to-supporting-copy rhythm. */
  .panel:not(.heroPanel):not(.successPanel):not(.visual) h2 {
    margin-top: 8px;
    margin-bottom: 22px;
  }

  /* Bring option groups up a little; avoid unnecessary blank bands. */
  .panel:not(.heroPanel):not(.successPanel):not(.visual) .options,
  .panel:not(.heroPanel):not(.successPanel):not(.visual) .chips {
    margin-top: 20px;
    margin-bottom: 22px;
  }

  /* Economics screen: keep the range graphic visible without forcing it low. */
  [data-id="economics"] .inner {
    padding-top: 38px !important;
  }

  [data-id="economics"] .economics {
    margin-top: 20px;
  }

  /* Rental, allocation, contact and review should start higher as well. */
  [data-id="rentals"] .inner,
  [data-id="allocation"] .inner,
  [data-id="preferences"] .inner,
  [data-id="readiness"] .inner,
  [data-id="future"] .inner,
  [data-id="contact"] .inner,
  [data-id="review"] .inner,
  [data-id="quantity"] .inner,
  [data-id="buyerType"] .inner,
  [data-id="portfolio"] .inner,
  [data-id="funding"] .inner {
    padding-top: 36px !important;
  }
}

/* Tablet: still avoid vertical centering, but allow slightly more breathing room. */
@media (min-width: 761px) and (max-width: 1180px) {
  .panel:not(.heroPanel):not(.successPanel):not(.visual) .inner {
    padding-top: 32px !important;
  }
}

/* Mobile already needs room for sticky navigation, so keep content top-aligned
   while preserving the safe bottom area. */
@media (max-width: 760px) {
  .panel:not(.heroPanel):not(.successPanel):not(.visual) .inner {
    justify-content: flex-start !important;
    padding-top: 28px !important;
    /* was calc(118px + safe-area): the sticky nav already reserves the home-indicator
       space itself, so this only produced an empty band under Back/Continue */
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  /* park the nav at the bottom of the panel instead of floating mid-screen on short steps */
  .panel:not(.heroPanel):not(.successPanel):not(.visual) nav {
    margin-top: auto !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

/* ---- pass 2 (2026-09-18) ---------------------------------------------------------------
   1. iOS excess scroll. On iOS `100vh` is the LARGE viewport, so `.inner` sized off
      calc(100vh - 58px) was taller than the visible area whenever the browser toolbar was
      showing — scrollable space that reveals nothing. Size it off the panel itself.
   2. The Visual panels (built / why33 / transaction / caution / dealroom) were excluded from
      pass 1 by :not(.visual). They carry a .photo sibling ABOVE .inner, so they must not get
      min-height:100% (that would re-create overflow); they need a flex column where .inner
      takes the remainder, which then lets the nav park at the bottom.
   -------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .panel .inner { min-height: 100% !important; }

  /* :not([hidden]) is REQUIRED — a bare .panel.visual{display:flex} ties on specificity with
     .panel[hidden]{display:none!important} and, being later in the file, would win — which
     un-hides every visual panel at once (caught in the local A/B render, 2026-09-18). */
  .panel.visual:not([hidden]) { display: flex !important; flex-direction: column !important; }
  .panel.visual .photo { flex: 0 0 auto; }
  .panel.visual .inner {
    flex: 1 1 auto; min-height: auto !important;
    justify-content: flex-start !important;
    padding-top: 28px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .panel.visual nav {
    margin-top: auto !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

/* ---- pass 3 (2026-09-18) — the real "excess scroll" ------------------------------------
   .panel is position:fixed with inset:58px 0 0, so on iOS its height came from the LAYOUT
   viewport (large, browser chrome included) while only the VISIBLE viewport is on screen. The
   panel was therefore ~110px taller than the phone, and because .inner{min-height:100%} filled
   it faithfully, the sticky nav parked ~110px below where the thumb is — leaving a large empty
   band under Back/Continue that you could still scroll into. `dvh` tracks the dynamic (visible)
   viewport, so the panel ends where the screen ends and the nav sits on the visible bottom.
   The vh line is a deliberate fallback: on browsers without dvh it behaves as before, not worse.
   -------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .panel { bottom: auto; height: calc(100vh - 58px); height: calc(100dvh - 58px); }
  .panel .inner { padding-bottom: 0 !important; }
  .panel.visual .inner { padding-bottom: 0 !important; }
}

/* ---- pass 4 (2026-09-18) — the five .visual panels still had a 140px bottom reserve ---------
   The site stylesheet carries, inside its mobile media query and with !important:
       .panel.visual .inner.copy           { padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important }
       .panel.visual.darkPanel .inner.copy { padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important }
   Pass 2/3 used .panel.visual .inner (0,2,0) — same !important, LOWER specificity, so it lost and
   built / why33 / transaction / caution / dealroom kept a 140px empty band under the nav while every
   other panel was clean. Match the selectors and outrank them by one element: (0,3,2)/(0,4,2).
   The sticky nav already reserves the home-indicator space in its own padding, so 0 is correct.
   ------------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
  html body .panel.visual .inner.copy,
  html body .panel.visual.darkPanel .inner.copy {
    padding-bottom: 0 !important;
  }
}

/* ---- pass 5 (2026-09-18) — hero clearance on short viewports -------------------------------
   Measured on the founder's device (393 css wide, visible web area 707 css tall): the hero's
   content ended 5.1 css above the fold — inside the slop of webfont metric differences. His phone
   renders taller than the emulator, so "Currently available" was sliced by the browser's bottom
   toolbar. Whitespace only, and only when the visible area is short: bigger phones are untouched.
   ------------------------------------------------------------------------------------------ */
@media (max-width: 760px) and (max-height: 800px) {
  .panel.heroPanel .inner      { padding-top: 14px !important; }
  .panel.heroPanel .eyebrow    { margin-top: 6px !important; margin-bottom: 8px !important; }
  .panel.heroPanel h1          { margin-top: 0 !important; margin-bottom: 4px !important; }
  .panel.heroPanel .lead       { margin-top: 12px !important; margin-bottom: 14px !important; }
  .panel.heroPanel .cta        { margin-top: 4px !important; margin-bottom: 4px !important; }
  .panel.heroPanel .micro      { margin-top: 9px !important; margin-bottom: 9px !important; }
  .panel.heroPanel .proof      { margin-top: 16px !important; }
  .panel.heroPanel .proof > div { padding-top: 8px !important; padding-bottom: 8px !important; }
}