/* Global Software Solutions — light product-site style.
   Same system as the Torus site (Geist, rounded cards, pill nav, class-based reveals),
   in light mode after Stripe, Attio, Glide, Zendesk and Intercom.
   Accent colours are the blue and orange of the GSS logo. */
:root {
  --bg: #fcfcfd;
  --bg-2: #f4f6f9;     /* tinted sections */
  --card: #ffffff;
  --card-2: #f7f8fa;
  --line: rgba(16, 24, 40, 0.08);
  --line-2: rgba(16, 24, 40, 0.14);
  --text: #0c1424;
  --muted: #475467;    /* 7.6:1 on white, 7.0:1 on --bg-2 */
  --dim: #5b6779;      /* 5.6:1 on white, 5.2:1 on --bg-2 */

  --blue: #2878b8;     /* logo blue */
  --blue-ink: #1b5f99; /* text-safe blue, 6.6:1 on white */
  --blue-soft: #e9f2fb;
  --orange: #f5a742;   /* logo orange (decoration only) */
  --orange-ink: #a3540a; /* text-safe orange, 5.2:1 on white */
  --orange-soft: #fdf1e1;
  --green-ink: #137a4b;
  --green-soft: #e3f5ec;
  --violet-ink: #5a46c2;
  --violet-soft: #eeebfb;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max: 1200px;
  --pad: clamp(20px, 4vw, 40px);
  --sec: clamp(88px, 10vw, 136px);    /* vertical space for every section */
  --head-gap: clamp(40px, 5vw, 60px); /* space between a section heading and its content */
  --r: 20px;
  --r-sm: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.04), 0 30px 70px -28px rgba(27, 95, 153, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, dl, dd, ol, ul, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Icons */
.ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -4px; }
.ic--sm { width: 16px; height: 16px; vertical-align: -3px; }
.t-blue { --c: var(--blue-ink); --cs: var(--blue-soft); }
.t-orange { --c: var(--orange-ink); --cs: var(--orange-soft); }
.t-green { --c: var(--green-ink); --cs: var(--green-soft); }
.t-violet { --c: var(--violet-ink); --cs: var(--violet-soft); }
.tile-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--c, var(--blue-ink)); background: var(--cs, var(--blue-soft)); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 500; font-size: 15px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ease), background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn--dark { background: var(--text); color: #fff; box-shadow: 0 6px 18px -8px rgba(12, 20, 36, 0.55); }
.btn--dark:hover { background: #1c2740; }
.btn--blue { background: var(--blue-ink); color: #fff; box-shadow: 0 8px 22px -10px rgba(27, 95, 153, 0.7); }
.btn--blue:hover { background: #174f80; }
.btn--ghost { background: #fff; border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: rgba(16,24,40,0.24); background: #fff; }
.btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn .ic { transition: transform 200ms var(--ease); }
.btn:hover .ic--go { transform: translateX(2px); }
.tlink { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-ink); font-weight: 500; }
.tlink .ic { transition: transform 200ms var(--ease); }
.tlink:hover .ic { transform: translateX(3px); }
.tag { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--c, var(--blue-ink)); background: var(--cs, var(--blue-soft)); }
.tag .ic { width: 15px; height: 15px; }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; border-bottom: 1px solid transparent; transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.nav.is-scrolled { background: rgba(252, 252, 253, 0.82); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-color: var(--line); }
.nav__in { position: relative; max-width: var(--max); margin: 0 auto; height: 68px; padding: 0 var(--pad); display: flex; align-items: center; gap: 24px; }
.nav__logo img { width: 140px; height: auto; }
.nav__links { display: flex; align-items: center; gap: 2px; font-size: 14.5px; color: var(--muted); margin-left: 8px; }
.nav__links > a, .nav__drop > button { height: 36px; padding: 0 13px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; border: 0; background: none; cursor: pointer; font-size: 14.5px; color: var(--muted); transition: color 160ms ease, background-color 160ms ease; }
.nav__links > a:hover, .nav__drop > button:hover, .nav__drop.is-open > button { color: var(--text); background: rgba(16, 24, 40, 0.05); }
.nav__links > a[aria-current="page"], .nav__drop.is-current > button { color: var(--text); background: rgba(40, 120, 184, 0.10); }
.nav__drop > button .ic { transition: transform 240ms var(--ease); }
.nav__drop.is-open > button .ic { transform: rotate(180deg); }
.nav__cta { margin-left: auto; display: flex; gap: 10px; }
.nav__burger { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line-2); background: #fff; border-radius: 12px; position: relative; cursor: pointer; }
.nav__burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text); transition: transform 240ms var(--ease); }
.nav__burger span:first-child { top: 16px; } .nav__burger span:last-child { top: 24px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__sheet { display: none; }

/* Solutions menu (desktop) */
.nav__drop { position: static; }
.mega {
  position: absolute; top: calc(100% - 4px); left: 50%; translate: -50% 0; width: min(880px, calc(100vw - 48px));
  padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--line-2), 0 30px 70px -24px rgba(16, 24, 40, 0.30);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 240ms var(--ease), visibility 0s 240ms;
}
.nav__drop.is-open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms ease, transform 240ms var(--ease); }
.mega__grp { padding: 12px; border-radius: 12px; }
.mega__t { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.mega__t .tile-ic { width: 30px; height: 30px; border-radius: 9px; }
.mega__t .ic { width: 16px; height: 16px; }
.mega__grp a { display: block; padding: 6px 8px 6px 40px; border-radius: 8px; font-size: 14px; color: var(--muted); transition: color 140ms ease, background-color 140ms ease; }
.mega__grp a:hover, .mega__grp a:focus-visible { color: var(--text); background: var(--card-2); }
.mega__grp a[aria-current="page"] { color: var(--blue-ink); background: var(--blue-soft); }
.mega__all { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); font-size: 14px; color: var(--muted); }
.mega__all a { color: var(--blue-ink); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }

/* Group websites dropdown: logos only */
.brand { position: relative; display: flex; align-items: center; gap: 2px; }
.brand__btn { width: 26px; height: 26px; display: grid; place-items: center; border: 0; padding: 0; background: none; color: var(--orange-ink); cursor: pointer; border-radius: 6px; }
.brand__btn .ic { transition: transform 240ms var(--ease); }
.brand__btn:hover .ic { transform: translateY(1px); }
.brand.is-open .brand__btn .ic { transform: rotate(180deg); }
.brand__menu {
  position: absolute; top: calc(100% + 14px); left: -6px; width: 196px; padding: 6px;
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px -20px rgba(16, 24, 40, 0.3);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 240ms var(--ease), visibility 0s 240ms;
}
.brand.is-open .brand__menu { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms ease, transform 240ms var(--ease); }
.brand__card { height: 58px; border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 8px 14px; box-shadow: inset 0 0 0 1px var(--line); transition: transform 200ms var(--ease), box-shadow 200ms ease; }
.brand__card img { max-height: 30px; max-width: 100%; width: auto; height: auto; }
.brand__card img[src*="great-foundation"] { max-height: 40px; }
.brand__card:hover, .brand__card:focus-visible { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--blue); }
.brand__card.is-current { box-shadow: inset 0 0 0 1.5px rgba(40, 120, 184, 0.55); background: var(--blue-soft); }
.brand__logo { flex: none; width: 116px; height: 48px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; padding: 8px 12px; }
.brand__logo img { max-width: 100%; max-height: 28px; width: auto; height: auto; }

