@charset "utf-8";

/* ==========================================================================
   DBS Checks — v4 stylesheet
   Source of truth: Figma "5 oct DBS (Copy)" — desktop 1440 (1:622), mobile 390 (1:77);
   apply page: "dbschecks sep 29 2026" — step 1 107:59 / 124:4263,
   step 2 107:239 / 124:4433, step 3 107:371 / 124:4566 (desktop / mobile);
   blog post 107:515 / 124:4699; terms 107:625 / 124:4817;
   contact 107:836 / 124:5032; support 155:529 / 155:774
   Structure: 1 fonts · 2 tokens · 3 reset · 4 utilities · 5 components
   Sizing is fluid between the two artboards, so there are no per-section
   breakpoint overrides to keep in sync.
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Kumbh Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/kumbh-sans-latin-700-normal.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: "Mulish";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-latin-400-normal.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: "Mulish";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mulish-latin-500-normal.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: "Mulish";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/mulish-latin-600-normal.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: "Mulish";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/mulish-latin-700-normal.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: "Mulish";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mulish-latin-800-normal.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;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
  /* Brand + surfaces */
  --brand: #365ac2;
  --brand-hover: #2f50b2;
  --brand-pressed: #28469e;
  --brand-tint: #f0f5fe;
  --surface: #fff;
  --surface-alt: #fafafa;
  --surface-tint: #f6f8fc;
  --ink: #091326;
  --ink-soft: #172947;
  --ink-muted: #5f6673;
  --on-brand: #fff;
  --border: #e8e8e8;
  --border-cta: rgba(9, 19, 38, 0.25);
  --footer-bg: #091326;
  --footer-ink: #adb8cc;
  --on-dark-soft: #e8e8e8;
  --on-dark-muted: #b9c3df;
  --hero-scrim: rgba(5, 20, 41, 0.76);

  /* Type families */
  --font-display: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif;
  --font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;

  /* Fluid type — interpolates between the 390px and 1440px artboards */
  --fs-h1: clamp(2.25rem, 1.905vw + 1.786rem, 3.5rem); /* 36 -> 56 */
  --fs-h2: clamp(1.75rem, 0.381vw + 1.657rem, 2rem); /* 28 -> 32 */
  --fs-title: clamp(1.875rem, 0.952vw + 1.643rem, 2.5rem); /* 30 -> 40 */
  --fs-title-lg: clamp(2.125rem, 0.952vw + 1.893rem, 2.75rem); /* 34 -> 44 */
  --fs-h2-prose: clamp(1.5rem, 0.381vw + 1.407rem, 1.75rem); /* 24 -> 28 */
  --fs-h3: clamp(1.25rem, 0.19vw + 1.204rem, 1.375rem); /* 20 -> 22 */
  --fs-h4: 1.25rem; /* 20 */
  --fs-body-l: clamp(1.0625rem, 0.095vw + 1.039rem, 1.125rem); /* 17 -> 18 */
  --fs-hero-sub: clamp(1.0625rem, 0.667vw + 0.9rem, 1.5rem); /* 17 -> 24 */
  --fs-card-body: clamp(1rem, 0.19vw + 0.954rem, 1.125rem); /* 16 -> 18 */
  --fs-column: clamp(1rem, 0.095vw + 0.977rem, 1.0625rem); /* 16 -> 17 */
  --fs-disclosure: clamp(0.6875rem, 0.286vw + 0.618rem, 0.875rem); /* 11 -> 14 */
  --fs-body: 1rem; /* 16 */
  --fs-body-s: 0.875rem; /* 14 */
  --fs-caption: 0.8125rem; /* 13 */
  --fs-hint: 0.75rem; /* 12 */
  --fs-micro: 0.6875rem; /* 11: eyebrows and status labels */

  /* Spacing */
  --s-xs: 0.5rem; /* 8 */
  --s-sm: 0.75rem; /* 12 */
  --s-md: 1rem; /* 16 */
  --s-lg: 1.5rem; /* 24 */
  --s-xl: 2rem; /* 32 */
  --s-2xl: 3rem; /* 48 */
  --s-3xl: 4rem; /* 64 */
  --s-flow: clamp(1.75rem, 1.143vw + 1.471rem, 2.5rem); /* 28 -> 40 */
  --s-push: clamp(0rem, 3.048vw - 0.743rem, 2rem); /* 0 -> 32 */
  --s-flow-sm: clamp(1.75rem, 0.381vw + 1.657rem, 2rem); /* 28 -> 32 */
  --s-card: clamp(1.5rem, 0.762vw + 1.314rem, 2rem); /* 24 -> 32: card padding */
  --s-card-sm: clamp(1rem, 0.762vw + 0.814rem, 1.5rem); /* 16 -> 24 */
  --s-text: clamp(0.75rem, 0.19vw + 0.704rem, 0.875rem); /* 12 -> 14: between paragraphs */

  /* Layout */
  --section-y: clamp(3.5rem, 2.286vw + 2.943rem, 5rem); /* 56 -> 80 */
  --gutter: clamp(1.25rem, 4.952vw - 0.681rem, 4.5rem); /* 20 -> 72 */
  --measure: 1100px; /* desktop content column */
  --measure-narrow: 1000px; /* FAQ column */
  --measure-text: 860px; /* long-form reading column (terms) */

  /* Radii + elevation */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 20px;
  --shadow-cta: 0 1px 2px rgba(9, 19, 38, 0.12),
    0 8px 20px -6px rgba(54, 90, 194, 0.32);
  --shadow-cta-hover: 0 1px 2px rgba(9, 19, 38, 0.12),
    0 12px 26px -6px rgba(54, 90, 194, 0.42);
  --shadow-cta-pressed: 0 2px 6px -2px rgba(54, 90, 194, 0.25);
  --bevel: inset 0 -2px 0 rgba(9, 19, 38, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --bevel-pressed: inset 0 2px 2px rgba(9, 19, 38, 0.25);
}

