/*
 * site.css: the one stylesheet for every page in marketing-site/dist/.
 * Pages carry no inline styles and no <style> blocks; all presentation lives here.
 *
 * Page families
 *   Site pages     index.html, plan-sponsors.html, about.html
 *                  .site-header--primary, .section--spacious, .split, .site-footer
 *   Landing pages  benefit.html (built from benefit/benefit.dc.html, the styling reference)
 *                  and individuals.html (the same sections with the site header and footer)
 *                  .landing-hero, .section, .walkthrough, .cta-band, .faq
 *   Documents      privacy.html and terms.html (built from flatten/legal-page.template.html),
 *                  security.html, support.html, 404.html
 *                  .site-header, .doc or .splash, .compact-footer
 *
 * Conventions
 *   - Class names are BEM-style: .block, .block__element, .block--modifier.
 *   - Colors, fonts, radii and shadows come from the tokens in :root.
 *   - Media queries sit next to the rules they change (breakpoints 900, 600, 520, 480, 400px).
 *   - State comes from attributes: [hidden], [aria-expanded], [aria-current], and
 *     :root[data-device] (iPhone or Android, set on /benefit to swap QR codes for store badges).
 *   - Dark surfaces set --eyebrow-color rather than restyling .eyebrow per context.
 */

/* ========== Fonts ==========
   Self-hosted variable fonts: the latin and latin-ext subsets Google Fonts serves (SIL OFL).
   One file per subset covers every weight in the declared range. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("inter-tight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========== Tokens ========== */
:root {
  /* Brand */
  --navy: #2E3963;
  --blue: #43507F;
  --blue-tint: #EEF0F7;
  --lime: #D4E279;
  --lime-dark: #C9D866;
  --alabaster: #F5F6F5;
  --white: #FFFFFF;

  /* Neutrals */
  --slate: #555B75;       /* secondary text on light surfaces */
  --gray: #757575;        /* captions and citations */
  --gray-dark: #4A4A4A;   /* document lead paragraphs */
  --mist: #E6E7EC;        /* hairline rules */
  --stone: #D9DAD3;       /* outlines: ghost buttons, dashed panels, table cells */
  --sapphire: #1976D2;    /* citation links */

  /* Text on dark surfaces */
  --on-dark: rgba(255, 255, 255, 0.85);
  --on-dark-strong: rgba(255, 255, 255, 0.92);
  --on-dark-muted: rgba(255, 255, 255, 0.55);

  /* Type */
  --font-heading: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1120px;
  --container-narrow: 820px;
  --gutter: 24px;

  /* Surfaces */
  --radius: 16px;
  --gradient-hero: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  --shadow-lg: 0 2px 8px rgba(46, 57, 99, 0.08), 0 18px 50px rgba(46, 57, 99, 0.12);
  --shadow-float: 0 18px 50px rgba(0, 0, 0, 0.25);
}

/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--blue);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--blue);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }
h3 { line-height: 1.25; }
p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }
video:focus-visible { outline: 2px solid var(--blue); }
/* [hidden] has to beat component display values (.modal-bg is flex, .faq__answer is block). */
[hidden] { display: none !important; }

/* ========== Layout ========== */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* Landing-page rhythm by default; site pages use the roomier fixed rhythm. */
.section { padding-block: clamp(48px, 7vw, 88px); }
.section--spacious { padding-block: 96px; }
.section--alt { background: var(--alabaster); }
.section--blue {
  background: var(--blue);
  color: var(--white);
  --eyebrow-color: var(--lime);
}
@media (max-width: 900px) {
  .section--spacious { padding-block: 64px; }
}

/* Site-page section heading block */
.section__head { max-width: 760px; margin-bottom: 48px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--wide { max-width: none; }
.section__head--wide .section__lead { max-width: 760px; }
.section__head h2 { margin-bottom: 14px; }
.section__actions { margin-top: 28px; text-align: center; }

/* Landing-page section heading and intro */
.section__title {
  max-width: 720px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.section__title--narrow { max-width: 640px; }
.section__title--small {
  margin-bottom: 12px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: normal;
}
/* The smaller heading sits closer to its eyebrow. */
.eyebrow:has(+ .section__title--small) { margin-bottom: 14px; }
.section__lead {
  max-width: 560px;
  margin-top: 18px;
  color: var(--slate);
  font-size: 17px;
  line-height: 1.6;
}
.section__lead--wide { max-width: 600px; }
.section--blue .section__title { color: var(--white); }
.section--blue .section__head h2 { color: var(--white); }
.section--blue .section__lead { color: var(--on-dark); }

/* ========== Text ========== */
.eyebrow {
  margin: 0 0 18px;
  color: var(--eyebrow-color, var(--blue));
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.lead {
  max-width: 60ch;
  color: var(--slate);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
}
.text-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
}

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .08s ease, background .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--lime); color: var(--navy); }
.btn--primary:hover { background: var(--lime-dark); }
.btn--ghost { background: transparent; border-color: var(--stone); color: var(--navy); }
.btn--ghost:hover { background: var(--white); border-color: var(--blue); color: var(--blue); }
.btn--lg { padding: 15px 24px; font-size: 16px; }

/* ========== Site header ==========
   Plain .site-header is the logo-only bar (landing and document pages);
   .site-header--primary adds the sticky site navigation. */
