/* === pattern-tokens:font-import:start (generated) === */
/*
   The Retro Warmth faces. A stack NAMES a family; it never
   fetches one - so without this the headings below render in
   the metric-matched fallback and look deliberate.

   A <link rel="stylesheet"> in the document head is faster:
   the browser finds it while parsing the head, where this is
   not discovered until global.css has itself arrived and been
   parsed - an extra round trip on the critical path. Write the
   <link> as well; this is the backstop that makes a forgotten
   one slow rather than wrong.

   Quoted, not a bare url() token: these URLs carry a semicolon
   inside the weight axis, and only a string ends where the URL
   ends.

   At the top of the file because @import is valid only before
   any other rule. Regenerated in place; edits here are lost. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Hanken+Grotesk:ital,wght@0,400..700;1,400..700&display=swap");
/* === pattern-tokens:font-import:end === */

/* Genuine Singles -- site stylesheet. Seeded by page_brief.py --seed; the palette
   below was derived from the logo's inks and is a starting point to correct,
   never a decision already made. Everything else on this site builds on it. */

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

/* ---- tokens ---- */
:root {
  --color-bg: #fbf8f3;
  --color-surface: #ffffff;
  --color-surface-soft: #eaf7f5;
  --color-text: #22223a;
  --color-text-soft: #5a5a72;
  --color-heading: #14142b;
  --color-primary: #16786e;
  --color-primary-dark: #0f5a52;
  --color-scrim: #14142b;
  --color-rule: #e9e2d6;
  --color-focus: #d96c0e;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;
  --container-max: 75rem;

  /* The dials are the brand's character: decide them, do not keep them. */
  --btn-radius: 8px;
  --card-radius: 16px;
  --card-shadow: 0 10px 30px rgba(20, 20, 43, .08);
  --card-border: 1px solid var(--color-rule);
  --chip-radius: 999px;
  --logo-height: 48px;

  --transition-fast: 120ms ease;
  --transition-slow: 320ms ease;

  --type-scale: 1;
}

/* ---- base type ---- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-display, 700);
  color: var(--color-heading);
  line-height: calc(1.15 * var(--heading-leading, 1));
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
}

a { color: var(--color-primary); }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === pattern-tokens:start (generated - edit outside these markers) === */
/*
   Role tokens the design patterns require. A var() this
   sheet does not define is discarded at compute time, so
   the rule is lost rather than falling back to anything.
   Regenerated in place; anything you add here is replaced.
*/
/* Metric-matched fallback for Fraunces, on the heading. Arial,
   resized to match Fraunces, so the line boxes are already the size
   they will be once the webfont arrives and the page does not reflow
   under the reader when it does.

   One face PER WEIGHT. A real face gets wider at 700; a local one
   thickened synthetically does not, so a single face solved at 400
   leaves anything set at 700 too narrow and this block causes the
   shift it exists to stop. The descriptor is what picks the right
   solved number instead of synthesising a bold from the 400 face.

   The local() chain is ordered. The numbers are solved against Arial
   specifically, so a stand-in is a degradation rather than a match -
   but Linux and Android have no Arial, and there a face with nothing
   to load defines no family at all and the stack falls through in
   silence, which measured 34.7% off.

   BESIDE the :root rule, never inside it: an at-rule in a declaration
   block is dropped by the parser, and the stack would have survived
   naming a family nothing defines. */
@font-face {
  font-family: 'FrauncesFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 400;
  size-adjust: 98.5%;
  ascent-override: 97.8%;
  descent-override: 25.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'FrauncesFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 700;
  size-adjust: 105.6%;
  ascent-override: 97.8%;
  descent-override: 25.5%;
  line-gap-override: 0%;
}

/* Metric-matched fallback for Hanken Grotesk, on the body. Arial,
   resized to match Hanken Grotesk, so the line boxes are already the size
   they will be once the webfont arrives and the page does not reflow
   under the reader when it does.

   One face PER WEIGHT. A real face gets wider at 700; a local one
   thickened synthetically does not, so a single face solved at 400
   leaves anything set at 700 too narrow and this block causes the
   shift it exists to stop. The descriptor is what picks the right
   solved number instead of synthesising a bold from the 400 face.

   The local() chain is ordered. The numbers are solved against Arial
   specifically, so a stand-in is a degradation rather than a match -
   but Linux and Android have no Arial, and there a face with nothing
   to load defines no family at all and the stack falls through in
   silence, which measured 34.7% off.

   BESIDE the :root rule, never inside it: an at-rule in a declaration
   block is dropped by the parser, and the stack would have survived
   naming a family nothing defines. */
@font-face {
  font-family: 'HankenGroteskFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 400;
  size-adjust: 100.8%;
  ascent-override: 100%;
  descent-override: 30.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'HankenGroteskFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 700;
  size-adjust: 102.5%;
  ascent-override: 100%;
  descent-override: 30.3%;
  line-gap-override: 0%;
}

:root {
  /* Inks. The ratios are measured, not intended. */
  /* on this brand's own --color-scrim: 18.03:1 */
  --color-on-scrim: #ffffff;
  /* white 5.32:1, the brand's own text 2.91:1 on --color-primary */
  --color-on-primary: #ffffff;

  /* Type: the Retro Warmth pairing. Chosen, not derived. */
  --font-heading: 'Fraunces', 'FrauncesFallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', 'HankenGroteskFallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --heading-leading: 1.08;
  --heading-tracking: -0.01;
}
/* === pattern-tokens:end === */

/* === pattern masthead-nav@14 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* masthead-nav - tokens only, selectors prefixed. The menu inside
   .masthead-nav-links is styled by structure - ul, li, a - so the list the
   platform generates for {{menu.navigation}} and a list written by hand take
   the same rules. */
.masthead-nav {
  overflow-wrap: var(--long-words, break-word);
}
.masthead-nav :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .masthead-nav {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}

/* Each ground names its own inks, and every rule below reads the pair rather
   than a token, so nothing here knows which ground it is on. */
.masthead-nav--plain {
  --masthead-nav-ground: var(--color-bg);
  --masthead-nav-ink: var(--color-text);
  --masthead-nav-edge: var(--color-rule);
  --masthead-nav-cta-face: var(--color-primary);
  --masthead-nav-cta-ink: var(--color-on-primary);
  --masthead-nav-panel-face: var(--color-surface);
  --masthead-nav-panel-ink: var(--color-text);
  --masthead-nav-ring: var(--color-focus);
}
.masthead-nav--soft {
  --masthead-nav-ground: var(--color-surface-soft);
  --masthead-nav-ink: var(--color-text);
  --masthead-nav-edge: var(--color-rule);
  --masthead-nav-cta-face: var(--color-primary);
  --masthead-nav-cta-ink: var(--color-on-primary);
  --masthead-nav-panel-face: var(--color-surface);
  --masthead-nav-panel-ink: var(--color-text);
  --masthead-nav-ring: var(--color-focus);
}
.masthead-nav--brand {
  --masthead-nav-ground: var(--color-primary);
  --masthead-nav-ink: var(--color-on-primary);
  --masthead-nav-edge: color-mix(in srgb, var(--color-on-primary) 35%, transparent);
  --masthead-nav-cta-face: var(--color-on-primary);
  --masthead-nav-cta-ink: var(--color-primary);
  --masthead-nav-panel-face: var(--color-primary);
  --masthead-nav-panel-ink: var(--color-on-primary);
  --masthead-nav-ring: var(--color-on-primary);
}

/* ---- the bar ---- */
/* One number for every tap target here, and for the room the drawer keeps.
   Clipped sideways, never scrolled: a faded submenu is laid out where it
   will open, and one past the edge would otherwise widen the page. */
.masthead-nav {
  --masthead-nav-tap: 2.75rem;
  background: var(--masthead-nav-ground);
  color: var(--masthead-nav-ink);
  border-block-end: 1px solid var(--masthead-nav-edge);
  overflow-x: clip;
}
/* edge: every rung keeps the 1px border and changes only what paints it, so
   the bar is the same height on all three and --page-header-height holds. */
.masthead-nav--rule {
  border-block-end-color: var(--masthead-nav-edge);
}
.masthead-nav--shadow {
  border-block-end-color: transparent;
  box-shadow: var(--card-shadow);
}
.masthead-nav--flush {
  border-block-end-color: transparent;
}
.masthead-nav--static {
  position: static;
}
/* The z-index orders the drawer's scrim, panel and button against each other
   rather than against the page. `sticky` is no containing block for a fixed
   child, so the drawer still pins to the viewport. */
.masthead-nav--pinned,
.masthead-nav--compact {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
}
/* The containing block for the small-screen menu and for the controls when
   they are parked in the corner on --centred. */
.masthead-nav-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
}
.masthead-nav-mark {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-end: auto;
}
/* The set height is the floor: `height: auto` under a `max-height` alone
   resolves a viewBox-only SVG to 0x0. object-fit stops the cap distorting it. */
.masthead-nav-logo {
  display: block;
  width: auto;
  height: var(--logo-height, 2.75rem);
  max-width: 100%;
  object-fit: contain;
}
/* mark: how the brand mark meets the ground behind it. */
.masthead-nav--direct .masthead-nav-mark {
  padding: 0;
}
.masthead-nav--plate .masthead-nav-mark {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--card-radius);
  background: var(--color-bg);
}
.masthead-nav--mono .masthead-nav-logo {
  filter: brightness(0) invert(1);
}

/* ---- the small-screen disclosure ---- */
.masthead-nav-disclosure {
  flex: 0 0 auto;
}
.masthead-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--masthead-nav-tap);
  padding-inline: var(--space-3);
  border: 1px solid var(--masthead-nav-edge);
  border-radius: var(--btn-radius);
  color: var(--masthead-nav-ink);
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  cursor: pointer;
  /* Both lines are needed to drop the default triangle. */
  list-style: none;
}
.masthead-nav-toggle::-webkit-details-marker {
  display: none;
}
/* Three bars: the element is the middle one, the pseudo-elements the others.
   The fold into a cross is a state change, so reduced motion keeps it. */
.masthead-nav-toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: var(--masthead-nav-bar-width, 1rem);
  height: var(--masthead-nav-bar, 2px);
  background: currentColor;
}
.masthead-nav-toggle-icon::before,
.masthead-nav-toggle-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: var(--masthead-nav-bar, 2px);
  background: currentColor;
}
.masthead-nav-toggle-icon::before {
  top: calc(-1 * var(--masthead-nav-bar-gap, 5px));
}
.masthead-nav-toggle-icon::after {
  top: var(--masthead-nav-bar-gap, 5px);
}
.masthead-nav-disclosure[open] .masthead-nav-toggle-icon {
  background: transparent;
}
.masthead-nav-disclosure[open] .masthead-nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.masthead-nav-disclosure[open] .masthead-nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}
/* burger: how the bars are drawn. Every rung folds into the same cross. */
.masthead-nav--three {
  --masthead-nav-bar: 2px;
  --masthead-nav-bar-gap: 5px;
}
.masthead-nav--two {
  --masthead-nav-bar-gap: 4px;
}
.masthead-nav--two .masthead-nav-toggle-icon {
  background: transparent;
}
.masthead-nav--bold {
  --masthead-nav-bar: 3px;
  --masthead-nav-bar-gap: 6px;
  --masthead-nav-bar-width: 1.25rem;
}
/* boxed: the element is the shape, a tap target square in the join
   control's own pair, and draws the middle bar as a centred gradient. */
.masthead-nav--boxed .masthead-nav-toggle {
  border: 0;
}
.masthead-nav--boxed.masthead-nav--icon .masthead-nav-toggle {
  padding-inline: 0;
}
.masthead-nav--boxed .masthead-nav-toggle-icon {
  width: var(--masthead-nav-tap);
  height: var(--masthead-nav-tap);
  border-radius: var(--btn-radius);
  color: var(--masthead-nav-cta-ink);
  background: linear-gradient(currentColor, currentColor) center / 1rem 2px no-repeat,
              var(--masthead-nav-cta-face);
}
.masthead-nav--boxed .masthead-nav-toggle-icon::before,
.masthead-nav--boxed .masthead-nav-toggle-icon::after {
  inset-inline: calc(50% - 0.5rem);
}
.masthead-nav--boxed .masthead-nav-toggle-icon::before {
  top: calc(50% - 6px);
}
.masthead-nav--boxed .masthead-nav-toggle-icon::after {
  top: calc(50% + 4px);
}
.masthead-nav--boxed .masthead-nav-disclosure[open] .masthead-nav-toggle-icon {
  background: var(--masthead-nav-cta-face);
}
.masthead-nav--boxed .masthead-nav-disclosure[open] .masthead-nav-toggle-icon::before,
.masthead-nav--boxed .masthead-nav-disclosure[open] .masthead-nav-toggle-icon::after {
  top: calc(50% - 1px);
}
/* toggle=icon: the word leaves the box, never the accessibility tree - never
   display: none. With no word in it the box needs a square floor, and the
   bars stand bare: no frame, the tap area and the focus ring kept. */
.masthead-nav--icon .masthead-nav-toggle {
  justify-content: center;
  min-width: var(--masthead-nav-tap);
  border: 0;
}
.masthead-nav--icon .masthead-nav-toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the menu: whatever list sits inside the nav landmark ---- */
.masthead-nav-links ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.masthead-nav-links li {
  margin: 0;
}
.masthead-nav-links a,
.masthead-nav-links button {
  display: flex;
  align-items: center;
  min-height: var(--masthead-nav-tap);
  margin: 0;
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.masthead-nav-links a[href]:hover,
.masthead-nav-links button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
/* A parent with children and no URL of its own arrives as an <a> with no
   href. It is a label, not a link, so it must not offer a pointer. */
.masthead-nav-links li:has(> ul) > a:not([href]) {
  cursor: default;
}
.masthead-nav-links ul ul {
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--masthead-nav-edge);
}
.masthead-nav-links ul ul a,
.masthead-nav-links ul ul button {
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: 500;
}

/* ---- the tray: the menu and the controls, both inside the disclosure ---- */
/* No `display` here: one would force the tray open on --panel, which opens
   and shuts natively. Each rung turns it on where it wants it laid out. */
.masthead-nav-tray {
  flex-direction: column;
  gap: var(--space-4);
}

/* ---- login and join ---- */
.masthead-nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.masthead-nav-login {
  display: flex;
  align-items: center;
  color: inherit;
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  text-decoration: none;
  padding-block: var(--space-2);
}
.masthead-nav-login:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.masthead-nav-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: var(--masthead-nav-tap);
  padding-inline: var(--space-5);
  border-radius: var(--btn-radius);
  background: var(--masthead-nav-cta-face);
  color: var(--masthead-nav-cta-ink);
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  text-decoration: none;
}
.masthead-nav-join:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The ring is the ground's own, so one rule is right on all three. */
.masthead-nav a:focus-visible,
.masthead-nav button:focus-visible,
.masthead-nav summary:focus-visible {
  outline: 3px solid var(--masthead-nav-ring);
  outline-offset: 2px;
}

/* ---- small screens ---- */
@media (width < 60rem) {
  /* A wide wordmark at --logo-height is most of a phone across. Without this
     cap it takes the whole row and pushes the menu button onto a second one. */
  .masthead-nav-mark {
    max-width: 45%;
    min-width: var(--masthead-nav-tap);
    min-height: var(--masthead-nav-tap);
  }
  /* A wordless button is one tap wide, so the mark may take the rest of the
     row. --row has no button and --minimal a wider join control: both 45%. */
  .masthead-nav--drawer.masthead-nav--icon:not(.masthead-nav--minimal) .masthead-nav-mark,
  .masthead-nav--panel.masthead-nav--icon:not(.masthead-nav--minimal) .masthead-nav-mark {
    max-width: calc(100% - var(--masthead-nav-tap) - var(--space-3));
  }
  /* A long label ellipsises; border-box holds the padding inside the cap. */
  .masthead-nav-toggle {
    box-sizing: border-box;
    max-width: 100%;
  }
  .masthead-nav--labelled .masthead-nav-toggle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* One button, two words, and only ever one of them in the box. */
  .masthead-nav-toggle-text--close {
    display: none;
  }
  .masthead-nav-disclosure[open] .masthead-nav-toggle-text {
    display: none;
  }
  .masthead-nav-disclosure[open] .masthead-nav-toggle-text--close {
    display: inline;
  }
  /* The controls lead the sheet, and follow the menu in the markup so the
     bar is read in the order it is drawn. --row has no sheet and is left. */
  .masthead-nav--drawer .masthead-nav-controls,
  .masthead-nav--panel .masthead-nav-controls {
    order: -1;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  /* A row in a menu here, not a word in the bar: it takes a menu target. */
  .masthead-nav-login {
    min-height: var(--masthead-nav-tap);
  }
  /* menu-side moves the button, and the drawer it opens, to the same edge.
     Scoped to the rungs that HAVE a button: on --row the disclosure is the
     whole menu, so ordering it puts the navigation above the brand. */
  .masthead-nav--drawer.masthead-nav--side-end .masthead-nav-disclosure,
  .masthead-nav--panel.masthead-nav--side-end .masthead-nav-disclosure {
    order: 0;
  }
  .masthead-nav--drawer.masthead-nav--side-start .masthead-nav-disclosure,
  .masthead-nav--panel.masthead-nav--side-start .masthead-nav-disclosure {
    order: -1;
  }
  /* No start margin: 45% and 55% add up exactly, so anything added breaks
     the line and drops the mark to a second row. */
  .masthead-nav--side-start .masthead-nav-mark {
    margin-inline-end: auto;
  }
  /* A join control stretched over a tablet is a bar, not a button. */
  /* Definite, not max-width: an auto margin here cancels the stretch. */
  .masthead-nav--panel .masthead-nav-controls {
    width: min(20rem, 100%);
  }
  .masthead-nav--panel.masthead-nav--menu-end .masthead-nav-controls {
    align-self: flex-end;
  }
}

/* menu=drawer: a panel fixed to the inline-end edge, over a dimmed page. */
@media (width < 60rem) {
  /* The drawer is fixed to the viewport and the button that shuts it is not,
     so a scroll parts them and leaves an open menu with no way out. Pinned on
     both sticky rungs: this is not the sticky axis and does not fold into it. */
  .masthead-nav--drawer:has(.masthead-nav-disclosure[open]) {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
  }
  /* 45% for the mark and the rest for the button, gap included, so the two
     share one row: flexbox breaks lines before it shrinks anything. */
  .masthead-nav--drawer .masthead-nav-disclosure,
  .masthead-nav--panel .masthead-nav-disclosure {
    max-width: calc(55% - var(--space-3));
  }
  /* Laid out open or shut, so it has somewhere to slide FROM. Engines hide a
     closed <details> two ways, one unreachable from the child, so both are
     needed. `visibility` keeps it out of the tab order - never use opacity. */
  .masthead-nav--drawer .masthead-nav-tray {
    display: flex;
  }
  .masthead-nav--drawer .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav--drawer .masthead-nav-tray {
    position: fixed;
    inset-block: 0;
    z-index: 41;
    width: min(20rem, 82vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Block-start padding is the header's first row, computed - the button
       sits on the drawer, so anything less puts it over the first item. */
    padding: calc(var(--space-3)
                  + max(var(--masthead-nav-tap), var(--logo-height, 2.75rem))
                  + var(--space-4))
             var(--space-4) var(--space-6);
    background: var(--masthead-nav-panel-face);
    color: var(--masthead-nav-panel-ink);
    box-shadow: var(--card-shadow);
    visibility: hidden;
  }
  /* `translate` is the one place a logical property cannot carry the meaning,
     so each side states its own, and its own :dir(rtl). */
  .masthead-nav--drawer.masthead-nav--side-end .masthead-nav-tray {
    inset-inline-end: 0;
    border-inline-start: 1px solid var(--masthead-nav-edge);
    translate: 100% 0;
  }
  .masthead-nav--drawer.masthead-nav--side-end .masthead-nav-tray:dir(rtl) {
    translate: -100% 0;
  }
  .masthead-nav--drawer.masthead-nav--side-start .masthead-nav-tray {
    inset-inline-start: 0;
    border-inline-end: 1px solid var(--masthead-nav-edge);
    translate: -100% 0;
  }
  .masthead-nav--drawer.masthead-nav--side-start .masthead-nav-tray:dir(rtl) {
    translate: 100% 0;
  }
  .masthead-nav--drawer .masthead-nav-disclosure[open] .masthead-nav-tray {
    visibility: visible;
    translate: none;
  }
  /* The backdrop belongs to the disclosure: in the panel it would be inside
     the box it has to sit behind. */
  .masthead-nav--drawer .masthead-nav-disclosure::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--color-scrim) 62%, transparent);
    visibility: hidden;
    opacity: 0;
  }
  .masthead-nav--drawer .masthead-nav-disclosure[open]::before {
    visibility: visible;
    opacity: 1;
  }
  /* The button stays where it was pressed, above both the backdrop and the
     panel. The panel's block-start padding keeps the first item out of it. */
  .masthead-nav--drawer .masthead-nav-disclosure[open] .masthead-nav-toggle {
    position: relative;
    z-index: 42;
  }
}

/* menu=panel: the menu drops out of the button, over what is below. */
@media (width < 60rem) {
  /* A shut <details> contains its own layout, so this sheet is laid out
     against the button until it opens - `visibility` keeps that box out. */
  .masthead-nav--panel .masthead-nav-tray {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 20;
    max-height: 70svh;
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--masthead-nav-ground);
    border-block-end: 1px solid var(--masthead-nav-edge);
    box-shadow: var(--card-shadow);
    visibility: hidden;
  }
  /* Scoped to [open], unlike the drawer's: this sheet does not slide, and a
     `display` that applied while shut would hold it open. */
  .masthead-nav--panel .masthead-nav-disclosure[open] .masthead-nav-tray {
    display: flex;
    visibility: visible;
  }
}

/* ---- menu=row: no button, the menu is a scrolling row beside the mark ---- */
@media (width < 60rem) {
  .masthead-nav--row .masthead-nav-toggle {
    display: none;
  }
  /* Both declarations open the panel: engines hide a closed <details> in two
     different ways, and one of them cannot be reached from the child. */
  .masthead-nav--row .masthead-nav-tray {
    display: flex;
  }
  .masthead-nav--row .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav--row .masthead-nav-mark {
    margin-inline-end: 0;
  }
  .masthead-nav--row .masthead-nav-disclosure {
    flex: 1 1 auto;
    min-width: 0;
  }
  .masthead-nav--row .masthead-nav-tray {
    gap: var(--space-2);
  }
  .masthead-nav--row .masthead-nav-links {
    min-width: 0;
  }
  .masthead-nav--row .masthead-nav-join {
    flex: 0 1 auto;
  }
  .masthead-nav--row .masthead-nav-links > ul {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .masthead-nav--row .masthead-nav-links > ul::-webkit-scrollbar {
    display: none;
  }
  .masthead-nav--row .masthead-nav-links > ul > li {
    flex: 0 0 auto;
  }
  /* One row, so a submenu cannot nest under its parent; its children run on
     beside it instead. */
  .masthead-nav--row .masthead-nav-links li:has(> ul) {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .masthead-nav--row .masthead-nav-links ul ul {
    flex-direction: row;
    gap: var(--space-4);
    padding-inline-start: var(--space-4);
  }
}

/* ---- wide screens: the menu is always open and sits in the bar ---- */
@media (min-width: 60rem) {
  .masthead-nav-toggle {
    display: none;
  }
  /* Both declarations open the panel: engines hide a closed <details> in two
     different ways, and one of them cannot be reached from the child. */
  .masthead-nav-tray {
    display: flex;
  }
  .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav-tray {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
  .masthead-nav-links {
    flex: 1 1 auto;
    min-width: 0;
  }
  .masthead-nav-inner {
    flex-wrap: nowrap;
    gap: var(--space-6);
    padding-block: var(--space-4);
  }
  /* The mark must not shrink here: the logo is sized from its height at this
     width, so a shrinking box would let the image spill over the first menu
     item instead of taking room from it. */
  .masthead-nav-mark {
    flex: 0 0 auto;
  }
  .masthead-nav-logo {
    max-width: none;
  }
  .masthead-nav-disclosure {
    flex: 1 1 auto;
    min-width: 0;
  }
  .masthead-nav-controls {
    flex: 0 0 auto;
  }
  .masthead-nav-join {
    flex: 0 0 auto;
  }
  .masthead-nav-links > ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
  }
  .masthead-nav-links > ul > li {
    position: relative;
  }
  .masthead-nav-links > ul > li > a,
  .masthead-nav-links > ul > li > button {
    white-space: nowrap;
  }
  /* The tap floor holds here too: 1024 is a tablet held sideways. Padding
     inside it, so a one-row bar keeps the join control's height. */
  .masthead-nav-mark,
  .masthead-nav-login,
  .masthead-nav-links > ul > li > a,
  .masthead-nav-links > ul > li > button {
    box-sizing: border-box;
    min-width: var(--masthead-nav-tap);
    min-height: var(--masthead-nav-tap);
  }
  /* Faded rather than removed: a submenu taken out of the layout cannot be
     focused, so a keyboard could never open it. */
  .masthead-nav-links ul ul {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 30;
    min-width: 12rem;
    padding: var(--space-2);
    border: var(--card-border);
    border-inline-start: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--masthead-nav-panel-face);
    color: var(--masthead-nav-panel-ink);
    box-shadow: var(--card-shadow);
    opacity: 0;
    pointer-events: none;
  }
  .masthead-nav-links > ul > li:hover > ul,
  .masthead-nav-links > ul > li:focus-within > ul {
    opacity: 1;
    pointer-events: auto;
  }
  /* The last two items sit nearest the edge, so their panels hang from
     their end edge instead. */
  .masthead-nav-links > ul > li:nth-last-child(-n + 2) > ul {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  .masthead-nav-links ul ul a,
  .masthead-nav-links ul ul button {
    min-height: var(--masthead-nav-tap);
    padding-inline: var(--space-2);
  }
  /* A third level sits inside its parent's panel, and takes the pointer
     only when that panel does. */
  .masthead-nav-links ul ul ul {
    position: static;
    min-width: 0;
    padding: 0 0 0 var(--space-3);
    border: 0;
    border-inline-start: 1px solid var(--masthead-nav-edge);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: inherit;
  }
  /* A chevron marks the items that carry children. */
  .masthead-nav-links > ul > li:has(> ul) > a::after,
  .masthead-nav-links > ul > li:has(> ul) > button::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-inline-start: var(--space-2);
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
  }

  /* overflow: what happens to items that do not fit the row. */
  .masthead-nav--wrap .masthead-nav-links > ul {
    flex-wrap: wrap;
  }
  /* --more folds the items past the room into a last item the behaviour
     library builds. Without the library this rung is --wrap, so the property
     below is the whole switch. */
  .masthead-nav--more .masthead-nav-links > ul {
    --hub-overflow: more;
  }
  .masthead-nav--scroll .masthead-nav-links > ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--space-2) var(--space-3);
    mask-image: linear-gradient(to right, transparent, currentColor var(--space-3),
                                currentColor calc(100% - var(--space-3)), transparent);
  }
  .masthead-nav--scroll .masthead-nav-links > ul::-webkit-scrollbar {
    display: none;
  }
  .masthead-nav--scroll .masthead-nav-links > ul > li {
    flex: 0 0 auto;
  }
  /* A scrolling row clips anything that pops out of it, so its submenus run
     on beside their parent instead. */
  .masthead-nav--scroll .masthead-nav-links > ul > li:has(> ul) {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .masthead-nav--scroll .masthead-nav-links ul ul {
    position: static;
    flex-direction: row;
    min-width: 0;
    padding: 0 0 0 var(--space-3);
    border: 0;
    border-inline-start: 1px solid var(--masthead-nav-edge);
    border-radius: 0;
    background: none;
    color: inherit;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
  }
  .masthead-nav--scroll .masthead-nav-links > ul > li:has(> ul) > a::after,
  .masthead-nav--scroll .masthead-nav-links > ul > li:has(> ul) > button::after {
    content: none;
  }

  /* submenu: --dropdown is the panel under its own item, above. --mega is one
     panel the width of the bar, its items in columns. */
  .masthead-nav--dropdown .masthead-nav-links > ul > li {
    position: relative;
  }
  .masthead-nav--mega .masthead-nav-links > ul > li {
    position: static;
  }
  .masthead-nav--mega .masthead-nav-links > ul > li > ul {
    display: block;
    inset-inline: 0;
    min-width: 0;
    padding: var(--space-5) var(--space-6);
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    columns: 12rem;
    column-gap: var(--space-6);
  }
  .masthead-nav--mega .masthead-nav-links > ul > li > ul > li {
    break-inside: avoid;
  }
  .masthead-nav--mega .masthead-nav-links > ul > li > ul a,
  .masthead-nav--mega .masthead-nav-links > ul > li > ul button {
    padding-inline: 0;
  }

  /* layout=inline - mark, menu, controls, one row. */
  .masthead-nav--inline .masthead-nav-inner {
    justify-content: space-between;
  }
  .masthead-nav--inline .masthead-nav-links > ul {
    justify-content: flex-start;
  }

  /* layout=centred - mark on its own line, menu centred under it, controls
     parked in the corner so the mark stays optically centred. */
  .masthead-nav--centred .masthead-nav-inner {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-5);
  }
  .masthead-nav--centred .masthead-nav-mark {
    margin-inline: auto;
  }
  .masthead-nav--centred .masthead-nav-disclosure {
    flex: 1 0 100%;
  }
  /* Centred by auto margins on the end items, not justify-content: a row
     wider than its box centres by pushing its first items off the left edge,
     where no scroll can reach them. */
  .masthead-nav--centred .masthead-nav-links > ul > li:first-child {
    margin-inline-start: auto;
  }
  .masthead-nav--centred .masthead-nav-links > ul > li:last-child {
    margin-inline-end: auto;
  }
  .masthead-nav--centred .masthead-nav-controls {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-end: var(--space-4);
  }

  /* Last in the block on purpose: it has to outrank --centred's taller
     padding, and the two selectors weigh the same. */
  .masthead-nav--pinned .masthead-nav-inner,
  .masthead-nav--compact .masthead-nav-inner {
    padding-block: var(--space-3);
  }
  .masthead-nav--pinned.masthead-nav--centred .masthead-nav-controls,
  .masthead-nav--compact.masthead-nav--centred .masthead-nav-controls {
    inset-block-start: var(--space-3);
  }
}

/* sticky=compact: once the page has scrolled, the bar tightens and the mark
   comes down a fifth. The behaviour library sets the attribute. */
.masthead-nav--compact[data-hub-shrink="scrolled"] .masthead-nav-inner {
  padding-block: var(--space-2);
}
.masthead-nav--compact[data-hub-shrink="scrolled"] .masthead-nav-logo {
  height: calc(var(--logo-height, 2.75rem) * 0.8);
}

/* ---- nav=minimal: no menu, the mark and the controls at every width ---- */
.masthead-nav--full .masthead-nav-links {
  display: block;
}
.masthead-nav--minimal .masthead-nav-links {
  display: none;
}
.masthead-nav--minimal .masthead-nav-tray {
  justify-content: flex-end;
}
/* These outweigh the menu rungs' rules, which name two classes and the
   tray: this rung has no sheet to slide, drop or scroll. */
@media (width < 60rem) {
  .masthead-nav--minimal .masthead-nav-toggle {
    display: none;
  }
  /* The join control does not shorten as a menu button's word does, so the
     row never breaks here: the mark gives way instead. */
  .masthead-nav--minimal .masthead-nav-inner {
    flex-wrap: nowrap;
  }
  .masthead-nav--minimal .masthead-nav-inner .masthead-nav-disclosure {
    order: 0;
    flex: 0 0 auto;
    max-width: none;
  }
  .masthead-nav--minimal .masthead-nav-inner .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav--minimal .masthead-nav-inner .masthead-nav-disclosure::before {
    content: none;
  }
  .masthead-nav--minimal .masthead-nav-disclosure .masthead-nav-tray {
    display: flex;
    position: static;
    width: auto;
    max-height: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    visibility: visible;
    translate: none;
  }
  .masthead-nav--minimal .masthead-nav-controls {
    order: 0;
    width: auto;
    flex-direction: row;
    align-items: center;
  }
  /* The join control is the point of a page with no menu; the login link
     returns above 60rem. */
  .masthead-nav--minimal .masthead-nav-login {
    display: none;
  }
}

/* ---- menu-align: which edge the small-screen menu is set against ----
   Below 60rem only: above it `layout` already decides where the menu sits. */
@media (width < 60rem) {
  .masthead-nav--menu-start .masthead-nav-tray {
    text-align: start;
  }
  .masthead-nav--menu-start .masthead-nav-links a,
  .masthead-nav--menu-start .masthead-nav-links button,
  .masthead-nav--menu-start .masthead-nav-login {
    justify-content: flex-start;
  }
  .masthead-nav--menu-centre .masthead-nav-tray {
    text-align: center;
  }
  .masthead-nav--menu-centre .masthead-nav-links a,
  .masthead-nav--menu-centre .masthead-nav-links button,
  .masthead-nav--menu-centre .masthead-nav-login {
    justify-content: center;
  }
  .masthead-nav--menu-centre .masthead-nav-links ul ul {
    align-items: center;
    padding-inline: 0;
    border-inline: none;
  }
  .masthead-nav--menu-end .masthead-nav-tray {
    text-align: end;
  }
  .masthead-nav--menu-end .masthead-nav-links a,
  .masthead-nav--menu-end .masthead-nav-links button,
  .masthead-nav--menu-end .masthead-nav-login {
    justify-content: flex-end;
  }
  /* The rule moves with the items, or it is left down the empty side. */
  .masthead-nav--menu-end .masthead-nav-links ul ul {
    align-items: flex-end;
    padding-inline: 0 var(--space-4);
    border-inline: none;
    border-inline-end: 1px solid var(--masthead-nav-edge);
  }
}

/* No easing keyword follows --transition-fast below: brands ship that token
   with an easing in it, and a second keyword makes the declaration invalid. */
@media (prefers-reduced-motion: no-preference) {
  .masthead-nav-toggle-icon,
  .masthead-nav-toggle-icon::before,
  .masthead-nav-toggle-icon::after {
    transition: transform var(--transition-fast),
                background var(--transition-fast),
                top var(--transition-fast);
  }
  .masthead-nav-links ul ul {
    transition: opacity var(--transition-fast);
  }
  /* `visibility` is in the list so the panel stays on screen while it leaves. */
  .masthead-nav--drawer .masthead-nav-tray {
    transition: translate var(--transition-fast),
                visibility var(--transition-fast);
  }
  .masthead-nav--drawer .masthead-nav-disclosure::before {
    transition: opacity var(--transition-fast),
                visibility var(--transition-fast);
  }
  .masthead-nav--compact .masthead-nav-inner {
    transition: padding var(--transition-fast);
  }
  .masthead-nav--compact .masthead-nav-logo {
    transition: height var(--transition-fast);
  }
}
/* Belt and braces if a brand reintroduces a transition on these. */
@media (prefers-reduced-motion: reduce) {
  .masthead-nav-toggle-icon,
  .masthead-nav-toggle-icon::before,
  .masthead-nav-toggle-icon::after {
    transition: none;
  }
  .masthead-nav-links ul ul {
    transition: none;
  }
  .masthead-nav--drawer .masthead-nav-tray,
  .masthead-nav--drawer .masthead-nav-disclosure::before,
  .masthead-nav--compact .masthead-nav-inner,
  .masthead-nav--compact .masthead-nav-logo {
    transition: none;
  }
}
/* === /pattern masthead-nav@14 === */

/* === pattern hero-split@16 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* hero-split v3 - tokens only, selectors prefixed */
.hero-split {
  overflow-wrap: var(--long-words, break-word);
}
.hero-split :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .hero-split {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.hero-split {
  padding-block: var(--space-8);
}
.hero-split-inner {
  width: min(100% - 2 * var(--space-4), var(--container-max));
  margin-inline: auto;
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.hero-split-visual {
  order: -1; /* image leads on phones; the copy leads from 48rem up */
}
.hero-split-visual img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.hero-split-title {
  font-family: var(--font-heading);
  font-size: calc(clamp(2rem, 1.2rem + 3.5vw, 3.4rem) * var(--type-scale, 1));
  line-height: calc(1.15 * var(--heading-leading, 1));
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .hero-split-title {
    line-height: calc(max(1.15em, 1.45cap) * var(--heading-leading, 1));
  }
}
.hero-split-sub {
  color: var(--color-text-soft);
  font-size: 1.125rem;
  max-width: 46ch;
  margin: 0 0 var(--space-6);
}
.hero-split-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.hero-split-btn {
  box-sizing: border-box;
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--btn-radius);
  min-height: 48px;
  line-height: 1.5;
}
.hero-split-btn:hover {
  background: var(--color-primary-dark);
}
/* Focus needs its own indicator, not the hover fill. */
.hero-split-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
@media (min-width: 48rem) {
  .hero-split {
    padding-block: var(--space-12);
  }
  .hero-split-inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-8);
  }
  .hero-split-visual {
    order: 0;
  }
  .hero-split--end .hero-split-visual {
    order: 1;
  }
  .hero-split--start .hero-split-inner {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .hero-split--start .hero-split-visual {
    order: -1;
  }
}

.hero-split img[data-hub-placeholder] {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
}

/* Holding a signup-card in place of the join button: on a phone the card
   follows the headline and the photograph comes after it. */
@media (width < 48rem) {
  .hero-split-inner:has(.signup-card) .hero-split-visual {
    order: 1;
  }
}
/* Wide: the photograph fills its half and the card overlaps its inner edge,
   so the two read as layered rather than boxed. */
@media (min-width: 60rem) {
  .hero-split:has(.signup-card) {
    padding-block: var(--space-6) var(--space-8);
  }
  .hero-split-inner:has(.signup-card) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: ". visual" "title visual" "sub visual" ". visual";
    grid-template-rows: 1fr auto auto 1fr;
    row-gap: var(--space-3);
    /* The card reaches --space-12 out of the photograph's column toward the
       headline, so the gap has to clear that reach, on either side. */
    column-gap: calc(var(--space-12) + var(--space-6));
    align-items: stretch;
  }
  .hero-split-inner:has(.signup-card) .hero-split-copy {
    display: contents;
  }
  .hero-split-inner:has(.signup-card) .hero-split-title {
    grid-area: title;
    max-width: 10em;
    margin: 0;
  }
  .hero-split-inner:has(.signup-card) .hero-split-sub {
    grid-area: sub;
    margin: 0;
  }
  .hero-split-inner:has(.signup-card) .hero-split-visual {
    grid-area: visual;
    /* A height, not a minimum, anchored at the top: a taller step must not
       stretch the picture or move it. */
    height: 38rem;
    align-self: start;
    margin-inline-start: var(--space-12);
  }
  .hero-split-inner:has(.signup-card) .hero-split-visual img {
    height: 100%;
  }
  .hero-split-inner:has(.signup-card) .hero-split-cta {
    grid-area: visual;
    z-index: 2;
    align-self: center;
    justify-self: start;
    margin-inline-start: calc(-1 * var(--space-12));
  }
  /* The same layering mirrored. */
  .hero-split--start .hero-split-inner:has(.signup-card) {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "visual ." "visual title" "visual sub" "visual .";
  }
  .hero-split--start .hero-split-inner:has(.signup-card) .hero-split-visual {
    margin-inline: 0 var(--space-12);
  }
  .hero-split--start .hero-split-inner:has(.signup-card) .hero-split-cta {
    justify-self: end;
    margin-inline: 0 calc(-1 * var(--space-12));
  }
  /* Over the placeholder the card sits under the words, beside the drawing
     rather than over it. */
  .hero-split-inner:has(.signup-card):has(img[data-hub-placeholder]) {
    grid-template-areas: ". visual" "title visual" "sub visual" "cta visual" ". visual";
    grid-template-rows: 1fr auto auto auto 1fr;
  }
  .hero-split--start .hero-split-inner:has(.signup-card):has(img[data-hub-placeholder]) {
    grid-template-areas: "visual ." "visual title" "visual sub" "visual cta" "visual .";
  }
  .hero-split-inner:has(.signup-card):has(img[data-hub-placeholder]) .hero-split-visual {
    margin-inline: 0;
  }
  .hero-split-inner:has(.signup-card):has(img[data-hub-placeholder]) .hero-split-cta {
    grid-area: cta;
    align-self: start;
    justify-self: start;
    margin: var(--space-3) 0 0;
  }
}
/* === /pattern hero-split@16 === */

