/* STAMP Institute site styles.
   Colors and type come from the old site's Elementor kit (see SOURCE-MATERIALS.md). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-latin.woff2) format("woff2");
}

:root {
  --navy-bg: #1a2b4b;
  --navy-btn: #20355c;
  --navy-text: #142038;
  --steel: #4892dc;
  --steel-text: #2f6fb5; /* steel blue dark enough for small text: 5.2:1 on white, 4.5:1 on --steel-soft. --steel itself is 3.3:1, so it is for icons, borders, fills and large headings only. */
  --steel-soft: #e8f1fb;
  --steel-faint: #d6e6f8;
  --accent: #f59e0b;
  --star: #f4600c;
  --text: #56687f; /* 6:1 on white, 4.8:1 on the pale blue boxes (#e3ecf5); was #5c6f8a, 4.3:1 there */
  --bg: #ffffff;
  --bg-tint: #f8fafc;
  --bg-light: #f6f7f7;
  --card-bg: #f3f5f7;
  --line: #e1e7ef;
  --footer-bg: #192434;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgb(20 32 56 / 4%), 0 4px 16px rgb(20 32 56 / 5%);
  --container: 1200px;
  --gutter: 24px;
  --header-h: 106px;
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.625;
  color: var(--text);
  background: var(--bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--steel-text); }
a:hover { color: var(--navy-btn); }
h1, h2, h3, h4 { color: var(--navy-text); margin: 0; line-height: 1.2; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; }

