/* ⚠ ICON HOVER ANIMATIONS REMOVED 11 Aug 2026 — Rebecca: "can we also remove the
   animation that is on the icons in the help centre". The step icons, the guide-card
   icons, the app icon and the done tick used to rotate -8deg and transition on hover.
   Deleted rather than commented out so nobody reinstates them by accident. */

/* ============================================================
 * PARENT HELP CENTRE — utility/content page for parents
 * ------------------------------------------------------------
 * Leads with the Parent & Carer PINK — the same family as the Parent
 * App product page's .pp--parent (Rebecca, 27 Jul: "make the help
 * centre accent colour the parent and carer colour"). It previously
 * used the app icon's teal, which collided with One's identity colour.
 * The icon IMAGE keeps its own real teal; only page accents are pink.
 * Nav/footer chrome stay brand navy/blue (shared home-v2.css).
 * Loads AFTER home-v2.css.
 *   --ph-accent       #1B88C8  deep sky (eyebrow, focus, notif)
 *   --ph-accent-ink   #116490  AA-safe deep sky ink (text/links/icons)
 *   --ph-accent-tint  #CBE8F8  light sky wash (icon tiles, setup band)
 * Sections: .ph-hero (navy) · .ph-benefits (white) · .ph-setup
 * (pink tint) · .ph-guide (off-white) · .ph-faq (white) · .ph-support.
 * ============================================================ */
.hv2 {
  /* teal from 3 Aug — the app and One swapped palettes */
  --ph-accent: #00B1A7;
  --ph-accent-ink: #00736B;
  --ph-accent-tint: #C9F0EC;
}