/* 3. Reset + base --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Reserve the scrollbar gutter so locking scroll for the menu flyout
     cannot shift the page sideways on platforms with classic scrollbars. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
figure,
ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 4. Utilities ------------------------------------------------------------ */

/* Layout */
.section {
  padding: var(--section-y) var(--gutter);
}

.section--alt {
  background: var(--surface-alt);
}

.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

.container--narrow {
  max-width: var(--measure-narrow);
}

.container--text {
  max-width: var(--measure-text);
}

.stack {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
}

/* Gaps — the only spacing primitives used throughout */
.g-2xs {
  gap: 0.25rem;
}

.g-xs {
  gap: var(--s-xs);
}
.g-sm {
  gap: var(--s-sm);
}
.g-md {
  gap: var(--s-md);
}
.g-lg {
  gap: var(--s-lg);
}
.g-xl {
  gap: var(--s-xl);
}
.g-2xl {
  gap: var(--s-2xl);
}
.g-3xl {
  gap: var(--s-3xl);
}

/* Text */
/* Article / page title */
.t-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.t-title--lg {
  font-size: var(--fs-title-lg);
  line-height: 1.23;
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3125;
  letter-spacing: -0.019em;
}

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.t-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.4;
}

.t-body-l {
  font-size: var(--fs-body-l);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.013em;
}

.t-body {
  font-size: var(--fs-body);
  line-height: 1.75;
}

.t-body-s {
  font-size: var(--fs-body-s);
  line-height: 1.58;
  letter-spacing: -0.013em;
}

.t-caption {
  font-size: var(--fs-caption);
  line-height: 1.4;
  letter-spacing: 0;
}

.t-xs {
  font-size: var(--fs-hint);
  line-height: 1.5;
}

.t-note {
  font-size: var(--fs-caption);
  line-height: 1.54;
}

.t-label {
  font-size: var(--fs-body-s);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.014em;
}

.t-strong {
  font-weight: 700;
}

.t-center {
  text-align: center;
}

/* The blog, legal and contact artboards set no letter-spacing, unlike the
   home page. Applies to everything inside, including text utilities that
   carry their own tracking. */
.ls-0,
.ls-0 * {
  letter-spacing: 0;
}

/* Small uppercase kicker above a heading ("NEXT STEP"). After .ls-0 so its
   tracking survives inside a zero-tracking page. */
.t-eyebrow {
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.09em;
}

/* Section body copy: flush left on small screens, centred from the desktop
   breakpoint. The mobile artboard centres section headings but runs body
   copy left, and centred paragraphs read poorly at narrow widths. */
.t-center-lg {
  text-align: left;
}

.muted {
  color: var(--ink-muted);
}

.on-dark {
  color: #fff;
}

/* Icons */
.ico {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: currentcolor;
}

.ico--sm {
  width: 1.125rem;
  height: 1.125rem;
}

.ico--xs {
  width: 1rem;
  height: 1rem;
}

.ico--xl {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--brand);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 5. Components ----------------------------------------------------------- */

