/* lander-frame-fit.css — framed landers only (html.atb-framed; see lander-frame-fit.js).
   A 100vh hero inside a 1000px exchange frame is 1000px of hero before anything else:
   drop those minimums, and cap the headline so it fits the first screen. */
html.atb-framed .opp-shell .min-h-screen,
html.atb-framed .opp-shell .min-h-\[100vh\],
html.atb-framed .opp-shell .min-h-\[100dvh\],
html.atb-framed .opp-shell .min-h-\[90vh\],
html.atb-framed .opp-shell .min-h-\[80vh\],
html.atb-framed .opp-shell [style*="min-height:100vh"],
html.atb-framed .opp-shell [style*="min-height: 100vh"],
html.atb-framed .opp-shell [style*="min-height:100dvh"],
html.atb-framed .opp-shell [style*="min-height: 100dvh"] { min-height: 0 !important; }
html.atb-framed .opp-shell h1 {
  font-size: clamp(28px, 4.4vw, 54px) !important;
  line-height: 1.06 !important;
}
html.atb-framed .atb-frame-cta { display: flex; justify-content: center; margin: 14px 0 6px; position: relative; z-index: 2; }
html.atb-framed .atb-frame-cta--top { padding: 14px 16px 0; margin: 0; }
html.atb-framed .atb-frame-cta > a { width: auto !important; max-width: 100%; }

/* QUIZ in a frame (Sheridan 2026-09-27: "quiz make it viewable without scroll"):
   question and its answers fit the first screen of a ~1000px exchange frame. */
html.atb-framed .qz-wrap { padding-top: 10px !important; padding-bottom: 24px !important; }
html.atb-framed .qz-head { margin-bottom: 12px !important; }
html.atb-framed .qz-eyebrow { margin-bottom: 8px !important; padding: 3px 10px !important; }
html.atb-framed .qz-head h1 { font-size: clamp(24px, 3.2vw, 32px) !important; }
html.atb-framed .qz-head p { margin-top: 6px !important; font-size: 14px !important; line-height: 1.4 !important; }
html.atb-framed .qz-meter { margin-bottom: 10px !important; }
html.atb-framed .qz-q { font-size: clamp(19px, 2.1vw, 23px) !important; }
html.atb-framed .qz-help { margin-top: 4px !important; font-size: 13px !important; }
html.atb-framed .qz-opts { margin-top: 12px !important; gap: 7px !important; }
html.atb-framed label.qz-opt { min-height: 44px !important; padding: 9px 14px !important; }


/* SHORT FRAMES (2026-09-27, from frame_observations: slots 200-480px tall, e.g.
   viralmailerforyou 750x200, hotwebsitetraffic 850x400, trafficadbar 300x450,
   hitsserver 500x250). The nav and the disclosure strip alone took ~140px of a
   200px slot. Compact them (the disclosure stays, one small line) and size the
   headline for the slot; lander-frame-fit.js adds a slim CTA bar if the page's own
   button still cannot be seen. */
html.atb-short nav.top .links,
html.atb-short nav.top .signin,
html.atb-short nav.top .lang-switch { display: none !important; }
html.atb-short nav.top { min-height: 0 !important; }
html.atb-short nav.top .container.row { min-height: 0 !important; padding-top: 4px !important; padding-bottom: 4px !important; height: auto !important; }
html.atb-short nav.top .brand { font-size: 16px !important; }
html.atb-short nav.top .btn { padding: 5px 12px !important; font-size: 12.5px !important; min-height: 0 !important; }
html.atb-short div[role="note"] { font-size: 10.5px !important; line-height: 1.3 !important; }
html.atb-short div[role="note"] > div { padding: 2px 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.atb-short .opp-shell h1, html.atb-short main h1 { font-size: clamp(18px, 3.2vw, 26px) !important; line-height: 1.12 !important; }
html.atb-framed .atb-short-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482000;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 3px 8px; background: rgba(255,255,255,.96); box-shadow: 0 -6px 18px -8px rgba(0,0,0,.35);
}
html.atb-framed .atb-short-bar a { font-size: 13px !important; padding: 5px 14px !important; min-height: 0 !important; line-height: 1.2 !important; width: auto !important; max-width: 100%; white-space: nowrap; }
html.atb-has-cta-bar .opp-shell { padding-bottom: 40px; }
/* Join popup in a short slot (2026-09-28, reproduced in a nested harvesttraffic-style
   frame 300px tall): the modal's 320px floor made it taller than the slot, so its top
   was cut off, and the slim CTA bar sat ON TOP of the open popup — a second button
   over the form. Hide the bar while the popup is open and fit the modal to the slot
   (it scrolls inside). */
