/* ============================================================
 * HOME PAGE GSAP LAYER — Home v2 (3 Aug 2026)
 * The statement section under the hero went through several GSAP
 * treatments (full-screen pin, 4-chapter reveal, a card-grow moment)
 * — Rebecca reverted all of it on reflection, so there's nothing left
 * here for that section; it's back to the plain live-page markup and
 * just picks up the ordinary title reveal below like any other
 * heading. Loaded by index.html — the LIVE home page since
 * 3 Aug 2026, when the trial was promoted. The "gsap-trial" filename is
 * now a misnomer; kept to avoid a rename touching every reference.
 * ============================================================ */

/* ============================================================
 * 0. STARLING LESSONS (Rebecca, 3 Aug — "yes do your recomendations")
 * Measured from starlingbank.com's own CSS bundles, not eyeballed.
 * Trial page only; the live pages keep the five-background rhythm.
 *
 * NOTHING HERE CHANGES A FONT WEIGHT. She asked for no font to get
 * thicker, so headings stay at the SemiBold 600 that matches the logo
 * and body stays 400 — only SIZE, TRACKING and MEASURE move.
 * (Starling runs headings at 550 and body at 450; 450 would have made
 * body text heavier than hers, so both were left alone.)
 * ============================================================ */

/* --- off-white page base ---
   Starling's is #F8F5F0, a warm cream under aubergine text. Straight
   copy would go muddy under navy + sky, so this is #F7F6F3: the same
   move, a touch cooler. */
