/* ============================================================
   Above-the-fold heroes, the "What it is" explainer, and the
   membership application dialog.
   Loaded last, so it wins over 06/07/08 without !important.
   ============================================================ */

/* ============ ABOVE-THE-FOLD HERO ============ */
/*
   Home, network and membership all lead with the hero statement and nothing
   else. `--nav-h` is the sticky header, which sits in flow above the hero, so
   the hero fills exactly what's left of the first screen. svh (not vh) keeps
   mobile browsers from hiding the CTA behind the address bar.
*/
:root {
  --nav-h: 74px;
}

/* Reserve the scrollbar gutter permanently. Without this, locking the page
   behind a dialog removes the scrollbar, the viewport widens, and every
   centred fixed overlay slides sideways as it fades out. */
html {
  scrollbar-gutter: stable;
}

.hero--fold {
  min-height:      calc(100svh - var(--nav-h));
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding-top:     clamp(28px, 5vh, 56px);
  padding-bottom:  clamp(28px, 5vh, 56px);
  text-align:      center;
}

.hero--fold > .wrap {
  width: 100%;
}

/*
   The A-Players-Club treatment: headline and lede each sit on a single line
   on desktop, so the statement reads as one thought rather than a stack.

   The sizes are capped, not chosen for looks. Measured against the longest
   headline on the three pages ("Where Business Leaders Connect, Learn and
   Grow.", which needs <= 51.8px to stay on one line inside the 1180px wrap)
   and the longest lede (membership's, <= 30.9px). Raising either cap will
   wrap them. Below ~640px the clamp minimum takes over and they wrap, which
   is what you want on a phone.

   The membership hero's copy is targeted by #page-membership #members rules
   in 08-premium.css, hence the second selector in each pair.
*/
.hero--fold .hero__title,
.hero--fold .section__header .hero__title {
  font-size:      clamp(1.6rem, 4vw, 3.1rem);
  line-height:    1.06;
  letter-spacing: -.038em;
  margin:         20px auto 0;
  max-width:      none;
}

.hero--fold .hero__lede,
#page-membership #members.hero--fold .section__header .hero__lede {
  font-size:   clamp(1.05rem, 2.3vw, 1.75rem);
  line-height: 1.25;
  max-width:   none;
  margin:      20px auto 0;
}

.hero--fold .hero__subtext,
#page-membership #members.hero--fold .section__header .hero__subtext {
  font-size:   clamp(.98rem, 1.35vw, 1.1rem);
  line-height: 1.62;
  max-width:   none;
  margin:      18px auto 0;
}

.hero--fold .hero__subtext + .hero__subtext {
  margin-top: 10px;
}

.hero--fold .hero__stats {
  margin-top: 30px;
}

.hero--fold .hero__cta {
  margin-top: 32px;
}

/* The membership hero is a .section--light, which brings its own padding. */
.hero--fold.section,
#page-membership #members.hero--fold {
  padding-top:    clamp(28px, 5vh, 56px);
  padding-bottom: clamp(28px, 5vh, 56px);
}

.hero--fold .section__header {
  margin-bottom: 0;
}

/* Network: the platform chips are part of the hero statement. */
.hero--fold .platforms {
  margin-top: 30px;
}

/* Short viewports (laptops, landscape phones) — let the hero shrink to fit
   rather than push the CTA off-screen. */
/* Short viewports (laptops, landscape phones): let the hero shrink to fit
   rather than push the CTA off-screen. Sizes stay under the one-line caps. */
@media (max-height: 720px) {
  .hero--fold {
    min-height:     0;
    padding-top:    clamp(40px, 7vh, 64px);
    padding-bottom: clamp(40px, 7vh, 64px);
  }
  .hero--fold .hero__title,
  .hero--fold .section__header .hero__title { font-size: clamp(1.6rem, 3.6vw, 2.7rem); }
  .hero--fold .hero__lede,
  #page-membership #members.hero--fold .section__header .hero__lede { font-size: clamp(1.05rem, 2vw, 1.4rem); margin-top: 16px; }
  .hero--fold .hero__cta { margin-top: 24px; }
}

/* ============ "IN PLAIN ENGLISH" EXPLAINER ============ */
/*
   Sits immediately under the membership hero: one oversized statement on a
   single line, a narrow centred column of even body copy (no bold — the
   block is meant to read as one voice), and the apply button.

   The heading cap is measured: "The Members Club Explained: What It Is" needs
   <= 57px to stay on one line inside the 1180px wrap.
*/
/* Fills the fold rather than sitting in a short band with the next section
   peeking underneath: past ~1080px tall the padding clamp tops out and the
   section stopped growing. min-height (not height) so tall content — long
   copy, narrow phones — still pushes the section open instead of spilling. */