html.atb-framed:has(#atb-join-popup:not(.hidden)) .atb-short-bar { display: none !important; }
html.atb-short #atb-join-popup .atb-jp-scrim { padding: 6px !important; padding-top: calc(var(--atb-vis-top, 0px) + 6px) !important; align-items: flex-start !important; }
html.atb-short #atb-join-popup .atb-jp-modal { max-height: calc(var(--atb-vis-h, 100dvh) - 12px) !important; overflow-y: auto !important; }

/* NARROW FRAMES (<=520px wide: trafficadbar 300x450, hitsserver 500x250). The mobile
   layout already applies; below ~360px the nav's sign-in link and the long hero
   words still pushed the page sideways. */
html.atb-narrow body { overflow-x: hidden; }
html.atb-narrow nav.top .signin { display: none !important; }
html.atb-narrow nav.top .btn { padding: 5px 10px !important; font-size: 12px !important; }
html.atb-narrow h1 { font-size: clamp(20px, 8.2vw, 30px) !important; overflow-wrap: anywhere; }
/* No sideways scroll inside any exchange frame: decorative SVGs and nav rows ran
   4-14px past the slot edge (measured /saveclub at 850, / and /livegood at 300). */
html.atb-framed, html.atb-framed body { overflow-x: clip; }

/* DESKTOP FRAMES 450-700px TALL (2026-09-28): harvesttraffic gives us this height in
   ~60% of views, and /zilara + /networkercentral ended above their own join button.
   Tighten the hero (headline, lead copy, spacing) so the button reaches the first
   screen. No bar on desktop (Sheridan: bar is mobile-only). */
@media (min-width: 768px) and (max-height: 700px) {
  html.atb-framed .opp-shell h1 { font-size: clamp(26px, 3.2vw, 40px) !important; line-height: 1.08 !important; margin-bottom: 8px !important; }
  html.atb-framed .opp-shell h1 ~ p { font-size: 15px !important; line-height: 1.45 !important; margin-top: 8px !important; margin-bottom: 8px !important; }
  html.atb-framed .opp-shell section:first-of-type { padding-top: 12px !important; padding-bottom: 16px !important; }
  html.atb-framed .opp-shell h1 ~ p + p { display: none !important; }
}

/* BIO PAGES IN SHORT FRAMES (Sheridan 2026-09-28: "at least show the 1st program they
   promote ... and a call to action button ... without scrolling"). harvesttraffic
   gives /bio ~450px: the full hero card (banner, 96px photo, stats, intro) filled it.
   Framed and short: slimmer banner, smaller photo, no stats row, intro in smaller type — so the first program card and "Join my team" sit in the first screen. */
@media (max-height: 760px) {
  html.atb-framed .bp-page { padding-top: 10px !important; }
  html.atb-framed .bp-wrap { gap: 10px !important; }
  html.atb-framed .bp-banner { height: 92px !important; }
  /* logo sits in the band above the photo, never behind it (Sheridan 2026-09-28) */
  html.atb-framed .bp-sitelogo-wrap { inset: 0 0 32px 0 !important; }
  html.atb-framed .bp-av-wrap { margin-top: -30px !important; }
  html.atb-framed .bp-av { width: 60px !important; height: 60px !important; font-size: 26px !important; border-width: 3px !important; }
  html.atb-framed .bp-ident { padding: 6px 18px 14px !important; }
  html.atb-framed .bp-stats { display: none !important; }
  /* Never cut the member's own words off (Sheridan 2026-09-28): full intro, smaller type. */
  html.atb-framed .bp-intro { padding: 6px 18px 12px !important; font-size: 13.5px !important; line-height: 1.4 !important; }
  html.atb-framed .bp-ident .bp-meta-line { display: none !important; }
}

/* STEPPED HERO FIT (2026-09-28): added by lander-frame-fit.js fitFold() only while the
   hero's join button is still below the visible band. */
html.atb-fit-1 .opp-shell h1 { font-size: clamp(24px, 3vw, 40px) !important; line-height: 1.08 !important; margin-top: 4px !important; margin-bottom: 8px !important; }
html.atb-fit-1 .opp-shell section:first-of-type { padding-top: 14px !important; padding-bottom: 18px !important; }
html.atb-fit-1 .opp-shell h1 ~ p { font-size: 15px !important; line-height: 1.45 !important; margin-top: 6px !important; margin-bottom: 6px !important; }
html.atb-fit-2 .opp-shell h1 { font-size: clamp(22px, 2.5vw, 32px) !important; }
html.atb-fit-2 .opp-shell h1 ~ p + p { display: none !important; }
html.atb-fit-2 .opp-shell section:first-of-type [class*="mt-8"], html.atb-fit-2 .opp-shell section:first-of-type [class*="mt-10"] { margin-top: 12px !important; }
html.atb-fit-3 .opp-shell h1 { font-size: clamp(20px, 2.2vw, 28px) !important; }
html.atb-fit-3 .opp-shell section:first-of-type [class*="mt-6"], html.atb-fit-3 .opp-shell section:first-of-type [class*="mb-6"] { margin-top: 8px !important; margin-bottom: 8px !important; }
html.atb-fit-1 .opp-shell h1, html.atb-fit-1 .opp-shell h2 { max-width: none !important; }
html.atb-fit-1 .opp-shell h1 ~ p { max-width: 60rem !important; }

/* (2026-09-28) Hero side media stays vertically centred against the copy (Sheridan:
   "center video vertically better") — the earlier top-align was reverted. */
/* FRAMED: no sticky header — in a frame taller than the visitor's window it pinned
   above a band of empty space once the page scrolled (Sheridan 2026-09-28, /quiz). */
html.atb-framed nav.top { position: relative !important; }
/* Hero side media centred against the copy in frames (Sheridan 2026-09-28: "center
   vertically with hero" — super-greens' video sat at the top of a tall column). */
html.atb-framed .opp-shell section:first-of-type .grid,
html.atb-framed .opp-shell section:first-of-type [class*="grid-cols"] { align-items: center !important; }
/* QUIZ in a frame: it centres itself in 100dvh, and a 1000px exchange frame turned
   that into ~250px of empty space above the title (Sheridan 2026-09-28). */
html.atb-framed .qz-wrap { min-height: 0 !important; align-items: flex-start !important; }