/* ============================================================
 * OnSite Launch Campaign — violet re-tint of the GroupEd hi-* patterns
 * ------------------------------------------------------------
 * The marketing-page.css patterns ship in the GroupEd master accent
 * (sky / navy / blue). This file re-points the accent tokens to the
 * OnSite violet sub-brand and patches the few hardcoded sky values.
 * Load LAST, after marketing-page.css.
 *
 *   --ge-sky   → bright violet accent (pops on the navy grounds)
 *   --ge-blue  → deep violet (links, hover, emphasis)
 *   --ge-blue-2/3 → pale violet washes (tinted bands + highlight pills)
 *   navy dark grounds are kept as-is.
 * ============================================================ */
body {
  --ge-sky:    #8572DA; /* violet-3 — bright accent on dark */
  --ge-blue:   #4B38A0; /* deep violet — links / hover / emphasis */
  --ge-blue-2: #F2EEFB; /* very pale violet wash */
  --ge-blue-3: #E8E4F9; /* violet-2 — tints + highlight pills */
  --ge-blue-4: #8572DA;
  --link:            #4B38A0;
  --shadow-focus:    0 0 0 3px rgba(97, 77, 186, 0.45);
  --shadow-glow-sky: 0 0 0 4px rgba(97, 77, 186, 0.18);
}

/* Solid-fill components carrying white text need the deeper violet
 * (the bright accent fails contrast under white type). */
/* ⚠ white text, not the inherited navy — 6 Aug 2026, accessibility audit
   (SC 1.4.3). foundation.css sets `.btn--primary { background: var(--ge-sky);
   color: var(--ge-navy) }`; this page overrode only the BACKGROUND to violet and
   left the navy text, which measures 2.78:1 on #614DBA against the 4.5:1
   minimum. White on that violet is 6.4:1. */
.btn--primary { background: var(--ge-violet-4); color: var(--ge-white); }
.btn--primary:hover { background: var(--ge-blue); }

/* hardcoded sky rgba in marketing-page.css → violet */
.hi-incl { background: rgba(97, 77, 186, 0.12); }

/* Pull-quote field reads better as a deep violet card with white type
 * than the default sky field with navy type. */
.hi-pullquote__fig  { background: var(--ge-violet-4); color: var(--ge-white); }
.hi-pullquote__text { color: var(--ge-white); }
.hi-pullquote__by   { color: rgba(255, 255, 255, 0.78); }
.hi-pullquote__text .hl { background: var(--ge-white); color: var(--ge-violet-4); }

/* Guarantee winning card: deep violet + white type (instead of the
 * sky field + navy type) so the line items hit AA contrast. */
.hi-guarantee .hi-invoice--ours { background: var(--ge-violet-4); color: var(--ge-white); }
.hi-guarantee .hi-invoice--ours .hi-invoice__eyebrow { color: var(--ge-white); }
.hi-guarantee .hi-invoice--ours .hi-invoice__sub { color: rgba(255, 255, 255, 0.85); }
.hi-guarantee .hi-invoice--ours .hi-line__name { color: var(--ge-white); }
.hi-guarantee .hi-invoice--ours .hi-line { border-bottom-color: rgba(255, 255, 255, 0.18); }
.hi-guarantee .hi-invoice--ours .hi-incl { background: var(--ge-white); color: var(--ge-violet-4); font-weight: var(--fw-regular); }
.hi-guarantee .hi-invoice--ours .hi-invoice__save { color: var(--ge-white); }
.hi-guarantee .hi-invoice--ours .hi-invoice__save strong { color: var(--ge-white); }
.hi-guarantee .hi-invoice--ours .hi-total__label { color: var(--ge-text-secondary); }
.hi-guarantee .hi-invoice--ours .hi-total__num { color: var(--ge-violet-4); }