.site-header { background: var(--navy); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 16px;
}
/* The logo takes the free space, so the nav and the actions sit together on the right. */
.site-header__brand { display: block; margin-right: auto; }
/* When the header runs out of room the logo box narrows; contain scales the artwork down
   evenly instead of squeezing it. */
.site-header__logo {
  display: block;
  width: auto;
  height: 36px;
  object-fit: contain;
  object-position: left center;
}
.site-header--primary { position: sticky; top: 0; z-index: 30; }
/* Desktop gets the larger header logo; the extra padding keeps the sticky header 88px tall,
   which the sticky and scroll offsets below clear. Below 900px the header also holds the
   menu button, so the logo drops back. */
.site-header--primary .site-header__inner { padding-block: 22px; }
.site-header--primary .site-header__logo { height: 44px; }
@media (max-width: 900px) {
  .site-header--primary .site-header__inner { padding-block: 16px; }
  .site-header--primary .site-header__logo { height: 32px; }
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav__link {
  padding: 8px 14px;
  color: var(--on-dark);
  font-size: 16px;
  transition: color .15s;
}
/* The current page is white with a lime underline; hover turns any link lime. */
.site-nav__link[aria-current="page"] {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline 2px var(--lime);
  text-underline-offset: 10px;
}
.site-nav__link:hover { color: var(--lime); text-decoration: none; }
.site-nav__link[aria-current="page"]:hover { color: var(--lime); text-decoration: underline 2px var(--lime); }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: var(--white);
}

@media (max-width: 900px) {
  .site-header--primary { position: relative; }
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header--open .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px var(--gutter) 20px;
    background: var(--navy);
    box-shadow: 0 14px 28px rgba(20, 26, 51, 0.12);
  }
}
@media (max-width: 600px) {
  .site-header__actions .btn { padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 480px) {
  .site-header__actions { gap: 14px; }
  .site-header__actions .btn { padding: 8px 14px; }
}
/* Small phones: the CTA and menu button leave the logo too little room, so tighten the gaps
   and the button; below ~370px the logo also scales down (see object-fit above). */
@media (max-width: 400px) {
  .site-header__inner { gap: 12px; }
  .site-header__actions { gap: 12px; }
  .site-header__actions .btn { padding: 8px 12px; font-size: 13px; }
}

/* ========== Site footer (site pages) ========== */
.site-footer {
  padding-block: 56px 36px;
  background: var(--navy);
  color: #DDE2F2;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: start;
  gap: 32px;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 280px;
}
.site-footer__logo { display: block; width: auto; height: 28px; }
.site-footer__tagline {
  color: var(--white);
  font-size: 14px;
  line-height: 1.5;
}
/* The link columns fill the same band as the brand block. The heading's line box has
   about 4px of leading above the capitals, so it is pulled up to put the capitals level
   with the top of the logo; the 7px link gap then lands the last link on the baseline
   of the tagline's third line. */
.site-footer__heading {
  margin: -4px 0 14px;
  color: var(--lime);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__links a,
.site-footer__links a:hover { color: var(--white); font-size: 14.5px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-size: 12px;
}
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ========== Compact footer (landing and document pages) ========== */
.compact-footer { background: var(--navy); color: var(--white); }
.compact-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-block: 48px 32px;
}
.compact-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
}
.compact-footer__logo { display: block; width: auto; height: 28px; }
.compact-footer__tagline {
  max-width: 320px;
  color: var(--white);
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
}
.compact-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13px;
  line-height: normal;
}
.compact-footer__copyright { font-size: 12px; }
.compact-footer__nav { display: flex; flex-wrap: wrap; gap: 24px; }
.compact-footer__nav a,
.compact-footer__nav a:hover { color: var(--white); }

/* ========== Popups ========== */
.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(46, 57, 99, 0.6);
  animation: fade-in .2s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
body.modal-open { overflow: hidden; }
.modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 40px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--slate);
  font-size: 22px;
}
.modal__close:hover { background: var(--alabaster); }
.modal__title { margin-bottom: 8px; font-size: 24px; }
.modal__sub { margin-bottom: 24px; color: var(--slate); font-size: 15px; }
.modal__panel {
  padding: 28px;
  background: var(--alabaster);
  border: 1px dashed var(--stone);
  border-radius: 12px;
  text-align: center;
}
.modal__panel--note { padding: 24px; text-align: start; }
.modal__panel .eyebrow { margin-bottom: 10px; }
.modal__quote {
  color: var(--slate);
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.6;
}
/* The quote marks are drawn here so copying the note never picks them up. */
.modal__quote::before { content: "\201C"; }
.modal__quote::after { content: "\201D"; }
.modal__copy { margin-top: 16px; padding: 9px 16px; font-size: 14px; }

/* ========== Contact form (inside the contact popup) ==========
   .form > .form__row? > .field > .field__label + .field__input
   site.js posts it to the API and swaps in .form__done. */
.form {
  display: grid;
  gap: 14px;
  text-align: start;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 5px; margin: 0; }
