/* ==========================================================================
   AmtecHost Solutions — Design System
   Hand-coded. No frameworks, no icon fonts, no gradients.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS
   -------------------------------------------------------------------------- */

/* Self-hosted since 4 August 2026. Previously these came from the Google
   Fonts CDN, which meant every visitor's IP address reached Google on every
   page load and the privacy policy had to say so. Serving them ourselves
   removes the only third party left on the site and takes two DNS lookups
   and two TLS handshakes off the critical path.

   Five faces, because five is exactly what the stylesheet references:
   Inter at 400, 500 and 600, and Newsreader at 400 upright and italic.
   Newsreader 500 was in the old Google request and is used by nothing.

   THE NAIRA SIGN NEEDS ITS OWN FILES. U+20A6 is not in the "latin" subset,
   it is in "latin-ext". Shipping the whole latin-ext face would add 35KB per
   weight for one character, so each is subset down to that single glyph:
   736 bytes rather than 35,000. The browser fetches one only when a page
   actually contains a naira sign, which is /pricing/ and the homepage.

   Licences are in assets/fonts/. Both faces are SIL Open Font License 1.1,
   which permits this and requires the licence to travel with the files. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400-naira.woff2") format("woff2");
  unicode-range: U+20A6;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500-naira.woff2") format("woff2");
  unicode-range: U+20A6;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600-naira.woff2") format("woff2");
  unicode-range: U+20A6;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-400.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: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-400-naira.woff2") format("woff2");
  unicode-range: U+20A6;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-400-italic.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: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-400-italic-naira.woff2") format("woff2");
  unicode-range: U+20A6;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* --- Colour -----------------------------------------------------------
     Warm neutrals rather than pure black/white. Pure #000 on #FFF is harsh
     on the low-cost Android screens most of this audience browses on.

     The greens are sampled from the AmtecHost logo. --accent is the mark's
     core colour. It is superb for fills (10.5:1 against white) but it sits
     only 1.78:1 away from body ink, so as link text it would be invisible.
     --accent-text is a lighter step of the same hue, taken from the mark's
     own bevel highlight, and is used wherever the green has to read AS text. */

  --ink:            #14120F;  /* primary text — warm near-black             */
  --ink-2:          #4A453D;  /* secondary text                             */
  --ink-3:          #736C60;  /* tertiary, captions, meta                   */

  --paper:          #FBFAF7;  /* page background — warm off-white           */
  --paper-2:        #F4F2EC;  /* subtle section fill                        */
  --paper-3:        #EAE7DE;  /* stronger fill, hover states                */

  --line:           #E2DED4;  /* 1px borders — we use these, not shadows    */
  --line-strong:    #CFC9BB;

  /* Form control borders must clear 3:1 against the surface behind them
     (WCAG 2.1 SC 1.4.11 — a control's boundary is what identifies it as a
     control). --line-strong is only 1.6:1, fine for a card edge and not for
     an input. This clears it on both paper and the filled band. */
  --line-input:     #8F8778;

  --accent:         #0E4929;  /* BRAND core — fills, buttons, the mark      */
  --accent-hover:   #0A3A20;
  --accent-text:    #146B3C;  /* green used as text — links, icons, the em  */
  --accent-soft:    #E8F0EB;  /* tinted background for accent contexts      */

  --signal:         #1F9D57;  /* live/operational indicator ONLY            */

  --inverse-bg:     #14120F;  /* dark sections                              */
  --inverse-text:   #F4F2EC;
  --inverse-line:   #3A342C;
  --inverse-muted:  #A9A296;

  /* On the brand green — used by .hero--accent. Every value checked against
     #0E4929: text 10.0:1, muted lede 6.6:1, italic accent 6.3:1, ghost
     border 3.7:1. */
  --on-accent:        #FBFAF7;
  --on-accent-muted:  #BCD2C4;
  --on-accent-accent: #8FD9AE;
  --on-accent-line:   #2A6444;
  --on-accent-border: #6FA487;

  /* --- Typography -------------------------------------------------------
     Newsreader (serif) for display, Inter for UI and body.
     The serif is the differentiator: every competitor in this market uses
     a geometric sans. An editorial serif reads as considered and adult.
     PRODUCTION NOTE: self-host both as .woff2 subsets. See README.md §Launch. */

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — 1.25 major third, fluid between 380px and 1280px */
  --size-xs:    0.8125rem;                                  /* 13px  */
  --size-sm:    0.875rem;                                   /* 14px  */
  --size-base:  1rem;                                       /* 16px  */
  --size-md:    clamp(1.0625rem, 0.28vw + 1rem, 1.1875rem); /* 17-19 */
  --size-lg:    clamp(1.25rem,  0.5vw  + 1.1rem, 1.5rem);   /* 20-24 */
  --size-xl:    clamp(1.5rem,   1.1vw  + 1.2rem, 2rem);     /* 24-32 */
  --size-2xl:   clamp(1.875rem, 2vw    + 1.3rem, 2.75rem);  /* 30-44 */
  --size-3xl:   clamp(2.375rem, 3.6vw  + 1.4rem, 4rem);     /* 38-64 */
  --size-4xl:   clamp(3rem,     6vw    + 1.2rem, 5.5rem);   /* 48-88 */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --leading-loose: 1.75;

  --tracking-tight: -0.022em;
  --tracking-snug:  -0.012em;
  --tracking-wide:   0.08em;

  /* --- Space — 4px base ------------------------------------------------- */
  --sp-1:  0.25rem;   --sp-2:  0.5rem;    --sp-3:  0.75rem;
  --sp-4:  1rem;      --sp-5:  1.5rem;    --sp-6:  2rem;
  --sp-7:  2.5rem;    --sp-8:  3rem;      --sp-9:  4rem;
  --sp-10: 5rem;      --sp-11: 6.5rem;    --sp-12: 8rem;

  --section-y: clamp(4rem, 8vw, 7.5rem);  /* vertical rhythm between bands */

  /* --- Layout ----------------------------------------------------------- */
  --container: 71.25rem;   /* 1140px */
  --measure:   42.5rem;    /* 680px — max comfortable reading width */
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);

  /* --- Borders & radii ---------------------------------------------------
     Small radii only. Pill shapes and 16px+ rounding read as consumer-app,
     not infrastructure.                                                    */
  --radius-sm: 3px;
  --radius:    5px;
  --radius-lg: 8px;
  --border: 1px solid var(--line);

  /* --- Motion — restrained. Nothing over 200ms. ------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur:  160ms;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--size-md);
  line-height: var(--leading-body);
  font-feature-settings: "kern", "liga", "cv05";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

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

a { color: inherit; text-decoration: none; }

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

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent); color: var(--paper); }

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

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */

.display-1, .display-2, .display-3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.display-1 { font-size: var(--size-4xl); }
.display-2 { font-size: var(--size-3xl); }
.display-3 { font-size: var(--size-2xl); line-height: var(--leading-snug); }

.heading-1, .heading-2 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}
.heading-1 { font-size: var(--size-xl); }
.heading-2 { font-size: var(--size-lg); }

/* Small caps label — used sparingly to mark section starts */
.eyebrow {
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.eyebrow--accent { color: var(--accent-text); }

.lede {
  font-size: var(--size-lg);
  line-height: var(--leading-loose);
  color: var(--ink-2);
  text-wrap: pretty;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--sp-4); }
.prose strong { font-weight: 600; color: var(--ink); }

.muted { color: var(--ink-3); }
.small { font-size: var(--size-sm); }

.link {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent-text) 38%, transparent);
  transition: text-decoration-color var(--dur) var(--ease);
}
.link:hover { text-decoration-color: currentColor; }

/* Arrow link — the site's standard tertiary action */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accent-text);
  font-weight: 500;
  font-size: var(--size-base);
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

/* Two adjacent sections on the same background stack their pads, which puts
   up to 12rem of white between them with no colour change to explain it.
   That reads as a hole rather than a boundary: the eye assumes something is
   missing. Collapse the pair so the gap is the first section's bottom pad
   alone.

   Sections that DO change background keep both pads, because there the
   white is separating two surfaces and is doing real work. The rule is
   written as an adjacent-sibling selector rather than a modifier class so
   it keeps holding as pages are reordered. */