.icon { width: 1em; height: 1em; flex: none; }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--navy-btn); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 8px; }
.hp { position: absolute; left: -9999px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 17px 34px; border-radius: 8px; border: 2px solid transparent;
  font-weight: 600; font-size: 16px; line-height: 1.5; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-navy { background: var(--navy-btn); color: #fff; }
.btn-navy:hover { background: var(--navy-text); color: #fff; }
.btn-outline { background: #fff; color: var(--navy-btn); border-color: var(--navy-btn); }
.btn-outline:hover { background: var(--navy-btn); color: #fff; }
.btn-blue { background: var(--steel-text); color: #fff; }
.btn-blue:hover { background: #275d99; color: #fff; }
.btn-small { padding: 10px 16px; font-size: 14px; font-weight: 500; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(246 248 251 / 88%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); position: relative; }
.header-inner::after { content: ""; position: absolute; left: calc(var(--gutter) + 85px); right: var(--gutter); bottom: 20px; height: 2px; background: #b9c0cb; }
.brand { display: flex; align-items: center; gap: 14px; flex: none; text-decoration: none; }
.brand-mark { width: 74px; height: auto; }
/* The name beside the logo is text, in the old logo picture's font and color. */
.brand-word { display: flex; flex-direction: column; margin-bottom: 14px; font-family: var(--font-head); color: #4e71a2; line-height: 1.15; white-space: nowrap; }
.brand-name { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.brand-tagline { font-size: 16px; font-weight: 600; }
.site-nav { display: flex; align-items: center; flex: 1; gap: 24px; justify-content: space-between; }
.nav-list { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding-bottom: 14px; }
.nav-list a, .nav-sub-toggle {
  display: flex; align-items: center; gap: 4px;
  padding: 8px; color: var(--navy-btn); text-decoration: none; font-size: 16px;
  background: none; border: 0; cursor: pointer; position: relative; white-space: nowrap;
}
.nav-list > li > a[aria-current="page"]::after, .has-sub.is-active > .nav-sub-toggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 3px; background: var(--navy-btn);
}
.nav-list a:hover, .nav-sub-toggle:hover { color: var(--steel-text); }
.nav-sub-toggle .icon { width: 16px; height: 16px; transition: transform .2s; }
.has-sub { position: relative; }
.nav-sub {
  position: absolute; top: 100%; left: 0; z-index: 1; min-width: 220px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.has-sub:hover .nav-sub, .has-sub:focus-within .nav-sub, .has-sub.open .nav-sub { opacity: 1; visibility: visible; transform: none; }
.has-sub:hover .nav-sub-toggle .icon, .has-sub.open .nav-sub-toggle .icon { transform: rotate(180deg); }
.nav-sub a { padding: 8px 12px; border-radius: 6px; }
.nav-sub a:hover, .nav-sub a[aria-current="page"] { background: var(--bg-tint); }
.header-cta { margin-bottom: 14px; }
.nav-toggle { display: none; }

/* The full menu needs about 1,240px; below that it folds into the menu button. */
@media (max-width: 1260px) {
  :root { --header-h: 76px; }
  .header-inner::after { display: none; }
  .brand-mark { width: 52px; }
  .brand-word { margin: 0; }
  .brand-name { font-size: 22px; }
  .brand-tagline { font-size: 13.5px; }
  .nav-toggle {
    display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy-btn); cursor: pointer;
  }
  .nav-toggle .icon { width: 24px; height: 24px; }
  .nav-toggle .icon-close, .nav-open .nav-toggle .icon-open { display: none; }
  .nav-open .nav-toggle .icon-close { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 12px var(--gutter) 24px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .nav-open .site-nav { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; margin: 0; padding: 0; }
  .nav-list a, .nav-sub-toggle { padding: 12px 8px; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-list > li > a[aria-current="page"]::after, .has-sub.is-active > .nav-sub-toggle::after { display: none; }
  .nav-list a[aria-current="page"] { font-weight: 600; }
  .nav-sub-toggle { justify-content: space-between; }
  .nav-sub { position: static; display: none; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 0 16px; }
  .has-sub:hover .nav-sub, .has-sub:focus-within .nav-sub { display: none; }
  .has-sub.open .nav-sub { display: block; }
  .header-cta { margin: 0; }
}

/* ---------------------------------------------------------------- sections */

.section { padding: 112px 0; }
.section-tint { background: var(--bg-tint); }
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section-head-wide { max-width: none; }
/* Lets the long process heading fit on one line where there's room either side. */
@media (min-width: 1300px) { .section-head-wide { margin-left: -40px; margin-right: -40px; } }
.eyebrow {
  margin: 0 0 12px; color: var(--steel-text); font-family: var(--font-body);
  font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.section-head h2, .leader-text h2 {
  font-family: var(--font-head); font-size: clamp(32px, 4.2vw, 48px); line-height: 1.15; letter-spacing: -.025em;
}
.lede { margin: 16px 0 0; font-size: 20px; line-height: 1.5; }

.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.grid-2, .grid-3 { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.icon-tile {
  display: inline-grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: 12px; background: var(--card-bg); color: var(--navy-text); font-size: 24px;
}
.icon-tile-solid { background: var(--steel); color: #fff; }
.icon-tile-lg { width: 80px; height: 80px; border-radius: 20px; background: var(--steel-soft); color: var(--steel); font-size: 36px; --cut: var(--steel-soft); }
.icon .cut { fill: var(--cut, #fff); }
.icon-tile-dark { width: 64px; height: 64px; border-radius: 16px; background: #22406b; color: var(--steel); font-size: 28px; }
.icon-tile-sm { width: 36px; height: 36px; border-radius: 8px; font-size: 16px; background: #2e3d59; color: #cbd5e1; }

/* ---------------------------------------------------------------- hero */

/* As on the old site, the photo starts at the top of the page, behind the
   see-through header, pinned to its top edge. That keeps the speaker's head
   and body in view below the header. */
.hero {
  position: relative; margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 40px) 0 72px; text-align: center;
  background: #f8f9fa url(/assets/img/hero.webp) center top / cover no-repeat;
}
.hero-eyebrow { margin: 0 0 4px; color: var(--navy-text); font-size: 14px; letter-spacing: .02em; text-transform: uppercase; }
.hero-title { font-family: var(--font-head); font-size: clamp(48px, 6.5vw, 84px); line-height: 1.1; letter-spacing: -.01em; }
.hero-subtitle { margin: 24px 0 18px; font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; color: var(--steel); text-wrap: balance; }
.hero-lede { margin: 0 auto 28px; max-width: 640px; font-size: 20px; line-height: 1.4; color: #4a5a72; text-wrap: balance; }
/* A banner's own bottom padding already separates it from the next section, so that section needs less above it.
   This covers every banner: the home hero, and the page banner on inner pages (the Why Use pages wrap their sections in .pg-why-use). */
.hero + .section, .page-hero + .section, .page-hero + .pg-why-use > .section:first-child { padding-top: 64px; }
/* A Page Overview is a list of links to the parts below it, so the first part sits closer to it than one section to the next.
   About STAMP, STPA and CAST put their parts in .as-path; the Why Use pages call the overview .wu-toc-band. */
section[aria-labelledby="overview-title"] { padding-bottom: 56px; }
section[aria-labelledby="overview-title"] + .as-path > .as-part:first-of-type, .pg-why-use .wu-toc-band + .section { padding-top: 64px; }
/* A Page Overview that comes after a content section, not straight after the banner, gets the same spacing as one after a
   banner: 64px at the end of the section before it and 64px above the overview, so the overview doesn't float in a wide gap
   (owner, 2026-11-04). The section before it should end without a bottom margin on its last block. */
section:not(.page-hero):has(+ section[aria-labelledby="overview-title"]) { padding-bottom: 64px; }
section:not(.page-hero) + section[aria-labelledby="overview-title"] { padding-top: 64px; }
.stats { display: flex; justify-content: center; gap: 32px; margin-top: 20px; }
.stat {
  display: flex; flex-direction: column; align-items: center; width: 202px; padding: 26px 16px 24px;
  border-radius: var(--radius); background: rgb(255 255 255 / 55%); box-shadow: 0 1px 2px rgb(20 32 56 / 4%);
}
.stat .icon { width: 48px; height: 48px; color: var(--steel); stroke-width: 1.6; }
.stat-number { margin-top: 18px; font-family: var(--font-head); font-weight: 700; font-size: 32px; line-height: 1; color: var(--navy-text); font-variant-numeric: lining-nums tabular-nums; }
.stat-label { margin-top: 10px; font-size: 14px; color: var(--text); }
.wide-only { display: inline; }

/* ---------------------------------------------------------------- client logos */

.clients { padding: 60px 0 48px; background: var(--bg-tint); overflow: hidden; border-bottom: 1px solid #eef1f5; container-type: inline-size; }
.clients-title { margin-bottom: 44px; font-family: var(--font-body); font-weight: 400; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); text-align: center; }
.clients-rule { width: min(820px, 80%); height: 4px; margin: 0 auto; border-radius: 4px; background: linear-gradient(90deg, transparent, #d6dbe3, transparent); }
/* Spacing: 9 logos across the page in the top row and 8 in the bottom row (5 on
   tablets, 3 on phones), as on the old carousel. The rows move in opposite
   directions.
   Speed matches the old carousel, measured on the live site: it moved one slot
   every 8 seconds. Its top row spanned the page, as ours does. Its bottom row
   was only 90% of the page wide, so its slots were smaller and it moved about
   10% slower; ours keeps full-width spacing, so it takes 8.9s per slot instead
   to move at the old speed. */
.marquee {
  --per-view: 9; --gap: 30px; --seconds-per-logo: 8s; --logo-h: 100px;
  --page-w: 100vw;
  --slot: calc((var(--page-w) + var(--gap)) / var(--per-view));
  --logo-w: min(160px, calc(var(--slot) - var(--gap)));
  display: flex; overflow: hidden; margin: 24px 0;
}
/* The page width without the scrollbar, where the browser can measure it. */
@supports (width: 1cqw) { .marquee { --page-w: 100cqw; } }
.marquee + .marquee { --per-view: 8; --seconds-per-logo: 8.9s; }
.marquee-track {
  display: flex; flex: none; align-items: center;
  animation: marquee calc(var(--count) * var(--seconds-per-logo)) linear infinite;
  will-change: transform; backface-visibility: hidden;
}
.marquee-reverse .marquee-track { animation-direction: reverse; }
.marquee-track li { width: var(--slot); height: var(--logo-h); display: grid; place-items: center; flex: none; }
.marquee-track img { max-width: var(--logo-w); max-height: var(--logo-h); width: auto; height: auto; opacity: .75; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; flex: 1 1 100%; }
  .marquee-track[aria-hidden] { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- services */

.services { align-items: stretch; }
.service { position: relative; display: flex; flex-direction: column; padding: 32px; }
.service h3, .reason h3 { margin: 32px 0 16px; font-family: var(--font-head); font-size: 22px; }
.service > p { margin-bottom: 20px; }
.service .btn { margin-top: auto; }
.service-featured { border: 2px solid #a9cbee; }
.badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 2px 18px; border-radius: 999px; background: var(--steel-text); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.checklist { margin-bottom: 56px; }
.checklist li { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.checklist .icon { color: var(--steel); width: 18px; height: 18px; }

/* ---------------------------------------------------------------- leadership */

.leader { padding-top: 40px; }
.leader-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
/* The corner accents and the "JT" badge are part of the photo file itself. */
.leader-photo { margin: 0; }
.leader-photo img { width: 100%; }
.leader-text > p:not(.eyebrow) { font-size: 18px; line-height: 1.45; }
.leader-text h2 { margin-bottom: 24px; }
.creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 32px; }
.creds li { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-tint); font-size: 12px; line-height: 1.35; }
.creds .icon { width: 24px; height: 24px; color: var(--steel); margin-bottom: 14px; }
.creds strong { color: var(--navy-text); font-size: 14px; margin-bottom: 8px; }

/* ---------------------------------------------------------------- methods */

.method { padding: 40px 36px; }
.method-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.method-head h3 { font-family: var(--font-head); font-size: 26px; }
.method-full { margin: 0; font-size: 14px; }
.method-tag { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--steel-text); }
.method-tag-muted { color: #475569; }
.method > p { margin-bottom: 40px; }

/* ---------------------------------------------------------------- process */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1130px; margin: 0 auto 72px; counter-reset: none; }
.step { position: relative; padding: 36px 28px 40px; }
.step .icon { width: 44px; height: 44px; }
.step + .step::before { content: ""; position: absolute; left: -33px; top: 50%; width: 33px; height: 2px; background: #b9d5f1; }
.step-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.step-number { font-family: var(--font-body); font-weight: 700; font-size: 64px; line-height: 1; color: var(--steel-faint); }
.step h3 { margin-bottom: 36px; font-size: 20px; font-family: var(--font-body); font-weight: 600; color: #0d121b; }
.step p { margin: 0; color: #56687f; }

.timeline { max-width: 800px; margin: 0 auto 72px; }
.timeline ol { position: relative; }
.timeline li { position: relative; padding: 0 0 36px 52px; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 0; width: 2px; background: #c9dcf0; }
.timeline-dot { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--steel-soft); color: var(--steel); font-size: 14px; }
.timeline h4 { font-family: var(--font-head); font-size: 20px; }
.timeline p { margin: 2px 0 0; font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------- reasons */

.reasons { max-width: 1120px; margin: 0 auto; gap: 12px; }
.reason { padding: 32px; }
.reason .icon-tile { width: 52px; height: 52px; background: var(--steel-soft); color: var(--steel); --cut: var(--steel-soft); }
.reason .icon { width: 28px; height: 28px; }
.reason h3 { margin: 28px 0 18px; font-family: var(--font-body); font-weight: 600; font-size: 20px; }
.reason p { margin: 0; }

/* ---------------------------------------------------------------- reviews */

.reviews { display: grid; grid-template-columns: 5fr 9fr; gap: 46px; max-width: 1260px; margin: 0 auto; }
.reviews-summary h3 { margin: 20px 0 26px; font-family: var(--font-head); font-size: 30px; letter-spacing: -.02em; }
.rating { padding: 34px; }
.rating-score { margin: 24px 0 0; font-family: var(--font-head); font-size: 22px; color: var(--text); }
.rating-score strong { font-size: 36px; color: var(--navy-text); }
.rating-count { margin: 0; font-size: 14px; }
.reviews-all { margin-top: 20px; }
.stars { display: flex; gap: 2px; color: var(--star); font-size: 20px; }
.stars-lg { gap: 6px; font-size: 32px; }
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.review { display: flex; flex-direction: column; margin: 0; padding: 24px 22px; }
.review h4 { margin: 18px 0 14px; font-family: var(--font-body); font-weight: 600; font-size: 20px; }
.review blockquote { margin: 0 0 24px; font-size: 14px; line-height: 1.7; }
.review blockquote p { margin: 0; }
.review figcaption { display: flex; align-items: center; gap: 8px; margin-top: auto; color: var(--steel-text); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.review figcaption .icon { width: 16px; height: 16px; fill: var(--steel); stroke: #fff; }

/* ---------------------------------------------------------------- free library and quiet offers */

/* The free library on the home page: one card per topic, each a short list of
   STAMP Institute's own pages, so new material is one more line in a list. */
.library-grid { gap: 20px; }
.library-card { padding: 28px 28px 22px; border: 1px solid var(--line); box-shadow: 0 4px 24px rgb(20 32 56 / 6%); }
.library-card .icon-tile { width: 48px; height: 48px; border-radius: 10px; background: var(--steel-soft); color: var(--steel); font-size: 24px; --cut: var(--steel-soft); }
.library-card h3 { margin: 20px 0 8px; font-family: var(--font-head); font-size: 21px; line-height: 1.3; color: var(--navy-text); }
.library-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; }
.library-card ul { margin: 0; padding: 0; list-style: none; }
.library-card li { border-top: 1px solid var(--line); }
.library-card li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; color: var(--navy-text); font-weight: 600; font-size: 15.5px; text-decoration: none; }
.library-card li a .icon { flex: none; width: 16px; height: 16px; color: var(--steel); transition: transform .2s; }
.library-card li a:hover { color: var(--steel-text); }
.library-card li a:hover .icon { transform: translateX(2px); }
.library-more { margin: 28px 0 0; text-align: center; }

/* Paid offers: no buttons, no badges, just a heading, a line and a plain link. */
.offer-grid { gap: 20px; }
.offer { padding: 28px 28px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.offer h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--font-body); font-size: 19px; font-weight: 600; color: var(--navy-text); }
.offer h3 .icon { width: 22px; height: 22px; color: var(--steel); }
.offer p { margin: 0 0 16px; font-size: 15px; line-height: 1.65; }

/* "Where to go next": the closing block on the learning pages, in place of a sales band. */
.next-steps { max-width: 1040px; margin: 0 auto; padding: 44px 40px 36px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg-tint); }
.next-steps h2 { margin-bottom: 28px; font-family: var(--font-head); font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; text-align: center; }
.next-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.next-step h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--navy-text); }
.next-step h3 .icon { width: 20px; height: 20px; color: var(--steel); }
.next-step p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.next-steps-note { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; text-align: center; }

.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--steel-text); font-weight: 600; text-decoration: none; }
.text-link .icon { width: 16px; height: 16px; transition: transform .2s; }
.text-link:hover { text-decoration: underline; }
.text-link:hover .icon { transform: translateX(2px); }
.text-link .link-page { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
/* A link that names its page ("…, on About STAMP") wraps as ordinary text. As a flex box it split
   into two columns on phones: the wrapped words on the left, the page name beside them (2026-11-05). */
.text-link:has(.link-page) { display: inline; }
.text-link:has(.link-page) .icon { margin-left: 6px; vertical-align: -3px; }
.leader-more { margin-top: 24px; }
.home-reviews { gap: 16px; }
.home-reviews-more { margin: 28px 0 0; text-align: center; }

/* ---------------------------------------------------------------- newsletter */

.newsletter-wrap { padding-top: 40px; padding-bottom: 80px; }
.newsletter { max-width: 1280px; margin: 0 auto; padding: 80px 32px 88px; border-radius: 48px; background: #1c2b4b; color: #cbd5e1; text-align: center; }
.newsletter > .icon-tile { margin-bottom: 30px; }
.newsletter h2 { max-width: 560px; margin: 0 auto; font-family: var(--font-head); font-size: clamp(32px, 4vw, 48px); line-height: 1.05; color: #fff; letter-spacing: -.02em; }
.newsletter .lede { color: #dbe3ee; font-size: 18px; }
.newsletter-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 44px; margin: 30px 0 48px; font-size: 14px; color: #fff; }
.newsletter-perks li { display: flex; align-items: center; gap: 10px; }
.newsletter-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 460px; margin: 0 auto; }
.newsletter-form input[type="email"] {
  flex: 1 1 260px; min-width: 0; height: 58px; padding: 0 18px;
  border: 1px solid #4a5d7e; border-radius: 12px; background: #2f3f5e; color: #fff; font-size: 16px;
}
.newsletter-form input::placeholder { color: #9aa8bd; }
.newsletter-form .btn { height: 58px; padding: 0 32px; border-radius: 10px; }
.newsletter-form .form-error { flex-basis: 100%; color: #fecaca; }
.newsletter-privacy { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px 0 0; font-size: 14px; color: #aab6c8; }

/* ---------------------------------------------------------------- footer */

/* Footer type and colors follow the old site's footer template: 70% white text
   at weight 400, 50% white for the bottom line. */
.site-footer { background: var(--footer-bg); color: rgb(248 250 252 / 70%); padding: 80px 0 64px; font-size: 14px; line-height: 20px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 0 10px 56px; border-bottom: 1px solid rgb(248 250 252 / 10%); }
.footer-brand img { width: 220px; margin-bottom: 20px; }
.footer-brand p { max-width: 210px; font-size: 13px; line-height: 20px; }
.social { display: flex; gap: 12px; margin-top: 24px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #2c3648; color: #fff; }
.social a:hover { background: var(--steel); color: #fff; }
.social .icon { width: 18px; height: 18px; }
.footer-col h2 { margin: 18px 0 22px; font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--steel); }
.footer-col li { margin-bottom: 16px; }
.footer-col a { color: inherit; text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 30px; color: rgb(248 250 252 / 50%); }
.footer-bottom p { margin: 0; }

/* ---------------------------------------------------------------- popups and forms */

.popup {
  width: min(640px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0;
  border: 0; border-radius: 20px; background: #fff; color: var(--text); box-shadow: 0 24px 64px rgb(20 32 56 / 30%);
}
.popup::backdrop { background: rgb(15 23 42 / 55%); }
.popup[open] { animation: popup-in .2s ease-out; }
@keyframes popup-in { from { opacity: 0; transform: translateY(12px); } }
.popup-body { padding: 44px 40px 36px; }
.popup-close {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: var(--card-bg); color: var(--navy-text); cursor: pointer; font-size: 20px;
}
.popup-close:hover { background: var(--line); }
.popup h2 { margin-bottom: 12px; padding-right: 32px; font-family: var(--font-head); font-size: 30px; line-height: 1.2; }
.popup-intro { margin-bottom: 28px; }
.popup .fine-print { margin: 18px 0 0; font-size: 13px; color: #56687f; }
.popup .fine-print a { color: inherit; }
.popup-success { text-align: center; }
.popup-success .icon-tile { width: 72px; height: 72px; border-radius: 50%; background: var(--steel-soft); color: var(--steel); font-size: 34px; margin-bottom: 20px; }
.popup-success h2 { padding: 0; }
.popup-success .btn { margin-top: 12px; }
.success-list { text-align: left; margin: 20px 0; }
.success-list li { padding: 6px 0; }
.success-list strong { color: var(--navy-text); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; }
.form-grid[hidden] { display: none; }  /* an on-page form gives way to its thank-you message */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full, .form-grid > fieldset, .form-grid > .form-actions, .form-grid > .form-error { grid-column: 1 / -1; }
.field label, .form-legend { font-size: 14px; font-weight: 600; color: #0d121b; }
.field .optional { font-weight: 400; color: #56687f; }
.field input, .field textarea, .field-input {
  width: 100%; padding: 12px 14px; border: 1px solid #cfd8e3; border-radius: 10px; background: #fff; font-size: 15px; color: var(--navy-text);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus, .field-input:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgb(72 146 220 / 20%); }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-legend { padding: 0; margin-bottom: 10px; }
.form-note { margin: -4px 0 10px; font-size: 13px; color: #56687f; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choices-single { grid-template-columns: 1fr; }
.choice { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #cfd8e3; border-radius: 10px; cursor: pointer; font-size: 15px; color: var(--navy-text); line-height: 1.35; }
.choice:hover { border-color: var(--steel); }
.choice input { accent-color: var(--steel); width: 18px; height: 18px; margin: 0; flex: none; }
.choice:has(input:checked) { border-color: var(--steel); background: var(--steel-soft); }
.stack { display: grid; gap: 10px; }
.form-actions { margin-top: 8px; }
.form-error { margin: 0; color: #b42318; font-size: 14px; }
.form-success { padding: 24px; border-radius: var(--radius); background: var(--steel-soft); color: var(--navy-text); text-align: center; }

/* Page feedback: a pencil button fixed in the bottom-right corner. Its label
   shows near the top and the bottom of the page (site.js sets .fb-quiet between). */
.fb-dock { position: fixed; right: 24px; bottom: 24px; z-index: 40; }
.fb-button { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.fb-tile {
  display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid #fff; border-radius: 14px;
  background: var(--steel); color: #fff; font-size: 24px; box-shadow: 0 6px 20px rgb(20 32 56 / 28%); transition: background .2s, transform .2s;
}
.fb-button:hover .fb-tile { background: var(--navy-btn); transform: translateY(-2px); }
.fb-label {
  padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--navy-text); font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 16px rgb(20 32 56 / 18%); transition: opacity .3s, transform .3s;
}
.fb-quiet .fb-label { opacity: 0; transform: translateX(8px); }
/* While the label is hidden, only the pencil takes clicks, not the space beside it. */
.fb-quiet, .fb-quiet .fb-button { pointer-events: none; }
.fb-quiet .fb-tile { pointer-events: auto; }
.fb-button:hover .fb-label, .fb-button:focus-visible .fb-label { opacity: 1; transform: none; }
body:has(.fb-dock) .site-footer { padding-bottom: 100px; }
.fb-where { margin-top: -12px; font-size: 14px; color: #56687f; }
.fb-where p { margin: 0; }
.fb-where strong { color: var(--navy-text); font-weight: 600; }
.fb-quote { margin-top: 4px !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fb-quote q { font-style: italic; }
@media (max-width: 760px) {
  .fb-dock { right: 14px; bottom: 14px; }
  .fb-tile { width: 46px; height: 46px; border-radius: 12px; font-size: 21px; }
  .fb-label { font-size: 13px; padding: 7px 12px; }
  body:has(.fb-dock) .site-footer { padding-bottom: 84px; }
}
@media print { .fb-dock { display: none; } }
/* What a visitor had on screen, shown from an /admin/feedback link (#fb-view=…). */
.fb-shade { position: absolute; left: 0; right: 0; z-index: 45; background: rgb(15 23 42 / 45%); pointer-events: none; }
.fb-frame { position: absolute; left: 6px; right: 6px; z-index: 45; border: 3px dashed #e5484d; border-radius: 6px; pointer-events: none; }
.fb-frame-tag {
  position: absolute; top: -3px; left: -3px; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px;
  border-radius: 6px 0 6px 0; background: #e5484d; color: #fff; font-size: 13px; font-weight: 600; pointer-events: auto;
}
.fb-frame-tag button { border: 0; background: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }

/* ================================================================ shared page components
   Used by every page other than home. Page-specific rules go in css/pages/<page>.css. */

/* Page banner. Pick the picture with --banner on the section, e.g.
   style="--banner: url(/assets/img/banners/about-us.webp)". Like the home hero, it
   starts behind the see-through header. */
.page-hero {
  --banner: url(/assets/img/banners/plain.webp);
  margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 72px) 0 80px; text-align: center;
  background: #eaf2fc var(--banner) center / cover no-repeat;
}
.page-hero h1 { font-family: var(--font-head); font-size: clamp(38px, 5.4vw, 64px); line-height: 1.1; letter-spacing: -.02em; max-width: 900px; margin: 0 auto; }
.page-hero-lede { max-width: 680px; margin: 16px auto 0; font-size: 20px; line-height: 1.45; color: #4a5a72; }
.page-hero .btn-row { margin-top: 32px; }
.page-hero-sub { margin: 14px 0 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); color: var(--steel); }
/* A soft white burst behind a photo banner's text, centred on the text and fading out before the
   photo's subject at the sides (notes/STYLE-GUIDE.md, "Banner photos"). Add the class and, if the
   defaults don't suit the photo, tune it on the section's style attribute:
     --burst      opacity at the centre (72%; about 40% for a light touch)
     --burst-w / --burst-h / --burst-x / --burst-y   ellipse width, height and centre, wide screens
     --burst-w-phone / --burst-h-phone / --burst-y-phone   the same up to 760px, where the text is wider */
.hero-burst { position: relative; }
.hero-burst > .container { position: relative; }
.hero-burst::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse var(--burst-w, 30%) var(--burst-h, 44%) at var(--burst-x, 50%) var(--burst-y, 54%),
    rgb(248 250 252 / var(--burst, 72%)) 0%, rgb(248 250 252 / calc(var(--burst, 72%) * .64)) 55%, rgb(248 250 252 / 0%) 100%);
}
@media (max-width: 760px) {
  .hero-burst::before {
    background: radial-gradient(ellipse var(--burst-w-phone, 62%) var(--burst-h-phone, 44%) at 50% var(--burst-y-phone, 52%),
      rgb(248 250 252 / var(--burst, 72%)) 0%, rgb(248 250 252 / calc(var(--burst, 72%) * .64)) 55%, rgb(248 250 252 / 0%) 100%);
  }
}

/* Blue call-to-action box ("Ready to get started?") with the faint panel pattern. */
.cta-band {
  max-width: 1040px; margin: 0 auto; padding: 72px 40px; border-radius: 28px; text-align: center; color: #1e3150;
  background: url(/assets/img/pattern-panels.webp) center / cover no-repeat, linear-gradient(135deg, #4a8fdc 0%, #66b1f6 55%, #4a8fdc 100%);
}
.cta-band h2 { font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.02em; }
.cta-band p { max-width: 720px; margin: 16px auto 0; font-size: 17px; }
.cta-band .btn-row { margin-top: 32px; }
.cta-band .btn-outline { background: transparent; border-color: var(--navy-btn); }
.cta-band .btn-outline:hover { background: var(--navy-btn); }

/* Long-form text: articles, policies, FAQ answers. */
.prose { max-width: 820px; margin: 0 auto; font-size: 17px; line-height: 1.7; }
.prose h2 { margin: 56px 0 18px; font-family: var(--font-head); font-size: clamp(26px, 3vw, 34px); letter-spacing: -.01em; }
.prose h3 { margin: 36px 0 12px; font-size: 21px; font-weight: 600; }
.prose h4 { margin: 28px 0 10px; font-size: 18px; font-weight: 600; }

/* A heading over a bulleted list (style guide §2): says what the list is, so it can be read and quoted alone. */
main :is(h3, h4, h5).list-head { margin: 24px 0 10px; font-family: var(--font-body); font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--navy-text); }
/* A softer label over a row of short items that aren't bullets in running text (icon pills, icon labels). */
.list-label { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--text); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--steel); }
.prose strong { color: var(--navy-text); }
.prose blockquote { margin: 28px 0; padding: 20px 24px; border-left: 4px solid var(--steel); border-radius: 0 12px 12px 0; background: var(--steel-soft); color: var(--navy-text); }
.prose blockquote p:last-child { margin: 0; }
.prose img { border-radius: 14px; margin: 28px auto; }
.prose figure { margin: 28px 0; }
.prose figcaption { margin-top: 8px; font-size: 14px; text-align: center; }

/* Tables. Wrap in .table-wrap so wide tables scroll sideways on phones. */
.table-wrap { overflow-x: auto; margin: 24px 0; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.data-table th { background: var(--navy-bg); color: #fff; font-weight: 600; text-align: left; padding: 14px 16px; vertical-align: bottom; }
.data-table td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.data-table tbody tr:nth-child(even) td { background: var(--bg-tint); }
.data-table td:first-child { color: var(--navy-text); font-weight: 600; }

/* Questions and answers that open on click: <details class="accordion-item"><summary>Q</summary><div class="accordion-body">A</div></details> */
.accordion { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.accordion-item { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.accordion-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px;
  cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy-text);
}
.accordion-item > summary::-webkit-details-marker { display: none; }
.accordion-item > summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s;
}
.accordion-item[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.accordion-body { padding: 0 22px 20px; }
.accordion-body > :last-child { margin-bottom: 0; }
.accordion-group-title { margin: 40px auto 14px; max-width: 820px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.accordion-group-title:first-child { margin-top: 0; }

/* Tabs: a [data-tabs] block holding a .tab-list of buttons (aria-controls = panel id)
   and .tab-panel elements. ?tab=<panel id> in the address opens that tab. */
.tab-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
.tab-list [role="tab"] {
  padding: 12px 22px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy-btn);
  font-weight: 600; cursor: pointer;
}
.tab-list [role="tab"][aria-selected="true"] { background: var(--navy-btn); border-color: var(--navy-btn); color: #fff; }
.tab-panel[hidden] { display: none; }

/* "Page Overview": a short table of contents at the top of long pages. */
.toc { max-width: 820px; margin: 0 auto; padding: 32px 36px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.toc h2 { margin-bottom: 14px; font-family: var(--font-head); font-size: 24px; }
.toc ul { list-style: disc; padding-left: 1.2em; }
.toc li { margin: 6px 0; }
.toc li::marker { color: var(--steel); }
.toc a { color: var(--navy-text); text-decoration: none; }
.toc a:hover { color: var(--steel-text); text-decoration: underline; }

/* Text beside a picture. Add .split-reverse to put the picture first. */
/* A figure beside text lines up with the top of the text, not its middle (owner, 2026-11-04: applies to every page) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.split-reverse > :first-child { order: 2; }
/* Lines under or inside a figure wrap evenly, so no caption ends with one word on its own line (owner, 2026-11-04: every page) */
figcaption { text-wrap: balance; }
figure p, figure li { text-wrap: pretty; }
.split img { border-radius: 18px; }

.grid-4 { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); }
.card-pad { padding: 32px; }
.card h3 { font-size: 20px; }
.card > p:last-child { margin-bottom: 0; }
.card .icon-tile + h3 { margin-top: 24px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--steel-soft); color: var(--steel-text); font-size: 13px; font-weight: 600; }
.section-white { background: #fff; }
.section-tight { padding: 64px 0; }
.text-center { text-align: center; }

/* ---- More shared patterns, added with the section library (src/pages/section-library.html).
   Some older pages have their own scoped versions of these (e.g. .wu-stack, .nw-quote,
   .wt-row); new pages should use these shared ones. */

/* A section heading outside .section-head or .prose (e.g. beside a picture in .split). */
.section-title { margin-bottom: 18px; font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; }

/* Dark navy band: a whole section on navy, like "Mission Statement". */
.band-navy { background: linear-gradient(135deg, #1a2b4b 0%, #1d3768 50%, #1a2b4b 100%); color: rgb(255 255 255 / 78%); }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy .eyebrow { color: #8fc0f2; }
.band-navy .lede { color: rgb(255 255 255 / 80%); }
.band-navy .card { background: rgb(255 255 255 / 6%); box-shadow: none; border: 1px solid rgb(255 255 255 / 12%); }
.band-navy .icon-tile { background: rgb(72 146 220 / 18%); color: #8fc0f2; }

/* Pull-quote: one key sentence from the page's own text, lifted out on its own: <p class="pull-quote">…</p>.
   Same shading and left rule as the quote panel, so the two read as one family; no quote marks or name, since it isn't a quotation.
   display: flow-root keeps the shading beside a floated figure instead of running under it. */
.pull-quote { display: flow-root; margin: 28px 0; padding: 20px 24px; border-left: 4px solid var(--steel); border-radius: 0 var(--radius) var(--radius) 0; background: #eef3f9; font-family: var(--font-head); font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--navy-text); text-wrap: balance; }
/* Quote panel: <figure class="quote-panel">[[icon:quote]]<blockquote><p>…</p></blockquote><figcaption>— Name</figcaption></figure> */
.quote-panel { position: relative; margin: 32px 0; padding: 28px 28px 24px 84px; border-left: 3px solid var(--steel); border-radius: 0 var(--radius) var(--radius) 0; background: #eef3f9; }
.quote-panel > .icon { position: absolute; left: 24px; top: 26px; width: 30px; height: 30px; color: var(--steel); opacity: .35; }
.quote-panel blockquote, .prose .quote-panel blockquote { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.quote-panel blockquote p { margin: 0; font-family: var(--font-head); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--navy-text); }
.quote-panel figcaption { margin-top: 12px; font-family: var(--font-head); font-size: 14px; color: var(--text); }

/* Callout: a highlighted note such as "Please note" or "Prerequisite". */
.callout { padding: 20px 24px; border: 1px solid #c9dcf2; border-radius: 12px; background: var(--steel-soft); color: var(--navy-text); font-size: 15px; }
.callout-title { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.callout > :last-child { margin-bottom: 0; }

/* Stat tiles: numbers with labels; add data-count to count up (see site.js). */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat-tile { padding: 24px; border: 1px solid #d6e4f3; border-radius: var(--radius); background: var(--bg-tint); }
.stat-tile-number { display: block; font-family: var(--font-head); font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--navy-text); }
.stat-tile-label { display: block; margin-top: 6px; font-size: 14px; }

/* Chips: a wrapping list of short labels, e.g. countries or tags. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; color: var(--navy-text); }

/* Link list: links with an arrow, e.g. a site map or "read more" list. */
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; color: var(--navy-text); text-decoration: none; }
.link-list a:hover { color: var(--steel-text); }
.link-list .icon { flex: none; width: 18px; height: 18px; color: var(--steel); }

/* Resource rows: a title and details on the left, buttons on the right. */
.resource-list { display: grid; gap: 14px; }
.resource-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.resource-row h3 { font-size: 17px; font-weight: 600; }
.resource-row p { margin: 4px 0 0; font-size: 14px; }
.resource-row .btn-row { flex: none; justify-content: flex-end; gap: 10px; }

/* Table that turns into cards on phones: add .table-stack to a .data-table and
   data-label="Column name" to every <td>. */
@media (max-width: 760px) {
  .table-wrap:has(.table-stack) { overflow: visible; border: 0; background: none; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: auto; }
  .table-stack tr { margin-bottom: 14px; padding: 6px 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
  .table-stack tbody tr:nth-child(even) td { background: none; }
  .table-stack td { padding: 8px 18px; border: 0; }
  .table-stack td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-text);
  }
}

/* "Show more": everything with class .more inside a .show-more block stays hidden
   until the button (a label for a hidden checkbox, so no script) is pressed.
   <div class="show-more"><input type="checkbox" id="x" class="show-more-toggle visually-hidden">
   …content with some .more items…
   <label for="x" class="btn btn-navy btn-small show-more-btn"><span class="show-more-show">Show more</span><span class="show-more-hide">Show less</span></label></div> */
.show-more { text-align: center; }
.show-more > :not(.show-more-btn) { text-align: left; }
.show-more-toggle:not(:checked) ~ * .more, .show-more-toggle:not(:checked) ~ .more { display: none; }
.show-more-toggle:checked ~ .show-more-btn .show-more-show,
.show-more-toggle:not(:checked) ~ .show-more-btn .show-more-hide { display: none; }
.show-more-toggle:focus-visible ~ .show-more-btn { outline: 3px solid var(--steel); outline-offset: 2px; }
.show-more-btn { margin-top: 16px; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .hero { background-position: left top; }
  .marquee, .marquee + .marquee { --per-view: 5; --logo-h: 80px; }
  .grid-3, .steps { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .steps { gap: 24px; }
  .step + .step::before { left: 50%; top: -25px; width: 2px; height: 25px; }
  .leader-inner { grid-template-columns: 1fr; gap: 56px; }
  .methods { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .leader-photo { max-width: 520px; margin: 0 auto; }
  .reviews { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 360px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-reverse > :first-child { order: 0; }
}

/* The smallest phones (320px): the logo, name and menu button only fit if they shrink a little. */
@media (max-width: 359px) {
  .header-inner { gap: 12px; }
  .brand { gap: 10px; }
  .brand-mark { width: 44px; }
  .brand-name { font-size: 20px; }
  .brand-tagline { font-size: 12.5px; }
}

@media (max-width: 760px) {
  /* Phones get much less space between and inside blocks than computers: there the padding only adds scrolling. */
  :root { --gutter: 16px; }
  .section { padding: 48px 0; }
  .section-head { margin-bottom: 28px; }
  .lede, .hero-lede { font-size: 17px; }
  .wide-only { display: none; }
  .hero { padding-bottom: 40px; }
  .hero + .section, .page-hero + .section, .page-hero + .pg-why-use > .section:first-child { padding-top: 32px; }
  section[aria-labelledby="overview-title"] { padding-bottom: 32px; }
  section[aria-labelledby="overview-title"] + .as-path > .as-part:first-of-type, .pg-why-use .wu-toc-band + .section { padding-top: 32px; }
  section:not(.page-hero):has(+ section[aria-labelledby="overview-title"]) { padding-bottom: 32px; }
  section:not(.page-hero) + section[aria-labelledby="overview-title"] { padding-top: 32px; }
  .stats { gap: 8px; }
  .stat { flex: 1; width: auto; min-width: 0; padding: 14px 6px 12px; }
  .stat .icon { width: 28px; height: 28px; }
  .stat-number { margin-top: 8px; font-size: 22px; }
  .stat-label { margin-top: 6px; font-size: 12px; line-height: 1.3; text-align: center; }
  .clients { padding: 36px 0 28px; }
  .clients-title { margin-bottom: 20px; }
  .leader { padding-top: 24px; }
  .leader-inner { gap: 28px; }
  .leader-text > p:not(.eyebrow) { font-size: 17px; }
  .creds { margin-top: 24px; }
  .creds li { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px; font-size: 14px; }
  .creds .icon { grid-row: span 2; width: 26px; height: 26px; margin: 0; }
  .creds strong { font-size: 16px; margin-bottom: 2px; }
  .grid-2, .grid-3, .grid-4 { gap: 16px; }
  .library-card, .offer { padding: 20px; }
  .library-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; }
  .library-card .icon-tile { width: 40px; height: 40px; font-size: 20px; }
  .library-card p, .library-card ul { grid-column: 1 / -1; }
  .library-card p { margin-top: 10px; }
  .next-steps { padding: 32px 20px 24px; border-radius: 18px; }
  .next-steps-grid { grid-template-columns: 1fr; gap: 22px; }
  .library-card h3 { margin: 0; font-size: 19px; }
  .service, .reason { padding: 24px 20px; }
  .service h3, .reason h3 { margin: 18px 0 10px; }
  .service .icon-tile, .card .icon-tile:not(.icon-tile-lg) { width: 48px; height: 48px; font-size: 22px; }
  .card .icon-tile + h3 { margin-top: 18px; }
  .checklist { margin-bottom: 24px; }
  .checklist li { padding: 4px 0; }
  .step { padding: 22px 20px 24px; }
  .step-top { margin-bottom: 16px; }
  .step-number { font-size: 48px; }
  .step h3 { margin-bottom: 12px; }
  .steps, .timeline { margin-bottom: 40px; }
  .timeline li { padding-bottom: 24px; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .grid-2, .reviews-grid, .creds, .choices, .form-grid { grid-template-columns: 1fr; }
  .method { padding: 28px 22px; }
  .marquee, .marquee + .marquee { --per-view: 3; --logo-h: 64px; margin: 16px 0; }
  .newsletter-wrap { padding-top: 8px; }
  .newsletter { padding: 40px 20px 44px; border-radius: 28px; }
  .newsletter > .icon-tile { margin-bottom: 20px; }
  .newsletter-perks { flex-direction: column; align-items: center; margin-bottom: 36px; }
  .popup-body { padding: 40px 20px 28px; }
  .popup h2 { font-size: 26px; }
  .footer-top { grid-template-columns: 1fr 1fr; padding: 0 0 40px; }
  .site-footer { padding: 56px 0 40px; }
  .footer-bottom { flex-direction: column; }
  .grid-4 { grid-template-columns: 1fr; }
  .quote-panel { padding: 64px 20px 22px 22px; }
  .pull-quote { padding: 16px 18px; font-size: 21px; }
  .quote-panel > .icon { top: 22px; left: 22px; }
  .quote-panel blockquote p { font-size: 19px; }
  .resource-row { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
  .resource-row .btn-row { flex-direction: row; justify-content: flex-start; }
  .page-hero { padding: calc(var(--header-h) + 36px) 0 40px; }
  .page-hero-lede { font-size: 17px; }
  .cta-band { padding: 36px 20px; border-radius: 22px; }
  .cta-band .btn-row { margin-top: 24px; }
  .prose { font-size: 16px; }
  .toc { padding: 24px 20px; }
  .card-pad { padding: 24px 20px; }
}

/* ---------------------------------------------------------------- 404 */

.not-found { min-height: 50vh; }
.not-found h1 { font-family: var(--font-head); font-size: clamp(36px, 5vw, 56px); letter-spacing: -.02em; }

/* ---------------------------------------------------------------- dark mode, by hand */
/* Dark mode follows the visitor's device setting. Most of it is generated when the site is built
   (tools/darkmode.py appends a dark block to every stylesheet); these rules cover what the generator
   can't decide. A selector given a rule here is left alone by the generator. See STYLE-GUIDE, "Dark mode". */
@media (prefers-color-scheme: dark) {
  /* Diagrams are drawn for a light page, in SVG paint the generator leaves alone: each sits on a
     light panel, like a printed figure, so its labels and arrows keep their colours and contrast. */
  svg[role="img"] { background-color: #eef2f7; border-radius: 10px; }
  /* The blue call-to-action box: a deep version of its gradient, with light text. */
  .cta-band { color: #e8f1fb; background-image: url(/assets/img/pattern-panels.webp), linear-gradient(135deg, #1d4473 0%, #2a5d94 55%, #1d4473 100%); }
  .cta-band .btn-outline { border-color: #9cc2f8; color: #e8f1fb; }
}


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  :root { --navy-bg: #1a2b4b; --navy-btn: #20355c; --navy-text: #cedfff; --steel: #4892dc; --steel-text: #8dc5ff; --steel-soft: #1c222c; --steel-faint: #232c36; --accent: #f59e0b; --star: #f4600c; --text: #b1c5df; --bg: #111620; --bg-tint: #141a24; --bg-light: #171c27; --card-bg: #181e28; --line: #333945; --footer-bg: #192434; --shadow: 0 1px 2px rgb(0 0 0 / 22%), 0 4px 16px rgb(0 0 0 / 25%); }
  a:hover { color: #bbd6ff; }
  :focus-visible { outline-color: #4892dc; }
  .skip-link { color: #ffffff; }
  .btn-navy { color: #ffffff; }
  .btn-navy:hover { background-color: #142038; color: #ffffff; }
  .btn-outline { background-color: #111620; color: #bbd6ff; border-color: #8ba5d4; }
  .btn-outline:hover { color: #ffffff; }
  .btn-blue { background-color: #2f6fb5; color: #ffffff; }
  .btn-blue:hover { background-color: #275d99; color: #ffffff; }
  .site-header { background-color: rgb(22 28 38 / 88%); }
  .header-inner::after { background-color: #454c58; }
  .brand-word { color: #9cc2f8; }
  .nav-list a, .nav-sub-toggle { color: #bbd6ff; }
  .nav-sub { background-color: #111620; }
  @media (max-width: 1260px) {
    .nav-toggle { background-color: #111620; color: #bbd6ff; }
    .site-nav { background-color: #111620; }
  }
  .card { background-color: #111620; }
  .icon-tile-solid { color: #ffffff; }
  .icon-tile-lg { color: #7ebaf9; }
  .icon-tile-dark { background-color: #22406b; color: #7ebaf9; }
  .icon-tile-sm { background-color: #2e3d59; }
  .hero { background-color: #151b25; background-image: url(/assets/img/dark/hero.webp); }
  .hero-subtitle { color: #7ebaf9; }
  .hero-lede { color: #b7c9e5; }
  .stat { background-color: rgb(17 22 32 / 55%); box-shadow: 0 1px 2px rgb(0 0 0 / 22%); }
  .stat .icon { color: #7ebaf9; }
  .clients { border-bottom-color: #2f3541; }
  .clients-rule { background-image: linear-gradient(90deg, transparent, #2d333f, transparent); }
  .service-featured { border-color: #31465c; }
  .badge { background-color: #2f6fb5; color: #ffffff; }
  .checklist .icon { color: #7ebaf9; }
  .creds .icon { color: #7ebaf9; }
  .method-tag-muted { color: #bbcbe3; }
  .step + .step::before { background-color: #2c3d4e; }
  .step-number { color: #d6e6f8; }
  .step h3 { color: #dee6f3; }
  .step p { color: #b1c5df; }
  .timeline li:not(:last-child)::before { background-color: #2a3541; }
  .timeline-dot { color: #7ebaf9; }
  .reason .icon-tile { color: #7ebaf9; }
  .stars { color: #ee9b7a; }
  .library-card { box-shadow: 0 4px 24px rgb(0 0 0 / 28%); }
  .library-card .icon-tile { color: #7ebaf9; }
  .library-card li a .icon { color: #7ebaf9; }
  .offer { background-color: #111620; }
  .offer h3 .icon { color: #7ebaf9; }
  .next-step h3 .icon { color: #7ebaf9; }
  .newsletter { background-color: #1c2b4b; }
  .newsletter h2 { color: #ffffff; }
  .newsletter-perks { color: #ffffff; }
  .newsletter-form input[type="email"] { border-color: #4a5d7e; background-color: #2f3f5e; color: #ffffff; }
  .footer-top { border-bottom-color: rgb(44 50 62 / 10%); }
  .social a { background-color: #2c3648; color: #ffffff; }
  .social a:hover { color: #ffffff; }
  .footer-col h2 { color: #7ebaf9; }
  .footer-col a:hover { color: #ffffff; }
  .popup { background-color: #111620; box-shadow: 0 24px 64px rgb(0 0 0 / 60%); }
  .popup::backdrop { background-color: rgb(15 23 42 / 55%); }
  .popup-close:hover { background-color: #232934; }
  .popup .fine-print { color: #b1c5df; }
  .popup-success .icon-tile { color: #7ebaf9; }
  .field label, .form-legend { color: #dee6f3; }
  .field .optional { color: #b1c5df; }
  .field input, .field textarea, .field-input { border-color: #383f4a; background-color: #111620; }
  .field input:focus, .field textarea:focus, .field-input:focus { border-color: #4892dc; box-shadow: 0 0 0 3px rgb(0 0 0 / 60%); }
  .form-note { color: #b1c5df; }
  .choice { border-color: #383f4a; }
  .choice:hover { border-color: #4892dc; }
  .choice input { accent-color: #7ebaf9; }
  .choice:has(input:checked) { border-color: #4892dc; }
  .form-error { color: #ffa99a; }
  .fb-tile { border-color: #2a313c; color: #ffffff; box-shadow: 0 6px 20px rgb(0 0 0 / 60%); }
  .fb-label { background-color: #111620; box-shadow: 0 4px 16px rgb(0 0 0 / 60%); }
  .fb-where { color: #b1c5df; }
  .fb-shade { background-color: rgb(15 23 42 / 45%); }
  .fb-frame { border-color: #e5484d; }
  .fb-frame-tag { background-color: #e5484d; color: #ffffff; }
  .fb-frame-tag button { color: #ffffff; }
  .page-hero { background-color: #1b212b; background-image: var(--banner-dark, var(--banner)); }
  .page-hero-lede { color: #b7c9e5; }
  .page-hero-sub { color: #7ebaf9; }
  .hero-burst::before { background-image: radial-gradient(ellipse var(--burst-w, 30%) var(--burst-h, 44%) at var(--burst-x, 50%) var(--burst-y, 54%),
    rgb(20 26 36 / var(--burst, 72%)) 0%, rgb(20 26 36 / calc(var(--burst, 72%) * .64)) 55%, rgb(20 26 36 / 0%) 100%); }
  @media (max-width: 760px) {
    .hero-burst::before { background-image: radial-gradient(ellipse var(--burst-w-phone, 62%) var(--burst-h-phone, 44%) at 50% var(--burst-y-phone, 52%),
      rgb(20 26 36 / var(--burst, 72%)) 0%, rgb(20 26 36 / calc(var(--burst, 72%) * .64)) 55%, rgb(20 26 36 / 0%) 100%); }
  }
  .prose li::marker { color: #7ebaf9; }
  .prose blockquote { border-left-color: #4892dc; }
  .table-wrap { background-color: #111620; }
  .data-table th { color: #ffffff; }
  .accordion-item { background-color: #111620; }
  .tab-list [role="tab"] { background-color: #111620; color: #bbd6ff; }
  .tab-list [role="tab"][aria-selected="true"] { border-color: #8ba5d4; color: #ffffff; }
  .toc { background-color: #111620; }
  .toc li::marker { color: #7ebaf9; }
  .section-white { background-color: #111620; }
  .band-navy h2, .band-navy h3 { color: #ffffff; }
  .band-navy .card { background-color: rgb(17 22 32 / 6%); border-color: rgb(42 49 60 / 12%); }
  .band-navy .icon-tile { background-color: rgb(72 146 220 / 18%); }
  .pull-quote { border-left-color: #4892dc; background-color: #1a202a; }
  .quote-panel { border-left-color: #4892dc; background-color: #1a202a; }
  .quote-panel > .icon { color: #7ebaf9; }
  .callout { border-color: #333e4c; }
  .stat-tile { border-color: #333b44; }
  .chips li { background-color: #111620; }
  .link-list .icon { color: #7ebaf9; }
  .resource-row { background-color: #111620; }
  @media (max-width: 760px) {
    .table-stack tr { background-color: #111620; }
  }
  .show-more-toggle:focus-visible ~ .show-more-btn { outline-color: #4892dc; }
}