/* ============================================================
   Refer a Client — page-specific styles.
   Hero text lives inside the iframe (the form has its own cover
   step), so the page chrome is just nav + iframe + footer. We
   add top padding to clear the fixed nav.
   ============================================================ */

.refer-form-section {
  padding-top: calc(var(--nav-height) + var(--spacing-lg));
  padding-bottom: var(--spacing-xl);
}

.refer-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 10px;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Iframe height tracks the available viewport so the form's internal
   single-step layout always fits without scroll. dvh handles mobile
   browser-chrome collapse correctly; svh fallback for older Safari.
   Min-height keeps very-short screens (landscape mobile) usable. */
.refer-iframe {
  display: block;
  width: 100%;
  height: calc(100svh - var(--nav-height) - var(--spacing-xl));
  height: calc(100dvh - var(--nav-height) - var(--spacing-xl));
  min-height: 540px;
  border: 0;
  background: transparent;
}