.section:not(.section--fill):not(.section--inverse)
  + .section:not(.section--fill):not(.section--inverse) {
  padding-top: 0;
}
.section--fill { background: var(--paper-2); }
.section--inverse { background: var(--inverse-bg); color: var(--inverse-text); }
.section--inverse .eyebrow { color: var(--inverse-muted); }
.section--inverse .lede { color: var(--inverse-muted); }

.divider { border: 0; border-top: var(--border); margin: 0; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: var(--sp-6); }
@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-9); }
}

.section-head { max-width: var(--measure); margin-bottom: var(--sp-8); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8125rem 1.375rem;
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--secondary:hover { background: var(--paper-3); border-color: var(--ink-3); }

.btn--inverse { background: var(--paper); color: var(--ink); }
.btn--inverse:hover { background: #fff; }

.btn--ghost-inverse {
  background: transparent;
  color: var(--inverse-text);
  border-color: var(--inverse-line);
}
.btn--ghost-inverse:hover { border-color: var(--inverse-muted); }

.btn--sm { padding: 0.5rem 0.875rem; font-size: var(--size-sm); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 4.25rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
}
.logo__mark { width: 1.75rem; height: 1.75rem; flex: none; }
.logo b { font-weight: 500; }
.logo span { color: var(--ink-3); font-weight: 400; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--sp-6); }
.nav__link {
  font-size: var(--size-base);
  color: var(--ink-2);
  transition: color var(--dur) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); }

.header__actions { display: none; align-items: center; gap: var(--sp-4); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: var(--size-sm);
  cursor: pointer;
}

.mobile-nav {
  display: none;
  border-top: var(--border);
  background: var(--paper);
  padding-block: var(--sp-4) var(--sp-6);
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav ul > li + li { margin-top: var(--sp-1); }
.mobile-nav a {
  display: block;
  padding: var(--sp-3) 0;
  border-bottom: var(--border);
  color: var(--ink-2);
}
.mobile-nav .btn { width: 100%; margin-top: var(--sp-5); }

@media (min-width: 62rem) {
  .nav, .header__actions { display: flex; }
  .nav-toggle, .mobile-nav { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); }
.hero__inner { max-width: 54rem; }
.hero__title { margin-bottom: var(--sp-5); }
.hero__title em {
  font-style: italic;
  color: var(--accent-text);
}
.hero__lede { max-width: 40rem; margin-bottom: var(--sp-7); }
.hero__note {
  margin-top: var(--sp-5);
  font-size: var(--size-sm);
  color: var(--ink-3);
}

/* --- Green hero -------------------------------------------------------
   The sticky header sits above this in paper, so the hero reads as a
   banner rather than a full-bleed top. The header's bottom border is
   removed against it — a hairline between paper and dark green is noise.
   Remove the .hero--accent class from a page to revert that page.       */

.hero--accent {
  background: var(--accent);
  color: var(--on-accent);
  padding-block: clamp(4rem, 10vw, 7.5rem) clamp(3.5rem, 7vw, 5.5rem);
}
.hero--accent .hero__title { color: var(--on-accent); }
.hero--accent .hero__title em { color: var(--on-accent-accent); }
.hero--accent .eyebrow { color: var(--on-accent-muted); }
.hero--accent .lede { color: var(--on-accent-muted); }
.hero--accent .hero__note { color: var(--on-accent-muted); }
.hero--accent .link { color: var(--on-accent-accent); }

.hero--accent .btn--primary {
  background: var(--on-accent);
  color: var(--ink);
  border-color: var(--on-accent);
}
.hero--accent .btn--primary:hover { background: #fff; border-color: #fff; }

.hero--accent .btn--secondary {
  background: transparent;
  color: var(--on-accent);
  border-color: var(--on-accent-border);
}
.hero--accent .btn--secondary:hover {
  background: rgb(255 255 255 / 0.08);
  border-color: var(--on-accent);
}

.hero--accent :focus-visible { outline-color: var(--on-accent-accent); }

/* --- Hero artwork -----------------------------------------------------
   Three variants, one picked at random per page load by a short inline
   script. Purely decorative: aria-hidden, pointer-events none, and hidden
   entirely below 64rem where it would crowd the copy.

   Only the selected variant is in the render tree — the other two are
   display:none, so their animations never run. Everything animates on
   transform and opacity only, which the compositor handles without
   repainting. prefers-reduced-motion freezes all of it.               */

.hero--accent { position: relative; overflow: hidden; }
.hero--accent > .container { position: relative; z-index: 1; }

.hero__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero__art-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hero__art svg {
  display: none;
  width: clamp(13rem, 20vw, 19rem);
  height: auto;
  color: var(--on-accent-accent);
  opacity: 0.5;
}
.hero__art[data-art="1"] .art-globe,
.hero__art[data-art="2"] .art-pulse { display: block; }

@media (max-width: 64rem) { .hero__art { display: none; } }

/* transform-box: fill-box pins the origin to each shape's own bounding box.
   Without it, browsers disagree about what a CSS transform-origin on an SVG
   child resolves against, and the shape rotates or scales around the wrong
   point. A third variant (rotating orbital rings) was removed on 3 Aug 2026
   for exactly this reason; these two use the same technique, so both are
   pinned explicitly rather than relying on the default. */
.art-globe .meridian,
.art-pulse .ping {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes art-meridian { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.04); } }
@keyframes art-ping {
  0%   { transform: scale(0.28); opacity: 0.85; }
  70%  { opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

.art-globe .meridian { animation: art-meridian 14s ease-in-out infinite; }
.art-globe .meridian--b { animation-delay: -4.66s; }
.art-globe .meridian--c { animation-delay: -9.33s; }

.art-pulse .ping { animation: art-ping 5s ease-out infinite; }
.art-pulse .ping--b { animation-delay: -1.66s; }
.art-pulse .ping--c { animation-delay: -3.33s; }

@media (prefers-reduced-motion: reduce) {
  .art-globe .meridian, .art-pulse .ping { animation: none; }
  .art-pulse .ping { opacity: 0.28; transform: scale(1); }
}

/* The header keeps its bottom rule against the green. At the top of the page
   it reads as the edge of the header; once scrolled over pale content it is
   the only thing separating the sticky bar from the page. Removing it would
   fix a non-problem and create a real one. */

/* --------------------------------------------------------------------------
   8. STATUS / COMMITMENT BAND
   -------------------------------------------------------------------------- */

.commitment {
  border-block: var(--border);
  background: var(--paper-2);
  padding-block: var(--sp-8);
}

.commitment__grid {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 56rem) {
  .commitment__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
}

.metric__value {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-3);
}
.metric__label {
  font-size: var(--size-sm);
  color: var(--ink-2);
  line-height: var(--leading-body);
}

.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--signal);
  margin-right: var(--sp-2);
  vertical-align: 0.08em;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent);
}

/* --------------------------------------------------------------------------
   9. SERVICE LIST
   -------------------------------------------------------------------------- */

.services { border-top: var(--border); }
.service {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-7);
  border-bottom: var(--border);
}
@media (min-width: 48rem) {
  .service {
    grid-template-columns: 2.5rem minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
}

.service__icon { color: var(--accent-text); }
.service__icon svg { width: 1.5rem; height: 1.5rem; }
.service__title { font-size: var(--size-lg); font-weight: 600; letter-spacing: var(--tracking-snug); }
.service__body { color: var(--ink-2); }
.service__body p + p { margin-top: var(--sp-3); }
.service__aside {
  margin-top: var(--sp-3);
  font-size: var(--size-sm);
  color: var(--ink-3);
}

/* Expanded service block — used on /services/ where each entry needs more
   than the homepage summary. Same grid, more inside the body. */
.service--detail { padding-block: var(--sp-8); }
.service__points { display: grid; gap: var(--sp-3); }
.service__points--bare { margin-top: var(--sp-3); }
.service__points-head {
  font-size: var(--size-xs);
  margin: 0;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.service__points li {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  gap: var(--sp-3);
  font-size: var(--size-base);
  color: var(--ink-2);
  line-height: var(--leading-body);
}
.service__points svg { width: 1.125rem; height: 1.125rem; margin-top: 0.32em; color: var(--ink-3); }
.service__suits {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-2);
  border-radius: var(--radius);
  font-size: var(--size-base);
  color: var(--ink-2);
}
.service__suits strong { color: var(--ink); font-weight: 600; }

/* Numbered process steps */
.steps { display: grid; gap: 0; counter-reset: step; border-top: var(--border); }
.step {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-6);
  border-bottom: var(--border);
  counter-increment: step;
}
@media (min-width: 48rem) {
  .step { grid-template-columns: 3rem minmax(0, 14rem) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
}
.step__num {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  color: var(--accent-text);
  line-height: 1.2;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step__title { font-size: var(--size-lg); font-weight: 600; letter-spacing: var(--tracking-snug); }
.step__body { color: var(--ink-2); margin: 0; }
.step__when { display: block; font-size: var(--size-sm); color: var(--ink-3); margin-top: var(--sp-2); }

/* Plain "we don't do this" list */
.excludes { display: grid; gap: var(--sp-4); }
@media (min-width: 48rem) { .excludes { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-8); } }
.exclude { display: grid; grid-template-columns: 1.125rem 1fr; gap: var(--sp-3); align-items: start; }
.exclude svg { width: 1.125rem; height: 1.125rem; margin-top: 0.4em; color: var(--ink-3); flex: none; }
.exclude__title { font-weight: 500; letter-spacing: var(--tracking-snug); }
.exclude__note { font-size: var(--size-sm); color: var(--ink-3); margin-top: var(--sp-1); }

/* --------------------------------------------------------------------------
   10. CASE VIGNETTE
   -------------------------------------------------------------------------- */

.case {
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--size-sm);
  color: var(--ink-3);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: var(--border);
}
.case__quote {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--sp-5);
  text-wrap: pretty;
}
.case__outcomes {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: var(--border);
}
@media (min-width: 40rem) { .case__outcomes { grid-template-columns: repeat(3, 1fr); } }
.case__outcome dt { font-size: var(--size-sm); color: var(--ink-3); margin-bottom: var(--sp-1); }
.case__outcome dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-lg);
  letter-spacing: var(--tracking-snug);
}

/* --------------------------------------------------------------------------
   11. COMPARE / HANDOFF
   -------------------------------------------------------------------------- */

.compare {
  display: grid;
  gap: 0;
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
}
@media (min-width: 48rem) { .compare { grid-template-columns: 1fr 1fr; } }

.compare__col { padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.compare__col + .compare__col { border-top: var(--border); }
@media (min-width: 48rem) {
  .compare__col + .compare__col { border-top: 0; border-left: var(--border); }
}
.compare__col--ours { background: var(--accent-soft); }

.compare__title { font-size: var(--size-lg); font-weight: 600; margin-bottom: var(--sp-2); }
.compare__price { font-size: var(--size-sm); color: var(--ink-3); margin-bottom: var(--sp-4); }
.compare__list { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.compare__list li {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  gap: var(--sp-3);
  font-size: var(--size-base);
  color: var(--ink-2);
  line-height: var(--leading-body);
}
.compare__list svg { width: 1.125rem; height: 1.125rem; margin-top: 0.3em; color: var(--ink-3); }
.compare__col--ours .compare__list svg { color: var(--accent-text); }

/* --------------------------------------------------------------------------
   12. TEAM
   Currently unused — the homepage section was cut pending real photographs.
   Kept because /about/ will need it. Delete if that decision changes.
   -------------------------------------------------------------------------- */

.team { display: grid; gap: var(--sp-6); }
@media (min-width: 40rem) { .team { grid-template-columns: repeat(3, 1fr); } }

.person__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--paper-3);
  border: var(--border);
  object-fit: cover;
  width: 100%;
  margin-bottom: var(--sp-4);
}
.person__monogram {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  color: var(--ink-3);
  letter-spacing: var(--tracking-snug);
}
.person__name { font-weight: 600; letter-spacing: var(--tracking-snug); }
.person__role { font-size: var(--size-sm); color: var(--ink-3); margin-bottom: var(--sp-3); }
.person__bio { font-size: var(--size-base); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   13. CTA BAND
   The closing band carries one button and nothing else — contact details live
   in the footer. The .cta__channels / .channel rules below are unused on the
   built pages and kept for /contact/, which does need a channel list.
   -------------------------------------------------------------------------- */

.cta__inner { max-width: 46rem; }
.cta__title { margin-bottom: var(--sp-5); }
.cta__channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-8);
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--inverse-line);
}
.channel__label {
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--inverse-muted);
  margin-bottom: var(--sp-2);
}
.channel__value {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  color: var(--inverse-text);
  letter-spacing: var(--tracking-snug);
}
a.channel__value:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  border-top: var(--border);
  padding-block: var(--sp-9) var(--sp-6);
  font-size: var(--size-base);
}
.footer__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-9); }
}
.footer__heading {
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
/* Contact block. Icons carry no information the text does not already give,
   so they are aria-hidden and the labels stay as plain text and links. Their
   job is to let the eye find the phone number without reading. */
.footer__contact {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--size-sm);
  color: var(--ink-3);
}
.footer__contact li { display: flex; align-items: center; gap: var(--sp-3); }
.footer__contact svg {
  flex: none;
  width: 1.0625rem;
  height: 1.0625rem;
  color: var(--ink-3);
}
/* Quiet, like the rest of the footer, rather than accent green. */
.footer__contact .link { color: var(--ink-2); text-decoration: none; }
.footer__contact .link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.footer__list { display: grid; gap: var(--sp-3); }
.footer__list a { color: var(--ink-2); }
.footer__list a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
/* Nigerian flag as a heart, footer only. The flag's three vertical bands are
   drawn as rects and clipped to a heart path, so the proportions stay the
   real 1:1:1 rather than being painted on by eye.

   The outline is not decoration. The middle band is white and the footer is
   off-white, so without it the shape reads as two green blobs with a gap.
   It is stroked in the flag's own green rather than a neutral grey because
   at this size a grey line reads as a rendering artefact. */
.heart-ng {
  display: inline-block;
  width: 1.15rem;
  aspect-ratio: 1;
  vertical-align: -0.2em;
  margin-left: 0.15em;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: var(--border);
  font-size: var(--size-sm);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   15. PRICING
   -------------------------------------------------------------------------- */

.tiers { display: grid; gap: var(--sp-5); }
@media (min-width: 56rem) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  display: flex;
  flex-direction: column;
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  background: var(--paper);
}
.tier--featured {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.tier__name { font-size: var(--size-lg); font-weight: 600; letter-spacing: var(--tracking-snug); }
.tier__for { font-size: var(--size-sm); color: var(--ink-3); margin-top: var(--sp-2); }

.tier__price {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: var(--border);
}
.price {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.price__prefix {
  font-size: var(--size-base);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-3);
  display: block;
  margin-bottom: var(--sp-2);
}

/* Qualifier before a figure — "from". Italic serif, so it reads as a
   softening of the number rather than part of it. */
.qual {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-3);
}
.price__unit { font-size: var(--size-sm); font-family: var(--font-ui); color: var(--ink-3); margin-left: var(--sp-1); letter-spacing: 0; }

.tier__list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.tier__list li {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  gap: var(--sp-3);
  font-size: var(--size-base);
  color: var(--ink-2);
  line-height: var(--leading-body);
}
.tier__list svg { width: 1.125rem; height: 1.125rem; margin-top: 0.32em; color: var(--accent-text); }
.tier__foot { margin-top: auto; padding-top: var(--sp-6); }
.tier__foot .btn { width: 100%; }

/* Fee table — used for project work and store plans */
.table-wrap { overflow-x: auto; border: var(--border); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: var(--size-base); }
.table th, .table td { padding: var(--sp-4) var(--sp-5); text-align: left; vertical-align: top; }
.table thead th {
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  border-bottom: var(--border);
  white-space: nowrap;
}
.table tbody tr + tr { border-top: var(--border); }
.table td:first-child { font-weight: 500; }
.table .cell-note { display: block; font-size: var(--size-sm); color: var(--ink-3); font-weight: 400; margin-top: var(--sp-1); }
.table .cell-num { font-family: var(--font-display); font-size: var(--size-lg); letter-spacing: var(--tracking-snug); white-space: nowrap; }
.table .cell-alt { display: block; font-family: var(--font-ui); font-size: var(--size-sm); color: var(--ink-3); margin-top: var(--sp-1); white-space: nowrap; }
.table .link-arrow { margin-top: var(--sp-3); font-size: var(--size-sm); font-weight: 500; }
.table .link-arrow svg { width: 14px; height: 14px; }

/* Callout — for the currency explanation */
.notice {
  border: var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: var(--sp-5) var(--sp-6);
}
.notice__title { font-weight: 600; margin-bottom: var(--sp-2); letter-spacing: var(--tracking-snug); }
.notice p { color: var(--ink-2); }
.notice p + p { margin-top: var(--sp-3); }

.fx-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--size-sm);
  color: var(--ink-3);
}
.fx-rate { font-family: var(--font-mono); font-size: var(--size-xs); color: var(--ink-2); }

/* Definition rows — "what's always included" */
.included { display: grid; gap: 0; border-top: var(--border); }
.included__row { display: grid; gap: var(--sp-2); padding-block: var(--sp-5); border-bottom: var(--border); }
@media (min-width: 48rem) {
  .included__row { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--sp-6); }
}
.included__term { font-weight: 500; letter-spacing: var(--tracking-snug); }
.included__desc { color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------------------------
   16. CONTACT & FORMS
   -------------------------------------------------------------------------- */

/* Channel cards — phone and the two mailboxes, above the form */
.channels { display: grid; gap: var(--sp-5); }
@media (min-width: 48rem) { .channels { grid-template-columns: repeat(3, 1fr); } }

.channel-card {
  display: flex;
  flex-direction: column;
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  background: var(--paper);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.channel-card--primary { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.channel-card__icon { color: var(--accent-text); margin-bottom: var(--sp-4); }
.channel-card__icon svg { width: 1.5rem; height: 1.5rem; }
.channel-card__label { font-size: var(--size-sm); color: var(--ink-3); margin-bottom: var(--sp-2); }
.channel-card__value {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  word-break: break-word;
}
a.channel-card__value:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.channel-card__note { font-size: var(--size-sm); color: var(--ink-2); margin-top: var(--sp-3); }
.channel-card__foot { margin-top: auto; padding-top: var(--sp-5); }

/* Form */
.form { max-width: var(--measure); }
.form__row { margin-bottom: var(--sp-5); }
@media (min-width: 40rem) {
  .form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}

.label {
  display: block;
  font-size: var(--size-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--sp-2);
}
.label__optional { font-weight: 400; color: var(--ink-3); }

.input, .textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font-size: var(--size-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-input);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { min-height: 9rem; resize: vertical; line-height: var(--leading-body); }

.help { font-size: var(--size-sm); color: var(--ink-3); margin-top: var(--sp-2); }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* Hours list */
.hours { display: grid; gap: var(--sp-3); }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: var(--border);
  font-size: var(--size-base);
}
.hours__row:last-child { border-bottom: 0; padding-bottom: 0; }
.hours__day { color: var(--ink-2); }
.hours__time { font-weight: 500; white-space: nowrap; }

/* --------------------------------------------------------------------------
   17. LOGIN
   -------------------------------------------------------------------------- */

/* A two-column panel: the green half carries the words, the pale half
   carries nothing but the form. Splitting them this way is what makes the
   page compact. Everything a person needs in order to sign in sits on the
   right with no reading matter around it, and the explanation, the password
   reset route and the outage escape hatch sit on the left where they cannot
   compete with the two fields for attention.

   The halves stack below 52rem, green first, so on a phone it reads as a
   small hero followed by a form. */

.login { max-width: 58rem; margin-inline: auto; }

.login__panel {
  display: grid;
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;          /* clips both the green fill and the artwork
                                to the panel's rounded corners */
  background: var(--paper);
}
@media (min-width: 52rem) {
  .login__panel { grid-template-columns: 1fr 1fr; }
}

/* --- The green half --------------------------------------------------- */

.login__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.6vw, 2.75rem);
  background: var(--accent);
  color: var(--on-accent);
}
/* Everything except the artwork sits above it. */
.login__brand > *:not(.login__art) { position: relative; z-index: 1; }

.login__brand .eyebrow { color: var(--on-accent-muted); }
.login__brand .link { color: var(--on-accent-accent); }
.login__brand :focus-visible { outline-color: var(--on-accent-accent); }

.login__title {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: var(--sp-3);
}
.login__intro { color: var(--on-accent-muted); font-size: var(--size-base); }

.login__help {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--on-accent-line);
  font-size: var(--size-sm);
  color: var(--on-accent-muted);
}
/* Pinned to the foot of the green half once the columns are side by side,
   so the two halves end together however tall the form column grows. */
@media (min-width: 52rem) { .login__help { margin-top: auto; } }
.login__help p + p { margin-top: var(--sp-3); }
.login__help strong { color: var(--on-accent); font-weight: 500; }

/* Decorative only. Reuses the hero's pulse animation, which is defined
   globally on .art-pulse rather than scoped to the hero. */
.login__art {
  position: absolute;
  right: -4.5rem;
  bottom: -4.5rem;
  z-index: 0;
  width: 17rem;
  height: auto;
  color: var(--on-accent-accent);
  opacity: 0.24;
  pointer-events: none;
}
@media (max-width: 52rem) { .login__art { display: none; } }

/* --- The form half ---------------------------------------------------- */

.login__form-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 3.6vw, 2.75rem);
}
.login__form-title {
  font-size: var(--size-lg);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-5);
}
.login .form { max-width: none; }
.login .form__row { margin-bottom: var(--sp-4); }
.login .btn { width: 100%; margin-top: var(--sp-2); }

.login__note {
  max-width: 36rem;
  margin: var(--sp-5) auto 0;
  font-size: var(--size-sm);
  color: var(--ink-3);
  text-align: center;
}

/* --------------------------------------------------------------------------
   18. LEGAL DOCUMENTS
   -------------------------------------------------------------------------- */

.legal { max-width: var(--measure); }
.legal__meta {
  font-size: var(--size-sm);
  color: var(--ink-3);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-7);
  border-bottom: var(--border);
}
.legal__meta strong { color: var(--ink); font-weight: 500; }

.legal__toc { margin-bottom: var(--sp-9); }
.legal__toc ol {
  display: grid;
  gap: var(--sp-2);
  counter-reset: toc;
  list-style: none;
  padding: 0;
  margin: 0;
}
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--sp-2);
  font-size: var(--size-base);
  color: var(--ink-2);
  padding: var(--sp-1) 0;
}
.legal__toc a::before {
  content: counter(toc);
  font-family: var(--font-display);
  color: var(--ink-3);
}
.legal__toc a:hover { color: var(--accent-text); }

.legal section { counter-increment: legal; padding-top: var(--sp-8); }
.legal { counter-reset: legal; }
.legal section > h2 {
  font-family: var(--font-ui);
  font-size: var(--size-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  scroll-margin-top: 6rem;
}
.legal section > h2::before {
  content: counter(legal);
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent-text);
}
.legal h3 {
  font-size: var(--size-base);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}
.legal p { color: var(--ink-2); }
.legal p + p, .legal ul + p, .legal p + ul, .legal .table-wrap + p { margin-top: var(--sp-4); }
.legal ul {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-left: var(--sp-5);
  list-style: disc;
}
.legal li { color: var(--ink-2); }
.legal li::marker { color: var(--ink-3); }
.legal .table-wrap { margin-top: var(--sp-5); }
.legal strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   19. CONFIRMATION PAGES
   -------------------------------------------------------------------------- */

/* A confirmation is not a page, it is a sentence with somewhere to go next.
   These two used to carry a full green hero and a prose column, which gave a
   two-line message the same weight as the services page and left the reader
   scrolling to find out whether their message had actually gone.

   So: no hero, no eyebrow, no section heading. A mark, a line, and the one
   thing they might need next. */

.confirm {
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
}

.confirm__mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
}
/* The icon also carries width and height ATTRIBUTES in the markup. An inline
   SVG with only a viewBox has no intrinsic size, so if this stylesheet is
   stale, cached or slow the browser falls back to filling its container and
   the tick renders enormous. Belt and braces on a 40-byte cost. */
.confirm__mark svg { width: 1.375rem; height: 1.375rem; }

/* The failure state stays neutral rather than red. Nothing else on this site
   shouts, and a red alert would instantly be the loudest thing on it. The
   words carry the bad news; the mark only needs to not look like success. */
.confirm--fail .confirm__mark {
  background: var(--paper-3);
  color: var(--ink);
}

.confirm__title {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: var(--sp-3);
}

.confirm__lede {
  color: var(--ink-2);
  font-size: var(--size-md);
}

.confirm__foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--border);
  font-size: var(--size-sm);
  color: var(--ink-3);
}
.confirm__foot p + p { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   20. UTILITIES
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }