/* =====================================================================
   People on colour: the design language of the marketing pages
   (the homepage, Business, Developers, Contact and About), 2026-10-21

   Loads AFTER static/landing/styles.css and reads its :root variables
   (--ink, --orange, --blue, --navy, --gold, --font-display/body/mono).
   Everything is scoped to body.sp-colour, so nothing reaches another page;
   a page's own sheet (home.css, business.css) loads after this one.

   Each person is photographed against a flat studio backdrop, and where a
   photo bleeds into a panel the panel is that backdrop's colour, so the person
   reads as cut out onto it. A page spends its boldness once, in its hero;
   everything after is white space, navy type and one line of copy per idea.
   Orange is for buttons only.
   ===================================================================== */

.sp-colour {
  --h-cool: #F5F8FD;          /* §10 brand bg */
  --h-line: #E3E9F4;          /* §10 border */
  --h-sub: #B8C6E4;           /* body text on navy */
  --h-peach: #FFF1E8;
  --h-butter: #FFF6DB;
  --h-mint: #E9F8F0;
  --h-ice: #EEF3FF;
  --h-ok: #157A4C;
  --h-bill: #8A5A00;
  --h-shadow: 0 30px 60px -30px rgba(20, 35, 71, 0.35);
  --h-float: 0 18px 40px -18px rgba(20, 35, 71, 0.45), 0 0 0 1px rgba(20, 35, 71, 0.05);
  --h-gutter: clamp(12px, 2vw, 24px);
  --h-land: #C9D3E5;          /* the dotted map's land outside the countries we serve */
  background: var(--paper);
}
.sp-colour a:focus-visible,
.sp-colour button:focus-visible,
.sp-colour input:focus-visible,
.sp-colour select:focus-visible,
.sp-colour textarea:focus-visible,
.sp-colour [tabindex]:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; border-radius: 10px; }
.sp-colour .h-final a:focus-visible { outline-color: #fff; }

/* ── Type and sections ─────────────────────────────────────────────────── */
.h-h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h-sec { padding: 112px 0; }
.h-sec.is-cool { background: var(--h-cool); }
.h-sec-head { max-width: 760px; }
.h-sec-head > p { margin-top: 18px; font-size: 1.2rem; line-height: 1.55; color: var(--body-c); }
.h-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.h-split > div > p { margin-top: 18px; font-size: 1.15rem; line-height: 1.6; color: var(--body-c); }
.h-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.h-sec .h-ctas, .h-split .h-ctas { margin-top: 32px; }

/* A plain, strong text link: the second action beside a button. */
.h-link, .h-biz {
  font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 6px; text-decoration-color: rgba(14, 22, 38, 0.3);
}
.h-link:hover, .h-biz:hover { text-decoration-color: var(--ink); color: var(--ink); }
.h-final .h-link { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.h-final .h-link:hover { color: #fff; text-decoration-color: #fff; }
/* A white pill, for the button on the navy close. */
.btn.h-btn-white { background: #fff; color: var(--ink); box-shadow: 0 10px 26px -12px rgba(14, 22, 38, 0.5); }
.btn.h-btn-white:hover { transform: translateY(-2px); color: var(--ink); }

/* ── Hero: a person on their wall's colour, and one notification ───────── */
.h-hero { padding: 8px var(--h-gutter) 0; }
.h-hero-panel {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(560px, 76vh, 720px);
  border-radius: 40px;
  /* The wall is an 8px-wide strip of the photo's own left edge, stretched over
     the panel. The browser colour-manages a photo through its embedded profile
     but paints a CSS colour as plain sRGB, so only a piece of the same photo
     matches it on screen; a strip also carries a wall's soft top-to-bottom
     fall-off. The tone underneath shows until it loads. */
  background: var(--panel-tone, var(--h-cool)) var(--panel-wall, none) 0 0 / 100% 100% no-repeat;
}
.h-hero-inner { position: relative; z-index: 2; width: 100%; }
.h-hero-copy { max-width: 640px; padding: 64px 0; }

/* Personal | Business: which side of StarPay this page is. */
.h-switch {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 36px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.5);
}
.h-switch a {
  padding: 8px 18px; border-radius: 999px;
  font-size: 0.92rem; font-weight: 600; color: var(--ink); text-decoration: none;
}
.h-switch a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.6); }
.h-switch a.is-on { background: var(--ink); color: #fff; }

.h-hero h1, .h-intro h1 {
  font-size: clamp(2.9rem, 5.2vw, 4.9rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: var(--ink);
  text-wrap: balance;
}
.h-lede { margin-top: 24px; max-width: 26em; font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.h-hero .h-ctas, .h-intro .h-ctas { margin-top: 36px; }
.h-assure { margin-top: 22px; font-size: 0.95rem; font-weight: 600; color: var(--ink); opacity: 0.8; }

/* The photo is the panel's right side; its left edge is the same colour as the
   panel, and the mask hides any step between the two. Each photo sets its own
   shape and framing on its panel (the .is-… panels below). */
.h-hero-photo {
  position: absolute; z-index: 1; bottom: 0; right: var(--photo-right, -6%);
  height: var(--photo-h, 100%); aspect-ratio: var(--photo-ratio, 3 / 2); margin: 0;
}
.h-hero-photo > img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-pos, 50% 20%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%);
}

/* A push notification, the way a phone shows one. */
.h-push {
  position: absolute; top: var(--push-top, 24%); left: var(--push-left, 8%);
  display: flex; align-items: flex-start; gap: 12px;
  width: min(330px, 74%); padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--h-float);
  color: var(--ink);
}
.h-push-app { flex: none; width: 40px; height: 40px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--h-line); object-fit: contain; padding: 4px; }
.h-push-body { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 0.92rem; line-height: 1.35; }
.h-push-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.h-push-body b { margin-top: 2px; font-weight: 700; }
.h-push code { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600; }

/* The one orchestrated moment of each page: the picture settles, then the
   notification drops in the way a real one does. Played once; reduced motion
   shows the end. */
@keyframes h-settle { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes h-drop { 0% { opacity: 0; transform: translateY(-22px) scale(0.96); } 65% { opacity: 1; transform: translateY(3px) scale(1.01); } 100% { opacity: 1; transform: none; } }
.h-hero-photo > img, .h-intro-photo { animation: h-settle 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.h-push, .h-intro-photo .h-note { animation: h-drop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s both; }

/* The photos that bleed into a panel. Each tone is sampled from its photo's
   studio wall and each wall is a strip of that photo's left edge: change the
   photo and both change with it. */
.h-hero-panel.is-sun {          /* the homepage: a man celebrating, on yellow */
  --panel-tone: #FFCA00;
  --panel-wall: url("https://images.unsplash.com/photo-1661860971963-e799df217d9f?w=8&h=64&fit=crop&crop=left&q=80&fm=jpg");
  --photo-ratio: 5 / 4; --photo-h: 114%; --photo-pos: 50% 20%;
  --push-top: 24%; --push-left: 8%;
}
.h-hero-panel.is-lilac {        /* Business: a man pointing at his phone, on lilac */
  --panel-tone: #D5D6E3;
  /* His photo is served from here (img/biz-hero-*.jpg: Unsplash
     photo-1733246548475-840ff351ec1d), and so is its wall, a strip of the same
     file's left edge: a portrait's crop=left strip is an eighth of its width and
     catches the sleeve. The photo runs to the panel's right edge, so there is
     no second edge to match. */
  --panel-wall: url("img/biz-hero-wall.jpg");
  --photo-ratio: 4 / 5; --photo-h: 104%; --photo-right: 0%; --photo-pos: 50% 0;
  --photo-right-md: 0%; --photo-h-md: 100%; --photo-pos-sm: 50% 30%;
  --push-top: 80%; --push-left: 6%; --push-top-md: 80%; --push-top-sm: 78%; --push-top-st: 76%;
}
.h-hero-panel.is-apricot {      /* Developers: a man with his laptop, on apricot */
  --panel-tone: #FDC052;
  --panel-wall: url("https://images.unsplash.com/photo-1713085132267-b3b9b5b56725?w=8&h=64&fit=crop&crop=left&q=80&fm=jpg");
  --photo-ratio: 3 / 2; --photo-h: 106%; --photo-right: -10%; --photo-pos: 50% 0;
  --push-top: 64%; --push-left: 20%; --push-top-md: 66%; --push-top-sm: 70%; --push-top-st: 66%;
}
.h-hero-panel.is-amber {        /* Contact: a woman pointing at her phone, on amber */
  --panel-tone: #DE993A;
  --panel-wall: url("https://images.unsplash.com/photo-1677935711525-1059c0cb9b44?w=8&h=64&fit=crop&crop=left&q=80&fm=jpg");
  --photo-ratio: 3 / 2; --photo-h: 100%; --photo-right: -12%; --photo-pos: 50% 0;
  --push-top: 16%; --push-left: 12%; --push-top-sm: 70%; --push-top-st: 66%;
}

/* ── A quieter hero: words on white, the person on a card (About) ──────── */
.h-intro { padding: 56px 0 24px; }
.h-intro-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 72px; align-items: center; }
.h-intro-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 36px; overflow: hidden; background: var(--h-cool); }
.h-intro-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.h-intro-photo .h-note { position: absolute; left: 16px; right: 16px; bottom: 16px; }

/* ── A line from the app: what just happened, and the amount ───────────── */
/* Icon on the left; the title has the first line to itself, and the detail and
   the amount share the second (or a progress bar runs under the title). */
.h-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; row-gap: 1px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px; background: #fff;
  box-shadow: var(--h-float);
  color: var(--ink);
}
.h-note-body { display: contents; }
.h-note-ic { grid-row: 1 / span 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; }
.h-note-ic svg { width: 18px; height: 18px; }
.h-note-ic.is-ok { background: var(--h-mint); color: var(--h-ok); }
.h-note-ic.is-bill { background: var(--h-butter); color: var(--h-bill); }
.h-note-ic.is-in { background: var(--h-peach); color: var(--orange-deep); }
.h-note-ic.is-ice { background: var(--h-ice); color: var(--blue); }
.h-note-body b { grid-column: 2 / span 2; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.h-note-body small { grid-column: 2; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; line-height: 1.3; color: var(--muted); }
.h-note-amt { grid-column: 3; grid-row: 2; font-size: 0.86rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-note-bar { grid-column: 2 / span 2; grid-row: 3; display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--h-ice); overflow: hidden; }
.h-note-bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }

/* ── Portrait cards: one person and one thing each ─────────────────────── */
.h-feats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin-top: 56px; list-style: none;
}
/* A gentle stagger, so the row reads as one sweep rather than a table. */
.h-feat:nth-child(even) { padding-top: 56px; }
.h-feat-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; background: var(--h-cool); }
.h-feat-photo > img { width: 100%; height: 100%; object-fit: cover; }
.h-feat .h-note { position: absolute; left: 12px; right: 12px; bottom: 12px; }
.h-feat h3 { margin-top: 22px; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.h-feat p { margin-top: 4px; color: var(--body-c); }

/* ── Points: an icon, a short title, one line ──────────────────────────── */
.h-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; list-style: none; }
.h-points.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h-points.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.h-sec-head + .h-points { margin-top: 56px; }
.h-point-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--h-ice); color: var(--blue); }
.h-point-ic svg { width: 24px; height: 24px; }
.h-point-ic.is-in { background: var(--h-peach); color: var(--orange-deep); }
.h-point-ic.is-ok { background: var(--h-mint); color: var(--h-ok); }
.h-point-ic.is-bill { background: var(--h-butter); color: var(--h-bill); }
.h-points h3 { margin-top: 20px; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.h-points p { margin-top: 6px; color: var(--body-c); }
.h-points code, .h-split code, .h-sec-head code { font-family: var(--font-mono); font-size: 0.88em; }

/* "Safe by design": the title beside its points. */
.h-safe { padding: 112px 0; }
.h-safe-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }

/* ── A short list of perks, each with a tick ───────────────────────────── */
.h-checks { margin-top: 24px; list-style: none; }
.h-checks li { position: relative; padding: 7px 0 7px 30px; font-weight: 600; color: var(--ink); }
.h-checks li::before {
  content: ""; position: absolute; left: 3px; top: 0.9em;
  width: 12px; height: 7px; border-left: 2.5px solid var(--h-ok); border-bottom: 2.5px solid var(--h-ok);
  transform: rotate(-45deg);
}

/* ── Steps: a real sequence, so numbered and joined ────────────────────── */
.h-steps-list { display: grid; gap: 30px; margin-top: 44px; list-style: none; }
.h-steps-list li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; }
.h-steps-list li:not(:last-child)::after {
  content: ""; position: absolute; left: 23px; top: 56px; bottom: -24px;
  width: 2px; border-radius: 2px; background: var(--h-line);
}
.h-step-n {
  grid-row: span 2;
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
}
.h-steps-list h3 { align-self: end; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.h-steps-list p { color: var(--body-c); }
.h-steps-list code { font-family: var(--font-mono); font-size: 0.88em; }

/* ── Doors: a tinted card to each place, showing what is behind it ─────── */
.h-more { padding: 112px 0; background: var(--h-cool); }
.h-more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.h-more-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.h-more-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h-door {
  display: flex; flex-direction: column; overflow: hidden;
  min-height: 380px; padding: 30px 28px 0;
  border-radius: 28px;
  color: var(--ink); text-decoration: none;
}
.h-door.is-short { min-height: 0; padding-bottom: 30px; }
.h-door:hover { text-decoration: none; color: var(--ink); }
.h-door h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color 0.18s ease; }
a.h-door:hover h3 { text-decoration-color: currentColor; }
.h-door p { margin-top: 6px; color: var(--body-c); }
.h-door.is-peach { background: var(--h-peach); }
.h-door.is-butter { background: var(--h-butter); }
.h-door.is-mint { background: var(--h-mint); }
.h-door.is-ice { background: var(--h-ice); }
.h-door.is-white { background: #fff; box-shadow: 0 0 0 1px var(--h-line); }
.h-door.is-night { background: var(--navy); color: #fff; }
.h-door.is-night:hover { color: #fff; }
.h-door.is-night p { color: var(--h-sub); }
.h-door-art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; margin-top: auto; padding: 36px 0 30px; min-height: 190px; }
.h-door .h-note { font-size: 1rem; }
.h-door .h-note:not(.is-back) { position: relative; }
/* A second notification stacked behind the first, only its top edge showing. */
.h-door .h-note.is-back { position: absolute; left: 0; right: 0; bottom: 44px; transform: scale(0.92); transform-origin: 50% 0; opacity: 0.55; }
.h-door .h-note.is-back > * { visibility: hidden; }
/* The thing to do at the foot of a door: an address, a link. */
.h-door-foot { margin-top: auto; padding-top: 28px; font-weight: 700; color: var(--blue); overflow-wrap: anywhere; }
.h-door-foot.is-mono { font-family: var(--font-mono); font-size: 0.92rem; font-weight: 600; }
.h-door.is-night .h-door-foot { color: var(--gold-light); }

/* ── Code: a dark panel, never under body text ─────────────────────────── */
.h-code {
  margin: 0; overflow: hidden;
  border-radius: 24px; background: var(--navy-2);
  box-shadow: var(--h-shadow), inset 0 0 0 1px var(--navy-line);
}
.h-code-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--navy-line); font-size: 0.85rem; font-weight: 600; color: var(--h-sub); }
.h-code-head i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.h-code-head span { margin-left: 8px; }
.h-code-tabs { display: flex; gap: 6px; margin-left: auto; }
.h-code-tab {
  padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(141, 182, 255, 0.22);
  background: transparent; color: var(--h-sub); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
}
.h-code-tab[aria-pressed="true"] { background: rgba(46, 125, 255, 0.18); border-color: rgba(46, 125, 255, 0.55); color: #fff; }
.h-code pre { margin: 0; padding: 22px 24px 26px; overflow-x: auto; font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.7; color: #DCE6F8; }
.h-code .k { color: var(--orange-bright); }
.h-code .h { color: var(--h-sub); }
.h-code .p { color: #8DB6FF; }
.h-code .s { color: #9BE3B8; }
.h-code .n { color: var(--gold-light); }
.h-code .c { color: #7E93BE; }
.h-code figcaption { padding: 0 24px 22px; font-size: 0.86rem; color: var(--h-sub); }
.h-code figcaption code { font-family: var(--font-mono); color: #fff; }

/* ── Statements: a sentence set large on a tint (mission, vision) ──────── */
.h-statements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.h-statement { padding: 44px 40px; border-radius: 32px; }
.h-statement.is-peach { background: var(--h-peach); }
.h-statement.is-ice { background: var(--h-ice); }
.h-statement-k { font-weight: 700; color: var(--orange-deep); }
.h-statement.is-ice .h-statement-k { color: var(--blue); }
.h-statement-t { margin-top: 14px; font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }

/* ── The logo on navy, with what each part means ───────────────────────── */
.h-logo-stage { padding: 56px 44px; border-radius: 36px; background: var(--navy); color: var(--h-sub); }
.h-logo-stage > img { display: block; height: 110px; width: auto; }
.h-decode { display: grid; gap: 16px; margin-top: 32px; list-style: none; }
.h-decode li { display: flex; gap: 14px; align-items: flex-start; }
.h-decode b { color: #fff; }
.h-swatch { flex: none; width: 34px; height: 10px; margin-top: 7px; border-radius: 6px; }
.h-swatch.is-in { background: linear-gradient(90deg, var(--orange), var(--gold)); }
.h-swatch.is-out { background: linear-gradient(90deg, var(--blue-bright), var(--navy-3)); }
.h-swatch.is-star { width: 10px; margin: 7px 12px 0; border-radius: 50%; background: var(--gold); }
.h-split > div > p + p { margin-top: 14px; }

/* ── A form on a white card ────────────────────────────────────────────── */
.h-form { padding: 36px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--h-line), var(--h-shadow); }
.h-form .field textarea { resize: vertical; }
.h-form-send { width: 100%; margin-top: 8px; }
.h-form-note { margin-top: 14px; font-size: 0.88rem; text-align: center; color: var(--muted); }
.h-split .h-points { margin-top: 40px; gap: 28px; }
.h-split .h-points h3 { margin-top: 14px; font-size: 1.05rem; }

/* ── Endpoints: method, path and what it does, one per line ────────────── */
.h-endpoints { list-style: none; padding: 10px 28px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--h-line), var(--h-shadow); }
.h-endpoints li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--h-line); }
.h-endpoints li:last-child { border-bottom: 0; }
.h-verb { grid-row: span 2; justify-self: start; padding: 4px 10px; border-radius: 8px; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; }
.h-verb.is-post { background: var(--h-peach); color: var(--orange-deep); }
.h-verb.is-get { background: var(--h-ice); color: var(--blue); }
.h-endpoints code { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.h-endpoints small { font-size: 0.9rem; color: var(--body-c); }

/* ── The store badges (components/_app_badges.html) ────────────────────── */
.h-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.h-badge {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 8px 20px 8px 16px;
  border-radius: 14px; background: var(--ink); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.05rem; line-height: 1.1;
  transition: transform 0.18s ease;
}
.h-badge:hover { transform: translateY(-2px); text-decoration: none; color: #fff; }
.h-badge svg { width: 26px; height: 26px; flex: none; }
.h-badge small { display: block; font-size: 0.68rem; font-weight: 500; opacity: 0.8; }
.h-badges.is-dark .h-badge { background: #fff; color: var(--ink); }
.h-badges.is-dark .h-badge:hover { color: var(--ink); }
.h-badges-note { font-weight: 600; color: var(--muted); }

/* ── Where StarPay works: a dotted map beside the list of countries ─────── */
/* Blue dots are the countries we serve, Accra carries the logo's star, and a
   row of the list lights its country in gold while it is hovered. */
.h-reach { padding: 112px 0; background: var(--h-cool); }
.h-reach-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "head map" "list map";
  column-gap: 64px; align-items: start;
}
.h-reach-head { grid-area: head; }
.h-reach-head > p { margin-top: 18px; max-width: 32em; font-size: 1.2rem; line-height: 1.55; color: var(--body-c); }
.h-reach-map { grid-area: map; align-self: center; margin: 0; }
.h-reach-list {
  grid-area: list; list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px;
}
.h-reach-list li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start; align-content: start;
  padding: 14px 0; border-top: 1px solid var(--h-line);
}
.h-reach-flag { grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(14, 22, 38, 0.1); }
.h-reach-name { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; font-weight: 700; color: var(--ink); transition: color 0.2s ease; }
.h-reach-list li.is-on .h-reach-name { color: var(--blue); }
.h-reach-home {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px;
  border-radius: 999px; background: var(--h-butter); color: var(--h-bill);
  font-size: 0.72rem; font-weight: 700;
}
.h-reach-home svg { width: 12px; height: 12px; fill: var(--gold); }
.h-reach-ways { grid-column: 2; margin-top: 3px; font-size: 0.92rem; line-height: 1.45; color: var(--body-c); }
.h-africa { display: block; width: 100%; height: auto; }
.h-africa path { fill: none; stroke-linecap: round; stroke-width: 9.5; }
.h-africa .h-africa-land { stroke: var(--h-land); }
.h-africa .h-africa-c { stroke: var(--blue); transition: stroke 0.2s ease, stroke-width 0.2s ease; }
.h-africa .h-africa-c.is-on { stroke: var(--gold); stroke-width: 12; }
.h-africa .h-africa-star { fill: var(--gold); stroke: none; }

/* ── The close: a man on the brand's navy, pointing up at the logo's stars ── */
/* He is a cut-out (components/_close_figure.html), so the panel is the brand's
   own navy rather than a photo's wall, with the stars' warm light around them. */
.h-final { padding: 24px var(--h-gutter); }
.h-final-panel {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 560px; border-radius: 40px;
  background:
    radial-gradient(circle at 75% 22%, rgba(247, 166, 10, 0.2), rgba(247, 166, 10, 0) 30%),
    radial-gradient(ellipse 70% 90% at 78% 110%, #22397E, rgba(34, 57, 126, 0) 70%),
    var(--navy);
  color: #fff;
}
.h-final-inner { position: relative; z-index: 2; width: 100%; }
.h-final-copy { max-width: 560px; padding: 72px 0; }
.h-final-title { font-size: clamp(2.8rem, 5.6vw, 5rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.05em; color: #fff; text-wrap: balance; }
.h-final-copy > p:not(.h-final-biz) { margin-top: 18px; font-size: 1.3rem; font-weight: 700; color: var(--h-sub); }
.h-final .h-ctas { margin-top: 34px; }
.h-final-biz { margin-top: 28px; font-size: 1.05rem; font-weight: 600; }
.h-final-biz a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, 0.5); }
.h-final-biz a:hover { color: #fff; text-decoration-color: #fff; }
.h-final-photo { position: absolute; z-index: 1; bottom: 0; right: 8%; height: 76%; aspect-ratio: 1100 / 1180; margin: 0; }
.h-final-photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
/* Above his two fingers, where they point. */
.h-stars { position: absolute; top: -21%; left: 52%; width: 34%; aspect-ratio: 1 / 0.8; transform: translateX(-50%); }
.h-stars svg { position: absolute; display: block; fill: var(--gold); filter: drop-shadow(0 6px 16px rgba(247, 166, 10, 0.35)); }
.h-stars svg:nth-child(1) { left: 26%; top: 18%; width: 42%; }
.h-stars svg:nth-child(2) { left: 0; top: 0; width: 24%; fill: var(--gold-light); }
.h-stars svg:nth-child(3) { right: 2%; top: 4%; width: 20%; fill: var(--gold-light); }

/* The site footer is landing/styles.css's; only its slogan line is styled here. */
.sp-colour .footer-brand .footer-slogan { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--gold-light); }

/* ── Smaller screens ───────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  /* Narrower panels: the photo moves right so the person never meets the words. */
  .h-hero-photo { height: var(--photo-h-md, 100%); right: var(--photo-right-md, -12%); }
  .h-push { top: var(--push-top-md, 14%); }
}
@media (max-width: 1080px) {
  .h-reach-grid { column-gap: 48px; }
  .h-more-grid, .h-more-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-safe-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .h-points.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-split, .h-intro-grid { gap: 48px; }
}
@media (max-width: 1024px) {
  /* The hero and the close stack: words on the colour, the person below. */
  .h-hero-panel, .h-final-panel { flex-direction: column; align-items: stretch; min-height: 0; border-radius: 32px; }
  .h-hero-copy { padding: 40px 0 8px; max-width: none; }
  .h-hero-photo, .h-final-photo { position: relative; inset: auto; right: auto; width: 100%; height: auto; }
  .h-hero-photo { aspect-ratio: 16 / 9; margin-top: -40px; }
  /* Edge to edge, so only its top edge sits inside the panel, and it fades. */
  .h-hero-photo > img {
    object-position: var(--photo-pos-md, 50% 45%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%);
    mask-image: linear-gradient(180deg, transparent, #000 12%);
  }
  .h-push { top: var(--push-top-st, 12%); left: 22px; }
  .h-final-copy { padding: 44px 0 0; max-width: none; }
  .h-final-photo { aspect-ratio: 1100 / 1180; width: min(440px, 86%); margin: 112px auto 0; }
  .h-final-panel { background: radial-gradient(circle at 50% 58%, rgba(247, 166, 10, 0.16), rgba(247, 166, 10, 0) 34%), var(--navy); }
}
/* Business's portrait, stacked on a tablet: he stands whole in the middle,
   on his panel's own colour; a phone fills the frame with him again. */
@media (max-width: 1024px) and (min-width: 721px) {
  .h-hero-panel.is-lilac .h-hero-photo { display: flex; justify-content: center; aspect-ratio: auto; height: 600px; }
  .h-hero-panel.is-lilac .h-hero-photo > img {
    width: auto; aspect-ratio: 4 / 5;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent), linear-gradient(180deg, transparent, #000 18%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent), linear-gradient(180deg, transparent, #000 18%);
    mask-composite: intersect;
  }
}
@media (max-width: 900px) {
  /* Portrait cards become a row to swipe through. */
  .h-feats {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 320px);
    gap: 16px; margin: 36px -28px 0; padding: 0 28px 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 28px;
    scrollbar-width: none;
  }
  .h-feats::-webkit-scrollbar { display: none; }
  .h-feat { scroll-snap-align: start; }
  .h-feat:nth-child(even) { padding-top: 0; }
  .h-split, .h-intro-grid { grid-template-columns: minmax(0, 1fr); }
  .h-statements { grid-template-columns: minmax(0, 1fr); }
  .h-intro-photo { max-width: 520px; width: 100%; }
  .h-points, .h-points.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The map sits between the words and the list. */
  .h-reach-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "list"; }
  .h-reach-map { width: min(100%, 520px); margin: 40px auto 0; }
}
@media (max-width: 720px) {
  .h-br { display: none; }
  .h-switch { margin-bottom: 26px; }
  /* Sized so a hero headline's lines fit whole on a 375px phone. */
  .h-hero h1, .h-intro h1 { font-size: clamp(2rem, 10vw, 2.6rem); }
  .h-lede { font-size: 1.1rem; }
  .h-badges { gap: 8px; }
  .h-badge { min-height: 48px; padding: 6px 14px 6px 11px; gap: 8px; font-size: 0.95rem; border-radius: 12px; }
  .h-badge svg { width: 22px; height: 22px; }
  .h-hero-photo { aspect-ratio: 1 / 1.08; margin-top: 0; }
  .h-hero-photo > img { object-position: var(--photo-pos-sm, 50% 0); }
  .h-push { top: var(--push-top-sm, 3%); width: min(300px, calc(100% - 44px)); padding: 12px 14px; }
  .h-note { column-gap: 10px; padding: 9px 12px 9px 9px; }
  .h-note-body small { font-size: 0.76rem; }
  .h-note-amt { font-size: 0.82rem; }
  .h-sec, .h-more, .h-safe, .h-reach { padding: 72px 0; }
  .h-reach-list { grid-template-columns: minmax(0, 1fr); }
  .h-more-grid, .h-more-grid.is-3, .h-more-grid.is-2 { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .h-door { min-height: 0; }
  .h-points, .h-points.is-2, .h-points.is-4 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .h-intro { padding-top: 32px; }
  .h-code pre { font-size: 0.8rem; padding: 18px 18px 22px; }
  .h-form { padding: 24px 20px; }
  .h-statement { padding: 32px 26px; }
  .h-logo-stage { padding: 40px 26px; }
  .h-logo-stage > img { height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-colour *, .sp-colour *::before, .sp-colour *::after { animation: none !important; transition: none !important; }
}