/* 5.1 Buttons — states per Figma spec 1:332 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-body-s);
  font-weight: 700;
  line-height: 1.58;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-cta), var(--bevel);
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out,
    transform 150ms ease-out;
}

.btn:hover {
  background: var(--brand-hover);
  box-shadow: var(--shadow-cta-hover), var(--bevel);
  transform: translateY(-2px);
}

.btn:active {
  background: var(--brand-pressed);
  box-shadow: var(--shadow-cta-pressed), var(--bevel-pressed);
  transform: translateY(0);
}

.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.btn--lg {
  padding: 1rem 1.5rem;
  font-size: var(--fs-body);
  line-height: 1.75;
}

.btn--block {
  width: 100%;
}

/* 48px at 14px type (contact form) */
.btn--md {
  padding: 0.875rem 2rem;
  line-height: 1.43;
}

/* 66px call to action at 16px type, at every width (support) */
.btn--xl {
  padding: 1.1875rem 2.5rem;
  font-size: var(--fs-body);
  line-height: 1.75;
}

/* 52px call to action at 16px type (blog sidebar) */
.btn--cta {
  padding: 1rem 1.5rem;
  font-size: var(--fs-body);
  line-height: 1.25;
}

/* Secondary action: outlined, brand text, no elevation */
.btn--outline,
.btn--outline:hover,
.btn--outline:active {
  border: 1px solid var(--border-cta);
  box-shadow: none;
  color: var(--brand);
}

.btn--outline {
  background: var(--surface);
}

.btn--outline:hover,
.btn--outline:active {
  background: var(--brand-tint);
}

/* Hero CTA: 14/18 with 15x24 padding on mobile, 16/28 with 19x40 on desktop */
.btn--hero {
  padding: 0.9375rem 1.5rem;
  line-height: 1.286;
}

/* 5.2 Header */
.header {
  background: var(--surface);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: 1.25rem var(--gutter);
}

.header__logo {
  width: 160px;
  height: auto;
}

.header__nav {
  display: none;
  gap: clamp(1rem, 2vw, 1.875rem);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.34;
}

.header__nav a {
  text-decoration: none;
}

.header__nav a:hover {
  text-decoration: underline;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-md);
}

.header__support {
  display: none;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
}

.header__support:hover .header__support-text {
  text-decoration: underline;
}

.status-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #22c55e;
}

/* Menu toggle + panel */
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}

.menu-btn:hover {
  background: var(--surface-tint);
}

/* Flyout panel. A <dialog> opened with showModal(), so the focus trap,
   Escape handling, inert background and top-layer stacking are native.
   The slide is driven by data-open, toggled a frame after showModal(). */
.menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(340px, 86vw);
  /* The UA stylesheet sets dialog to fit-content in both axes, which would
     stop the panel short of the viewport height. */
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: -12px 0 32px rgba(9, 19, 38, 0.18);
  transform: translateX(100%);
  transition: transform 240ms ease-out;
}

.menu[data-open="true"] {
  transform: translateX(0);
}

.menu::backdrop {
  background: rgba(9, 19, 38, 0);
  transition: background-color 240ms ease-out;
}

.menu[data-open="true"]::backdrop {
  background: rgba(9, 19, 38, 0.55);
}

.menu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  height: 100%;
  padding: var(--s-md) var(--s-lg) var(--s-lg);
  overflow-y: auto;
}

.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: calc(var(--s-xs) * -1) calc(var(--s-xs) * -1);
  color: var(--ink-muted);
}

.menu__nav a {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-body-l);
  font-weight: 500;
  text-decoration: none;
}

.menu__nav a:hover {
  color: var(--brand);
}

.menu__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-md);
  margin-top: auto;
}

.menu__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  font-size: var(--fs-body-s);
  font-weight: 700;
  text-decoration: none;
}

/* Stop the page behind the flyout from scrolling while it is open */
html:has(.menu[open]) {
  overflow: hidden;
}

/* Live-support strip (mobile artboard 1:85) */
.support-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  padding: var(--s-sm) var(--gutter);
  background: var(--surface-tint);
  border-bottom: 1px solid var(--border);
}

/* Brand bold text: the support-bar link and the current step's label */
.support-bar a {
  color: var(--brand);
  font-weight: 700;
}

/* Responsible-organisation disclosure */
.disclosure {
  padding: 0.625rem var(--gutter);
  background: var(--surface-tint);
  border-bottom: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: var(--fs-disclosure);
  line-height: 1.364;
  text-align: center;
  letter-spacing: -0.015em;
}

.disclosure p {
  max-width: 1220px;
  margin-inline: auto;
}

/* 5.3 Hero */
.hero {
  position: relative;
  isolation: isolate;
  padding: var(--section-y) var(--gutter);
  /* The photograph is a real <img> in a <picture>, not a CSS background, so
     the preload scanner finds it immediately and WebP can be offered with a
     JPEG fallback. The gradient shows through if the image fails to load. */
  background: #091326 linear-gradient(135deg, #1b3669 0%, #091326 70%);
  color: #fff;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-scrim);
}