/* === pattern steps-plain@7 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* steps-plain v1 - tokens only, selectors prefixed */
.steps-plain {
  overflow-wrap: var(--long-words, break-word);
}
.steps-plain :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .steps-plain {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.steps-plain {
  --steps-plain-cell-min: 15rem;
  --steps-plain-badge-size: 2.75rem;
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
  counter-reset: steps-plain;
}
.steps-plain-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.steps-plain-eyebrow {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.steps-plain-title {
  font-family: var(--font-heading);
  /* Page ground and a clamp floor above 24px: both halves of the heading
   token's contract. Keep both if you edit it. */
  color: var(--color-heading);
  font-size: calc(clamp(1.75rem, 3.4vw, 2.75rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.15 * var(--heading-leading, 1));
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .steps-plain-title {
    line-height: calc(max(1.15em, 1.45cap) * var(--heading-leading, 1));
  }
}
.steps-plain-intro {
  color: var(--color-text-soft);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 var(--space-6);
}
/* Phones: a divided list, the numeral in its own gutter. */
.steps-plain-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps-plain-item {
  counter-increment: steps-plain;
  display: grid;
  grid-template-columns: var(--steps-plain-badge-size) 1fr;
  column-gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-rule);
}
.steps-plain-item:last-child {
  border-bottom: 1px solid var(--color-rule);
}
.steps-plain-item::before {
  content: counter(steps-plain, decimal-leading-zero);
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--steps-plain-badge-size);
  height: var(--steps-plain-badge-size);
  border-radius: var(--chip-radius);
  /* --color-text on --color-surface-soft: the one ink promised against every
   page ground, on the one tinted fill that is one. */
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  font-variant-numeric: tabular-nums;
}
.steps-plain-heading {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: calc(1.125rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  line-height: calc(1.3 * var(--heading-leading, 1));
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .steps-plain-heading {
    line-height: calc(max(1.3em, 1.45cap) * var(--heading-leading, 1));
  }
}
.steps-plain-body {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}
.steps-plain-note {
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: var(--space-5) 0 0;
}
/* From the tablet band the list becomes one bordered box whose cells are
   separated by the grid gap showing the ground through - not by cell borders,
   which double up wherever two cells meet. */
@media (min-width: 48rem) {
  .steps-plain {
    padding-inline: var(--space-6);
  }
  .steps-plain-list {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1px;
    /* The hairline is drawn per cell, not by painting the container and
     letting the cells mask it: a wrapped final row leaves grid areas no cell
     covers, and those would show as a slab of rule colour. */
    background: var(--color-surface);
    border-radius: var(--card-radius);
    overflow: hidden;
  }
  .steps-plain-item {
    display: flex;
    flex-direction: column;
    min-height: var(--steps-plain-cell-min);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 0;
    box-shadow: 0 0 0 1px var(--color-rule);
  }
  .steps-plain-item:last-child {
    border: 0;
  }
  .steps-plain-item::before {
    margin-bottom: var(--space-6);
  }
  /* margin-top:auto drives the copy to the cell floor, so cells carrying
   unequal amounts of it still line up as a set. */
  .steps-plain-body {
    margin-top: auto;
  }
}
.steps-plain:not(.steps-plain--moving) {
  --hub-motion: none;
}
/* === /pattern steps-plain@7 === */

/* === pattern faq-details@7 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* faq-details v3 - tokens only, selectors prefixed.
   No script anywhere: <details>/<summary> gives keyboard operation, the
   expanded/collapsed announcement and find-in-page for free. */
.faq-details {
  overflow-wrap: var(--long-words, break-word);
}
.faq-details :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .faq-details {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.faq-details {
  padding-block: var(--space-8);
}
/* Keep the measure: answers read badly at full width. */
.faq-details-inner {
  width: min(100% - 2 * var(--space-4), 48rem);
  margin-inline: auto;
}
.faq-details-title {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-size: calc(clamp(1.75rem, 1rem + 2vw, 2.25rem) * var(--type-scale, 1));
  margin: 0 0 var(--space-6);
}
/* A rule under every item, plus one above the first. */
.faq-details-item {
  border-block-end: 1px solid var(--color-rule);
}
.faq-details-item:first-of-type {
  border-block-start: 1px solid var(--color-rule);
}
.faq-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  cursor: pointer;
  font-family: var(--font-heading);
  /* --color-text: this is not large text. */
  color: var(--color-text);
  /* Both lines are needed to drop the default triangle. */
  list-style: none;
}
.faq-details-summary::-webkit-details-marker {
  display: none;
}
/* Required: removing the marker above removes the focus affordance some
   browsers hang off it. */
.faq-details-summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}
.faq-details-question {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
}
/* The indicator is a shape, not a glyph and never colour alone. */
.faq-details-icon {
  position: relative;
  flex: 0 0 auto;
  width: var(--space-5);
  height: var(--space-5);
}
.faq-details-icon::before,
.faq-details-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 2px;
  margin-block-start: -1px;
  background: var(--color-text-soft);
}
.faq-details-icon::after {
  transform: rotate(90deg);
}
/* A state change, not an animation: it applies under reduced motion too. */
.faq-details-item[open] .faq-details-icon {
  transform: rotate(45deg);
}
.faq-details-answer {
  padding-block-end: var(--space-4);
  padding-inline-end: var(--space-6);
  color: var(--color-text-soft);
}
.faq-details-answer p {
  margin: 0 0 var(--space-3);
  line-height: 1.65;
}
.faq-details-answer p:last-child {
  margin-block-end: 0;
}
/* Motion is opt-in and only ever eases a state the page already reached. */
@media (prefers-reduced-motion: no-preference) {
  .faq-details-icon {
    transition: transform var(--transition-fast) ease-out;
  }
  .faq-details-item[open] .faq-details-answer {
    animation: faq-details-open var(--transition-fast) ease-out;
  }
}
@keyframes faq-details-open {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Belt and braces if a brand reintroduces a transition on these. */
@media (prefers-reduced-motion: reduce) {
  .faq-details-icon {
    transition: none;
  }
  .faq-details-answer {
    animation: none;
  }
}
/* === /pattern faq-details@7 === */

/* === pattern cta-band@7 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* cta-band - tokens only, selectors prefixed */
.cta-band {
  overflow-wrap: var(--long-words, break-word);
}
.cta-band :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .cta-band {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}

/* Each rung names its own ground, ink, control pair and ring, and every rule
   below reads those rather than a token, so nothing here knows which ground it
   is on. The ring is per rung and not --color-focus everywhere: on --brand and
   --deep that token is a brand colour landing on a brand colour, and it
   disappears into the band on every sample brand. See the README. */
.cta-band--plain {
  --cta-band-ground: var(--color-bg);
  --cta-band-ink: var(--color-text);
  --cta-band-btn-face: var(--color-primary);
  --cta-band-btn-ink: var(--color-on-primary);
  --cta-band-ring: var(--color-focus);
}
.cta-band--soft {
  --cta-band-ground: var(--color-surface-soft);
  --cta-band-ink: var(--color-text);
  --cta-band-btn-face: var(--color-primary);
  --cta-band-btn-ink: var(--color-on-primary);
  --cta-band-ring: var(--color-focus);
}
.cta-band--brand {
  --cta-band-ground: var(--color-primary);
  --cta-band-ink: var(--color-on-primary);
  --cta-band-btn-face: var(--color-on-primary);
  --cta-band-btn-ink: var(--color-primary);
  --cta-band-ring: var(--color-on-primary);
}
.cta-band--deep {
  --cta-band-ground: var(--color-scrim);
  --cta-band-ink: var(--color-on-scrim);
  --cta-band-btn-face: var(--color-on-scrim);
  --cta-band-btn-ink: var(--color-scrim);
  --cta-band-ring: var(--color-on-scrim);
}
.cta-band {
  padding-block: var(--space-12);
  padding-inline: var(--space-4);
  background: var(--cta-band-ground);
  color: var(--cta-band-ink);
  text-align: center;
}
.cta-band-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.cta-band-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
/* Not --color-heading: that token is promised against --color-bg, and three of
   the four rungs paint a ground of their own. */
.cta-band-title {
  font-family: var(--font-heading);
  color: var(--cta-band-ink);
  font-size: calc(clamp(2rem, 4.5vw, 3.25rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.1 * var(--heading-leading, 1));
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .cta-band-title {
    line-height: calc(max(1.1em, 1.45cap) * var(--heading-leading, 1));
  }
}
.cta-band-lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto var(--space-6);
}
.cta-band-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48px target, above the 44px AAA floor. */
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--btn-radius);
  background: var(--cta-band-btn-face);
  color: var(--cta-band-btn-ink);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.cta-band-btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The offset leaves a band-coloured gap, putting the guaranteed pair either
   side of the ring. */
.cta-band-btn:focus-visible {
  outline: 3px solid var(--cta-band-ring);
  outline-offset: 4px;
}
/* === /pattern cta-band@7 === */

/* === pattern colophon@3 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* colophon v3 - tokens only, selectors prefixed */
.colophon {
  overflow-wrap: var(--long-words, break-word);
}
.colophon :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .colophon {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.colophon {
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-8) var(--space-6);
  font-size: 0.875rem;
  color: var(--color-text-soft);
}
.colophon--plain {
  background: var(--color-bg);
}
.colophon--soft {
  background: var(--color-surface);
}
.colophon-inner {
  width: 92%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
}
/* layout: --line is the centred stack at every width; --columns spreads the
   three groups across the row from 60rem up and is the same stack below. */
.colophon--line .colophon-inner,
.colophon--columns .colophon-inner {
  justify-items: center;
  text-align: center;
}
/* mark: the brand mark above everything else, or nothing at all. */
.colophon--none .colophon-mark {
  display: none;
}
.colophon--logo .colophon-mark {
  display: inline-flex;
  margin-block-end: var(--space-2);
}
/* The set height is the floor: `height: auto` under a `max-height` alone
   resolves a viewBox-only SVG to 0x0. A tenth over the header's height, so
   the footer mark reads as a signature and not a repeat of the bar. */
.colophon-logo {
  display: block;
  width: auto;
  height: calc(var(--logo-height, 2.75rem) * 1.1);
  max-width: 100%;
  object-fit: contain;
}
/* The platform decides the menu's own markup, so its rules reach it by
   descent rather than by a generated class name. */
.colophon-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}
.colophon-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}
.colophon-menu a,
.colophon-legal a {
  color: var(--color-text-soft);
  text-decoration: none;
}
.colophon-menu a:hover,
.colophon-legal a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.colophon a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.colophon-copyright {
  margin: 0;
}
@media (min-width: 60rem) {
  .colophon--columns .colophon-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: start;
    align-items: start;
    text-align: start;
    gap: var(--space-6) var(--space-8);
  }
  /* A brand with no managed footer menu deletes the nav: two columns then,
     not two columns and a hole. */
  .colophon--columns .colophon-inner:not(:has(.colophon-menu)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .colophon--columns .colophon-mark {
    grid-column: 1 / -1;
  }
  .colophon--columns .colophon-menu ul,
  .colophon--columns .colophon-legal {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-2);
  }
  .colophon--columns .colophon-copyright {
    justify-self: end;
    text-align: end;
  }
}
/* === /pattern colophon@3 === */

/* === pattern cta-sticky@8 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* cta-sticky v6 - tokens only, selectors prefixed. */
.cta-sticky {
  overflow-wrap: var(--long-words, break-word);
}
.cta-sticky :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .cta-sticky {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
@media (width < 60rem) {
  .cta-sticky {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-4);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    /* Two separations: --color-rule may be set to nothing. */
    border-top: 1px solid var(--color-rule);
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--color-text) 14%, transparent),
                0 -8px 24px color-mix(in srgb, var(--color-text) 10%, transparent);
  }
  .cta-sticky-btn {
    display: block;
    box-sizing: border-box;
    text-align: center;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    text-decoration: none;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--btn-radius);
    /* The bar's height and the body clearance below must stay in step. */
    /* Fallback required: declared inside body:has(). */
    min-height: var(--cta-sticky-target, 48px);
    line-height: 1.5;
  }
  .cta-sticky-btn:hover {
    background: var(--color-primary-dark);
  }
  /* Focus needs its own indicator, not the hover fill. */
  .cta-sticky-btn:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }
  /* Clearance, derived from the same tokens as the bar. */
  body:has(.cta-sticky) {
    /* On body so both this rule and the bar read it. */
    --cta-sticky-target: 48px;
    padding-bottom: calc(
      max(var(--cta-sticky-target), 1.5em + 2 * var(--space-3))
      + 2 * var(--space-2) + 1px + env(safe-area-inset-bottom, 0px)
    );
  }
}
@media (width >= 60rem) {
  .cta-sticky {
    display: none;
  }
}
/* === /pattern cta-sticky@8 === */

/* === pattern cta-assurance@3 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* cta-assurance v1 - tokens only, selectors prefixed */
.cta-assurance {
  overflow-wrap: var(--long-words, break-word);
}
.cta-assurance :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .cta-assurance {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
/* Sets no colour: it inherits the ink above it. See the README. */
.cta-assurance {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.cta-assurance-item + .cta-assurance-item::before {
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  margin-inline-end: var(--space-3);
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
/* === /pattern cta-assurance@3 === */

/* === pattern hero-stated@7 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* hero-stated v1 - tokens only, selectors prefixed */
.hero-stated {
  overflow-wrap: var(--long-words, break-word);
}
.hero-stated :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .hero-stated {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
/* Each ground names its own ink, and every rule below reads the pair rather
   than a token, so nothing here knows which ground it is on. */
.hero-stated--plain {
  --hero-stated-ground: var(--color-bg);
  --hero-stated-ink: var(--color-text-soft);
  --hero-stated-title-ink: var(--color-heading);
  --hero-stated-btn-face: var(--color-primary);
  --hero-stated-btn-ink: var(--color-on-primary);
  --hero-stated-ring: var(--color-focus);
}
.hero-stated--brand {
  --hero-stated-ground: var(--color-primary);
  --hero-stated-ink: var(--color-on-primary);
  --hero-stated-title-ink: var(--color-on-primary);
  --hero-stated-btn-face: var(--color-on-primary);
  --hero-stated-btn-ink: var(--color-primary);
  --hero-stated-ring: var(--color-on-primary);
}
.hero-stated--deep {
  --hero-stated-ground: var(--color-scrim);
  --hero-stated-ink: var(--color-on-scrim);
  --hero-stated-title-ink: var(--color-on-scrim);
  --hero-stated-btn-face: var(--color-primary);
  --hero-stated-btn-ink: var(--color-on-primary);
  --hero-stated-ring: var(--color-on-scrim);
}
.hero-stated {
  padding-block: var(--space-12);
  padding-inline: var(--space-4);
  background: var(--hero-stated-ground);
  color: var(--hero-stated-ink);
}
.hero-stated-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.hero-stated-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.hero-stated-title {
  font-family: var(--font-heading);
  /* On the plain ground this is --color-heading, which the contract promises
   at the large-text bar against --color-bg; the clamp floor is 40px. On the
   other two grounds it is that ground's own ink. */
  color: var(--hero-stated-title-ink);
  font-size: calc(clamp(2.5rem, 7vw, 4.5rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.03em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.02 * var(--heading-leading, 1));
  max-width: 10.75em;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .hero-stated-title {
    line-height: calc(max(1.02em, 1.45cap) * var(--heading-leading, 1));
  }
}
.hero-stated-sub {
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 var(--space-6);
}
.hero-stated-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 52px: on a page whose opener carries no image, this is what the eye
   lands on after the words. */
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--btn-radius);
  background: var(--hero-stated-btn-face);
  color: var(--hero-stated-btn-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.hero-stated-btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The ring is the ground's own, so one rule is right on all three. */
.hero-stated-btn:focus-visible {
  outline: 3px solid var(--hero-stated-ring);
  outline-offset: 4px;
}
.hero-stated--centred .hero-stated-inner {
  text-align: center;
}
.hero-stated--centred .hero-stated-title,
.hero-stated--centred .hero-stated-sub {
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .hero-stated {
    padding-inline: var(--space-8);
  }
}

/* Holding a signup-card in place of the join button. */
.hero-stated--centred .signup-card {
  margin-inline: auto;
}
/* Wide: the words on the left, the card on the right, and the first step
   above the fold. */
@media (min-width: 60rem) {
  .hero-stated:has(.signup-card) {
    padding-block: var(--space-6) var(--space-8);
  }
  .hero-stated-inner:has(.signup-card) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    column-gap: var(--space-8);
    align-items: start;
  }
  .hero-stated-inner:has(.signup-card) > :not(.hero-stated-cta) {
    grid-column: 1;
  }
  .hero-stated-inner:has(.signup-card) > .hero-stated-cta {
    grid-column: 2;
    grid-row: 1 / span 6;
  }
}
/* === /pattern hero-stated@7 === */

/* === pattern zigzag-rows@13 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* zigzag-rows v4 - tokens only, selectors prefixed */
.zigzag-rows {
  overflow-wrap: var(--long-words, break-word);
}
.zigzag-rows :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .zigzag-rows {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.zigzag-rows {
  /* One ratio for every media box, set once: equal-height rows are what hold
   the rhythm down the page. */
  --zigzag-rows-media-ratio: 1 / 1;
  padding-block: var(--space-8);
}
.zigzag-rows-inner {
  width: min(100% - 2 * var(--space-4), var(--container-max));
  margin-inline: auto;
  display: grid;
  gap: var(--space-8);
}
/* Same title setting as the library's other list sections. */
.zigzag-rows-title {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-size: calc(clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem) * var(--type-scale, 1));
  line-height: calc(1.1 * var(--heading-leading, 1));
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  margin: 0;
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .zigzag-rows-title {
    line-height: calc(max(1.1em, 1.45cap) * var(--heading-leading, 1));
  }
}
/* Phones: one column and no order property - source order already puts the
   image first, so there is nothing to undo. */
.zigzag-rows-row {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
.zigzag-rows-media {
  aspect-ratio: var(--zigzag-rows-media-ratio);
  overflow: hidden;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: var(--color-surface-soft);
}
.zigzag-rows-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zigzag-rows-heading {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-size: calc(clamp(1.75rem, 1.2rem + 1.2vw, 2rem) * var(--type-scale, 1));
  line-height: calc(1.2 * var(--heading-leading, 1));
  letter-spacing: calc(-0.015em + var(--heading-tracking, 0) * 1em);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .zigzag-rows-heading {
    line-height: calc(max(1.2em, 1.45cap) * var(--heading-leading, 1));
  }
}
/* Body copy is body copy: it starts at 16px and grows. The source this came
   from set it clamp(13px, 0.9vw, 14px), which is caption size. */
.zigzag-rows-body {
  color: var(--color-text-soft);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0;
}
.zigzag-rows-action {
  margin: var(--space-5) 0 0;
}
/* Underlined, body size, 44px target. */
.zigzag-rows-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* --color-text: --color-primary-dark is for light grounds only. */
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}
.zigzag-rows-link:hover {
  color: var(--color-primary-dark);
}
.zigzag-rows-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
@media (min-width: 48rem) {
  .zigzag-rows {
    padding-block: var(--space-12);
  }
  .zigzag-rows-inner {
    gap: var(--space-12);
  }
  .zigzag-rows-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  /* Both halves are placed explicitly, so the alternation is a stated
     property of the row and not a side effect of auto-placement. */
  .zigzag-rows-media {
    grid-column: 1;
    grid-row: 1;
  }
  .zigzag-rows-copy {
    grid-column: 2;
    grid-row: 1;
  }
  .zigzag-rows-row--mirrored .zigzag-rows-media {
    grid-column: 2;
    grid-row: 1;
  }
  .zigzag-rows-row--mirrored .zigzag-rows-copy {
    grid-column: 1;
    grid-row: 1;
  }
  /* Guard: a mirrored row whose media holds a link, button or anything
   tabbable renders unmirrored, because flipping it would send focus
   right-then-left. A safety net where :has() is supported, not a licence. */
  .zigzag-rows-row--mirrored:has(.zigzag-rows-media :is(a, button, [tabindex])) .zigzag-rows-media {
    grid-column: 1;
  }
  .zigzag-rows-row--mirrored:has(.zigzag-rows-media :is(a, button, [tabindex])) .zigzag-rows-copy {
    grid-column: 2;
  }
}

.zigzag-rows img[data-hub-placeholder] {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
}
.zigzag-rows:not(.zigzag-rows--moving) {
  --hub-motion: none;
}
/* === /pattern zigzag-rows@13 === */

/* === pattern heading-block@10 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* heading-block v4 - tokens only, selectors prefixed */
.heading-block {
  overflow-wrap: var(--long-words, break-word);
}
.heading-block :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .heading-block {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.heading-block {
  /* Same gutter idiom as every other pattern. */
  width: min(100% - 2 * var(--space-4), 45rem);
  margin-inline: auto;
  margin-block-end: var(--space-8);
  text-align: start;
}
.heading-block-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  /* --color-text: --color-primary carries no stated ratio. */
  color: var(--color-text);
  font-size: 0.8125rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Hairline rules either side of the label. Decorative only - the label's own
   words carry the meaning. */
.heading-block-eyebrow::before,
.heading-block-eyebrow::after {
  content: "";
  display: block;
  width: var(--space-5);
  height: 2px;
  border-radius: var(--chip-radius);
  background: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.heading-block-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: calc(clamp(2rem, 1.4rem + 2.6vw, 3.6rem) * var(--type-scale, 1));
  line-height: calc(1.02 * var(--heading-leading, 1));
  letter-spacing: calc(-0.035em + var(--heading-tracking, 0) * 1em);
  font-weight: var(--weight-display, 700);
  color: var(--color-heading);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .heading-block-title {
    line-height: calc(max(1.02em, 1.45cap) * var(--heading-leading, 1));
  }
}
.heading-block-intro {
  max-width: 42rem;
  margin: var(--space-4) 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-soft);
}
/* Tablet up: centred. Phones keep it left. */
@media (min-width: 48rem) {
  .heading-block {
    text-align: center;
  }
  .heading-block-intro {
    margin-inline: auto;
  }
}
/* === /pattern heading-block@10 === */

/* === pattern member-grid@7 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* member-grid v1 - tokens only, selectors prefixed.
   Everything below .member-grid is markup the PLATFORM writes, so these class
   names are a contract with it, not ours to rename. */
.member-grid {
  overflow-wrap: var(--long-words, break-word);
}
.member-grid :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .member-grid {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.member-grid {
  display: block;
  padding-inline: var(--space-4);
}
.member-grid .lp-grid,
.member-grid .lp-members__empty {
  max-width: var(--container-max);
  margin-inline: auto;
}
.member-grid .lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin-block: 0;
  padding: 0;
}
.member-grid .mem-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  position: relative;
}
.member-grid .mem-card img,
.member-grid .mem-card__initial {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--card-radius);
  background: var(--color-surface);
}
.member-grid .mem-card__initial {
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: calc(2rem * var(--type-scale, 1));
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}
.member-grid .mem-card .badge {
  position: absolute;
  top: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: 0.15rem var(--space-2);
  border-radius: var(--chip-radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}
.member-grid .mem-card__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale, 1));
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.member-grid .mem-card__where,
.member-grid .mem-card__line {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-soft);
  overflow-wrap: anywhere;
}
/* Two lines and no more. A blurb is member-written and has no length limit,
   so without this one card sets the height of the whole row. */
.member-grid .mem-card__line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* 44px, not the 24px WCAG floor: on a phone this is the card's only control
   and it sits between two photographs. */
.member-grid .mem-card__cta {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.member-grid .mem-card__cta:hover {
  text-decoration: underline;
}
.member-grid .mem-card__cta:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--chip-radius);
}
/* The join tile is the platform's last li and carries no photograph, so it
   needs a body of its own or it collapses to a link on the baseline. A grid
   item stretches to its row, so the floor is for the row it lands in ALONE -
   it is the last of an unknown number, so it wraps by itself often. */
.member-grid .mem-card--join {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--space-4);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  text-align: center;
}
.member-grid .mem-card--join .mem-card__cta {
  justify-content: center;
  margin: 0;
}
.member-grid .lp-members__empty {
  margin-block: 0;
  padding: var(--space-5) var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* card: how much furniture sits around the photograph */
.member-grid--plain .mem-card {
  padding: 0;
}
.member-grid--framed .mem-card {
  padding: var(--space-3);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--card-shadow);
}
.member-grid--framed .mem-card .badge {
  top: var(--space-4);
  inset-inline-start: var(--space-4);
}
.member-grid--portrait .mem-card img,
.member-grid--portrait .mem-card__initial {
  aspect-ratio: 3 / 4;
}

/* flow: a wrapping grid, or one row the reader swipes. The rail never moves
   on its own - the visitor drives it, the same bargain gallery-scroll makes. */
.member-grid--grid .lp-grid {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
/* marquee is the rail plus a behaviour. With no behaviour library it IS the
   rail, so it takes every rail rule and adds nothing of its own. */
.member-grid--rail,
.member-grid--marquee {
  padding-inline: 0;
}
.member-grid--rail .lp-grid,
.member-grid--marquee .lp-grid {
  display: flex;
  padding-inline: var(--space-4);
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  scrollbar-width: none;
  padding-block: var(--space-2);
  max-width: none;
}
.member-grid--rail .lp-grid::-webkit-scrollbar,
.member-grid--marquee .lp-grid::-webkit-scrollbar {
  display: none;
}
.member-grid--rail .mem-card,
.member-grid--marquee .mem-card {
  flex: 0 0 auto;
  width: min(42vw, 11rem);
  scroll-snap-align: start;
}
.member-grid--rail .lp-grid:focus-visible,
.member-grid--marquee .lp-grid:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* The carousel's controls stay hidden while the marquee moves the row, and
   show once its stop control is pressed. */
.member-grid--marquee:has(.hub-marquee-running):not(:has(.hub-marquee-control[aria-pressed="true"])) .hub-carousel-controls {
  display: none;
}

/* controls: where the previous and next arrows sit, read by the behaviour
   library from these properties. phone: whether a phone shows them. */
.member-grid--top {
  --hub-carousel-controls: top;
  --hub-carousel-look: round;
}
.member-grid--edges {
  --hub-carousel-controls: edges;
  --hub-carousel-look: round;
}
.member-grid--arrows {
  --hub-carousel-phone: show;
}
.member-grid--swipe {
  --hub-carousel-phone: hide;
}
.member-grid--marquee {
  --hub-marquee-look: round;
}
/* The pair keeps to the column the heading above it sits in. */
.member-grid .hub-carousel-controls--top {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
/* Over a photograph the arrows need a ground of their own. */
.member-grid .hub-carousel-controls--edges .hub-carousel-control {
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--card-shadow);
}
/* The marquee's stop control shares the arrows' row, at its end. */
.member-grid--marquee {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.member-grid--marquee .lp-grid,
.member-grid--marquee .lp-members__empty {
  flex: 0 0 100%;
}
.member-grid--marquee .hub-carousel-controls--top {
  margin-inline: 0;
  padding-inline: 0 var(--space-2);
}
.member-grid--marquee .hub-marquee-control {
  margin: 0 var(--space-4) var(--space-3) 0;
}

@media (min-width: 48rem) {
  .member-grid .lp-grid {
    gap: var(--space-5);
  }
  .member-grid--grid .lp-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
  .member-grid--rail .mem-card,
  .member-grid--marquee .mem-card {
    width: 13rem;
  }
  .member-grid .mem-card--join {
    min-height: 11rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    scroll-behavior: smooth;
  }
  .member-grid .mem-card__cta {
    transition: color var(--transition-fast);
  }
}

/* With scripting off nothing can build the previous and next controls, and
   the hidden scroll bar would leave a mouse no way along the row, so both
   rows wrap like the grid rung. */
@media (scripting: none) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    overflow-x: visible;
    max-width: var(--container-max);
  }
  .member-grid--rail .mem-card,
  .member-grid--marquee .mem-card {
    width: auto;
  }
}
@media (scripting: none) and (min-width: 48rem) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
}
.member-grid:not(.member-grid--moving):not(.member-grid--marquee) {
  --hub-motion: none;
}
/* === /pattern member-grid@7 === */

/* === pattern trust-row@5 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* trust-row v2 - tokens only, selectors prefixed */
.trust-row {
  overflow-wrap: var(--long-words, break-word);
}
.trust-row :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .trust-row {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}

/* The hairlines and the space inside them are the whole frame: no background,
   no card. Do not add one. The padding, not the rule, is what separates the
   strip from its neighbours, so keep it whatever --color-rule looks like. */
.trust-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-6), 6vw, var(--space-12));
  margin-block: clamp(var(--space-6), 6vh, var(--space-12)) clamp(var(--space-5), 4vh, var(--space-8));
  padding-block: clamp(var(--space-6), 4vh, var(--space-8));
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-body);
}

.trust-row-membership {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.trust-row-mark {
  flex: none;
  width: auto;
  height: var(--trust-row-mark-height, 2.375rem);
  max-width: 100%;
}
.trust-row-membership-name {
  margin: 0;
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}
/* --color-text on --color-surface-soft is a guaranteed pair; a brand tint
   under this label is not. Do not swap the ground. */
.trust-row-membership-status {
  display: inline-block;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-soft);
  border-radius: var(--chip-radius);
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: 700;
}

.trust-row-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-row-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 9rem;
  color: var(--color-text-soft);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
/* Keep the mix. Bare --color-primary-dark is a dark ink and disappears on a
   dark brand. The icon is aria-hidden either way, so never drop a label and
   leave the glyph standing for it. */
.trust-row-badge-icon {
  display: flex;
  color: color-mix(in srgb, var(--color-primary-dark) 65%, var(--color-text));
}
.trust-row-badge-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* Wide phone up: the lockup and the badges share one row and wrap. */
@media (min-width: 35rem) {
  .trust-row {
    flex-direction: row;
  }
}
/* === /pattern trust-row@5 === */

/* === page /preview-home-c: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
.gs-head{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.gs-head-in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:26px;min-height:76px}
.gs-logo{height:44px;width:auto;display:block}
.gs-nav{margin-left:auto}
.gs-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.gs-nav ul ul{display:none}
.gs-nav a{color:var(--ink);font-weight:500;font-size:16px;text-decoration:none}
.gs-nav a:hover{color:var(--teal-deep)}
.gs-cta{display:flex;gap:12px;align-items:center;margin-left:auto}
.gs-nav:has(li) + .gs-cta{margin-left:6px}
.gs-login,.gs-join{display:inline-flex;align-items:center;min-height:44px;border-radius:999px;padding:8px 22px;font-weight:700;font-size:15px;text-decoration:none}
.gs-login{border:2px solid var(--line);color:var(--navy)}
.gs-login:hover{border-color:var(--navy)}
.gs-join{background:var(--orange);color:var(--navy)}
.gs-join:hover{background:var(--orange-deep)}
.gs-head a:focus-visible,.gs-foot a:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px}
@media(max-width:980px){.gs-nav{display:none}.gs-cta{margin-left:auto}}
@media(max-width:520px){.gs-head-in{gap:10px;padding:0 16px;min-height:64px}.gs-logo{height:28px}.gs-cta{gap:6px}.gs-login{border:0;padding:8px 6px}.gs-join{padding:8px 14px}}
@media(max-width:340px){.gs-logo{height:22px}}
.gs-foot{background:var(--navy);color:rgba(255,255,255,.8);padding:60px 24px 34px}
.gs-foot-in{max-width:1180px;margin:0 auto 40px;display:grid;grid-template-columns:2fr 3fr;gap:34px}
.gs-logo-foot{height:40px;width:auto;filter:brightness(0) invert(1);opacity:.92;display:block}
.gs-foot-brand p{font-size:15.5px;margin-top:14px;max-width:300px}
.gs-foot-menu ul{list-style:none;margin:0;padding:0;columns:3 160px;column-gap:34px}
.gs-foot-menu a,.gs-legal a{color:rgba(255,255,255,.8);display:inline-block;padding:5px 0;font-size:15.5px;text-decoration:none}
.gs-foot-menu a:hover,.gs-legal a:hover{color:var(--teal)}
.gs-foot-bottom{max-width:1180px;margin:0 auto;border-top:1px solid rgba(255,255,255,.15);padding-top:24px;font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px}
.gs-legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 20px}
@media(max-width:780px){.gs-foot-in{grid-template-columns:1fr}}

.gs-brand{display:block;flex:0 0 auto}

.gs-old{--teal:#2BBFB0; --teal-deep:#16786E; --orange:#F5821F; --orange-deep:#D96C0E;
  --navy:#14142B; --ink:#22223A; --muted:#5A5A72;
  --paper:#FBF8F3; --card:#FFFFFF; --line:#E9E2D6; --tint:#EAF7F5;
  --r:16px; --shadow:0 10px 30px rgba(20,20,43,.08);}
.gs-old *{margin:0;padding:0;box-sizing:border-box}
.gs-old{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px}
.gs-old img{max-width:100%;height:auto;display:block}
.gs-old a{color:var(--teal-deep);text-decoration:none}
.gs-old h1,.gs-old h2,.gs-old h3{font-family:var(--font-heading);color:var(--navy);line-height:1.15;letter-spacing:-.01em}
.gs-old h2{font-size:clamp(30px,4vw,44px);margin-bottom:14px}
.gs-old h3{font-size:22px;margin-bottom:8px}
.gs-old .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.gs-old .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:12px}
.gs-old section{padding:84px 0}
.gs-old .lead{font-size:19px;color:var(--muted);max-width:720px}
.gs-old .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:17px;padding:15px 30px;border-radius:999px;transition:.2s;cursor:pointer;border:2px solid transparent}
.gs-old .btn-solid{background:var(--orange);color:#fff;box-shadow:0 8px 22px rgba(245,130,31,.35)}
.gs-old .btn-solid:hover{background:var(--orange-deep);transform:translateY(-2px)}
.gs-old .btn-ghost{border-color:#fff;color:#fff}
.gs-old .btn-ghost:hover{background:rgba(255,255,255,.15)}
.gs-old .btn-ghost-dark{border-color:var(--navy);color:var(--navy)}
.gs-old .btn-ghost-dark:hover{background:var(--navy);color:#fff}
.gs-old :focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.gs-old .btn-sm{padding:10px 22px;font-size:15px}
.gs-old .hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:0;color:#fff;
  background:
    radial-gradient(900px 500px at 78% 24%, rgba(43,191,176,.5), transparent 60%),
    radial-gradient(700px 460px at 18% 80%, rgba(245,130,31,.32), transparent 60%),
    linear-gradient(160deg,#1C4E56 0%, #14142B 100%);}
.gs-old .hero picture,.gs-old .hero .hero-img{position:absolute;inset:0}
.gs-old .hero .hero-img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.gs-old .hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,43,.72) 0%,rgba(20,20,43,.45) 46%,rgba(20,20,43,.12) 100%)}
.gs-old .hero .wrap{position:relative;z-index:2;width:100%}
.gs-old .hero-inner{display:flex;flex-direction:column;align-items:flex-start;max-width:640px;padding:120px 0 90px}
.gs-old .hero h1{font-size:clamp(40px,5.6vw,66px);color:#fff;margin-bottom:18px}
.gs-old .hero h1 em{font-style:italic;color:var(--teal)}
.gs-old .hero p{font-size:clamp(17px,2vw,20px);color:rgba(255,255,255,.92);margin-bottom:30px;max-width:560px}
.gs-old .hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.gs-old .trust-row{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:15px;font-weight:600;color:rgba(255,255,255,.95)}
.gs-old .trust-row span{display:inline-flex;align-items:center;gap:8px}
.gs-old .tick{width:19px;height:19px;flex:0 0 19px}
@media (prefers-reduced-motion:reduce){
.gs-old .btn:hover{transform:none}
}
.gs-old .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.gs-old .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.gs-old .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;box-shadow:var(--shadow)}
.gs-old .card .ic{width:52px;height:52px;border-radius:14px;background:var(--tint);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:24px}
.gs-old .card p{color:var(--muted);font-size:16px}
.gs-old .tint{background:var(--tint)}
.gs-old .stats{display:flex;justify-content:center;gap:clamp(30px,8vw,110px);text-align:center;flex-wrap:wrap}
.gs-old .stats b{display:block;font-family:var(--font-heading);font-size:clamp(38px,5vw,58px);color:var(--teal-deep)}
.gs-old .stats span{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.gs-old .chips{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.gs-old .chips a{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:12px 22px;font-weight:600;color:var(--navy);font-size:16px;transition:.2s}
.gs-old .chips a:hover{border-color:var(--teal);color:var(--teal-deep);transform:translateY(-2px)}
.gs-old .guide h3{margin-top:44px;font-size:26px}
.gs-old .guide .ch{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:6px;margin-top:44px}
.gs-old .guide .ch + h3{margin-top:0}
.gs-old .guide p{margin-bottom:16px;color:var(--ink);max-width:820px}
.gs-old .pull{border-left:4px solid var(--teal);background:var(--tint);border-radius:0 12px 12px 0;padding:20px 24px;font-family:var(--font-heading);font-size:20px;color:var(--navy);margin:26px 0;max-width:820px}
.gs-old .two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:820px;margin:22px 0}
.gs-old .flag-card{border-radius:14px;padding:22px;border:1px solid var(--line);background:#fff}
.gs-old .flag-card.good{border-top:4px solid var(--teal)}
.gs-old .flag-card.bad{border-top:4px solid var(--orange)}
.gs-old .flag-card ul{list-style:none}
.gs-old .flag-card li{padding:7px 0 7px 26px;position:relative;font-size:15.5px;color:var(--muted)}
.gs-old .flag-card.good li::before{content:"✓";position:absolute;left:0;color:var(--teal-deep);font-weight:700}
.gs-old .flag-card.bad li::before{content:"✗";position:absolute;left:0;color:var(--orange-deep);font-weight:700}
.gs-old .faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;box-shadow:var(--shadow)}
.gs-old .faq summary{cursor:pointer;padding:20px 24px;font-weight:700;color:var(--navy);font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.gs-old .faq summary::after{content:"+";font-size:24px;color:var(--teal-deep);transition:.2s}
.gs-old .faq details[open] summary::after{transform:rotate(45deg)}
.gs-old .faq .ans{padding:0 24px 22px;color:var(--muted)}
.gs-old .loc-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;margin-top:20px}
.gs-old .flags{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.gs-old .flags a{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 10px;text-align:center;box-shadow:var(--shadow);color:var(--navy);font-weight:700;font-size:15px;transition:.2s}
.gs-old .flags a:hover{transform:translateY(-3px);border-color:var(--teal)}
.gs-old .flags .fl{font-size:34px;display:block;margin-bottom:8px;line-height:1}
.gs-old .loc-links{font-size:15.5px;color:var(--muted);margin-top:18px}
.gs-old .dark{background:var(--navy);color:rgba(255,255,255,.88)}
.gs-old .dark h2{color:#fff}
.gs-old .dark h2 em{color:var(--teal);font-style:italic}
.gs-old .dark .eyebrow{color:var(--teal)}
.gs-old .dark-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center}
.gs-old .tip-box{border:1px solid rgba(245,130,31,.5);background:rgba(245,130,31,.08);border-radius:12px;padding:16px 20px;font-size:15.5px;margin:22px 0}
.gs-old .tip-box b{color:var(--orange)}
.gs-old .feat-row{display:flex;gap:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px 20px;margin-bottom:14px;align-items:flex-start}
.gs-old .feat-row .fi{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:19px}
.gs-old .feat-row b{color:#fff;display:block;margin-bottom:2px}
.gs-old .feat-row p{font-size:15px;color:rgba(255,255,255,.75)}
.gs-old .blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.gs-old .blog-head h2 em{color:var(--teal);font-style:italic}
.gs-old .bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.2s}
.gs-old .bcard:hover{transform:translateY(-4px)}
.gs-old .bcard .bimg{height:150px;display:flex;align-items:center;justify-content:center;font-size:44px}
.gs-old .bcard .bbody{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.gs-old .bcard .bcat{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:8px}
.gs-old .bcard h3{font-size:20px}
.gs-old .bcard p{color:var(--muted);font-size:15.5px;margin:8px 0 14px;flex:1}
.gs-old .bcard .bmore{font-weight:700;color:var(--teal-deep);font-size:15px}
.gs-old .cta-orange{background:linear-gradient(160deg,#F5821F,#D96C0E);color:#fff;text-align:center;padding:90px 24px}
.gs-old .cta-orange .eyebrow{color:#fff;opacity:.85}
.gs-old .cta-orange h2{color:#fff;font-size:clamp(34px,4.6vw,52px)}
.gs-old .cta-orange h2 em{font-style:italic}
.gs-old .cta-orange p{color:rgba(255,255,255,.95);max-width:600px;margin:8px auto 30px;font-size:18px}
.gs-old .btn-white{background:#fff;color:var(--orange-deep);border-radius:999px;padding:14px 28px;font-weight:700;font-size:16px;border:none;cursor:pointer;transition:.2s}
.gs-old .cta-orange .hero-btns{margin:0 auto;width:max-content;max-width:100%}
.gs-old .cta-note{font-size:14.5px;color:rgba(255,255,255,.85);margin-top:20px;display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap}
@media(max-width:980px){
.gs-old .grid3,.gs-old .grid4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
.gs-old .loc-grid,.gs-old .dark-grid{grid-template-columns:1fr;gap:44px}
}
@media(max-width:680px){
.gs-old section{padding:60px 0}
.gs-old .grid3,.gs-old .grid4,.gs-old .two-col{grid-template-columns:1fr}
.gs-old .hero-inner{padding:96px 0 70px;width:100%}
.gs-old .hero{min-height:86vh}
.gs-old .hero-btns{flex-direction:column;width:100%;max-width:340px}
.gs-old .hero-btns .btn{width:100%;justify-content:center;text-align:center;padding:15px 20px}
.gs-old .flags{grid-template-columns:repeat(2,1fr)}
.gs-old .btn-white{width:100%}
}
.gs-old .btn-solid{color:var(--navy)}
.gs-old .cta-orange{background:linear-gradient(160deg,#B85A0B,#9A4B08)}
.gs-old .btn-white{color:#9A4B08}
.gs-old .em-teal{color:var(--teal-deep);font-style:italic}
.gs-old .fs17{font-size:17px}
.gs-old .mb8{margin-bottom:8px}.gs-old .mb10{margin-bottom:10px}.gs-old .mb30{margin-bottom:30px}.gs-old .mt12{margin-top:12px}
.gs-old .bg-tint{background:var(--tint)}.gs-old .bg-peach{background:#FDF0E3}.gs-old .bg-navy{background:var(--navy)}
.gs-old .w860{max-width:860px}.gs-old .jc{justify-content:center}
.gs-old .loc-grid.solo,.gs-old .dark-grid.solo{grid-template-columns:1fr;max-width:820px}
.gs-old .hero{min-height:92svh}
@media(max-width:680px){.gs-old .hero{min-height:86svh}}
.gs-old .members-intro{padding-bottom:0}
/* === /page /preview-home-c === */

/* === page /usa: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
.gs-old .page-hero{position:relative;min-height:58svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#14142B}
.gs-old .page-hero .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.gs-old .page-hero .ph-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,43,.84) 0%,rgba(20,20,43,.55) 46%,rgba(20,20,43,.2) 100%),linear-gradient(0deg,rgba(20,20,43,.45) 0%,transparent 42%)}
.gs-old .page-hero .wrap{position:relative;z-index:2;padding:130px 24px 56px;width:100%}
.gs-old .page-hero h1{font-family:var(--font-heading);font-size:clamp(32px,5vw,52px);line-height:1.12;max-width:760px;color:#fff}
.gs-old .page-hero p{margin-top:16px;font-size:17px;color:rgba(255,255,255,.88);max-width:640px;line-height:1.6}
.gs-old .page-hero .btn{margin-top:26px;margin-bottom:6px;margin-right:10px}
.gs-old .content{padding:64px 0}
.gs-old .content.content-after{padding-top:24px}
.gs-old .content .wrap{max-width:820px}
.gs-old .content h2{font-family:var(--font-heading);font-size:clamp(24px,3.4vw,32px);margin:44px 0 14px;color:var(--navy)}
.gs-old .content h2:first-child{margin-top:0}
.gs-old .content p{font-size:16.5px;line-height:1.75;color:#3A3A4E;margin-bottom:16px}
.gs-old .content ul{margin:0 0 16px 22px}
.gs-old .content li{font-size:16.5px;line-height:1.7;color:#3A3A4E;margin-bottom:8px}
.gs-old .content a{color:#1C4E56;font-weight:600}
.gs-old .cta-band{background:var(--navy);color:#fff;text-align:center;padding:60px 24px}
.gs-old .cta-band h2{font-family:var(--font-heading);font-size:clamp(26px,4vw,38px);color:#fff}
.gs-old .cta-band p{margin:12px auto 24px;color:rgba(255,255,255,.8);max-width:520px;line-height:1.6}
@media(max-width:680px){.gs-old .page-hero .wrap{padding:110px 20px 44px}.gs-old .page-hero .btn{width:100%;justify-content:center}}
.gs-old .content h3{font-family:var(--font-heading);font-size:20px;margin:24px 0 8px;color:var(--navy)}
/* === /page /usa === */

/* === page /home-new: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
/* the new look (v2): navy, cream, copper; Cormorant Garamond + Inter */
.gs2-hero,.gs-old.gs2{--n:#04091a;--n-seam:#020b1c;--cr:#efe4d8;--cr-dim:rgba(239,228,216,.8);--cu:#c87d5a;--cu-btn:#a65a3b;--cu-text:#e3a283;--ln:rgba(239,228,216,.22);--card2:#0c1530}
body:has(.gs2-hero){background:#04091a}
.gs2-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;background:radial-gradient(120% 90% at 62% 36%,#0a1430 0%,var(--n) 55%,var(--n-seam) 100%);display:flex;flex-direction:column;padding:22px 22px calc(30px + env(safe-area-inset-bottom));color:var(--cr);font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.gs2-hero a,.gs2-head a{color:inherit;text-decoration:none}
.gs2-head{position:absolute;top:0;left:0;right:0;z-index:6;color:#efe4d8;font-family:'Inter',system-ui,sans-serif}
.gs2-head a:focus-visible{outline:2px solid #e3a283;outline-offset:3px}
.gs2-brand{position:absolute;top:20px;left:22px;z-index:5;display:block}
.gs2-logo{display:block;height:32px;width:auto;filter:brightness(0) invert(1)}
.gs2-login{position:absolute;top:22px;right:22px;z-index:5;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,228,216,.85);padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
.gs2-login:hover{color:#fff}
.gs2-photo{display:block;position:relative;width:calc(100% + 44px);margin:-22px -22px 24px;height:48svh;min-height:320px}
.gs2-photo img{width:100%;height:100%;object-fit:cover;object-position:54% 20%;display:block;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
.gs2-scrim{display:none}
.gs2-inner{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;min-height:0}
.gs2-hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(3rem,15vw,4.4rem);line-height:.96;letter-spacing:-.5px;color:var(--cr)}
.gs2-hero .gs2-cu{color:var(--cu);display:block}
.gs2-rule{width:56px;height:2px;background:var(--cu);margin:20px 0 18px;border-radius:2px}
.gs2-sub{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.25rem,5.2vw,1.55rem);font-weight:500;line-height:1.25;color:var(--cr);max-width:20ch}
.gs2-cta-row{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.gs2-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;padding:16px 26px;min-height:48px;border-radius:9px;transition:transform .18s,background .2s,border-color .2s,color .2s;flex:1 1 auto;min-width:150px}
.gs2-g{font-size:1.05rem;line-height:1}
.gs2-btn-primary{background:var(--cu-btn);color:#fff;box-shadow:0 12px 30px rgba(186,108,75,.32)}
.gs2-btn-primary:hover{background:#8f4d32;transform:translateY(-2px)}
.gs2-btn-ghost{background:transparent;color:var(--cr);border:1.5px solid rgba(239,228,216,.4)}
.gs2-btn-ghost:hover{border-color:var(--cu);color:#fff;background:rgba(200,125,90,.12);transform:translateY(-2px)}
.gs2-hero a:focus-visible{outline:2px solid var(--cu-text);outline-offset:3px}
.gs2-trust{list-style:none;display:flex;align-items:center;gap:14px;margin:auto 0 0;padding:30px 0 0;flex-wrap:wrap}
.gs2-trust li{display:flex;align-items:center;gap:9px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cr-dim);font-weight:600}
.gs2-trust svg{color:var(--cu);flex:0 0 auto}
.gs2-trust .gs2-sep{width:1px;height:18px;background:var(--ln)}
@media (min-width:760px){
  .gs2-hero{padding:40px 56px 44px}
  .gs2-brand{top:40px;left:56px;z-index:3}
  .gs2-logo{height:40px}
  .gs2-login{top:40px;right:56px}
  .gs2-photo{position:absolute;z-index:0;right:16%;bottom:0;top:0;left:auto;margin:0;width:auto;height:100%;aspect-ratio:568/784;min-height:0}
  .gs2-photo img{object-position:left bottom;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 80%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 80%,transparent 100%)}
  .gs2-scrim{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,var(--n) 26%,rgba(4,9,26,.4) 52%,rgba(4,9,26,0) 72%)}
  .gs2-inner{display:block}
  .gs2-copy{position:absolute;top:50%;left:56px;transform:translateY(-50%);max-width:52%;margin:0}
  .gs2-hero h1{font-size:clamp(4.2rem,7.6vw,6.4rem)}
  .gs2-sub{font-size:1.6rem;max-width:24ch;margin-top:8px}
  .gs2-cta-row{flex-wrap:nowrap}
  .gs2-btn{flex:0 0 auto}
  .gs2-trust{position:absolute;left:56px;bottom:40px;gap:22px;padding-top:0;margin:0}
  .gs2-trust li{font-size:.76rem}
}
@media (min-width:1200px){.gs2-hero h1{font-size:6.4rem}.gs2-brand,.gs2-trust,.gs2-copy{left:64px}.gs2-hero{padding:44px 64px 48px}}
@media (prefers-reduced-motion:reduce){.gs2-btn{transition:none}.gs2-btn:hover{transform:none}}

/* the current homepage's sections, in the new colours */
.gs-old.gs2{--teal:var(--cu);--teal-deep:var(--cu-text);--orange:var(--cu-btn);--orange-deep:#8f4d32;--navy:var(--cr);--ink:var(--cr);--muted:rgba(239,228,216,.78);--paper:var(--n);--card:var(--card2);--line:rgba(239,228,216,.16);--tint:#07102a;--shadow:0 10px 30px rgba(0,0,0,.35);background:var(--n);color:var(--cr);font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif}
.gs-old.gs2 h1,.gs-old.gs2 h2,.gs-old.gs2 h3,.gs-old.gs2 .stats b,.gs-old.gs2 .pull{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;color:var(--cr)}
.gs-old.gs2 h2{font-size:clamp(34px,4.4vw,50px)}
.gs-old.gs2 .eyebrow,.gs-old.gs2 .bcard .bcat,.gs-old.gs2 .guide .ch{color:var(--cu-text)}
.gs-old.gs2 .btn-solid{background:var(--cu-btn);color:#fff;box-shadow:0 12px 30px rgba(186,108,75,.28);border-radius:9px;letter-spacing:.06em}
.gs-old.gs2 .btn-solid:hover{background:#8f4d32}
.gs-old.gs2 .btn-ghost{border-radius:9px}
.gs-old.gs2 .dark,.gs-old.gs2 .bg-navy{background:var(--n-seam)}
.gs-old.gs2 .chips a,.gs-old.gs2 .bcard,.gs-old.gs2 .flag-card,.gs-old.gs2 .faq details,.gs-old.gs2 .flags a,.gs-old.gs2 .card{background:var(--card2);color:var(--cr);border-color:var(--line)}
.gs-old.gs2 .bg-peach{background:#2a1a14}
.gs-old.gs2 .card .ic{background:rgba(200,125,90,.14)}
.gs-old.gs2 .pull{background:#07102a;border-left-color:var(--cu)}
.gs-old.gs2 .cta-orange{background:linear-gradient(160deg,#a65a3b,#7d4029)}
.gs-old.gs2 .cta-orange .btn-white{color:#7d4029}
.gs-old.gs2 a:focus-visible{outline-color:var(--cu-text)}
body:has(.gs2-hero) .heading-block,body:has(.gs2-hero) .member-grid{background:var(--n,#04091a);color:#efe4d8}
body:has(.gs2-hero) .heading-block h2{color:#efe4d8;font-family:'Cormorant Garamond',Georgia,serif}

body:has(.gs2-hero) .member-grid,body:has(.gs2-hero) .member-grid p,body:has(.gs2-hero) .member-grid li{color:#efe4d8}
body:has(.gs2-hero) .member-grid a{color:#e3a283}
body:has(.gs2-hero) .heading-block p{color:rgba(239,228,216,.78)}

@media (min-width:760px){.gs2-hero{background:var(--n)}}

/* phone: photo fills the top of the screen, the title and buttons sit at the foot of the first screen, the ID badge clear above the title */
@media (max-width:759px){
  .gs2-hero{min-height:100svh}
  .gs2-photo{position:absolute;top:0;left:0;right:0;margin:0;width:100%;height:70svh;min-height:0;overflow:hidden;z-index:0}
  .gs2-photo img{height:140%;object-fit:cover;object-position:50% 0;-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 70%);mask-image:linear-gradient(to bottom,#000 50%,transparent 70%)}
  .gs2-inner{justify-content:flex-end}
  .gs2-copy{margin-top:auto;position:relative;z-index:3}
  .gs2-hero h1{font-size:clamp(2.8rem,12.5vw,4rem);text-shadow:0 2px 18px rgba(4,9,26,.7)}
  .gs2-rule{margin:14px 0 12px}
  .gs2-cta-row{margin-top:18px;gap:10px}
  .gs2-btn{min-width:0;padding:15px 16px;letter-spacing:.14em}
  .gs2-trust{margin-top:26px;padding-top:0;gap:10px 14px}
  .gs2-badge{position:absolute;right:0;top:-96px;width:84px;height:84px;border-radius:50%;
    background-image:url("https://b.hub-cdn.com/images/generic/97715dc2-9fe0-4575-88b8-75da3648d4f9.webp");
    background-size:279px 386px;background-position:-176px -275px;background-repeat:no-repeat;box-shadow:0 6px 18px rgba(0,0,0,.45)}
}
@media (min-width:760px){.gs2-badge{display:none}}

.gs-foot .gs-foot-oda{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.75);max-width:340px;margin-top:14px}
body:has(.gs2-hero) .gs-foot{background:#020b1c;border-top:1px solid rgba(239,228,216,.12)}
/* === /page /home-new === */

/* === page /home-bright: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
/* bright scheme (preview): ivory and champagne grounds, ink type, copper accents, arched portrait */
.gs2-light,.gs-old.gs2-lt{--iv:#fbf7f2;--ch:#f3e7da;--bl:#f7e6de;--ink:#1c1b2e;--cuL:#b5714e;--cuT:#8a4e33;--muteL:#5e5868}
body:has(.gs2-light){background:#fbf7f2}
.gs2-head.gs2-light{color:var(--ink)}
.gs2-head.gs2-light .gs2-logo{filter:none}
.gs2-head.gs2-light .gs2-login{color:var(--ink)}
.gs2-head.gs2-light .gs2-login:hover{color:var(--cuT)}
.gs2-head.gs2-light a:focus-visible,.gs2-hero.gs2-light a:focus-visible{outline-color:var(--cuT)}
.gs2-hero.gs2-light{background:radial-gradient(110% 90% at 70% 30%,#fffdf9 0%,var(--iv) 50%,var(--ch) 100%);color:var(--ink)}
.gs2-hero.gs2-light h1{color:var(--ink);text-shadow:none}
.gs2-hero.gs2-light .gs2-cu{color:var(--cuL)}
.gs2-hero.gs2-light .gs2-rule{background:var(--cuL)}
.gs2-hero.gs2-light .gs2-sub{color:var(--ink)}
.gs2-hero.gs2-light .gs2-btn-primary{background:#a65a3b;color:#fff;box-shadow:0 14px 30px rgba(166,90,59,.28)}
.gs2-hero.gs2-light .gs2-btn-primary:hover{background:#8a4e33}
.gs2-hero.gs2-light .gs2-btn-ghost{color:var(--ink);border-color:rgba(28,27,46,.35);background:rgba(255,255,255,.55)}
.gs2-hero.gs2-light .gs2-btn-ghost:hover{border-color:var(--cuL);color:var(--cuT);background:#fff}
.gs2-hero.gs2-light .gs2-trust li{color:var(--muteL)}
.gs2-hero.gs2-light .gs2-trust svg{color:var(--cuL)}
.gs2-hero.gs2-light .gs2-trust .gs2-sep{background:rgba(28,27,46,.18)}
.gs2-hero.gs2-light .gs2-scrim{display:none}
.gs2-hero.gs2-light .gs2-photo img{-webkit-mask-image:none;mask-image:none}
@media (min-width:760px){
  .gs2-hero.gs2-light .gs2-photo{top:110px;bottom:70px;right:7%;border-radius:999px 999px 28px 28px;overflow:hidden;box-shadow:0 30px 70px rgba(28,27,46,.22),0 0 0 10px rgba(255,255,255,.7),0 0 0 11px rgba(181,113,78,.35)}
  .gs2-hero.gs2-light .gs2-photo img{object-position:50% 0}
}
@media (max-width:759px){
  .gs2-hero.gs2-light{padding-top:76px}
  .gs2-hero.gs2-light .gs2-photo{position:relative;left:auto;right:auto;top:auto;width:100%;height:46svh;margin:0 0 22px;border-radius:999px 999px 24px 24px;overflow:hidden;box-shadow:0 20px 50px rgba(28,27,46,.2),0 0 0 6px rgba(255,255,255,.75),0 0 0 7px rgba(181,113,78,.35)}
  .gs2-hero.gs2-light .gs2-photo img{height:140%;object-position:50% 0}
  .gs2-hero.gs2-light .gs2-inner{justify-content:flex-start}
  .gs2-hero.gs2-light .gs2-copy{margin-top:0}
  .gs2-hero.gs2-light .gs2-badge{top:-118px;right:10px}
}

/* the sections below, bright */
.gs-old.gs2.gs2-lt{--teal:var(--cuL);--teal-deep:var(--cuT);--orange:#a65a3b;--orange-deep:#8a4e33;--navy:var(--ink);--ink:#1c1b2e;--muted:var(--muteL);--paper:var(--iv);--card:#fff;--line:#eadccc;--tint:var(--ch);--shadow:0 14px 34px rgba(28,27,46,.08);background:var(--iv);color:var(--ink)}
.gs-old.gs2.gs2-lt h1,.gs-old.gs2.gs2-lt h2,.gs-old.gs2.gs2-lt h3,.gs-old.gs2.gs2-lt .stats b,.gs-old.gs2.gs2-lt .pull{color:var(--ink)}
.gs-old.gs2.gs2-lt .eyebrow,.gs-old.gs2.gs2-lt .bcard .bcat,.gs-old.gs2.gs2-lt .guide .ch,.gs-old.gs2.gs2-lt .em-teal,.gs-old.gs2.gs2-lt h2 em{color:var(--cuT)}
.gs-old.gs2.gs2-lt .chips a,.gs-old.gs2.gs2-lt .bcard,.gs-old.gs2.gs2-lt .flag-card,.gs-old.gs2.gs2-lt .faq details,.gs-old.gs2.gs2-lt .flags a,.gs-old.gs2.gs2-lt .card{background:#fff;color:var(--ink);border-color:#eadccc}
.gs-old.gs2.gs2-lt .card .ic{background:var(--bl)}
.gs-old.gs2.gs2-lt .dark,.gs-old.gs2.gs2-lt .bg-navy{background:var(--bl);color:var(--ink)}
.gs-old.gs2.gs2-lt .dark h2,.gs-old.gs2.gs2-lt .dark .eyebrow{color:var(--ink)}
.gs-old.gs2.gs2-lt .dark h2 em{color:var(--cuT)}
.gs-old.gs2.gs2-lt .feat-row{background:#fff;border-color:#eadccc}
.gs-old.gs2.gs2-lt .feat-row b{color:var(--ink)}
.gs-old.gs2.gs2-lt .feat-row p{color:var(--muteL)}
.gs-old.gs2.gs2-lt .feat-row .fi{background:var(--ch)}
.gs-old.gs2.gs2-lt .tip-box{background:#fff;border-color:rgba(166,90,59,.4)}
.gs-old.gs2.gs2-lt .tip-box b{color:var(--cuT)}
.gs-old.gs2.gs2-lt .pull{background:var(--ch)}
.gs-old.gs2.gs2-lt .bg-peach{background:var(--bl)}
.gs-old.gs2.gs2-lt .tint{background:var(--ch)}
.gs-old.gs2.gs2-lt a:focus-visible{outline-color:var(--cuT)}
body:has(.gs2-light) .heading-block,body:has(.gs2-light) .member-grid{background:#fbf7f2;color:#1c1b2e}
body:has(.gs2-light) .heading-block h2{color:#1c1b2e}
body:has(.gs2-light) .heading-block p,body:has(.gs2-light) .member-grid,body:has(.gs2-light) .member-grid p,body:has(.gs2-light) .member-grid li{color:#5e5868}
body:has(.gs2-light) .member-grid a{color:#8a4e33}
body:has(.gs2-light) .gs-foot{background:#1c1b2e;border-top:0}
/* === /page /home-bright === */

/* === page /home-couple: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
/* couple hero (preview): the photo fills the screen, navy veil behind the words */
.gs2-hero.gs2-couple .gs2-photo img{-webkit-mask-image:none;mask-image:none}
@media (min-width:760px){
  .gs2-hero.gs2-couple .gs2-photo{inset:0;right:0;left:0;width:100%;height:100%;aspect-ratio:auto}
  .gs2-hero.gs2-couple .gs2-photo img{object-fit:cover;object-position:72% 30%}
  .gs2-hero.gs2-couple .gs2-scrim{background:linear-gradient(to right,rgba(4,9,26,.94) 0%,rgba(4,9,26,.82) 30%,rgba(4,9,26,.35) 55%,rgba(4,9,26,0) 75%),linear-gradient(to top,rgba(4,9,26,.7) 0%,rgba(4,9,26,0) 30%)}
  .gs2-hero.gs2-couple .gs2-copy{max-width:46%}
}
@media (max-width:759px){
  .gs2-hero.gs2-couple .gs2-photo{height:66svh}
  .gs2-hero.gs2-couple .gs2-photo img{height:100%;object-position:66% 30%;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
  .gs2-hero.gs2-couple .gs2-scrim{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(4,9,26,.55) 0%,rgba(4,9,26,0) 18%)}
}

body:has(.gs2-couple) .gs2-login{background:rgba(4,9,26,.6);border-radius:999px;padding:10px 18px;color:#efe4d8}
body:has(.gs2-couple) .gs2-login:hover{background:rgba(4,9,26,.8)}
/* === /page /home-couple === */

/* === page /home-sapphire: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
/* colour preview: Sapphire and blush */
.gs2-hero.gs2-t-sapphire,.gs-old.gs2.gs2-t-sapphire{--n:#14285e;--n-seam:#0e1d47;--cr:#ffffff;--cr-dim:rgba(255,255,255,.82);--cu:#f2c6c2;--cu-text:#f2c6c2;--cu-btn:#d9a441;--card2:#1d3577;--ln:rgba(255,255,255,.22)}
body:has(.gs2-t-sapphire){background:#14285e}
.gs2-hero.gs2-t-sapphire{background:radial-gradient(120% 90% at 62% 36%,#1f3a80 0%,#14285e 55%,#0e1d47 100%)}
.gs2-hero.gs2-t-sapphire .gs2-btn-primary{background:#d9a441;color:#14285e;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.gs2-hero.gs2-t-sapphire .gs2-btn-primary:hover{background:#e6b85c}
.gs2-hero.gs2-t-sapphire .gs2-btn-ghost:hover{border-color:#f2c6c2}
.gs2-hero.gs2-t-sapphire .gs2-trust svg,.gs2-hero.gs2-t-sapphire .gs2-rule{color:#f2c6c2}
.gs2-hero.gs2-t-sapphire .gs2-rule{background:#f2c6c2}
@media (min-width:760px){.gs2-hero.gs2-couple.gs2-t-sapphire .gs2-scrim{background:linear-gradient(to right,rgba(20,40,94,.95) 0%,rgba(20,40,94,.84) 30%,rgba(20,40,94,.38) 55%,rgba(20,40,94,0) 75%),linear-gradient(to top,rgba(20,40,94,.7) 0%,rgba(20,40,94,0) 30%)}}
@media (max-width:759px){.gs2-hero.gs2-couple.gs2-t-sapphire .gs2-scrim{background:linear-gradient(to bottom,rgba(20,40,94,.55) 0%,rgba(20,40,94,0) 18%)}}
body:has(.gs2-t-sapphire) .gs2-login{background:rgba(20,40,94,.65)}
.gs-old.gs2.gs2-t-sapphire .btn-solid{background:#d9a441;color:#14285e}
.gs-old.gs2.gs2-t-sapphire .btn-solid:hover{background:#e6b85c}
.gs-old.gs2.gs2-t-sapphire .cta-orange{background:linear-gradient(160deg,#1f3a80,#0e1d47)}
.gs-old.gs2.gs2-t-sapphire .cta-orange .btn-white{color:#14285e}
.gs-old.gs2.gs2-t-sapphire .tint{background:#0e1d47}
body:has(.gs2-t-sapphire) .heading-block,body:has(.gs2-t-sapphire) .member-grid{background:#14285e;color:#ffffff}
body:has(.gs2-t-sapphire) .heading-block h2{color:#ffffff}
body:has(.gs2-t-sapphire) .member-grid a{color:#f2c6c2}
body:has(.gs2-t-sapphire) .gs-foot{background:#0e1d47}
/* === /page /home-sapphire === */

/* === page /home-emerald: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
/* colour preview: Emerald and gold */
.gs2-hero.gs2-t-emerald,.gs-old.gs2.gs2-t-emerald{--n:#0f4c3a;--n-seam:#0b3a2c;--cr:#fbf6ec;--cr-dim:rgba(251,246,236,.82);--cu:#e3c178;--cu-text:#e3c178;--cu-btn:#e3c178;--card2:#145a45;--ln:rgba(255,255,255,.22)}
body:has(.gs2-t-emerald){background:#0f4c3a}
.gs2-hero.gs2-t-emerald{background:radial-gradient(120% 90% at 62% 36%,#16604a 0%,#0f4c3a 55%,#0b3a2c 100%)}
.gs2-hero.gs2-t-emerald .gs2-btn-primary{background:#e3c178;color:#0f4c3a;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.gs2-hero.gs2-t-emerald .gs2-btn-primary:hover{background:#eccf8f}
.gs2-hero.gs2-t-emerald .gs2-btn-ghost:hover{border-color:#e3c178}
.gs2-hero.gs2-t-emerald .gs2-trust svg,.gs2-hero.gs2-t-emerald .gs2-rule{color:#e3c178}
.gs2-hero.gs2-t-emerald .gs2-rule{background:#e3c178}
@media (min-width:760px){.gs2-hero.gs2-couple.gs2-t-emerald .gs2-scrim{background:linear-gradient(to right,rgba(15,76,58,.95) 0%,rgba(15,76,58,.84) 30%,rgba(15,76,58,.38) 55%,rgba(15,76,58,0) 75%),linear-gradient(to top,rgba(15,76,58,.7) 0%,rgba(15,76,58,0) 30%)}}
@media (max-width:759px){.gs2-hero.gs2-couple.gs2-t-emerald .gs2-scrim{background:linear-gradient(to bottom,rgba(15,76,58,.55) 0%,rgba(15,76,58,0) 18%)}}
body:has(.gs2-t-emerald) .gs2-login{background:rgba(15,76,58,.65)}
.gs-old.gs2.gs2-t-emerald .btn-solid{background:#e3c178;color:#0f4c3a}
.gs-old.gs2.gs2-t-emerald .btn-solid:hover{background:#eccf8f}
.gs-old.gs2.gs2-t-emerald .cta-orange{background:linear-gradient(160deg,#16604a,#0b3a2c)}
.gs-old.gs2.gs2-t-emerald .cta-orange .btn-white{color:#0f4c3a}
.gs-old.gs2.gs2-t-emerald .tint{background:#0b3a2c}
body:has(.gs2-t-emerald) .heading-block,body:has(.gs2-t-emerald) .member-grid{background:#0f4c3a;color:#fbf6ec}
body:has(.gs2-t-emerald) .heading-block h2{color:#fbf6ec}
body:has(.gs2-t-emerald) .member-grid a{color:#e3c178}
body:has(.gs2-t-emerald) .gs-foot{background:#0b3a2c}
/* === /page /home-emerald === */

/* === page /home-coral: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
/* colour preview: Midnight and coral */
.gs2-hero.gs2-t-coral,.gs-old.gs2.gs2-t-coral{--n:#04091a;--n-seam:#020b1c;--cr:#ffffff;--cr-dim:rgba(255,255,255,.82);--cu:#e8b4a0;--cu-text:#f0a58c;--cu-btn:#b9533b;--card2:#0f1a36;--ln:rgba(255,255,255,.22)}
body:has(.gs2-t-coral){background:#04091a}
.gs2-hero.gs2-t-coral{background:radial-gradient(120% 90% at 62% 36%,#0a1430 0%,#04091a 55%,#020b1c 100%)}
.gs2-hero.gs2-t-coral .gs2-btn-primary{background:#b9533b;color:#ffffff;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.gs2-hero.gs2-t-coral .gs2-btn-primary:hover{background:#a3472f}
.gs2-hero.gs2-t-coral .gs2-btn-ghost:hover{border-color:#e8b4a0}
.gs2-hero.gs2-t-coral .gs2-trust svg,.gs2-hero.gs2-t-coral .gs2-rule{color:#e8b4a0}
.gs2-hero.gs2-t-coral .gs2-rule{background:#e8b4a0}
@media (min-width:760px){.gs2-hero.gs2-couple.gs2-t-coral .gs2-scrim{background:linear-gradient(to right,rgba(4,9,26,.95) 0%,rgba(4,9,26,.84) 30%,rgba(4,9,26,.38) 55%,rgba(4,9,26,0) 75%),linear-gradient(to top,rgba(4,9,26,.7) 0%,rgba(4,9,26,0) 30%)}}
@media (max-width:759px){.gs2-hero.gs2-couple.gs2-t-coral .gs2-scrim{background:linear-gradient(to bottom,rgba(4,9,26,.55) 0%,rgba(4,9,26,0) 18%)}}
body:has(.gs2-t-coral) .gs2-login{background:rgba(4,9,26,.65)}
.gs-old.gs2.gs2-t-coral .btn-solid{background:#b9533b;color:#ffffff}
.gs-old.gs2.gs2-t-coral .btn-solid:hover{background:#a3472f}
.gs-old.gs2.gs2-t-coral .cta-orange{background:linear-gradient(160deg,#0a1430,#020b1c)}
.gs-old.gs2.gs2-t-coral .cta-orange .btn-white{color:#04091a}
.gs-old.gs2.gs2-t-coral .tint{background:#020b1c}
body:has(.gs2-t-coral) .heading-block,body:has(.gs2-t-coral) .member-grid{background:#04091a;color:#ffffff}
body:has(.gs2-t-coral) .heading-block h2{color:#ffffff}
body:has(.gs2-t-coral) .member-grid a{color:#f0a58c}
body:has(.gs2-t-coral) .gs-foot{background:#020b1c}
/* === /page /home-coral === */

/* === page /home-midnight: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
/* colour preview: midnight blue, champagne gold, ivory */
.gs2-hero.gs2-t-midnight,.gs-old.gs2.gs2-t-midnight{--n:#0b1a3d;--n-seam:#07112b;--cr:#f6efe2;--cr-dim:rgba(246,239,226,.82);--cu:#d8b56d;--cu-text:#e2c486;--cu-btn:#d8b56d;--card2:#12234f;--ln:rgba(216,181,109,.28);--line:rgba(216,181,109,.22)}
body:has(.gs2-t-midnight){background:#0b1a3d}
.gs2-hero.gs2-t-midnight{background:radial-gradient(120% 90% at 62% 36%,#14285a 0%,#0b1a3d 55%,#07112b 100%)}
.gs2-hero.gs2-t-midnight .gs2-btn-primary{background:#d8b56d;color:#0b1a3d;box-shadow:0 12px 30px rgba(216,181,109,.25)}
.gs2-hero.gs2-t-midnight .gs2-btn-primary:hover{background:#e4c584}
.gs2-hero.gs2-t-midnight .gs2-btn-ghost{border-color:rgba(216,181,109,.55);color:#f6efe2}
.gs2-hero.gs2-t-midnight .gs2-btn-ghost:hover{border-color:#d8b56d;background:rgba(216,181,109,.1)}
.gs2-hero.gs2-t-midnight .gs2-trust svg{color:#d8b56d}
.gs2-hero.gs2-t-midnight .gs2-rule{background:#d8b56d}
.gs2-hero.gs2-t-midnight .gs2-trust .gs2-sep{background:rgba(216,181,109,.35)}
@media (min-width:760px){.gs2-hero.gs2-couple.gs2-t-midnight .gs2-scrim{background:linear-gradient(to right,rgba(11,26,61,.95) 0%,rgba(11,26,61,.84) 30%,rgba(11,26,61,.38) 55%,rgba(11,26,61,0) 75%),linear-gradient(to top,rgba(11,26,61,.7) 0%,rgba(11,26,61,0) 30%)}}
@media (max-width:759px){.gs2-hero.gs2-couple.gs2-t-midnight .gs2-scrim{background:linear-gradient(to bottom,rgba(11,26,61,.55) 0%,rgba(11,26,61,0) 18%)}}
body:has(.gs2-t-midnight) .gs2-login{background:rgba(11,26,61,.65);border:1px solid rgba(216,181,109,.4)}
.gs-old.gs2.gs2-t-midnight .btn-solid{background:#d8b56d;color:#0b1a3d}
.gs-old.gs2.gs2-t-midnight .btn-solid:hover{background:#e4c584}
.gs-old.gs2.gs2-t-midnight .card,.gs-old.gs2.gs2-t-midnight .chips a,.gs-old.gs2.gs2-t-midnight .bcard,.gs-old.gs2.gs2-t-midnight .faq details,.gs-old.gs2.gs2-t-midnight .flags a,.gs-old.gs2.gs2-t-midnight .flag-card,.gs-old.gs2.gs2-t-midnight .feat-row{border-color:rgba(216,181,109,.22)}
.gs-old.gs2.gs2-t-midnight .card .ic{background:rgba(216,181,109,.14)}
.gs-old.gs2.gs2-t-midnight .tip-box{border-color:rgba(216,181,109,.5);background:rgba(216,181,109,.08)}
.gs-old.gs2.gs2-t-midnight .tip-box b{color:#e2c486}
.gs-old.gs2.gs2-t-midnight .cta-orange{background:linear-gradient(160deg,#14285a,#07112b);border-top:1px solid rgba(216,181,109,.3);border-bottom:1px solid rgba(216,181,109,.3)}
.gs-old.gs2.gs2-t-midnight .cta-orange h2 em{color:#d8b56d}
.gs-old.gs2.gs2-t-midnight .cta-orange .btn-white{background:#d8b56d;color:#0b1a3d}
.gs-old.gs2.gs2-t-midnight .tint{background:#07112b}
body:has(.gs2-t-midnight) .heading-block,body:has(.gs2-t-midnight) .member-grid{background:#0b1a3d;color:#f6efe2}
body:has(.gs2-t-midnight) .heading-block h2{color:#f6efe2}
body:has(.gs2-t-midnight) .member-grid a{color:#e2c486}
body:has(.gs2-t-midnight) .gs-foot{background:#07112b;border-top:1px solid rgba(216,181,109,.25)}
body:has(.gs2-t-midnight) .gs-foot-menu a:hover,body:has(.gs2-t-midnight) .gs-legal a:hover{color:#d8b56d}
/* === /page /home-midnight === */

/* === page /home-skypool: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
/* Sky-Pool homepage (preview): framed photo hero, teal-midnight grade, champagne gold, glass strip */
body:has(.sp-hero){background:#0b1a3d}
.sp-head,.sp-hero{--mid:#0b1a3d;--deep:#07112b;--teal:#0e4a57;--gold:#d8b56d;--goldl:#e4c584;--iv:#f6efe2;--ivd:rgba(246,239,226,.8);font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif}
.sp-head{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:28px;padding:38px 64px 0;color:var(--iv)}
.sp-head a,.sp-hero a{color:inherit;text-decoration:none}
.sp-hero .sp-btn-gold{color:var(--mid)}
.sp-logo{display:block;height:34px;width:auto;filter:brightness(0) invert(1)}
.sp-nav{margin-left:auto}
.sp-nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.sp-nav ul ul{display:none}
.sp-nav a{font-size:.82rem;letter-spacing:.08em;color:var(--ivd)}
.sp-nav a:hover{color:var(--gold)}
.sp-cta{display:flex;align-items:center;gap:18px;margin-left:auto}
.sp-nav:has(li)+.sp-cta{margin-left:8px}
.sp-login{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivd);min-height:44px;display:inline-flex;align-items:center}
.sp-login:hover{color:var(--gold)}
.sp-join{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:var(--gold);color:var(--mid);padding:12px 22px;border-radius:4px;min-height:44px;display:inline-flex;align-items:center}
.sp-join:hover{background:var(--goldl)}
.sp-head a:focus-visible,.sp-hero a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sp-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;background:var(--deep);color:var(--iv);display:flex;flex-direction:column;justify-content:center;padding:150px 64px 200px}
.sp-photo{position:absolute;inset:0;z-index:-3}
.sp-photo img{width:100%;height:100%;object-fit:cover;object-position:72% 30%;display:block}
.sp-grade{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(90deg,rgba(7,17,43,.96) 0%,rgba(11,26,61,.85) 28%,rgba(11,26,61,.35) 55%,rgba(7,17,43,.15) 75%),
  linear-gradient(0deg,rgba(7,17,43,.92) 0%,rgba(7,17,43,0) 40%),
  linear-gradient(180deg,rgba(7,17,43,.75) 0%,rgba(7,17,43,0) 22%),
  linear-gradient(135deg,rgba(14,74,87,.55),rgba(11,26,61,.35))}
.sp-frame{position:absolute;inset:18px;z-index:-1;border:1px solid rgba(216,181,109,.55);pointer-events:none}
.sp-frame i{position:absolute;width:22px;height:22px;border:2px solid var(--gold)}
.sp-frame i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0}
.sp-frame i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0}
.sp-frame i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0}
.sp-frame i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0}
.sp-copy{max-width:600px}
.sp-hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(3.4rem,6.2vw,5.6rem);line-height:1.02;letter-spacing:-.01em;color:var(--iv)}
.sp-hero h1 em{font-style:normal;color:var(--gold)}
.sp-sub{margin-top:18px;font-size:1.05rem;line-height:1.6;color:var(--ivd);max-width:34ch}
.sp-btns{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 26px;border-radius:4px;font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:background .2s,border-color .2s,color .2s}
.sp-btn-gold{background:var(--gold);color:var(--mid)}
.sp-btn-gold:hover{background:var(--goldl)}
.sp-btn-line{border:1px solid rgba(216,181,109,.7);color:var(--iv)}
.sp-btn-line:hover{border-color:var(--gold);color:var(--gold)}
.sp-glass{position:absolute;left:64px;right:64px;bottom:50px;max-width:980px;display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:0;padding:0;border:1px solid rgba(216,181,109,.4);border-radius:6px;background:rgba(11,26,61,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sp-glass li{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;color:var(--ivd);font-size:.86rem;line-height:1.45}
.sp-glass li+li{border-left:1px solid rgba(216,181,109,.28)}
.sp-glass svg{color:var(--gold);flex:0 0 auto;margin-top:2px}
.sp-glass b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.25rem;font-weight:600;color:var(--iv);letter-spacing:.01em;margin-bottom:2px}
@media (max-width:980px){.sp-nav{display:none}}
@media (max-width:759px){
  .sp-head{padding:28px 30px 0;gap:12px}
  .sp-logo{height:26px}
  .sp-login{font-size:.7rem}
  .sp-join{padding:10px 14px;font-size:.68rem}
  .sp-hero{justify-content:flex-end;padding:0 30px 36px;min-height:100svh}
  .sp-frame{inset:12px}
  .sp-photo{bottom:auto;height:68svh}
  .sp-photo img{object-position:66% 30%}
  .sp-grade{background:linear-gradient(180deg,rgba(7,17,43,.7) 0%,rgba(7,17,43,0) 18%),linear-gradient(0deg,var(--deep) 32%,rgba(7,17,43,.6) 50%,rgba(7,17,43,0) 68%),linear-gradient(135deg,rgba(14,74,87,.5),rgba(11,26,61,.3))}
  .sp-hero h1{font-size:clamp(2.7rem,12vw,3.6rem)}
  .sp-sub{font-size:.98rem;margin-top:12px}
  .sp-btns{margin-top:22px}
  .sp-btn{flex:1 1 0;padding:12px 10px;letter-spacing:.14em}
  .sp-glass{position:static;margin-top:28px;grid-template-columns:1fr;background:rgba(11,26,61,.6)}
  .sp-glass li{padding:14px 18px}
  .sp-glass li+li{border-left:0;border-top:1px solid rgba(216,181,109,.28)}
}
@media (prefers-reduced-motion:reduce){.sp-btn,.sp-join{transition:none}}
/* === /page /home-skypool === */

/* === page /home-elite: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
/* 'Genuine. Elite. Exquisite.' homepage (preview), from the partner's design */
body:has(.el-hero){background:#0a1330}
.el-head,.el-hero{--mid:#0a1330;--mid2:#121c3d;--gold:#d4b06a;--goldd:#b8934a;--iv:#f6efe2;--ivd:rgba(246,239,226,.82);font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif}
.el-head{background:linear-gradient(180deg,#eef2f7 0%,#dbe3ec 100%);border-bottom:3px solid var(--goldd);position:relative;z-index:5}
.el-head-in{max-width:1240px;margin:0 auto;padding:0 40px;min-height:78px;display:flex;align-items:center;gap:28px}
.el-head a{text-decoration:none;color:#0a1330}
.el-logo{display:block;height:40px;width:auto}
.el-nav{margin-left:auto}
.el-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.el-nav ul ul{display:none}
.el-nav a{font-size:.95rem;font-weight:500;color:#0a1330}
.el-nav a:hover{color:#7a5b22}
.el-cta{display:flex;align-items:center;gap:22px;margin-left:auto}
.el-nav:has(li)+.el-cta{margin-left:6px}
.el-login{font-size:.95rem;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.el-login:hover{color:#7a5b22}
.el-join{font-size:.95rem;font-weight:600;background:linear-gradient(180deg,#e0c07e,#c49f55);color:#0a1330;padding:10px 20px;border-radius:3px;min-height:44px;display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1px rgba(10,19,48,.12)}
.el-join:hover{background:linear-gradient(180deg,#e8cb8c,#cfaa62)}
.el-head a:focus-visible{outline:2px solid #0a1330;outline-offset:3px}
.el-hero a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.el-hero{background:radial-gradient(90% 120% at 20% 40%,#111c44 0%,var(--mid) 60%);color:var(--iv)}
.el-hero a{text-decoration:none}
.el-hero-in{max-width:1240px;margin:0 auto;padding:56px 40px 64px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;min-height:calc(100svh - 81px - 68px)}
.el-copy{padding-left:40px}
.el-hero h1{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.08}
.el-gold{display:block;color:var(--gold);font-size:clamp(2.8rem,5vw,4.4rem);letter-spacing:-.01em}
.el-line{display:block;margin-top:22px;color:#fff;font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:500;line-height:1.2;max-width:17ch}
.el-btn{display:inline-flex;align-items:center;margin-top:34px;min-height:48px;padding:12px 28px;border-radius:3px;font-weight:600;font-size:1.02rem;color:#0a1330;background:linear-gradient(180deg,#e0c07e,#c49f55);box-shadow:0 10px 26px rgba(196,159,85,.25)}
.el-btn:hover{background:linear-gradient(180deg,#e8cb8c,#cfaa62)}
.el-photo{margin:0;align-self:stretch;position:relative;overflow:hidden;border-radius:2px}
.el-photo img{width:100%;height:100%;min-height:420px;object-fit:cover;object-position:50% 40%;display:block}
.el-strip{background:var(--mid2);border-top:1px solid rgba(212,176,106,.18)}
.el-strip{display:flex;align-items:center;justify-content:center;gap:40px;padding:14px 40px;min-height:68px;flex-wrap:wrap}
.el-down{color:var(--ivd);display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.el-down:hover{color:var(--gold)}
.el-find{display:flex;align-items:center;gap:6px 20px;flex-wrap:wrap;margin:0;font-size:.95rem}
.el-find span{color:var(--ivd)}
.el-find a{color:var(--iv);border-bottom:1px solid rgba(212,176,106,.55);padding:6px 0}
.el-find a:hover{color:var(--gold);border-color:var(--gold)}
@media (max-width:1000px){.el-nav{display:none}.el-copy{padding-left:0}}
@media (max-width:820px){
  .el-head-in{padding:0 18px;min-height:64px;gap:12px}
  .el-logo{height:30px}
  .el-cta{gap:12px}
  .el-login{font-size:.88rem}
  .el-join{padding:8px 14px;font-size:.88rem}
  .el-hero-in{grid-template-columns:1fr;gap:0;padding:0 0 28px;min-height:0}
  .el-photo{order:-1;height:44svh;border-radius:0}
  .el-photo img{min-height:0;object-position:50% 30%}
  .el-copy{padding:26px 22px 0}
  .el-gold{font-size:clamp(2.4rem,11vw,3.2rem)}
  .el-line{font-size:1.45rem;margin-top:14px}
  .el-btn{margin-top:22px;width:100%;justify-content:center}
  .el-strip{justify-content:flex-start;gap:8px;padding:14px 22px}
  .el-down{display:none}
}

/* closer to the design: #05091a ground throughout, photo flush to the right edge and the strip */
body:has(.el-hero){background:#05091a}
.el-head,.el-hero{--mid:#05091a;--mid2:#0e1529}
.el-head{border-bottom-width:2px}
.el-hero{background:#05091a}
.el-hero-in{max-width:none;margin:0;padding:44px 0 0;grid-template-columns:minmax(0,1fr) 45%;gap:0;align-items:stretch;min-height:calc(100svh - 80px - 68px)}
.el-copy{align-self:center;padding:24px 48px 64px max(40px,calc((100vw - 1240px) / 2 + 64px))}
.el-photo{align-self:stretch;border-radius:0}
.el-photo img{min-height:460px;object-position:50% 35%}
.el-strip{background:#0e1529;border-top:0;justify-content:flex-end;position:relative;padding:12px max(40px,calc((100vw - 1240px) / 2 + 64px))}
.el-down{position:absolute;left:50%;transform:translateX(-50%)}
.el-find{gap:6px 18px}
body:has(.el-hero) .gs-old.gs2.gs2-t-midnight{--n:#05091a;--n-seam:#03060f;--card2:#0d1530}
body:has(.el-hero) .gs-old.gs2.gs2-t-midnight .cta-orange{background:linear-gradient(160deg,#0e1529,#03060f)}
body:has(.el-hero) .gs-old.gs2.gs2-t-midnight .dark,body:has(.el-hero) .gs-old.gs2.gs2-t-midnight .tint{background:#0a1022}
body:has(.el-hero) .heading-block,body:has(.el-hero) .member-grid{background:#05091a}
body:has(.el-hero) .gs-foot{background:#03060f}
@media (max-width:820px){
  .el-hero-in{padding:0;min-height:0;grid-template-columns:1fr}
  .el-copy{padding:26px 22px 28px}
  .el-photo img{min-height:0}
  .el-strip{justify-content:flex-start;padding:14px 22px}
}

/* the café photo: no box, it fades into the #05091a ground on its left and into the strip below */
.el-hero{position:relative}
.el-hero-in{position:relative;grid-template-columns:minmax(0,1fr);padding-top:0}
.el-fade.el-photo{position:absolute;top:0;right:0;bottom:0;width:66%;z-index:0;margin:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 14%,#000 42%),linear-gradient(to top,transparent 0%,#000 22%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 14%,#000 42%),linear-gradient(to top,transparent 0%,#000 22%);mask-composite:intersect}
.el-fade.el-photo img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:58% 30%;filter:brightness(.92) saturate(1.02)}
.el-copy{position:relative;z-index:1;max-width:min(760px,54vw)}
.el-strip{position:relative;z-index:1}
@media (max-width:820px){
  .el-hero-in{display:flex;flex-direction:column}
  .el-fade.el-photo{position:relative;width:100%;height:52svh;
    -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 30%);mask-image:linear-gradient(to top,transparent 0%,#000 30%);-webkit-mask-composite:source-over;mask-composite:add}
  .el-fade.el-photo img{object-position:62% 30%}
  .el-copy{max-width:none;align-self:stretch;margin-top:-56px;padding:0 22px 28px}
}
/* === /page /home-elite === */

/* === page /home-allo: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
/* Allo-style homepage (preview): full-screen soft photo, midnight veil, centred headline, pill buttons */
body:has(.al-hero){background:#05091a}
.al-head,.al-hero{--mid:#05091a;--gold:#d4b06a;--goldl:#e2c486;--iv:#f6efe2;font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif}
.al-head{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:30px;padding:26px 48px;background:linear-gradient(180deg,rgba(5,9,26,.75),rgba(5,9,26,0))}
.al-head a{text-decoration:none;color:var(--iv)}
.al-logo{display:block;height:36px;width:auto;filter:brightness(0) invert(1)}
.al-nav{margin-left:auto}
.al-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.al-nav ul ul{display:none}
.al-nav a{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--iv)}
.al-nav a:hover{color:var(--gold)}
.al-join-top{margin-left:auto;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--mid)!important;padding:12px 26px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.al-nav:has(li)+.al-join-top{margin-left:10px}
.al-join-top:hover{background:var(--goldl)}
.al-head a:focus-visible,.al-hero a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.al-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--iv);padding:120px 24px 100px;background:var(--mid)}
.al-hero a{text-decoration:none}
.al-bg{position:absolute;inset:-12px;z-index:-2}
.al-bg img{width:100%;height:100%;object-fit:cover;object-position:40% 35%;display:block;filter:blur(2.5px) saturate(1.05)}
.al-veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 50%,rgba(5,9,26,.42) 0%,rgba(5,9,26,.62) 70%,rgba(5,9,26,.82) 100%),linear-gradient(0deg,#05091a 0%,rgba(5,9,26,0) 22%)}
.al-hero h1{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:clamp(2.8rem,6.6vw,5.8rem);line-height:1.05;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 30px rgba(5,9,26,.55)}
.al-sub{margin:22px auto 0;max-width:40ch;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6;color:rgba(246,239,226,.94);text-shadow:0 1px 16px rgba(5,9,26,.6)}
.al-btns{display:flex;justify-content:center;gap:16px;margin-top:38px;flex-wrap:wrap}
.al-btn{min-width:200px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 30px;border-radius:999px;border:2px solid rgba(246,239,226,.9);color:#fff;font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s;background:rgba(5,9,26,.18)}
.al-btn:hover{background:rgba(246,239,226,.14)}
.al-btn-solid{background:var(--gold);border-color:var(--gold);color:var(--mid)}
.al-btn-solid:hover{background:var(--goldl);border-color:var(--goldl)}
.al-down{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:rgba(246,239,226,.8);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.al-down:hover{color:var(--gold)}
@media (max-width:980px){.al-nav{display:none}}
@media (max-width:640px){
  .al-head{padding:20px 20px}
  .al-logo{height:28px}
  .al-join-top{padding:10px 18px}
  .al-bg img{object-position:28% 35%}
  .al-hero{padding:110px 22px 90px}
  .al-btns{flex-direction:column;align-items:stretch;gap:12px}
  .al-btn{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.al-btn{transition:none}}
/* === /page /home-allo === */

/* home-cream scoped faithful port */









.hc{
  --navy:#0f2447;--navy-2:#183060;--navy-3:#2a406c;
  --cream:#fbf8f2;--cream-2:#eae9e6;--paper:#fdfcfa;
  --copper:#0f2447;--copper-l:#e0b27a;--copper-d:#8d5827;
  --ink:#0f2447;--body:#515f77;--line:#dadada;--line-d:rgba(255,255,255,.14);
  --teal:#7fa3d1;
  --serif:Fraunces,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1240px;
}
.hc *{box-sizing:border-box}
.hc{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){.hc{scroll-behavior:auto}.hc *{transition:none!important;animation:none!important}}
.hc{margin:0;font:400 1rem/1.7 var(--sans);color:var(--body);background:var(--cream)}
.hc img,.hc svg{display:block;max-width:100%}
.hc a{color:inherit}
.hc p{margin:0 0 1em}
.hc h1,.hc h2,.hc h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0;letter-spacing:-.02em;line-height:1.08}
.hc .wrap{width:min(var(--wrap),100% - 3rem);margin-inline:auto}
.hc .skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:.7rem 1rem}
.hc .skip:focus{left:0}
.hc :focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:4px}
.hc .eyebrow{font:500 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--copper-d);display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.hc .eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
.hc .on-dark .eyebrow,.hc .eyebrow.l{color:var(--copper-l)}
.hc section{padding:clamp(3.5rem,6vw,5.5rem) 0}
.hc h2{font-size:clamp(2.1rem,4.2vw,3.5rem)}
.hc h2 em,.hc h1 em{font-style:italic;color:var(--copper-d)}
.hc .on-dark h2{color:#fff}.hc .on-dark h2 em,.hc .on-dark h1 em{color:var(--copper-l)}
.hc .lede{font-size:1.06rem;max-width:34rem;font-weight:300}
.hc .hero .lede,.hc .verify .lede{font-weight:300}
.hc .rule{width:64px;height:1px;background:var(--copper);margin:2rem 0}


.hc .btn{white-space:nowrap;display:inline-flex;align-items:center;gap:.8rem;font:500 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:1.15rem 1.9rem;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.hc .btn svg{width:18px;height:18px;transition:transform .2s}
.hc .btn:hover svg{transform:translateX(4px)}
.hc .btn-copper{background:var(--copper);color:#ffffff;font-weight:600}
.hc .btn-copper:hover{background:var(--copper-l)}
.hc .btn-navy{background:var(--navy);color:#fff}.hc .btn-navy:hover{background:var(--navy-3)}
.hc .btn-line{border-color:rgba(255,255,255,.35);color:#fff}.hc .btn-line:hover{background:rgba(255,255,255,.1)}
.hc .btn-sm{padding:.85rem 1.3rem;font-size:.72rem}
.hc .btn-line-d{border-color:var(--navy);color:var(--navy)}.hc .btn-line-d:hover{background:var(--navy);color:#fff}


.hc .site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hc .nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:78px}
.hc .logo img{height:40px;width:auto}
.hc .nav ul{display:flex;gap:2.2rem;list-style:none;margin:0;padding:0}
.hc .nav ul a{font:400 .8rem var(--sans);letter-spacing:.08em;color:var(--navy);text-decoration:none;padding:.4rem 0;border-bottom:1px solid transparent}
.hc .nav ul a:hover{border-color:var(--copper)}
.hc .nav-cta{display:flex;gap:.7rem;align-items:center}
.hc .menu-btn{display:none;background:none;border:1px solid var(--navy);color:var(--navy);border-radius:2px;font:500 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:.8rem 1rem;cursor:pointer}


.hc .hero{position:relative;isolation:isolate;min-height:min(calc(100svh - 78px),800px);display:flex;align-items:center;background:var(--navy);color:#c7c9cc;overflow:hidden;padding:0}
.hc .hero-bg{position:absolute;inset:0;z-index:-2}
.hc .hero-bg img{display:block;width:86%;margin-left:auto;height:100%;object-fit:cover;object-position:42% 30%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%);mask-image:linear-gradient(90deg,transparent 0,#000 20%)}
.hc .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,#0f2447 0,rgba(15,36,71,.97) 26%,rgba(15,36,71,.8) 40%,rgba(15,36,71,.3) 54%,rgba(15,36,71,0) 68%),
  linear-gradient(0deg,rgba(15,36,71,.9) 0,rgba(15,36,71,0) 22%)}
.hc .hero>.wrap{padding-block:clamp(3rem,6vw,5rem)}
.hc .hero-copy{max-width:38rem}
.hc .hero h1{color:var(--cream);font-weight:300;font-size:clamp(3.4rem,7.6vw,6.8rem);line-height:.98;letter-spacing:-.035em;text-shadow:0 2px 30px rgba(15,36,71,.5)}
.hc .hero h1 em{display:block;color:var(--copper-l);font-style:italic;font-weight:300}
.hc .hero .lede{color:#e3e3e1;font-size:1.08rem;max-width:30rem;margin-top:1.8rem}
.hc .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hc .trust{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;list-style:none;margin:2.2rem 0 0;padding:1.4rem 0 0;border-top:1px solid rgba(255,255,255,.22);font:500 .68rem var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#dadada}
.hc .trust li{display:flex;gap:.6rem;align-items:center}
.hc .trust svg{width:18px;height:18px;color:var(--copper-l)}
.hc .seal{position:absolute;z-index:2;width:clamp(128px,11vw,170px);aspect-ratio:1;right:max(1.5rem,calc((100% - var(--wrap))/2));bottom:2rem;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}


.hc .stats{background:var(--paper);border-block:1px solid var(--line);padding:clamp(2.2rem,4vw,3.2rem) 0}
.hc .stats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.hc .stats li{padding:.3rem 1.8rem;border-left:1px solid var(--line)}
.hc .stats li:first-child{padding-left:0;border-left:0}
.hc .stats b{display:block;font:300 clamp(2.4rem,4.4vw,3.6rem)/1 var(--serif);color:var(--copper-d);letter-spacing:-.02em;margin-bottom:.55rem}
.hc .stats span{font-size:.85rem;line-height:1.5;display:block}
@media(max-width:860px){.hc .stats ul{grid-template-columns:1fr 1fr;gap:1.8rem 0}.hc .stats li:nth-child(3){border-left:0;padding-left:0}}
@media(max-width:600px){.hc .stats li{padding:.3rem 1.1rem}.hc .stats b{font-size:2.3rem}}


.hc .near{background:var(--cream)}
.hc .near .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.hc .near h2{font-size:clamp(2.3rem,4.1vw,3.7rem)}
.hc .near h2 span{display:block}
.hc .near .lede{margin-top:1.6rem}
.hc .split{display:grid;grid-template-columns:1fr 1fr;margin:2.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hc .split a{display:flex;gap:1rem;align-items:flex-start;padding:1.4rem 1.2rem 1.4rem 0;text-decoration:none}
.hc .split a+a{padding-left:1.6rem;border-left:1px solid var(--line)}
.hc .split svg{width:30px;height:30px;color:var(--copper);flex:none;margin-top:.2rem}
.hc .split b{display:block;font:400 1.3rem var(--serif);color:var(--copper-d);letter-spacing:-.01em;line-height:1.2}
.hc .split span{font-size:.88rem;line-height:1.5;display:block;margin-top:.2rem}
.hc .split a:hover b{text-decoration:underline;text-underline-offset:4px}
.hc .others{font-size:.85rem;margin:0 0 2rem}
.hc .others a{color:var(--navy);text-underline-offset:3px}

.hc .maps{display:grid;gap:1rem}
.hc .map{position:relative;border-radius:6px;overflow:hidden;background:#eae9e6;border:1px solid var(--line);aspect-ratio:16/8.2;box-shadow:0 30px 60px -40px rgba(15,36,71,.45)}
.hc .map>svg:not(.pin){position:absolute;inset:0;width:100%;height:100%}
.hc .map-title{position:absolute;left:1.3rem;top:1rem;z-index:2}
.hc .map-title b{font:400 1.5rem var(--serif);color:var(--navy);letter-spacing:-.01em;display:block;line-height:1.1}
.hc .map-title span{font-size:.78rem;color:var(--body)}
.hc .map .tag{position:absolute;right:1rem;top:1rem;z-index:2;display:flex;align-items:center;gap:.4rem;background:rgba(253,252,250,.95);border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem .35rem .45rem;font:500 .68rem var(--sans);letter-spacing:.06em;color:var(--navy)}
.hc .tag svg{width:16px;height:16px;color:var(--copper)}
.hc .pin{position:absolute;width:20px;height:26px;transform:translate(-50%,-100%);color:var(--copper);z-index:1}
.hc .mc{position:absolute;z-index:2;display:flex;gap:.55rem;align-items:center;background:rgba(253,252,250,.97);border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem .5rem .5rem;box-shadow:0 12px 26px -14px rgba(15,36,71,.5);font-size:.7rem;line-height:1.3;white-space:nowrap}
.hc .mc i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--cream);font:400 .95rem var(--serif);flex:none}
.hc .mc:nth-of-type(even) i{background:var(--copper);color:var(--navy)}
.hc .mc b{display:block;font:500 .78rem var(--sans);color:var(--navy)}
.hc .mc em{font-style:normal;color:var(--copper-d);font-weight:500;display:flex;gap:.25rem;align-items:center;font-size:.64rem;letter-spacing:.04em}
.hc .mc em svg{width:11px;height:11px}
.hc .maps-note{font-size:.75rem;color:var(--body);margin:.2rem 0 0;display:flex;gap:.5rem;align-items:center}
.hc .maps-note::before{content:"";width:16px;height:1px;background:var(--copper)}
.hc .country-cards{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hc .country-cards a{display:flex;gap:1rem;align-items:flex-start;padding:1.4rem 1.2rem 1.4rem 0;text-decoration:none}
.hc .country-cards a:nth-child(even){padding-left:1.6rem;border-left:1px solid var(--line)}
.hc .country-cards a:nth-child(n+3){border-top:1px solid var(--line)}
.hc .country-cards svg{width:30px;height:30px;color:var(--copper);flex:none;margin-top:.2rem}
.hc .country-cards b{display:block;font:400 1.3rem var(--serif);color:var(--copper-d);letter-spacing:-.01em;line-height:1.2}
.hc .country-cards span{font-size:.88rem;line-height:1.5;display:block;margin-top:.2rem}
.hc .country-cards a:hover b{text-decoration:underline;text-underline-offset:4px}


.hc .verify{background:var(--navy);color:#c7c9cc;position:relative;overflow:hidden}
.hc .verify::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 500px at 12% 50%,rgba(15,36,71,.16),transparent 70%)}
.hc .verify .wrap{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.hc .verify .seal-big{width:min(100%,360px);margin-inline:auto;aspect-ratio:1}
.hc .verify h2{margin-bottom:1.4rem}
.hc .vlist{list-style:none;margin:2.2rem 0 2.4rem;padding:0;display:grid;gap:0;border-top:1px solid var(--line-d)}
.hc .vlist li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--line-d);align-items:start}
.hc .vlist svg{width:26px;height:26px;color:var(--copper-l);margin-top:.15rem}
.hc .vlist b{font:400 1.25rem var(--serif);color:#fff;display:block;letter-spacing:-.01em;line-height:1.25}
.hc .vlist span{font-size:.9rem;display:block;margin-top:.2rem}


.hc .steps{background:var(--paper);border-block:1px solid var(--line)}
.hc .steps-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:3.2rem;flex-wrap:wrap}
.hc .steps-head>p{max-width:26rem;margin:0}
.hc .steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.hc .steps li{padding:0 2.2rem;border-left:1px solid var(--line)}
.hc .steps li:first-child{padding-left:0;border-left:0}
.hc .steps li:last-child{padding-right:0}
.hc .steps .n{font:300 4.6rem/1 var(--serif);color:var(--copper);display:block;margin-bottom:1.2rem;letter-spacing:-.04em}
.hc .steps h3{font-size:1.7rem;margin-bottom:.7rem}
.hc .steps p{margin:0;font-size:.95rem}


.hc .why-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.hc .why-grid h2{position:sticky;top:110px}
.hc .facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.hc .facts li{padding:1.8rem 1.6rem 1.8rem 0;border-bottom:1px solid var(--line)}
.hc .facts li:nth-child(even){padding-left:1.8rem;padding-right:0;border-left:1px solid var(--line)}
.hc .facts svg{width:26px;height:26px;color:var(--copper);margin-bottom:1rem}
.hc .facts b{font:400 1.45rem var(--serif);color:var(--navy);display:block;margin-bottom:.4rem;letter-spacing:-.01em}
.hc .facts span{font-size:.9rem;display:block;line-height:1.6}


.hc .start{background:var(--cream-2)}
.hc .start .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.hc .quiz{background:var(--paper);border:1px solid var(--line);padding:clamp(1.6rem,3vw,2.8rem);border-radius:4px}
.hc .quiz fieldset{border:0;padding:0;margin:0 0 2rem}
.hc .quiz legend{font:400 1.3rem var(--serif);color:var(--navy);letter-spacing:-.01em;margin-bottom:1rem;padding:0;line-height:1.25}
.hc .chips{display:flex;flex-wrap:wrap;gap:.55rem}
.hc .chip{font:400 .85rem var(--sans);padding:.65rem 1.1rem;border-radius:999px;border:1px solid #b9bdc2;background:transparent;color:var(--navy);cursor:pointer;transition:all .15s}
.hc .chip:hover{border-color:var(--copper)}
.hc .chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.hc .chip.new{border-color:var(--copper)}
.hc .q-note{font-size:.76rem;color:var(--body);margin:1.4rem 0 0}
.hc .q-note i{font-style:normal;color:var(--copper-d);font-weight:500}
.hc .tag-c{display:inline-block;border:1px dashed var(--copper);color:var(--copper-d);font:500 .64rem var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:.15rem .55rem;border-radius:3px;vertical-align:middle}


.hc .quote{background:var(--navy);color:#c7c9cc;text-align:center}
.hc .quote blockquote{margin:0 auto;max-width:56rem}
.hc .quote blockquote p{font:300 clamp(1.7rem,3.4vw,2.7rem)/1.3 var(--serif);color:#fff;letter-spacing:-.015em;margin:0 0 2rem}
.hc .quote blockquote p::before{content:"“";display:block;font-size:6rem;line-height:.7;color:var(--copper-l);margin-bottom:.8rem}
.hc .quote cite{font:500 .75rem var(--sans);letter-spacing:.18em;text-transform:uppercase;font-style:normal;color:var(--copper-l)}
.hc .quote cite span{display:block;color:#a1a7b1;letter-spacing:.06em;text-transform:none;font-weight:300;margin-top:.4rem;font-size:.85rem}
.hc .more-q{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:4rem;border-top:1px solid var(--line-d);text-align:left}
.hc .more-q figure{margin:0;padding:2rem 2.4rem 0 0}
.hc .more-q figure+figure{padding:2rem 0 0 2.4rem;border-left:1px solid var(--line-d)}
.hc .more-q p{font-size:.95rem;margin:0 0 1rem;color:#c7c9cc}
.hc .more-q figcaption{font:500 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--copper-l)}
.hc .more-q figcaption span{display:block;color:#a1a7b1;text-transform:none;letter-spacing:.04em;font-weight:300;font-size:.82rem;margin-top:.2rem}


.hc .faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.hc details{border-bottom:1px solid var(--line)}
.hc details:first-of-type{border-top:1px solid var(--line)}
.hc summary{cursor:pointer;list-style:none;padding:1.4rem 0;font:400 1.25rem var(--serif);color:var(--navy);display:flex;justify-content:space-between;gap:1rem;align-items:center;letter-spacing:-.01em}
.hc summary::-webkit-details-marker{display:none}
.hc summary::after{content:"";flex:none;width:22px;height:22px;background:linear-gradient(var(--copper),var(--copper)) center/100% 1px no-repeat,linear-gradient(var(--copper),var(--copper)) center/1px 100% no-repeat;transition:transform .25s}
.hc details[open] summary::after{transform:rotate(45deg)}
.hc details p{margin:0 0 1.5rem;max-width:40rem;font-size:.95rem}
.hc .reads{margin-top:2.4rem;display:grid;gap:0}
.hc .reads h3{font:500 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--copper-d);margin-bottom:.4rem}
.hc .reads a{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line);text-decoration:none;font:400 1.05rem var(--serif);color:var(--navy)}
.hc .reads a:hover{color:var(--copper-d)}
.hc .reads svg{width:18px;height:18px;color:var(--copper);flex:none}


.hc .cta{background:var(--navy);padding:clamp(4rem,8vw,6.5rem) 0;text-align:center;position:relative;overflow:hidden}
.hc .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 360px at 50% 120%,rgba(15,36,71,.28),transparent 70%)}
.hc .cta .wrap{position:relative}
.hc .cta .seal-sm{width:92px;margin:0 auto 1.8rem}
.hc .cta h2{color:#fff;font-weight:300;font-size:clamp(2.4rem,5.4vw,4.4rem);margin-bottom:1.2rem}
.hc .cta h2 em{color:var(--copper-l)}
.hc .cta p{color:#c7c9cc;max-width:32rem;margin:0 auto 2rem}

.hc footer{background:#09162b;color:#a1a7b1;padding:3.5rem 0 2rem;font-size:.85rem}
.hc .f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem}
.hc footer img{height:36px;width:auto;background:var(--paper);padding:.5rem .8rem;border-radius:3px;margin-bottom:1rem}
.hc footer h3{font:500 .68rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--copper-l);margin-bottom:1rem}
.hc footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.hc footer a{text-decoration:none}.hc footer a:hover{color:#fff;text-decoration:underline}
.hc .legal{border-top:1px solid var(--line-d);padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.78rem}


@media(max-width:1080px){
  .hc .nav ul{gap:1.2rem}
  .hc .near .wrap{grid-template-columns:1fr}
  .hc .maps,.hc .country-cards{max-width:760px}
}
@media(max-width:860px){
  .hc .menu-btn{display:block}
  .hc .nav ul{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:.4rem 1.5rem 1.2rem}
  .hc .nav ul.open{display:flex}
  .hc .nav ul a{display:block;padding:1rem 0;border-bottom:1px solid var(--line)}
  .hc .nav-cta .login{display:none}
  .hc .verify .wrap,.hc .start .wrap,.hc .faq .wrap,.hc .why-grid{grid-template-columns:1fr}
  .hc .verify .seal-big{width:220px;margin:0}
  .hc .steps ol{grid-template-columns:1fr}
  .hc .steps li,.hc .steps li:first-child{padding:1.6rem 0;border-left:0;border-top:1px solid var(--line)}
  .hc .steps li:first-child{border-top:0;padding-top:0}
  .hc .why-grid h2{position:static}
  .hc .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .hc section{padding:3.6rem 0}
  .hc .logo img{height:30px}
  .hc .nav{min-height:66px;gap:.8rem}
  .hc .nav-cta .btn{padding:.75rem 1rem}
  .hc .btn{padding:1.05rem 1.4rem}
  .hc .hero{min-height:calc(100svh - 66px);flex-direction:column;align-items:stretch}
  .hc .hero-bg{position:relative;inset:auto;flex:1 1 auto;min-height:170px;z-index:0}
  .hc .hero-bg img{position:absolute;inset:0;width:100%;margin:0;object-position:58% 28%;-webkit-mask-image:none;mask-image:none}
  .hc .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0f2447 0,rgba(15,36,71,.96) 22%,rgba(15,36,71,.55) 52%,rgba(15,36,71,0) 88%)}
  .hc .hero::before{display:none}
  .hc .hero>.wrap{padding-block:0 1.5rem;position:relative;z-index:1;margin-top:-3.5rem;flex:none}
  .hc .hero h1{font-size:clamp(2rem,7.8vw,2.8rem)}
  .hc .hero .eyebrow{margin-bottom:.8rem}
  .hc .hero .lede{font-size:.95rem;line-height:1.55;margin-top:1rem}
  .hc .hero-cta{flex-direction:column;gap:.6rem;margin-top:1.2rem}
  .hc .hero-cta .btn{width:100%;justify-content:space-between;padding:1rem 1.3rem}
  .hc .trust{display:none}
  .hc .seal{width:112px;right:1rem;top:1rem;bottom:auto}
  .hc .split,.hc .country-cards{grid-template-columns:1fr}
  .hc .split a+a{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .hc .map{aspect-ratio:4/3.5}
  .hc .mc{font-size:.62rem;padding:.4rem .6rem .4rem .4rem}.hc .mc i{width:24px;height:24px;font-size:.8rem}.hc .mc b{font-size:.7rem}
  .hc .mc.hide-m{display:none}
  .hc .mc .pl{display:none}
  .hc .nav-cta{gap:.4rem}.hc .menu-btn{padding:.75rem .8rem}
  .hc .facts{grid-template-columns:1fr}
  .hc .facts li:nth-child(even){padding-left:0;border-left:0}
  .hc .more-q{grid-template-columns:1fr}
  .hc .more-q figure,.hc .more-q figure+figure{padding:1.6rem 0 0;border-left:0}
  .hc .f-grid{grid-template-columns:1fr}
}


.hc .hero{background:#fbf8f2;color:#0f2447}
.hc .hero::before{background:linear-gradient(90deg,#fbf8f2 0,rgba(251,248,242,.96) 22%,rgba(251,248,242,.72) 36%,rgba(251,248,242,.25) 48%,rgba(251,248,242,0) 58%),linear-gradient(0deg,rgba(251,248,242,.8) 0,rgba(251,248,242,0) 16%)}
.hc .hero h1{color:#0f2447;text-shadow:none}.hc .hero h1 em{color:#8d5827}
.hc .hero .lede{color:#515f77}.hc .hero .eyebrow{color:#8d5827}
.hc .hero .btn-copper:hover{background:#183060}
.hc .hero .btn-line{border-color:#0f2447;color:#0f2447}.hc .hero .btn-line:hover{background:rgba(15,36,71,.08)}
.hc .trust{color:#0f2447;border-top-color:rgba(15,36,71,.25)}.hc .trust svg{color:#8d5827}
@media(max-width:600px){
  .hc .hero-bg::after{background:linear-gradient(0deg,#fbf8f2 0,rgba(251,248,242,.97) 24%,rgba(251,248,242,.6) 52%,rgba(251,248,242,0) 88%)}
}


.hc .content{background:var(--paper);border-top:1px solid var(--line)}
.hc .prose{max-width:none;margin:0;display:grid;grid-template-columns:minmax(15rem,20rem) minmax(0,46rem);gap:clamp(2.5rem,5vw,5.5rem);justify-content:center;align-items:start;font-size:1.0625rem;line-height:1.8;color:var(--body)}
.hc .prose-head{position:sticky;top:6rem}
.hc .prose-body{min-width:0}
.hc .prose .eyebrow{margin-bottom:1.2rem}
.hc .prose h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:1.4rem}
.hc .prose h3{font-size:clamp(1.4rem,2.4vw,1.75rem);line-height:1.2;margin:2.6rem 0 .8rem}
.hc .prose p{margin:0 0 1.25em}
.hc .prose .lead{font:300 1.3rem/1.6 var(--serif);color:var(--ink)}
.hc .prose a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--copper-l);text-decoration-thickness:2px;text-underline-offset:3px}
.hc .prose a:hover{text-decoration-color:var(--copper-d)}
.hc .prose ul,.hc .prose ol{margin:0 0 1.5em;padding:0;list-style:none;counter-reset:n}
.hc .prose li{position:relative;padding-left:2rem;margin-bottom:.6em}
.hc .prose ul li::before{content:"";position:absolute;left:.3rem;top:.8em;width:.45rem;height:.45rem;border-radius:50%;background:var(--copper-d)}
.hc .prose ol li{counter-increment:n}
.hc .prose ol li::before{content:counter(n);position:absolute;left:0;top:.05em;width:1.4rem;font:500 .85rem/1.9 var(--sans);color:var(--copper-d);text-align:center}
.hc .prose blockquote.pull{margin:2.4rem 0;padding:.4rem 0 .4rem 1.6rem;border-left:3px solid var(--copper-d)}
.hc .prose blockquote.pull p{font:italic 400 clamp(1.4rem,2.6vw,1.8rem)/1.35 var(--serif);color:var(--ink);margin:0 0 .6rem;letter-spacing:-.01em}
.hc .prose blockquote.pull cite{font:500 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;font-style:normal;color:var(--copper-d)}
.hc .prose figure.slot{margin:2.4rem 0}
.hc .prose .slot-ph{aspect-ratio:16/9;border:1.5px dashed #9aa6bd;border-radius:6px;background:var(--cream);display:grid;place-items:center;color:var(--body);font:500 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.hc .prose figure.slot img{width:100%;height:auto;border-radius:6px}
.hc .prose figcaption{font-size:.85rem;margin-top:.7rem;color:var(--body)}
@media(max-width:900px){.hc .prose{grid-template-columns:1fr;gap:0;max-width:46rem;margin-inline:auto}.hc .prose-head{position:static;margin-bottom:.4rem}}
@media(max-width:600px){.hc .prose{font-size:1rem;line-height:1.75}.hc .prose .lead{font-size:1.18rem}}


.hc .hero.on-dark{display:grid;grid-template-columns:1fr 52%;grid-template-rows:1fr;align-items:stretch;min-height:min(calc(100svh - 78px),740px);background:var(--cream);color:var(--ink);position:relative;overflow:hidden;padding:0}
.hc .hero.on-dark::before{display:none}
.hc .hero.on-dark .hero-bg{grid-column:2;grid-row:1;position:relative;inset:auto;z-index:0;width:auto;height:100%}
.hc .hero.on-dark .hero-bg img{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover;object-position:46% 26%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(180deg,transparent 0,#000 8%,#000 96%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(180deg,transparent 0,#000 8%,#000 96%,transparent 100%);
  mask-composite:intersect}
.hc .hero.on-dark .hero-bg::after{content:none}
.hc .hero.on-dark>.wrap{grid-column:1;grid-row:1;max-width:none;width:100%;margin:0;display:flex;align-items:center;padding:clamp(2rem,5vw,3.5rem) clamp(1.75rem,3vw,3rem) clamp(2rem,5vw,3.5rem) max(1.5rem,calc((100vw - var(--wrap))/2))}
.hc .hero.on-dark .hero-copy{max-width:34rem}
.hc .hero.on-dark h1{text-shadow:none}
.hc .hero.on-dark .seal{position:absolute;z-index:3;left:auto;right:1.7rem;bottom:1.7rem;top:auto;width:clamp(120px,11vw,160px);transform:none;filter:drop-shadow(0 6px 18px rgba(15,36,71,.35))}
@media(max-width:860px){.hc .hero.on-dark{grid-template-columns:1fr 48%}}
@media(max-width:700px){
  .hc .hero.on-dark{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:auto}
  .hc .hero.on-dark .hero-bg{grid-column:1;grid-row:1;height:clamp(165px,25vh,220px);width:100%}
  .hc .hero.on-dark h1{font-size:clamp(2.1rem,6.4vw,3rem)}
  .hc .hero.on-dark>.wrap{padding-top:1.1rem}
  .hc .hero.on-dark .hero-copy .lede{margin-top:.9rem}
  .hc .hero.on-dark .hero-bg img{object-position:50% 20%;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
    mask-composite:add}
  .hc .hero.on-dark .hero-bg::after{content:none}
  .hc .hero.on-dark>.wrap{grid-column:1;grid-row:2;margin:0;padding:1.4rem 1.5rem 2.2rem}
  .hc .hero.on-dark .hero-copy{max-width:none}
  .hc .hero.on-dark .seal{right:1rem;top:1rem;bottom:auto;width:108px;transform:none}
}


.hc .svg-defs{position:absolute;width:0;height:0}
.hc .start .lede{margin-top:1.4rem}
.hc .prose figure.slot img{width:100%;aspect-ratio:16/9;object-fit:cover;height:auto;border-radius:6px}
@media(max-width:860px){.hc .nav ul{position:static;display:none}.hc .nav-cta .login{display:inline-flex}}

/* /home-cream */

/* verification */
.hc .v-open{background:var(--cream);text-align:center;border-bottom:1px solid var(--line)}
.hc .v-open>.wrap{width:min(54rem,100% - 3rem);padding:clamp(3rem,7vw,5.5rem) 0}
.hc .seal-hero{width:clamp(124px,15vw,170px);aspect-ratio:1;display:block;margin:0 auto 1.6rem;filter:drop-shadow(0 10px 24px rgba(15,36,71,.28))}
.hc .v-open h1{font-size:clamp(2.3rem,5.4vw,3.5rem);line-height:1.05;margin:.2rem 0 1.1rem}
.hc .v-open .v-lede{max-width:40rem;margin:0 auto 2rem;font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.7;color:var(--body)}
.hc .v-open .v-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
@media(max-width:600px){.hc .v-open .v-cta{flex-direction:column;align-items:stretch}.hc .v-open .v-cta .btn{justify-content:center}}
/* /verification */

/* why-us */
.hc .why-hero{position:relative;min-height:clamp(440px,70vh,660px);display:flex;align-items:center;background:var(--navy);overflow:hidden}
.hc .why-hero .hero-bg{position:absolute;inset:0;z-index:0}
.hc .why-hero .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 35%}
.hc .why-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,36,71,.94) 0%,rgba(15,36,71,.82) 34%,rgba(15,36,71,.35) 62%,rgba(15,36,71,.05) 85%,transparent 100%)}
.hc .why-hero>.wrap{position:relative;z-index:2;padding:clamp(2.5rem,6vw,4rem) 0}
.hc .why-hero .hero-copy{max-width:37rem}
.hc .why-hero h1{color:#fff;font-size:clamp(2.4rem,6vw,4.1rem);line-height:1.03;max-width:16ch;margin:.5rem 0 1.3rem;text-shadow:0 2px 16px rgba(0,0,0,.25)}
.hc .why-hero .w-lede{color:rgba(255,255,255,.9);max-width:34rem;font-size:clamp(1.08rem,1.7vw,1.28rem);line-height:1.6;margin:0 0 2rem}
@media(max-width:1024px){.hc .why-hero{min-height:auto;padding:0;display:grid;grid-template-rows:auto auto;align-items:stretch}.hc .why-hero .hero-bg{position:relative;inset:auto;grid-row:1;height:clamp(240px,38vh,360px)}.hc .why-hero .hero-bg picture{display:block;height:100%}.hc .why-hero .hero-bg img{position:absolute;inset:0;object-position:72% 30%}.hc .why-hero::after{content:none}.hc .why-hero .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 72%,var(--navy) 100%)}.hc .why-hero>.wrap{grid-row:2;padding:.9rem 0 2rem}}
.hc .compare{background:var(--paper)}
.hc .compare>.wrap{padding:clamp(3rem,7vw,5rem) 0}
.hc .compare .c-head{max-width:40rem}
.hc .vs-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,4vw,3rem);margin-top:2.4rem;padding-bottom:.6rem}
.hc .vs-head span{font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.hc .vs-head span:first-child{color:var(--body)}
.hc .vs-head span:last-child{color:var(--copper-d)}
.hc .vs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hc .vs li{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,4vw,3rem);padding:1.2rem 0;border-bottom:1px solid var(--line);align-items:start}
.hc .vs .them,.hc .vs .us{display:flex;gap:.6rem;align-items:flex-start;font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.4}
.hc .vs .them{color:var(--body)}
.hc .vs .us{color:var(--ink);font-weight:500}
.hc .vs svg{flex:none;width:1.2rem;height:1.2rem;margin-top:.12rem}
.hc .vs .them svg{color:#9aa0ac}
.hc .vs .us svg{color:var(--copper-d)}
@media(max-width:640px){.hc .vs-head{display:none}.hc .vs li{grid-template-columns:1fr;gap:.55rem;padding:1.1rem 0}}
.hc .why-who{background:var(--cream)}
.hc .why-who>.wrap{padding:clamp(3rem,7vw,5rem) 0}
.hc .why-who .w-lede{max-width:42rem;font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.7;color:var(--body);margin:1rem 0 0}
.hc .aud{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem;padding:0;margin:1.9rem 0 0}
.hc .aud a{display:inline-flex;align-items:center;padding:.6rem 1.15rem;border:1px solid var(--line);border-radius:999px;font:500 .95rem var(--sans);color:var(--ink);text-decoration:none;transition:border-color .15s,color .15s}
.hc .aud a:hover{border-color:var(--copper-d);color:var(--copper-d)}
/* /why-us */

/* how-it-works */
.hc .how-hero{position:relative;min-height:clamp(430px,62vh,580px);display:flex;align-items:center;background:var(--navy);overflow:hidden}
.hc .how-hero .hero-bg{position:absolute;inset:0;z-index:0}
.hc .how-hero .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 22%}
.hc .how-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,36,71,.92) 0%,rgba(15,36,71,.74) 36%,rgba(15,36,71,.28) 64%,transparent 92%)}
.hc .how-hero>.wrap{position:relative;z-index:2;padding:clamp(2rem,5vw,3.2rem) 0}
.hc .how-hero .hero-copy{max-width:34rem}
.hc .how-hero h1{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.04;margin:.4rem 0 1rem;text-shadow:0 2px 16px rgba(0,0,0,.28)}
.hc .how-hero .w-lede{color:rgba(255,255,255,.9);max-width:32rem;font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;margin:0}
@media(max-width:700px){.hc .how-hero{min-height:clamp(380px,56vh,480px)}.hc .how-hero .hero-bg img{object-position:60% 20%}.hc .how-hero::after{background:linear-gradient(180deg,rgba(15,36,71,.42) 0%,rgba(15,36,71,.72) 55%,rgba(15,36,71,.9) 100%)}}
.hc .how-steps{background:var(--cream)}
.hc .how-steps>.wrap{padding:clamp(3rem,7vw,5.5rem) 0}
.hc .how-steps .s-head{max-width:42rem;margin-bottom:2.8rem}
.hc .flow{list-style:none;margin:0;padding:0;max-width:46rem}
.hc .flow li{position:relative;padding:0 0 2.6rem 4.8rem;min-height:3.4rem}
.hc .flow li::before{content:"";position:absolute;left:1.65rem;top:.5rem;bottom:-.3rem;width:2px;background:var(--line)}
.hc .flow li:last-child{padding-bottom:0}
.hc .flow li:last-child::before{display:none}
.hc .flow .num{position:absolute;left:0;top:0;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:500 1.05rem/1 var(--sans);z-index:1;box-shadow:0 0 0 6px var(--cream)}
.hc .flow h3{margin:.4rem 0 .5rem;font-size:clamp(1.25rem,2vw,1.5rem)}
.hc .flow p{margin:0;color:var(--body);line-height:1.6;max-width:34rem}
.hc .flow a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--copper-l);text-decoration-thickness:2px;text-underline-offset:3px}
.hc .flow a:hover{text-decoration-color:var(--copper-d)}
@media(max-width:600px){.hc .flow li{padding-left:4rem;padding-bottom:2.3rem}.hc .flow .num{width:3rem;height:3rem;font-size:.95rem;box-shadow:0 0 0 5px var(--cream)}}
/* /how-it-works */

/* locations */
.hc .eyebrow.sub{scroll-margin-top:6rem}
.hc .loc-hero{position:relative;min-height:min(calc(100svh - 78px),800px);display:flex;align-items:center;background:var(--navy);overflow:hidden}
.hc .loc-hero .hero-bg{position:absolute;inset:0;z-index:0}
.hc .loc-hero .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hc .loc-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,36,71,.93) 0%,rgba(15,36,71,.76) 38%,rgba(15,36,71,.32) 66%,transparent 93%)}
.hc .loc-hero>.wrap{position:relative;z-index:2;padding:clamp(2rem,5vw,3.4rem) 0}
.hc .loc-hero .hero-copy{max-width:37rem}
.hc .loc-hero h1{color:#fff;font-size:clamp(2.3rem,5.4vw,3.8rem);line-height:1.04;margin:.4rem 0 1rem;text-shadow:0 2px 16px rgba(0,0,0,.3)}
.hc .loc-hero .w-lede{color:rgba(255,255,255,.9);max-width:33rem;font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;margin:0 0 1.8rem}
.hc .crumbs{font:500 .78rem/1.4 var(--sans);letter-spacing:.03em;margin:0 0 1rem;color:rgba(255,255,255,.72)}
.hc .crumbs a{color:rgba(255,255,255,.82);text-decoration:none}
.hc .crumbs a:hover{color:#fff;text-decoration:underline}
.hc .crumbs i{font-style:normal;margin:0 .45rem;color:rgba(255,255,255,.4)}
.hc .loc-local{background:var(--cream)}
.hc .loc-local>.wrap{padding:clamp(3rem,7vw,5rem) 0}
.hc .loc-local .s-head{max-width:40rem;margin-bottom:1.3rem}
.hc .loc-local .w-lede{max-width:42rem;color:var(--body);font-size:clamp(1.05rem,1.5vw,1.18rem);line-height:1.7;margin:0 0 1.2rem}
.hc .loc-local .facts{margin-top:2.4rem}
.hc .areas{background:var(--paper)}
.hc .areas>.wrap{padding:clamp(3rem,7vw,5rem) 0}
.hc .areas .s-head{max-width:42rem;margin-bottom:1.1rem}
.hc .areas p.intro{max-width:42rem;color:var(--body);line-height:1.7;margin:0}
.hc .near-cities{background:var(--cream)}
.hc .near-cities>.wrap{padding:clamp(3rem,7vw,5rem) 0}
.hc .near-cities .s-head{max-width:42rem;margin-bottom:1.1rem}
.hc .near-cities .all-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.7rem;font-weight:500;color:var(--navy);text-decoration:underline;text-decoration-color:var(--copper-l);text-decoration-thickness:2px;text-underline-offset:3px}
.hc .near-cities .all-link:hover{text-decoration-color:var(--copper-d)}

/* split location hero (homepage .hero.on-dark pattern) + stylised city map */
.hc .hero.on-dark.loc{min-height:min(calc(100svh - 78px),630px)}
.hc .hero.on-dark.loc .hero-copy{max-width:36rem}
.hc .hero.on-dark.loc h1{font-size:clamp(2.7rem,5.2vw,4.4rem);line-height:1}
.hc .hero.on-dark .crumbs{color:#64718a}
.hc .hero.on-dark .crumbs a{color:#5a6a86}
.hc .hero.on-dark .crumbs a:hover{color:var(--navy)}
.hc .hero.on-dark .crumbs i{color:rgba(15,36,71,.32)}
.hc .city-map{background:var(--paper)}
.hc .city-map>.wrap{padding:clamp(3rem,7vw,5rem) 0}
.hc .city-map .s-head{max-width:42rem;margin-bottom:1rem}
.hc .city-map p.intro{max-width:42rem;color:var(--body);line-height:1.7;margin:0 0 2rem}
.hc .city-map .map-panel{max-width:820px;margin:0 auto}
.hc .city-map .map-bg{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 44px rgba(15,36,71,.12);background:#fbf8f2}
.hc .city-map .dmap{display:block;width:100%;height:auto}
.hc .city-map .dlab{fill:#fbf8f2;font-family:var(--sans);font-weight:600;font-size:21px;letter-spacing:.05em}
.hc .city-map .dage{fill:#fbf8f2;font-family:var(--sans);font-weight:600;font-size:15px}
.hc .city-map .dcart{fill:#0f2447;font-family:var(--serif,"Fraunces",Georgia,serif);font-style:italic;font-weight:400;font-size:30px}
.hc .city-map .dcartsub{fill:#8d5827;font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.12em}
.hc .city-map .map-note{text-align:center;font:400 .9rem/1.5 var(--sans);color:var(--body);margin:1.15rem auto 0;max-width:40rem}
.hc .city-map .map-note a{color:var(--copper-d);text-decoration:underline;text-underline-offset:2px}
.hc .city-map .aud{justify-content:center;margin-top:1.9rem}
.hc .city-map .aud li{display:inline-flex;align-items:center;padding:.5rem 1.05rem;border:1px solid var(--line);border-radius:999px;font:500 .9rem var(--sans);color:var(--body);background:var(--cream)}
@media(max-width:620px){
  .hc .city-map .dlab{font-size:25px}
  .hc .city-map .dage{font-size:17px}
}
.hc .city-map .dmap.lon .dlab{font-size:20px;letter-spacing:0}
@media(max-width:620px){.hc .city-map .dmap.lon .dlab{font-size:23px}}
@media(max-width:1024px){.hc .loc-hero{min-height:auto;padding:0;display:grid;grid-template-rows:auto auto;align-items:stretch}.hc .loc-hero .hero-bg{position:relative;inset:auto;grid-row:1;height:clamp(240px,38vh,360px)}.hc .loc-hero .hero-bg picture{display:block;height:100%}.hc .loc-hero .hero-bg img{position:absolute;inset:0;object-position:72% 30%}.hc .loc-hero::after{content:none}.hc .loc-hero .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 72%,var(--navy) 100%)}.hc .loc-hero>.wrap{grid-row:2;padding:.9rem 0 2rem}}
/* /locations */
/* verification: ID seal bottom-left of the photo band on mobile */
@media(max-width:700px){.hc .hero.on-dark.hero-v .seal{right:auto;left:1rem;top:clamp(165px,25vh,220px);bottom:auto;transform:translateY(calc(-100% - 0.7rem))}}
/* location page: two-column content + blended media, borderless map (birmingham) */
.hc .loc2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hc .loc2+.loc2{margin-top:clamp(2.6rem,6vw,4.4rem)}
.hc .loc2-copy{min-width:0}
.hc .loc2-copy .s-head{max-width:none;margin-bottom:1.1rem}
.hc .loc2-copy .w-lede{max-width:36rem}
.hc .loc2-copy .aud{margin-top:1.6rem}
.hc .loc2-media{min-width:0}
.hc .loc2-media img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 42%;border-radius:22px;display:block;box-shadow:0 26px 54px rgba(15,36,71,.18)}
.hc .loc2.rev .loc2-media{order:-1}
.hc .loc-facts{margin-top:clamp(2.2rem,5vw,3.4rem)}
@media(max-width:860px){
  .hc .loc2{grid-template-columns:1fr;gap:1.6rem}
  .hc .loc2.rev .loc2-media{order:0}
  .hc .loc2-media img{aspect-ratio:16/11}
}
.hc .city-map .map2{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hc .city-map .map2 .map-media{max-width:420px;width:100%;margin:0 auto}
.hc .city-map .map2 .dmap{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 36px rgba(15,36,71,.16))}
.hc .city-map .map2 .map-copy .s-head{max-width:none;margin-bottom:1rem}
.hc .city-map .map2 .map-copy .intro{max-width:34rem;margin:0}
.hc .city-map .map2 .map-copy .aud{justify-content:flex-start;margin-top:1.5rem}
.hc .city-map .map2 .map-note{text-align:left;margin:1.2rem 0 0;max-width:34rem}
@media(max-width:860px){
  .hc .city-map .map2{grid-template-columns:1fr;gap:1.6rem}
  .hc .city-map .map2 .map-media{order:-1;max-width:340px}
  .hc .city-map .map2 .map-copy .aud{justify-content:center}
  .hc .city-map .map2 .map-note{text-align:center;margin-inline:auto}
}
.hc .txt2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.6rem);align-items:start}
.hc .txt2 .w-lede{max-width:none}
.hc .txt2 .aud{margin-top:1.4rem}
@media(max-width:820px){.hc .txt2{grid-template-columns:1fr;gap:0}}
.hc .why-hero .crumbs,.hc .why-hero .crumbs a{color:rgba(255,255,255,.82)}
.hc .why-hero .crumbs a:hover{color:#fff}
.hc .why-hero .eyebrow.l{color:var(--copper-l)}
.hc .why-hero.city-hero .hero-bg img{object-position:52% 34%}
.hc .why-hero.city-hero::after{background:linear-gradient(90deg,rgba(15,36,71,.95) 0%,rgba(15,36,71,.8) 30%,rgba(15,36,71,.4) 52%,rgba(15,36,71,.08) 74%,transparent 90%)}
.hc .why-hero.city-hero .hero-cta .btn{border-width:2px;font-weight:700}
.hc .why-hero.city-hero .hero-cta .btn-copper{background:var(--copper-l);color:#0f2447;border-color:var(--copper-l)}
.hc .why-hero.city-hero .hero-cta .btn-copper:hover{background:#ecc89a;border-color:#ecc89a}
.hc .why-hero.city-hero .hero-cta .btn-line{background:#fff;color:#0f2447;border-color:#fff}
.hc .why-hero.city-hero .hero-cta .btn-line:hover{background:rgba(255,255,255,.85);color:#0f2447}
@media(max-width:760px){
  .hc .why-hero.city-hero{display:block;min-height:0;background:var(--navy);padding:0}
  .hc .why-hero.city-hero .hero-bg{position:relative;inset:auto;display:block;width:100%;height:clamp(200px,28vh,240px);margin:0;overflow:hidden}
  .hc .why-hero.city-hero .hero-bg img{display:block;width:100%;height:100%;object-position:80% 46%}
  .hc .why-hero.city-hero .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 44%,rgba(15,36,71,.55) 76%,rgba(15,36,71,.97) 100%)}
  .hc .why-hero.city-hero::after{display:none}
  .hc .why-hero.city-hero>.wrap{display:block;position:relative;padding:1rem 0 1.7rem}
  .hc .why-hero.city-hero .crumbs{margin-bottom:.45rem}
  .hc .why-hero.city-hero h1{font-size:clamp(1.85rem,8.5vw,2.5rem);margin:.25rem 0 .75rem}
  .hc .why-hero.city-hero .w-lede{font-size:.98rem;line-height:1.5;margin-bottom:1.1rem}
  .hc .why-hero.city-hero .hero-cta{gap:.6rem}
  .hc .why-hero.city-hero .hero-cta .btn{width:100%;justify-content:space-between;padding:.9rem 1.2rem}
}