/*
   One whole page, like the hero — but a page *plus the nav*, not just 100svh.

   The header is sticky, so it overlays the top 74px of this section. At exactly
   100svh the section reads full only while its top is flush with the viewport
   top, with the heading hidden behind the nav. Scroll the 74px needed to read
   the heading and the section's bottom lifts 74px off the fold, showing the
   light video section beneath as a white strip. The extra --nav-h absorbs that.

   The padding is deliberately small so min-height, not the padding, sets the
   height; padding-top additionally clears the nav. min-height (not height) so
   unusually short viewports push the section open rather than clip the button.

   The background is set explicitly rather than inherited from <body>, so the
   black covers the whole band whatever height it lands on.
*/
.explainer {
  min-height:      calc(100svh + var(--nav-h));
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         calc(var(--nav-h) + clamp(16px, 3vh, 40px)) 0 clamp(16px, 3vh, 40px);
  text-align:      center;
  background:      var(--ink);
}

.explainer > .wrap {
  width: 100%;
}

.explainer__title {
  font-size:      clamp(1.75rem, 4.4vw, 3.4rem);
  line-height:    1.06;
  letter-spacing: -.04em;
  max-width:      none;
  margin:         0 auto;
}

.explainer__body {
  max-width: 54ch;
  margin:    40px auto 0;
}

.explainer__body p {
  font-size:   clamp(1rem, 1.25vw, 1.06rem);
  line-height: 1.68;
  color:       var(--muted);
}

.explainer__body p + p {
  margin-top: 24px;
}

.explainer__cta {
  margin-top: 46px;
}

/* On a short laptop the copy plus the sticky-header allowance runs ~26px past
   the fold, which breaks the one-page rule. Tighten the internal gaps rather
   than the type. */
@media (max-height: 820px) {
  .explainer__body     { margin-top: 26px; }
  .explainer__body p + p { margin-top: 18px; }
  .explainer__cta      { margin-top: 30px; }
}

/* ============ APPLICATION DIALOG ============ */
/* The centring must live on .apply-modal itself, not on .is-open: closing
   removes .is-open while the fade runs, and a display:block overlay would
   un-centre the panel and snap it to the left mid-transition. `hidden` (a
   more specific selector) is what actually takes it out of the layout, the
   a11y tree and the tab order. */
.apply-modal {
  position:        fixed;
  inset:           0;
  z-index:         220;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px;
}

.apply-modal[hidden] {
  display: none;
}

.apply-modal__backdrop {
  position:        absolute;
  inset:           0;
  background:      rgba(5, 4, 12, .74);
  backdrop-filter: blur(8px);
  opacity:         0;
  transition:      opacity .28s ease;
}

.apply-modal.is-open .apply-modal__backdrop {
  opacity: 1;
}

/* The panel itself doesn't scroll — .apply-modal__scroll does, so the close
   button stays put instead of sliding away with the fields. */
.apply-modal__panel {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  width:           100%;
  max-width:       620px;
  max-height:      calc(100svh - 48px);
  overflow:        hidden;
  border-radius:   22px;
  border:          1px solid var(--line-strong);
  background:
    linear-gradient(165deg, rgba(139, 92, 246, .12), transparent 42%),
    var(--surface);
  transform:       translateY(18px) scale(.975);
  opacity:         0;
  transition:
    transform .34s cubic-bezier(.16, 1, .3, 1),
    opacity   .28s ease;
}

.apply-modal__scroll {
  overflow-y:          auto;
  overscroll-behavior: contain;
  padding:             44px 40px 40px;
}

.apply-modal.is-open .apply-modal__panel {
  transform: none;
  opacity:   1;
}

.apply-modal__close {
  position:      absolute;
  top:           16px;
  right:         16px;
  z-index:       2;
  width:         34px;
  height:        34px;
  border:        1px solid var(--line);
  border-radius: 9px;
  background:    none;
  color:         var(--muted);
  cursor:        pointer;
  font-size:     18px;
  line-height:   1;
  transition:    .2s;
}

.apply-modal__close:hover {
  border-color: var(--gold);
  color:        var(--gold);
}

.apply-modal__head {
  text-align:    center;
  margin-bottom: 28px;
}

.apply-modal__head h2 {
  font-size:      clamp(1.5rem, 3vw, 2rem);
  line-height:    1.1;
  letter-spacing: -.03em;
  margin:         14px 0 0;
}

.apply-modal__head p {
  font-size:  .93rem;
  color:      var(--muted);
  margin-top: 12px;
  max-width:  44ch;
  margin-inline: auto;
}

/* The form already styles itself — inside the dialog it just fills the panel. */
.assessment-form--modal {
  max-width:  none;
  background: none;
  border:     0;
  padding:    0;
}

.assessment-form select:disabled {
  opacity: .55;
  cursor:  not-allowed;
}

.assessment-form__error {
  margin-top:    16px;
  padding:       12px 14px;
  border-radius: 10px;
  border:        1px solid rgba(248, 113, 113, .4);
  background:    rgba(248, 113, 113, .08);
  color:         #fca5a5;
  font-size:     .88rem;
  text-align:    center;
}

/* ---- thank-you state ---- */
.apply-modal__done {
  text-align: center;
  padding:    18px 0 8px;
}