.hero__intro {
  max-width: var(--measure);
  margin-inline: auto;
}

/* Hero subtitle has its own ramp (17 -> 24); it is not the Body L style. */
.hero__intro p {
  font-size: var(--fs-hero-sub);
}

.hero__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
  max-width: var(--measure);
  margin-inline: auto;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
}

/* 5.4 Cards */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-lg);
  padding: var(--s-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--ink);
  text-align: center;
}

.card__body {
  color: var(--ink-soft);
  font-size: var(--fs-card-body);
  line-height: 1.65;
}

/* Process step card */
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-md);
  padding: 2.5rem 1.875rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
}

.step__badge {
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.036em;
}

/* Service card */
.service {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-lg);
  padding: var(--s-xl) 1.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
}

/* Shared responsive card grid: 1 col on mobile, N on desktop */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-lg);
}

.grid--tight {
  gap: var(--s-sm);
}

/* 5.5 Promo bars */
.bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: var(--s-sm) var(--gutter);
  background: var(--brand);
  color: var(--on-brand);
  text-align: center;
}

/* Start application band (Figma 1:724 desktop, 1:168 mobile).
   Sits in the flow between the Why block and the features section.
   Desktop: 2px border + 14px padding, 18/30 title, 24px icon  -> 90px.
   Mobile:  no border + 15px padding, 14/18 title, 18px icon    -> 70px. */
.cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0.9375rem var(--gutter);
  background: var(--brand);
  color: var(--on-brand);
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease-out;
}

.cta-band:hover {
  background: var(--brand-hover);
}

.cta-band__title {
  font-size: var(--fs-body-s);
  font-weight: 700;
  line-height: 1.286;
}

.cta-band__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  opacity: 0.8;
}

/* 5.6 Trust logo strip */
.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-xl) clamp(1.5rem, 3vw, 3.25rem);
  padding: var(--s-lg) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust img {
  width: auto;
  height: auto;
  /* Fits each logo inside the Figma slot, scaling 200x80 down to 100x40.
     Both clamps keep the same 2.5 ratio, so aspect is never distorted. */
  max-width: clamp(100px, 13.9vw, 200px);
  max-height: clamp(40px, 5.56vw, 80px);
}

/* 5.7 Feature row */
.features {
  display: grid;
  /* minmax(0,…) so a nowrap child can never force the track wider */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-md) 0;
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-md);
  grid-column: span 2;
  padding: var(--s-md) 0.5rem;
  text-align: center;
}

/* Second row holds two items — offset them so the row is centred */
.feature:nth-child(4) {
  grid-column: 2 / span 2;
  border-left: 0;
}

.feature:nth-child(5) {
  grid-column: 4 / span 2;
}

.feature + .feature {
  border-left: 1px solid var(--border);
}

.feature .ico--xl {
  width: clamp(2.375rem, 2vw, 3.5rem);
  height: clamp(2.375rem, 2vw, 3.5rem);
}

/* 5.8 Editorial columns */
.columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  font-size: var(--fs-column);
  line-height: 1.765;
  text-align: center; /* single column on mobile, centred like the section intro */
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--border);
}

/* 5.9 FAQ — native <details>; main.js adds the open/close animation */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: 1.25rem var(--s-lg);
  font-size: var(--fs-body-l);
  font-weight: 700;
  line-height: 1.67;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q .ico {
  width: 1rem;
  height: 1rem;
  color: var(--brand);
}

.faq__item[open] .faq__q .icon-plus,
.faq__item:not([open]) .faq__q .icon-minus {
  display: none;
}

/* During the close animation the item stays [open] while the panel slides
   shut, so flip the icon straight away rather than 220ms late. */
.faq__item[data-closing] .faq__q .icon-minus {
  display: none;
}

.faq__item[data-closing] .faq__q .icon-plus {
  display: block;
}

.faq__a {
  padding: 0 var(--s-lg) 1.25rem;
  color: var(--ink-muted);
}

.faq__item[data-animating] {
  overflow: hidden;
}

.faq__a p + p {
  margin-top: 0.25rem;
}

/* One bordered list with dividers instead of separate cards (support) */
.faq--list {
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.faq--list .faq__item {
  border: 0;
  border-radius: 0;
  background: none;
}

.faq--list .faq__item + .faq__item {
  border-top: 1px solid var(--border);
}

.faq--list .faq__q {
  padding: var(--s-md) var(--s-card-sm);
  font-size: 0.9375rem;
  line-height: 1.467;
  letter-spacing: 0;
}

.faq--list .faq__q .ico {
  color: var(--ink-muted);
}

.faq--list .faq__a {
  margin-top: calc(var(--s-xs) * -1);
  padding: 0 var(--s-card-sm) var(--s-md);
  font-size: var(--fs-body-s);
  line-height: 1.58;
}

.faq__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-lg);
  text-align: center;
}