/* ---- nav lockup: OnSite logo + "by GroupEd" ---- */
.nav__brand { display: flex; align-items: center; gap: var(--sp-3); }
.nav__brand img.nav__brand-logo { height: 44px; width: auto; }
.nav__brand-by { font-size: 13px; font-weight: var(--fw-light); color: var(--fg2); letter-spacing: 0.01em; }
@media (max-width: 600px) { .nav__brand-by { display: none; } }

/* ---- MIS "works with" — Monzo-style colour panel: copy + framed cycling logo ---- */
.hi-misband {
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px);
  align-items: center;
  background: var(--ge-blue-3);
  border-radius: clamp(24px, 2.4vw, 36px);
  padding: clamp(32px, 4vw, 64px);
}
@media (min-width: 900px) { .hi-misband { grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 5vw, 80px); } }
.hi-misband__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.hi-misband__copy h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: var(--fw-light); line-height: 1.08; letter-spacing: -0.02em; color: var(--ge-navy); margin: 0; }
.hi-misband__copy p { font-size: var(--fs-body); font-weight: var(--fw-light); line-height: 1.6; color: var(--ge-neutral-dk2); margin: 0; max-width: 50ch; }
.hi-misband__viz { display: flex; flex-direction: column; gap: var(--sp-5); }
.hi-misband__tile {
  position: relative; min-height: clamp(190px, 22vw, 250px);
  background: var(--ge-white);
  border-radius: clamp(18px, 2vw, 28px);
  box-shadow: 0 18px 44px -26px rgba(15, 20, 56, 0.30);
}
.hi-misband__tile .partners__carousel { position: absolute; inset: 0; }
.hi-misband__tile .partners__carousel img {
  position: absolute; inset: 0; margin: auto;
  max-height: clamp(74px, 9vw, 104px); max-width: 62%; width: auto; object-fit: contain;
  opacity: 0; transition: opacity 600ms var(--ease-standard);
}
.hi-misband__tile .partners__carousel img.is-active { opacity: 1; }
.hi-misband__tile .partners__carousel .partners__logo--sims { max-height: clamp(120px, 16vw, 180px); max-width: 86%; }
@media (prefers-reduced-motion: reduce) { .hi-misband__tile .partners__carousel img { transition: none; } }
.hi-misband__names {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 12px; margin: 0; text-align: center;
  font-size: var(--fs-body-sm); font-weight: var(--fw-regular); color: var(--ge-navy);
}
.hi-misband__names span { color: var(--ge-text-secondary); }

/* ---- feature-row mode name → proper heading kicker (not an eyebrow) ---- */
.hi-feature__kicker {
  font-size: var(--fs-h4); font-weight: var(--fw-regular);
  letter-spacing: 0; text-transform: none;
  color: var(--ge-violet-4); line-height: 1.3; margin: 0 0 var(--sp-2);
}

/* ---- Monzo-style testimonials: bold colour blocks, big quote ---- */
.hi-quotes2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 860px) { .hi-quotes2 { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.hi-bq { position: relative; display: flex; flex-direction: column; gap: var(--sp-7); margin: 0; padding: clamp(32px, 3.5vw, 52px); border-radius: var(--radius-xl); overflow: hidden; }
.hi-bq--navy { background: var(--ge-navy); }
.hi-bq--violet { background: var(--ge-violet-4); }
.hi-bq__icon { color: rgba(255, 255, 255, 0.85); }
.hi-bq__icon svg { width: 42px; height: 42px; }
.hi-bq__text { margin: 0; flex: 1 1 auto; font-size: clamp(21px, 2.2vw, 29px); font-weight: var(--fw-light); line-height: 1.4; letter-spacing: -0.015em; color: rgba(255, 255, 255, 0.92); text-wrap: pretty; }
.hi-bq--navy .hi-bq__hl { color: var(--ge-sky); }
.hi-bq--violet .hi-bq__hl { color: var(--ge-white); }
.hi-bq__stats { display: flex; gap: clamp(24px, 4vw, 48px); }
.hi-bq__stat { display: flex; flex-direction: column; gap: 4px; }
.hi-bq__statnum { font-size: clamp(28px, 3vw, 38px); font-weight: var(--fw-light); line-height: 1; letter-spacing: -0.025em; color: var(--ge-sky); }
.hi-bq__statlabel { font-size: var(--fs-body-sm); font-weight: var(--fw-light); color: rgba(255, 255, 255, 0.72); max-width: 18ch; line-height: 1.4; }
.hi-bq__by { display: flex; align-items: center; gap: var(--sp-4); padding-top: var(--sp-6); border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: auto; }
.hi-bq__crest { width: 54px; height: 54px; flex: none; border-radius: 999px; background: var(--ge-white); padding: 6px; object-fit: contain; }
.hi-bq__id { display: flex; flex-direction: column; gap: 2px; }
.hi-bq__name { font-size: var(--fs-h4); font-weight: var(--fw-regular); color: var(--ge-white); }
.hi-bq__role { font-size: var(--fs-body-sm); font-weight: var(--fw-light); color: rgba(255, 255, 255, 0.75); }

/* ---- Martyn's Law countdown (lockdown feature row) ---- */
.hi-mlcd { display: inline-flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-6); background: var(--ge-blue-3); border-radius: var(--radius-lg); }
.hi-mlcd__label { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ge-violet-4); font-weight: var(--fw-regular); }
.hi-mlcd__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ge-red-3); flex: none; animation: hi-pulse 2.4s var(--ease-standard) infinite; }
@media (prefers-reduced-motion: reduce) { .hi-mlcd__dot { animation: none; } }
.hi-mlcd__clock { display: flex; gap: var(--sp-6); }
.hi-mlcd__unit { display: flex; flex-direction: column; align-items: flex-start; }
.hi-mlcd__num { font-size: clamp(28px, 3vw, 38px); font-weight: var(--fw-light); line-height: 1; letter-spacing: -0.02em; color: var(--ge-navy); font-variant-numeric: tabular-nums; }
.hi-mlcd__u { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ge-text-secondary); margin-top: 6px; }

/* ---- feature-row "what you get" bullets ---- */
.hi-feature__points { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.hi-feature__points li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; font-size: var(--fs-body); font-weight: var(--fw-light); line-height: 1.5; color: var(--ge-neutral-dk2); }
.hi-feature__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none; border-radius: 999px;
  background: var(--ge-violet-4); color: var(--ge-white); margin-top: 1px;
}
.hi-feature__check svg { width: 13px; height: 13px; }

/* feature media images sit a touch inset on the violet wash */
.hi-feature__photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; position: absolute; inset: 0; padding: 0; }
.hi-feature__media--pad { padding: clamp(18px, 2vw, 30px); }
.hi-feature__media--pad .hi-feature__photo { position: relative; inset: auto; }

/* trustband eyebrow → deep violet (the kit sets it to the bright accent) */
.hi-trustband__copy .eyebrow { background: var(--ge-violet-4); color: var(--ge-white); }

/* ---- hero heading: wider copy column + balanced wrap so the full
 * headline sits on fewer lines (layout only, wording unchanged) ---- */
.hi-hero__copy { max-width: 760px; }
.hi-hero h1 { text-wrap: balance; }
@media (min-width: 900px) { .hi-hero__copy { max-width: 820px; } }
/* pan the hero photo right so the full iPad kiosk stays in shot.
 * width:100% = no magnification → the 3000px image maps ~1:1 to the board
 * (crisp on retina) and the full image width keeps the whole iPad in shot. */
.hi-hero__bg { object-position: right center; }
@media (min-width: 900px) { .hi-hero__bg { left: 0; right: auto; width: 100%; } }

/* ============================================================
 * FLOW / RHYTHM — even out band padding and de-squish the proof zone
 * ============================================================ */
/* one vertical-rhythm scale across the lighter bands (match .hi-section) */
.hi-statsband, .hi-proof { padding: clamp(72px, 7vw, 112px) 0; }
.hi-proof__head { margin-bottom: clamp(40px, 4vw, 64px); }

/* trusted-by school marquee — its own labelled band, with breathing room */
.hi-schoolband { padding: clamp(48px, 5vw, 72px) 0; }
.hi-schoolband__label {
  text-align: center; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ge-text-secondary); margin: 0 0 var(--sp-10);
}
.hi-schoolband .hi-marquee__track { gap: clamp(48px, 6vw, 88px); }
/* width:auto — see the note on .pv3g__logochip img; height-only sizing + the new
   width attributes would otherwise stretch every crest. */
.hi-schoolband .hi-marquee__track img { height: clamp(46px, 5vw, 62px); width: auto; opacity: 0.72; mix-blend-mode: multiply; }

/* accreditation — its own band, air above (no stacked top padding) */
.hi-accredband { padding-top: var(--sp-2); }
.hi-accredband .hi-trustband { margin-top: 0; }
/* recolour the accreditation tile → light violet panel (distinct from the navy
 * quote card above and the navy final CTA below) */
.hi-accredband .hi-trustband { background: var(--ge-blue-3); }
.hi-accredband .hi-trustband__copy h3 { color: var(--ge-navy); }
.hi-accredband .hi-trustband__copy p { color: var(--ge-neutral-dk2); }
.hi-accredband .hi-trustband__copy .eyebrow { background: var(--ge-violet-4); color: var(--ge-white); }
.hi-accredband .hi-trustband__badge img { box-shadow: var(--shadow-sm); }

/* read-more link inside a feature row */
.hi-feature__readmore { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--sp-2); font-size: var(--fs-body-sm); color: var(--ge-blue); font-weight: var(--fw-regular); }
.hi-feature__readmore svg { width: 16px; height: 16px; }
.hi-feature__readmore:hover { color: var(--ge-navy); }

/* launch-deal badge — enlarge the circle so the words sit comfortably */
.hi-hero__deal-badge {
  width: clamp(118px, 11vw, 148px);
  height: clamp(118px, 11vw, 148px);
  padding: 14px;
}

/* ============================================================
 * SITE HEADING WEIGHT  (6 Aug 2026)
 * Rebecca asked for the two OnSite launch campaign pages to be brought onto the
 * site's look, after the four partner/account pages. They were the last two
 * outside it.
 *
 * These pages do NOT load home-v2.css — which is where `.hv2 h1/h2/h3
 * { font-weight: 600 }` lives — and they are built on a brand-kit template whose
 * display type is deliberately --fw-light (300). Eleven headings rendered light
 * against a site that is SemiBold 600 everywhere else (CLAUDE.md: "headings are
 * SemiBold 600 — matching the weight of the GroupEd logo wordmark").
 *
 * ⚠ This file and grouped-brand-kit/styles/marketing-page.css are loaded by
 * EXACTLY these two pages and nothing else, which is why the weights can be
 * changed here rather than fought with in modular.css. Verified with
 * `grep -l` across all 29 pages before editing.
 *
 * The base rule catches the three h3s that were falling through to
 * colors_and_type.css; the named selectors below it beat marketing-page.css's
 * own light declarations, which are more specific than a bare tag.
 * ⚠ Big display NUMBERS are NOT headings and keep their own weight — they live
 * on .hi-bq__statnum / .hi-mlcd__num, untouched by any of this.
 * ============================================================ */
.hv2 h1, .hv2 h2, .hv2 h3 { font-weight: 600; }
.hv2 .hi-hero h1,
.hv2 .hi-band-label h2,
.hv2 .hi-final h2,
.hv2 .hi-guarantee__head h2,
.hv2 .hi-proof__head h2,
.hv2 .hi-misband__copy h2,
.hv2 .hi-trustband__copy h3 { font-weight: 600; }