@media (max-width: 1060px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__sheet { position: absolute; top: 68px; left: 0; right: 0; visibility: hidden; display: flex; flex-direction: column; padding: 8px var(--pad) 22px; background: #fcfcfd; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(16,24,40,0.25);
    clip-path: inset(0 0 100% 0); transition: clip-path 360ms var(--ease), visibility 0s 360ms; pointer-events: none; max-height: calc(100svh - 68px); overflow-y: auto; }
  .nav__sheet > a:not(.btn) { padding: 13px 0; font-size: 18px; border-bottom: 1px solid var(--line); }
  .nav__sheet a[aria-current="page"] { color: var(--blue-ink); }
  .nav__sheet .btn { margin-top: 18px; }
  .sheet__t { margin-top: 18px; font-size: 13px; color: var(--dim); }
  .sheet__brands { display: flex; gap: 10px; margin-top: 10px; }
  .nav.is-open .nav__sheet { clip-path: inset(0); pointer-events: auto; visibility: visible; transition: clip-path 360ms var(--ease), visibility 0s; }
  .nav.is-open { background: #fcfcfd; }
}

/* ---------- Glow (soft logo-coloured light) ---------- */
.glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow i { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.glow .g1 { width: 44vw; height: 44vw; max-width: 680px; max-height: 680px; background: #8cc0ec; left: 50%; top: -10%; translate: -95% 0; opacity: 0.42; animation: drift1 18s ease-in-out infinite alternate; }
.glow .g2 { width: 36vw; height: 36vw; max-width: 560px; max-height: 560px; background: #ffd29a; left: 50%; top: -4%; translate: 5% 0; opacity: 0.45; animation: drift2 22s ease-in-out infinite alternate; }
.glow .g3 { width: 28vw; height: 28vw; max-width: 420px; max-height: 420px; background: #b9d7f2; left: 50%; top: 20%; translate: -30% 0; opacity: 0.5; animation: drift3 20s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(6vw, 3vw) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-6vw, 4vw) scale(0.9); } }
@keyframes drift3 { to { transform: translate(-8vw, -3vw) scale(1.15); } }
.grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 25%, transparent 75%);
  opacity: 0.8;
}

/* ---------- Hero ---------- */
.hero, .page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 148px var(--pad) clamp(72px, 8vw, 104px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero > *, .page-hero > * { position: relative; z-index: 1; }
.hero > .glow, .hero > .grid-bg, .page-hero > .glow, .page-hero > .grid-bg { position: absolute; z-index: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 34px; padding: 5px 14px 5px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.8); box-shadow: inset 0 0 0 1px var(--line-2), 0 2px 8px -4px rgba(16,24,40,0.12);
  font-size: 13.5px; color: var(--muted); text-align: left;
  transition: box-shadow 200ms ease, color 200ms ease;
}
.chip b { font-weight: 500; font-size: 12.5px; color: #fff; background: var(--blue-ink); padding: 3px 9px; border-radius: 999px; }
a.chip:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(16,24,40,0.24), 0 4px 12px -4px rgba(16,24,40,0.16); }
a.chip .ic { transition: transform 200ms var(--ease); }
a.chip:hover .ic { transform: translateX(2px); }
.hero__h, .page-hero__h {
  margin-top: 26px;
  font-size: clamp(40px, 6vw, 78px); font-weight: 600; line-height: 1.04; letter-spacing: -0.045em;
  max-width: 20ch; text-wrap: balance;
}
.page-hero__h { font-size: clamp(38px, 5.4vw, 70px); max-width: 18ch; }
.soft { color: #6b7a90; }              /* two-tone headings (Stripe); 4.5:1+ at large sizes */
.ink-blue { color: var(--blue-ink); }
.hero__p { margin-top: 22px; max-width: 62ch; font-size: clamp(16px, 1.3vw, 18.5px); color: var(--muted); text-wrap: balance; }
.hero__cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.crumb { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: 14px; color: var(--dim); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--blue-ink); }
.crumb .sep { opacity: 0.6; }

/* Entrances (see main.js): fade + 14px rise using `translate`, so hover transforms are untouched */
.js .rv { opacity: 0; translate: 0 14px; transition: opacity 650ms var(--ease) var(--d, 0ms), translate 800ms var(--ease-expo) var(--d, 0ms), transform 300ms var(--ease), box-shadow 300ms ease, background-color 200ms ease, color 200ms ease; }
.js .rv.in { opacity: 1; translate: none; }
.js .rvw .w { translate: 0 110%; transition: translate 900ms var(--ease-expo) calc(var(--i, 0) * 40ms); }
.js .rvw.in .w { translate: none; }
.w { display: inline-block; }
.wm { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }

/* ---------- Hero visual: Payment Hub flow ---------- */
.stage { width: min(1120px, 100%); margin-top: 64px; perspective: 1600px; }
.flow { transform-origin: 50% 0%; position: relative; background: rgba(255,255,255,0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 24px; box-shadow: 0 0 0 1px var(--line-2), var(--shadow-lg); text-align: left; overflow: hidden; }
.flow__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.flow__dots { display: flex; gap: 6px; }
.flow__dots i { width: 10px; height: 10px; border-radius: 50%; background: #e3e6ec; }
.flow__bar b { color: var(--text); font-weight: 500; }
.flow__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--green-ink); font-weight: 500; }
.flow__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22a565; box-shadow: 0 0 0 3px rgba(34,165,101,0.18); animation: livepulse 2s ease-in-out infinite; }
@keyframes livepulse { 50% { box-shadow: 0 0 0 6px rgba(34,165,101,0.05); } }
.flow__body { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 48px; padding: 28px; background-image: radial-gradient(rgba(16,24,40,0.08) 1px, transparent 1px); background-size: 22px 22px; }
.flow__col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.flow__k { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.flow__k em { font-style: normal; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; color: #fff; background: var(--blue-ink); }
.node { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 4px 12px -8px rgba(16,24,40,0.2); font-size: 14px; font-weight: 500; transition: transform 200ms var(--ease), box-shadow 200ms ease; }
.node:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(40,120,184,0.4), 0 10px 24px -10px rgba(27,95,153,0.35); }
.node .tile-ic { width: 30px; height: 30px; border-radius: 9px; }
.node .ic { width: 16px; height: 16px; }
.node small { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--dim); font-family: var(--mono); }
.hub { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 18px; border-radius: 18px; background: linear-gradient(180deg, #fff, #f6f9fd); box-shadow: 0 0 0 1px rgba(40,120,184,0.35), 0 24px 50px -24px rgba(27,95,153,0.5); }
.hub__head { display: flex; align-items: center; gap: 12px; }
.hub__head img { width: 40px; height: 40px; }
.hub__head b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.hub__head span { font-size: 13px; color: var(--dim); }
.hub__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hub__chips span { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--muted); }
.hub__chips .ic { width: 15px; height: 15px; color: var(--blue-ink); }
.hub__meter { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dim); }
.hub__meter i { flex: 1; height: 4px; border-radius: 4px; background: #e8ecf2; overflow: hidden; }
.hub__meter i::after { content: ""; display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); transform-origin: left; animation: meter 3.4s var(--ease) infinite; }
@keyframes meter { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.wires path { fill: none; stroke: rgba(40,120,184,0.35); stroke-width: 1.5; stroke-dasharray: 4 6; animation: flowdash 1.4s linear infinite; vector-effect: non-scaling-stroke; }
.wires path.o { stroke: rgba(245,167,66,0.6); }
@keyframes flowdash { to { stroke-dashoffset: -20; } }
.flow__note { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); text-align: center; }

/* ---------- Logos ---------- */
.logos { position: relative; z-index: 2; padding: 56px 0 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.logos__label { text-align: center; color: var(--muted); font-size: 14.5px; margin-bottom: 32px; padding: 0 var(--pad); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee + .marquee { margin-top: 28px; }
.marquee__track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marquee 55s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 60s; }
.marquee__dup { display: contents; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee img { height: 44px; width: auto; max-width: none; filter: grayscale(1); opacity: 0.75; transition: filter 250ms ease, opacity 250ms ease; }
.marquee img:hover { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(calc(-50% - 32px)); } }

/* ---------- Sections ---------- */
section { position: relative; }
.sec { padding-block: var(--sec); }
.sec--tint { background: var(--bg-2); }
.sec + .sec { border-top: 1px solid var(--line); }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.head { max-width: var(--max); margin: 0 auto var(--head-gap); padding: 0 var(--pad); text-align: center; display: flex; flex-direction: column; align-items: center; }
.head .tag { margin-bottom: 18px; }
.head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; gap: 40px; }
.head--row > div { display: flex; flex-direction: column; align-items: flex-start; }
.head--row .lede { max-width: 42ch; margin-top: 0; }
.h2 { font-size: clamp(32px, 4.2vw, 54px); font-weight: 600; line-height: 1.06; letter-spacing: -0.04em; max-width: 20ch; text-wrap: balance; }
.h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.lede { margin-top: 18px; max-width: 62ch; color: var(--muted); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; text-wrap: pretty; }
.head .lede { text-wrap: balance; }
.prose p { color: var(--muted); font-size: 16.5px; line-height: 1.7; max-width: 66ch; }
.prose p + p { margin-top: 16px; }
.prose strong { color: var(--text); font-weight: 600; }

/* ---------- Cards ---------- */
.card { position: relative; overflow: hidden; isolation: isolate; background: var(--card); border-radius: var(--r); padding: 24px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); display: flex; flex-direction: column; transition: transform 300ms var(--ease), box-shadow 300ms ease; }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 300ms ease; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(40,120,184,0.08), transparent 60%); }
.card:hover { box-shadow: inset 0 0 0 1px rgba(40,120,184,0.28), 0 18px 40px -22px rgba(27,95,153,0.35); }
.card:hover::before { opacity: 1; }
a.card:hover { transform: translateY(-3px); }
.card h3 { margin-top: 18px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.card > p, .card__p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.card__more { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 6px; color: var(--blue-ink); font-weight: 500; font-size: 14.5px; }
.card__more .ic { transition: transform 200ms var(--ease); }
.card:hover .card__more .ic { transform: translateX(3px); }
.ticks { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.ticks li .ic { margin-top: 2px; width: 16px; height: 16px; color: var(--c, var(--blue-ink)); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span, .chips a { font-size: 13px; padding: 5px 11px; border-radius: 999px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); transition: color 160ms ease, box-shadow 160ms ease; }
.chips a:hover { color: var(--blue-ink); box-shadow: inset 0 0 0 1px rgba(40,120,184,0.4); }

/* Auto grid: build.py picks the column count and spans so no row is left with an orphan card */
.g { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; gap: 16px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.g--c2 { --cols: 2; } .g--c3 { --cols: 3; } .g--c4 { --cols: 4; }
.g--s1 > :first-child { grid-column: span 2; }
.g--s2 > :nth-child(-n+2) { grid-column: span 2; }
.g--flush { padding: 0; }
@media (max-width: 1100px) {
  .g--c4 { --cols: 2; }
  .g--c4.g--s1 > :first-child, .g--c4.g--s2 > :nth-child(-n+2) { grid-column: auto; }
  .g--c4.g--t1 > :first-child { grid-column: span 2; }
}
@media (max-width: 860px) {
  .g--c3 { --cols: 2; }
  .g--c3.g--s1 > :first-child { grid-column: auto; }
  .g--c3.g--t1 > :first-child { grid-column: span 2; }
  .g--c3.g--k3 { --cols: 3; }
}
@media (max-width: 600px) {
  .g { --cols: 1 !important; }
  .g > * { grid-column: auto !important; }
}

/* ---------- Home: stats ---------- */
.stats { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { padding: 26px 24px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.stat b { display: block; font-size: clamp(40px, 4.4vw, 58px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.stat b sup { font-size: 0.5em; vertical-align: 0.7em; color: var(--orange-ink); margin-left: 2px; }
.stat span { display: block; margin-top: 12px; color: var(--muted); font-size: 14.5px; }
.stat__bar { margin-top: 18px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--orange)); width: 36px; }

/* ---------- Home: suite bento ---------- */
.suite .card { min-height: 100%; }
.fam__vis { margin: -24px -24px 0; padding: 22px 24px; min-height: 132px; background: linear-gradient(180deg, var(--cs, var(--blue-soft)), rgba(255,255,255,0)); border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; }
.fam__vis .chips span { background: #fff; }
.fam__top { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.fam__top h3 { margin: 0; }

/* ---------- Pillars (Payment Hub) ---------- */
.pillars { counter-reset: p; }
.pillar { padding: 28px; }
.pillar__n { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c); }
.pillar__n em { font-style: normal; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--c); font-size: 13px; }
.pillar h3 { font-size: 22px; letter-spacing: -0.03em; }

/* ---------- Footprint ---------- */
.foot-grid { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ctry { padding: 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); display: flex; flex-direction: column; gap: 10px; transition: transform 250ms var(--ease), box-shadow 250ms ease; }
.ctry:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(40,120,184,0.3), 0 14px 30px -18px rgba(27,95,153,0.35); }
.ctry__top { display: flex; align-items: center; gap: 10px; }
.ctry__code { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--c, var(--blue-ink)); background: var(--cs, var(--blue-soft)); }
.ctry b { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.ctry__reg { font-size: 12.5px; color: var(--dim); }
.ctry .chips span { font-size: 12px; padding: 3px 9px; }
.regions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; padding: 0 var(--pad); }

/* ---------- Split (copy + visual) ---------- */
.split { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.split--top { align-items: start; }
.split .tag { margin-bottom: 18px; }
.split .h2 { max-width: 16ch; }
.split__cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.shot { border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line-2), var(--shadow-lg); }
.shot img { width: 100%; }
.shot--pad { padding: 28px; background: linear-gradient(160deg, var(--blue-soft), #fff 60%, var(--orange-soft)); }
.shot--pad img { border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -24px rgba(16,24,40,0.35); }

/* ---------- News ---------- */
.news .card { padding: 26px; }
.news__k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--c); }
.news h3 { font-size: 19px; line-height: 1.35; }

/* ---------- Awards marquee + group ---------- */
.awards-row { display: flex; align-items: center; gap: 56px; }
.awards-row img { height: 64px; width: 150px; max-width: none; object-fit: contain; filter: none; opacity: 0.9; }
.grp { align-items: flex-start; }
.grp__logo { height: 64px; display: flex; align-items: center; }
.grp__logo img { max-height: 46px; width: auto; max-width: 180px; }
.grp__logo img[src*="great-foundation"] { max-height: 56px; }

/* ---------- Final CTA ---------- */
.final { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--sec) * 1.15) var(--pad); text-align: center; display: flex; flex-direction: column; align-items: center; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg), #f1f6fb); }
.final > *:not(.glow) { position: relative; z-index: 1; }
.final .glow .g1 { top: 40%; } .final .glow .g2 { top: 50%; } .final .glow .g3 { top: 60%; }
.final__h { font-size: clamp(34px, 5vw, 64px); font-weight: 600; line-height: 1.05; letter-spacing: -0.045em; max-width: 18ch; text-wrap: balance; }
.final__p { margin-top: 18px; color: var(--muted); max-width: 52ch; font-size: 17px; }
.final__cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 80px var(--pad) 28px; overflow: hidden; background: #fff; }
.foot__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.7fr; gap: 40px; font-size: 14.5px; }
.foot__grid > div { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.foot__brand img { width: 150px; }
.foot__brand p { color: var(--muted); max-width: 36ch; margin-top: 8px; line-height: 1.6; }
.foot__social { display: flex; gap: 8px; margin-top: 8px; }
.foot__social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); transition: color 160ms ease, box-shadow 160ms ease; }
.foot__social a:hover { color: var(--blue-ink); box-shadow: inset 0 0 0 1px rgba(40,120,184,0.4); }
.foot__social .ic { width: 17px; height: 17px; }
.foot__t { color: var(--text); font-weight: 600; margin-bottom: 4px; }
.foot__grid a { color: var(--muted); transition: color 160ms ease; }
.foot__grid a:hover { color: var(--blue-ink); }
.foot__line { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); line-height: 1.5; }
.foot__line .ic { margin-top: 2px; color: var(--dim); }
.foot__line b { color: var(--text); font-weight: 500; }
.foot__word {
  max-width: var(--max); margin: 56px auto 0; text-align: center;
  font-size: clamp(110px, 25vw, 340px); font-weight: 700; letter-spacing: -0.06em; line-height: 0.8;
  background: linear-gradient(180deg, rgba(40,120,184,0.18), rgba(245,167,66,0.06) 60%, rgba(255,255,255,0) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none;
}
.foot__last { max-width: var(--max); margin: 24px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; color: var(--dim); font-size: 13.5px; }
.foot__last nav { display: flex; gap: 20px; }
.foot__last a:hover { color: var(--blue-ink); }

/* =====================================================================
   Inner pages
   ===================================================================== */
.page-hero { padding-top: 160px; }
.page-hero .hero__p { max-width: 64ch; }
.facts { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(860px, 100%); border-radius: 18px; background: rgba(255,255,255,0.85); box-shadow: 0 0 0 1px var(--line-2), var(--shadow); text-align: left; }
.facts > div { padding: 18px 22px; display: flex; gap: 12px; align-items: center; }
.facts > div + div { border-left: 1px solid var(--line); }
.facts b { display: block; font-size: 15px; font-weight: 600; }
.facts span { font-size: 13.5px; color: var(--dim); }

/* Sticky section pills (solutions) */
.subnav { position: sticky; top: 78px; z-index: 40; display: flex; justify-content: center; padding: 0 var(--pad); pointer-events: none; margin-top: -24px; }
.subnav__in { pointer-events: auto; display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: 999px; background: rgba(255,255,255,0.86); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 0 0 1px var(--line-2), 0 16px 36px -18px rgba(16,24,40,0.28); }
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a { flex: none; height: 38px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-size: 14px; color: var(--muted); white-space: nowrap; transition: background-color 200ms ease, color 200ms ease; }
.subnav a:hover { color: var(--text); background: rgba(16,24,40,0.05); }
.subnav a.is-on { background: var(--blue-soft); color: var(--blue-ink); }
.subnav a .ic { width: 16px; height: 16px; }

/* Solutions: family sections */
.fam { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--pad); scroll-margin-top: 140px; }
.fam + .fam { border-top: 1px solid var(--line); }
.fam__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: end; margin-bottom: var(--head-gap); }
.fam__head .lede { margin-top: 0; }
.fam__head .tag { margin-bottom: 16px; }
.prod__since { margin-top: 18px; font-size: 13px; color: var(--dim); display: flex; align-items: center; gap: 6px; }