/* 5.10 Application form (apply.php) */
.section--form {
  padding-block: var(--s-flow) clamp(1.75rem, 3.429vw + 0.914rem, 4rem); /* 28 -> 64 */
}

.panel {
  gap: var(--s-flow);
  padding: max(1.5rem, var(--panel-pad)) var(--panel-pad);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  --panel-pad: clamp(1.25rem, 2.667vw + 0.6rem, 3rem); /* 20 -> 48 */
}

.apply__intro {
  gap: clamp(1rem, 0.381vw + 0.907rem, 1.25rem); /* 16 -> 20 */
}

.apply__info {
  gap: var(--s-md) var(--s-2xl);
}

.apply__about {
  line-height: 1.715;
}

.checklist .ico {
  color: var(--brand);
}

.br-lg {
  display: none;
}

/* Callout: tinted panel with a brand rule down the left edge */
.note {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--s-sm) var(--s-md);
  background: var(--surface-tint);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-xs);
  color: var(--ink-muted);
}

/* Brand fill for a done tracker step and the selected tab */
.is-done .tracker__marker,
.tab[aria-selected="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

/* Fields */
.label {
  color: var(--ink);
  font-size: var(--fs-body-s);
  font-weight: 700;
  line-height: 1.43;
}

.fieldset > .label {
  margin-bottom: var(--s-xs);
}

.fieldset > .hint {
  margin-top: var(--s-xs);
}

.input {
  width: 100%;
  height: 3.25rem;
  padding: 0 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.467;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.input:hover {
  border-color: #c9ced8;
}

.input:focus-visible {
  border-color: var(--brand);
  border-radius: var(--r-sm);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(54, 90, 194, 0.2);
}

select.input {
  padding-right: 2.25rem;
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235f6673' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 0.875rem center / 1rem;
  cursor: pointer;
  appearance: none;
}

.option {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  font-size: var(--fs-body-s);
  line-height: 1.43;
  cursor: pointer;
}

.checkbox {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin: 0;
  background: var(--surface);
  border: 1.5px solid var(--ink-muted);
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
}

.checkbox {
  border-radius: 4px;
}

.checkbox:checked {
  border-color: var(--brand);
  background: var(--brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    no-repeat center / 0.875rem;
}

/* 5.11 Blog post: article + sidebar */
.section--article {
  padding-block: var(--s-flow-sm) clamp(3rem, 1.524vw + 2.629rem, 4rem); /* 48 -> 64 */
}

.blog {
  display: grid;
  gap: var(--s-flow-sm);
}

.article {
  gap: var(--s-flow-sm);
}

.article__head {
  gap: var(--s-card-sm);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.38;
}

.breadcrumb li + li::before {
  content: "/";
  padding-right: var(--s-xs);
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.byline {
  gap: var(--s-md);
}

.byline__meta,
.byline__read {
  gap: 0.25rem;
}

.share__label {
  font-weight: 600;
}

.share__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink-muted);
  transition: color 150ms ease-out, border-color 150ms ease-out;
}

.share__btn:hover,
.share__btn[data-copied] {
  border-color: var(--brand);
  color: var(--brand);
}

.share__btn:focus-visible {
  border-radius: 50%;
}

.article__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.article__rule {
  display: none;
}

/* Article body. Styles bare elements so CMS content needs no classes. */
.prose {
  line-height: clamp(1.75rem, 0.095vw + 1.727rem, 1.8125rem); /* 28 -> 29 */
}

.prose > * + * {
  margin-top: var(--s-text);
}

.prose > * + h2,
.prose > * + h3 {
  margin-top: var(--s-flow);
}

.prose h2,
.prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
}

.prose h2 {
  font-size: var(--fs-h2-prose);
  line-height: 1.29;
}

.prose h3 {
  font-size: var(--fs-h4);
  line-height: 1.4;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose a {
  color: var(--brand);
}

/* Legal copy (terms): the prose styles, a size smaller */
.prose--legal {
  font-size: clamp(0.9375rem, 0.095vw + 0.914rem, 1rem); /* 15 -> 16 */
  line-height: clamp(1.625rem, 0.19vw + 1.579rem, 1.75rem); /* 26 -> 28 */
}

.prose--legal > * + h2 {
  margin-top: var(--s-flow-sm);
}

.prose--legal h2 {
  font-size: clamp(1.375rem, 0.19vw + 1.329rem, 1.5rem); /* 22 -> 24 */
  line-height: 1.33;
}

/* Contents links land with room above the heading, not flush to the edge */
.prose h2[id] {
  scroll-margin-top: var(--s-lg);
}

/* Sidebar: enquiry form, then promo (promo first on mobile) */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
}

.box {
  padding: clamp(1.25rem, 0.381vw + 1.157rem, 1.5rem); /* 20 -> 24 */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.box--lg {
  padding: clamp(1.25rem, 1.143vw + 0.971rem, 2rem); /* 20 -> 32 */
}

.promo {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  order: -1;
  padding: var(--s-card) var(--s-lg);
  background: var(--ink);
  border-radius: var(--r-lg);
  color: var(--on-brand);
}

.promo__eyebrow {
  color: var(--on-dark-muted);
  font-size: var(--fs-hint);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: 0.125em;
}

.promo__title {
  font-size: 1.5rem;
  line-height: 1.25;
}

.promo__body {
  color: var(--on-dark-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.promo li {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
}

.promo .ico,
.promo__small {
  color: var(--on-dark-muted);
}

.promo .ico {
  width: 1.25rem;
  height: 1.25rem;
}

/* 5.12 Inner pages: terms.php and contact.php share the page rhythm */
.section--page {
  padding-block: clamp(2rem, 0.762vw + 1.814rem, 2.5rem) clamp(2rem, 3.048vw + 1.257rem, 4rem); /* 32 -> 40, 32 -> 64 */
}

.legal,
.contact-page {
  gap: var(--s-flow-sm);
}

/* "On this page" contents: a native <details>, open by default */
.toc.box {
  padding: var(--s-md);
}

.toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  cursor: pointer;
  list-style: none;
}

.toc__head::-webkit-details-marker {
  display: none;
}

.toc__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.24;
}

.toc__icon {
  color: var(--brand);
  transition: transform 150ms ease-out;
}

.toc:not([open]) .toc__icon {
  transform: rotate(-90deg);
}

.toc nav {
  margin-top: var(--s-sm);
}

/* Size set on the list, not the links, so each row is 19px tall */
.toc ul {
  font-size: var(--fs-caption);
  line-height: 1.46;
}

.toc a {
  color: var(--brand);
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

/* 5.13 Contact page: form card beside the contact details */
.contact {
  display: grid;
  gap: var(--s-flow-sm);
  align-items: start;
}

textarea.input {
  height: auto;
  min-height: clamp(7.875rem, 0.571vw + 7.736rem, 8.25rem); /* 126 -> 132 */
  padding-block: var(--s-sm);
  resize: vertical;
}

/* Details first on mobile; heading only on desktop, as the artboards have it */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-xl);
  order: -1;
  padding: var(--s-card);
  background: var(--surface-tint);
  border-radius: var(--r-lg);
}

.contact-info__title {
  display: none;
}

/* Mobile lists phone, email, address: the desktop order reversed */
.contact-info__list {
  display: flex;
  flex-direction: column-reverse;
  gap: clamp(1rem, 1.524vw + 0.629rem, 2rem); /* 16 -> 32 */
}

.contact-info__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.contact-info__note {
  margin-top: clamp(0rem, 2.476vw - 0.604rem, 1.625rem); /* +0 -> +26 */
}

.contact-info a {
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* Mobile shows the number as a tappable link */
.contact-info .contact-info__phone {
  color: var(--brand);
  text-decoration: underline;
}

/* 5.14 Support page (support.php) */
.support {
  gap: clamp(2rem, 1.524vw + 1.629rem, 3rem); /* 32 -> 48 */
}

/* Larger on mobile than desktop, as the artboards have it */
.support__title {
  font-size: clamp(2rem, -0.381vw + 2.343rem, 2.25rem); /* 36 -> 32 */
}

.support__lead {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.support__help {
  font-weight: 500;
}

/* Status label: "Complete", "Waiting for you", "Waiting" */
.pill {
  align-self: flex-start;
  padding: 0.125rem var(--s-xs);
  background: var(--surface-tint);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.45;
}

.pill--lg {
  padding: 0.25rem var(--s-sm);
}

.pill--brand {
  background: var(--brand);
  color: var(--on-brand);
}

.pill--plain {
  background: var(--surface-alt);
}

.application {
  padding: var(--s-card);
}

.application__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}

/* Reference chip with a copy button (shown when the Clipboard API exists) */
.ref {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--s-xs);
  padding: var(--s-xs) var(--s-md);
  background: var(--surface-tint);
  border-radius: var(--r-xs);
  font-size: var(--fs-caption);
  line-height: 1.38;
}

.ref__label {
  color: var(--ink-muted);
  font-weight: 600;
}

.ref__value {
  font-size: 0.9375rem;
  font-weight: 800;
}

.ref__copy {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-weight: 700;
  cursor: pointer;
}

.ref__copy:hover,
.ref__copy[data-copied] {
  text-decoration: underline;
}

/* Status tracker: vertical on mobile, three columns joined by a line on
   desktop. Steps are done, current (aria-current) or to do. */
.tracker {
  display: grid;
  gap: var(--s-lg);
  order: 1; /* after the next step on mobile */
}

.tracker__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}