/* ---------- hero ---------- */
.ph-hero { padding: clamp(10px, 1.4vw, 18px) clamp(10px, 1.6vw, 22px) 0; }
.ph-hero__frame {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 2.5vw, 34px);
  background: var(--ge-navy, #0F1438);   /* flat navy — no gradient */
  min-height: var(--hero-h);   /* shared hero height token — see home-v2.css :root */
  /* capped + centred like every other hero; .ph-hero supplies the gutter */
  max-width: var(--hero-cap);
  margin-inline: auto;
  color: #fff;
  /* Horizontal inset matches the product-page hero exactly (Rebecca, 27 Jul:
     "the parent help centre hero's margin isn't the same as the product
     pages"). The outer frame margins always matched — both use
     clamp(10px,1.6vw,22px) — but a product hero insets its copy by
     .pv3g__copy's clamp(20px,3.4vw,56px) PLUS .pv3g__frame--photo's
     wide-screen cap, `max(0px, (100% - 1360px)/2)`, which keeps hero content
     within 1360px above that viewport width. This page had no such cap, so
     above ~1360px its text crept toward the edge while product pages held
     their inset (89px vs 58px at 1440px).
     1316px = 1360px minus this frame's own 2x22px outer margin, because a
     percentage here resolves against .ph-hero's content box rather than the
     viewport as it does on the product pages. */
  padding-block: clamp(48px, 6vw, 92px);
  /* Now that the frame is capped at --hero-cap, the old
     `calc(max(0px,(100% - 1316px)/2) + clamp(...))` over-padded badly: the %
     resolves against .ph-hero (the viewport), so on a 1920px monitor it asked
     for ~336px a side inside a 1500px card, squeezing the content to ~830px.
     Reading the shared --hero-inset token instead keeps content at
     --hero-content-cap and matches the product/cutout heroes exactly. */
  padding-inline: max(clamp(20px, 3.4vw, 56px), var(--hero-inset));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
}
.ph-hero__copy { flex: 1 1 auto; max-width: 40rem; }
.ph-hero__eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 18px;
  border-radius: 999px;
  /* The bright pink fails AA either way at this size — navy on it is 4.26:1 and
     white on it 4.18:1 — so the eyebrow uses the AA-safe ink shade with white,
     at 5.29:1. This is the documented --pp-ink rule for the too-light colour
     families (One's teal, Sync's sky, Parent's pink) applied here. */
  background: var(--ph-accent-ink, #116490);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ph-hero__frame h1 { margin: 0 0 16px; color: #fff; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.12; }
.ph-hero__copy > p {
  margin: 0 0 26px;
  max-width: 46ch;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
/* store badges in the hero (reuse the footer's dark-surface .fxb__store) */
.ph-hero__stores { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.ph-hero__stores .fxb__store { padding: 11px 22px 11px 16px; border-radius: 14px; }
.ph-hero__stores .fxb__store:hover { background: rgba(255, 255, 255, 0.16); }
.ph-hero__stores .fxb__store svg { width: 24px; height: 24px; }
.ph-hero__stores .fxb__store-big { font-size: 17px; }
.ph-hero__note { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.68); }
/* the app icon — glossy squircle on the right, with static
   "notification" pills clustered over it */
.ph-hero__badge { flex: none; position: relative; }
.ph-hero__badge img {
  display: block;
  width: clamp(230px, 31vw, 420px);
  height: auto;
  border-radius: 24%;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4);
}
/* notification pills */
.ph-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 250px;
  padding: 12px 17px 12px 13px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(15, 20, 56, 0.28);
  opacity: 0;
  z-index: 2;
  /* entrance only — the continuous bob was removed at Rebecca's request
     (27 Jul: "i dont want the pills to float either") */
  animation: ph-note-pop 560ms var(--hv2-ease) forwards;
}
.ph-note__ico {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  color: #fff;
}
.ph-note__ico svg { width: 20px; height: 20px; }
.ph-note__ico--accent  { background: var(--ph-accent, #1B88C8); }
.ph-note__ico--green { background: #2FA65A; }
.ph-note__ico--amber { background: #E8A317; }
.ph-note__txt { display: flex; flex-direction: column; line-height: 1.2; }
.ph-note__txt b { font-size: 15px; font-weight: 700; color: var(--ge-navy, #0F1438); }
.ph-note__txt i { font-size: 13px; font-style: normal; color: #4A5876; }
/* placement + staggered entrance around the icon */
/* Offsets are in PX, not %, and capped at 30px of leftward overhang. The gap
   between the copy column and this badge is only 43px at the 861px breakpoint
   where the pills are still shown, so percentage offsets of a 267-420px badge
   (the old -26%/-34%/-52%) reached 69-218px and sat on top of the hero text
   (Rebecca, 27 Jul: "the pills on the app icon in the hero is covering the
   hero text"). Px offsets hold that guarantee at every width. */
/* All three share ONE left edge and sit at even vertical intervals, so they
   read as a deliberate stack of notifications rather than three pills dropped
   at random (Rebecca, 27 Jul: "make this pills look intentional"). Before,
   each hung off by a different amount — -20px, -30px, -14px — which is what
   made the cluster look accidental. The third is anchored from the BOTTOM so
   it stays inside the icon at every icon size, while 1 and 2 are pinned from
   the top; at the full 420px icon the three gaps come out near-identical. */
.ph-note--1 { top: 6%;     left: -26px; animation-delay: 240ms; }
.ph-note--2 { top: 43%;    left: -26px; animation-delay: 460ms; }
.ph-note--3 { bottom: 6%;  left: -26px; animation-delay: 680ms; }
@keyframes ph-note-pop {
  0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ghost watermark — matches the product pages: big, crisp, bleeding off
   the top-right corner (no blur / soft-focus) */
.ph-hero__wm {
  position: absolute;
  z-index: 0;
  top: clamp(-140px, -9vw, -70px);
  right: clamp(-150px, -10vw, -80px);
  left: auto; bottom: auto;
  width: clamp(340px, 44vw, 680px);
  opacity: 0.10;
  pointer-events: none;
}
.ph-hero__wm img { width: 100%; height: auto; }
.ph-hero__frame > *:not(.ph-hero__wm) { position: relative; z-index: 1; }

/* ---------- what it does — benefits showcase ---------- */
.ph-benefits { background: #fff; padding: clamp(80px, 9vw, 140px) 0; }
.ph-ben__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(32px, 3.5vw, 52px);
}
.ph-ben {
  background: #fff;
  /* stroke -> soft shadow, 4 Aug brand review (one tile treatment sitewide) */
  border-radius: var(--tile-radius);
  padding: clamp(24px, 2.4vw, 32px);
  transition: transform 220ms var(--hv2-ease), box-shadow 220ms var(--hv2-ease);
}
.ph-ben:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(15, 20, 56, 0.12); }
.ph-ben__ico {
  width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--ph-accent-tint, #CBE8F8);
  color: var(--ph-accent-ink, #116490);
  margin-bottom: 15px;
  transition: transform 220ms var(--hv2-ease);
}
.ph-ben:hover .ph-ben__ico { transform: rotate(-8deg); }
.ph-ben__ico svg { width: 23px; height: 23px; }
.ph-ben h3 { margin: 0 0 8px; font-size: 17.5px; color: var(--ge-navy, #0F1438); }
.ph-ben p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #4A5876; }
.ph-ben__note { margin: clamp(28px, 3vw, 40px) 0 0; text-align: center; font-size: 15px; color: #4A5876; }
.ph-ben__note a { color: var(--ph-accent-ink, #116490); }

/* ---------- SET YOURSELF UP — big, visual, follow-along steps ---------- */
.ph-setup { background: var(--ph-accent-tint, #CBE8F8); padding: clamp(80px, 9vw, 140px) 0; }
.ph-setup .bandhead { text-align: center; }
.ph-setup .bandhead > * { margin-left: auto; margin-right: auto; }
.ph-setup__steps {
  list-style: none;
  margin: clamp(30px, 3.5vw, 50px) auto 0;
  padding: 0;
  max-width: 720px;
  position: relative;
}
/* the line that threads the steps together */
.ph-setup__steps::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 30px;
  bottom: 30px;
  width: 3px;
  background: rgba(27, 54, 126, 0.16);
  border-radius: 3px;
}
.ph-step { position: relative; display: flex; gap: clamp(16px, 2vw, 26px); align-items: flex-start; }
.ph-step + .ph-step { margin-top: clamp(16px, 1.8vw, 22px); }
.ph-step__num {
  position: relative;
  z-index: 1;
  flex: none;
  width: 58px; height: 58px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--ge-navy, #0F1438);
  color: #fff;
  font-size: 23px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(15, 20, 56, 0.22);
}
.ph-step__body {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px);
  box-shadow: 0 8px 24px rgba(15, 20, 56, 0.06);
}
.ph-step__ico {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--ph-accent-tint, #CBE8F8);
  color: var(--ph-accent-ink, #116490);
  margin-bottom: 13px;
}
.ph-step__ico svg { width: 22px; height: 22px; }
.ph-step__body h3 { margin: 0 0 7px; font-size: clamp(18px, 1.5vw, 21px); color: var(--ge-navy, #0F1438); }
.ph-step__body p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4A5876; }
.ph-step__body strong { color: var(--ge-navy, #0F1438); font-weight: 700; }
.ph-step__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ph-step__stores .fxb__store { background: var(--ge-navy, #0F1438); border-color: var(--ge-navy, #0F1438); padding: 9px 18px 9px 13px; border-radius: 12px; }
.ph-step__stores .fxb__store:hover { background: var(--ph-accent-ink, #116490); }
/* the happy ending */
.ph-setup__done {
  display: flex; align-items: center; gap: 15px;
  max-width: 720px;
  margin: clamp(18px, 2.2vw, 28px) auto 0;
  padding: clamp(18px, 2vw, 24px) clamp(22px, 2.4vw, 30px);
  background: var(--ge-navy, #0F1438);
  color: #fff;
  border-radius: 20px;
}
.ph-setup__done-ico { flex: none; width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; background: #2FA65A; color: #fff; }
.ph-setup__done-ico svg { width: 24px; height: 24px; }
.ph-setup__done p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.ph-setup__done strong { display: block; font-size: 17px; color: #fff; }

/* ---------- everyday how-tos (see messages / pay / shop / activities) ---------- */
.ph-guide { background: var(--ge-bg-light, #F3F7FA); padding: clamp(80px, 9vw, 140px) 0; }
.ph-guide__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(32px, 3.5vw, 52px);
}
.ph-guide-card {
  background: #fff;
  border: 1px solid #E6ECF4;
  border-radius: 24px;
  padding: clamp(26px, 2.8vw, 36px);
  box-shadow: 0 8px 24px rgba(15, 20, 56, 0.05);
}
.ph-guide-card__head { display: flex; align-items: center; gap: 15px; margin-bottom: clamp(18px, 2.2vw, 24px); }
.ph-guide-card__ico {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--ph-accent-tint, #CBE8F8);
  color: var(--ph-accent-ink, #116490);
}
.ph-guide-card__ico svg { width: 26px; height: 26px; }
.ph-guide-card__head h3 { margin: 0; font-size: clamp(20px, 1.7vw, 23px); color: var(--ge-navy, #0F1438); }
.ph-guide__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ph-guide__steps li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.5; color: #4A5876; }
.ph-guide__n {
  flex: none; width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--ge-navy, #0F1438); color: #fff;
  font-size: 14px; font-weight: 800; margin-top: 1px;
}
.ph-guide__steps strong { color: var(--ge-navy, #0F1438); font-weight: 700; }

/* ---------- FAQ accordion ---------- */
.ph-faq { background: #fff; padding: clamp(80px, 9vw, 140px) 0; }
.ph-faq .bandhead { text-align: center; }
.ph-faq .bandhead > * { margin-left: auto; margin-right: auto; }
.ph-acc { max-width: 860px; margin: clamp(44px, 5vw, 76px) auto 0; }
.ph-acc__item { border-bottom: 1px solid #E6ECF4; }
.ph-acc__item:last-child { border-bottom: none; }
.ph-acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  color: var(--ge-navy, #0F1438);
}
.ph-acc__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(27, 136, 200, 0.45); border-radius: 8px; }
.ph-acc__num {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--ph-accent-tint, #CBE8F8);
  color: var(--ph-accent-ink, #116490);
  font-size: 13.5px;
  font-weight: 700;
}
.ph-faq .ph-acc__num { background: var(--ph-accent-tint, #CBE8F8); }
.ph-acc__plus { flex: none; margin-left: auto; width: 18px; height: 18px; color: var(--ph-accent-ink, #116490); transition: transform 250ms var(--hv2-ease); }
.ph-acc__item.is-open .ph-acc__plus { transform: rotate(45deg); }
.ph-acc__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms var(--hv2-ease);
}
.ph-acc__item.is-open .ph-acc__body { max-height: 260px; }
.ph-acc__body p { margin: 0; padding: 0 4px 20px 44px; font-size: 15.5px; line-height: 1.6; color: #4A5876; max-width: 68ch; }
.ph-acc__body a { color: var(--ph-accent-ink, #116490); }

/* the language question opens taller (it holds the full flag list) */
.ph-acc__item--langs.is-open .ph-acc__body { max-height: 1200px; }
.ph-langs {
  list-style: none;
  margin: 4px 4px 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px 18px;
}
.ph-langs li { display: flex; align-items: center; gap: 11px; }
.ph-langs img {
  flex: none; width: 30px; height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(15, 20, 56, 0.12);
  box-shadow: 0 1px 2px rgba(15, 20, 56, 0.12);
  object-fit: cover;
}
.ph-langs b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--ge-navy, #0F1438); }
.ph-langs i { display: block; font-style: normal; font-size: 12.5px; line-height: 1.25; color: #4A5876; }
.ph-acc__body .ph-langs__req { margin-top: 16px; }
.ph-langs__req a { font-weight: 700; text-decoration: underline; }

/* ---------- "look for this icon" callout in setup step 1 ---------- */
.ph-step__look {
  display: flex; align-items: center; gap: 14px;
  margin: 16px 0;
  padding: 12px 14px;
  background: var(--ph-accent-tint, #CBE8F8);
  border-radius: 14px;
}
.ph-step__appicon {
  flex: none; width: 54px; height: 54px;
  border-radius: 24%;
  box-shadow: 0 4px 12px rgba(15, 20, 56, 0.16);
}
.ph-step__look span { font-size: 14.5px; line-height: 1.45; color: #4A5876; }
.ph-step__look strong { color: var(--ge-navy, #0F1438); font-weight: 700; }

/* ---------- the site "handshake" micro-tilt on every icon tile ----------
   Benefits cards already tilt (.ph-ben); these give the same 220ms
   rotate to the setup steps, everyday how-tos, done strips, hero app
   icon and the step-1 "look for this icon" callout. */
/* the hero app icon deliberately does NOT tilt — Rebecca, 27 Jul: "remove the
   animation on the icon". It is the page's main visual, not a small accent. */

/* ---------- support form ---------- */
/* Trimmed 3 Aug ("the parent help centre form looks massive"): a support form
   is the last resort at the foot of a help page, not a hero. Band padding, card
   width, card padding, heading size and the textarea all came down a step. */
/* ⚠ THE SUPPORT SECTION IS ONE TILE — three goes to get here, so read this before
   changing it again.
     10 Aug — "the still stuck? header is far away": I closed the vertical gap.
     11 Aug — "im still not happy with the contact form layout": the real fault was
       ALIGNMENT (a left-aligned heading beside a centred card), so it became two
       columns, heading left and form right.
     11 Aug — "can we make the still stuck section apart of the form tile so its all
       contained": the heading moved INSIDE the card and the columns came out.
   The old .bandhead is now .ph-support__head, a CHILD of .ph-support__card, styled
   at the foot of this file.
   ⚠ Do not re-add a grid on the container — it has one child now, and .bandhead no
   longer exists anywhere in this section. */

.ph-support__card {
  max-width: 760px;
  margin: clamp(22px, 2.4vw, 32px) auto 0;
  background: #fff;
  /* stroke -> soft shadow, 4 Aug brand review (one tile treatment sitewide) */
  border-radius: var(--tile-radius);
  box-shadow: var(--tile-shadow);
  padding: clamp(22px, 2.6vw, 34px);
  box-shadow: 0 8px 24px rgba(15, 20, 56, 0.08);
}
.ph-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.ph-form__field { display: flex; flex-direction: column; gap: 7px; }
.ph-form__field--full { grid-column: 1 / -1; }
.ph-form label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4A5876; }
.ph-form input, .ph-form textarea {
  font: inherit;
  font-size: 15.5px;
  color: var(--ge-navy, #0F1438);
  background: var(--ge-bg-light, #F3F7FA);
  border: 1px solid #E6ECF4;
  border-radius: 12px;
  padding: 13px 15px;
}
.ph-form textarea { min-height: 104px; resize: vertical; }
.ph-form input:focus-visible, .ph-form textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(27, 136, 200, 0.45); border-color: var(--ph-accent, #1B88C8); }
.ph-form input.ph-invalid, .ph-form textarea.ph-invalid { border-color: #D64545; }
.ph-form__err { display: none; font-size: 13px; color: #B03030; text-transform: none; letter-spacing: 0; font-weight: 400; }
.ph-form__field.ph-show-err .ph-form__err { display: block; }
.ph-form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 4px; }
.ph-form__note { margin: 0; font-size: 14px; color: #4A5876; }
.ph-form__note a { color: var(--ph-accent-ink, #116490); }
/* sent state — form is replaced by the confirmation */
.ph-support__done { display: none; text-align: center; padding: clamp(18px, 3vw, 36px) 0; }
.ph-support__done h3 { margin: 14px 0 8px; }
.ph-support__done p { margin: 0 auto; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: #4A5876; }
.ph-support__done-ico {
  width: 52px; height: 52px; margin: 0 auto;
  border-radius: 999px;
  display: grid; place-items: center;
  background: #F3FAEE;
  color: #2FA65A;
}
.ph-support__done-ico svg { width: 26px; height: 26px; }
.ph-support__card.is-sent .ph-form { display: none; }
.ph-support__card.is-sent .ph-support__done { display: block; }
/* pink send button (page leads pink; the global .btn is sky) */
/* .btn is a bare base class — it sets shape and padding but no colour, so the
   text was inheriting (rendering near-black on the accent). Set explicitly. */
/* ⚠ RE-SCOPED 11 Aug 2026 to .ph-support--footer. These were `.ph-support .btn`,
   but that SECTION no longer exists — the card moved into the footer — so the
   submit button silently lost its teal and rendered as a pale ghost pill. */
.ph-support--footer .btn { background: var(--ph-accent-ink, #116490); color: #fff; }
.ph-support--footer .btn:hover { background: #005F58; color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .ph-ben__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ph-hero__frame { flex-direction: column-reverse; align-items: flex-start; text-align: left; }
  .ph-hero__badge img { width: clamp(160px, 44vw, 220px); }
  .ph-note { display: none; }   /* pills are a desktop flourish — hide when the icon centres on top */
  .ph-form { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ph-guide__grid { grid-template-columns: 1fr; }
  .ph-langs { grid-template-columns: 1fr 1fr; margin-left: 4px; }
  .ph-acc__item--langs.is-open .ph-acc__body { max-height: 1600px; }
}
@media (max-width: 560px) {
  .ph-ben__grid { grid-template-columns: 1fr; }
  .ph-langs { grid-template-columns: 1fr; }
  .ph-acc__item--langs.is-open .ph-acc__body { max-height: 2200px; }
  .ph-step__look { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-acc__plus, .ph-acc__body { transition: none; }
  .ph-note { animation: none; opacity: 1; }   /* entrance only; there is no idle motion to disable */
}

/* ============================================================
 * HELP HEADER + SEARCH + TOPIC TILES (3 Aug 2026)
 * Replaced the navy marketing hero: "this page doesnt need to go into
 * the features of the product. it needs to be styled like a help
 * centre". A help centre opens with a question and a search box, not a
 * headline and a pair of store badges — so the type is deliberately
 * smaller than every other h1 on the site, and there is no photo, no
 * app icon and no floating notification cards.
 * The old .ph-hero* and .ph-benefits/.ph-ben* rules are left below,
 * unused, in case either band is ever wanted back.
 * ============================================================ */
/* Off-white, NOT the sky tint it started as: .ph-setup below is already sky
   tint, so the two ran together into one enormous pale block and broke the
   site's "no two adjacent sections share a background" rule. Off-white also
   lets the white search box and topic tiles read as raised. */
.ph-help {
  background: var(--ge-bg-light, #F3F7FA);
  padding: clamp(44px, 5.5vw, 84px) 0 clamp(40px, 5vw, 68px);
}
.ph-help__eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-accent-ink, #116490);
}
/* Smaller than the site's other h1s ON PURPOSE — a support page shouldn't
   shout, and the search box is the thing you want the eye to land on. */
.ph-help h1 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ge-navy, #0F1438);
}
.ph-help__lede {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ge-text-secondary, #4A5876);
}

/* ---------- search ---------- */
.ph-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  padding: 6px 8px 6px 16px;
  background: #fff;
  border: 1px solid #E6ECF4;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(15, 20, 56, 0.08);
}
/* No ring on a mouse click ("we dont need a stroke on the search bar when its
   clicked") — but :focus-visible keeps it for KEYBOARD focus, because a keyboard
   user with no visible focus can't tell where they are, and the design rules
   require a focus ring on every interactive element. Clicking shows nothing;
   tabbing still shows the ring. */
.ph-search:has(:focus-visible) { box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45); }
.ph-search__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ph-search__ico { flex: none; display: grid; place-items: center; color: var(--ph-accent-ink, #116490); }
.ph-search__ico svg { width: 20px; height: 20px; }
.ph-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 12px 0;
  font: inherit;
  font-size: 16px;              /* 16px min or iOS zooms the page on focus */
  color: var(--ge-navy, #0F1438);
}
.ph-search__input:focus { outline: none; }
.ph-search__input::-webkit-search-cancel-button { display: none; }  /* we ship our own */
.ph-search__clear {
  flex: none;
  width: 40px; height: 40px;    /* 40 inside a 52px row keeps the 44px hit area */
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--ge-bg-light, #F3F7FA);
  color: var(--ge-text-secondary, #4A5876);
  cursor: pointer;
}
.ph-search__clear:hover { background: #E6ECF4; color: var(--ge-navy, #0F1438); }
.ph-search__clear svg { width: 16px; height: 16px; }
.ph-search__count {
  margin: 14px 0 0;
  min-height: 1.5em;            /* reserve the line so nothing jumps as you type */
  font-size: 15px;
  line-height: 1.5;
  color: var(--ge-text-secondary, #4A5876);
}

/* The .ph-topics jump tiles were deleted 3 Aug — the category tiles in the
   hub below replaced them and said the same four things. */

/* While a search is running, drop the big band paddings so results sit close
   together instead of being spread over three screens of empty section. */
.ph-searching .ph-guide,
.ph-searching .ph-faq { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.ph-searching .ph-guide .bandhead p,
.ph-searching .ph-faq .bandhead p { display: none; }
/* [hidden] must win over the components' own display rules */
.ph-guide-card[hidden], .ph-acc__item[hidden], .ph-step[hidden], section[hidden] { display: none !important; }
/* the setup band centres its heading and holds a "you're all set" card that
   makes no sense mid-search, so both go while filtering */
.ph-searching .ph-setup { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.ph-searching .ph-setup .bandhead p,
.ph-searching .ph-setup__done { display: none; }

/* ============================================================
 * HELP HUB — category tiles, guide grid, guide detail (3 Aug 2026)
 * Built to the "Support UI" layout Rebecca sent: centred header and
 * search, a small uppercase label, three category tiles, then a grid
 * of guide tiles with a count label above it.
 * Her amendment: tiles must not open new pages. So a guide opens in
 * place — .ph-grid is hidden and one .ph-panel takes its spot.
 * NO STROKES on any tile: she removed tile borders site-wide the same
 * evening, so the selected category is a tinted FILL and the guide
 * tiles are white with the standard soft card shadow. The reference
 * outlines its selected tile; we don't.
 * ============================================================ */

/* ---------- the header, as a HERO TILE ----------
   Same card size as the home page's hero, by reading the shared tokens rather
   than repeating numbers: --hero-frame-w (capped 1500px, centred, with the
   --hero-gutter either side) and --hero-h (the one height every hero on the
   site uses). Content centres inside it, matching the "Support UI" reference
   Rebecca sent. Deep sky ink, not the bright sky: white text has to sit on it
   and the bright tone fails AA. */
.ph-help { background: transparent; padding: clamp(10px, 1.4vw, 18px) 0 clamp(36px, 4.5vw, 60px); }
.ph-help__frame {
  position: relative;
  /* NOT overflow:hidden — that clipped the search suggestions at the tile's
     bottom edge. The watermark does its own clipping instead (below). */
  overflow: visible;
  width: var(--hero-frame-w);
  margin-inline: auto;
  /* HALF the shared hero height (3 Aug: "i think we can half the height of the
     hero"). Written as a division of the token, not a fresh number, so it stays
     exactly half if --hero-h ever moves. A help page's header only has to carry
     one question and a search box — the full 648px was mostly empty. */
  min-height: calc(var(--hero-h) / 2);
  border-radius: clamp(20px, 2.5vw, 34px);
  background: var(--ph-accent-ink, #116490);
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding comes down with the height, or the content would push the tile
     back past the new minimum and the halving would do nothing */
  padding: clamp(20px, 2.4vw, 34px) clamp(20px, 3vw, 48px);
  text-align: center;
}
/* MASSIVE watermark, as asked — the site's standard hero ghost is 11% wide in a
   corner; this is 62% and bleeds off two edges. Stays at 10% white so it never
   competes with the search box. */
/* the watermark is its own clipping layer, so the tile can let a dropdown
   overflow while the mark still stops at the rounded corners */
.ph-help__wm {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  /* ⚠ 0.11 — THE ONE VALUE FOR HERO MARKS ON A DARK BACKGROUND (7 Aug 2026).
     "make sure that all watermark icons in heros are the same opacity across the
     site." There were five values: 0.035, 0.065, 0.10, 0.11 and 0.20.
     They are now TWO, not one, and that is deliberate — see the pale-background
     note. On navy/teal/product colour the mark is a pale glyph on a dark field
     and 0.11 is the site's long-standing value. */
  opacity: 0.11;
  pointer-events: none;
}
.ph-help__wm img {
  position: absolute;
  right: -7%;
  /* the tile is half as tall now, so a mark hung 30% below its foot lost most of
     itself off-canvas — pulled back up and in a little */
  bottom: -46%;
  width: 46%;
  height: auto;
  display: block;
}
.ph-help__inner { position: relative; z-index: 1; width: 100%; max-width: 720px; }
.ph-help__eyebrow { color: rgba(255, 255, 255, 0.75); }
.ph-help h1 { color: #fff; }
.ph-help__lede { margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, 0.85); }
.ph-search { margin-left: auto; margin-right: auto; border-color: transparent; }
.ph-search__input { text-align: left; }
.ph-search__count { color: rgba(255, 255, 255, 0.8); }

/* White, at her request ("lets just have white as the background on the help
   centre") — the hub was the warm off-white. The hero tile keeps its deep sky,
   which is now the only colour block on the page. */
.ph-hub { background: #fff; padding: clamp(8px, 1vw, 16px) 0 clamp(80px, 9vw, 130px); }
.ph-hub__label {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ge-text-secondary, #4A5876);
}
.ph-hub__label--count { margin-top: clamp(34px, 4vw, 54px); }

/* ⚠ body.hv2 IS LOAD-BEARING — 10 Aug 2026. Rebecca: "the section headers dont
   need to be so big on the parent help centre page".
   These labels are 12.5px uppercase eyebrows, but on 6 Aug the accessibility
   audit changed them from <p> to <h2> (SC 1.3.1 — a section needs a real
   heading). `.hv2 h2 { font-size: clamp(32px,4vw,54px) }` is (0,1,1) and
   `.ph-hub__label` is only (0,1,0), so from that moment the eyebrow silently
   rendered at up to 54px. body.hv2 takes it to (0,2,1) and the eyebrow wins.
   Same trap as the .ab2-jobs__h one — a bare class never beats `.hv2 h2`. */
body.hv2 .ph-hub__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

/* ---------- category tiles ---------- */
.ph-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.ph-cat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--tile-radius);   /* was 18px */
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 20, 56, 0.08);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 200ms var(--hv2-ease), box-shadow 200ms var(--hv2-ease),
    transform 200ms var(--hv2-ease);
}
.ph-cat:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 20, 56, 0.12); }
.ph-cat:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45); }
/* selected = tinted fill, no outline */
.ph-cat.is-on { background: var(--ph-accent-tint, #CBE8F8); box-shadow: none; }
.ph-cat.is-on .ph-cat__ico { background: #fff; }
/* while a search is running the categories aren't doing the filtering */
.ph-cat.is-muted { opacity: 0.55; }
.ph-cat__ico {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ph-accent-tint, #CBE8F8);
  color: var(--ph-accent-ink, #116490);
}
.ph-cat__ico svg { width: 20px; height: 20px; }
.ph-cat__txt { min-width: 0; }
.ph-cat__txt b { display: block; font-size: 16px; font-weight: 600; color: var(--ge-navy, #0F1438); }
.ph-cat__txt small { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ge-text-secondary, #4A5876); }
.ph-cat__count {
  flex: none;
  margin-left: auto;
  align-self: center;
  min-width: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ge-bg-light, #F3F7FA);
  color: var(--ph-accent-ink, #116490);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.ph-cat.is-on .ph-cat__count { background: #fff; }

/* ---------- the guides: an accordion, not tiles ----------
   She chose an accordion over both earlier attempts ("i like accordian designs
   that grow to show the answer"), so this reuses the site's EXISTING .ph-acc
   component — same row hairline, same rotating plus, same type — with one
   modifier. The modifier swaps its max-height animation for a [hidden] toggle:
   the old rule capped an open row at 260px, which was fine for a one-paragraph
   FAQ answer but clips these guides (numbered steps, the app-icon note, store
   badges, the 20-language list). [hidden] also keeps a collapsed answer
   reachable by find-in-page and screen readers, which a clipped box isn't. */
.ph-acc--guides { max-width: 860px; margin: 0 auto; }
.ph-acc--guides .ph-acc__item[hidden] { display: none; }
/* Specificity matters here: the base component's open rule is
   `.ph-acc__item.is-open .ph-acc__body { max-height: 260px }` (0,3,0), so a
   plainer override lost and the 21-language answer was clipped at 260px of its
   real 429px (measured). Both states are therefore written at the same weight. */
.ph-acc--guides .ph-acc__item .ph-acc__body,
.ph-acc--guides .ph-acc__item.is-open .ph-acc__body {
  max-height: none;
  overflow: visible;
  transition: none;
}
.ph-acc--guides .ph-acc__body[hidden] { display: none; }
/* the old body padding-left of 44px cleared the numbered chip; these rows have
   no number, so the answer lines up with its own question instead */
.ph-acc--guides .ph-acc__inner { padding: 0 4px 24px; }
.ph-acc--guides .ph-acc__inner > p { margin: 0 0 14px; padding: 0; font-size: 15.5px; line-height: 1.65; color: var(--ge-text-secondary, #4A5876); max-width: 68ch; }
.ph-acc--guides .ph-acc__inner > p:last-child { margin-bottom: 0; }
.ph-acc--guides .ph-acc__inner .ph-guide__steps { margin: 0; }
.ph-acc--guides .ph-acc__inner .ph-step__look { margin-top: 16px; }
.ph-acc--guides .ph-acc__inner .ph-step__stores { margin-top: 16px; }
.ph-acc--guides .ph-acc__inner .ph-langs { margin-left: 0; }
/* :not(.fxb__store) is load-bearing — a blanket link colour here repainted the
   app store badges' own white text in the accent ink, giving 2.76:1 on their
   navy pill (measured). */
.ph-acc--guides .ph-acc__inner a:not(.fxb__store) { color: var(--ph-accent-ink, #116490); }
.ph-grid__empty { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ge-text-secondary, #4A5876); }

/* ---------- the question list in two columns (11 Aug 2026) ----------
   Rebecca: "The question list is a narrow centred column with wide empty margins
   on both sides and a big void underneath." Two faults, same as .ph-support had:

   1. WIDTH. The list was `max-width:860px; margin:0 auto` inside a ~1384px
      container, so a third of the band was empty and eight one-line questions
      ran down a narrow ribbon.
   2. ALIGNMENT. Because it was centred and the "COMMON QUESTIONS — 8 GUIDES"
      label above it is hung off the container's left edge, the label and the
      list it introduces did not share a left edge. Full width fixes both.

   Same two-column pattern as the product pages' .qa (styles/qa-blocks.css).

   ⚠ NO nth-child BORDER TRICKS HERE, unlike qa-blocks.css. That sheet drops the
   rule on the first two items via :nth-child(n+3). It can, because every .qa__item
   is always visible. These rows are FILTERED — switching category or searching sets
   `hidden` on the others — and :nth-child counts hidden elements, so any such rule
   would put dividers in the wrong places as soon as someone searched. Every row
   therefore keeps its own border-bottom, including the last, which reads as a
   closing rule under the bottom row.

   ⚠ align-items is left at the default `stretch` ON PURPOSE. With `start`, the two
   rows in a pair size independently and their bottom borders land at different
   heights — very obvious once one row is open. Stretch keeps each pair's borders
   on one line. */
@media (min-width: 900px) {
  body.hv2 .ph-acc--guides {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 4.5vw, 72px);
  }
  body.hv2 .ph-acc--guides .ph-acc__item,
  body.hv2 .ph-acc--guides .ph-acc__item:last-child {
    border-bottom: 1px solid #E6ECF4;
  }
}

@media (max-width: 720px) {
  .ph-cat__count { display: none; }   /* the count is nice-to-have, the label repeats it */
}

/* ---------- search suggestions dropdown (3 Aug) ----------
   "can we have it so when people type suggestions show in a dropdown". Sits
   under the search box inside the hero tile, so it needs its own stacking
   context and a solid white card — it overlaps the tile's watermark. */
.ph-search { position: relative; }
.ph-suggest {
  position: absolute;
  z-index: 5;
  /* hangs off the search bar's own bottom edge — .ph-search is the positioned
     ancestor, and the -6px pulls it over the bar's rounded shadow */
  top: calc(100% + 6px);
  left: -1px;
  right: -1px;
  /* a long list would run past the hero tile, which clips (overflow: hidden),
     so it scrolls inside itself instead */
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 54px rgba(15, 20, 56, 0.26);
  text-align: left;
}
.ph-suggest[hidden] { display: none; }
.ph-suggest li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.ph-suggest li.is-on, .ph-suggest li:hover { background: var(--ph-accent-tint, #CBE8F8); }
.ph-suggest__t { flex: 1; font-size: 15px; color: var(--ge-navy, #0F1438); }
.ph-suggest__t b { font-weight: 700; color: var(--ph-accent-ink, #116490); }
.ph-suggest__c { flex: none; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ge-text-secondary, #4A5876); }

/* the step rail inside the hub — it used to sit in its own band with a centred
   heading above it, so it only needs its top margin neutralised here */
.ph-steps--hub { margin-top: 0; }
.ph-steps--hub[hidden] { display: none; }
.ph-step[hidden] { display: none; }
/* a step has nothing to expand, so arriving from a suggestion flags it briefly */
.ph-step.is-flagged .ph-step__body { box-shadow: 0 0 0 3px var(--ph-accent, #1B88C8), 0 8px 24px rgba(15, 20, 56, 0.06); }
@media (prefers-reduced-motion: no-preference) {
  .ph-step__body { transition: box-shadow 300ms var(--hv2-ease); }
}

/* ============================================================
 * THE SETUP TIMELINE ADOPTS THE LAUNCH DEAL'S STEP STYLING  (11 Aug 2026)
 * Rebecca: "the timeline on setting up needs to follow the same styling as the
 * book a demo. that's it section on the launch deal page".
 *
 * That section is .steps / .step / .step__chip in home-v2.css. Two things made
 * this timeline look different: a big navy CIRCLE per step, and a thick solid
 * connector. Both now match the Launch Deal — a 44px rounded-square chip that
 * changes colour down the list, and a 2px dotted line.
 *
 * ⚠ These values are COPIED from .step__chip / .steps::before in home-v2.css
 *   (~line 2219). If that component changes, change this with it.
 * ⚠ The chip colour pairs are all contrast-checked in that file — the greens and
 *   yellows there carry hand-picked INK colours (#3D6B22, #7A5C00) precisely
 *   because the palette tokens measured 2.45:1 and were unreadable. Do not
 *   "simplify" them back to --ge-green-4 etc.
 * ============================================================ */
.ph-step__num {
  /* ⚠ 64px, NOT the Launch Deal's 44px. Rebecca asked for the Launch Deal styling
     and then "can we make these bigger" — so the SHAPE and COLOURS are borrowed
     and the SIZE is this page's own. The corner radius keeps the Launch Deal's
     ratio (14/44 ≈ 0.32) so it still reads as the same chip, just larger. */
  width: 64px;
  height: 64px;
  border-radius: 20px;              /* rounded square, not a circle */
  font-size: 21px;
  font-weight: 700;
  box-shadow: none;                 /* the Launch Deal chip has no drop shadow */
  background: var(--ge-blue-3, #D9F4FF);
  color: var(--ge-blue, #1B367E);
}
/* the colour walk down the list — steps 5 and 6 reuse pairs 1 and 2, since the
   Launch Deal only ever needed four */
.ph-step:nth-of-type(2) .ph-step__num { background: var(--ge-green-2, #E6F3D9); color: #3D6B22; }
.ph-step:nth-of-type(3) .ph-step__num { background: var(--ge-yellow-2, #F9EFD0); color: #7A5C00; }
.ph-step:nth-of-type(4) .ph-step__num { background: #ECE8FB; color: #4B3B9C; }
.ph-step:nth-of-type(5) .ph-step__num { background: var(--ge-blue-3, #D9F4FF); color: var(--ge-blue, #1B367E); }
.ph-step:nth-of-type(6) .ph-step__num { background: var(--ge-green-2, #E6F3D9); color: #3D6B22; }

/* ⚠ the connector has to move with the chip: it was centred on a 58px circle
   (left:28px), then briefly on a 44px one. At 64px it centres at 32px, less 1px
   for the 2px border. Same dotted treatment and colour as the Launch Deal. */
.ph-setup__steps::before {
  /* centred on the 64px chip: 32 - 1 for the 2px border */
  left: 31px;
  width: 0;                          /* was a 3px filled bar */
  background: none;
  border-left: 2px dotted #C9E9F8;
  border-radius: 0;
}

/* ---------- the support tile's own head (11 Aug 2026) ---------- */
/* The heading and intro now live INSIDE .ph-support__card. They keep the card's
   left edge rather than being centred, so the eye runs straight from the heading
   into the first field. */
.ph-support__head { margin-bottom: clamp(24px, 2.6vw, 34px); }
.ph-support__head h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  color: var(--ge-navy, #0F1438);
}
.ph-support__head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ge-text-secondary, #4A5876);
  max-width: 62ch;
}

/* ============================================================
 * THE SUPPORT FORM STRADDLES OUT OF THE FOOTER  (11 Aug 2026)
 * Rebecca: "could we sink the form into the footer like we have done before".
 *
 * "Before" is the contact band on the conversion pages (.cb--footer in
 * contact-band.css): the card is the footer's first element and a negative
 * margin-top lifts about half of it above the footer's top edge.
 *
 * ⚠ This BORROWS the straddle, it is not the .cb component. That form goes to
 *   enquiries@ with school/trust fields; this one goes to support@ and asks for
 *   the child's school. Keeping them separate is deliberate.
 *
 * ⚠ TWO HALVES, BOTH REQUIRED. The negative margin only looks right because the
 *   last section in <main> carries a big padding-bottom to leave room for the
 *   overhang — exactly how modular.css does it for `:has(.cb--footer)`. Remove
 *   one without the other and the card either collides with the guides above or
 *   leaves a hole.
 * ============================================================ */
/* ⚠ THE GAP AND THE STRADDLE PULL AGAINST EACH OTHER — read this before retuning.
   Rebecca wanted the card sunk into the footer AND "a decent gap" above it. Those
   two only coexist if there is WHITE SPACE between the module and the footer for
   the card to sit in.
     - First attempt gave the module a huge padding-bottom so the card could rise
       into it. But the module is PALE, so that room was a visible empty slab, and
       the card's top corner overlapped the pale ("its over lapping the module").
     - Now the module keeps its normal band padding (it hugs its own content again)
       and a MARGIN-BOTTOM opens white space beneath it. The card rises into that
       white gap, clears the module completely, and still crosses the footer edge.
   gap above the card = this margin − the card's overhang. Change one, re-measure.

   ⚠ THREE classes in the selector, not two. modular.css has
   `body.hv2 main > section:last-child.band--module { margin-bottom: var(--band-seam) }`
   at (0,3,3) — a doubled .ph-hub only reached (0,3,3) too, tied, and lost on load
   order, so this margin silently stayed 24px and the card kept overlapping. */
body.hv2 main > section.ph-hub.ph-hub.band--module { margin-bottom: clamp(150px, 13vw, 200px); }

.ph-support--footer { margin-bottom: clamp(48px, 6vw, 80px); }
.ph-support--footer .ph-support__card {
  /* roughly half the card sits above the footer's edge — the same clamp the
     contact band uses, so both straddles sit on one line site-wide */
  /* ⚠ SHALLOWER than the contact band's clamp(-290px,-21vw,-190px). The overhang
     and the module's padding-bottom move TOGETHER: the padding has to exceed the
     overhang or the card lands on top of the last guide, so a deep straddle forces
     a tall empty pale strip above it (Rebecca: "the module above is too big").
     ⚠ Change one and you must re-measure the other.
     ⚠ AND the footer's OWN padding-top (~136px) is eaten first, so the visible
     overhang is much smaller than this number: at -150px only 14px of the card
     actually cleared the footer edge. Overhang ≈ -(footerPaddingTop + this). */
  margin-top: clamp(-262px, -17vw, -180px);
  /* ⚠ FULL MODULE WIDTH — Rebecca: "i dont like the width of the contact form in
     the help centre. can we make it wide like the modules". The base rule caps the
     card at 760px and centres it; in the footer it should line up with the guides
     module above, so the cap comes off and the footer's own container sets the
     width. The form grid inside is already 2-column, so it fills the extra room. */
  max-width: none;
  margin-inline: 0;
  box-shadow: 0 26px 60px rgba(15, 20, 56, 0.35);
}
/* ⚠ the footer paints its own text white. Every piece of copy inside the card has
   to re-assert its colour or it disappears against the white tile — this is the
   exact bug .cb--footer documents for the contact band. */
.ph-support--footer .ph-support__head h2 { color: var(--ge-navy, #0F1438); }
.ph-support--footer .ph-support__head p,
.ph-support--footer .ph-form__note { color: var(--ge-text-secondary, #4A5876); }
.ph-support--footer .ph-form label { color: var(--ge-text-secondary, #4A5876); }
.ph-support--footer .ph-form input,
.ph-support--footer .ph-form textarea { color: var(--ge-navy, #0F1438); }
.ph-support--footer .ph-support__done h3 { color: var(--ge-navy, #0F1438); }
.ph-support--footer .ph-support__done p { color: var(--ge-text-secondary, #4A5876); }