.apply-modal__tick {
  width:           62px;
  height:          62px;
  margin:          0 auto 24px;
  border-radius:   50%;
  display:         grid;
  place-items:     center;
  color:           var(--gold);
  border:          1px solid var(--line-strong);
  background:      rgba(139, 92, 246, .12);
}

.apply-modal__tick svg {
  width:  26px;
  height: 26px;
}

.apply-modal__done h2 {
  font-size:      clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -.03em;
}

.apply-modal__done p {
  color:      var(--muted);
  margin:     14px auto 30px;
  max-width:  38ch;
  line-height: 1.65;
}

/* <html> is the scroll container here, so it has to be locked too. */
html.is-modal-open,
body.is-modal-open {
  overflow: hidden;
}

/* ============ MEMBERSHIP: INTRO VIDEO ============ */
/*
   The default 96px top padding and 56px header gap pushed the closing line
   ("An application-only club for founders...") below the fold on a laptop.
   Tightened so the whole block — heading, video, closing line — lands on one
   screen.
*/
/* Padding-top clears the sticky header, which would otherwise clip the
   "Inside the club" eyebrow and heading when you scroll to this section. */
#intro-video {
  padding-top: calc(var(--nav-h) + clamp(20px, 2.4vw, 40px));
}

#intro-video .section__header {
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

/* The video is the tall part. Cap its width off the viewport *height* so the
   whole block still lands on one screen on a short laptop, while a tall
   monitor gets the full 880px. The 100% term keeps the height-derived width
   from overflowing a narrow container — on a phone the svh term alone
   resolves to ~780px, far wider than the column. */
#intro-video .video-link {
  width: min(100%, 880px, calc(52svh * 16 / 9));
}

/* Short laptops: the closing line lands a few px past the fold once the nav
   allowance is added. Trim the gaps, not the type. */
@media (max-height: 800px) {
  #intro-video .section__header { margin-bottom: 18px; }
  #intro-video .video-link      { width: min(100%, 880px, calc(48svh * 16 / 9)); }
}

/* ============ HOME: SECTION RHYTHM ============ */
/*
   Three bands, each opened by a hairline: the two cards, the logo marquee,
   then "What it is". The line used to open the credibility band, which put
   "Companies we've worked with" below it and grouped it with "What it is",
   so it moves down a section and the cards gain one of their own.
*/
.paths {
  border-top:  1px solid var(--line);
  padding-top: clamp(64px, 7.5vw, 104px);
}

.paths .section__header {
  margin-bottom: clamp(30px, 3.4vw, 44px);
}

.credibility-band {
  border-top: 0;
}

#what {
  border-top: 1px solid var(--line);
}

/* "Explore the 10 Levels" was a stray link under the cards. As a full-width
   row it reads as the third, quieter option rather than a footnote. */
.levels-cta {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             10px;
  padding:         22px 24px;
  border:          1px solid var(--line);
  border-radius:   var(--radius);
  background:      rgba(255, 255, 255, .018);
  transition:
    border-color .28s ease,
    background   .28s ease;
}

.levels-cta:hover {
  border-color: var(--line-strong);
  background:   rgba(139, 92, 246, .06);
}

/* Line the band up with .panels--two above it, which is capped at 860px. */
.panels__levels {
  max-width:  860px;
  margin:     16px auto 0;
}

/* The marquee label sat as far from its logos as from the section above it. */
.credibility-band .credibility__label {
  margin-bottom: 20px;
}

/* ============ MEMBERSHIP HERO STATS ON MOBILE ============ */
/*
   The bullet-separated row wraps to one stat per line on a phone, leaving the
   separators stranded at the end of each line. Below 640px it becomes a 2x2
   grid of chips and the separators go away.
*/
@media (max-width: 640px) {
  #page-membership .hero__stats--grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
    margin-inline:         auto;
    max-width:             420px;
  }

  #page-membership .hero__stats--grid .hero__stats-dot {
    display: none;
  }

  #page-membership .hero__stats--grid .hero__stat {
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    min-height:      44px;
    padding:         8px 10px;
    border:          1px solid rgba(23, 18, 35, .1);
    border-radius:   10px;
    background:      rgba(23, 18, 35, .025);
    line-height:     1.35;
  }
}

/* ============ EXIT POPUP ============ */
/* The headline is a full sentence now, not "Before you leave…" — the display
   size it inherits would run to six lines in a 480px box. */
.exit-overlay__box h3 {
  font-size:   clamp(1.35rem, 3.4vw, 1.72rem);
  line-height: 1.22;
  text-wrap:   balance;
}

.exit-overlay__box p {
  color: var(--muted);
}

@media (max-width: 620px) {
  .apply-modal {
    padding: 0;
  }
  .apply-modal__panel {
    max-width:     none;
    max-height:    100svh;
    min-height:    100svh;
    border-radius: 0;
    border:        0;
  }
  .apply-modal__scroll {
    padding: 64px 20px 40px;
  }
  .assessment-form__row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apply-modal__panel,
  .apply-modal__backdrop {
    transition: none;
  }
}