.field__label {
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.field__optional { color: var(--gray); font-weight: 400; }
.field__input {
  width: 100%;
  padding: 11px 13px;
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: 10px;
  color: var(--blue);
  font-family: var(--font-body);
  font-size: 16px; /* under 16px iOS Safari zooms the page on focus */
  line-height: 1.4;
}
.field__input:focus-visible {
  border-color: var(--blue);
  outline: 2px solid var(--blue-tint);
  outline-offset: 0;
}
.field__input--area { resize: vertical; min-height: 76px; }
/* Honeypot: off-screen rather than display:none, which form-filling bots skip. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__submit { justify-self: start; margin-top: 4px; }
.form__submit[disabled] { opacity: 0.6; }
.form__error {
  margin: 0;
  color: #B3261E;
  font-size: 14px;
}
.field__count {
  display: block;
  margin-top: 5px;
  color: var(--gray);
  font-size: 12px;
  text-align: right;
}
.field__count--low { color: #B3261E; }
.field--check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.field__check {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--navy);
}
.field__check-label {
  color: var(--gray);
  font-size: 13px;
  line-height: 1.45;
}
.form__note { margin: 0; color: var(--gray); font-size: 13px; }
.form__note a { color: inherit; text-decoration: underline; }
.form__done { padding: 28px 0 8px; text-align: center; }
.form__done-title {
  margin: 0 0 6px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 20px;
}
.form__done-text { margin: 0; color: var(--slate); font-size: 14.5px; }
@media (max-width: 520px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ========== FAQ accordion ==========
   .faq > .faq__item > button.faq__question[aria-expanded] + .faq__answer[hidden]
   site.js toggles aria-expanded and the answer's hidden attribute. */
.faq {
  display: flex;
  flex-direction: column;
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.faq__item { border-bottom: 1px solid var(--mist); }
.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: 0;
  color: var(--blue);
  font: inherit;
  line-height: normal;
  text-align: left;
}
.faq__question:hover .faq__question-text { text-decoration: underline; }
.faq__question:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.faq__question-text { font-size: 18px; font-weight: 700; }
.faq__sign {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}
.faq__sign::before { content: "+"; }
.faq__question[aria-expanded="true"] .faq__sign::before { content: "\2013"; }
.faq__answer {
  max-width: 720px;
  padding-bottom: 24px;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.65;
}

/* ========== Cards ========== */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px 28px;
  background: var(--alabaster);
  border-radius: var(--radius);
}
.card__icon { width: 64px; height: 64px; }
.card__num {
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.card__title { font-size: 19px; line-height: normal; letter-spacing: normal; }
.card__icon + .card__title { margin-top: 6px; }
.card__text { color: var(--slate); font-size: 16px; line-height: 1.6; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
  margin-top: 40px;
}
.outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .outcomes { grid-template-columns: 1fr; }
}

/* ========== Home: hero ========== */
.home-hero {
  padding-block: 80px clamp(48px, 6vw, 80px);
  background: var(--gradient-hero);
  color: var(--white);
  text-align: center;
}
.home-hero__title {
  color: var(--white);
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.home-hero__lead {
  max-width: 60ch;
  margin: 18px auto 0;
  color: var(--on-dark);
  font-size: clamp(24px, calc(1.7vw + 6px), 34px);
  line-height: 1.5;
}

/* ========== Site pages: problem / solution split ========== */
.split { padding-block: 84px 88px; }
.split--after-hero { padding-top: 42px; }
.split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 24px;
}
.split__panel { min-width: 0; padding: 44px; border-radius: var(--radius); }
.split__panel--problem {
  background: var(--navy);
  color: var(--on-dark-strong);
  --eyebrow-color: var(--lime);
}
.split__panel--solution { background: var(--lime); --eyebrow-color: var(--navy); }
@media (max-width: 900px) {
  .split { padding-block: 64px; }
  .split__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .split--after-hero { padding-top: 18px; }
}