.tracker__marker {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink-muted);
  font-size: var(--fs-body-s);
  font-weight: 700;
  line-height: 1.29;
}

.tracker__step[aria-current] .tracker__marker {
  background: var(--surface);
  border: 2px solid var(--brand);
  color: var(--brand);
}

.tracker__title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.33;
}

/* Next step: copy above the button on mobile (16px apart), beside it on
   desktop (24px apart) */
.next-step {
  display: flex;
  flex-direction: column;
  gap: var(--s-md) var(--s-lg);
  padding: var(--s-card-sm);
  background: var(--surface-tint);
  border-radius: var(--r-sm);
}

/* Set on the paragraph so the link's line box is 16px, not the body's 28 */
.next-step__alt {
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.25;
}

.topics {
  gap: clamp(0.75rem, 1.143vw + 0.471rem, 1.5rem); /* 12 -> 24 */
}

/* Topic card: the whole card is the link */
.topic {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  height: 100%;
  padding: var(--s-card-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color 150ms ease-out;
}

.topic:hover {
  border-color: var(--brand);
}

.topic__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--surface-tint);
  border-radius: var(--r-sm);
  color: var(--brand);
}

.topic__icon .ico {
  width: 1.375rem;
  height: 1.375rem;
}

.topic__text {
  flex: 1;
}