/* Product page */
.over { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.over .h2 { max-width: 16ch; }
.caps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cap { padding: 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.cap h3 { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.cap h3 .tile-ic { width: 32px; height: 32px; border-radius: 9px; }
.cap h3 .ic { width: 17px; height: 17px; }
.cap p { margin-top: 8px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.feat-card { padding: 26px; }
.feat-card .tile-ic { margin-bottom: 4px; }
.cols2 { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols2 .card { padding: 28px; }
.cols2 h3 { margin-top: 0; display: flex; align-items: center; gap: 12px; font-size: 20px; }
.cols2 .ticks li b { color: var(--text); font-weight: 600; }
.std { align-items: center; text-align: center; gap: 14px; }
.std img { height: 72px; width: auto; max-width: 140px; object-fit: contain; }
.std h3 { margin-top: 0; font-size: 15.5px; }
.netw { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }

/* Countries on product pages */
.flags { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.flag { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); font-weight: 500; font-size: 15px; }
.flag .ctry__code { width: 32px; height: 32px; border-radius: 50%; font-size: 11.5px; }
.flag small { font-size: 12px; color: var(--orange-ink); font-weight: 500; }
.flag img { height: 22px; width: auto; }

/* About */
.vm .card { padding: 32px; }
.vm .card h3 { font-size: 24px; letter-spacing: -0.03em; margin-top: 18px; }
.vm .card p { font-size: 15.5px; }
.vm .card p + p { margin-top: 12px; }
.tl { max-width: 900px; margin: 0 auto; padding: 0 var(--pad); position: relative; }
.tl::before { content: ""; position: absolute; left: calc(var(--pad) + 99px); top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--blue), var(--orange)); opacity: 0.35; border-radius: 2px; }
.tl__i { display: grid; grid-template-columns: 88px 24px 1fr; gap: 0 12px; align-items: start; padding: 14px 0; }
.tl__y { font-weight: 600; font-size: 15px; text-align: right; padding-top: 18px; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.tl__dot { width: 14px; height: 14px; margin: 21px auto 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--blue), 0 0 0 7px rgba(40,120,184,0.12); position: relative; z-index: 1; }
.tl__i:nth-child(even) .tl__dot { box-shadow: 0 0 0 3px var(--orange), 0 0 0 7px rgba(245,167,66,0.15); }
.tl__c { padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.tl__c b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.tl__c p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.lead { display: grid; grid-template-columns: 240px 1fr; gap: 0; padding: 0; }
.lead__pic { overflow: hidden; background: var(--card-2); }
.lead__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 900ms var(--ease-expo); }
.lead:hover .lead__pic img { transform: scale(1.04); }
.lead__body { padding: 26px; display: flex; flex-direction: column; }
.lead__body b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.lead__role { margin-top: 2px; color: var(--blue-ink); font-size: 14.5px; font-weight: 500; }
.lead__body p { margin-top: 12px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.lead__in { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 500; }
.lead__in:hover { color: var(--blue-ink); }
.person { border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.person__pic { aspect-ratio: 4 / 4.2; overflow: hidden; background: var(--card-2); }
.person__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 900ms var(--ease-expo); }
.person:hover img { transform: scale(1.04); }
.person figcaption { padding: 16px 18px 20px; }
.person b { display: block; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.person span { display: block; color: var(--blue-ink); font-size: 14px; font-weight: 500; margin-top: 2px; }
.person p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.values .card { padding: 26px; }

/* Awards page */
.award { flex-direction: row; gap: 22px; align-items: flex-start; padding: 24px; }
.award__img { flex: none; width: 120px; height: 120px; border-radius: 14px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; padding: 12px; }
.award__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.award__y { font-size: 13px; font-weight: 600; color: var(--orange-ink); letter-spacing: 0.02em; }
.award h3 { margin-top: 6px; font-size: 17px; }
.award p { margin-top: 8px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.award__note { display: inline-flex; margin-top: 10px; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-ink); font-weight: 500; }

/* 25 years */
.gallery { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery figure { border-radius: 16px; overflow: hidden; aspect-ratio: 5 / 4; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-expo); }
.gallery figure:hover img { transform: scale(1.05); }
.guests { margin-top: 18px; display: grid; gap: 10px; }
.guest { padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.guest b { display: block; font-weight: 600; font-size: 15px; }
.guest span { color: var(--muted); font-size: 14px; }
.guest--chief { box-shadow: inset 0 0 0 1.5px rgba(245,167,66,0.6); background: linear-gradient(180deg, var(--orange-soft), #fff); }
.guest--chief em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--orange-ink); text-transform: uppercase; letter-spacing: 0.05em; }
.wide-shot { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.wide-shot figure { border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2), var(--shadow-lg); }
.wide-shot img { width: 100%; }

/* Contact */
.quick .card { padding: 22px; }
.quick h3 { margin-top: 16px; font-size: 16px; }
.quick .card p { font-size: 14.5px; margin-top: 4px; }
.quick .card a.big, .quick .card .big { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--blue-ink); word-break: break-word; }
.office { padding: 0; }
.office__map { aspect-ratio: 16 / 10; background: var(--card-2); border-bottom: 1px solid var(--line); }
.office__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.85); }
.office__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.office__body .tag { align-self: flex-start; }
.office__body h3 { margin: 4px 0 0; font-size: 19px; }
.office__body p { color: var(--muted); font-size: 14.5px; line-height: 1.55; display: flex; gap: 10px; }
.office__body p .ic { margin-top: 2px; color: var(--dim); }
.office__body a { color: var(--text); }
.office__body .tlink { margin-top: auto; padding-top: 6px; color: var(--blue-ink); }
.cform-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.cform-side .h2 { max-width: 14ch; }
.cform-side .ticks { margin-top: 28px; }
.cform { padding: 30px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), var(--shadow-lg); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--text); }
.field label i { font-style: normal; color: var(--dim); font-weight: 400; }
.field input, .field textarea, .field select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 0; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; transition: box-shadow 160ms ease, background-color 160ms ease; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235b6779' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); }
.field ::placeholder { color: #8a95a6; }
.cform__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cform__foot small { color: var(--dim); font-size: 13px; max-width: 40ch; }
.cform__done { grid-column: 1 / -1; padding: 14px 16px; border-radius: 12px; background: var(--green-soft); color: var(--green-ink); font-size: 14.5px; }

/* Legal */
.legal { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); }
.legal h2 { margin-top: 40px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.legal p, .legal li { color: var(--muted); font-size: 16px; line-height: 1.7; }
.legal p { margin-top: 12px; }
.legal ul { margin-top: 12px; display: grid; gap: 6px; }
.legal li { padding-left: 18px; position: relative; }
.legal li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.legal .eff { color: var(--dim); font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: repeat(5, 1fr); }
  .foot-grid .ctry { padding: 14px; }
  .lead { grid-template-columns: 180px 1fr; }
}
@media (max-width: 980px) {
  .flow__body { grid-template-columns: 1fr; gap: 14px; }
  .wires { display: none; }
  .flow__col--in, .flow__col--out { display: grid; grid-template-columns: 1fr 1fr; }
  .flow__col--in .flow__k, .flow__col--out .flow__k { grid-column: 1 / -1; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand, .foot__addr { grid-column: 1 / -1; }
  .split, .over, .fam__head, .cform-wrap { grid-template-columns: 1fr; }
  .fam__head { align-items: start; }
  .split .shot { order: 2; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .head--row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .lead { grid-template-columns: 1fr; }
  .lead__pic { aspect-ratio: 4 / 3; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cols2 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .hero, .page-hero { padding-top: 120px; }
  .stats { gap: 10px; }
  .stat { padding: 20px 16px; }
  .caps { grid-template-columns: 1fr; }
  .cform { grid-template-columns: 1fr; padding: 22px; }
  .award { flex-direction: column; }
  .flow__col--in, .flow__col--out { grid-template-columns: 1fr; }
  .hub__chips { grid-template-columns: 1fr 1fr; }
  .flow__body { padding: 18px; }
  .flow__bar > span:not(.flow__dots):not(.flow__live) { display: none; }
  .flow__col--in .node:nth-of-type(n+4), .flow__col--out .node:nth-of-type(n+4) { display: none; }
  .hub__chips span:nth-child(n+5) { display: none; }
  .tl::before { left: calc(var(--pad) + 7px); }
  .tl__i { grid-template-columns: 16px 1fr; gap: 0 14px; }
  .tl__y { grid-column: 2; text-align: left; padding-top: 0; }
  .tl__dot { grid-row: 1 / span 2; grid-column: 1; margin-top: 4px; }
  .tl__c { grid-column: 2; margin-top: 6px; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__last { flex-direction: column; }
  .marquee img { height: 36px; }
  .awards-row img { height: 52px; width: 120px; }
  .ctry { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .marquee__track { animation: none; }
}

/* Shared platform features: one panel, two balanced columns */
.ticks.plat { display: block; columns: 2; column-gap: 48px; margin-top: 0; }
.ticks.plat li { break-inside: avoid; margin-bottom: 14px; }
@media (max-width: 760px) { .ticks.plat { columns: 1; } }
.ticks li b { color: var(--text); font-weight: 600; }

/* =====================================================================
   Product scenes: illustrations drawn in code (scenes.py), sitting directly on the page
   ===================================================================== */
.illus { position: relative; margin: 0; }
.illus.has-scene { container-type: inline-size; width: 100%; aspect-ratio: 6 / 5; }
.illus--sm.has-scene { max-width: 440px; justify-self: end; }
.sc { position: absolute; inset: 0; font-size: 2.6cqw; line-height: 1.3; color: var(--text); }
.sc-win, .sc-phone, .sc-hub, .sc-cheque, .sc-doc { position: absolute; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 4cqw 9cqw -4cqw rgba(27,95,153,0.35); }
.sc-win { border-radius: 3cqw; overflow: hidden; animation: floaty 8s ease-in-out infinite; }
.sc-bar { display: flex; align-items: center; gap: 1.1cqw; padding: 1.8cqw 2.4cqw; border-bottom: 1px solid var(--line); font: 500 2.3cqw var(--mono); color: var(--muted); }
.sc-bar i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #e1e7ef; }
.sc-bar span { margin-left: 1cqw; }
.sc-bd { display: flex; flex-direction: column; gap: 2cqw; padding: 2.8cqw; }
.sk { display: block; height: 1.7cqw; border-radius: 1cqw; background: #e8eef5; flex: none; }
.sk.b { background: #c9dcef; } .sk.o { background: #fbdfb8; }
.sc-row { display: flex; align-items: center; gap: 1.8cqw; }
.sc-row .sk { flex: 1 1 auto; }
.sc-row--sb { justify-content: space-between; }
.sc-ic { width: 5cqw; height: 5cqw; flex: none; border-radius: 1.4cqw; display: grid; place-items: center; color: var(--blue-ink); background: var(--blue-soft); }
.sc-ic .ic { width: 58%; height: 58%; }
.sc-arrow { color: var(--dim); display: grid; } .sc-arrow .ic { width: 3cqw; height: 3cqw; }
.sc-tag { font-size: 2.1cqw; font-weight: 500; padding: 0.5cqw 1.6cqw; border-radius: 999px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); white-space: nowrap; }
.sc-tag.ok { background: var(--green-soft); color: var(--green-ink); box-shadow: none; }
.sc-prog { display: block; height: 1.2cqw; border-radius: 1cqw; background: #e8eef5; overflow: hidden; }
.sc-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); transform-origin: left; animation: meter 3.4s var(--ease) infinite; }
.sc-prog.ok i { background: linear-gradient(90deg, #39b47a, #1f9d62); }
.sc-chip { position: absolute; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.3cqw 2.4cqw 1.3cqw 1.3cqw; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 3cqw 6cqw -3cqw rgba(16,24,40,0.35); font-size: 2.5cqw; font-weight: 500; white-space: nowrap; z-index: 2; animation: floaty 6s ease-in-out infinite; }
.sc-chip .d { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--blue-ink); }
.sc-chip .d.ok { background: #1f9d62; } .sc-chip .d.or { background: #e9a94e; }
.sc-chip .d .ic { width: 56%; height: 56%; }
.sc-node { position: absolute; width: 11cqw; height: 11cqw; border-radius: 3.2cqw; display: grid; place-items: center; background: #fff; color: var(--blue-ink); box-shadow: 0 0 0 1px var(--line-2), 0 3cqw 6cqw -3cqw rgba(16,24,40,0.35); z-index: 1; animation: floaty 7s ease-in-out infinite; }
.sc-node .ic { width: 44%; height: 44%; }
.sc-node.dk { background: linear-gradient(160deg, #3a82c2, #1f5f99); color: #fff; box-shadow: 0 3cqw 6cqw -3cqw rgba(31,95,153,0.7); }
.sc-node.gd { background: linear-gradient(160deg, #f6c77c, #e9a94e); color: #2a1a04; box-shadow: 0 3cqw 6cqw -3cqw rgba(233,169,78,0.8); }
.sc-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-wires path { fill: none; stroke: rgba(40,120,184,0.4); stroke-width: 0.35; stroke-dasharray: 1 1.4; vector-effect: none; animation: flowdash 1.6s linear infinite; }
.sc-wires circle { fill: var(--orange); }
/* Payment hub */
.sc-hub { border-radius: 3.4cqw; padding: 3cqw; display: flex; flex-direction: column; align-items: center; gap: 2cqw; box-shadow: 0 0 0 1.5px rgba(40,120,184,0.45), 0 5cqw 10cqw -4cqw rgba(27,95,153,0.5); z-index: 1; }
.sc-hub .sk, .sc-hub .sc-prog { align-self: stretch; }
.sc-hub__t { font-size: 2.8cqw; font-weight: 600; }
.sc-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8cqw; width: 9cqw; }
.sc-mark i { aspect-ratio: 1; border-radius: 1cqw; background: linear-gradient(160deg, #3a82c2, #1f5f99); }
.sc-mark i:nth-child(2), .sc-mark i:nth-child(3) { background: linear-gradient(160deg, #f6c77c, #e9a94e); }
/* Phones */
.sc-phone { border-radius: 5cqw; padding: 6cqw 3.4cqw 4cqw; display: flex; flex-direction: column; gap: 2.2cqw; align-items: center; box-shadow: 0 0 0 1.5px #d6dde7, 0 0 0 1cqw #fff, 0 0 0 calc(1cqw + 1.5px) #d6dde7, 0 6cqw 12cqw -4cqw rgba(27,95,153,0.45); animation: floaty 8s ease-in-out infinite; }
.sc-phone .sk { align-self: stretch; }
.sc-notch { position: absolute; top: 1.8cqw; left: 50%; translate: -50% 0; width: 9cqw; height: 1.6cqw; border-radius: 1cqw; background: #e1e7ef; }
.sc-ok { width: 11cqw; height: 11cqw; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #1f9d62; box-shadow: 0 0 0 2cqw rgba(31,157,98,0.14); animation: okpulse 2.4s ease-in-out infinite; }
.sc-ok .ic { width: 50%; height: 50%; }
@keyframes okpulse { 50% { box-shadow: 0 0 0 3.4cqw rgba(31,157,98,0.06); } }
.sc-big { font-size: 3.1cqw; font-weight: 600; letter-spacing: -0.01em; }
.sc-split { display: flex; gap: 1.6cqw; align-self: stretch; }
.sc-split .sk { flex: 1; height: 7cqw; border-radius: 1.6cqw; }
.sc-lbl { font-size: 2.4cqw; color: var(--muted); }
.sc-phone .sc-row { align-self: stretch; }
.sc-tog { width: 6.4cqw; height: 3.6cqw; border-radius: 999px; background: #dfe5ee; position: relative; flex: none; }
.sc-tog i { position: absolute; top: 0.5cqw; left: 0.5cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,0.2); }
.sc-tog.on { background: var(--blue); } .sc-tog.on i { left: auto; right: 0.5cqw; }
.sc-btn { align-self: stretch; text-align: center; padding: 1.8cqw; border-radius: 999px; background: var(--text); color: #fff; font-size: 2.5cqw; font-weight: 500; }
/* Cheque, documents */
.sc-cheque { aspect-ratio: 1.9; border-radius: 2.4cqw; padding: 3cqw; display: flex; flex-direction: column; gap: 2cqw; overflow: hidden; background: linear-gradient(135deg, #fff, #f3f8fd); animation: floaty 8s ease-in-out infinite; }
.sc-amt { width: 22cqw; margin-left: auto; padding: 1.2cqw; border-radius: 1cqw; box-shadow: inset 0 0 0 1px var(--line-2); }
.sc-sign { width: 30cqw; height: 8cqw; align-self: flex-end; overflow: visible; }
.sc-sign path { fill: none; stroke: var(--blue-ink); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 120; animation: sign 4s ease-in-out infinite; }
@keyframes sign { 0% { stroke-dashoffset: 120; } 50%, 100% { stroke-dashoffset: 0; } }
.sc-micr { font: 500 2.4cqw var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.sc-scan { position: absolute; left: 0; right: 0; top: 0; height: 2cqw; background: linear-gradient(180deg, transparent, rgba(245,167,66,0.55), transparent); animation: scan 3s ease-in-out infinite; pointer-events: none; }
@keyframes scan { 0%, 100% { top: 0; } 50% { top: calc(100% - 2cqw); } }
.sc-doc { border-radius: 2.4cqw; padding: 3cqw; display: flex; flex-direction: column; gap: 2cqw; overflow: hidden; aspect-ratio: 0.78; animation: floaty 7s ease-in-out -2s infinite; z-index: 1; }
.sc-search { display: flex; align-items: center; gap: 1.6cqw; padding: 1.6cqw 2cqw; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--dim); }
.sc-search .ic { width: 3cqw; height: 3cqw; }
.sc-search .sk { flex: 1; }
.sc-folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.sc-folder { aspect-ratio: 1.3; border-radius: 2cqw; display: grid; place-items: center; color: var(--dim); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.sc-folder .ic { width: 40%; height: 40%; }
.sc-folder.b { color: var(--blue-ink); background: var(--blue-soft); } .sc-folder.o { color: var(--orange-ink); background: var(--orange-soft); }
/* Lists, calendar, upload, code */
.sc-dot { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; flex: none; background: #dfe5ee; }
.sc-dot.ok { background: #1f9d62; box-shadow: 0 0 0 0.8cqw rgba(31,157,98,0.15); }
.sc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.2cqw; }
.sc-cal i { aspect-ratio: 1; border-radius: 1.2cqw; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.sc-cal i.on { background: var(--blue); box-shadow: none; animation: okpulse 3s ease-in-out infinite; }
.sc-cal i.hol { background: repeating-linear-gradient(135deg, #fbdfb8 0 0.8cqw, #fff6ea 0.8cqw 1.6cqw); box-shadow: none; }
.sc-drop { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; padding: 3.4cqw; border-radius: 2cqw; border: 1.5px dashed rgba(40,120,184,0.45); background: var(--blue-soft); color: var(--blue-ink); }
.sc-drop .ic { width: 6cqw; height: 6cqw; }
.sc-code { display: flex; align-items: center; gap: 1.8cqw; font: 500 2.3cqw var(--mono); color: var(--blue-ink); }
.sc-code b { font-weight: 500; flex: none; }
.sc-code .sk { flex: 1; }
.sc-globe-wrap { position: absolute; aspect-ratio: 1; animation: floaty 9s ease-in-out infinite; }
.sc-globe { width: 100%; height: 100%; overflow: visible; }
.sc-globe circle:first-child { fill: #fff; stroke: #cfe0f1; stroke-width: 1; filter: drop-shadow(0 6px 14px rgba(27,95,153,0.25)); }
.sc-globe ellipse, .sc-globe > path:not(.arc) { fill: none; stroke: #dbe7f3; stroke-width: 0.8; }
.sc-globe .arc { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 3 3; animation: flowdash 1.4s linear infinite; }
.sc-globe .arc.o { stroke: var(--orange); }
.sc-globe .pin { fill: var(--blue-ink); } .sc-globe .pin.o { fill: #e9a94e; }

/* Product hero: copy left, illustration right */
.page-hero--split { text-align: left; align-items: stretch; }
.phs { width: 100%; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.phs__copy { display: flex; flex-direction: column; align-items: flex-start; }
.page-hero--split .page-hero__h { max-width: 15ch; }
.page-hero--split .hero__p { text-wrap: pretty; }
.page-hero--split .crumb, .page-hero--split .hero__cta { justify-content: flex-start; }
.page-hero--split .facts { width: 100%; max-width: var(--max); margin: 56px auto 0; }
@media (max-width: 980px) {
  .phs { grid-template-columns: 1fr; }
  .page-hero--split .illus { max-width: 520px; margin-inline: auto; }
}

/* Solutions: family head with illustration */
.fam__head { grid-template-columns: 1.2fr 0.8fr; align-items: center; }
.fam__head .lede { margin-top: 18px; }
@media (max-width: 980px) { .fam__head .illus--sm { max-width: 420px; } }

/* =====================================================================
   Veracious product map: clickable tiles around the Veracious mark
   ===================================================================== */
.over--map { align-items: end; }
.vmap__lead { display: flex; gap: 8px; align-items: center; margin-top: 18px; font-size: 14.5px; color: var(--blue-ink) !important; font-weight: 500; }
.vmap-wrap { margin-top: clamp(40px, 5vw, 56px); }
.vmap {
  position: relative; isolation: isolate; max-width: 1040px; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.3vw, 14px);
}
.vmap__wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.vmap__wires path { fill: none; stroke: rgba(40,120,184,0.22); stroke-width: 1.5; stroke-dasharray: 3 6; animation: flowdash 1.6s linear infinite; transition: stroke 250ms ease, stroke-width 250ms ease; }
.vmap__wires path.on { stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 6 6; }
.vt {
  grid-column: var(--c); grid-row: var(--r); aspect-ratio: 1; position: relative; z-index: 1;
  display: flex; flex-direction: column; padding: clamp(10px, 1.3vw, 16px); border-radius: clamp(12px, 1.6vw, 18px);
  font-size: clamp(12.5px, 1.25vw, 14.5px); font-weight: 500; line-height: 1.25; letter-spacing: -0.005em;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform 350ms var(--ease), box-shadow 350ms ease, opacity 300ms ease, scale 600ms var(--ease-expo) calc(var(--i) * 45ms), filter 300ms ease;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 8px 18px -12px rgba(16,24,40,0.3);
}
.vt__ic { width: clamp(28px, 2.8vw, 36px); height: clamp(28px, 2.8vw, 36px); border-radius: 10px; display: grid; place-items: center; margin-bottom: auto; background: rgba(255,255,255,0.55); }
.vt__ic .ic { width: 55%; height: 55%; }
.vt__t { display: block; padding-right: 4px; }
.vt__go { position: absolute; top: clamp(10px, 1.3vw, 16px); right: clamp(10px, 1.3vw, 16px); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.85); color: var(--text); opacity: 0; transform: translate(-4px, 4px); transition: opacity 250ms ease, transform 300ms var(--ease); }
.vt__soon { position: absolute; top: clamp(12px, 1.4vw, 18px); right: clamp(10px, 1.3vw, 16px); font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: #fff; color: var(--text); }
.vt:hover .vt__soon, .vt:focus-visible .vt__soon { opacity: 0; }
.vt--dark { background-color: #1f5f99; background-image: linear-gradient(160deg, #2c71b0, #1b5690); color: #fff; }
.vt--dark .vt__ic { background: rgba(255,255,255,0.16); }
.vt--gold { background-color: #eeb563; background-image: linear-gradient(160deg, #f6c77c, #e9a94e); color: #2a1a04; }
.vt--cream { background-color: #fdf0df; background-image: linear-gradient(160deg, #fff6ea, #fbe9d2); color: #9a4f08; box-shadow: inset 0 0 0 1px rgba(245,167,66,0.35), 0 8px 18px -12px rgba(16,24,40,0.25); }
.vt--light { background-color: #e8f0f9; background-image: linear-gradient(160deg, #f1f7fd, #dfeaf6); color: var(--blue-ink); box-shadow: inset 0 0 0 1px rgba(40,120,184,0.22), 0 8px 18px -12px rgba(16,24,40,0.25); }
.vt:hover, .vt:focus-visible { --ty: -5px; z-index: 2; box-shadow: 0 2px 4px rgba(16,24,40,0.06), 0 22px 40px -18px rgba(27,95,153,0.55); }
.vt:hover .vt__go, .vt:focus-visible .vt__go { opacity: 1; transform: none; }
.vmap.is-hover .vt:not(:hover):not(:focus-visible) { opacity: 0.55; filter: saturate(0.7); }
.vmap__core { grid-column: 3 / 5; grid-row: 2 / 4; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; border-radius: 22px; text-align: center; }
.vmap__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vmap__ring rect { fill: none; stroke: rgba(16,24,40,0.2); stroke-width: 1.5; stroke-dasharray: 7 7; vector-effect: non-scaling-stroke; animation: flowdash 2.4s linear infinite; }
.vmark { width: min(62%, 190px); height: auto; animation: floaty 6s ease-in-out infinite; }
.vmap__hint { display: flex; flex-direction: column; gap: 2px; min-height: 40px; font-size: 13px; color: var(--dim); }
.vmap__hint b { color: var(--text); font-weight: 600; font-size: 14px; }
.vmap.is-hover .vmap__hint b { color: var(--blue-ink); }
/* Entrance: tiles pop in one after another around the mark */
.js .vmap.rv:not(.in) .vt { opacity: 0; scale: 0.82; }
.js .vmap.rv:not(.in) .vmap__core { opacity: 0; scale: 0.9; }
.vmap__core { transition: opacity 600ms var(--ease), scale 800ms var(--ease-expo); }
@media (max-width: 820px) {
  .vmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vmap__wires { display: none; }
  .vt { grid-column: auto; grid-row: auto; aspect-ratio: auto; min-height: 104px; }
  .vmap__core { grid-column: 1 / -1; grid-row: auto; order: -1; padding: 22px; }
  .vmark { width: 120px; }
}

/* =====================================================================
   Solutions menu: featured Payment Hub, illustrated product links, Torus card
   ===================================================================== */
.mega { width: min(1120px, calc(100vw - 40px)); grid-template-columns: 236px minmax(0, 1fr) 236px; gap: 12px; padding: 12px; }
.mega__feat, .mega__torus { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; transition: box-shadow 200ms ease, transform 200ms var(--ease); }
.mega__feat { background: linear-gradient(170deg, var(--blue-soft), #fff 60%, var(--orange-soft)); box-shadow: inset 0 0 0 1px rgba(40,120,184,0.18); }
.mega__torus { background: linear-gradient(170deg, var(--violet-soft), #fff 70%); box-shadow: inset 0 0 0 1px rgba(90,70,194,0.16); }
.mega__feat:hover, .mega__torus:hover, .mega__feat:focus-visible, .mega__torus:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(40,120,184,0.45), 0 14px 30px -18px rgba(27,95,153,0.5); }
.mega__feat b, .mega__torus b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin-top: 6px; }
.mega__feat > span:not(.mosaic), .mega__torus > span:not(.mega__shot) { font-size: 13px; line-height: 1.45; color: var(--muted); }
.mega__feat .mega__go { margin-top: auto; padding-top: 8px; color: var(--blue-ink); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 4px; }
.mosaic i { aspect-ratio: 1; border-radius: 6px; transition: transform 300ms var(--ease); }
.mosaic i:nth-child(odd) { transition-delay: 40ms; }
.mega__feat:hover .mosaic i { transform: translateY(-2px); }
.mosaic .m-dark { background: linear-gradient(160deg, #3a82c2, #1f5f99); }
.mosaic .m-gold { background: linear-gradient(160deg, #f6c77c, #e9a94e); }
.mosaic .m-cream { background: #fbe9d2; box-shadow: inset 0 0 0 1px rgba(245,167,66,0.35); }
.mosaic .m-light { background: #dfeaf6; box-shadow: inset 0 0 0 1px rgba(40,120,184,0.22); }
.mosaic__core { grid-column: 2 / 4; grid-row: 1 / 3; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; }
.vmark--sm { width: 70%; animation: none; }
.mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; align-content: start; }
.mega__grp { padding: 8px 6px; }
.mega__t { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px 8px; }
.mega__grp a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 13.5px; line-height: 1.3; color: var(--text); }
.mega__grp a .mi { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--c); background: var(--cs); transition: transform 200ms var(--ease); }
.mega__grp a .mi .ic { width: 15px; height: 15px; }
.mega__grp a:hover .mi { transform: scale(1.08); }
.mega__tlogo { width: 92px; height: auto; }
.mega__shot { display: block; margin: 6px 0 2px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 10px 20px -14px rgba(16,24,40,0.4); background: #fff; }
.mega__shot img { width: 100%; height: 96px; object-fit: cover; object-position: 50% 0; }
.mega__all .mega__demo { margin-left: auto; color: var(--text); font-weight: 500; }
.mega__all > a:not(.mega__demo) { order: 3; }
@media (max-width: 1180px) { .mega { grid-template-columns: 210px minmax(0, 1fr); } .mega__torus { display: none; } }

/* =====================================================================
   Product logos (assets/glyphs.svg) and country flags
   ===================================================================== */
.glyph { width: 24px; height: 24px; flex: none; display: inline-block; }
.logo-tile { width: 50px; height: 50px; flex: none; border-radius: 15px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 18px -10px rgba(27,95,153,0.35); transition: transform 300ms var(--ease); }
.logo-tile .glyph { width: 30px; height: 30px; }
a.card:hover .logo-tile { transform: rotate(-4deg) scale(1.05); }
.phs__logo { width: 64px; height: 64px; border-radius: 19px; display: grid; place-items: center; margin-bottom: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 12px 28px -14px rgba(27,95,153,0.45); }
.phs__logo .glyph { width: 38px; height: 38px; }

.flag-ic { width: 18px; height: 18px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(16,24,40,0.12); }
.flag-ic--sm { width: 16px; height: 16px; }
.flag img.flag-ic { width: 30px; height: 30px; }
.chips--flags span { display: inline-flex; align-items: center; gap: 6px; padding-left: 5px; }
.ctry__flag { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(16,24,40,0.12), 0 4px 10px -6px rgba(16,24,40,0.4); }

/* Home suite cards: product logos instead of pills */
.suite .fam__vis { align-items: center; min-height: 140px; }
.plogos { display: flex; gap: 8px; width: 100%; }
.plogo { flex: 0 1 68px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: floaty 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s); }
.plogo__t { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 22px -12px rgba(27,95,153,0.45); transition: transform 300ms var(--ease); }
.plogo__t .glyph { width: 32px; height: 32px; }
.plogo__n { font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--muted); }
.suite .card:hover .plogo__t { transform: translateY(-3px); }
.suite .fam__top { margin-top: 20px; }

/* Solutions menu: product logos, two columns per family, families in pairs */
.mega__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.mega__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; }
.mega__grp a { padding: 7px 8px; border-radius: 10px; gap: 10px; }
.mega__grp a .glyph { width: 26px; height: 26px; transition: transform 200ms var(--ease); }
.mega__grp a:hover .glyph { transform: scale(1.1) rotate(-4deg); }
.mega__flags { display: inline-flex; align-items: center; }
.mega__flags .flag-ic { margin-right: -4px; box-shadow: 0 0 0 2px var(--card-2); }
.mega__flags span { margin-left: 14px; }
.mega { grid-template-columns: 228px minmax(0, 1fr); width: min(1080px, calc(100vw - 40px)); }
.mega__side { display: flex; flex-direction: column; gap: 10px; }
.mega__feat { flex: 1; }
.mega__torus { padding: 14px 16px; gap: 8px; }
.mega__torus .mega__tlogo { width: 88px; }
.mega__cols { padding: 4px 0; }
@media (max-width: 1180px) { .mega { grid-template-columns: 210px minmax(0, 1fr); } .mega__torus { display: flex; } }
.grp__logo img[src*="torus"] { width: 150px; height: auto; }

/* Home suite cards: heading first, then the product logos, no divider */
.suite .card { background: linear-gradient(180deg, color-mix(in srgb, var(--cs) 70%, #fff), #fff 58%); }
.suite .fam__top { order: -1; margin-top: 0; }
.suite .fam__vis { order: 0; margin: 20px 0 4px; padding: 0; min-height: 0; background: none; border-bottom: 0; }
.suite .card__p { margin-top: 16px; }

/* =====================================================================
   Awards: stats, filter pills, year-by-year timeline
   ===================================================================== */
.astats { margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(820px, 100%); border-radius: 18px; background: rgba(255,255,255,0.85); box-shadow: 0 0 0 1px var(--line-2), var(--shadow); }
.astats > div { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.astats > div + div { border-left: 1px solid var(--line); }
.astats b { font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.astats span { font-size: 13.5px; color: var(--dim); }
.awards .awards__bar { max-width: var(--max); margin: 0 auto var(--head-gap); padding: 0 var(--pad); display: flex; justify-content: center; }
.fpills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fpill { height: 40px; padding: 0 8px 0 16px; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.fpill span { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; background: var(--card-2); color: var(--dim); }
.fpill:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(16,24,40,0.24); }
.fpill.is-on { background: var(--text); color: #fff; box-shadow: none; }
.fpill.is-on span { background: rgba(255,255,255,0.18); color: #fff; }
.yr { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); }
.yr + .yr { margin-top: 56px; }
.yr[hidden] { display: none; }
.yr__n { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.yr__n b { font-size: clamp(40px, 5vw, 64px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.95; background: linear-gradient(180deg, var(--text), #5b6f8c); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.yr__n span { font-size: 14px; color: var(--dim); }
.yr__list { display: flex; flex-direction: column; gap: 14px; }
.aw { display: grid; grid-template-columns: 220px minmax(0, 1fr); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); transition: transform 300ms var(--ease), box-shadow 300ms ease, opacity 300ms ease; }
.aw:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(40,120,184,0.28), 0 18px 40px -22px rgba(27,95,153,0.35); }
.aw[hidden] { display: none; }
.aw__logo { display: grid; place-items: center; padding: 24px; min-height: 170px; background: radial-gradient(circle at 30% 20%, var(--cs), transparent 70%), var(--card-2); border-right: 1px solid var(--line); }
.aw__logo img { max-width: 160px; max-height: 110px; width: auto; height: auto; object-fit: contain; transition: transform 500ms var(--ease-expo); }
.aw:hover .aw__logo img { transform: scale(1.05); }
.aw__body { padding: 24px 26px; display: flex; flex-direction: column; }
.aw__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.aw__iss { font-size: 13px; font-weight: 600; color: var(--c); }
.aw__win, .aw__note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; }
.aw__win { background: var(--orange-soft); color: var(--orange-ink); }
.aw__note { background: var(--card-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.aw h3 { margin-top: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.aw p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.aw__prod { align-self: flex-start; margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13.5px; font-weight: 500; color: var(--text); transition: box-shadow 200ms ease; }
.aw__prod:hover { box-shadow: inset 0 0 0 1px rgba(40,120,184,0.45); }
.aw__prod .glyph { width: 22px; height: 22px; }
.aw__tlogo { width: 64px; height: auto; }
.aw__prod .ic { color: var(--blue-ink); }
.awards__empty { text-align: center; color: var(--dim); }
@media (max-width: 860px) {
  .yr { grid-template-columns: 1fr; gap: 16px; }
  .yr__n { position: static; flex-direction: row; align-items: baseline; gap: 14px; }
  .aw { grid-template-columns: 1fr; }
  .aw__logo { min-height: 140px; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .astats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .astats > div:nth-child(3) { border-left: 0; }
  .astats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .aw__body { padding: 20px; }
}

/* Grids of 7, 10, 13...: the first card spans the whole first row, laid out sideways */
.g--s3 > :first-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start; }
.g--s3 > :first-child .tile-ic { grid-row: span 2; }
.g--s3 > :first-child h3 { margin-top: 0; }
@media (max-width: 860px) { .g--c3.g--s3 > :first-child { grid-column: 1 / -1; } }

/* Veracious logo: rounded like the tiles */
.vmark { width: clamp(64px, 9vw, 104px); height: auto; aspect-ratio: 1; border-radius: clamp(14px, 1.8vw, 22px); box-shadow: 0 2px 4px rgba(16,24,40,0.06), 0 14px 30px -14px rgba(47,83,213,0.6); animation: floaty 6s ease-in-out infinite; }
.vmap__name { font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.vmark--sm { width: 58%; border-radius: 12px; animation: none; box-shadow: 0 8px 18px -10px rgba(47,83,213,0.6); }
@media (max-width: 820px) { .vmark { width: 72px; } }
.mega__logo { display: block; margin-bottom: 6px; }
.mega__logo .vmark--sm { width: 64px; border-radius: 16px; }

/* Home hero headline: smaller, wider measure */
.hero__h { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -0.04em; max-width: 24ch; }

/* =====================================================================
   Payment Hub pillars: tabs with one roomy panel
   ===================================================================== */
.pil__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pil__tab { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); text-align: left; cursor: pointer; transition: box-shadow 250ms ease, transform 250ms var(--ease), background-color 250ms ease; }
.pil__tab:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(16,24,40,0.24); }
.pil__tab em { font-style: normal; flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 600; font-size: 15px; color: var(--c); background: var(--cs); transition: background-color 250ms ease, color 250ms ease; }
.pil__tab b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pil__tab small { display: block; margin-top: 2px; font-size: 13px; color: var(--dim); }
.pil__tab.is-on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--c), 0 14px 30px -18px rgba(27,95,153,0.45); }
.pil__tab.is-on em { background: var(--c); color: #fff; }
.pil__panels { display: grid; }
.pil__panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 300ms ease, transform 400ms var(--ease), visibility 0s 300ms; }
.pil__panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms ease, transform 400ms var(--ease); }
.pil__ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 12px 24px -12px var(--c); }
.pil__ic .ic { width: 24px; height: 24px; }
.pil__k { display: block; margin-top: 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c); }
.pil__intro h3 { margin-top: 6px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.pil__intro p { margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.pil__feats { display: flex; flex-direction: column; }
.pil__feats li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; }
.pil__feats li + li { border-top: 1px solid var(--line); }
.pil__feats li:first-child { padding-top: 0; }
.pil__feats li:last-child { padding-bottom: 0; }
.pil__feats .tile-ic { width: 40px; height: 40px; }
.pil__feats b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.pil__feats p { margin-top: 3px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 860px) {
  .pil__panel { grid-template-columns: 1fr; }
  .pil__tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .pil__tabs::-webkit-scrollbar { display: none; }
}
.foot__last { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }