/* ============================================================
 * FOUNDERS' CLUB — page styling (design system v2)
 * Reuses bands, cards and buttons from home-v2.css. Adds: hero eyebrow, perk
 * cards, live places counter and the claim board.
 * ⛔ Two things the old header promised are gone (6 Aug 2026): the shared
 * hero2* hero — this page now uses the .statement--hero pale card from
 * modular.css — and the sticky offer bar. Both have ⛔ notes at their old spots.
 * ============================================================ */

/* hero eyebrow — frosted pill on the photo (frosted allowed on photography) */
.fc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- hero watermark — the mark peeking in top-right  (6 Aug 2026) ----
 * Rebecca: "can we add a watermark icon to the launch deal pages hero peaking
 * in from the top right corner."
 *
 * ⚠ THE SITE'S STANDARD GHOST MARK CANNOT BE USED HERE, and this is the whole
 * reason for the mask. Every hero2 hero drops in
 * `grouped-symbol-blue3.svg` (fill #D9F4FF, the pale sky) at 11% opacity — which
 * works because those heroes are navy. This hero is the pale #F3F7FA
 * .statement--hero card: pale sky at 11% on near-white is invisible.
 *
 * So the SVG is used as a MASK and the colour comes from `background`. That is
 * what lets a single asset be white on navy elsewhere and navy here, at whatever
 * strength suits the surface — 5% navy over #F3F7FA lands around #E9EDF3, a
 * ghost you notice without reading it as a shape. Straight `background-image`
 * could not do this: the fill is baked into the file.
 *
 * ⚠ SCOPED TO .fc-hero, not .statement--hero. That class is shared with About us
 * and Book a Demo, and she asked for the mark on the Launch Deal page only.
 * ⚠ No overflow needed here — .statement--hero already clips, which is what
 * makes it "peek in" and follow the card's 64px rounded corner.
 * ⚠ -webkit-mask must stay alongside mask for Safari. */
.fc-hero { position: relative; }
.fc-hero__mark {
  position: absolute;
  top: clamp(-150px, -9vw, -70px);
  right: clamp(-130px, -8vw, -60px);
  width: clamp(300px, 36vw, 560px);
  /* ⚠ 0.20 SKY, and the colour is the reason the number can be 0.20.
     Rebecca: "make sure the watermark icon logo in hero is the same opacity as we
     have on other pages". The other three hero marks (Primary, Secondary, LAs &
     MATs) are 0.20 — but they sit on DARK PHOTOS, and this hero is the pale card
     (--ge-bg-light #F3F7FA).
     The arithmetic, which is why white had to go:
       · white 0.20 over a dark photo shifts a pixel by ~39/255 — clearly visible
       · white over #F3F7FA shifts it by at most 8/255 even at FULL strength, so
         0.20 white here is ~2/255. Invisible. That is exactly what produced "i
         cant see the watermark" three times running.
       · sky #2FB7F1 at 0.20 over #F3F7FA shifts it by ~40/255 — a near-exact match
         for the other three pages.
     So: same opacity as the rest of the site, and actually visible, by changing the
     COLOUR rather than the number. ⚠ Do not "tidy" this back to white. */
  opacity: 0.20;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}
.fc-hero__mark img { width: 100%; height: auto; display: block; }
/* the copy sits over it — without this the mark paints on top of the headline */
.fc-hero > .container { position: relative; z-index: 1; }

@media (max-width: 700px) {
  /* a 560px mark on a 390px phone is not a watermark, it is a background */
  .fc-hero__mark { width: clamp(200px, 52vw, 280px); top: -70px; right: -56px; }
}

/* ---------- photo film strip — three schools  (6 Aug 2026) ----------
 * Rebecca asked for "a collage of 3 school builing photos", then refined it to
 * "a thin photo film strip under the hero". The first build was a bento — one
 * tall photo left, two stacked right, 620px tall. It worked, but directly under
 * the hero it read as a second hero and pushed the offer off the fold. A thin
 * strip does the same job (shows who this is for) without competing.
 *
 * Three equal frames in one row. The height is deliberately small — 240px at
 * desktop against the hero's ~470 — so it reads as a band of atmosphere between
 * two pieces of content, not as a feature in its own right.
 * ⚠ The photos were RE-CUT LANDSCAPE for this: the first was a 900×1100 portrait
 * for the bento, and a portrait squeezed into a thin wide frame throws most of
 * the picture away. All three are 760×520 now. */
.fc-collage { background: #fff; }
.fc-collage__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.1vw, 16px);
  height: clamp(140px, 17vw, 240px);
}
.fc-collage__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: clamp(16px, 1.8vw, 26px);
  /* ⚠ min-height/width: 0 IS LOAD-BEARING. A grid item's default is
     min-height: auto, which refuses to shrink below the content's intrinsic
     size — so each <img> held its own 900×1100 / 900×540 ratio and burst out of
     its cell. Measured before this line: the grid said 620px tall and the tall
     photo rendered 741px, so the two columns finished at different heights and
     the collage stopped squaring up. Nothing about height:100% works without it. */
  min-height: 0;
  min-width: 0;
}