.split__label {
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
  color: var(--eyebrow-color);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.split__panel--solution .split__label { border-bottom-color: rgba(46, 57, 99, 0.20); }
.split__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 30px;
}
.split__lever {
  color: var(--white);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.split__lever-pivot { color: var(--lime); }
/* The problem panel's headline: above body size, below .split__title, so the stat still leads. */
.split__claim {
  color: var(--lime);
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.split__list {
  display: grid;
  gap: 2px;
  max-width: 800px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.split__list li {
  position: relative;
  padding: 10px 0 10px 36px;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.4;
}
.split__list li::before {
  content: "\27A4";
  position: absolute;
  top: 16px;
  left: 2px;
  font-size: 15px;
  line-height: 1;
}
/* Short-item variant, and the stacked narrative the problem panel uses under its stat. */
.split__list--tight li { padding-block: 4px; }
.split__list--tight li::before { top: 10px; }
.split__story { display: grid; gap: 18px; }
.split__title {
  margin-bottom: 16px;
  color: var(--navy);
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.split__statement {
  margin-bottom: 36px;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.split__statement strong { font-weight: 700; }
.split__statement em { font-style: normal; }
.split__stack { display: grid; align-items: start; gap: 22px; }
.split__body { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.4; }
.split__body + .split__body { margin-top: 1.1em; }
.split__shots {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
}
.split__shot {
  flex: 1 1 0;
  min-width: 0;
  max-width: 50%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(31, 41, 71, 0.18));
}
.split__panel--solution .split__body { color: var(--blue); }
/* The solution panel's numbered how-it-works steps. */
.split__body--label { color: var(--navy); font-weight: 700; }
.split__panel--solution .split__body--label { color: var(--navy); }
.split__steps {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.split__steps li {
  position: relative;
  padding-left: 40px;
  color: var(--blue);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.4;
  counter-increment: step;
}
.split__steps li::before {
  content: counter(step);
  position: absolute;
  top: 0.12em;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  display: grid;
  place-items: center;
}
/* The home hero's phone video, a little smaller, on the lime solution panel. */
.split__phone.landing-hero__phone { justify-self: center; width: min(100%, 160px); margin-top: 6px; }
/* Two phones side by side: setup screens cycling on the left, the matches video on the right. */
.split__phones { display: flex; justify-content: center; align-items: flex-start; gap: 24px; }
.split__phones .split__phone { flex: 0 1 160px; min-width: 0; }
/* Four framed screenshots, 4s each including a 1s fade. The incoming one fades in on top while the outgoing one
   stays opaque underneath, so the phone frame never goes translucent mid-fade. The incoming
   one keeps the top layer until the outgoing one has gone, whatever their DOM order. */
.split__phone--cycle img { position: relative; display: block; width: 100%; height: auto; }
.split__phone--cycle img + img { position: absolute; inset: 0; }
.split__phone--cycle img { animation: split-cycle 16s linear infinite; }
.split__phone--cycle img:nth-child(2) { animation-delay: -12s; }
.split__phone--cycle img:nth-child(3) { animation-delay: -8s; }
.split__phone--cycle img:nth-child(4) { animation-delay: -4s; }
@keyframes split-cycle {
  0%, 8% { opacity: 1; z-index: 2; }
  8.01%, 26% { opacity: 1; z-index: 1; }
  26.01%, 93.75% { opacity: 0; z-index: 1; }
  93.76% { opacity: 0; z-index: 2; }
  100% { opacity: 1; z-index: 2; }
}
/* These screenshots carry their own phone frame, so the shadow follows their outline. The shared
   frame-shaped glow box leaves a pale rim at the corners where the two shapes differ. */
.split__phone--cycle::before { display: none; }
.split__phone--cycle { filter: drop-shadow(0 22px 24px rgba(31, 41, 71, 0.3)); }
@media (prefers-reduced-motion: reduce) {
  .split__phone--cycle img { animation: none; }
  .split__phone--cycle img + img { display: none; }
}
.split__phone.landing-hero__phone::before { box-shadow: 0 22px 50px rgba(31, 41, 71, 0.3); }

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding: 28px 24px 22px;
  background: var(--white);
  border-radius: var(--radius);
}
.stat__num {
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(36px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat__copy { flex: 1; color: var(--slate); font-size: 18px; line-height: 1.5; }
.stat__source {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--mist);
  color: var(--gray);
  font-size: 12px;
}
.stat__source a { color: var(--sapphire); }

/* ========== Home: audience tiles ========== */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 880px;
}
@media (max-width: 900px) {
  .tile-grid { grid-template-columns: 1fr; }
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  background: var(--white);
  border-radius: var(--radius);
  color: inherit;
  cursor: pointer;
  transition: transform .18s, box-shadow .25s;
}
.tile:hover { box-shadow: var(--shadow-lg); text-decoration: none; transform: translateY(-4px); }
.tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.tile h3 { font-size: 24px; }
.tile p { flex: 1; color: var(--slate); font-size: 15.5px; line-height: 1.5; }
.tile__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.tile:hover .tile__cta { background: var(--lime-dark); box-shadow: 0 6px 16px rgba(46, 57, 99, 0.12); }
.tile:active .tile__cta { transform: translateY(1px); }
.tile__arrow {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  transition: transform .2s;
}
.tile:hover .tile__arrow { transform: translateX(3px); }
/* Set by site.js on the tile a returning visitor picked before */
.tile--selected::after {
  content: "\2713  Your selection";
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ========== Home: steps ========== */
.steps { display: grid; gap: 4px; max-width: 880px; }
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding-block: 24px;
  border-top: 1px solid var(--mist);
}
.step:last-child { border-bottom: 1px solid var(--mist); }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
}
.step h3 { margin-bottom: 6px; color: var(--navy); font-size: 19px; }
.step p { color: var(--slate); font-size: 15px; line-height: 1.5; }

/* ========== Plan Sponsors: hero ========== */
.page-hero {
  padding-block: 80px 56px;
  background: var(--gradient-hero);
  color: var(--white);
  --eyebrow-color: var(--lime);
}
.page-hero__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
  gap: 56px;
}
.page-hero__title {
  margin-bottom: 18px;
  color: var(--white);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* Matches the home page hero heading (.landing-hero__title). */
.page-hero__title--landing {
  margin-bottom: 24px;
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.page-hero .lead { margin-bottom: 28px; color: var(--on-dark); }
/* Headline on the left, intro and CTA on the right, centred against each other. */
.page-hero__inner--center { grid-template-columns: 1.1fr 1fr; align-items: center; }
.page-hero__inner--center .page-hero__title { margin-bottom: 0; }
@media (max-width: 900px) {
  .page-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .page-hero__inner--center { gap: 24px; }
}

/* The implementation footprint, as a row of outlined badges under the hero. */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 48px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  list-style: none;
}
.hero-badges li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
}
.hero-badges li::before {
  content: "✓";
  content: "✓" / "";
  color: var(--lime);
  font-weight: 700;
}

/* ========== Landing: hero ========== */
.landing-hero {
  overflow: hidden;
  background: var(--gradient-hero);
  color: var(--white);
  --eyebrow-color: var(--lime);
}
.landing-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 48px;
  padding-block: clamp(48px, 6vw, 80px);
}
.landing-hero__copy { flex: 1 1 340px; min-width: 0; }
.landing-hero__title {
  color: var(--white);
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.landing-hero__accent { color: var(--lime); }
.landing-hero__text {
  max-width: 520px;
  margin-top: 14px;
  color: var(--on-dark);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
}
.landing-hero__title + .landing-hero__text { margin-top: 24px; }
.landing-hero__text strong { color: var(--white); font-weight: 700; }
.landing-hero__source {
  max-width: 520px;
  margin-top: 12px;
  color: var(--on-dark);
  font-size: 12px;
  line-height: 1.5;
}
.landing-hero__media {
  position: relative;
  display: flex;
  justify-content: center;
  flex: 1 1 280px;
  min-width: 0;
}
.landing-hero__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(110%, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 226, 121, 0.34) 0%, rgba(212, 226, 121, 0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.landing-hero__phone {
  position: relative;
  width: min(100%, 280px);
}
/* The phone's shadow. It used to be a drop-shadow filter on .landing-hero__phone, but a
   filter on the parent of a playing video gets clipped by the GPU compositor now and
   then, which left a hard line under the phone. A box-shadow involves no filter. The box
   is the body of hero-frame.svg: x 6.5 to 793.5, y 0.5 to 1644.5, corner radius 107.5,
   as percentages of the 800x1645 viewBox (radius against the body's 787x1644). The 68px
   blur is fitted to the old drop-shadow(0 30px 40px), whose blur value counts for more. */
.landing-hero__phone::before {
  content: "";
  position: absolute;
  inset: 0.03% 0.8125%;
  border-radius: 13.66% / 6.539%;
  box-shadow: 0 30px 68px rgba(0, 0, 0, 0.35);
}
/* The poster image and the screen recording sit inside the screen opening of
   hero-frame.svg. Every value below is that opening expressed as a percentage of
   the frame's 800x1645 viewBox: x 34, y 28, 732 x 1589, corner radius 80. Keep
   the two in sync or the bezel goes uneven. The two-value border-radius keeps
   those corners circular at any render size, because a percentage radius
   resolves against the width horizontally and the height vertically (80/732 and
   80/1589). A single px radius does not scale with the frame and lets the screen
   bulge out past the bezel curve. */
.landing-hero__screen {
  position: absolute;
  top: 1.702%;
  left: 4.25%;
  width: 91.5%;
  height: 96.596%;
  border-radius: 10.929% / 5.035%;
  object-fit: cover;
}
.landing-hero__frame { position: relative; width: 100%; height: auto; }
/* Side by side, the phone sits a third closer to the copy than centering puts it.
   A transform moves the glow with it and leaves the wrap point alone. */
@media (min-width: 901px) {
  .landing-hero--compact .landing-hero__media { transform: translateX(-60px); }
}

/* QR code card: inline in the /benefit hero, stacked in its closing band */
.qr-card {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 16px 22px 16px 16px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
.qr-card__link { display: block; }
.qr-card__code { width: 104px; height: auto; }
.qr-card__text { display: flex; flex-direction: column; gap: 4px; }
.qr-card__title { color: var(--blue); font-size: 15px; font-weight: 700; line-height: normal; }
.qr-card__caption {
  display: block;
  max-width: 280px;
  color: var(--slate);
  font-size: 13px;
  line-height: 1.5;
}
.qr-card--stacked {
  flex-direction: column;
  gap: 14px;
  margin-top: 0;
  padding: 24px 32px;
  border-radius: 18px;
  box-shadow: none;
}
.qr-card--stacked .qr-card__code { width: 160px; }
.qr-card--stacked .qr-card__title { font-weight: 600; }
.qr-card--stacked .qr-card__caption { max-width: 250px; text-align: center; }

/* Store badges: an iPhone or Android phone gets its store's badge in place of the QR card,
   since a phone can't scan its own screen. /benefit's head script sets :root[data-device] with
   the same split as the get.gigmatch.com router; with no match (computers, iPads) or no
   JavaScript, the QR card stays. Official store artwork, unmodified. */
.store-badge { display: none; width: fit-content; margin-top: 32px; line-height: 0; }
.store-badge--stacked { margin-top: 0; }
.store-badge__img { max-width: none; height: auto; }
/* Google's PNG carries a transparent safe zone around the badge; clip it so the visible badge
   lines up with the text beside it, the way Apple's does. */
.store-badge--android { overflow: hidden; }
.store-badge--android .store-badge__img { margin: -12.6px; }
:root[data-device="ios"] .store-badge--ios,
:root[data-device="android"] .store-badge--android { display: block; }
:root[data-device="ios"] .qr-card,
:root[data-device="android"] .qr-card { display: none; }

/* ========== Landing: sections ========== */
.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 28px;
}
.action-row--stacked { flex-direction: column; align-items: flex-start; gap: 12px; }
.action-row__note { color: var(--slate); font-size: 14px; line-height: 1.5; }

/* Numbered how-it-works steps with app screenshots, on .section--blue */
.walkthrough {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 64px);
  margin-top: 56px;
}
.walkthrough__step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 56px;
}
.walkthrough__step--reverse { flex-direction: row-reverse; }
.walkthrough__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 300px;
  min-width: 0;
}
.walkthrough__num {
  color: var(--lime);
  font-family: var(--font-heading);
  font-size: clamp(56px, 7vw, 84px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.walkthrough__title {
  color: var(--white);
  font-size: 26px;
  line-height: normal;
  letter-spacing: -0.01em;
}
.walkthrough__body {
  max-width: 380px;
  color: var(--on-dark);
  font-size: 18px;
  line-height: 1.6;
}
.walkthrough__media {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 320px;
  min-width: 0;
}
.walkthrough__media--center { justify-content: center; }
.walkthrough__shot { flex: 1 1 0; width: 33%; min-width: 0; height: auto; }
.walkthrough__shot--third { flex: 0 0 calc((100% - 24px) / 3); }

/* Step 2 fan: seven match screens start exactly stacked and, as the block scrolls into
   view, swing apart around a pivot well below them, the way cards are fanned in a hand.
   site.js sets --p from 0 to 1 on .fan; the geometry lives here so it is tunable without
   touching the script. --n is how many phone widths the stage spans; the aspect ratio
   is sized for the outermost phone at full swing. --drop lowers each phone a little
   more the further it sits from the centre, so the top edge steps down instead of
   tracing one smooth arc. Frame and corner radius are fractions of the phone width
   (container units) so they stay in proportion at any size. The outer phones swing a
   little past the box on each side, into the gutter and the gap before the copy. */
.walkthrough__media:has(.fan) { flex-grow: 3; }
.fan {
  --p: 1;
  --n: 4.8;
  --step: 10.5deg;
  --pivot: 150%;
  --drop: 5%;
  position: relative;
  width: 100%;
  aspect-ratio: calc(var(--n) / 2.95);
  container-type: inline-size;
}
.fan__phone {
  --d: 0;
  --ad: 0;
  --w: calc(100cqw / var(--n));
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--w);
  height: auto;
  margin-left: calc(var(--w) / -2);
  border: calc(var(--w) * 0.03) solid #12172b;
  border-radius: calc(var(--w) * 0.16);
  background: #12172b;
  /* Shadows fade in with the fan; seven of them stacked at --p: 0 make a dark halo. */
  box-shadow: 0 18px 50px rgba(0, 0, 0, calc(0.25 * var(--p)));
  transform-origin: 50% var(--pivot);
  transform:
    rotate(calc(var(--d) * var(--step) * var(--p)))
    translateY(calc(var(--ad) * var(--drop) * var(--p)));
  will-change: transform;
}
/* Left to right in the markup; the centre phone is on top and the stack falls away outward. */
.fan__phone:nth-child(1) { --d: -3; --ad: 3; z-index: 1; }
.fan__phone:nth-child(2) { --d: -2; --ad: 2; z-index: 2; }
.fan__phone:nth-child(3) { --d: -1; --ad: 1; z-index: 3; }
.fan__phone:nth-child(4) { z-index: 4; box-shadow: var(--shadow-float); }
.fan__phone:nth-child(5) { --d: 1;  --ad: 1; z-index: 3; }
.fan__phone:nth-child(6) { --d: 2;  --ad: 2; z-index: 2; }
.fan__phone:nth-child(7) { --d: 3;  --ad: 3; z-index: 1; }
/* Narrow screens: five phones, otherwise each is too small to read. */
@media (max-width: 600px) {
  .fan { --n: 3.7; aspect-ratio: calc(var(--n) / 2.65); }
  .fan__phone--outer { display: none; }
}
/* Step 1 slide: the second and third phones start tucked behind the first, each showing
   a quarter of its width to the right of the one in front, and draw out to their normal
   row positions. The offsets undo the row spacing, so they include the 12px flex gap. */
.slide { --p: 1; }
.slide .walkthrough__shot { position: relative; will-change: transform; }
.slide .walkthrough__shot:nth-child(1) { z-index: 3; }
.slide .walkthrough__shot:nth-child(2) { z-index: 2; transform: translateX(calc((1 - var(--p)) * (-75% - 12px))); }
.slide .walkthrough__shot:nth-child(3) { z-index: 1; transform: translateX(calc((1 - var(--p)) * (-150% - 24px))); }
/* Step 3 converge: the two phones start pushed apart, each by --spread of its own width,
   and close to their normal spacing. */
.converge { --p: 1; --spread: 40%; }
.converge .walkthrough__shot { will-change: transform; }
.converge .walkthrough__shot:nth-child(1) { transform: translateX(calc((1 - var(--p)) * -1 * var(--spread))); }
.converge .walkthrough__shot:nth-child(2) { transform: translateX(calc((1 - var(--p)) * var(--spread))); }
@media (prefers-reduced-motion: reduce) {
  .fan, .slide, .converge { --p: 1 !important; }
}

.video-frame {
  max-width: 860px;
  margin: 36px auto 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--blue);
  box-shadow: var(--shadow-lg);
}
.video-frame__video { width: 100%; aspect-ratio: 16 / 9; background: var(--blue); }