.topic__title {
  font-weight: 700;
  line-height: 1.375;
}

.topic__chevron {
  color: var(--ink-muted);
  transition: transform 150ms ease-out;
}

.topic:hover .topic__chevron {
  transform: translateX(2px);
}

/* Question topics: links without JavaScript, tabs with it (main.js) */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
}

.tab {
  padding: var(--s-xs) var(--s-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-body-s);
  font-weight: 700;
  line-height: 1.29;
  text-decoration: none;
}

.tab:hover {
  border-color: var(--brand);
}

/* 5.15 Footer. Mobile first: centred brand, badges and bottom line with
   20px column headings (Figma 155:774); from 48em the desktop layout:
   brand left, badges right, 15px headings (Figma 155:529). */
.footer {
  padding: clamp(2.75rem, 0.381vw + 2.657rem, 3rem) var(--gutter) 1.75rem; /* 44 -> 48 */
  background: var(--footer-bg);
  color: var(--footer-ink);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-xl);
  max-width: 1296px;
  margin-inline: auto;
}

.footer__top,
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer__top {
  gap: var(--s-xl);
}

.footer__brand {
  gap: var(--s-sm);
}

.footer__logo {
  width: 188px;
}

.footer__badges {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  /* The badges are lazy-loaded and size from their own box, so reserve the
     row height up front rather than letting it collapse until they arrive. */
  min-height: var(--badge-h);
  --badge-h: 2.125rem; /* 34px on mobile, 42px from 48em */
}

/* The three badges always share one line. They sit at their design height
   where there is room and shrink proportionally where there is not, rather
   than wrapping the last one onto a second row. */
.footer__badges img {
  width: auto;
  height: auto;
  max-height: var(--badge-h);
  min-width: 0;
  flex: 0 1 auto;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-xl) var(--s-md);
}

.footer__col h2 {
  margin-bottom: var(--s-xs);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
}

/* Size set on the list, not the links, so each row is 22px tall rather
   than the body's 28px line box */
.footer__col ul {
  font-size: var(--fs-body-s);
  line-height: 1.58;
}

.footer__col li + li {
  margin-top: var(--s-xs);
}

.footer__col a,
.footer__bottom a {
  text-decoration: none;
}

.footer__col a:hover,
.footer__bottom a:hover {
  text-decoration: underline;
}

.footer__divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.14);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-xs);
  font-size: var(--fs-body-s);
  line-height: 1.58;
}

/* 6. Breakpoints ---------------------------------------------------------- */