@media (max-width: 640px) {
  /* three frames across a 390px phone leaves ~118px each — too narrow to read as
     anything. Two across, and the third frame drops off rather than shrinking
     the set: a strip of two still says "schools", a strip of three slivers does
     not. Kept in the markup, hidden here, so it returns on any wider screen. */
  .fc-collage__grid { grid-template-columns: repeat(2, 1fr); height: clamp(120px, 34vw, 150px); }
  .fc-collage__img:last-child { display: none; }
}

/* ---------- perk cards — bento: hero tile left, 2×2 grid right ---------- */
.fc-perks {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  /* THREE rows since 6 Aug 2026 — the third is photography. Rebecca: "could we
     incorporate the 2 film strip photos on the launch deal page with the bento
     boxes below". The standalone .fc-collage strip that used to sit above this
     section is gone; its photos are cells in this grid now.
     ⚠ .fc-perk--hero is `grid-row: 1 / 3`, so the tall navy card stops at the end
     of row 2 and does NOT stretch down beside the photos. That is deliberate —
     if you ever change it to 1 / 4 the 50% figure floats in a very tall box. */
  grid-template-rows: auto auto auto;
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(36px, 4vw, 60px);
}
.fc-perk {
  background: #fff;
  border: 1px solid #E6ECF4;
  border-radius: 24px;
  padding: clamp(24px, 2.4vw, 34px);
  box-shadow: 0 12px 30px rgba(15, 20, 56, 0.07);
}
.fc-perk__ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--ge-blue-3, #D9F4FF);
  color: var(--ge-blue, #1B367E);
  margin-bottom: 16px;
}
.fc-perk__ico svg { width: 24px; height: 24px; }
.fc-perk h3 { margin: 0 0 8px; font-size: 20px; color: var(--ge-navy, #0F1438); }
.fc-perk p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #4A5876; }

/* hero tile — navy, spans both rows, huge 50% */
.fc-perk--hero {
  grid-row: 1 / 3;
  background: var(--ge-navy, #0F1438);
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 3vw, 44px);
}
.fc-perk--hero .fc-perk__big {
  margin: 0 0 auto;
  font-size: clamp(96px, 11vw, 170px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ge-sky, #2FB7F1);
}
.fc-perk--hero .fc-perk__big span { font-size: 0.55em; }
.fc-perk--hero h3 { color: #fff; font-size: clamp(22px, 2vw, 27px); margin-top: 24px; }
.fc-perk--hero p { color: rgba(255, 255, 255, 0.82); }

/* friend tile — solid sky for a warm sign-off */
.fc-perk--friend { background: var(--ge-sky, #2FB7F1); border: none; }
.fc-perk--friend .fc-perk__ico { background: rgba(255, 255, 255, 0.9); color: var(--ge-blue, #1B367E); }
.fc-perk--friend h3 { color: var(--ge-navy, #0F1438); }
.fc-perk--friend p { color: rgba(15, 20, 56, 0.85); }

/* Every perk icon gets its own tint so the row reads as a set of colours
   rather than a run of blue (Rebecca, 27 Jul: "we can add some more colours to
   this page to make it more exciting"). Kept to ACCENTS on the existing clean
   base — no coloured section bands, which she has tried and rejected before.
   Each pairing clears 3:1 for a graphic: sky 9.78, violet 7.28, amber 5.44,
   green 4.23. The palette's own yellow-4 (#D6AB14) manages only 1.89 on its
   tint, hence the deeper #7A5C00. */
.fc-perk:nth-child(2) .fc-perk__ico { background: #F9EFD0; color: #7A5C00; }
.fc-perk:nth-child(3) .fc-perk__ico { background: #E6F3D9; color: #4F7D2C; }
.fc-perk:nth-child(4) .fc-perk__ico { background: #ECE8FB; color: #4B3B9C; }


/* ⛔ THE PHOTO CELLS ARE GONE — 6 Aug 2026, "the photo isnt suitable here".
   .fc-perk__photo / --wide styled two, then one, photo inside the perks grid.
   Nothing carries those classes any more, so the rules are removed rather than
   left as dead weight. The .fc-collage film strip they replaced is gone too.
   ⚠ If photography ever comes back here, the traps that cost time were:
     · HEIGHT, not min-height — min-height is a floor, not a cap, and a 780x440
       source grew the cell to its own aspect and towered over the cards.
     · min-height: 0 / min-width: 0 on the grid item, or it refuses to shrink
       below the image's intrinsic size.
     · Put the base rules ABOVE the media queries. Media queries add no
       specificity, so a later plain rule beats an earlier one inside @media —
       and `grid-column: span 2` on a one-column grid invents a phantom second
       column (measured 166px + 176px on a 390px phone). */

/* ---------- three perks, not five  (6 Aug 2026) ----------
 * "A direct line to our product team" and "We'll be friends" came out of the grid.
 * That left the tall navy card in column 1 with only two cards to fill columns 2-3
 * across TWO rows, so the second row sat empty and the cards floated half-height
 * beside a much taller card. The survivors now take columns 2-to-end, one per row:
 *   [ 50% navy ] [ at least 50% off ]
 *   [  (tall)  ] [ free migration   ]
 * ⚠ :not(.fc-perk--hero) matters — the navy card sets its own grid-row 1/3 and
 *   must keep column 1. */
.fc-perks > .fc-perk:not(.fc-perk--hero) { grid-column: 2 / -1; }

/* ---------- "what's the catch?"  (6 Aug 2026) ----------
 * Plain question-and-answer on white, no cards. There is a card grid directly
 * above it; a second one would read as more of the same, and the whole point of
 * this band is that it should look like someone talking, not marketing. */
.fc-catch__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 52px) clamp(32px, 4vw, 72px);
  margin: clamp(36px, 4vw, 60px) 0 0;
}
.fc-catch__item dt {
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 600;
  color: var(--ge-navy, #0F1438);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.fc-catch__item dd {
  margin: 0;
  font-size: var(--fs-body, 16px);
  line-height: 1.6;
  color: #4A5876;
  max-width: 46ch;
}
@media (max-width: 760px) {
  .fc-catch__list { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .fc-perks { grid-template-columns: 1fr 1fr; }

  .fc-perk--hero { grid-row: auto; grid-column: 1 / 3; }
  /* two columns: the hero already spans both, so the other two do the same rather
     than sitting half-width with empty grid beside them */
  .fc-perks > .fc-perk:not(.fc-perk--hero) { grid-column: 1 / -1; }
  .fc-perk--hero .fc-perk__big { font-size: clamp(72px, 14vw, 120px); }
}
@media (max-width: 560px) {
  .fc-perks { grid-template-columns: 1fr; }
  .fc-perk--hero { grid-column: auto; }
}

.fc-close { text-align: center; margin: clamp(28px, 3vw, 44px) 0 0; font-size: 15px; color: #6B7689; }

/* ⛔ THE PLACES COUNTER STYLES (.fc-progress, __eyebrow, __count, __note,
   .fc-bar, .fc-bar__fill) WERE HERE AND ARE GONE — 6 Aug 2026, "lets remove the
   places counter on the lanch deal page".

   ⚠ It was removed because THE NUMBER WAS FABRICATED, not because of how it
   looked: scripts/founders-club.js generated it from the date. See the note at
   the top of that file. If a counter ever returns it must show a real figure.

   The @media (prefers-reduced-motion) block that killed the .fc-bar__fill
   transition went with it — there is no fill left to animate. */

/* ---------- claim board ---------- */
.fc-claim-section {
  background: #fff;
  /* generous bottom room so the footer's contact card can straddle up */
  padding: clamp(48px, 6vw, 88px) 0 clamp(280px, 22vw, 380px);
}
.fc-claim {
  position: relative;
  overflow: hidden;
  background: var(--ge-blue, #1B367E);
  border-radius: clamp(20px, 2.5vw, 34px);
  padding: clamp(40px, 6vw, 90px) clamp(28px, 4vw, 72px);
  text-align: center;
}
.fc-claim h2 { margin: 0 0 14px; color: #fff; }
.fc-claim > p { margin: 0 auto; max-width: 52ch; color: rgba(255, 255, 255, 0.88); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; }
.fc-claim__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(28px, 3vw, 40px); }
.fc-claim__wm { position: absolute; right: -4%; bottom: -34%; width: 42%; opacity: 0.08; pointer-events: none; }
.fc-claim__wm img { width: 100%; height: auto; display: block; }
.fc-claim > *:not(.fc-claim__wm) { position: relative; z-index: 1; }

/* ⛔ THE STICKY OFFER BAR (.fbar, __inner, __msg, __dot, __count, __cta) WAS
   HERE AND IS GONE — 6 Aug 2026, "we can get rid of the sticky bar on that
   page". A fixed navy bar across the bottom of the window, translateY(130%)
   until JS added .is-on. Nothing on the site carries these classes now.

   ⚠ Two things it took with it, so they are not hunted for later:
     · the .fbar transition reset inside @media (prefers-reduced-motion: reduce)
       — the .fc-bar__fill reset in that same block is KEPT below, because the
       in-page progress bar still exists
     · the @media (max-width: 640px) block that centred the bar on phones

   ⚠ .fc-bar is a DIFFERENT component and stays: it is the progress bar inside
   the navy claim card, not the sticky bar. Same three letters, unrelated. */
@media (prefers-reduced-motion: reduce) {
  .fc-bar__fill { transition: none; }
}

/* perks band carries the hanging proof row → drop its top padding so the row
   overlaps the hero (like the home page), letting .proofrow's negative margin work.
   WHITE, not the .band--light off-white it used to be: the band after a hero is
   white site-wide (Rebecca, 4 Aug — "after a hero there is only white sections").
   The statement band below is also white, so those two read as one white run
   before the navy places band; the hanging proof cards carry their own deep
   shadow, and the perks cards get the soft site shadow instead of a stroke. */
.band--light.fc-perks-band { padding-top: 0; background: #fff; }
.fc-perks-band .fc-perk { border-color: transparent; }   /* keeps its own 12/30 shadow */

/* ⚠ DEAD since 6 Aug 2026 — kept only so nobody re-adds it from memory.
   This page's hero is now the shared .statement--hero pale card (styled in
   modular.css), so there is no .hero2__frame on it and this rule matches
   nothing. It used to bring the bare .hero2 down from the tall HOME hero height
   to the shared site height (Rebecca, 23 Jul). Left in place rather than
   deleted because it is one line and removing it is the kind of tidy-up that
   silently breaks a page if the hero is ever reverted. */
.hero2__frame { min-height: var(--hero-h); }

/* Highlight pill on the perks heading — the .mark treatment is otherwise
   scoped to hero H1s in home-v2.css, so it is restated here for an H2.
   Colours are the site-signature pill (Rebecca, 4 Aug: "any highlight pills
   on the site need to be the same colour as the home page hero highlight
   pills") — pale sky #D9F4FF with blue #1B367E text, 9.8:1. It was green
   (#E6F3D9 / #456E26) until that rule landed; the class name is kept so the
   markup doesn't need touching on every page that uses it. */
.fc-perks-band .bandhead h2 .mark--green {
  display: inline-block;
  line-height: 1;
  padding: 0.06em 0.22em 0.14em;
  border-radius: 0.24em;
  background: var(--ge-blue-3, #D9F4FF);
  color: var(--ge-blue, #1B367E);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============================================================
 * HERO — centred copy, and the ghost hexagon removed (29 Jul)
 *
 * 1. "can we make sure the content is central to the hero"
 *    The shared hero frame is a flex row with align-items:
 *    flex-end, so the copy sat hard against the bottom of the
 *    card — measured 278px of air above it and 0 below at
 *    1440px (332/0 at 1100px). Centring the COPY via align-self
 *    rather than changing the frame's align-items leaves the
 *    placeholder tile exactly where it is.
 *
 *    This is the same fix already applied to Primary, Secondary
 *    and LAs & MATs — but that one lives in school-types.css,
 *    which this page does not load, so it has to be repeated
 *    here. If a fourth page needs it, promote it into
 *    hero-cutout.css instead of copying it a third time.
 *
 * 2. "also remove the gradient from the founders page"
 *    There is NO CSS gradient on this page — verified, zero,
 *    including pseudo-elements. What reads as one is the
 *    oversized GroupEd hexagon: .hero2__mark at 1008px wide and
 *    11% opacity, whose layered shapes step through several
 *    tones across the navy card. Removing it here is the honest
 *    reading of the request. It is one rule — delete this to put
 *    the mark back.
 *
 *    NOTE this is a deliberate exception to the site-wide hero
 *    mark rule (every hero carries the faint ghost, top-right,
 *    11%). Founders' Club is now the one hero without it.
 * ============================================================ */
.hero2--cutout .hero2__copy {
  align-self: center;
  padding-block: clamp(40px, 5vw, 64px);
}
.hero2--cutout .hero2__mark { display: none; }

/* ---- copy-led hero, no image slot  (5 Aug 2026) ----
 * The placeholder tile was removed (see the note in founders-club.html). With
 * nothing in the right half, the copy takes the width back rather than leaving a
 * hole where the box used to be — the same move Book a Demo makes. */
body.hv2 .hero2--photo .hero2__copy { max-width: 58rem; }

/* ---- the hero headline comes down to the school-type scale  (6 Aug 2026) ----
 * Rebecca: "the claim the launch deal on the launch deal page looks too different
 * from our other page headers. its too big."
 *
 * Measured at 1440 before this: Launch Deal 75px over THREE lines, against Primary
 * Schools 62px over two and About us 45px. It was the largest block of type on the
 * site — not because the size alone was out of line (Book a Demo and Compare are
 * also 75px) but because this page's headline is long enough to set three lines at
 * that size, so it carried far more mass than any other header.
 *
 * 62px is `.hero2--photo .hero2__copy h1` from hero-cutout.css — the exact clamp
 * the three school-type pages use, which is what she pointed at.
 * ⚠ Scoped to .fc-hero. Book a Demo and Compare School MIS share .statement--hero
 * and are deliberately untouched; their headlines are one and two lines, so the
 * same size does not read as heavy there. If they are ever brought down too, do it
 * on .statement--hero itself rather than repeating this rule. */
body.hv2 .fc-hero .statement__line {
  font-size: clamp(36px, 4.4vw, 62px);
}