.cta-band { background: var(--blue); color: var(--white); }
.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-block: clamp(48px, 7vw, 80px);
  text-align: center;
}
.cta-band__title {
  color: var(--lime);
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: normal;
  letter-spacing: -0.025em;
}
.cta-band__note { max-width: 440px; color: var(--white); font-size: 15px; line-height: 1.6; }
/* On white, for a band that sits between an alabaster section and the footer. */
.cta-band--light { background: var(--white); color: var(--navy); }
.cta-band--light .cta-band__title { color: var(--navy); }
.cta-band--light .cta-band__note { color: var(--slate); }

/* ========== About ========== */
/* A hero with only a copy column, which keeps a readable measure instead of
   stretching the full container. */
.page-hero__inner--single { grid-template-columns: minmax(0, 1.4fr); }

/* Running narrative copy. Not .doc: this is a marketing section, not a legal page. */
.prose { max-width: 68ch; color: var(--slate); font-size: 17px; line-height: 1.65; }
.prose > p + p { margin-top: 18px; }
/* Running copy under a section heading gets the same gap a .section__lead does. */
.section__title + .prose { margin-top: 18px; }

.pull-quote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--lime);
}
.pull-quote__text {
  margin: 0;
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.4;
}
.pull-quote__attribution {
  margin-top: 14px;
  color: var(--gray);
  font-size: 14.5px;
  letter-spacing: 0.02em;
}

/* Founder story: portrait beside the quote and a short summary, full story behind a
   disclosure. The portrait sticks so it stays beside the copy once the story is opened. */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 56px;
}
/* top clears the sticky site header */
.story__media { position: sticky; top: 116px; margin: 0; }
.story__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.story__quote { margin-top: 0; }
.story__more { margin-top: 24px; }
.story__more .reveal__inner { padding-top: 18px; }
@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; gap: 32px; }
  .story__media { position: static; max-width: 320px; }
}

/* Disclosure: a <details> whose summary swaps its label when open. With script the body
   is a 0fr/1fr grid row so the height eases open and shut (site.js sets .reveal--js and
   .is-open); without it the native open attribute shows the body outright. */
.reveal__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 0;
  color: var(--sapphire);
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.reveal__toggle::-webkit-details-marker { display: none; }
.reveal__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s;
}
.reveal__close { display: none; }
.reveal.is-open > .reveal__toggle::after,
.reveal[open]:not(.reveal--js) > .reveal__toggle::after { margin-top: 3px; transform: rotate(225deg); }
.reveal.is-open > .reveal__toggle .reveal__open,
.reveal[open]:not(.reveal--js) > .reveal__toggle .reveal__open { display: none; }
.reveal.is-open > .reveal__toggle .reveal__close,
.reveal[open]:not(.reveal--js) > .reveal__toggle .reveal__close { display: inline; }
.reveal--js > .reveal__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.reveal--js > .reveal__body > .reveal__inner { min-height: 0; overflow: hidden; }
.reveal--js.is-open > .reveal__body { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) {
  .reveal--js > .reveal__body, .reveal__toggle::after { transition: none; }
}

/* Leadership cards: headshot, name and title, LinkedIn in the corner, bio behind a
   disclosure. Flex rather than grid so a short last row centres under the full one. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.team-card {
  position: relative;
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  align-items: center;
  max-width: 360px;
  padding: 24px;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
/* site.js makes the whole card open and close the bio. The button lights up to show what
   a click will do, except over the two parts that do not toggle. */
.team-card--tappable { cursor: pointer; }
.team-card--tappable .reveal__body { cursor: auto; }
.team-card--tappable:hover:not(:has(.team-card__linkedin:hover, .reveal__body:hover)) .reveal__toggle { background: var(--alabaster); }
/* 44px tap target around a 22px glyph */
.team-card__linkedin {
  position: absolute;
  top: 4px;
  right: 4px;
  display: block;
  padding: 11px;
  line-height: 0;
  color: #0A66C2; /* LinkedIn brand blue */
  transition: color 0.15s;
}
.team-card__linkedin:hover, .team-card__linkedin:focus-visible { color: #004182; }
/* The rest of the card is a bio toggle, so a near miss on the icon should still reach
   LinkedIn: the link's hit area runs 10px past the 44px target. */
.team-card__linkedin::after { content: ""; position: absolute; inset: -10px; }
/* The headshots are all 470x600 with the same studio background, so a fixed ratio
   keeps every face at the same scale across the row. height:auto is load-bearing:
   the width/height attributes on the <img> are presentational hints, and a used
   height would win over aspect-ratio and show each photo at full length. */
.team-card__photo {
  width: 50%;
  height: auto;
  aspect-ratio: 470 / 540;
  object-fit: cover;
  object-position: center top;
  border-radius: calc(var(--radius) / 2);
}
.team-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding-top: 18px;
}
.team-card__name { color: var(--navy); font-size: 22px; }
/* Two lines reserved so a one-line title does not make its card shorter than the row. */
.team-card__role {
  min-height: calc(2 * 1.4em);
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.team-card__more { width: 100%; }
/* The whole width of the card is the tap target, not just the two words. */
.team-card__more .reveal__toggle {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: calc(var(--radius) / 2);
  font-size: 14.5px;
  transition: background-color 0.15s;
}
.team-card__more .reveal__toggle:hover, .team-card__more .reveal__toggle:focus-visible { background: var(--alabaster); }
/* Bios stay ragged-right; centred running text is hard to read at this measure. */
.team-card__bio { margin-top: 14px; color: var(--slate); font-size: 16px; line-height: 1.55; text-align: left; }

/* ========== Documents ==========
   Long-form pages (legal, security, support). Element styles are scoped with :where()
   so the .doc__* classes below override them without specificity fights. */
.doc {
  max-width: var(--container-narrow);
  margin: 0 auto 72px;
  padding: 56px 24px 40px;
  color: var(--slate);
  font-size: 17px;
  line-height: 1.65;
  --measure: 68ch;
  --list-indent: 22px;
}
.doc--legal { --measure: 72ch; --list-indent: 24px; }
.doc :where(h1) { margin: 0 0 16px; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.doc :where(h2) { margin: 44px 0 12px; font-size: 23px; line-height: inherit; letter-spacing: -0.01em; }
.doc :where(h3) { margin: 28px 0 8px; font-size: 18px; line-height: inherit; }
.doc :where(p) { max-width: var(--measure); margin: 0 0 14px; }
.doc :where(ul, ol) { max-width: var(--measure); margin: 0 0 14px; padding-left: var(--list-indent); }
.doc :where(ol ol) { margin: 7px 0; list-style: lower-alpha; }
.doc :where(li) { margin: 0 0 7px; }
.doc :where(strong) { color: var(--blue); }
.doc :where(a) { text-decoration: underline; }
.doc :where(table) { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 15px; }
.doc :where(th, td) { padding: 8px 10px; border: 1px solid var(--stone); text-align: left; vertical-align: top; }
.doc :where(th) { background: var(--alabaster); }
.doc :where(hr) { margin: 32px 0; border: 0; border-top: 1px solid var(--mist); }
@media (max-width: 520px) {
  .doc { padding: 40px 20px 32px; }
  .doc :where(h1) { font-size: 32px; }
}

.doc__lead { max-width: 60ch; margin: 0 0 8px; color: var(--gray-dark); font-size: 19px; }
.doc__meta { margin: 0 0 36px; color: var(--gray); font-size: 13.5px; }
/* At-a-glance box */
.doc__summary {
  margin: 8px 0;
  padding: 22px 26px;
  background: var(--alabaster);
  border-radius: var(--radius);
}
.doc__summary ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.doc__summary li { position: relative; padding-left: 22px; }
.doc__summary li::before {
  content: "\25C6";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--blue);
  font-size: 11px;
  line-height: 1.9;
}

/* One-message page: 404.html */
.splash-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.splash {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto 72px;
  padding: 96px 24px 80px;
}
.splash__title { font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; }
.splash__text { margin-top: 20px; }
@media (max-width: 520px) {
  .splash { padding: 64px 20px 56px; }
  .splash__title { font-size: 40px; }
}

/* Numbered references: superscript markers in the copy, and the collapsed source list
   they point at (a .reveal under the copy). Light ground by default; the Plan Sponsors
   problem panel overrides for its navy ground. */
.ref-mark { margin-left: 2px; font-size: 0.62em; line-height: 0; vertical-align: super; }
/* Padding widens the tap target; the matching negative margin keeps the numerals tight. */
.ref-mark a { margin: -6px -3px; padding: 6px 3px; color: inherit; text-decoration: none; }
.ref-mark a:hover { text-decoration: underline; }
.ref-mark__sep { margin-right: 1px; }
.prose .ref-mark { color: var(--gray); }
.refs { margin-top: 22px; }
.refs > .reveal__toggle { color: var(--gray); font-size: 13px; font-weight: 500; }
.refs__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 6px 0 0 18px;
  color: var(--gray);
  font-size: 13px;
  line-height: 1.5;
}
.refs__list cite { font-style: italic; }
.refs__list a { color: var(--sapphire); }
.refs__list li:target { color: var(--navy); }
.refs__list li { scroll-margin-top: 112px; }
#research { scroll-margin-top: 88px; }
.split__list .ref-mark,
.split__panel--problem .refs > .reveal__toggle,
.split__panel--problem .refs__list { color: var(--on-dark-muted); }
.split__panel--problem .refs__list a { color: var(--lime); }
.split__panel--problem .refs__list li:target { color: var(--white); }
.split__group {
  margin: 0 0 2px;
  color: var(--lime);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* How-it-works: step 1 spans the row; steps 2 and 3 sit side by side, each with its phone underneath. */
.split__steps { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 16px; }
.split__steps li:first-child { grid-column: 1 / -1; }
.split__step--shot { display: grid; grid-template-rows: auto 1fr; row-gap: 14px; }
.split__step--shot .split__phone { align-self: end; justify-self: start; width: min(176px, calc(100% + 20px)); margin: 0 0 0 -20px; }
/* Laptop and up: the steps run 10% under the body size (the body clamp is 18px / 1.4vw / 22px), but stop
   at 17.4px (reached at 1381px). The panel stops growing near 1280px, so a larger font would only rewrap the copy. */
@media (min-width: 641px) {
  .split__steps li { font-size: clamp(16.2px, 1.26vw, 17.4px); }
}
@media (max-width: 640px) {
  .split__steps { column-gap: 14px; }
  .split__steps li { padding-left: 34px; font-size: 16px; }
  .split__steps li::before { width: 24px; height: 24px; font-size: 13px; }
  .split__step--shot .split__phone { width: min(154px, calc(100% + 17px)); margin-left: -17px; }
}