body.hv2 { background: #F7F6F3; }
/* ...except behind the hero (3 Aug: "can we jusy have white for the background
   behind the home page hero"). The hero is a rounded card with a gutter around
   it, and that gutter was showing the warm base. White here also runs straight
   into the white .statement band below, so the page now opens on white and the
   warm off-white starts at the first band after it. Home only — this sheet is
   the home page's own. */
.hv2 .hero2 { background: #fff; }

/* --- three section backgrounds, not five ---
   Starling's homepage uses exactly three. This page had five: white,
   #F3F7FA off-white, #D9F4FF sky-tint, navy, plus the tint again.
   Both the old off-white AND the sky-tint bands now collapse onto the
   one off-white base, leaving off-white / white / navy.
   trust2 flips to WHITE so it doesn't sit off-white directly after the
   off-white parents band — the design rules bar two adjacent sections
   sharing a background, and collapsing the palette created that clash.
   Result, in page order: white, off-white, white, off-white, NAVY,
   white, off-white, white, off-white, white, off-white, white. */
.hv2 .band--sky,
.hv2 .band--light,
.hv2 .band--price,
.hv2 .band--blog { background: #F7F6F3; }
.hv2 .trust2 { background: #fff; }
/* 3 Aug, considered and NOT done: making .band--proof off-white so it doesn't
   sit white-on-white against the now-white ROI band above it. Off-white there
   just moved the clash one section down (the band--sky that follows is also
   off-white), and with only two neutrals the whole lower half of the page would
   have had to be re-dealt.
   ⚠ CORRECTION to my own note: I justified leaving it by saying the testimonial
   card straddles up into the ROI band and acts as the seam. It does NOT on this
   page — home-v2.css has `.band--blue + .band--proof .quotes { margin-top: 0 }`,
   which switches that straddle off precisely here. So the two white bands really
   do meet flat, with nothing crossing the join. Flagged to Rebecca: the fix is
   either to re-enable the straddle (drop that override and trim the proof band's
   compensating padding-top) or to re-deal the lower half's neutrals. */

/* --- tighter heading tracking ---
   Theirs is -0.03em; this page was -0.02em. Tightening only, no weight
   change. Their 1.0 line-height is NOT copied: it relies on their
   typeface's shallow descenders and would clip Outfit. */
.hv2 h1, .hv2 h2,
.hv2 .statement__line,
.hv2 .proofstat__line,
.hv2 .hero2__h1 { letter-spacing: -0.03em; }

/* --- one heading scale for every section (Rebecca, 3 Aug: "this text seems
   smaller that other headers - can we make sure they are all the same bar
   the hero header").
   Measured: eight section headings already sit at the shared
   .hv2 h2 scale of clamp(32px, 4vw, 54px) = 54px at 1440. Two did not —
   the final CTA at 46px (which is the one she spotted) and the corners
   heading at 48px. Both now use the shared scale, so all ten match.
   DELIBERATELY LEFT ALONE:
     · the hero h1 at 81px — she excluded it.
     · the statement band at 75px — that band's whole job is to be one
       oversized line, it is a site-wide pattern on five pages, and
       shrinking it to 54px would destroy the device. Flagged to her.
   Trial page only: .final2__inner h2's 46px lives in the shared
   home-v2.css and is used by Founders Club, Martyn's Law and the carbon
   page too, so it is overridden here rather than changed at source. */
.hv2 .final2__inner h2 { font-size: clamp(32px, 4vw, 54px); }

/* --- body size + measure ---
   Starling runs body at 18px and caps its measure at ~63ch; the
   airiness comes from short lines, not big padding (their section
   padding is only 40-80px). Section sub-lines were 16px here, so they
   move to 17px — bigger, not bolder — and pick up a 63ch cap. */
.hv2 .bandhead p { font-size: 17px; max-width: 63ch; }

/* ---------- 1. TITLE SCROLL-REVEAL (GSAP-driven) ---------- */
[data-gsap-title] { overflow: hidden; }
[data-gsap-title] .gsw {
  display: inline-block;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  [data-gsap-title] .gsw { transform: none !important; opacity: 1 !important; }
}

/* ---------- 2. CRESTS CAROUSEL — two rows, GSAP-driven ----------
   Kills the base sheet's CSS @keyframes marquee, since GSAP drives the
   drift instead (see section 2 of gsap-trial.js for the speed). */
.crests__track.gsap-driven { animation: none; }
/* Two-row and "still" variants both gone (3 Aug) — one row again, driven
   by GSAP at ~340s a loop. The base sheet's full-bleed 100vw strip, edge
   fade and tile styling all apply unchanged. */

/* ---------- 3. HERO ENTRANCE ---------- */
/* the 3 accreditation logos: no pop-in, no idle float (Rebecca, 3 Aug
   rejected both) — left static, just the headline/lede/CTA/dots below
   still animate in on load. Click-through navigation (section 5 in
   gsap-trial.js) sets cursor:pointer on the photo directly in JS, so
   there's nothing to add here for that. */

/* --- bigger accreditation badges (Rebecca, 3 Aug: "make the accreditation
   logos bigger on the hero too"). Base is height clamp(34px,3vw,44px) in a
   10x16px white tile; this takes the logo to clamp(44px,3.9vw,58px) — about
   a third bigger — and opens the tile padding and gap to suit, so they read
   as three roomier tiles rather than three crowded ones.
   The base sheet hides them under 960px; unchanged. */
.hv2 .hero2__badge img { height: clamp(44px, 3.9vw, 58px); }
.hv2 .hero2__badge { padding: 12px 20px; border-radius: 16px; }
.hv2 .hero2__badges { gap: 12px; }

/* ---------- 3b. HERO ARROWS — manual carousel control ----------
   The hero no longer auto-advances (data-hero-manual), so it needs visible
   controls. Arrows flank the existing dots on the same row. White-on-
   photography per the design rules; 44px hit area. */
.hero2__ctrls {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
}
.hero2__arrow {
  appearance: none;
  flex: 0 0 auto;
  width: 44px; height: 44px;      /* 44px touch target, per the a11y rules */
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 200ms var(--hv2-ease), transform 200ms var(--hv2-ease);
}
.hero2__arrow svg { width: 19px; height: 19px; }
.hero2__arrow:hover { background: #fff; color: var(--ge-navy, #0F1438); }
.hero2__arrow:active { transform: scale(0.94); }
.hero2__arrow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .hero2__arrow { transition: none; }
  .hero2__arrow:active { transform: none; }
}

/* ---------- 4. CTA BUTTON HOVER (GSAP-driven) ----------
   JS drives the actual motion via quickTo; this just removes the
   CSS transition on the arrow so the two don't fight over the same
   transform property. */
.btn .btn__arrow { will-change: transform; }
.btn.gsap-hover .btn__arrow { transition: none; }

/* ---------- 5. CORNERS OF SCHOOL LIFE — ticked list left, 1:1 photo right ----------
   Rebecca, 3 Aug, after asking what Starling would do here: the seven-across
   icon tiles became their dominant pattern instead — copy + ticked list on
   the left, one square photo on the right. No icons, ONE accent.
   The .whycards--row overrides that lived here are gone with the tiles; the
   base .whycard styles stay in home-v2.css because the live page uses them.
   .proofstat centres its heading/sub with auto margins and text-align (her
   29 Jul "centralise this" request) — right for the full-width version, wrong
   in a half column, so both reset to left here. */
/* 4 Aug: the "statements on the photo" trial lived here and was REJECTED
   ("i dont like the design you've done for built for every corner of a school
   - revert to what we have before"), so its ~70 lines of .cornershot* CSS are
   deleted and the two-column .cornerlist layout below is live again, unchanged.
   Worth keeping from it if the idea ever comes back: white type on that photo
   measures 1.64:1 over the tree and 2.86:1 over the cladding, so it needs a
   local darkening behind the words, and a radial mask's percentage radii are
   measured against the box's own width/height (over 50% puts the fade outside
   the box and you get a hard rectangle). */

.cornerlist {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 4.5vw, 76px);
  align-items: center;
  text-align: left;
}
.cornerlist__copy { min-width: 0; }
.cornerlist .proofstat__line {
  margin-left: 0;
  margin-right: 0;
  max-width: 20ch;
  /* the full-width version runs to 64px, too big for half a column — so it
     drops to the shared h2 scale rather than a size of its own (see the
     heading-scale block below) */
  font-size: clamp(32px, 4vw, 54px);
}
.cornerlist .proofstat__sub {
  margin-left: 0;
  margin-right: 0;
  /* Starling caps body measure at ~63ch; this is well inside that */
  max-width: 46ch;
}
.cornerlist__ticks {
  list-style: none;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  padding: 0;
  display: grid;
  /* two columns of ticks so seven items don't make one tall thin stack that
     out-runs the photo beside them */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 14px) clamp(18px, 2vw, 28px);
}
.cornerlist__ticks li {
  position: relative;
  padding-left: 28px;
  color: var(--ge-navy, #0F1438);
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.45;
}
/* the ONE accent: brand sky disc, navy glyph. Sky is barred from text by the
   design rules (fails AA on white), so it is the disc, never the tick. */
/* BULLET RULE (3 Aug 2026): "can we change all site bullet points to be navy
   with white ticks. if they are on a navy section make them white with a navy
   tick." Every list bullet below follows it. Excluded on purpose: the comparison
   matrix's Included/Not-included marks (a data cell, not a bullet) and the ticks
   drawn inside the fake app screenshots (they're product UI, not page furniture).
   */
.cornerlist__ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--ge-navy, #0F1438) center / 10px 10px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* ---------- the photo carousel + side dot rail (5 Aug 2026) ----------
 * Dots beside the image rather than under it, which is the Monzo pattern
 * Rebecca pointed at. The rail lives INSIDE the grid cell as a flex sibling of
 * the photo, not floated outside it — the photo column already runs to the
 * container's edge, so anything outside would have broken the page's margins.
 * -------------------------------------------------------------------- */
.cornerlist__media {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
  min-width: 0;
}
.cornerlist__photo {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;               /* the stacked shots position against this */
  /* 1:1 — Starling's most-used ratio, and all four files are square, so nothing
     is cropped and nothing shifts as they change */
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ge-bg-light, #F3F7FA);
}
/* every shot in the same place, only the current one visible. inset:0 rather
   than width/height so a slow-loading file cannot briefly size the tile. */
.cornerlist__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 520ms var(--hv2-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.cornerlist__photo img.is-on { opacity: 1; }

.cornerdots {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  /* was 10px between 8px dots = 18px pitch. The boxes are 24px now, so the gap
     comes off to keep the dots the same distance apart on screen. 2.5.8's
     spacing allowance is satisfied either way: 24px targets, touching. */
  gap: 0;
  align-items: center;
}
.cornerdots__dot {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  /* ⚠ THE BUTTON IS THE 24px TARGET — 6 Aug 2026, accessibility audit
     (SC 2.5.8, Target Size (Minimum), new in WCAG 2.2).
     It used to be an 8x8 button with `::after { inset: -18px }` supplying an
     invisible 44px hit area. That could never work here, and it took two
     attempts to see why:
       1. the button's own `overflow: hidden` (there to hide the label text)
          clipped the ::after — fixed by moving the label into a <span class="vh">;
       2. even then it stayed clipped, because TWO ANCESTORS clip as well —
          .proofstat.cornerlist and the .band--module card, both of which need
          overflow:hidden for their rounded corners. Measured with
          elementFromPoint: 10px out from a dot still returned .container.
     A pseudo-element can never escape an ancestor's clip, so the target has to
     be the button itself. It is now 24x24 and transparent, with the visible dot
     drawn by ::before — the appearance is unchanged, the target is real. */
  width: 24px;
  height: 24px;
  background: none;
  display: grid;
  place-items: center;
  position: relative;
  white-space: nowrap;
}
/* the dot you can actually see */
.cornerdots__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 20, 56, 0.22);
  transition: height 260ms var(--hv2-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              background 200ms var(--hv2-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.cornerdots__dot:hover::before { background: rgba(15, 20, 56, 0.42); }
.cornerdots__dot:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.55); }
/* the active one grows into a bar, as Monzo's does — taller, not wider, so the
   rail stays on one axis */
/* ⚠ the ACTIVE bar grows on ::before, not the button — the button must stay
   24x24 or the target size regresses. 30px of bar inside a 24px box overflows
   it visually, which is fine and intended: the box is a hit area, not a frame. */
.cornerdots__dot.is-on::before {
  height: 30px;
  background: var(--ge-navy, #0F1438);
}
@media (prefers-reduced-motion: reduce) {
  .cornerlist__photo img { transition: none; }
  .cornerdots__dot { transition: none; }
}
@media (max-width: 900px) {
  .cornerlist { grid-template-columns: 1fr; }
  .cornerlist .proofstat__line, .cornerlist .proofstat__sub { max-width: none; }
  .cornerlist__photo { aspect-ratio: 16 / 10; }
  /* stacked, the rail reads better horizontally under the photo than as a
     column pinned to one side of a now-wider image */
  .cornerlist__media { flex-direction: column; align-items: stretch; }
  .cornerdots { flex-direction: row; justify-content: center; gap: 12px; }
  /* ⚠ ::before, NOT THE BUTTON — 6 Aug 2026. This rule used to shrink the button
     itself to 8x30, which silently undid the SC 2.5.8 fix documented above: on a
     phone the active dot's tap target was 8px tall, the one place a finger is the
     only way to press it. The bar still turns sideways when the rail goes
     horizontal; the button stays 24x24 underneath it.
     ⚠ Height is restated because the desktop .is-on::before sets 30px. */
  .cornerdots__dot.is-on::before { height: 8px; width: 30px; }
}
@media (max-width: 560px) {
  .cornerlist__ticks { grid-template-columns: 1fr; }
}

/* The .parents* rules moved to home-v2.css on 3 Aug so the Parent App page
   can use the same section — see "PARENTS BAND" there. Nothing trial-only
   is left for it. */

/* ---------- 5b. SWITCHING STEPS CARD — centred in its pinned section ----------
   Rebecca, 3 Aug: "make sure this tile is central to section". It measured
   130px of space above but only 34px below, because .stepscard carries a
   -96px margin-bottom to straddle into the blue band beneath. Now the
   pinned section is a full viewport tall and centres the card in it, with
   the straddle margin dropped — the two cannot both be true, and with
   square section corners the straddle was mostly a rounded-corner device. */
[aria-label="How switching works"] {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
[aria-label="How switching works"] > .container { width: 100%; }
[aria-label="How switching works"] .stepscard { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  [aria-label="How switching works"] { min-height: 0; display: block; }
}

/* ---------- 6. SWITCHING STEPS — pinned, scroll-scrubbed walkthrough ----------
   A solid line overlays the existing dotted connector and grows
   downward in sync with scroll; each step's .in class (already fully
   styled in the base sheet — brighter chip colour + slight scale) now
   gets toggled by scroll progress instead of sitting unused, and each
   step's heading + body reveal as the line reaches them (Rebecca,
   3 Aug: "make sure that the scrolling reveals the text too").
   Navy line, not sky, at her request. */
.steps__progress {
  /* it is an <li> now (see gsap-trial.js) — absolute keeps it out of the list's
     flow, and these two stop the browser drawing a list marker for it */
  list-style: none;
  display: block;
  position: absolute;
  left: 21px;
  top: 40px;
  width: 0;
  height: 0;
  border-left: 3px solid var(--ge-navy, #0F1438);
  pointer-events: none;
}
/* The hidden start state for the step text is set by GSAP, NOT here —
   deliberately. If it were CSS, anyone on reduced motion or with JS
   blocked would get permanently invisible copy. */
.step h3, .step p { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .steps__progress { display: none; }
  .step h3, .step p { will-change: auto; }
}