@media (min-width: 48em) {
  .hero__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: justify;
  }

  .footer__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 9.5rem; /* the desktop artboard's fixed row height */
  }

  /* Footer: brand left and badges right, 15px headings, one bottom line */
  .footer__top,
  .footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .footer__top,
  .footer__brand {
    text-align: left;
  }

  .footer__brand {
    align-items: flex-start;
  }

  .footer__logo {
    width: 210px;
  }

  .footer__legal {
    font-size: var(--fs-body-s);
    line-height: 1.58;
  }

  .footer__badges {
    gap: var(--s-lg);
    --badge-h: 2.625rem;
  }

  .footer__col h2 {
    margin-bottom: var(--s-sm);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.47;
  }

  .footer__col li + li {
    margin-top: var(--s-sm);
  }

  .footer__bottom,
  .footer__bottom .t-xs {
    font-size: var(--fs-caption);
    line-height: 1.54;
  }

  /* The desktop artboard gives these rows fixed heights (84px and 28px;
     the nav's 152px is above), taller than their content */
  .footer__top {
    min-height: 5.25rem;
  }

  .footer__bottom {
    min-height: 1.75rem;
  }

}

@media (min-width: 64em) {
  .t-h1 {
    line-height: 1.1;
  }

  .header__logo {
    width: 255px;
  }

  .header__nav,
  .header__support {
    display: flex;
  }

  .support-bar {
    display: none;
  }

  .card {
    gap: 1.875rem;
    padding: var(--s-2xl);
  }

  /* Card body is Mulish Medium on the desktop artboard, Regular on mobile */
  .card__body {
    font-weight: 500;
  }

  .btn--hero {
    padding: 1.1875rem 2.5rem;
    font-size: var(--fs-body);
    line-height: 1.75;
  }

  /* Figma 1:642 is a 52px bar: a 1px bottom border leaves 51px of content
     box, in which the 22px line centres at 14.5px top and bottom. */
  .disclosure {
    padding: 0.90625rem var(--gutter);
    line-height: 1.571;
  }

  .service {
    padding: var(--s-xl) 1.875rem;
  }

  .t-center-lg {
    text-align: center;
  }

  /* Three-up only once there is room: at tablet widths these cards are
     narrower than their own button and the copy breaks badly. */
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Application form: desktop artboard 107:59 */
  .br-lg {
    display: inline;
  }

  .note {
    padding: var(--s-md) var(--s-lg);
  }

  /* Desktop leaves 52px, not 40, between the callout and the rule, and
     48px between the rule and the first field */
  .apply__intro {
    padding-bottom: 0.75rem;
  }

  /* Blog post: 712px article beside a 340px sidebar */
  .blog {
    grid-template-columns: minmax(0, 1fr) 21.25rem;
    column-gap: var(--s-2xl);
  }

  .byline,
  .application__head,
  .next-step {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .byline__meta {
    flex-direction: row;
    align-items: center;
    gap: var(--s-md);
  }

  .share__btn {
    width: 2.25rem;
    height: 2.25rem;
  }

  .article__image {
    aspect-ratio: 3 / 2;
    border-radius: var(--r-lg);
  }

  .article__rule {
    display: block;
  }

  .toc {
    display: none;
  }

  /* Support: tracker in three columns */
  .application__head .ref {
    align-self: auto;
  }

  .tracker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-md);
    order: 0;
  }

  /* The line from each marker to the next step; brand once a step is done */
  .tracker__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(1rem - 1px);
    left: calc(2rem + var(--s-sm));
    right: 0;
    height: 2px;
    background: var(--border);
  }

  .tracker__step.is-done::after {
    background: var(--brand);
  }

  .next-step .btn {
    flex: none;
  }

  /* Desktop cards keep one height whatever their copy length */
  .topic {
    min-height: 7.5rem;
  }

  /* Contact: 606px form beside 430px details */
  .contact {
    grid-template-columns: minmax(0, 606fr) minmax(0, 430fr);
    column-gap: var(--s-3xl);
  }

  .contact-info {
    order: 0;
  }

  .contact-info__title {
    display: block;
  }

  .contact-info__list {
    flex-direction: column;
  }

  .contact-info .contact-info__phone {
    color: inherit;
    text-decoration: none;
  }

  /* The promo follows the form and stays in view while the article scrolls */
  .promo {
    position: sticky;
    top: var(--s-lg);
    order: 0;
  }

  select.input {
    background-position: right 1rem center;
  }

  .input {
    height: 3.375rem;
    padding-inline: 1rem;
  }

  .features {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .feature,
  .feature:nth-child(4),
  .feature:nth-child(5) {
    grid-column: auto;
  }

  .feature:nth-child(4) {
    border-left: 1px solid var(--border);
  }

  .trust {
    justify-content: space-between;
  }

  .cta-band {
    padding: 0.875rem var(--gutter);
    border: 2px solid var(--border-cta);
  }

  .cta-band__title {
    font-size: var(--fs-body-l);
    line-height: 1.667;
  }

  .cta-band__meta .ico {
    width: 1.5rem;
    height: 1.5rem;
  }
}