/*
 * Site chrome: base reset, header, navigation, footer, accordions, focus.
 *
 * Hand-written, unlike tokens.css and v7.css which are generated. The
 * design tool exported page bodies but drove the header, the dropdowns and
 * the mobile menu from JavaScript, so there was no CSS to extract. Every
 * value below is taken from the source's inline styles; comments mark the
 * places the rebuild deliberately differs.
 */

/* ---- base ------------------------------------------------------------ */
/* Transcribed from the bundle's own global <style> block, which the page
   extracts did not carry. The earlier hand-written version drifted from it
   in three ways that affected every element without an explicit value:
   font-size 14.5px (source: 16px), line-height 1.5 (1.55) and body colour
   --v-ink (#2F3140) where the source uses #3F4250. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--v-white);
  font-family: var(--v-font-body);
  color: var(--v-ink-700);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The source zeroes these; without it anything that does not set its own
   margin inline picks up the user agent default instead. */
h1, h2, h3, h4, p, blockquote, ul { margin: 0; }

/* Headings inherit Open Sans from the body. The design sets no family
   on any heading; a previous version here applied Archivo, which the
   bundle loads but never uses. */
img, svg { max-width: 100%; }

/* :where(), so these carry ZERO specificity and any class beats them.
   The bundle set the same two rules globally and they never caused trouble,
   because every button there also carried an INLINE color, which outranks
   any stylesheet. Converting those inline styles to classes dropped them to
   (0,1,0), below `a:hover` at (0,1,1) — so on hover the header CTA turned
   #2F4BE0 text on a #2F4BE0 background and the label vanished. Six page
   link classes had the same fault. :where() restores the precedence the
   inline styles used to provide. */
:where(a) { color: var(--v-blue); cursor: pointer; text-decoration: none; }
:where(a:hover) { color: var(--v-blue-600); }

/* DELIBERATE DEPARTURE, WCAG 1.4.1. The design distinguishes inline links
   by colour alone, and #3D5AFE against the #3F4250 body colour is 1.94:1,
   under the 3:1 that colour-only differentiation requires. Links sitting
   inside running text get an underline. Standalone link rows are left
   alone: with no prose around them there is nothing to confuse them with,
   so position already distinguishes them. */
/* Scoped away from anything that is styled as a button: an underline under
   a solid-filled control is not the affordance this is meant to add. */
p a:not([class*="btn"]):not([class*="v-h"]) { text-decoration: underline; text-underline-offset: 2px; }
.v7-footer__policy a, .v7-nav a, .v7-mob a, .v7-footer__col a { text-decoration: none; }

/* WCAG 2.4.11. The sticky header is 80px plus the 33px banner, so an
   anchored or tab-focused element would otherwise land underneath it. */
html { scroll-padding-top: 124px; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--v-blue-400);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- continuity banner ---------------------------------------------- */
.v7-banner {
  background: var(--v-navy);
  color: var(--v-line-strong);
  font-size: 13px;
  padding: 8px 24px;
  text-align: center;
}

/* ---- header ---------------------------------------------------------- */
.v7-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(16px, 6vw, 100px);
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--v-line-100);
}
.v7-header__brand { display: block; flex-shrink: 0; }
.v7-header__brand img { height: 26px; width: auto; display: block; }

.v7-nav { display: flex; align-items: center; gap: 22px; font-size: 15px; height: 100%; }
.v7-nav__list {
  display: flex; align-items: center; gap: 22px;
  list-style: none; margin: 0; padding: 0; height: 100%;
}
.v7-nav__item { position: relative; height: 100%; display: flex; align-items: center; }
.v7-nav__top {
  color: var(--v-ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding: 6px 0 4px;
  white-space: nowrap;
}
.v7-nav__item:hover > .v7-nav__top,
.v7-nav__item.is-current > .v7-nav__top { color: var(--v-blue); border-bottom-color: var(--v-blue); }

.v7-nav__panel {
  position: absolute;
  top: 72px;
  left: -14px;
  min-width: 250px;
  background: var(--v-white);
  border: 1px solid var(--v-line);
  border-radius: 6px;
  box-shadow: 0 12px 32px var(--v-shadow-raised);
  padding: 6px;
  display: none;
}
/* :focus-within as well as :hover. The source opened these on mouseenter
   only, which left all five sections unreachable by keyboard. */
.v7-nav__item:hover > .v7-nav__panel,
.v7-nav__item:focus-within > .v7-nav__panel { display: block; }

.v7-nav__panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  color: var(--v-ink);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.v7-nav__panel a:hover, .v7-nav__panel a:focus-visible { background: var(--v-blue-50); }

.v7-btn {
  display: inline-block;
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 18px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.v7-btn--primary { background: var(--v-blue); color: var(--v-white); }
.v7-btn--primary:hover, .v7-btn--primary:focus-visible { background: var(--v-blue-600); }

/* ---- mobile menu ------------------------------------------------------ */
.v7-mob { display: none; }
.v7-mob__toggle {
  border: 1px solid var(--v-line);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--v-ink);
  cursor: pointer;
  list-style: none;
  /* 2.5.8: 44px tall including padding, comfortably over the 24px floor. */
}
.v7-mob__toggle::-webkit-details-marker { display: none; }
.v7-mob[open] .v7-mob__toggle { background: var(--v-blue-50); border-color: var(--v-blue); }

.v7-mob__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 80px;
  z-index: 39;
  background: var(--v-white);
  border-bottom: 1px solid var(--v-line-100);
  padding: 8px 16px 20px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.v7-mob__panel a {
  padding: 12px 0;
  color: var(--v-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--v-line-100);
}
.v7-mob__section {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v-gray);
}
.v7-mob__cta { margin-top: 14px; text-align: center; padding: 13px 18px; border-bottom: 0; }

@media (max-width: 1099px) {
  .v7-nav { display: none; }
  .v7-mob { display: block; }
  .v7-header { position: static; }
  html { scroll-padding-top: 24px; }
}

/* ---- FAQ accordions --------------------------------------------------- */
/* <details> replaces 27 div[role=button] toggles. The marker is drawn from
   the open state so the glyph cannot disagree with what is on screen. */
/* No padding or border here. The source already wraps every question in
   <div class="v-8b54ab">, which supplies `padding: 6px 0` and a
   border-bottom; repeating them on the <details> doubled both, adding 13px
   to all 27 rows and drawing the divider twice. */
.v-faq { margin: 0; }
.v-faq > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--v-ink);
  font-size: 16px;
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  list-style: none;
}
.v-faq > summary::-webkit-details-marker { display: none; }
.v-faq > summary::after {
  content: "+";
  color: var(--v-blue);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.v-faq[open] > summary::after { content: "\2212"; }
.v-faq__body > p { margin: 0; font-size: 15px; padding: 0 0 14px; max-width: 70ch; }

/* ---- footer ----------------------------------------------------------- */
.v7-footer {
  padding: 70px 0 36px;
  background: var(--v-footer);
  border-top: 1px solid var(--v-on-dark-10);
  font-size: 14px;
  color: var(--v-line-strong);
}
.v7-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 24px; }
.v7-footer__brand img { height: 30px; width: auto; display: block; margin-bottom: 10px; }
/* The source marks this up as <b style="display:block;color:#FFFFFF"> at
   body size. The 20px/800/0.06em treatment belongs to the data-logo
   wrapper around the logo image, and was applied here by mistake. */
.v7-footer__tag { display: block; font-weight: 700; color: var(--v-white); margin: 10px 0 0; }
.v7-footer__meta { margin: 6px 0 12px; color: var(--v-slate-300); }
.v7-footer__credhead {
  margin: 16px 0 8px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v-slate-300);
}
.v7-footer__creds { list-style: none; margin: 0; padding: 0; max-width: 340px; }
.v7-footer__creds li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--v-on-dark-12);
  font-size: 13.5px; font-weight: 600; color: var(--v-white); line-height: 1.35;
}
.v7-tick {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--v-blue-glow); color: var(--v-blue-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
/* No font-weight: the source sets none here, so it inherits the row's 600.
   Forcing 400 made this line lighter than the design. */
.v7-footer__sub { display: block; font-size: 12px; color: var(--v-slate-300); margin-top: 2px; }
/* The source marks these up as <h4>, so they inherit the user agent's bold.
   They are rendered here as <p> instead: four footer headings on every page
   would sit at h4 straight after the main content's h2s, and each column is
   already a <nav> with its own aria-label, which names it properly. The
   weight has to be restored explicitly because a <p> does not carry it. */
.v7-footer__colhead {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--v-blue-400);
}
.v7-footer__col a { color: var(--v-line-strong); text-decoration: none; display: block; margin-bottom: 8px; }
.v7-footer__col a:hover, .v7-footer__col a:focus-visible { color: var(--v-white); text-decoration: underline; }
/* One row, not two. The source puts the legal sentence and the policy
   links in a single flex container with justify-content: space-between. */
.v7-footer__legalrow {
  margin-top: 36px; padding-top: 16px;
  border-top: 1px solid var(--v-on-dark-10);
  font-size: 12.5px; color: var(--v-slate-300);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.v7-footer__legal, .v7-footer__policy { margin: 6px 0 12px; color: var(--v-slate-300); }
.v7-footer__policy { display: flex; gap: 18px; }
.v7-footer__policy a { color: var(--v-slate-300); }
.v7-footer__policy a:hover { color: var(--v-white); }

@media (max-width: 1099px) {
  .v7-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .v7-footer__top { grid-template-columns: 1fr; }
}

/* ---- legal pages ------------------------------------------------------ */
/* The v7 design has no privacy, terms or accessibility page, but its footer
   links to all three. They reuse the design's own page classes; only the
   list needs a rule, because no v7 page contains a plain bulleted list. */
.v-legal-list { margin: 14px 0 0; padding-left: 20px; max-width: 70ch; }
.v-legal-list li { margin: 0 0 6px; }

/* ---- hover contrast ---------------------------------------------------- */
/* DELIBERATE DEPARTURE, WCAG 1.4.3.
 *
 * The white primary CTA declares `color:#2F3140` with
 * `style-hover="background:#2F4BE0"` — only the background changes. Dark
 * ink on that blue is 1.96:1, against the 4.5:1 required, so the label is
 * close to unreadable for the whole time the pointer is on it. It is the
 * hero call to action on 19 pages.
 *
 * The text goes white on hover, which is what the design already does for
 * the blue variant of the same button and takes it to 6.55:1. Nothing
 * moves; only the label colour changes, and only while hovered or focused.
 *
 * Worth raising with the designer: the intent may have been for this
 * button to keep a light background on hover, in which case the fix
 * belongs in the design rather than here.
 */
.v-5cce60.v-h26111d:hover,
.v-5cce60.v-h26111d:focus-visible { color: var(--v-white); }

/* ---- contact form ------------------------------------------------------ */
/* The design supplies the field classes (v-4bb3bf, v-fb4f7b, v-aef394); only
   the states it never drew need rules: errors, the success panel, the
   honeypot and the submit button as a real <button>. */

.v-form-send {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  /* 2.5.8 target size: 44px tall, well over the 24px floor. */
  min-height: 44px;
  padding: 11px 18px;
}

.v-form-required { margin: 0 0 14px; font-size: 13px; color: var(--v-gray); }

/* Errors carry an icon-free text message, a border and a colour. Never
   colour alone (1.4.1): every error is also a sentence. */
.v-form-error {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--v-error);
}

.v-form-summary {
  border: 1px solid var(--v-error);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0 0 20px;
  background: var(--v-error-tint);
}
.v-form-summary p { margin: 0 0 6px; }
.v-form-summary ul { margin: 0; padding-left: 20px; }
.v-form-summary li { margin: 2px 0; }
.v-form-summary a { color: var(--v-error); }
.v-form-summary:focus-visible { outline: 3px solid var(--v-blue-400); outline-offset: 2px; }

.v-form-ok {
  border: 1px solid var(--v-green);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 16px 18px;
  background: var(--v-green-tint);
}
.v-form-ok p { margin: 0 0 6px; }
.v-form-ok p:last-child { margin: 0; }

.v-form-turnstile { margin: 4px 0 16px; }

/* The honeypot. Hidden from people without display:none, which some bots
   check for, and removed from the accessibility tree by aria-hidden plus
   tabindex="-1" on the input itself. */
.v-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}